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

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

@@ -13,8 +13,7 @@ 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 {
     onConfirm: () => void
@@ -60,36 +59,9 @@ 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])
+    const nonEuroCurrency = countryCurrencyMappings.find(
+        (currency) => countryCodeForFlag.toLowerCase() === currency.flagCode.toLowerCase()
+    )?.currencyCode
 
     return (
         <div className="flex min-h-[inherit] flex-col justify-between gap-8 md:min-h-fit">
@@ -103,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}
                 />
 
                 <Card className="rounded-sm">
@@ -121,7 +91,7 @@ export function ConfirmBankClaimView({
                     {bankDetails.routingNumber && (
                         <PaymentInfoRow label="Routing Number" value={bankDetails.routingNumber.toUpperCase()} />
                     )}
-                    <ExchangeRate accountType={accountType} />
+                    <ExchangeRate accountType={accountType} nonEuroCurrency={nonEuroCurrency} />
                     <PaymentInfoRow hideBottomBorder label="Fee" value={`$ 0.00`} />
                 </Card>
 

src/components/ExchangeRate/index.tsx

@@ -5,12 +5,13 @@ import { useExchangeRate } from '@/hooks/useExchangeRate'
 
 interface IExchangeRateProps extends Omit<IExchangeRate, 'enabled'> {
     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 =