feat: update claim guest flow ui cta's#749
feat: update claim guest flow ui cta's#749kushagrasarathe merged 2 commits intopeanut-wallet-devfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request refactors the Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant View as InitialClaimLinkView
participant ZeroDev as useZeroDev()
participant AppKit as useAppKit()
User->>View: Opens claim view
alt Not logged in & wallet not connected
View->>User: Display "Login" button and "Connect Wallet" option
User->>View: Click "Login"
View->>ZeroDev: Call handleLogin()
ZeroDev-->>View: Return login state
View->>User: Update UI to show claim action
else Logged in/Wallet connected
View->>User: Display claim button
end
alt External wallet connection invoked
User->>View: Click "Connect External Wallet"
View->>AppKit: Call openReownModal()
AppKit-->>View: Modal opened response
end
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 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: 0
🧹 Nitpick comments (1)
src/components/Claim/Link/Initial.view.tsx (1)
629-633: Add error message clarity for login failures.The error handling for login catches exceptions but displays a generic "Error logging in" message.
Consider providing more specific error messages when possible:
handleLogin().catch((e) => { - toast.error('Error logging in') + toast.error(e instanceof Error ? `Login failed: ${e.message}` : 'Error logging in') Sentry.captureException(e) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Claim/Link/Initial.view.tsx(6 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/components/Claim/Link/Initial.view.tsx (1)
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 (8)
src/components/Claim/Link/Initial.view.tsx (8)
4-5: Good addition of UI components for enhanced user experience.The addition of
DivideranduseToastcomponents from Bruddle helps improve both the visual separation of options and provide feedback to users, making the interface more user-friendly.
26-26: Appropriate imports for new functionality.The imports of
useZeroDev,useAppKit,Link, anduseRouterproperly support the new login flow and navigation capabilities being added to the component.Also applies to: 44-44, 47-48
77-80: Good use of hooks for enhanced functionality.The router, toast, and ZeroDev hooks are well utilized to support navigation, user feedback, and login functionality.
89-89: Good integration with external wallet connection.The
useAppKithook's modal opener is properly extracted for connecting external wallets.
623-650: Well-structured login options for users.The new conditional rendering block provides clear options for users who aren't logged in:
- Sign in with Peanut Wallet
- Set up a new Peanut Wallet
- Connect an external wallet
The use of a divider between the options improves visual organization.
652-682: Improved button logic with better state handling.The claim button implementation now properly handles:
- Different wallet states (Peanut vs external)
- Chain compatibility checks
- Various recipient types (wallet addresses vs bank accounts)
- Loading and disabled states
This creates a more robust user experience with appropriate feedback.
684-691: Good user conversion prompting.The new section that encourages users to create a Peanut account when they're connected but not logged in is a good conversion strategy that doesn't interfere with the primary claim action.
667-674: Comprehensive disabled state checks.The button disabled conditions properly handle all relevant states, preventing users from performing actions in invalid states.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/Claim/Link/Initial.view.tsx (1)
633-637: Add more specific error handling for login failures.Currently, the error message is generic ("Error logging in"). Consider providing more specific error information when possible to help users troubleshoot issues.
-handleLogin().catch((e) => { - toast.error('Error logging in') - Sentry.captureException(e) -}) +handleLogin().catch((e) => { + const errorMessage = e?.message || 'Error logging in' + toast.error(errorMessage.includes('technical error') ? 'Error logging in' : errorMessage) + Sentry.captureException(e) +})
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Claim/Link/Initial.view.tsx(7 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
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 (8)
src/components/Claim/Link/Initial.view.tsx (8)
4-5: The new imports enhance the component's functionality.The added imports provide necessary UI components (Divider), user feedback mechanisms (Toast), navigation capabilities (Link, Router), and authentication/wallet functionality (useZeroDev, useAppKit). These additions properly support the updated claim flow UI.
Also applies to: 26-26, 44-44, 47-48
77-80: The added hooks provide required functionality for the enhanced UI.The router for navigation, toast for user feedback, and the ZeroDev hook for handling login states are appropriately implemented. This setup enables proper user flows when claiming links with different wallet states.
89-89: AppKit integration enables external wallet connections.The
useAppKithook is properly utilized to access theopenmethod for the external wallet modal, which complements the login options.
133-133: Good enhancement to save the redirect URL before wallet connection.Adding the call to
saveRedirectUrl()ensures users will be returned to the claim page after connecting their wallet.
138-141: Well-implemented redirect URL storage function.The function correctly captures the current URL (including pathname, search parameters, and hash) and saves it to localStorage using the existing utility function. This provides a smooth user experience by returning users to their original location after authentication.
627-659: Clear login options improve the user experience.The new UI section provides multiple clear pathways for users without a connected wallet:
- Sign in with Peanut Wallet (with proper loading state)
- Get a new Peanut Wallet (with redirect URL saving)
- Connect an external wallet through the AppKit
The visual separation with the divider enhances readability and guides users through their options.
660-690: Button logic properly handles various claim scenarios.The refactored button includes appropriate conditions for:
- Cross-chain claims for Peanut Wallet users
- IBAN or US bank account recipients
- Routes that have been fetched
- Direct claims
The loading and disabled states prevent invalid actions during processing and when required data is missing.
692-703: Effective user acquisition prompt for non-account holders.The addition of a prompt encouraging connected users to create a Peanut account is strategically placed after the main action. This encourages account creation without blocking the primary claim functionality.
1 participant
contributes to TASK-9324
Summary by CodeRabbit