feat: transaction snackbar ui

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

@@ -301,8 +301,6 @@
     "wallet_status_button_change": "Change",
     "wallet_status_button_disconnect": "Disconnect",
     "wallet_status_button_copy_address": "Copy Address",
-    "wallet_status_tip_error": "Failed to load the most recent transactions.",
-    "wallet_status_tip_empty": "Your transactions will appear here…",
     "wallet_transfer_to_address": "To Address",
     "wallet_transfer_memo": "Memo",
     "wallet_transfer_memo_placeholder": "Optional message",
@@ -364,8 +362,6 @@
     "plugin_wallet_view_on_explorer": "View on Explorer",
     "plugin_ito_placeholder_when_token_unselected": "Please Select a Token first",
     "plugin_wallet_wrong_network_tip": "Please connect to an appropriate network.",
-    "plugin_wallet_recent_transaction": "Recent Transactions",
-    "plugin_wallet_clear_all": "Clear All",
     "plugin_wallet_on_create": "Create Wallet",
     "plugin_wallet_on_connect": "Connect Wallet",
     "plugin_wallet_wrong_network": "Wrong Network",
@@ -454,9 +450,6 @@
     "plugin_red_packet_expired": "Expired",
     "plugin_nft_red_packet_data_broken": "The Lucky Drop can’t be sent due to data damage.",
     "plugin_red_packet_create_title": "Create a Lucky Drop",
-    "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/ko-KR.json

@@ -296,8 +296,6 @@
     "wallet_status_button_change": "바꾸기",
     "wallet_status_button_disconnect": "연결 끊기",
     "wallet_status_button_copy_address": "주소 복사",
-    "wallet_status_tip_error": "최근 거래 로드 실패",
-    "wallet_status_tip_empty": "거래 내역이 여기에 보일 것입니다.",
     "wallet_transfer_to_address": "주소",
     "wallet_transfer_memo": "메모",
     "wallet_transfer_memo_placeholder": "옵셔널 메시지",
@@ -359,8 +357,6 @@
     "plugin_wallet_view_on_explorer": "Explorer에서 보기",
     "plugin_ito_placeholder_when_token_unselected": "토큰을 선택하세요",
     "plugin_wallet_wrong_network_tip": "정확한 이더리움 네트워크를 연결하세요.",
-    "plugin_wallet_recent_transaction": "최근 거래",
-    "plugin_wallet_clear_all": "모두 지우기",
     "plugin_wallet_on_create": "월렛 만들기",
     "plugin_wallet_on_connect": "월렛 연결하기",
     "plugin_wallet_wrong_network": "잘못된 네트워크",
@@ -449,9 +445,6 @@
     "plugin_red_packet_expired": "만료됨",
     "plugin_nft_red_packet_data_broken": "테이터 훼손때문에 해당 레드 패킷을 보낼 수 없습니다.",
     "plugin_red_packet_create_title": "행운 드랍 만들기",
-    "plugin_red_packet_transaction_submitted": "거래 제출 완료",
-    "plugin_red_packet_transaction_rejected": "거래가 거부됨",
-    "plugin_red_packet_success": "{{value}} {{symbol}} 발송하기.",
     "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/qya-AA.json

@@ -297,8 +297,6 @@
     "wallet_status_button_change": "crwdns4519:0crwdne4519:0",
     "wallet_status_button_disconnect": "crwdns4521:0crwdne4521:0",
     "wallet_status_button_copy_address": "crwdns4523:0crwdne4523:0",
-    "wallet_status_tip_error": "crwdns4525:0crwdne4525:0",
-    "wallet_status_tip_empty": "crwdns4527:0crwdne4527:0",
     "wallet_transfer_to_address": "crwdns4529:0crwdne4529:0",
     "wallet_transfer_memo": "crwdns4531:0crwdne4531:0",
     "wallet_transfer_memo_placeholder": "crwdns4533:0crwdne4533:0",
@@ -360,8 +358,6 @@
     "plugin_wallet_view_on_explorer": "crwdns4617:0crwdne4617:0",
     "plugin_ito_placeholder_when_token_unselected": "crwdns4619:0crwdne4619:0",
     "plugin_wallet_wrong_network_tip": "crwdns4621:0crwdne4621:0",
