Skip to content

[TASK-14493] feat: show local currency exchange rate in claim to bank confirm view#1221

Merged
Zishan-7 merged 3 commits intopeanut-wallet-devfrom
feat/local-currency-claim
Sep 17, 2025
Merged

[TASK-14493] feat: show local currency exchange rate in claim to bank confirm view#1221
Zishan-7 merged 3 commits intopeanut-wallet-devfrom
feat/local-currency-claim

Conversation

@Zishan-7
Copy link
Contributor

@Zishan-7 Zishan-7 commented Sep 17, 2025

image

@vercel
Copy link

vercel bot commented Sep 17, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
peanut-wallet Ready Ready Preview Comment Sep 17, 2025 10:46am

@notion-workspace
Copy link

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 17, 2025

Walkthrough

Replaces a deep currency-conversion flow in the bank-claim confirm view with a direct mapping to a non-Euro currency via countryCurrencyMappings, passes that currency to ExchangeRate, and updates ExchangeRate to accept/use a sourceCurrency prop instead of a hard-coded 'USD'.

Changes

Cohort / File(s) Summary
Claim confirmation view wiring
src/components/Claim/Link/views/Confirm.bank-claim.view.tsx
Imports countryCurrencyMappings; computes nonEuroCurrency from countryCodeForFlag; removes prior currency-conversion logic (useCurrency, getCurrencySymbol, currencyCode, displayAmount/displaySymbol, loading/failure flags); keeps usdAmount and passes amount={usdAmount} to PeanutActionDetailsCard; updates ExchangeRate invocation to include nonEuroCurrency.
ExchangeRate component API and logic
src/components/ExchangeRate/index.tsx
Adds sourceCurrency?: string to IExchangeRateProps with default sourceCurrency = 'USD'; replaces hard-coded 'USD' in non-Euro rate lookup and display with sourceCurrency; display string now formats using the provided sourceCurrency.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • jjramirezn
  • kushagrasarathe
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/local-currency-claim

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Pre-merge checks

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Description Check ❓ Inconclusive The pull request description contains only an embedded image with no accompanying textual explanation, so it is too vague to determine whether it accurately describes the code changes in this diff; there is insufficient descriptive context to confirm relevance. Ask the author to add a brief textual description summarizing the change (purpose, key files/components affected such as ExchangeRate and the Confirm bank-claim view, and any new props/behavior), reference the related task/issue number, and optionally include captions or notes explaining the embedded image.
✅ Passed checks (1 passed)
Check name Status Explanation
Title Check ✅ Passed The title "[TASK-14493] feat: show local currency exchange rate in claim to bank confirm view" succinctly and accurately summarizes the primary change: adding a local-currency exchange-rate display to the claim-to-bank confirmation UI. It is specific to the feature, maps to the code changes (ExchangeRate and claim confirm view), and is concise enough for a reviewer scanning history to understand the main purpose of the PR.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (3)
src/components/ExchangeRate/index.tsx (1)

13-18: Typo and unnecessary parseFloat; simplify and harden formatting.

  • Rename nonEruoExchangeRate → nonEuroExchangeRate.
  • Use number formatting directly and guard against 0.

Apply:

