fix: Hover/Click transaction style exception

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);
   }
 }

packages/neuron-ui/src/components/History/index.tsx

@@ -249,7 +249,7 @@ const History = () => {
         return (
           <ArrowOpenRightIcon
             className={styles.arrow}
-            data-is-open={expandedRow === idx}
+            data-is-expand-show={expandedRow === idx}
             onClick={() => handleExpandClick(idx)}
           />
         )

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';
 }

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={
         <div>
-          <Link className={styles.breadcrumb} to={RoutePath.History}>
-            {`${t('history.title')} / `}
-          </Link>
+          <GoBack className={styles.goBack} onClick={() => navigate(-1)} />
           <span className={styles.breadcrumbNav}>{`${t('history.title-detail')}`}</span>
         </div>
       }

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}
       />
     </PageContainer>
   )

packages/neuron-ui/src/containers/Navbar/index.tsx

@@ -26,7 +26,13 @@ const menuItems = [
   { name: 'navbar.overview', key: RoutePath.Overview, url: RoutePath.Overview, icon: <Overview /> },
   { name: 'navbar.send', key: RoutePath.Send, url: RoutePath.Send, icon: <Send /> },
   { name: 'navbar.receive', key: RoutePath.Receive, url: RoutePath.Receive, icon: <Receive /> },
-  { name: 'navbar.history', key: RoutePath.History, url: RoutePath.History, icon: <History /> },
+  {
+    name: 'navbar.history',
+    key: RoutePath.History,
+    url: RoutePath.History,
+    icon: <History />,
+    subRoutes: [RoutePath.HistoryDetailPage],
+  },
   { name: 'navbar.nervos-dao', key: RoutePath.NervosDAO, url: RoutePath.NervosDAO, icon: <NervosDAO /> },
   { name: 'navbar.settings', key: RoutePath.Settings, url: RoutePath.Settings, icon: <Settings /> },
   {
@@ -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)

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)

packages/neuron-ui/src/widgets/Table/index.tsx

@@ -104,12 +104,15 @@ const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
                   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 }) => (
                     <td
                       align={align ?? 'left'}
                       key={key ?? dataIndex}
-                      className={`${tdClassName ?? bodyTdClassName} ${expandedRow === idx ? styles.noBorder : ''}`}
+                      className={`${tdClassName ?? bodyTdClassName} ${
+                        expandedRow === idx && rowExtendRender ? styles.noBorder : ''
+                      }`}
                     >
                       {render ? render(item[dataIndex], idx, item, showBalance) : item[dataIndex]}
                     </td>

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;