From e3c39004f034db099bd4380b8bdb702785fabf54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20T=C3=B3rz?= <tomasz.torz@l2beat.com>
Date: Thu, 3 Aug 2023 13:28:25 +0200
Subject: [PATCH] fix bug

---
 .../src/view/components/page/Navbar.tsx       | 21 ++++++++++---------
 .../src/view/components/page/Page.tsx         |  4 +++-
 .../pages/home/HomeL2TransactionsPage.tsx     |  1 +
 .../src/view/pages/home/HomeOffersPage.tsx    |  1 +
 .../frontend/src/view/pages/home/HomePage.tsx |  3 ++-
 .../view/pages/home/HomeStateUpdatesPage.tsx  |  1 +
 .../view/pages/home/HomeTransactionsPage.tsx  |  1 +
 .../PerpetualL2TransactionDetailsPage.tsx     |  1 +
 .../pages/state-update/StateUpdatePage.tsx    |  1 +
 .../transaction/OfferAndForcedTradePage.tsx   |  7 +++++--
 .../PerpetualForcedWithdrawalPage.tsx         |  1 +
 .../transaction/RegularWithdrawalPage.tsx     |  1 +
 .../transaction/SpotForcedWithdrawalPage.tsx  |  1 +
 13 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/view/components/page/Navbar.tsx b/packages/frontend/src/view/components/page/Navbar.tsx
index 6d8d3dcff..4106b38a7 100644
--- a/packages/frontend/src/view/components/page/Navbar.tsx
+++ b/packages/frontend/src/view/components/page/Navbar.tsx
@@ -11,10 +11,14 @@ import { NavLink, NavLinkTitle } from './NavLink'
 interface NavbarProps {
   readonly context: PageContext
   readonly searchBar: boolean
-  readonly path: string
+  readonly activeNavItem: NavLinkTitle | undefined
 }
 
