From 5ca7eb91bfb30d9ffb2f33711d0048c153dfb4d1 Mon Sep 17 00:00:00 2001
From: Jack Hamer <jackhamer0990@gmail.com>
Date: Mon, 8 Jan 2024 22:46:11 +0200
Subject: [PATCH] fix: requested changes

---
 components/transaction/FeeDetails.vue         | 19 +++------------
 .../transaction/TransactionProgress.vue       |  2 +-
 .../transaction/lineItem/TokenAmount.vue      |  9 +++----
 .../transaction/summary/AddressEntry.vue      | 17 +++++++++----
 views/transactions/Deposit.vue                | 24 ++++++++++++++-----
 views/transactions/Transfer.vue               | 24 ++++++++++++++-----
 6 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/components/transaction/FeeDetails.vue b/components/transaction/FeeDetails.vue
index 2301b6c65..802c6134c 100644
--- a/components/transaction/FeeDetails.vue
+++ b/components/transaction/FeeDetails.vue
@@ -27,18 +27,12 @@
             <span v-if="canDisplayFeeAsFiat && displayFeeAsFiat">{{ totalPrice }} of</span>
             <span v-else class="break-all">{{ parseTokenAmount(feeAmount, feeToken.decimals) }}</span>
           </transition>
-          <TokenImage class="ml-1.5 mr-1 h-5 w-5" v-bind="feeToken" />
+          &nbsp;
           <span class="font-medium">{{ feeToken.symbol }}</span>
+          &nbsp;
+          <TokenImage class="h-5 w-5" v-bind="feeToken" />
         </component>
         <template v-else>Unknown fee</template>
-        <CommonCircleLoader
-          v-if="updateDuration"
-          v-tooltip="`Updating fee every ${Math.ceil(updateDuration / 1000)} seconds`"
-          :duration="updateDuration"
-          :active="!loading"
-          class="ml-1.5 cursor-help"
-          @finished="emit('update')"
-        />
       </div>
       <slot />
     </div>
@@ -69,15 +63,8 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  updateDuration: {
-    type: Number,
-  },
 });
 
-const emit = defineEmits<{
-  (eventName: "update"): void;
-}>();
-
 const displayFeeAsFiat = ref(true);
 const canDisplayFeeAsFiat = computed(() => (props.feeToken?.price ? true : false));
 
diff --git a/components/transaction/TransactionProgress.vue b/components/transaction/TransactionProgress.vue
index fee6f3e69..3d86b5eb6 100644
--- a/components/transaction/TransactionProgress.vue
+++ b/components/transaction/TransactionProgress.vue
@@ -75,8 +75,8 @@
         <span class="text-neutral-400">Value:</span>
         <span class="ml-1 inline-flex items-center">
           {{ parseTokenAmount(token.amount, token.decimals) }}
-          <TokenImage class="mx-1 h-5 w-5" v-bind="token" />
           {{ token.symbol }}
+          <TokenImage class="ml-1.5 h-5 w-5" v-bind="token" />
         </span>
       </div>
       <div v-if="expectedCompleteTimestamp && !completed">
diff --git a/components/transaction/lineItem/TokenAmount.vue b/components/transaction/lineItem/TokenAmount.vue
index 6605e5765..a344d040b 100644
--- a/components/transaction/lineItem/TokenAmount.vue
+++ b/components/transaction/lineItem/TokenAmount.vue
@@ -3,13 +3,10 @@
     <div class="flex items-center justify-end">
       <span v-if="direction" class="relative -top-px mr-[2px] text-xs">{{ direction === "in" ? "+" : "-" }}</span>
       <span class="max-w-[100px] truncate xs:max-w-[150px]">{{ displayedAmount }}</span>
-      <TokenImage
-        class="ml-1 mr-0.5 h-4 w-4"
-        :symbol="token.symbol"
-        :address="token.address"
-        :icon-url="token.iconUrl"
-      />
+      &nbsp;
       <span :title="token.symbol" class="max-w-[5.5rem] truncate font-medium">{{ token.symbol }}</span>
+      &nbsp;
+      <TokenImage class="h-4 w-4" :symbol="token.symbol" :address="token.address" :icon-url="token.iconUrl" />
     </div>
   </div>
 </template>
diff --git a/components/transaction/summary/AddressEntry.vue b/components/transaction/summary/AddressEntry.vue
index 94fbd6312..61347c72e 100644
--- a/components/transaction/summary/AddressEntry.vue
+++ b/components/transaction/summary/AddressEntry.vue
@@ -4,8 +4,14 @@
     <div class="entry-info">
       <div class="entry-text-info">
         <div class="account-label">{{ accountLabel }}</div>
-        <div v-tooltip="{ content: address, maxWidth: 'none' }" class="account-address">
-          {{ shortenAddress(address, 6) }}
+        <div class="account-address">
+          <span
+            v-for="(part, index) in addressParts"
+            :key="index"
+            :class="{ 'text-neutral-600 dark:text-neutral-400': index === 1 }"
+          >
+            {{ part }}
+          </span>
         </div>
       </div>
       <AddressAvatar class="account-avatar" :address="address">
