diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss index 0c2d266305..07be724b64 100644 --- a/packages/neuron-ui/src/components/History/history.module.scss +++ b/packages/neuron-ui/src/components/History/history.module.scss @@ -144,7 +144,7 @@ body { } } - &[data-is-open='true'] { + &[data-is-expand-show='true'] { transform: rotate(90deg); } } diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx index 09c8c790ee..2789334711 100644 --- a/packages/neuron-ui/src/components/History/index.tsx +++ b/packages/neuron-ui/src/components/History/index.tsx @@ -249,7 +249,7 @@ const History = () => { return ( handleExpandClick(idx)} /> ) diff --git a/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss b/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss index fa0034b35e..4e7d8d45f3 100644 --- a/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss +++ b/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss @@ -41,6 +41,16 @@ color: var(--main-text-color); } } + +.goBack { + margin-right: 8px; + cursor: pointer; + + & path { + stroke: var(--main-text-color); + } +} + .address { font-family: 'JetBrains Mono'; } diff --git a/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx b/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx index 540b670bec..cc271bd0d3 100644 --- a/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx +++ b/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react' -import { Link, useParams } from 'react-router-dom' +import { useNavigate, useParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { scriptToAddress } from '@nervosnetwork/ckb-sdk-utils' import { getTransaction, showErrorMessage } from 'services/remote' @@ -10,6 +10,7 @@ import ScriptTag from 'components/ScriptTag' import Tabs from 'widgets/Tabs' import Table from 'widgets/Table' import CopyZone from 'widgets/CopyZone' +import { GoBack } from 'widgets/Icons/icon' import { ErrorCode, @@ -18,7 +19,6 @@ import { uniformTimeFormatter, shannonToCKBFormatter, isSuccessResponse, - RoutePath, } from 'utils' import { HIDE_BALANCE } from 'utils/const' @@ -37,6 +37,7 @@ const InfoItem = ({ label, value, className }: { label: string; value: React.Rea const HistoryDetailPage = () => { const { hash } = useParams() + const navigate = useNavigate() const { app: { pageNotice }, chain: { networkID }, @@ -216,9 +217,7 @@ const HistoryDetailPage = () => { }} head={
- - {`${t('history.title')} / `} - + navigate(-1)} /> {`${t('history.title-detail')}`}
} diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx index 13370daea4..9135a5cafd 100644 --- a/packages/neuron-ui/src/components/Overview/index.tsx +++ b/packages/neuron-ui/src/components/Overview/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react' -import { Link } from 'react-router-dom' +import { Link, useNavigate } from 'react-router-dom' import { Trans, useTranslation } from 'react-i18next' import { showTransactionDetails } from 'services/remote' import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states' @@ -213,6 +213,7 @@ const Overview = () => { } = useGlobalState() const dispatch = useDispatch() const [t] = useTranslation() + const navigate = useNavigate() useEffect(() => { if (id) { @@ -235,6 +236,11 @@ const Overview = () => { } }, []) + const onRecentActivityClick = useCallback((_, item: State.Transaction) => { + const { hash } = item + navigate(`${RoutePath.HistoryDetailPage}/${hash}`) + }, []) + const recentItems = useMemo(() => { return items.slice(0, 10) }, [items]) @@ -342,6 +348,7 @@ const Overview = () => { dataSource={recentItems} noDataContent={t('overview.no-recent-activities')} onRowDoubleClick={onRecentActivityDoubleClick} + onRowClick={onRecentActivityClick} /> ) diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx index b336570195..d526dbe227 100644 --- a/packages/neuron-ui/src/containers/Navbar/index.tsx +++ b/packages/neuron-ui/src/containers/Navbar/index.tsx @@ -26,7 +26,13 @@ const menuItems = [ { 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.history', + key: RoutePath.History, + url: RoutePath.History, + icon: , + subRoutes: [RoutePath.HistoryDetailPage], + }, { name: 'navbar.nervos-dao', key: RoutePath.NervosDAO, url: RoutePath.NervosDAO, icon: }, { name: 'navbar.settings', key: RoutePath.Settings, url: RoutePath.Settings, icon: }, { @@ -74,7 +80,13 @@ const Navbar = () => { } = neuronWallet const [t, i18n] = useTranslation() useOnLocaleChange(i18n) - const selectedKey = menuItems.find(item => item.key === pathname || item.children?.some(v => v.key === pathname))?.key + const selectedKey = menuItems.find( + item => + item.key === pathname || + item.children?.some(v => v.key === pathname) || + item.subRoutes?.some(v => pathname.includes(v)) + )?.key + const [menuExpanded, setMenuExpanded] = useState(true) const onClickExpand = useCallback(() => { setMenuExpanded(v => !v) diff --git a/packages/neuron-ui/src/widgets/Icons/GoBack.svg b/packages/neuron-ui/src/widgets/Icons/GoBack.svg new file mode 100644 index 0000000000..dc8d16e4cb --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/GoBack.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx index 8003926071..718dfeaad8 100644 --- a/packages/neuron-ui/src/widgets/Icons/icon.tsx +++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx @@ -63,6 +63,7 @@ import { ReactComponent as ExplorerIconSvg } from './ExplorerIcon.svg' import { ReactComponent as DetailIconSvg } from './DetailIcon.svg' import { ReactComponent as CheckUpdateIconSvg } from './CheckUpdateIcon.svg' import { ReactComponent as LanguageSelectSvg } from './LanguageSelect.svg' +import { ReactComponent as GoBackSvg } from './GoBack.svg' import styles from './icon.module.scss' @@ -140,3 +141,4 @@ export const EyesClose = WrapSvg(EyesCloseSvg) export const Success = WrapSvg(SuccessSvg) export const CheckUpdateIcon = WrapSvg(CheckUpdateIconSvg) export const LanguageSelect = WrapSvg(LanguageSelectSvg) +export const GoBack = WrapSvg(GoBackSvg) diff --git a/packages/neuron-ui/src/widgets/Table/index.tsx b/packages/neuron-ui/src/widgets/Table/index.tsx index 5d3ce04002..cc5408b42b 100755 --- a/packages/neuron-ui/src/widgets/Table/index.tsx +++ b/packages/neuron-ui/src/widgets/Table/index.tsx @@ -104,12 +104,15 @@ const Table = >(props: TableProps) => { key={dataKey ? item[dataKey] : idx} className={styles.trClassName} data-idx={idx} + data-is-expand={expandedRow === idx} > {columnList.map(({ dataIndex, key, render, align, className: bodyTdClassName, tdClassName }) => ( {render ? render(item[dataIndex], idx, item, showBalance) : item[dataIndex]} diff --git a/packages/neuron-ui/src/widgets/Table/table.module.scss b/packages/neuron-ui/src/widgets/Table/table.module.scss index d6428322b3..b81f0659f6 100755 --- a/packages/neuron-ui/src/widgets/Table/table.module.scss +++ b/packages/neuron-ui/src/widgets/Table/table.module.scss @@ -49,6 +49,19 @@ $head-height: 52px; tbody { tr { height: 58px; + + &:hover { + cursor: pointer; + + &[data-is-expand='false'] { + background-color: var(--hover-background-color); + } + } + &:last-child { + td { + border-bottom: none; + } + } } td { padding: 0 0 0 18px;