From 064d321e8eb1d4babb1e71d1ef84d11aedc149ec Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 13:29:45 +0200 Subject: [PATCH 1/8] feat(bridge-ui-v2): insufficient funds modal (#14759) --- .../Transactions/MobileDetailsDialog.svelte | 11 +++- .../src/components/Transactions/Status.svelte | 25 +++++---- .../Transactions/StatusInfoDialog.svelte | 4 +- .../Transactions/Transaction.svelte | 51 +++++++++++++++---- .../Transactions/Transactions.svelte | 18 +------ packages/bridge-ui-v2/src/i18n/en.json | 6 +-- 6 files changed, 68 insertions(+), 47 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte index b83f002d4ac..7d6642abe46 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte +++ b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte @@ -1,4 +1,5 @@ @@ -66,7 +73,7 @@
- +
  • diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte index 8b5e370c9c7..5b1425ad826 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte +++ b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte @@ -1,6 +1,6 @@ @@ -65,7 +87,11 @@ {/if}
    - + +
    + + + + + diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte index 6f91ca3a9fb..b3b121a508b 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte +++ b/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte @@ -15,7 +15,6 @@ import { account, network } from '$stores'; import type { Account } from '$stores/account'; - import MobileDetailsDialog from './MobileDetailsDialog.svelte'; import StatusInfoDialog from './StatusInfoDialog.svelte'; import Transaction from './Transaction.svelte'; @@ -31,11 +30,8 @@ let loadingTxs = false; - let detailsOpen = false; let isDesktopOrLarger: boolean; - let selectedItem: BridgeTransaction | null = null; - const handlePageChange = (detail: number) => { isBlurred = true; setTimeout(() => { @@ -67,16 +63,6 @@ } }; - const closeDetails = () => { - detailsOpen = false; - selectedItem = null; - }; - - const openDetails = (tx: BridgeTransaction) => { - detailsOpen = true; - selectedItem = tx; - }; - const updateTransactions = async (address: Address) => { const { mergedTransactions, outdatedLocalTransactions, error } = await fetchTransactions(address); transactions = mergedTransactions; @@ -136,7 +122,7 @@ class="flex flex-col items-center" style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}> {#each transactionsToShow as item (item.hash)} - openDetails(item)} /> +
    {/each}
    @@ -156,8 +142,6 @@ - - diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json index a5943f0201f..0c569706904 100644 --- a/packages/bridge-ui-v2/src/i18n/en.json +++ b/packages/bridge-ui-v2/src/i18n/en.json @@ -102,9 +102,9 @@ "release": "Release" }, "status": { - "initiated": { - "name": "Initiated", - "description": "Transaction initiated" + "processing": { + "name": "Processing", + "description": "Transaction is processing. Depending on the pending blocks to be verified this can take up to several minutes." }, "pending": { "name": "Pending", From 39266e8831d7daa21fe64af75761820dad49c2af Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 11:29:27 +0200 Subject: [PATCH 2/8] chore(bridge-ui-v2): re-enable pre-commit hooks for bridge (#14756) --- lefthook.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lefthook.yml b/lefthook.yml index 990f1f61e4b..ad20da55ce9 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -5,9 +5,9 @@ pre-commit: # bridge-ui: # glob: "packages/bridge-ui/**.{js,svelte,ts}" # run: pnpm -F bridge-ui lint:fix && git add {staged_files} - # bridge-ui-v2: - # glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}" - # run: pnpm -F bridge-ui-v2 svelte:check && pnpm -F bridge-ui-v2 lint:fix && git add {staged_files} + bridge-ui-v2: + glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}" + run: pnpm -F bridge-ui-v2 svelte:check && pnpm -F bridge-ui-v2 lint:fix && git add {staged_files} protocol_sol: glob: "packages/protocol/**.{sol}" run: pnpm -F protocol lint:sol && git add {staged_files} From c294251aaf743b19ed2f0c4f8f3a1aa1273fe3fe Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 11:28:57 +0200 Subject: [PATCH 3/8] fix(bridge-ui-v2): validate amount only if component is mounted (#14757) --- packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte index 0d6defc8ac2..a74cfea3f57 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte @@ -296,6 +296,9 @@ } } } + $: if ($selectedToken && amountComponent) { + amountComponent.validateAmount(); + } From 45a8b0ac42d7218c6c1cfd0253b5126de6f50f56 Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 14:53:15 +0200 Subject: [PATCH 4/8] fix(bridge-ui-v2): check destination funds for ETH (#14762) --- .../components/Bridge/ProcessingFee/NoneOption.svelte | 10 +++++----- .../bridge-ui-v2/src/libs/token/getBalance.test.ts | 5 ++++- packages/bridge-ui-v2/src/libs/token/getBalance.ts | 2 +- 3 files changed, 10 insertions(+), 7 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 603c6aaf41c..6cf2d4da7ec 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte @@ -11,8 +11,8 @@ export let calculating = false; export let error = false; - async function compute(token: Maybe, userAddress?: Address, srcChainId?: number, destChainId?: number) { - if (!token || !userAddress || !srcChainId || !destChainId) { + async function compute(token: Maybe, userAddress?: Address, srcChain?: number, destChain?: number) { + if (!token || !userAddress || !srcChain || !destChain) { enoughEth = false; return; } @@ -25,14 +25,14 @@ // Get the balance of the user on the destination chain destBalance = await getBalance({ userAddress, - srcChainId: destChainId, + srcChainId: destChain, }); // Calculate the recommended amount of ETH needed for processMessage call const recommendedAmount = await recommendProcessingFee({ token, - destChainId, - srcChainId, + destChainId: destChain, + srcChainId: srcChain, }); // Does the user have enough ETH to claim manually on the destination chain? 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 6a17133be05..e0873f2336c 100644 --- a/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts +++ b/packages/bridge-ui-v2/src/libs/token/getBalance.test.ts @@ -64,7 +64,10 @@ describe('getBalance', () => { expect(balance).toEqual(mockBalanceForETH); expect(getAddress).not.toHaveBeenCalled(); - expect(fetchBalance).toHaveBeenCalledWith({ address: mockWalletClient.account.address }); + expect(fetchBalance).toHaveBeenCalledWith({ + address: mockWalletClient.account.address, + chainId: Number(PUBLIC_L1_CHAIN_ID), + }); }); it('should return the balance of ERC20 token', async () => { diff --git a/packages/bridge-ui-v2/src/libs/token/getBalance.ts b/packages/bridge-ui-v2/src/libs/token/getBalance.ts index a4710f8c79f..feeb240b3b3 100644 --- a/packages/bridge-ui-v2/src/libs/token/getBalance.ts +++ b/packages/bridge-ui-v2/src/libs/token/getBalance.ts @@ -20,7 +20,7 @@ export async function getBalance({ userAddress, token, srcChainId, destChainId } if (!token || token.type === TokenType.ETH) { // If no token is passed in, we assume is ETH - tokenBalance = await fetchBalance({ address: userAddress }); + tokenBalance = await fetchBalance({ address: userAddress, chainId: srcChainId }); } else { // We need at least the source chain to find the address if (!srcChainId) return; From 5f20399ea7b0bc06b723861e48e10dd1d390e429 Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 11:16:06 +0200 Subject: [PATCH 5/8] fix(bridge-ui-v2): missing TTKO icon (#14754) --- .../src/components/Icon/TTKO.svelte | 21 +++++++++++++++++++ .../bridge-ui-v2/src/components/Icon/index.ts | 1 + .../TokenDropdown/DialogView.svelte | 12 ++++++++--- .../TokenDropdown/DropdownView.svelte | 3 ++- .../TokenDropdown/TokenDropdown.svelte | 3 ++- .../TokenDropdown/symbolToIconMap.ts | 19 +++++++++++++++-- 6 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Icon/TTKO.svelte diff --git a/packages/bridge-ui-v2/src/components/Icon/TTKO.svelte b/packages/bridge-ui-v2/src/components/Icon/TTKO.svelte new file mode 100644 index 00000000000..19867f9c771 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Icon/TTKO.svelte @@ -0,0 +1,21 @@ + + + + + + + diff --git a/packages/bridge-ui-v2/src/components/Icon/index.ts b/packages/bridge-ui-v2/src/components/Icon/index.ts index 8916c451589..06a1af8f9b9 100644 --- a/packages/bridge-ui-v2/src/components/Icon/index.ts +++ b/packages/bridge-ui-v2/src/components/Icon/index.ts @@ -2,3 +2,4 @@ export { default as BllIcon } from './BLL.svelte'; export { default as EthIcon } from './ETH.svelte'; export { default as HorseIcon } from './HORSE.svelte'; export { default as Icon, type IconType } from './Icon.svelte'; +export { default as TTKOIcon } from './TTKO.svelte'; diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte index 24556803cb2..de82f7765ca 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte @@ -77,9 +77,15 @@ class:bg-tertiary-interactive-accent={selected} on:click={() => selectToken(token)}>
    - - - + {#if symbolToIconMap[token.symbol] && !token.imported} + + + + {:else} + + + + {/if} {token.symbol}
    • diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte index f6d4f3d409d..993c0740edb 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DropdownView.svelte @@ -69,7 +69,8 @@ on:click={() => selectToken(t)} on:keydown={getTokenKeydownHandler(t)}>
    - {#if symbolToIconMap[t.symbol]} + + {#if symbolToIconMap[t.symbol] && !t.imported} diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte index 8f66fc22534..afd9269088d 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte @@ -132,7 +132,8 @@ {/if} {#if value}
    - {#if symbolToIconMap[value.symbol]} + + {#if symbolToIconMap[value.symbol] && !value.imported} diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/symbolToIconMap.ts b/packages/bridge-ui-v2/src/components/TokenDropdown/symbolToIconMap.ts index 0e580602bf8..f65cc874706 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/symbolToIconMap.ts +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/symbolToIconMap.ts @@ -1,9 +1,24 @@ import type { ComponentType } from 'svelte'; -import { BllIcon, EthIcon, HorseIcon } from '$components/Icon'; +import { BllIcon, EthIcon, HorseIcon, TTKOIcon } from '$components/Icon'; -export const symbolToIconMap: Record = { +export const baseSymbolToIconMap: Record = { ETH: EthIcon, BLL: BllIcon, HORSE: HorseIcon, }; + +/** + * The TTKO symbol changes depending on the layer or testnet, we intercept it + * As we will only match configured tokens we don't need to worry + * about other tokens that might start with TTKO + * TODO: Remove once we are on mainnet? + */ +export const symbolToIconMap = new Proxy(baseSymbolToIconMap, { + get(target, prop: string) { + if (prop.startsWith('TTKO')) { + return TTKOIcon; + } + return target[prop] || null; + }, +}); From c0e40a74c69a2a4003fa67a062a4ae7b507480cd Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 10:41:59 +0200 Subject: [PATCH 6/8] fix(bridge-ui-v2): validation of token balance (#14755) --- packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts index cb23d6254bd..c9906f7ef37 100644 --- a/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts +++ b/packages/bridge-ui-v2/src/libs/bridge/checkBalanceToBridge.ts @@ -78,7 +78,7 @@ export async function checkBalanceToBridge({ chainId: srcChainId, }); - if (!tokenAddress || tokenAddress === zeroAddress || balance === BigInt(0) || tokenBalance.value <= amount) + if (!tokenAddress || tokenAddress === zeroAddress || balance === BigInt(0) || tokenBalance.value < amount) throw new InsufficientBalanceError('you do not have enough balance to bridge'); const bridge = bridges[token.type]; From b2c3d5273882684ba701ac0d2e844c0639d039e1 Mon Sep 17 00:00:00 2001 From: Korbinian Date: Wed, 20 Sep 2023 04:47:36 +0200 Subject: [PATCH 7/8] fix(bridge-ui-v2): approve button not updating (#14746) --- packages/bridge-ui-v2/src/components/Bridge/Amount.svelte | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte index bd3de02b4b0..b885d627df9 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Amount.svelte @@ -57,8 +57,7 @@ !$destNetwork || !$tokenBalance || !$selectedToken || - $enteredAmount === BigInt(0) || // no need to check if the amount is 0 - $tokenBalance.symbol !== $selectedToken.symbol + $enteredAmount === BigInt(0) // no need to check if the amount is 0 ) return; From 4c6652e76199f20ed956d9cf4cbe81c738d6c120 Mon Sep 17 00:00:00 2001 From: xiaodino Date: Thu, 21 Sep 2023 01:02:55 -0700 Subject: [PATCH 8/8] fix(bridge-ui-v2): Add z-index for close button on mobile (#14769) --- .../src/components/Bridge/ProcessingFee/ProcessingFee.svelte | 2 +- packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte | 2 +- .../src/components/ChainSelector/ChainSelector.svelte | 2 +- .../src/components/TokenDropdown/AddCustomERC20.svelte | 2 +- .../bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte | 2 +- .../src/components/Transactions/InsufficientFunds.svelte | 2 +- .../src/components/Transactions/MobileDetailsDialog.svelte | 2 +- .../src/components/Transactions/StatusInfoDialog.svelte | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) 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 2a8b6c76dfe..14dbdf5a3ab 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/ProcessingFee.svelte @@ -157,7 +157,7 @@
    - diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte index 5e3b92e02fc..f406f92e1bf 100644 --- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte +++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte @@ -109,7 +109,7 @@
    - diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte index cfaf50a8362..8b8c8aefbc6 100644 --- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte +++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte @@ -148,7 +148,7 @@ {/if} -
    diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte index e00c3f50258..7ff29467023 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/AddCustomERC20.svelte @@ -162,7 +162,7 @@
    - diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte index de82f7765ca..dce02a75c0a 100644 --- a/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte +++ b/packages/bridge-ui-v2/src/components/TokenDropdown/DialogView.svelte @@ -58,7 +58,7 @@
    - diff --git a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte index f19a30ba294..80b7f11bdf1 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte +++ b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte @@ -44,7 +44,7 @@
    -
    diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte index 7d6642abe46..e04107fed29 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte +++ b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte @@ -41,7 +41,7 @@
    - diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte index 1c4d3ef25a4..c00ed9172d2 100644 --- a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte +++ b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte @@ -51,7 +51,7 @@ class="modal-box bg-neutral-background text-primary-content text-center max-w-[565px]">
    -