diff --git a/packages/bridge-ui/.gitignore b/packages/bridge-ui/.gitignore index 1cac5597ea2..1cb393e1821 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/index.html b/packages/bridge-ui/index.html index 772cde44bed..d52ecefa974 100644 --- a/packages/bridge-ui/index.html +++ b/packages/bridge-ui/index.html @@ -2,12 +2,14 @@ - - - - - + + + + Bridge diff --git a/packages/bridge-ui/jest.config.js b/packages/bridge-ui/jest.config.js index 472d18cf5ec..deb00a64f8f 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 1702ba9902b..d084f58c3f3 100644 --- a/packages/bridge-ui/package.json +++ b/packages/bridge-ui/package.json @@ -42,6 +42,7 @@ "rollup-plugin-polyfill-node": "^0.10.2", "svelte": "^3.53.1", "svelte-check": "^2.8.0", + "svelte-heros-v2": "^0.3.10", "svelte-jester": "^2.1.5", "svelte-loader": "^3.1.2", "svelte-preprocess": "^4.10.7", @@ -56,11 +57,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/public/taiko-favicon.png b/packages/bridge-ui/public/taiko-favicon.png new file mode 100644 index 00000000000..28da6ff1343 Binary files /dev/null and b/packages/bridge-ui/public/taiko-favicon.png differ diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte index 20a477aab5b..071a7fb0a3f 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); @@ -147,16 +201,13 @@ -
-
- - - -
- - - -
+
+ + + +
+ + diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index 63b55e84bd7..d085773df9b 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -5,13 +5,11 @@ import { addressSubsection } from "../utils/addressSubsection"; import { signer } from "../store/signer"; import { pendingTransactions } from "../store/transactions"; - import ChevDown from "./icons/ChevDown.svelte"; import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar"; import { LottiePlayer } from "@lottiefiles/svelte-lottie-player"; import { ethers, Signer } from "ethers"; import { errorToast } from "../utils/toast"; - import CopyIcon from "./icons/Copy.svelte"; - import DisconnectIcon from "./icons/Disconnect.svelte"; + import { ClipboardDocument, Power } from "svelte-heros-v2"; import { slide } from "svelte/transition"; import { fromChain } from "../store/chain"; import { truncateString } from "../utils/truncateString"; @@ -89,7 +87,7 @@ diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte index 112f7a2339c..b33517c296d 100644 --- a/packages/bridge-ui/src/components/ChainDropdown.svelte +++ b/packages/bridge-ui/src/components/ChainDropdown.svelte @@ -1,17 +1,16 @@ - + diff --git a/packages/bridge-ui/src/components/Tooltip.svelte b/packages/bridge-ui/src/components/Tooltip.svelte index 0b0b924137f..1ccae3a0157 100644 --- a/packages/bridge-ui/src/components/Tooltip.svelte +++ b/packages/bridge-ui/src/components/Tooltip.svelte @@ -1,9 +1,11 @@ - + (isOpen = true)} + size="18" + variation="outline" +/> diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index 162cb9592a2..8ed8a6863ce 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -2,16 +2,14 @@ import type { BridgeTransaction } from "../domain/transactions"; import { chains, CHAIN_MAINNET, CHAIN_TKO } from "../domain/chain"; import type { Chain } from "../domain/chain"; - import TransactionsIcon from "./icons/Transactions.svelte"; + import { ArrowTopRightOnSquare } from "svelte-heros-v2"; import { MessageStatus } from "../domain/message"; 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; } @@ -119,7 +120,7 @@ "_blank" )} > - + diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte index 30d7abf9015..c87de2b2a7e 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/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte index 95902a3d15a..c4aa14c7620 100644 --- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte +++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte @@ -4,7 +4,7 @@ import { ETH, tokens } from "../../domain/token"; import type { Token } from "../../domain/token"; import { BridgeType } from "../../domain/bridge"; - import ChevDown from "../icons/ChevDown.svelte"; + import { ChevronDown } from "svelte-heros-v2"; import { successToast } from "../../utils/toast"; async function select(t: Token) { @@ -26,18 +26,15 @@ >

{$token.symbol.toUpperCase()}

- +
    {#each tokens as t} -
  • -