fixup! fixup! refactor: select nfts

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

@@ -8,7 +8,6 @@ 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() {
@@ -19,7 +18,6 @@ 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 />} />

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

@@ -3,9 +3,10 @@ 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, type NonFungibleCollection } from '@masknet/web3-shared-base'
-import { ChainId, type SchemaType } from '@masknet/web3-shared-evm'
+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'
 
@@ -73,13 +74,11 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface CollectionSelectPanelProps extends BoxProps {
     chainId?: ChainId
-    onContractChange: (contract: NonFungibleCollection<ChainId, SchemaType>) => void
     balance: number
-    collection: NonFungibleCollection<ChainId, SchemaType> | null | undefined
+    collection?: Web3Helper.NonFungibleCollectionAll
 }
 
 export function CollectionSelectPanel({
-    onContractChange,
     collection,
     chainId = ChainId.Mainnet,
     balance,

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

@@ -0,0 +1,78 @@
+import { Icons } from '@masknet/icons'
+import { AssetPreviewer } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import type { Web3Helper } from '@masknet/web3-helpers'
+import { formatTokenId } from '@masknet/web3-shared-evm'
+import { Typography } from '@mui/material'
+import { memo } from 'react'
+
+const useStyles = makeStyles()((theme) => {
+    return {
+        removeButton: {
+            position: 'absolute',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            top: 3,
+            right: 3,
+            overflow: 'hidden',
+            cursor: 'pointer',
+            color: 'rgba(255, 53, 69, 1)',
+        },
+        fallbackImage: {
+            minHeight: '0 !important',
+            maxWidth: 'none',
+            width: 64,
+            height: 64,
+        },
+        preview: {
+            height: 'auto',
+            aspectRatio: '1 / 1',
+            borderRadius: 8,
+            overflow: 'hidden',
+        },
+        card: {
+            width: 86,
+            position: 'relative',
+            borderRadius: 8,
+            overflow: 'hidden',
+            backgroundColor: theme.palette.maskColor.input,
+        },
+        cardName: {
+            height: 24,
+            fontSize: 12,
+            fontWeight: 700,
+            color: theme.palette.maskColor.main,
+            padding: theme.spacing(0.5),
+            boxSizing: 'border-box',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        },
+    }
+})
+
+interface NFTCardProps {
+    token: Web3Helper.NonFungibleAssetAll
+    onRemove: (token: Web3Helper.NonFungibleAssetAll) => void
+}
+
+export const NFTCard = memo(function NFTCard(props: NFTCardProps) {
+    const { token, onRemove } = props
+    const { classes } = useStyles()
+    return (
+        <div className={classes.card}>
+            <AssetPreviewer
+                url={token.metadata?.mediaURL || token.metadata?.imageURL}
+                classes={{
+                    fallbackImage: classes.fallbackImage,
+                    root: classes.preview,
+                }}
+            />
+            <Typography className={classes.cardName} color="textSecondary">
+                {formatTokenId(token.tokenId, 2)}
+            </Typography>
+            <Icons.Clear size={20} className={classes.removeButton} onClick={() => onRemove(token)} />
+        </div>
+    )
+})

packages/plugins/RedPacket/src/SiteAdaptor/contexts/RedPacketContext.tsx

@@ -21,6 +21,7 @@ import {
 import { DURATION, PRESET_THEMES, RED_PACKET_DEFAULT_SHARES } from '../../constants.js'
 import { NFTSelectOption, type OrderedERC721Token } from '../../types.js'
 import type { RedPacketSettings } from '../hooks/useCreateCallback.js'
+import type { Web3Helper } from '@masknet/web3-helpers'
 
 export enum ConditionType {
     Crypto = 'Crypto',
@@ -61,14 +62,14 @@ interface RedPacketContextOptions {
     // NFT
     nftGasOption: GasConfig | undefined
     setNftGasOption: Dispatch<SetStateAction<GasConfig | undefined>>
-    selectedNfts: OrderedERC721Token[]
-    setSelectedNfts: Dispatch<SetStateAction<OrderedERC721Token[]>>
+    selectedNfts: Web3Helper.NonFungibleAssetAll[]
+    setSelectedNfts: Dispatch<SetStateAction<Web3Helper.NonFungibleAssetAll[]>>
     myNfts: OrderedERC721Token[]
     setMyNfts: Dispatch<SetStateAction<OrderedERC721Token[]>>
     selectOption: NFTSelectOption | undefined
     setSelectOption: Dispatch<SetStateAction<NFTSelectOption>>
-    collection: NonFungibleCollection<ChainId, SchemaType> | undefined
-    setCollection: Dispatch<SetStateAction<NonFungibleCollection<ChainId, SchemaType> | undefined>>
+    collection: Web3Helper.NonFungibleCollectionAll | undefined
+    setCollection: Dispatch<SetStateAction<Web3Helper.NonFungibleCollectionAll | undefined>>
 }
 export const RedPacketContext = createContext<RedPacketContextOptions>({
     gasOption: undefined,
@@ -165,7 +166,7 @@ export const RedPacketProvider = memo(function RedPacketProvider({ children }: P
 
     // NFT
     const [nftGasOption, setNftGasOption] = useState<GasConfig>()
-    const [selectedNfts, setSelectedNfts] = useState<OrderedERC721Token[]>([])
+    const [selectedNfts, setSelectedNfts] = useState<Web3Helper.NonFungibleAssetAll[]>([])
     const [myNfts, setMyNfts] = useState<OrderedERC721Token[]>([])
     const [selectOption, setSelectOption] = useState<NFTSelectOption>(NFTSelectOption.Partial)
     const [collection, setCollection] = useState<NonFungibleCollection<ChainId, SchemaType>>()