chore: wallet connecting tip

packages/mask/shared-ui/locales/en-US.json

@@ -259,8 +259,11 @@
     "plugin_wallet_snackbar_swap_token": "Swap Token",
     "plugin_wallet_guiding_step_1": "1. Choose Network",
     "plugin_wallet_guiding_step_2": "2. Choose Wallet",
-    "plugin_wallet_connect_to": "Connect to",
-    "plugin_wallet_connected_to": "Connected to",
+    "plugin_wallet_connect_with": "Connect with",
+    "plugin_wallet_connect_with_retry": "Try Again",
+    "plugin_wallet_connected_with": "Connected with",
+    "plugin_wallet_metamask_error_already_request": "You've opened the popup, please confirm.",
+    "plugin_wallet_connect_tip": "Please make sure that your {{providerName}} wallet is provided by the offical <providerLink>{{providerShortenLink}}</providerLink>.",
     "plugin_wallet_collections": "Collections",
     "plugin_wallet_select_a_token": "Select a Token",
     "plugin_wallet_select_a_nft_contract": "Select an NFT Contract",

packages/mask/shared-ui/locales/qya-AA.json

@@ -259,8 +259,8 @@
     "plugin_wallet_snackbar_swap_token": "crwdns10641:0crwdne10641:0",
     "plugin_wallet_guiding_step_1": "crwdns10197:0crwdne10197:0",
     "plugin_wallet_guiding_step_2": "crwdns10199:0crwdne10199:0",
-    "plugin_wallet_connect_to": "crwdns10201:0crwdne10201:0",
-    "plugin_wallet_connected_to": "crwdns10203:0crwdne10203:0",
+    "plugin_wallet_connect_with": "crwdns10201:0crwdne10201:0",
+    "plugin_wallet_connected_with": "crwdns10203:0crwdne10203:0",
     "plugin_wallet_collections": "crwdns8141:0crwdne8141:0",
     "plugin_wallet_select_a_token": "crwdns4589:0crwdne4589:0",
     "plugin_wallet_select_a_nft_contract": "crwdns7923:0crwdne7923:0",

packages/mask/shared-ui/locales/zh-CN.json

@@ -252,8 +252,8 @@
     "plugin_wallet_snackbar_swap_token": "兑换代币",
     "plugin_wallet_guiding_step_1": "1. 选择网络",
     "plugin_wallet_guiding_step_2": "2. 选择钱包",
-    "plugin_wallet_connect_to": "连接到",
-    "plugin_wallet_connected_to": "已连接到",
+    "plugin_wallet_connect_with": "连接到",
+    "plugin_wallet_connected_with": "已连接到",
     "plugin_wallet_collections": "收藏品",
     "plugin_wallet_select_a_token": "选择代币",
     "plugin_wallet_select_a_nft_contract": "选择 NFT 合约",

packages/mask/shared-ui/locales/zh-TW.json

@@ -196,8 +196,8 @@
     "plugin_powered_by": "提供者為 ",
     "plugin_wallet_guiding_step_1": "1. 選擇網路",
     "plugin_wallet_guiding_step_2": "2. 選擇錢包",
-    "plugin_wallet_connect_to": "連接",
-    "plugin_wallet_connected_to": "連接到",
+    "plugin_wallet_connect_with": "連接",
+    "plugin_wallet_connected_with": "連接到",
     "plugin_wallet_collections": "收藏",
     "plugin_wallet_select_a_token": "選擇一個代幣",
     "plugin_wallet_select_a_nft_contract": "選擇一份NFT合約",

packages/mask/src/components/shared/WalletStatusBox.tsx

@@ -73,7 +73,6 @@ const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }
         border: `1px solid ${theme.palette.background.default}`,
     },
     twitterProviderBorder: {
-        border: `1px solid ${theme.palette.background.default}`,
         width: 14,
         height: 14,
     },

packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx

@@ -1,3 +1,4 @@
+import { NetworkPluginID } from '@masknet/plugin-infra'
 import { useCallback, useEffect, useState, useLayoutEffect, useRef } from 'react'
 import { flatten, uniq } from 'lodash-unified'
 import formatDateTime from 'date-fns/format'
