From 5fc513aba9c68ccc0d66de23a0d305c4e6a86a8b Mon Sep 17 00:00:00 2001
From: Nicolas Villanueva <1890113+MexicanAce@users.noreply.github.com>
Date: Mon, 25 Nov 2024 02:06:44 -0800
Subject: [PATCH] feat: add nested routing (#324)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What ❔

Add nested routing for tabs within tabs

## Why ❔

So we can provide links directly to sub-tabs. For example, I need a link
directly to the `Read` tab of a verified contract, that would be:
`https://explorer.zksync.io/address/0x000000000000000000000000000000000000800A#contract#read`

## Checklist

<!-- Check your PR fulfills the following items. -->
<!-- For draft PRs check the boxes as you complete them. -->

- [x] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [x] Tests for the changes have been added / updated.
- [x] Documentation comments have been added / updated.

## Evidence


https://github.com/user-attachments/assets/6a3b4e6e-2e9e-47db-96f2-5a7e2e1ec161
---
 packages/app/src/components/common/Tabs.vue   | 22 +++++++++++++++++--
 .../components/contract/ContractInfoTab.vue   |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/common/Tabs.vue b/packages/app/src/components/common/Tabs.vue
index 8ef40b5d31..e909374e7f 100644
--- a/packages/app/src/components/common/Tabs.vue
+++ b/packages/app/src/components/common/Tabs.vue
@@ -56,23 +56,41 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  hasNestedRoute: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const route = useRoute();
 const router = useRouter();
 
-const currentTabHash = ref(route?.hash && props.hasRoute ? route?.hash : props.tabs[0].hash);
+const calculateCurrrentTabHash = () => {
+  let tabHash = route?.hash && props.hasRoute ? route?.hash : props.tabs[0].hash;
+  if (route?.hash && route?.hash.split("#").length > 2) {
+    // route.hash has multiple hashes (ex: #contracts#read)
+    if (props.hasNestedRoute) {
+      tabHash = `#${route?.hash.split("#").at(-1)}`;
+    } else {
+      tabHash = `#${route?.hash.split("#").at(1)}`;
+    }
+  }
+  return tabHash;
+};
+const currentTabHash = ref(calculateCurrrentTabHash());
 
 const setTab = (tab: Tab) => {
   currentTabHash.value = tab.hash;
   if (props.hasRoute) {
     router.push({ hash: `${tab.hash}` });
+  } else if (props.hasNestedRoute) {
+    router.push({ hash: `#${route?.hash.split("#")[1]}${tab.hash}` });
   }
 };
 
 watchEffect(() => {
   if (props.hasRoute) {
-    currentTabHash.value = route?.hash ? route?.hash : props.tabs[0].hash;
+    currentTabHash.value = calculateCurrrentTabHash();
   }
 });
 </script>
diff --git a/packages/app/src/components/contract/ContractInfoTab.vue b/packages/app/src/components/contract/ContractInfoTab.vue
index fdf7c21a86..f35b7786b9 100644
--- a/packages/app/src/components/contract/ContractInfoTab.vue
+++ b/packages/app/src/components/contract/ContractInfoTab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="contract-info-tabs-container">
-    <Tabs v-if="tabs.length" class="contract-info-tabs" :tabs="tabs" :has-route="false">
+    <Tabs v-if="tabs.length" class="contract-info-tabs" :tabs="tabs" :has-route="false" :has-nested-route="true">
       <template #tab-1-content>
         <ContractBytecode :contract="contract" />
       </template>