[Release] New release 2.3.0 (minor)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mask-network",
   "packageManager": "pnpm@6.23.1",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "license": "AGPL-3.0-or-later",
   "scripts": {

packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx

@@ -6,12 +6,14 @@ import {
     formatWeiToEther,
     FungibleTokenDetailed,
     isEIP1559Supported,
+    isSameAddress,
     TransactionStateType,
     useChainId,
     useFungibleTokenBalance,
     useGasLimit,
     useGasPrice,
     useNativeTokenDetailed,
+    useTokenConstants,
     useTokenTransferCallback,
 } from '@masknet/web3-shared-evm'
 import { isGreaterThan, isZero, multipliedBy, rightShift } from '@masknet/web3-shared-base'
@@ -36,6 +38,7 @@ interface TransferERC20Props {
 const GAS_LIMIT = 30000
 export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     const t = useDashboardI18N()
+    const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const anchorEl = useRef<HTMLDivElement | null>(null)
     const [id] = useState(uuid())
     const [amount, setAmount] = useState('')
@@ -69,14 +72,17 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
         setSelectedToken(token)
     }, [token])
 
+    // workaround: transferERC20 should support non-evm network
+    const isNativeToken = isSameAddress(selectedToken?.address, NATIVE_TOKEN_ADDRESS)
+    const tokenType = isNativeToken ? EthereumTokenType.Native : EthereumTokenType.ERC20
+
     // balance
     const { value: tokenBalance = '0', retry: tokenBalanceRetry } = useFungibleTokenBalance(
-        selectedToken?.type ?? EthereumTokenType.Native,
+        tokenType,
         selectedToken?.address ?? '',
     )
     const nativeToken = useNativeTokenDetailed()
     const nativeTokenPrice = useNativeTokenPrice()
-    const isNativeToken = selectedToken.type === EthereumTokenType.Native
 
     //#region resolve ENS domain
     const {
@@ -114,7 +120,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     }, [tokenBalance, gasPrice, selectedToken?.type, amount])
 
     const [transferState, transferCallback, resetTransferCallback] = useTokenTransferCallback(
-        selectedToken.type,
+        tokenType,
         selectedToken.address,
     )
 
@@ -135,7 +141,8 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
         if (isGreaterThan(rightShift(amount, selectedToken.decimals), maxAmount))
             return t.wallets_transfer_error_insufficient_balance({ symbol: selectedToken.symbol ?? '' })
         if (!address) return t.wallets_transfer_error_address_absence()
