diff --git a/package.json b/package.json
index af2aa19c799d..4e41f2bac220 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "yarn": ">=999.0.0",
     "npm": ">=999.0.0"
   },
-  "version": "2.29.1",
+  "version": "2.29.2",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
new file mode 100644
index 000000000000..f4deaeb7b768
--- /dev/null
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
@@ -0,0 +1,232 @@
+import { Trans } from '@lingui/macro'
+import { NetworkIcon, TokenIcon } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/shared-base'
+import { makeStyles } from '@masknet/theme'
+import { formatBalance, type FungibleToken } from '@masknet/web3-shared-base'
+import { type ChainId, type SchemaType } from '@masknet/web3-shared-evm'
+import { Typography } from '@mui/material'
+import type { HTMLProps } from 'react'
+
+const useStyles = makeStyles()((theme) => ({
+    container: {
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        borderRadius: 16,
+        position: 'relative',
+    },
+    cover: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+    },
+    label: {
+        position: 'absolute',
+        width: 48,
+        height: 48,
+        top: 0,
+        left: 0,
+        zIndex: 9,
+    },
+    content: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        left: 0,
+        top: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%)',
+        paddingBottom: theme.spacing(2),
+        boxSizing: 'border-box',
+    },
+    message: {
+        height: 72,
+        borderRadius: theme.spacing(2, 2, 0, 0),
+        padding: theme.spacing(1.5, 1.5, 1.5, 6),
+        fontSize: 20,
+        fontWeight: 700,
+        lineHeight: '24px',
+        color: theme.palette.maskColor.white,
+        background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(102, 102, 102, 0.10) 100%)',
+        backdropFilter: 'blur(5px)',
+        display: 'flex',
+        alignItems: 'center',
+        overflow: 'hidden',
+    },
+    asset: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: theme.spacing(1),
+        marginTop: 'auto',
+    },
+    icon: {
+        width: theme.spacing(4.5),
+        height: theme.spacing(4.5),
+        position: 'relative',
+    },
+    networkIcon: {
+        position: 'absolute',
+        bottom: 0,
+        right: -3,
+    },
+    amount: {
+        color: theme.palette.maskColor.white,
+        textAlign: 'center',
+        fontFamily: 'Helvetica',
+        fontSize: '24px',
+        fontWeight: 700,
+        lineHeight: '28px',
+        display: 'flex',
+        gap: theme.spacing(1),
+    },
+    status: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing('2px', 1),
+        gap: theme.spacing(0.5),
+        color: theme.palette.maskColor.white,
+        fontWeight: 700,
+        fontSize: 12,
+        lineHeight: '16px',
+        borderRadius: 8,
+        background: 'rgba(0, 0, 0, 0.1)',
+        backdropFilter: 'blur(10px)',
+    },
+    statusText: {
+        fontWeight: 700,
+    },
+    bar: {
+        width: 78,
+        height: 7,
+        borderRadius: 999,
+        border: '1px solid  rgba(255, 255, 255, 0.28)',
+        position: 'relative',
+    },
+    progress: {
+        position: 'absolute',
+        backgroundColor: 'rgba(255, 255, 255, 0.78)',
+        borderRadius: '999px 0 0 999px',
+        left: -1,
+        top: -1,
+        bottom: -1,
+        '&[data-fulfilled]': {
+            right: -1,
+            borderRadius: '999px',
+        },
+    },
+    creator: {
+        marginTop: theme.spacing(2),
+        color: theme.palette.maskColor.white,
+        textAlign: 'center',
+        fontFamily: 'Helvetica',
+        fontSize: '14px',
+        fontWeight: 700,
+        lineHeight: '18px',
+    },
+}))
+
+interface Props extends HTMLProps<HTMLDivElement> {
+    cover: string
+    message: string
+    token: FungibleToken<ChainId, SchemaType>
+    shares: number
+    /** claimed entities */
+    claimedCount: number
+    totalClaimed: string
+    total: string
+    /** claimed amount by current user */
+    claimedAmount: string
+    isClaimed?: boolean
+    isEmpty?: boolean
+    isExpired?: boolean
+    isRefunded?: boolean
+    creator: string
+}
+export function RedPacketEnvelope({
+    cover,
+    message,
+    token,
+    shares,
+    claimedCount: claimed,
+    total,
+    totalClaimed,
+    claimedAmount,
+    isClaimed,
+    isExpired,
+    isRefunded,
+    isEmpty,
+    creator,
+    ...props
+}: Props) {
+    const { classes, cx } = useStyles()
+    return (
+        <div {...props} className={cx(classes.container, props.className)}>
+            <img src={cover} className={classes.cover} />
+            <div className={classes.content}>
+                <Typography className={classes.message}>{message}</Typography>
+                <div className={classes.asset}>
+                    <div className={classes.icon}>
+                        <TokenIcon
+                            size={36}
+                            pluginID={NetworkPluginID.PLUGIN_EVM}
+                            address={token.address}
+                            symbol={token.symbol}
+                            chainId={token.chainId}
+                        />
+                        <NetworkIcon
+                            size={16}
+                            className={classes.networkIcon}
+                            pluginID={NetworkPluginID.PLUGIN_EVM}
+                            chainId={token.chainId}
+                        />
+                    </div>
+                    <Typography className={classes.amount}>
+                        {isClaimed ?
+                            formatBalance(claimedAmount, token.decimals)
+                        :   `${formatBalance(totalClaimed, token.decimals)} / ${formatBalance(total, token.decimals)}`
+                        }{' '}
+                        {token.symbol}
+                    </Typography>
+                    <div className={classes.status}>
+                        {isClaimed ?
+                            <Typography className={classes.statusText}>
+                                <Trans>Congratulations!</Trans>
+                            </Typography>
+                        : isEmpty ?
+                            <>
+                                <div className={classes.bar}>
+                                    <div className={classes.progress} data-fulfilled />
+                                </div>
+                                <Typography className={classes.statusText}>
+                                    <Trans>Empty</Trans>
+                                </Typography>
+                            </>
+                        : isExpired ?
+                            <Typography className={classes.statusText}>
+                                <Trans>Expired</Trans>
+                            </Typography>
+                        : isRefunded ?
+                            <Typography className={classes.statusText}>
+                                <Trans>Refunded</Trans>
+                            </Typography>
+                        :   <>
+                                <div className={classes.bar}>
+                                    <div
+                                        className={classes.progress}
+                                        style={{ width: `${Math.min(1, claimed / shares) * 100}%` }}
+                                    />
+                                </div>
+                                <Typography className={classes.statusText}>
+                                    Claimed {claimed}/{shares}
+                                </Typography>
+                            </>
+                        }
+                    </div>
+                </div>
+                <Typography className={classes.creator}>From: @{creator.replace(/^@/, '')}</Typography>
+            </div>
+            <img src={new URL('../assets/token-label.png', import.meta.url).href} className={classes.label} />
+        </div>
+    )
+}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
index b54cfcc0cb82..e18710d7add3 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/index.tsx
@@ -1,18 +1,18 @@
 /* eslint-disable no-irregular-whitespace */
