From 62e3c7ef06e637460f307dc3766b96e264cd36ea Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Fri, 27 Jun 2025 22:56:02 -0300 Subject: [PATCH 01/15] currencies fixed --- .../(mobile-ui)/add-money/[country]/bank/page.tsx | 13 +++++++++++++ .../AddMoney/components/AddMoneyBankDetails.tsx | 15 ++++++++++----- .../Global/PeanutActionDetailsCard/index.tsx | 5 ++++- src/components/Global/TokenAmountInput/index.tsx | 4 +++- src/utils/currency.ts | 2 ++ 5 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx index cc9e940d6..f9d758e85 100644 --- a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx @@ -24,6 +24,7 @@ import EmptyState from '@/components/Global/EmptyStates/EmptyState' import { UserDetailsForm, type UserDetailsFormData } from '@/components/AddMoney/UserDetailsForm' import { updateUserById } from '@/app/actions/users' import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDetails' +import { getOnrampCurrencyConfig, getCurrencySymbol } from '@/utils/bridge.utils' type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails' @@ -76,6 +77,16 @@ export default function OnrampBankPage() { return formattedBalance }, [balance]) + const currencyConfig = useMemo(() => { + if (!selectedCountry?.id) return null + const { currency } = getOnrampCurrencyConfig(selectedCountry.id) + return { + code: currency.toUpperCase(), + symbol: getCurrencySymbol(currency), + price: 1, // For bridge currencies, we use 1:1 with the amount entered + } + }, [selectedCountry?.id]) + useEffect(() => { if (user === null) return // wait for user to be fetched if (step === 'loading') { @@ -328,6 +339,8 @@ export default function OnrampBankPage() { setTokenValue={handleTokenAmountChange} walletBalance={peanutWalletBalance} hideCurrencyToggle + hideBalance={true} + currency={currencyConfig || undefined} />
diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index a8e561372..386237d62 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -11,6 +11,7 @@ import { useRouter, useParams } from 'next/navigation' import { useEffect, useState, useMemo } from 'react' import { countryCodeMap, countryData } from '@/components/AddMoney/consts' import { formatCurrencyAmount } from '@/utils/currency' +import { getOnrampCurrencyConfig, getCurrencySymbol } from '@/utils/bridge.utils' import Icon from '@/components/Global/Icon' export interface IOnrampData { @@ -62,6 +63,12 @@ export default function AddMoneyBankDetails() { return countryCode?.toLowerCase() || 'us' }, [currentCountryDetails]) + const bridgeCurrency = useMemo(() => { + if (!currentCountryDetails?.id) return 'USD' + const { currency } = getOnrampCurrencyConfig(currentCountryDetails.id) + return currency.toUpperCase() + }, [currentCountryDetails?.id]) + useEffect(() => { // If no amount is set, redirect back to add money page if (!amountToOnramp || parseFloat(amountToOnramp) <= 0) { @@ -82,7 +89,7 @@ export default function AddMoneyBankDetails() { }, [amountToOnramp, router]) const generateBankDetails = async () => { - const formattedAmount = formatCurrencyAmount(amountToOnramp, currentCountryDetails?.currency || 'USD') + const formattedAmount = formatCurrencyAmount(amountToOnramp, bridgeCurrency) const bankDetails = `Bank Transfer Details: Amount: ${formattedAmount} Bank Name: ${onrampData?.depositInstructions?.bankName || 'Loading...'} @@ -117,13 +124,11 @@ Please use these details to complete your bank transfer.` amount={amountToOnramp} tokenSymbol={PEANUT_WALLET_TOKEN_SYMBOL} countryCodeForFlag={countryCodeForFlag} + currencySymbol={getCurrencySymbol(bridgeCurrency.toLowerCase())} /> - + { if (recipientType === 'ADDRESS') return printableAddress(recipientName) @@ -157,7 +159,8 @@ export default function PeanutActionDetailsCard({
{getTitle()}

- {tokenSymbol.toLowerCase() === PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() ? '$ ' : ''} + {currencySymbol || + (tokenSymbol.toLowerCase() === PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() ? '$ ' : '')} {amount} {tokenSymbol.toLowerCase() !== PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() && diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index f530f3e50..7211c940e 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -19,6 +19,7 @@ interface TokenAmountInputProps { price: number } hideCurrencyToggle?: boolean + hideBalance?: boolean } const TokenAmountInput = ({ @@ -32,6 +33,7 @@ const TokenAmountInput = ({ currency, setUsdValue, hideCurrencyToggle = false, + hideBalance = false, }: TokenAmountInputProps) => { const { selectedTokenData } = useContext(tokenSelectorContext) const inputRef = useRef(null) @@ -229,7 +231,7 @@ const TokenAmountInput = ({ disabled={disabled} />

- {walletBalance && ( + {walletBalance && !hideBalance && (
Your balance: {displayMode === 'FIAT' && currency ? 'US$' : '$'} {walletBalance} diff --git a/src/utils/currency.ts b/src/utils/currency.ts index e1a2a616f..5a7e7371b 100644 --- a/src/utils/currency.ts +++ b/src/utils/currency.ts @@ -2,6 +2,8 @@ export const getDisplayCurrencySymbol = (code?: string, fallbackSymbol: string = '$'): string => { if (code === 'ARS') return 'AR$' if (code === 'USD') return '$' + if (code === 'MXN') return '$' + if (code === 'EUR') return '€' return fallbackSymbol } From cf6d4b675034478b1d410e37764230235cddda5e Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Fri, 27 Jun 2025 23:04:16 -0300 Subject: [PATCH 02/15] fixed mexico having a minimum TX amount of 50mxn --- .../add-money/[country]/bank/page.tsx | 15 ++++++++---- src/utils/__tests__/bridge.utils.test.ts | 23 +++++++++++++++++++ src/utils/bridge.utils.ts | 12 ++++++++++ src/utils/index.ts | 1 + 4 files changed, 46 insertions(+), 5 deletions(-) diff --git a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx index f9d758e85..ad3a04a12 100644 --- a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx @@ -24,7 +24,7 @@ import EmptyState from '@/components/Global/EmptyStates/EmptyState' import { UserDetailsForm, type UserDetailsFormData } from '@/components/AddMoney/UserDetailsForm' import { updateUserById } from '@/app/actions/users' import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDetails' -import { getOnrampCurrencyConfig, getCurrencySymbol } from '@/utils/bridge.utils' +import { getOnrampCurrencyConfig, getCurrencySymbol, getMinimumAmount } from '@/utils/bridge.utils' type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails' @@ -87,6 +87,11 @@ export default function OnrampBankPage() { } }, [selectedCountry?.id]) + const minimumAmount = useMemo(() => { + if (!selectedCountry?.id) return 1 + return getMinimumAmount(selectedCountry.id) + }, [selectedCountry?.id]) + useEffect(() => { if (user === null) return // wait for user to be fetched if (step === 'loading') { @@ -130,14 +135,14 @@ export default function OnrampBankPage() { setError({ showError: true, errorMessage: 'Please enter a valid number.' }) return false } - if (amount && amount < 1) { - setError({ showError: true, errorMessage: 'Minimum deposit is 1.' }) + if (amount && amount < minimumAmount) { + setError({ showError: true, errorMessage: `Minimum deposit is ${minimumAmount}.` }) return false } setError({ showError: false, errorMessage: '' }) return true }, - [setError] + [setError, minimumAmount] ) const handleTokenAmountChange = useCallback( @@ -352,7 +357,7 @@ export default function OnrampBankPage() { onClick={handleAmountContinue} disabled={ !parseFloat(rawTokenAmount) || - parseFloat(rawTokenAmount) < 1 || + parseFloat(rawTokenAmount) < minimumAmount || error.showError || isCreatingOnramp } diff --git a/src/utils/__tests__/bridge.utils.test.ts b/src/utils/__tests__/bridge.utils.test.ts index ce35fe1ca..f2815dd9f 100644 --- a/src/utils/__tests__/bridge.utils.test.ts +++ b/src/utils/__tests__/bridge.utils.test.ts @@ -5,6 +5,7 @@ import { getCurrencySymbol, getPaymentRailDisplayName, type BridgeOperationType, + getMinimumAmount, } from '../bridge.utils' describe('bridge.utils', () => { @@ -114,6 +115,28 @@ describe('bridge.utils', () => { paymentRail: 'sepa', }) }) + + describe('getMinimumAmount', () => { + it('should return 50 for Mexico', () => { + const minimum = getMinimumAmount('MX') + expect(minimum).toBe(50) + }) + + it('should return 1 for US', () => { + const minimum = getMinimumAmount('US') + expect(minimum).toBe(1) + }) + + it('should return 1 for other countries', () => { + const minimum = getMinimumAmount('DE') + expect(minimum).toBe(1) + }) + + it('should return 1 for empty country code', () => { + const minimum = getMinimumAmount('') + expect(minimum).toBe(1) + }) + }) }) describe('bridge support', () => { diff --git a/src/utils/bridge.utils.ts b/src/utils/bridge.utils.ts index 0701d514f..48189fedf 100644 --- a/src/utils/bridge.utils.ts +++ b/src/utils/bridge.utils.ts @@ -59,6 +59,18 @@ export const getCurrencySymbol = (currency: string): string => { return symbols[currency.toLowerCase()] || currency.toUpperCase() } +/** + * Get minimum amount for onramp operations by country + */ +export const getMinimumAmount = (countryId: string): number => { + if (countryId === 'MX') { + return 50 + } + + // Default minimum for all other countries (including US and EU) + return 1 +} + /** * Get human-readable payment rail name */ diff --git a/src/utils/index.ts b/src/utils/index.ts index 7c3cafe76..990765362 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -12,5 +12,6 @@ export { getOfframpCurrencyConfig, getCurrencySymbol, getPaymentRailDisplayName, + getMinimumAmount, } from './bridge.utils' export type { BridgeOperationType } from './bridge.utils' From c49c972a2949c4e112a706aa5b82ff3c041f54f7 Mon Sep 17 00:00:00 2001 From: FacuBozzi <72771544+FacuBozzi@users.noreply.github.com> Date: Sat, 28 Jun 2025 02:08:37 +0000 Subject: [PATCH 03/15] style: Apply prettier formatting --- src/app/(mobile-ui)/layout.tsx | 2 +- src/utils/general.utils.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index e3f4dc5cc..771495bdb 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -48,7 +48,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => { // docs here: https://github.com/BoxFactura/pulltorefresh.js useEffect(() => { if (typeof window === 'undefined') return - + // Only initialize pull-to-refresh on iOS devices if (!isIOS()) return diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts index 7533ab129..27d377d66 100644 --- a/src/utils/general.utils.ts +++ b/src/utils/general.utils.ts @@ -1167,7 +1167,7 @@ export function isPeanutWalletToken(tokenAddress: string, chainId: string): bool */ export function isIOS(): boolean { if (typeof window === 'undefined') return false - + const userAgent = window.navigator.userAgent.toLowerCase() return /iphone|ipad|ipod/.test(userAgent) } @@ -1178,7 +1178,7 @@ export function isIOS(): boolean { */ export function isAndroid(): boolean { if (typeof window === 'undefined') return false - + const userAgent = window.navigator.userAgent.toLowerCase() return /android/.test(userAgent) } From 2444603202dfaee53e5ecdf8c8927a9bdce0ebf9 Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Fri, 27 Jun 2025 23:20:33 -0300 Subject: [PATCH 04/15] non-US banks having details wrongly shared with ShareButton --- .../AddMoney/components/AddMoneyBankDetails.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index a8e561372..a868ea8bd 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -83,12 +83,19 @@ export default function AddMoneyBankDetails() { const generateBankDetails = async () => { const formattedAmount = formatCurrencyAmount(amountToOnramp, currentCountryDetails?.currency || 'USD') + const accountLabel = onrampData?.depositInstructions?.bankAccountNumber ? 'Account Number' : 'IBAN' + const routingLabel = onrampData?.depositInstructions?.bankRoutingNumber ? 'Routing Number' : 'BIC' + const accountValue = + onrampData?.depositInstructions?.bankAccountNumber || onrampData?.depositInstructions?.iban || 'Loading...' + const routingValue = + onrampData?.depositInstructions?.bankRoutingNumber || onrampData?.depositInstructions?.bic || 'Loading...' + const bankDetails = `Bank Transfer Details: Amount: ${formattedAmount} Bank Name: ${onrampData?.depositInstructions?.bankName || 'Loading...'} Bank Address: ${onrampData?.depositInstructions?.bankAddress || 'Loading...'} -Account Number: ${onrampData?.depositInstructions?.bankAccountNumber || 'Loading...'} -Routing Number: ${onrampData?.depositInstructions?.bankRoutingNumber || 'Loading...'} +${accountLabel}: ${accountValue} +${routingLabel}: ${routingValue} Deposit Message: ${onrampData?.depositInstructions?.depositMessage || 'Loading...'} Please use these details to complete your bank transfer.` From a9a69ab3649b495ac4d78251aa314c4a491f45b8 Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Fri, 27 Jun 2025 23:24:51 -0300 Subject: [PATCH 05/15] Mexico doesnt have IBAN/BIC or equivalent, so we hide those details from Sharing feature and the details card --- .../components/AddMoneyBankDetails.tsx | 83 ++++++++++++------- 1 file changed, 52 insertions(+), 31 deletions(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index a868ea8bd..e531573c3 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -83,19 +83,34 @@ export default function AddMoneyBankDetails() { const generateBankDetails = async () => { const formattedAmount = formatCurrencyAmount(amountToOnramp, currentCountryDetails?.currency || 'USD') - const accountLabel = onrampData?.depositInstructions?.bankAccountNumber ? 'Account Number' : 'IBAN' - const routingLabel = onrampData?.depositInstructions?.bankRoutingNumber ? 'Routing Number' : 'BIC' - const accountValue = - onrampData?.depositInstructions?.bankAccountNumber || onrampData?.depositInstructions?.iban || 'Loading...' - const routingValue = - onrampData?.depositInstructions?.bankRoutingNumber || onrampData?.depositInstructions?.bic || 'Loading...' - - const bankDetails = `Bank Transfer Details: + const isMexico = currentCountryDetails?.id === 'MX' + + let bankDetails = `Bank Transfer Details: Amount: ${formattedAmount} -Bank Name: ${onrampData?.depositInstructions?.bankName || 'Loading...'} -Bank Address: ${onrampData?.depositInstructions?.bankAddress || 'Loading...'} +Bank Name: ${onrampData?.depositInstructions?.bankName || 'Loading...'}` + + // Only include Bank Address for non-Mexico countries + if (!isMexico) { + bankDetails += ` +Bank Address: ${onrampData?.depositInstructions?.bankAddress || 'Loading...'}` + + const accountLabel = onrampData?.depositInstructions?.bankAccountNumber ? 'Account Number' : 'IBAN' + const routingLabel = onrampData?.depositInstructions?.bankRoutingNumber ? 'Routing Number' : 'BIC' + const accountValue = + onrampData?.depositInstructions?.bankAccountNumber || + onrampData?.depositInstructions?.iban || + 'Loading...' + const routingValue = + onrampData?.depositInstructions?.bankRoutingNumber || + onrampData?.depositInstructions?.bic || + 'Loading...' + + bankDetails += ` ${accountLabel}: ${accountValue} -${routingLabel}: ${routingValue} +${routingLabel}: ${routingValue}` + } + + bankDetails += ` Deposit Message: ${onrampData?.depositInstructions?.depositMessage || 'Loading...'} Please use these details to complete your bank transfer.` @@ -135,26 +150,32 @@ Please use these details to complete your bank transfer.` label={'Bank Name'} value={onrampData?.depositInstructions?.bankName || 'Loading...'} /> - - - + {currentCountryDetails?.id !== 'MX' && ( + + )} + {currentCountryDetails?.id !== 'MX' && ( + + )} + {currentCountryDetails?.id !== 'MX' && ( + + )} Date: Fri, 27 Jun 2025 23:44:10 -0300 Subject: [PATCH 06/15] IBAN formatted into human readable code + also copied with ShareButton in this proper format --- .../AddMoney/components/AddMoneyBankDetails.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index e531573c3..c3282e841 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -11,6 +11,7 @@ import { useRouter, useParams } from 'next/navigation' import { useEffect, useState, useMemo } from 'react' import { countryCodeMap, countryData } from '@/components/AddMoney/consts' import { formatCurrencyAmount } from '@/utils/currency' +import { formatBankAccountDisplay } from '@/utils/format.utils' import Icon from '@/components/Global/Icon' export interface IOnrampData { @@ -98,7 +99,9 @@ Bank Address: ${onrampData?.depositInstructions?.bankAddress || 'Loading...'}` const routingLabel = onrampData?.depositInstructions?.bankRoutingNumber ? 'Routing Number' : 'BIC' const accountValue = onrampData?.depositInstructions?.bankAccountNumber || - onrampData?.depositInstructions?.iban || + (onrampData?.depositInstructions?.iban + ? formatBankAccountDisplay(onrampData.depositInstructions.iban, 'iban') + : null) || 'Loading...' const routingValue = onrampData?.depositInstructions?.bankRoutingNumber || @@ -161,7 +164,9 @@ Please use these details to complete your bank transfer.` label={onrampData?.depositInstructions?.bankAccountNumber ? 'Account Number' : 'IBAN'} value={ onrampData?.depositInstructions?.bankAccountNumber || - onrampData?.depositInstructions?.iban || + (onrampData?.depositInstructions?.iban + ? formatBankAccountDisplay(onrampData.depositInstructions.iban, 'iban') + : null) || 'Loading...' } /> From 5c4a838b6f86e0952bf3595137d0510efc8af7c6 Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Sun, 29 Jun 2025 13:57:33 -0300 Subject: [PATCH 07/15] mexico non iban/bic clarification --- src/components/AddMoney/components/AddMoneyBankDetails.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index c3282e841..8b023e86b 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -90,7 +90,7 @@ export default function AddMoneyBankDetails() { Amount: ${formattedAmount} Bank Name: ${onrampData?.depositInstructions?.bankName || 'Loading...'}` - // Only include Bank Address for non-Mexico countries + // Only include Bank Address for non-Mexico countries since Mexico doesn't return IBAN/BIC or equivalent if (!isMexico) { bankDetails += ` Bank Address: ${onrampData?.depositInstructions?.bankAddress || 'Loading...'}` From ffaf281517d0677c7e4dc16c9fa20bebd04372d8 Mon Sep 17 00:00:00 2001 From: FacuBozzi <72771544+FacuBozzi@users.noreply.github.com> Date: Sun, 29 Jun 2025 17:09:57 +0000 Subject: [PATCH 08/15] style: Apply prettier formatting --- src/utils/currency.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/currency.ts b/src/utils/currency.ts index cd3ff4250..7353286bd 100644 --- a/src/utils/currency.ts +++ b/src/utils/currency.ts @@ -4,7 +4,7 @@ export const getDisplayCurrencySymbol = (code?: string, fallbackSymbol: string = if (code === 'USD') return '$' if (code === 'MXN') return '$' if (code === 'EUR') return '€' - + return fallbackSymbol } From 8bd8c5b8df2cc4399b7ae3d03d86951d6ddbec84 Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Sun, 29 Jun 2025 15:43:40 -0300 Subject: [PATCH 09/15] fixed MXN currency format --- src/app/(mobile-ui)/add-money/[country]/bank/page.tsx | 11 +++++++++++ .../AddMoney/components/AddMoneyBankDetails.tsx | 8 ++++++-- .../Global/PeanutActionDetailsCard/index.tsx | 9 ++++++++- src/utils/__tests__/bridge.utils.test.ts | 4 ++-- src/utils/bridge.utils.ts | 2 +- src/utils/currency.ts | 5 ++++- 6 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx index cc9e940d6..a0becc148 100644 --- a/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx +++ b/src/app/(mobile-ui)/add-money/[country]/bank/page.tsx @@ -24,6 +24,8 @@ import EmptyState from '@/components/Global/EmptyStates/EmptyState' import { UserDetailsForm, type UserDetailsFormData } from '@/components/AddMoney/UserDetailsForm' import { updateUserById } from '@/app/actions/users' import AddMoneyBankDetails from '@/components/AddMoney/components/AddMoneyBankDetails' +import { getDisplayCurrencySymbol } from '@/utils/currency' +import { getOnrampCurrencyConfig, getCurrencySymbol } from '@/utils/bridge.utils' type AddStep = 'inputAmount' | 'kyc' | 'loading' | 'collectUserDetails' | 'showDetails' @@ -328,6 +330,15 @@ export default function OnrampBankPage() { setTokenValue={handleTokenAmountChange} walletBalance={peanutWalletBalance} hideCurrencyToggle + currency={ + selectedCountry + ? { + code: getOnrampCurrencyConfig(selectedCountry.id).currency, + symbol: getCurrencySymbol(getOnrampCurrencyConfig(selectedCountry.id).currency), + price: 1, + } + : undefined + } />
diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index 8b023e86b..d2e416024 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -13,6 +13,7 @@ import { countryCodeMap, countryData } from '@/components/AddMoney/consts' import { formatCurrencyAmount } from '@/utils/currency' import { formatBankAccountDisplay } from '@/utils/format.utils' import Icon from '@/components/Global/Icon' +import { getCurrencySymbol, getOnrampCurrencyConfig } from '@/utils/bridge.utils' export interface IOnrampData { transferId?: string @@ -63,6 +64,8 @@ export default function AddMoneyBankDetails() { return countryCode?.toLowerCase() || 'us' }, [currentCountryDetails]) + const onrampCurrency = getOnrampCurrencyConfig(currentCountryDetails?.id || 'US').currency + useEffect(() => { // If no amount is set, redirect back to add money page if (!amountToOnramp || parseFloat(amountToOnramp) <= 0) { @@ -83,7 +86,7 @@ export default function AddMoneyBankDetails() { }, [amountToOnramp, router]) const generateBankDetails = async () => { - const formattedAmount = formatCurrencyAmount(amountToOnramp, currentCountryDetails?.currency || 'USD') + const formattedAmount = formatCurrencyAmount(amountToOnramp, onrampCurrency) const isMexico = currentCountryDetails?.id === 'MX' let bankDetails = `Bank Transfer Details: @@ -142,12 +145,13 @@ Please use these details to complete your bank transfer.` amount={amountToOnramp} tokenSymbol={PEANUT_WALLET_TOKEN_SYMBOL} countryCodeForFlag={countryCodeForFlag} + currencySymbol={getCurrencySymbol(onrampCurrency)} /> { if (recipientType === 'ADDRESS') return printableAddress(recipientName) @@ -157,10 +159,15 @@ export default function PeanutActionDetailsCard({
{getTitle()}

- {tokenSymbol.toLowerCase() === PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() ? '$ ' : ''} + {transactionType === 'ADD_MONEY' && currencySymbol + ? `${currencySymbol} ` + : tokenSymbol.toLowerCase() === PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() + ? '$ ' + : ''} {amount} {tokenSymbol.toLowerCase() !== PEANUT_WALLET_TOKEN_SYMBOL.toLowerCase() && + transactionType !== 'ADD_MONEY' && ` ${tokenSymbol.toLowerCase() === 'pnt' ? (Number(amount) === 1 ? 'Beer' : 'Beers') : tokenSymbol}`}

diff --git a/src/utils/__tests__/bridge.utils.test.ts b/src/utils/__tests__/bridge.utils.test.ts index ce35fe1ca..13714ae17 100644 --- a/src/utils/__tests__/bridge.utils.test.ts +++ b/src/utils/__tests__/bridge.utils.test.ts @@ -135,8 +135,8 @@ describe('bridge.utils', () => { expect(getCurrencySymbol('USD')).toBe('$') expect(getCurrencySymbol('eur')).toBe('€') expect(getCurrencySymbol('EUR')).toBe('€') - expect(getCurrencySymbol('mxn')).toBe('$') - expect(getCurrencySymbol('MXN')).toBe('$') + expect(getCurrencySymbol('mxn')).toBe('MX$') + expect(getCurrencySymbol('MXN')).toBe('MX$') }) it('should return uppercase currency code for unsupported currencies', () => { diff --git a/src/utils/bridge.utils.ts b/src/utils/bridge.utils.ts index 0701d514f..b4b76a6fe 100644 --- a/src/utils/bridge.utils.ts +++ b/src/utils/bridge.utils.ts @@ -54,7 +54,7 @@ export const getCurrencySymbol = (currency: string): string => { const symbols: Record = { usd: '$', eur: '€', - mxn: '$', + mxn: 'MX$', } return symbols[currency.toLowerCase()] || currency.toUpperCase() } diff --git a/src/utils/currency.ts b/src/utils/currency.ts index e1a2a616f..9516f271f 100644 --- a/src/utils/currency.ts +++ b/src/utils/currency.ts @@ -1,13 +1,16 @@ +import { getCurrencySymbol } from "./bridge.utils" + // Helper function to get currency symbol based on code export const getDisplayCurrencySymbol = (code?: string, fallbackSymbol: string = '$'): string => { if (code === 'ARS') return 'AR$' if (code === 'USD') return '$' + if (code === 'MXN') return 'MX$' return fallbackSymbol } // Simple currency amount formatter export const formatCurrencyAmount = (amount: string | number, currencyCode: string): string => { - const symbol = getDisplayCurrencySymbol(currencyCode) + const symbol = getCurrencySymbol(currencyCode) const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount if (isNaN(numAmount)) return `${symbol}0` From 801351d29362eb64f6e10f38e93f03f028d07359 Mon Sep 17 00:00:00 2001 From: FacuBozzi <72771544+FacuBozzi@users.noreply.github.com> Date: Sun, 29 Jun 2025 18:49:25 +0000 Subject: [PATCH 10/15] style: Apply prettier formatting --- .../AddMoney/components/AddMoneyBankDetails.tsx | 5 +---- src/components/Global/PeanutActionDetailsCard/index.tsx | 4 ++-- src/utils/currency.ts | 8 ++++---- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index d2e416024..4908ce5ba 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -149,10 +149,7 @@ Please use these details to complete your bank transfer.` /> - + { - const normalized = code?.toUpperCase(); - + const normalized = code?.toUpperCase() + if (normalized === 'ARS') return 'AR$' if (normalized === 'USD') return '$' if (normalized === 'MXN') return 'MX$' - + return fallbackSymbol } From 100b862ecb81366c3e557fa4c5076fe2c1e211e5 Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Sun, 29 Jun 2025 17:17:20 -0300 Subject: [PATCH 11/15] fixed double import --- src/components/AddMoney/components/AddMoneyBankDetails.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index b79e34af0..4908ce5ba 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -12,7 +12,6 @@ import { useEffect, useState, useMemo } from 'react' import { countryCodeMap, countryData } from '@/components/AddMoney/consts' import { formatCurrencyAmount } from '@/utils/currency' import { formatBankAccountDisplay } from '@/utils/format.utils' -import { getOnrampCurrencyConfig, getCurrencySymbol } from '@/utils/bridge.utils' import Icon from '@/components/Global/Icon' import { getCurrencySymbol, getOnrampCurrencyConfig } from '@/utils/bridge.utils' From 01bc5404ef586f8cd6d98981f1157388031e557b Mon Sep 17 00:00:00 2001 From: Facundo Bozzi Date: Sun, 29 Jun 2025 18:08:45 -0300 Subject: [PATCH 12/15] fixed kush comment --- src/components/AddMoney/components/AddMoneyBankDetails.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AddMoney/components/AddMoneyBankDetails.tsx b/src/components/AddMoney/components/AddMoneyBankDetails.tsx index 4908ce5ba..2b5cf26d2 100644 --- a/src/components/AddMoney/components/AddMoneyBankDetails.tsx +++ b/src/components/AddMoney/components/AddMoneyBankDetails.tsx @@ -168,7 +168,7 @@ Please use these details to complete your bank transfer.` (onrampData?.depositInstructions?.iban ? formatBankAccountDisplay(onrampData.depositInstructions.iban, 'iban') : null) || - 'Loading...' + 'N/A' } /> )} @@ -178,7 +178,7 @@ Please use these details to complete your bank transfer.` value={ onrampData?.depositInstructions?.bankRoutingNumber || onrampData?.depositInstructions?.bic || - 'Loading...' + 'N/A' } /> )} From 0456983f423e28c59af6d90cf4ab9f0de9bfe2ef Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sun, 29 Jun 2025 23:34:29 +0200 Subject: [PATCH 13/15] fix: disable mxn onramp + disable other add methods --- src/components/AddMoney/consts/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/AddMoney/consts/index.ts b/src/components/AddMoney/consts/index.ts index b932a46d1..8d8c2330c 100644 --- a/src/components/AddMoney/consts/index.ts +++ b/src/components/AddMoney/consts/index.ts @@ -2129,6 +2129,9 @@ countryData.forEach((country) => { const newMethod = { ...m } if (newMethod.id === 'bank-transfer-add') { newMethod.path = `/add-money/${country.path}/bank` + newMethod.isSoon = countryCode === 'MX' + } else { + newMethod.isSoon = true } return newMethod }) From b6e044e74e4b9c1df456f99a7a0688bdc2bfd673 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sun, 29 Jun 2025 23:42:33 +0200 Subject: [PATCH 14/15] fix: disable non sepa/us countries bank on/offramps --- src/components/AddMoney/consts/index.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/AddMoney/consts/index.ts b/src/components/AddMoney/consts/index.ts index 8d8c2330c..fd0039422 100644 --- a/src/components/AddMoney/consts/index.ts +++ b/src/components/AddMoney/consts/index.ts @@ -2063,6 +2063,8 @@ export const countryCodeMap: { [key: string]: string } = { USA: 'US', } +const enabledBankTransferCountries = new Set([...Object.keys(countryCodeMap), 'US']) + countryData.forEach((country) => { if (country.type === 'country') { const countryCode = country.id @@ -2115,7 +2117,7 @@ countryData.forEach((country) => { ...DEFAULT_BANK_WITHDRAW_METHOD, id: `${countryCode.toLowerCase()}-default-bank-withdraw`, path: `/withdraw/${countryCode.toLowerCase()}/bank`, - isSoon: countryCode === 'MX', + isSoon: !enabledBankTransferCountries.has(countryCode), }) } @@ -2129,7 +2131,7 @@ countryData.forEach((country) => { const newMethod = { ...m } if (newMethod.id === 'bank-transfer-add') { newMethod.path = `/add-money/${country.path}/bank` - newMethod.isSoon = countryCode === 'MX' + newMethod.isSoon = !enabledBankTransferCountries.has(countryCode) } else { newMethod.isSoon = true } From cc9b57ab167c54aafd209fdc28a3067909000a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Sun, 29 Jun 2025 18:47:05 -0300 Subject: [PATCH 15/15] fix: display currency symbol --- src/utils/currency.ts | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/utils/currency.ts b/src/utils/currency.ts index ed5f6d136..05bced81d 100644 --- a/src/utils/currency.ts +++ b/src/utils/currency.ts @@ -2,13 +2,29 @@ import { getCurrencySymbol } from './bridge.utils' // Helper function to get currency symbol based on code export const getDisplayCurrencySymbol = (code?: string, fallbackSymbol: string = '$'): string => { - const normalized = code?.toUpperCase() + if (!code) return fallbackSymbol + const upperCode = code.toUpperCase() - if (normalized === 'ARS') return 'AR$' - if (normalized === 'USD') return '$' - if (normalized === 'MXN') return 'MX$' - - return fallbackSymbol + switch (upperCode) { + case 'ARS': + return 'AR$' + case 'USD': + return '$' + case 'EUR': + return '€' + case 'GBP': + return '£' + case 'JPY': + return '¥' + case 'MXN': + return 'MX$' + case 'BRL': + return 'R$' + case 'CAD': + return 'CA$' + default: + return upperCode // Return the currency code itself as fallback (e.g., "CHF") + } } // Simple currency amount formatter