diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketDetailsItem.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketDetailsItem.tsx
index 66771bbff7f9..ca312324d383 100644
--- 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
index 146c0389b111..a4d54945a9b8 100644
--- 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
index 2b70aa92bd6a..231cafe2d2fa 100644
--- 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/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketActionButton.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketActionButton.tsx
similarity index 96%
rename from packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketActionButton.tsx
rename to packages/plugins/RedPacket/src/SiteAdaptor/RedPacketActionButton.tsx
index 45506c3ab1d3..808791017799 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/FireflyRedPacketActionButton.tsx
+++ b/packages/plugins/RedPacket/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
index f8f3830bd608..d276f5f9be23 100644
--- 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
index 6d8f7fd8943a..818e62a347cc 100644
--- 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,9 +42,17 @@ 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>
 
@@ -52,8 +60,13 @@ export const RedPacketHistoryList = memo(function RedPacketHistoryList({ onSelec
         <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>
     )
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInHistoryList.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInHistoryList.tsx
index 240af1c71cd5..50f75606bf0d 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInHistoryList.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacketInHistoryList.tsx
@@ -1,23 +1,14 @@
 import { TokenIcon } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
-import { ActionButton, ShadowRootTooltip, makeStyles } from '@masknet/theme'
-import { useChainContext, useFungibleToken, useNetworkDescriptor } from '@masknet/web3-hooks-base'
-import {
-    RedPacketStatus,
-    type RedPacketJSONPayload,
-    type RedPacketJSONPayloadFromChain,
-} from '@masknet/web3-providers/types'
-import { formatBalance, minus, type FungibleToken } from '@masknet/web3-shared-base'
-import { type ChainId, type SchemaType } from '@masknet/web3-shared-evm'
-import { Box, ListItem, Typography, useMediaQuery, type Theme } from '@mui/material'
-import { intervalToDuration, nextDay } from 'date-fns'
-import { memo, useCallback, useMemo } from 'react'
-import { useEverSeen } from '../../../../shared-base-ui/src/hooks/useEverSeen.js'
+import { makeStyles } from '@masknet/theme'
+import { useChainContext, useNetworkDescriptor } from '@masknet/web3-hooks-base'
+import { type RedPacketJSONPayload, FireflyRedPacketAPI } from '@masknet/web3-providers/types'
+import { formatBalance } from '@masknet/web3-shared-base'
+import { Box, ListItem, Typography } from '@mui/material'
+import { format, fromUnixTime } from 'date-fns'
+import { memo } from 'react'
 import { RedPacketTrans, useRedPacketTrans } from '../locales/index.js'
-import { useAvailabilityComputed } from './hooks/useAvailabilityComputed.js'
-import { useCreateRedPacketReceipt } from './hooks/useCreateRedPacketReceipt.js'
-import { useRefundCallback } from './hooks/useRefundCallback.js'
-import { dateTimeFormat } from './utils/formatDate.js'
+import { RedPacketActionButton } from './RedPacketActionButton.js'
 
 const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIcon?: string }>()((
     theme,
@@ -113,27 +104,6 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
                 fontSize: 13,
             },
         },
-        actionButton: {
-            fontSize: 12,
-            width: 88,
-            height: 32,
-            background: theme.palette.maskColor.dark,
-            color: theme.palette.maskColor.white,
-            borderRadius: '999px',
-            minHeight: 'auto',
-            [smallQuery]: {
-                marginTop: theme.spacing(1),
-            },
-            '&:disabled': {
-                background: theme.palette.maskColor.dark,
-                color: theme.palette.common.white,
-            },
-            '&:hover': {
-                background: theme.palette.maskColor.dark,
-                color: theme.palette.maskColor.white,
-                opacity: 0.8,
-            },
-        },
         footer: {
             width: '100%',
             display: 'flex',
@@ -149,16 +119,6 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
                 marginRight: 2,
             },
         },
