fix: mf-6653 narrow down nft default chains (#12159)

* fix: mf-6650 show tab arrow

* fix: mf-6653 narrow down nft default chains

* fix: claim error

Author: swkatmask

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

@@ -77,7 +77,6 @@ export function NftRedPacket({ payload, currentPluginID }: NftRedPacketProps) {
     useEffect(() => {
         retryAvailability()
     }, [account])
-    console.log('availability', availability)
     const network = useNetwork(pluginID, payload.chainId)
     const outdated = !!(availability?.isClaimedAll || availability?.isCompleted || availability?.expired)
 
@@ -152,12 +151,14 @@ export function NftRedPacket({ payload, currentPluginID }: NftRedPacketProps) {
 
     const { showSnackbar } = useCustomSnackbar()
     const claim = useCallback(async () => {
-        const hash = await claimCallback()
-        await checkResult()
-        if (typeof hash === 'string') {
-            retryAvailability()
-        } else if (hash instanceof Error) {
-            showSnackbar(hash.message, {
+        try {
+            const hash = await claimCallback()
+            await checkResult()
+            if (typeof hash === 'string') {
+                retryAvailability()
+            }
+        } catch (err) {
+            showSnackbar((err as Error).message, {
                 variant: 'error',
             })
         }

packages/plugins/RedPacket/src/SiteAdaptor/hooks/useClaimNftRedpacketCallback.ts

@@ -19,7 +19,7 @@ export function useClaimNftRedpacketCallback(payload: RedPacketNftJSONPayload, t
     const signedMsg = useMemo(() => {
         return signMessage(account, payload.privateKey).signature ?? ''
     }, [account, payload.privateKey])
-    return useAsyncFn(async (): Promise<string | undefined | Error> => {
+    return useAsyncFn(async () => {
         if (!nftRedPacketContract || !id || !account || !totalAmount || !signedMsg) return
 
         const transaction = nftRedPacketContract.methods.claim(id, signedMsg, account)

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

@@ -22,10 +22,9 @@ const useStyles = makeStyles()((theme) => {
     return {
         root: {
             display: 'flex',
-            width: 568,
-            padding: 0,
+            width: '100%',
+            minHeight: 0,
             boxSizing: 'border-box',
-            height: 474,
             flexDirection: 'column',
             margin: '0 auto',
             overflow: 'auto',
@@ -38,6 +37,16 @@ const useStyles = makeStyles()((theme) => {
                 display: 'none',
             },
         },
+        content: {
+            minHeight: 0,
+            flexGrow: 1,
+            padding: theme.spacing(0, 2),
+            overflow: 'auto',
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+        },
         item: {
             width: '100%',
             padding: 0,
@@ -97,24 +106,26 @@ export function NftHistory() {
 
     return (
         <div className={classes.root}>
-            <NetworkTab chains={NFT_DEFAULT_CHAINS} hideArrowButton pluginID={NetworkPluginID.PLUGIN_EVM} />
-            {isLoading ?
-                <LoadingStatus className={classes.placeholder} iconSize={30} />
-            : !histories?.length ?
-                <EmptyStatus className={classes.placeholder} iconSize={36}>
-                    <Trans>
-                        You haven't created any NFT lucky drop yet. Try to create one and share fortune with your
-                        friends.
-                    </Trans>
-                </EmptyStatus>
-            :   <List style={{ padding: '16px 0 0' }}>
-                    {histories.map((history) => (
-                        <ListItem className={classes.item} key={history.txid}>
-                            <NftRedPacketRecord collections={collections} history={history} onSend={onSend} />
-                        </ListItem>
-                    ))}
-                </List>
-            }
+            <NetworkTab chains={NFT_DEFAULT_CHAINS} pluginID={NetworkPluginID.PLUGIN_EVM} />
+            <div className={classes.content}>
+                {isLoading ?
+                    <LoadingStatus className={classes.placeholder} iconSize={30} />
+                : !histories?.length ?
+                    <EmptyStatus className={classes.placeholder} iconSize={36}>
+                        <Trans>
+                            You haven't created any NFT lucky drop yet. Try to create one and share fortune with your
+                            friends.
+                        </Trans>
+                    </EmptyStatus>
+                :   <List style={{ padding: '16px 0 0' }}>
+                        {histories.map((history) => (
+                            <ListItem className={classes.item} key={history.txid}>
+                                <NftRedPacketRecord collections={collections} history={history} onSend={onSend} />
+                            </ListItem>
+                        ))}
+                    </List>
+                }
+            </div>
         </div>
     )
 }

packages/plugins/RedPacket/src/constants.ts

@@ -42,28 +42,15 @@ export const enum RoutePaths {
 export const MAX_FILE_SIZE = 1.5 * 1024 * 1024
 export const DURATION = 60 * 60 * 24
 
+// Chains that supported by the intersection of SimpleHash, Chainbase, and our deployed chains.
 export const NFT_DEFAULT_CHAINS = [
     ChainId.Mainnet,
     ChainId.BSC,
     ChainId.Polygon,
     ChainId.Arbitrum,
-    ChainId.xDai,
-    ChainId.Fantom,
     ChainId.Avalanche,
-    ChainId.Celo,
     ChainId.Optimism,
-    ChainId.Aurora,
-    ChainId.Fuse,
-    ChainId.Boba,
-    ChainId.Moonriver,
-    ChainId.Conflux,
-    ChainId.Harmony,
-    ChainId.Metis,
-    ChainId.Astar,
     ChainId.Base,
-    ChainId.Scroll,
-    ChainId.XLayer,
-    ChainId.Sei,
 ]
 
 function createTheme(themeId: string, cover: string): FireflyRedPacketAPI.ThemeGroupSettings {

packages/web3-providers/src/Chainbase/apis/RedPacketAPI.ts

@@ -15,7 +15,7 @@ import type { RedPacketBaseAPI } from '../../entry-types.js'
 
 export class ChainbaseRedPacketAPI implements RedPacketBaseAPI.Provider<ChainId, SchemaType> {
     /**
-     * @see https://docs.chainbase.com/reference/supported-chains
+     * @see https://docs.chainbase.com/platform/supported-networks/supported-networks
      */
     static isSupportedChain(chainId: ChainId) {
         const supported = [
@@ -25,9 +25,14 @@ export class ChainbaseRedPacketAPI implements RedPacketBaseAPI.Provider<ChainId,
             ChainId.Avalanche,
             ChainId.Arbitrum,
             ChainId.Base,
+            ChainId.Optimism,
             /** zkSync */ 324,
         ].includes(chainId)
-        console.error('Unsupported chain by ChainBase, see https://docs.chainbase.com/reference/supported-chains')
+        if (process.env.NODE_ENV === 'development' && !supported) {
+            console.error(
+                `Unsupported chain ${chainId} by Chainbase\n, see https://docs.chainbase.com/platform/supported-networks/supported-networks`,
+            )
+        }
         return supported
     }
     static async getHistoryTransactions(

packages/web3-shared/evm/src/types/index.ts

@@ -50,6 +50,7 @@ export enum ChainId {
     xDai = 100,
 
     // Avalanche
+    /** C-Chain */
     Avalanche = 43114,
     Avalanche_Fuji = 43113,