From 0cf7d9e1c554423b58495e21772aced3c5ae5681 Mon Sep 17 00:00:00 2001 From: Kevin Peters Date: Mon, 31 Jan 2022 18:36:15 +0000 Subject: [PATCH] UI - added bsc and avax support --- react/.env.sample | 4 +- react/src/addresses/.gitignore | 5 +- react/src/components/Footer.tsx | 33 +++---- react/src/components/SwapProgress.tsx | 14 +-- react/src/hooks/useIsWalletReady.ts | 23 +---- react/src/icons/avax.svg | 15 +++ react/src/icons/bsc.svg | 12 +++ react/src/icons/wormhole-network.svg | 8 -- react/src/icons/wormhole_logo.svg | 23 +++++ react/src/route/generic.ts | 2 - react/src/route/hurricaneswap.ts | 6 +- react/src/route/pancakeswap.ts | 6 +- react/src/route/quickswap.ts | 4 +- react/src/route/uniswap-core.ts | 2 +- react/src/route/uniswap-v3.ts | 4 +- react/src/swapper/swapper.ts | 40 ++++---- react/src/utils/consts.ts | 136 ++++++++------------------ react/src/views/Home.tsx | 88 ++++++++--------- 18 files changed, 189 insertions(+), 236 deletions(-) create mode 100644 react/src/icons/avax.svg create mode 100644 react/src/icons/bsc.svg delete mode 100644 react/src/icons/wormhole-network.svg create mode 100644 react/src/icons/wormhole_logo.svg diff --git a/react/.env.sample b/react/.env.sample index 1324637..458c04b 100644 --- a/react/.env.sample +++ b/react/.env.sample @@ -1,2 +1,4 @@ REACT_APP_GOERLI_PROVIDER=https://goerli.infura.io/v3/YOUR-PROJECT-ID -REACT_APP_MUMBAI_PROVIDER=https://polygon-mumbai.infura.io/v3/YOUR-PROJECT-ID \ No newline at end of file +REACT_APP_MUMBAI_PROVIDER=https://polygon-mumbai.infura.io/v3/YOUR-PROJECT-ID +REACT_APP_FUJI_PROVIDER= +REACT_APP_BSC_PROVIDER= \ No newline at end of file diff --git a/react/src/addresses/.gitignore b/react/src/addresses/.gitignore index 680028e..4fa566d 100644 --- a/react/src/addresses/.gitignore +++ b/react/src/addresses/.gitignore @@ -1,5 +1,2 @@ -bsc.ts -fuji.ts -goerli.ts -mumbai.ts +*.ts *.js diff --git a/react/src/components/Footer.tsx b/react/src/components/Footer.tsx index ba8afef..f42fc68 100644 --- a/react/src/components/Footer.tsx +++ b/react/src/components/Footer.tsx @@ -5,7 +5,7 @@ import Github from "../icons/Github.svg"; import Medium from "../icons/Medium.svg"; import Telegram from "../icons/Telegram.svg"; import Twitter from "../icons/Twitter.svg"; -import Wormhole from "../icons/wormhole-network.svg"; +import Wormhole from "../icons/wormhole_logo.svg"; const useStyles = makeStyles((theme) => ({ footer: { @@ -19,7 +19,6 @@ const useStyles = makeStyles((theme) => ({ }, }, builtWithContainer: { - display: "flex", alignItems: "center", justifyContent: "center", opacity: 0.5, @@ -27,7 +26,7 @@ const useStyles = makeStyles((theme) => ({ }, wormholeIcon: { height: 48, - width: 48, + width: 192, filter: "contrast(0)", transition: "filter 0.5s", "&:hover": { @@ -92,24 +91,18 @@ export default function Footer() { Twitter +
+ + Wormhole + +
-
- - Wormhole - -
-
- Open Source - Built with ❤ -
+ Open Source + Built with ❤
); diff --git a/react/src/components/SwapProgress.tsx b/react/src/components/SwapProgress.tsx index 2b42ff6..0b50bf9 100644 --- a/react/src/components/SwapProgress.tsx +++ b/react/src/components/SwapProgress.tsx @@ -1,7 +1,8 @@ -import { ChainId, CHAIN_ID_POLYGON, isEVMChain } from "@certusone/wormhole-sdk"; +import { ChainId, isEVMChain } from "@certusone/wormhole-sdk"; import { LinearProgress, makeStyles, Typography } from "@material-ui/core"; import { useEffect, useState } from "react"; import { useEthereumProvider } from "../contexts/EthereumProviderContext"; +import { getChainName } from "../utils/consts"; const useStyles = makeStyles((theme) => ({ root: { @@ -16,13 +17,11 @@ const useStyles = makeStyles((theme) => ({ export default function TransactionProgress({ chainId, txBlockNumber, - isSourceSwapComplete, hasSignedVAA, isTargetSwapComplete, }: { chainId: ChainId; txBlockNumber: number | undefined; - isSourceSwapComplete: boolean; hasSignedVAA: boolean; isTargetSwapComplete: boolean; }) { @@ -51,20 +50,21 @@ export default function TransactionProgress({ }; } }, [hasSignedVAA, chainId, provider, txBlockNumber]); - const blockDiff = + let blockDiff = txBlockNumber !== undefined && txBlockNumber && currentBlock ? currentBlock - txBlockNumber : 0; const expectedBlocks = 15; + blockDiff = Math.min(Math.max(blockDiff, 0), expectedBlocks); let value; let valueBuffer; let message; if (!hasSignedVAA) { value = (blockDiff / expectedBlocks) * 50; valueBuffer = 50; - message = `Waiting for ${blockDiff} / ${expectedBlocks} confirmations on ${ - chainId === CHAIN_ID_POLYGON ? "Polygon" : "Ethereum" - }...`; + message = `Waiting for ${blockDiff} / ${expectedBlocks} confirmations on ${getChainName( + chainId + )}...`; } else if (!isTargetSwapComplete) { value = 50; valueBuffer = 100; diff --git a/react/src/hooks/useIsWalletReady.ts b/react/src/hooks/useIsWalletReady.ts index 06e4fb8..085bf3f 100644 --- a/react/src/hooks/useIsWalletReady.ts +++ b/react/src/hooks/useIsWalletReady.ts @@ -1,18 +1,10 @@ -import { - ChainId, - CHAIN_ID_SOLANA, - CHAIN_ID_TERRA, - isEVMChain, -} from "@certusone/wormhole-sdk"; +import { ChainId, CHAIN_ID_TERRA, isEVMChain } from "@certusone/wormhole-sdk"; import { hexlify, hexStripZeros } from "@ethersproject/bytes"; import { useConnectedWallet } from "@terra-money/wallet-provider"; import { useCallback, useMemo } from "react"; import { useEthereumProvider } from "../contexts/EthereumProviderContext"; -// import { useSolanaWallet } from "../contexts/SolanaWalletContext"; import { getEvmChainId } from "../utils/consts"; -const CLUSTER = "testnet"; // TODO: change this - const createWalletStatus = ( isReady: boolean, statusMessage: string = "", @@ -35,8 +27,6 @@ function useIsWalletReady( forceNetworkSwitch: () => void; } { const autoSwitch = enableNetworkAutoswitch; - // const solanaWallet = useSolanaWallet(); - // const solPK = solanaWallet?.publicKey; const terraWallet = useConnectedWallet(); const hasTerraWallet = !!terraWallet; const { @@ -76,14 +66,6 @@ function useIsWalletReady( ); } if (isEVMChain(chainId) && hasEthInfo && signerAddress) { - //if (chainId === CHAIN_ID_SOLANA && solPK) { - // return createWalletStatus( - // true, - // undefined, - // forceNetworkSwitch, - // solPK.toString() - // ); - //} if (hasCorrectEvmNetwork) { return createWalletStatus( true, @@ -97,7 +79,7 @@ function useIsWalletReady( } return createWalletStatus( false, - `Wallet is not connected to ${CLUSTER}. Expected Chain ID: ${correctEvmNetwork}`, + `Wallet is not connected to testnet. Expected Chain ID: ${correctEvmNetwork}`, forceNetworkSwitch, undefined ); @@ -115,7 +97,6 @@ function useIsWalletReady( autoSwitch, forceNetworkSwitch, hasTerraWallet, - // solPK, hasEthInfo, correctEvmNetwork, hasCorrectEvmNetwork, diff --git a/react/src/icons/avax.svg b/react/src/icons/avax.svg new file mode 100644 index 0000000..a5787ea --- /dev/null +++ b/react/src/icons/avax.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/react/src/icons/bsc.svg b/react/src/icons/bsc.svg new file mode 100644 index 0000000..61c684d --- /dev/null +++ b/react/src/icons/bsc.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/react/src/icons/wormhole-network.svg b/react/src/icons/wormhole-network.svg deleted file mode 100644 index cd0e70d..0000000 --- a/react/src/icons/wormhole-network.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/react/src/icons/wormhole_logo.svg b/react/src/icons/wormhole_logo.svg new file mode 100644 index 0000000..ec6231e --- /dev/null +++ b/react/src/icons/wormhole_logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/src/route/generic.ts b/react/src/route/generic.ts index 7d2392d..0a33a2c 100644 --- a/react/src/route/generic.ts +++ b/react/src/route/generic.ts @@ -1,5 +1,3 @@ -import { FixedNumber } from "ethers"; - export enum UstLocation { In = 1, Out, diff --git a/react/src/route/hurricaneswap.ts b/react/src/route/hurricaneswap.ts index f696c81..f1b946b 100644 --- a/react/src/route/hurricaneswap.ts +++ b/react/src/route/hurricaneswap.ts @@ -1,12 +1,12 @@ import { ethers } from "ethers"; -import { WAVAX_TOKEN_INFO } from "../utils/consts"; +import { AVAX_TOKEN_INFO } from "../utils/consts"; import { UstLocation } from "./generic"; import { UniswapV2Router } from "./uniswap-v2"; export { PROTOCOL } from "./uniswap-v2"; -const HURRICANESWAP_FACTORY_ADDRESS = null; +const HURRICANESWAP_FACTORY_ADDRESS = ""; export class HurricaneswapRouter extends UniswapV2Router { constructor(provider: ethers.providers.Provider) { @@ -15,7 +15,7 @@ export class HurricaneswapRouter extends UniswapV2Router { } async initialize(ustLocation: UstLocation): Promise { - await super.initializeTokens(WAVAX_TOKEN_INFO, ustLocation); + await super.initializeTokens(AVAX_TOKEN_INFO, ustLocation); return; } diff --git a/react/src/route/pancakeswap.ts b/react/src/route/pancakeswap.ts index 37ce319..36e1f52 100644 --- a/react/src/route/pancakeswap.ts +++ b/react/src/route/pancakeswap.ts @@ -1,12 +1,12 @@ import { ethers } from "ethers"; -import { WBNB_TOKEN_INFO } from "../utils/consts"; +import { BNB_TOKEN_INFO } from "../utils/consts"; import { UstLocation } from "./generic"; import { UniswapV2Router } from "./uniswap-v2"; export { PROTOCOL } from "./uniswap-v2"; -const PANCAKESWAP_FACTORY_ADDRESS = null; +const PANCAKESWAP_FACTORY_ADDRESS = ""; export class PancakeswapRouter extends UniswapV2Router { constructor(provider: ethers.providers.Provider) { @@ -15,7 +15,7 @@ export class PancakeswapRouter extends UniswapV2Router { } async initialize(ustLocation: UstLocation): Promise { - await super.initializeTokens(WBNB_TOKEN_INFO, ustLocation); + await super.initializeTokens(BNB_TOKEN_INFO, ustLocation); return; } diff --git a/react/src/route/quickswap.ts b/react/src/route/quickswap.ts index 7c4d421..b31d5cc 100644 --- a/react/src/route/quickswap.ts +++ b/react/src/route/quickswap.ts @@ -1,6 +1,6 @@ import { ethers } from "ethers"; -import { WMATIC_TOKEN_INFO } from "../utils/consts"; +import { MATIC_TOKEN_INFO } from "../utils/consts"; import { UstLocation } from "./generic"; import { UniswapV2Router } from "./uniswap-v2"; @@ -15,7 +15,7 @@ export class QuickswapRouter extends UniswapV2Router { } async initialize(ustLocation: UstLocation): Promise { - await super.initializeTokens(WMATIC_TOKEN_INFO, ustLocation); + await super.initializeTokens(MATIC_TOKEN_INFO, ustLocation); return; } } diff --git a/react/src/route/uniswap-core.ts b/react/src/route/uniswap-core.ts index 0479eff..e85e435 100644 --- a/react/src/route/uniswap-core.ts +++ b/react/src/route/uniswap-core.ts @@ -166,7 +166,7 @@ export abstract class UniswapRouterCore extends RouterCore { const network = this.network; - if (ustLocation == UstLocation.Out) { + if (ustLocation === UstLocation.Out) { [this.tokenIn, this.tokenOut] = await Promise.all([ makeUniEvmToken(this.provider, network.chainId, tokenInfo.address), makeUniEvmToken( diff --git a/react/src/route/uniswap-v3.ts b/react/src/route/uniswap-v3.ts index cc59c44..46f5f44 100644 --- a/react/src/route/uniswap-v3.ts +++ b/react/src/route/uniswap-v3.ts @@ -14,7 +14,7 @@ import { } from "@uniswap/v3-sdk"; import { UniswapRouterCore } from "./uniswap-core"; -import { WETH_TOKEN_INFO } from "../utils/consts"; +import { ETH_TOKEN_INFO } from "../utils/consts"; import { UstLocation } from "./generic"; export const PROTOCOL = "UniswapV3"; @@ -34,7 +34,7 @@ export class UniswapV3Router extends UniswapRouterCore { } async initialize(ustLocation: UstLocation): Promise { - await this.initializeTokens(WETH_TOKEN_INFO, ustLocation); + await this.initializeTokens(ETH_TOKEN_INFO, ustLocation); return; } diff --git a/react/src/swapper/swapper.ts b/react/src/swapper/swapper.ts index cfbb119..d4102ca 100644 --- a/react/src/swapper/swapper.ts +++ b/react/src/swapper/swapper.ts @@ -1,4 +1,4 @@ -//@ts-nocheckk +//@ts-nocheck import { ethers } from "ethers"; import { TransactionReceipt } from "@ethersproject/abstract-provider"; import { @@ -38,8 +38,6 @@ import { //ETH_NETWORK_CHAIN_ID, //POLYGON_NETWORK_CHAIN_ID, //TERRA_NETWORK_CHAIN_ID, - WETH_TOKEN_INFO, - WMATIC_TOKEN_INFO, UST_TOKEN_INFO, } from "../utils/consts"; import { @@ -493,26 +491,28 @@ interface VaaSearchParams { } export function makeEvmProvider(tokenAddress: string) { + let url; switch (tokenAddress) { - case WETH_TOKEN_INFO.address: { - const url = process.env.REACT_APP_GOERLI_PROVIDER; - if (!url) { - throw new Error("Could not find REACT_APP_GOERLI_PROVIDER"); - } - return new ethers.providers.StaticJsonRpcProvider(url); - } - case WMATIC_TOKEN_INFO.address: { - const url = process.env.REACT_APP_MUMBAI_PROVIDER; - if (!url) { - throw new Error("Could not find REACT_APP_MUMBAI_PROVIDER"); - } - return new ethers.providers.StaticJsonRpcProvider(url); - } - default: { - console.log("huh?", tokenAddress); + case ETH_TOKEN_INFO.address: + url = process.env.REACT_APP_GOERLI_PROVIDER; + if (!url) throw new Error("REACT_APP_GOERLI_PROVIDER not set"); + break; + case MATIC_TOKEN_INFO.address: + url = process.env.REACT_APP_MUMBAI_PROVIDER; + if (!url) throw new Error("REACT_APP_MUMBAI_PROVIDER not set"); + break; + case AVAX_TOKEN_INFO.address: + url = process.env.REACT_APP_FUJI_PROVIDER; + if (!url) throw new Error("REACT_APP_FUJI_PROVIDER not set"); + break; + case BSC_TOKEN_INFO.address: + url = process.env.REACT_APP_BSC_PROVIDER; + if (!url) throw new Error("REACT_APP_BSC_PROVIDER not set"); + break; + default: throw Error("unrecognized token address"); - } } + return new ethers.providers.StaticJsonRpcProvider(url); } export class UniswapToUniswapExecutor { diff --git a/react/src/utils/consts.ts b/react/src/utils/consts.ts index e0aacda..cf7a2ba 100644 --- a/react/src/utils/consts.ts +++ b/react/src/utils/consts.ts @@ -7,169 +7,119 @@ import { CHAIN_ID_BSC, } from "@certusone/wormhole-sdk"; -//import ethIcon from "../icons/eth.svg"; -//import polygonIcon from "../icons/polygon.svg"; -//import terraIcon from "../icons/terra.svg"; +import ethIcon from "../icons/eth.svg"; +import polygonIcon from "../icons/polygon.svg"; +import terraIcon from "../icons/terra.svg"; +import bscIcon from "../icons/bsc.svg"; +import avaxIcon from "../icons/avax.svg"; -const ethIcon = ""; -const polygonIcon = ""; -const bnbIcon = ""; -const avaxIcon = ""; -const terraIcon = ""; +export const EVM_POLYGON_NETWORK_CHAIN_ID = 80001; +export const EVM_ETH_NETWORK_CHAIN_ID = 5; +export const EVM_AVAX_NETWORK_CHAIN_ID = 43113; +export const EVM_BSC_NETWORK_CHAIN_ID = 97; export interface TokenInfo { name: string; address: string; chainId: ChainId; + evmChainId: number | undefined; logo: string; - isNative: boolean; maxAmount: number; ustPairedAddress: string | undefined; } -// matic export const MATIC_TOKEN_INFO: TokenInfo = { name: "MATIC", - address: "0x9c3c9283d3e44854697cd22d3faa240cfb032889", // used to compute quote - chainId: CHAIN_ID_POLYGON, - logo: polygonIcon, - isNative: true, - maxAmount: 0.1, - ustPairedAddress: "0xe3a1c77e952b57b5883f6c906fc706fcc7d4392c", -}; - -export const WMATIC_TOKEN_INFO: TokenInfo = { - name: "WMATIC", address: "0x9c3c9283d3e44854697cd22d3faa240cfb032889", chainId: CHAIN_ID_POLYGON, + evmChainId: EVM_POLYGON_NETWORK_CHAIN_ID, logo: polygonIcon, - isNative: false, maxAmount: 0.1, ustPairedAddress: "0xe3a1c77e952b57b5883f6c906fc706fcc7d4392c", }; -// eth export const ETH_TOKEN_INFO: TokenInfo = { name: "ETH", - address: "0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6", // used to compute quote - chainId: CHAIN_ID_ETH, - logo: ethIcon, - isNative: true, - maxAmount: 0.01, - ustPairedAddress: "0x36Ed51Afc79619b299b238898E72ce482600568a", -}; - -export const WETH_TOKEN_INFO: TokenInfo = { - name: "WETH", address: "0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6", chainId: CHAIN_ID_ETH, + evmChainId: EVM_ETH_NETWORK_CHAIN_ID, logo: ethIcon, - isNative: false, maxAmount: 0.01, ustPairedAddress: "0x36Ed51Afc79619b299b238898E72ce482600568a", }; -// avax export const AVAX_TOKEN_INFO: TokenInfo = { name: "AVAX", address: "0x1d308089a2d1ced3f1ce36b1fcaf815b07217be3", chainId: CHAIN_ID_AVAX, + evmChainId: EVM_AVAX_NETWORK_CHAIN_ID, logo: avaxIcon, - isNative: true, maxAmount: 0.01, ustPairedAddress: "0xe09ed38e5cd1014444846f62376ac88c5232cde9", }; -export const WAVAX_TOKEN_INFO: TokenInfo = { - name: "WAVAX", - address: "0x1d308089a2d1ced3f1ce36b1fcaf815b07217be3", - chainId: CHAIN_ID_AVAX, - logo: avaxIcon, - isNative: false, - maxAmount: 0.01, - ustPairedAddress: "0xe09ed38e5cd1014444846f62376ac88c5232cde9", -}; - -// bnb export const BNB_TOKEN_INFO: TokenInfo = { name: "BNB", address: "0xae13d989dac2f0debff460ac112a837c89baa7cd", chainId: CHAIN_ID_BSC, - logo: bnbIcon, - isNative: true, + evmChainId: EVM_BSC_NETWORK_CHAIN_ID, + logo: bscIcon, maxAmount: 0.01, ustPairedAddress: "0x7b8eae1e85c8b189ee653d3f78733f4f788bb2c1", }; -export const WBNB_TOKEN_INFO: TokenInfo = { - name: "WBNB", - address: "0xae13d989dac2f0debff460ac112a837c89baa7cd", - chainId: CHAIN_ID_BSC, - logo: bnbIcon, - isNative: false, - maxAmount: 0.01, - ustPairedAddress: "0x7b8eae1e85c8b189ee653d3f78733f4f788bb2c1", -}; - -// ust export const UST_TOKEN_INFO: TokenInfo = { name: "UST", address: "uusd", chainId: CHAIN_ID_TERRA, + evmChainId: undefined, logo: terraIcon, - isNative: true, // TODO: change? maxAmount: 10.0, ustPairedAddress: undefined, }; export const TOKEN_INFOS = [ MATIC_TOKEN_INFO, - WMATIC_TOKEN_INFO, ETH_TOKEN_INFO, - WETH_TOKEN_INFO, - UST_TOKEN_INFO, + AVAX_TOKEN_INFO, + BNB_TOKEN_INFO, + // TODO: support swaps from/to terra + // UST_TOKEN_INFO, ]; export const getSupportedSwaps = (tokenInfo: TokenInfo) => { - switch (tokenInfo) { - case MATIC_TOKEN_INFO: - return [ETH_TOKEN_INFO, UST_TOKEN_INFO]; - case WMATIC_TOKEN_INFO: - return [WETH_TOKEN_INFO]; - case ETH_TOKEN_INFO: - return [MATIC_TOKEN_INFO, UST_TOKEN_INFO]; - case WETH_TOKEN_INFO: - return [WMATIC_TOKEN_INFO]; - case UST_TOKEN_INFO: - return [ETH_TOKEN_INFO, MATIC_TOKEN_INFO]; - } - return []; + return TOKEN_INFOS.filter((x) => x !== tokenInfo); }; -export const EVM_ETH_NETWORK_CHAIN_ID = 5; -export const EVM_POLYGON_NETWORK_CHAIN_ID = 80001; -export const EVM_AVAX_NETWORK_CHAIN_ID = 43113; -export const EVM_BSC_NETWORK_CHAIN_ID = 97; - -export function getEvmChainId(chainId: ChainId): number { +export const getEvmChainId = (chainId: ChainId): number | undefined => { switch (chainId) { - case CHAIN_ID_ETH: { + case CHAIN_ID_ETH: return EVM_ETH_NETWORK_CHAIN_ID; - } - case CHAIN_ID_POLYGON: { + case CHAIN_ID_POLYGON: return EVM_POLYGON_NETWORK_CHAIN_ID; - } - case CHAIN_ID_AVAX: { + case CHAIN_ID_AVAX: return EVM_AVAX_NETWORK_CHAIN_ID; - } - case CHAIN_ID_BSC: { + case CHAIN_ID_BSC: return EVM_BSC_NETWORK_CHAIN_ID; - } - default: { + default: return undefined; - } } -} +}; + +export const getChainName = (chainId: ChainId) => { + switch (chainId) { + case CHAIN_ID_ETH: + return "Ethereum"; + case CHAIN_ID_POLYGON: + return "Polygon"; + case CHAIN_ID_AVAX: + return "Avalanche"; + case CHAIN_ID_BSC: + return "BSC"; + default: + return ""; + } +}; export const RELAYER_FEE_UST = "0.25"; diff --git a/react/src/views/Home.tsx b/react/src/views/Home.tsx index 042ab5a..429ae6b 100644 --- a/react/src/views/Home.tsx +++ b/react/src/views/Home.tsx @@ -39,11 +39,7 @@ import parseError from "../utils/parseError"; import Settings from "../components/Settings"; import getIsTransferCompletedEvmWithRetry from "../utils/getIsTransferCompletedWithRetry"; import CircleLoader from "../components/CircleLoader"; -import { - ArrowForward, - CheckCircleOutlineRounded, - QueueTwoTone, -} from "@material-ui/icons"; +import { ArrowForward, CheckCircleOutlineRounded } from "@material-ui/icons"; import SwapProgress from "../components/SwapProgress"; import Footer from "../components/Footer"; import TerraWalletKey from "../components/TerraWalletKey"; @@ -163,13 +159,19 @@ const switchEvmProviderNetwork = async ( } }; -const ConnectedWalletAddress = ({ chainId }: { chainId: ChainId }) => { +const ConnectedWalletAddress = ({ + chainId, + prefix, +}: { + chainId: ChainId; + prefix: string; +}) => { const { walletAddress } = useIsWalletReady(chainId, false); if (walletAddress) { const is0x = walletAddress.startsWith("0x"); return ( - {walletAddress?.substring(0, is0x ? 6 : 3)}... + {prefix} {walletAddress?.substring(0, is0x ? 6 : 3)}... {walletAddress?.substring(walletAddress.length - (is0x ? 4 : 3))} ); @@ -190,16 +192,13 @@ const SwapButton = ({ showLoader: boolean; onClick: () => void; }) => { - const { isReady: isSourceWalletReady, walletAddress: sourceWalletAddress } = - useIsWalletReady(source.chainId, false); - const { isReady: isTargetWalletReady, walletAddress: targetWalletAddress } = - useIsWalletReady(target.chainId, false); - - console.log( - "sourceWalletAddress", - sourceWalletAddress, - "targetWalletAddress", - targetWalletAddress + const { isReady: isSourceWalletReady } = useIsWalletReady( + source.chainId, + !disabled + ); + const { isReady: isTargetWalletReady } = useIsWalletReady( + target.chainId, + !isEVMChain(source.chainId) ); if (!isSourceWalletReady) { @@ -220,6 +219,7 @@ const SwapButton = ({ ) : null; } + return ( { (async () => { setHasQuote(false); @@ -274,7 +272,7 @@ export default function Home() { await executor.initialize( sourceTokenInfo.address, targetTokenInfo.address, - sourceTokenInfo.isNative + true ); await executor.computeAndVerifySrcPoolAddress().catch((e) => { throw new Error("failed to verify source pool address"); @@ -286,23 +284,9 @@ export default function Home() { executor.setSlippage((parseFloat(slippage) / 100).toString()); executor.setRelayerFee(RELAYER_FEE_UST); const quote = await executor.computeQuoteExactIn(amountIn); - // TODO: FIX - if (!quote || !quote.dst) { - throw new Error("failed to compute quote"); - } setExecutor(executor); - setAmountOut( - parseFloat( - // executor.tokens.dstOut.formatAmount(quote.dst.minAmountOut) - quote.minAmountOut - ).toFixed(8) - ); - setAmountInUST( - parseFloat( - //executor.tokens.dstIn.formatAmount(quote.dst.amountIn) - quote.ustAmountIn - ).toFixed(2) - ); + setAmountOut(parseFloat(quote.minAmountOut).toFixed(8)); + setAmountInUST(parseFloat(quote.ustAmountIn).toFixed(2)); setHasQuote(true); } } catch (e) { @@ -352,7 +336,6 @@ export default function Home() { const tokenInfo = TOKEN_INFOS.find((x) => x.name === event.target.value); if (tokenInfo) { const supportedSwaps = getSupportedSwaps(tokenInfo); - console.log(supportedSwaps); if (supportedSwaps) { setSourceTokenInfo(tokenInfo); if (!supportedSwaps.find((x) => x.name === targetTokenInfo.name)) { @@ -378,15 +361,17 @@ export default function Home() { setIsSwapping(false); setHasQuote(false); setIsSourceSwapComplete(false); + setHasSignedVAA(false); setIsTargetSwapComplete(false); setAmountIn(""); setAmountOut(""); setSourceTxBlockNumber(undefined); setRelayerTimeoutString(""); - }, []); + disconnect(); + }, [disconnect]); const handleSwapClick = useCallback(async () => { - if (provider && signer && executor) { + if (provider && signer && signerAddress && executor) { try { setIsSwapping(true); setIsSourceSwapComplete(false); @@ -394,9 +379,12 @@ export default function Home() { setIsTargetSwapComplete(false); setRelayerTimeoutString(""); await switchEvmProviderNetwork(provider, sourceTokenInfo.chainId); + console.log(signerAddress); - // TODO: fix - const sourceReceipt = await executor.evmApproveAndSwap(signer); + const sourceReceipt = await executor.evmApproveAndSwap( + signer, + signerAddress + ); console.info( "firstSwapTransactionHash:", sourceReceipt.transactionHash @@ -415,8 +403,8 @@ export default function Home() { // Check if the signedVAA has redeemed by the relayer const isCompleted = await getIsTransferCompletedEvmWithRetry( executor.dstExecutionParams.wormhole.tokenBridgeAddress, - // TODO: fix - //@ts-ignore + // TODO: fix typescript error + // @ts-ignore executor.quoter.getDstEvmProvider(), vaaBytes, // retry for two minutes @@ -447,6 +435,7 @@ export default function Home() { }, [ provider, signer, + signerAddress, executor, enqueueSnackbar, sourceTokenInfo, @@ -461,9 +450,7 @@ export default function Home() {
- - Wormhole NativeSwap Demo - + Wormhole NativeSwap Demo
@@ -496,7 +483,10 @@ export default function Home() { color="error" >{`The max input amount is ${sourceTokenInfo.maxAmount} ${sourceTokenInfo.name}`} ) : null} - +
{`Slippage tolerance: ${slippage}%`} @@ -575,7 +566,6 @@ export default function Home() {