@@ -26,7 +32,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: {
@@ -51,6 +56,10 @@ const accountLabel = computed(() => {
   }
   return `Another ${props.destination.label} account`;
 });
+const addressParts = computed<[string, string, string]>(() => {
+  const address = props.address;
+  return [address.slice(0, 5), address.slice(5, 39), address.slice(39)];
+});
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +76,7 @@ const accountLabel = computed(() => {
       @apply text-right;
 
       .account-address {
-        @apply ml-auto w-max break-all;
+        @apply break-all;
       }
     }
     .account-avatar {
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index 71487ceb4..547ce2070 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -145,8 +145,6 @@
               :fee-token="feeToken"
               :fee-amount="fee"
               :loading="feeLoading"
-              :update-duration="60000"
-              @update="feeAutoUpdateEstimate"
             />
           </transition>
           <CommonButtonLabel as="span" v-if="!isCustomNode" class="ml-auto text-right">~15 minutes</CommonButtonLabel>
@@ -351,6 +349,7 @@ import { storeToRefs } from "pinia";
 import EthereumTransactionFooter from "@/components/transaction/EthereumTransactionFooter.vue";
 
 import useAllowance from "@/composables/transaction/useAllowance";
+import useInterval from "@/composables/useInterval";
 import useNetworks from "@/composables/useNetworks";
 import useEcosystemBanner from "@/composables/zksync/deposit/useEcosystemBanner";
 import useFee from "@/composables/zksync/deposit/useFee";
@@ -580,15 +579,13 @@ const transaction = computed<
   };
 });
 
+const feeLoading = computed(() => feeInProgress.value || (!fee.value && balanceInProgress.value));
 const estimate = async () => {
   if (!transaction.value?.from.address || !transaction.value?.to.address || !selectedToken.value) {
     return;
   }
   await estimateFee(transaction.value.to.address, selectedToken.value.address);
 };
-const feeAutoUpdateEstimate = async () => {
-  await estimate();
-};
 watch(
   [() => selectedToken.value?.address, () => transaction.value?.from.address],
   () => {
@@ -598,7 +595,22 @@ watch(
   { immediate: true }
 );
 
-const feeLoading = computed(() => feeInProgress.value || (!fee.value && balanceInProgress.value));
+const autoUpdatingFee = computed(() => !feeError.value && fee.value && !feeLoading.value);
+const { reset: resetAutoUpdateEstimate, stop: stopAutoUpdateEstimate } = useInterval(async () => {
+  if (!autoUpdatingFee.value) return;
+  await estimate();
+}, 60000);
+watch(
+  autoUpdatingFee,
+  (updatingFee) => {
+    if (!updatingFee) {
+      stopAutoUpdateEstimate();
+    } else {
+      resetAutoUpdateEstimate();
+    }
+  },
+  { immediate: true }
+);
 
 const continueButtonDisabled = computed(() => {
   if (
diff --git a/views/transactions/Transfer.vue b/views/transactions/Transfer.vue
index 5c2bb2b94..db320dd9c 100644
--- a/views/transactions/Transfer.vue
+++ b/views/transactions/Transfer.vue
@@ -172,8 +172,6 @@
               :fee-token="feeToken"
               :fee-amount="fee"
               :loading="feeLoading"
-              :update-duration="60000"
-              @update="feeAutoUpdateEstimate"
             />
           </transition>
           <CommonButtonLabel
@@ -258,6 +256,7 @@ import { BigNumber } from "ethers";
 import { isAddress } from "ethers/lib/utils";
 import { storeToRefs } from "pinia";
 
+import useInterval from "@/composables/useInterval";
 import useNetworks from "@/composables/useNetworks";
 import useFee from "@/composables/zksync/useFee";
 import useTransaction from "@/composables/zksync/useTransaction";
@@ -480,6 +479,7 @@ const transaction = computed<
   };
 });
 
+const feeLoading = computed(() => feeInProgress.value || (!fee.value && balanceInProgress.value));
 const estimate = async () => {
   // estimation fails when token balance is 0
   if (
@@ -498,9 +498,6 @@ const estimate = async () => {
     tokenAddress: selectedToken.value.address,
   });
 };
-const feeAutoUpdateEstimate = async () => {
-  await estimate();
-};
 watch(
   [() => selectedToken.value?.address, () => selectedTokenZeroBalance.value],
   () => {
@@ -510,7 +507,22 @@ watch(
   { immediate: true }
 );
 
-const feeLoading = computed(() => feeInProgress.value || (!fee.value && balanceInProgress.value));
+const autoUpdatingFee = computed(() => !feeError.value && fee.value && !feeLoading.value);
+const { reset: resetAutoUpdateEstimate, stop: stopAutoUpdateEstimate } = useInterval(async () => {
+  if (!autoUpdatingFee.value) return;
+  await estimate();
+}, 60000);
+watch(
+  autoUpdatingFee,
+  (updatingFee) => {
+    if (!updatingFee) {
+      stopAutoUpdateEstimate();
+    } else {
+      resetAutoUpdateEstimate();
+    }
+  },
+  { immediate: true }
+);
 
 const continueButtonDisabled = computed(() => {
   if (