[Release] New release 2.31.0 (minor) (#12074)

* chore: bump version to 2.31.0

* refactor: rename ERC20RedPacket to TokenRedPacket (#12075)

* fix: connect/change wallet label (#12076)

* fix: get redpacket state without parse api (#12077)

* fix: token badge icon (#12078)

* fix: token badge icon

* fix: solana redpacket expired

* fix: adjust layout in token approval (#12079)

* fix: hard code fix for virtual on base (#12080)

---------

Co-authored-by: Wukong Sun <swkatmask@gmail.com>

Author: guanbinrui

package.json

@@ -8,7 +8,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.30.0",
+  "version": "2.31.0",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {

packages/mask/popups/pages/Wallet/Interaction/WatchTokenRequest.tsx

@@ -92,6 +92,7 @@ export const WatchTokenRequest = memo<InteractionItemProps>((props) => {
                     address={address}
                     name={symbol}
                     size={60}
+                    disableBadge
                 />
                 {isTrustedName ?
                     asset?.name

packages/mask/popups/pages/Wallet/TokenDetail/index.tsx

@@ -266,6 +266,7 @@ export const TokenDetailUI = memo(function TokenDetailUI(props: TokenDetailUIPro
                                     chainId={asset.chainId}
                                     logoURL={asset.logoURL}
                                     size={16}
+                                    disableBadge
                                 />
                                 <FormattedBalance
                                     value={balance}

packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx

@@ -1,5 +1,5 @@
 import { Icons } from '@masknet/icons'
-import { NetworkIcon, ProgressiveText, TokenIcon, useAvailableBalance } from '@masknet/shared'
+import { ProgressiveText, TokenIcon, useAvailableBalance } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { ActionButton, MaskColors, makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
@@ -13,13 +13,7 @@ import {
 } from '@masknet/web3-hooks-base'
 import { useGasLimit } from '@masknet/web3-hooks-evm'
 import { isLessThan, isLte, isZero, leftShift, minus, rightShift } from '@masknet/web3-shared-base'
-import {
-    SchemaType,
-    isNativeTokenAddress,
-    type ChainId,
-    type GasConfig,
-    getNativeTokenAddress,
-} from '@masknet/web3-shared-evm'
+import { SchemaType, isNativeTokenAddress, type GasConfig, getNativeTokenAddress } from '@masknet/web3-shared-evm'
 import { Box, Input, Typography } from '@mui/material'
 import { BigNumber } from 'bignumber.js'
 import { memo, useCallback, useMemo, useState } from 'react'
@@ -47,17 +41,6 @@ const useStyles = makeStyles()((theme) => ({
     tokenPicker: {
         margin: theme.spacing(0, 2),
     },
-    tokenIcon: {
-        width: 36,
-        height: 36,
-    },
-    badgeIcon: {
-        position: 'absolute',
-        right: -6,
-        bottom: -4,
-        border: `1px solid ${theme.palette.common.white}`,
-        borderRadius: '50%',
-    },
     maxButton: {
         cursor: 'pointer',
     },
@@ -248,21 +231,7 @@ export const FungibleTokenSection = memo(function FungibleTokenSection() {
                     })
                     if (picked) handleSelectAsset(picked as Web3Helper.FungibleAssetAll)
                 }}>
-                <Box position="relative" height={36} width={36}>
-                    <TokenIcon
-                        className={classes.tokenIcon}
-                        chainId={chainId}
-                        address={address}
-                        logoURL={selectedAsset?.logoURL}
-                    />
-                    <NetworkIcon
-                        pluginID={NetworkPluginID.PLUGIN_EVM}
-                        chainId={network?.chainId as ChainId}
-                        className={classes.badgeIcon}
-                        size={16}
-                        network={network}
-                    />
-                </Box>
+                <TokenIcon size={36} chainId={chainId} address={address} logoURL={selectedAsset?.logoURL} />
                 <Box mr="auto" ml={2}>
                     <ProgressiveText loading={isPending} skeletonWidth={36}>
                         {token?.symbol}

packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx

@@ -143,6 +143,7 @@ const AssetItem = memo(function AssetItem({ asset, onItemClick, ...rest }: Asset
                     name={asset.name}
                     logoURL={asset.logoURL}
                     size={36}
+                    disableBadge
                 />
                 <NetworkIcon
                     pluginID={NetworkPluginID.PLUGIN_EVM}

packages/plugins/Approval/src/SiteAdaptor/ApprovalTokenContent.tsx

@@ -83,7 +83,6 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
         spenderLogoIcon: {
             width: 16,
             height: 16,
-            marginRight: 4,
         },
         link: {
             width: 16,
@@ -95,7 +94,6 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
         },
         spenderMaskLogoIcon: {
             display: 'inline-block',
-            marginRight: 4,
             width: 16,
             height: 16,
             '& > svg': {
@@ -249,11 +247,15 @@ function ApprovalTokenItem(props: ApprovalTokenItemProps) {
                     </div>
                     <div>
                         <Typography className={classes.secondaryText}>
-                            <Trans>Approved Amount</Trans>
+                            <Trans>
+                                Approved Amount{' '}
+                                {amount ?
+                                    <Typography component="span" className={classes.primaryText}>
+                                        {formatSpendingCap(amount)}
+                                    </Typography>
+                                :   null}
+                            </Trans>
                         </Typography>
-                        {amount ?
-                            <Typography className={classes.primaryText}>{formatSpendingCap(amount)}</Typography>
-                        :   null}
                     </div>
                 </div>
                 <ChainBoundary