From b4c31cd8566b834cbf83a434c705fb281d375d12 Mon Sep 17 00:00:00 2001
From: shadab-taiko <108871478+shadab-taiko@users.noreply.github.com>
Date: Thu, 9 Mar 2023 19:41:49 +0530
Subject: [PATCH] feat(bridge-ui): support route param to directly open
transactions tab (#13281)
---
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 cca26a6823c..12b7429747c 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 9c5d42a0e02..63fd6c8a0b6 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'}