diff --git a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx index f1ec7be9d..7c2f67d63 100644 --- a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx +++ b/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 ( router.replace('/profile')} />
- router.push('/add-money')} - /> +
) diff --git a/src/components/AddWithdraw/AddWithdrawRouterView.tsx b/src/components/AddWithdraw/AddWithdrawRouterView.tsx index 435596309..5e528a987 100644 --- a/src/components/AddWithdraw/AddWithdrawRouterView.tsx +++ b/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 = ({ const [localShowAllMethods, setLocalShowAllMethods] = useState(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(() => { diff --git a/src/components/Common/CountryList.tsx b/src/components/Common/CountryList.tsx index 90be56456..4a44b702c 100644 --- a/src/components/Common/CountryList.tsx +++ b/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() diff --git a/src/components/Global/ExchangeRateWidget/index.tsx b/src/components/Global/ExchangeRateWidget/index.tsx index 1115d0061..45085aa46 100644 --- a/src/components/Global/ExchangeRateWidget/index.tsx +++ b/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 = ({ ctaLabel, ctaIcon, ctaAction }) => { @@ -212,7 +212,7 @@ const ExchangeRateWidget: FC = ({ ctaLabel, ctaIcon, c )}