fix: issues in activities (#10317)

* fix: mf-4832 data converting in activities

* fix: mf-4801 missing token

* fix: mf-4800 add scam label

* fix: mf-4804 add operation buttons to transaction detail

* fix: mf-4802 pass original tx to new tx

packages/mask/shared-ui/locales/en-US.json

@@ -1238,6 +1238,7 @@
     "empty": "Empty",
     "hide_token_symbol": "Hide {{- symbol}}",
     "hide_token_description": "Confirm to hide {{- symbol}}?  You can redisplay it by re-adding this token at any time.",
+    "scam_tx": "Scam tx",
     "to_address": "to {{address}}",
     "transaction_status": "status",
     "transaction_failed": "Failed",

packages/mask/src/extension/popups/modals/GasSettingModal/GasSettingDialog.tsx

@@ -1,17 +1,7 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { BottomDrawer } from '../../components/index.js'
-import { useI18N } from '../../../../utils/i18n-next-ui.js'
-import {
-    formatWeiToGwei,
-    type ChainId,
-    formatGweiToWei,
-    formatWeiToEther,
-    type GasConfig,
-} from '@masknet/web3-shared-evm'
-import { useChainIdSupport, useGasOptions, useNativeToken, useNativeTokenPrice } from '@masknet/web3-hooks-base'
+import { FormattedCurrency } from '@masknet/shared'
 import { NUMERIC_INPUT_REGEXP_PATTERN, NetworkPluginID } from '@masknet/shared-base'
-import { Alert, Box, Button, TextField, Typography, useTheme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
+import { useChainIdSupport, useGasOptions, useNativeToken, useNativeTokenPrice } from '@masknet/web3-hooks-base'
 import {
     ZERO,
     formatBalance,
@@ -22,9 +12,19 @@ import {
     scale10,
     toFixed,
 } from '@masknet/web3-shared-base'
+import {
+    formatGweiToWei,
+    formatWeiToEther,
+    formatWeiToGwei,
+    type ChainId,
+    type GasConfig,
+} from '@masknet/web3-shared-evm'
+import { Alert, Box, Button, TextField, Typography, useTheme } from '@mui/material'
 import { BigNumber } from 'bignumber.js'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useI18N } from '../../../../utils/i18n-next-ui.js'
+import { BottomDrawer } from '../../components/index.js'
 import { ReplaceType, type GasSetting } from '../../pages/Wallet/type.js'
-import { FormattedCurrency } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
     title: {
@@ -80,11 +80,9 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
     const { data: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM, { chainId })
     const { data: nativeTokenPrice } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
 
-    const [gasPrice, setGasPrice] = useState(config.gasPrice ? config.gasPrice : '')
-    const [maxPriorityFeePerGas, setMaxPriorityFeePerGas] = useState(
-        config.maxPriorityFeePerGas ? config.maxPriorityFeePerGas : '',
-    )
-    const [maxFeePerGas, setMaxFeePerGas] = useState(config.maxFeePerGas ? config.maxFeePerGas : '')
+    const [gasPrice = config.gasPrice || '', setGasPrice] = useState<string>()
+    const [maxPriorityFeePerGas = config.maxPriorityFeePerGas || '', setMaxPriorityFeePerGas] = useState<string>()
+    const [maxFeePerGas = config.maxFeePerGas || '', setMaxFeePerGas] = useState<string>()
 
     const estimateSecond = useMemo(() => {
         if (!gasOptions || replaceType) return
@@ -318,9 +316,6 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                                         inputProps: {
                                             min: 0,
                                             type: 'number',
-                                            inputProps: {
-                                                min: 0,
-                                            },
                                         },
                                     }}
                                 />

packages/mask/src/extension/popups/modals/GasSettingModal/index.tsx

@@ -23,7 +23,7 @@ export const GasSettingModal = forwardRef<
 >((_, ref) => {
     const [chainId, setChainId] = useState<ChainId | undefined>()
     const [replaceType, setReplaceType] = useState<ReplaceType>()
-    const [gasConfig, setGasConfig] = useState<GasSetting>(initGasSetting)
+    const [gasConfig = initGasSetting, setGasConfig] = useState<GasSetting>()
     const [nonce, setNonce] = useState<string | number>('')
     const [open, dispatch] = useSingletonModal(ref, {
         onOpen(props) {

packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx

@@ -4,7 +4,7 @@ import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useNativeToken, useNetworkDescriptors, useReverseAddress } from '@masknet/web3-hooks-base'
 import { DebankTransactionDirection } from '@masknet/web3-providers/types'
-import { isLessThan, type RecentTransaction, type Transaction } from '@masknet/web3-shared-base'
+import { isLessThan, TransactionStatusType, type RecentTransaction, type Transaction } from '@masknet/web3-shared-base'
 import {
     SchemaType,
     formatDomainName,
@@ -73,6 +73,21 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
         },
         txName: {
             textTransform: 'capitalize',
+            whiteSpace: 'nowrap',
+        },
+        scamLabel: {
+            display: 'inline-block',
+            padding: '4px 6px',
+            backgroundColor: theme.palette.maskColor.third,
+            color: theme.palette.maskColor.white,
+            fontSize: 12,
+            lineHeight: '16px',
+            fontWeight: 700,
+            marginLeft: 4,
+            borderRadius: 4,
+        },
+        toAddress: {
+            whiteSpace: 'nowrap',
         },
         operations: {
             display: 'flex',
@@ -105,6 +120,7 @@ const useStyles = makeStyles<{ cateType?: string }>()((theme, { cateType = '' },
             fontSize: 14,
             fontWeight: 700,
             color: theme.palette.maskColor.main,
+            textAlign: 'right',
         },
         amount: {
             fontWeight: 700,
@@ -156,25 +172,25 @@ export const ActivityItem = memo<ActivityItemProps>(function ActivityItem({ tran
                 secondaryTypographyProps={{ component: 'div' }}
                 style={{ marginLeft: 15 }}
                 secondary={
-                    <Box>
-                        <Typography>
-                            {!transaction.status ? (
-                                <Typography className={classes.failedLabel} component="span">
-                                    {t('failed')}
-                                </Typography>
-                            ) : null}
-                            {t('to_address', {
-                                address: domain ? formatDomainName(domain) : formatEthereumAddress(toAddress, 4),
-                            })}
-                        </Typography>
-                        {/* TODO actions for pending transitions */}
-                    </Box>
+                    <Typography className={classes.toAddress}>
+                        {!transaction.status ? (
+                            <Typography className={classes.failedLabel} component="span">
+                                {t('failed')}
+                            </Typography>
+                        ) : null}
+                        {t('to_address', {
+                            address: domain ? formatDomainName(domain) : formatEthereumAddress(toAddress, 4),
+                        })}
+                    </Typography>
                 }>
-                <Typography className={classes.txName}>{transaction.cateName}</Typography>
+                <Typography className={classes.txName}>
+                    {transaction.cateName}
+                    {transaction.isScam ? <span className={classes.scamLabel}>{t('scam_tx')}</span> : null}
+                </Typography>
             </ListItemText>
             <Box ml="auto">
                 {transaction.assets
-                    .filter((asset) => asset.schema === SchemaType.ERC20)
+                    .filter((asset) => asset.schema === SchemaType.ERC20 || asset.schema === SchemaType.Native)
                     .map((token, i) => {
                         const isRend = token.direction === DebankTransactionDirection.SEND
                         const amount = isLessThan(token.amount, '0.000001') ? '<0.000001' : token.amount
@@ -233,7 +249,7 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
                 secondary={
                     <Box>
                         <Typography>
-                            {!transaction.status ? (
+                            {transaction.status === TransactionStatusType.FAILED ? (
                                 <Typography className={classes.failedLabel} component="span">
                                     {t('failed')}
                                 </Typography>
@@ -264,7 +280,7 @@ export const RecentActivityItem = memo<RecentActivityItemProps>(function RecentA
                     </Box>
                 }>
                 {/* TODO specify cateType */}
-                <Typography className={classes.txName}>Send</Typography>
+                <Typography className={classes.txName}>{t('send')}</Typography>
             </ListItemText>
             <Box ml="auto">
                 {candidate.value && nativeToken ? (

packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx

@@ -1,22 +1,16 @@
 import { ElementAnchor } from '@masknet/shared'
 import { PopupRoutes } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { Web3 } from '@masknet/web3-providers'
 import type { RecentTransaction, Transaction } from '@masknet/web3-shared-base'
-import {
-    ProviderType,
-    type ChainId,
-    type Transaction as EvmTransaction,
-    type SchemaType,
-} from '@masknet/web3-shared-evm'
+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 { useNavigate } from 'react-router-dom'
-import { GasSettingModal } from '../../../../modals/modals.js'
 import { ReplaceType } from '../../type.js'
 import { ActivityItem, ActivityItemSkeleton, RecentActivityItem } from './ActivityItem.js'
 import { useTransactions } from './useTransactions.js'
+import { modifyTransaction } from '../../utils.js'
 
 const useStyles = makeStyles()((theme) => ({
     list: {
@@ -37,53 +31,13 @@ export const ActivityList = memo<ActivityListProps>(function ActivityList() {
     const navigate = useNavigate()
     const { data: transactions, localeTxes, isFetching, fetchNextPage } = useTransactions()
 
-    const modifyTransaction = useCallback(
-        async (transaction: RecentTransaction<ChainId, EvmTransaction>, replaceType: ReplaceType) => {
-            const candidate = transaction.candidates[transaction.indexId]
-            if (!candidate) return
-            const oldConfig = {
-                gas: candidate.gas!,
-                gasPrice: candidate.gasPrice,
-                maxFeePerGas: candidate.maxFeePerGas,
-                maxPriorityFeePerGas: candidate.maxPriorityFeePerGas,
-            }
-            const settings = await GasSettingModal.openAndWaitForClose({
-                chainId: transaction.chainId,
-                config: oldConfig,
-                nonce: candidate.nonce!,
-                replaceType,
-            })
-            if (!settings) return
-            const newConfig = {
-                ...oldConfig,
-                ...settings,
-            }
-            if (replaceType === ReplaceType.CANCEL) {
-                await Web3.cancelTransaction(transaction?.id, newConfig, {
-                    providerType: ProviderType.MaskWallet,
-                })
-            } else {
-                await Web3.replaceTransaction(transaction?.id, newConfig, {
-                    providerType: ProviderType.MaskWallet,
-                })
-            }
-        },
-        [navigate],
-    )
+    const handleSpeedup = useCallback(async (transaction: RecentTransaction<ChainId, EvmTransaction>) => {
+        modifyTransaction(transaction, ReplaceType.SPEED_UP)
+    }, [])
 
-    const handleSpeedup = useCallback(
-        async (transaction: RecentTransaction<ChainId, EvmTransaction>) => {
-            modifyTransaction(transaction, ReplaceType.SPEED_UP)
-        },
-        [navigate, modifyTransaction],
-    )
-
-    const handleCancel = useCallback(
-        (transaction: RecentTransaction<ChainId, EvmTransaction>) => {
-            modifyTransaction(transaction, ReplaceType.CANCEL)
-        },
-        [navigate, modifyTransaction],
-    )
+    const handleCancel = useCallback((transaction: RecentTransaction<ChainId, EvmTransaction>) => {
+        modifyTransaction(transaction, ReplaceType.CANCEL)
+    }, [])
 
     const handleView = useCallback(
         (transaction: Transaction<ChainId, SchemaType> | RecentTransaction<ChainId, EvmTransaction>) => {

packages/mask/src/extension/popups/pages/Wallet/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './useWalletContext.js'
+export * from './useAsset.js'
 export * from './useAssetExpand.js'
 export * from './useWalletAssets.js'
-export * from './useAsset.js'
+export * from './useWalletContext.js'

packages/mask/src/extension/popups/pages/Wallet/utils.ts

@@ -0,0 +1,47 @@
+import { Web3 } from '@masknet/web3-providers'
+import type { RecentTransaction } from '@masknet/web3-shared-base'
+import {
+    ProviderType,
+    type ChainId,
+    type Transaction as EvmTransaction,
+    formatWeiToGwei,
+} from '@masknet/web3-shared-evm'
+import { GasSettingModal } from '../../modals/modals.js'
+import { ReplaceType } from './type.js'
+
+export async function modifyTransaction(
+    transaction: RecentTransaction<ChainId, EvmTransaction>,
+    replaceType: ReplaceType,
+) {
+    const candidate = transaction.candidates[transaction.indexId]
+    if (!candidate) return
+    const oldGasSettings = {
+        gas: candidate.gas!,
+        gasPrice: candidate.gasPrice,
+        maxFeePerGas: candidate.maxFeePerGas ? formatWeiToGwei(candidate.maxFeePerGas).toFixed() : undefined,
+        maxPriorityFeePerGas: candidate.maxPriorityFeePerGas
+            ? formatWeiToGwei(candidate.maxPriorityFeePerGas).toFixed()
+            : undefined,
+    }
+    const gasSettings = await GasSettingModal.openAndWaitForClose({
+        chainId: transaction.chainId,
+        config: oldGasSettings,
+        nonce: candidate.nonce!,
+        replaceType,
+    })
+    if (!gasSettings) return
+    const newConfig = {
+        ...candidate,
+        ...oldGasSettings,
+        ...gasSettings,
+    }
+    if (replaceType === ReplaceType.CANCEL) {
+        await Web3.cancelTransaction(transaction.id, newConfig, {
+            providerType: ProviderType.MaskWallet,
+        })
+    } else {
+        await Web3.replaceTransaction(transaction.id, newConfig, {
+            providerType: ProviderType.MaskWallet,
+        })
+    }
+}

packages/web3-providers/src/DeBank/helpers.ts

@@ -72,10 +72,12 @@ function toTxAsset(
     token_dict: HistoryResponse['data']['token_dict'],
 ) {
     const token = token_dict[token_id]
+    // token_dict might not contain value to current token_id
+    if (!token) return null
     const schema = token.decimals
-        ? isValidAddress(token.id)
-            ? SchemaType.Native
-            : SchemaType.ERC20
+        ? isValidAddress(token.id) // for native token, token.id is symbol. e.g `matic` for Matic
+            ? SchemaType.ERC20
+            : SchemaType.Native
         : token.is_erc721
         ? SchemaType.ERC721
         : SchemaType.ERC1155
@@ -86,15 +88,15 @@ function toTxAsset(
     return {
         id: token_id,
         chainId,
-        type: token?.decimals ? TokenType.Fungible : TokenType.NonFungible,
+        type: token.decimals ? TokenType.Fungible : TokenType.NonFungible,
         schema,
-        name: token?.name ?? 'Unknown Token',
-        symbol: token?.optimized_symbol,
+        name: token.name ?? 'Unknown Token',
+        symbol: token.optimized_symbol,
         address: token.decimals ? token_id : token.contract_id,
         decimals: token.decimals || 1,
         direction: DebankTransactionDirection.SEND,
         amount: amount?.toString(),
-        logoURI: token?.logo_url,
+        logoURI: token.logo_url,
     }
 }
 
@@ -130,10 +132,10 @@ export function formatTransactions({
             from: transaction.tx?.from_addr ?? '',
             to: transaction.other_addr,
             status: transaction.tx?.status,
-            assets: [
+            assets: compact([
                 ...transaction.sends.map((asset) => toTxAsset(asset, chainId, token_dict)),
                 ...transaction.receives.map((asset) => toTxAsset(asset, chainId, token_dict)),
-            ],
+            ]),
             fee: transaction.tx
                 ? { eth: transaction.tx.eth_gas_fee?.toString(), usd: transaction.tx.usd_gas_fee?.toString() }
                 : undefined,