From ecbc896974dc33e114ded164f56163f6cbf27960 Mon Sep 17 00:00:00 2001
From: Shadab Khan <shadab@taiko.xyz>
Date: Thu, 9 Mar 2023 19:23:11 +0530
Subject: [PATCH] feat(bridge-ui): support route param to directly open
 transactions tab

---
 packages/bridge-ui/src/App.svelte             |  2 +-
 packages/bridge-ui/src/pages/home/Home.svelte | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index cca26a6823..12b7429747 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -251,7 +251,7 @@
   };
 
   const routes = {
-    "/": wrap({
+    "/:tab?": wrap({
       component: Home,
       props: {},
       userData: {},
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 9c5d42a0e0..63fd6c8a0b 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
+  import { link, location } from 'svelte-spa-router';
   import { transactions } from '../../store/transactions';
   import BridgeForm from '../../components/form/BridgeForm.svelte';
   import TaikoBanner from '../../components/TaikoBanner.svelte';
   import Transactions from '../../components/Transactions.svelte';
 
-  let activeTab: string = 'bridge';
   let bridgeWidth: number;
   let bridgeHeight: number;
-
+  
+  $: activeTab = $location.replace('/', '').startsWith('transactions') ? 'transactions' : 'bridge';
   $: isBridge = activeTab === 'bridge';
   $: styleContainer = isBridge ? '' : `min-width: ${bridgeWidth}px;`;
   $: fitClassContainer = isBridge ? 'max-w-fit' : 'w-fit';
@@ -28,13 +29,13 @@
     style={styleInner}>
     <!-- TODO: extract this tab component into a general one? -->
     <div class="tabs block mb-4">
-      <span
+      <a
         class="tab tab-bordered {isBridge ? 'tab-active' : ''}"
-        on:click={() => (activeTab = 'bridge')}>Bridge</span>
-      <span
+        href="/" use:link>Bridge</a>
+      <a
         class="tab tab-bordered {!isBridge ? 'tab-active' : ''}"
-        on:click={() => (activeTab = 'transactions')}
-        >Transactions ({$transactions.length})</span>
+        href="/transactions" use:link
+        >Transactions ({$transactions.length})</a>
     </div>
 
     {#if activeTab === 'bridge'}