[Release] New release 2.31.0 (minor)

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

packages/plugins/Collectible/src/SiteAdaptor/Shared/OfferCard.tsx

@@ -72,6 +72,7 @@ export const OfferCard = memo(function OfferCard({ offer, ...rest }: OfferCardPr
                     style={{
                         fontSize: 14,
                     }}
+                    disableBadge
                 />
             :   <Typography className={classes.fallbackSymbol}>
                     {offer.priceInToken?.token.symbol || offer.priceInToken?.token.name}

packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx

@@ -33,10 +33,6 @@ const useStyles = makeStyles()((theme) => ({
             display: 'none',
         },
     },
-    icon: {
-        width: '48px',
-        height: '48px',
-    },
     tokenName: {
         fontSize: '18px',
         fontWeight: 700,
@@ -94,11 +90,12 @@ export const SecurityPanel = memo<TokenCardProps>(({ tokenSecurity, tokenInfo, t
                 <Stack direction="row" spacing={0.8}>
                     {tokenSecurity?.token_name ?
                         <TokenIcon
-                            className={classes.icon}
+                            size={48}
                             address={tokenSecurity.contract ?? ''}
                             name={tokenSecurity.token_name}
                             logoURL={tokenInfo?.logoURL}
                             chainId={tokenSecurity.chainId}
+                            disableBadge
                         />
                     :   <Icons.DefaultToken size={48} />}
                     <Stack>

packages/plugins/RedPacket/src/SiteAdaptor/MainDialog.tsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-const initialEntries = [RoutePaths.Exit, RoutePaths.CreateErc20RedPacket]
+const initialEntries = [RoutePaths.Exit, RoutePaths.CreateTokenRedPacket]
 
 export function RedPacketMainDialog({ onClose }: RedPacketDialogProps) {
     const { classes } = useStyles()
@@ -52,7 +52,7 @@ export function RedPacketMainDialog({ onClose }: RedPacketDialogProps) {
                 <RedPacketProvider>
                     <RouterDialog
                         pageMap={{
-                            [RedPacketTabs.tokens]: RoutePaths.CreateErc20RedPacket,
+                            [RedPacketTabs.tokens]: RoutePaths.CreateTokenRedPacket,
                             [RedPacketTabs.collectibles]: RoutePaths.CreateNftRedPacket,
                         }}
                         open

packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/OperationFooter.tsx

@@ -90,7 +90,10 @@ export function OperationFooter({
                 disabled={isLoading}
                 onClick={onClick}>
                 {unsatisfied ?
-                    <Trans>Conditions not met</Trans>
+                    <>
+                        <Trans>Who can claim</Trans>
+                        <Icons.Questions size={18} />
+                    </>
                 : canClaim ?
                     isClaiming ?
                         <Trans>Claiming...</Trans>

packages/plugins/RedPacket/src/SiteAdaptor/Routes.tsx

@@ -1,9 +1,9 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { RoutePaths } from '../constants.js'
-import { CreateERC20RedPacket } from './views/CreateERC20RedPacket.js'
+import { CreateTokenRedPacket } from './views/CreateTokenRedPacket.js'
 import { CreateNftRedPacket } from './views/CreateNftRedPacket.js'
 import { CustomCover } from './views/CustomCover.js'
-import { Erc20RedPacketConfirm } from './views/Erc20RedPacketConfirm.js'
+import { TokenRedPacketConfirm } from './views/TokenRedPacketConfirm.js'
 import { History } from './views/History.js'
 import { HistoryDetail } from './views/HistoryDetail.js'
 import { NftHistory } from './views/NftHistory.js'
@@ -14,7 +14,7 @@ export function RedPacketRoutes() {
     return (
         <Routes>
             <Route path={RoutePaths.Create}>
-                <Route index path={RoutePaths.CreateErc20RedPacket} element={<CreateERC20RedPacket />} />
+                <Route index path={RoutePaths.CreateTokenRedPacket} element={<CreateTokenRedPacket />} />
                 <Route path={RoutePaths.CreateNftRedPacket} element={<CreateNftRedPacket />} />
             </Route>
             <Route path={RoutePaths.CustomCover} element={<CustomCover />} />
@@ -25,13 +25,13 @@ export function RedPacketRoutes() {
             </Route>
             <Route path={RoutePaths.NftHistory} element={<NftHistory />} />
             <Route path={RoutePaths.Confirm}>
-                <Route index path={RoutePaths.ConfirmErc20RedPacket} element={<Erc20RedPacketConfirm />} />
+                <Route index path={RoutePaths.ConfirmTokenRedPacket} element={<TokenRedPacketConfirm />} />
                 <Route path={RoutePaths.ConfirmNftRedPacket} element={<NftRedPacketConfirm />} />
             </Route>
             {/* If router is embedded inside a dialog, */}
             {/* which should know it's time to close itself once we enter Exit */}
             <Route path={RoutePaths.Exit} element={null} />
-            <Route path="*" element={<Navigate replace to={RoutePaths.CreateErc20RedPacket} />} />
+            <Route path="*" element={<Navigate replace to={RoutePaths.CreateTokenRedPacket} />} />
         </Routes>
     )
 }

packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/OperationFooter.tsx

@@ -33,13 +33,15 @@ interface OperationFooterProps extends BoxProps {
     canRefund: boolean
     /** Is claiming or checking claim status */
     isClaiming: boolean
+    isExpired: boolean
     onClaimOrRefund: () => void | Promise<void>
 }
 export function OperationFooter({
     chainId,
     canClaim,
     canRefund,
     isClaiming,
+    isExpired,
     onClaimOrRefund,
     ...rest
 }: OperationFooterProps) {
@@ -50,6 +52,7 @@ export function OperationFooter({
 
     const { value: nativeTokenBalance } = useNativeTokenBalance()
 
+    if (isExpired) return null
     if (!canClaim && !canRefund && account) return null
 
     function getObtainButton(onClick: MouseEventHandler<HTMLButtonElement>) {

packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx

@@ -225,6 +225,7 @@ export const SolanaRedPacketCard = memo(function SolanaRedPacketCard({
                         canClaim={canClaim}
                         canRefund={canRefund}
                         isClaiming={isClaiming || isClaimingAndChecking}
+                        isExpired={availability.expired}
                         onClaimOrRefund={onClaimOrRefund}
                     />
                 </NetworkContextProvider>