fix: token badge icon (#12078)

* fix: token badge icon * fix: solana redpacket expired
DimensionDev · Jan 26, 2025 · 1d03eb6 · 1d03eb6
1 parent 9466f32
commit 1d03eb6
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 82 deletions.
diff --git a/packages/mask/popups/pages/Wallet/Interaction/WatchTokenRequest.tsx b/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

diff --git a/packages/mask/popups/pages/Wallet/TokenDetail/index.tsx b/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}

diff --git a/packages/mask/popups/pages/Wallet/Transfer/FungibleTokenSection.tsx b/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}

diff --git a/packages/mask/popups/pages/Wallet/components/AssetsList/index.tsx b/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}

diff --git a/packages/plugins/Collectible/src/SiteAdaptor/Shared/OfferCard.tsx b/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}

diff --git a/packages/plugins/GoPlusSecurity/src/SiteAdaptor/components/SecurityPanel.tsx b/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>

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/OperationFooter.tsx b/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>) {

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/SolanaRedPacketCard.tsx b/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>

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/hooks/useAvailability.ts b/packages/plugins/RedPacket/src/SiteAdaptor/SolanaRedPacket/hooks/useAvailability.ts
@@ -49,7 +49,8 @@ export function useSolanaAvailability(payload: SolanaRedPacketJSONPayload, chain
             refresh,
         }
     }
-    const isExpired = data.duration.add(data.createTime).muln(1000).ltn(Date.now())
+    const ms = data.duration.add(data.createTime).muln(1000)
+    const isExpired = ms.toNumber() < Date.now()
     const isEmpty = data.claimedAmount.gte(data.totalAmount)
     const isClaimed = !!claimRecord
 

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/NftRedPacketRecord.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/NftRedPacketRecord.tsx
@@ -81,8 +81,6 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
             },
         },
         icon: {
-            width: 18,
-            height: 18,
             marginLeft: 6,
             zIndex: -1,
         },
