From 92866f40b81bb294b5bb49dd38471b585062d4b8 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 21 Mar 2023 22:10:35 +0100
Subject: [PATCH] Better approach

---
 packages/bridge-ui/src/App.svelte             |  1 +
 packages/bridge-ui/src/pages/home/Home.svelte | 13 +++++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index efcacff5f57..f2abd6c37fa 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -242,6 +242,7 @@
     pausable: false,
   };
 
+  // TODO: Not found route
   const routes = {
     '/:tab?': wrap({
       component: Home,
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 6188b595384..ea8e33340d7 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -10,12 +10,17 @@
   let bridgeWidth: number;
   let bridgeHeight: number;
 
-  $: activeTab = $location.replace('/', '').startsWith('transactions')
-    ? 'transactions'
-    : 'bridge';
+  // TODO: think about a more general approach here.
+  //       We're assuming we have two tabs. The base location
+  //       corresponds with `bridge` tab => `/`, otherwise we're
+  //       opening the second tab `transactions` => `/transactions`.
+  //       What if we add a new tab?. Also, routes are coupled to
+  //       tab's name. We might want to have this configuration
+  //       somewhere.
+  $: activeTab = $location === '/' ? 'bridge' : 'transactions';
 
   // TODO: do we really need all these tricks to style containers
-  //       Rethink this part: fluid, fixing on small screens
+  //       Rethink this part: fluid, fixing on bigger screens
   $: isBridge = activeTab === 'bridge';
   $: styleContainer = isBridge ? '' : `min-width: ${bridgeWidth}px;`;
   $: fitClassContainer = isBridge ? 'max-w-fit' : 'w-fit';