From e37031845449d610f8bab19cf4b6100c7ce06760 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 17 Sep 2025 11:13:14 +0530 Subject: [PATCH 1/3] feat: show local currency exchange rate in claim to bank confirm view --- .../Link/views/Confirm.bank-claim.view.tsx | 17 ++++++++++++++++- src/components/ExchangeRate/index.tsx | 7 ++++--- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx index 9c7fddeac..3a8cbeeb9 100644 --- a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx +++ b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx @@ -15,6 +15,7 @@ import ExchangeRate from '@/components/ExchangeRate' import { AccountType } from '@/interfaces' import { useCurrency } from '@/hooks/useCurrency' import { getCurrencySymbol } from '@/utils/bridge.utils' +import countryCurrencyMappings from '@/constants/countryCurrencyMapping' interface ConfirmBankClaimViewProps { onConfirm: () => void @@ -91,6 +92,16 @@ export function ConfirmBankClaimView({ return resolvedSymbol ?? getCurrencySymbol(currencyCode) }, [currencyCode, resolvedSymbol, failedConversion]) + // 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 + + console.log(claimLinkData) + console.log(nonEuroCurrency) return (
@@ -121,7 +132,11 @@ export function ConfirmBankClaimView({ {bankDetails.routingNumber && ( )} - + diff --git a/src/components/ExchangeRate/index.tsx b/src/components/ExchangeRate/index.tsx index 6759a1704..761cc5c6a 100644 --- a/src/components/ExchangeRate/index.tsx +++ b/src/components/ExchangeRate/index.tsx @@ -5,12 +5,13 @@ import { useExchangeRate } from '@/hooks/useExchangeRate' interface IExchangeRateProps extends Omit { nonEuroCurrency?: string + sourceCurrency?: string } -const ExchangeRate = ({ accountType, nonEuroCurrency }: IExchangeRateProps) => { +const ExchangeRate = ({ accountType, nonEuroCurrency, sourceCurrency = 'USD' }: IExchangeRateProps) => { const { exchangeRate, isFetchingRate } = useGetExchangeRate({ accountType, enabled: !nonEuroCurrency }) const { exchangeRate: nonEruoExchangeRate, isLoading } = useExchangeRate({ - sourceCurrency: 'USD', + sourceCurrency, destinationCurrency: nonEuroCurrency || 'EUR', initialSourceAmount: 1, enabled: !!nonEuroCurrency, @@ -28,7 +29,7 @@ const ExchangeRate = ({ accountType, nonEuroCurrency }: IExchangeRateProps) => { if (nonEuroCurrency) { displayValue = nonEruoExchangeRate - ? `1 USD = ${parseFloat(nonEruoExchangeRate.toString()).toFixed(4)} ${nonEuroCurrency}` + ? `1 ${sourceCurrency} = ${parseFloat(nonEruoExchangeRate.toString()).toFixed(4)} ${nonEuroCurrency}` : '-' isLoadingRate = isLoading moreInfoText = From 75810c724a7a507875bdec1caf43b68d0974e8e4 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 17 Sep 2025 11:27:08 +0530 Subject: [PATCH 2/3] remove logs --- src/components/Claim/Link/views/Confirm.bank-claim.view.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx index 3a8cbeeb9..eec6d5a58 100644 --- a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx +++ b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx @@ -100,8 +100,6 @@ export function ConfirmBankClaimView({ countryCodeForFlag.toLowerCase() === currency.flagCode.toLowerCase() )?.currencyCode - console.log(claimLinkData) - console.log(nonEuroCurrency) return (
From 75dc83cdc1cf974728b07f255103450300afd384 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Wed, 17 Sep 2025 16:12:18 +0530 Subject: [PATCH 3/3] fix: Show currency in USD --- .../Link/views/Confirm.bank-claim.view.tsx | 49 ++----------------- 1 file changed, 3 insertions(+), 46 deletions(-) diff --git a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx index eec6d5a58..e0df2d795 100644 --- a/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx +++ b/src/components/Claim/Link/views/Confirm.bank-claim.view.tsx @@ -13,8 +13,6 @@ import { ClaimLinkData } from '@/services/sendLinks' import { formatUnits } from 'viem' import ExchangeRate from '@/components/ExchangeRate' import { AccountType } from '@/interfaces' -import { useCurrency } from '@/hooks/useCurrency' -import { getCurrencySymbol } from '@/utils/bridge.utils' import countryCurrencyMappings from '@/constants/countryCurrencyMapping' interface ConfirmBankClaimViewProps { @@ -61,43 +59,8 @@ export function ConfirmBankClaimView({ [claimLinkData] ) - // determine display currency based on account type - const currencyCode = useMemo(() => { - if (accountType === AccountType.CLABE) return 'MXN' - if (accountType === AccountType.US) return 'USD' - return 'EUR' - }, [accountType]) - - // fetch exchange rate and symbol (USD -> local currency) - const { symbol: resolvedSymbol, price, isLoading: isLoadingCurrency } = useCurrency(currencyCode) - - // fallback if conversion fails - const failedConversion = useMemo(() => { - return currencyCode !== 'USD' && !isLoadingCurrency && (!price || isNaN(price)) - }, [currencyCode, isLoadingCurrency, price]) - - // display amount in local currency - const displayAmount = useMemo(() => { - if (currencyCode === 'USD') return usdAmount - if (isLoadingCurrency) return '-' - if (!price || isNaN(price)) return usdAmount - const converted = (Number(usdAmount) * price).toFixed(2) - return converted - }, [price, usdAmount, currencyCode, isLoadingCurrency]) - - const displaySymbol = useMemo(() => { - if (currencyCode === 'USD') return '$' - // fallback to $ if conversion fails - if (failedConversion) return '$' - return resolvedSymbol ?? getCurrencySymbol(currencyCode) - }, [currencyCode, resolvedSymbol, failedConversion]) - - // 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() + (currency) => countryCodeForFlag.toLowerCase() === currency.flagCode.toLowerCase() )?.currencyCode return ( @@ -112,10 +75,8 @@ export function ConfirmBankClaimView({ transactionType="CLAIM_LINK_BANK_ACCOUNT" recipientType="BANK_ACCOUNT" recipientName={bankDetails.country} - amount={displayAmount} + amount={usdAmount} tokenSymbol={claimLinkData.tokenSymbol} - currencySymbol={displaySymbol} - isLoading={isLoadingCurrency} /> @@ -130,11 +91,7 @@ export function ConfirmBankClaimView({ {bankDetails.routingNumber && ( )} - +