refactor: simplify header component

iotaledger · Jan 25, 2024 · 4642a0f · 4642a0f
1 parent 90fea7a
commit 4642a0f
Show file tree

Hide file tree

Showing 10 changed files with 291 additions and 272 deletions.
diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
@@ -8,7 +8,6 @@ import Disclaimer from "./components/Disclaimer";
 import Footer from "./components/footer/Footer";
 import ShimmerFooter from "./components/footer/ShimmerFooter";
 import Header from "./components/header/Header";
-import SearchInput from "./components/SearchInput";
 import buildAppRoutes from "./routes";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { isShimmerUiTheme } from "~helpers/networkHelper";
@@ -62,6 +61,7 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
     }
 
     const routes = buildAppRoutes(networkConfig?.protocolVersion ?? "", withNetworkContext);
+    const pages = getPages(networkConfig, networks);
 
     const metaLabel = buildMetaLabel(currentNetworkName);
     const faviconHelmet = getFaviconHelmet(isShimmer);
@@ -81,13 +81,8 @@ const App: React.FC<RouteComponentProps<AppRouteProps>> = ({
                 networks={networks}
                 action={action}
                 history={history}
-                search={
-                    <SearchInput
-                        onSearch={(query) => history.push(`/${currentNetworkName}/search/${query}`)}
-                        protocolVersion={networkConfig?.protocolVersion ?? STARDUST}
-                    />
-                }
-                pages={getPages(networkConfig, networks)}
+                protocolVersion={protocolVersion}
+                pages={pages}
             />
             <div className="content">
                 {networks.length > 0 ? (

diff --git a/client/src/app/AppUtils.tsx b/client/src/app/AppUtils.tsx
@@ -5,6 +5,7 @@ import { INetwork } from "~models/config/INetwork";
 import { ALPHANET, CHRYSALIS_MAINNET, DEVNET, LEGACY_MAINNET, MAINNET, NetworkType, SHIMMER, TESTNET } from "~models/config/networkType";
 import { IOTA_UI, Theme } from "~models/config/uiTheme";
 import { IReducedNodeInfo } from "~services/nodeInfoService";
+import { IDropdownRoute, NavigationRoute } from "./lib/interfaces";
 
 export const networkContextWrapper = (currentNetwork: string | undefined, nodeInfo: IReducedNodeInfo | null, uiTheme: Theme | undefined) =>
     function withNetworkContext(wrappedComponent: ReactNode) {
@@ -24,30 +25,62 @@ export const networkContextWrapper = (currentNetwork: string | undefined, nodeIn
         ) : null;
     };
 
-export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]) => {
-    const pages = [];
+export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]): NavigationRoute[] => {
+    const pages: NavigationRoute[] = [];
+
     if (networks.length > 0 && currentNetwork !== undefined) {
-        pages.push({ label: "Explorer", url: `/${currentNetwork.network}/` });
-        pages.push({ label: "Visualizer", url: `/${currentNetwork.network}/visualizer/` });
+        const { network, hasStatisticsSupport } = currentNetwork;
 
-        if (currentNetwork.hasStatisticsSupport) {
-            pages.push({ label: "Statistics", url: `/${currentNetwork.network}/statistics/` });
-        }
+        const networkRoutes: NavigationRoute[] = [
+            {
+                label: "Explorer",
+                url: `/${network}/`,
+            },
+            {
+                label: "Visualizer",
+                url: `/${network}/visualizer/`,
+            },
+            {
+                label: "Statistics",
+                url: `/${network}/statistics/`,
+                disabled: !hasStatisticsSupport,
+            },
+            {
+                label: "Utilities",
+                disabled: network !== CHRYSALIS_MAINNET,
+                routes: [
+                    { label: "Streams v0", url: `/${network}/streams/0/` },
+                    {
+                        label: "Decentralized Identifier",
+                        url: `/${network}/identity-resolver/`,
+                        disabled: network !== CHRYSALIS_MAINNET,
+                    },
+                ],
+            },
+        ];
+
+        pages.push(...networkRoutes);
     }
 
-    return pages;
-};
+    const EVM_EXPLORER_DROPDOWN: IDropdownRoute = {
+        label: "EVM Explorer",
+        routes: [
+            {
+                label: "EVM Explorer",
+                url: "https://explorer.evm.shimmer.network/",
+                isExternal: true,
+            },
+            {
+                label: "EVM Explorer Testnet",
+                url: "https://explorer.evm.testnet.shimmer.network/",
+                isExternal: true,
+            },
+        ],
+    };
 
-export const buildUtilities = (currentNetwork: string, networks: INetwork[], identityResolverEnabled: boolean) => {
-    const utilities = [];
-    if (networks.length > 0) {
-        utilities.push({ label: "Streams v0", url: `/${currentNetwork}/streams/0/` });
-        if (identityResolverEnabled) {
-            utilities.push({ label: "Decentralized Identifier", url: `/${currentNetwork}/identity-resolver/` });
-        }
-    }
+    pages.push(EVM_EXPLORER_DROPDOWN);
 
-    return utilities;
+    return pages;
 };
 
 /**

diff --git a/client/src/app/components/header/Header.scss b/client/src/app/components/header/Header.scss
@@ -150,21 +150,25 @@ header {
         }
 
         .navigation--item,
-        .utilities--wrapper {
+        .header-dropdown--wrapper {
             @include font-size(14px, 21px);
 
             display: flex;
             align-items: center;
             height: 100%;
-            margin-left: 40px;
             color: var(--navbar-color);
             font-family: $metropolis;
             font-weight: 600;
             letter-spacing: 0.01em;
+            margin-left: 32px;
+
+            &:first-child {
+                margin-left: 40px;
+            }
         }
 
-        .utilities--wrapper {
-            .utilities--dropdown {
+        .header-dropdown--wrapper {
+            .header-dropdown--dropdown {
                 display: flex;
                 align-items: center;
                 font-family: $metropolis;
@@ -181,7 +185,7 @@ header {
                 .icon {
                     display: flex;
                     align-items: center;
-                    margin-left: 8px;
+                    margin-left: 4px;
 
                     span {
                         margin-bottom: 3px;
@@ -204,14 +208,14 @@ header {
                 }
             }
 
-            .utilities {
+            .header-dropdown {
                 padding: 64px 120px 120px 120px;
 
                 & * {
                     margin-bottom: 8px;
                 }
 
-                .utilities--label {
+                .header-dropdown--label {
                     color: var(--navbar-color);
                     font-family: $metropolis;
                     font-weight: 700;
@@ -221,7 +225,7 @@ header {
                     @include font-size(14px, 21px);
                 }
 
-                .utilities--item a {
+                .header-dropdown--item a {
                     color: $gray-7;
                     font-family: $inter;
                     letter-spacing: 0.5px;
@@ -231,11 +235,14 @@ header {
             }
         }
 
-        .utilities--mobile {
+        .header-dropdown--mobile {
             transition: opacity 0.3s ease-in-out;
             opacity: 0;
+            height: 0;
+            overflow: hidden;
 
             &.opened {
+                height: auto;
                 opacity: 1;
             }
         }
@@ -296,7 +303,7 @@ header {
 
         @include desktop-down {
             .navigation--item,
-            .utilities--wrapper,
+            .header-dropdown--wrapper,
             .search-input {
                 display: none;
             }