feat: add useAccountName

packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx

@@ -54,7 +54,7 @@ export function ActionBar(props: ActionBarProps) {
     const isOwner = isSameAddress(asset.value.owner?.address, account)
     return (
         <Box className={classes.root} sx={{ padding: 1.5 }} display="flex" justifyContent="center">
-            <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId}>
+            <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId} renderInTimeline>
                 {!isOwner && asset.value.auction ? (
                     <ActionButton
                         className={classes.button}

packages/mask/src/plugins/Trader/SNSAdaptor/trader/ConfirmDialog.tsx

@@ -125,11 +125,12 @@ export interface ConfirmDialogUIProps extends withClasses<never> {
     onConfirm: () => void
     onClose?: () => void
     wallet?: Wallet | null
+    account?: string
 }
 
 export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
     const { t } = useI18N()
-    const { open, trade, wallet, inputToken, outputToken, onConfirm, onClose, gas, gasPrice } = props
+    const { open, trade, wallet, inputToken, outputToken, onConfirm, onClose, gas, gasPrice, account } = props
 
     const [cacheTrade, setCacheTrade] = useState<TradeComputed | undefined>()
     const [priceUpdated, setPriceUpdated] = useState(false)
@@ -220,7 +221,11 @@ export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
                     <Box className={classes.section}>
                         <Typography>{t('plugin_red_packet_nft_account_name')}</Typography>
                         <Typography>
-                            ({wallet?.name})
+                            {wallet?.name ? (
+                                `(${wallet.name})`
+                            ) : (
+                                <FormattedAddress address={account} size={10} formatter={formatEthereumAddress} />
+                            )}
                             <FormattedAddress
                                 address={wallet?.address ?? ''}
                                 size={4}

packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx

@@ -5,14 +5,7 @@ import { InputTokenPanel } from './InputTokenPanel'
 import { Box, chipClasses, Collapse, IconButton, Tooltip, Typography } from '@mui/material'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { ChainId, formatPercentage, SchemaType } from '@masknet/web3-shared-evm'
-import {
-    FungibleToken,
-    isLessThan,
-    formatBalance,
-    NetworkPluginID,
-    rightShift,
-    Wallet,
-} from '@masknet/web3-shared-base'
+import { FungibleToken, isLessThan, formatBalance, NetworkPluginID, rightShift } from '@masknet/web3-shared-base'
 import { TokenPanelType, TradeInfo } from '../../types'
 import BigNumber from 'bignumber.js'
 import { first, noop } from 'lodash-unified'
@@ -180,7 +173,7 @@ const useStyles = makeStyles<{ isDashboard: boolean; isPopup: boolean }>()((them
 })
 
 export interface AllTradeFormProps {
-    wallet?: Wallet | null
+    account?: string | null
     inputAmount: string
     inputToken?: FungibleToken<ChainId, SchemaType>
     outputToken?: FungibleToken<ChainId, SchemaType>
@@ -199,7 +192,7 @@ export interface AllTradeFormProps {
 
 export const TradeForm = memo<AllTradeFormProps>(
     ({
-        wallet,
+        account,
         trades,
         inputAmount,
         inputToken,
@@ -456,7 +449,7 @@ export const TradeForm = memo<AllTradeFormProps>(
                             </IconButton>
                         </div>
                     </Box>
-                    {wallet ? (
+                    {account ? (
                         <Box className={classes.section}>
                             <ChainBoundary
                                 expectedPluginID={NetworkPluginID.PLUGIN_EVM}
@@ -483,6 +476,7 @@ export const TradeForm = memo<AllTradeFormProps>(
                                     withChildren
                                     ActionButtonProps={{
                                         color: 'primary',
+                                        style: { borderRadius: isDashboard ? 8 : 24 },
                                     }}
                                     infiniteUnlockContent={
                                         <Box component="span" display="flex" alignItems="center">

packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx

@@ -28,7 +28,7 @@ import { ConfirmDialog } from './ConfirmDialog'
 import { useGasConfig } from './hooks/useGasConfig'
 import { useSortedTrades } from './hooks/useSortedTrades'
 import { useUpdateBalance } from './hooks/useUpdateBalance'
-import { useChainId, useChainIdValid, useFungibleTokenBalance, useWallet } from '@masknet/plugin-infra/web3'
+import { useChainId, useChainIdValid, useFungibleTokenBalance, useWallet, useAccount } from '@masknet/plugin-infra/web3'
 import { SettingsDialog } from './SettingsDialog'
 import { TradeForm } from './TradeForm'
 
@@ -52,6 +52,7 @@ export function Trader(props: TraderProps) {
     const { defaultOutputCoin, coin, chainId: targetChainId, defaultInputCoin } = props
     const [focusedTrade, setFocusTrade] = useState<TradeInfo>()
     const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const chainId = targetChainId ?? currentChainId
     const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM)
@@ -356,7 +357,7 @@ export function Trader(props: TraderProps) {
     return (
         <div className={classes.root}>
             <TradeForm
-                wallet={wallet}
+                account={account}
                 trades={sortedAllTradeComputed}
                 inputToken={inputToken}
                 outputToken={outputToken}
@@ -373,6 +374,7 @@ export function Trader(props: TraderProps) {
             />
             {focusedTrade?.value && !isNativeTokenWrapper(focusedTrade.value) && inputToken && outputToken ? (
                 <ConfirmDialog
+                    account={account}
                     wallet={wallet}
                     open={openConfirmDialog}
                     trade={focusedTrade.value}

packages/mask/src/web3/UI/ChainBoundary.tsx

@@ -156,6 +156,7 @@ export function ChainBoundary<T extends NetworkPluginID>(props: ChainBoundaryPro
             <>
                 {!props.hiddenConnectButton ? (
                     <ActionButton
+                        fullWidth
                         startIcon={<PluginWalletConnectIcon />}
                         variant="contained"
                         size={props.ActionButtonPromiseProps?.size}

packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx

@@ -80,6 +80,27 @@ export function EthereumERC20TokenApprovedBoundary(props: EthereumERC20TokenAppr
     // not a valid erc20 token, please given token as undefined
     if (!token) return <Grid container>{render ? (render(false) as any) : children}</Grid>
 
+    if (transactionState.loading || approveStateType === ApproveStateType.UPDATING)
+        return (
+            <Grid container>
+                <ActionButton
+                    className={classes.button}
+                    fullWidth
+                    variant="contained"
+                    size="large"
+                    disabled
+                    {...props.ActionButtonProps}>
+                    {transactionState.loading
+                        ? t('plugin_ito_unlocking_symbol', { symbol: token.symbol })
+                        : `Updating ${token.symbol}`}
+                    &hellip;
+                </ActionButton>
+                {withChildren ? (
+                    <Box className={classes.children}>{render ? (render(true) as any) : children}</Box>
+                ) : null}
+            </Grid>
+        )
+
     if (approveStateType === ApproveStateType.UNKNOWN)
         return (
             <Grid container>
@@ -151,23 +172,6 @@ export function EthereumERC20TokenApprovedBoundary(props: EthereumERC20TokenAppr
                 ) : null}
             </Box>
         )
-    if (transactionState.loading || approveStateType === ApproveStateType.UPDATING)
-        return (
-            <Grid container>
-                <ActionButton
-                    className={classes.button}
-                    fullWidth
-                    variant="contained"
-                    size="large"
-                    disabled
-                    {...props.ActionButtonProps}>
-                    {transactionState.loading
-                        ? t('plugin_ito_unlocking_symbol', { symbol: token.symbol })
-                        : `Updating ${token.symbol}`}
-                    &hellip;
-                </ActionButton>
-            </Grid>
-        )
     if (approveStateType === ApproveStateType.APPROVED)
         return (
             <Grid container>

packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts

@@ -1,6 +1,5 @@
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { isLessThan, NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
-import { once } from 'lodash-unified'
 import { useCallback, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import { useERC20TokenContract } from './useERC20TokenContract'
@@ -80,10 +79,10 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
 
             // send transaction and wait for hash
             return new Promise<string>(async (resolve, reject) => {
-                const revalidate = once(() => {
+                const revalidate = () => {
                     revalidateBalance()
                     revalidateAllowance()
-                })
+                }
                 erc20Contract.methods
                     .approve(spender, useExact ? amount : MaxUint256)
                     .send(config as NonPayableTx)
@@ -116,7 +115,7 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
             spender,
             balance,
         },
-        state,
+        { ...state, loading: loadingAllowance || loadingBalance || state.loading },
         approveCallback,
         resetCallback,
     ] as const

packages/plugin-infra/src/web3/index.ts

@@ -1,6 +1,7 @@
 export * from './Context'
 
 export * from './useAccount'
+export * from './useAccountName'
 export * from './useAddressBook'
 export * from './useSocialAddressList'
 export * from './useSocialAddressListAll'

packages/plugin-infra/src/web3/useAccountName.ts

@@ -0,0 +1,25 @@
+import { useMemo } from 'react'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { useAccount } from './useAccount'
+import { useWallets } from './useWallets'
+import { useProviderType } from './useProviderType'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useAccountName<T extends NetworkPluginID>(pluginID?: T, expectedAccount?: string) {
+    type ProviderName = (providerType: Web3Helper.Definition[T]['ProviderType']) => string
+
+    const { Others } = useWeb3State<void, T>(pluginID)
+    const account = useAccount(pluginID, expectedAccount)
+    const providerType = useProviderType(pluginID)
+    const wallets = useWallets(pluginID)
+
+    return useMemo(() => {
+        // if the currently selected account is a mask wallet, then use the wallet name as the account name
+        const wallet = wallets.find((x) => isSameAddress(account, x.address))
+        if (wallet?.name) return wallet.name
+
+        // else use the provider name as the account name
+        return (Others?.providerResolver.providerName as ProviderName | undefined)?.(providerType)
+    }, [account, providerType, wallets.map((x) => x.address.toLowerCase()), Others])
+}

packages/plugins/EVM/src/state/Connection/translators/Base.ts

@@ -13,9 +13,15 @@ export class Base implements Translator {
 
         // #region polyfill transaction config
         {
-            // add gas margin
-            if (config.gas)
-                config.gas = BigNumber.max(toHex(addGasMargin(config.gas as string).toFixed()), 21000).toFixed()
+            try {
+                // add gas margin
+                if (config.gas)
+                    config.gas = toHex(
+                        BigNumber.max(toHex(addGasMargin(config.gas as string).toFixed()), 21000).toFixed(),
+                    )
+            } catch (error) {
+                console.log(error)
+            }
 
             // add gas price
             const hub = await Web3StateSettings.value.Hub?.getHub?.({
@@ -31,7 +37,7 @@ export class Base implements Translator {
                     slowOption?.suggestedMaxFeePerGas &&
                     normalOption &&
                     isLessThan(
-                        config.maxFeePerGas ? formatWeiToGwei(config.maxFeePerGas as string) : 0,
+                        config.maxPriorityFeePerGas ? formatWeiToGwei(config.maxPriorityFeePerGas as string) : 0,
                         slowOption.suggestedMaxPriorityFeePerGas,
                     )
                 ) {
@@ -52,7 +58,6 @@ export class Base implements Translator {
                     config.gasPrice = toHex(normalOption.suggestedMaxFeePerGas)
                 }
             }
-
             context.config = config
         }
         // #endregion

packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ERC20.ts

@@ -19,7 +19,7 @@ export class ERC20Descriptor implements TransactionDescriptor {
                     title: 'Approve',
                     description: `Approve spend ${getTokenAmountDescription(
                         context.parameters?.value,
-                        await connection?.getFungibleToken(context.parameters?.to ?? '', {
+                        await connection?.getFungibleToken(context.to ?? '', {
                             chainId: context.chainId,
                         }),
                     )}`,