[WIP] feat: mf-6528 redpacket condition (#12012)

* fix: remove unused codes in web3profile

* feat: redpacket condition

* refactor: allow to select multiple tokens

* fixup! refactor: allow to select multiple tokens

* fix: adjust style for token picker

* fix: token picker

* fix: nft collection picker

* fix: typing

* fix: token icon

* fix: mf-6540 adjust redpacket layout

* fix: show conditions in confirm page

* fixup! fix: token icon

* fixup! fix: token icon

* fix: run codegen

---------

Co-authored-by: swkatmask <[email protected]>

Author: swkatmask

packages/mask/popups/components/TokenPicker/TokenItem.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
-import { NetworkIcon, ProgressiveText, TokenIcon } from '@masknet/shared'
+import { ProgressiveText, TokenIcon } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useEverSeen } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
@@ -9,16 +9,7 @@ import { useFungibleTokenBalance, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { debank } from '@masknet/web3-providers/helpers'
 import { type ReasonableNetwork } from '@masknet/web3-shared-base'
 import type { ChainId } from '@masknet/web3-shared-evm'
-import {
-    Box,
-    Link,
-    ListItem,
-    ListItemIcon,
-    ListItemText,
-    Typography,
-    useForkRef,
-    type ListItemProps,
-} from '@mui/material'
+import { Link, ListItem, ListItemIcon, ListItemText, Typography, useForkRef, type ListItemProps } from '@mui/material'
 import { memo, useMemo, useRef } from 'react'
 import { formatTokenBalance } from '../../../shared/index.js'
 
@@ -38,14 +29,6 @@ const useStyles = makeStyles()((theme) => {
             width: 36,
             height: 36,
         },
-        badgeIcon: {
-            position: 'absolute',
-            right: -6,
-            bottom: -4,
-            border: `1px solid ${theme.palette.common.white}`,
-            borderRadius: '50%',
-            fontSize: 10,
-        },
         listText: {
             margin: 0,
         },
@@ -141,25 +124,16 @@ export const TokenItem = memo(function TokenItem({
             ref={forkedRef}
             {...rest}>
             <ListItemIcon>
-                {/* TODO utility TokenIcon with badge */}
-                <Box position="relative">
-                    <TokenIcon
-                        className={classes.tokenIcon}
-                        pluginID={NetworkPluginID.PLUGIN_EVM}
-                        chainId={asset.chainId}
-                        address={asset.address}
-                        name={asset.name}
-                        logoURL={asset.logoURL}
-                        size={36}
-                    />
-                    <NetworkIcon
-                        className={classes.badgeIcon}
-                        pluginID={NetworkPluginID.PLUGIN_EVM}
-                        chainId={network?.chainId || asset.chainId}
-                        size={16}
-                        network={network}
-                    />
-                </Box>
+                <TokenIcon
+                    className={classes.tokenIcon}
+                    pluginID={NetworkPluginID.PLUGIN_EVM}
+                    chainId={asset.chainId}
+                    address={asset.address}
+                    name={asset.name}
+                    logoURL={asset.logoURL}
+                    size={36}
+                    badgeSize={16}
+                />
             </ListItemIcon>
             <ListItemText
                 className={classes.listText}

packages/mask/popups/modals/ChooseCurrencyModal/index.tsx

@@ -63,7 +63,7 @@ const CurrencyItem = memo(function CurrencyItem({ fiatCurrencyType }: CurrencyIt
                 <FiatCurrencyIcon type={fiatCurrencyType} size={24} />
                 <Typography className={classes.text}>{resolveCurrencyFullName(fiatCurrencyType)}</Typography>
             </Box>
-            <RadioIndicator size={20} checked={checked} unCheckedButtonColor={theme.palette.maskColor.secondaryLine} />
+            <RadioIndicator size={20} checked={checked} uncheckedColor={theme.palette.maskColor.secondaryLine} />
         </li>
     )
 })

packages/mask/popups/pages/Trader/useImplementRuntime.tsx

@@ -19,7 +19,7 @@ export function useImplementRuntime() {
         async (
             currentToken: Web3Helper.FungibleTokenAll | null | undefined,
             side: 'from' | 'to',
-            excludes: string[],
+            excludes: Web3Helper.FungibleTokenAll[],
         ): Promise<Web3Helper.FungibleTokenAll | null> => {
             const supportedChains = chainQuery.data ?? (await chainQuery.refetch()).data
 
@@ -32,7 +32,7 @@ export function useImplementRuntime() {
                 lockChainId: isSwap && side === 'to' && !!fromChainId,
                 assetSource: AssetSource.Okx,
             })
-            if (!picked) return null
+            if (!picked || Array.isArray(picked)) return null
             return {
                 id: picked.address,
                 chainId: picked.chainId,

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

@@ -260,33 +260,35 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
     const claimedOrEmpty = listOfStatus.includes(RedPacketStatus.claimed) || isEmpty
 
     return (
-        <Card className={classes.root} component="article" elevation={0}>
-            <RedPacketEnvelope
-                className={classes.envelope}
-                cover={cover?.backgroundImageUrl || new URL('../assets/cover.png', import.meta.url).href}
-                message={payload.sender.message}
-                token={token}
-                shares={payload.shares}
-                isClaimed={isClaimed}
-                isEmpty={isEmpty}
-                isExpired={isExpired}
-                isRefunded={isRefunded}
-                claimedCount={+availability.claimed}
-                total={payload.total}
-                totalClaimed={minus(payload.total, payload.total_remaining || availability.balance).toFixed()}
-                claimedAmount={availability.claimed_amount}
-                creator={payload.sender.name}
-            />
-            {cover ?
-                <Grow in={showRequirements ? !checkingClaimStatus : false} timeout={250}>
-                    <Requirements
-                        showResults={!claimedOrEmpty}
-                        statusList={claimStrategyStatus?.claimStrategyStatus ?? EMPTY_LIST}
-                        className={classes.requirements}
-                        onClose={() => setShowRequirements(false)}
-                    />
-                </Grow>
-            :   null}
+        <>
+            <Card className={classes.root} component="article" elevation={0}>
+                <RedPacketEnvelope
+                    className={classes.envelope}
+                    cover={cover?.backgroundImageUrl || new URL('../assets/cover.png', import.meta.url).href}
+                    message={payload.sender.message}
+                    token={token}
+                    shares={payload.shares}
+                    isClaimed={isClaimed}
+                    isEmpty={isEmpty}
+                    isExpired={isExpired}
+                    isRefunded={isRefunded}
+                    claimedCount={+availability.claimed}
+                    total={payload.total}
+                    totalClaimed={minus(payload.total, payload.total_remaining || availability.balance).toFixed()}
+                    claimedAmount={availability.claimed_amount}
+                    creator={payload.sender.name}
+                />
+                {cover ?
+                    <Grow in={showRequirements ? !checkingClaimStatus : false} timeout={250}>
+                        <Requirements
+                            showResults={!claimedOrEmpty}
+                            statusList={claimStrategyStatus?.claimStrategyStatus ?? EMPTY_LIST}
+                            className={classes.requirements}
+                            onClose={() => setShowRequirements(false)}
+                        />
+                    </Grow>
+                :   null}
+            </Card>
             {outdated ?
                 null
             : myHandle ?
@@ -306,6 +308,6 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
                     }}
                 />
             }
-        </Card>
+        </>
     )
 })