From 1688eb9477bac5741e0fab4f6fd24ef7d7762f4c Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Mon, 8 Jul 2024 12:37:17 +0100 Subject: [PATCH] use components from react-components lib --- .../app/components/CustomColumnHeading.tsx | 18 +- .../components/Delegations/DelegateModal.tsx | 150 +++++------ .../Delegations/DelegationModal.tsx | 50 ++-- .../app/components/DetailTable.tsx | 78 +++--- .../components/MixNodes/Economics/Table.tsx | 40 +-- .../app/components/Nav/DesktopNav.tsx | 235 +++++++++--------- .../app/components/Nav/MobileNav.tsx | 72 +++--- .../app/errors/ErrorBoundaryContent.tsx | 14 +- .../app/network-components/gateways/page.tsx | 230 ++++++++--------- .../app/network-components/mixnodes/page.tsx | 192 +++++++------- explorer-nextjs/package.json | 6 +- 11 files changed, 543 insertions(+), 542 deletions(-) diff --git a/explorer-nextjs/app/components/CustomColumnHeading.tsx b/explorer-nextjs/app/components/CustomColumnHeading.tsx index e767db34c1..2069b93931 100644 --- a/explorer-nextjs/app/components/CustomColumnHeading.tsx +++ b/explorer-nextjs/app/components/CustomColumnHeading.tsx @@ -1,13 +1,13 @@ -import * as React from 'react' -import { Box, Typography } from '@mui/material' -import { useTheme } from '@mui/material/styles' -import { Tooltip } from '@nymproject/react/tooltip/Tooltip' +import * as React from "react"; +import { Box, Typography } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +import { Tooltip } from "@nymproject/react"; export const CustomColumnHeading: FCWithChildren<{ - headingTitle: string - tooltipInfo?: string + headingTitle: string; + tooltipInfo?: string; }> = ({ headingTitle, tooltipInfo }) => { - const theme = useTheme() + const theme = useTheme(); return ( @@ -26,5 +26,5 @@ export const CustomColumnHeading: FCWithChildren<{ {headingTitle} - ) -} + ); +}; diff --git a/explorer-nextjs/app/components/Delegations/DelegateModal.tsx b/explorer-nextjs/app/components/Delegations/DelegateModal.tsx index 5b453e8ad5..de5488a9ce 100644 --- a/explorer-nextjs/app/components/Delegations/DelegateModal.tsx +++ b/explorer-nextjs/app/components/Delegations/DelegateModal.tsx @@ -1,35 +1,35 @@ -'use client' +"use client"; -import React, { useState } from 'react' -import { Box, SxProps } from '@mui/material' -import { IdentityKeyFormField } from '@nymproject/react/mixnodes/IdentityKeyFormField' -import { CurrencyFormField } from '@nymproject/react/currency/CurrencyFormField' -import { CurrencyDenom, DecCoin } from '@nymproject/types' -import { useWalletContext } from '@/app/context/wallet' -import { urls } from '@/app/utils' -import { useDelegationsContext } from '@/app/context/delegations' -import { validateAmount } from '@/app/utils/currency' -import { SimpleModal } from './SimpleModal' -import { ModalListItem } from './ModalListItem' -import { DelegationModalProps } from './DelegationModal' +import React, { useState } from "react"; +import { Box, SxProps } from "@mui/material"; +import { IdentityKeyFormField } from "@nymproject/react"; +import { CurrencyFormField } from "@nymproject/react"; +import { CurrencyDenom, DecCoin } from "@nymproject/types"; +import { useWalletContext } from "@/app/context/wallet"; +import { urls } from "@/app/utils"; +import { useDelegationsContext } from "@/app/context/delegations"; +import { validateAmount } from "@/app/utils/currency"; +import { SimpleModal } from "./SimpleModal"; +import { ModalListItem } from "./ModalListItem"; +import { DelegationModalProps } from "./DelegationModal"; -const MIN_AMOUNT_TO_DELEGATE = 10 +const MIN_AMOUNT_TO_DELEGATE = 10; type Props = { - mixId: number - identityKey: string - header?: string - buttonText?: string - rewardInterval?: string - estimatedReward?: number - profitMarginPercentage?: string | null - nodeUptimePercentage?: number | null - denom: CurrencyDenom - sx?: SxProps - backdropProps?: object - onClose: () => void - onOk?: (delegationModalProps: DelegationModalProps) => void -} + mixId: number; + identityKey: string; + header?: string; + buttonText?: string; + rewardInterval?: string; + estimatedReward?: number; + profitMarginPercentage?: string | null; + nodeUptimePercentage?: number | null; + denom: CurrencyDenom; + sx?: SxProps; + backdropProps?: object; + onClose: () => void; + onOk?: (delegationModalProps: DelegationModalProps) => void; +}; export const DelegateModal = ({ mixId, @@ -40,106 +40,106 @@ export const DelegateModal = ({ sx, }: Props) => { const [amount, setAmount] = useState({ - amount: '10', - denom: 'nym', - }) - const [isValidated, setValidated] = useState(false) - const [errorAmount, setErrorAmount] = useState() + amount: "10", + denom: "nym", + }); + const [isValidated, setValidated] = useState(false); + const [errorAmount, setErrorAmount] = useState(); - const { address, balance } = useWalletContext() - const { handleDelegate } = useDelegationsContext() + const { address, balance } = useWalletContext(); + const { handleDelegate } = useDelegationsContext(); const validate = async () => { - let newValidatedValue = true - let errorAmountMessage + let newValidatedValue = true; + let errorAmountMessage; - if (amount && !(await validateAmount(amount.amount, '0'))) { - newValidatedValue = false - errorAmountMessage = 'Please enter a valid amount' + if (amount && !(await validateAmount(amount.amount, "0"))) { + newValidatedValue = false; + errorAmountMessage = "Please enter a valid amount"; } if (amount && +amount.amount < MIN_AMOUNT_TO_DELEGATE) { - errorAmountMessage = `Min. delegation amount: ${MIN_AMOUNT_TO_DELEGATE} ${denom.toUpperCase()}` - newValidatedValue = false + errorAmountMessage = `Min. delegation amount: ${MIN_AMOUNT_TO_DELEGATE} ${denom.toUpperCase()}`; + newValidatedValue = false; } if (!amount?.amount.length) { - newValidatedValue = false + newValidatedValue = false; } if (amount && balance.data && +balance.data - +amount.amount <= 0) { - errorAmountMessage = 'Not enough funds' - newValidatedValue = false + errorAmountMessage = "Not enough funds"; + newValidatedValue = false; } - setErrorAmount(errorAmountMessage) - setValidated(newValidatedValue) - } + setErrorAmount(errorAmountMessage); + setValidated(newValidatedValue); + }; const delegateToMixnode = async ({ delegationMixId, delegationAmount, }: { - delegationMixId: number - delegationAmount: string + delegationMixId: number; + delegationAmount: string; }) => { try { - const tx = await handleDelegate(delegationMixId, delegationAmount) - return tx + const tx = await handleDelegate(delegationMixId, delegationAmount); + return tx; } catch (e) { - console.error('Failed to delegate to mixnode', e) - throw e + console.error("Failed to delegate to mixnode", e); + throw e; } - } + }; const handleConfirm = async () => { if (mixId && amount && onOk) { onOk({ - status: 'loading', - }) + status: "loading", + }); try { if (!address) { - throw new Error('Please connect your wallet') + throw new Error("Please connect your wallet"); } const tx = await delegateToMixnode({ delegationMixId: mixId, delegationAmount: amount.amount, - }) + }); if (!tx) { - throw new Error('Failed to delegate') + throw new Error("Failed to delegate"); } onOk({ - status: 'success', - message: 'Delegation can take up to one hour to process', + status: "success", + message: "Delegation can take up to one hour to process", transactions: [ { - url: `${urls('MAINNET').blockExplorer}/transaction/${ + url: `${urls("MAINNET").blockExplorer}/transaction/${ tx.transactionHash }`, hash: tx.transactionHash, }, ], - }) + }); } catch (e) { - console.error('Failed to delegate', e) + console.error("Failed to delegate", e); onOk({ - status: 'error', + status: "error", message: (e as Error).message, - }) + }); } } - } + }; const handleAmountChanged = (newAmount: DecCoin) => { - setAmount(newAmount) - } + setAmount(newAmount); + }; React.useEffect(() => { - validate() - }, [amount, identityKey, mixId]) + validate(); + }, [amount, identityKey, mixId]); return ( - ) -} + ); +}; diff --git a/explorer-nextjs/app/components/Delegations/DelegationModal.tsx b/explorer-nextjs/app/components/Delegations/DelegationModal.tsx index 76c37a9e96..071b76a4e4 100644 --- a/explorer-nextjs/app/components/Delegations/DelegationModal.tsx +++ b/explorer-nextjs/app/components/Delegations/DelegationModal.tsx @@ -1,26 +1,26 @@ -import React from 'react' -import { Typography, SxProps, Stack } from '@mui/material' -import { Link } from '@nymproject/react/link/Link' -import { LoadingModal } from './LoadingModal' -import { ConfirmationModal } from './ConfirmationModal' -import { ErrorModal } from './ErrorModal' +import React from "react"; +import { Typography, SxProps, Stack } from "@mui/material"; +import { Link } from "@nymproject/react"; +import { LoadingModal } from "./LoadingModal"; +import { ConfirmationModal } from "./ConfirmationModal"; +import { ErrorModal } from "./ErrorModal"; export type DelegationModalProps = { - status: 'loading' | 'success' | 'error' | 'info' - message?: string + status: "loading" | "success" | "error" | "info"; + message?: string; transactions?: { - url: string - hash: string - }[] -} + url: string; + hash: string; + }[]; +}; export const DelegationModal: FCWithChildren< DelegationModalProps & { - open: boolean - onClose: () => void - sx?: SxProps - backdropProps?: object - children?: React.ReactNode + open: boolean; + onClose: () => void; + sx?: SxProps; + backdropProps?: object; + children?: React.ReactNode; } > = ({ status, @@ -32,18 +32,18 @@ export const DelegationModal: FCWithChildren< sx, backdropProps, }) => { - if (status === 'loading') - return + if (status === "loading") + return ; - if (status === 'error') { + if (status === "error") { return ( {children} - ) + ); } - if (status === 'info') { + if (status === "info") { return ( {message} - ) + ); } return ( @@ -91,5 +91,5 @@ export const DelegationModal: FCWithChildren< )} - ) -} + ); +}; diff --git a/explorer-nextjs/app/components/DetailTable.tsx b/explorer-nextjs/app/components/DetailTable.tsx index 73868b8ce9..e1389d1bdf 100644 --- a/explorer-nextjs/app/components/DetailTable.tsx +++ b/explorer-nextjs/app/components/DetailTable.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from "react"; import { Link, Paper, @@ -9,49 +9,49 @@ import { TableHead, TableRow, TableCellProps, -} from '@mui/material' -import { useTheme } from '@mui/material/styles' -import { Tooltip } from '@nymproject/react/tooltip/Tooltip' -import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard' -import { Box } from '@mui/system' -import { unymToNym } from '@/app/utils/currency' -import { GatewayEnrichedRowType } from './Gateways/Gateways' -import { MixnodeRowType } from './MixNodes' -import { StakeSaturationProgressBar } from './MixNodes/Economics/StakeSaturationProgressBar' +} from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +import { Tooltip } from "@nymproject/react"; +import { CopyToClipboard } from "@nymproject/react"; +import { Box } from "@mui/system"; +import { unymToNym } from "@/app/utils/currency"; +import { GatewayEnrichedRowType } from "./Gateways/Gateways"; +import { MixnodeRowType } from "./MixNodes"; +import { StakeSaturationProgressBar } from "./MixNodes/Economics/StakeSaturationProgressBar"; export type ColumnsType = { - field: string - title: string - headerAlign?: TableCellProps['align'] - width?: string | number - tooltipInfo?: string -} + field: string; + title: string; + headerAlign?: TableCellProps["align"]; + width?: string | number; + tooltipInfo?: string; +}; export interface UniversalTableProps { - tableName: string - columnsData: ColumnsType[] - rows: T[] + tableName: string; + columnsData: ColumnsType[]; + rows: T[]; } function formatCellValues(val: string | number, field: string) { - if (field === 'identity_key' && typeof val === 'string') { + if (field === "identity_key" && typeof val === "string") { return ( {val} - ) + ); } - if (field === 'bond') { - return unymToNym(val, 6) + if (field === "bond") { + return unymToNym(val, 6); } - if (field === 'owner') { + if (field === "owner") { return ( {val} - ) + ); } - if (field === 'stake_saturation') { - return + if (field === "stake_saturation") { + return ; } - return val + return val; } export const DetailTable: FCWithChildren<{ - tableName: string - columnsData: ColumnsType[] - rows: MixnodeRowType[] | GatewayEnrichedRowType[] + tableName: string; + columnsData: ColumnsType[]; + rows: MixnodeRowType[] | GatewayEnrichedRowType[]; }> = ({ tableName, columnsData, rows }: UniversalTableProps) => { - const theme = useTheme() + const theme = useTheme(); return ( @@ -87,9 +87,9 @@ export const DetailTable: FCWithChildren<{ key={field} sx={{ fontSize: 14, fontWeight: 600, width }} > - + {tooltipInfo && ( - + ( {columnsData?.map((data, index) => ( {formatCellValues( eachRow[columnsData[index].field], @@ -141,5 +141,5 @@ export const DetailTable: FCWithChildren<{
- ) -} + ); +}; diff --git a/explorer-nextjs/app/components/MixNodes/Economics/Table.tsx b/explorer-nextjs/app/components/MixNodes/Economics/Table.tsx index a70a013a24..c98b92147f 100644 --- a/explorer-nextjs/app/components/MixNodes/Economics/Table.tsx +++ b/explorer-nextjs/app/components/MixNodes/Economics/Table.tsx @@ -1,4 +1,4 @@ -import * as React from 'react' +import * as React from "react"; import { Paper, Table, @@ -8,26 +8,26 @@ import { TableHead, TableRow, Typography, -} from '@mui/material' -import { Box } from '@mui/system' -import { useTheme } from '@mui/material/styles' -import { Tooltip } from '@nymproject/react/tooltip/Tooltip' -import { EconomicsRowsType, EconomicsInfoRowWithIndex } from './types' -import { UniversalTableProps } from '@/app/components/DetailTable' -import { textColour } from '@/app/utils' +} from "@mui/material"; +import { Box } from "@mui/system"; +import { useTheme } from "@mui/material/styles"; +import { Tooltip } from "@nymproject/react"; +import { EconomicsRowsType, EconomicsInfoRowWithIndex } from "./types"; +import { UniversalTableProps } from "@/app/components/DetailTable"; +import { textColour } from "@/app/utils"; const formatCellValues = (value: EconomicsRowsType, field: string) => ( - - + + {value.value} -) +); export const DelegatorsInfoTable: FCWithChildren< UniversalTableProps > = ({ tableName, columnsData, rows }) => { - const theme = useTheme() + const theme = useTheme(); return ( @@ -39,7 +39,7 @@ export const DelegatorsInfoTable: FCWithChildren< key={field} sx={{ fontSize: 14, fontWeight: 600, width }} > - + {tooltipInfo && ( ( {columnsData?.map((_, index: number) => { - const { field } = columnsData[index] - const value: EconomicsRowsType = (eachRow as any)[field] + const { field } = columnsData[index]; + const value: EconomicsRowsType = (eachRow as any)[field]; return ( {formatCellValues(value, columnsData[index].field)} - ) + ); })} ))} - ) -} + ); +}; diff --git a/explorer-nextjs/app/components/Nav/DesktopNav.tsx b/explorer-nextjs/app/components/Nav/DesktopNav.tsx index abc4c0901a..c8c872b9b4 100644 --- a/explorer-nextjs/app/components/Nav/DesktopNav.tsx +++ b/explorer-nextjs/app/components/Nav/DesktopNav.tsx @@ -1,91 +1,92 @@ -'use client' +"use client"; -import * as React from 'react' -import { ExpandLess, ExpandMore, Menu } from '@mui/icons-material' -import { CSSObject, styled, Theme, useTheme } from '@mui/material/styles' -import { Link as MuiLink } from '@mui/material' -import Button from '@mui/material/Button' -import Box from '@mui/material/Box' -import ListItem from '@mui/material/ListItem' -import MuiDrawer from '@mui/material/Drawer' -import AppBar from '@mui/material/AppBar' -import Toolbar from '@mui/material/Toolbar' -import Typography from '@mui/material/Typography' -import List from '@mui/material/List' -import IconButton from '@mui/material/IconButton' -import ListItemButton from '@mui/material/ListItemButton' -import ListItemIcon from '@mui/material/ListItemIcon' -import ListItemText from '@mui/material/ListItemText' -import { NYM_WEBSITE } from '@/app/api/constants' -import { useMainContext } from '@/app/context/main' -import { MobileDrawerClose } from '@/app/icons/MobileDrawerClose' -import { NavOptionType, originalNavOptions } from '@/app/context/nav' -import { DarkLightSwitchDesktop } from '@/app/components/Switch' -import { Footer } from '@/app/components/Footer' -import { ConnectKeplrWallet } from '@/app/components/Wallet/ConnectKeplrWallet' -import { usePathname, useRouter } from 'next/navigation' +import * as React from "react"; +import { Menu } from "@mui/icons-material"; +import { CSSObject, styled, Theme, useTheme } from "@mui/material/styles"; +import { Link as MuiLink } from "@mui/material"; +import Button from "@mui/material/Button"; +import Box from "@mui/material/Box"; +import ListItem from "@mui/material/ListItem"; +import MuiDrawer from "@mui/material/Drawer"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Typography from "@mui/material/Typography"; +import List from "@mui/material/List"; +import IconButton from "@mui/material/IconButton"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import { NYM_WEBSITE } from "@/app/api/constants"; +import { useMainContext } from "@/app/context/main"; +import { MobileDrawerClose } from "@/app/icons/MobileDrawerClose"; +import { NavOptionType, originalNavOptions } from "@/app/context/nav"; +import { DarkLightSwitchDesktop } from "@/app/components/Switch"; +import { Footer } from "@/app/components/Footer"; +import { ConnectKeplrWallet } from "@/app/components/Wallet/ConnectKeplrWallet"; +import { usePathname, useRouter } from "next/navigation"; +import { NymLogo } from "@nymproject/react"; -const drawerWidth = 255 -const bannerHeight = 80 +const drawerWidth = 255; +const bannerHeight = 80; const openedMixin = (theme: Theme): CSSObject => ({ width: drawerWidth, - transition: theme.transitions.create('width', { + transition: theme.transitions.create("width", { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), - overflowX: 'hidden', -}) + overflowX: "hidden", +}); const closedMixin = (theme: Theme): CSSObject => ({ - transition: theme.transitions.create('width', { + transition: theme.transitions.create("width", { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - overflowX: 'hidden', + overflowX: "hidden", width: `calc(${theme.spacing(7)} + 1px)`, -}) +}); -const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'flex-end', +const DrawerHeader = styled("div")(({ theme }) => ({ + display: "flex", + alignItems: "center", + justifyContent: "flex-end", padding: theme.spacing(0, 1), height: 64, -})) +})); const Drawer = styled(MuiDrawer, { - shouldForwardProp: (prop) => prop !== 'open', + shouldForwardProp: (prop) => prop !== "open", })(({ theme, open }) => ({ width: drawerWidth, flexShrink: 0, - whiteSpace: 'nowrap', - boxSizing: 'border-box', + whiteSpace: "nowrap", + boxSizing: "border-box", ...(open && { ...openedMixin(theme), - '& .MuiDrawer-paper': openedMixin(theme), + "& .MuiDrawer-paper": openedMixin(theme), }), ...(!open && { ...closedMixin(theme), - '& .MuiDrawer-paper': closedMixin(theme), + "& .MuiDrawer-paper": closedMixin(theme), }), -})) +})); type ExpandableButtonType = { - title: string - url: string - isActive?: boolean - Icon?: React.ReactNode - nested?: NavOptionType[] - isChild?: boolean - isMobile: boolean - drawIsTempOpen: boolean - drawIsFixed: boolean - isExternalLink?: boolean - openDrawer: () => void - closeDrawer?: () => void - fixDrawerClose?: () => void -} + title: string; + url: string; + isActive?: boolean; + Icon?: React.ReactNode; + nested?: NavOptionType[]; + isChild?: boolean; + isMobile: boolean; + drawIsTempOpen: boolean; + drawIsFixed: boolean; + isExternalLink?: boolean; + openDrawer: () => void; + closeDrawer?: () => void; + fixDrawerClose?: () => void; +}; export const ExpandableButton: FCWithChildren = ({ title, @@ -101,33 +102,33 @@ export const ExpandableButton: FCWithChildren = ({ closeDrawer, fixDrawerClose, }) => { - const { palette } = useTheme() - const pathname = usePathname() - const router = useRouter() + const { palette } = useTheme(); + const pathname = usePathname(); + const router = useRouter(); const handleClick = () => { - if (title === 'Network Components') { - return undefined + if (title === "Network Components") { + return undefined; } if (isExternalLink) { - window.open(url, '_blank') + window.open(url, "_blank"); - return undefined + return undefined; } if (!isExternalLink) { - router.push(url, {}) + router.push(url, {}); } if (closeDrawer) { - closeDrawer() + closeDrawer(); } - } + }; const selectedStyle = { background: palette.nym.networkExplorer.nav.selected.main, borderRight: `3px solid ${palette.nym.highlight}`, - } + }; return ( <> @@ -135,12 +136,12 @@ export const ExpandableButton: FCWithChildren = ({ disablePadding disableGutters sx={{ - borderBottom: isChild ? 'none' : '1px solid rgba(255, 255, 255, 0.1)', + borderBottom: isChild ? "none" : "1px solid rgba(255, 255, 255, 0.1)", ...(pathname === url ? selectedStyle : { background: palette.nym.networkExplorer.nav.background, - borderRight: 'none', + borderRight: "none", }), }} > @@ -151,10 +152,10 @@ export const ExpandableButton: FCWithChildren = ({ pb: 2, background: isChild ? palette.nym.networkExplorer.nav.selected.nested - : 'none', + : "none", }} > - {Icon} + {Icon} = ({ /> ))} - ) -} + ); +}; export const Nav: FCWithChildren = ({ children }) => { - const { environment } = useMainContext() - const [drawerIsOpen, setDrawerToOpen] = React.useState(false) - const [fixedOpen, setFixedOpen] = React.useState(false) + const { environment } = useMainContext(); + const [drawerIsOpen, setDrawerToOpen] = React.useState(false); + const [fixedOpen, setFixedOpen] = React.useState(false); // Set maintenance banner to false by default to don't display it - const [openMaintenance, setOpenMaintenance] = React.useState(false) - const theme = useTheme() + const [openMaintenance, setOpenMaintenance] = React.useState(false); + const theme = useTheme(); const explorerName = environment ? `${environment} Explorer` - : 'Mainnet Explorer' + : "Mainnet Explorer"; const switchNetworkText = - environment === 'mainnet' ? 'Switch to Testnet' : 'Switch to Mainnet' + environment === "mainnet" ? "Switch to Testnet" : "Switch to Mainnet"; const switchNetworkLink = - environment === 'mainnet' - ? 'https://sandbox-explorer.nymtech.net' - : 'https://explorer.nymtech.net' + environment === "mainnet" + ? "https://sandbox-explorer.nymtech.net" + : "https://explorer.nymtech.net"; const fixDrawerOpen = () => { - setFixedOpen(true) - setDrawerToOpen(true) - } + setFixedOpen(true); + setDrawerToOpen(true); + }; const fixDrawerClose = () => { - setFixedOpen(false) - setDrawerToOpen(false) - } + setFixedOpen(false); + setDrawerToOpen(false); + }; const tempDrawerOpen = () => { if (!fixedOpen) { - setDrawerToOpen(true) + setDrawerToOpen(true); } - } + }; const tempDrawerClose = () => { if (!fixedOpen) { - setDrawerToOpen(false) + setDrawerToOpen(false); } - } + }; return ( - + { - {/* */} + @@ -274,7 +275,7 @@ export const Nav: FCWithChildren = ({ children }) => { href={switchNetworkLink} sx={{ borderRadius: 2, - textTransform: 'none', + textTransform: "none", width: 150, ml: 4, fontSize: 14, @@ -288,19 +289,19 @@ export const Nav: FCWithChildren = ({ children }) => { @@ -324,10 +325,10 @@ export const Nav: FCWithChildren = ({ children }) => { > {