diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json index e5ce3987738..bf7d3dfebce 100644 --- a/packages/bridge-ui/package.json +++ b/packages/bridge-ui/package.json @@ -52,11 +52,14 @@ "ts-loader": "^9.2.6", "tslib": "^2.4.0", "typescript": "^4.6.4", - "vite": "^3.0.0" + "vite": "^3.0.0", + "vite-plugin-static-copy": "^0.12.0" }, "dependencies": { + "@lottiefiles/svelte-lottie-player": "^0.2.0", "@sveltestack/svelte-query": "^1.6.0", "@wagmi/core": "^0.7.5", + "axios": "^1.2.0", "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 55cfdc2f1aa..271ac6a4d20 100644 --- a/packages/bridge-ui/src/App.svelte +++ b/packages/bridge-ui/src/App.svelte @@ -2,30 +2,37 @@ import { wrap } from "svelte-spa-router/wrap"; import QueryProvider from "./components/providers/QueryProvider.svelte"; import Router from "svelte-spa-router"; - import { SvelteToast } from "@zerodevx/svelte-toast"; - import { configureChains } from '@wagmi/core'; - import { publicProvider } from '@wagmi/core/providers/public' - - import { mainnet, taiko } from "./domain/chain"; - import Navbar from "./components/Navbar.svelte"; + import { SvelteToast, toast } from "@zerodevx/svelte-toast"; + import { configureChains } from "@wagmi/core"; + import { publicProvider } from "@wagmi/core/providers/public"; + import Home from "./pages/home/Home.svelte"; import { setupI18n } from "./i18n"; import { BridgeType } from "./domain/bridge"; import ETHBridge from "./eth/bridge"; import { bridges, chainIdToBridgeAddress } from "./store/bridge"; - import { CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain"; + import { CHAIN_MAINNET, CHAIN_TKO, mainnet, taiko } from "./domain/chain"; + import ERC20Bridge from "./erc20/bridge"; + import { pendingTransactions } from "./store/transactions"; + import { ethers } from "ethers"; + import Navbar from "./components/Navbar.svelte"; + import { signer } from "./store/signer"; + import type { Transactioner } from "./domain/transactions"; + import { RelayerService } from "./relayer/service"; + + setupI18n({ withLocale: "en" }); const { chains, provider } = configureChains( [mainnet, taiko], [publicProvider()] ); - setupI18n({ withLocale: "en" }); - const ethBridge = new ETHBridge(); + const erc20Bridge = new ERC20Bridge(); bridges.update((store) => { store.set(BridgeType.ETH, ethBridge); + store.set(BridgeType.ERC20, erc20Bridge); return store; }); @@ -35,6 +42,20 @@ return store; }); + const relayerURL = import.meta.env.VITE_RELAYER_URL; + + const transactioner: Transactioner = new RelayerService(relayerURL); + + pendingTransactions.subscribe((store) => { + store.forEach(async (tx) => { + await $signer.provider.waitForTransaction(tx.hash, 3); + toast.push("Transaction completed!"); + const s = store; + s.pop(); + pendingTransactions.set(s); + }); + }); + const routes = { "/": wrap({ component: Home, @@ -46,7 +67,7 @@
- +
@@ -59,6 +80,6 @@ main { margin: 0; - font-family: 'Inter', sans-serif; + font-family: "Inter", sans-serif; } diff --git a/packages/bridge-ui/src/assets/lottie/loader.json b/packages/bridge-ui/src/assets/lottie/loader.json new file mode 100644 index 00000000000..7c288a43a3d --- /dev/null +++ b/packages/bridge-ui/src/assets/lottie/loader.json @@ -0,0 +1 @@ +{"nm":"Comp 1","mn":"","layers":[{"ty":4,"nm":"Shape Layer 2","mn":"","sr":1,"st":0,"op":300,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-22.637,19.301,0],"ix":1},"s":{"a":0,"k":[33.33333333333334,33.33333333333334,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[100.02066666666668,100.00000000000003,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":80,"ix":11},"r":{"a":1,"k":[{"o":{"x":0.472,"y":0.326},"i":{"x":0.526,"y":0.673},"s":[0],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[183],"t":60}],"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[368.602,368.602],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":49,"ix":5},"d":[],"c":{"a":0,"k":[0.9882,0.0588,0.7529],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-22.699,19.301],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.559,"y":0},"i":{"x":0.504,"y":1},"s":[1],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[50],"t":30}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.579,"y":0},"i":{"x":0.438,"y":1},"s":[0],"t":30},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[49],"t":60}],"ix":1},"m":1}],"ind":0},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":300,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[33.33333333333334,33.33333333333334,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[107.56633333333339,93.56633333333338,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":10,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[368.602,368.602],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":49,"ix":5},"d":[],"c":{"a":0,"k":[0.698,0.0588,0.5373],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-22.699,19.301],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1}],"ddd":0,"h":200,"w":200,"meta":{"a":"","k":"","d":"","g":"@lottiefiles/toolkit-js 0.17.3","tc":"#ffffff"},"v":"5.5.0","fr":30,"op":60,"ip":0,"assets":[]} \ No newline at end of file diff --git a/packages/bridge-ui/src/assets/taiko-banner.png b/packages/bridge-ui/src/assets/taiko-banner.png deleted file mode 100644 index e481528cbcc..00000000000 Binary files a/packages/bridge-ui/src/assets/taiko-banner.png and /dev/null differ diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index 5129c7b1d01..6b1a77ceb0e 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -5,11 +5,16 @@ 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 type { BridgeTransaction } from "src/domain/transactions"; + import { LottiePlayer } from "@lottiefiles/svelte-lottie-player"; + + export let transactions: BridgeTransaction[] = []; let address: string; - let addressAvatarImgData; + let addressAvatarImgData: string; onMount(async () => { address = await $signer.getAddress(); addressAvatarImgData = getAddressAvatarFromIdenticon(address); @@ -31,8 +36,32 @@ diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte index 40e12a9bc64..04de8ac9d15 100644 --- a/packages/bridge-ui/src/components/Navbar.svelte +++ b/packages/bridge-ui/src/components/Navbar.svelte @@ -1,8 +1,27 @@ -