feat: revamp red packet plugin

packages/icons/general/Loading.tsx

@@ -0,0 +1,55 @@
+import { createIcon } from '../utils'
+export const LoadingIcon = createIcon(
+    'Loading',
+    <>
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M9.5 0.75C9.91421 0.75 10.25 1.08579 10.25 1.5V4.5C10.25 4.91421 9.91421 5.25 9.5 5.25C9.08579 5.25 8.75 4.91421 8.75 4.5V1.5C8.75 1.08579 9.08579 0.75 9.5 0.75Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M9.5 12.75C9.91421 12.75 10.25 13.0858 10.25 13.5V16.5C10.25 16.9142 9.91421 17.25 9.5 17.25C9.08579 17.25 8.75 16.9142 8.75 16.5V13.5C8.75 13.0858 9.08579 12.75 9.5 12.75Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.66718 3.16742C3.96007 2.87453 4.43495 2.87453 4.72784 3.16742L6.85034 5.28992C7.14323 5.58282 7.14323 6.05769 6.85034 6.35058C6.55745 6.64348 6.08257 6.64348 5.78968 6.35058L3.66718 4.22808C3.37429 3.93519 3.37429 3.46032 3.66718 3.16742Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.1497 11.6498C12.4426 11.357 12.9174 11.357 13.2103 11.6498L15.3328 13.7723C15.6257 14.0652 15.6257 14.5401 15.3328 14.833C15.0399 15.1259 14.5651 15.1259 14.2722 14.833L12.1497 12.7105C11.8568 12.4176 11.8568 11.9427 12.1497 11.6498Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M1.25 9C1.25 8.58579 1.58579 8.25 2 8.25H5C5.41421 8.25 5.75 8.58579 5.75 9C5.75 9.41421 5.41421 9.75 5 9.75H2C1.58579 9.75 1.25 9.41421 1.25 9Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M13.25 9C13.25 8.58579 13.5858 8.25 14 8.25H17C17.4142 8.25 17.75 8.58579 17.75 9C17.75 9.41421 17.4142 9.75 17 9.75H14C13.5858 9.75 13.25 9.41421 13.25 9Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M6.85034 11.6498C7.14323 11.9427 7.14323 12.4176 6.85034 12.7105L4.72784 14.833C4.43495 15.1259 3.96007 15.1259 3.66718 14.833C3.37429 14.5401 3.37429 14.0652 3.66718 13.7723L5.78968 11.6498C6.08257 11.357 6.55745 11.357 6.85034 11.6498Z"
+            fill="currentColor"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M15.3328 3.16742C15.6257 3.46032 15.6257 3.93519 15.3328 4.22808L13.2103 6.35058C12.9174 6.64348 12.4426 6.64348 12.1497 6.35058C11.8568 6.05769 11.8568 5.58282 12.1497 5.28992L14.2722 3.16742C14.5651 2.87453 15.0399 2.87453 15.3328 3.16742Z"
+            fill="currentColor"
+        />
+    </>,
+    '0 0 18 18',
+)

packages/icons/general/Risk.tsx

@@ -0,0 +1,16 @@
+import { createIcon } from '../utils'
+export const RiskIcon = createIcon(
+    'Risk',
+    <>
+        <path
+            opacity="0.4"
+            d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+            fill="white"
+        />
+        <path
+            d="M10.3626 17.3559L14.9955 12.723L12.5428 11.0878L13.6329 7L9 11.6329L11.4527 13.268L10.3626 17.3559Z"
+            fill="white"
+        />
+    </>,
+    '0 0 24 24',
+)

packages/icons/general/index.ts

@@ -26,3 +26,5 @@ export * from './LinkOut'
 export * from './SignUpAccount'
 export * from './SignInAccount'
 export * from './Restore'
+export * from './Risk'
+export * from './Loading'

packages/maskbook/src/UIRoot.tsx

@@ -2,7 +2,7 @@ import { I18nextProvider } from 'react-i18next'
 import { StylesProvider } from '@material-ui/styles'
 import { CssBaseline, StyledEngineProvider, ThemeProvider } from '@material-ui/core'
 import { Web3Provider } from '@masknet/web3-shared'
-import { SnackbarProvider } from '@masknet/theme'
+import { CustomSnackbarProvider } from '@masknet/theme'
 import { ErrorBoundary, ErrorBoundaryBuildInfoContext } from '@masknet/shared'
 import i18nNextInstance from './utils/i18n-next'
 import { useClassicMaskTheme } from './utils/theme'
