From 25b29026bb47e58d2eff63070437320696461eaf Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 10 Jul 2023 12:29:02 +0200 Subject: [PATCH 01/32] 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/32] 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/32] 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/32] 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/32] 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/32] 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/32] 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/32] 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/32] 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/32] 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/32] 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} -