fix: bugfix for redpacket history & change api (#11422)

* feat: change rp history api for maskbook * fix: remove debug code * chore: review * fix: type error * fix: type error * fix: prettier * chore: remove unused * chore: code review * fix: remove debug code * fix: fix type * fix: type --------- Co-authored-by: beyond009 <[email protected]>
DimensionDev · Feb 23, 2024 · 26bb321 · 26bb321
1 parent f741463
commit 26bb321
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 247 deletions.
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketDetailsItem.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketDetailsItem.tsx
@@ -7,7 +7,7 @@ import { Box, ListItem, Typography } from '@mui/material'
 import { memo } from 'react'
 import { RedPacketTrans, useRedPacketTrans } from '../locales/index.js'
 import { format, fromUnixTime } from 'date-fns'
-import { FireflyRedPacketActionButton } from './FireflyRedPacketActionButton.js'
+import { RedPacketActionButton } from './RedPacketActionButton.js'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import { FireflyRedPacketAccountItem } from './FireflyRedPacketAccountItem.js'
 import { Icons } from '@masknet/icons'
@@ -317,20 +317,27 @@ export const FireflyRedPacketDetailsItem = memo(function FireflyRedPacketDetails
                                         <div className={classes.icons}>
                                             {(
                                                 postReactionStrategy?.payload as FireflyRedPacketAPI.PostReactionStrategyPayload
-                                            )?.params?.map((x) => (
-                                                <PlatformButton
-                                                    key={x.postId}
-                                                    platform={x.platform}
-                                                    postId={x.postId}
-                                                    className={classes.button}
-                                                />
-                                            ))}
+                                            )?.params
+                                                ?.sort((a, b) => {
+                                                    if (a.platform === b.platform) return 0
+                                                    if (a.platform === FireflyRedPacketAPI.PlatformType.lens) return 1
+                                                    if (b.platform === FireflyRedPacketAPI.PlatformType.lens) return -1
+                                                    return 0
+                                                })
+                                                .map((x) => (
+                                                    <PlatformButton
+                                                        key={x.postId}
+                                                        platform={x.platform}
+                                                        postId={x.postId}
+                                                        className={classes.button}
+                                                    />
+                                                ))}
                                         </div>
                                     </div>
                                 :   null}
                             </div>
                             {redpacket_status && redpacket_status !== FireflyRedPacketAPI.RedPacketStatus.View ?
-                                <FireflyRedPacketActionButton
+                                <RedPacketActionButton
                                     redpacketStatus={redpacket_status}
                                     rpid={redpacket_id}
                                     account={account}

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketHistoryDetails.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketHistoryDetails.tsx
@@ -15,6 +15,7 @@ const useStyles = makeStyles()((theme) => ({
     container: {
         padding: '12px 16px',
         height: 474,
+        overflow: 'auto',
         '&::-webkit-scrollbar': {
             display: 'none',
         },
@@ -76,7 +77,7 @@ export const FireflyRedPacketHistoryDetails = memo(function FireflyRedPacketHist
                             <FireflyRedPacketAccountItem address={item.creator} chainId={claimInfo?.chain_id} />
                             <Typography>
                                 {formatBalance(item.token_amounts, item.token_decimal, {
-                                    significant: 2,
+                                    significant: 6,
                                     isPrecise: true,
                                 })}{' '}
                                 {item.token_symbol}

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketHistoryList.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketHistoryList.tsx
@@ -1,14 +1,13 @@
 import { ElementAnchor, EmptyStatus } from '@masknet/shared'
-import { createIndicator, type NetworkPluginID } from '@masknet/shared-base'
+import { type NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
 import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
 import { List } from '@mui/material'
 import { memo, useMemo } from 'react'
 import { RedPacketTrans, useRedPacketTrans } from '../locales/index.js'
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
-import { FireflyRedPacket } from '../../../../web3-providers/src/Firefly/RedPacket.js'
 import { FireflyRedPacketDetailsItem } from './FireflyRedPacketDetailsItem.js'
+import { useRedPacketHistory } from './hooks/useRedPacketHistory.js'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -53,20 +52,7 @@ export const FireflyRedPacketHistoryList = memo(function RedPacketHistoryList({
     const t = useRedPacketTrans()
     const { classes } = useStyles()
     const { account } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
-    const { data: historiesData, fetchNextPage } = useSuspenseInfiniteQuery({
-        queryKey: ['fireflyRedPacketHistory', account, historyType],
-        initialPageParam: createIndicator(undefined, ''),
-        queryFn: async ({ pageParam }) => {
-            const res = await FireflyRedPacket.getHistory(
-                historyType,
-                account as `0x${string}`,
-                FireflyRedPacketAPI.SourceType.FireflyPC,
-                pageParam,
-            )
-            return res
-        },
-        getNextPageParam: (lastPage) => lastPage.nextIndicator,
-    })
+    const { data: historiesData, fetchNextPage } = useRedPacketHistory(account, historyType)
     const histories = useMemo(() => historiesData.pages.flatMap((page) => page.data), [historiesData])
 
     if (!histories?.length)

diff --git a/...eAdaptor/FireflyRedPacketActionButton.tsx → ...src/SiteAdaptor/RedPacketActionButton.tsx b/...eAdaptor/FireflyRedPacketActionButton.tsx → ...src/SiteAdaptor/RedPacketActionButton.tsx
@@ -24,7 +24,7 @@ const useStyles = makeStyles()((theme) => {
                 marginTop: theme.spacing(1),
             },
             '&:disabled': {
-                background: theme.palette.maskColor.dark,
+                background: theme.palette.maskColor.primaryMain,
                 color: theme.palette.common.white,
             },
             '&:hover': {
@@ -55,7 +55,7 @@ interface Props {
     createdAt?: number
 }
 
-export const FireflyRedPacketActionButton = memo(function FireflyRedPacketActionButton(props: Props) {
+export const RedPacketActionButton = memo(function RedPacketActionButton(props: Props) {
     const {
         redpacketStatus: _redpacketStatus,
         rpid,

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketDialog.tsx
@@ -94,7 +94,6 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const [rpid, setRpid] = useState<string>('')
     const [showClaimRule, setShowClaimRule] = useState(false)
     const [gasOption, setGasOption] = useState<GasConfig>()
-    const isFirefly = !!props.fireflyContext
 
     const [step, setStep] = useState(CreateRedPacketPageStep.NewRedPacketPage)
 
@@ -128,6 +127,8 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const [openSelectNFTDialog, setOpenSelectNFTDialog] = useState(false)
     // #endregion
 
+    const isFirefly = !!props.fireflyContext
+
     const handleClose = useCallback(() => {
         setStep(CreateRedPacketPageStep.NewRedPacketPage)
         setSettings(undefined)

diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketHistoryList.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketHistoryList.tsx
@@ -1,10 +1,10 @@
-import { EmptyStatus, LoadingStatus } from '@masknet/shared'
+import { EmptyStatus, LoadingStatus, ElementAnchor } from '@masknet/shared'
 import { type NetworkPluginID } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useChainContext } from '@masknet/web3-hooks-base'
-import { type RedPacketJSONPayload } from '@masknet/web3-providers/types'
+import { FireflyRedPacketAPI, type RedPacketJSONPayload } from '@masknet/web3-providers/types'
 import { List } from '@mui/material'
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { useRedPacketTrans } from '../locales/index.js'
 import { RedPacketInHistoryList } from './RedPacketInHistoryList.js'
 import { useRedPacketHistory } from './hooks/useRedPacketHistory.js'
@@ -42,18 +42,31 @@ export const RedPacketHistoryList = memo(function RedPacketHistoryList({ onSelec
     const t = useRedPacketTrans()
     const { classes } = useStyles()
     const { account, chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
-    const { data: histories, isPending } = useRedPacketHistory(account, chainId)
+    const {
+        data: historiesData,
+        isLoading,
+        fetchNextPage,
+    } = useRedPacketHistory(account, FireflyRedPacketAPI.ActionType.Send, FireflyRedPacketAPI.SourceType.MaskNetwork)
+    const histories = useMemo(
+        () => historiesData.pages.flatMap((page) => page.data).filter((x) => x.chain_id === chainId),
+        [historiesData, chainId],
+    )
 
-    if (isPending) return <LoadingStatus className={classes.placeholder} iconSize={30} />
+    if (isLoading) return <LoadingStatus className={classes.placeholder} iconSize={30} />
 
     if (!histories?.length) return <EmptyStatus className={classes.placeholder}>{t.search_no_result()}</EmptyStatus>
 
     return (
         <div className={classes.root}>
             <List style={{ padding: '16px 0 0' }}>
                 {histories.map((history) => (
-                    <RedPacketInHistoryList key={history.txid} history={history} onSelect={onSelect} />
+                    <RedPacketInHistoryList
+                        key={history.redpacket_id}
+                        history={history as FireflyRedPacketAPI.RedPacketSentInfo}
+                        onSelect={onSelect}
+                    />
                 ))}
+                <ElementAnchor callback={() => fetchNextPage()} />
             </List>
         </div>
     )