-        if (!EthereumAddress.isValid(address)) return t.wallets_transfer_error_invalid_address()
+        if (!(EthereumAddress.isValid(address) || Utils?.isValidDomain?.(address)))
+            return t.wallets_transfer_error_invalid_address()
         if (Utils?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) {
             if (network?.type !== NetworkType.Ethereum) return t.wallet_transfer_error_no_ens_support()
             return t.wallet_transfer_error_no_address_has_been_set_name()

packages/dashboard/src/pages/Wallets/index.tsx

@@ -75,8 +75,15 @@ function Wallets() {
     }, [pathname])
 
     const balance = useMemo(() => {
-        return BigNumber.sum.apply(null, detailedTokens?.map((asset) => getTokenUSDValue(asset.value)) ?? []).toNumber()
-    }, [detailedTokens])
+        return BigNumber.sum
+            .apply(
+                null,
+                detailedTokens
+                    ?.filter((x) => (selectedNetwork ? x.chainId === selectedNetwork.chainId : true))
+                    ?.map((y) => getTokenUSDValue(y.value)) ?? [],
+            )
+            .toNumber()
+    }, [selectedNetwork, detailedTokens])
 
     const pateTitle = useMemo(() => {
         if (wallets.length === 0) return t.create_wallet_form_title()

packages/mask/src/extension/popups/components/NetworkSelector/index.tsx

@@ -2,14 +2,10 @@ import { memo, useCallback } from 'react'
 import { Box, MenuItem, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Flags } from '../../../../../shared'
-import { ChainId, ProviderType, useAccount } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType, useAccount, useChainId, useProviderType } from '@masknet/web3-shared-evm'
 import { getRegisteredWeb3Networks, NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra'
-import {
-    currentMaskWalletAccountSettings,
-    currentMaskWalletChainIdSettings,
-    currentProviderSettings,
-} from '../../../../plugins/Wallet/settings'
-import { ChainIcon, useMenu, useValueRef, WalletIcon } from '@masknet/shared'
+import { currentMaskWalletAccountSettings } from '../../../../plugins/Wallet/settings'
+import { ChainIcon, useMenu, WalletIcon } from '@masknet/shared'
 import { ArrowDownRound } from '@masknet/icons'
 import { WalletRPC } from '../../../../plugins/Wallet/messages'
 
@@ -49,11 +45,11 @@ const useStyles = makeStyles()((theme) => ({
 export const NetworkSelector = memo(() => {
     const networks = getRegisteredWeb3Networks()
     const account = useAccount()
-    const currentChainId = useValueRef(currentMaskWalletChainIdSettings)
-    const currentProvider = useValueRef(currentProviderSettings)
+    const chainId = useChainId()
+    const providerType = useProviderType()
     const onChainChange = useCallback(
         async (chainId: ChainId) => {
-            if (currentProvider === ProviderType.MaskWallet) {
+            if (providerType === ProviderType.MaskWallet) {
                 await WalletRPC.updateAccount({
                     chainId,
                 })
@@ -63,12 +59,12 @@ export const NetworkSelector = memo(() => {
                 account: currentMaskWalletAccountSettings.value,
             })
         },
-        [currentProvider, account],
+        [providerType, account],
     )
 
     return (
         <NetworkSelectorUI
-            currentNetwork={networks.find((x) => x.chainId === currentChainId) ?? networks[0]}
+            currentNetwork={networks.find((x) => x.chainId === chainId) ?? networks[0]}
             onChainChange={onChainChange}
             networks={networks}
         />

packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx

@@ -15,16 +15,16 @@ import {
     useChainId,
     useERC20TokenDetailed,
     useNativeTokenDetailed,
+    useNetworkType,
 } from '@masknet/web3-shared-evm'
-import { FormattedBalance, FormattedCurrency, TokenIcon, useValueRef } from '@masknet/shared'
+import { FormattedBalance, FormattedCurrency, TokenIcon } from '@masknet/shared'
 import { Link, Typography } from '@mui/material'
 import { useI18N } from '../../../../../utils'
 import { PopupRoutes } from '@masknet/shared-base'
 import { LoadingButton } from '@mui/lab'
 import { unreachable } from '@dimensiondev/kit'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import Services from '../../../../service'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import BigNumber from 'bignumber.js'
 import { useNativeTokenPrice, useTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { LoadingPlaceholder } from '../../../components/LoadingPlaceholder'
@@ -136,7 +136,7 @@ const ContractInteraction = memo(() => {
     const location = useLocation()
     const history = useHistory()
     const chainId = useChainId()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const [transferError, setTransferError] = useState(false)
     const { value: request, loading: requestLoading } = useUnconfirmedRequest()
 

packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx

@@ -1,12 +1,10 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
-import { useValueRef } from '@masknet/shared'
-import { NetworkType } from '@masknet/web3-shared-evm'
+import { NetworkType, useNetworkType } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../../utils'
 import { GasSetting1559 } from './GasSetting1559'
 import { Prior1559GasSetting } from './Prior1559GasSetting'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -30,7 +28,7 @@ const useStyles = makeStyles()(() => ({
 const GasSetting = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     return (
         <main className={classes.container}>
             <Typography className={classes.title}>{t('popups_wallet_gas_fee_settings')}</Typography>

packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx

@@ -12,13 +12,12 @@ import {
     getChainIdFromNetworkType,
     isEIP1559Supported,
     useNativeTokenDetailed,
+    useNetworkType,
 } from '@masknet/web3-shared-evm'
-import { useValueRef } from '@masknet/shared'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
+import { z as zod } from 'zod'
 import BigNumber from 'bignumber.js'
 import { useI18N } from '../../../../../utils'
 import { hexToNumber, toHex } from 'web3-utils'
-import { z as zod } from 'zod'
 import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { StyledInput } from '../../../components/StyledInput'
@@ -79,7 +78,7 @@ const ReplaceTransaction = memo(() => {
 
     const { value: nativeToken } = useNativeTokenDetailed()
     const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const is1559 = isEIP1559Supported(getChainIdFromNetworkType(networkType))
 
     const schema = useMemo(() => {

packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx

@@ -1,11 +1,10 @@
 import { memo, useMemo, useState } from 'react'
-import { makeStyles } from '@masknet/theme'
-import { formatBalance, NetworkType, ProviderType, useWallets } from '@masknet/web3-shared-evm'
 import { MenuItem, Typography } from '@mui/material'
-import { FormattedBalance, TokenIcon, useMenu, useValueRef } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import { formatBalance, NetworkType, ProviderType, useNetworkType, useWallets } from '@masknet/web3-shared-evm'
+import { FormattedBalance, TokenIcon, useMenu } from '@masknet/shared'
 import { useContainer } from 'unstated-next'
 import { WalletContext } from '../hooks/useWalletContext'
-import { currentNetworkSettings } from '../../../../../plugins/Wallet/settings'
 import { Transfer1559 } from './Transfer1559'
 import { Prior1559Transfer } from './Prior1559Transfer'
 
@@ -26,7 +25,7 @@ const useStyles = makeStyles()({
 
 const Transfer = memo(() => {
     const { classes } = useStyles()
-    const networkType = useValueRef(currentNetworkSettings)
+    const networkType = useNetworkType()
     const wallets = useWallets(ProviderType.MaskWallet)
     const { assets, currentToken } = useContainer(WalletContext)
     const [selectedAsset, setSelectedAsset] = useState(currentToken)

packages/mask/src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Mask Network",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "manifest_version": 2,
     "permissions": ["storage", "downloads", "webNavigation", "activeTab"],
     "optional_permissions": ["<all_urls>", "notifications", "clipboardRead"],

packages/mask/src/plugins/Avatar/Services/rss3.ts

@@ -4,6 +4,7 @@ import { isSameAddress } from '@masknet/web3-shared-evm'
 import { personalSign } from '../../../extension/background-script/EthereumService'
 import { RSS3_APP } from '../constants'
 import type { AvatarMetaDB } from '../types'
+import addSeconds from 'date-fns/addSeconds'
 
 interface NFTRSSNode {
     signature: string
@@ -20,16 +21,19 @@ export async function createRSS3(address: string) {
     })
 }
 
-const cache = new Map<string, Promise<{ type: string; nfts: Record<string, NFTRSSNode> | NFTRSSNode } | undefined>>()
+const cache = new Map<
+    string,
+    [Promise<{ type: string; nfts: Record<string, NFTRSSNode> | NFTRSSNode } | undefined>, number]
+>()
 
 export async function getNFTAvatarFromRSS(userId: string, address: string) {
     let v = cache.get(address)
-    if (!v) {
-        v = _getNFTAvatarFromRSS(address)
-        cache.set(address, v)
+    if (!v || Date.now() > v[1]) {
+        cache.set(address, [_getNFTAvatarFromRSS(address), addSeconds(Date.now(), 60).getTime()])
     }
 
-    const result = await v
+    v = cache.get(address)
+    const result = await v?.[0]
     if (!result) return
     const { type, nfts } = result
 

packages/mask/src/plugins/EVM/UI/Web3State/index.ts

@@ -69,7 +69,7 @@ export function fixWeb3State(state?: Web3Plugin.ObjectCapabilities.Capabilities,
             if (
                 isSameAddress(address, ZERO_ADDRESS) ||
                 isSameAddress(address, ZERO_X_ERROR_ADDRESS) ||
-                isValidAddress(address)
+                !isValidAddress(address)
             ) {
                 return undefined
             }

packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx

@@ -81,6 +81,9 @@ export function ProviderIconClickBait({
     if (providerType === ProviderType.Fortmatic && !isFortmaticSupported(getChainIdFromNetworkType(networkType)))
         return null
 
+    // hide fortmatic and coin98 wallets
+    if (providerType === ProviderType.Fortmatic || providerType === ProviderType.Coin98) return null
+
     // coinbase and mathwallet are blocked by CSP
     if ([ProviderType.WalletLink, ProviderType.MathWallet].includes(providerType)) return null
 

packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx

@@ -76,6 +76,7 @@ export function PreviewCard(props: PreviewCardProps) {
         setOpenBoxTransactionOverrides,
 
         // retry
+        retryMaskBoxStatus,
         retryMaskBoxInfo,
         retryBoxInfo,
         retryMaskBoxCreationSuccessEvent,
@@ -118,10 +119,11 @@ export function PreviewCard(props: PreviewCardProps) {
         refreshLastPurchasedTokenIds()
         try {
             await openBoxCallback()
+            retryMaskBoxStatus()
             setOpenDrawDialog(false)
         } catch {}
         setDrawing(false)
-    }, [openBoxCallback, refreshLastPurchasedTokenIds])
+    }, [openBoxCallback, refreshLastPurchasedTokenIds, retryMaskBoxStatus])
 
     const { setDialog: setTransactionDialog } = useRemoteControlledDialog(
         WalletMessages.events.transactionDialogUpdated,

packages/mask/src/plugins/MaskBox/hooks/useContext.ts

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState, useCallback } from 'react'
 import { useAsyncRetry } from 'react-use'
+import fromUnixTime from 'date-fns/fromUnixTime'
+import addDays from 'date-fns/addDays'
+import subDays from 'date-fns/subDays'
 import { omit, clamp, first, uniq } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
 import { createContainer } from 'unstated-next'
@@ -80,29 +83,28 @@ function useContext(initialState?: { boxId: string }) {
         loading: loadingBoxInfo,
         retry: retryBoxInfo,
     } = useAsyncRetry<BoxInfo | null>(async () => {
-        if (
-            !maskBoxInfo ||
-            !maskBoxStatus ||
-            isSameAddress(maskBoxInfo?.creator ?? ZERO_ADDRESS, ZERO_ADDRESS) ||
-            !maskBoxCreationSuccessEvent
-        )
+        if (!maskBoxInfo || !maskBoxStatus || isSameAddress(maskBoxInfo?.creator ?? ZERO_ADDRESS, ZERO_ADDRESS))
             return null
         const personalLimit = Number.parseInt(maskBoxInfo.personal_limit, 10)
-        const remaining = Number.parseInt(maskBoxStatus.remaining, 10)
-        const sold = Number.parseInt(maskBoxStatus.total, 10) - remaining
+        const remaining = Number.parseInt(maskBoxStatus.remaining, 10) // the current balance of the creator's account
+        const total = Number.parseInt(maskBoxStatus.total, 10) // the total amount of tokens in the box
+        const totalComputed = total && remaining && remaining > total ? remaining : total
+        const sold = Math.max(0, totalComputed - remaining)
         const personalRemaining = Math.max(0, personalLimit - purchasedTokens.length)
+        const startAt = Number.parseInt(maskBoxCreationSuccessEvent?.returnValues.start_time ?? '0', 10)
+        const endAt = Number.parseInt(maskBoxCreationSuccessEvent?.returnValues.end_time ?? '0', 10)
         const info: BoxInfo = {
             boxId,
             creator: maskBoxInfo.creator,
             name: maskBoxInfo.name,
-            sellAll: maskBoxCreationSuccessEvent.returnValues.sell_all,
+            sellAll: maskBoxCreationSuccessEvent?.returnValues.sell_all ?? false,
             personalLimit: personalLimit,
             personalRemaining,
             remaining,
             availableAmount: Math.min(personalRemaining, remaining),
-            startAt: new Date(Number.parseInt(maskBoxCreationSuccessEvent.returnValues.start_time, 10) * 1000),
-            endAt: new Date(Number.parseInt(maskBoxCreationSuccessEvent.returnValues.end_time, 10) * 1000),
-            total: maskBoxStatus.total,
+            startAt: startAt === 0 ? subDays(new Date(), 1) : fromUnixTime(startAt),
+            endAt: endAt === 0 ? addDays(new Date(), 1) : fromUnixTime(endAt),
+            total: totalComputed,
             sold,
             canceled: maskBoxStatus.canceled,
             tokenIds: allTokens,