From f9f38bb075c02c7976e0d04c84e4b8b5ac255644 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Wed, 8 Mar 2023 02:39:53 +0100 Subject: [PATCH] feat(bridge-ui): support both bull and horse tokens on the bridge UI (#13249) --- packages/bridge-ui/.default.env | 32 +- packages/bridge-ui/.editorconfig | 10 + packages/bridge-ui/.prettierrc.json | 16 + packages/bridge-ui/README.md | 16 +- packages/bridge-ui/package.json | 1 + .../src/components/buttons/SelectToken.svelte | 128 +- .../src/components/form/BridgeForm.svelte | 186 ++- .../src/components/icons/Bull.svelte | 106 ++ .../src/components/icons/Unknown.svelte | 29 + .../src/components/modals/FaucetModal.svelte | 94 +- .../components/providers/BaseQueries.svelte | 1 - .../components/providers/QueryProvider.svelte | 6 +- .../src/constants/abi/MintableERC20.ts | 386 +++-- packages/bridge-ui/src/constants/envVars.ts | 15 + packages/bridge-ui/src/domain/bridge.ts | 26 +- packages/bridge-ui/src/domain/token.ts | 76 +- packages/bridge-ui/src/pages/home/Home.svelte | 52 +- .../src/utils/recommendProcessingFee.spec.ts | 11 +- pnpm-lock.yaml | 1479 ++++++++++++++++- 19 files changed, 2148 insertions(+), 522 deletions(-) create mode 100644 packages/bridge-ui/.editorconfig create mode 100644 packages/bridge-ui/.prettierrc.json create mode 100644 packages/bridge-ui/src/components/icons/Bull.svelte create mode 100644 packages/bridge-ui/src/components/icons/Unknown.svelte delete mode 100644 packages/bridge-ui/src/components/providers/BaseQueries.svelte create mode 100644 packages/bridge-ui/src/constants/envVars.ts diff --git a/packages/bridge-ui/.default.env b/packages/bridge-ui/.default.env index 5213b703d0..15311c8a39 100644 --- a/packages/bridge-ui/.default.env +++ b/packages/bridge-ui/.default.env @@ -1,17 +1,25 @@ VITE_NODE_ENV=dev VITE_L1_RPC_URL="" VITE_L2_RPC_URL="" -VITE_TAIKO_BRIDGE_ADDRESS="" -VITE_MAINNET_BRIDGE_ADDRESS="" -VITE_TEST_ERC20_ADDRESS_MAINNET="" -VITE_MAINNET_TOKEN_VAULT_ADDRESS="" -VITE_TAIKO_TOKEN_VAULT_ADDRESS="" -VITE_TEST_ERC20_ADDRESS_MAINNET="" + +VITE_RELAYER_URL="" + +VITE_TEST_ERC20=[] + VITE_MAINNET_CHAIN_ID= VITE_TAIKO_CHAIN_ID= -VITE_MAINNET_CHAIN_NAME= -VITE_TAIKO_CHAIN_NAME= -VITE_TAIKO_HEADER_SYNC_ADDRESS= -VITE_MAINNET_HEADER_SYNC_ADDRESS= -VITE_MAINNET_BRIDGE_ADDRESS= -VITE_TAIKO_BRIDGE_ADDRESS= \ No newline at end of file + +VITE_MAINNET_CHAIN_NAME="" +VITE_TAIKO_CHAIN_NAME="" + +VITE_MAINNET_TOKEN_VAULT_ADDRESS="" +VITE_TAIKO_TOKEN_VAULT_ADDRESS="" + +VITE_MAINNET_HEADER_SYNC_ADDRESS="" +VITE_TAIKO_HEADER_SYNC_ADDRESS="" + +VITE_MAINNET_BRIDGE_ADDRESS="" +VITE_TAIKO_BRIDGE_ADDRESS="" + +VITE_MAINNET_SIGNAL_SERVICE_ADDRESS="" +VITE_TAIKO_SIGNAL_SERVICE_ADDRESS="" diff --git a/packages/bridge-ui/.editorconfig b/packages/bridge-ui/.editorconfig new file mode 100644 index 0000000000..c7e8f0e5fd --- /dev/null +++ b/packages/bridge-ui/.editorconfig @@ -0,0 +1,10 @@ +root=true + +[*] +end_of_line = lf +insert_final_newline = true + +[*.{js,ts,svelte,css,json,yml,yaml}] +charset = utf-8 +indent_style = space +indent_size = 2 diff --git a/packages/bridge-ui/.prettierrc.json b/packages/bridge-ui/.prettierrc.json new file mode 100644 index 0000000000..6f95a53446 --- /dev/null +++ b/packages/bridge-ui/.prettierrc.json @@ -0,0 +1,16 @@ +{ + "trailingComma": "all", + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "bracketSameLine": true, + + "plugins": [ + "prettier-plugin-svelte" + ], + + "svelteSortOrder" : "options-scripts-markup-styles", + "svelteStrictMode": false, + "svelteAllowShorthand": true, + "svelteIndentScriptAndStyle": true +} diff --git a/packages/bridge-ui/README.md b/packages/bridge-ui/README.md index e611dba312..85a807693c 100644 --- a/packages/bridge-ui/README.md +++ b/packages/bridge-ui/README.md @@ -14,24 +14,32 @@ You can use the following values in the `.env` file to spin up the Bridge UI loc ``` VITE_NODE_ENV=dev + VITE_L1_RPC_URL="https://l1rpc.internal.taiko.xyz/" VITE_L2_RPC_URL="https://l2rpc.internal.taiko.xyz/" + VITE_L1_EXPLORER_URL="https://l1explorer.internal.taiko.xyz/" VITE_L2_EXPLORER_URL="https://l2explorer.internal.taiko.xyz/" + VITE_RELAYER_URL="https://relayer.internal.taiko.xyz/" -VITE_TEST_ERC20_ADDRESS_MAINNET="0x3435A6180fBB1BAEc87bDC49915282BfBC328C70" -VITE_TEST_ERC20_SYMBOL_MAINNET="BULL" -VITE_TEST_ERC20_NAME_MAINNET="Bull Token" + +VITE_TEST_ERC20=[{"address": "0x3435A6180fBB1BAEc87bDC49915282BfBC328C70", "symbol": "BLL", "name": "Bull Token"}, {"address": "0xAED64948E0d09f4eb07d8B76A65Cd3d517c6Fb15", "symbol": "HORSE", "name": "Horse Token"}] + VITE_MAINNET_CHAIN_ID=31336 VITE_TAIKO_CHAIN_ID=167001 + VITE_MAINNET_CHAIN_NAME="Ethereum A2" VITE_TAIKO_CHAIN_NAME="Taiko A2" + VITE_MAINNET_TOKEN_VAULT_ADDRESS="0x5E506e2E0EaD3Ff9d93859A5879cAA02582f77c3" VITE_TAIKO_TOKEN_VAULT_ADDRESS="0x0000777700000000000000000000000000000002" + VITE_MAINNET_HEADER_SYNC_ADDRESS="0x9b557777Be33A8A2fE6aF93E017A0d139B439E5D" VITE_TAIKO_HEADER_SYNC_ADDRESS="0x0000777700000000000000000000000000000001" + VITE_MAINNET_BRIDGE_ADDRESS="0xAE4C9bD0f7AE5398Df05043079596E2BF0079CE9" VITE_TAIKO_BRIDGE_ADDRESS="0x0000777700000000000000000000000000000004" + VITE_MAINNET_SIGNAL_SERVICE_ADDRESS="0x162A36c9821eadeCFF9669A3940b7f72d055Cd1c" VITE_TAIKO_SIGNAL_SERVICE_ADDRESS="0x0000777700000000000000000000000000000007" -``` \ No newline at end of file +``` diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json index f0be237d6b..e00a326cd3 100644 --- a/packages/bridge-ui/package.json +++ b/packages/bridge-ui/package.json @@ -39,6 +39,7 @@ "postcss-cli": "^7.1.2", "postcss-loader": "^6.2.0", "prettier": "2.7.1", + "prettier-plugin-svelte": "^2.9.0", "rollup-plugin-node-builtins": "^2.0.0", "rollup-plugin-polyfill-node": "^0.10.2", "svelte": "^3.53.1", diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte index fe1febe7e0..f18a94c8b7 100644 --- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte +++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte @@ -1,14 +1,14 @@ diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte index e1eae0afc0..4486b1d2ea 100644 --- a/packages/bridge-ui/src/components/form/BridgeForm.svelte +++ b/packages/bridge-ui/src/components/form/BridgeForm.svelte @@ -1,53 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bridge-ui/src/components/icons/Unknown.svelte b/packages/bridge-ui/src/components/icons/Unknown.svelte new file mode 100644 index 0000000000..c35c52cff8 --- /dev/null +++ b/packages/bridge-ui/src/components/icons/Unknown.svelte @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/packages/bridge-ui/src/components/modals/FaucetModal.svelte b/packages/bridge-ui/src/components/modals/FaucetModal.svelte index 85630aef06..f8c8572bf0 100644 --- a/packages/bridge-ui/src/components/modals/FaucetModal.svelte +++ b/packages/bridge-ui/src/components/modals/FaucetModal.svelte @@ -1,43 +1,43 @@ - - You can request 1000 {$token.symbol}. {$token.symbol} is only available to be minted - on {import.meta.env - ? import.meta.env.VITE_MAINNET_CHAIN_NAME - : "Ethereum A2"}. If you are on {import.meta.env ? import.meta.env.VITE_TAIKO_CHAIN_NAME : "Taiko A2"}, your network will be changed first. You - must have a small amount of ETH in your {import.meta.env + $: shouldEnableButton().catch((e) => console.error(e)); + $: mainnetName = import.meta.env ? import.meta.env.VITE_MAINNET_CHAIN_NAME - : "Ethereum A2"} wallet to send the transaction. + : 'Ethereum A2'; + $: taikonetName = import.meta.env + ? import.meta.env.VITE_TAIKO_CHAIN_NAME + : 'Taiko A2'; + + onMount(async () => { + shouldEnableButton(); + }); + + + + You can request 50 {$token.symbol}. {$token.symbol} is only available to be minted + on {mainnetName}. If you are on {taikonetName}, your network will be changed + first. You must have a small amount of ETH in your {mainnetName} wallet to send + the transaction.