From 746cb8e0c1c4e7792a640ecbf3ed49be90ca0dff Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Wed, 3 Jan 2024 17:43:24 +0200
Subject: [PATCH] feat: show deposit status

---
 .env                                          |  2 +-
 components/common/button/Button.vue           |  2 +-
 .../transaction/TransactionHashButton.vue     | 88 +++++++++++++++++++
 .../transaction/TransactionProgress.vue       | 57 ++++++++----
 .../lineItem/TransactionLineItem.vue          |  2 +-
 .../transaction/summary/AddressEntry.vue      | 11 ++-
 composables/useInterval.ts                    |  2 +-
 store/ethereumBalance.ts                      | 39 +++++---
 views/transactions/Deposit.vue                | 38 +++++---
 views/transactions/Transfer.vue               |  3 +-
 10 files changed, 191 insertions(+), 53 deletions(-)
 create mode 100644 components/transaction/TransactionHashButton.vue

diff --git a/.env b/.env
index 72d0a6205..b5408b577 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
 WALLET_CONNECT_PROJECT_ID=373a8744ceaac00934aec708a3fceea6
-ANKR_TOKEN=
\ No newline at end of file
+ANKR_TOKEN=d39966271ddadd0313304908744721c7c9c0c83e2785d73602990c8b46267f83
\ No newline at end of file
diff --git a/components/common/button/Button.vue b/components/common/button/Button.vue
index acf1e1c5d..77d22623f 100644
--- a/components/common/button/Button.vue
+++ b/components/common/button/Button.vue
@@ -54,7 +54,7 @@ defineProps({
       }
     }
     &light {
-      @apply bg-neutral-200 dark:bg-neutral-800;
+      @apply bg-neutral-200 transition disabled:opacity-70 dark:bg-neutral-800;
       &:enabled,
       &:is(a, label) {
         &:not([aria-disabled="true"]) {
diff --git a/components/transaction/TransactionHashButton.vue b/components/transaction/TransactionHashButton.vue
new file mode 100644
index 000000000..58a8b78ef
--- /dev/null
+++ b/components/transaction/TransactionHashButton.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="w-max" ref="el">
+    <CommonButton
+      v-if="!explorerUrl"
+      size="xs"
+      variant="light"
+      :disabled="!transactionHash"
+      class="transaction-hash-button"
+      @click="copy()"
+    >
+      Copy hash
+      <CommonSpinner v-if="!transactionHash" class="transaction-hash-button-icon" aria-hidden="true" />
+      <DocumentDuplicateIcon v-else class="transaction-hash-button-icon" aria-hidden="true" />
+    </CommonButton>
+    <template v-else>
+      <CommonButton
+        v-if="!transactionHash"
+        size="xs"
+        variant="light"
+        target="_blank"
+        disabled
+        class="transaction-hash-button"
+      >
+        Explorer
+        <CommonSpinner class="transaction-hash-button-icon" aria-hidden="true" />
+      </CommonButton>
+      <CommonButton
+        v-else
+        size="xs"
+        variant="light"
+        as="a"
+        :href="`${explorerUrl}/tx/${transactionHash}`"
+        target="_blank"
+        class="transaction-hash-button"
+      >
+        Explorer
+        <ArrowTopRightOnSquareIcon class="transaction-hash-button-icon" aria-hidden="true" />
+      </CommonButton>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+import { useTippy } from "vue-tippy";
+
+import { ArrowTopRightOnSquareIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
+
+import useCopy from "@/composables/useCopy";
+
+const props = defineProps({
+  explorerUrl: {
+    type: String,
+  },
+  transactionHash: {
+    type: String,
+  },
+});
+
+const { copy, copied } = useCopy(computed(() => props.transactionHash || ""));
+const el = ref<HTMLButtonElement | undefined>();
+const a = useTippy(el, {
+  content: "Transaction hash copied!",
+  trigger: "manual",
+  hideOnClick: false,
+});
+watch(
+  copied,
+  (copied) => {
+    if (copied) {
+      a.show();
+    } else {
+      a.hide();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.transaction-hash-button {
+  @apply w-max;
+
+  .transaction-hash-button-icon {
+    @apply -mr-1 ml-2 h-6 w-6;
+  }
+}
+</style>
diff --git a/components/transaction/TransactionProgress.vue b/components/transaction/TransactionProgress.vue
index f28e4bce0..b7bc66dd4 100644
--- a/components/transaction/TransactionProgress.vue
+++ b/components/transaction/TransactionProgress.vue
@@ -55,18 +55,21 @@
       </template>
 
       <AnimationsTransactionProgress :completed="completed" class="transaction-animation" />
+
+      <div v-if="fromExplorerLink || fromTransactionHash" class="info-column bottom-left mt-block-gap-1/2">
+        <TransactionHashButton :explorer-url="fromExplorerLink" :transaction-hash="fromTransactionHash" />
+      </div>
+      <div v-if="toExplorerLink || toTransactionHash" class="info-column bottom-right mt-block-gap-1/2">
+        <TransactionHashButton :explorer-url="toExplorerLink" :transaction-hash="toTransactionHash" />
+      </div>
     </div>
-    <CommonButton
-      size="xs"
-      variant="light"
-      as="a"
-      :href="transactionLink"
-      target="_blank"
-      class="mx-auto mt-block-gap w-max"
-    >
-      Explorer
-      <ArrowTopRightOnSquareIcon class="-mr-1 ml-2 h-6 w-6" aria-hidden="true" />
-    </CommonButton>
+    <TransactionHashButton
+      v-if="explorerLink || transactionHash"
+      :explorer-url="explorerLink"
+      :transaction-hash="transactionHash"
+      class="mx-auto mt-block-gap"
+    />
+
     <div class="mt-block-padding flex items-center justify-center">
       <span class="text-neutral-400">Value:</span>
       <span class="ml-1 flex items-center">
@@ -81,8 +84,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
-
 import type { TransactionDestination } from "@/store/destinations";
 import type { TokenAmount } from "@/types";
 import type { PropType } from "vue";
@@ -104,9 +105,25 @@ const props = defineProps({
     type: Object as PropType<TransactionDestination>,
     required: true,
   },
-  transactionLink: {
+  // left right buttons
+  fromExplorerLink: {
+    type: String,
+  },
+  fromTransactionHash: {
+    type: String,
+  },
+  toExplorerLink: {
+    type: String,
+  },
+  toTransactionHash: {
+    type: String,
+  },
+  // center button
+  explorerLink: {
+    type: String,
+  },
+  transactionHash: {
     type: String,
-    required: true,
   },
   token: {
     type: Object as PropType<TokenAmount>,
@@ -126,8 +143,8 @@ const isSameAddressDifferentDestination = computed(
 
 <style lang="scss" scoped>
 .transaction-progress {
-  @apply grid grid-cols-3 items-center gap-x-4 text-center;
-  grid-template-areas: "info-col-left divider info-col-right";
+  @apply grid grid-flow-row grid-cols-3 grid-rows-[max-content] items-center gap-x-4 text-center;
+  grid-template-areas: "info-col-left divider info-col-right" "info-col-bottom-left space info-col-bottom-right";
 
   .info-column {
     @apply flex flex-col items-center justify-center gap-2;
@@ -137,6 +154,12 @@ const isSameAddressDifferentDestination = computed(
     &.right {
       grid-area: info-col-right;
     }
+    &.bottom-left {
+      grid-area: info-col-bottom-left;
+    }
+    &.bottom-right {
+      grid-area: info-col-bottom-right;
+    }
   }
   .transaction-animation {
     grid-area: divider;
diff --git a/components/transaction/lineItem/TransactionLineItem.vue b/components/transaction/lineItem/TransactionLineItem.vue
index a7148886d..eb14790d3 100644
--- a/components/transaction/lineItem/TransactionLineItem.vue
+++ b/components/transaction/lineItem/TransactionLineItem.vue
@@ -70,8 +70,8 @@ const props = defineProps({
   },
 });
 
-const el = ref<{ $el?: HTMLButtonElement } | undefined>();
 const { copy, copied } = useCopy(computed(() => props.transactionHash));
+const el = ref<{ $el?: HTMLButtonElement } | undefined>();
 const a = useTippy(
   computed(() => el.value?.$el?.parentElement?.parentElement || undefined),
   {
diff --git a/components/transaction/summary/AddressEntry.vue b/components/transaction/summary/AddressEntry.vue
index 69795bc63..482776e21 100644
--- a/components/transaction/summary/AddressEntry.vue
+++ b/components/transaction/summary/AddressEntry.vue
@@ -5,7 +5,7 @@
       <div class="entry-text-info">
         <div class="account-label">{{ accountLabel }}</div>
         <div class="account-address">
-          {{ shortenAddress(address, 8) }}
+          {{ address }}
         </div>
       </div>
       <AddressAvatar class="account-avatar" :address="address">
@@ -26,7 +26,6 @@ import type { TransactionDestination } from "@/store/destinations";
 import type { PropType } from "vue";
 
 import { useOnboardStore } from "@/store/onboard";
-import { shortenAddress } from "@/utils/formatters";
 
 const props = defineProps({
   label: {
@@ -55,7 +54,7 @@ const accountLabel = computed(() => {
 
 <style lang="scss" scoped>
 .transaction-summary-address-entry {
-  @apply flex items-center;
+  @apply flex items-center gap-4;
 
   .entry-label {
     @apply font-bold;
@@ -65,9 +64,13 @@ const accountLabel = computed(() => {
 
     .entry-text-info {
       @apply text-right;
+
+      .account-address {
+        @apply break-all;
+      }
     }
     .account-avatar {
-      @apply h-12 w-12;
+      @apply h-12 w-12 shrink-0;
     }
   }
 }
diff --git a/composables/useInterval.ts b/composables/useInterval.ts
index d49b3b52b..048d6746e 100644
--- a/composables/useInterval.ts
+++ b/composables/useInterval.ts
@@ -1,7 +1,7 @@
 import { ref } from "vue";
 
 export default <ResultType>(fn: () => ResultType, delay: number) => {
-  let interval: NodeJS.Timer | undefined = undefined;
+  let interval: ReturnType<typeof setInterval> | undefined = undefined;
   const currentDelay = ref(delay);
 
   function stop() {
diff --git a/store/ethereumBalance.ts b/store/ethereumBalance.ts
index 95ea4c6e1..f8431e567 100644
--- a/store/ethereumBalance.ts
+++ b/store/ethereumBalance.ts
@@ -40,19 +40,32 @@ export const useEthereumBalanceStore = defineStore("ethereumBalance", () => {
         walletAddress: account.value.address,
         onlyWhitelisted: false,
       });
-      return balances.assets
-        .filter((e) => e.contractAddress || e.tokenType === "NATIVE")
-        .map((e) => {
-          return {
-            address: e.tokenType === "NATIVE" ? ETH_TOKEN.l1Address : checksumAddress(e.contractAddress!),
-            symbol: e.tokenSymbol,
-            name: e.tokenName,
-            decimals: e.tokenDecimals,
-            iconUrl: e.thumbnail,
-            price: e.tokenPrice === "0" ? undefined : parseFloat(e.tokenPrice),
-            amount: e.balanceRawInteger,
-          } as TokenAmount;
-        });
+      return [
+        ...balances.assets
+          .filter((e) => e.contractAddress || e.tokenType === "NATIVE")
+          .map((e) => {
+            return {
+              address: e.tokenType === "NATIVE" ? ETH_TOKEN.l1Address : checksumAddress(e.contractAddress!),
+              symbol: e.tokenSymbol,
+              name: e.tokenName,
+              decimals: e.tokenDecimals,
+              iconUrl: e.thumbnail,
+              price: e.tokenPrice === "0" ? undefined : parseFloat(e.tokenPrice),
+              amount: e.balanceRawInteger,
+            } as TokenAmount;
+          }),
+        ...[
+          {
+            address: "0x63bfb2118771bd0da7A6936667A7BB705A06c1bA",
+            symbol: "Test",
+            name: "Test",
+            decimals: 4,
+            iconUrl: undefined,
+            price: 0,
+            amount: "100",
+          },
+        ],
+      ];
     },
     { cache: false }
   );
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index 84aa54d09..a52614463 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -104,21 +104,28 @@
         </CommonErrorBlock>
       </template>
       <template v-else-if="step === 'submitted'">
-        <h1 class="h1 mt-block-gap-1/2 text-center">Transaction submitted</h1>
-        <p class="text-center">
-          Your funds will be available after the transaction is committed on
-          <span class="font-medium">{{ destinations.ethereum.label }}</span> and then processed on
-          <span class="font-medium">{{ destination.label }}</span
-          >. This usually takes around 15 minutes. You are free to close this page.
-        </p>
+        <h1 class="h1 mt-block-gap-1/2 text-center">
+          {{ l2TransactionHash ? "Transaction completed" : "Transaction submitted" }}
+        </h1>
+        <CommonHeightTransition :opened="!l2TransactionHash">
+          <p class="mb-4 text-center">
+            Your funds will be available after the transaction is committed on
+            <span class="font-medium">{{ destinations.ethereum.label }}</span> and then processed on
+            <span class="font-medium">{{ destination.label }}</span
+            >. This usually takes around 15 minutes. You are free to close this page.
+          </p>
+        </CommonHeightTransition>
         <TransactionProgress
           :from-address="transaction!.from.address"
           :from-destination="transaction!.from.destination"
+          :from-explorer-link="l1BlockExplorerUrl"
+          :from-transaction-hash="ethTransactionHash"
           :to-address="transaction!.to.address"
           :to-destination="transaction!.to.destination"
-          :transaction-link="`${l1BlockExplorerUrl}/tx/${ethTransactionHash}`"
+          :to-explorer-link="blockExplorerUrl"
+          :to-transaction-hash="l2TransactionHash"
           :token="transaction!.token"
-          class="mt-block-gap"
+          :completed="!!l2TransactionHash"
         />
 
         <EcosystemBlock v-if="eraNetwork.displaySettings?.showPartnerLinks" class="mt-block-gap" />
@@ -375,7 +382,7 @@ const providerStore = useZkSyncProviderStore();
 const zkSyncEthereumBalance = useZkSyncEthereumBalanceStore();
 const eraWalletStore = useZkSyncWalletStore();
 const { account, isConnected } = storeToRefs(onboardStore);
-const { eraNetwork } = storeToRefs(providerStore);
+const { eraNetwork, blockExplorerUrl } = storeToRefs(providerStore);
 const { destinations } = storeToRefs(useDestinationsStore());
 const { l1BlockExplorerUrl } = storeToRefs(useNetworkStore());
 const { l1Tokens, tokensRequestInProgress, tokensRequestError } = storeToRefs(tokensStore);
@@ -635,7 +642,7 @@ watch(step, (newStep) => {
   }
 });
 
-const transactionCommitted = ref(false);
+const l2TransactionHash = ref<string | undefined>();
 const makeTransaction = async () => {
   if (continueButtonDisabled.value) return;
 
@@ -658,15 +665,16 @@ const makeTransaction = async () => {
     zkSyncEthereumBalance.deductBalance(feeToken.value!.address!, fee.value!);
     zkSyncEthereumBalance.deductBalance(transaction.value!.token.address!, transaction.value!.token.amount);
     tx.wait()
-      .then(async () => {
-        transactionCommitted.value = true;
+      .then(async (receipt) => {
+        console.log("Final receipt", receipt);
+        l2TransactionHash.value = receipt.transactionHash;
         setTimeout(() => {
           transfersHistoryStore.reloadRecentTransfers().catch(() => undefined);
           eraWalletStore.requestBalance({ force: true }).catch(() => undefined);
         }, 2000);
       })
       .catch((err) => {
-        transactionCommitted.value = false;
+        l2TransactionHash.value = undefined;
         transactionError.value = err as Error;
         transactionStatus.value = "not-started";
       });
@@ -678,7 +686,9 @@ const resetForm = () => {
   amount.value = "";
   step.value = "form";
   transactionStatus.value = "not-started";
+  l2TransactionHash.value = undefined;
   resetSetAllowance();
+  requestAllowance();
 };
 
 const fetchBalances = async (force = false) => {
diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
index 269596b44..9d91569b0 100644
--- a/views/transactions/Transfer.vue
+++ b/views/transactions/Transfer.vue
@@ -146,7 +146,8 @@
           :from-destination="transaction!.from.destination"
           :to-address="transaction!.to.address"
           :to-destination="transaction!.to.destination"
-          :transaction-link="`${blockExplorerUrl}/tx/${transactionHash}`"
+          :explorer-link="blockExplorerUrl"
+          :transaction-hash="transactionHash"
           :token="transaction!.token"
           :completed="transactionCommitted && type !== 'withdrawal'"
         />