Skip to content

Commit

Permalink
fix: mf-4963 trusted tokens could include blocked tokens (#10405)
Browse files Browse the repository at this point in the history
  • Loading branch information
@UncleBill
UncleBill committed Aug 15, 2023
1 parent e8f9e1f commit 586d020
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 65 deletions.
97 changes: 97 additions & 0 deletions ...ages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/WalletCollections.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { CollectionList, type CollectionListProps } from '@masknet/shared'
import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
import { makeStyles } from '@masknet/theme'
import type { Web3Helper } from '@masknet/web3-helpers'
import { useBlockedNonFungibleTokens, useTrustedNonFungibleTokens } from '@masknet/web3-hooks-base'
import { Typography } from '@mui/material'
import { forwardRef, memo, useCallback, useMemo } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import urlcat from 'urlcat'
import { useI18N } from '../../../../../../utils/index.js'
import { WalletAssetTabs } from '../../type.js'
import { useParamTab } from '../../../../hook/index.js'

const gridProps = {
columns: 'repeat(auto-fill, minmax(20%, 1fr))',
gap: '8px',
}
const useStyles = makeStyles()((theme) => {
const isDark = theme.palette.mode === 'dark'
return {
importNft: {
cursor: 'pointer',
color: isDark ? theme.palette.maskColor.main : theme.palette.maskColor.highlight,
fontSize: 14,
fontWeight: 400,
textAlign: 'center',
},
}
})

interface Props {
onAddToken: (assetTab: WalletAssetTabs) => void
scrollTargetRef: CollectionListProps['scrollElementRef']
}

export const WalletCollections = memo<Props>(
forwardRef<HTMLDivElement, Props>(function WalletCollections({ onAddToken, scrollTargetRef }, ref) {
const { t } = useI18N()
const { classes } = useStyles()
const [currentTab] = useParamTab<WalletAssetTabs>(WalletAssetTabs.Tokens)
const [, setParams] = useSearchParams()
const trustedTokens = useTrustedNonFungibleTokens(NetworkPluginID.PLUGIN_EVM)
const blockedTokens = useBlockedNonFungibleTokens()
const additionalAssets = useMemo(() => {
const ids = blockedTokens.map((x) => x.id)
return ids.length ? trustedTokens.filter((x) => !ids.includes(x.id)) : trustedTokens
}, [trustedTokens, blockedTokens])
const navigate = useNavigate()
const SEARCH_KEY = 'collectionId'
const handleItemClick = useCallback(
(asset: Web3Helper.NonFungibleTokenAll) => {
const path = urlcat(PopupRoutes.CollectibleDetail, {
chainId: asset.chainId,
address: asset.address,
id: asset.tokenId,
})
navigate(path, { state: { asset } })
},
[navigate],
)
const handleCollectionChange = useCallback(
(id: string | undefined) => {
setParams(
(params) => {
if (!id) params.delete(SEARCH_KEY)
else params.set(SEARCH_KEY, id)
return params.toString()
},
{ replace: true },
)
},
[setParams],
)

const collectiblesEmptyText = (
<>
<Typography component="div">{t('do_not_see_your_nft')}</Typography>
<Typography className={classes.importNft} role="button" onClick={() => onAddToken(currentTab)}>
{t('import_nft')}
</Typography>
</>
)
return (
<CollectionList
ref={ref}
gridProps={gridProps}
disableSidebar
disableWindowScroll
scrollElementRef={scrollTargetRef}
emptyText={collectiblesEmptyText}
additionalAssets={additionalAssets}
onItemClick={handleItemClick}
onCollectionChange={handleCollectionChange}
/>
)
}),
)
72 changes: 7 additions & 65 deletions packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
import { Icons } from '@masknet/icons'
import { CollectionList, RestorableScroll, UserAssetsProvider } from '@masknet/shared'
import { RestorableScroll, UserAssetsProvider } from '@masknet/shared'
import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
import { makeStyles } from '@masknet/theme'
import type { Web3Helper } from '@masknet/web3-helpers'
import { useAccount, useChainContext, useTrustedNonFungibleTokens, useWallet } from '@masknet/web3-hooks-base'
import { useAccount, useChainContext, useWallet } from '@masknet/web3-hooks-base'
import { TabContext, TabList, TabPanel } from '@mui/lab'
import { Box, Button, Tab, Typography, styled, tabClasses, tabsClasses } from '@mui/material'
import { Box, Button, Tab, styled, tabClasses, tabsClasses } from '@mui/material'
import { memo, useCallback, useRef } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import urlcat from 'urlcat'
import { useI18N } from '../../../../../../utils/index.js'
import { useParamTab } from '../../../../hook/index.js'
import { WalletAssetTabs } from '../../type.js'
import { ActivityList } from '../ActivityList/index.js'
import { AssetsList } from '../AssetsList/index.js'

const gridProps = {
columns: 'repeat(auto-fill, minmax(20%, 1fr))',
gap: '8px',
}
import { WalletCollections } from './WalletCollections.js'

const useStyles = makeStyles()((theme) => {
const isDark = theme.palette.mode === 'dark'
Expand Down Expand Up @@ -83,13 +77,6 @@ const useStyles = makeStyles()((theme) => {
boxShadow: `0px 4px 6px 0px ${isDark ? 'rgba(0, 0, 0, 0.10)' : 'rgba(102, 108, 135, 0.10)'}`,
marginLeft: 'auto',
},
importNft: {
cursor: 'pointer',
color: isDark ? theme.palette.maskColor.main : theme.palette.maskColor.highlight,
fontSize: 14,
fontWeight: 400,
textAlign: 'center',
},
}
})

Expand Down Expand Up @@ -118,58 +105,22 @@ export const WalletAssets = memo(function WalletAssets() {
return wallet ? <WalletAssetsUI onAddToken={handleAdd} /> : null
})

export interface WalletAssetsUIProps {
interface WalletAssetsUIProps {
onAddToken: (assetTab: WalletAssetTabs) => void
}

export const WalletAssetsUI = memo<WalletAssetsUIProps>(function WalletAssetsUI({ onAddToken }) {
const { t } = useI18N()
const navigate = useNavigate()
const [params, setParams] = useSearchParams()
const [params] = useSearchParams()

const { classes } = useStyles()
const [currentTab, handleTabChange] = useParamTab<WalletAssetTabs>(WalletAssetTabs.Tokens)
const trustedTokens = useTrustedNonFungibleTokens()

const account = useAccount(NetworkPluginID.PLUGIN_EVM)
const SEARCH_KEY = 'collectionId'

const handleItemClick = useCallback(
(asset: Web3Helper.NonFungibleTokenAll) => {
const path = urlcat(PopupRoutes.CollectibleDetail, {
chainId: asset.chainId,
address: asset.address,
id: asset.tokenId,
})
navigate(path, { state: { asset } })
},
[navigate],
)
const handleCollectionChange = useCallback(
(id: string | undefined) => {
setParams(
(params) => {
if (!id) params.delete(SEARCH_KEY)
else params.set(SEARCH_KEY, id)
return params.toString()
},
{ replace: true },
)
},
[setParams],
)

const scrollTargetRef = useRef<HTMLDivElement>(null)

const collectiblesEmptyText = (
<>
<Typography component="div">{t('do_not_see_your_nft')}</Typography>
<Typography className={classes.importNft} role="button" onClick={() => onAddToken(currentTab)}>
{t('import_nft')}
</Typography>
</>
)

return (
<div className={classes.content}>
<TabContext value={currentTab}>
Expand Down Expand Up @@ -208,16 +159,7 @@ export const WalletAssetsUI = memo<WalletAssetsUIProps>(function WalletAssetsUI(
</RestorableScroll>
<TabPanel value={WalletAssetTabs.Collectibles} className={classes.tabPanel}>
<RestorableScroll scrollKey="collectibles" targetRef={scrollTargetRef}>
<CollectionList
gridProps={gridProps}
disableSidebar
disableWindowScroll
scrollElementRef={scrollTargetRef}
emptyText={collectiblesEmptyText}
additionalAssets={trustedTokens}
onItemClick={handleItemClick}
onCollectionChange={handleCollectionChange}
/>
<WalletCollections onAddToken={onAddToken} scrollTargetRef={scrollTargetRef} />
</RestorableScroll>
</TabPanel>
<RestorableScroll scrollKey="activities">
Expand Down

0 comments on commit 586d020

Please sign in to comment.