-import { Plural, Trans, msg } from '@lingui/macro'
+import { msg } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { useLastRecognizedIdentity, usePostInfoDetails, usePostLink } from '@masknet/plugin-infra/content-script'
 import { requestLogin, share } from '@masknet/plugin-infra/content-script/context'
 import { LoadingStatus, TransactionConfirmModal } from '@masknet/shared'
 import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, Sniffings } from '@masknet/shared-base'
-import { makeStyles, parseColor } from '@masknet/theme'
+import { makeStyles } from '@masknet/theme'
 import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4.js'
 import { useChainContext, useNetwork, useNetworkContext } from '@masknet/web3-hooks-base'
 import { EVMChainResolver, FireflyRedPacket } from '@masknet/web3-providers'
 import { RedPacketStatus, type FireflyRedPacketAPI, type RedPacketJSONPayload } from '@masknet/web3-providers/types'
-import { TokenType, formatBalance, isZero } from '@masknet/web3-shared-base'
+import { TokenType, formatBalance, isZero, minus } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
-import { Card, Grow, Stack, Typography } from '@mui/material'
+import { Card, Grow } from '@mui/material'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { Requirements } from '../Requirements/index.js'
 import { useAvailabilityComputed } from '../hooks/useAvailabilityComputed.js'
@@ -20,6 +20,7 @@ import { useClaimCallback } from '../hooks/useClaimCallback.js'
 import { useRedPacketContract } from '../hooks/useRedPacketContract.js'
 import { useRefundCallback } from '../hooks/useRefundCallback.js'
 import { OperationFooter } from './OperationFooter.js'
+import { RedPacketEnvelope } from './RedPacketEnvelope.js'
 import { RequestLoginFooter } from './RequestLoginFooter.js'
 import { useRedPacketCover } from './useRedPacketCover.js'
 
@@ -27,7 +28,6 @@ const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
     return {
         root: {
             borderRadius: theme.spacing(2),
-            padding: theme.spacing(1.5, 2),
             position: 'relative',
             display: 'flex',
             backgroundColor: 'transparent',
@@ -44,25 +44,12 @@ const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
                 padding: theme.spacing(1, 1.5),
                 width: 'calc(100% - 20px)',
             },
+            padding: 0,
+            aspectRatio: '480 / 336',
         },
-        fireflyRoot: {
-            aspectRatio: '10 / 7',
-        },
-        maskRoot: {
-            marginTop: 'auto',
-            height: 335,
-            backgroundImage: `url(${new URL('../assets/cover.png', import.meta.url)})`,
-            backgroundSize: 'cover',
-            backgroundRepeat: 'no-repeat',
-        },
-        cover: {
-            position: 'absolute',
-            width: '100%',
+        envelop: {
             height: '100%',
-            objectFit: 'contain',
-            inset: 0,
-            margin: 'auto',
-            zIndex: 0,
+            width: '100%',
         },
         requirements: {
             width: 407,
@@ -76,84 +63,6 @@ const useStyles = makeStyles<{ outdated: boolean }>()((theme, { outdated }) => {
                 width: 'auto',
             },
         },
-        header: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-        },
-
-        content: {
-            display: 'flex',
-            flex: 1,
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            justifyContent: 'space-between',
-        },
-        bottomContent: {
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-        },
-        myStatus: {
-            fontSize: 12,
-            fontWeight: 600,
-            lineHeight: 1.8,
-            [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
-                fontSize: 14,
-                left: 12,
-                bottom: 8,
-            },
-        },
-        from: {
-            fontSize: '14px',
-            color: theme.palette.common.white,
-            alignSelf: 'end',
-            fontWeight: 500,
-            [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
-                fontSize: 14,
-                right: 12,
-                bottom: 8,
-            },
-        },
-        label: {
-            width: 76,
-            height: 27,
-            display: 'flex',
-            justifyContent: 'center',
-            fontSize: 12,
-            alignItems: 'center',
-            borderRadius: theme.spacing(1),
-            backgroundColor: parseColor(theme.palette.common.black).setAlpha(0.5).toString(),
-            textTransform: 'capitalize',
-            position: 'absolute',
-            right: 12,
-            top: 12,
-        },
-        words: {
-            display: '-webkit-box',
-            WebkitLineClamp: 3,
-            WebkitBoxOrient: 'vertical',
-            color: theme.palette.common.white,
-            fontSize: 24,
-            fontWeight: 700,
-            wordBreak: 'break-all',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
-                fontSize: 14,
-            },
-        },
-        messageBox: {
-            width: '100%',
-        },
-        tokenLabel: {
-            width: 48,
-            height: 48,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-        },
     }
 })
 
