Skip to content

Commit

Permalink
Merge branch 'main' into feat/issues-910-incorrect-balance-alias
Browse files Browse the repository at this point in the history
  • Loading branch information
begonaalvarezd authored Jan 31, 2024
2 parents 5d5e05e + f1553db commit 0b5c372
Show file tree
Hide file tree
Showing 10 changed files with 434 additions and 424 deletions.
14 changes: 4 additions & 10 deletions client/src/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet";
import { RouteComponentProps } from "react-router-dom";
import { AppRouteProps } from "./AppRouteProps";
import { buildMetaLabel, buildUtilities, getFooterItems, getPages, getFaviconHelmet, networkContextWrapper } from "./AppUtils";
import { buildMetaLabel, getFooterItems, getPages, getFaviconHelmet, networkContextWrapper } from "./AppUtils";
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";
Expand Down Expand Up @@ -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);
Expand All @@ -81,14 +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)}
utilities={buildUtilities(network ?? "", networks, identityResolverEnabled)}
protocolVersion={protocolVersion}
pages={pages}
/>
<div className="content">
{networks.length > 0 ? (
Expand Down
70 changes: 49 additions & 21 deletions client/src/app/AppUtils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 { NavigationRoute } from "./lib/interfaces";

export const networkContextWrapper = (currentNetwork: string | undefined, nodeInfo: IReducedNodeInfo | null, uiTheme: Theme | undefined) =>
function withNetworkContext(wrappedComponent: ReactNode) {
Expand All @@ -24,30 +25,57 @@ export const networkContextWrapper = (currentNetwork: string | undefined, nodeIn
) : null;
};

export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]) => {
const pages = [];
if (networks.length > 0 && currentNetwork !== undefined) {
pages.push({ label: "Explorer", url: `/${currentNetwork.network}/` });
pages.push({ label: "Visualizer", url: `/${currentNetwork.network}/visualizer/` });
export const getPages = (currentNetwork: INetwork | undefined, networks: INetwork[]): NavigationRoute[] => {
const hasNetworks = networks.length > 0 && currentNetwork !== undefined;

if (currentNetwork.hasStatisticsSupport) {
pages.push({ label: "Statistics", url: `/${currentNetwork.network}/statistics/` });
}
}

return pages;
};
const { network, hasStatisticsSupport } = currentNetwork ?? { network: "", hasStatisticsSupport: false };

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/` });
}
}
const routes: NavigationRoute[] = [
{
label: "Explorer",
url: `/${network}/`,
disabled: !hasNetworks,
},
{
label: "Visualizer",
url: `/${network}/visualizer/`,
disabled: !hasNetworks,
},
{
label: "Statistics",
url: `/${network}/statistics/`,
disabled: !hasStatisticsSupport || !hasNetworks,
},
{
label: "Utilities",
disabled: network !== CHRYSALIS_MAINNET || !hasNetworks,
routes: [
{ label: "Streams v0", url: `/${network}/streams/0/` },
{
label: "Decentralized Identifier",
url: `/${network}/identity-resolver/`,
disabled: network !== CHRYSALIS_MAINNET,
},
],
},
{
label: "EVM",
routes: [
{
label: "ShimmerEVM Explorer",
url: "https://explorer.evm.shimmer.network/",
isExternal: true,
},
{
label: "ShimmerEVM Testnet Testnet",
url: "https://explorer.evm.testnet.shimmer.network/",
isExternal: true,
},
],
},
];

return utilities;
return routes;
};

/**
Expand Down
28 changes: 18 additions & 10 deletions client/src/app/components/header/Header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -176,12 +180,13 @@ header {
color: var(--navbar-color);
font-weight: 600;
letter-spacing: 0.01em;
text-wrap: nowrap;
}

.icon {
display: flex;
align-items: center;
margin-left: 8px;
margin-left: 4px;

span {
margin-bottom: 3px;
Expand All @@ -204,14 +209,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;
Expand All @@ -221,7 +226,7 @@ header {
@include font-size(14px, 21px);
}

.utilities--item a {
.header-dropdown--item a {
color: $gray-7;
font-family: $inter;
letter-spacing: 0.5px;
Expand All @@ -231,11 +236,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;
}
}
Expand Down Expand Up @@ -296,7 +304,7 @@ header {

@include desktop-down {
.navigation--item,
.utilities--wrapper,
.header-dropdown--wrapper,
.search-input {
display: none;
}
Expand Down
Loading

0 comments on commit 0b5c372

Please sign in to comment.