feat: mf-6319 refine wallet activities ui (#11862)

DimensionDev · Oct 15, 2024 · 2a5994b · 2a5994b
1 parent 39a5544
commit 2a5994b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 30 deletions.
diff --git a/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx b/packages/mask/popups/pages/Wallet/TransactionDetail/index.tsx
@@ -22,6 +22,7 @@ import {
 import { Box, Link, Typography, alpha } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import { BigNumber } from 'bignumber.js'
+import { format } from 'date-fns'
 import { capitalize } from 'lodash-es'
 import { memo, useCallback } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
@@ -349,6 +350,12 @@ export const Component = memo(function TransactionDetail() {
                         :   ''}
                     </ProgressiveText>
                 </Box>
+                <Box className={classes.field}>
+                    <Typography className={classes.fieldName}>Time</Typography>
+                    <ProgressiveText loading={loadingTx} className={classes.fieldValue}>
+                        {tx ? format(tx.block_timestamp, 'MMM-dd-yyyy hh:mm:ss aa OOO').replace('GMT', 'UTC') : '--'}
+                    </ProgressiveText>
+                </Box>
                 {logs.length ?
                     <>
                         <Typography variant="h2" className={classes.sectionName}>

diff --git a/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx b/packages/mask/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
@@ -33,8 +33,8 @@ import {
 import { Box, ListItem, ListItemText, Skeleton, Typography, alpha, type ListItemProps } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import { memo, useMemo, type JSX } from 'react'
-import { formatTokenBalance } from '../../../../../shared/index.js'
 import { MaskSharedTrans, useMaskSharedTrans } from '../../../../../shared-ui/index.js'
+import { formatTokenBalance } from '../../../../../shared/index.js'
 import { parseAmountFromERC20ApproveInput, parseReceiverFromERC20TransferInput } from '../../utils.js'
 
 const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' }, __) => {
@@ -46,7 +46,7 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
     const backgroundColorMap: Record<string, string> = {
         send: alpha(theme.palette.maskColor.warn, 0.1),
         receive: alpha(theme.palette.maskColor.success, 0.1),
-        default: alpha(theme.palette.maskColor.success, 0.1),
+        default: alpha(theme.palette.maskColor.primary, 0.1),
     }
     const boxShadowMap: Record<string, string> = {
         send: alpha(theme.palette.maskColor.warn, 0.2),

diff --git a/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/popups/pages/Wallet/components/ActivityList/index.tsx
@@ -3,16 +3,17 @@ import { PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import type { RecentTransaction, Transaction } from '@masknet/web3-shared-base'
 import { type ChainId, type Transaction as EvmTransaction, type SchemaType } from '@masknet/web3-shared-evm'
-import { List } from '@mui/material'
-import { range } from 'lodash-es'
-import { memo, useCallback } from 'react'
+import { List, Typography } from '@mui/material'
+import { format } from 'date-fns'
+import { groupBy, range } from 'lodash-es'
+import { Fragment, memo, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useMaskSharedTrans } from '../../../../../shared-ui/index.js'
+import { useHasNavigator } from '../../../../hooks/useHasNavigator.js'
 import { ReplaceType } from '../../type.js'
+import { modifyTransaction } from '../../utils.js'
 import { ActivityItem, ActivityItemSkeleton, RecentActivityItem } from './ActivityItem.js'
 import { useTransactions } from './useTransactions.js'
-import { modifyTransaction } from '../../utils.js'
-import { useMaskSharedTrans } from '../../../../../shared-ui/index.js'
-import { useHasNavigator } from '../../../../hooks/useHasNavigator.js'
 
 const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
     container: {
@@ -25,11 +26,14 @@ const useStyles = makeStyles<{ hasNav?: boolean }>()((theme, { hasNav }) => ({
     list: {
         backgroundColor: theme.palette.maskColor.bottom,
         padding: theme.spacing(2),
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(1.5),
     },
-    item: {
-        '&:not(:last-of-type)': {
-            marginBottom: theme.spacing(1.5),
-        },
+    day: {
+        color: theme.palette.maskColor.second,
+        fontSize: 14,
+        lineHeight: '18px',
     },
 }))
 
@@ -40,6 +44,15 @@ export const ActivityList = memo(function ActivityList() {
     const navigate = useNavigate()
     const [{ transactions, localeTxes }, { isPending, isFetching, fetchNextPage }] = useTransactions()
 
+    const transactionGroups = useMemo(
+        () => Object.entries(groupBy(transactions, (tx) => format(tx.timestamp, 'MMM dd, yyyy'))),
+        [transactions],
+    )
+    const localeTxGroups = useMemo(
+        () => Object.entries(groupBy(localeTxes, (tx) => format(tx.createdAt, 'MMM dd, yyyy'))),
+        [localeTxes],
+    )
+
     const handleSpeedup = useCallback(async (transaction: RecentTransaction<ChainId, EvmTransaction>) => {
         modifyTransaction(transaction, ReplaceType.SPEED_UP)
     }, [])
@@ -68,24 +81,33 @@ export const ActivityList = memo(function ActivityList() {
     return (
         <div className={classes.container} data-hide-scrollbar>
             <List dense className={classes.list}>
-                {localeTxes.map((transaction) => (
-                    <RecentActivityItem
-                        key={transaction.id}
-                        transaction={transaction}
-                        onSpeedup={handleSpeedup}
-                        onCancel={handleCancel}
-                        onView={handleView}
-                    />
-                ))}
-                {transactions?.map((transaction) => (
-                    <ActivityItem
-                        key={transaction.id}
-                        className={classes.item}
-                        transaction={transaction}
-                        onView={handleView}
-                    />
-                ))}
-                {isFetching ? range(4).map((i) => <ActivityItemSkeleton key={i} className={classes.item} />) : null}
+                {localeTxGroups.map(([day, txes]) => {
+                    return (
+                        <Fragment key={day}>
+                            <Typography className={classes.day}>{day}</Typography>
+                            {txes.map((transaction) => (
+                                <RecentActivityItem
+                                    key={transaction.id}
+                                    transaction={transaction}
+                                    onSpeedup={handleSpeedup}
+                                    onCancel={handleCancel}
+                                    onView={handleView}
+                                />
+                            ))}
+                        </Fragment>
+                    )
+                })}
+                {transactionGroups.map(([day, txes]) => {
+                    return (
+                        <Fragment key={day}>
+                            <Typography className={classes.day}>{day}</Typography>
+                            {txes.map((transaction) => (
+                                <ActivityItem key={transaction.id} transaction={transaction} onView={handleView} />
+                            ))}
+                        </Fragment>
+                    )
+                })}
+                {isFetching ? range(4).map((i) => <ActivityItemSkeleton key={i} />) : null}
             </List>
             <ElementAnchor callback={() => fetchNextPage()} key={transactions?.length} height={10} />
         </div>