feat: revamp red packet plugin

packages/maskbook/src/locales/en-US.json

@@ -426,6 +426,7 @@
     "plugin_red_packet_erc20_tab_title": "Token",
     "plugin_red_packet_erc721_tab_title": "Collectibles",
     "plugin_red_packet_erc721_insufficient_balance": "Insufficient Balance",
+    "plugin_red_packet_details": "Red Packet Details",
     "plugin_red_packet_split_mode": "Split Mode",
     "plugin_red_packet_average": "Average",
     "plugin_red_packet_random": "Random",
@@ -441,15 +442,14 @@
     "plugin_red_packet_refunding": "Refunding",
     "plugin_red_packet_select_existing": "Past",
     "plugin_red_packet_share_message": "I just claimed a red packet from @{{sender}} on {{network}} network. Follow @realMaskNetwork (mask.io) to claim red packets.\n#mask_io #RedPacket\n{{payload}}",
-    "plugin_red_packet_share_message_not_twitter": "I just claimed a red packet from @{{sender}} on {{network}} network. \n{{payload}}",
     "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} is sending an NFT red packet on {{network}} network. Follow @realMaskNetwork (mask.io) to claim NFT red packets.\n#mask_io #RedPacket\n{{payload}}",
     "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT red packet on {{network}} network. \n{{payload}}",
     "plugin_red_packet_nft_share_claimed_message": "I just claimed an NFT red packet from @{{sender}} on {{network}} network. Follow @realMaskNetwork (mask.io) to claim NFT red packets.\n#mask_io #RedPacket\n{{payload}}",
     "plugin_red_packet_nft_share_claimed_message_not_twitter": "I just claimed an NFT red packet from @{{sender}} on {{network}} network. \n{{payload}}",
     "plugin_red_packet_nft_tip": "This is an NFT red packet.",
     "plugin_red_packet_attached_message": "Attached Message",
     "plugin_red_packet_from": "From: @{{name}}",
-    "plugin_red_packet_description_claimed": "You have already claimed {{amount}} {{symbol}}.",
+    "plugin_red_packet_description_claimed": "You got {{amount}} {{symbol}}",
     "plugin_red_packet_description_expired": "The red packet is expired.",
     "plugin_red_packet_description_refunded": "The red packet has been refunded.",
     "plugin_red_packet_description_refund": "You could refund {{balance}} {{symbol}}.",
@@ -479,6 +479,10 @@
     "plugin_red_packet_completed": "Completed",
     "plugin_red_packet_expired": "Expired",
     "plugin_nft_red_packet_data_broken": "The red packet can’t be sent due to data damage.",
+    "plugin_red_packet_create_title": "Create a Red Packet",
+    "plugin_red_packet_transaction_submitted": "Transaction submitted!",
+    "plugin_red_packet_transaction_rejected": "Transaction rejected!",
+    "plugin_red_packet_success": "Sent {{value}}{{symbol}}.",
     "plugin_gitcoin_readme": "By using this service, you will also be contributing 5% of your contribution to the <fund>Gitcoin grants development fund</fund>.",
     "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "Select a token",

packages/maskbook/src/locales/ja-JP.json

@@ -309,6 +309,7 @@
     "plugin_wallet_settings_collectible_data_source_primary": "コレクションデータのソース",
     "plugin_wallet_settings_collectible_data_source_secondary": "コレクションデータのソースを選択",
     "plugin_red_packet_display_name": "プラグイン: 投げ銭",
+    "plugin_red_packet_details": "",
     "plugin_red_packet_split_mode": "分割モード",
     "plugin_red_packet_average": "平均",
     "plugin_red_packet_random": "ランダム",
@@ -331,6 +332,20 @@
     "plugin_red_packet_amount_per_share": "1株当たりの金額",
     "plugin_red_packet_send_symbol": "{{symbol}} を送る",
     "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する",
+    "plugin_red_packet_amount_total": "",
+    "plugin_red_packet_next": "",
+    "plugin_red_packet_back": "",
+    "plugin_red_packet_hint": "",
+    "plugin_red_packet_token": "",
+    "plugin_red_packet_history_duration": "",
+    "plugin_red_packet_history_total_amount": "",
+    "plugin_red_packet_history_total_claimed_amount": "",
+    "plugin_red_packet_history_claimed": "",
+    "plugin_red_packet_history_split_mode": "",
+    "plugin_red_packet_history_send": "",
+    "plugin_red_packet_transaction_submitted": "",
+    "plugin_red_packet_transaction_rejected": "",
+    "plugin_red_packet_success": "",
     "plugin_gitcoin_readme": "このサービスを利用するにあたり、寄付金額の 5% が <fund>Gitcoin grants development fund</fund> に寄付されます",
     "plugin_gitcoin_select_a_token": "トークンを選択する",
     "plugin_gitcoin_enter_an_amount": "量を決める",

