diff --git a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx index 7c2f67d63..5d5b2479b 100644 --- a/src/app/(mobile-ui)/profile/exchange-rate/page.tsx +++ b/src/app/(mobile-ui)/profile/exchange-rate/page.tsx @@ -3,9 +3,9 @@ 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 { getExchangeRateWidgetRedirectRoute } from '@/utils/exchangeRateWidget.utils' import { useRouter } from 'next/navigation' import { useEffect } from 'react' @@ -14,52 +14,10 @@ export default function ExchangeRatePage() { const { fetchBalance, balance } = useWallet() const handleCtaAction = (sourceCurrency: string, destinationCurrency: string) => { - let route = '/add-money' - let countryPath: string | undefined = '' + const formattedBalance = parseFloat(printableUsdc(balance ?? 0n)) - // 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) - } + const redirectRoute = getExchangeRateWidgetRedirectRoute(sourceCurrency, destinationCurrency, formattedBalance) + router.push(redirectRoute) } useEffect(() => { diff --git a/src/components/LandingPage/noFees.tsx b/src/components/LandingPage/noFees.tsx index 6789b4083..b63d7d46f 100644 --- a/src/components/LandingPage/noFees.tsx +++ b/src/components/LandingPage/noFees.tsx @@ -8,10 +8,27 @@ import { Star } from '@/assets' import Image from 'next/image' import ExchangeRateWidget from '../Global/ExchangeRateWidget' import { useRouter } from 'next/navigation' +import { printableUsdc } from '@/utils' +import { getExchangeRateWidgetRedirectRoute } from '@/utils/exchangeRateWidget.utils' +import { useWallet } from '@/hooks/wallet/useWallet' +import { useAuth } from '@/context/authContext' export function NoFees() { const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200) const router = useRouter() + const { fetchBalance, balance } = useWallet() + const { user } = useAuth() + + const handleCtaAction = (sourceCurrency: string, destinationCurrency: string) => { + if (!user) { + router.push('/setup') + return + } + const formattedBalance = parseFloat(printableUsdc(balance ?? 0n)) + + const redirectRoute = getExchangeRateWidgetRedirectRoute(sourceCurrency, destinationCurrency, formattedBalance) + router.push(redirectRoute) + } useEffect(() => { const handleResize = () => { @@ -23,6 +40,12 @@ export function NoFees() { return () => window.removeEventListener('resize', handleResize) }, []) + useEffect(() => { + if (user) { + fetchBalance() + } + }, [user]) + const createCloudAnimation = (side: 'left' | 'right', top: string, width: number, speed: number) => { const vpWidth = screenWidth || 1080 const totalDistance = vpWidth + width @@ -124,11 +147,7 @@ export function NoFees() { /> - router.push('/setup')} - /> + ) diff --git a/src/utils/exchangeRateWidget.utils.ts b/src/utils/exchangeRateWidget.utils.ts new file mode 100644 index 000000000..3e100d06b --- /dev/null +++ b/src/utils/exchangeRateWidget.utils.ts @@ -0,0 +1,50 @@ +import countryCurrencyMappings from '@/constants/countryCurrencyMapping' + +export const getExchangeRateWidgetRedirectRoute = ( + sourceCurrency: string, + destinationCurrency: string, + userBalance: number +): 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') { + // if there is no balance, redirect to add-money + if (userBalance <= 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' + } + + // Case 4: source currency is usd and destination currency is usd + if (sourceCurrency === 'USD' && destinationCurrency === 'USD') { + countryPath = countryCurrencyMappings.find((currency) => currency.currencyCode === 'USD')?.path + route = userBalance <= 0 ? '/add-money' : '/withdraw' + } + + if (!countryPath) { + const redirectRoute = `${route}?currencyCode=EUR` + return redirectRoute + } else { + const redirectRoute = `${route}/${countryPath}` + return redirectRoute + } +}