diff --git a/packages/neuron-ui/src/components/WalletWizard/index.tsx b/packages/neuron-ui/src/components/WalletWizard/index.tsx index 5b2e12179f..5b713b372c 100644 --- a/packages/neuron-ui/src/components/WalletWizard/index.tsx +++ b/packages/neuron-ui/src/components/WalletWizard/index.tsx @@ -264,7 +264,6 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch, isSettin } else { navigate(-1) } - navigate(-1) }, [changeStep, type]) return ( diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx index c406b36f87..6de63580c2 100644 --- a/packages/neuron-ui/src/containers/Navbar/index.tsx +++ b/packages/neuron-ui/src/containers/Navbar/index.tsx @@ -1,26 +1,23 @@ -import React, { useCallback } from 'react' +import React, { useCallback, useState } from 'react' import { createPortal } from 'react-dom' import { useNavigate, useLocation } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { useState as useGlobalState } from 'states' - -import { openExternal, showSettings } from 'services/remote' - -import NetworkStatus from 'components/NetworkStatus' -import SyncStatus from 'components/SyncStatus' -import RingProgresBar from 'widgets/RingProgressBar' -import { ReactComponent as ExperimentalIcon } from 'widgets/Icons/Flask.svg' - +import Logo from 'widgets/Icons/Logo.png' import { - RoutePath, - getSyncLeftTime, - localNumberFormatter, - useOnLocaleChange, - SyncStatus as SyncStatusEnum, - ConnectionStatus, - getExplorerUrl, - isMainnet, -} from 'utils' + Overview, + Send, + Receive, + History, + NervosDAO, + Settings, + Experimental, + ArrowOpenRight, + MenuExpand, +} from 'widgets/Icons/icon' +import { showSettings } from 'services/remote' +import { RoutePath, useOnLocaleChange } from 'utils' +import Tooltip from 'widgets/Tooltip' import styles from './navbar.module.scss' @@ -39,105 +36,85 @@ const throttledShowSettings = (() => { })() const menuItems = [ - { name: 'navbar.overview', key: RoutePath.Overview.slice(1), url: RoutePath.Overview, experimental: false }, - { name: 'navbar.send', key: RoutePath.Send.slice(1), url: RoutePath.Send, experimental: false }, - { name: 'navbar.receive', key: RoutePath.Receive.slice(1), url: RoutePath.Receive, experimental: false }, - { name: 'navbar.history', key: RoutePath.History.slice(1), url: RoutePath.History, experimental: false }, - { name: 'navbar.nervos-dao', key: RoutePath.NervosDAO.slice(1), url: RoutePath.NervosDAO, experimental: false }, + { name: 'navbar.overview', key: RoutePath.Overview, url: RoutePath.Overview, icon: }, + { name: 'navbar.send', key: RoutePath.Send, url: RoutePath.Send, icon: }, + { name: 'navbar.receive', key: RoutePath.Receive, url: RoutePath.Receive, icon: }, + { name: 'navbar.history', key: RoutePath.History, url: RoutePath.History, icon: }, + { name: 'navbar.nervos-dao', key: RoutePath.NervosDAO, url: RoutePath.NervosDAO, icon: }, + { name: 'navbar.settings', key: RoutePath.Settings, url: RoutePath.Settings, icon: }, { - name: 'navbar.special-assets', - key: RoutePath.SpecialAssets.slice(1), + name: 'navbar.experimental-functions', + key: 'experimental-functions', + icon: , url: RoutePath.SpecialAssets, - experimental: true, + children: [ + { name: 'navbar.special-assets', key: RoutePath.SpecialAssets, url: RoutePath.SpecialAssets }, + { name: 'navbar.s-udt', key: RoutePath.SUDTAccountList, url: RoutePath.SUDTAccountList }, + ], }, - { name: 'navbar.s-udt', key: RoutePath.SUDTAccountList.slice(1), url: RoutePath.SUDTAccountList, experimental: true }, ] +const MenuButton = ({ + menu, + onClick, + children, + selectedKey, + className, +}: React.PropsWithChildren<{ + menu: { key: string; name: string; url: string } + onClick: React.MouseEventHandler + selectedKey?: string + className?: string +}>) => { + const [t] = useTranslation() + return ( + + ) +} + const Navbar = () => { const navigate = useNavigate() const { pathname } = useLocation() const neuronWallet = useGlobalState() const { wallet: { name }, - chain: { - connectionStatus, - networkID, - syncState: { cacheTipBlockNumber, bestKnownBlockNumber, estimate, status, isLookingValidTarget, validTarget }, - }, - settings: { wallets = [], networks = [] }, + settings: { wallets = [] }, } = neuronWallet const [t, i18n] = useTranslation() useOnLocaleChange(i18n) - - const network = networks.find(n => n.id === networkID) - - const selectedKey = menuItems.find(item => item.key === pathname.substr(1))?.key ?? null - - const syncStatus = status - - const onOpenValidTarget = useCallback( - (e: React.SyntheticEvent) => { - e.stopPropagation() - const explorerUrl = getExplorerUrl(isMainnet(networks, networkID)) - openExternal(`${explorerUrl}/block/${validTarget}`) + const selectedKey = menuItems.find(item => item.key === pathname || item.children?.some(v => v.key === pathname))?.key + const [menuExpanded, setMenuExpanded] = useState(true) + const onClickExpand = useCallback(() => { + setMenuExpanded(v => !v) + }, [setMenuExpanded]) + const onClickNavItem = useCallback( + (e: React.SyntheticEvent) => { + const { + dataset: { link }, + } = e.currentTarget + if (link) { + navigate(link) + } }, - [networks, networkID, validTarget] + [navigate] ) - if (!wallets.length || FULL_SCREENS.find(url => pathname.startsWith(url))) { return null } - const normalMenus = menuItems - .filter(item => !item.experimental) - .map(item => ( - - )) - - const experimentalMenus = menuItems - .filter(item => item.experimental) - .map(item => ( - - )) - - const bestBlockNumber = Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - const syncPercents = - bestBlockNumber > 0 && cacheTipBlockNumber > 0 ? +((cacheTipBlockNumber * 100) / bestBlockNumber).toFixed(2) : 0 - let ringBarColor = '#3cc68a' - if (ConnectionStatus.Offline === connectionStatus || SyncStatusEnum.SyncNotStart === syncStatus) { - ringBarColor = '#ff0000' - } else if (SyncStatusEnum.SyncPending === syncStatus) { - ringBarColor = '#f7ae4d' - } - - const syncBlockNumbers = `${cacheTipBlockNumber >= 0 ? localNumberFormatter(cacheTipBlockNumber) : '-'}/${ - bestBlockNumber >= 0 ? localNumberFormatter(bestBlockNumber) : '-' - }` - return ( -