Implementing the Swap Function

Author of this section: @Fish

this talk will complete the transaction-related logic, including the transaction's request for quotations, specified input transactions, specified output transactions, and so on.

Show available transaction pairs

first, we need to get the currently available trading pairs and show them to the drop-down selection for users to choose from. We need to use useReadPoolManagerGetPairs call PoolManager of GetPairs methods.

The reference code is as follows, we set tokens , tokenA and tokenB three states:

// 用户可以选择的代币
const [tokens, setTokens] = useState<Token[]>([]);
// 用户选择的两个代币
const [tokenA, setTokenA] = useState<Token>();
const [tokenB, setTokenB] = useState<Token>();
// 获取所有的交易对
const { data: pairs = [] } = useReadPoolManagerGetPairs({
  address: getContractAddress("PoolManager"),
});

useEffect(() => {
  const options: Token[] = uniq(
    pairs.map((pair) => [pair.token0, pair.token1]).flat()
  ).map(getTokenInfo);
  setTokens(options);
  setTokenA(options[0]);
  setTokenB(options[1]);
}, [pairs]);

return (
  <>
    <TokenSelect value={tokenA} onChange={setTokenA} options={tokens} />
    <TokenSelect value={tokenB} onChange={setTokenB} options={tokens} />
  </>
);

the above is just the core code, you can refer to it to try to complete the course yourself, the code needs to use getTokenInfo method, which is maintained in demo/utils/common.ts in the course, we maintained the Token information. In the course, we wrote down the relevant information. In actual development, you should have a service to maintain the icon, name and other information of various Token and provide an interface for front-end calls.

Show Balance

We need to display the user's balance, here we need to use useReadErc20BalanceOf Hook to get the user's balance. We add a new component Balance.tsx , used to display the balance:

import React from "react";
import type { Token } from "@ant-design/web3";
import { CryptoPrice } from "@ant-design/web3";
import { useReadErc20BalanceOf } from "@/utils/contracts";
import { useAccount } from "wagmi";
import useTokenAddress from "@/hooks/useTokenAddress";

interface Props {
  token?: Token;
}

export default function Balance(props: Props) {
  const { address } = useAccount();
  const tokenAddress = useTokenAddress(props.token);
  const { data: balance } = useReadErc20BalanceOf({
    address: tokenAddress,
    args: [address as `0x${string}`],
    query: {
      enabled: !!tokenAddress,
      // 每 3 秒刷新一次
      refetchInterval: 3000,
    },
  });

  return balance === undefined ? (
    "-"
  ) : (
    <CryptoPrice
      value={balance}
      symbol={props.token?.symbol}
      decimals={props.token?.decimal}
      fixed={2}
    />
  );
}

component receives a token parameter, which is of type Token , yes. Ant Design Web3 A type defined in, the definition contains the Token information, we use Ant Design Web3 CryptoPrice component to display the balance.

In addition, we set up refetchInterval for 3000 to automatically update the balance.

Quotation

before initiating a transaction, we need to simulate calling the quote interface to obtain price-related information. Because this interface needs to be called frequently when the user enters the amount, and other component states need to be set after the call, it is not convenient to directly use Hooks to implement, so we encapsulate a method updateAmountBWithAmountA :

const updateAmountBWithAmountA = async (value: number) => {
  if (
    !publicClient ||
    !tokenAddressA ||
    !tokenAddressB ||
    isNaN(value) ||
    value === 0
  ) {
    return;
  }
  if (tokenAddressA === tokenAddressB) {
    message.error("Please select different tokens");
    return;
  }
  try {
    const newAmountB = await publicClient.simulateContract({
      address: getContractAddress("SwapRouter"),
      abi: swapRouterAbi,
      functionName: "quoteExactInput",
      args: [
        {
          tokenIn: tokenAddressA,
          tokenOut: tokenAddressB,
          indexPath: swapIndexPath,
          amountIn: parseAmountToBigInt(value, tokenA),
          sqrtPriceLimitX96,
        },
      ],
    });
    setAmountB(parseBigIntToAmount(newAmountB.result, tokenB));
    setIsExactInput(true);
  } catch (e: any) {
    message.error(e.message);
  }
};

We get the quotation when the TokenA amount changes and modify the corresponding TokenB:

useEffect(() => {
  // 当用户输入发生变化时，重新请求报价接口计算价格
  if (isExactInput) {
    updateAmountBWithAmountA(amountA);
  } else {
    updateAmountAWithAmountB(amountB);
  }
}, [isExactInput, tokenAddressA, tokenAddressB, amountA, amountB]);

