[WIP]feat: mf-6050 nft redpacket

.ignore

@@ -1,3 +1,5 @@
 # Ignores for rg or ag
 patches/
 packages/mask/dashboard/assets/images/SetupTutorial.svg
+
+**/locale/*.{po,json}

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

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/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'
 
@@ -141,25 +132,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/Routes.tsx

@@ -8,7 +8,7 @@ import { History } from './views/History.js'
 import { HistoryDetail } from './views/HistoryDetail.js'
 import { NftHistory } from './views/NftHistory.js'
 import { NftRedPacketConfirm } from './views/NftRedPacketConfirm.js'
-import { SelectNft } from './views/SelectNft.js'
+import { SelectCollectibles } from './views/SelectCollectibles.js'
 
 export function RedPacketRoutes() {
     return (
@@ -18,7 +18,7 @@ export function RedPacketRoutes() {
                 <Route path={RoutePaths.CreateNftRedPacket} element={<CreateNftRedPacket />} />
             </Route>
             <Route path={RoutePaths.CustomCover} element={<CustomCover />} />
-            <Route path={RoutePaths.SelectNft} element={<SelectNft />} />
+            <Route path={RoutePaths.SelectCollectibles} element={<SelectCollectibles />} />
             <Route path={RoutePaths.History}>
                 <Route index element={<History />} />
                 <Route path={RoutePaths.HistoryDetail} element={<HistoryDetail />} />

packages/plugins/RedPacket/src/SiteAdaptor/components/CollectionSelectPanel.tsx

@@ -0,0 +1,136 @@
+import { Trans } from '@lingui/macro'
+import { Icons } from '@masknet/icons'
+import { RoutePaths } from '@masknet/plugin-redpacket'
+import { TokenIcon } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import type { Web3Helper } from '@masknet/web3-helpers'
+import { useWeb3Utils } from '@masknet/web3-hooks-base'
+import { SourceType } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { Box, Typography, type BoxProps } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        height: 70,
+        borderRadius: 12,
+        padding: theme.spacing(1.5),
+        boxSizing: 'border-box',
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexDirection: 'column',
+        gap: theme.spacing(0.5),
+        backgroundColor: theme.palette.maskColor.input,
+    },
+    title: {
+        fontSize: 13,
+        lineHeight: '18px',
+        color: theme.palette.maskColor.second,
+        '& b': {
+            fontWeight: 700,
+            color: theme.palette.maskColor.main,
+        },
+    },
+    wrapper: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+    },
+    tokenWrapper: {
+        display: 'flex',
+        width: '100%',
+        gap: theme.spacing(1),
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    selectButton: {
+        display: 'flex',
+        gap: theme.spacing(0.5),
+        alignItems: 'center',
+        height: 24,
+        padding: theme.spacing(0.5, 1),
+        boxSizing: 'border-box',
+        fontSize: 12,
+        fontWeight: 700,
+        backgroundColor: theme.palette.maskColor.main,
+        color: theme.palette.maskColor.bottom,
+        cursor: 'pointer',
+        borderRadius: 64,
+    },
+    nftName: {
+        fontWeight: 700,
+        pointerEvents: 'none',
+        fontSize: 18,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        marginRight: 'auto',
+    },
+    pointer: {
+        cursor: 'pointer',
+    },
+}))
+
+export interface CollectionSelectPanelProps extends BoxProps {
+    chainId?: ChainId
+    balance: number
+    collection?: Web3Helper.NonFungibleCollectionAll
+}
+
+export function CollectionSelectPanel({
+    collection,
+    chainId = ChainId.Mainnet,
+    balance,
+    className,
+    ...rest
+}: CollectionSelectPanelProps) {
+    const { classes, cx, theme } = useStyles()
+    const Utils = useWeb3Utils()
+    const navigate = useNavigate()
+
+    return (
+        <Box className={cx(classes.root, className)} {...rest}>
+            <div className={classes.wrapper}>
+                <Typography className={classes.title} color="textSecondary" variant="body2" component="span">
+                    <Trans>Collectibles</Trans>
+                </Typography>
+                {(
+                    !collection?.address ||
+                    !Utils.isValidAddress(collection.address) ||
+                    (collection.source === SourceType.SimpleHash && !collection.id)
+                ) ?
+                    null
+                :   <Typography className={classes.title} component="span">
+                        <Trans>
+                            Balance: <b>{balance ? balance : '0'}</b>
+                        </Trans>
+                    </Typography>}
+            </div>
+            <div
+                className={cx(classes.wrapper, classes.pointer)}
+                onClick={() => {
+                    navigate(RoutePaths.SelectCollectibles)
+                }}>
+                {collection ?
+                    <div className={classes.tokenWrapper}>
+                        {collection.iconURL ?
+                            <TokenIcon
+                                logoURL={collection.iconURL}
+                                chainId={collection.chainId}
+                                size={24}
+                                badgeSize={10}
+                            />
+                        :   null}
+                        <Typography className={classes.nftName}>{collection.name}</Typography>
+                        <Icons.ArrowDrop color={theme.palette.maskColor.second} size={24} />
+                    </div>
+                :   <Typography className={classes.selectButton}>
+                        <Trans>Select NFTs</Trans>
+                        <Icons.ArrowDrop size={16} />
+                    </Typography>
+                }
+            </div>
+        </Box>
+    )
+}