@@ -85,21 +86,7 @@ const InputAmountStep = ({
/>
{/* limits warning/error card */}
- {showLimitsCard && (
-
diff --git a/src/components/AddMoney/components/MantecaAddMoney.tsx b/src/components/AddMoney/components/MantecaAddMoney.tsx
index 32f66d169..ed178bd5b 100644
--- a/src/components/AddMoney/components/MantecaAddMoney.tsx
+++ b/src/components/AddMoney/components/MantecaAddMoney.tsx
@@ -19,7 +19,7 @@ import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants/zerodev.consts'
import { TRANSACTIONS } from '@/constants/query.consts'
import { useQueryStates, parseAsString, parseAsStringEnum } from 'nuqs'
import { useLimitsValidation } from '@/features/limits/hooks/useLimitsValidation'
-import { mapToLimitCurrency } from '@/features/limits/utils/limits.utils'
+import { mapToLimitCurrency } from '@/features/limits/utils'
// Step type for URL state
type MantecaStep = 'inputAmount' | 'depositDetails'
@@ -74,12 +74,11 @@ const MantecaAddMoney: FC = () => {
return mapToLimitCurrency(selectedCountry?.currency)
}, [selectedCountry?.currency])
- // validate against user's limits
+ // validates deposit amount against user's limits
const limitsValidation = useLimitsValidation({
flowType: 'onramp',
amount: usdAmount,
currency: limitsCurrency,
- isLocalUser: true, // manteca is for local users
})
useWebSocket({
diff --git a/src/constants/countryCurrencyMapping.ts b/src/constants/countryCurrencyMapping.ts
index 26c926cca..d7f0d4e71 100644
--- a/src/constants/countryCurrencyMapping.ts
+++ b/src/constants/countryCurrencyMapping.ts
@@ -48,3 +48,38 @@ const countryCurrencyMappings: CountryCurrencyMapping[] = [
]
export default countryCurrencyMappings
+
+// country/currency utility functions
+
+/**
+ * generates flag url from iso2 country code
+ * uses flagcdn.com pattern used throughout the app
+ */
+export function getFlagUrl(iso2: string, size: 160 | 320 = 160): string {
+ return `https://flagcdn.com/w${size}/${iso2.toLowerCase()}.png`
+}
+
+/**
+ * maps currency code to its flag code (iso2)
+ * useful for getting flag from currency like ARS -> ar
+ */
+export function getCurrencyFlagCode(currencyCode: string): string | null {
+ const mapping = countryCurrencyMappings.find((m) => m.currencyCode.toUpperCase() === currencyCode.toUpperCase())
+ return mapping?.flagCode ?? null
+}
+
+/**
+ * gets flag url directly from currency code
+ * combines getCurrencyFlagCode + getFlagUrl
+ */
+export function getCurrencyFlagUrl(currencyCode: string, size: 160 | 320 = 160): string | null {
+ const flagCode = getCurrencyFlagCode(currencyCode)
+ return flagCode ? getFlagUrl(flagCode, size) : null
+}
+
+/**
+ * gets country info from currency code
+ */
+export function getCountryByCurrency(currencyCode: string): CountryCurrencyMapping | null {
+ return countryCurrencyMappings.find((m) => m.currencyCode.toUpperCase() === currencyCode.toUpperCase()) ?? null
+}
diff --git a/src/features/limits/components/LimitsProgressBar.tsx b/src/features/limits/components/LimitsProgressBar.tsx
index e5f1273cd..58f2079dd 100644
--- a/src/features/limits/components/LimitsProgressBar.tsx
+++ b/src/features/limits/components/LimitsProgressBar.tsx
@@ -1,7 +1,7 @@
'use client'
import { twMerge } from 'tailwind-merge'
-import { getLimitColorClass } from '../utils/limits.utils'
+import { getLimitColorClass } from '../utils'
interface LimitsProgressBarProps {
total: number
diff --git a/src/features/limits/components/LimitsWarningCard.tsx b/src/features/limits/components/LimitsWarningCard.tsx
index 8f317c52f..4bc625ae5 100644
--- a/src/features/limits/components/LimitsWarningCard.tsx
+++ b/src/features/limits/components/LimitsWarningCard.tsx
@@ -1,22 +1,15 @@
'use client'
import InfoCard from '@/components/Global/InfoCard'
-import { Icon, type IconProps } from '@/components/Global/Icons/Icon'
+import { Icon } from '@/components/Global/Icons/Icon'
import Link from 'next/link'
import { useModalsContext } from '@/context/ModalsContext'
import { twMerge } from 'tailwind-merge'
-import { LIMITS_COPY } from '../utils/limits.utils'
+import { LIMITS_COPY, type LimitsWarningItem } from '../utils'
export type LimitsWarningType = 'warning' | 'error'
-interface LimitsWarningItem {
- text: string
- isLink?: boolean
- href?: string
- icon?: IconProps['name']
-}
-
-interface LimitsWarningCardProps {
+export interface LimitsWarningCardProps {
type: LimitsWarningType
title: string
items: LimitsWarningItem[]
diff --git a/src/features/limits/consts.ts b/src/features/limits/consts.ts
index 741375396..8e3904403 100644
--- a/src/features/limits/consts.ts
+++ b/src/features/limits/consts.ts
@@ -1,46 +1,45 @@
-// region path to provider mapping for navigation
-export const BRIDGE_REGIONS = ['europe', 'north-america', 'mexico', 'argentina', 'brazil']
-export const MANTECA_REGIONS = ['latam']
-
-// map region paths to bridge page region query param
-export const REGION_TO_BRIDGE_PARAM: Record
= {
- europe: 'europe',
- 'north-america': 'us',
- mexico: 'mexico',
- argentina: 'argentina',
- brazil: 'brazil',
-}
-
-// region types for url state (source region from limits page)
-export type BridgeRegion = 'us' | 'mexico' | 'europe' | 'argentina' | 'brazil'
-
-// regions that show main limits (bank transfers)
-export const BANK_TRANSFER_REGIONS: BridgeRegion[] = ['us', 'mexico', 'europe']
-
-// qr-only countries config
-export const QR_COUNTRIES = [
- { id: 'argentina', name: 'Argentina', flag: 'https://flagcdn.com/w160/ar.png' },
- { id: 'brazil', name: 'Brazil', flag: 'https://flagcdn.com/w160/br.png' },
-] as const
-
-export type QrCountryId = (typeof QR_COUNTRIES)[number]['id']
+import { getFlagUrl } from '@/constants/countryCurrencyMapping'
+import { MANTECA_ALPHA3_TO_ALPHA2, countryData } from '@/components/AddMoney/consts'
export const LIMITS_PROVIDERS = ['bridge', 'manteca'] as const
export type LimitsProvider = (typeof LIMITS_PROVIDERS)[number]
-// currency/country to flag mapping
-export const LIMITS_CURRENCY_FLAGS: Record = {
- ARS: 'https://flagcdn.com/w160/ar.png',
- BRL: 'https://flagcdn.com/w160/br.png',
- ARG: 'https://flagcdn.com/w160/ar.png',
- BRA: 'https://flagcdn.com/w160/br.png',
+// qr-only countries - derived from manteca supported countries
+// these are countries where bridge users can make qr payments
+
+// manteca countries are qr-payment enabled countries (argentina, brazil)
+const MANTECA_COUNTRY_ISO2 = Object.values(MANTECA_ALPHA3_TO_ALPHA2) // ['AR', 'BR']
+
+// derive qr country data from centralized countryData
+const derivedQrCountries = countryData
+ .filter((c) => c.type === 'country' && c.iso2 && MANTECA_COUNTRY_ISO2.includes(c.iso2))
+ .map((c) => ({
+ id: c.path, // 'argentina', 'brazil'
+ name: c.title, // 'Argentina', 'Brazil'
+ flagCode: c.iso2!.toLowerCase(), // 'ar', 'br'
+ }))
+
+export type QrCountryId = 'argentina' | 'brazil'
+
+/**
+ * get qr-only country with resolved flag url
+ * avoids hardcoding flag urls - uses centralized getFlagUrl
+ */
+export function getQrCountryWithFlag(id: QrCountryId) {
+ const country = derivedQrCountries.find((c) => c.id === id)
+ if (!country) return null
+ return {
+ ...country,
+ flag: getFlagUrl(country.flagCode),
+ }
}
-// currency to symbol mapping
-export const LIMITS_CURRENCY_SYMBOLS: Record = {
- ARS: 'ARS',
- BRL: 'R$',
- USD: '$',
+/**
+ * get all qr-only countries with resolved flag urls
+ */
+export function getQrCountriesWithFlags() {
+ return derivedQrCountries.map((country) => ({
+ ...country,
+ flag: getFlagUrl(country.flagCode),
+ }))
}
-
-export type LimitsPeriod = 'monthly' | 'yearly'
diff --git a/src/features/limits/hooks/useLimitsValidation.ts b/src/features/limits/hooks/useLimitsValidation.ts
index 7f16d1c9f..4ebd69bec 100644
--- a/src/features/limits/hooks/useLimitsValidation.ts
+++ b/src/features/limits/hooks/useLimitsValidation.ts
@@ -10,6 +10,7 @@ import {
MAX_MANTECA_WITHDRAW_AMOUNT,
} from '@/constants/payment.consts'
import { formatExtendedNumber } from '@/utils/general.utils'
+import { mapToLimitCurrency, type LimitCurrency } from '../utils'
// threshold for showing warning (percentage of limit remaining after transaction)
const WARNING_THRESHOLD_PERCENT = 30
@@ -24,29 +25,35 @@ export type LimitValidationResult = {
}
export type LimitFlowType = 'onramp' | 'offramp' | 'qr-payment'
-export type LimitCurrency = 'ARS' | 'BRL' | 'USD'
+export { type LimitCurrency } from '../utils'
interface UseLimitsValidationOptions {
flowType: LimitFlowType
amount: number | string | null | undefined
- currency?: LimitCurrency
- // for qr payments, whether user is local (arg/brazil) or foreign
- isLocalUser?: boolean
+ /**
+ * currency code for the transaction (ARS, BRL, USD)
+ * for qr payments this determines which manteca limit to check
+ * defaults to USD
+ */
+ currency?: LimitCurrency | string
}
/**
* hook to validate amounts against user's transaction limits
+ * automatically determines if user is local (manteca) or foreign (bridge) based on their kyc status
* returns warning/blocking state based on remaining limits
*/
-export function useLimitsValidation({
- flowType,
- amount,
- currency = 'USD',
- isLocalUser = false,
-}: UseLimitsValidationOptions) {
+export function useLimitsValidation({ flowType, amount, currency: currencyInput }: UseLimitsValidationOptions) {
const { mantecaLimits, bridgeLimits, isLoading, hasMantecaLimits, hasBridgeLimits } = useLimits()
const { isUserMantecaKycApproved, isUserBridgeKycApproved } = useKycStatus()
+ // normalize currency to valid LimitCurrency type
+ const currency = mapToLimitCurrency(currencyInput)
+
+ // determine if user is "local" (has manteca kyc for latam operations)
+ // this replaces the external isLocalUser parameter
+ const isLocalUser = isUserMantecaKycApproved
+
// parse amount to number
const numericAmount = useMemo(() => {
if (!amount) return 0
@@ -271,6 +278,8 @@ export function useLimitsValidation({
return {
...validation,
isLoading,
+ // the effective currency being used for validation
+ currency,
// convenience getters
hasLimits: hasMantecaLimits || hasBridgeLimits,
isMantecaUser: isUserMantecaKycApproved,
diff --git a/src/features/limits/utils.ts b/src/features/limits/utils.ts
new file mode 100644
index 000000000..b3c6bcfbc
--- /dev/null
+++ b/src/features/limits/utils.ts
@@ -0,0 +1,206 @@
+'use client'
+
+import type { MantecaLimit } from '@/interfaces'
+import { SYMBOLS_BY_CURRENCY_CODE } from '@/hooks/useCurrency'
+import { getCurrencyFlagUrl } from '@/constants/countryCurrencyMapping'
+import { formatExtendedNumber } from '@/utils/general.utils'
+import type { LimitValidationResult, LimitFlowType } from './hooks/useLimitsValidation'
+import type { IconName } from '@/components/Global/Icons/Icon'
+
+// limits period type, used in tabs for limits page
+export type LimitsPeriod = 'monthly' | 'yearly'
+
+// region routing configuration
+// maps region paths to their respective limits page routes
+const REGION_ROUTES: Record = {
+ // bridge regions
+ europe: { provider: 'bridge', param: 'europe' },
+ 'north-america': { provider: 'bridge', param: 'us' },
+ mexico: { provider: 'bridge', param: 'mexico' },
+ argentina: { provider: 'bridge', param: 'argentina' },
+ brazil: { provider: 'bridge', param: 'brazil' },
+ latam: { provider: 'manteca' },
+}
+
+// regions that show bank transfer limits (not qr-only)
+export const BANK_TRANSFER_REGIONS = ['us', 'mexico', 'europe'] as const
+export type BridgeRegion = 'us' | 'mexico' | 'europe' | 'argentina' | 'brazil'
+
+// ux copy constants
+export const LIMITS_COPY = {
+ BLOCKING_TITLE: 'This amount exceeds your limit.',
+ WARNING_TITLE: "You're close to your limit.",
+ CHECK_LIMITS: 'Check my limits.',
+ SUPPORT_MESSAGE: 'Hi, I would like to increase my payment limits.',
+} as const
+
+// utility functions - used across the limits feature
+
+/**
+ * determines which provider route to navigate to based on region path
+ */
+export function getProviderRoute(regionPath: string, hasMantecaKyc: boolean): string {
+ const route = REGION_ROUTES[regionPath]
+
+ // latam region goes to manteca if user has manteca kyc
+ if (regionPath === 'latam' && hasMantecaKyc) {
+ return '/limits/manteca'
+ }
+
+ if (route) {
+ if (route.provider === 'manteca') {
+ return '/limits/manteca'
+ }
+ return `/limits/bridge${route.param ? `?region=${route.param}` : ''}`
+ }
+
+ // default fallback
+ return '/limits/bridge?region=us'
+}
+
+/**
+ * maps a currency string to a valid limit currency type
+ * defaults to USD for unsupported currencies
+ */
+export type LimitCurrency = 'ARS' | 'BRL' | 'USD'
+
+export function mapToLimitCurrency(currency?: string): LimitCurrency {
+ const upper = currency?.toUpperCase()
+ if (upper === 'ARS' || upper === 'BRL') return upper as LimitCurrency
+ return 'USD'
+}
+
+/**
+ * get currency symbol from currency code
+ * uses centralized SYMBOLS_BY_CURRENCY_CODE from useCurrency
+ */
+export function getCurrencySymbol(currency: string): string {
+ return SYMBOLS_BY_CURRENCY_CODE[currency.toUpperCase()] || currency.toUpperCase()
+}
+
+/**
+ * get flag url from currency code
+ * uses centralized getCurrencyFlagUrl from countryCurrencyMapping
+ */
+export function getFlagUrlForCurrency(currency: string): string | null {
+ return getCurrencyFlagUrl(currency)
+}
+
+/**
+ * format amount with currency symbol
+ */
+export function formatAmountWithCurrency(amount: number, currency: string): string {
+ const symbol = getCurrencySymbol(currency)
+ // add space for currency codes (length > 1), not for symbols like $ or €
+ const separator = symbol.length > 1 && symbol === symbol.toUpperCase() ? ' ' : ''
+ return `${symbol}${separator}${formatExtendedNumber(amount)}`
+}
+
+/**
+ * get limit and remaining values for the selected period
+ */
+export function getLimitData(limit: MantecaLimit, period: LimitsPeriod) {
+ if (period === 'monthly') {
+ return {
+ limit: parseFloat(limit.monthlyLimit),
+ remaining: parseFloat(limit.availableMonthlyLimit),
+ }
+ }
+ return {
+ limit: parseFloat(limit.yearlyLimit),
+ remaining: parseFloat(limit.availableYearlyLimit),
+ }
+}
+
+// limit color thresholds
+const LIMIT_HEALTHY_THRESHOLD = 70 // >70% remaining = green
+const LIMIT_WARNING_THRESHOLD = 20 // 20-70% remaining = yellow, <20% = red
+
+/**
+ * get color class for remaining percentage
+ * used by both progress bar and text coloring
+ */
+export function getLimitColorClass(remainingPercent: number, type: 'bg' | 'text'): string {
+ if (remainingPercent > LIMIT_HEALTHY_THRESHOLD) {
+ return type === 'bg' ? 'bg-success-3' : 'text-success-1'
+ }
+ if (remainingPercent > LIMIT_WARNING_THRESHOLD) {
+ return type === 'bg' ? 'bg-yellow-1' : 'text-yellow-1'
+ }
+ return type === 'bg' ? 'bg-error-4' : 'text-error-4'
+}
+
+// limits warning card helper - eliminates DRY violations
+// generates props for LimitsWarningCard based on validation result
+
+export interface LimitsWarningItem {
+ text: string
+ isLink?: boolean
+ href?: string
+ icon?: IconName
+}
+
+interface LimitsWarningCardPropsResult {
+ type: 'warning' | 'error'
+ title: string
+ items: LimitsWarningItem[]
+ showSupportLink: boolean
+}
+
+interface GetLimitsWarningCardPropsOptions {
+ validation: LimitValidationResult & { isMantecaUser?: boolean }
+ flowType: LimitFlowType
+ currency: string
+}
+
+/**
+ * generates LimitsWarningCard props from validation result
+ * centralizes the logic that was duplicated across 4+ files
+ */
+export function getLimitsWarningCardProps({
+ validation,
+ flowType,
+ currency,
+}: GetLimitsWarningCardPropsOptions): LimitsWarningCardPropsResult | null {
+ // no warning needed if not blocking or warning
+ if (!validation.isBlocking && !validation.isWarning) {
+ return null
+ }
+
+ const items: LimitsWarningItem[] = []
+ const currencySymbol = getCurrencySymbol(currency)
+ const formattedLimit = formatExtendedNumber(validation.remainingLimit ?? 0)
+
+ // build the limit message based on flow type
+ let limitMessage = ''
+ if (flowType === 'onramp') {
+ limitMessage = `You can add up to ${currencySymbol === '$' ? '' : currencySymbol + ' '}${currencySymbol === '$' ? '$' : ''}${formattedLimit}${validation.daysUntilReset ? '' : ' per transaction'}`
+ } else if (flowType === 'offramp') {
+ limitMessage = `You can withdraw up to ${currencySymbol === '$' ? '' : currencySymbol + ' '}${currencySymbol === '$' ? '$' : ''}${formattedLimit}${validation.daysUntilReset ? '' : ' per transaction'}`
+ } else {
+ // qr-payment
+ limitMessage = `You can pay up to ${currencySymbol === '$' ? '' : currencySymbol + ' '}${currencySymbol === '$' ? '$' : ''}${formattedLimit} per transaction`
+ }
+
+ items.push({ text: limitMessage })
+
+ // add days until reset if applicable
+ if (validation.daysUntilReset) {
+ items.push({ text: `Limit resets in ${validation.daysUntilReset} days.` })
+ }
+
+ // add check limits link
+ items.push({
+ text: LIMITS_COPY.CHECK_LIMITS,
+ isLink: true,
+ href: '/limits',
+ icon: 'external-link',
+ })
+
+ return {
+ type: validation.isBlocking ? 'error' : 'warning',
+ title: validation.isBlocking ? LIMITS_COPY.BLOCKING_TITLE : LIMITS_COPY.WARNING_TITLE,
+ items,
+ showSupportLink: validation.isMantecaUser ?? false,
+ }
+}
diff --git a/src/features/limits/utils/limits.utils.ts b/src/features/limits/utils/limits.utils.ts
deleted file mode 100644
index fe8d434b9..000000000
--- a/src/features/limits/utils/limits.utils.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { MantecaLimit } from '@/interfaces'
-import { BRIDGE_REGIONS, MANTECA_REGIONS, REGION_TO_BRIDGE_PARAM, type LimitsPeriod } from '../consts'
-import type { LimitCurrency } from '../hooks/useLimitsValidation'
-
-// warning card copy - centralized for consistency
-export const LIMITS_COPY = {
- BLOCKING_TITLE: 'Amount too high, try a smaller amount.',
- WARNING_TITLE: "You're close to your limit.",
- CHECK_LIMITS: 'Check my limits.',
- SUPPORT_MESSAGE: 'Hi, I would like to increase my payment limits.',
-} as const
-
-/**
- * maps a currency string to a valid LimitCurrency type
- * defaults to USD for unsupported currencies
- */
-export function mapToLimitCurrency(currency?: string): LimitCurrency {
- const upper = currency?.toUpperCase()
- if (upper === 'ARS' || upper === 'BRL') return upper as LimitCurrency
- return 'USD'
-}
-
-/**
- * determines which provider route to navigate to based on region path
- * includes region query param for bridge limits page
- */
-export function getProviderRoute(regionPath: string, hasMantecaKyc: boolean): string {
- // latam region always goes to manteca if user has manteca kyc
- if (MANTECA_REGIONS.includes(regionPath) && hasMantecaKyc) {
- return '/limits/manteca'
- }
- // bridge regions go to bridge with region param
- if (BRIDGE_REGIONS.includes(regionPath)) {
- const regionParam = REGION_TO_BRIDGE_PARAM[regionPath] || 'us'
- return `/limits/bridge?region=${regionParam}`
- }
- // default to bridge for any other unlocked region
- return '/limits/bridge?region=us'
-}
-
-/**
- * get limit and remaining values for the selected period
- */
-export function getLimitData(limit: MantecaLimit, period: LimitsPeriod) {
- if (period === 'monthly') {
- return {
- limit: parseFloat(limit.monthlyLimit),
- remaining: parseFloat(limit.availableMonthlyLimit),
- }
- }
- return {
- limit: parseFloat(limit.yearlyLimit),
- remaining: parseFloat(limit.availableYearlyLimit),
- }
-}
-
-// thresholds for limit usage coloring
-const LIMIT_HEALTHY_THRESHOLD = 70 // >70% remaining = green
-const LIMIT_WARNING_THRESHOLD = 20 // 20-70% remaining = yellow, <20% = red
-
-/**
- * get color class for remaining percentage
- * used by both progress bar and text coloring
- */
-export function getLimitColorClass(remainingPercent: number, type: 'bg' | 'text'): string {
- if (remainingPercent > LIMIT_HEALTHY_THRESHOLD) {
- return type === 'bg' ? 'bg-success-3' : 'text-success-1'
- }
- if (remainingPercent > LIMIT_WARNING_THRESHOLD) {
- return type === 'bg' ? 'bg-yellow-1' : 'text-yellow-1'
- }
- return type === 'bg' ? 'bg-error-4' : 'text-error-4'
-}
diff --git a/src/features/limits/views/BridgeLimitsView.tsx b/src/features/limits/views/BridgeLimitsView.tsx
index 185b7ca06..8bbb6fc5e 100644
--- a/src/features/limits/views/BridgeLimitsView.tsx
+++ b/src/features/limits/views/BridgeLimitsView.tsx
@@ -10,10 +10,10 @@ import { MAX_QR_PAYMENT_AMOUNT_FOREIGN } from '@/constants/payment.consts'
import Image from 'next/image'
import * as Accordion from '@radix-ui/react-accordion'
import { useQueryState, parseAsStringEnum } from 'nuqs'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
import PeanutLoading from '@/components/Global/PeanutLoading'
-import { BANK_TRANSFER_REGIONS, QR_COUNTRIES, type BridgeRegion, type QrCountryId } from '../consts'
-import { formatExtendedNumber } from '@/utils/general.utils'
+import { getQrCountriesWithFlags, type QrCountryId } from '../consts'
+import { BANK_TRANSFER_REGIONS, type BridgeRegion, formatAmountWithCurrency } from '../utils'
import LimitsError from '../components/LimitsError'
import LimitsDocsLink from '../components/LimitsDocsLink'
import EmptyState from '@/components/Global/EmptyStates/EmptyState'
@@ -34,17 +34,17 @@ const BridgeLimitsView = () => {
parseAsStringEnum(['us', 'mexico', 'europe', 'argentina', 'brazil']).withDefault('us')
)
- // local state for qr accordion (doesn't affect url)
- const [expandedCountry, setExpandedCountry] = useState(undefined)
+ // local state for qr accordion - auto-expand if region is a qr country
+ const [expandedCountry, setExpandedCountry] = useState(
+ region === 'argentina' || region === 'brazil' ? region : undefined
+ )
- // determine what to show based on source region
- const showBankTransferLimits = BANK_TRANSFER_REGIONS.includes(region)
+ // get qr countries with resolved flag urls (uses centralized flag utility)
+ const qrCountries = useMemo(() => getQrCountriesWithFlags(), [])
- // format limit amount with currency symbol using shared util
- const formatLimit = (amount: string, asset: string) => {
- const symbol = asset === 'USD' ? '$' : asset
- return `${symbol}${formatExtendedNumber(amount)}`
- }
+ // determine what to show based on source region
+ // cast needed because region type is wider than BANK_TRANSFER_REGIONS tuple
+ const showBankTransferLimits = (BANK_TRANSFER_REGIONS as readonly string[]).includes(region)
return (
@@ -66,16 +66,22 @@ const BridgeLimitsView = () => {
Add money: up to{' '}
- {formatLimit(bridgeLimits.onRampPerTransaction, bridgeLimits.asset)} per
- transaction
+ {formatAmountWithCurrency(
+ parseFloat(bridgeLimits.onRampPerTransaction),
+ bridgeLimits.asset
+ )}{' '}
+ per transaction
Withdrawing: up to{' '}
- {formatLimit(bridgeLimits.offRampPerTransaction, bridgeLimits.asset)} per
- transaction
+ {formatAmountWithCurrency(
+ parseFloat(bridgeLimits.offRampPerTransaction),
+ bridgeLimits.asset
+ )}{' '}
+ per transaction
@@ -94,11 +100,11 @@ const BridgeLimitsView = () => {
value={expandedCountry}
onValueChange={(value) => setExpandedCountry(value as QrCountryId | undefined)}
>
- {QR_COUNTRIES.map((country, index) => (
+ {qrCountries.map((country, index) => (