fix: qa workshop bugs #1584
Conversation
…ction details of already-paid charges
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR introduces a new receipt view to the semantic request payment flow, enriches transaction claim details with metadata and safer access patterns, enables the "Exchange or Wallet" action method while filtering it from certain flows, updates icon sizing across multiple UI components, and improves balance loading logic in payment flows to prevent premature insufficient balance errors. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
src/components/Global/ErrorAlert/index.tsx (1)
14-14: Optional: Redundant text-error class on Icon.The parent
divat line 13 already appliestext-error, which is inherited by the Icon. Explicitly addingtext-errorto the Icon's className is redundant, though it may improve code clarity if you prefer explicit styling.src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx (1)
82-82: Consider tracking the TODO for exchange-or-wallet filter removal.The inline TODO comment indicates this filter should be removed in the "deposit project." Consider creating a tracked issue or ticket for this work to ensure it's not forgotten when that project begins.
Would you like me to help draft an issue description for tracking this TODO?
src/features/payments/shared/components/PaymentMethodActionList.tsx (1)
45-49: LGTM!The
exchange-or-walletexclusion is intentional for this payment flow. The TODO comment appropriately documents the planned removal.Note: Similar filtering logic exists in
RequestPotActionList.tsx. Consider extracting this filter pattern into a shared utility when addressing the TODO to ensure consistency.src/constants/actionlist.consts.ts (1)
40-46: LGTM!The
exchange-or-walletpayment method is correctly added with appropriate metadata and icons.Consider extracting this entry as a shared constant since it's duplicated in
DEVCONNECT_CLAIM_METHODS(lines 58-63):🔎 Optional refactor to reduce duplication
+const EXCHANGE_OR_WALLET_METHOD: PaymentMethod = { + id: 'exchange-or-wallet', + title: 'Exchange or Wallet', + description: 'Binance, Metamask and more', + icons: [binanceIcon, TRUST_WALLET_SMALL_LOGO, METAMASK_LOGO], + soon: false, +} + export const ACTION_METHODS: PaymentMethod[] = [ // ... other methods - { - id: 'exchange-or-wallet', - title: 'Exchange or Wallet', - description: 'Binance, Metamask and more', - icons: [binanceIcon, TRUST_WALLET_SMALL_LOGO, METAMASK_LOGO], - soon: false, - }, + EXCHANGE_OR_WALLET_METHOD, ] export const DEVCONNECT_CLAIM_METHODS: PaymentMethod[] = [ // ... devconnect method - { - id: 'exchange-or-wallet', - title: 'Exchange or Wallet', - description: 'Binance, Metamask and more', - icons: [binanceIcon, TRUST_WALLET_SMALL_LOGO, METAMASK_LOGO], - soon: false, - }, + EXCHANGE_OR_WALLET_METHOD, ]src/components/Claim/Claim.tsx (1)
179-188: Consider caching the chain name to avoid redundant function calls.
getChainName(claimLinkData.chainId)is called twice (lines 182 and 184-185). While functionally correct, this could be optimized by computing the chain name once.🔎 Proposed optimization
+ const chainName = tokenDetails ? getChainName(claimLinkData.chainId) : undefined tokenDisplayDetails: tokenDetails ? { tokenSymbol: tokenDetails.symbol, - chainName: getChainName(claimLinkData.chainId), + chainName, tokenIconUrl: getTokenLogo(tokenDetails.symbol), - chainIconUrl: getChainName(claimLinkData.chainId) - ? getChainLogo(getChainName(claimLinkData.chainId)!) - : undefined, + chainIconUrl: chainName ? getChainLogo(chainName) : undefined, } : undefined,
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
src/app/receipt/[entryId]/page.tsxsrc/components/Claim/Claim.tsxsrc/components/Claim/Link/FlowManager.tsxsrc/components/Claim/Link/SendLinkActionList.tsxsrc/components/Common/SavedAccountsView.tsxsrc/components/Global/ErrorAlert/index.tsxsrc/components/Global/PeanutActionDetailsCard/index.tsxsrc/components/Global/WalletNavigation/index.tsxsrc/components/Payment/PaymentInfoRow.tsxsrc/components/Send/views/SendRouter.view.tsxsrc/components/TransactionDetails/TransactionDetailsReceipt.tsxsrc/constants/actionlist.consts.tssrc/features/payments/flows/contribute-pot/components/RequestPotActionList.tsxsrc/features/payments/flows/contribute-pot/useContributePotFlow.tssrc/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsxsrc/features/payments/flows/semantic-request/SemanticRequestPage.tsxsrc/features/payments/flows/semantic-request/useSemanticRequestFlow.tssrc/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsxsrc/features/payments/shared/components/PaymentMethodActionList.tsx
💤 Files with no reviewable changes (1)
- src/components/Claim/Link/FlowManager.tsx
🧰 Additional context used
🧠 Learnings (32)
📓 Common learnings
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-08T20:13:42.967Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
📚 Learning: 2025-10-29T11:27:59.248Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1368
File: src/components/Common/ActionList.tsx:109-111
Timestamp: 2025-10-29T11:27:59.248Z
Learning: In `src/components/Common/ActionList.tsx`, the `balance` from `useWallet()` hook is always in USDC (as a formatted string), making it directly comparable to USD amounts without conversion. The comparison `Number(balance) >= amountInUsd` is intentional and correct.
Applied to files:
src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsxsrc/components/Claim/Claim.tsxsrc/features/payments/flows/contribute-pot/useContributePotFlow.tssrc/constants/actionlist.consts.tssrc/features/payments/shared/components/PaymentMethodActionList.tsx
📚 Learning: 2025-08-26T17:38:37.055Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1132
File: src/components/Common/ActionList.tsx:153-156
Timestamp: 2025-08-26T17:38:37.055Z
Learning: In ActionList.tsx, when there are circular dependency concerns with ACTION_METHODS being imported by other components, the preferred solution is to move ACTION_METHODS to a separate constants file (like src/constants/actionlist.consts.ts) rather than using prop drilling. This centralizes constants management and creates a cleaner dependency graph.
Applied to files:
src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsxsrc/constants/actionlist.consts.tssrc/features/payments/shared/components/PaymentMethodActionList.tsxsrc/components/Send/views/SendRouter.view.tsx
📚 Learning: 2025-09-18T09:30:42.901Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1230
File: src/app/(mobile-ui)/withdraw/page.tsx:92-97
Timestamp: 2025-09-18T09:30:42.901Z
Learning: In src/app/(mobile-ui)/withdraw/page.tsx, the useEffect that calls setShowAllWithdrawMethods(true) when amountFromContext exists is intentionally designed to run only on component mount (empty dependency array), not when amountFromContext changes. This is the correct behavior for the withdraw flow where showing all methods should only happen on initial load when an amount is already present.
Applied to files:
src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsxsrc/components/Claim/Link/SendLinkActionList.tsxsrc/features/payments/flows/contribute-pot/useContributePotFlow.tssrc/features/payments/shared/components/PaymentMethodActionList.tsxsrc/components/Send/views/SendRouter.view.tsxsrc/features/payments/flows/semantic-request/useSemanticRequestFlow.ts
📚 Learning: 2024-10-07T15:50:29.173Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 422
File: src/components/Request/Pay/Pay.consts.ts:34-34
Timestamp: 2024-10-07T15:50:29.173Z
Learning: In `src/components/Request/Pay` components, the `tokenPrice` property in the `IPayScreenProps` interface is only relevant to these views. Other components using `IPayScreenProps` do not need to handle `tokenPriceData` when it's updated in these components.
Applied to files:
src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsxsrc/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsxsrc/components/Payment/PaymentInfoRow.tsxsrc/features/payments/flows/semantic-request/useSemanticRequestFlow.ts
📚 Learning: 2024-10-07T15:25:45.170Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsxsrc/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsxsrc/components/Claim/Claim.tsxsrc/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsxsrc/features/payments/flows/semantic-request/useSemanticRequestFlow.ts
📚 Learning: 2024-10-22T18:10:56.955Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsxsrc/features/payments/flows/semantic-request/SemanticRequestPage.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 564
File: src/components/Request/Pay/Views/Initial.view.tsx:430-430
Timestamp: 2024-12-11T10:13:22.806Z
Learning: In the React TypeScript file `src/components/Request/Pay/Views/Initial.view.tsx`, when reviewing the `InitialView` component, do not flag potential issues with using non-null assertion `!` on the `slippagePercentage` variable, as handling undefined values in this context is considered out of scope.
Applied to files:
src/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsxsrc/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsxsrc/components/Send/views/SendRouter.view.tsx
📚 Learning: 2024-10-07T15:28:25.280Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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`.
Applied to files:
src/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsxsrc/components/Claim/Claim.tsxsrc/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsxsrc/features/payments/flows/semantic-request/useSemanticRequestFlow.ts
📚 Learning: 2025-09-16T17:27:39.840Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1201
File: src/components/Payment/Views/MantecaFulfillment.view.tsx:56-56
Timestamp: 2025-09-16T17:27:39.840Z
Learning: In the TRequestResponse interface (src/services/services.types.ts), recipientAccount is a required field, not optional. When requestDetails is not null, recipientAccount and its nested user.username properties are guaranteed to exist. Only requestDetails itself can be null (typed as TRequestResponse | null).
Applied to files:
src/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsx
📚 Learning: 2025-10-08T17:13:13.155Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1299
File: src/app/(mobile-ui)/points/page.tsx:41-51
Timestamp: 2025-10-08T17:13:13.155Z
Learning: In `src/app/(mobile-ui)/points/page.tsx`, the icon name "invite-heart" is intentionally used (not "inviter-heart") when displaying who invited the current user, as this is a deliberate design choice despite semantic differences with UserHeader usage.
Applied to files:
src/components/Common/SavedAccountsView.tsxsrc/components/Global/WalletNavigation/index.tsxsrc/components/Global/PeanutActionDetailsCard/index.tsxsrc/components/Send/views/SendRouter.view.tsx
📚 Learning: 2024-10-25T11:33:46.776Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/components/Common/SavedAccountsView.tsx
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 535
File: src/components/Claim/Claim.tsx:142-146
Timestamp: 2024-11-18T21:36:11.486Z
Learning: In `src/components/Claim/Claim.tsx`, external calls like token price fetching and cross-chain details retrieval are already encapsulated within existing `try...catch` blocks, so additional error handling may be unnecessary.
Applied to files:
src/components/Claim/Claim.tsxsrc/components/Claim/Link/SendLinkActionList.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/components/Claim/Claim.tsx
📚 Learning: 2024-12-02T17:19:18.532Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/components/Claim/Claim.tsxsrc/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx
📚 Learning: 2024-10-29T16:06:38.812Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/components/Claim/Claim.tsx
📚 Learning: 2024-10-11T01:14:15.489Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/components/Claim/Claim.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsxsrc/components/Send/views/SendRouter.view.tsx
📚 Learning: 2024-10-24T12:38:32.793Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 478
File: src/components/Request/Create/Views/Initial.view.tsx:81-89
Timestamp: 2024-10-24T12:38:32.793Z
Learning: In `src/components/Request/Create/Views/Initial.view.tsx`, the function `getTokenDetails` is a simple function that does not fetch from the network or perform asynchronous operations.
Applied to files:
src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx
📚 Learning: 2024-10-22T18:11:36.864Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 469
File: src/app/request/pay/page.tsx:32-49
Timestamp: 2024-10-22T18:11:36.864Z
Learning: In `src/app/request/pay/page.tsx`, the `id` parameter is accessed via `searchParams.id` in the `generateMetadata` function.
Applied to files:
src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx
📚 Learning: 2025-10-24T13:44:39.473Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1332
File: src/components/Global/TokenAmountInput/index.tsx:141-150
Timestamp: 2025-10-24T13:44:39.473Z
Learning: In the `TokenAmountInput` component (`src/components/Global/TokenAmountInput/index.tsx`), the slider feature (controlled by `showSlider` prop) is only shown for USD input mode. When the slider is used with `maxAmount`, the `selectedAmount` is computed in USD and `isInputUsd` is always `true`, so the conversion in `onChange` handles it correctly.
Applied to files:
src/features/payments/flows/contribute-pot/useContributePotFlow.ts
📚 Learning: 2024-10-23T09:38:27.670Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/features/payments/flows/semantic-request/SemanticRequestPage.tsxsrc/app/receipt/[entryId]/page.tsx
📚 Learning: 2025-09-05T07:31:11.396Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1185
File: src/components/Claim/useClaimLink.tsx:14-0
Timestamp: 2025-09-05T07:31:11.396Z
Learning: In the peanut-ui codebase, `window.history.replaceState` is preferred over `router.replace` when immediate/synchronous URL parameter updates are required, as `router.replace` is asynchronous and doesn't guarantee instant URL changes that subsequent code can rely on. This pattern is used consistently across usePaymentInitiator.ts, Confirm.payment.view.tsx, and useClaimLink.tsx.
Applied to files:
src/features/payments/flows/semantic-request/SemanticRequestPage.tsx
📚 Learning: 2025-07-07T19:55:14.380Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 956
File: src/app/actions/tokens.ts:220-227
Timestamp: 2025-07-07T19:55:14.380Z
Learning: In the Mobula API integration within `src/app/actions/tokens.ts`, the `asset.asset.blockchains` array and `asset.contracts_balances` array are synchronized, meaning for every blockchain in the blockchains array, there will be a corresponding entry in the contracts_balances array with matching address. This makes the non-null assertion operator safe to use when accessing `contractInfo!.decimals` in the `fetchWalletBalances` function.
Applied to files:
src/constants/actionlist.consts.ts
📚 Learning: 2025-07-07T20:22:11.092Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui 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.
Applied to files:
src/constants/actionlist.consts.ts
📚 Learning: 2025-08-26T15:25:53.328Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1132
File: src/app/[...recipient]/client.tsx:394-397
Timestamp: 2025-08-26T15:25:53.328Z
Learning: In `src/components/Common/ActionListDaimoPayButton.tsx`, the `handleCompleteDaimoPayment` function should not display error messages to users when DB update fails because the Daimo payment itself has succeeded - showing errors would be confusing since the payment was successful.
Applied to files:
src/features/payments/shared/components/PaymentMethodActionList.tsx
📚 Learning: 2025-05-22T15:38:48.586Z
Learnt from: kushagrasarathe
Repo: peanutprotocol/peanut-ui 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".
Applied to files:
src/features/payments/shared/components/PaymentMethodActionList.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1094
File: src/utils/withdraw.utils.ts:181-191
Timestamp: 2025-08-14T14:42:54.411Z
Learning: The countryCodeMap in src/components/AddMoney/consts/index.ts uses uppercase 3-letter country codes as keys (like 'AUT', 'BEL', 'CZE') that map to 2-letter country codes, requiring input normalization to uppercase for proper lookups.
Applied to files:
src/features/payments/shared/components/PaymentMethodActionList.tsx
📚 Learning: 2025-06-18T19:56:55.443Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 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.
Applied to files:
src/components/Global/PeanutActionDetailsCard/index.tsx
📚 Learning: 2025-07-24T13:26:10.290Z
Learnt from: Hugo0
Repo: peanutprotocol/peanut-ui PR: 1014
File: src/components/Claim/Link/Initial.view.tsx:413-413
Timestamp: 2025-07-24T13:26:10.290Z
Learning: In the peanut-ui repository, the change from `${SQUID_API_URL}/route` to `${SQUID_API_URL}/v2/route` in src/components/Claim/Link/Initial.view.tsx was a typo fix, not an API migration, as the codebase was already using Squid API v2.
Applied to files:
src/components/Global/PeanutActionDetailsCard/index.tsx
📚 Learning: 2025-08-14T09:20:37.231Z
Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/hero.tsx:0-0
Timestamp: 2025-08-14T09:20:37.231Z
Learning: In the hero component at src/components/LandingPage/hero.tsx, the height was intentionally reduced from min-h-[100vh] to h-[90vh] to improve scrollability discoverability - so users can see there's more content below to scroll. The overflow-y-hidden is acceptable when other elements are adjusted to prevent clipping.
Applied to files:
src/app/receipt/[entryId]/page.tsx
📚 Learning: 2024-10-23T09:38:04.446Z
Learnt from: jjramirezn
Repo: peanutprotocol/peanut-ui PR: 469
File: src/app/request/pay/page.tsx:32-64
Timestamp: 2024-10-23T09:38:04.446Z
Learning: Within `src/app/request/pay/page.tsx`, extracting the `getBaseUrl` function does not add significant readability, and the host URL construction code is expected to change soon.
Applied to files:
src/app/receipt/[entryId]/page.tsx
🧬 Code graph analysis (11)
src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx (2)
src/hooks/wallet/useWallet.ts (1)
useWallet(16-122)src/constants/actionlist.consts.ts (1)
ACTION_METHODS(14-47)
src/components/Common/SavedAccountsView.tsx (1)
src/components/Global/Icons/Icon.tsx (1)
Icon(280-289)
src/components/Global/ErrorAlert/index.tsx (1)
src/components/Global/Icons/Icon.tsx (1)
Icon(280-289)
src/components/Claim/Claim.tsx (3)
src/components/TransactionDetails/transactionTransformer.ts (1)
TransactionDetails(35-142)src/utils/general.utils.ts (3)
getChainName(653-656)getTokenLogo(763-765)getChainLogo(767-781)src/hooks/useTransactionHistory.ts (2)
EHistoryEntryType(11-11)EHistoryUserRole(11-11)
src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx (6)
src/hooks/useTokenChainIcons.ts (1)
useTokenChainIcons(22-84)src/components/TransactionDetails/transactionTransformer.ts (1)
TransactionDetails(35-142)src/components/Global/StatusPill/index.tsx (1)
StatusPillType(5-5)src/utils/general.utils.ts (1)
getInitialsFromName(841-848)src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(4-28)src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
TransactionDetailsReceipt(69-1508)
src/features/payments/flows/contribute-pot/useContributePotFlow.ts (1)
src/hooks/wallet/useWallet.ts (1)
useWallet(16-122)
src/features/payments/flows/semantic-request/SemanticRequestPage.tsx (1)
src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx (1)
SemanticRequestReceiptView(23-131)
src/features/payments/shared/components/PaymentMethodActionList.tsx (1)
src/constants/actionlist.consts.ts (1)
ACTION_METHODS(14-47)
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
src/components/Global/Icons/Icon.tsx (1)
Icon(280-289)
src/app/receipt/[entryId]/page.tsx (1)
src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
TransactionDetailsReceipt(69-1508)
src/components/Send/views/SendRouter.view.tsx (1)
src/components/Global/Icons/Icon.tsx (1)
Icon(280-289)
⏰ 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). (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (21)
src/components/Global/PeanutActionDetailsCard/index.tsx (1)
186-186: LGTM! Consistent icon sizing approach.The change from className-based sizing (
h-full w-full) to the explicitsize={14}prop aligns with the Icon component's API and improves consistency across the codebase.src/components/Payment/PaymentInfoRow.tsx (1)
52-56: LGTM! Icon sizing consistency improvement.Switching from Tailwind's
size-3class to the explicitsize={12}prop provides clearer intent and aligns with the Icon component's API.src/components/Common/SavedAccountsView.tsx (1)
122-122: LGTM! Consistent icon sizing.The change to use
size={12}instead ofh-full w-fullimproves consistency with the Icon component's API and aligns with similar updates throughout the codebase.src/components/Global/WalletNavigation/index.tsx (1)
87-88: LGTM! Mobile nav icon improvements.The size increase to 25 and addition of
fill="currentColor"for the home icon, along with the spacing adjustment (removingmt-1), appear to be intentional UI refinements for the mobile navigation.src/features/payments/flows/contribute-pot/components/RequestPotActionList.tsx (1)
51-51: LGTM! Balance loading state prevents UI flash.The addition of
isFetchingBalanceto prevent premature "insufficient balance" errors is a good UX improvement. By assuming sufficient balance while loading (line 71), you avoid confusing users with a brief flash of an error state before the balance loads.The dependency array update on line 73 is correct.
Also applies to: 68-73
src/features/payments/flows/semantic-request/SemanticRequestPage.tsx (1)
19-19: All verification points confirmed—RECEIPT view is properly integrated.The new RECEIPT view is cleanly integrated:
SemanticRequestFlowViewtype properly includes'RECEIPT'(SemanticRequestFlowContext.tsx:24)SemanticRequestReceiptViewcorrectly consumes flow context viauseSemanticRequestFlow()hook (line 25)- Transitions to RECEIPT view are properly handled (
setCurrentView('RECEIPT')triggered when appropriate)src/app/receipt/[entryId]/page.tsx (1)
16-16: The layout refactor to usePageContainerwith the modified structure is correct. Verification confirms:
PageContainer properly handles layout requirements — Uses flexbox with
min-h-[inherit]which respects themin-h-[100dvh]applied via className, centering content withitems-center justify-center.The
flex-1change on the inner container works correctly — Properly distributes space and stretches when content is shorter than the viewport, following standard Flexbox behavior.Responsive across all viewport sizes and content lengths —
PageContainerincludes responsive rules (md:pl-24 md:*:max-w-xl) and the flex layout scales appropriately. This pattern matches other established usages in the codebase (e.g.,not-found.tsx).src/components/TransactionDetails/TransactionDetailsReceipt.tsx (1)
756-759: LGTM!The
fill="black"prop addition ensures consistent icon styling for the copy-to-clipboard button in the TX ID row when no explorer URL is available.src/features/payments/flows/semantic-request/SemanticRequestFlowContext.tsx (1)
24-24: LGTM!The
RECEIPTstate addition to the flow view union correctly extends the type contract to support the new receipt view for already-paid charges.src/components/Send/views/SendRouter.view.tsx (1)
132-136: LGTM!The
fill="white"prop correctly applies the white fill color to the bank icon SVG within the circular black background.src/components/Claim/Link/SendLinkActionList.tsx (1)
97-103: LGTM!The verification requirement logic now correctly includes
BankClaimType.GuestBankClaim, ensuring guest bank claims also display the verification badge and are properly gated.src/features/payments/flows/contribute-pot/useContributePotFlow.ts (2)
59-66: LGTM!Adding
isFetchingBalancefromuseWallethook provides the necessary state to prevent premature balance error display.
98-110: Good fix for the balance flash issue.The
!isFetchingBalancecondition correctly gates the insufficient balance error until the balance has actually loaded, preventing the false positive flash on initial render. The comment clearly explains the intent.src/features/payments/flows/semantic-request/useSemanticRequestFlow.ts (2)
326-341: LGTM!The logic correctly extends charge fetching to the
RECEIPTview and auto-transitions to the receipt when a paid charge is detected. The optional chaining onfulfillmentPayment?.statussafely handles cases where the payment object may not exist.
361-375: Dependency array correctly updated.Adding
setCurrentViewto the dependency array ensures the effect properly tracks all state setters used within the callback.src/components/Claim/Claim.tsx (3)
17-24: LGTM!The new imports for
getChainName,getTokenLogo, andgetChainLogoare correctly added and align with the utility functions used to populatetokenDisplayDetailsin the transaction drawer.
139-151: LGTM!The direction logic, recipient name resolution with fallback chain, and the safe optional chaining for
claimedEventlookup are well-implemented. The defensive?.find()pattern handles cases whereeventsmight be undefined.
153-177: LGTM!The enhanced
detailsobject correctly populates the new fields (direction,createdAt,claimedAt,tokenAddress,initials,txHash,transactionCardType,userName,fullName). The optional chaining onevents[0]?.timestampsafely handles empty arrays.src/features/payments/flows/semantic-request/views/SemanticRequestReceiptView.tsx (3)
1-31: LGTM!The imports are clean and well-organized. The hook setup correctly extracts the necessary flow state and token/chain icon data for receipt rendering.
95-117: LGTM!The loading and error states are appropriately handled. The component correctly shows a loading indicator while fetching and displays a clear message when receipt details cannot be constructed (e.g., charge not yet paid).
119-130: LGTM!The main render correctly passes the transaction details to
TransactionDetailsReceiptwith appropriate props. ThetransactionAmountfallback fromcurrencyAmounttotokenAmounthandles cases where currency amount isn't available.
Uh oh!
There was an error while loading. Please reload this page.