fix: mf-4912 perfer name for custom network (#10373)

* fix: mf-4912 perfer name for custom network * fix: improve transaction status
DimensionDev · Aug 13, 2023 · 229e970 · 229e970
1 parent bdc129e
commit 229e970
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Wallet/TransactionDetail/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/TransactionDetail/index.tsx
@@ -33,6 +33,7 @@ const useStyles = makeStyles()((theme) => ({
         marginLeft: 'auto',
         alignItems: 'center',
         gap: 4,
+        transition: 'all 0.3s ease-in-out',
     },
     statusFail: {
         color: theme.palette.maskColor.danger,
@@ -184,10 +185,8 @@ export const TransactionDetail = memo(function TransactionDetail() {
         [SUCCEED]: t('transaction_success'),
         [NOT_DEPEND]: t('transaction_pending'),
     }
-    const status =
-        tx !== undefined
-            ? chainbase.normalizeTxStatus(tx.status)
-            : ((transactionState?.status || NOT_DEPEND) as TransactionStatusType)
+    const status = chainbase.normalizeTxStatus(tx !== undefined ? tx.status : (transactionState?.status as 0 | 1))
+    const statusPending = status === undefined && loadingTx
     const isOut = transaction.from === account
     const link = transactionId ? ExplorerResolver.transactionLink(chainId!, transactionId) : undefined
 
@@ -202,10 +201,14 @@ export const TransactionDetail = memo(function TransactionDetail() {
                     <Typography variant="h2" className={classes.statusTitle}>
                         {t('transaction_status')}
                     </Typography>
-                    <Typography component="div" className={cx(classes.status, StatusClassesMap[status])}>
+                    <ProgressiveText
+                        component="div"
+                        className={cx(classes.status, StatusClassesMap[status])}
+                        loading={statusPending}
+                        skeletonWidth={90}>
                         {StatusIconMap[status]}
                         {StatusLabelMap[status]}
-                    </Typography>
+                    </ProgressiveText>
                 </Box>
                 {transactionId ? (
                     <Box className={classes.field}>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx
@@ -1,4 +1,4 @@
-import { ElementAnchor } from '@masknet/shared'
+import { ElementAnchor, EmptyStatus } from '@masknet/shared'
 import { PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import type { RecentTransaction, Transaction } from '@masknet/web3-shared-base'
@@ -11,6 +11,7 @@ import { ReplaceType } from '../../type.js'
 import { ActivityItem, ActivityItemSkeleton, RecentActivityItem } from './ActivityItem.js'
 import { useTransactions } from './useTransactions.js'
 import { modifyTransaction } from '../../utils.js'
+import { useI18N } from '../../../../../../utils/i18n-next-ui.js'
 
 const useStyles = makeStyles()((theme) => ({
     list: {
@@ -27,9 +28,10 @@ const useStyles = makeStyles()((theme) => ({
 export interface ActivityListProps {}
 
 export const ActivityList = memo<ActivityListProps>(function ActivityList() {
+    const { t } = useI18N()
     const { classes } = useStyles()
     const navigate = useNavigate()
-    const { data: transactions, localeTxes, isFetching, fetchNextPage } = useTransactions()
+    const { data: transactions, localeTxes, isLoading, isFetching, fetchNextPage } = useTransactions()
 
     const handleSpeedup = useCallback(async (transaction: RecentTransaction<ChainId, EvmTransaction>) => {
         modifyTransaction(transaction, ReplaceType.SPEED_UP)
@@ -50,6 +52,9 @@ export const ActivityList = memo<ActivityListProps>(function ActivityList() {
         [navigate],
     )
 
+    if (isLoading && !localeTxes.length && !transactions.length)
+        return <EmptyStatus height="100%">{t('no_data')}</EmptyStatus>
+
     return (
         <>
             <List dense className={classes.list}>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx
@@ -133,6 +133,7 @@ const AssetItem = memo(function AssetItem({ asset, onItemClick, ...rest }: Asset
                     chainId={asset.chainId}
                     size={16}
                     icon={network?.iconUrl}
+                    preferName={network?.isCustomized}
                 />
             </Box>
             <ListItemText