diff --git a/app/[lang]/_components/trading/TradingWidget.tsx b/app/[lang]/_components/trading/TradingWidget.tsx index 7530394..f2d0556 100644 --- a/app/[lang]/_components/trading/TradingWidget.tsx +++ b/app/[lang]/_components/trading/TradingWidget.tsx @@ -17,6 +17,37 @@ import type {TChain} from './ChainSelect' import type {TToken} from './TokenSelect' import type {ReactNode} from 'react' +const getChainflipAssetId = (token: TToken, chain: TChain): string => { + if (token.symbol === 'SOL') { + return 'Sol.Sol' + } + if (token.symbol === 'BTC') { + return 'Btc.Btc' + } + if (token.symbol === 'ETH') { + return 'Eth.Eth' + } + if (token.symbol === 'USDT') { + return 'Usdt.Eth' + } + return `${token.symbol}.${chain.requestKey}` +} + +const getChainflipDecimals = (token: TToken): number => { + switch (token.symbol) { + case 'SOL': + return 9 + case 'BTC': + return 8 + case 'ETH': + return 18 + case 'USDT': + return 6 + default: + return 18 + } +} + export function TradingWidget(): ReactNode { const [fromToken, setFromToken] = useState(SUPPORTED_TOKENS[0]) const [toToken, setToToken] = useState(SUPPORTED_TOKENS[1]) @@ -76,8 +107,12 @@ export function TradingWidget(): ReactNode { setIsLoading(true) try { const numericAmount = Number(debouncedAmount) + const sourceAsset = getChainflipAssetId(fromToken, fromChain) + const destinationAsset = getChainflipAssetId(toToken, toChain) + const decimals = getChainflipDecimals(fromToken) + const amountInBaseUnits = BigInt(Math.round(numericAmount * 10 ** decimals)).toString() fetch( - `https://chainflip-broker.io/quotes-native?apiKey=09bc0796ff40435482c0a54fa6ae2784&sourceAsset=${fromToken.symbol}.${fromChain.requestKey}&destinationAsset=${toToken.symbol}.${toChain.requestKey}&amount=${numericAmount * 10 ** (fromToken.decimals[toToken.symbol?.toLowerCase() || 'eth'] || 6)}&commissionBps=63` + `https://chainflip-broker.io/quotes-native?apiKey=09bc0796ff40435482c0a54fa6ae2784&sourceAsset=${sourceAsset}&destinationAsset=${destinationAsset}&amount=${amountInBaseUnits}&commissionBps=63` ) .then(async res => res.json()) .then(data => { @@ -98,11 +133,10 @@ export function TradingWidget(): ReactNode { } }, [ debouncedAmount, - fromToken.symbol, - fromToken.decimals, - fromChain.requestKey, - toToken.symbol, - toChain.requestKey + fromChain, + fromToken, + toChain, + toToken ]) useEffect(() => { @@ -113,13 +147,6 @@ export function TradingWidget(): ReactNode { if (toToken.symbol === fromToken.symbol && toChain.id === fromChain.id) { return setError('Please select different tokens') } - if ( - (fromChain.id === 'solana' && toChain.id === 'bitcoin') || - (fromToken.symbol === 'SOL' && toToken.symbol === 'ETH') || - (fromToken.symbol === 'ETH' && toToken.symbol === 'SOL') - ) { - return setError('No rate available') - } if (fromChain.id === 'solana' || toChain.id === 'solana') { return fetchFromChainFlip() @@ -321,7 +348,9 @@ export function TradingWidget(): ReactNode { {formatNumber( outputAmount.amount, outputAmount.isNative, - toToken.decimals[fromToken.symbol?.toLowerCase() || 'eth'] || 6 + fromChain.id === 'solana' || toChain.id === 'solana' + ? getChainflipDecimals(toToken) + : toToken.decimals[fromToken.symbol?.toLowerCase() || 'eth'] || 6 )} )}