refactor: collectible (#6326)

* refactor: collectible

* refactor: opensea sdk

* fix: build error

* chore: add useWeb3Provider

* refactor: useOpensea

packages/mask/shared-ui/locales/en-US.json

@@ -88,6 +88,7 @@
     "copied": "Copied",
     "daily": "Daily",
     "dashboard_no_collectible_found": "No collectible found.",
+    "dashboard_collectible_menu_all": "All ({{count}})",
     "days": "Every {{days}} days",
     "decrypted_postbox_add_recipients": "Append recipients",
     "decrypted_postbox_decrypting": "Mask decrypting…",
@@ -639,6 +640,8 @@
     "plugin_collectible_no_history": "No History",
     "plugin_collectible_ensure_unreviewed_item": "Please ensure unreviewed item",
     "plugin_collectible_check_tos_document": "Please check ToS document",
+    "plugin_collectible_approved_by_opensea": "By checking this box, I acknowledge that this item has not been reviewed or approved by OpenSea.",
+    "plugin_collectible_insufficient_offer": "Insufficient Offer",
     "plugin_collectible_not_been_reviewed_by_opensea": "This item has not been reviewed by OpenSea.",
     "plugin_collectible_reviewed_tips": "You should proceed with extra caution. Anyone can create a digital item on a blockchain with any\n                        name, including fake versions of existing items. Please take extra caution and do your research\n                        when interacting with this item to ensure it's what it chains to be.",
     "plugin_collectible_total": "Total",
@@ -684,6 +687,7 @@
     "plugin_collectible_invalid_reserve_price": "Invalid reserve price",
     "plugin_collectible_place_a_bid": "Place a Bid",
     "plugin_collectible_make_an_offer": "Make an Offer",
+    "plugin_collectible_legal_text": "By checking this box, I agree to OpenSea's <terms>Terms of Service</terms>.",
     "plugin_collectibles_name": "Collectibles",
     "plugin_collectibles_description": "Display specific information of collectibles in OpenSea and Rarible, make an offer directly on social media.",
     "plugin_cryptoartai_description_title": "Description",
@@ -782,6 +786,7 @@
     "plugin_dhedge_insufficient_balance": "Insufficient {{symbol}} balance",
     "plugin_dhedge_pool_not_found": "Invalid pool address.",
     "plugin_dhedge_smt_wrong": "Something went wrong!",
+    "popups_wallet_disconnect_success": "Wallet disconnect successfully",
     "plugin_pooltogether_tab_pools": "Pools",
     "plugin_pooltogether_name": "PoolTogether",
     "plugin_pooltogether_description": "Participate in lossless lottery on Twitter.",

packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx

@@ -96,7 +96,6 @@ const useStyles = makeStyles()((theme) => ({
 interface CurrentWalletBox {
     wallet: Account<ChainId> & {
         providerType: ProviderType
-        address?: string
     }
     walletName?: string
     changeWallet: () => void
@@ -110,9 +109,9 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
     const providerDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, providerType)
     const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM)
     const frontAccount = useAccount(NetworkPluginID.PLUGIN_EVM)
-    const account = notInPop ? frontAccount : wallet.address
+    const account = notInPop ? frontAccount : wallet.account
     const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) ?? {}
-    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet.address)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet.account)
     return account ? (
         <section className={classes.currentAccount}>
             <WalletIcon

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

@@ -73,7 +73,7 @@ const ConnectWalletPage = memo(() => {
     ) as Web3Helper.Web3ProviderDescriptor<NetworkPluginID.PLUGIN_EVM>[]
 
     const { ProviderIconClickBait } = useWeb3UI(NetworkPluginID.PLUGIN_EVM).SelectProviderDialog ?? {}
-    const { Connection: Protocol } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const { Connection } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     const onClick = useCallback(
         async (
@@ -89,7 +89,7 @@ const ConnectWalletPage = memo(() => {
                 return
             }
 
-            const connection = await Protocol?.getConnection?.({
+            const connection = await Connection?.getConnection?.({
                 chainId: network.chainId,
                 providerType: provider.type,
             })

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

@@ -35,8 +35,8 @@ import {
     useChainId,
     useFungibleTokenBalance,
     useWallet,
-    useWeb3State,
     useWeb3Connection,
+    useWeb3Hub,
 } from '@masknet/plugin-infra/web3'
 import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
 
@@ -160,7 +160,7 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
     const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const web3State = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const hub = useWeb3Hub(NetworkPluginID.PLUGIN_EVM)
     const [minGasLimitContext, setMinGasLimitContext] = useState(0)
     const navigate = useNavigate()
 
@@ -245,14 +245,14 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
 
     // #region Set default gas price
     useAsync(async () => {
-        const gasOptions = await web3State.GasOptions?.getGasOptions?.(chainId)
+        const gasOptions = await hub?.getGasOptions?.(chainId)
 
         const gasPrice = methods.getValues('gasPrice')
         if (gasOptions && !gasPrice) {
             const gasPrice = new BigNumber(gasOptions[GasOptionType.FAST].suggestedMaxFeePerGas)
             methods.setValue('gasPrice', formatWeiToGwei(gasPrice).toString())
         }
-    }, [methods.setValue, methods.getValues, chainId, web3State])
+    }, [methods.setValue, methods.getValues, chainId, hub])
     // #endregion
 
     // #region Get min gas limit with amount and recipient address

packages/mask/src/plugin-infra/register.js

@@ -19,7 +19,7 @@ import '../plugins/ITO'
 import '../plugins/Gitcoin'
 import '../plugins/Snapshot'
 import '../plugins/Savings'
-// import '../plugins/Collectible'
+import '../plugins/Collectible'
 // import '../plugins/External'
 import '../plugins/Transak'
 import '../plugins/Polls'

packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx

@@ -1,9 +1,9 @@
+import { useMemo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { hasNativeAPI } from '../../../../shared/native-rpc'
-import { useMemo } from 'react'
 
 const useStyles = makeStyles()((theme) => ({
     body: {
@@ -57,16 +57,16 @@ export function ArticleTab(props: ArticleTabProps) {
 
     return useMemo(() => {
         if (!asset.value) return null
+        // TODO: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly.
         const resourceUrl = hasNativeAPI
-            ? asset.value.image_url || asset.value.animation_url
-            : asset.value.animation_url || asset.value.image_url
+            ? asset.value.metadata?.imageURL || asset.value.metadata?.mediaURL
+            : asset.value.metadata?.mediaURL || asset.value.metadata?.imageURL
         return (
             <CollectibleTab>
                 <div className={classes.body}>
-                    {/* Todo: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly.  */}
                     <NFTCardStyledAssetPlayer url={resourceUrl} classes={classes} isNative={hasNativeAPI} />
                 </div>
             </CollectibleTab>
         )
-    }, [asset.value?.animation_url, asset.value?.image_url, classes])
+    }, [asset.value?.metadata?.mediaURL, asset.value?.metadata?.imageURL, classes])
 }

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

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback } from 'react'
+import type { ReactElement } from 'react'
 import { Box, Button, CardActions, CardContent, CardHeader, Link, Paper, Tab, Tabs, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { Trans } from 'react-i18next'
@@ -20,14 +20,14 @@ import { CollectibleCard } from './CollectibleCard'
 import { CollectibleProviderIcon } from './CollectibleProviderIcon'
 import { CollectibleTab } from '../types'
 import { resolveAssetLinkOnCurrentProvider, resolveCollectibleProviderName } from '../pipes'
-import { ActionBar } from './ActionBar'
+import { ActionBar } from './OpenSea/ActionBar'
 import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
 import { getEnumAsArray } from '@dimensiondev/kit'
 import { FootnoteMenu, FootnoteMenuOption } from '../../Trader/SNSAdaptor/trader/FootnoteMenu'
 import { LoadingAnimation } from '@masknet/shared'
 import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 import { useChainId } from '@masknet/plugin-infra/web3'
-import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { CurrencyType, NetworkPluginID, SourceType } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -129,22 +129,22 @@ export function Collectible(props: CollectibleProps) {
     const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { token, asset, provider, setProvider, tabIndex, setTabIndex } = CollectibleState.useContainer()
 
-    // #region sync with settings
-    const collectibleProviderOptions = getEnumAsArray(NonFungibleAssetProvider)
-    const onDataProviderChange = useCallback((option: FootnoteMenuOption) => {
-        setProvider(option.value as NonFungibleAssetProvider)
-    }, [])
-    // #endregion
+    // // #region sync with settings
+    // const collectibleProviderOptions = getEnumAsArray(NonFungibleAssetProvider)
+    // const onDataProviderChange = useCallback((option: FootnoteMenuOption) => {
+    //     setProvider(option.value as NonFungibleAssetProvider)
+    // }, [])
+    // // #endregion
 
-    // #region provider switcher
-    const CollectibleProviderSwitcher = useSwitcher(
-        provider,
-        setProvider,
-        getEnumAsArray(NonFungibleAssetProvider).map((x) => x.value),
-        resolveCollectibleProviderName,
-        true,
-    )
-    // #endregion
+    // // #region provider switcher
+    // const CollectibleProviderSwitcher = useSwitcher(
+    //     provider,
+    //     setProvider,
+    //     getEnumAsArray(NonFungibleAssetProvider).map((x) => x.value),
+    //     resolveCollectibleProviderName,
+    //     true,
+    // )
+    // // #endregion
 
     if (!asset.value || !token)
         return (
@@ -153,7 +153,7 @@ export function Collectible(props: CollectibleProps) {
                     Failed to load your collectible on {resolveCollectibleProviderName(provider)}.
                 </Typography>
                 <Box alignItems="center" sx={{ padding: 1, display: 'flex', flexDirection: 'row', width: '100%' }}>
-                    <Box sx={{ flex: 1, padding: 1 }}> {CollectibleProviderSwitcher}</Box>
+                    {/* <Box sx={{ flex: 1, padding: 1 }}> {CollectibleProviderSwitcher}</Box> */}
                     <Box sx={{ flex: 1, padding: 1 }}>
                         <Button
                             variant="contained"
@@ -194,20 +194,17 @@ export function Collectible(props: CollectibleProps) {
     }
 
     const _asset = asset.value
-    const endDate = _asset.end_time
+    const endDate = _asset.auction?.endAt
     return (
         <>
             <CollectibleCard classes={{ root: classes.root }}>
                 <CardHeader
                     avatar={
                         <LinkingAvatar
-                            href={_asset.collectionLinkUrl}
-                            title={_asset.owner?.user?.username ?? _asset.owner?.address ?? ''}
+                            href={_asset.link ?? ''}
+                            title={_asset.owner?.nickname ?? _asset.owner?.address ?? ''}
                             src={
-                                _asset.collection?.image_url ??
-                                _asset.creator?.profile_img_url ??
-                                _asset.owner?.profile_img_url ??
-                                ''
+                                _asset.collection?.iconURL ?? _asset.creator?.avatarURL ?? _asset.owner?.avatarURL ?? ''
                             }
                         />
                     }
@@ -224,34 +221,37 @@ export function Collectible(props: CollectibleProps) {
                                         token.tokenId,
                                         provider,
                                     )}>
-                                    {_asset.name ?? ''}
+                                    {_asset.metadata?.name ?? ''}
                                 </Link>
                             ) : (
-                                _asset.name ?? ''
+                                _asset.metadata?.name ?? ''
                             )}
-                            {_asset.safelist_request_status === 'verified' ? (
+                            {_asset.collection?.verified ? (
                                 <VerifiedUserIcon color="primary" fontSize="small" sx={{ marginLeft: 0.5 }} />
                             ) : null}
                         </Typography>
                     }
                     subheader={
                         <>
-                            {_asset.description ? (
+                            {_asset.metadata?.description ? (
                                 <Box display="flex" alignItems="center">
                                     <Typography className={classes.subtitle} component="div" variant="body2">
-                                        <Markdown classes={{ root: classes.markdown }} content={_asset.description} />
+                                        <Markdown
+                                            classes={{ root: classes.markdown }}
+                                            content={_asset.metadata.description}
+                                        />
                                     </Typography>
                                 </Box>
                             ) : null}
 
-                            {_asset?.current_price ? (
+                            {_asset?.price?.[CurrencyType.USD] ? (
                                 <Box display="flex" alignItems="center" sx={{ marginTop: 1 }}>
                                     <Typography className={classes.description} component="span">
                                         <Trans
                                             i18nKey="plugin_collectible_description"
                                             values={{
-                                                price: _asset?.current_price,
-                                                symbol: _asset?.current_symbol,
+                                                price: _asset?.price[CurrencyType.USD],
+                                                symbol: CurrencyType.USD,
                                             }}
                                         />
                                     </Typography>
@@ -275,19 +275,13 @@ export function Collectible(props: CollectibleProps) {
                         }}>
                         {tabs}
                     </Tabs>
-                    <Paper className={classes.body}>
-                        {(asset.loading && (
-                            <div className={classes.loading}>
-                                <LoadingAnimation />
-                            </div>
-                        )) || <>{renderTab(tabIndex)}</>}
-                    </Paper>
+                    <Paper className={classes.body}>{renderTab(tabIndex)}</Paper>
                 </CardContent>
                 <CardActions className={classes.footer}>
                     {/* flex to make foot menu right */}
                     <div />
                     <div className={classes.footMenu}>
-                        <FootnoteMenu
+                        {/* <FootnoteMenu
                             options={collectibleProviderOptions.map((x) => ({
                                 name: (
                                     <>
@@ -301,7 +295,7 @@ export function Collectible(props: CollectibleProps) {
                             }))}
                             selectedIndex={findIndex(collectibleProviderOptions, (x) => x.value === provider)}
                             onChange={onDataProviderChange}
-                        />
+                        /> */}
                         <ArrowDropDownIcon />
                     </div>
                 </CardActions>
@@ -315,7 +309,7 @@ export function Collectible(props: CollectibleProps) {
                     </Typography>
                 </Box>
             )}
-            {provider === NonFungibleAssetProvider.OPENSEA ? <ActionBar /> : null}
+            {provider === SourceType.OpenSea ? <ActionBar /> : null}
         </>
     )
 }

packages/mask/src/plugins/Collectible/SNSAdaptor/CollectibleProviderIcon.tsx

@@ -2,8 +2,7 @@ import { makeStyles } from '@masknet/theme'
 import { OpenSeaIcon } from '../../../resources/OpenSeaIcon'
 import { RaribleIcon } from '../../../resources/RaribleIcon'
 import { ZoraIcon } from '../../../resources/ZoraIcon'
-import { unreachable } from '@dimensiondev/kit'
-import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { SourceType } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     opensea: {
@@ -26,21 +25,21 @@ const useStyles = makeStyles()({
 const NFTScanIcon = new URL('../../../resources/NFTScanIcon.png', import.meta.url).toString()
 
 export interface CollectibleProviderIconProps {
-    provider: NonFungibleAssetProvider
+    provider: SourceType
 }
 
 export function CollectibleProviderIcon(props: CollectibleProviderIconProps) {
     const { classes } = useStyles()
     switch (props.provider) {
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return <img src={NFTScanIcon} className={classes.NFTScan} />
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             return <OpenSeaIcon classes={{ root: classes.opensea }} viewBox="0 0 16 16" />
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return <RaribleIcon classes={{ root: classes.rarible }} viewBox="0 0 16 16" />
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return <ZoraIcon classes={{ root: classes.rarible }} viewBox="0 0 16 16" />
         default:
-            unreachable(props.provider)
+            return <></>
     }
 }