From 7a853cdb119d228937a1536ed55465999000a409 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 3 Apr 2023 17:35:31 +0200 Subject: [PATCH 01/10] Improve NoticeModal --- .../Transactions/Transaction.svelte | 17 ++--- .../Transactions/Transactions.svelte | 12 +--- .../src/components/modals/NoticeModal.svelte | 70 +++++++++++++++++-- 3 files changed, 69 insertions(+), 30 deletions(-) diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte index a83ec3d1b06..0d202f7e462 100644 --- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte +++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte @@ -24,6 +24,7 @@ import { isOnCorrectChain } from '../../utils/isOnCorrectChain'; import Button from '../buttons/Button.svelte'; import { switchChainAndSetSigner } from '../../utils/switchChainAndSetSigner'; + import { noticeOpen } from '../modals/NoticeModal.svelte'; export let transaction: BridgeTransaction; @@ -31,7 +32,6 @@ tooltipClick: void; insufficientBalance: void; transactionDetailsClick: BridgeTransaction; - relayerAutoClaim: (informed: boolean) => Promise; }>(); let loading: boolean; @@ -57,17 +57,10 @@ // has already been informed about the relayer auto-claim. const processingFee = transaction.message?.processingFee.toString(); if (processingFee && processingFee !== '0' && !alreadyInformedAboutClaim) { - dispatch( - 'relayerAutoClaim', - // TODO: this is a hack. The idea is to move all these - // functions outside of the component, where they - // make more sense. We don't need to repeat the same - // logic per transaction. - async (informed) => { - alreadyInformedAboutClaim = informed; - await claim(transaction); - }, - ); + noticeOpen({ + name: transaction.hash, + onConfirm: () => (alreadyInformedAboutClaim = true), + }); } else { await claim(transaction); } diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte index 13b34ff3e46..7a71bf5bed6 100644 --- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte +++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte @@ -10,7 +10,6 @@ let selectedTransaction: BridgeTransaction; let showMessageStatusTooltip: boolean; let showInsufficientBalance: boolean; - let showRelayerAutoclaimTooltip: boolean; // TODO: temporary hack until we move the claim and release functions // outside of the Transaction component. @@ -34,12 +33,6 @@ (showMessageStatusTooltip = true)} on:insufficientBalance={() => (showInsufficientBalance = true)} - on:relayerAutoClaim={({ detail }) => { - // We're passing the claiming of the transaction here, which - // will be called after confirming the notice. - confirmNotice = detail; - showRelayerAutoclaimTooltip = true; - }} on:transactionDetailsClick={() => { selectedTransaction = transaction; }} @@ -61,10 +54,7 @@ - +
When bridging, you selected the Recommended or diff --git a/packages/bridge-ui/src/components/modals/NoticeModal.svelte b/packages/bridge-ui/src/components/modals/NoticeModal.svelte index ff89da58930..53bc64cac44 100644 --- a/packages/bridge-ui/src/components/modals/NoticeModal.svelte +++ b/packages/bridge-ui/src/components/modals/NoticeModal.svelte @@ -1,5 +1,22 @@ + +
{#if !processable} Pending @@ -317,7 +318,7 @@ diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte index 7a71bf5bed6..f25e4d8d5aa 100644 --- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte +++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte @@ -10,10 +10,7 @@ let selectedTransaction: BridgeTransaction; let showMessageStatusTooltip: boolean; let showInsufficientBalance: boolean; - - // TODO: temporary hack until we move the claim and release functions - // outside of the Transaction component. - let confirmNotice: (informed: boolean) => Promise; + let noticeModal: NoticeModal;
@@ -31,9 +28,10 @@ {#each $transactions as transaction} (showMessageStatusTooltip = true)} + on:claimNotice={({ detail }) => noticeModal.open(detail)} + on:tooltipStatus={() => (showMessageStatusTooltip = true)} on:insufficientBalance={() => (showInsufficientBalance = true)} - on:transactionDetailsClick={() => { + on:transactionDetails={() => { selectedTransaction = transaction; }} {transaction} /> @@ -54,7 +52,7 @@ - +
When bridging, you selected the Recommended or diff --git a/packages/bridge-ui/src/components/modals/NoticeModal.svelte b/packages/bridge-ui/src/components/modals/NoticeModal.svelte index ea0ee96d17f..f5e6548350e 100644 --- a/packages/bridge-ui/src/components/modals/NoticeModal.svelte +++ b/packages/bridge-ui/src/components/modals/NoticeModal.svelte @@ -1,27 +1,11 @@ - - @@ -104,7 +83,7 @@ justify-between space-y-6 "> - +
void; +}; + +export type NoticeModalOpen = (args: NoticeOpenArgs) => void; From b59aba08998c7b9f1d739c99260eb0a366cd4574 Mon Sep 17 00:00:00 2001 From: Francisco Date: Mon, 3 Apr 2023 20:07:09 +0200 Subject: [PATCH 07/10] Fix error --- .../src/components/modals/NoticeModal.svelte | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/bridge-ui/src/components/modals/NoticeModal.svelte b/packages/bridge-ui/src/components/modals/NoticeModal.svelte index f5e6548350e..5b8ff1b3d3e 100644 --- a/packages/bridge-ui/src/components/modals/NoticeModal.svelte +++ b/packages/bridge-ui/src/components/modals/NoticeModal.svelte @@ -1,6 +1,6 @@
-