diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html index cd1f24dd3d..772cde44be 100644 --- a/packages/bridge-ui/index.html +++ b/packages/bridge-ui/index.html @@ -4,6 +4,11 @@ + + + + + Bridge diff --git a/packages/bridge-ui/jest.config.js b/packages/bridge-ui/jest.config.js index c9a3395c82..2453115fc9 100644 --- a/packages/bridge-ui/jest.config.js +++ b/packages/bridge-ui/jest.config.js @@ -49,6 +49,7 @@ export default { preset: "ts-jest", testEnvironment: "jsdom", testPathIgnorePatterns: ["/node_modules/"], + coveragePathIgnorePatterns: ["/src/components/"], testTimeout: 40 * 1000, watchPathIgnorePatterns: ["node_modules"], }; diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json index 6157230a22..1702ba9902 100644 --- a/packages/bridge-ui/package.json +++ b/packages/bridge-ui/package.json @@ -52,14 +52,19 @@ "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": { + "@ethersproject/experimental": "^5.7.0", + "@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", "svelte-i18n": "^3.5.1", - "svelte-spa-router": "^3.2.0", - "wagmi": "^0.8.6" + "svelte-spa-router": "^3.2.0" } } diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte index 9aa4c28752..933049127c 100644 --- a/packages/bridge-ui/src/App.svelte +++ b/packages/bridge-ui/src/App.svelte @@ -2,18 +2,23 @@ import { wrap } from "svelte-spa-router/wrap"; import QueryProvider from "./components/providers/QueryProvider.svelte"; import Router from "svelte-spa-router"; - import Navbar from "./components/Navbar.svelte"; - import { SvelteToast } from "@zerodevx/svelte-toast"; + import { SvelteToast, toast } from "@zerodevx/svelte-toast"; 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 ERC20Bridge from "./erc20/bridge"; + import { pendingTransactions } from "./store/transactions"; + 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" }); + import { CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain"; + import SwitchEthereumChainModal from "./components/modals/SwitchEthereumChainModal.svelte"; const ethBridge = new ETHBridge(); const erc20Bridge = new ERC20Bridge(); @@ -30,6 +35,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, @@ -41,10 +60,12 @@
- +
+ + diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css index e69de29bb2..19e2582bc9 100644 --- a/packages/bridge-ui/src/app.css +++ b/packages/bridge-ui/src/app.css @@ -0,0 +1,46 @@ +.btn.btn-wide { + width: 194px; + height: 56px; +} + +.btn.btn-token-select { + width: 140px; + height: 60px; +} + +.btn.btn-square { + border-radius: 4px; +} + +/* Invert accent button colors */ +.btn.btn-accent { + background-color: hsla(var(--af) / var(--tw-bg-opacity, 1)); + border-color: hsla(var(--af) / var(--tw-bg-opacity, 1)); + height: 60px; +} + +.btn.btn-accent:hover { + background-color: hsla(var(--a) / var(--tw-bg-opacity, 1)); + border-color: hsla(var(--a) / var(--tw-bg-opacity, 1)); +} + +.dropdown .dropdown-content { + border-radius: 0 0 var(--rounded-box) var(--rounded-box); +} + +.input-group .input.input-primary { + border-radius: 0.5rem; +} + +.form-control .input-group :first-child { + border-radius: 0.5rem; +} + +.form-control .input-group :last-child { + border-radius: 0.5rem; +} + +.taiko-banner { + background-image: url('assets/taiko-banner.svg'); + background-repeat: no-repeat; +} \ No newline at end of file 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 0000000000..7c288a43a3 --- /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.svg b/packages/bridge-ui/src/assets/taiko-banner.svg new file mode 100644 index 0000000000..e351b7b9ab --- /dev/null +++ b/packages/bridge-ui/src/assets/taiko-banner.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index aff094b514..d670e1a39b 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -1,16 +1,32 @@ -
-