@@ -15,9 +15,11 @@ export function MaskUIRootWithinShadow(JSX: JSX.Element) {
             <I18nextProvider i18n={i18nNextInstance}>
                 <ErrorBoundaryBuildInfoContext.Provider value={buildInfoMarkdown}>
                     <ErrorBoundary>
-                        <SnackbarProvider maxSnack={30} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
+                        <CustomSnackbarProvider
+                            disableWindowBlurListener={false}
+                            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
                             {JSX}
-                        </SnackbarProvider>
+                        </CustomSnackbarProvider>
                     </ErrorBoundary>
                 </ErrorBoundaryBuildInfoContext.Provider>
             </I18nextProvider>

packages/maskbook/src/_locales/en/messages.json

@@ -373,14 +373,14 @@
     "plugin_wallet_fail_to_sign": "Failed to sign password.",
     "plugin_wallet_cancel_sign": "Signature cancelled.",
     "plugin_red_packet_display_name": "Plugin: Red Packet",
+    "plugin_red_packet_details": "Red Packet Details",
     "plugin_red_packet_split_mode": "Split Mode",
     "plugin_red_packet_average": "Average",
     "plugin_red_packet_random": "Random",
     "plugin_red_packet_shares": "Shares",
     "plugin_red_packet_best_wishes": "Best Wishes!",
     "plugin_red_packet_create_new": "New",
-    "plugin_red_packet_claim": "Claim",
-    "plugin_red_packet_claiming": "Claiming...",
+    "plugin_red_packet_open": "Open Red Packet",
     "plugin_red_packet_refund": "Refund",
     "plugin_red_packet_empty": "Empty",
     "plugin_red_packet_refunding": "Refunding",
@@ -404,13 +404,18 @@
     "plugin_red_packet_back": "Back",
     "plugin_red_packet_hint": "You can withdraw the remaining balance 24 hours after the red packet is sent",
     "plugin_red_packet_token": "Token",
+    "plugin_red_packet_create": "Create a Red Packet",
     "plugin_red_packet_create_with_token": "Creating red packet with {{symbol}}",
     "plugin_red_packet_history_duration": "Time: {{startTime}} ~ {{endTime}} (UTC+8)",
     "plugin_red_packet_history_total_amount": "Total Amount: {{amount}} {{symbol}}",
     "plugin_red_packet_history_total_claimed_amount": "Total: <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
     "plugin_red_packet_history_claimed": "Claimed: <strong>{{claimedShares}}/{{shares}}</strong> Share",
     "plugin_red_packet_history_split_mode": "Split Mode: {{mode}}",
     "plugin_red_packet_history_send": "Send",
+    "plugin_red_packet_confirm_in_wallet": "Confirm this transaction in your wallet.",
+    "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/messages.json

@@ -373,14 +373,14 @@
     "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": "ランダム",
     "plugin_red_packet_shares": "株数",
     "plugin_red_packet_best_wishes": "幸運を祈ります！",
     "plugin_red_packet_create_new": "新しい投げ銭を作成",
-    "plugin_red_packet_claim": "受け取る",
-    "plugin_red_packet_claiming": "",
+    "plugin_red_packet_open": "",
     "plugin_red_packet_refund": "無効",
     "plugin_red_packet_empty": "",
     "plugin_red_packet_refunding": "",
@@ -404,13 +404,18 @@
     "plugin_red_packet_back": "",
     "plugin_red_packet_hint": "",
     "plugin_red_packet_token": "",
+    "plugin_red_packet_create": "",
     "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する",
     "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_confirm_in_wallet": "",
+    "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_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "トークンを選択する",

packages/maskbook/src/_locales/ko/messages.json

@@ -373,14 +373,14 @@
     "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": "렌덤",
     "plugin_red_packet_shares": "공유",
     "plugin_red_packet_best_wishes": "행운을 빌어요!",
     "plugin_red_packet_create_new": "새로운 것 만들기",
-    "plugin_red_packet_claim": "수령",
-    "plugin_red_packet_claiming": "",
+    "plugin_red_packet_open": "",
     "plugin_red_packet_refund": "반환",
     "plugin_red_packet_empty": "",
     "plugin_red_packet_refunding": "",
@@ -404,13 +404,18 @@
     "plugin_red_packet_back": "",
     "plugin_red_packet_hint": "",
     "plugin_red_packet_token": "",
+    "plugin_red_packet_create": "",
     "plugin_red_packet_create_with_token": "{{symbol}} 으로 빨간 백 만드는 중",
     "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_confirm_in_wallet": "",
+    "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/messages.json

@@ -373,14 +373,14 @@
     "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": "隨機",
     "plugin_red_packet_shares": "分享數",
     "plugin_red_packet_best_wishes": "祝好運！",
     "plugin_red_packet_create_new": "建立新的",
-    "plugin_red_packet_claim": "認領",
-    "plugin_red_packet_claiming": "",
+    "plugin_red_packet_open": "",
     "plugin_red_packet_refund": "退款",
     "plugin_red_packet_empty": "",
     "plugin_red_packet_refunding": "",
@@ -404,13 +404,18 @@
     "plugin_red_packet_back": "",
     "plugin_red_packet_hint": "",
     "plugin_red_packet_token": "",
+    "plugin_red_packet_create": "",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包",
     "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_confirm_in_wallet": "",
+    "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_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "選擇一個代幣",