packages/maskbook/src/locales/ko-KR.json

@@ -407,6 +407,7 @@
     "plugin_wallet_fail_to_sign": "비밀번호 사인 실패합니다.",
     "plugin_wallet_cancel_sign": "서명이 실패되었습니다.",
     "plugin_red_packet_display_name": "플러그인: 빨간 백",
+    "plugin_red_packet_details": "",
     "plugin_red_packet_split_mode": "분할 모드",
     "plugin_red_packet_average": "평균",
     "plugin_red_packet_random": "렌덤",
@@ -423,7 +424,7 @@
     "plugin_red_packet_share_message": "{{network}} 네트워크에서 @{{sender}}의 레트 패킷을 받았어요. @realMaskNetwork (mask.io) 팔로우하고 레드 패킷을 받으세요.\n#mask_io #RedPacket\n{{payload}}",
     "plugin_red_packet_attached_message": "첨부 메시지",
     "plugin_red_packet_from": "보낸사람: {{name}}",
-    "plugin_red_packet_description_claimed": "이미 수령하였습니다.",
+    "plugin_red_packet_description_claimed": "",
     "plugin_red_packet_description_expired": "이 빨간 백 이미 만료되었습니다.",
     "plugin_red_packet_description_refunded": "이 빨간 백 이미 반환되었습니다.",
     "plugin_red_packet_description_refund": "{{balance}} {{symbol} 반환 가능합니다.",
@@ -446,6 +447,9 @@
     "plugin_red_packet_history_claimed": "수령됨: <strong>{{claimedShares}}/{{shares}}</strong> 공유",
     "plugin_red_packet_history_split_mode": "Split Mode: {{mode}}",
     "plugin_red_packet_history_send": "발송",
+    "plugin_red_packet_transaction_submitted": "",
+    "plugin_red_packet_transaction_rejected": "",
+    "plugin_red_packet_success": "",
     "plugin_gitcoin_readme": "이 서비스를 이용하면 <fund>Gitcoin 개발 기금에 당신의 기여금</fund>의 5%를 기부할 것이다.",
     "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "토큰 선택",

packages/maskbook/src/locales/zh-TW.json

@@ -315,6 +315,7 @@
     "plugin_wallet_settings_collectible_data_source_primary": "收藏品資料來源",
     "plugin_wallet_settings_collectible_data_source_secondary": "選擇收藏品資料來源。",
     "plugin_red_packet_display_name": "插件：紅包",
+    "plugin_red_packet_details": "",
     "plugin_red_packet_split_mode": "分割模式",
     "plugin_red_packet_average": "平均",
     "plugin_red_packet_random": "隨機",
@@ -326,7 +327,7 @@
     "plugin_red_packet_select_existing": "選擇已存在的",
     "plugin_red_packet_attached_message": "附加的訊息",
     "plugin_red_packet_from": "寄送人：{{name}}",
-    "plugin_red_packet_description_claimed": "你已經認領了 {{amount}} {{symbol}}。",
+    "plugin_red_packet_description_claimed": "",
     "plugin_red_packet_description_expired": "這個紅包已過期。",
     "plugin_red_packet_description_refunded": "這個紅包已經被退款了。",
     "plugin_red_packet_description_refund": "你可以退款 {{balance}} {{symbol}}。",
@@ -338,6 +339,20 @@
     "plugin_red_packet_amount_per_share": "每次分享總額",
     "plugin_red_packet_send_symbol": "送出 {{symbol}}",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包",
+    "plugin_red_packet_amount_total": "",
+    "plugin_red_packet_next": "",
+    "plugin_red_packet_back": "",
+    "plugin_red_packet_hint": "",
+    "plugin_red_packet_token": "",
+    "plugin_red_packet_history_duration": "",
+    "plugin_red_packet_history_total_amount": "",
+    "plugin_red_packet_history_total_claimed_amount": "",
+    "plugin_red_packet_history_claimed": "",
+    "plugin_red_packet_history_split_mode": "",
+    "plugin_red_packet_history_send": "",
+    "plugin_red_packet_transaction_submitted": "",
+    "plugin_red_packet_transaction_rejected": "",
+    "plugin_red_packet_success": "",
     "plugin_gitcoin_readme": "通過使用此服務，您還將向 <fund>Gitcoin grants development fund</fund> 捐款 5%",
     "plugin_gitcoin_select_a_token": "選擇一個代幣",
     "plugin_gitcoin_enter_an_amount": "輸入一個金額",

packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx

@@ -2,6 +2,7 @@ import { WalletMessages } from '@masknet/plugin-wallet'
 import { useRemoteControlledDialog } from '@masknet/shared'
 import { TransactionState, TransactionStateType, useAccount, useChainIdValid } from '@masknet/web3-shared'
 import { Box } from '@material-ui/core'
+import { useCallback } from 'react'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../../utils'
 import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
@@ -12,13 +13,15 @@ interface OperationFooterProps {
     canRefund: boolean
     claimState: TransactionState
     refundState: TransactionState
+    shareLink?: string
     onClaimOrRefund: () => void | Promise<void>
 }
 export function OperationFooter({
     canClaim,
     canRefund,
     claimState,
     refundState,
+    shareLink,
     onClaimOrRefund,
 }: OperationFooterProps) {
     const { classes } = useStyles()
@@ -32,40 +35,58 @@ export function OperationFooter({
     )
     //#endregion
 
-    if (!canClaim && !canRefund) return null
+    const handleShare = useCallback(() => {
+        if (!shareLink) return
+        window.open(shareLink, '_blank', 'noopener noreferrer')
+    }, [shareLink])
+
+    const ObtainButton = () => {
+        if (!canClaim && !canRefund) return null
+
+        if (!account) {
+            return (
+                <ActionButton variant="contained" fullWidth size="large" onClick={openSelectProviderDialog}>
+                    {t('plugin_wallet_connect_a_wallet')}
+                </ActionButton>
+            )
+        }
+        if (!chainIdValid) {
+            return (
+                <ActionButton disabled variant="contained" fullWidth size="large">
+                    {t('plugin_wallet_invalid_network')}
+                </ActionButton>
+            )
+        }
+        return (
+            <ActionButton
+                fullWidth
+                disabled={
+                    claimState.type === TransactionStateType.HASH || refundState.type === TransactionStateType.HASH
+                }
+                variant="contained"
+                size="large"
+                onClick={onClaimOrRefund}>
+                {canClaim
+                    ? claimState.type === TransactionStateType.HASH
+                        ? t('plugin_red_packet_claiming')
+                        : t('plugin_red_packet_claim')
+                    : refundState.type === TransactionStateType.HASH
+                    ? t('plugin_red_packet_refunding')
+                    : t('plugin_red_packet_refund')}
+            </ActionButton>
+        )
+    }
 
     return (
         <EthereumWalletConnectedBoundary
             classes={{
                 connectWallet: classes.connectWallet,
             }}>
             <Box className={classes.footer}>
-                {!account ? (
-                    <ActionButton variant="contained" size="large" onClick={openSelectProviderDialog}>
-                        {t('plugin_wallet_connect_a_wallet')}
-                    </ActionButton>
-                ) : !chainIdValid ? (
-                    <ActionButton disabled variant="contained" size="large">
-                        {t('plugin_wallet_invalid_network')}
-                    </ActionButton>
-                ) : (
-                    <ActionButton
-                        disabled={
-                            claimState.type === TransactionStateType.HASH ||
-                            refundState.type === TransactionStateType.HASH
-                        }
-                        variant="contained"
-                        size="large"
-                        onClick={onClaimOrRefund}>
-                        {canClaim
-                            ? claimState.type === TransactionStateType.HASH
-                                ? t('plugin_red_packet_claiming')
-                                : t('plugin_red_packet_claim')
-                            : refundState.type === TransactionStateType.HASH
-                            ? t('plugin_red_packet_refunding')
-                            : t('plugin_red_packet_refund')}
-                    </ActionButton>
-                )}
+                <ActionButton variant="contained" fullWidth onClick={handleShare}>
+                    {t('share')}
+                </ActionButton>
+                <ObtainButton />
             </Box>
         </EthereumWalletConnectedBoundary>
     )

packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx

@@ -3,8 +3,6 @@ import {
     ChainId,
     formatBalance,
     getChainIdFromName,
-    isDAI,
-    isOKB,
     resolveNetworkName,
     TransactionStateType,
     useAccount,
@@ -17,7 +15,6 @@ import classNames from 'classnames'
 import { useCallback, useEffect, useMemo } from 'react'
 import { usePostLink } from '../../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../../social-network'
-import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
 import { useI18N } from '../../../../utils'
 import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
 import { WalletMessages } from '../../../Wallet/messages'
@@ -59,18 +56,11 @@ export function RedPacket(props: RedPacketProps) {
     const postLink = usePostLink()
     const shareLink = activatedSocialNetworkUI.utils
         .getShareLinkURL?.(
-            canClaim
-                ? t(
-                      isTwitter(activatedSocialNetworkUI)
-                          ? 'plugin_red_packet_share_message'
-                          : 'plugin_red_packet_share_message_not_twitter',
-                      {
-                          sender: payload.sender.name,
-                          payload: postLink,
-                          network: resolveNetworkName(networkType),
-                      },
-                  ).trim()
-                : '',
+            t('plugin_red_packet_share_message', {
+                sender: payload.sender.name,
+                payload: postLink,
+                network: resolveNetworkName(networkType),
+            }).trim(),
         )
         .toString()
 
@@ -123,15 +113,8 @@ export function RedPacket(props: RedPacketProps) {
         else if (canRefund) await refundCallback()
     }, [canClaim, canRefund, claimCallback, refundCallback])
 
-    const subtitle = useMemo(() => {
-        if (!availability || !token) return
-
-        if (listOfStatus.includes(RedPacketStatus.expired) && canRefund)
-            return t('plugin_red_packet_description_refund', {
-                balance: formatBalance(availability.balance, token.decimals),
-                symbol: token.symbol,
-            })
-        if (listOfStatus.includes(RedPacketStatus.claimed))
+    const myStatus = useMemo(() => {
+        if (token && listOfStatus.includes(RedPacketStatus.claimed))
             return t(
                 'plugin_red_packet_description_claimed',
                 (availability as RedPacketAvailability).claimed_amount
@@ -141,6 +124,17 @@ export function RedPacket(props: RedPacketProps) {
                       }
                     : { amount: '', symbol: '' },
             )
+        return ''
+    }, [listOfStatus, t, token])
+
+    const subtitle = useMemo(() => {
+        if (!availability || !token) return
+
+        if (listOfStatus.includes(RedPacketStatus.expired) && canRefund)
+            return t('plugin_red_packet_description_refund', {
+                balance: formatBalance(availability.balance, token.decimals),
+                symbol: token.symbol,
+            })
         if (listOfStatus.includes(RedPacketStatus.refunded)) return t('plugin_red_packet_description_refunded')
         if (listOfStatus.includes(RedPacketStatus.expired)) return t('plugin_red_packet_description_expired')
         if (listOfStatus.includes(RedPacketStatus.empty)) return t('plugin_red_packet_description_empty')
@@ -187,9 +181,6 @@ export function RedPacket(props: RedPacketProps) {
         <EthereumChainBoundary chainId={getChainIdFromName(payload.network ?? '') ?? ChainId.Mainnet}>
             <Card className={classNames(classes.root)} component="article" elevation={0}>
                 <div className={classes.header}>
-                    <Typography className={classes.from} variant="body1" color="inherit">
-                        {t('plugin_red_packet_from', { name: payload.sender.name ?? '-' })}
-                    </Typography>
                     {/* it might be fontSize: 12 on twitter based on theme? */}
                     {canFetch && listOfStatus.length ? (
                         <Typography className={classes.label} variant="body2">
@@ -202,24 +193,20 @@ export function RedPacket(props: RedPacketProps) {
                         {payload.sender.message}
                     </Typography>
                     <Typography variant="body2">{subtitle}</Typography>
+                    <Typography className={classes.myStatus} variant="body1">
+                        {myStatus}
+                    </Typography>
+                    <Typography className={classes.from} variant="body1">
+                        {t('plugin_red_packet_from', { name: payload.sender.name ?? '-' })}
+                    </Typography>
                 </div>
-                <div
-                    className={classNames(classes.packet, {
-                        [classes.dai]: token?.name === 'DAI' || isDAI(token?.address ?? ''),
-                        [classes.okb]: token?.name === 'OKB' || isOKB(token?.address ?? ''),
-                    })}
-                />
-                <div
-                    className={classNames(classes.loader, {
-                        [classes.dimmer]: !canClaim && !canRefund,
-                    })}
-                />
             </Card>
             <OperationFooter
                 canClaim={canClaim}
                 canRefund={canRefund}
                 claimState={claimState}
                 refundState={refundState}
+                shareLink={shareLink}
                 onClaimOrRefund={onClaimOrRefund}
             />
         </EthereumChainBoundary>