From 05f0a3af0c4a5f136952e4c08a422b53d5c22cb9 Mon Sep 17 00:00:00 2001 From: Wukong Sun Date: Fri, 22 Nov 2024 18:22:36 +0800 Subject: [PATCH] chore: remove token manage from token picker (#11943) --- .../FungibleTokenList/FungibleTokenItem.tsx | 94 ++------------ .../FungibleTokenList/ManageTokenListBar.tsx | 36 ------ .../UI/components/FungibleTokenList/index.tsx | 116 ++---------------- .../UI/components/FungibleTokenList/type.ts | 4 - .../SelectFungibleTokenDialog.tsx | 27 ++-- .../modals/SelectFungibleTokenModal/index.tsx | 4 - 6 files changed, 28 insertions(+), 253 deletions(-) delete mode 100644 packages/shared/src/UI/components/FungibleTokenList/ManageTokenListBar.tsx delete mode 100644 packages/shared/src/UI/components/FungibleTokenList/type.ts diff --git a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx index e6771e11128e..e12f8d74dc98 100644 --- a/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx +++ b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx @@ -1,19 +1,15 @@ -import { memo, useMemo } from 'react' -import { Box, Link, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material' -import { formatBalance, type FungibleToken } from '@masknet/web3-shared-base' -import { NetworkPluginID } from '@masknet/shared-base' -import { TokenIcon } from '../TokenIcon/index.js' import { Icons } from '@masknet/icons' -import { useFungibleTokenBalance, useNetwork, useNetworkContext, useWeb3Utils } from '@masknet/web3-hooks-base' +import { NetworkPluginID } from '@masknet/shared-base' +import { LoadingBase, makeStyles } from '@masknet/theme' import type { Web3Helper } from '@masknet/web3-helpers' -import { makeStyles, LoadingBase, ActionButton } from '@masknet/theme' +import { useFungibleTokenBalance, useNetwork, useNetworkContext, useWeb3Utils } from '@masknet/web3-hooks-base' +import { formatBalance } from '@masknet/web3-shared-base' +import { Box, Link, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material' +import { memo, useMemo } from 'react' import { useSharedTrans } from '../../../locales/index.js' -import { TokenListMode } from './type.js' -import { SettingSwitch } from '../SettingSwitch/index.js' -import { useTokenBlocked, useTokenTrusted } from './useTokenBlocked.js' import { FormattedBalance } from '../../wallet/index.js' import { DotLoading, NetworkIcon } from '../index.js' -import { useAsyncFn } from 'react-use' +import { TokenIcon } from '../TokenIcon/index.js' const useStyles = makeStyles()((theme) => ({ icon: { @@ -94,17 +90,7 @@ const useStyles = makeStyles()((theme) => ({ })) export const getFungibleTokenItem = ( - getSource: (address: string) => 'personal' | 'official' | 'external' | 'official-native', isSelected: (address: string, chainId: Web3Helper.ChainIdAll) => boolean, - mode: TokenListMode, - addOrRemoveTokenToLocal: ( - token: FungibleToken, - strategy: 'add' | 'remove', - ) => Promise, - trustOrBlockTokenToLocal: ( - token: FungibleToken, - strategy: 'trust' | 'block', - ) => Promise, isHiddenChainIcon?: boolean, isCustomToken?: boolean, ) => { @@ -118,68 +104,12 @@ export const getFungibleTokenItem = ( const { chainId, address, name, symbol, decimals, logoURL, balance } = token - const isBlocked = useTokenBlocked(address) - const isTrust = useTokenTrusted(address, token.chainId) - const { pluginID } = useNetworkContext() const network = useNetwork(pluginID, chainId) - - const source = useMemo(() => getSource(address), [getSource, address]) - const selected = useMemo(() => isSelected(address, chainId), [isSelected, address, chainId]) - - const [{ loading: onAddOrRemoveTokenToLocalLoading }, onAddOrRemoveTokenToLocal] = useAsyncFn( - async (event: React.MouseEvent, strategy: 'add' | 'remove') => { - event.stopPropagation() - if (token) await addOrRemoveTokenToLocal(token, strategy) - }, - [token, addOrRemoveTokenToLocal], - ) - - const [{ loading: onTrustOrBlockTokenToLocalLoading }, onTrustOrBlockTokenToLocal] = useAsyncFn( - async (event: React.ChangeEvent) => { - event.stopPropagation() - if (token) await trustOrBlockTokenToLocal(token, event.target.checked ? 'trust' : 'block') - }, - [token, trustOrBlockTokenToLocal], - ) - - const explorerLink = useMemo(() => { - return Utils.explorerResolver.fungibleTokenLink(token.chainId, token.address) - }, [token.address, token.chainId, Utils.explorerResolver.fungibleTokenLink]) + const selected = isSelected(address, chainId) + const explorerLink = Utils.explorerResolver.fungibleTokenLink(token.chainId, token.address) const action = useMemo(() => { - if (mode === TokenListMode.Manage) { - if (source === 'personal') - return onAddOrRemoveTokenToLocal(e, 'remove')} size={24} /> - return ( - <> - {isCustomToken ? - onAddOrRemoveTokenToLocal(e, 'add')}> - {t.import()} - - : { - event.stopPropagation() - event.preventDefault() - await onTrustOrBlockTokenToLocal(event) - }} - size="small" - checked={!isBlocked} - /> - } - - ) - } return ( {balance === undefined ? @@ -195,7 +125,7 @@ export const getFungibleTokenItem = ( } ) - }, [balance, decimals, isBlocked, source, mode, isTrust]) + }, [balance, decimals]) const { data: tokenBalance, isPending: isLoadingTokenBalance } = useFungibleTokenBalance( NetworkPluginID.PLUGIN_EVM, @@ -212,8 +142,8 @@ export const getFungibleTokenItem = ( key={address} button className={`${classes.list} dashboard token-list`} - onClick={mode === TokenListMode.List ? () => onSelect(token) : undefined} - disabled={!!(selected && mode === TokenListMode.List)}> + onClick={() => onSelect(token)} + disabled={selected}> ({ - root: { - padding: theme.spacing(2.25, 0), - margin: theme.spacing(2, -2, -2, -2), - boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.05)', - backdropFilter: 'blur(16px)', - borderRadius: theme.spacing(0, 0, 1.5, 1.5), - }, - target: { - cursor: 'pointer', - fontWeight: 700, - }, -})) - -interface ManageTokenListBarProps { - onClick(): void -} - -export const ManageTokenListBar = memo(({ onClick }) => { - const t = useSharedTrans() - const { classes } = useStyles() - return ( - - - - {t.erc20_manage_token_list()} - - - ) -}) diff --git a/packages/shared/src/UI/components/FungibleTokenList/index.tsx b/packages/shared/src/UI/components/FungibleTokenList/index.tsx index f183ac5b29e7..738ec3e15ab6 100644 --- a/packages/shared/src/UI/components/FungibleTokenList/index.tsx +++ b/packages/shared/src/UI/components/FungibleTokenList/index.tsx @@ -1,9 +1,6 @@ -import { useCallback, useEffect, useMemo, useState, useTransition } from 'react' -import { uniqBy } from 'lodash-es' import { EMPTY_LIST, EMPTY_OBJECT, type NetworkPluginID } from '@masknet/shared-base' import { SearchableList, makeStyles, type MaskFixedSizeListProps, type MaskTextFieldProps } from '@masknet/theme' import type { Web3Helper } from '@masknet/web3-helpers' -import { AddressType } from '@masknet/web3-shared-evm' import { useAccount, useAddressType, @@ -17,7 +14,6 @@ import { useNetworkContext, useTrustedFungibleTokens, useWeb3Utils, - useWeb3State, } from '@masknet/web3-hooks-base' import { CurrencyType, @@ -28,13 +24,12 @@ import { toZero, type FungibleToken, } from '@masknet/web3-shared-base' -import { Box, Stack } from '@mui/material' +import { AddressType } from '@masknet/web3-shared-evm' +import { Stack } from '@mui/material' +import { uniqBy } from 'lodash-es' +import { useCallback, useEffect, useMemo, useState, useTransition } from 'react' import { useSharedTrans } from '../../../locales/index.js' import { getFungibleTokenItem } from './FungibleTokenItem.js' -import { ManageTokenListBar } from './ManageTokenListBar.js' -import { TokenListMode } from './type.js' - -export * from './type.js' const SEARCH_KEYS = ['address', 'symbol', 'name'] @@ -55,12 +50,7 @@ export interface FungibleTokenListProps FixedSizeListProps?: Partial SearchTextFieldProps?: MaskTextFieldProps - enableManage?: boolean isHiddenChainIcon?: boolean - - setMode?(mode: TokenListMode): void - - mode?: TokenListMode } const useStyles = makeStyles<{}>()(() => ({ @@ -85,10 +75,7 @@ export function FungibleTokenList(props: FungibleToke FixedSizeListProps, selectedChainId, selectedTokens = EMPTY_LIST, - enableManage = false, isHiddenChainIcon = true, - setMode, - mode = TokenListMode.List, } = props const t = useSharedTrans() @@ -97,7 +84,6 @@ export function FungibleTokenList(props: FungibleToke const { pluginID } = useNetworkContext(props.pluginID) const account = useAccount(pluginID) const chainId = useChainId(pluginID, props.chainId) - const { Token } = useWeb3State<'all'>(pluginID) const Utils = useWeb3Utils(pluginID) const { data: fungibleTokens = EMPTY_LIST } = useFungibleTokensFromTokenList(pluginID, { @@ -143,41 +129,7 @@ export function FungibleTokenList(props: FungibleToke { account, chainId }, ) - // To avoid SearchableList re-render, reduce the dep - const sortedFungibleTokensForManage = useMemo(() => { - if (mode === TokenListMode.List) return EMPTY_LIST - const isTrustedToken = currySameAddress(trustedFungibleTokens.map((x) => x.address)) - - return uniqBy([...(nativeToken ? [nativeToken] : []), ...fungibleTokens, ...trustedFungibleTokens], (x) => - x.address.toLowerCase(), - ).sort((a, z) => { - // trusted token - if (isTrustedToken(a.address)) return -1 - if (isTrustedToken(z.address)) return 1 - - const isNativeTokenA = isSameAddress(a.address, Utils.getNativeTokenAddress(a.chainId)) - if (isNativeTokenA) return -1 - const isNativeTokenZ = isSameAddress(z.address, Utils.getNativeTokenAddress(z.chainId)) - if (isNativeTokenZ) return 1 - - // mask token with position value - const isMaskTokenA = isSameAddress(a.address, Utils.getMaskTokenAddress(a.chainId)) - if (isMaskTokenA) return -1 - const isMaskTokenZ = isSameAddress(z.address, Utils.getMaskTokenAddress(z.chainId)) - if (isMaskTokenZ) return 1 - - if (z.rank && (!a.rank || a.rank - z.rank > 0)) return 1 - if (a.rank && (!z.rank || z.rank - a.rank > 0)) return -1 - - // alphabet - if (a.name !== z.name) return a.name < z.name ? -1 : 1 - - return 0 - }) - }, [chainId, trustedFungibleTokens, fungibleTokens, nativeToken, mode]) - const sortedFungibleTokensForList = useMemo(() => { - if (mode === TokenListMode.Manage) return EMPTY_LIST const fungibleAssetsTable = Object.fromEntries( fungibleAssets.filter((x) => x.chainId === chainId).map((x) => [x.address, x]), ) @@ -239,7 +191,7 @@ export function FungibleTokenList(props: FungibleToke return 0 }) - }, [mode, chainId, fungibleAssets, trustedFungibleTokens, filteredFungibleTokens, fungibleTokensBalance]) + }, [chainId, fungibleAssets, trustedFungibleTokens, filteredFungibleTokens, fungibleTokensBalance]) // #region add token by address const [keyword, setKeyword] = useState('') @@ -269,14 +221,6 @@ export function FungibleTokenList(props: FungibleToke chainId, }) - const isCustomToken = useMemo( - () => - !sortedFungibleTokensForManage.find( - (x) => isSameAddress(x.address, searchedToken?.address) && searchedToken?.chainId === x.chainId, - ) && Boolean(searchedToken), - [sortedFungibleTokensForManage, searchedToken], - ) - const { data: tokenBalance = '' } = useFungibleTokenBalance(pluginID, searchedToken?.address, { chainId, account, @@ -285,49 +229,14 @@ export function FungibleTokenList(props: FungibleToke const itemRender = useMemo(() => { return getFungibleTokenItem( - (address) => { - if (isSameAddress(nativeToken?.address, address)) return 'official-native' - - const inOfficialList = fungibleTokens.some((x) => isSameAddress(x.address, address)) - if (inOfficialList) return 'official' - - const inPersonaList = trustedFungibleTokens.some((x) => isSameAddress(x.address, address)) - if (inPersonaList) return 'personal' - - return 'external' - }, (address, tokenChainId) => { if (tokenChainId !== selectedChainId) return false return selectedTokens.some((x) => isSameAddress(x, address)) }, - mode, - async ( - token: FungibleToken, - strategy: 'add' | 'remove', - ) => { - if (strategy === 'add') await Token?.addToken?.(account, token) - if (strategy === 'remove') await Token?.removeToken?.(account, token) - }, - async ( - token: FungibleToken, - strategy: 'trust' | 'block', - ) => { - if (strategy === 'trust') await Token?.trustToken?.(account, token) - if (strategy === 'block') await Token?.blockToken?.(account, token) - }, isHiddenChainIcon, - isCustomToken, + false, ) - }, [ - chainId, - nativeToken?.address, - selectedTokens, - mode, - trustedFungibleTokens, - fungibleTokens, - isCustomToken, - isHiddenChainIcon, - ]) + }, [selectedTokens, isHiddenChainIcon]) const SearchFieldProps = useMemo( () => ({ placeholder: t.erc20_token_list_placeholder(), @@ -360,10 +269,8 @@ export function FungibleTokenList(props: FungibleToke isAddressNotContract ? EMPTY_LIST : searchedToken && isSameAddress(searchedToken.address, searchedTokenAddress) ? // balance field work for case: user search someone token by contract and whitelist is empty. - [{ ...searchedToken, balance: tokenBalance, isCustomToken }] - : mode === TokenListMode.List ? - sortedFungibleTokensForList - : sortedFungibleTokensForManage + [{ ...searchedToken, balance: tokenBalance, isCustomToken: false }] + : sortedFungibleTokensForList } searchKey={SEARCH_KEYS} disableSearch={!!props.disableSearch} @@ -373,11 +280,6 @@ export function FungibleTokenList(props: FungibleToke FixedSizeListProps={FixedSizeListProps} SearchFieldProps={SearchFieldProps} /> - {mode === TokenListMode.List && enableManage ? - - setMode?.(TokenListMode.Manage)} /> - - : null} ) } diff --git a/packages/shared/src/UI/components/FungibleTokenList/type.ts b/packages/shared/src/UI/components/FungibleTokenList/type.ts deleted file mode 100644 index 3a5ef0520df7..000000000000 --- a/packages/shared/src/UI/components/FungibleTokenList/type.ts +++ /dev/null @@ -1,4 +0,0 @@ -export enum TokenListMode { - List = 'list', - Manage = 'manage', -} diff --git a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx index aa6a7e90e795..56b5cbf3d053 100644 --- a/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx +++ b/packages/shared/src/UI/modals/SelectFungibleTokenModal/SelectFungibleTokenDialog.tsx @@ -1,3 +1,4 @@ +import { useActivatedPluginSiteAdaptor } from '@masknet/plugin-infra/content-script' import { EMPTY_LIST, EnhanceableSite, NetworkPluginID, type PluginID } from '@masknet/shared-base' import { useRowSize } from '@masknet/shared-base-ui' import { makeStyles, MaskColorVar } from '@masknet/theme' @@ -6,19 +7,16 @@ import { useNativeTokenAddress, useNetworkContext, useNetworks } from '@masknet/ import type { FungibleToken } from '@masknet/web3-shared-base' import { ChainId } from '@masknet/web3-shared-evm' import { DialogContent, inputClasses, type Theme, useMediaQuery } from '@mui/material' -import { useMemo, useState } from 'react' +import { useMemo } from 'react' import { useSharedTrans } from '../../../locales/index.js' -import { TokenListMode } from '../../components/FungibleTokenList/type.js' import { FungibleTokenList, SelectNetworkSidebar } from '../../components/index.js' import { InjectedDialog, useBaseUIRuntime } from '../../contexts/index.js' -import { useActivatedPluginSiteAdaptor } from '@masknet/plugin-infra/content-script' interface StyleProps { compact: boolean - isList: boolean } -const useStyles = makeStyles()((theme, { compact, isList }) => ({ +const useStyles = makeStyles()((theme, { compact }) => ({ container: { display: 'flex', flex: 1, @@ -28,7 +26,7 @@ const useStyles = makeStyles()((theme, { compact, isList }) => ({ }, sidebarContainer: { width: 27, - height: isList ? 486 : undefined, + height: 486, }, content: { ...(compact ? { minWidth: 552 } : {}), @@ -56,7 +54,6 @@ const useStyles = makeStyles()((theme, { compact, isList }) => ({ interface SelectFungibleTokenDialogProps { open: boolean - enableManage?: boolean networkPluginID?: T pluginID?: PluginID chainId?: Web3Helper.Definition[T]['ChainId'] @@ -86,16 +83,14 @@ export function SelectFungibleTokenDialog({ selectedChainId, selectedTokens = EMPTY_LIST, title, - enableManage = true, onClose, setChainId, }: SelectFungibleTokenDialogProps) { const t = useSharedTrans() const { networkIdentifier } = useBaseUIRuntime() - const [mode, setMode] = useState(TokenListMode.List) const compact = networkIdentifier === EnhanceableSite.Minds const { pluginID: currentPluginID } = useNetworkContext(networkPluginID) - const { classes } = useStyles({ compact, isList: mode === TokenListMode.List }) + const { classes } = useStyles({ compact }) const isMdScreen = useMediaQuery((theme) => theme.breakpoints.down('md')) const allNetworks = useNetworks(NetworkPluginID.PLUGIN_EVM, true) const plugin = useActivatedPluginSiteAdaptor(pluginID, 'any') @@ -120,14 +115,9 @@ export function SelectFungibleTokenDialog({ titleBarIconStyle="back" open={open} onClose={() => { - mode === TokenListMode.List ? onClose(null) : setMode(TokenListMode.List) + onClose(null) }} - title={ - title ? title - : mode === TokenListMode.Manage ? - t.manage_token_list() - : t.select_token() - }> + title={title ? title : t.select_token()}>
>((props, ref) => { - const [enableManage, setEnableManage] = useState() const [networkPluginID, setNetworkPluginID] = useState() const [pluginID, setPluginID] = useState() const [chainId, setChainId] = useState() @@ -40,7 +38,6 @@ export const SelectFungibleTokenModal = forwardRef< const [open, dispatch] = useSingletonModal(ref, { onOpen(props) { - setEnableManage(props.enableManage) setNetworkPluginID(props.networkPluginID) setPluginID(props.pluginID) setChainId(props.chainId) @@ -59,7 +56,6 @@ export const SelectFungibleTokenModal = forwardRef< return (