diff --git a/samples/frontend/src/steps/CreateQuote.tsx b/samples/frontend/src/steps/CreateQuote.tsx index c51f5445..929a650b 100644 --- a/samples/frontend/src/steps/CreateQuote.tsx +++ b/samples/frontend/src/steps/CreateQuote.tsx @@ -13,20 +13,31 @@ interface Props { const SOURCE_CURRENCIES = ['USD', 'USDC'] as const +// Currencies that fund over a crypto network and therefore require `cryptoNetwork`. +const CRYPTO_SOURCE_CURRENCIES = ['USDC'] +// Networks a stablecoin funding source can deposit on. +const CRYPTO_NETWORKS = ['BASE', 'ETHEREUM', 'POLYGON', 'SOLANA'] + export default function CreateQuote({ customerId, externalAccountId, destCurrency, onComplete, disabled }: Props) { const [body, setBody] = useState('') const [response, setResponse] = useState(null) const [error, setError] = useState(null) const [loading, setLoading] = useState(false) const [sourceCurrency, setSourceCurrency] = useState(SOURCE_CURRENCIES[0]) + const [cryptoNetwork, setCryptoNetwork] = useState(CRYPTO_NETWORKS[0]) + + const isCryptoSource = CRYPTO_SOURCE_CURRENCIES.includes(sourceCurrency) useEffect(() => { + const source: Record = { + sourceType: "REALTIME_FUNDING", + currency: sourceCurrency, + customerId: customerId ?? "" + } + // cryptoNetwork is required when funding from a crypto currency (e.g. USDC). + if (isCryptoSource) source.cryptoNetwork = cryptoNetwork setBody(JSON.stringify({ - source: { - sourceType: "REALTIME_FUNDING", - currency: sourceCurrency, - customerId: customerId ?? "" - }, + source, destination: { destinationType: "ACCOUNT", accountId: externalAccountId ?? "" @@ -35,7 +46,7 @@ export default function CreateQuote({ customerId, externalAccountId, destCurrenc lockedCurrencySide: "SENDING", purposeOfPayment: "GIFT" }, null, 2)) - }, [customerId, externalAccountId, sourceCurrency, destCurrency]) + }, [customerId, externalAccountId, sourceCurrency, destCurrency, isCryptoSource, cryptoNetwork]) const submit = async () => { setLoading(true) @@ -72,6 +83,23 @@ export default function CreateQuote({ customerId, externalAccountId, destCurrenc ))} + {isCryptoSource && ( +
+ + +

Required when funding from a crypto currency — the network the customer deposits {sourceCurrency} on.

+
+ )}