-    "plugin_wallet_recent_transaction": "crwdns4623:0crwdne4623:0",
-    "plugin_wallet_clear_all": "crwdns4625:0crwdne4625:0",
     "plugin_wallet_on_create": "crwdns4627:0crwdne4627:0",
     "plugin_wallet_on_connect": "crwdns4629:0crwdne4629:0",
     "plugin_wallet_wrong_network": "crwdns4631:0crwdne4631:0",
@@ -450,9 +446,6 @@
     "plugin_red_packet_expired": "crwdns8167:0crwdne8167:0",
     "plugin_nft_red_packet_data_broken": "crwdns8169:0crwdne8169:0",
     "plugin_red_packet_create_title": "crwdns9073:0crwdne9073:0",
-    "plugin_red_packet_transaction_submitted": "crwdns9075:0crwdne9075:0",
-    "plugin_red_packet_transaction_rejected": "crwdns9077:0crwdne9077:0",
-    "plugin_red_packet_success": "crwdns9079:0{{value}}crwdnd9079:0{{symbol}}crwdne9079:0",
     "plugin_gitcoin_readme": "crwdns4789:0crwdne4789:0",
     "plugin_gitcoin_readme_fund_link": "crwdns4791:0crwdne4791:0",
     "plugin_gitcoin_select_a_token": "crwdns4793:0crwdne4793:0",

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

@@ -337,7 +337,6 @@
     "plugin_red_packet_history_split_mode": "分割模式: {{mode}}",
     "plugin_red_packet_history_send": "送出",
     "plugin_red_packet_create_title": "創建一個紅包",
-    "plugin_red_packet_success": "送出 {{value}} {{symbol}}.",
     "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/hooks/useCreateCallback.tsx

@@ -1,13 +1,10 @@
-import { ShowSnackbarOptions, SnackbarKey, SnackbarMessage, useCustomSnackbar } from '@masknet/theme'
-import { makeStyles } from '@masknet/theme'
 import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
 import type { PayableTx } from '@masknet/web3-contracts/types/types'
 import {
     EthereumTokenType,
     formatBalance,
     FungibleTokenDetailed,
     isLessThan,
-    resolveTransactionLinkOnExplorer,
     TransactionEventType,
     TransactionState,
     TransactionStateType,
@@ -16,24 +13,15 @@ import {
     useTokenConstants,
     useTransactionState,
 } from '@masknet/web3-shared-evm'
-import { Link } from '@mui/material'
-import LaunchIcon from '@mui/icons-material/Launch'
 import BigNumber from 'bignumber.js'
 import { omit } from 'lodash-es'
-import React, { FC, memo, useCallback, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { useAsync } from 'react-use'
 import type { TransactionReceipt } from 'web3-core'
 import Web3Utils from 'web3-utils'
 import { useI18N } from '../../../../utils/i18n-next-ui'
 import { useRedPacketContract } from './useRedPacketContract'
 
-const useStyles = makeStyles()({
-    link: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-})
-
 export interface RedPacketSettings {
     publicKey: string
     privateKey: string
@@ -136,21 +124,6 @@ export function useCreateParams(redPacketSettings: RedPacketSettings | undefined
     }, [redPacketSettings, account, redPacketContract]).value
 }
 
-const TransactionLink: FC<{ txHash?: string }> = memo(({ children, txHash }) => {
-    const { classes } = useStyles()
-    const chainId = useChainId()
-    if (!txHash) {
-        return null
-    }
-    const link = resolveTransactionLinkOnExplorer(chainId, txHash)
-    return (
-        <Link className={classes.link} color="inherit" href={link} target="_blank" rel="noopener noreferrer">
-            {children}
-            <LaunchIcon fontSize="inherit" />
-        </Link>
-    )
-})
-
 export function useCreateCallback(redPacketSettings: RedPacketSettings, version: number) {
     const account = useAccount()
     const chainId = useChainId()
@@ -160,19 +133,6 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
     const [createSettings, setCreateSettings] = useState<RedPacketSettings | null>(null)
     const paramResult = useCreateParams(redPacketSettings, version)
 
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
-    const snackbarKeyRef = useRef<SnackbarKey>()
-    const showSingletonSnackbar = useCallback(
-        (title: SnackbarMessage, options: ShowSnackbarOptions) => {
-            if (snackbarKeyRef.current !== undefined) closeSnackbar(snackbarKeyRef.current)
-            snackbarKeyRef.current = showSnackbar(title, options)
-            return () => {
-                closeSnackbar(snackbarKeyRef.current)
-            }
-        },
-        [showSnackbar, closeSnackbar],
-    )
-
     const transactionHashRef = useRef<string>()
 
     const createCallback = useCallback(async () => {
@@ -226,13 +186,6 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
                     hash,
                 })
                 transactionHashRef.current = hash
-                showSingletonSnackbar(snackbarTitle, {
-                    processing: true,
-                    persist: true,
-                    message: (
-                        <TransactionLink txHash={hash}>{t('plugin_red_packet_transaction_submitted')}</TransactionLink>
-                    ),
-                })
             })
             promiEvent.once(TransactionEventType.RECEIPT, (receipt: TransactionReceipt) => {
                 setCreateState({
@@ -241,14 +194,6 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
                     receipt,
                 })
                 transactionHashRef.current = receipt.transactionHash
-                showSingletonSnackbar(snackbarTitle, {
-                    variant: 'success',
-                    message: (
-                        <TransactionLink txHash={receipt.transactionHash}>
-                            {t('plugin_red_packet_transaction_submitted')}
-                        </TransactionLink>
-                    ),
-                })
             })
 
             promiEvent.on(TransactionEventType.CONFIRMATION, (no: number, receipt: TransactionReceipt) => {
@@ -259,17 +204,6 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
                 })
                 transactionHashRef.current = receipt.transactionHash
                 resolve()
