Appearance
Formatters
Display helpers from @swapped/connect-sdk/format. Use them so fiat and token amounts match the same rules as the hosted widget and the SDK’s own formatted.* fields.
Works the same in Core and React — import from the format entry, not from @swapped/connect-sdk or /react.
ts
import { TokenSymbol } from '@swapped/connect-sdk'
import {
formatCurrencyAmount,
formatTokenAmount,
} from '@swapped/connect-sdk/format'React hooks often already expose formatted strings (formattedMinAmount, balance.formatted.valueFiat, …). Reach for these helpers when you render your own amounts.
Currency
- formatCurrencyAmount — primary USD-style helper
- formatCurrency — fixed-decimal currency formatting
Token
- formatTokenAmount — token balances for UI
- formatCompactTokenAmount —
K/Mabbreviations
Numbers
pretty vs js-number
ts
formatCurrencyAmount(1234.5)
// "1,234.50" — pretty (UI labels)
formatCurrencyAmount(1234.5, { format: 'js-number' })
// "1234.50" — no separators (inputs / round-trips)Exchange Pay amount clamping in the React hooks uses format: 'js-number' when writing back into the input.
Defaults (setFormatDefaults)
Call once at startup so standalone formatters and the SDK’s formatted.* fields share the same rules. Per-call args still win. getTokenDisplayDecimals returning undefined falls through to the SDK token table.
ts
import { Network, TokenSymbol } from '@swapped/connect-sdk'
import { setFormatDefaults } from '@swapped/connect-sdk/format'
setFormatDefaults({
fiatDecimals: 2,
maxFiatDecimals: 2,
firstNonZeroDecimal: true,
firstNonZeroDecimalInput: false,
getTokenDisplayDecimals: (token, network) => {
if (token === TokenSymbol.ETH) return 8
if (token === TokenSymbol.USDT && network === Network.Bsc) return 4
return undefined
},
})fiatDecimals is display only (formatCurrencyAmount, formatted.fiatValue). maxFiatDecimals is for amount inputs (useDualAmountInput, convertCryptoToFiat). Per-call maxFiatDecimals / decimals still wins.
firstNonZeroDecimal is display only (labels / formatted.*). firstNonZeroDecimalInput is for amount inputs (useDualAmountInput crypto amountDisplay). Inputs default to false so dust stays at display decimals (0.0001 USDC → 0) even when display expansion is on.
Cash App and Exchange Pay always use 2 fiat decimals (USD cents) for both input and display. They ignore fiatDecimals / maxFiatDecimals.