Feat/filter tx history

components/common/input/TransactionWithdraw.vue

@@ -6,6 +6,7 @@
       :loading="loading"
       :tokens="tokens"
       :balances="balances"
+      :title="from==='withdraw'? 'Choose chain and token':''"
     >
       <template #body-bottom v-if="$slots['token-dropdown-bottom']">
         <slot name="token-dropdown-bottom" />
@@ -155,6 +156,10 @@ const props = defineProps({
     type: String,
     default: "Amount",
   },
+  from: {
+    type: String,
+    default: "",
+  },
   tokens: {
     type: Array as PropType<Token[]>,
     default: () => [],

components/token/TokenSelectModal.vue

@@ -1,5 +1,14 @@
 <template>
-  <CommonModal v-model:opened="isModalOpened" class="token-select-modal" :title="title" @after-leave="search = ''">
+  <CommonModal v-model:opened="isModalOpened" class="token-select-modal" :class="{ 'token-modal': title === 'Choose chain and token' }" :title="title" @after-leave="search = ''">
+    <div v-if="title === 'Choose chain and token'" class="mb-4">
+      <div class="flex gap-2 flex-wrap">
+        <div v-for="(group, groupIndex) in arr" :key="groupIndex" class="chainBox cursor-pointer" :class="{'active': selectChain === group.key}"
+         @click="buttonClicked(zkSyncNetwork.find(item => item.key === group.key)!);">
+          <img :src="group.iconUrl" :alt="group.label"/>
+        </div>
+      </div>
+      <p v-if="!arr.length" class="mt-block-padding-1/2 text-center">No chains found</p>
+    </div>
     <Combobox v-model="selectedToken">
       <!-- TODO: Refactor this to use ComboboxInput as main component but look like CommonInputSearch -->
       <CommonInputSearch
@@ -12,7 +21,7 @@
           <MagnifyingGlassIcon aria-hidden="true" />
         </template>
       </CommonInputSearch>
-      <div class="-mx-block-padding-1/2 h-full overflow-auto px-block-padding-1/2">
+      <div class="-mx-block-padding-1/2 md:h-[18rem] h-[15rem] overflow-auto px-block-padding-1/2">
         <template v-if="loading">
           <div class="-mx-block-padding-1/2">
             <TokenBalanceLoader v-for="index in 2" variant="light" :key="index" />
@@ -46,7 +55,7 @@
                 size="sm"
                 variant="light"
                 :key="item.address"
-                @click="selectedToken = item"
+                @click="changeToken(item)"
               />
             </div>
           </div>
@@ -68,7 +77,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { Combobox } from "@headlessui/vue";
 import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";
@@ -85,7 +94,27 @@ import { useSearchtokenStore } from "@/store/searchToken";
 import { useZkSyncEthereumBalanceStore } from "@/store/zksync/ethereumBalance";
 import { groupBalancesByAmount } from "@/utils/mappers";
 import { ETH_ADDRESS, fetchErc20, L2_ETH_TOKEN_ADDRESS } from "~/zksync-web3-nova/src/utils";
+import useNetworks from "@/composables/useNetworks";
+import type { ZkSyncNetwork } from "@/data/networks";
+import { useZkSyncWalletStore } from "@/store/zksync/wallet";
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { useRoute } from "#app";
+const route = useRoute();
+const providerStore = useZkSyncProviderStore();
+const { zkSyncNetworks } = useNetworks();
 
+const walletStore = useZkSyncWalletStore();
+const { balance, balanceInProgress, balanceError } = storeToRefs(walletStore);
+const zkSyncNetwork = zkSyncNetworks.filter((e) => !e.hidden)
+let arr : any[] = [];
+zkSyncNetwork.map((i)=> {
+  const obj = {
+    iconUrl: i.logoUrl,
+    key: i.key,
+    label: i.l1Network?.name,
+  };
+  arr.push(obj);
+});
 const props = defineProps({
   title: {
     type: String,
@@ -123,6 +152,19 @@ const { selectedNetwork } = storeToRefs(useNetworkStore());
 const zkSyncEthereumBalance = useZkSyncEthereumBalanceStore();
 
 const search = ref("");
+const searchList = ref<any[]>([]);
+watch(
+  () => search.value,
+  (value) => {
+    if (chainList.value.length >0) {
+      searchList.value = filterTokens(
+        chainList.value
+      ) as TokenAmount[]
+      balanceGroups = groupBalancesByAmount(searchList)
+    }
+  },
+);
+const selectChain = ref(selectedNetwork.value.key)
 const showLoading = ref(false);
 const hasBalances = computed(() => props.balances.length > 0);
 const onboardStore = useOnboardStore();
@@ -160,7 +202,49 @@ const filterTokens = (tokens: Token[]) => {
   }
   return newTokens;
 };
-
+const changeToken = (item:any) => {
+  console.log(item)
+  selectedToken.value = item
+  if (selectChain.value === selectedNetwork.value.key) {
+    return;
+  }
+  const url = new URL(route.fullPath, window.location.origin);
+  url.searchParams.set("network", selectChain.value);
+  url.searchParams.set("tokenAddress", item.address);
+  window.location.href = url.toString();
+}
+const isNetworkSelected = (network: ZkSyncNetwork) => selectChain.value === network.key;
+const chainLists = ref<any[]>([]);
+const chainList = ref<any[]>([]);
+const buttonClicked = async (network: ZkSyncNetwork) => {
+  if (isNetworkSelected(network)) {
+    return;
+  }
+  selectChain.value = network.key;
+  chainLists.value = balance.value.filter((e) => {
+    if (isSupportedMergeToken(e.address, network.key)) {
+      return true;
+    }
+    if (!e.l1Address) {
+      return false;
+    }
+    if (e.l1Address === ETH_ADDRESS) {
+      return true;
+    }
+    if (e.networkKey === network.key) {
+      return true;
+    }
+    return false;
+  });
+  chainList.value = filterTokens(
+    chainLists.value.filter(
+      (e) =>
+        network.isEthGasToken ||
+        (e.address !== ETH_ADDRESS && e.address.toLowerCase() !== L2_ETH_TOKEN_ADDRESS)
+    )
+  ) as TokenAmount[]
+  balanceGroups = groupBalancesByAmount(chainList)
+};
 const displayedTokens = computed(() =>
   filterTokens(
     props.tokens.filter(
@@ -180,7 +264,7 @@ const displayedBalances = computed(
       )
     ) as TokenAmount[]
 );
-const balanceGroups = groupBalancesByAmount(displayedBalances);
+let balanceGroups = groupBalancesByAmount(displayedBalances);
 const selectedTokenAddress = computed({
   get: () => props.tokenAddress,
   set: (value) => emit("update:tokenAddress", value),
@@ -225,4 +309,35 @@ const closeModal = () => {
     @apply pt-0;
   }
 }
+.token-modal {
+  .modal-card {
+    @apply block h-full grid-rows-[max-content_max-content_1fr];
+  }
+  .category:first-child .group-category-label {
+    @apply pt-0;
+  }
+}
+.chainBox{
+  display: flex;
+  width: 75.7px;
+  height: 64px;
+  padding: 12px 18px 12px 18px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: #3D424D;
+  img{
+    border-radius: 50%;
+    width: 40px;
+  }
+}
+.chainBox:hover{
+  border-radius: 8px;
+  background: rgba(23, 85, 244, 0.25);
+}
+.active{
+  border-radius: 8px;
+  background: rgba(23, 85, 244, 0.25);
+  border: 2px solid #1755F4;
+}
 </style>

components/transaction/FailedDepositLineItem.vue

@@ -1,5 +1,14 @@
 <template>
-  <CommonButtonLine class="transaction-withdrawal-line-item" @click="isModalOpen = true">
+  <CommonButtonLine
+    class="transaction-withdrawal-line-item"
+    @click="
+      () => {
+        if (!clainedTxHash) {
+          isModalOpen = true;
+        }
+      }
+    "
+  >
     <div class="line-button-with-img-image">
       <DestinationIconContainer class="p-0">
         <img src="/img/icon-cross.svg" class="w-3 h-3" />
@@ -30,12 +39,10 @@
             </template>
             <template #underline>
               <div class="flex flex-col">
-                <span>Claim on source chain</span>
-                <CommonTimer format="human-readable" :future-date="expectedCompleteTimestamp" :only-days="true">
-                  <template #default="{ timer, isTimerFinished }">
-                    <span>{{ timer }} days left</span>
-                  </template>
-                </CommonTimer>
+                <span>Transaction hash of asset return</span>
+                <a :href="clainedTxHash?.explorerUrl" target="_blank" class="claimed-hash">{{
+                  clainedTxHash?.txHash
+                }}</a>
               </div>
             </template>
           </CommonButtonLineBodyInfo>
@@ -53,11 +60,11 @@
       </p>
 
       <p class="w-full text-left mb-4">
-        After a 14-day period from the time of your deposit, your assets will be automatically returned to the deposit
-        address on the source chain.
+        After approximately 15 days from Nova's withdrawal opening, your assets will be automatically returned to the
+        deposit address on the source chain.
       </p>
       <CommonButton type="submit" variant="primary" class="w-full" @click="isModalOpen = false"> Confirm </CommonButton>
-      <a class="mt-4">Contact for help</a>
+      <a class="mt-4" href="https://discord.com/invite/zklink" target="_blank">Contact for help</a>
     </div>
   </CommonModal>
 </template>
@@ -81,6 +88,7 @@ import { useOnboardStore } from "@/store/onboard";
 import { useZkSyncProviderStore } from "@/store/zksync/provider";
 import { shortenAddress } from "@/utils/formatters";
 import { ETH_ADDRESS } from "~/zksync-web3-nova/src/utils";
+import { failedDepositClaimedTxhashes } from "@/data/failedClaimedTxhashes";
 
 const props = defineProps({
   transfer: {
@@ -120,8 +128,9 @@ const chainsLabel = computed(() => {
 });
 
 const expectedCompleteTimestamp = computed(() => {
+  xw;
   console.log("transer: ", props.transfer);
-  return new Date(new Date(props.transfer.receivedAt).getTime() + 14 * 24 * 3600 * 1000).toISOString();
+  return new Date(1713088800000 + 15 * 24 * 3600 * 1000).toISOString(); // 15 days after withdrawal open
 });
 const computeAmount = computed(() => {
   return BigNumber.from(props.transfer.token.amount || "0").toString();
@@ -130,6 +139,21 @@ const token = computed(() => {
   return props.transfer.token;
 });
 
+const clainedTxHash = computed(() => {
+  for (const [key, value] of Object.entries(failedDepositClaimedTxhashes)) {
+    const item = value[props.transfer.hash];
+    if (item) {
+      const network = zkSyncNetworks.find((item) => item.key === key);
+      return {
+        explorerUrl: `${network?.l1Network?.blockExplorers?.default.url}/tx/${item}`,
+        txHash: item.substring(0, 6) + "..." + item.substring(item.length - 4),
+      };
+    }
+    continue;
+  }
+  return null;
+});
+
 const timeAgo = useTimeAgo(props.transfer.receivedAt);
 </script>
 
@@ -168,5 +192,15 @@ const timeAgo = useTimeAgo(props.transfer.receivedAt);
       }
     }
   }
+  .claimed-hash {
+    color: #1755f4;
+    text-align: right;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    text-decoration-line: underline;
+  }
 }
 </style>