-                showSingletonSnackbar(snackbarTitle, {
-                    variant: 'success',
-                    message: (
-                        <TransactionLink txHash={receipt.transactionHash}>
-                            {t('plugin_red_packet_success', {
-                                value: formattedValue,
-                                symbol: token.symbol,
-                            })}
-                        </TransactionLink>
-                    ),
-                })
             })
 
             promiEvent.on(TransactionEventType.ERROR, (error: Error) => {
@@ -278,17 +212,9 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
                     error,
                 })
                 reject(error)
-                showSingletonSnackbar(snackbarTitle, {
-                    variant: 'error',
-                    message: (
-                        <TransactionLink txHash={transactionHashRef.current}>
-                            {t('plugin_red_packet_transaction_rejected')}
-                        </TransactionLink>
-                    ),
-                })
             })
         })
-    }, [account, redPacketContract, redPacketSettings, chainId, paramResult, showSingletonSnackbar])
+    }, [account, redPacketContract, redPacketSettings, chainId, paramResult])
 
     const resetCallback = useCallback(() => {
         setCreateState({

packages/maskbook/src/plugins/Wallet/SNSAdaptor/TransactionSnackbar/index.tsx

@@ -1,9 +1,68 @@
-import { useRef, useCallback, useEffect } from 'react'
-import { TransactionStateType } from '@masknet/web3-shared-evm'
-import { ShowSnackbarOptions, SnackbarKey, SnackbarMessage, useCustomSnackbar } from '@masknet/theme'
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react'
+import {
+    createLookupTableResolver,
+    resolveTransactionLinkOnExplorer,
+    TransactionState,
+    TransactionStateType,
+    useChainId,
+} from '@masknet/web3-shared-evm'
+import { makeStyles, ShowSnackbarOptions, SnackbarKey, SnackbarMessage, useCustomSnackbar } from '@masknet/theme'
 import { WalletMessages } from '../../messages'
+import { getSendTransactionComputedPayload } from '../../../../extension/background-script/EthereumService'
+import { RecentTransactionDescription } from '../WalletStatusDialog/TransactionDescription'
+import { Link } from '@mui/material'
+import LaunchIcon from '@mui/icons-material/Launch'
+import type { TransactionReceipt } from 'web3-core'
+
+export const resolveSnackbarConfig = createLookupTableResolver<
+    TransactionStateType,
+    Pick<ShowSnackbarOptions, 'message' | 'processing' | 'variant'>
+>(
+    {
+        [TransactionStateType.WAIT_FOR_CONFIRMING]: {
+            processing: true,
+            variant: 'success',
+            message: 'Confirm this transaction in your wallet',
+        },
+        [TransactionStateType.HASH]: {
+            processing: true,
+            variant: 'success',
+            message: 'Transaction Submitted',
+        },
+        [TransactionStateType.CONFIRMED]: {
+            processing: false,
+            variant: 'success',
+            message: 'Transaction Successfully',
+        },
+        [TransactionStateType.RECEIPT]: {
+            processing: false,
+            variant: 'error',
+            message: 'Transaction rejected',
+        },
+        [TransactionStateType.FAILED]: {
+            processing: false,
+            variant: 'error',
+            message: 'Transaction rejected',
+        },
+        [TransactionStateType.UNKNOWN]: {
+            processing: false,
+            variant: 'error',
+            message: '',
+        },
+    },
+    {},
+)
+
+const useStyles = makeStyles()({
+    link: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+})
 
 export function TransactionSnackbar() {
+    const chainId = useChainId()
+    const { classes } = useStyles()
     const { showSnackbar, closeSnackbar } = useCustomSnackbar()
     const snackbarKeyRef = useRef<SnackbarKey>()
 
@@ -18,13 +77,43 @@ export function TransactionSnackbar() {
         [showSnackbar, closeSnackbar],
     )
 
+    const getTitle = useCallback((state: TransactionState, payload: any, hash?: string) => {
+        return (
+            <RecentTransactionDescription
+                hash={hash ?? ''}
+                computedPayload={payload}
+                receipt={(state as { receipt: TransactionReceipt }).receipt}
+            />
+        )
+    }, [])
+
+    const getFullMessage = useCallback(
+        (message: ReactNode, hash?: string) => {
+            if (!hash) return message
+            const link = resolveTransactionLinkOnExplorer(chainId, hash)
+            return (
+                <Link className={classes.link} color="inherit" href={link} target="_blank" rel="noopener noreferrer">
+                    {message} <LaunchIcon sx={{ ml: 1 }} fontSize="inherit" />
+                </Link>
+            )
+        },
+        [chainId],
+    )
+
     useEffect(() => {
-        return WalletMessages.events.transactionProgressUpdated.on((progress) => {
-            console.log('DEBUG: progress updated')
-            console.log(progress)
-            showSingletonSnackbar(TransactionStateType[progress.state.type], {
-                variant: 'success',
-            })
+        return WalletMessages.events.transactionProgressUpdated.on(async (progress) => {
+            if (progress.state.type === TransactionStateType.UNKNOWN) return
+
+            const payload = await getSendTransactionComputedPayload(progress.payload)
+            const config = resolveSnackbarConfig(progress.state.type)
+            const hash =
+                (progress.state as { hash?: string }).hash ??
+                (progress.state as { receipt?: TransactionReceipt }).receipt?.transactionHash
+
+            showSingletonSnackbar(getTitle(progress.state, payload, hash), {
+                ...config,
+                ...{ message: getFullMessage(config.message, hash) },
+            } as ShowSnackbarOptions)
         })
     }, [])
 

packages/maskbook/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription.tsx

@@ -12,7 +12,7 @@ import {
 import type Services from '../../../../extension/service'
 
 function getTokenAmountDescription(amount = '0', tokenDetailed?: FungibleTokenDetailed, negative?: boolean) {
-    return `${negative ? '-' : ''}${
+    return `${negative ? '- ' : ''}${
         pow10(9 + (tokenDetailed?.decimals ?? 18)).isGreaterThanOrEqualTo(amount)
             ? formatBalance(amount, tokenDetailed?.decimals ?? 0, 4)
             : 'infinite'