@@ -27,6 +28,7 @@ import { useClaimCallback } from './hooks/useClaimCallback'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { base as ITO_Definition } from '../base'
 
 interface StyleProps {
     shortITOwrapper: boolean
@@ -213,14 +215,7 @@ interface ClaimAllDialogProps {
     open: boolean
 }
 
-const SUPPORTED_CHAIN_ID_LIST = [
-    ChainId.Mainnet,
-    ChainId.BSC,
-    ChainId.Matic,
-    ChainId.Arbitrum,
-    ChainId.xDai,
-    ChainId.Fantom,
-]
+const SUPPORTED_CHAIN_ID_LIST = ITO_Definition.enableRequirement.web3?.[NetworkPluginID.PLUGIN_EVM]?.supportedChainIds!
 
 export function ClaimAllDialog(props: ClaimAllDialogProps) {
     const { t } = useI18N()

packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx

@@ -83,7 +83,7 @@ export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly
                 ),
                 children: <RedPacketERC721Form onClose={onClose} />,
                 sx: { p: 0 },
-                disabled: ![ChainId.Mainnet, ChainId.Matic].includes(chainId),
+                disabled: ![ChainId.Mainnet, ChainId.Matic, ChainId.BSC].includes(chainId),
             },
         ],
         state,

packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/ConnectionProgress.tsx

@@ -1,18 +1,43 @@
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import { Box, Card, CircularProgress, Typography, Paper } from '@mui/material'
-import { useStylesExtends, makeStyles } from '@masknet/theme'
+import { Box, Card, CircularProgress, Typography, Paper, Link } from '@mui/material'
+import { useStylesExtends, makeStyles, MaskColorVar } from '@masknet/theme'
 import { ImageIcon } from '@masknet/shared'
 import { NetworkPluginID, useProviderDescriptor } from '@masknet/plugin-infra'
-import { ProviderType, resolveProviderName } from '@masknet/web3-shared-evm'
+import {
+    ProviderType,
+    resolveProviderName,
+    resolveProviderShortenLink,
+    resolveProviderHomeLink,
+} from '@masknet/web3-shared-evm'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../../utils'
+import { FlashIcon } from '../../../../resources/FlashIcon'
+import { Trans } from 'react-i18next'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
         padding: theme.spacing(2, 4, 3),
         borderRadius: 8,
         backgroundColor: theme.palette.background.default,
     },
+    tipContent: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'center',
+        marginTop: 10,
+        backgroundColor: MaskColorVar.errorBackground,
+        padding: theme.spacing(2, 0, 2, 1.5),
+        borderRadius: 8,
+    },
+    tipContentText: {
+        color: MaskColorVar.redMain,
+        fontSize: 12,
+        marginLeft: 10,
+    },
+    tipLink: {
+        color: MaskColorVar.redMain,
+        textDecoration: 'underline',
+    },
     error: {
         fontSize: 12,
         paddingTop: theme.spacing(0.5),
@@ -42,11 +67,11 @@ export function ConnectionProgress(props: ConnectionProgressProps) {
                     <Box display="flex" flex={1} flexDirection="column" sx={{ marginLeft: 2 }}>
                         {connected ? (
                             <Typography>
-                                {t('plugin_wallet_connected_to')} {resolveProviderName(providerType)}
+                                {t('plugin_wallet_connected_with')} {resolveProviderName(providerType)}
                             </Typography>
                         ) : (
                             <Typography>
-                                {t('plugin_wallet_connect_to')} {resolveProviderName(providerType)}
+                                {t('plugin_wallet_connect_with')} {resolveProviderName(providerType)}
                             </Typography>
                         )}
                         {loading ? (
@@ -57,17 +82,46 @@ export function ConnectionProgress(props: ConnectionProgressProps) {
                         ) : null}
                         {!loading && error ? (
                             <Typography className={classes.error} color="red" variant="body2">
-                                {error.message || `Failed to connect to ${resolveProviderName(providerType)}.`}
+                                {error.message?.includes('Already processing eth_requestAccounts') ||
+                                error.message?.includes(
+                                    "Request of type 'wallet_requestPermissions' already pending for origin",
+                                )
+                                    ? t('plugin_wallet_metamask_error_already_request')
+                                    : 'Error connecting.'}
                             </Typography>
                         ) : null}
                     </Box>
                     {!connected && error ? (
                         <ActionButton color="primary" variant="contained" onClick={retry} disabled={loading}>
-                            {t('retry')}
+                            {t('plugin_wallet_connect_with_retry')}
                         </ActionButton>
                     ) : null}
                 </Box>
             </Card>
+            <Card className={classes.tipContent} elevation={0}>
+                <FlashIcon />
+                <Typography className={classes.tipContentText} variant="body2">
+                    <Trans
+                        i18nKey="plugin_wallet_connect_tip"
+                        components={{
+                            providerLink: resolveProviderHomeLink(providerType) ? (
+                                <Link
+                                    className={classes.tipLink}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href={resolveProviderHomeLink(providerType)}
+                                />
+                            ) : (
+                                <span />
+                            ),
+                        }}
+                        values={{
+                            providerName: resolveProviderName(providerType),
+                            providerShortenLink: resolveProviderShortenLink(providerType),
+                        }}
+                    />
+                </Typography>
+            </Card>
         </Paper>
     )
 }

packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx

@@ -21,7 +21,7 @@ import Services from '../../../../extension/service'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
-        padding: theme.spacing(5),
+        padding: theme.spacing(2.5),
     },
 }))
 