-        popperText: {
-            cursor: 'default',
-            color: theme.palette.common.white,
-            fontSize: 12,
-        },
-        disabledButton: {
-            background: theme.palette.maskColor.dark,
-            color: theme.palette.common.white,
-            opacity: 0.6,
-        },
         fullWidthBox: {
             width: '100%',
             display: 'flex',
@@ -176,88 +136,48 @@ const useStyles = makeStyles<{ listItemBackground?: string; listItemBackgroundIc
 })
 
 interface RedPacketInHistoryListProps {
-    history: RedPacketJSONPayload | RedPacketJSONPayloadFromChain
+    history: FireflyRedPacketAPI.RedPacketSentInfo
     onSelect: (payload: RedPacketJSONPayload) => void
 }
 export const RedPacketInHistoryList = memo(function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
-    const { history, onSelect } = props
+    const { history } = props
+    const {
+        rp_msg,
+        create_time,
+        claim_numbers,
+        total_numbers,
+        total_amounts,
+        token_decimal,
+        claim_amounts,
+        token_symbol,
+        token_logo,
+        chain_id,
+        redpacket_id,
+        redpacket_status,
+        claim_strategy,
+        share_from,
+        theme_id,
+    } = history
     const t = useRedPacketTrans()
 
-    const [seen, ref] = useEverSeen()
     const { account, chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
-    const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'))
-    const { data: receipt } = useCreateRedPacketReceipt(seen && !history.rpid ? history.txid : '')
     const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, chainId)
 
-    const rpid = history.rpid || receipt?.rpid || ''
-    const creation_time = history.creation_time || receipt?.creation_time || 0
-
     const { classes, cx } = useStyles({
         listItemBackground: networkDescriptor?.backgroundGradient,
         listItemBackgroundIcon: networkDescriptor ? `url("${networkDescriptor.icon}")` : undefined,
     })
 
-    const patchedHistory: RedPacketJSONPayload | RedPacketJSONPayloadFromChain = useMemo(
-        () => ({ ...props.history, rpid, creation_time }),
-        [props.history, rpid, creation_time],
-    )
-
-    const {
-        value: availability,
-        computed: { canRefund, canSend, listOfStatus, isPasswordValid },
-        password,
-        retry: revalidateAvailability,
-    } = useAvailabilityComputed(account, patchedHistory)
-
-    const claimerNumber = availability ? Number(availability.claimed) : 0
-    const total_remaining = availability?.balance
-
-    const [{ loading: isRefunding }, refunded, refundCallback] = useRefundCallback(
-        patchedHistory.contract_version,
-        account,
-        rpid,
-    )
-    const tokenAddress =
-        (patchedHistory as RedPacketJSONPayload).token?.address ??
-        (patchedHistory as RedPacketJSONPayloadFromChain).token_address
-
-    const { data: tokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, tokenAddress ?? '', undefined, {
-        chainId,
-    })
-
-    const historyToken = useMemo(() => {
-        return {
-            ...(tokenDetailed ?? (patchedHistory as RedPacketJSONPayload).token),
-            address: tokenAddress,
-        } as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
-    }, [tokenDetailed, patchedHistory, tokenAddress])
-
-    const onSendOrRefund = useCallback(async () => {
-        if (canRefund) {
-            await refundCallback()
-            revalidateAvailability()
-        }
-        if (canSend) onSelect({ ...patchedHistory, password, token: historyToken })
-    }, [onSelect, refundCallback, canRefund, canSend, patchedHistory, historyToken, password])
-
-    // #region refund time
-    const refundDuration =
-        canSend && !isPasswordValid ? intervalToDuration({ start: Date.now(), end: nextDay(creation_time, 1) }) : null
-    const formatRefundDuration = `${refundDuration?.hours}h ${refundDuration?.minutes}m`
-    // #endregion
-
     return (
         <ListItem className={classes.root}>
-            <section className={classes.contentItem} ref={ref}>
+            <section className={classes.contentItem}>
                 <Box className={classes.box}>
                     <Box className={classes.content}>
                         <section className={classes.section}>
                             <div className={classes.div}>
                                 <div className={classes.fullWidthBox}>
                                     <Typography variant="body1" className={cx(classes.title, classes.message)}>
-                                        {patchedHistory.sender.message === '' ?
-                                            t.best_wishes()
-                                        :   patchedHistory.sender.message}
+                                        {!rp_msg ? t.best_wishes() : rp_msg}
                                     </Typography>
                                 </div>
                                 <div className={classes.fullWidthBox}>
@@ -266,44 +186,35 @@ export const RedPacketInHistoryList = memo(function RedPacketInHistoryList(props
                                     </Typography>
                                     <Typography
                                         variant="body1"
-                                        className={cx(classes.info, classes.message, rpid ? '' : classes.invisible)}>
-                                        {t.history_duration({ time: dateTimeFormat(new Date(creation_time)) })}
+                                        className={cx(
+                                            classes.info,
+                                            classes.message,
+                                            redpacket_id ? '' : classes.invisible,
+                                        )}>
+                                        {t.history_duration({
+                                            time: format(fromUnixTime(create_time), 'M/d/yyyy HH:mm'),
+                                        })}
                                     </Typography>
                                 </div>
                             </div>
-                            {canRefund || canSend || listOfStatus.includes(RedPacketStatus.empty) || refunded ?
-                                <ShadowRootTooltip
-                                    placement="top"
-                                    title={
-                                        canSend && !isPasswordValid ?
-                                            <Typography className={classes.popperText}>
-                                                {t.data_broken({ duration: formatRefundDuration })}
-                                            </Typography>
-                                        :   undefined
-                                    }>
-                                    <span style={{ display: 'inline-block' }}>
-                                        <ActionButton
-                                            loading={isRefunding}
-                                            fullWidth={isSmall}
-                                            onClick={canSend && !isPasswordValid ? undefined : onSendOrRefund}
-                                            disabled={
-                                                listOfStatus.includes(RedPacketStatus.empty) || refunded || isRefunding
-                                            }
-                                            className={cx(
-                                                classes.actionButton,
-                                                canSend && !isPasswordValid ? classes.disabledButton : '',
-                                            )}
-                                            size="large">
-                                            {canSend ?
-                                                t.share()
-                                            : isRefunding ?
-                                                t.refunding()
-                                            : listOfStatus.includes(RedPacketStatus.empty) || refunded ?
-                                                t.empty()
-                                            :   t.refund()}
-                                        </ActionButton>
-                                    </span>
-                                </ShadowRootTooltip>
+                            {redpacket_status && redpacket_status !== FireflyRedPacketAPI.RedPacketStatus.View ?
+                                <RedPacketActionButton
+                                    redpacketStatus={redpacket_status}
+                                    rpid={redpacket_id}
+                                    account={account}
+                                    claim_strategy={claim_strategy}
+                                    shareFrom={share_from}
+                                    themeId={theme_id}
+                                    redpacketMsg={rp_msg}
+                                    tokenInfo={{
+                                        symbol: token_symbol,
+                                        decimals: token_decimal,
+                                        amount: total_amounts,
+                                    }}
+                                    chainId={chain_id}
+                                    totalAmount={total_amounts}
+                                    createdAt={create_time}
+                                />
                             :   null}
                         </section>
 
@@ -314,30 +225,26 @@ export const RedPacketInHistoryList = memo(function RedPacketInHistoryList(props
                                         span: <span />,
                                     }}
                                     values={{
-                                        claimedShares: String(claimerNumber),
-                                        shares: String(patchedHistory.shares),
-                                        amount: formatBalance(patchedHistory.total, historyToken.decimals ?? 18, {
-                                            significant: 6,
+                                        claimedShares: String(claim_numbers),
+                                        shares: String(total_numbers),
+                                        amount: formatBalance(total_amounts, token_decimal ?? 18, {
+                                            significant: 2,
+                                            isPrecise: true,
+                                        }),
+                                        claimedAmount: formatBalance(claim_amounts, token_decimal, {
+                                            significant: 2,
                                             isPrecise: true,
                                         }),
-                                        claimedAmount:
-                                            rpid ?
-                                                formatBalance(
-                                                    minus(patchedHistory.total, total_remaining ?? 0),
-                                                    historyToken.decimals,
-                                                    { significant: 6, isPrecise: true },
-                                                )
-                                            :   '',
-                                        symbol: historyToken.symbol,
+                                        symbol: token_symbol,
                                     }}
                                 />
                             </Typography>
-                            {historyToken.logoURL ?
+                            {token_logo ?
                                 <TokenIcon
                                     className={classes.icon}
-                                    address={historyToken.address}
-                                    name={historyToken.name}
-                                    logoURL={historyToken.logoURL}
+                                    address={''}
+                                    name={token_symbol}
+                                    logoURL={token_logo}
                                 />
                             :   null}
                         </section>
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRedPacketHistory.ts b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRedPacketHistory.ts
index 9cf5fc2bbbcf..484dab442eee 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRedPacketHistory.ts
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useRedPacketHistory.ts
@@ -1,47 +1,30 @@
-import { EMPTY_LIST } from '@masknet/shared-base'
-import { useWallet } from '@masknet/web3-hooks-base'
-import { EVMWeb3, RedPacket, TheGraphRedPacket } from '@masknet/web3-providers'
-import type { RedPacketJSONPayloadFromChain } from '@masknet/web3-providers/types'
-import { getRedPacketConstants, type ChainId } from '@masknet/web3-shared-evm'
-import { useQuery, type UseQueryResult } from '@tanstack/react-query'
-import { uniqBy } from 'lodash-es'
-
-const CREATE_RED_PACKET_METHOD_ID = '0x5db05aba'
+import { FireflyRedPacketAPI } from '@masknet/web3-providers/types'
+import { useSuspenseInfiniteQuery, type UseSuspenseInfiniteQueryResult, type InfiniteData } from '@tanstack/react-query'
+import { createIndicator } from '@masknet/shared-base'
+import { FireflyRedPacket } from '@masknet/web3-providers'
+import type { Pageable, PageIndicator } from '@masknet/shared-base'
 
 export function useRedPacketHistory(
     address: string,
-    chainId: ChainId,
-): UseQueryResult<RedPacketJSONPayloadFromChain[]> {
-    const wallet = useWallet()
-    const { HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT, HAPPY_RED_PACKET_ADDRESS_V4 } = getRedPacketConstants(chainId)
-    return useQuery({
-        queryKey: ['red-packet-history', chainId, address, wallet?.owner],
-        queryFn: async () => {
-            if (!HAPPY_RED_PACKET_ADDRESS_V4) return EMPTY_LIST as RedPacketJSONPayloadFromChain[]
-
-            if (wallet?.owner) {
-                const historyTransactions = await TheGraphRedPacket.getHistories(
-                    chainId,
-                    address,
-                    HAPPY_RED_PACKET_ADDRESS_V4,
-                )
-
-                if (!historyTransactions) return EMPTY_LIST as RedPacketJSONPayloadFromChain[]
-                return historyTransactions
-            }
-
-            const blockNumber = await EVMWeb3.getBlockNumber({ chainId })
-            const payloadList = await RedPacket.getHistories(
-                chainId,
-                address,
-                HAPPY_RED_PACKET_ADDRESS_V4,
-                CREATE_RED_PACKET_METHOD_ID,
-                HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT ?? 0,
-                blockNumber,
+    historyType: FireflyRedPacketAPI.ActionType,
+    platform?: FireflyRedPacketAPI.SourceType,
+): UseSuspenseInfiniteQueryResult<
+    InfiniteData<
+        Pageable<FireflyRedPacketAPI.RedPacketClaimedInfo | FireflyRedPacketAPI.RedPacketSentInfo, PageIndicator>
+    >
+> {
+    return useSuspenseInfiniteQuery({
+        queryKey: ['RedPacketHistory', address, historyType],
+        initialPageParam: createIndicator(undefined, ''),
+        queryFn: async ({ pageParam }) => {
+            const res = await FireflyRedPacket.getHistory(
+                historyType,
+                address as `0x${string}`,
+                platform ? platform : FireflyRedPacketAPI.SourceType.All,
+                pageParam,
             )
-            if (!payloadList) return EMPTY_LIST as RedPacketJSONPayloadFromChain[]
-
-            return uniqBy(payloadList, (x) => x.txid)
+            return res
         },
+        getNextPageParam: (lastPage) => lastPage.nextIndicator,
     })
 }
diff --git a/packages/web3-providers/src/Firefly/RedPacket.ts b/packages/web3-providers/src/Firefly/RedPacket.ts
index 89c2802a53f6..6779191b2976 100644
--- a/packages/web3-providers/src/Firefly/RedPacket.ts
+++ b/packages/web3-providers/src/Firefly/RedPacket.ts
@@ -15,9 +15,6 @@ const siteType = getSiteType()
 const SITE_URL = siteType === EnhanceableSite.Firefly ? location.origin : 'https://firefly.mask.social'
 const FIREFLY_ROOT_URL = process.env.NEXT_PUBLIC_FIREFLY_API_URL || 'https://api.firefly.land'
 
-type WithoutChainId<T> = Omit<T, 'chain_id'>
-type WithNumberChainId<T> = WithoutChainId<T> & { chain_id: number }
-
 function fetchFireflyJSON<T>(url: string, init?: RequestInit): Promise<T> {
     return fetchJSON<T>(url, {
         ...init,
@@ -151,8 +148,8 @@ export class FireflyRedPacket {
 
     static async getHistory<
         T extends FireflyRedPacketAPI.ActionType,
-        R = T extends FireflyRedPacketAPI.ActionType.Claim ? WithNumberChainId<FireflyRedPacketAPI.RedPacketClaimedInfo>
-        :   WithNumberChainId<FireflyRedPacketAPI.RedPacketSentInfo>,
+        R = T extends FireflyRedPacketAPI.ActionType.Claim ? FireflyRedPacketAPI.RedPacketClaimedInfo
+        :   FireflyRedPacketAPI.RedPacketSentInfo,
     >(
         actionType: T,
         from: HexString,
@@ -179,7 +176,7 @@ export class FireflyRedPacket {
     static async getClaimHistory(
         redpacket_id: string,
         indicator?: PageIndicator,
-    ): Promise<WithNumberChainId<FireflyRedPacketAPI.RedPacketClaimListInfo>> {
+    ): Promise<FireflyRedPacketAPI.RedPacketClaimListInfo> {
         const url = urlcat(FIREFLY_ROOT_URL, '/v1/redpacket/claimHistory', {
             redpacketId: redpacket_id,
             cursor: indicator?.id,
diff --git a/packages/web3-providers/src/types/Firefly.ts b/packages/web3-providers/src/types/Firefly.ts
index f2f73e37ec0e..1bc70c71cf06 100644
--- a/packages/web3-providers/src/types/Firefly.ts
+++ b/packages/web3-providers/src/types/Firefly.ts
@@ -1,3 +1,6 @@
+type WithoutChainId<T> = Omit<T, 'chain_id'>
+type WithNumberChainId<T> = WithoutChainId<T> & { chain_id: number }
+
 export namespace FireflyConfigAPI {
     export type Result<T> = {
         code: number
@@ -183,7 +186,7 @@ export namespace FireflyRedPacketAPI {
         platformId: string
     }
 
-    export interface RedPacketSentInfo {
+    export interface RedPacketSentInfoItem {
         create_time: number
         total_numbers: string
         total_amounts: string
@@ -203,7 +206,7 @@ export namespace FireflyRedPacketAPI {
         share_from: string
     }
 
-    export interface RedPacketClaimedInfo {
+    export interface RedPacketClaimedInfoItem {
         redpacket_id: HexString
         received_time: string
         rp_msg: string
@@ -219,6 +222,10 @@ export namespace FireflyRedPacketAPI {
         ens_name: string
     }
 
+    export interface RedPacketClaimedInfo extends WithNumberChainId<RedPacketClaimedInfoItem> {}
+    export interface RedPacketSentInfo extends WithNumberChainId<RedPacketSentInfoItem> {}
+    export interface RedPacketClaimListInfo extends WithNumberChainId<RedPacketClaimListInfoItem> {}
+
     export interface ClaimList {
         creator: string
         claim_platform: Platform[]
@@ -233,7 +240,7 @@ export namespace FireflyRedPacketAPI {
         platform_handle: string
     }
 
-    export interface RedPacketClaimListInfo {
+    export interface RedPacketClaimListInfoItem {
         list: ClaimList[]
         creator: string
         create_time: number