fix: bugfix for wallet settings (#10334)

DimensionDev · Aug 11, 2023 · 60b7cb2 · 60b7cb2
1 parent d83f2e5
commit 60b7cb2
Show file tree

Hide file tree

Showing 29 changed files with 188 additions and 90 deletions.
diff --git a/packages/dashboard/src/pages/CreateMaskWallet/Recovery/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/Recovery/index.tsx
@@ -14,6 +14,7 @@ import { RecoveryContext, RecoveryProvider } from '../../../contexts/index.js'
 import { RestoreFromMnemonic } from '../../../components/Restore/RestoreFromMnemonic.js'
 import { RestoreWalletFromLocal } from '../../../components/Restore/RestoreWalletFromLocal.js'
 import { ResetWalletContext } from '../context.js'
+import { useAsync } from 'react-use'
 
 const useStyles = makeStyles()((theme) => ({
     header: {
@@ -167,11 +168,15 @@ const Recovery = memo(function Recovery() {
         })
     }, [location.state?.password, location.state?.isReset])
 
+    const { value: hasPassword, loading: loadingHasPassword } = useAsync(WalletServiceRef.value.hasPassword, [])
+
+    const step = hasPassword ? '1' : '2'
+
     return (
         <>
             <div className={classes.between}>
                 <Typography className={cx(classes.second, classes.bold)}>
-                    {t.create_step({ step: '2', totalSteps: '2' })}
+                    {loadingHasPassword ? '' : t.create_step({ step, totalSteps: step })}
                 </Typography>
                 <Typography className={cx(classes.create, classes.bold)} onClick={handleRecovery}>
                     {t.create()}

diff --git a/packages/mask/src/extension/popups/components/AddContactInputPanel/index.tsx b/packages/mask/src/extension/popups/components/AddContactInputPanel/index.tsx
@@ -66,7 +66,11 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-const AddContactInputPanel = memo(function AddContactInputPanel(props: BoxProps) {
+interface Props extends BoxProps {
+    isManage?: boolean
+}
+
+const AddContactInputPanel = memo(function AddContactInputPanel({ isManage, ...props }: Props) {
     const { t } = useI18N()
     const { classes, cx } = useStyles()
     const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
@@ -94,7 +98,7 @@ const AddContactInputPanel = memo(function AddContactInputPanel(props: BoxProps)
 
     return (
         <Box padding={2} {...props} className={cx(classes.receiverPanel, props.className)}>
-            <Typography className={classes.toText}>{t('popups_wallet_transfer_to')}</Typography>
+            {isManage ? null : <Typography className={classes.toText}>{t('popups_wallet_transfer_to')}</Typography>}
             <div className={classes.fieldWrapper}>
                 <MaskTextField
                     placeholder={t('wallet_transfer_placeholder')}

diff --git a/packages/mask/src/extension/popups/components/GasSettingMenu/index.tsx b/packages/mask/src/extension/popups/components/GasSettingMenu/index.tsx
@@ -168,7 +168,7 @@ export const GasSettingMenu = memo<GasSettingMenuProps>(function GasSettingMenu(
                     sign={CurrencyType.USD}
                     value={formatWeiToEther(totalGas).times(tokenPrice ?? 0)}
                     options={{
-                        onlyRemainTwoDecimal: false,
+                        onlyRemainTwoOrZeroDecimal: false,
                         customDecimalConfig: {
                             boundary: scale10(1, -4),
                             decimalExp: 4,

diff --git a/packages/mask/src/extension/popups/components/Navigator/index.tsx b/packages/mask/src/extension/popups/components/Navigator/index.tsx
@@ -61,9 +61,9 @@ export const Navigator = memo(function Navigator({ className, ...rest }: BoxProp
     const walletLink = useMemo(() => {
         if (walletPageLoading) return '#'
         if (!wallet) return PopupRoutes.Wallet
+        if (!hasPassword) return PopupRoutes.SetPaymentPassword
         if (isLocked)
             return urlcat(PopupRoutes.Unlock, { from: messages.length ? PopupRoutes.ContractInteraction : undefined })
-        if (!hasPassword) return PopupRoutes.SetPaymentPassword
         if (messages.length) return PopupRoutes.ContractInteraction
         return PopupRoutes.Wallet
     }, [wallet, walletPageLoading, isLocked, hasPassword, messages])

diff --git a/packages/mask/src/extension/popups/modals/GasSettingModal/GasSettingDialog.tsx b/packages/mask/src/extension/popups/modals/GasSettingModal/GasSettingDialog.tsx
@@ -226,7 +226,7 @@ export const GasSettingDialog = memo<GasSettingDialogProps>(function GasSettingM
                         value={formatWeiToEther(totalGas).times(nativeTokenPrice ?? 0)}
                         formatter={formatCurrency}
                         options={{
-                            onlyRemainTwoDecimal: false,
+                            onlyRemainTwoOrZeroDecimal: false,
                             customDecimalConfig: {
                                 boundary: scale10(1, -4),
                                 decimalExp: 4,

diff --git a/packages/mask/src/extension/popups/modals/WalletAutoLockSettingModal/index.tsx b/packages/mask/src/extension/popups/modals/WalletAutoLockSettingModal/index.tsx
@@ -135,6 +135,7 @@ function WalletAutoLockSettingDrawer(props: BottomDrawerProps) {
                             classes.listItem,
                             option.name === OptionName.ONE_DAY ? classes.listItemOneDay : '',
                             option.value === (time ?? initialTime) ? classes.selected : '',
+                            option.value === '' && (time ?? initialTime) === '0' ? classes.selected : '',
                         )}
                         onClick={() => {
                             setTime(option.value)
@@ -170,5 +171,8 @@ export const WalletAutoLockSettingModal = forwardRef<
             setProps(p)
         },
     })
+
+    if (!open) return null
+
     return <WalletAutoLockSettingDrawer open={open} {...props} onClose={() => dispatch?.close(false)} />
 })
diff --git a/packages/mask/src/extension/popups/modals/WalletRenameModal/index.tsx b/packages/mask/src/extension/popups/modals/WalletRenameModal/index.tsx
@@ -22,13 +22,14 @@ function WalletRenameDrawer({ wallet, ...rest }: WalletRenameDrawerProps) {
 
     const [{ loading }, handleClick] = useAsyncFn(async () => {
         if (!name || !wallet) return
-        if (name.length > 20 || name.length < 3) {
+        const _name = name.trim()
+        if (_name.length > 20 || _name.length < 3) {
             setError(t('popups_wallet_settings_rename_tips'))
             return
         }
 
         try {
-            await Web3?.renameWallet?.(wallet.address, name, { providerType: ProviderType.MaskWallet })
+            await Web3?.renameWallet?.(wallet.address, _name, { providerType: ProviderType.MaskWallet })
             setName('')
             rest.onClose?.()
         } catch (error) {

diff --git a/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx
@@ -22,6 +22,7 @@ const useStyles = makeStyles<{ currentTab: TabType; searchError: boolean }>()((t
         flex: 1,
         padding: '16px 16px 0 16px',
         display: 'flex',
+        overflow: 'hidden',
     },
     channel: {
         flex: 1,
@@ -68,7 +69,7 @@ const useStyles = makeStyles<{ currentTab: TabType; searchError: boolean }>()((t
     },
     searchInput: {
         position: 'absolute',
-        left: 16,
+        transform: 'translateX(-36px)',
         width: 368,
         zIndex: 50,
     },

diff --git a/packages/mask/src/extension/popups/pages/Wallet/ContactList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ContactList/index.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean }>()
             display: 'flex',
             flexDirection: 'column',
             padding: '0',
-            maxHeight: isManage ? 470 : 380,
+            maxHeight: isManage ? 470 : 400,
             overflow: 'scroll',
             '::-webkit-scrollbar': {
                 display: 'none',
@@ -47,6 +47,9 @@ const useStyles = makeStyles<{ showDivideLine?: boolean; isManage?: boolean }>()
             color: theme.palette.maskColor.main,
             lineHeight: '18px',
             fontWeight: 700,
+            maxWidth: 290,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
         },
         identifier: {
             fontSize: 14,
@@ -183,7 +186,7 @@ const ContactListUI = memo(function ContactListUI() {
     return (
         <div className={classes.root}>
             <Box className={classes.page}>
-                <AddContactInputPanel />
+                <AddContactInputPanel isManage={isManage} />
                 <Box className={classes.contactsPanel}>
                     {contacts.length ? (
                         <Typography className={classes.contactTitle}>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/SetPaymentPassword/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SetPaymentPassword/index.tsx
@@ -220,7 +220,7 @@ const SetPaymentPassword = memo(function SetPaymentPassword() {
                                     control={control}
                                 />
                             </div>
-                            {errorMsg ? (
+                            {errorMsg && !isValid ? (
                                 <Typography fontSize={14} color={theme.palette.maskColor.danger} marginTop="12px">
                                     {errorMsg}
                                 </Typography>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
@@ -4,7 +4,7 @@ import { ActionButton, makeStyles } from '@masknet/theme'
 import { useChainContext, useNetworks, useWallet, useWallets, useWeb3State } from '@masknet/web3-hooks-base'
 import { Web3 } from '@masknet/web3-providers'
 import { isSameAddress } from '@masknet/web3-shared-base'
-import { ProviderType } from '@masknet/web3-shared-evm'
+import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import { Box, List, Typography } from '@mui/material'
 import { memo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -160,15 +160,17 @@ const SwitchWallet = memo(function SwitchWallet() {
         <ActionModal header={t('wallet_account')} action={action}>
             <div className={classes.content}>
                 <List dense className={classes.list}>
-                    {wallets.map((item) => (
-                        <WalletItem
-                            key={item.address}
-                            wallet={item}
-                            onSelect={handleSelect}
-                            isSelected={isSameAddress(item.address, wallet?.address)}
-                            className={classes.walletItem}
-                        />
-                    ))}
+                    {wallets.map((item) =>
+                        item.owner && chainId !== ChainId.Matic ? null : (
+                            <WalletItem
+                                key={item.address}
+                                wallet={item}
+                                onSelect={handleSelect}
+                                isSelected={isSameAddress(item.address, wallet?.address)}
+                                className={classes.walletItem}
+                            />
+                        ),
+                    )}
                 </List>
             </div>
         </ActionModal>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/ChangeOwner.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/ChangeOwner.tsx
@@ -13,7 +13,7 @@ import { useStyles } from './useStyles.js'
 export function ChangeOwner() {
     const { t } = useI18N()
     const theme = useTheme()
-    const { classes } = useStyles()
+    const { classes, cx } = useStyles()
     const navigate = useNavigate()
     const wallet = useWallet()
     const wallets = useWallets()
@@ -36,7 +36,9 @@ export function ChangeOwner() {
                 <Typography className={classes.itemText}>{t('popups_change_owner')}</Typography>
             </Box>
             <Box className={classes.itemBox}>
-                <Typography className={classes.itemText}>{walletManager?.name ?? personaManager?.nickname}</Typography>
+                <Typography className={cx(classes.itemText, classes.ellipsis)}>
+                    {walletManager?.name ?? personaManager?.nickname}
+                </Typography>
                 <Icons.ArrowRight color={theme.palette.maskColor.second} size={24} />
             </Box>
         </ListItem>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/index.tsx
@@ -1,8 +1,7 @@
-import { memo } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { memo, useCallback } from 'react'
 import { Icons } from '@masknet/icons'
-import { NetworkPluginID } from '@masknet/shared-base'
-import { useChainContext, useWallet } from '@masknet/web3-hooks-base'
+import { NetworkPluginID, PopupModalRoutes } from '@masknet/shared-base'
+import { useWallet } from '@masknet/web3-hooks-base'
 import { Box, List, Typography, useTheme } from '@mui/material'
 import { useI18N } from '../../../../../utils/index.js'
 import { useTitle } from '../../../hook/useTitle.js'
@@ -17,22 +16,26 @@ import { ChangeCurrency } from './ChangeCurrency.js'
 import { ChangeOwner } from './ChangeOwner.js'
 import { ActionButton } from '@masknet/theme'
 import { WalletRemoveModal } from '../../../modals/modals.js'
+import { useModalNavigate } from '../../../components/index.js'
 
 const WalletSettings = memo(() => {
     const { t } = useI18N()
     const { classes, cx } = useStyles()
-    const navigate = useNavigate()
-    const { chainId } = useChainContext<NetworkPluginID.PLUGIN_EVM>()
+    const modalNavigate = useModalNavigate()
     const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const theme = useTheme()
 
+    const handleSwitchWallet = useCallback(() => {
+        modalNavigate(PopupModalRoutes.SwitchWallet)
+    }, [modalNavigate])
+
     useTitle(t('popups_wallet_setting'))
 
     if (!wallet) return null
 
     return (
         <div className={classes.content}>
-            <Box className={cx(classes.item, classes.primaryItem)}>
+            <Box className={cx(classes.item, classes.primaryItem)} onClick={handleSwitchWallet}>
                 <Box className={classes.primaryItemBox}>
                     {wallet.owner ? (
                         <Icons.SmartPay size={24} />

diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/useStyles.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/useStyles.tsx
@@ -18,7 +18,6 @@ export const useStyles = makeStyles()((theme) => ({
     },
     primaryItem: {
         margin: '16px 16px 0 16px',
-        cursor: 'default',
         background: theme.palette.maskColor.primary,
     },
     primaryItemText: {
@@ -76,6 +75,11 @@ export const useStyles = makeStyles()((theme) => ({
         bottom: 0,
         zIndex: 100,
     },
+    ellipsis: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        maxWidth: 150,
+    },
     removeWalletButton: {
         marginBottom: 16,
     },

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx
@@ -143,7 +143,7 @@ export const AssetsListUI = memo<AssetsListUIProps>(function AssetsListUI({ isEx
                                 <FormattedCurrency
                                     value={asset.value?.usd || 0}
                                     formatter={formatCurrency}
-                                    options={{ onlyRemainTwoDecimal: true }}
+                                    options={{ onlyRemainTwoOrZeroDecimal: true }}
                                 />
                             </Typography>
                         }>

diff --git a/...ages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/WalletAssetsValue.tsx b/...ages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/WalletAssetsValue.tsx
@@ -17,7 +17,11 @@ export const WalletAssetsValue = memo(function WalletAssetsValue({ account, ...p
 
     return (
         <ProgressiveText {...props} loading={isLoading}>
-            <FormattedCurrency value={value} formatter={formatCurrency} />
+            <FormattedCurrency
+                value={value}
+                formatter={formatCurrency}
+                options={{ onlyRemainTwoOrZeroDecimal: true }}
+            />
         </ProgressiveText>
     )
 })
diff --git a/packages/plugins/Collectible/src/SiteAdaptor/Shared/PriceCard.tsx b/packages/plugins/Collectible/src/SiteAdaptor/Shared/PriceCard.tsx
@@ -73,7 +73,7 @@ export function PriceCard(props: PriceCardProps) {
             </div>
         ) : null
 
-    const priceUSD = formatCurrency(topListing?.price?.usd ?? 0, 'USD', { onlyRemainTwoDecimal: true })
+    const priceUSD = formatCurrency(topListing?.price?.usd ?? 0, 'USD', { onlyRemainTwoOrZeroDecimal: true })
 
     return (
         <div className={classes.wrapper}>

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/ConfirmDialog.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/ConfirmDialog.tsx
@@ -59,7 +59,9 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
 
     const gasFeeUSD = useMemo(() => {
         if (!gasFee) return '0'
-        return formatCurrency(formatWeiToEther(gasFee).times(nativeTokenPrice), 'USD', { onlyRemainTwoDecimal: true })
+        return formatCurrency(formatWeiToEther(gasFee).times(nativeTokenPrice), 'USD', {
+            onlyRemainTwoOrZeroDecimal: true,
+        })
     }, [gasFee, nativeTokenPrice])
 
     const isGreatThanSlippageSetting = useGreatThanSlippageSetting(trade?.priceImpact)
@@ -71,7 +73,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
     const lostValue = formatCurrency(
         multipliedBy(inputTokenPrice ?? 0, leftShift(lostTokenValue, trade.inputToken?.decimals ?? 0)),
         '',
-        { onlyRemainTwoDecimal: true },
+        { onlyRemainTwoOrZeroDecimal: true },
     )
 
     const handleOpenPriceImpactDialog = useCallback(() => {

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/TraderInfo.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/TraderInfo.tsx
@@ -47,7 +47,7 @@ export const TraderInfo = memo<TraderInfoProps>(({ trade, gasPrice, isBest, onCl
 
     const gasFeeValueUSD = useMemo(() => {
         if (!gasFee) return ZERO.toString()
-        return formatCurrency(formatWeiToEther(gasFee).times(tokenPrice), 'USD', { onlyRemainTwoDecimal: true })
+        return formatCurrency(formatWeiToEther(gasFee).times(tokenPrice), 'USD', { onlyRemainTwoOrZeroDecimal: true })
     }, [gasFee, tokenPrice])
 
     const isGreatThanSlippageSetting = useGreatThanSlippageSetting(trade.value?.value?.priceImpact)

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/components/ConfirmDialogUI.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/components/ConfirmDialogUI.tsx
@@ -287,7 +287,7 @@ export const ConfirmDialogUI = memo<ConfirmDialogUIProps>(
 
         const { inputAmount, outputAmount } = cacheTrade
         const swapUsdPrice = formatCurrency(inputAmount.shiftedBy(-inputToken.decimals).times(inputTokenPrice), 'USD', {
-            onlyRemainTwoDecimal: true,
+            onlyRemainTwoOrZeroDecimal: true,
         })
         return (
             <InjectedDialog

diff --git a/packages/plugins/Trader/src/SiteAdaptor/trader/components/InputTokenPanelUI.tsx b/packages/plugins/Trader/src/SiteAdaptor/trader/components/InputTokenPanelUI.tsx
@@ -180,7 +180,7 @@ export const InputTokenPanelUI = memo<InputTokenPanelUIProps>(
             [onAmountChange, RE_MATCH_FRACTION_AMOUNT, RE_MATCH_WHOLE_AMOUNT],
         )
 
-        const priceUSD = formatCurrency(tokenValueUSD, 'USD', { onlyRemainTwoDecimal: true })
+        const priceUSD = formatCurrency(tokenValueUSD, 'USD', { onlyRemainTwoOrZeroDecimal: true })
 
         return (
             <InputBase

diff --git a/packages/shared/src/UI/components/AddCollectibles/index.tsx b/packages/shared/src/UI/components/AddCollectibles/index.tsx
@@ -180,7 +180,7 @@ export const AddCollectibles = memo(function AddCollectibles(props: AddCollectib
         queries: tokenIds.map((tokenId) => ({
             enabled: isValid,
             queryKey: ['nft-asset', pluginID, chainId, address, tokenId],
-            queryFn: () => hub.getNonFungibleAsset(address, tokenId, { chainId }),
+            queryFn: () => hub.getNonFungibleAsset(address, tokenId, { chainId, account }),
         })),
     })
     const loadingAssets = assetsQueries.every((x) => x.isLoading)

diff --git a/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx b/packages/shared/src/UI/components/SelectGasSettingsToolbar/index.tsx
@@ -302,7 +302,7 @@ export function SelectGasSettingsToolbarUI({
         if (!gasFee || gasFee.isZero()) return '$0'
         if (!currentGasCurrency || isSameAddress(nativeToken?.address, currentGasCurrency)) {
             return formatCurrency(formatWeiToEther(gasFee).times(nativeTokenPrice), 'USD', {
-                onlyRemainTwoDecimal: true,
+                onlyRemainTwoOrZeroDecimal: true,
             })
         }
 
@@ -311,7 +311,7 @@ export function SelectGasSettingsToolbarUI({
         return formatCurrency(
             new BigNumber(formatBalance(gasFee, currencyToken?.decimals)).times(currencyTokenPrice),
             'USD',
-            { onlyRemainTwoDecimal: true },
+            { onlyRemainTwoOrZeroDecimal: true },
         )
     }, [
         gasFee,

diff --git a/packages/shared/src/UI/components/TokenValue/index.tsx b/packages/shared/src/UI/components/TokenValue/index.tsx
@@ -49,7 +49,7 @@ export function TokenValue({ className, token, amount, ...rest }: Props) {
 
     const priceUSD = useMemo(() => {
         if (!tokenPrice || !amount) return
-        return formatCurrency(new BigNumber(amount).times(tokenPrice), 'USD', { onlyRemainTwoDecimal: true })
+        return formatCurrency(new BigNumber(amount).times(tokenPrice), 'USD', { onlyRemainTwoOrZeroDecimal: true })
     }, [amount, tokenPrice])
 
     return amount && token ? (