@@ -257,6 +255,8 @@ export const NftRedPacketRecord = memo(function NftRedPacketRecord({
                             </Trans>
                         </Typography>
                         <TokenIcon
+                            size={18}
+                            disableBadge
                             className={classes.icon}
                             address={collection?.address ?? ''}
                             name={collection?.name ?? '-'}

diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsForm.tsx
@@ -69,8 +69,6 @@ const useStyles = makeStyles()((theme, props) => ({
         fontWeight: 'bold',
     },
     rowImage: {
-        width: '24px',
-        height: '24px',
         margin: '0 5px 0 0',
     },
     button: { width: '100%' },
@@ -304,11 +302,13 @@ export function SavingsFormDialog({ chainId, protocol, tab, onClose }: SavingsFo
                     <div className={classes.infoRow}>
                         <Typography variant="body2" component="div" className={classes.infoRowLeft}>
                             <TokenIcon
+                                size={24}
                                 className={classes.rowImage}
                                 address={protocol.bareToken.address}
                                 logoURL={protocol.bareToken.logoURL}
                                 chainId={protocol.bareToken.chainId}
                                 name={protocol.bareToken.name}
+                                disableBadge
                             />
                             {protocol.bareToken.name} <Trans>APR</Trans>%
                         </Typography>

diff --git a/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx b/packages/plugins/Savings/src/SiteAdaptor/SavingsTable/SavingsRow.tsx
@@ -12,7 +12,7 @@ import { ProviderIconURLs } from '../IconURL.js'
 import { useApr, useBalance } from '../hooks/index.js'
 import { Trans } from '@lingui/react/macro'
 
-const useStyles = makeStyles()((theme, props) => ({
+const useStyles = makeStyles()((theme) => ({
     tableRow: {
         display: 'flex',
         background: theme.palette.maskColor.bg,
@@ -33,10 +33,6 @@ const useStyles = makeStyles()((theme, props) => ({
         position: 'relative',
         margin: '0 20px 0 0',
     },
-    logo: {
-        width: '32px',
-        height: '32px',
-    },
     logoMini: {
         height: '16px',
         position: 'absolute',
@@ -70,8 +66,9 @@ export const SavingsRow = memo(function SavingsRow({ protocol, isDeposit, onWith
                     <TokenIcon
                         name={protocol.bareToken.name}
                         address={protocol.bareToken.address}
-                        className={classes.logo}
+                        size={32}
                         chainId={chainId}
+                        disableBadge
                     />
                     <img src={ProviderIconURLs[protocol.type]} className={classes.logoMini} />
                 </div>

diff --git a/packages/plugins/SmartPay/src/SiteAdaptor/components/SmartPayContent.tsx b/packages/plugins/SmartPay/src/SiteAdaptor/components/SmartPayContent.tsx
@@ -400,21 +400,14 @@ export const SmartPayContent = memo(() => {
                         .map((token, index) => (
                             <ListItem className={classes.listItem} key={index}>
                                 <Box display="flex" alignItems="center" columnGap="10px">
-                                    <Box position="relative" width={40} height={36}>
-                                        <TokenIcon
-                                            size={36}
-                                            address={token.address}
-                                            name={token.name}
-                                            chainId={token.chainId}
-                                            logoURL={token.logoURL}
-                                        />
-                                        <ImageIcon
-                                            className={classes.badge}
-                                            style={{ right: 0 }}
-                                            size={12}
-                                            icon={polygonDescriptor?.icon}
-                                        />
-                                    </Box>
+                                    <TokenIcon
+                                        size={36}
+                                        address={token.address}
+                                        name={token.name}
+                                        chainId={token.chainId}
+                                        logoURL={token.logoURL}
+                                        badgeSize={12}
+                                    />
                                     <Box>
                                         <Typography fontSize={16} lineHeight="20px" fontWeight={700}>
                                             {token.symbol}

diff --git a/packages/plugins/Trader/src/SiteAdaptor/components/DexRouters.tsx b/packages/plugins/Trader/src/SiteAdaptor/components/DexRouters.tsx
@@ -11,10 +11,6 @@ const useStyles = makeStyles()((theme) => ({
         alignItems: 'center',
         gap: theme.spacing(0.5),
     },
-    tokenIcon: {
-        height: 30,
-        width: 30,
-    },
     arrow: {
         transform: 'rotate(-90deg)',
         color: theme.palette.maskColor.second,
@@ -58,11 +54,7 @@ export const DexRouters = memo<Props>(function DexRouters({ chainId, percent, ro
     return (
         <div className={classes.route}>
             <Typography className={classes.token} component="div">
-                <TokenIcon
-                    className={classes.tokenIcon}
-                    chainId={chainId}
-                    address={startSubRoute!.fromToken.tokenContractAddress}
-                />
+                <TokenIcon size={30} chainId={chainId} address={startSubRoute!.fromToken.tokenContractAddress} />
                 {percent}%
             </Typography>
             {middleSubRoutes.map((subRouter) => {
@@ -75,11 +67,7 @@ export const DexRouters = memo<Props>(function DexRouters({ chainId, percent, ro
             })}
             <Icons.ArrowDrop className={classes.arrow} size={20} />
             <div className={classes.token}>
-                <TokenIcon
-                    className={classes.tokenIcon}
-                    chainId={chainId}
-                    address={endSubRoute!.toToken.tokenContractAddress}
-                />
+                <TokenIcon size={30} chainId={chainId} address={endSubRoute!.toToken.tokenContractAddress} />
             </div>
         </div>
     )

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trending/NonFungibleTickersTable.tsx b/packages/plugins/Trader/src/SiteAdaptor/trending/NonFungibleTickersTable.tsx
@@ -297,6 +297,7 @@ function TransactionValue({ result, chainId, activity }: TransactionValueProps)
                     symbol={activity.trade_symbol}
                     address={activity.contract_address}
                     className={classes.tokenIcon}
+                    disableBadge
                 />
             }
 

diff --git a/packages/shared/src/UI/components/CoinMetadataTable/ContractSection.tsx b/packages/shared/src/UI/components/CoinMetadataTable/ContractSection.tsx
@@ -33,7 +33,7 @@ export function ContractSection({
             {chain ?
                 <WalletIcon mainIcon={chain.icon} size={14} />
             : iconURL ?
-                <TokenIcon logoURL={iconURL} address={address} name={name} symbol={symbol} size={16} />
+                <TokenIcon logoURL={iconURL} address={address} name={name} symbol={symbol} size={16} disableBadge />
             :   <Box width={16} />}
             <Typography
                 variant="body2"

diff --git a/packages/shared/src/hooks/useGasCurrencyMenu.tsx b/packages/shared/src/hooks/useGasCurrencyMenu.tsx
@@ -72,7 +72,7 @@ export function useGasCurrencyMenu(
             nativeToken ?
                 <MenuItem className={classes.item} disableRipple onClick={() => handleChange(nativeToken.address)}>
                     <Typography className={classes.token} component="div">
-                        <TokenIcon {...pick(nativeToken, 'chainId', 'address', 'symbol')} size={30} />
+                        <TokenIcon {...pick(nativeToken, 'chainId', 'address', 'symbol')} size={30} disableBadge />
                         {nativeToken.symbol}
                     </Typography>
                     <RadioIndicator
@@ -88,7 +88,7 @@ export function useGasCurrencyMenu(
                     disableRipple
                     onClick={!availableBalanceTooLow ? () => handleChange(maskToken.address) : noop}>
                     <Typography className={classes.token} component="div">
-                        <TokenIcon {...pick(maskToken, 'chainId', 'address', 'symbol')} size={30} />
+                        <TokenIcon {...pick(maskToken, 'chainId', 'address', 'symbol')} size={30} disableBadge />
                         {maskToken.symbol}
                     </Typography>
                     {availableBalanceTooLow ?