fix: nft redpacket issues (#12144)

* fix: mf-6643 disable report spam for nft picker in redpacket

* fix: mf-6642 add custom nfts

* fix: filter nfts

* fixup! fix: mf-6642 add custom nfts

Author: swkatmask

packages/plugins/RedPacket/package.json

@@ -33,6 +33,7 @@
     "@masknet/web3-shared-evm": "workspace:^",
     "@masknet/web3-shared-solana": "workspace:^",
     "@masknet/web3-telemetry": "workspace:^",
+    "@servie/events": "^3.0.0",
     "@solana/spl-token": "^0.4.9",
     "@solana/web3.js": "^1.75.0",
     "@tanstack/react-query": "^5.49.2",

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

@@ -8,6 +8,7 @@ import { useLayoutEffect, type ReactNode } from 'react'
 import { matchPath, useLocation, useNavigate } from 'react-router-dom'
 import { RoutePaths } from '../../constants.js'
 import { HistoryTabs, RedPacketTabs } from '../../types.js'
+import { addCollectibles } from '../emitter.js'
 
 export function RouterDialog({
     pageMap,
@@ -52,6 +53,7 @@ export function RouterDialog({
         [RoutePaths.HistoryDetail]: <Trans>Claim Details</Trans>,
         [RoutePaths.NftHistory]: <Trans>History</Trans>,
         [RoutePaths.CustomCover]: <Trans>Add a Custom Cover</Trans>,
+        [RoutePaths.SelectCollectibles]: <Trans>Selecting NFTs</Trans>,
     }
     const titleTailMap: Record<string, ReactNode> = {
         [RoutePaths.CreateTokenRedPacket]: (
@@ -71,6 +73,7 @@ export function RouterDialog({
                 }}
             />
         ),
+        [RoutePaths.SelectCollectibles]: <Icons.Plus onClick={addCollectibles} />,
     }
 
     return (

packages/plugins/RedPacket/src/SiteAdaptor/emitter.ts

@@ -1,6 +1,13 @@
+import { Emitter } from '@servie/events'
 import type { CompositionType } from '@masknet/plugin-infra/content-script'
 import { CrossIsolationMessages } from '@masknet/shared-base'
 
 export function openDialog(compositionType: CompositionType = 'timeline') {
     CrossIsolationMessages.events.redpacketDialogEvent.sendToLocal({ open: true, compositionType })
 }
+
+export const emitter = new Emitter<{ add: [] }>()
+
+export function addCollectibles() {
+    emitter.emit('add')
+}

packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx

@@ -32,7 +32,6 @@ import { NFTCard } from '../components/NFTCard.js'
 import { useRedPacket } from '../contexts/RedPacketContext.js'
 import { useCreateNFTRedpacketGas } from '../hooks/useCreateNftRedpacketGas.js'
 import { useMyCollectionNfts } from '../hooks/useMyCollectionNfts.js'
-import { ConditionSettings } from '../components/ConditionSettings.js'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -43,20 +42,6 @@ const useStyles = makeStyles()((theme) => {
             gap: theme.spacing(2),
             paddingBottom: 88,
         },
-        field: {
-            display: 'flex',
-            gap: 16,
-            alignItems: 'center',
-        },
-        label: {
-            fontSize: 14,
-            fontWeight: 700,
-            lineHeight: '18px',
-            color: theme.palette.maskColor.second,
-        },
-        fieldValue: {
-            marginLeft: 'auto',
-        },
         approveAllTip: {
             color: '#FF5F5F',
             margin: theme.spacing(0, 0.5),
@@ -175,12 +160,6 @@ export function CreateNftRedPacket() {
                         </Typography>
                     :   null}
                 </Box>
-                <Box className={classes.field}>
-                    <Typography className={classes.label}>
-                        <Trans>Claim Conditions</Trans>
-                    </Typography>
-                    <ConditionSettings className={classes.fieldValue} />
-                </Box>
                 {nativeTokenDetailed && nativeTokenPrice ?
                     <SelectGasSettingsToolbar
                         className={classes.toolbar}

packages/plugins/RedPacket/src/SiteAdaptor/views/SelectCollectibles.tsx

@@ -1,16 +1,18 @@
 import { Trans } from '@lingui/react/macro'
-import { CollectionList, UserAssetsProvider } from '@masknet/shared'
+import { AddCollectiblesModal, CollectionList, UserAssetsProvider } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
-import { useChainContext } from '@masknet/web3-hooks-base'
+import { useChainContext, useNetworkContext, useWeb3Connection, useWeb3Hub } from '@masknet/web3-hooks-base'
 import { isSameAddress } from '@masknet/web3-shared-base'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import { alpha, Box, Button, DialogActions } from '@mui/material'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { NFT_DEFAULT_CHAINS, NFT_RED_PACKET_MAX_SHARES } from '../../constants.js'
 import { useRedPacket } from '../contexts/RedPacketContext.js'
+import { emitter } from '../emitter.js'
+import { compact, uniqBy } from 'lodash-es'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -40,8 +42,12 @@ const gridProps = {
 }
 export function SelectCollectibles() {
     const { classes } = useStyles()
-    const { account, setChainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const { account, chainId, setChainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const [assetChainId, setAssetChainId] = useState<ChainId>()
     const navigate = useNavigate()
+    const { pluginID } = useNetworkContext()
+    const Web3 = useWeb3Connection(pluginID)
+    const Hub = useWeb3Hub(pluginID)
     const { selectedNfts, setSelectedNfts, setCollection } = useRedPacket()
     const [pendingNfts, setPendingNfts] = useState<Web3Helper.NonFungibleAssetAll[]>(selectedNfts)
     const handleItemClick = useCallback((nft: Web3Helper.NonFungibleAssetAll) => {
@@ -61,6 +67,60 @@ export function SelectCollectibles() {
         const selectedSet = new Set(selectedNfts.map((x) => [x.chainId, x.address, x.tokenId].join(':').toLowerCase()))
         return pendingSet.difference(selectedSet).size === 0
     }, [pendingNfts, selectedNfts])
+
+    const [pendingTokenCount, setPendingTokenCount] = useState(0)
+    const [tokens, setTokens] = useState<Web3Helper.NonFungibleAssetAll[]>([])
+    const handleAddCollectibles = useCallback(async () => {
+        const results = await AddCollectiblesModal.openAndWaitForClose({
+            pluginID,
+            chainId: assetChainId || chainId,
+            account,
+        })
+        if (!results) return
+        const [contract, tokenIds] = results
+        const selectedChainId = contract.chainId || assetChainId || chainId
+        const address = contract.address
+        setPendingTokenCount((count) => count + tokenIds.length)
+        const allSettled = await Promise.allSettled(
+            tokenIds.map(async (tokenId) => {
+                const [asset, token, isOwner] = await Promise.all([
+                    Hub.getNonFungibleAsset(address, tokenId, {
+                        chainId: selectedChainId,
+                        account,
+                    }),
+                    Web3.getNonFungibleToken(address, tokenId, undefined, {
+                        chainId: selectedChainId,
+                    }),
+                    Web3.getNonFungibleTokenOwnership(address, tokenId, account, undefined, {
+                        chainId: selectedChainId,
+                    }),
+                ])
+
+                if (!asset?.contract?.chainId || !token.chainId || token.contract?.chainId !== assetChainId) return
+                if (!isOwner) return
+                return { ...token, ...asset } as Web3Helper.NonFungibleAssetAll
+            }),
+        )
+
+        setPendingTokenCount((count) => Math.max(count - tokenIds.length, 0))
+        const tokens = compact(allSettled.map((x) => (x.status === 'fulfilled' ? x.value : null)))
+        if (!tokens.length) return
+        setTokens((originalTokens) => {
+            return uniqBy([...originalTokens, ...tokens], (x) => `${x.contract?.address}.${x.tokenId}`)
+        })
+    }, [pluginID, assetChainId, chainId, account])
+
+    const handleSelect = useCallback((assets: Web3Helper.NonFungibleAssetAll[]) => {
+        setPendingNfts(assets.length > NFT_RED_PACKET_MAX_SHARES ? assets.slice(0, NFT_RED_PACKET_MAX_SHARES) : assets)
+    }, [])
+
+    useEffect(() => {
+        const unsubscribe = emitter.on('add', handleAddCollectibles)
+        return () => {
+            unsubscribe()
+        }
+    }, [handleAddCollectibles])
+
     return (
         <Box className={classes.container}>
             <UserAssetsProvider
@@ -73,8 +133,18 @@ export function SelectCollectibles() {
                 maxSelectionDescription={
                     <Trans>The maximum number of NFTs to be sold in one collection lucky drop contract is 255.</Trans>
                 }
-                selectedAssets={pendingNfts}>
-                <CollectionList height={564} gridProps={gridProps} disableWindowScroll onItemClick={handleItemClick} />
+                selectedAssets={pendingNfts}
+                disableReport>
+                <CollectionList
+                    height={564}
+                    gridProps={gridProps}
+                    disableWindowScroll
+                    additionalAssets={tokens}
+                    pendingAdditionalAssetCount={pendingTokenCount}
+                    onItemClick={handleItemClick}
+                    onChainChange={setAssetChainId as (chainId?: Web3Helper.ChainIdAll) => void}
+                    onSelect={handleSelect}
+                />
             </UserAssetsProvider>
             <DialogActions className={classes.dialogActions}>
                 <Button className={classes.cancel} fullWidth variant="outlined" onClick={() => navigate(-1)}>