From 04702db23e3fd705133408e077b8d1a040951202 Mon Sep 17 00:00:00 2001 From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com> Date: Tue, 6 Dec 2022 23:06:41 +0530 Subject: [PATCH] feat(bridge): bridge design (#369) * fix(bridge): wagmi init * feat(bridge): implement design * feat(bridge): add processing fee mock * fix(bridge): review fixes * feat(bridge): add default case and test * fix(bridge): update test * feat(bridge): single field bridge form * fix(bridge): processing fee * feat(bridge-ui): Transactions (#372) * feat(bridge-ui): ERC20 Bridge + approval (#353) * erc20 bridge + approve + requires allowance * bridge form checks allowance, disables button * if allowance is required, show approve button instead * set allowance required to false after successful approval * requiresallowance should take approveopts, not bridgeopts * show Approve text appropriatley * Update packages/bridge-ui/src/components/form/BridgeForm.svelte Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * Update packages/bridge-ui/src/eth/bridge.ts Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * Update packages/bridge-ui/src/components/form/BridgeForm.svelte Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * Update packages/bridge-ui/src/components/form/BridgeForm.svelte Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * inverse approve logic Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * . * lottie player * update lockfile Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> * feat: add chain selector * make ETH/TKO use ts * ignore components folder * inline block avatar * switch ethereum chain, chain navbar selection, default store values, label changing, modal * test coverage for switchEthereumChain * list * readapt bridge form to work * text * feat(bridge): switch chain modal styles * fix(bridge): chain dropdown styles * tests * rpc urls + reactive balanes * import type * cli test Co-authored-by: jeff <113397187+cyberhorsey@users.noreply.github.com> Co-authored-by: David <104078303+davidtaikocha@users.noreply.github.com> Co-authored-by: Jeffery Walsh --- packages/bridge-ui/index.html | 5 + packages/bridge-ui/jest.config.js | 1 + packages/bridge-ui/package.json | 11 +- packages/bridge-ui/src/App.svelte | 30 +- packages/bridge-ui/src/app.css | 46 + .../bridge-ui/src/assets/lottie/loader.json | 1 + .../bridge-ui/src/assets/taiko-banner.svg | 15 + .../src/components/AddressDropdown.svelte | 64 +- .../src/components/ChainDropdown.svelte | 70 + .../bridge-ui/src/components/Navbar.svelte | 34 +- .../src/components/TaikoBanner.svelte | 11 + .../src/components/buttons/Connect.svelte | 43 +- .../src/components/buttons/SelectToken.svelte | 29 +- .../src/components/form/BridgeForm.svelte | 111 +- .../src/components/form/ProcessingFee.svelte | 24 + .../src/components/form/SelectChain.svelte | 39 + .../src/components/icons/ArrowRight.svelte | 3 + .../bridge-ui/src/components/icons/ETH.svelte | 10 +- .../src/components/icons/Loader.svelte | 16 + .../src/components/icons/Logo.svelte | 37 +- .../src/components/icons/MetaMask.svelte | 11 +- .../bridge-ui/src/components/icons/TKO.svelte | 10 +- .../src/components/modals/Modal.svelte | 14 +- .../modals/SwitchEthereumChainModal.svelte | 51 + packages/bridge-ui/src/domain/chain.ts | 29 +- packages/bridge-ui/src/domain/fee.ts | 37 + packages/bridge-ui/src/domain/transactions.ts | 14 + packages/bridge-ui/src/i18n.js | 12 +- packages/bridge-ui/src/pages/home/Home.svelte | 22 +- .../bridge-ui/src/relayer/service.spec.ts | 48 + packages/bridge-ui/src/relayer/service.ts | 32 + packages/bridge-ui/src/store/chain.ts | 5 +- packages/bridge-ui/src/store/ethereum.ts | 4 + packages/bridge-ui/src/store/fee.ts | 6 + packages/bridge-ui/src/store/modal.ts | 3 + packages/bridge-ui/src/store/transactions.ts | 7 + .../bridge-ui/src/utils/addressAvatar.spec.ts | 16 + packages/bridge-ui/src/utils/addressAvatar.ts | 21 + .../src/utils/addressSubsection.spec.ts | 2 +- .../bridge-ui/src/utils/addressSubsection.ts | 2 +- .../src/utils/switchEthereumChain.spec.ts | 41 + .../src/utils/switchEthereumChain.ts | 35 + .../src/utils/truncateString.spec.ts | 20 + .../bridge-ui/src/utils/truncateString.ts | 4 + packages/bridge-ui/tailwind.config.cjs | 22 +- packages/bridge-ui/vite.config.ts | 14 +- packages/relayer/cli/cli_test.go | 14 +- pnpm-lock.yaml | 2330 ++--------------- 48 files changed, 1234 insertions(+), 2192 deletions(-) create mode 100644 packages/bridge-ui/src/assets/lottie/loader.json create mode 100644 packages/bridge-ui/src/assets/taiko-banner.svg create mode 100644 packages/bridge-ui/src/components/ChainDropdown.svelte create mode 100644 packages/bridge-ui/src/components/TaikoBanner.svelte create mode 100644 packages/bridge-ui/src/components/form/ProcessingFee.svelte create mode 100644 packages/bridge-ui/src/components/form/SelectChain.svelte create mode 100644 packages/bridge-ui/src/components/icons/ArrowRight.svelte create mode 100644 packages/bridge-ui/src/components/icons/Loader.svelte create mode 100644 packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte create mode 100644 packages/bridge-ui/src/domain/fee.ts create mode 100644 packages/bridge-ui/src/domain/transactions.ts create mode 100644 packages/bridge-ui/src/relayer/service.spec.ts create mode 100644 packages/bridge-ui/src/relayer/service.ts create mode 100644 packages/bridge-ui/src/store/ethereum.ts create mode 100644 packages/bridge-ui/src/store/fee.ts create mode 100644 packages/bridge-ui/src/store/modal.ts create mode 100644 packages/bridge-ui/src/store/transactions.ts create mode 100644 packages/bridge-ui/src/utils/addressAvatar.spec.ts create mode 100644 packages/bridge-ui/src/utils/addressAvatar.ts create mode 100644 packages/bridge-ui/src/utils/switchEthereumChain.spec.ts create mode 100644 packages/bridge-ui/src/utils/switchEthereumChain.ts create mode 100644 packages/bridge-ui/src/utils/truncateString.spec.ts create mode 100644 packages/bridge-ui/src/utils/truncateString.ts diff --git a/packages/bridge-ui/index.html b/packages/bridge-ui/index.html index cd1f24dd3df..772cde44bed 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 c9a3395c82d..2453115fc9d 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 6157230a229..1702ba9902b 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 9aa4c28752b..933049127c6 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 e69de29bb2d..19e2582bc91 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 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.svg b/packages/bridge-ui/src/assets/taiko-banner.svg new file mode 100644 index 00000000000..e351b7b9ab4 --- /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 aff094b514b..d670e1a39b7 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -1,16 +1,32 @@ -
-