fix: nft redpacket issues (#12161)

swkatmask · web-flow · commit a86835ced747 · 2025-03-11T18:50:04.000+08:00
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/NftRedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/NftRedPacket/index.tsx
@@ -187,6 +187,7 @@ export function NftRedPacket({ payload, currentPluginID }: NftRedPacketProps) {
                 creator={payload.senderName}
                 asset={claimedAsset}
                 collection={collection}
+                chainId={payload.chainId}
                 shares={availability.totalAmount}
                 claimedCount={+availability.claimedAmount}
                 total={availability.totalAmount}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/CollectionSelectPanel.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/CollectionSelectPanel.tsx
@@ -74,7 +74,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface CollectionSelectPanelProps extends BoxProps {
     chainId?: ChainId
-    balance: number
+    balance: string | null | undefined
     collection?: Web3Helper.NonFungibleCollectionAll
 }
 
@@ -103,7 +103,7 @@ export function CollectionSelectPanel({
                     null
                 :   <Typography className={classes.title} component="span">
                         <Trans>
-                            Balance: <b>{balance ? balance : '0'}</b>
+                            Balance: <b>{balance || 0}</b>
                         </Trans>
                     </Typography>}
             </div>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/NftRedPacketEnvelope.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/NftRedPacketEnvelope.tsx
@@ -5,10 +5,9 @@ import { NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles, ShadowRootTooltip, TextOverflowTooltip } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { useNetworks } from '@masknet/web3-hooks-base'
-import { SimpleHashResolveChainId } from '@masknet/web3-providers'
 import type { SimpleHash } from '@masknet/web3-providers/types'
 import { isZero, type NonFungibleAsset } from '@masknet/web3-shared-base'
-import { ChainId } from '@masknet/web3-shared-evm'
+import { type ChainId } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import type { HTMLProps } from 'react'
 
@@ -194,6 +193,7 @@ interface Props extends HTMLProps<HTMLDivElement> {
     message: string
     asset?: NonFungibleAsset<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll> | null
     collection: SimpleHash.Collection | undefined
+    chainId: ChainId
     shares?: number
     /** claimed entities */
     claimedCount: number
@@ -212,6 +212,7 @@ export function NftRedPacketEnvelope({
     message,
     asset,
     collection,
+    chainId,
     shares = 1,
     claimedCount,
     total,
@@ -229,7 +230,6 @@ export function NftRedPacketEnvelope({
     const metadata = asset?.metadata
 
     const pluginID = asset?.runtime || NetworkPluginID.PLUGIN_EVM
-    const chainId = asset?.chainId || SimpleHashResolveChainId(collection?.chain) || ChainId.Mainnet
     const networks = useNetworks(pluginID)
     const network = networks.find((x) => x.chainId === asset?.chainId)
     const assetId = asset?.id ? `#${asset.id}`.replace(/^##/, '#') : ''
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/components/PreviewNftRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/components/PreviewNftRedPacket.tsx
@@ -1,15 +1,17 @@
-import { type HTMLProps } from 'react'
 import { t } from '@lingui/core/macro'
-import { type NonFungibleAsset } from '@masknet/web3-shared-base'
-import type { FireflyRedPacketAPI, SimpleHash } from '@masknet/web3-providers/types'
 import type { Web3Helper } from '@masknet/web3-helpers'
+import type { FireflyRedPacketAPI, SimpleHash } from '@masknet/web3-providers/types'
+import { type NonFungibleAsset } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { type HTMLProps } from 'react'
 import { NftRedPacketEnvelope } from './NftRedPacketEnvelope.js'
 
 interface Props extends HTMLProps<HTMLDivElement> {
     theme?: FireflyRedPacketAPI.ThemeGroupSettings
     message: string
     asset?: NonFungibleAsset<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
     collection: SimpleHash.Collection | undefined
+    chainId: ChainId
     creator: string
     totalShares: number
 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useMyCollectionNfts.ts b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useMyCollectionNfts.ts
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/CreateNftRedPacket.tsx
@@ -17,6 +17,7 @@ import {
     useEnvironmentContext,
     useNativeToken,
     useNativeTokenPrice,
+    useNonFungibleTokenBalance,
     useSmartPayChainId,
     useWallet,
 } from '@masknet/web3-hooks-base'
@@ -31,7 +32,6 @@ import { MessageInput } from '../components/MessageInput.js'
 import { NFTCard } from '../components/NFTCard.js'
 import { useRedPacket } from '../contexts/RedPacketContext.js'
 import { useCreateNFTRedpacketGas } from '../hooks/useCreateNftRedpacketGas.js'
-import { useMyCollectionNfts } from '../hooks/useMyCollectionNfts.js'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -113,11 +113,10 @@ export function CreateNftRedPacket() {
         { chainId },
     )
 
-    const { data: assets_ = EMPTY_LIST } = useMyCollectionNfts()
-
-    const assets = collection?.assets?.length ? collection.assets : assets_
-
-    const balance = collection?.balance ?? assets.length
+    const { data: balance } = useNonFungibleTokenBalance(pluginID, collection?.address, {
+        account,
+        chainId,
+    })
     const removeToken = useCallback((token: Web3Helper.NonFungibleAssetAll) => {
         setSelectedNfts((list) => list.filter((t) => t.tokenId !== token.tokenId))
     }, [])
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/NftRedPacketConfirm.tsx
@@ -261,6 +261,7 @@ export function NftRedPacketConfirm() {
                             totalShares={selectedNfts.length}
                             asset={selectedNfts[0]}
                             collection={simplehashCollection}
+                            chainId={chainId}
                             theme={theme}
                         />
                     </div>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/views/SelectCollectibles.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/views/SelectCollectibles.tsx
@@ -67,7 +67,7 @@ export function SelectCollectibles() {
     const noChanges = useMemo(() => {
         const pendingSet = new Set(pendingNfts.map((x) => [x.chainId, x.address, x.tokenId].join(':').toLowerCase()))
         const selectedSet = new Set(selectedNfts.map((x) => [x.chainId, x.address, x.tokenId].join(':').toLowerCase()))
-        return pendingSet.difference(selectedSet).size === 0
+        return pendingSet.difference(selectedSet).size === 0 && selectedSet.difference(pendingSet).size === 0
     }, [pendingNfts, selectedNfts])
 
     const [pendingTokenCount, setPendingTokenCount] = useState(0)
diff --git a/packages/plugins/RedPacket/src/constants.ts b/packages/plugins/RedPacket/src/constants.ts
@@ -50,7 +50,6 @@ export const NFT_DEFAULT_CHAINS = [
     ChainId.Arbitrum,
     ChainId.Avalanche,
     ChainId.Optimism,
-    ChainId.Base,
 ]
 
 function createTheme(themeId: string, cover: string): FireflyRedPacketAPI.ThemeGroupSettings {
diff --git a/packages/plugins/RedPacket/src/locale/en-US.po b/packages/plugins/RedPacket/src/locale/en-US.po
diff --git a/packages/plugins/RedPacket/src/locale/ja-JP.po b/packages/plugins/RedPacket/src/locale/ja-JP.po
diff --git a/packages/plugins/RedPacket/src/locale/ko-KR.po b/packages/plugins/RedPacket/src/locale/ko-KR.po
diff --git a/packages/plugins/RedPacket/src/locale/zh-CN.po b/packages/plugins/RedPacket/src/locale/zh-CN.po
diff --git a/packages/plugins/RedPacket/src/locale/zh-TW.po b/packages/plugins/RedPacket/src/locale/zh-TW.po
diff --git a/packages/shared/src/UI/components/AssetsManagement/Collection.tsx b/packages/shared/src/UI/components/AssetsManagement/Collection.tsx
@@ -1,17 +1,18 @@
+import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { EMPTY_LIST, type NetworkPluginID } from '@masknet/shared-base'
 import { useEverSeen } from '@masknet/shared-base-ui'
 import { ShadowRootTooltip, makeStyles, useBoundedPopperProps, useDetectOverflow } from '@masknet/theme'
 import type { Web3Helper } from '@masknet/web3-helpers'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import { Skeleton, Typography, useForkRef } from '@mui/material'
 import { range } from 'lodash-es'
-import { memo, useLayoutEffect, type HTMLProps, useMemo } from 'react'
+import { memo, useLayoutEffect, useMemo, type HTMLProps } from 'react'
 import { isSameNFT } from '../../../utils/index.js'
+import { useUserAssets } from './AssetsProvider.js'
 import { CollectibleCard } from './CollectibleCard.js'
 import { CollectibleItem, CollectibleItemSkeleton, type CollectibleItemProps } from './CollectibleItem.js'
 import { useCompactDetection } from './useCompactDetection.js'
-import { Trans } from '@lingui/react/macro'
-import { useUserAssets } from './AssetsProvider.js'
 
 const useStyles = makeStyles<{ compact?: boolean }>()((theme, { compact }) => ({
     folder: {
@@ -28,6 +29,9 @@ const useStyles = makeStyles<{ compact?: boolean }>()((theme, { compact }) => ({
             cursor: 'not-allowed !important',
         },
     },
+    dim: {
+        opacity: 0.5,
+    },
     grid: {
         display: 'grid',
         overflow: 'auto',
@@ -145,11 +149,18 @@ export const Collection = memo(
         const assetsSlice = hasExtra ? assets.slice(0, 3) : assets
 
         const assetDisabled = assetDisableRule?.(collection)
+        const selectedCollection = selectedAssets?.[0]?.collection
+        const isDim =
+            multiple && selectedCollection ?
+                !isSameAddress(selectedCollection.address, collection.address) ||
+                selectedCollection.chainId !== collection.chainId
+            :   false
+
         if (collection.balance! <= 2 || (!loading && assets.length < 2) || expanded) {
             const renderAssets = assetsSlice.map((asset) => (
                 <CollectibleItem
                     key={`${asset.chainId}.${asset.address}.${asset.tokenId}`}
-                    className={className}
+                    className={cx(className, isDim ? classes.dim : null)}
                     asset={asset}
                     pluginID={pluginID}
                     disableName={expanded}
@@ -172,7 +183,7 @@ export const Collection = memo(
 
         const renderAssets = assetsSlice.map((asset) => (
             <CollectibleCard
-                className={classes.collectibleCard}
+                className={cx(classes.collectibleCard, isDim ? classes.dim : null)}
                 asset={asset}
                 pluginID={pluginID}
                 key={`${collection.id}.${asset.address}.${asset.tokenId}`}
diff --git a/packages/web3-constants/evm/nft-red-packet.json b/packages/web3-constants/evm/nft-red-packet.json
@@ -35,7 +35,7 @@
         "Gorli": 0,
         "BSC": 10932348,
         "BSCT": 0,
-        "Base": 0,
+        "Base": 2604103,
         "Base_Goerli": 0,
         "Polygon": 19131916,
         "Mumbai": 0,
diff --git a/packages/web3-hooks/base/src/useNonFungibleTokenBalance.ts b/packages/web3-hooks/base/src/useNonFungibleTokenBalance.ts
@@ -1,17 +1,25 @@
-import { useAsyncRetry } from 'react-use'
 import type { NetworkPluginID } from '@masknet/shared-base'
+import { useNetworkContext } from '@masknet/web3-hooks-base'
+import { getConnection } from '@masknet/web3-providers'
 import type { ConnectionOptions } from '@masknet/web3-providers/types'
-import { useWeb3Connection } from './useWeb3Connection.js'
+import { useQuery } from '@tanstack/react-query'
 
 export function useNonFungibleTokenBalance<T extends NetworkPluginID = NetworkPluginID>(
-    pluginID?: T,
+    expectedPluginID?: T,
     address?: string,
     options?: ConnectionOptions<T>,
 ) {
-    const Web3 = useWeb3Connection(pluginID, options)
+    const { pluginID } = useNetworkContext(expectedPluginID)
 
-    return useAsyncRetry(async () => {
-        if (!address) return '0'
-        return Web3.getNonFungibleTokenBalance(address)
-    }, [address, Web3])
+    return useQuery({
+        queryKey: ['non-fungible-token', 'balance', pluginID, address, options],
+        queryFn: async () => {
+            if (!pluginID || !address) return null
+            const Web3 = getConnection(pluginID, options)
+            return Web3.getNonFungibleTokenBalance(address, undefined, undefined, {
+                chainId: options?.chainId,
+                account: options?.account,
+            })
+        },
+    })
 }
diff --git a/packages/web3-providers/src/Chainbase/apis/RedPacketAPI.ts b/packages/web3-providers/src/Chainbase/apis/RedPacketAPI.ts
@@ -24,7 +24,6 @@ export class ChainbaseRedPacketAPI implements RedPacketBaseAPI.Provider<ChainId,
             ChainId.BSC,
             ChainId.Avalanche,
             ChainId.Arbitrum,
-            ChainId.Base,
             ChainId.Optimism,
             /** zkSync */ 324,
         ].includes(chainId)
diff --git a/packages/web3-providers/src/Etherscan/apis/RedPacketAPI.ts b/packages/web3-providers/src/Etherscan/apis/RedPacketAPI.ts
@@ -14,7 +14,14 @@ class EtherscanRedPacketAPI implements RedPacketBaseAPI.Provider<ChainId, Schema
         startBlock: number,
         endBlock: number,
     ): Promise<Array<Transaction<ChainId, SchemaType>> | undefined> {
-        if (!senderAddress || !contractAddress || !startBlock || !endBlock || !methodId) return
+        if (!senderAddress || !contractAddress || !endBlock || !methodId) {
+            if (process.env.NODE_ENV === 'development') {
+                if (!startBlock || !endBlock) {
+                    console.error('Start block or end block is empty or 0', { startBlock, endBlock })
+                }
+            }
+            return
+        }
 
         const { result } = await fetchJSON<{ result: Array<Transaction<ChainId, SchemaType>> }>(
             urlcat(EtherscanURL.from(chainId), {

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,6 @@ export const NFT_DEFAULT_CHAINS = [`
`50`	`50`	`ChainId.Arbitrum,`
`51`	`51`	`ChainId.Avalanche,`
`52`	`52`	`ChainId.Optimism,`
`53`		`- ChainId.Base,`
`54`	`53`	`]`
`55`	`54`
`56`	`55`	`function createTheme(themeId: string, cover: string): FireflyRedPacketAPI.ThemeGroupSettings {`