@@ -183,7 +92,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
 
     // #endregion
 
-    const { canClaim, canRefund, listOfStatus } = availabilityComputed
+    const { canClaim, canRefund, listOfStatus, isClaimed, isEmpty, isExpired, isRefunded } = availabilityComputed
 
     // #region remote controlled transaction dialog
     const postLink = usePostLink()
@@ -202,7 +111,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
 
     const getShareText = useCallback(
         (hasClaimed: boolean) => {
-            const sender = handle ?? ''
+            const sender = (handle ?? '').replace(/^@/, '')
             const promote_short = _(msg`🧧🧧🧧 Try sending Lucky Drop to your friends with Mask.io.`)
             const farcaster_lens_claimed =
                 _(msg`🤑 Just claimed a #LuckyDrop  🧧💰✨ on https://firefly.mask.social from @${sender} !`) +
@@ -229,7 +138,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
             const isOnTwitter = Sniffings.is_twitter_page
             const isOnFacebook = Sniffings.is_facebook_page
             const shareTextOption = {
-                sender: payload.sender.name,
+                sender: payload.sender.name.replace(/^@/, ''),
                 payload: link!,
                 network: network?.name ?? 'Mainnet',
                 account: isOnTwitter ? 'realMaskNetwork' : 'masknetwork',
@@ -331,98 +240,41 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
         myHandle,
     ])
 
-    const myStatus = useMemo(() => {
-        if (!availability) return ''
-        if (token && listOfStatus.includes(RedPacketStatus.claimed))
-            return (
-                <Trans>
-                    You got{' '}
-                    {availability.claimed_amount ?
-                        formatBalance(availability.claimed_amount, token.decimals, { significant: 2 })
-                    :   '-'}{' '}
-                    {availability.claimed_amount ? token.symbol : '-'}
-                </Trans>
-            )
-        return ''
-    }, [listOfStatus, token, availability?.claimed_amount])
-
-    const subtitle = useMemo(() => {
-        if (!availability || !token) return
-
-        if (listOfStatus.includes(RedPacketStatus.expired) && canRefund)
-            return (
-                <Trans>
-                    You could refund {formatBalance(availability.balance, token.decimals, { significant: 2 })}{' '}
-                    {token.symbol ?? '-'}.
-                </Trans>
-            )
-        if (listOfStatus.includes(RedPacketStatus.refunded)) return <Trans>The Lucky Drop has been refunded.</Trans>
-        if (listOfStatus.includes(RedPacketStatus.expired)) return <Trans>The Lucky Drop is expired.</Trans>
-        if (listOfStatus.includes(RedPacketStatus.empty)) return <Trans>The Lucky Drop is empty.</Trans>
-        if (!payload.password) return <Trans>The Lucky Drop is broken.</Trans>
-        const total = formatBalance(payload.total, token.decimals, { significant: 2 })
-        const symbol = token.symbol ?? '-'
-        return (
-            <Trans>
-                {payload.shares} <Plural value={payload.shares} one="share" other="shares" /> / {total} ${symbol}
-            </Trans>
-        )
-    }, [availability, canRefund, token, payload, listOfStatus, _])
-
     const handleShare = useCallback(() => {
         if (shareText) share?.(shareText, source ? source : undefined)
     }, [shareText, source])
 
-    const isEmpty = listOfStatus.includes(RedPacketStatus.empty)
     const outdated = isEmpty || (!canRefund && listOfStatus.includes(RedPacketStatus.expired))
 
-    const { classes, cx } = useStyles({ outdated })
+    const { classes } = useStyles({ outdated })
 
     // RedPacket created from Mask has no cover settings
-    const cover = useRedPacketCover(payload, availability)
+    const { data: cover, isLoading: isLoadingCover } = useRedPacketCover(payload, availability)
 
     // the red packet can fetch without account
-    if (!availability || !token) return <LoadingStatus minHeight={148} />
+    if (!availability || !token || isLoadingCover) return <LoadingStatus minHeight={148} />
 
     const claimedOrEmpty = listOfStatus.includes(RedPacketStatus.claimed) || isEmpty
 
     return (
         <>
-            <Card
-                className={cx(classes.root, cover ? classes.fireflyRoot : classes.maskRoot)}
-                component="article"
-                elevation={0}
-                style={
-                    cover ?
-                        {
-                            backgroundSize: 'contain',
-                            backgroundImage: `url(${cover.backgroundImageUrl})`,
-                            backgroundColor: cover.backgroundColor,
-                        }
-                    :   undefined
-                }>
-                {cover ?
-                    <img className={classes.cover} src={cover.url!} />
-                :   null}
-                <img
-                    aria-label="Token"
-                    src={new URL('../assets/tokenLabel.png', import.meta.url).toString()}
-                    className={classes.tokenLabel}
+            <Card className={classes.root} component="article" elevation={0}>
+                <RedPacketEnvelope
+                    className={classes.envelop}
+                    cover={cover?.backgroundImageUrl || new URL('../assets/cover.png', import.meta.url).href}
+                    message={payload.sender.message}
+                    token={token}
+                    shares={payload.shares}
+                    isClaimed={isClaimed}
+                    isEmpty={isEmpty}
+                    isExpired={isExpired}
+                    isRefunded={isRefunded}
+                    claimedCount={+availability.claimed}
+                    total={payload.total}
+                    totalClaimed={minus(payload.total, payload.total_remaining || availability.balance).toFixed()}
+                    claimedAmount={availability.claimed_amount}
+                    creator={payload.sender.name}
                 />
-                <div className={classes.header}>
-                    {/* it might be fontSize: 12 on twitter based on theme? */}
-                    {listOfStatus.length ?
-                        <Typography
-                            className={classes.label}
-                            variant="body2"
-                            style={{ cursor: claimedOrEmpty ? 'pointer' : undefined }}
-                            onClick={() => {
-                                if (claimedOrEmpty) setShowRequirements((v) => !v)
-                            }}>
-                            {resolveRedPacketStatus(listOfStatus)}
-                        </Typography>
-                    :   null}
-                </div>
                 {cover ?
                     <Grow in={showRequirements ? !checkingClaimStatus : false} timeout={250}>
                         <Requirements
@@ -432,28 +284,7 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
                             onClose={() => setShowRequirements(false)}
                         />
                     </Grow>
-                :   <div className={classes.content}>
-                        <Stack />
-                        <div className={classes.messageBox}>
-                            <Typography className={classes.words} variant="h6">
-                                {payload.sender.message}
-                            </Typography>
-                        </div>
-                        <div className={classes.bottomContent}>
-                            <div>
-                                <Typography variant="body2" className={classes.myStatus}>
-                                    {subtitle}
-                                </Typography>
-                                <Typography className={classes.myStatus} variant="body1">
-                                    {myStatus}
-                                </Typography>
-                            </div>
-                            <Typography className={classes.from} variant="body1">
-                                <Trans>From: @{payload.sender.name || '-'}</Trans>
-                            </Typography>
-                        </div>
-                    </div>
-                }
+                :   null}
             </Card>
             {outdated ?
                 null
@@ -476,11 +307,3 @@ export const RedPacket = memo(function RedPacket({ payload }: RedPacketProps) {
         </>
     )
 })
-
-function resolveRedPacketStatus(listOfStatus: RedPacketStatus[]) {
-    if (listOfStatus.includes(RedPacketStatus.claimed)) return 'Claimed'
-    if (listOfStatus.includes(RedPacketStatus.refunded)) return 'Refunded'
-    if (listOfStatus.includes(RedPacketStatus.expired)) return 'Expired'
-    if (listOfStatus.includes(RedPacketStatus.empty)) return 'Empty'
-    return ''
-}
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/useRedPacketCover.ts b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/useRedPacketCover.ts
index a27df1d36229..8a18ef7f2d6d 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/useRedPacketCover.ts
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/RedPacket/useRedPacketCover.ts
@@ -8,17 +8,27 @@ import type { useAvailability } from '../hooks/useAvailability.js'
 type Availability = ReturnType<typeof useAvailability>['data']
 export function useRedPacketCover(payload: RedPacketJSONPayload, availability: Availability) {
     const token = payload.token
-    const { data } = useQuery({
-        enabled: !!availability && !!payload.rpid && !!token?.symbol,
-        queryKey: ['red-packet', 'theme-id', payload.rpid, availability?.balance, availability?.claimed],
+    const symbol = token?.symbol
+    const decimals = token?.decimals
+    return useQuery({
+        enabled: !!availability && !!payload.rpid && !!symbol,
+        queryKey: [
+            'red-packet',
+            'theme-id',
+            payload.rpid,
+            symbol,
+            decimals,
+            availability?.balance,
+            availability?.claimed,
+        ],
         queryFn: async () => {
-            if (!token || !availability) return null
+            if (!symbol || !decimals || !availability) return null
             const name = payload.sender.name
 
             return FireflyRedPacket.getCoverUrlByRpid(
                 payload.rpid,
-                token.symbol,
-                token.decimals,
+                symbol,
+                decimals,
                 payload.shares,
                 payload.total,
                 [isValidAddress, isValidDomain, (n: string) => n.startsWith('@')].some((f) => f(name)) ? name : (
@@ -30,5 +40,4 @@ export function useRedPacketCover(payload: RedPacketJSONPayload, availability: A
             )
         },
     })
-    return data
 }
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/assets/token-label.png b/packages/plugins/RedPacket/src/SiteAdaptor/assets/token-label.png
new file mode 100644
index 000000000000..e9ce306364b8
Binary files /dev/null and b/packages/plugins/RedPacket/src/SiteAdaptor/assets/token-label.png differ
diff --git a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useAvailabilityComputed.ts b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useAvailabilityComputed.ts
index 50cb5e5c00eb..8def95eb536d 100644
--- a/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useAvailabilityComputed.ts
+++ b/packages/plugins/RedPacket/src/SiteAdaptor/hooks/useAvailabilityComputed.ts
@@ -78,12 +78,17 @@ export function useAvailabilityComputed(account: string, payload: RedPacketJSONP
             canRefund: isExpired && !isEmpty && isCreator,
             canSend: !isEmpty && !isExpired && !isRefunded && isCreator,
             isPasswordValid,
+            isEmpty,
+            isClaimed,
+            isExpired,
+            isRefunded,
             listOfStatus: compact([
                 isClaimed ? RedPacketStatus.claimed : undefined,
                 isEmpty ? RedPacketStatus.empty : undefined,
                 isRefunded ? RedPacketStatus.refunded : undefined,
                 isExpired ? RedPacketStatus.expired : undefined,
             ]),
+            myClaimedAmount: parsed?.redpacket.claimedAmount,
         },
     }
 }
diff --git a/packages/plugins/RedPacket/src/locale/en-US.json b/packages/plugins/RedPacket/src/locale/en-US.json
index 596e96187631..87fe61eb1328 100644
--- a/packages/plugins/RedPacket/src/locale/en-US.json
+++ b/packages/plugins/RedPacket/src/locale/en-US.json
@@ -83,6 +83,7 @@
         "7VpPHA": "Confirm",
         "B1T4nn": "Confirm the Lucky Drop",
         "P+K/3O": "Confirming",
+        "ryWxhG": "Congratulations!",
         "V9CuQ+": ["Connect to ", ["source"]],
         "CtByM7": "Connect Wallet",
         "PLWaf6": "Create the Lucky Drop",
@@ -145,6 +146,7 @@
         "fZ5Vnu": "Received",
         "aLc9As": "Received time:",
         "J0LAHU": "Refund",
+        "/BI0y9": "Refunded",
         "GShMK6": "Refunding",
         "mkude1": "Repost",
         "QuBpLd": "Requirements",
diff --git a/packages/plugins/RedPacket/src/locale/en-US.po b/packages/plugins/RedPacket/src/locale/en-US.po
index 1e18fae59d78..a4ee728e322f 100644
--- a/packages/plugins/RedPacket/src/locale/en-US.po
+++ b/packages/plugins/RedPacket/src/locale/en-US.po
@@ -19,8 +19,8 @@ msgid "{0} (UTC+8)"
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
-msgstr ""
+#~ msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
 msgid "{claimed} Follow @{0} (mask.io) to claim lucky drops."
@@ -192,6 +192,10 @@ msgstr ""
 msgid "Confirming"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Congratulations!"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx
 msgid "Connect to {source}"
 msgstr ""
@@ -225,6 +229,7 @@ msgstr ""
 msgid "Drop Type"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 msgid "Empty"
 msgstr ""
@@ -258,6 +263,7 @@ msgstr ""
 msgid "Equal Amount"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
@@ -281,7 +287,6 @@ msgstr ""
 msgid "Follow me"
 msgstr ""
 
-#: src/SiteAdaptor/RedPacket/index.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "From: @{0}"
 msgstr ""
@@ -450,6 +455,10 @@ msgstr ""
 msgid "Refund"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Refunded"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/OperationFooter.tsx
 msgid "Refunding"
 msgstr ""
@@ -521,20 +530,20 @@ msgid "The Lucky Drop can't be sent due to data damage."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop has been refunded."
-msgstr ""
+#~ msgid "The Lucky Drop has been refunded."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is broken."
-msgstr ""
+#~ msgid "The Lucky Drop is broken."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is empty."
-msgstr ""
+#~ msgid "The Lucky Drop is empty."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is expired."
-msgstr ""
+#~ msgid "The Lucky Drop is expired."
+#~ msgstr ""
 
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
@@ -633,12 +642,12 @@ msgid "You claimed 1."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You could refund {0} {1}."
-msgstr ""
+#~ msgid "You could refund {0} {1}."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You got {0} {1}"
-msgstr ""
+#~ msgid "You got {0} {1}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "You got 1 {0}"
diff --git a/packages/plugins/RedPacket/src/locale/ja-JP.json b/packages/plugins/RedPacket/src/locale/ja-JP.json
index 09ed62beec12..567f42525665 100644
--- a/packages/plugins/RedPacket/src/locale/ja-JP.json
+++ b/packages/plugins/RedPacket/src/locale/ja-JP.json
@@ -83,6 +83,7 @@
         "7VpPHA": "確認",
         "B1T4nn": "ラッキードロップを確認する",
         "P+K/3O": "確認中",
+        "ryWxhG": "Congratulations!",
         "V9CuQ+": ["Connect to ", ["source"]],
         "CtByM7": "ウォレットに接続",
         "PLWaf6": "ラッキードロップを作成します。",
@@ -144,6 +145,7 @@
         "fZ5Vnu": "獲得済み",
         "aLc9As": "受け取り時刻",
         "J0LAHU": "返金",
+        "/BI0y9": "Refunded",
         "GShMK6": "返金処理中",
         "mkude1": "リポスト",
         "QuBpLd": "必要条件",
diff --git a/packages/plugins/RedPacket/src/locale/ja-JP.po b/packages/plugins/RedPacket/src/locale/ja-JP.po
index ce2acf4afbfb..ae59ecba58ba 100644
--- a/packages/plugins/RedPacket/src/locale/ja-JP.po
+++ b/packages/plugins/RedPacket/src/locale/ja-JP.po
@@ -24,8 +24,8 @@ msgid "{0} (UTC+8)"
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
-msgstr ""
+#~ msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
 msgid "{claimed} Follow @{0} (mask.io) to claim lucky drops."
@@ -197,6 +197,10 @@ msgstr "ラッキードロップを確認する"
 msgid "Confirming"
 msgstr "確認中"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Congratulations!"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx
 msgid "Connect to {source}"
 msgstr ""
@@ -230,6 +234,7 @@ msgstr "Lucky Drop送信者をカスタマイズします。レンズまたはFo
 msgid "Drop Type"
 msgstr "ドロップ種別"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 msgid "Empty"
 msgstr "空です"
@@ -263,6 +268,7 @@ msgstr "合計入力"
 msgid "Equal Amount"
 msgstr "等しい金額"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
@@ -286,7 +292,6 @@ msgstr ""
 msgid "Follow me"
 msgstr "今すぐフォロー"
 
-#: src/SiteAdaptor/RedPacket/index.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "From: @{0}"
 msgstr ""
@@ -455,6 +460,10 @@ msgstr "受け取り時刻"
 msgid "Refund"
 msgstr "返金"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Refunded"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/OperationFooter.tsx
 msgid "Refunding"
 msgstr "返金処理中"
@@ -526,20 +535,20 @@ msgid "The Lucky Drop can't be sent due to data damage."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop has been refunded."
-msgstr "ラッキードロップは返金されました。"
+#~ msgid "The Lucky Drop has been refunded."
+#~ msgstr "ラッキードロップは返金されました。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is broken."
-msgstr "ラッキードロップが壊れています。"
+#~ msgid "The Lucky Drop is broken."
+#~ msgstr "ラッキードロップが壊れています。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is empty."
-msgstr "ラッキードロップは空です。"
+#~ msgid "The Lucky Drop is empty."
+#~ msgstr "ラッキードロップは空です。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is expired."
-msgstr "ラッキードロップの有効期限が切れています。"
+#~ msgid "The Lucky Drop is expired."
+#~ msgstr "ラッキードロップの有効期限が切れています。"
 
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
@@ -638,12 +647,12 @@ msgid "You claimed 1."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You could refund {0} {1}."
-msgstr "{0} {1} を返金することができます。"
+#~ msgid "You could refund {0} {1}."
+#~ msgstr "{0} {1} を返金することができます。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You got {0} {1}"
-msgstr ""
+#~ msgid "You got {0} {1}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "You got 1 {0}"
diff --git a/packages/plugins/RedPacket/src/locale/ko-KR.json b/packages/plugins/RedPacket/src/locale/ko-KR.json
index 7abc7ba97e4f..3c719c01d282 100644
--- a/packages/plugins/RedPacket/src/locale/ko-KR.json
+++ b/packages/plugins/RedPacket/src/locale/ko-KR.json
@@ -83,6 +83,7 @@
         "7VpPHA": "확인",
         "B1T4nn": "행운 드랍 디테일",
         "P+K/3O": "확인 중",
+        "ryWxhG": "Congratulations!",
         "V9CuQ+": ["Connect to ", ["source"]],
         "CtByM7": "월렛 연결",
         "PLWaf6": "다음",
@@ -145,6 +146,7 @@
         "fZ5Vnu": "Received",
         "aLc9As": "Received time:",
         "J0LAHU": "리펀",
+        "/BI0y9": "Refunded",
         "GShMK6": "환급 중",
         "mkude1": "Repost",
         "QuBpLd": "Requirements",
diff --git a/packages/plugins/RedPacket/src/locale/ko-KR.po b/packages/plugins/RedPacket/src/locale/ko-KR.po
index 7dcece0b3aba..e779192db58b 100644
--- a/packages/plugins/RedPacket/src/locale/ko-KR.po
+++ b/packages/plugins/RedPacket/src/locale/ko-KR.po
@@ -24,8 +24,8 @@ msgid "{0} (UTC+8)"
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
-msgstr ""
+#~ msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
 msgid "{claimed} Follow @{0} (mask.io) to claim lucky drops."
@@ -197,6 +197,10 @@ msgstr "행운 드랍 디테일"
 msgid "Confirming"
 msgstr "확인 중"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Congratulations!"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx
 msgid "Connect to {source}"
 msgstr ""
@@ -230,6 +234,7 @@ msgstr ""
 msgid "Drop Type"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 msgid "Empty"
 msgstr "비어 있음"
@@ -263,6 +268,7 @@ msgstr "총금액 입력"
 msgid "Equal Amount"
 msgstr "동일한 금액"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
@@ -286,7 +292,6 @@ msgstr ""
 msgid "Follow me"
 msgstr ""
 
-#: src/SiteAdaptor/RedPacket/index.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "From: @{0}"
 msgstr ""
@@ -455,6 +460,10 @@ msgstr ""
 msgid "Refund"
 msgstr "리펀"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Refunded"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/OperationFooter.tsx
 msgid "Refunding"
 msgstr "환급 중"
@@ -526,20 +535,20 @@ msgid "The Lucky Drop can't be sent due to data damage."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop has been refunded."
-msgstr "행운 드랍은 이미 리펀됩니다."
+#~ msgid "The Lucky Drop has been refunded."
+#~ msgstr "행운 드랍은 이미 리펀됩니다."
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is broken."
-msgstr "훼손된 행운 드랍"
+#~ msgid "The Lucky Drop is broken."
+#~ msgstr "훼손된 행운 드랍"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is empty."
-msgstr "비어 있는 행운 드랍"
+#~ msgid "The Lucky Drop is empty."
+#~ msgstr "비어 있는 행운 드랍"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is expired."
-msgstr "만료된 행운 드랍"
+#~ msgid "The Lucky Drop is expired."
+#~ msgstr "만료된 행운 드랍"
 
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
@@ -638,12 +647,12 @@ msgid "You claimed 1."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You could refund {0} {1}."
-msgstr "{0} {1} 리펀 가능합니다."
+#~ msgid "You could refund {0} {1}."
+#~ msgstr "{0} {1} 리펀 가능합니다."
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You got {0} {1}"
-msgstr ""
+#~ msgid "You got {0} {1}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "You got 1 {0}"
diff --git a/packages/plugins/RedPacket/src/locale/zh-CN.json b/packages/plugins/RedPacket/src/locale/zh-CN.json
index 959b0c5174c6..7a1e1b56213c 100644
--- a/packages/plugins/RedPacket/src/locale/zh-CN.json
+++ b/packages/plugins/RedPacket/src/locale/zh-CN.json
@@ -83,6 +83,7 @@
         "7VpPHA": "确定",
         "B1T4nn": "红包详情",
         "P+K/3O": "确认中",
+        "ryWxhG": "Congratulations!",
         "V9CuQ+": ["Connect to ", ["source"]],
         "CtByM7": "连接钱包",
         "PLWaf6": "下一步",
@@ -145,6 +146,7 @@
         "fZ5Vnu": "Received",
         "aLc9As": "Received time:",
         "J0LAHU": "退款",
+        "/BI0y9": "Refunded",
         "GShMK6": "退款中",
         "mkude1": "Repost",
         "QuBpLd": "Requirements",
diff --git a/packages/plugins/RedPacket/src/locale/zh-CN.po b/packages/plugins/RedPacket/src/locale/zh-CN.po
index 3ff4950f0940..d348588c6517 100644
--- a/packages/plugins/RedPacket/src/locale/zh-CN.po
+++ b/packages/plugins/RedPacket/src/locale/zh-CN.po
@@ -24,8 +24,8 @@ msgid "{0} (UTC+8)"
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
-msgstr ""
+#~ msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
 msgid "{claimed} Follow @{0} (mask.io) to claim lucky drops."
@@ -197,6 +197,10 @@ msgstr "红包详情"
 msgid "Confirming"
 msgstr "确认中"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Congratulations!"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx
 msgid "Connect to {source}"
 msgstr ""
@@ -230,6 +234,7 @@ msgstr ""
 msgid "Drop Type"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 msgid "Empty"
 msgstr "空的"
@@ -263,6 +268,7 @@ msgstr "输入总数"
 msgid "Equal Amount"
 msgstr "均分金额"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
@@ -286,7 +292,6 @@ msgstr ""
 msgid "Follow me"
 msgstr ""
 
-#: src/SiteAdaptor/RedPacket/index.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "From: @{0}"
 msgstr ""
@@ -455,6 +460,10 @@ msgstr ""
 msgid "Refund"
 msgstr "退款"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Refunded"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/OperationFooter.tsx
 msgid "Refunding"
 msgstr "退款中"
@@ -526,20 +535,20 @@ msgid "The Lucky Drop can't be sent due to data damage."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop has been refunded."
-msgstr "此红包已退款。"
+#~ msgid "The Lucky Drop has been refunded."
+#~ msgstr "此红包已退款。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is broken."
-msgstr "此红包已被损坏。"
+#~ msgid "The Lucky Drop is broken."
+#~ msgstr "此红包已被损坏。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is empty."
-msgstr "此红包是空的。"
+#~ msgid "The Lucky Drop is empty."
+#~ msgstr "此红包是空的。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is expired."
-msgstr "此红包已过期。"
+#~ msgid "The Lucky Drop is expired."
+#~ msgstr "此红包已过期。"
 
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
@@ -638,12 +647,12 @@ msgid "You claimed 1."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You could refund {0} {1}."
-msgstr "您可以退款 {0} {1}。"
+#~ msgid "You could refund {0} {1}."
+#~ msgstr "您可以退款 {0} {1}。"
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You got {0} {1}"
-msgstr ""
+#~ msgid "You got {0} {1}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "You got 1 {0}"
diff --git a/packages/plugins/RedPacket/src/locale/zh-TW.json b/packages/plugins/RedPacket/src/locale/zh-TW.json
index a38f7a314ecf..debc1b0a314d 100644
--- a/packages/plugins/RedPacket/src/locale/zh-TW.json
+++ b/packages/plugins/RedPacket/src/locale/zh-TW.json
@@ -83,6 +83,7 @@
         "7VpPHA": "确定",
         "B1T4nn": "紅包詳情",
         "P+K/3O": "确认中",
+        "ryWxhG": "Congratulations!",
         "V9CuQ+": ["Connect to ", ["source"]],
         "CtByM7": "连接钱包",
         "PLWaf6": "下一步",
@@ -145,6 +146,7 @@
         "fZ5Vnu": "Received",
         "aLc9As": "Received time:",
         "J0LAHU": "退款",
+        "/BI0y9": "Refunded",
         "GShMK6": "退款中",
         "mkude1": "Repost",
         "QuBpLd": "Requirements",
diff --git a/packages/plugins/RedPacket/src/locale/zh-TW.po b/packages/plugins/RedPacket/src/locale/zh-TW.po
index 5deea595dc70..deb9037d2138 100644
--- a/packages/plugins/RedPacket/src/locale/zh-TW.po
+++ b/packages/plugins/RedPacket/src/locale/zh-TW.po
@@ -24,8 +24,8 @@ msgid "{0} (UTC+8)"
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
-msgstr ""
+#~ msgid "{0} {1, plural, one {share} other {shares}} / {total} ${symbol}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
 msgid "{claimed} Follow @{0} (mask.io) to claim lucky drops."
@@ -197,6 +197,10 @@ msgstr "紅包詳情"
 msgid "Confirming"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Congratulations!"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/RequestLoginFooter.tsx
 msgid "Connect to {source}"
 msgstr ""
@@ -230,6 +234,7 @@ msgstr ""
 msgid "Drop Type"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 msgid "Empty"
 msgstr "空的"
@@ -263,6 +268,7 @@ msgstr ""
 msgid "Equal Amount"
 msgstr ""
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketActionButton.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
@@ -286,7 +292,6 @@ msgstr ""
 msgid "Follow me"
 msgstr ""
 
-#: src/SiteAdaptor/RedPacket/index.tsx
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "From: @{0}"
 msgstr ""
@@ -455,6 +460,10 @@ msgstr ""
 msgid "Refund"
 msgstr "退款"
 
+#: src/SiteAdaptor/RedPacket/RedPacketEnvelope.tsx
+msgid "Refunded"
+msgstr ""
+
 #: src/SiteAdaptor/RedPacket/OperationFooter.tsx
 msgid "Refunding"
 msgstr "退款中"
@@ -526,20 +535,20 @@ msgid "The Lucky Drop can't be sent due to data damage."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop has been refunded."
-msgstr ""
+#~ msgid "The Lucky Drop has been refunded."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is broken."
-msgstr ""
+#~ msgid "The Lucky Drop is broken."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is empty."
-msgstr ""
+#~ msgid "The Lucky Drop is empty."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "The Lucky Drop is expired."
-msgstr ""
+#~ msgid "The Lucky Drop is expired."
+#~ msgstr ""
 
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
 #: src/SiteAdaptor/SelectNftTokenDialog.tsx
@@ -638,12 +647,12 @@ msgid "You claimed 1."
 msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You could refund {0} {1}."
-msgstr ""
+#~ msgid "You could refund {0} {1}."
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacket/index.tsx
-msgid "You got {0} {1}"
-msgstr ""
+#~ msgid "You got {0} {1}"
+#~ msgstr ""
 
 #: src/SiteAdaptor/RedPacketNft.tsx
 msgid "You got 1 {0}"
diff --git a/packages/web3-constants/evm/token-asset-base-url.json b/packages/web3-constants/evm/token-asset-base-url.json
index 5a8a48ebc7da..80b857c1b1ee 100644
--- a/packages/web3-constants/evm/token-asset-base-url.json
+++ b/packages/web3-constants/evm/token-asset-base-url.json
@@ -37,7 +37,7 @@
         "Gorli": ["https://imagedelivery.net/PCnTHRkdRhGodr0AWBAvMA/Assets/blockchains/gorli/assets"],
         "BSC": ["https://imagedelivery.net/PCnTHRkdRhGodr0AWBAvMA/Assets/blockchains/bnb/assets"],
         "BSCT": ["https://imagedelivery.net/PCnTHRkdRhGodr0AWBAvMA/Assets/blockchains/chapel/assets"],
-        "Base": [],
+        "Base": ["https://imagedelivery.net/PCnTHRkdRhGodr0AWBAvMA/Assets/blockchains/base/assets"],
         "Base_Goerli": [],
         "Polygon": ["https://imagedelivery.net/PCnTHRkdRhGodr0AWBAvMA/Assets/blockchains/polygon/assets"],
         "Mumbai": ["https://imagedelivery.net/PCnTHRkdRhGodr0AWBAvMA/Assets/blockchains/mumbai/assets"],
diff --git a/packages/web3-providers/src/Firefly/RedPacket.ts b/packages/web3-providers/src/Firefly/RedPacket.ts
index e99d25cc0ee1..d095af58c0a9 100644
--- a/packages/web3-providers/src/Firefly/RedPacket.ts
+++ b/packages/web3-providers/src/Firefly/RedPacket.ts
@@ -54,6 +54,12 @@ export class FireflyRedPacket {
         }))
     }
 