packages/mask/src/resources/FlashIcon.tsx

@@ -0,0 +1,34 @@
+import { MaskColorVar, makeStyles, MaskCSSVariableColor } from '@masknet/theme'
+
+interface StyleProps {
+    color: MaskCSSVariableColor
+}
+const useStyles = makeStyles<StyleProps>()((theme, props) => ({
+    iconWrapper: {
+        width: 20,
+        height: 20,
+        borderRadius: 999,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: props.color.alpha(0.2),
+    },
+}))
+
+export const FlashSvg = ({ color = MaskColorVar.redMain }) => (
+    <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M4.63739 0.644143L0.00450468 5.27703L2.45721 6.91216L1.36712 11L6 6.36712L3.5473 4.73198L4.63739 0.644143Z"
+            fill={color.alpha(1)}
+        />
+    </svg>
+)
+
+export function FlashIcon({ color = MaskColorVar.redMain }) {
+    const { classes } = useStyles({ color })
+    return (
+        <div className={classes.iconWrapper}>
+            <FlashSvg color={color} />
+        </div>
+    )
+}

packages/theme/src/constants.ts

@@ -187,7 +187,7 @@ function getRGBFragment(x: Record<string, string>, key: string) {
     return [r, g, b].join(', ')
 }
 
-type MaskCSSVariableColor = string & {
+export type MaskCSSVariableColor = string & {
     /** Append alpha channel to the original color */
     alpha(alpha: number): string
 } & ((defaultValue?: string) => string)

packages/theme/src/index.ts

@@ -44,6 +44,7 @@ export * from './hooks'
 export * from './ShadowRoot'
 export * from './UIHelper/custom-ui-helper'
 export { getMaskColor, useMaskColor, MaskColorVar, applyMaskColorVars } from './constants'
+export type { MaskCSSVariableColor } from './constants'
 
 const query = '(prefers-color-scheme: dark)'
 export function useSystemPreferencePalette(): PaletteMode {

packages/web3-shared/evm/pipes/index.ts

@@ -26,6 +26,34 @@ export const resolveProviderName = createLookupTableResolver<ProviderType, strin
     'Unknown Network',
 )
 
+export const resolveProviderShortenLink = createLookupTableResolver<ProviderType, string>(
+    {
+        [ProviderType.MaskWallet]: 'Mask.io',
+        [ProviderType.MetaMask]: 'Metamask.io',
+        [ProviderType.WalletConnect]: 'Walletconnect.com',
+        [ProviderType.CustomNetwork]: 'Website',
+        [ProviderType.Coin98]: 'Coin98.com',
+        [ProviderType.WalletLink]: 'Walletlink.org',
+        [ProviderType.MathWallet]: 'Mathwallet.org',
+        [ProviderType.Fortmatic]: 'Fortmatic.com',
+    },
+    'website',
+)
+
+export const resolveProviderHomeLink = createLookupTableResolver<ProviderType, string>(
+    {
+        [ProviderType.MaskWallet]: 'https://mask.io',
+        [ProviderType.MetaMask]: 'https://metamask.io',
+        [ProviderType.WalletConnect]: 'https://walletconnect.com',
+        [ProviderType.CustomNetwork]: '',
+        [ProviderType.Coin98]: 'https://coin98.com',
+        [ProviderType.WalletLink]: 'https://walletlink.org',
+        [ProviderType.MathWallet]: 'https://mathwallet.org',
+        [ProviderType.Fortmatic]: 'https://fortmatic.com',
+    },
+    '',
+)
+
 export const resolveProviderDownloadLink = createLookupTableResolver<ProviderType, string>(
     {
         [ProviderType.MaskWallet]: 'https://mask.io/download-links',