fix: adjust redpacket ui (#12064)

* fix: mf-6577 background color of condition settings popover

* fix: mf-6585 limit input for token amount

* fix: mf-6582 limit network sidebar networks

* fix: mf-6588 resend evm redpacket

* refactor: change token and nft condition to single choice

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

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/react/macro'
 import { Icons } from '@masknet/icons'
 import { SelectFungibleTokenModal, SelectNonFungibleContractModal, TokenIcon } from '@masknet/shared'
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
-import { CheckBoxIndicator, makeStyles, RadioIndicator, ShadowRootPopper, ShadowRootTooltip } from '@masknet/theme'
+import { makeStyles, RadioIndicator, ShadowRootPopper, ShadowRootTooltip } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import type { FungibleToken, NonFungibleCollection } from '@masknet/web3-shared-base'
 import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
@@ -43,7 +43,6 @@ const useStyles = makeStyles()((theme) => {
         },
         option: {
             display: 'flex',
-            width: '100%',
             padding: theme.spacing(0.5),
             cursor: 'pointer',
         },
@@ -59,7 +58,7 @@ const useStyles = makeStyles()((theme) => {
             borderRadius: 16,
             padding: theme.spacing(1.5),
             width: 400,
-            backgroundColor: theme.palette.background.paper,
+            backgroundColor: theme.palette.maskColor.bottom,
             boxShadow:
                 theme.palette.mode === 'light' ?
                     '0px 4px 30px rgba(0, 0, 0, 0.1)'
@@ -196,15 +195,10 @@ export function ConditionSettings(props: HTMLProps<HTMLDivElement>) {
                             <label
                                 className={classes.option}
                                 onClick={() => {
-                                    setConditions(
-                                        conditions.includes(ConditionType.Crypto) ?
-                                            conditions.filter((c) => c !== ConditionType.Crypto)
-                                        :   [...conditions, ConditionType.Crypto],
-                                    )
+                                    setConditions([ConditionType.Crypto])
                                 }}>
-                                <CheckBoxIndicator
+                                <RadioIndicator
                                     checked={conditions.includes(ConditionType.Crypto)}
-                                    color={theme.palette.maskColor.primary}
                                     uncheckedColor={theme.palette.maskColor.secondaryLine}
                                 />
                                 <Typography className={classes.rowLabel}>
@@ -236,6 +230,8 @@ export function ConditionSettings(props: HTMLProps<HTMLDivElement>) {
                                             autoComplete: 'off',
                                             autoCorrect: 'off',
                                             inputMode: 'decimal',
+                                            maxlength: 16,
+                                            max: 10000000000,
                                             spellCheck: false,
                                         }}
                                     />
@@ -305,15 +301,10 @@ export function ConditionSettings(props: HTMLProps<HTMLDivElement>) {
                             <label
                                 className={classes.option}
                                 onClick={() => {
-                                    setConditions(
-                                        conditions.includes(ConditionType.NFT) ?
-                                            conditions.filter((c) => c !== ConditionType.NFT)
-                                        :   [...conditions, ConditionType.NFT],
-                                    )
+                                    setConditions([ConditionType.NFT])
                                 }}>
-                                <CheckBoxIndicator
+                                <RadioIndicator
                                     checked={conditions.includes(ConditionType.NFT)}
-                                    color={theme.palette.maskColor.primary}
                                     uncheckedColor={theme.palette.maskColor.secondaryLine}
                                 />
                                 <Typography className={classes.rowLabel}>

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

@@ -1,20 +1,21 @@
 import { Trans } from '@lingui/react/macro'
+import { RoutePaths } from '@masknet/plugin-redpacket'
+import { ApplicationBoardModal } from '@masknet/shared'
 import { NetworkPluginID, RedPacketMetaKey } from '@masknet/shared-base'
+import { openWindow } from '@masknet/shared-base-ui'
 import { ActionButton, makeStyles, type ActionButtonProps } from '@masknet/theme'
+import { useEnvironmentContext, useWeb3Utils } from '@masknet/web3-hooks-base'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import type { ChainId } from '@masknet/web3-shared-evm'
-import { useMediaQuery, type Theme } from '@mui/material'
 import { type ChainId as SolanaChainId } from '@masknet/web3-shared-solana'
+import { useMediaQuery, type Theme } from '@mui/material'
 import { memo, useCallback, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useAsyncFn } from 'react-use'
+import type { HistoryInfo } from '../../types.js'
 import { CompositionTypeContext } from '../contexts/CompositionTypeContext.js'
 import { useRefundCallback, useSolanaRefundCallback } from '../hooks/useRefundCallback.js'
 import { openComposition } from '../openComposition.js'
-import { useEnvironmentContext, useWeb3Utils } from '@masknet/web3-hooks-base'
-import { useNavigate } from 'react-router-dom'
-import { RoutePaths } from '@masknet/plugin-redpacket'
-import { ApplicationBoardModal } from '@masknet/shared'
-import { openWindow } from '@masknet/shared-base-ui'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -48,6 +49,7 @@ interface TokenInfo {
     symbol: string
     decimals: number
     amount?: string
+    address: string
 }
 const RedPacketStatus = FireflyRedPacketAPI.RedPacketStatus
 
@@ -58,7 +60,9 @@ interface Props extends ActionButtonProps {
     claim_strategy?: FireflyRedPacketAPI.StrategyPayload[]
     shareFrom?: string
     themeId?: string
+    isRandom: boolean
     tokenInfo: TokenInfo
+    history: HistoryInfo
     redpacketMsg?: string
     chainId: ChainId | SolanaChainId
     totalAmount?: string
@@ -77,7 +81,9 @@ export const RedPacketActionButton = memo(function RedPacketActionButton({
     claim_strategy,
     shareFrom,
     themeId,
+    isRandom,
     tokenInfo,
+    history,
     redpacketMsg,
     chainId,
     totalAmount,
@@ -128,18 +134,36 @@ export const RedPacketActionButton = memo(function RedPacketActionButton({
                     chainId,
                     symbol: tokenInfo.symbol,
                     decimals: tokenInfo.decimals,
+                    address: tokenInfo.address,
                 },
                 contract_address: rpid,
                 rpid,
-                shares: totalAmount,
+                shares: history.total_numbers ? +history.total_numbers : 5,
                 total: tokenInfo.amount,
+                is_random: isRandom,
+                duration: history.duration,
             },
             compositionType,
             { claimRequirements: claim_strategy },
         )
         ApplicationBoardModal.close()
         navigate(RoutePaths.Exit)
-    }, [navigate])
+    }, [
+        navigate,
+        account,
+        shareFrom,
+        themeId,
+        createdAt,
+        tokenInfo.amount,
+        tokenInfo.address,
+        compositionType,
+        claim_strategy,
+        rpid,
+        totalAmount,
+        isRandom,
+        redpacketMsg,
+        chainId,
+    ])
 
     const redpacketStatus = refunded || solanaRefunded ? RedPacketStatus.Refund : propRedpacketStatus
 

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

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { TokenIcon } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
 import { openWindow, useEverSeen } from '@masknet/shared-base-ui'
 import { ActionButton, makeStyles, ShadowRootTooltip, TextOverflowTooltip } from '@masknet/theme'
 import {
@@ -26,10 +27,10 @@ import { memo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { RoutePaths } from '../../constants.js'
 import { RedPacketRPC } from '../../messages.js'
+import type { HistoryInfo } from '../../types.js'
+import { formatTokenAmount } from '../helpers/formatTokenAmount.js'
 import { useCreateRedPacketReceipt } from '../hooks/useCreateRedPacketReceipt.js'
 import { RedPacketActionButton } from './RedPacketActionButton.js'
-import { formatTokenAmount } from '../helpers/formatTokenAmount.js'
-import { NetworkPluginID } from '@masknet/shared-base'
 
 const DEFAULT_BACKGROUND = NETWORK_DESCRIPTORS.find((x) => x.chainId === ChainId.Mainnet)!.backgroundGradient!
 const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()((
@@ -154,29 +155,6 @@ const useStyles = makeStyles<{ background?: string; backgroundIcon?: string }>()
     }
 })
 
-interface HistoryInfo {
-    rp_msg: string
-    redpacket_id: string
-    received_time?: string
-    token_decimal: number
-    total_amounts?: string
-    token_symbol: string
-    token_amounts?: string
-    token_logo: string
-    chain_id: number
-    creator?: string
-    claim_numbers?: string
-    total_numbers?: string
-    claim_amounts?: string
-    create_time?: number
-    redpacket_status?: FireflyRedPacketAPI.RedPacketStatus
-    ens_name?: string
-    claim_strategy?: FireflyRedPacketAPI.StrategyPayload[]
-    share_from?: string
-    theme_id?: string
-    trans_hash: string
-}
-
 interface RedPacketRecordProps {
     history: HistoryInfo
     showDetailLink?: boolean
@@ -355,7 +333,7 @@ export const RedPacketRecord = memo(function RedPacketRecord({
                     }}>
                     {t`View`}
                 </ActionButton>
-            : redpacket_status ?
+            : redpacket_status && createSuccessResult ?
                 <RedPacketActionButton
                     className={classes.actionButton}
                     redpacketStatus={redpacket_status}
@@ -365,11 +343,14 @@ export const RedPacketRecord = memo(function RedPacketRecord({
                     shareFrom={share_from}
                     themeId={theme_id}
                     redpacketMsg={rp_msg}
+                    isRandom={createSuccessResult.ifrandom}
                     tokenInfo={{
                         symbol: tokenSymbol,
                         decimals: token_decimal,
                         amount: total_amounts,
+                        address: createSuccessResult.token_address,
                     }}
+                    history={history}
                     chainId={chainId}
                     totalAmount={total_amounts}
                     createdAt={create_time}

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

@@ -167,6 +167,7 @@ export function Erc20RedPacketConfirm() {
                     icon: token.logoURL,
                 })) as FireflyRedPacketAPI.TokensStrategyPayload[],
             })
+            return list
         }
         if (needHoldingCollections) {
             list.push({
@@ -178,6 +179,7 @@ export function Erc20RedPacketConfirm() {
                     icon: collection.iconURL!,
                 })),
             })
+            return list
         }
         return list
     }, [needHoldingTokens, requiredTokens, requiredCollections, tokenQuantity])

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

@@ -12,6 +12,7 @@ import { EmptyStatus, LoadingStatus } from '@masknet/shared'
 import { Trans } from '@lingui/react/macro'
 import { useEnvironmentContext } from '@masknet/web3-hooks-base'
 import { ThemeProvider } from '@mui/material'
+import { DURATION } from '../../constants.js'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -67,10 +68,16 @@ export function HistoryDetail() {
     const claims = useMemo(() => data?.pages.flatMap((x) => x.list) ?? EMPTY_LIST, [data?.pages])
     const info = first(data?.pages)
 
-    const patchedHistory = useMemo(
-        () => (history ? { ...history, claim_numbers: info?.claim_numbers, total_numbers: info?.total_numbers } : null),
-        [history],
-    )
+    const patchedHistory = useMemo(() => {
+        return history ?
+                {
+                    ...history,
+                    claim_numbers: info?.claim_numbers,
+                    total_numbers: info?.total_numbers,
+                    duration: DURATION,
+                }
+            :   null
+    }, [history])
     return (
         <div className={classes.container}>
             {patchedHistory ?

packages/plugins/RedPacket/src/types.ts

@@ -1,4 +1,5 @@
 import type { BN, web3 } from '@coral-xyz/anchor'
+import type { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import type { NonFungibleToken } from '@masknet/web3-shared-base'
 import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
@@ -84,3 +85,27 @@ export interface RedPacketAccount {
     claimedUsers: web3.PublicKey[] // List of users who claimed
     claimedAmountRecords: BN[] // List of claimed amounts
 }
+
+export interface HistoryInfo {
+    rp_msg: string
+    redpacket_id: string
+    received_time?: string
+    token_decimal: number
+    total_amounts?: string
+    token_symbol: string
+    token_amounts?: string
+    token_logo: string
+    chain_id: number
+    creator?: string
+    claim_numbers?: string
+    total_numbers?: string
+    claim_amounts?: string
+    create_time?: number
+    redpacket_status?: FireflyRedPacketAPI.RedPacketStatus
+    ens_name?: string
+    claim_strategy?: FireflyRedPacketAPI.StrategyPayload[]
+    share_from?: string
+    theme_id?: string
+    trans_hash: string
+    duration: number
+}

packages/shared/src/UI/components/AssetsManagement/ChainRuntimeProvider.tsx

@@ -1,9 +1,9 @@
 import { EMPTY_LIST, NetworkPluginID } from '@masknet/shared-base'
 import type { Web3Helper } from '@masknet/web3-helpers'
 import { CHAIN_DESCRIPTORS, ChainId, type NetworkType, type SchemaType } from '@masknet/web3-shared-evm'
-import { ChainId as FlowChainId } from '@masknet/web3-shared-flow'
+import { type ChainId as FlowChainId } from '@masknet/web3-shared-flow'
 import { noop, sortBy } from 'lodash-es'
-import { ChainId as SolanaChainId } from '@masknet/web3-shared-solana'
+import { type ChainId as SolanaChainId } from '@masknet/web3-shared-solana'
 import { useNetworks } from '@masknet/web3-hooks-base'
 import {
     createContext,
@@ -16,6 +16,7 @@ import {
     useContext,
 } from 'react'
 import type { ReasonableNetwork } from '@masknet/web3-shared-base'
+import { SimpleHashSupportedChains } from '../../../constants.js'
 
 interface ChainRuntimeOptions {
     pluginID: NetworkPluginID
@@ -33,25 +34,6 @@ const ChainRuntimeContext = createContext<ChainRuntimeOptions>({
     networks: EMPTY_LIST,
 })
 
-// https://docs.simplehash.com/reference/chains
-// sync `resolveChainId` and `ChainNameMap` in `web3-providers/src/SimpleHash/helpers.ts`
-const SimpleHashSupportedChains: Record<NetworkPluginID, number[]> = {
-    [NetworkPluginID.PLUGIN_EVM]: [
-        ChainId.Mainnet,
-        ChainId.BSC,
-        ChainId.Base,
-        ChainId.Polygon,
-        ChainId.Arbitrum,
-        ChainId.Optimism,
-        ChainId.Avalanche,
-        ChainId.xDai,
-        ChainId.Scroll,
-        ChainId.Zora,
-    ],
-    [NetworkPluginID.PLUGIN_SOLANA]: [SolanaChainId.Mainnet],
-    [NetworkPluginID.PLUGIN_FLOW]: [FlowChainId.Mainnet],
-}
-
 export interface ChainRuntimeProviderProps
     extends Pick<ChainRuntimeOptions, 'pluginID' | 'defaultChainId' | 'account'> {}