fix: transaction success popup should never close automatically

matter-labs · Jun 2, 2023 · 24e4602 · 24e4602
1 parent e69b398
commit 24e4602
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 19 deletions.
diff --git a/components/transaction/zksync/era/ConfirmTransactionModal.vue b/components/transaction/zksync/era/ConfirmTransactionModal.vue
@@ -1,10 +1,11 @@
 <template>
   <CommonModal
     v-if="status !== 'done'"
-    v-bind="$attrs"
+    :opened="opened"
     :close-on-background-click="status === 'not-started'"
     class="confirm-transaction-modal"
     title="Confirm transaction"
+    @close="closeModal"
   >
     <div class="flex h-full flex-col overflow-auto">
       <template v-if="transaction">
@@ -86,12 +87,13 @@
 
   <EraTransferSuccessfulModal
     v-else-if="transaction?.type === 'transfer'"
-    v-bind="$attrs"
+    opened
     :transaction="transactionLineItem"
     :in-progress="!transactionCommitted"
   />
   <EraWithdrawalSuccessfulModal
     v-else-if="transaction?.type === 'withdrawal'"
+    opened
     v-bind="$attrs"
     :transaction="transactionLineItem"
   />
@@ -135,6 +137,9 @@ export type ConfirmationModalTransaction = {
 };
 
 const props = defineProps({
+  opened: {
+    type: Boolean,
+  },
   transaction: {
     type: Object as PropType<ConfirmationModalTransaction>,
   },
@@ -161,6 +166,11 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (eventName: "update:opened", value: boolean): void;
+}>();
+const closeModal = () => emit("update:opened", false);
+
 const eraTransactionsHistoryStore = useEraTransactionsHistoryStore();
 const walletEraStore = useEraWalletStore();
 const eraProviderStore = useEraProviderStore();

diff --git a/components/transaction/zksync/era/deposit/ConfirmTransactionModal.vue b/components/transaction/zksync/era/deposit/ConfirmTransactionModal.vue
@@ -1,10 +1,11 @@
 <template>
   <CommonModal
     v-if="status !== 'done'"
-    v-bind="$attrs"
+    :opened="opened"
     :close-on-background-click="status === 'not-started'"
     class="confirm-deposit-transaction-modal"
-    :title="`Confirm transaction`"
+    title="Confirm transaction"
+    @close="closeModal"
   >
     <div class="flex h-full flex-col overflow-auto">
       <template v-if="transaction">
@@ -74,7 +75,7 @@
     </div>
   </CommonModal>
 
-  <CommonModal v-else v-bind="$attrs" :closable="false" class="deposit-transaction-successful-modal" title="">
+  <CommonModal v-else opened :closable="false" class="deposit-transaction-successful-modal" title="">
     <template #animation>
       <AnimationsProgressPlane class="w-72" />
     </template>
@@ -169,6 +170,9 @@ export type ConfirmationModalTransaction = {
 };
 
 const props = defineProps({
+  opened: {
+    type: Boolean,
+  },
   transaction: {
     type: Object as PropType<ConfirmationModalTransaction>,
   },
@@ -191,6 +195,11 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (eventName: "update:opened", value: boolean): void;
+}>();
+const closeModal = () => emit("update:opened", false);
+
 const eraTransactionsHistoryStore = useEraTransactionsHistoryStore();
 const walletEraStore = useEraWalletStore();
 const eraEthereumBalanceStore = useEraEthereumBalanceStore();

diff --git a/components/transaction/zksync/lite/ConfirmTransactionModal.vue b/components/transaction/zksync/lite/ConfirmTransactionModal.vue
@@ -1,10 +1,11 @@
 <template>
   <CommonModal
     v-if="status !== 'done'"
-    v-bind="$attrs"
+    :opened="opened"
     :close-on-background-click="status === 'not-started'"
     class="confirm-transaction-modal"
-    :title="`Confirm transaction`"
+    title="Confirm transaction"
+    @close="closeModal"
   >
     <div class="flex h-full flex-col overflow-auto">
       <template v-if="accountActivation">
@@ -84,7 +85,7 @@
           <transition v-bind="TransitionPrimaryButtonText" mode="out-in">
             <span v-if="status === 'processing'">Processing...</span>
             <span v-else-if="status === 'waiting-for-signature'">Waiting for confirmation</span>
-            <span v-else-if="status === 'committing'">Sending...</span>
+            <span v-else-if="status === 'sending'">Sending...</span>
             <span v-else>Send to {{ destination.label }}</span>
           </transition>
         </CommonButton>
@@ -100,15 +101,11 @@
 
   <TransferSuccessfulModal
     v-else-if="destination.key === 'zkSyncLite'"
-    v-bind="$attrs"
+    opened
     :transaction-hashes="transactionHashes"
     :in-progress="!transactionCommitted"
   />
-  <WithdrawSuccessfulModal
-    v-else-if="destination.key === 'ethereum'"
-    v-bind="$attrs"
-    :transaction-hashes="transactionHashes"
-  />
+  <WithdrawSuccessfulModal v-else-if="destination.key === 'ethereum'" opened :transaction-hashes="transactionHashes" />
 </template>
 
 <script lang="ts" setup>
@@ -146,6 +143,9 @@ export type ConfirmationModalTransaction = {
 };
 
 const props = defineProps({
+  opened: {
+    type: Boolean,
+  },
   transactions: {
     type: Array as PropType<ConfirmationModalTransaction[]>,
   },
@@ -173,6 +173,11 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (eventName: "update:opened", value: boolean): void;
+}>();
+const closeModal = () => emit("update:opened", false);
+
 const liteTransactionsHistoryStore = useLiteTransactionsHistoryStore();
 const liteAccountActivationStore = useLiteAccountActivationStore();
 const walletLiteStore = useLiteWalletStore();

diff --git a/components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue b/components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue
@@ -1,10 +1,11 @@
 <template>
   <CommonModal
     v-if="status !== 'done'"
-    v-bind="$attrs"
+    :opened="opened"
     :close-on-background-click="status === 'not-started'"
     class="confirm-deposit-transaction-modal"
-    :title="`Confirm transaction`"
+    title="Confirm transaction"
+    @close="closeModal"
   >
     <div class="flex h-full flex-col overflow-auto">
       <template v-if="transaction">
@@ -74,7 +75,7 @@
     </div>
   </CommonModal>
 
-  <CommonModal v-else v-bind="$attrs" :closable="false" class="deposit-transaction-successful-modal" title="">
+  <CommonModal v-else opened :closable="false" class="deposit-transaction-successful-modal" title="">
     <template #animation>
       <AnimationsProgressPlane class="w-72" />
     </template>
@@ -169,6 +170,9 @@ export type ConfirmationModalTransaction = {
 };
 
 const props = defineProps({
+  opened: {
+    type: Boolean,
+  },
   transaction: {
     type: Object as PropType<ConfirmationModalTransaction>,
   },
@@ -191,6 +195,11 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (eventName: "update:opened", value: boolean): void;
+}>();
+const closeModal = () => emit("update:opened", false);
+
 const liteTransactionsHistoryStore = useLiteTransactionsHistoryStore();
 const walletLiteStore = useLiteWalletStore();
 const liteEthereumBalanceStore = useLiteEthereumBalanceStore();

diff --git a/composables/zksync/lite/useTransaction.ts b/composables/zksync/lite/useTransaction.ts
@@ -16,7 +16,7 @@ type TransactionParams = {
 };
 
 export default (getWalletInstance: () => Promise<Wallet | undefined>) => {
-  const status = ref<"not-started" | "processing" | "waiting-for-signature" | "committing" | "done">("not-started");
+  const status = ref<"not-started" | "processing" | "waiting-for-signature" | "sending" | "done">("not-started");
   const error = ref<Error | undefined>();
   const transactionHashes = ref<string[]>([]);
 
@@ -64,7 +64,7 @@ export default (getWalletInstance: () => Promise<Wallet | undefined>) => {
       status.value = "waiting-for-signature";
       const batchTransactionData = await batchBuilder.build();
 
-      status.value = "committing";
+      status.value = "sending";
       const submittedTransactions = await submitSignedTransactionsBatch(
         wallet.provider,
         batchTransactionData.txs,