Hotfix for deposits: bypass wallet and exchange selection screen #1041
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe navigation logic and initial state of the crypto add-money page were modified. The default step now starts at token selection with "Other exchange" preselected as the source. Conditional navigation was added for the back button, and step transitions were updated to reflect these new defaults. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Suggested labels
✨ Finishing Touches
🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 1
🧹 Nitpick comments (1)
src/app/(mobile-ui)/add-money/crypto/page.tsx (1)
54-58: Ensure consistency between default source selection and back navigation logic.The condition checks for
selectedSource?.id === 'other-exchanges', which depends onCRYPTO_EXCHANGES[3]having this specific ID. This creates a coupling between the initial state setup and the navigation logic.Consider extracting the default exchange selection to a constant to ensure consistency:
+const DEFAULT_EXCHANGE_ID = 'other-exchanges' +const getDefaultExchange = () => CRYPTO_EXCHANGES.find(exchange => exchange.id === DEFAULT_EXCHANGE_ID) || null - const [selectedSource, setSelectedSource] = useState<CryptoSource | null>(CRYPTO_EXCHANGES[3]) + const [selectedSource, setSelectedSource] = useState<CryptoSource | null>(getDefaultExchange()) - if (selectedSource?.id === 'other-exchanges' && currentStep === 'tokenSelection') { + if (selectedSource?.id === DEFAULT_EXCHANGE_ID && currentStep === 'tokenSelection') {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/app/(mobile-ui)/add-money/crypto/page.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".
Learnt from: kushagrasarathe
PR: peanutprotocol/peanut-ui#869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#919
File: src/components/Withdraw/views/Initial.withdraw.view.tsx:87-87
Timestamp: 2025-06-18T19:56:55.443Z
Learning: In withdraw flows for Peanut Wallet, the PeanutActionDetailsCard should always display "USDC" as the token symbol because it shows the amount being withdrawn from the Peanut Wallet (which holds USDC), regardless of the destination token/chain selected by the user. The TokenSelector is used for choosing the withdrawal destination, not the source display.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#495
File: src/components/Global/TokenAmountInput/index.tsx:23-30
Timestamp: 2024-10-29T12:19:41.968Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), when the 'Max' button is clicked, we intentionally set the input denomination to 'TOKEN' because we are setting the value as token.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the `TokenContextProvider` component within `src/context/tokenSelector.context.tsx`, in the TypeScript React application, when data changes and before calling `fetchAndSetTokenPrice`, it is necessary to reset `selectedTokenData`, `selectedTokenPrice`, `selectedTokenDecimals`, and `inputDenomination` to discard stale data.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the `InitialCashoutView` component (`src/components/Cashout/Components/Initial.view.tsx`), linked bank accounts should not generate error states, and the `ValidatedInput` component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-08T20:13:42.967Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in `src/components/Request/Pay/Pay.tsx` within the `PayRequestLink` component, set `tokenPriceData.price` to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the `InitialView` component at `src/components/Request/Create/Views/Initial.view.tsx`, when setting the default chain and token in the `useEffect` triggered by `isPeanutWallet`, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-04T13:10:49.199Z
Learning: In `src/components/Request/Pay/Views/Initial.view.tsx`, it's acceptable to use the `!` operator in TypeScript to assert that `selectedTokenData` is not `null` or `undefined`, and potential runtime errors from accessing its properties without checks can be disregarded.
src/app/(mobile-ui)/add-money/crypto/page.tsx (17)
Learnt from: jjramirezn
PR: #413
File: src/context/tokenSelector.context.tsx:118-123
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In the TokenContextProvider component within src/context/tokenSelector.context.tsx, in the TypeScript React application, when data changes and before calling fetchAndSetTokenPrice, it is necessary to reset selectedTokenData, selectedTokenPrice, selectedTokenDecimals, and inputDenomination to discard stale data.
Learnt from: kushagrasarathe
PR: #869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".
Learnt from: kushagrasarathe
PR: #869
File: src/app/(mobile-ui)/withdraw/page.tsx:82-88
Timestamp: 2025-05-22T15:38:48.586Z
Learning: The country-specific withdrawal route exists at src/app/(mobile-ui)/withdraw/[...country]/page.tsx and renders the AddWithdrawCountriesList component with flow="withdraw".
Learnt from: Hugo0
PR: #413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, it's acceptable to use the ! operator in TypeScript to assert that selectedTokenData is not null or undefined, and potential runtime errors from accessing its properties without checks can be disregarded.
Learnt from: Hugo0
PR: #413
File: src/components/Request/Pay/Views/Initial.view.tsx:71-72
Timestamp: 2024-10-04T13:10:49.199Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, it's acceptable to use the ! operator in TypeScript to assert that selectedTokenData is not null or undefined, and potential runtime errors from accessing its properties without checks can be disregarded.
Learnt from: jjramirezn
PR: #422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:25:45.170Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, both txFee and utils.formatTokenAmount(...) return strings, ensuring that calculatedFee consistently returns a string without the need for additional type conversion.
Learnt from: jjramirezn
PR: #422
File: src/components/Request/Pay/Views/Initial.view.tsx:76-78
Timestamp: 2024-10-07T15:28:25.280Z
Learning: In src/components/Request/Pay/Views/Initial.view.tsx, both txFee and utils.formatTokenAmount(estimatedGasCost, 3) return strings, ensuring consistent return types for calculatedFee.
Learnt from: jjramirezn
PR: #958
File: src/app/actions/tokens.ts:266-266
Timestamp: 2025-07-07T20:22:11.092Z
Learning: In src/app/actions/tokens.ts, within the fetchWalletBalances function, using the non-null assertion operator ! on process.env.MOBULA_API_KEY! is intentional and correct, and should not be flagged for replacement with explicit validation.
Learnt from: jjramirezn
PR: #551
File: src/components/Request/Create/Views/Initial.view.tsx:151-156
Timestamp: 2024-12-02T17:19:18.532Z
Learning: In the InitialView component at src/components/Request/Create/Views/Initial.view.tsx, when setting the default chain and token in the useEffect triggered by isPeanutWallet, it's acceptable to omit the setters from the dependency array and not include additional error handling for invalid defaults.
Learnt from: jjramirezn
PR: #469
File: src/app/request/pay/page.tsx:25-25
Timestamp: 2024-10-22T18:10:56.955Z
Learning: In the src/app/request/pay/page.tsx file, the PreviewType enum values are strings, so when adding previewType to URLSearchParams, there's no need to convert them to strings.
Learnt from: jjramirezn
PR: #631
File: src/components/Create/Create.tsx:108-112
Timestamp: 2025-01-16T13:14:40.363Z
Learning: In the Peanut UI codebase, the resetTokenContextProvider function from tokenSelectorContext is a stable function reference that doesn't change, so it doesn't need to be included in useEffect dependencies.
Learnt from: jjramirezn
PR: #469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:27.670Z
Learning: In src/app/request/pay/page.tsx, if linkRes is not OK in the generateMetadata function, the desired behavior is to use the standard title and preview image without throwing an error.
Learnt from: Hugo0
PR: #422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-08T20:13:42.967Z
Learning: When the token price cannot be fetched in src/components/Request/Pay/Pay.tsx within the PayRequestLink component, set tokenPriceData.price to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: Hugo0
PR: #422
File: src/components/Request/Pay/Pay.tsx:103-111
Timestamp: 2024-10-07T13:42:00.443Z
Learning: When the token price cannot be fetched in src/components/Request/Pay/Pay.tsx within the PayRequestLink component, set tokenPriceData.price to 0 to ensure the UI remains functional. Since Squid uses their own price engine for x-chain fulfillment transactions, this approach will not affect the transaction computation.
Learnt from: jjramirezn
PR: #484
File: src/components/Cashout/Components/Initial.view.tsx:273-274
Timestamp: 2024-10-25T11:33:46.776Z
Learning: In the InitialCashoutView component (src/components/Cashout/Components/Initial.view.tsx), linked bank accounts should not generate error states, and the ValidatedInput component will clear any error messages if needed. Therefore, it's unnecessary to manually clear the error state when selecting or clearing linked bank accounts.
Learnt from: jjramirezn
PR: #424
File: src/components/Global/TokenSelector/TokenSelector.tsx:197-211
Timestamp: 2024-10-11T01:14:15.489Z
Learning: In src/components/Global/TokenSelector/TokenSelector.tsx, when the calculation within functions like byChainAndText is not computationally expensive, it's acceptable to avoid using useCallback for memoization.
Learnt from: jjramirezn
PR: #495
File: src/components/Create/useCreateLink.tsx:647-657
Timestamp: 2024-10-29T16:06:38.812Z
Learning: In the React code for useCreateLink in src/components/Create/useCreateLink.tsx, the switchNetwork function used within useCallback hooks is stable and does not need to be included in the dependency arrays.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Deploy-Preview
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
src/app/(mobile-ui)/add-money/crypto/page.tsx (1)
77-77: LGTM! Navigation flow adjustment is consistent with the bypass.The change from
'sourceSelection'to'tokenSelection'correctly aligns the back navigation with the new flow where source selection is bypassed for exchanges.
Updated flow -
Screen.Recording.2025-07-31.at.3.36.22.PM.mov