-    const { exchangeRate: nonEruoExchangeRate, isLoading } = useExchangeRate({
+    const { exchangeRate: nonEuroExchangeRate, isLoading } = useExchangeRate({
       sourceCurrency,
       destinationCurrency: nonEuroCurrency || 'EUR',
       initialSourceAmount: 1,
       enabled: !!nonEuroCurrency,
     })
...
-    if (nonEuroCurrency) {
-        displayValue = nonEruoExchangeRate
-            ? `1 ${sourceCurrency} = ${parseFloat(nonEruoExchangeRate.toString()).toFixed(4)} ${nonEuroCurrency}`
-            : '-'
+    if (nonEuroCurrency) {
+        displayValue =
+            nonEuroExchangeRate > 0
+                ? `1 ${sourceCurrency} = ${nonEuroExchangeRate.toFixed(4)} ${nonEuroCurrency}`
+                : '-'
         isLoadingRate = isLoading

Also applies to: 30-34

src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (2)

95-101: Filtering logic is brittle; scope to IBAN and exclude EUR/comingSoon.

  • The variable name/comment don’t match behavior.
  • Hard‑coded exclusion list will drift.
  • Limit to IBAN countries, skip EUR, skip comingSoon.
-// Array for non-European countries, we show usd -> local currency exchange rate for these countries
-const nonEuropeanCountries = ['mx', 'us', 'br', 'ar']
-const nonEuroCurrency = countryCurrencyMappings.find(
-    (currency) =>
-        !nonEuropeanCountries?.includes(currency.flagCode.toLowerCase()) &&
-        countryCodeForFlag.toLowerCase() === currency.flagCode.toLowerCase()
-)?.currencyCode
+// For IBAN recipients that aren’t EUR countries, show source -> local currency rate
+const nonEuroCurrency = useMemo(() => {
+    if (accountType !== AccountType.IBAN) return undefined
+    const code = countryCodeForFlag.toLowerCase()
+    const entry = countryCurrencyMappings.find(
+        (c) => c.flagCode.toLowerCase() === code && c.currencyCode !== 'EUR' && !c.comingSoon
+    )
+    return entry?.currencyCode
+}, [accountType, countryCodeForFlag])

Rename nonEuropeanCountries → excludedCountryFlags if you keep the old approach.


103-104: Remove stray console logs.

These will leak PII/debug noise in production.

-console.log(claimLinkData)
-console.log(nonEuroCurrency)
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3aa019f and e370318.

📒 Files selected for processing (2)
  • src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (3 hunks)
  • src/components/ExchangeRate/index.tsx (2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-08-12T17:47:28.362Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#1089
File: src/app/api/bridge/exchange-rate/route.ts:4-19
Timestamp: 2025-08-12T17:47:28.362Z
Learning: In the Bridge exchange rate API route (src/app/api/bridge/exchange-rate/route.ts), the ExchangeRateResponse interface uses numeric types for rates because the route converts string values from the Bridge API to floats using parseFloat() before returning the response.

Applied to files:

  • src/components/ExchangeRate/index.tsx
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#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/components/Claim/Link/views/Confirm.bank-claim.view.tsx
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/Link/views/Confirm.bank-claim.view.tsx
🧬 Code graph analysis (2)
src/components/ExchangeRate/index.tsx (2)
src/hooks/useGetExchangeRate.tsx (1)
  • useGetExchangeRate (14-55)
src/hooks/useExchangeRate.ts (1)
  • useExchangeRate (26-150)
src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (1)
src/constants/countryCurrencyMapping.ts (1)
  • countryCurrencyMappings (10-48)
⏰ 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 (2)
src/components/ExchangeRate/index.tsx (1)

8-11: Public API change: add sourceCurrency with sane default.

Looks good. Since this alters a shared component’s props, confirm all call sites are still type‑safe and behaviorally correct (storybook/tests too).

src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (1)

135-139: Confirm intended source currency for local-rate display.

You pass sourceCurrency={currencyCode} (EUR for IBAN). The comment above says “usd -> local currency.” If the requirement is USD→local, pass 'USD'; if it’s bank‑base→local, current code is fine.

Option if USD→local is desired:

-    <ExchangeRate
-        accountType={accountType}
-        nonEuroCurrency={nonEuroCurrency}
-        sourceCurrency={currencyCode}
-    />
+    <ExchangeRate
+        accountType={accountType}
+        nonEuroCurrency={nonEuroCurrency}
+        sourceCurrency="USD"
+    />

Copy link
Contributor

@kushagrasarathe kushagrasarathe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Zishan-7 left two comments, one is actionable (comment one), rest lgtm

Copy link
Contributor

@kushagrasarathe kushagrasarathe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actually @Zishan-7 some issues with the pr, pining on discord

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (1)
src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (1)

16-16: Incorrect import: named export used as default (runtime undefined).

countryCurrencyMappings is a named export. Default-importing it yields undefined, breaking .find(...).

-import countryCurrencyMappings from '@/constants/countryCurrencyMapping'
+import { countryCurrencyMappings } from '@/constants/countryCurrencyMapping'
🧹 Nitpick comments (2)
src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (2)

62-64: Memoize and guard the currency lookup.

Minor polish: compute once per countryCodeForFlag change and keep the code resilient to unknown flags.

-    const nonEuroCurrency = countryCurrencyMappings.find(
-        (currency) => countryCodeForFlag.toLowerCase() === currency.flagCode.toLowerCase()
-    )?.currencyCode
+    const nonEuroCurrency = useMemo(() => {
+        const match = countryCurrencyMappings.find(
+            (c) => c.flagCode.toLowerCase() === countryCodeForFlag.toLowerCase()
+        )
+        return match?.currencyCode
+    }, [countryCodeForFlag])

56-60: Variable name is misleading: this is token units, not USD.

formatUnits(...) returns the token amount, not a USD amount. Rename to avoid confusion and keep types clear; confirm PeanutActionDetailsCard.amount accepts a string.

-    const usdAmount = useMemo(
+    const tokenAmount = useMemo(
         () => formatUnits(claimLinkData?.amount ?? 0, claimLinkData?.tokenDecimals) || '0.00',
         [claimLinkData]
     )
...
-                    amount={usdAmount}
+                    amount={tokenAmount}

To verify the prop type:

  • Check PeanutActionDetailsCard prop for amount (string vs number) and any internal formatting.

Also applies to: 78-79

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 75810c7 and 75dc83c.

📒 Files selected for processing (1)
  • src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (4 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-08-14T14:42:54.411Z
Learnt from: Zishan-7
PR: peanutprotocol/peanut-ui#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/components/Claim/Link/views/Confirm.bank-claim.view.tsx
📚 Learning: 2024-11-18T21:36:11.486Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/Link/views/Confirm.bank-claim.view.tsx
📚 Learning: 2024-12-11T10:13:22.806Z
Learnt from: jjramirezn
PR: peanutprotocol/peanut-ui#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/components/Claim/Link/views/Confirm.bank-claim.view.tsx
📚 Learning: 2024-10-08T20:13:42.967Z
Learnt from: Hugo0
PR: peanutprotocol/peanut-ui#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/components/Claim/Link/views/Confirm.bank-claim.view.tsx
🧬 Code graph analysis (1)
src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (1)
src/constants/countryCurrencyMapping.ts (1)
  • countryCurrencyMappings (10-48)
⏰ 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 (1)
src/components/Claim/Link/views/Confirm.bank-claim.view.tsx (1)

94-94: No change — callsite is correct.
src/components/ExchangeRate/index.tsx: IExchangeRateProps includes nonEuroCurrency?: string and sourceCurrency?: string (sourceCurrency defaults to 'USD'); the component maps nonEuroCurrency to destinationCurrency, so passing nonEuroCurrency at the callsite is correct.

Copy link
Contributor

@kushagrasarathe kushagrasarathe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@Zishan-7 Zishan-7 merged commit 55f5c01 into peanut-wallet-dev Sep 17, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants