From 7f3ac3b2f3d0b650ce2db06a13655c032b771b33 Mon Sep 17 00:00:00 2001 From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com> Date: Wed, 21 Dec 2022 04:33:32 +0530 Subject: [PATCH] feat(bridge): non-mm wallets (#438) * feat(bridge): add transaction list * fix(bridge): remove console.log * transaction impl * test * wip, local storage for transactons, claiming, new stores, deprecate relayer * claim * tests * jest * pending tx * proof validation * tests * process message requires manual gas limit * jest * mm mobile code * mm mobile * custom fee * value not data * fee * jest * rm log * tests * tests * erc20 bridging * token vault address refactor * bridge opts * bridge fix * get canonicalToBridged for cross layer tokens * golang lint * rm console log * feat(bridge): non mm wallets * env rename, add bridge address and test erc20 dynamically, remove tko * fix number input * wip tx view * reactive tx list * show Pending state if message header is not synced * tests * Update packages/bridge-ui/.default.env Co-authored-by: dave | d1onys1us * Update packages/bridge-ui/src/components/Loader.svelte Co-authored-by: dave | d1onys1us * Update packages/bridge-ui/src/app.css Co-authored-by: dave | d1onys1us * rm old way of doing bridge tx's * unused css * feat(bridge): switch network using wagmi * Fetch tx on signer load * feat(bridge): style changes * rm switchethereumchain, useless function now * jest * fix(bridge): non mm wallets * fix(bridge): workaround for process.env.NODE_DEBUG * chore(bridge): add vite mjs file to gitignore * fix(bridge): production build * add deps for wagmi * bump wagmi * fix wagmi Co-authored-by: Jeffery Walsh Co-authored-by: jeff <113397187+cyberhorsey@users.noreply.github.com> Co-authored-by: dave | d1onys1us --- packages/bridge-ui/.gitignore | 5 +- packages/bridge-ui/jest.config.js | 4 +- packages/bridge-ui/package.json | 5 +- packages/bridge-ui/src/App.svelte | 56 +- .../src/components/ChainDropdown.svelte | 7 +- .../src/components/Transaction.svelte | 17 +- .../src/components/buttons/Connect.svelte | 139 ++- .../src/components/form/SelectChain.svelte | 7 +- .../components/icons/CoinbaseWallet.svelte | 1 + .../src/components/icons/WalletConnect.svelte | 1 + .../modals/SwitchEthereumChainModal.svelte | 13 +- packages/bridge-ui/src/domain/chain.ts | 28 +- packages/bridge-ui/src/i18n.js | 3 + packages/bridge-ui/src/main.ts | 4 + packages/bridge-ui/src/store/ethereum.ts | 4 - packages/bridge-ui/src/store/modal.ts | 1 + .../src/utils/switchEthereumChain.spec.ts | 60 -- packages/bridge-ui/vite.config.ts | 6 + pnpm-lock.yaml | 911 ++++++++++++++++-- 19 files changed, 1029 insertions(+), 243 deletions(-) create mode 100644 packages/bridge-ui/src/components/icons/CoinbaseWallet.svelte create mode 100644 packages/bridge-ui/src/components/icons/WalletConnect.svelte delete mode 100644 packages/bridge-ui/src/store/ethereum.ts delete mode 100644 packages/bridge-ui/src/utils/switchEthereumChain.spec.ts diff --git a/packages/bridge-ui/.gitignore b/packages/bridge-ui/.gitignore index 1cac5597ea..1cb393e182 100644 --- a/packages/bridge-ui/.gitignore +++ b/packages/bridge-ui/.gitignore @@ -22,4 +22,7 @@ dist-ssr *.njsproj *.sln *.sw? -.env \ No newline at end of file +.env + +# vite +vite.config.ts.timestamp-*.mjs \ No newline at end of file diff --git a/packages/bridge-ui/jest.config.js b/packages/bridge-ui/jest.config.js index 472d18cf5e..deb00a64f8 100644 --- a/packages/bridge-ui/jest.config.js +++ b/packages/bridge-ui/jest.config.js @@ -39,8 +39,8 @@ export default { ], coverageThreshold: { global: { - statements: 98.45, - branches: 86, + statements: 98.36, + branches: 85, functions: 96, lines: 100, }, diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json index 1702ba9902..a76b1abf72 100644 --- a/packages/bridge-ui/package.json +++ b/packages/bridge-ui/package.json @@ -56,11 +56,14 @@ "vite-plugin-static-copy": "^0.12.0" }, "dependencies": { + "@coinbase/wallet-sdk": "^3.6.3", "@ethersproject/experimental": "^5.7.0", "@lottiefiles/svelte-lottie-player": "^0.2.0", "@sveltestack/svelte-query": "^1.6.0", - "@wagmi/core": "^0.7.5", + "@wagmi/connectors": "^0.1.1", + "@wagmi/core": "^0.8.0", "axios": "^1.2.0", + "buffer": "^6.0.3", "ethers": "^5.7.1", "extend-expect": "link:@testing-library/jest-dom/extend-expect", "identicon.js": "^2.3.3", diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte index 20a477aab5..654d6d0a88 100644 --- a/packages/bridge-ui/src/App.svelte +++ b/packages/bridge-ui/src/App.svelte @@ -4,6 +4,15 @@ import Router from "svelte-spa-router"; import { SvelteToast } from "@zerodevx/svelte-toast"; import type { SvelteToastOptions } from "@zerodevx/svelte-toast"; + import { + configureChains, + createClient, + InjectedConnector, + } from "@wagmi/core"; + import { publicProvider } from "@wagmi/core/providers/public"; + import { jsonRpcProvider } from "@wagmi/core/providers/jsonRpc"; + import { CoinbaseWalletConnector } from "@wagmi/core/connectors/coinbaseWallet"; + import { WalletConnectConnector } from "@wagmi/core/connectors/walletConnect"; import Home from "./pages/home/Home.svelte"; import { setupI18n } from "./i18n"; @@ -19,9 +28,16 @@ import Navbar from "./components/Navbar.svelte"; import { signer } from "./store/signer"; import type { Transactioner } from "./domain/transactions"; + import { wagmiClient } from "./store/wagmi"; setupI18n({ withLocale: "en" }); - import { chains, CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain"; + import { + chains, + CHAIN_MAINNET, + CHAIN_TKO, + mainnet, + taiko, + } from "./domain/chain"; import SwitchEthereumChainModal from "./components/modals/SwitchEthereumChainModal.svelte"; import { ProofService } from "./proof/service"; import { ethers } from "ethers"; @@ -45,6 +61,44 @@ CHAIN_TKO.id, new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L2_RPC_URL) ); + providers.set(providerMap); + + const { + chains: wagmiChains, + provider, + webSocketProvider, + } = configureChains( + [mainnet, taiko], + [ + publicProvider(), + jsonRpcProvider({ + rpc: (chain) => ({ + http: providerMap.get(chain.id).connection.url, + }), + }), + ] + ); + + $wagmiClient = createClient({ + provider, + connectors: [ + new InjectedConnector({ + chains: wagmiChains, + }), + new CoinbaseWalletConnector({ + chains: wagmiChains, + options: { + appName: "Taiko Bridge", + }, + }), + new WalletConnectConnector({ + chains: wagmiChains, + options: { + qrcode: true, + }, + }), + ], + }); providers.set(providerMap); diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte index f9eb01e7a1..3388ef2128 100644 --- a/packages/bridge-ui/src/components/ChainDropdown.svelte +++ b/packages/bridge-ui/src/components/ChainDropdown.svelte @@ -4,14 +4,15 @@ import ChevDown from "./icons/ChevDown.svelte"; import { fromChain, toChain } from "../store/chain"; import MetaMask from "./icons/MetaMask.svelte"; - import { switchEthereumChain } from "../utils/switchEthereumChain"; - import { ethereum } from "../store/ethereum"; import { CHAIN_MAINNET, CHAIN_TKO } from "../domain/chain"; import type { Chain } from "../domain/chain"; import { ethers } from "ethers"; import { signer } from "../store/signer"; + import { switchNetwork } from "@wagmi/core"; const changeChain = async (chain: Chain) => { - await switchEthereumChain($ethereum, chain); + await switchNetwork({ + chainId: chain.id, + }); const provider = new ethers.providers.Web3Provider(window.ethereum); await provider.send("eth_requestAccounts", []); diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index 162cb9592a..fbe65fd94c 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -7,11 +7,9 @@ import { Contract, ethers } from "ethers"; import { bridges } from "../store/bridge"; import { signer } from "../store/signer"; - import { pendingTransactions, transactions } from "../store/transactions"; + import { pendingTransactions } from "../store/transactions"; import { errorToast, successToast } from "../utils/toast"; import { _ } from "svelte-i18n"; - import { switchEthereumChain } from "../utils/switchEthereumChain"; - import { ethereum } from "../store/ethereum"; import { fromChain as fromChainStore, toChain as toChainStore, @@ -22,6 +20,7 @@ import { LottiePlayer } from "@lottiefiles/svelte-lottie-player"; import HeaderSync from "../constants/abi/HeaderSync"; import { providers } from "../store/providers"; + import { fetchSigner, switchNetwork } from "@wagmi/core"; export let transaction: BridgeTransaction; @@ -36,7 +35,9 @@ async function claim(bridgeTx: BridgeTransaction) { if (fromChain.id !== bridgeTx.message.destChainId.toNumber()) { const chain = chains[bridgeTx.message.destChainId.toNumber()]; - await switchEthereumChain($ethereum, chain); + await switchNetwork({ + chainId: chain.id, + }); const provider = new ethers.providers.Web3Provider(window.ethereum); await provider.send("eth_requestAccounts", []); @@ -46,7 +47,8 @@ } else { toChainStore.set(CHAIN_MAINNET); } - signer.set(provider.getSigner()); + const wagmiSigner = await fetchSigner(); + signer.set(wagmiSigner); } try { @@ -77,7 +79,7 @@ async function isProcessable() { if (!transaction.receipt) return false; if (!transaction.message) return false; - if (transaction.status === MessageStatus.Done) return true; + if (transaction.status !== MessageStatus.New) return true; const contract = new Contract( chains[transaction.message.destChainId.toNumber()].headerSyncAddress, @@ -89,8 +91,7 @@ const srcBlock = await $providers .get(chains[transaction.message.srcChainId.toNumber()].id) .getBlock(latestSyncedHeader); - - return transaction.receipt.blockNumber <= srcBlock.number; + return transaction.receipt.blockNumber >= srcBlock.number; } diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte index 30d7abf901..c87de2b2a7 100644 --- a/packages/bridge-ui/src/components/buttons/Connect.svelte +++ b/packages/bridge-ui/src/components/buttons/Connect.svelte @@ -1,62 +1,105 @@ - + + ($isConnectWalletModalOpen = false)} +> +
+ {#each $wagmiClient.connectors as connector} + + {/each} +
+
diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte index 8e9588befc..b4242b5797 100644 --- a/packages/bridge-ui/src/components/form/SelectChain.svelte +++ b/packages/bridge-ui/src/components/form/SelectChain.svelte @@ -2,16 +2,17 @@ import ArrowRightLeft from "../icons/ArrowRightLeft.svelte"; import { fromChain, toChain } from "../../store/chain"; import { CHAIN_MAINNET, CHAIN_TKO } from "../../domain/chain"; - import { ethereum } from "../../store/ethereum"; import { signer } from "../../store/signer"; - import { switchEthereumChain } from "../../utils/switchEthereumChain"; import { ethers } from "ethers"; import { errorToast, successToast } from "../../utils/toast"; + import { switchNetwork } from "@wagmi/core"; const toggleChains = async () => { try { const chain = $fromChain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET; - await switchEthereumChain($ethereum, chain); + await switchNetwork({ + chainId: chain.id, + }); const provider = new ethers.providers.Web3Provider(window.ethereum); await provider.send("eth_requestAccounts", []); diff --git a/packages/bridge-ui/src/components/icons/CoinbaseWallet.svelte b/packages/bridge-ui/src/components/icons/CoinbaseWallet.svelte new file mode 100644 index 0000000000..297732d01c --- /dev/null +++ b/packages/bridge-ui/src/components/icons/CoinbaseWallet.svelte @@ -0,0 +1 @@ +Coinbase Wallet \ No newline at end of file diff --git a/packages/bridge-ui/src/components/icons/WalletConnect.svelte b/packages/bridge-ui/src/components/icons/WalletConnect.svelte new file mode 100644 index 0000000000..474cecf5e9 --- /dev/null +++ b/packages/bridge-ui/src/components/icons/WalletConnect.svelte @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte b/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte index 9251e4c273..71da144078 100644 --- a/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte +++ b/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte @@ -1,22 +1,21 @@