diff --git a/packages/maskbook/src/locales/en-US.json b/packages/maskbook/src/locales/en-US.json index 2a7f2c71fb66..4571646d98ec 100644 --- a/packages/maskbook/src/locales/en-US.json +++ b/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,7 +442,6 @@ "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}}", @@ -449,7 +449,7 @@ "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 Gitcoin grants development fund.", "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund", "plugin_gitcoin_select_a_token": "Select a token", diff --git a/packages/maskbook/src/locales/ja-JP.json b/packages/maskbook/src/locales/ja-JP.json index 8b313ada744d..dc07df1b8dbf 100644 --- a/packages/maskbook/src/locales/ja-JP.json +++ b/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% が Gitcoin grants development fund に寄付されます", "plugin_gitcoin_select_a_token": "トークンを選択する", "plugin_gitcoin_enter_an_amount": "量を決める", diff --git a/packages/maskbook/src/locales/ko-KR.json b/packages/maskbook/src/locales/ko-KR.json index bb234091fd81..67fcceba8df6 100644 --- a/packages/maskbook/src/locales/ko-KR.json +++ b/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": "수령됨: {{claimedShares}}/{{shares}} 공유", "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": "이 서비스를 이용하면 Gitcoin 개발 기금에 당신의 기여금의 5%를 기부할 것이다.", "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund", "plugin_gitcoin_select_a_token": "토큰 선택", diff --git a/packages/maskbook/src/locales/zh-TW.json b/packages/maskbook/src/locales/zh-TW.json index 060a42bc7514..cf2397c659b1 100644 --- a/packages/maskbook/src/locales/zh-TW.json +++ b/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": "通過使用此服務，您還將向 Gitcoin grants development fund 捐款 5%", "plugin_gitcoin_select_a_token": "選擇一個代幣", "plugin_gitcoin_enter_an_amount": "輸入一個金額", diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx index c9737d0b7e70..11e1fb22bfc2 100644 --- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx +++ b/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,6 +13,7 @@ interface OperationFooterProps { canRefund: boolean claimState: TransactionState refundState: TransactionState + shareLink?: string onClaimOrRefund: () => void | Promise } export function OperationFooter({ @@ -19,6 +21,7 @@ export function OperationFooter({ canRefund, claimState, refundState, + shareLink, onClaimOrRefund, }: OperationFooterProps) { const { classes } = useStyles() @@ -32,7 +35,47 @@ 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 ( + + {t('plugin_wallet_connect_a_wallet')} + + ) + } + if (!chainIdValid) { + return ( + + {t('plugin_wallet_invalid_network')} + + ) + } + return ( + + {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')} + + ) + } return ( - {!account ? ( - - {t('plugin_wallet_connect_a_wallet')} - - ) : !chainIdValid ? ( - - {t('plugin_wallet_invalid_network')} - - ) : ( - - {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')} - - )} + + {t('share')} + + ) diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/cover.png b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/cover.png new file mode 100644 index 000000000000..13190bb9afc3 Binary files /dev/null and b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/cover.png differ diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx index c6cdd2958935..38458a2d9c2f 100644 --- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx +++ b/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) {
- - {t('plugin_red_packet_from', { name: payload.sender.name ?? '-' })} - {/* it might be fontSize: 12 on twitter based on theme? */} {canFetch && listOfStatus.length ? ( @@ -202,24 +193,20 @@ export function RedPacket(props: RedPacketProps) { {payload.sender.message} {subtitle} + + {myStatus} + + + {t('plugin_red_packet_from', { name: payload.sender.name ?? '-' })} +
-
-
diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts index 9314ed809784..e1719eef3a44 100644 --- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts +++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacket/useStyles.ts @@ -1,107 +1,140 @@ -import { makeStyles } from '@masknet/theme' +import { makeStyles, keyframes } from '@masknet/theme' import { IconURLs } from '../IconURL' -export const useStyles = makeStyles()((theme) => ({ - root: { - borderRadius: theme.spacing(1), - padding: theme.spacing(2), - background: '#DB0632', - position: 'relative', - display: 'flex', - color: theme.palette.common.white, - flexDirection: 'column', - justifyContent: 'space-between', - height: 136, - boxSizing: 'border-box', - }, - header: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'flex-start', - }, - content: { - display: 'flex', - flex: 1, - flexDirection: 'column', - alignItems: 'flex-start', - justifyContent: 'center', - }, - footer: { - paddingTop: theme.spacing(2), - display: 'flex', - justifyContent: 'center', - }, - from: { - flex: '1', - textAlign: 'left', - }, - label: { - borderRadius: theme.spacing(1), - padding: theme.spacing(0.2, 1), - background: 'rgba(0, 0, 0, 0.2)', - textTransform: 'capitalize', - }, - words: { - color: '#FAF2BF', - whiteSpace: 'pre', - textOverflow: 'ellipsis', - overflow: 'hidden', - width: '85%', - }, - button: { - color: theme.palette.common.white, - }, - packet: { - top: 40, - right: -10, - width: 90, - height: 90, - position: 'absolute', - backgroundAttachment: 'local', - backgroundPosition: 'center', - backgroundSize: 'contain', - backgroundRepeat: 'no-repeat', - backgroundImage: `url(${IconURLs.presentDefault})`, - }, - dai: { - backgroundImage: `url(${IconURLs.presentDai})`, - }, - okb: { - backgroundImage: `url(${IconURLs.presentOkb})`, - }, - text: { - padding: theme.spacing(0.5, 2), - height: '100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - boxSizing: 'border-box', - }, - dimmer: { - backgroundColor: 'rgba(0, 0, 0, 0.6)', - }, - cursor: { - cursor: 'pointer', - }, - loader: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - }, - icon: { - fontSize: 45, - }, - metamaskContent: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-around', - }, - connectWallet: { - marginTop: 16, - }, -})) +export const useStyles = makeStyles()((theme) => { + const spinningAnimationKeyFrames = keyframes` +to { + transform: rotate(360deg) +}` + return { + root: { + borderRadius: theme.spacing(1), + padding: theme.spacing(3), + background: '#DB0632', + position: 'relative', + display: 'flex', + color: theme.palette.common.white, + flexDirection: 'column', + justifyContent: 'space-between', + height: 335, + boxSizing: 'border-box', + backgroundImage: `url(${new URL('./cover.png', import.meta.url)})`, + backgroundSize: 'cover', + }, + header: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-start', + }, + content: { + display: 'flex', + flex: 1, + flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'flex-start', + }, + footer: { + paddingTop: theme.spacing(2), + width: '100%', + display: 'flex', + gap: theme.spacing(2), + justifyContent: 'center', + '& button': { + flexBasis: 'auto', + }, + }, + myStatus: { + position: 'absolute', + fontSize: '14px', + left: '26px', + bottom: '20px', + color: '#FAD85A', + fontWeight: 'bold', + }, + from: { + position: 'absolute', + fontSize: '14px', + right: '26px', + bottom: '20px', + color: '#FFFFFF', + fontWeight: 'bold', + }, + label: { + borderRadius: theme.spacing(1), + padding: theme.spacing(0.2, 1), + background: 'rgba(0, 0, 0, 0.2)', + textTransform: 'capitalize', + position: 'absolute', + right: 18, + top: 27, + }, + words: { + color: '#FAD85A', + fontSize: 20, + whiteSpace: 'pre', + textOverflow: 'ellipsis', + overflow: 'hidden', + width: '85%', + }, + button: { + color: theme.palette.common.white, + }, + spinning: { + display: 'flex', + animation: `${spinningAnimationKeyFrames} 2s infinite linear`, + }, + packet: { + top: 40, + right: -10, + width: 90, + height: 90, + position: 'absolute', + backgroundAttachment: 'local', + backgroundPosition: 'center', + backgroundSize: 'contain', + backgroundRepeat: 'no-repeat', + backgroundImage: `url(${IconURLs.presentDefault})`, + }, + dai: { + backgroundImage: `url(${IconURLs.presentDai})`, + }, + okb: { + backgroundImage: `url(${IconURLs.presentOkb})`, + }, + text: { + padding: theme.spacing(0.5, 2), + height: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + boxSizing: 'border-box', + }, + dimmer: { + backgroundColor: 'rgba(0, 0, 0, 0.6)', + }, + cursor: { + cursor: 'pointer', + }, + loader: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + icon: { + fontSize: 45, + }, + metamaskContent: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-around', + }, + connectWallet: { + marginTop: 16, + }, + } +}) diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx index 6e4ce517dd2b..2e41dcf0e791 100644 --- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx +++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx @@ -28,7 +28,8 @@ const useStyles = makeStyles()((theme) => ({ fontSize: 14, fontWeight: 300, borderRadius: 8, - backgroundColor: theme.palette.divider, + backgroundColor: '#f7f9fa', + color: '#15181B', padding: theme.spacing(1, 0), marginBottom: theme.spacing(1), }, @@ -163,7 +164,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) { - + {t('plugin_red_packet_hint')} diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx index c0c5256be9aa..b2ff5f40e7ff 100644 --- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx +++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx @@ -260,8 +260,11 @@ export default function RedPacketDialog(props: RedPacketDialogProps) { }, } + const isCreating = step === CreateRedPacketPageStep.NewRedPacketPage + const title = isCreating ? t('plugin_red_packet_display_name') : t('plugin_red_packet_details') + return ( - + {step === CreateRedPacketPageStep.NewRedPacketPage ? ( diff --git a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx index 3bbfce210ed0..efc7ef333764 100644 --- a/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx +++ b/packages/maskbook/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx @@ -1,3 +1,4 @@ +import { useRemoteControlledDialog, useStylesExtends } from '@masknet/shared' import { EthereumTokenType, formatBalance, @@ -20,16 +21,21 @@ import { v4 as uuid } from 'uuid' import { useCurrentIdentity } from '../../../components/DataSource/useActivatedUI' import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton' import { useI18N } from '../../../utils' -import { useRemoteControlledDialog, useStylesExtends } from '@masknet/shared' import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary' import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary' import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel' import { SelectTokenDialogEvent, WalletMessages } from '../../Wallet/messages' import { RED_PACKET_DEFAULT_SHARES, RED_PACKET_MAX_SHARES, RED_PACKET_MIN_SHARES } from '../constants' -import type { RedPacketJSONPayload } from '../types' import type { RedPacketSettings } from './hooks/useCreateCallback' +// seconds of 1 day +const duration = 60 * 60 * 24 + const useStyles = makeStyles()((theme) => ({ + field: { + display: 'flex', + margin: theme.spacing(1), + }, line: { display: 'flex', margin: theme.spacing(1), @@ -56,10 +62,23 @@ const useStyles = makeStyles()((theme) => ({ inputShrinkLabel: { transform: 'translate(17px, -3px) scale(0.75) !important', }, + label: { + textAlign: 'left', + color: theme.palette.text.secondary, + }, + gasEstimation: { + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'center', + cursor: 'pointer', + '& > p': { + marginRight: 5, + color: theme.palette.mode === 'light' ? '#7B8192' : '#6F767C', + }, + }, })) export interface RedPacketFormProps extends withClasses { - onCreate?(payload: RedPacketJSONPayload): void SelectMenuProps?: Partial onChange(settings: RedPacketSettings): void onClose: () => void @@ -130,7 +149,10 @@ export function RedPacketERC20Form(props: RedPacketFormProps) { : formatBalance(new BigNumber(origin?.total ?? '0').div(origin?.shares ?? 1), origin?.token?.decimals ?? 0), ) const amount = new BigNumber(rawAmount ?? '0').multipliedBy(pow10(token?.decimals ?? 0)) - const totalAmount = isRandom ? new BigNumber(amount) : new BigNumber(amount).multipliedBy(shares ?? '0') + const totalAmount = useMemo( + () => (isRandom ? new BigNumber(amount) : new BigNumber(amount).multipliedBy(shares ?? '0')), + [amount, shares], + ) // balance const { value: tokenBalance = '0', loading: loadingTokenBalance } = useFungibleTokenBalance( @@ -150,33 +172,40 @@ export function RedPacketERC20Form(props: RedPacketFormProps) { return '' }, [account, amount, totalAmount, shares, token, tokenBalance]) - const onClick = useCallback(() => { - const { address: publicKey, privateKey } = web3.eth.accounts.create() - onChange({ - publicKey, - privateKey, - duration: 60 /* seconds */ * 60 /* mins */ * 24 /* hours */, + const creatingParams = useMemo( + () => ({ + duration, isRandom: Boolean(isRandom), name: senderName, message: message || t('plugin_red_packet_best_wishes'), shares: shares || 0, token: token ? (omit(token, ['logoURI']) as FungibleTokenDetailed) : undefined, total: totalAmount.toFixed(), + }), + [isRandom, senderName, message, t('plugin_red_packet_best_wishes'), shares, token, totalAmount], + ) + + const onClick = useCallback(() => { + const { address: publicKey, privateKey } = web3.eth.accounts.create() + onChange({ + publicKey, + privateKey, + ...creatingParams, }) onNext() - }, [onChange, totalAmount, token, shares, senderName, isRandom]) + }, [creatingParams, onChange, onNext]) if (!token) return null return ( <> -
+
{t('plugin_red_packet_split_mode')}