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..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,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 (
@@ -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} /> @@ -121,7 +91,7 @@ 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 =