From 25b29026bb47e58d2eff63070437320696461eaf Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 10 Jul 2023 12:29:02 +0200 Subject: [PATCH 01/65] wip --- .../components/Activities/Activities.svelte | 2 +- .../src/components/Bridge/Bridge.svelte | 23 ++----------- .../ChainSelector/ChainSelector.svelte | 5 +-- .../src/components/Faucet/Faucet.svelte | 2 +- .../src/libs/connect/web3modal.ts | 3 -- .../bridge-ui-v2/src/libs/token/isMinted.ts | 33 ++++++++++++++++++ packages/bridge-ui-v2/src/libs/token/mint.ts | 34 +++++++++++++++++++ packages/bridge-ui-v2/src/libs/token/types.ts | 4 ++- .../bridge-ui-v2/src/routes/+layout.svelte | 6 ++++ packages/bridge-ui-v2/src/stores/network.ts | 8 ++++- packages/bridge-ui-v2/tsconfig.json | 3 +- 11 files changed, 90 insertions(+), 33 deletions(-) create mode 100644 packages/bridge-ui-v2/src/libs/token/isMinted.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/mint.ts diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 4582e168672..850255790cf 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -11,7 +11,7 @@
- +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 0907877d42d..a8cfaed1c57 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -10,34 +10,15 @@ import { ProcessingFee } from '$components/ProcessingFee'; import { RecipientInput } from '$components/RecipientInput'; import { TokenDropdown } from '$components/TokenDropdown'; - import { web3modal } from '$libs/connect'; import { tokens } from '$libs/token'; import { destChain, srcChain } from '$stores/network'; - - function onSrcChainChange(chain: Chain) { - if (chain !== $srcChain) { - srcChain.set(chain); - - // Let's not forget to update the default chain - // in web3modal. Unfortunately we have to maintain - // two states here due to the fact that the user - // can change the network from the UI. - web3modal.setDefaultChain(chain); - } - } - - function onDestChainChange(chain: Chain) { - if (chain !== $destChain) { - destChain.set(chain); - } - }
- +
@@ -50,7 +31,7 @@
- +
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index ec192b9a57f..257bd279ee0 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -1,7 +1,7 @@ +
@@ -21,6 +22,11 @@
+ + diff --git a/packages/bridge-ui-v2/src/stores/network.ts b/packages/bridge-ui-v2/src/stores/network.ts index a4e6a81ed62..abb17d92ed8 100644 --- a/packages/bridge-ui-v2/src/stores/network.ts +++ b/packages/bridge-ui-v2/src/stores/network.ts @@ -1,6 +1,12 @@ -import type { GetNetworkResult } from '@wagmi/core'; +import { type GetNetworkResult, switchNetwork } from '@wagmi/core'; import { writable } from 'svelte/store'; export const srcChain = writable(); export const destChain = writable(); + +// Changing source chain from UI should trigger network switch +srcChain.subscribe((chain) => { + if (!chain) return; + switchNetwork({ chainId: chain.id }); +}); diff --git a/packages/bridge-ui-v2/tsconfig.json b/packages/bridge-ui-v2/tsconfig.json index 2cd1c44be31..112aee87f87 100644 --- a/packages/bridge-ui-v2/tsconfig.json +++ b/packages/bridge-ui-v2/tsconfig.json @@ -15,7 +15,8 @@ "paths": { "$components/*": ["./src/components/*"], "$stores/*": ["./src/stores/*"], - "$libs/*": ["./src/libs/*"] + "$libs/*": ["./src/libs/*"], + "$abi": ["./src/abi/index.ts"] }, // https://vitest.dev/config/#globals From d55c7bad7f3b27928cf649a49f96f6529b616789 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 10 Jul 2023 18:25:22 +0200 Subject: [PATCH 02/65] wip: faucet --- .../src/components/Faucet/Faucet.svelte | 73 +++++++++++++++++-- .../TokenDropdown/TokenDropdown.svelte | 19 ++--- packages/bridge-ui-v2/src/i18n/en.json | 6 ++ .../src/libs/token/checkMintable.ts | 60 +++++++++++++++ .../bridge-ui-v2/src/libs/token/isMinted.ts | 33 --------- packages/bridge-ui-v2/src/libs/token/mint.ts | 14 +++- packages/bridge-ui-v2/src/libs/token/types.ts | 11 ++- 7 files changed, 162 insertions(+), 54 deletions(-) create mode 100644 packages/bridge-ui-v2/src/libs/token/checkMintable.ts delete mode 100644 packages/bridge-ui-v2/src/libs/token/isMinted.ts diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index 66f0a1a1328..635f3f83a54 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -1,4 +1,5 @@ -
- +
-
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte index fd7c88dc19d..1e521d90f9a 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte @@ -1,6 +1,5 @@ @@ -84,10 +94,12 @@ -
+ {#if reasonNoMintable} +
- - {$t('faucet.message.warning')} - + + {reasonNoMintable} + + {/if}
diff --git a/packages/bridge-ui-v2/src/components/Modal/Modal.svelte b/packages/bridge-ui-v2/src/components/Modal/Modal.svelte new file mode 100644 index 00000000000..f5ff4851c2f --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Modal/Modal.svelte @@ -0,0 +1,12 @@ + + + +
+

{title}

+ +
+ +
+
 diff --git a/packages/bridge-ui-v2/src/components/Modal/index.ts b/packages/bridge-ui-v2/src/components/Modal/index.ts new file mode 100644 index 00000000000..2a1af70eefa --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Modal/index.ts @@ -0,0 +1 @@ +export { default as Modal } from './Modal.svelte'; diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index da23b9710fd..a327e30197b 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -59,14 +59,15 @@ "faucet": { "title": "Faucet", "subtitle": "Mint test tokens.", - "button": { - "mint": "Mint", - "minting": "Minting", - "no_chain": "No chain selected", - "no_token": "No token selected" - }, "button.mint": "Mint", - "message.warning": "To request Test Token, you need to mint it on Sepolia. If you are currently on Taiko, please switch your network first. Additionally, ensure that you have a small amount of ETH in your Sepolia wallet to complete the transaction." + "warning": { + "no_token": "Please select a token to mint.", + "no_network": "Please switch to {network} to mint tokens.", + "wrong_chain": "It appears your are on the wrong network. Switch to {network} to mint tokens.", + "no_connected": "Please connect your wallet to mint tokens.", + "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.", + "already_minted": "You have already minted this token." + } }, "token_dropdown": { diff --git a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts index b03cc519bbf..2c9735beedc 100644 --- a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts +++ b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts @@ -6,7 +6,7 @@ import { PUBLIC_L1_CHAIN_ID } from '$env/static/public'; import { MintableError, type Token } from './types'; -// Throws an error if there is any reason for not being able to mint +// Throws an error if there is any reason for not being mintable export async function checkMintable(token: Maybe, network: Maybe) { if (!token) { throw new Error(`token is undefined`, { cause: MintableError.TOKEN_UNDEFINED }); @@ -16,20 +16,17 @@ export async function checkMintable(token: Maybe, network: Maybe) throw new Error(`network is undefined`, { cause: MintableError.NETWORK_UNDEFINED }); } + // Are we in the right network L1? we cannot mint in L2 const chainId = network.id; - const walletClient = await getWalletClient({ chainId }); + if (chainId.toString() !== PUBLIC_L1_CHAIN_ID) { + throw new Error(`user is in the wrong chain: ${chainId}`, { cause: MintableError.WRONG_CHAIN }); + } + const walletClient = await getWalletClient({ chainId }); if (!walletClient) { throw new Error(`user is not connected to ${network.name}`, { cause: MintableError.NOT_CONNECTED }); } - const userAddress = walletClient.account.address; - - // Are we in the right network? - if (chainId.toString() !== PUBLIC_L1_CHAIN_ID) { - throw new Error(`user is in the wrong chain: ${chainId}`, { cause: MintableError.WRONG_CHAIN }); - } - const tokenContract = getContract({ walletClient, abi: freeMintErc20ABI, @@ -37,10 +34,11 @@ export async function checkMintable(token: Maybe, network: Maybe) }); // Check whether the user has already minted this token + const userAddress = walletClient.account.address; const hasMinted = await tokenContract.read.minters([userAddress]); if (hasMinted) { - throw Error(`token ${token.symbol} has already been minted}`, { cause: MintableError.TOKEN_MINTED }); + throw Error(`token ${token.symbol} has already been minted`, { cause: MintableError.TOKEN_MINTED }); } // Check whether the user has enough balance to mint. From 2d1f1d243be3cfc169c703d4154159d57302e9b4 Mon Sep 17 00:00:00 2001 From: Francisco Date: Tue, 11 Jul 2023 14:27:47 +0200 Subject: [PATCH 04/65] wip --- .../components/Activities/Activities.svelte | 2 +- .../src/components/Bridge/Bridge.svelte | 4 +- .../ChainSelector/ChainSelector.svelte | 41 +++-- .../ConnectButton/ConnectButton.svelte | 1 + .../src/components/Faucet/Faucet.svelte | 160 ++++++++++++------ packages/bridge-ui-v2/src/i18n/en.json | 11 +- 6 files changed, 151 insertions(+), 68 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte index 850255790cf..4582e168672 100644 --- a/packages/bridge-ui-v2/src/components/Activities/Activities.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/Activities.svelte @@ -11,7 +11,7 @@
- +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index a8cfaed1c57..e8164553dca 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -18,7 +18,7 @@
- +
@@ -31,7 +31,7 @@
- +
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index 257bd279ee0..b0cc2e46f29 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -1,5 +1,5 @@
- +
- + {#if !connected} + + {$t('messages.account.required')} + + {:else if wrongChain} + + {$t('faucet.wrong_chain.message', { values: { network: PUBLIC_L1_CHAIN_NAME } })} + + + + {:else} + + {/if} - {#if reasonNoMintable} +
+ + diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index a327e30197b..b11a7d3e0d9 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -60,10 +60,14 @@ "title": "Faucet", "subtitle": "Mint test tokens.", "button.mint": "Mint", + "wrong_chain": { + "message": "It appears your are on the wrong network. Switch to {network} to mint tokens.", + "button": "Switch to {network}", + "switching": "Switching network" + }, "warning": { "no_token": "Please select a token to mint.", "no_network": "Please switch to {network} to mint tokens.", - "wrong_chain": "It appears your are on the wrong network. Switch to {network} to mint tokens.", "no_connected": "Please connect your wallet to mint tokens.", "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.", "already_minted": "You have already minted this token." @@ -87,10 +91,11 @@ "messages": { "account": { - "required": "Please connect your wallet", + "required": "Please connect your wallet.", "connected": "Account connected", "disconnected": "Account disconnected" - } + }, + "switch_chain.rejected": "Switch chain request rejected." }, "chain": { From bd2e4a7e6d0b6a18b780fa23a6ee64fbb6220b0c Mon Sep 17 00:00:00 2001 From: Francisco Date: Tue, 11 Jul 2023 17:03:39 +0200 Subject: [PATCH 05/65] wip --- .../src/components/Button/Button.svelte | 22 +++- .../ChainSelector/ChainSelector.svelte | 55 +++++---- .../ConnectButton/ConnectButton.svelte | 3 +- .../src/components/Faucet/Faucet.svelte | 108 +++++++++--------- .../components/LoadingMask/LoadingMask.svelte | 23 ++++ .../src/components/LoadingMask/index.ts | 1 + .../TokenDropdown/TokenDropdown.svelte | 2 +- packages/bridge-ui-v2/src/i18n/en.json | 13 ++- .../src/libs/token/checkMintable.ts | 24 ++-- packages/bridge-ui-v2/src/libs/token/types.ts | 3 - .../bridge-ui-v2/src/styles/components.css | 4 - packages/bridge-ui-v2/src/styles/override.css | 13 +++ 12 files changed, 162 insertions(+), 109 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte create mode 100644 packages/bridge-ui-v2/src/components/LoadingMask/index.ts diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte index 21389e619ba..0bcab9c66ff 100644 --- a/packages/bridge-ui-v2/src/components/Button/Button.svelte +++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte @@ -1,4 +1,5 @@ diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index b0cc2e46f29..21ea89a5090 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -11,6 +11,7 @@ import { uid } from '$libs/util/uid'; import { account } from '$stores/account'; import { UserRejectedRequestError } from 'viem'; + import { LoadingMask } from '$components/LoadingMask'; export let label: string; export let value: Maybe = null; @@ -52,7 +53,7 @@ console.error(error); if (error instanceof UserRejectedRequestError) { - warningToast($t('messages.switch_chain.rejected')); + warningToast($t('messages.network.rejected')); } } finally { switchingNetwork = false; @@ -101,30 +102,36 @@

{$t('chain_selector.placeholder')}

- + + {/each} + +
diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte index eb9efb777a8..5c2e7696e7e 100644 --- a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte +++ b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte @@ -38,10 +38,9 @@ {:else} - {:else} - {/if} diff --git a/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte b/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte new file mode 100644 index 00000000000..c96951974ad --- /dev/null +++ b/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte @@ -0,0 +1,23 @@ + + +
+ + {text} +
diff --git a/packages/bridge-ui-v2/src/components/LoadingMask/index.ts b/packages/bridge-ui-v2/src/components/LoadingMask/index.ts new file mode 100644 index 00000000000..cefb208a5d7 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/LoadingMask/index.ts @@ -0,0 +1 @@ +export { default as LoadingMask } from './LoadingMask.svelte'; diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte index 1e521d90f9a..96f777611d1 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte @@ -8,7 +8,7 @@ import { uid } from '$libs/util/uid'; export let tokens: Token[] = []; - export let value: Maybe; + export let value: Maybe = null; let symbolToIconMap: Record = { ETH: EthIcon, diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index b11a7d3e0d9..0266de7cb9c 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -59,11 +59,13 @@ "faucet": { "title": "Faucet", "subtitle": "Mint test tokens.", - "button.mint": "Mint", + "button": { + "mint": "Mint", + "checking": "Checking mintability" + }, "wrong_chain": { "message": "It appears your are on the wrong network. Switch to {network} to mint tokens.", - "button": "Switch to {network}", - "switching": "Switching network" + "button": "Switch to {network}" }, "warning": { "no_token": "Please select a token to mint.", @@ -95,7 +97,10 @@ "connected": "Account connected", "disconnected": "Account disconnected" }, - "switch_chain.rejected": "Switch chain request rejected." + "network": { + "switching": "Switching network", + "rejected": "Switch chain request rejected." + } }, "chain": { diff --git a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts index 2c9735beedc..00cc4b7d986 100644 --- a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts +++ b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts @@ -2,27 +2,17 @@ import { type Chain, getContract, getPublicClient, getWalletClient } from '@wagm import { formatEther } from 'viem'; import { freeMintErc20ABI } from '$abi'; -import { PUBLIC_L1_CHAIN_ID } from '$env/static/public'; import { MintableError, type Token } from './types'; -// Throws an error if there is any reason for not being mintable -export async function checkMintable(token: Maybe, network: Maybe) { - if (!token) { - throw new Error(`token is undefined`, { cause: MintableError.TOKEN_UNDEFINED }); - } - - if (!network) { - throw new Error(`network is undefined`, { cause: MintableError.NETWORK_UNDEFINED }); - } - - // Are we in the right network L1? we cannot mint in L2 - const chainId = network.id; - if (chainId.toString() !== PUBLIC_L1_CHAIN_ID) { - throw new Error(`user is in the wrong chain: ${chainId}`, { cause: MintableError.WRONG_CHAIN }); - } - +// Throws an error if: +// 1. User is not connected to the network +// 2. User has already minted this token +// 3. User has insufficient balance to mint this token +export async function checkMintable(token: Token, network: Chain) { + const chainId = network.id const walletClient = await getWalletClient({ chainId }); + if (!walletClient) { throw new Error(`user is not connected to ${network.name}`, { cause: MintableError.NOT_CONNECTED }); } diff --git a/packages/bridge-ui-v2/src/libs/token/types.ts b/packages/bridge-ui-v2/src/libs/token/types.ts index 18ec3df5338..c47b27f7fa3 100644 --- a/packages/bridge-ui-v2/src/libs/token/types.ts +++ b/packages/bridge-ui-v2/src/libs/token/types.ts @@ -14,10 +14,7 @@ export type TokenEnv = { }; export enum MintableError { - TOKEN_UNDEFINED = 'TOKEN_UNDEFINED', - NETWORK_UNDEFINED = 'NETWORK_UNDEFINED', NOT_CONNECTED = 'NOT_CONNECTED', - WRONG_CHAIN = 'WRONG_CHAIN', TOKEN_MINTED = 'TOKEN_MINTED', INSUFFICIENT_BALANCE = 'INSUFFICIENT_BALANCE', } diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css index c43d2297c5e..7b82bbfa2c6 100644 --- a/packages/bridge-ui-v2/src/styles/components.css +++ b/packages/bridge-ui-v2/src/styles/components.css @@ -118,9 +118,5 @@ @apply modal-backdrop bg-overlay-background; } - .mask { - @apply absolute top-0 right-0 bottom-0 left-0 overflow-hidden; - } - /* TODO: add more components here */ } diff --git a/packages/bridge-ui-v2/src/styles/override.css b/packages/bridge-ui-v2/src/styles/override.css index 0d50a0d592c..d35f042ad08 100644 --- a/packages/bridge-ui-v2/src/styles/override.css +++ b/packages/bridge-ui-v2/src/styles/override.css @@ -21,3 +21,16 @@ input[type='number'] { /* Primary background: '#0B101B' => grey-900 */ background-color: hsl(221, 42%, 7%); } + +/** + * By design we don't have any opacity on disabled buttons, + * also font color is tertiary-content + */ +.btn.btn-disabled, +.btn[disabled], +.btn:disabled { + --tw-border-opacity: 1; + --tw-bg-opacity: 1; + --tw-text-opacity: 1; + @apply text-tertiary-content; +} From 2fd98ee5ff39043d9e1b8b5776fe1b46afaed6bc Mon Sep 17 00:00:00 2001 From: Francisco Date: Tue, 11 Jul 2023 17:23:01 +0200 Subject: [PATCH 06/65] wip --- .../ChainSelector/ChainSelector.svelte | 59 ++++++++++--------- .../components/LoadingMask/LoadingMask.svelte | 3 +- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index 21ea89a5090..9997be72131 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -98,40 +98,41 @@
+ {#if switchingNetwork} + + {/if} +

{$t('chain_selector.placeholder')}

-
- {#if switchingNetwork} - - {/if} - -
+ + {/each} +
diff --git a/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte b/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte index c96951974ad..0839a5251e3 100644 --- a/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte +++ b/packages/bridge-ui-v2/src/components/LoadingMask/LoadingMask.svelte @@ -4,6 +4,7 @@ export let text: string = 'Loading'; export let textClass: string = ''; + export let spinnerClass: string = ''; let classes = classNames( 'gap-2 z-10', @@ -18,6 +19,6 @@
- + {text}
From 1ed70be6e13e7973218504724d8118c9f27ef4c8 Mon Sep 17 00:00:00 2001 From: Francisco Date: Tue, 11 Jul 2023 18:41:15 +0200 Subject: [PATCH 07/65] wip --- .../src/components/Bridge/Bridge.svelte | 1 - .../ChainSelector/ChainSelector.svelte | 6 +- .../ConnectButton/ConnectButton.svelte | 1 - .../src/components/Faucet/Faucet.svelte | 69 ++++++++++++------- .../components/LoadingMask/LoadingMask.svelte | 6 +- .../src/components/Modal/Modal.svelte | 2 +- .../NotificationToast.svelte | 12 ++-- packages/bridge-ui-v2/src/i18n/en.json | 8 +-- .../src/libs/token/checkMintable.ts | 2 +- packages/bridge-ui-v2/src/libs/token/index.ts | 2 + packages/bridge-ui-v2/src/libs/token/mint.ts | 10 +-- packages/bridge-ui-v2/src/stores/network.ts | 8 +-- 12 files changed, 67 insertions(+), 60 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index e8164553dca..5f707c337b9 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -1,5 +1,4 @@ diff --git a/packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte b/packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte index 6d93d55ae2c..5aaa3e5c8f4 100644 --- a/packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte +++ b/packages/bridge-ui-v2/src/components/NotificationToast/NotificationToast.svelte @@ -22,16 +22,16 @@ }); } - export function successToast(message: string) { - notify(message, 'success'); + export function successToast(message: string, closeManually = false) { + notify(message, 'success', closeManually); } - export function errorToast(message: string) { - notify(message, 'error', true); + export function errorToast(message: string, closeManually = true) { + notify(message, 'error', closeManually); } - export function warningToast(message: string) { - notify(message, 'warning'); + export function warningToast(message: string, closeManually = false) { + notify(message, 'warning', closeManually); } diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index 0266de7cb9c..9ac6ea9364a 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -59,20 +59,20 @@ "faucet": { "title": "Faucet", "subtitle": "Mint test tokens.", + "minting_tx": "Transaction sent to mint {token} tokens. Click here to see the progress.", "button": { "mint": "Mint", - "checking": "Checking mintability" + "checking": "Checking mintability", + "minting": "Minting" }, "wrong_chain": { "message": "It appears your are on the wrong network. Switch to {network} to mint tokens.", "button": "Switch to {network}" }, "warning": { - "no_token": "Please select a token to mint.", - "no_network": "Please switch to {network} to mint tokens.", "no_connected": "Please connect your wallet to mint tokens.", "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.", - "already_minted": "You have already minted this token." + "token_minted": "You have already minted this token." } }, diff --git a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts index 00cc4b7d986..d1bb15cb2f6 100644 --- a/packages/bridge-ui-v2/src/libs/token/checkMintable.ts +++ b/packages/bridge-ui-v2/src/libs/token/checkMintable.ts @@ -10,7 +10,7 @@ import { MintableError, type Token } from './types'; // 2. User has already minted this token // 3. User has insufficient balance to mint this token export async function checkMintable(token: Token, network: Chain) { - const chainId = network.id + const chainId = network.id; const walletClient = await getWalletClient({ chainId }); if (!walletClient) { diff --git a/packages/bridge-ui-v2/src/libs/token/index.ts b/packages/bridge-ui-v2/src/libs/token/index.ts index 1b22cc5bd3f..e2246d1f63d 100644 --- a/packages/bridge-ui-v2/src/libs/token/index.ts +++ b/packages/bridge-ui-v2/src/libs/token/index.ts @@ -1,2 +1,4 @@ +export { checkMintable } from './checkMintable'; +export { mint } from './mint'; export * from './tokens'; export * from './types'; diff --git a/packages/bridge-ui-v2/src/libs/token/mint.ts b/packages/bridge-ui-v2/src/libs/token/mint.ts index 6be270cec54..7bd03b1cf1b 100644 --- a/packages/bridge-ui-v2/src/libs/token/mint.ts +++ b/packages/bridge-ui-v2/src/libs/token/mint.ts @@ -21,15 +21,11 @@ export async function mint(token: Token, walletClient: WalletClient) { log(`Minting ${tokenSymbol} for account "${userAddress}"`); try { - // Check whether the user has already minted this token - const hasMinted = await tokenContract.read.minters([userAddress]); + const txHash = await tokenContract.write.mint([userAddress]); - if (hasMinted) { - throw Error(`user has already minted ${tokenSymbol}`); - } + log(`Minting transaction hash for ${tokenSymbol}: ${txHash}`); - const hash = await tokenContract.write.mint([userAddress]); - return hash; + return txHash; } catch (error) { console.error(error); diff --git a/packages/bridge-ui-v2/src/stores/network.ts b/packages/bridge-ui-v2/src/stores/network.ts index abb17d92ed8..a4e6a81ed62 100644 --- a/packages/bridge-ui-v2/src/stores/network.ts +++ b/packages/bridge-ui-v2/src/stores/network.ts @@ -1,12 +1,6 @@ -import { type GetNetworkResult, switchNetwork } from '@wagmi/core'; +import type { GetNetworkResult } from '@wagmi/core'; import { writable } from 'svelte/store'; export const srcChain = writable(); export const destChain = writable(); - -// Changing source chain from UI should trigger network switch -srcChain.subscribe((chain) => { - if (!chain) return; - switchNetwork({ chainId: chain.id }); -}); From 397a40b7e99a97a3274e378364b8dc75de10b1bb Mon Sep 17 00:00:00 2001 From: Francisco Date: Tue, 11 Jul 2023 19:37:33 +0200 Subject: [PATCH 08/65] Faucet --- packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte | 2 +- .../src/components/NotificationToast/ItemToast.svelte | 5 +++-- .../components/NotificationToast/NotificationToast.svelte | 4 ++-- packages/bridge-ui-v2/src/i18n/en.json | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index ac05ac16dee..e3a66f4cd1a 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -69,7 +69,7 @@ true, ); - // TODO: pending transaction? + // TODO: pending transaction logic } catch (error) { console.error(error); diff --git a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte index c1252a38b7a..3b2659a8efa 100644 --- a/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte +++ b/packages/bridge-ui-v2/src/components/NotificationToast/ItemToast.svelte @@ -59,9 +59,10 @@ - - -
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte index c0b8f9e5228..a49dfd57acd 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte @@ -15,7 +15,8 @@ export let closeMenu: () => void = noop; - + +
- - - diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte index 91d54885c51..7548ff10e51 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte @@ -26,6 +26,7 @@ } +
    {#each tokens as token (token.symbol)}
  • = null; @@ -16,17 +17,17 @@ let id = `menu-${uid()}`; let menuOpen = false; - // Default to true if globalThis or matchMedia are not available (SSR?). - // Desktop view looks also good in small screens. - let isDesktopOrLarger = globalThis?.matchMedia?.('(min-width: 768px)').matches ?? true; + // This will control which view to render depending on the screensize. + // Since markup will differ, and there is logic running when interacting + // with this component, it makes more sense to not render the view that's + // not being used, doing this with JS instead of CSS media queries + let isDesktopOrLarger: boolean; function closeMenu() { menuOpen = false; } - function openMenu(event: Event) { - // Prevents closing the menu immediately (button click bubbles up to the document) - event.stopPropagation(); + function openMenu() { menuOpen = true; } @@ -35,16 +36,11 @@ closeMenu(); } - onMount(() => { - document.addEventListener('click', closeMenu); - }); - - onDestroy(() => { - closeMenu(); - document.removeEventListener('click', closeMenu); - }); + onDestroy(closeMenu); + +
    - {#if isDesktopOrLarger} {:else} From c95e2b7672a6d02216c7549cc691e182f813c46d Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 12 Jul 2023 13:00:05 +0200 Subject: [PATCH 12/65] minor change --- .../src/components/ChainSelector/ChainSelector.svelte | 2 -- .../src/components/ProcessingFee/ProcessingFee.svelte | 2 +- .../bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index 95620a81ee5..ab2e071186c 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -136,7 +136,5 @@ {/each}
- -
diff --git a/packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte index ccac70a83a3..5aa18bef6cc 100644 --- a/packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/ProcessingFee/ProcessingFee.svelte @@ -101,7 +101,7 @@ -
+
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte index a49dfd57acd..ec090ed98be 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte @@ -17,7 +17,7 @@ -
+
From f9ad6571bd839062242cab1ebf954166d78590be Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 12 Jul 2023 13:26:01 +0200 Subject: [PATCH 13/65] minor change --- packages/bridge-ui-v2/src/components/Alert/Alert.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bridge-ui-v2/src/components/Alert/Alert.svelte b/packages/bridge-ui-v2/src/components/Alert/Alert.svelte index 56685c17bde..8dff979fdfa 100644 --- a/packages/bridge-ui-v2/src/components/Alert/Alert.svelte +++ b/packages/bridge-ui-v2/src/components/Alert/Alert.svelte @@ -37,7 +37,7 @@ }; const classes = classNames( - 'alert gap-[5px] py-[12px] px-[20px] rounded-[10px]', + 'alert flex gap-[5px] py-[12px] px-[20px] rounded-[10px]', type ? typeMap[type].class : null, forceColumnFlow ? 'grid-flow-col text-left' : null, $$props.class, From 2606310efc07760151b4ee9b533c5455b7ba2f37 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Wed, 12 Jul 2023 13:26:47 +0200 Subject: [PATCH 14/65] Update packages/bridge-ui-v2/src/i18n/en.json Co-authored-by: Korbinian --- packages/bridge-ui-v2/src/i18n/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index d9b4f628623..433598fd692 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -99,7 +99,7 @@ }, "network": { "switching": "Switching network", - "rejected": "Switch chain request rejected." + "rejected": "Request to switch chain rejected." } }, From c2e72836ce92c488beacaab1e7b1a13d76728b45 Mon Sep 17 00:00:00 2001 From: Francisco Date: Wed, 12 Jul 2023 13:30:42 +0200 Subject: [PATCH 15/65] fix eslint --- .../src/components/ConnectButton/ConnectButton.svelte | 2 +- packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte | 4 ---- .../src/components/TokenDropdown/TokenDropdown.svelte | 4 ++-- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte index 4e8d6ae46b5..6f19a536dba 100644 --- a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte +++ b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte @@ -4,9 +4,9 @@ import { t } from 'svelte-i18n'; import { Button } from '$components/Button'; + import { DesktopOrLarger } from '$components/DesktopOrLarger'; import { Icon } from '$components/Icon'; import { web3modal } from '$libs/connect'; - import { DesktopOrLarger } from '$components/DesktopOrLarger'; export let connected = false; diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index e3a66f4cd1a..3c5210c1c69 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -180,7 +180,3 @@ {/if}
- - diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte index 9f6cfe0b5b2..b0fa14f4777 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte @@ -1,7 +1,8 @@ @@ -135,15 +142,14 @@
- {#if !connected} - - {$t('messages.account.required')} - - {:else if wrongChain} + {#if alertMessage} - {$t('faucet.wrong_chain.message', { values: { network: PUBLIC_L1_CHAIN_NAME } })} + {alertMessage} + {/if} + {#if connected && wrongChain} + {:else} - {#if reasonNotMintable} - - {reasonNotMintable} - - {/if} - +
+
diff --git a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte similarity index 52% rename from packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte rename to packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte index 2aaf0434c75..2f4d4ff7e2b 100644 --- a/packages/bridge-ui-v2/src/components/AmountInput/AmountInput.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte @@ -2,17 +2,12 @@ import type { FetchBalanceResult, GetAccountResult, PublicClient } from '@wagmi/core'; import { t } from 'svelte-i18n'; - import { InputBox } from '$components/InputBox'; import LoadingText from '$components/LoadingText/LoadingText.svelte'; import { getBalance as getTokenBalance, type Token } from '$libs/token'; import { truncateString } from '$libs/util/truncateString'; - import { uid } from '$libs/util/uid'; import { account } from '$stores/account'; import { destChain, srcChain } from '$stores/network'; - - export let token: Token; - - let inputId = `input-${uid()}`; + import { selectedToken } from '../selectedToken'; let tokenBalance: Maybe; let computingTokenBalance = false; @@ -41,31 +36,17 @@ return `${truncateString(balance.formatted, 6)} ${balance.symbol}`; } - $: updateTokenBalance(token, $account, $srcChain?.id, $destChain?.id); + $: updateTokenBalance($selectedToken, $account, $srcChain?.id, $destChain?.id); -
-
- -
- {$t('amount_input.balance')}: - - {#if computingTokenBalance} - - - {:else} - {renderTokenBalance(tokenBalance)} - {/if} - -
-
-
- - -
+
+ {$t('amount_input.balance')}: + + {#if computingTokenBalance} + + + {:else} + {renderTokenBalance(tokenBalance)} + {/if} +
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts new file mode 100644 index 00000000000..ff5cf90c7ce --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/index.ts @@ -0,0 +1 @@ +export { default as AmountInput } from './AmountInput.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 0a42443ab82..3c622422d85 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -1,18 +1,18 @@ @@ -20,10 +20,10 @@
- +
- +
+ + diff --git a/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte b/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte new file mode 100644 index 00000000000..0c75a15c038 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte @@ -0,0 +1,14 @@ + diff --git a/packages/bridge-ui-v2/src/components/OnAccount/index.ts b/packages/bridge-ui-v2/src/components/OnAccount/index.ts new file mode 100644 index 00000000000..fe9d67c2464 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/OnAccount/index.ts @@ -0,0 +1 @@ +export { default as OnAccount } from './OnAccount.svelte'; diff --git a/packages/bridge-ui-v2/src/stores/account.ts b/packages/bridge-ui-v2/src/stores/account.ts index 3356bd0b84f..8294dddaecc 100644 --- a/packages/bridge-ui-v2/src/stores/account.ts +++ b/packages/bridge-ui-v2/src/stores/account.ts @@ -1,4 +1,6 @@ import type { GetAccountResult, PublicClient } from '@wagmi/core'; import { writable } from 'svelte/store'; -export const account = writable>(); +export type Account = GetAccountResult; + +export const account = writable(); From 8016a40882e17c0996d6351c3f883a9945513abd Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 14 Jul 2023 15:16:48 +0200 Subject: [PATCH 46/65] minor change in the LoadingText --- .../src/components/Bridge/AmountInput/Balance.svelte | 6 +++--- .../src/components/LoadingText/LoadingText.svelte | 12 ++++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte index 362d5fd5598..1112d99efd5 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte @@ -5,7 +5,7 @@ import LoadingText from '$components/LoadingText/LoadingText.svelte'; import { getBalance as getTokenBalance, type Token } from '$libs/token'; import { truncateString } from '$libs/util/truncateString'; - import { type Account,account } from '$stores/account'; + import { type Account, account } from '$stores/account'; import { destChain, srcChain } from '$stores/network'; import { selectedToken } from '../selectedToken'; @@ -39,8 +39,8 @@ {$t('amount_input.balance')}: {#if computingTokenBalance} - - + + {:else} {renderTokenBalance(tokenBalance)} {/if} diff --git a/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte b/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte index bb76215a77e..2fa60652e68 100644 --- a/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte +++ b/packages/bridge-ui-v2/src/components/LoadingText/LoadingText.svelte @@ -1,9 +1,17 @@ -{mask} +{mask} From 9d34a076f99d24ad0a5bed0e44d41b42a42da581 Mon Sep 17 00:00:00 2001 From: Francisco Date: Fri, 14 Jul 2023 15:52:44 +0200 Subject: [PATCH 47/65] recommended fee --- packages/bridge-ui-v2/src/app.config.ts | 5 +++ .../Bridge/AmountInput/Balance.svelte | 2 +- .../Bridge/ProcessingFee/ProcessingFee.svelte | 2 +- .../components/LoadingText/LoadingText.svelte | 3 +- .../src/components/OnAccount/OnAccount.svelte | 2 +- .../src/libs/fee/recommendProcessingFee.ts | 42 +++++++++++++++---- packages/bridge-ui-v2/tsconfig.json | 1 + 7 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 packages/bridge-ui-v2/src/app.config.ts diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts new file mode 100644 index 00000000000..86da2c4e849 --- /dev/null +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -0,0 +1,5 @@ +export const recommentProcessingFee = { + ethGasLimit: BigInt(900000), + erc20NotDeployedGasLimit: BigInt(3100000), + erc20DeployedGasLimit: BigInt(1100000), +}; diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte index 1112d99efd5..c408be1f0eb 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte @@ -1,5 +1,5 @@ - -
-
- -
- {$t('amount_input.balance')}: - - {#if computingTokenBalance} - - - {:else} - {renderTokenBalance(tokenBalance)} - {/if} - -
-
-
- - -
-
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte index 3e90ca3ab41..aea2c8491c7 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte @@ -6,7 +6,8 @@ import { getBalance as getTokenBalance, type Token } from '$libs/token'; import { truncateString } from '$libs/util/truncateString'; import { type Account, account } from '$stores/account'; - import { destChain, srcChain } from '$stores/network'; + import { network } from '$stores/network'; + import { destNetwork } from '../destNetwork'; import { selectedToken } from '../selectedToken'; @@ -35,7 +36,7 @@ return `${truncateString(balance.formatted, 6)} ${balance.symbol}`; } - $: updateTokenBalance($selectedToken, $account, $srcChain?.id, $destChain?.id); + $: updateTokenBalance($selectedToken, $account, $network?.id, $destNetwork?.id);
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 6e829cb647f..1d516a89bb8 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -9,12 +9,24 @@ import { TokenDropdown } from '$components/TokenDropdown'; import { ETHToken, tokens } from '$libs/token'; import type { Account } from '$stores/account'; - import { destChain, srcChain } from '$stores/network'; + import { network, type Network } from '$stores/network'; import { AmountInput } from './AmountInput'; import { ProcessingFee } from './ProcessingFee'; import { RecipientInput } from './RecipientInput'; import { selectedToken } from './selectedToken'; + import { destNetwork } from './destNetwork'; + import { OnNetwork } from '$components/OnNetwork'; + import { chains } from '$libs/chain'; + + function onNetworkChange(network: Network) { + if (network && chains.length === 2) { + // If there are only two chains, the destination chain will be the other one + const otherChain = chains.find((chain) => chain.id !== network.id); + + if (otherChain) destNetwork.set(otherChain); + } + } function onAccountChange(account: Account) { if (account && account?.isConnected && !$selectedToken) { @@ -27,7 +39,7 @@
- +
@@ -40,7 +52,7 @@
- +
@@ -55,4 +67,6 @@
+ + diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index d971a91737e..c1a437f6553 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -11,7 +11,8 @@ import { recommendProcessingFee } from '$libs/fee'; import type { Token } from '$libs/token'; import { uid } from '$libs/util/uid'; - import { destChain, srcChain } from '$stores/network'; + import { network } from '$stores/network'; + import { destNetwork } from '../destNetwork'; import { selectedToken } from '../selectedToken'; @@ -61,7 +62,7 @@ switch (method) { case ProcessingFeeMethod.RECOMMENDED: // TODO: should we cache it? keep in mind that this value could change - await calculateRecommendedAmount($selectedToken, $srcChain?.id, $destChain?.id); + await calculateRecommendedAmount($selectedToken, $network?.id, $destNetwork?.id); selectedAmount = amountToEther(recommendedAmount); break; case ProcessingFeeMethod.CUSTOM: @@ -91,7 +92,7 @@ modalOpen = true; } - $: calculateRecommendedAmount($selectedToken, $srcChain?.id, $destChain?.id); + $: calculateRecommendedAmount($selectedToken, $network?.id, $destNetwork?.id); // TODO: how about using a onClick handler instead of this watcher? $: onSelectedFeeMethodChanged(selectedFeeMethod); diff --git a/packages/bridge-ui-v2/src/components/Bridge/destNetwork.ts b/packages/bridge-ui-v2/src/components/Bridge/destNetwork.ts new file mode 100644 index 00000000000..fa872595a50 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/destNetwork.ts @@ -0,0 +1,4 @@ +import type { Chain } from '@wagmi/core'; +import { writable } from 'svelte/store'; + +export const destNetwork = writable(); diff --git a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte index 9e2807da5ea..c1348c80eb3 100644 --- a/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte +++ b/packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte @@ -14,7 +14,7 @@ import { MintableError, testERC20Tokens, type Token } from '$libs/token'; import { checkMintable, mint } from '$libs/token'; import { account } from '$stores/account'; - import { srcChain } from '$stores/network'; + import { network } from '$stores/network'; let minting = false; let checkingMintable = false; @@ -47,10 +47,10 @@ if (checkingMintable || minting) return; // A token and a source chain must be selected in order to be able to mint - if (!selectedToken || !$srcChain) return; + if (!selectedToken || !$network) return; // ... and of course, our wallet must be connected - const walletClient = await getWalletClient({ chainId: $srcChain.id }); + const walletClient = await getWalletClient({ chainId: $network.id }); if (!walletClient) return; // Let's begin the minting process @@ -131,16 +131,16 @@ } $: connected = isUserConnected($account); - $: wrongChain = isWrongChain($srcChain); + $: wrongChain = isWrongChain($network); $: alertMessage = getAlertMessage(connected, wrongChain, reasonNotMintable); - $: updateMintButtonState(selectedToken, $srcChain); + $: updateMintButtonState(selectedToken, $network);
- +
diff --git a/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte new file mode 100644 index 00000000000..cf2edc6f8e3 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte @@ -0,0 +1,14 @@ + diff --git a/packages/bridge-ui-v2/src/components/OnNetwork/index.ts b/packages/bridge-ui-v2/src/components/OnNetwork/index.ts new file mode 100644 index 00000000000..c47e6a5cdcb --- /dev/null +++ b/packages/bridge-ui-v2/src/components/OnNetwork/index.ts @@ -0,0 +1 @@ +export { default as OnNetwork } from './OnNetwork.svelte'; diff --git a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts index a52725551ae..c4d29fb461e 100644 --- a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts +++ b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts @@ -2,7 +2,7 @@ import { watchAccount, watchNetwork /*, watchPublicClient, watchWalletClient*/ } import { getLogger } from '$libs/util/logger'; import { account } from '$stores/account'; -import { srcChain } from '$stores/network'; +import { network } from '$stores/network'; const log = getLogger('wagmi:watcher'); @@ -19,7 +19,7 @@ export function startWatching() { // When we switch networks, we are actually selecting // the source chain. - srcChain.set(data.chain); + network.set(data.chain); }); // Action for subscribing to account changes. diff --git a/packages/bridge-ui-v2/src/stores/network.ts b/packages/bridge-ui-v2/src/stores/network.ts index 71858ebbdc0..03422c681b4 100644 --- a/packages/bridge-ui-v2/src/stores/network.ts +++ b/packages/bridge-ui-v2/src/stores/network.ts @@ -1,16 +1,6 @@ import type { GetNetworkResult } from '@wagmi/core'; import { writable } from 'svelte/store'; -import { chains } from '$libs/chain'; +export type Network = GetNetworkResult['chain']; -export const srcChain = writable(); - -export const destChain = writable(); - -srcChain.subscribe((newChain) => { - if (newChain && chains.length === 2) { - // If there are only two chains, the destination chain will be the other one - const otherChain = chains.find((chain) => chain.id !== newChain.id); - destChain.set(otherChain); - } -}); +export const network = writable(); From 1060636400f317df27cd57520e3acb61ea0bb681 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 10:21:24 +0200 Subject: [PATCH 54/65] fix lint --- .../src/components/Bridge/AmountInput/Balance.svelte | 2 +- packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte | 8 ++++---- .../components/Bridge/ProcessingFee/ProcessingFee.svelte | 2 +- .../src/components/OnNetwork/OnNetwork.svelte | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte index aea2c8491c7..56aa673b430 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte @@ -7,8 +7,8 @@ import { truncateString } from '$libs/util/truncateString'; import { type Account, account } from '$stores/account'; import { network } from '$stores/network'; - import { destNetwork } from '../destNetwork'; + import { destNetwork } from '../destNetwork'; import { selectedToken } from '../selectedToken'; let tokenBalance: Maybe; diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 1d516a89bb8..e4a3c41a73b 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -6,18 +6,18 @@ import { ChainSelector } from '$components/ChainSelector'; import { Icon } from '$components/Icon'; import { OnAccount } from '$components/OnAccount'; + import { OnNetwork } from '$components/OnNetwork'; import { TokenDropdown } from '$components/TokenDropdown'; + import { chains } from '$libs/chain'; import { ETHToken, tokens } from '$libs/token'; import type { Account } from '$stores/account'; - import { network, type Network } from '$stores/network'; + import { type Network,network } from '$stores/network'; import { AmountInput } from './AmountInput'; + import { destNetwork } from './destNetwork'; import { ProcessingFee } from './ProcessingFee'; import { RecipientInput } from './RecipientInput'; import { selectedToken } from './selectedToken'; - import { destNetwork } from './destNetwork'; - import { OnNetwork } from '$components/OnNetwork'; - import { chains } from '$libs/chain'; function onNetworkChange(network: Network) { if (network && chains.length === 2) { diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index c1a437f6553..a73709c9270 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -12,8 +12,8 @@ import type { Token } from '$libs/token'; import { uid } from '$libs/util/uid'; import { network } from '$stores/network'; - import { destNetwork } from '../destNetwork'; + import { destNetwork } from '../destNetwork'; import { selectedToken } from '../selectedToken'; let dialogId = `dialog-${uid()}`; diff --git a/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte index cf2edc6f8e3..5b7afffafcc 100644 --- a/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte +++ b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte @@ -1,7 +1,7 @@
@@ -113,7 +88,7 @@ {:else if errorCalculatingRecommendedAmount} {$t('processing_fee.recommended.error')} {:else} - {selectedAmount} ETH + {formatEther($processingFee ?? BigInt(0))} ETH {/if} @@ -139,7 +114,7 @@ {:else if errorCalculatingRecommendedAmount} {$t('processing_fee.recommended.error')} {:else} - {amountToEther(recommendedAmount)} ETH + {formatEther(recommendedAmount)} ETH {/if}
@@ -149,26 +124,30 @@ type="radio" value={ProcessingFeeMethod.RECOMMENDED} name="processingFeeMethod" - bind:group={selectedFeeMethod} /> + bind:group={selectedFeeMethod} + on:click={closeModal} /> -
  • -
    - - - {$t('processing_fee.none.text')} - +
  • +
    +
    + + + {$t('processing_fee.none.text')} + +
    +
    -
    • @@ -205,3 +184,8 @@
    + + diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte new file mode 100644 index 00000000000..87929d45ede --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte @@ -0,0 +1,31 @@ + diff --git a/packages/bridge-ui-v2/src/components/Bridge/destNetwork.ts b/packages/bridge-ui-v2/src/components/Bridge/destNetwork.ts deleted file mode 100644 index fa872595a50..00000000000 --- a/packages/bridge-ui-v2/src/components/Bridge/destNetwork.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { Chain } from '@wagmi/core'; -import { writable } from 'svelte/store'; - -export const destNetwork = writable(); diff --git a/packages/bridge-ui-v2/src/components/Bridge/selectedToken.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts similarity index 83% rename from packages/bridge-ui-v2/src/components/Bridge/selectedToken.ts rename to packages/bridge-ui-v2/src/components/Bridge/state.ts index 445a340f23b..05c31cec663 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/selectedToken.ts +++ b/packages/bridge-ui-v2/src/components/Bridge/state.ts @@ -1,3 +1,4 @@ +import type { Chain } from '@wagmi/core'; import { writable } from 'svelte/store'; import type { Token } from '$libs/token'; @@ -12,3 +13,5 @@ import type { Token } from '$libs/token'; // prevent other components outside the Bridge from accessing this store. export const selectedToken = writable(); +export const destNetwork = writable(); +export const processingFee = writable(); diff --git a/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte index 5b7afffafcc..817897b6ecd 100644 --- a/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte +++ b/packages/bridge-ui-v2/src/components/OnNetwork/OnNetwork.svelte @@ -1,7 +1,7 @@ diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index 4786db65908..df9a7fa5a35 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -13,6 +13,8 @@ import { processingFee } from '../state'; import RecommendedAmount from './RecommendedAmount.svelte'; + import { Alert } from '$components/Alert'; + import NoneOption from './NoneOption.svelte'; let dialogId = `dialog-${uid()}`; let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; @@ -21,6 +23,10 @@ let calculatingRecommendedAmount = false; let errorCalculatingRecommendedAmount = false; + let hasEnoughEth = false; + let calculatingEnoughEth = false; + let errorCalculatingEnoughEth = false; + let modalOpen = false; let customInput: InputBox; @@ -126,7 +132,7 @@ -
  • +
  • + + {#if !hasEnoughEth} + + {$t('processing_fee.none.warning')} + + {/if}
    • @@ -186,3 +199,8 @@ bind:value={recommendedAmount} bind:calculating={calculatingRecommendedAmount} bind:error={errorCalculatingRecommendedAmount} /> + + diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index 433598fd692..cc9e3ca9999 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -26,7 +26,8 @@ }, "none": { "label": "None", - "text": "Use ETH to manually claim your bridged token later" + "text": "Use ETH to manually claim your bridged token later", + "warning": "This option cannot be selected. You have not enough ETH to cover the gas fees for claiming." }, "custom": { "label": "Custom", diff --git a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts index f34aea860fe..8e0b0885858 100644 --- a/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts +++ b/packages/bridge-ui-v2/src/libs/fee/recommendProcessingFee.ts @@ -25,7 +25,7 @@ export async function recommendProcessingFee({ token, destChainId, srcChainId }: if (isERC20(token)) { if (!srcChainId) return BigInt(0); - const tokenAddress = await getAddress({ token, srcChainId, destChainId }); + const tokenAddress = await getAddress({ token, chainId: srcChainId, destChainId }); if (!tokenAddress || tokenAddress === zeroAddress) { // Gas limit for erc20 if not deployed on the destination chain diff --git a/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts b/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts index f448f0f4218..4f7d8c55eea 100644 --- a/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts +++ b/packages/bridge-ui-v2/src/libs/token/getAddress.test.ts @@ -30,24 +30,24 @@ describe('getAddress', () => { }); it('should return the address if ETH', async () => { - expect(await getAddress({ token: ETHToken, srcChainId: +PUBLIC_L1_CHAIN_ID })).toEqual(zeroAddress); + expect(await getAddress({ token: ETHToken, chainId: Number(PUBLIC_L1_CHAIN_ID) })).toEqual(zeroAddress); }); it('should return the address if ERC20 and has address on the source chain', async () => { - expect(await getAddress({ token: HORSEToken, srcChainId: +PUBLIC_L1_CHAIN_ID })).toEqual( + expect(await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L1_CHAIN_ID) })).toEqual( HORSEToken.addresses[PUBLIC_L1_CHAIN_ID], ); }); it('should return undefined if ERC20 and has no address on the source chain and no destination chain is is passed in', async () => { - expect(await getAddress({ token: HORSEToken, srcChainId: +PUBLIC_L2_CHAIN_ID })).toBeUndefined(); + expect(await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L2_CHAIN_ID) })).toBeUndefined(); }); it('should return the address of deployed ERC20 token', async () => { vi.mocked(mockTokenContract.read.canonicalToBridged).mockResolvedValue('0x456789'); expect( - await getAddress({ token: HORSEToken, srcChainId: +PUBLIC_L2_CHAIN_ID, destChainId: +PUBLIC_L1_CHAIN_ID }), + await getAddress({ token: HORSEToken, chainId: Number(PUBLIC_L2_CHAIN_ID), destChainId: +PUBLIC_L1_CHAIN_ID }), ).toEqual('0x456789'); expect(mockTokenContract.read.canonicalToBridged).toHaveBeenCalledWith([ BigInt(1), diff --git a/packages/bridge-ui-v2/src/libs/token/getAddress.ts b/packages/bridge-ui-v2/src/libs/token/getAddress.ts index c296988054b..2417d7184b6 100644 --- a/packages/bridge-ui-v2/src/libs/token/getAddress.ts +++ b/packages/bridge-ui-v2/src/libs/token/getAddress.ts @@ -10,17 +10,17 @@ import type { Token } from './types'; type GetAddressArgs = { token: Token; - srcChainId?: number; + chainId?: number; destChainId?: number; }; const log = getLogger('token:getAddress'); -export async function getAddress({ token, srcChainId, destChainId }: GetAddressArgs) { - if (!srcChainId) return; +export async function getAddress({ token, chainId, destChainId }: GetAddressArgs) { + if (!chainId) return; // Get the address for the token on the source chain - let address = token.addresses[srcChainId]; + let address = token.addresses[chainId]; // If the token isn't ETH and has no address... if (!isETH(token) && (!address || address === zeroAddress)) { @@ -37,7 +37,7 @@ export async function getAddress({ token, srcChainId, destChainId }: GetAddressA // cacnonicalToBridged mapping. const srcTokenVaultContract = getContract({ abi: tokenVaultABI, - address: chainContractsMap[srcChainId].tokenVaultAddress, + address: chainContractsMap[chainId].tokenVaultAddress, }); address = await srcTokenVaultContract.read.canonicalToBridged([BigInt(destChainId), destChainTokenAddress]); diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts index 04d8b6acf41..a6846bb2be6 100644 --- a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts +++ b/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts @@ -57,13 +57,13 @@ describe('getBalance', () => { const balance = await getBalance({ token: BLLToken, userAddress: mockWalletClient.account.address, - srcChainId: Number(PUBLIC_L1_CHAIN_ID), + chainId: Number(PUBLIC_L1_CHAIN_ID), }); expect(balance).toEqual(mockBalanceForBLL); expect(getAddress).toHaveBeenCalledWith({ token: BLLToken, - srcChainId: Number(PUBLIC_L1_CHAIN_ID), + chainId: Number(PUBLIC_L1_CHAIN_ID), destChainId: undefined, }); expect(fetchBalance).toHaveBeenCalledWith({ @@ -79,13 +79,13 @@ describe('getBalance', () => { const balance = await getBalance({ token: BLLToken, userAddress: mockWalletClient.account.address, - srcChainId: Number(PUBLIC_L1_CHAIN_ID), + chainId: Number(PUBLIC_L1_CHAIN_ID), }); expect(balance).toBeNull(); expect(getAddress).toHaveBeenCalledWith({ token: BLLToken, - srcChainId: Number(PUBLIC_L1_CHAIN_ID), + chainId: Number(PUBLIC_L1_CHAIN_ID), destChainId: undefined, }); expect(fetchBalance).not.toHaveBeenCalled(); diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts index efaff70ec8e..ebb974455e1 100644 --- a/packages/bridge-ui-v2/src/libs/token/getBalance.ts +++ b/packages/bridge-ui-v2/src/libs/token/getBalance.ts @@ -11,29 +11,29 @@ import type { Token } from './types'; type GetBalanceArgs = { token: Token; userAddress: Address; - srcChainId?: number; + chainId?: number; destChainId?: number; }; const log = getLogger('token:getBalance'); -export async function getBalance({ token, userAddress, srcChainId, destChainId }: GetBalanceArgs) { +export async function getBalance({ token, userAddress, chainId, destChainId }: GetBalanceArgs) { let tokenBalance: FetchBalanceResult | null = null; if (isETH(token)) { - tokenBalance = await fetchBalance({ address: userAddress }); + tokenBalance = await fetchBalance({ address: userAddress, chainId }); } else { // We are dealing with an ERC20 token. We need to first find out its address // on the current chain in order to fetch the balance. - const tokenAddress = await getAddress({ token, srcChainId, destChainId }); + const tokenAddress = await getAddress({ token, chainId, destChainId }); if (!tokenAddress || tokenAddress === zeroAddress) return null; // Wagmi is such an amazing library. We had to do this // more manually before. tokenBalance = await fetchBalance({ + chainId, address: userAddress, - chainId: srcChainId, token: tokenAddress, }); } diff --git a/packages/bridge-ui-v2/src/stores/index.ts b/packages/bridge-ui-v2/src/stores/index.ts new file mode 100644 index 00000000000..4b6b85801e8 --- /dev/null +++ b/packages/bridge-ui-v2/src/stores/index.ts @@ -0,0 +1,2 @@ +export { account } from './account'; +export { network } from './network'; diff --git a/packages/bridge-ui-v2/tsconfig.json b/packages/bridge-ui-v2/tsconfig.json index fc9b842fbf0..dbd0fda8269 100644 --- a/packages/bridge-ui-v2/tsconfig.json +++ b/packages/bridge-ui-v2/tsconfig.json @@ -15,6 +15,7 @@ "paths": { "$components/*": ["./src/components/*"], "$stores/*": ["./src/stores/*"], + "$stores": ["./src/stores/index.ts"], "$config": ["./src/app.config.ts"], "$libs/*": ["./src/libs/*"], "$abi": ["./src/abi/index.ts"] From c0c82691d584cc28783f310040fe3ce7cafebb66 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 14:36:25 +0200 Subject: [PATCH 58/65] fix lint --- .../src/components/Bridge/ProcessingFee/NoneOption.svelte | 5 +++-- .../src/components/Bridge/ProcessingFee/ProcessingFee.svelte | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte index 286435d2d2c..07a21903747 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte @@ -1,8 +1,9 @@ -
    +
    diff --git a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte index 5dfbbee2daa..18000188fa6 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/AmountInput/Balance.svelte @@ -14,7 +14,7 @@ let computingTokenBalance = false; let errorComputingTokenBalance = false; - async function updateTokenBalance(token?: Token, account?: Account, srcChainId?: number, destChainId?: number) { + async function updateTokenBalance(token: Maybe, account?: Account, srcChainId?: number, destChainId?: number) { if (!token || !account || !account.address) return; computingTokenBalance = true; diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 4f1bc9b0ae0..770e2c091a4 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -4,7 +4,6 @@ import { Button } from '$components/Button'; import { Card } from '$components/Card'; import { ChainSelector } from '$components/ChainSelector'; - import { Icon } from '$components/Icon'; import { OnAccount } from '$components/OnAccount'; import { OnNetwork } from '$components/OnNetwork'; import { TokenDropdown } from '$components/TokenDropdown'; @@ -17,6 +16,7 @@ import { ProcessingFee } from './ProcessingFee'; import { RecipientInput } from './RecipientInput'; import { destNetwork, selectedToken } from './state'; + import SwitchChainsButton from './SwitchChainsButton.svelte'; function onNetworkChange(network: Network) { if (network && chains.length === 2) { @@ -28,8 +28,11 @@ } function onAccountChange(account: Account) { - if (account && account?.isConnected && !$selectedToken) { + if (account && account.isConnected && !$selectedToken) { $selectedToken = ETHToken; + } else if (account && account.isDisconnected) { + $selectedToken = null; + $destNetwork = null; } } @@ -45,9 +48,7 @@
    - +
    diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte index 07a21903747..fb5dbd614f8 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte @@ -3,7 +3,7 @@ import { recommendProcessingFee } from '$libs/fee'; import { getBalance, type Token } from '$libs/token'; - import { account,network } from '$stores'; + import { account, network } from '$stores'; import { destNetwork, selectedToken } from '../state'; @@ -11,8 +11,8 @@ export let calculating = false; export let error = false; - async function compute(token: Token, userAddress?: Address, srcChainId?: number, destChainId?: number) { - if (!userAddress || !srcChainId || !destChainId) { + async function compute(token: Maybe, userAddress?: Address, srcChainId?: number, destChainId?: number) { + if (!token || !userAddress || !srcChainId || !destChainId) { enoughEth = false; return; } diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index 6c4fb8a06b3..adfb076e5e5 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -6,7 +6,7 @@ import { Alert } from '$components/Alert'; import { Icon } from '$components/Icon'; import { InputBox } from '$components/InputBox'; - import LoadingText from '$components/LoadingText/LoadingText.svelte'; + import { LoadingText } from '$components/LoadingText'; import { Tooltip } from '$components/Tooltip'; import { ProcessingFeeMethod } from '$libs/fee'; import { parseToWei } from '$libs/util/parseToWei'; diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte index 710b391bda2..2d2aed308a8 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte @@ -9,7 +9,9 @@ export let calculating = false; export let error = false; - async function compute(token: Token, srcChainId?: number, destChainId?: number) { + async function compute(token: Maybe, srcChainId?: number, destChainId?: number) { + if (!token) return; + calculating = true; error = false; diff --git a/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte new file mode 100644 index 00000000000..3197b75995b --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Bridge/SwitchChainsButton.svelte @@ -0,0 +1,20 @@ + + + diff --git a/packages/bridge-ui-v2/src/components/Bridge/state.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts index 05c31cec663..834e1045738 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/state.ts +++ b/packages/bridge-ui-v2/src/components/Bridge/state.ts @@ -12,6 +12,6 @@ import type { Token } from '$libs/token'; // but once again, we don't need such level of security that we have to // prevent other components outside the Bridge from accessing this store. -export const selectedToken = writable(); -export const destNetwork = writable(); +export const selectedToken = writable>(); +export const destNetwork = writable>(); export const processingFee = writable(); diff --git a/packages/bridge-ui-v2/src/components/LoadingText/index.ts b/packages/bridge-ui-v2/src/components/LoadingText/index.ts index e69de29bb2d..454dbe17cf7 100644 --- a/packages/bridge-ui-v2/src/components/LoadingText/index.ts +++ b/packages/bridge-ui-v2/src/components/LoadingText/index.ts @@ -0,0 +1 @@ +export { default as LoadingText } from './LoadingText.svelte'; diff --git a/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte b/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte index bceea715e83..08fdbd6d340 100644 --- a/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte +++ b/packages/bridge-ui-v2/src/components/OnAccount/OnAccount.svelte @@ -3,9 +3,9 @@ import { type Account, account } from '$stores/account'; - export let change: (newAccount: Account, oldAccount: Account) => void = noop; + export let change: (newAccount: Account, oldAccount?: Account) => void = noop; - let prevAccount = $account; + let prevAccount: Account; account.subscribe((newAccount) => { change(newAccount, prevAccount); From 629e0930fb1a3cfbd0d124310339a3ef7a1e8572 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 15:29:15 +0200 Subject: [PATCH 60/65] delay option click --- packages/bridge-ui-v2/src/app.config.ts | 4 ++++ .../Bridge/ProcessingFee/ProcessingFee.svelte | 24 ++++++++++++++----- .../ProcessingFee/RecommendedAmount.svelte | 4 ++-- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 86da2c4e849..8c422505778 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -3,3 +3,7 @@ export const recommentProcessingFee = { erc20NotDeployedGasLimit: BigInt(3100000), erc20DeployedGasLimit: BigInt(1100000), }; + +export const processingFeeComponent = { + delayOptionClick: 300, +} diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index adfb076e5e5..ef3cb6de15e 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -15,6 +15,7 @@ import { processingFee } from '../state'; import NoneOption from './NoneOption.svelte'; import RecommendedAmount from './RecommendedAmount.svelte'; + import { processingFeeComponent } from '$config'; let dialogId = `dialog-${uid()}`; let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; @@ -38,6 +39,10 @@ modalOpen = true; } + function closeOnOptionClick() { + setTimeout(closeModal, processingFeeComponent.delayOptionClick); + } + function focusCustomInput() { customInput?.focus(); } @@ -49,7 +54,7 @@ $processingFee = parseToWei(input.value); } - async function onSelectedFeeMethodChanged(method: ProcessingFeeMethod, recommendedAmount: bigint) { + async function updateProcessingFee(method: ProcessingFeeMethod, recommendedAmount: bigint) { // customInput?.clear(); switch (method) { @@ -72,8 +77,15 @@ } } - // TODO: how about using a onClick handler instead of this watcher? - $: onSelectedFeeMethodChanged(selectedFeeMethod, recommendedAmount); + function unselectNoneIfNotEnoughETH(enoughEth: boolean, method: ProcessingFeeMethod) { + if (enoughEth && method !== ProcessingFeeMethod.NONE) return; + + selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + } + + $: updateProcessingFee(selectedFeeMethod, recommendedAmount); + + // $: unselectNoneIfNotEnoughETH(hasEnoughEth, selectedFeeMethod);
    @@ -128,7 +140,7 @@ value={ProcessingFeeMethod.RECOMMENDED} name="processingFeeMethod" bind:group={selectedFeeMethod} - on:click={closeModal} /> + on:click={closeOnOptionClick} /> @@ -150,7 +162,7 @@ value={ProcessingFeeMethod.NONE} name="processingFeeMethod" bind:group={selectedFeeMethod} - on:click={closeModal} /> + on:click={closeOnOptionClick} />
    {#if !hasEnoughEth} @@ -196,7 +208,7 @@
    diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte index 2d2aed308a8..b26b9e822e3 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedAmount.svelte @@ -5,7 +5,7 @@ import { destNetwork, selectedToken } from '../state'; - export let value: bigint; + export let amount: bigint; export let calculating = false; export let error = false; @@ -16,7 +16,7 @@ error = false; try { - value = await recommendProcessingFee({ + amount = await recommendProcessingFee({ token, destChainId, srcChainId, From a7789c8b63ac65f1d82bca3b3dafe7e9a62f939a Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 15:34:50 +0200 Subject: [PATCH 61/65] better ux --- packages/bridge-ui-v2/src/app.config.ts | 2 +- .../Bridge/ProcessingFee/ProcessingFee.svelte | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 8c422505778..c735b653e90 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -5,5 +5,5 @@ export const recommentProcessingFee = { }; export const processingFeeComponent = { - delayOptionClick: 300, + closingDelayOptionClick: 300, } diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index ef3cb6de15e..f1e28e09b69 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -40,7 +40,9 @@ } function closeOnOptionClick() { - setTimeout(closeModal, processingFeeComponent.delayOptionClick); + // By adding delay there is enough time to see the selected option + // before closing the modal. Better experience for the user. + setTimeout(closeModal, processingFeeComponent.closingDelayOptionClick); } function focusCustomInput() { @@ -77,15 +79,15 @@ } } - function unselectNoneIfNotEnoughETH(enoughEth: boolean, method: ProcessingFeeMethod) { - if (enoughEth && method !== ProcessingFeeMethod.NONE) return; - - selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + function unselectNoneIfNotEnoughETH(method: ProcessingFeeMethod, enoughEth: boolean) { + if (method === ProcessingFeeMethod.NONE && !enoughEth) { + selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + } } $: updateProcessingFee(selectedFeeMethod, recommendedAmount); - // $: unselectNoneIfNotEnoughETH(hasEnoughEth, selectedFeeMethod); + $: unselectNoneIfNotEnoughETH(selectedFeeMethod, hasEnoughEth);
    From c34d82a5b1ae8966d4d03f2acc9788d5fa178ee7 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 15:35:42 +0200 Subject: [PATCH 62/65] fix lint --- packages/bridge-ui-v2/src/app.config.ts | 2 +- .../src/components/Bridge/ProcessingFee/ProcessingFee.svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index c735b653e90..6f02e414722 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -6,4 +6,4 @@ export const recommentProcessingFee = { export const processingFeeComponent = { closingDelayOptionClick: 300, -} +}; diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index f1e28e09b69..17eb00f3046 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -8,6 +8,7 @@ import { InputBox } from '$components/InputBox'; import { LoadingText } from '$components/LoadingText'; import { Tooltip } from '$components/Tooltip'; + import { processingFeeComponent } from '$config'; import { ProcessingFeeMethod } from '$libs/fee'; import { parseToWei } from '$libs/util/parseToWei'; import { uid } from '$libs/util/uid'; @@ -15,7 +16,6 @@ import { processingFee } from '../state'; import NoneOption from './NoneOption.svelte'; import RecommendedAmount from './RecommendedAmount.svelte'; - import { processingFeeComponent } from '$config'; let dialogId = `dialog-${uid()}`; let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; From a91d7374d80955f67d624559a9e44dc4ef84d849 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 16:23:51 +0200 Subject: [PATCH 63/65] ProcessingFee component finished --- packages/bridge-ui-v2/src/app.config.ts | 1 + .../Bridge/ProcessingFee/ProcessingFee.svelte | 24 +++++++++++++------ ...dedAmount.svelte => RecommendedFee.svelte} | 14 +++++++++++ 3 files changed, 32 insertions(+), 7 deletions(-) rename packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/{RecommendedAmount.svelte => RecommendedFee.svelte} (66%) diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts index 6f02e414722..5584560c844 100644 --- a/packages/bridge-ui-v2/src/app.config.ts +++ b/packages/bridge-ui-v2/src/app.config.ts @@ -6,4 +6,5 @@ export const recommentProcessingFee = { export const processingFeeComponent = { closingDelayOptionClick: 300, + intervalComputeRecommendedFee: 20000, }; diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte index 17eb00f3046..f916a3d1d88 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -15,7 +15,7 @@ import { processingFee } from '../state'; import NoneOption from './NoneOption.svelte'; - import RecommendedAmount from './RecommendedAmount.svelte'; + import RecommendedFee from './RecommendedFee.svelte'; let dialogId = `dialog-${uid()}`; let selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; @@ -32,6 +32,12 @@ let customInput: InputBox; function closeModal() { + // Let's check if we are closing with CUSTOM method selected and zero amount entered + if (selectedFeeMethod === ProcessingFeeMethod.CUSTOM && $processingFee === BigInt(0)) { + // If so, let's switch to RECOMMENDED method + selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + } + modalOpen = false; } @@ -57,11 +63,10 @@ } async function updateProcessingFee(method: ProcessingFeeMethod, recommendedAmount: bigint) { - // customInput?.clear(); - switch (method) { case ProcessingFeeMethod.RECOMMENDED: $processingFee = recommendedAmount; + customInput?.clear(); break; case ProcessingFeeMethod.CUSTOM: @@ -74,6 +79,7 @@ break; case ProcessingFeeMethod.NONE: $processingFee = BigInt(0); + customInput?.clear(); break; } @@ -82,6 +88,13 @@ function unselectNoneIfNotEnoughETH(method: ProcessingFeeMethod, enoughEth: boolean) { if (method === ProcessingFeeMethod.NONE && !enoughEth) { selectedFeeMethod = ProcessingFeeMethod.RECOMMENDED; + + // We need to manually trigger this update because we are already in an update + // cicle, meaning the change above will not start a new one. This is how Svelte + // works, batching all the changes and kicking off an update cicle. This could + // also prevent infinite loops. It's safe though to call this function because + // we're not change state that could potentially end up in an such situation. + updateProcessingFee(selectedFeeMethod, recommendedAmount); } } @@ -209,10 +222,7 @@
    - + ; + async function compute(token: Maybe, srcChainId?: number, destChainId?: number) { if (!token) return; @@ -30,4 +34,14 @@ } $: compute($selectedToken, $network?.id, $destNetwork?.id); + + onMount(() => { + interval = setInterval(() => { + compute($selectedToken, $network?.id, $destNetwork?.id); + }, processingFeeComponent.intervalComputeRecommendedFee); + }); + + onDestroy(() => { + clearInterval(interval); + }); From 6a32a55dda1aff110a81aa19b536d28d67d23686 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 17 Jul 2023 16:27:25 +0200 Subject: [PATCH 64/65] minor change --- .../components/Bridge/ProcessingFee/RecommendedFee.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte index 8ac5be295af..4e63211415a 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/RecommendedFee.svelte @@ -1,11 +1,12 @@