Skip to content

React Example

Viem
import { connect, getWalletClient } from "@wagmi/core";
import { Symphony } from "symphony-sdk/viem";
import { createWalletClient, custom } from "viem";
import { sei } from "viem/chains";
 
const SymphonySDK = new Symphony();
 
export const ViemExample = () => {
  const chainId = SymphonySDK.getConfig().chainId;
  const tokenList = SymphonySDK.getTokenList();
  const nativeAddress = SymphonySDK.getConfig().nativeAddress;
 
  const [walletClientViem, setWalletClientViem] = useState(undefined);
  const [route, setRoute] = useState(undefined);
  const [transactionHash, setTransactionHash] = useState(undefined);
  const [isApproved, setIsApproved] = useState(undefined);
  const [tokenIn, setTokenIn] = useState(nativeAddress);
  const [tokenOut, setTokenOut] = useState(Object.keys(tokenList)[1]);
  const [amount, setAmount] = useState("0.1");
 
  useEffect(() => {
    const fetchRoute = async () => {
      if (amount) {
        const Route = await SymphonySDK.getRoute(tokenIn, tokenOut, amount);
        setRoute(Route);
      }
    };
 
    const debounceTimeout = setTimeout(fetchRoute, 300);
 
    return () => clearTimeout(debounceTimeout);
  }, [tokenIn, tokenOut, amount]);
 
  const wagmiConnect = async () => {
    const result = await connect(config, {
        connector: wagmiconfig.connectors[1],
    });
    const walletClient = await getWalletClient(config);
    setWalletClientViem(walletClient);
    SymphonySDK.connectWalletClient(walletClient);
  }
 
  const viemConnect = async () => {
    const walletClient = createWalletClient({
        chain: sei,
        transport: custom(window.ethereum),
    });
    const [address] = await walletClient.requestAddresses();
    walletClient.account = { address };
    SymphonySDK.connectWalletClient(walletClient);
    setWalletClientViem(walletClient);
  }
 
  const swap = async () => {
    const transaction = await route.swap();
    setTransactionHash(transaction.swapReceipt.transactionHash);
  }
 
  const refreshRoute = async () => {
    setRoute(await route.refresh());
  }
 
  const giveApproval = async () => {
    const transaction = await route.giveApproval();
    setTransactionHash(transaction.transactionHash);
  }
 
  const checkApproval = async () => {
    setIsApproved(await route.checkApproval());
  }
  //...
};