From a5915571663a825117985f7667d4ee8e653d378e Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Tue, 27 Dec 2022 13:18:11 +0530 Subject: [PATCH 01/10] feat(bridge): add invalid chain balance section in dropdown --- packages/bridge-ui/src/components/AddressDropdown.svelte | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte index 3efc80d23fa..81e2ef37a21 100644 --- a/packages/bridge-ui/src/components/AddressDropdown.svelte +++ b/packages/bridge-ui/src/components/AddressDropdown.svelte @@ -86,11 +86,11 @@ {/if} - +
    {#if $fromChain && $signer} @@ -100,6 +100,10 @@ ? `${truncateString(tokenBalance)}...` : tokenBalance} ETH
    + {:else} +
    + -- ETH +
    {/if}
    From 7455a904f516fdca896885329dd8039089692f52 Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Tue, 27 Dec 2022 13:18:39 +0530 Subject: [PATCH 02/10] feat(bridge): add invalid chain icon and fix mobile view --- packages/bridge-ui/src/components/ChainDropdown.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte index 93ddf19bb9c..5b5a5ff4054 100644 --- a/packages/bridge-ui/src/components/ChainDropdown.svelte +++ b/packages/bridge-ui/src/components/ChainDropdown.svelte @@ -6,7 +6,7 @@ import { ethers } from "ethers"; import { signer } from "../store/signer"; import { switchNetwork } from "@wagmi/core"; - import { ChevronDown } from "svelte-heros-v2"; + import { ChevronDown, ExclamationTriangle } from "svelte-heros-v2"; const changeChain = async (chain: Chain) => { await switchNetwork({ chainId: chain.id, @@ -31,10 +31,13 @@ {:else} - + + {/if} - +
      Date: Tue, 27 Dec 2022 13:19:01 +0530 Subject: [PATCH 03/10] fix(bridge): open faucet in new tab --- packages/bridge-ui/src/components/HeaderAnnouncement.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bridge-ui/src/components/HeaderAnnouncement.svelte b/packages/bridge-ui/src/components/HeaderAnnouncement.svelte index 7d33b683214..0262e3ec638 100644 --- a/packages/bridge-ui/src/components/HeaderAnnouncement.svelte +++ b/packages/bridge-ui/src/components/HeaderAnnouncement.svelte @@ -5,6 +5,7 @@ Receive some tokens for bridging with our faucet. From 63103109b7459033fc5ac80caac452a80dafff37 Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Tue, 27 Dec 2022 13:19:26 +0530 Subject: [PATCH 04/10] fix(bridge): metamask icon --- .../src/components/buttons/SelectToken.svelte | 2 +- .../src/components/icons/MetaMask.svelte | 204 ++++-------------- 2 files changed, 42 insertions(+), 164 deletions(-) diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte index c4aa14c7620..7d26db4231e 100644 --- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte +++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte @@ -26,7 +26,7 @@ >

      {$token.symbol.toUpperCase()}

      - +
        - + - + - - - - - - - + + + + + + + - - + + - - + + - - - - + + + + - - - - + + + + - - - - + + + + - - + + - - - - + + + + \ No newline at end of file From d3ecae0429ef77223f752c0bcb77bd968485e079 Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Tue, 27 Dec 2022 13:24:48 +0530 Subject: [PATCH 05/10] fix(bridge): transaction list mobile view --- packages/bridge-ui/src/components/Transaction.svelte | 2 +- packages/bridge-ui/src/components/Transactions.svelte | 4 ++-- packages/bridge-ui/src/pages/home/Home.svelte | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index fe82e40f19a..69f1fa91c03 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -131,7 +131,7 @@ {transaction.message?.data !== "0x" ? transaction.symbol : "ETH"} - + {#if !processable} Pending {:else if !transaction.receipt && transaction.status === MessageStatus.New} diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte index 39bf18b3a04..2229212404d 100644 --- a/packages/bridge-ui/src/components/Transactions.svelte +++ b/packages/bridge-ui/src/components/Transactions.svelte @@ -5,7 +5,7 @@ import TransactionDetail from './TransactionDetail.svelte'; -
        +
        {#if $transactions.length} @@ -17,7 +17,7 @@ - + {#each $transactions as transaction}
        -
        +
        Date: Tue, 27 Dec 2022 13:32:44 +0530 Subject: [PATCH 06/10] fix(bridge): transaction detail mobile view --- packages/bridge-ui/src/components/TransactionDetail.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/TransactionDetail.svelte index 3e9d064a1f3..105812a30d8 100644 --- a/packages/bridge-ui/src/components/TransactionDetail.svelte +++ b/packages/bridge-ui/src/components/TransactionDetail.svelte @@ -8,7 +8,7 @@ export let transaction; $showTransactionDetails = null} isOpen={!!transaction} title="Transaction Detail"> -
        Details
        +
        - From 40fb55a42dc2031cfe077e5f0d21bf9585c15365 Mon Sep 17 00:00:00 2001 From: Shadab Khan Date: Tue, 27 Dec 2022 13:39:40 +0530 Subject: [PATCH 07/10] feat(bridge): move message status tooltip into component --- .../components/MessageStatusTooltip.svelte | 36 ++++++++++++++++++ .../src/components/Transaction.svelte | 37 +------------------ .../src/components/Transactions.svelte | 7 +++- packages/bridge-ui/src/store/transactions.ts | 3 +- 4 files changed, 46 insertions(+), 37 deletions(-) create mode 100644 packages/bridge-ui/src/components/MessageStatusTooltip.svelte diff --git a/packages/bridge-ui/src/components/MessageStatusTooltip.svelte b/packages/bridge-ui/src/components/MessageStatusTooltip.svelte new file mode 100644 index 00000000000..8edad54e024 --- /dev/null +++ b/packages/bridge-ui/src/components/MessageStatusTooltip.svelte @@ -0,0 +1,36 @@ + + + + +
        + A bridge message will pass through various states: +

        +
          +
        • + Pending: Your asset is not ready to be bridged. Taiko + A1 => Ethereum A1 bridging can take several hours before being ready. + Ethereum A1 => Taiko A1 should be available to claim within minutes. +
          • +
        • + Claimable: Your asset is ready to be claimed on the + destination chain, and requires a transaction. +
          • +
        • + Claimed: Your asset has finished bridging, and is + available to you on the destination chain. +
          • +
        • + Retry: The relayer has failed to process this + message, and you must retry the processing yourself. +
          • +
        • + Failed: Your bridged asset is unable to be processed, + and is available to you on the source chain. +
          • +
        +
        +         +         \ No newline at end of file diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte index 69f1fa91c03..6ae486e77c6 100644 --- a/packages/bridge-ui/src/components/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transaction.svelte @@ -10,6 +10,7 @@ import { pendingTransactions, showTransactionDetails, + showMessageStatusTooltip, } from "../store/transactions"; import { errorToast, successToast } from "../utils/toast"; import { _ } from "svelte-i18n"; @@ -25,7 +26,6 @@ import { providers } from "../store/providers"; import { fetchSigner, switchNetwork } from "@wagmi/core"; import Tooltip from "./Tooltip.svelte"; - import TooltipModal from "./modals/TooltipModal.svelte"; import Bridge from "../constants/abi/Bridge"; export let transaction: BridgeTransaction; @@ -33,7 +33,6 @@ export let fromChain: Chain; export let toChain: Chain; - let tooltipOpen: boolean = false; let processable: boolean = false; onMount(async () => { processable = await isProcessable(); @@ -168,7 +167,7 @@ {:else if transaction.status === MessageStatus.Done} Claimed {/if} - (tooltipOpen = true)}> + ($showMessageStatusTooltip = true)}> @@ -183,38 +182,6 @@ - - -
        - A bridge message will pass through various states: -

        -
          -
        • - Pending: Your asset is not ready to be bridged. Taiko - A1 => Ethereum A1 bridging can take several hours before being ready. - Ethereum A1 => Taiko A1 should be available to claim within minutes. -
          • -
        • - Claimable: Your asset is ready to be claimed on the - destination chain, and requires a transaction. -
          • -
        • - Claimed: Your asset has finished bridging, and is - available to you on the destination chain. -
          • -
        • - Retry: The relayer has failed to process this - message, and you must retry the processing yourself. -
          • -
        • - Failed: Your bridged asset is unable to be processed, - and is available to you on the source chain. -
          • -
        -
        -         -         -
        Tx Hash @@ -61,7 +61,7 @@
        Data + {transaction.message.data}