in the same way, we will also have updateAmountAWithAmountB method, which is to obtain a quote when the TokenB amount changes and modify the corresponding TokenA, in which case the output is specified to trade.

We need to add multiple related states, so we won't specifically expand here. The completed code can be found in demo/pages/wtfswap/index.tsx view.

In addition, we also need to set the limit price of the transaction, that is, set a slippage, in the course we will simplify the implementation (set the default 10000 tick price deviation):

export const computeSqrtPriceLimitX96 = (
  pools: {
    pool: `0x${string}`;
    token0: `0x${string}`;
    token1: `0x${string}`;
    index: number;
    fee: number;
    feeProtocol: number;
    tickLower: number;
    tickUpper: number;
    tick: number;
    sqrtPriceX96: bigint;
  }[],
  zeroForOne: boolean
): bigint => {
  if (zeroForOne) {
    // 如果是 token0 交换 token1，那么交易完成后价格 token0 变多，价格下降下限
    // 先找到交易池的最小 tick
    const minTick =
      minBy(pools, (pool) => pool.tick)?.tick ?? TickMath.MIN_TICK;
    // 价格限制为最小 tick - 10000，避免价格过低，在实际项目中应该按照用户设置的滑点来调整
    const limitTick = Math.max(minTick - 10000, TickMath.MIN_TICK);
    return BigInt(TickMath.getSqrtRatioAtTick(limitTick).toString());
  } else {
    // 反之，设置一个最大的价格
    // 先找到交易池的最大 tick
    const maxTick =
      maxBy(pools, (pool) => pool.tick)?.tick ?? TickMath.MAX_TICK;
    // 价格限制为最大 tick + 10000，避免价格过高，在实际项目中应该按照用户设置的滑点来调整
    const limitTick = Math.min(maxTick + 10000, TickMath.MAX_TICK);
    return BigInt(TickMath.getSqrtRatioAtTick(limitTick).toString());
  }
};

computeSqrtPriceLimitX96 method in utils/common.ts it calculates a price limit based on the tick information of the current trading pool to avoid prices that are too high or too low.

Transaction

when the quote is successful we need to initiate a trade, similar to injecting liquidity, the trade also needs to manipulate the user amount, so we also need to use useWriteErc20Approve authorize. The core code is as follows:

<Button
  type="primary"
  size="large"
  block
  className={styles.swapBtn}
  disabled={!tokenAddressA || !tokenAddressB || !amountA || !amountB}
  loading={loading}
  onClick={async () => {
    setLoading(true);
    try {
      if (isExactInput) {
        const swapParams = {
          tokenIn: tokenAddressA!,
          tokenOut: tokenAddressB!,
          amountIn: parseAmountToBigInt(amountA, tokenA),
          amountOutMinimum: parseAmountToBigInt(amountB, tokenB),
          recipient: account?.address as `0x${string}`,
          deadline: BigInt(Math.floor(Date.now() / 1000) + 1000),
          sqrtPriceLimitX96,
          indexPath: swapIndexPath,
        };
        console.log("swapParams", swapParams);
        await writeApprove({
          address: tokenAddressA!,
          args: [getContractAddress("SwapRouter"), swapParams.amountIn],
        });
        await writeExactInput({
          address: getContractAddress("SwapRouter"),
          args: [swapParams],
        });
      } else {
        const swapParams = {
          tokenIn: tokenAddressA!,
          tokenOut: tokenAddressB!,
          amountOut: parseAmountToBigInt(amountB, tokenB),
          amountInMaximum: parseAmountToBigInt(Math.ceil(amountA), tokenA),
          recipient: account?.address as `0x${string}`,
          deadline: BigInt(Math.floor(Date.now() / 1000) + 1000),
          sqrtPriceLimitX96,
          indexPath: swapIndexPath,
        };
        console.log("swapParams", swapParams);
        await writeApprove({
          address: tokenAddressA!,
          args: [getContractAddress("SwapRouter"), swapParams.amountInMaximum],
        });
        await writeExactOutput({
          address: getContractAddress("SwapRouter"),
          args: [swapParams],
        });
      }
      message.success("Swap success");
      setAmountA(NaN);
      setAmountB(NaN);
    } catch (e: any) {
      message.error(e.message);
    } finally {
      setLoading(false);
    }
  }}
>
  Swap
</Button>

The specific implementation needs to consider more details, including choosing which trading pools are cheaper, how to deal with transaction failures, and how to better display some transaction information. The course only makes a simple implementation.

The final effect is as follows:

for the complete code see wtfswap/index.tsx . At this point, all our basic code has been developed, and we will continue to explain how to deploy and optimize contracts.