-export function Navbar({ searchBar = true, context, path }: NavbarProps) {
+export function Navbar({
+  searchBar = true,
+  context,
+  activeNavItem,
+}: NavbarProps) {
   const { user, instanceName, tradingMode, chainId } = context
   const isMainnet = chainId === 1
   const navItems = getNavLinks(context.showL2Transactions)
@@ -35,11 +39,8 @@ export function Navbar({ searchBar = true, context, path }: NavbarProps) {
         </a>
         <div className="absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform items-center xl:flex">
           {navItems.map((item) => {
-            const isSelected =
-              path.startsWith(item.href) ||
-              (item.activeOn
-                ? item.activeOn.some((link) => path.startsWith(link))
-                : false)
+            const isSelected = item.title === activeNavItem
+
             return (
               <NavLink
                 key={item.title}
@@ -89,8 +90,9 @@ export function Navbar({ searchBar = true, context, path }: NavbarProps) {
 }
 
 function getNavLinks(showL2Transactions: boolean) {
-  const navItems: { href: string; title: NavLinkTitle; activeOn?: string[] }[] =
-    [{ href: '/home', title: 'Home' }]
+  const navItems: { href: string; title: NavLinkTitle }[] = [
+    { href: '/', title: 'Home' },
+  ]
 
   if (showL2Transactions) {
     navItems.push({ href: '/l2-transactions', title: 'Live transactions' })
@@ -101,7 +103,6 @@ function getNavLinks(showL2Transactions: boolean) {
     {
       href: '/forced-transactions',
       title: 'Forced transactions',
-      activeOn: ['/transactions'],
     },
     { href: '/offers', title: 'Offers' }
   )
diff --git a/packages/frontend/src/view/components/page/Page.tsx b/packages/frontend/src/view/components/page/Page.tsx
index f1d9f3592..46ff7952f 100644
--- a/packages/frontend/src/view/components/page/Page.tsx
+++ b/packages/frontend/src/view/components/page/Page.tsx
@@ -6,9 +6,11 @@ import { Footer } from './Footer'
 import { FreezeBanner } from './FreezeBanner'
 import { Head } from './Head'
 import { Navbar } from './Navbar'
+import { NavLinkTitle } from './NavLink'
 
 interface Props {
   context: PageContext | PageContextWithUser
+  activeNavItem?: NavLinkTitle
   withoutSearch?: boolean
   description: string
   image?: string
@@ -46,7 +48,7 @@ export function Page(props: Props) {
         <Navbar
           searchBar={!props.withoutSearch}
           context={props.context}
-          path={props.path}
+          activeNavItem={props.activeNavItem}
         />
         <FreezeBanner freezeStatus={props.context.freezeStatus} />
         {props.children}
diff --git a/packages/frontend/src/view/pages/home/HomeL2TransactionsPage.tsx b/packages/frontend/src/view/pages/home/HomeL2TransactionsPage.tsx
index b86cf62ea..f2555e535 100644
--- a/packages/frontend/src/view/pages/home/HomeL2TransactionsPage.tsx
+++ b/packages/frontend/src/view/pages/home/HomeL2TransactionsPage.tsx
@@ -27,6 +27,7 @@ function HomeL2TransactionsPage(props: HomeL2TransactionsPageProps) {
   return (
     <Page
       path={L2_TRANSACTIONS_TABLE_PROPS.path}
+      activeNavItem="Live transactions"
       description="Live transactions"
       context={props.context}
     >
diff --git a/packages/frontend/src/view/pages/home/HomeOffersPage.tsx b/packages/frontend/src/view/pages/home/HomeOffersPage.tsx
index 5361e1082..2577b34b5 100644
--- a/packages/frontend/src/view/pages/home/HomeOffersPage.tsx
+++ b/packages/frontend/src/view/pages/home/HomeOffersPage.tsx
@@ -24,6 +24,7 @@ function HomeOffersPage(props: HomeOffersPageProps) {
   return (
     <Page
       path={OFFER_TABLE_PROPS.path}
+      activeNavItem="Offers"
       description="All available trade offers"
       context={props.context}
     >
diff --git a/packages/frontend/src/view/pages/home/HomePage.tsx b/packages/frontend/src/view/pages/home/HomePage.tsx
index da20dad0f..cd2775e8e 100644
--- a/packages/frontend/src/view/pages/home/HomePage.tsx
+++ b/packages/frontend/src/view/pages/home/HomePage.tsx
@@ -52,7 +52,8 @@ function HomePage(props: HomePageProps) {
 
   return (
     <Page
-      path="/home"
+      path="/"
+      activeNavItem="Home"
       description="This explorer allows you to view everything happening on dYdX from the perspective of the Ethereum blockchain. Browse positions, forced transaction and submit your own forced trades and withdrawals."
       context={props.context}
       withoutSearch
diff --git a/packages/frontend/src/view/pages/home/HomeStateUpdatesPage.tsx b/packages/frontend/src/view/pages/home/HomeStateUpdatesPage.tsx
index 0f5753554..d5f2cda3a 100644
--- a/packages/frontend/src/view/pages/home/HomeStateUpdatesPage.tsx
+++ b/packages/frontend/src/view/pages/home/HomeStateUpdatesPage.tsx
@@ -27,6 +27,7 @@ function HomeStateUpdatesPage(props: HomeStateUpdatesPageProps) {
   return (
     <Page
       path={STATE_UPDATE_TABLE_PROPS.path}
+      activeNavItem="State updates"
       description="Latest state updates"
       context={props.context}
     >
diff --git a/packages/frontend/src/view/pages/home/HomeTransactionsPage.tsx b/packages/frontend/src/view/pages/home/HomeTransactionsPage.tsx
index b144c2147..4fde30303 100644
--- a/packages/frontend/src/view/pages/home/HomeTransactionsPage.tsx
+++ b/packages/frontend/src/view/pages/home/HomeTransactionsPage.tsx
@@ -27,6 +27,7 @@ function HomeTransactionsPage(props: HomeTransactionsPageProps) {
   return (
     <Page
       path={FORCED_TRANSACTION_TABLE_PROPS.path}
+      activeNavItem="Forced transactions"
       description="All forced transactions"
       context={props.context}
     >
diff --git a/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx b/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx
index 515e3a640..10943b946 100644
--- a/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx
+++ b/packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx
@@ -40,6 +40,7 @@ export function PerpetualL2TransactionDetailsPage(
   return (
     <Page
       context={props.context}
+      activeNavItem="Live transactions"
       description={`Details of ${l2TransactionTypeToText(
         props.transaction.originalTransaction.type
       )} l2 transaction`}
diff --git a/packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx b/packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx
index 187fe219a..1ddabff6b 100644
--- a/packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx
+++ b/packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx
@@ -46,6 +46,7 @@ function StateUpdatePage(props: StateUpdatePageProps) {
   return (
     <Page
       path={`/state-updates/${props.id}`}
+      activeNavItem="State updates"
       description="Show state update details, including balance changes, transactions and prices"
       context={props.context}
     >
diff --git a/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx b/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx
index 750c5a4f2..bc36d0ec1 100644
--- a/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx
+++ b/packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx
@@ -87,6 +87,7 @@ function OfferAndForcedTradePage(props: OfferAndForcedTradePageProps) {
   return (
     <Page
       context={props.context}
+      activeNavItem={common.activeNavItem}
       path={common.path}
       description={common.description}
     >
@@ -262,13 +263,15 @@ function getCommon(transactionHash?: Hash256, offerId?: string) {
     return {
       path: `/transactions/${transactionHash.toString()}`,
       description: `Details of the ${transactionHash.toString()} forced trade transaction`,
-    }
+      activeNavItem: 'Forced transactions',
+    } as const
   }
   if (offerId) {
     return {
       path: `/offers/${offerId}`,
       description: `Details of the ${offerId} forced trade offer`,
-    }
+      activeNavItem: 'Offers',
+    } as const
   }
   throw new Error('No transaction hash or offer id')
 }
diff --git a/packages/frontend/src/view/pages/transaction/PerpetualForcedWithdrawalPage.tsx b/packages/frontend/src/view/pages/transaction/PerpetualForcedWithdrawalPage.tsx
index 3fe9aef9c..982dffb1f 100644
--- a/packages/frontend/src/view/pages/transaction/PerpetualForcedWithdrawalPage.tsx
+++ b/packages/frontend/src/view/pages/transaction/PerpetualForcedWithdrawalPage.tsx
@@ -57,6 +57,7 @@ function PerpetualForcedWithdrawalPage(
   return (
     <Page
       context={props.context}
+      activeNavItem="Forced transactions"
       path={`/transactions/${props.transactionHash.toString()}`}
       description={`Details of the ${props.transactionHash.toString()} forced withdrawal transaction`}
     >
diff --git a/packages/frontend/src/view/pages/transaction/RegularWithdrawalPage.tsx b/packages/frontend/src/view/pages/transaction/RegularWithdrawalPage.tsx
index ab4fc66d5..376b6868f 100644
--- a/packages/frontend/src/view/pages/transaction/RegularWithdrawalPage.tsx
+++ b/packages/frontend/src/view/pages/transaction/RegularWithdrawalPage.tsx
@@ -44,6 +44,7 @@ function RegularWithdrawalPage(props: RegularWithdrawalPageProps) {
   return (
     <Page
       context={props.context}
+      activeNavItem="Forced transactions"
       path={`/transactions/${props.transactionHash.toString()}`}
       description={`Details of the ${props.transactionHash.toString()} withdrawal transaction`}
     >
diff --git a/packages/frontend/src/view/pages/transaction/SpotForcedWithdrawalPage.tsx b/packages/frontend/src/view/pages/transaction/SpotForcedWithdrawalPage.tsx
index f4186bab2..eafe6be8a 100644
--- a/packages/frontend/src/view/pages/transaction/SpotForcedWithdrawalPage.tsx
+++ b/packages/frontend/src/view/pages/transaction/SpotForcedWithdrawalPage.tsx
@@ -52,6 +52,7 @@ function SpotForcedWithdrawalPage(props: SpotForcedWithdrawalPageProps) {
   return (
     <Page
       context={props.context}
+      activeNavItem="Forced transactions"
       path={`/transactions/${props.transactionHash.toString()}`}
       description={`Details of the ${props.transactionHash.toString()} forced withdrawal transaction`}
     >