+    static async getTheme(options: FireflyRedPacketAPI.ThemeOptions) {
+        const url = urlcat(FIREFLY_ROOT_URL, 'v1/redpacket/themeById', options)
+        const { data } = await fetchJSON<FireflyRedPacketAPI.ThemeByIdResponse>(url)
+        return data
+    }
+
     static async getPayloadUrlByThemeId(
         themeId: string,
         from: string,
@@ -62,11 +68,7 @@ export class FireflyRedPacket {
         symbol?: string,
         decimals?: number,
     ) {
-        const url = urlcat(FIREFLY_ROOT_URL, 'v1/redpacket/themeById', {
-            themeId,
-        })
-        const { data } = await fetchJSON<FireflyRedPacketAPI.ThemeByIdResponse>(url)
-
+        const data = await FireflyRedPacket.getTheme({ themeId })
         return {
             themeId,
             url: urlcat(SITE_URL, '/api/rp', {
@@ -98,8 +100,6 @@ export class FireflyRedPacket {
             rpid,
         })
         const { data } = await fetchJSON<FireflyRedPacketAPI.ThemeByIdResponse>(url)
-        // Just discard default theme, and this RedPacket will be treated as created from Mask
-        if (data.is_default) return null
 
         return {
             themeId: data.tid,
diff --git a/packages/web3-providers/src/types/Firefly.ts b/packages/web3-providers/src/types/Firefly.ts
index aacede4c68e6..2c5f935c2c48 100644
--- a/packages/web3-providers/src/types/Firefly.ts
+++ b/packages/web3-providers/src/types/Firefly.ts
@@ -333,6 +333,14 @@ export namespace FireflyRedPacketAPI {
 
     export type ClaimHistoryResponse = FireflyResponse<RedPacketClaimListInfo>
 
+    export type ThemeOptions =
+        | {
+              rpid: string
+          }
+        | {
+              themeId: string
+          }
+
     export interface ParseOptions {
         text?: string
         image?: {