diff --git a/packages/internal/dex/sdk-sample-app/src/components/Example.tsx b/packages/internal/dex/sdk-sample-app/src/components/Example.tsx index 1fb9fae56e..e8691bf350 100644 --- a/packages/internal/dex/sdk-sample-app/src/components/Example.tsx +++ b/packages/internal/dex/sdk-sample-app/src/components/Example.tsx @@ -1,6 +1,10 @@ import { ethers } from 'ethers'; import { useState } from 'react'; -import { Exchange, TransactionDetails, TransactionResponse } from '@imtbl/dex-sdk'; +import { + Exchange, + TransactionDetails, + TransactionResponse, +} from '@imtbl/dex-sdk'; import { configuration } from '../config'; import { ConnectAccount } from './ConnectAccount'; import { AmountInput, AmountOutput } from './AmountInput'; @@ -31,7 +35,10 @@ const allTokens: Token[] = [ { symbol: 'zkYEET', address: '0x8AC26EfCbf5D700b37A27aA00E6934e6904e7B8e' }, ]; -const buildExchange = (secondaryFeeRecipient: string, secondaryFeePercentage: number) => { +const buildExchange = ( + secondaryFeeRecipient: string, + secondaryFeePercentage: number +) => { if (secondaryFeeRecipient && secondaryFeePercentage) { return new Exchange({ ...configuration, @@ -52,11 +59,13 @@ export function Example() { const [isFetching, setIsFetching] = useState(false); const [inputAmount, setInputAmount] = useState('0'); const [outputAmount, setOutputAmount] = useState('0'); - const [swapTransaction, setSwapTransaction] = useState(null); + const [swapTransaction, setSwapTransaction] = + useState(null); const [approved, setApproved] = useState(false); const [result, setResult] = useState(); const [error, setError] = useState(null); - const [secondaryFeeRecipient, setSecondaryFeeRecipient] = useState(''); + const [secondaryFeeRecipient, setSecondaryFeeRecipient] = + useState(''); const [secondaryFeePercentage, setFeePercentage] = useState(0); const [tradeType, setTradeType] = useState('exactInput'); @@ -75,9 +84,13 @@ export function Example() { const getQuote = async (tokenInAddress: string, tokenOutAddress: string) => { setIsFetching(true); setError(null); + setApproved(false); try { - const exchange = buildExchange(secondaryFeeRecipient, secondaryFeePercentage); + const exchange = buildExchange( + secondaryFeeRecipient, + secondaryFeePercentage + ); const txn = tradeType === 'exactInput' @@ -85,13 +98,13 @@ export function Example() { ethereumAccount, tokenInAddress, tokenOutAddress, - ethers.utils.parseEther(`${inputAmount}`), + ethers.utils.parseEther(`${inputAmount}`) ) : await exchange.getUnsignedSwapTxFromAmountOut( ethereumAccount, tokenInAddress, tokenOutAddress, - ethers.utils.parseEther(`${outputAmount}`), + ethers.utils.parseEther(`${outputAmount}`) ); setResult(txn); @@ -111,14 +124,18 @@ export function Example() { const performSwap = async (result: TransactionResponse) => { setSwapTransaction(null); setIsFetching(true); - const provider = new ethers.providers.Web3Provider((window as any).ethereum); + const provider = new ethers.providers.Web3Provider( + (window as any).ethereum + ); const signer = provider.getSigner(); // Approve the ERC20 spend if (!approved) { try { // Send the Approve transaction - const approveReceipt = await signer.sendTransaction(result.approval!.transaction); + const approveReceipt = await signer.sendTransaction( + result.approval!.transaction + ); // Wait for the Approve transaction to complete await provider.waitForTransaction(approveReceipt.hash, 1); @@ -151,7 +168,9 @@ export function Example() { return (
-

Your wallet address: {ethereumAccount}

+

+ Your wallet address: {ethereumAccount} +

@@ -224,12 +243,21 @@ export function Example() {
- + {tradeType === 'exactInput' && inputToken && ( - + )} {tradeType === 'exactOutput' && outputToken && ( - + )} {inputToken && outputToken && ( @@ -246,20 +274,30 @@ export function Example() { {result && ( <>

- Expected amount: {ethers.utils.formatEther(result.quote.amount.value)}{' '} + Expected amount:{' '} + {ethers.utils.formatEther(result.quote.amount.value)}{' '} {`${addressToSymbolMapping[result.quote.amount.token.address]}`}

{tradeType === 'exactInput' ? 'Minimum' : 'Maximum'} amount:{' '} {ethers.utils.formatEther(result.quote.amountWithMaxSlippage.value)}{' '} - {`${addressToSymbolMapping[result.quote.amountWithMaxSlippage.token.address]}`} + {`${ + addressToSymbolMapping[ + result.quote.amountWithMaxSlippage.token.address + ] + }`}

Slippage: {result.quote.slippage}%

- {result.approval &&

Approval Gas Estimate: {showGasEstimate(result.approval)}

} + {result.approval && ( +

Approval Gas Estimate: {showGasEstimate(result.approval)}

+ )}

Swap Gas estimate: {showGasEstimate(result.swap)}

- + <>