Fixes to peanut.me #750
Fixes to peanut.me #750
Conversation
…egration Add support for Polygon chain and PNT token in wallet, enabling the pinta beer payment use case. This integrates multiple chains within same passkey smart account, allowing users to pay with PNT tokens at partner bars during Aleph conference.
[TASK-9341] feat: PoC for multi-chain support for peanut wallets
This reverts commit 912f6d3.
fix: wallet header confirm modal condition + ui
feat: pinta claim modal ui + wallet card ui
feat: pinta account page ui
fix: cashout link
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request implements multiple code refactorings and UI updates across the application. Key changes include replacing plain text addresses with clickable AddressLink components, enhancing metadata generation with address validation, refactoring wallet connection logic with a new helper, and updating UI texts and translation attributes. The modifications span several components in payment, claim, wallet, and setup flows, aiming to simplify address handling and improve user interface consistency while adding minor comments for future development considerations. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant I as InstallPWA Component
U->>I: Open installation page
I->>I: Detect device type & set isDesktop
alt Mobile Device
I->>U: Display "Install Peanut" mobile instructions
else Desktop Device
I->>U: Display QR Code & desktop instructions
end
sequenceDiagram
participant U as User
participant IC as InitialClaimLinkView
participant Z as Wallet Connection (useZeroDev)
participant R as Router
U->>IC: Click "Connect Wallet"
IC->>IC: Execute handleConnectWallet
IC->>IC: Call saveRedirectUrl (store current URL)
IC->>Z: Initiate wallet connection
IC->>R: Navigate based on connection outcome
Possibly related PRs
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
src/hooks/useZeroDev.ts (1)
35-35: Typo in environmental variable name "DOMAIM"There's a typo in the environment variable name - "DOMAIM" should be "DOMAIN".
-// Future note: could be `${handle}.${process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIM || 'peanut.me'}` (have to change BE too) +// Future note: could be `${handle}.${process.env.NEXT_PUBLIC_JUSTANAME_ENS_DOMAIN || 'peanut.me'}` (have to change BE too)src/app/(mobile-ui)/history/page.tsx (1)
74-80: Consider using a more efficient implementationThere's a potential redundancy as both the formatter and the actual JSX implementation at line 176 render the same component with similar markup. Consider refactoring to use a shared implementation or simplifying this structure.
-recipientAddressFormatter: (address: string) => { - return ( - <> - To <AddressLink address={address} /> - </> - ) -}, +// Either remove this formatter entirely if line 176 is the only usage +// Or create a reusable component: +recipientAddressFormatter: (address: string) => <RecipientAddress address={address} />,src/context/authContext.tsx (1)
315-315: Remove or modify console.log statementThere's a console.log statement that appears to be for debugging purposes. Consider removing it or wrapping it in a development-only conditional check.
-console.log({ user }) +// In development environments only: +if (process.env.NODE_ENV === 'development') { + console.log({ user }) +}src/components/Setup/Views/InstallPWA.tsx (2)
80-96: Device detection logic improved but potential logging issue.The device detection logic has been enhanced to include Mac and Macintosh in the iOS device detection, which is good. However, the
console.logstatement on line 99 is attempting to log thedeviceTypestate immediately after setting it, which may display outdated information due to React's asynchronous state updates.Consider moving the console.log to a useEffect with deviceType as a dependency:
- console.log('Detected Device Type:', deviceType)Add a new useEffect:
useEffect(() => { console.log('Detected Device Type:', deviceType) }, [deviceType])
154-155: QR code URL construction may need validation.The QR code URL uses environment variables but the fallback mechanism may not handle all edge cases.
Consider adding validation or logging to handle missing environment variables:
- <QRCodeWrapper url={process.env.NEXT_PUBLIC_BASE_URL + '/setup' || window.location.origin} /> + <QRCodeWrapper url={(process.env.NEXT_PUBLIC_BASE_URL ? + process.env.NEXT_PUBLIC_BASE_URL + '/setup' : + window.location.origin + '/setup')} />src/components/Create/Link/Confirm.view.tsx (1)
270-270: Remove TODO comment since it's already implemented.The TODO comment indicates that AddressLink should be used, but it's already being implemented in this PR.
- {/* TODO: use addresslink */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
src/app/(mobile-ui)/history/page.tsx(1 hunks)src/app/[...recipient]/layout.tsx(2 hunks)src/components/Claim/Link/Initial.view.tsx(8 hunks)src/components/Claim/Link/Onchain/Confirm.view.tsx(3 hunks)src/components/Create/Link/Confirm.view.tsx(4 hunks)src/components/Global/AddressLink/index.tsx(1 hunks)src/components/Global/WalletHeader/index.tsx(1 hunks)src/components/Global/WalletNavigation/index.tsx(1 hunks)src/components/Home/WalletCard.tsx(3 hunks)src/components/Payment/History/index.tsx(1 hunks)src/components/Payment/PaymentForm/index.tsx(2 hunks)src/components/Payment/PaymentInfoRow.tsx(1 hunks)src/components/Payment/Views/Confirm.payment.view.tsx(3 hunks)src/components/Payment/Views/Payment.status.view.tsx(2 hunks)src/components/Profile/Components/ProfileSection.tsx(1 hunks)src/components/Setup/Setup.consts.tsx(6 hunks)src/components/Setup/Views/InstallPWA.tsx(7 hunks)src/context/authContext.tsx(1 hunks)src/hooks/useZeroDev.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
src/components/Global/AddressLink/index.tsx (1)
src/utils/general.utils.ts (1) (1)
printableAddress(63-66)
src/components/Claim/Link/Initial.view.tsx (2)
src/utils/general.utils.ts (1) (1)
saveToLocalStorage(93-104)src/constants/zerodev.consts.ts (1) (1)
PEANUT_WALLET_CHAIN(17-17)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (43)
src/components/Payment/PaymentInfoRow.tsx (1)
11-11: LGTM: Enhanced label to support React componentsThe type expansion from
stringtostring | React.ReactNodeis a good improvement that allows for more flexibility in rendering complex content likeAddressLinkcomponents in labels.src/app/(mobile-ui)/history/page.tsx (1)
74-80: Good improvement replacing plain text with clickable address linksThis change enhances the user experience by making addresses clickable through the
AddressLinkcomponent instead of rendering them as plain text.src/context/authContext.tsx (1)
8-8:❓ Verification inconclusive
TODO comment for future toast implementation
The TODO comment indicates a future plan to replace Chakra UI toasts with a consistent implementation used throughout the app. Consider creating a ticket to track this work or implement the change as part of a focused refactoring effort.
To ensure consistency across the codebase, consider running the following command to check where different toast implementations are being used:
🏁 Script executed:
#!/bin/bash # Find toast implementations across the codebase echo "Chakra UI Toast usage:" rg "useToast.*from\s+['\"]@chakra-ui\/react['\"]" --type tsx --type ts echo "\nOther toast implementations:" rg "toast\(" --type tsx --type ts | grep -v "chakra-ui"Length of output: 426
Action: Review and Consolidate Toast Notification Usage
The file
src/context/authContext.tsxstill includes the Chakra UIuseToastimport (as seen on line 8), which is flagged by the TODO comment. This indicates our plan to transition to a consistent in-app toast implementation.
- Please run the updated shell script above to verify all toast usages in the codebase.
- Based on the results, consider filing a ticket to either initiate a refactoring effort or incorporate the change in a focused update.
🏁 Script executed:
#!/bin/bash # Corrected search for Chakra UI toast usage: echo "Chakra UI Toast usage:" rg "from ['\"]@chakra-ui/react['\"]" --type-add "tsx:*.tsx" --type-add "ts:*.ts" --type ts --type tsx || true echo "" # Search for other toast implementations (excluding Chakra UI): echo "Other toast implementations:" rg "toast\\(" --type-add "tsx:*.tsx" --type-add "ts:*.ts" --type ts --type tsx | grep -v "chakra-ui" || trueLength of output: 3500
Action: Establish a consistent toast notification strategy across the codebase
The file
src/context/authContext.tsx(line 8) still imports Chakra UI’suseToast—accompanied by a TODO comment—indicating a planned migration to our standard toast implementation. Our verification shows that:
- Chakra UI toast components are used in several key files (e.g.,
src/context/authContext.tsx,src/styles/theme.ts, etc.).- There are multiple invocations of
toast(insrc/context/authContext.tsxthat rely on this import.- Similar toast usages appear across other parts of the codebase, highlighting an inconsistency in how notifications are handled.
Recommendation:
Please consider creating a ticket or scheduling a dedicated refactoring effort to replace Chakra UI toasts with the consistent, custom toast implementation used throughout the app.src/components/Global/WalletNavigation/index.tsx (1)
79-82: Good implementation of translation prevention.Adding
translate="no"attribute andnotranslateclass to the Link component ensures that navigation items aren't automatically translated by browser translation services. This is important for maintaining consistent branding and navigation terms across different language settings.src/components/Profile/Components/ProfileSection.tsx (1)
32-34: Effective translation prevention for domain name.Good addition of both the
notranslateclass andtranslate="no"attribute to prevent the domain name "peanut.me/" from being translated. This ensures the domain remains consistent regardless of the user's language settings, which is crucial for brand identity and functionality.src/components/Claim/Link/Onchain/Confirm.view.tsx (3)
7-7: Good modular approach with PeanutSponsored component.Adding the import for the PeanutSponsored component promotes code reuse and modularity.
191-191: Improved spacing with py-2 addition.The addition of
py-2provides consistent vertical padding, enhancing the visual layout.
228-228: Good refactoring with PeanutSponsored component.Replacing the inline code with the PeanutSponsored component improves code maintainability and consistency. This component abstraction makes future updates to sponsored transaction messaging easier to manage across the application.
src/components/Payment/Views/Payment.status.view.tsx (2)
144-149: Improved code simplification for recipient link handling.The code has been effectively simplified to use a more concise conditional expression for determining the recipient identifier. Using AddressLink component ensures consistent address display throughout the application.
151-155: Good simplification of payer link logic.Simplifying the payer link generation by directly using the AddressLink component reduces code complexity while maintaining functionality. This change aligns with the broader effort to standardize address display across the application.
src/components/Payment/History/index.tsx (1)
18-18: Good improvement to address handling.The change simplifies the interface by passing only the
recipient.identifierto theAddressLinkcomponent, making the code cleaner while maintaining functionality.src/components/Payment/Views/Confirm.payment.view.tsx (3)
33-33: Good addition of AddressLink import.This import supports the UI improvements implemented in this file.
508-514: Improved recipient address display.Replacing the plain text representation with the
AddressLinkcomponent enhances user experience by making the address clickable and consistently formatted.
525-535: Improved label with interactive address.Transforming the recipient address in the label to a clickable
AddressLinkprovides a more interactive UI while maintaining the semantic meaning of "X will receive".src/app/[...recipient]/layout.tsx (2)
2-3: Good addition of address formatting utilities.These imports provide essential functionality for proper address validation and formatting.
65-70: Enhanced metadata with proper address formatting.The implementation now properly formats blockchain addresses in metadata titles, improving readability while preserving non-address identifiers. This is particularly important for SEO and sharing links.
src/components/Global/WalletHeader/index.tsx (1)
368-368: Prevent automatic translation of addresses.Adding
notranslateclass andtranslate="no"attribute prevents browser translation tools from altering cryptocurrency addresses, which could break their validity and cause funds to be sent to incorrect destinations.src/components/Setup/Views/InstallPWA.tsx (2)
156-159: Unresolved TODO comment.There's a TODO comment indicating incomplete functionality for setup instructions after login.
This comment suggests incomplete functionality. Please ensure this is tracked in your issue management system and consider whether this needs to be resolved before merging.
207-215: Improved conditional rendering of image.The conditional rendering of the image based on device type enhances the user experience by showing relevant content only.
This change appropriately optimizes the UI for different device types.
src/components/Payment/PaymentForm/index.tsx (2)
407-416: Improved address display with AddressLink component.The implementation effectively replaces a custom label approach with the standardized AddressLink component, enhancing UI consistency.
This change simplifies the code and improves UI consistency across the application.
537-539: Simplified recipient address rendering.Direct use of the AddressLink component here improves code readability and maintains UI consistency.
This simplification aligns with the broader effort to standardize address display throughout the application.
src/components/Home/WalletCard.tsx (3)
85-85: Good explanatory comment.Adding a comment to explain why AddressLink isn't used here helps other developers understand the design decision.
This improves code maintainability by documenting an architectural decision.
336-339: Improved translation handling for addresses.Adding the "notranslate" class and translate="no" attribute prevents browser translation tools from accidentally modifying addresses, which can cause serious issues.
This is a good practice for sensitive data like addresses.
361-366: Improved display name consistency with baseUrl.Now the display name and copy text are dynamically generated using the baseUrl variable, ensuring consistency with the actual environment.
This makes the application more adaptable to different deployment environments.
src/components/Setup/Setup.consts.tsx (3)
42-53: Enhanced clarity in passkey setup descriptions.The updated text better emphasizes the security advantages of passkeys over traditional passwords and seed phrases.
The clearer wording helps users understand the value proposition of using passkeys.
64-87: Improved user engagement in setup flow descriptions.The text changes across multiple steps improve clarity and add a more engaging tone, particularly with the added mention of "goodies" for notifications and clearer instructions for the PWA install.
These copy improvements will likely increase user engagement and completion of the setup flow.
98-98: Minor copy improvement.Changing from "for payments" to "for your payments" makes the text more personal and user-focused.
This small change enhances the user-centered approach of the application.
src/components/Create/Link/Confirm.view.tsx (4)
9-10: New components imported for enhanced UI.The addition of these components improves the UI by providing consistent patterns for displaying information, formatting addresses as clickable links, and indicating sponsored transactions.
Also applies to: 30-30
266-267: Good use of AddressLink for enhanced address display.Using the AddressLink component for recipient addresses improves usability by making addresses clickable and consistently formatted.
278-280: Improved address presentation in description.Replacing plain text with AddressLink component increases consistency and improves user experience by making addresses clickable.
333-351: Streamlined network cost display using InfoRow component.The refactoring improves code organization by:
- Using a dedicated InfoRow component for displaying network costs
- Clearly separating the logic for Peanut-sponsored transactions
- Improving readability with a cleaner implementation
The conditional rendering based on wallet type (isPeanutWallet) is now more explicit and maintainable.
src/components/Global/AddressLink/index.tsx (6)
7-7: Imported printableAddress utility for consistent address formatting.Good use of a dedicated utility function for address formatting.
9-13: Well-defined props interface improves component type safety.Adding a proper TypeScript interface for the component props enhances code readability and type safety.
15-20: Improved component initialization.The component now uses the
printableAddressutility function when initializing the display address, providing consistent formatting from the start.
28-40: Enhanced ENS name handling logic.The updated useEffect:
- Includes clearer comments about the logic
- Properly handles ENS name normalization by stripping domains
- Updates both display and URL addresses consistently
This improves user experience by showing clean, normalized ENS names when available.
42-44: Simplified URL generation.The URL generation is now much cleaner and more maintainable, with a simple consistent format for all address types.
45-49: Streamlined component rendering.The component now renders a consistent Link element with proper styling, improving UI consistency throughout the application.
src/components/Claim/Link/Initial.view.tsx (6)
4-5: Added necessary imports and hooks for enhanced functionality.The added imports and hooks improve the component's capabilities:
- Toast notifications for error handling
- ZeroDev integration for wallet connection
- AppKit integration for modal handling
- Navigation utilities for better user flow
This creates a more robust foundation for the wallet connection features.
Also applies to: 12-12, 26-27, 44-50, 77-79
138-141: Extracted URL saving logic into a dedicated helper.Moving the redirect URL logic to a separate function improves code organization and reusability, especially as this function is called from multiple places in the component.
578-579: Added padding for better spacing.The additional padding improves the visual spacing of the recipient information section.
623-623: Simplified transaction fee display with PeanutSponsored component.Replacing the complex fee structure with the PeanutSponsored component creates a more consistent UI across the app while clearly communicating that Peanut is covering transaction costs.
627-659: Improved wallet connection options UI.The new UI provides clear options for users who aren't connected:
- Sign in with Peanut Wallet
- Create a new Peanut Wallet
- Connect an external wallet
This improves the user experience by offering multiple authentication paths with clear labeling.
660-704: Refactored button logic for better user flow.The improved button logic:
- Handles multiple scenarios more clearly (Peanut wallet, cross-chain, IBAN/US accounts)
- Shows appropriate button text based on the action
- Adds educational text for non-registered users
- Properly manages loading and disabled states
This creates a more intuitive user experience across different claim scenarios.
| import Link from 'next/link' | ||
| import { useSearchParams } from 'next/navigation' | ||
| import { useEffect, useMemo } from 'react' | ||
| import { isAddress } from 'viem' |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Good addition of address validation utility.
Adding the import for isAddress from viem provides a reliable way to validate Ethereum addresses, though I notice it's imported but not explicitly used in the changed code.
🏁 Script executed:
#!/bin/bash
# Check if isAddress is used elsewhere in this file
rg --no-heading "isAddress\(" src/components/Payment/Views/Payment.status.view.tsxLength of output: 84
Unused Import in Payment.status.view.tsx – Action Required
The addition of the isAddress utility from viem is a promising step toward improving Ethereum address validation. However, our verification indicates that it isn’t used anywhere in this file. If this import is reserved for future use, please add a clarifying comment; otherwise, it’s best to remove it to keep the code clean.
- File:
src/components/Payment/Views/Payment.status.view.tsx - Line: 21
| const baseUrl = process.env.NEXT_PUBLIC_BASE_URL?.split('://')[1] || 'peanut.me' | ||
| return { |
There was a problem hiding this comment.
Potential issue with baseUrl extraction.
The current implementation assumes the environment variable always includes a protocol (like 'https://').
The split operation could fail if the environment variable doesn't contain '://':
- const baseUrl = process.env.NEXT_PUBLIC_BASE_URL?.split('://')[1] || 'peanut.me'
+ const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?
+ (process.env.NEXT_PUBLIC_BASE_URL.includes('://') ?
+ process.env.NEXT_PUBLIC_BASE_URL.split('://')[1] :
+ process.env.NEXT_PUBLIC_BASE_URL) :
+ 'peanut.me'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const baseUrl = process.env.NEXT_PUBLIC_BASE_URL?.split('://')[1] || 'peanut.me' | |
| return { | |
| const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ? | |
| (process.env.NEXT_PUBLIC_BASE_URL.includes('://') ? | |
| process.env.NEXT_PUBLIC_BASE_URL.split('://')[1] : | |
| process.env.NEXT_PUBLIC_BASE_URL) : | |
| 'peanut.me' | |
| return { |
Summary by CodeRabbit
New Features
Refactor
Style