[TASK-14948] feat: Exchange rate redirect

src/app/(mobile-ui)/profile/exchange-rate/page.tsx

@@ -3,20 +3,75 @@
 import PageContainer from '@/components/0_Bruddle/PageContainer'
 import ExchangeRateWidget from '@/components/Global/ExchangeRateWidget'
 import NavHeader from '@/components/Global/NavHeader'
+import countryCurrencyMappings from '@/constants/countryCurrencyMapping'
+import { useWallet } from '@/hooks/wallet/useWallet'
+import { printableUsdc } from '@/utils'
 import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
 
 export default function ExchangeRatePage() {
     const router = useRouter()
+    const { fetchBalance, balance } = useWallet()
+
+    const handleCtaAction = (sourceCurrency: string, destinationCurrency: string) => {
+        let route = '/add-money'
+        let countryPath: string | undefined = ''
+
+        // Case 1: source currency is not usd and destination currency is usd -> redirect to add-money/sourceCurrencyCountry page
+        if (sourceCurrency !== 'USD' && destinationCurrency === 'USD') {
+            countryPath = countryCurrencyMappings.find((currency) => currency.currencyCode === sourceCurrency)?.path
+            route = '/add-money'
+        }
+
+        // Case 2: source currency is usd and destination currency is not usd -> redirect to withdraw/destinationCurrencyCountry page
+        if (sourceCurrency === 'USD' && destinationCurrency !== 'USD') {
+            const formattedBalance = printableUsdc(balance ?? 0n)
+
+            // if there is no balance, redirect to add-money
+            if (parseFloat(formattedBalance) <= 0) {
+                countryPath = countryCurrencyMappings.find((currency) => currency.currencyCode === sourceCurrency)?.path
+                route = '/add-money'
+            } else {
+                countryPath = countryCurrencyMappings.find(
+                    (currency) => currency.currencyCode === destinationCurrency
+                )?.path
+                route = '/withdraw'
+            }
+        }
+
+        // Case 3: source currency is not usd and destination currency is not usd -> redirect to add-money/sourceCurrencyCountry page
+        if (sourceCurrency !== 'USD' && destinationCurrency !== 'USD') {
+            countryPath = countryCurrencyMappings.find((currency) => currency.currencyCode === sourceCurrency)?.path
+            route = '/add-money'
+        }
+
+        if (sourceCurrency === 'USD' && destinationCurrency === 'USD') {
+            const formattedBalance = parseFloat(printableUsdc(balance ?? 0n))
+            // Either redirect to a relevant page or show an error
+            // For now, routing to USA add-money page as an example
+            countryPath = countryCurrencyMappings.find((currency) => currency.currencyCode === 'USD')?.path
+            route = formattedBalance <= 0 ? '/add-money' : '/withdraw'
+        }
+
+        if (!countryPath) {
+            const redirectRoute = `${route}?currencyCode=EUR`
+            router.push(redirectRoute)
+        } else {
+            const redirectRoute = `${route}/${countryPath}`
+            router.push(redirectRoute)
+        }
+    }
+
+    useEffect(() => {
+        // Fetch latest balance
+        fetchBalance()
+    }, [])
 
     return (
         <PageContainer className="flex flex-col">
             <NavHeader title="Exchange rate & fees" onPrev={() => router.replace('/profile')} />
             <div className="m-auto">
-                <ExchangeRateWidget
-                    ctaIcon="arrow-down"
-                    ctaLabel="Add money to try it"
-                    ctaAction={() => router.push('/add-money')}
-                />
+                <ExchangeRateWidget ctaIcon="arrow-down" ctaLabel="Try it!" ctaAction={handleCtaAction} />
             </div>
         </PageContainer>
     )

src/components/AddWithdraw/AddWithdrawRouterView.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/components/0_Bruddle'
 import { DepositMethod, DepositMethodList } from '@/components/AddMoney/components/DepositMethodList'
 import NavHeader from '@/components/Global/NavHeader'
 import { RecentMethod, getUserPreferences, updateUserPreferences } from '@/utils/general.utils'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { FC, useEffect, useState, useTransition, useCallback } from 'react'
 import { useUserStore } from '@/redux/hooks'
 import { AccountType, Account } from '@/interfaces'
@@ -65,12 +65,19 @@ export const AddWithdrawRouterView: FC<AddWithdrawRouterViewProps> = ({
     const [localShowAllMethods, setLocalShowAllMethods] = useState<boolean>(false)
     const [isDrawerOpen, setIsDrawerOpen] = useState(false)
     const [, startTransition] = useTransition()
+    const searchParams = useSearchParams()
+    const currencyCode = searchParams.get('currencyCode')
 
     // determine if we should show the full list of methods (countries/crypto) instead of the default view
-    const shouldShowAllMethods = flow === 'withdraw' ? showAllWithdrawMethods : localShowAllMethods
+    let shouldShowAllMethods = flow === 'withdraw' ? showAllWithdrawMethods : localShowAllMethods
     const setShouldShowAllMethods = flow === 'withdraw' ? setShowAllWithdrawMethods : setLocalShowAllMethods
     const [isLoadingPreferences, setIsLoadingPreferences] = useState(true)
 
+    // if currencyCode is present, show all methods
+    if (currencyCode) {
+        shouldShowAllMethods = true
+    }
+
     const baseRoute = flow === 'add' ? '/add-money' : '/withdraw'
 
     useEffect(() => {

src/components/Common/CountryList.tsx

@@ -17,6 +17,7 @@ import { CountryListSkeleton } from './CountryListSkeleton'
 import AvatarWithBadge from '../Profile/AvatarWithBadge'
 import StatusBadge from '../Global/Badges/StatusBadge'
 import Loading from '../Global/Loading'
+import { useSearchParams } from 'next/navigation'
 
 interface CountryListViewProps {
     inputTitle: string
@@ -46,7 +47,11 @@ export const CountryList = ({
     flow,
     getRightContent,
 }: CountryListViewProps) => {
-    const [searchTerm, setSearchTerm] = useState('')
+    const searchParams = useSearchParams()
+    // get currencyCode from search params
+    const currencyCode = searchParams.get('currencyCode')
+
+    const [searchTerm, setSearchTerm] = useState(currencyCode ?? '')
     // use deferred value to prevent blocking ui during search
     const deferredSearchTerm = useDeferredValue(searchTerm)
     const { countryCode: userGeoLocationCountryCode, isLoading: isGeoLoading } = useGeoLocation()

src/components/Global/ExchangeRateWidget/index.tsx

@@ -11,7 +11,7 @@ import { Button } from '@/components/0_Bruddle'
 interface IExchangeRateWidgetProps {
     ctaLabel: string
     ctaIcon: IconName
-    ctaAction: () => void
+    ctaAction: (sourceCurrency: string, destinationCurrency: string) => void
 }
 
 const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, ctaAction }) => {
@@ -212,7 +212,7 @@ const ExchangeRateWidget: FC<IExchangeRateWidgetProps> = ({ ctaLabel, ctaIcon, c
             )}
 
             <Button
-                onClick={ctaAction}
+                onClick={() => ctaAction(sourceCurrency, destinationCurrency)}
                 icon={ctaIcon}
                 iconSize={13}
                 shadowSize="4"

src/constants/countryCurrencyMapping.ts

@@ -43,8 +43,8 @@ export const countryCurrencyMappings: CountryCurrencyMapping[] = [
     { currencyCode: 'MXN', currencyName: 'Mexican Peso', country: 'Mexico', flagCode: 'mx', path: 'mexico' },
 
     // LATAM Countries
-    { currencyCode: 'BRL', currencyName: 'Brazilian Real', country: 'Brazil', flagCode: 'br' },
-    { currencyCode: 'ARS', currencyName: 'Argentine Peso', country: 'Argentina', flagCode: 'ar' },
+    { currencyCode: 'BRL', currencyName: 'Brazilian Real', country: 'Brazil', flagCode: 'br', path: 'brazil' },
+    { currencyCode: 'ARS', currencyName: 'Argentine Peso', country: 'Argentina', flagCode: 'ar', path: 'argentina' },
 ]
 
 export default countryCurrencyMappings