feat: an united nft service

cspell.json

@@ -354,6 +354,7 @@
         "CANFT",
         "Kodav",
         "koda",
+        "Enjin",
         "poap",
         "irss",
         "CELO"

packages/mask/.webpack/config.ts

@@ -71,7 +71,7 @@ export function createConfiguration(rawFlags: BuildFlags): Configuration {
                     '@masknet/theme': join(__dirname, '../../theme/src/'),
                     '@masknet/icons': join(__dirname, '../../icons/index.ts'),
                     '@masknet/web3-kit': join(__dirname, '../../web3-kit/src/'),
-                    '@masknet/web3-providers': join(__dirname, '../../web3-providers/src/'),
+                    '@masknet/web3-providers': join(__dirname, '../../web3-providers/src'),
                     '@masknet/web3-shared-evm': join(__dirname, '../../web3-shared/evm/'),
                     '@masknet/web3-shared-flow': join(__dirname, '../../web3-shared/flow/'),
                     '@masknet/web3-shared-solana': join(__dirname, '../../web3-shared/solana/'),

packages/mask/package.json

@@ -33,6 +33,7 @@
     "@masknet/web3-contracts": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
+    "@masknet/web3-providers": "workspace:*",
     "@msgpack/msgpack": "^2.7.1",
     "@servie/events": "^3.0.0",
     "@sinonjs/text-encoding": "^0.7.1",

packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx

@@ -1,15 +1,11 @@
-import type { TradeProvider } from '@masknet/public-api'
 import { useChainId } from '@masknet/web3-shared-evm'
-import { useCallback, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useUpdateEffect } from 'react-use'
-import { currentTradeProviderSettings } from '../../../../../plugins/Trader/settings'
-import type { FootnoteMenuOption } from '../../../../../plugins/Trader/SNSAdaptor/trader/FootnoteMenu'
 import { Trader } from '../../../../../plugins/Trader/SNSAdaptor/trader/Trader'
 import { TradeContext, useTradeContext } from '../../../../../plugins/Trader/trader/useTradeContext'
-import { useAvailableTraderProviders } from '../../../../../plugins/Trader/trending/useAvailableTraderProviders'
 import { useCurrentTradeProvider } from '../../../../../plugins/Trader/trending/useCurrentTradeProvider'
-import { Coin, TagType } from '../../../../../plugins/Trader/types'
+import type { Coin } from '../../../../../plugins/Trader/types'
 import { PopupRoutes } from '@masknet/shared-base'
 
 export function SwapBox() {
@@ -18,7 +14,6 @@ export function SwapBox() {
     const chainId = useChainId()
     const tradeProvider = useCurrentTradeProvider(chainId)
     const tradeContext = useTradeContext(tradeProvider)
-    const { value: tradeProviders = [] } = useAvailableTraderProviders(TagType.CASH, 'MASK')
 
     const coin = useMemo(() => {
         if (!location.search) return undefined
@@ -36,10 +31,6 @@ export function SwapBox() {
         history.replace(PopupRoutes.Swap)
     }, [chainId])
 
-    const onTradeProviderChange = useCallback((option: FootnoteMenuOption) => {
-        currentTradeProviderSettings.value = option.value as TradeProvider
-    }, [])
-
     return (
         <TradeContext.Provider value={tradeContext}>
             <Trader coin={coin} chainId={chainId} />

packages/mask/src/plugins/Avatar/SNSAdaptor/AddNFT.tsx

@@ -52,7 +52,7 @@ export function AddNFT(props: AddNFTProps) {
 
         createNFT(address, tokenId)
             .then((token) => {
-                if (!isSameAddress(token.info.owner, account)) {
+                if (!token || !isSameAddress(token?.info.owner, account)) {
                     setMessage(t('nft_owner_hint'))
                     return
                 }

packages/mask/src/plugins/Avatar/utils/index.ts

@@ -1,75 +1,34 @@
-import BigNumber from 'bignumber.js'
-import { head, isNull } from 'lodash-unified'
-import { PluginCollectibleRPC } from '../../Collectible/messages'
-import { getLastSalePrice, getOrderUnitPrice, getOrderUSDPrice } from '../../Collectible/utils'
-import { ChainId, createERC721Token, EthereumTokenType } from '@masknet/web3-shared-evm'
-import type { AssetOrder } from '../../Collectible/types'
+import { isNull } from 'lodash-unified'
+import { ChainId, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { EVM_RPC } from '../../EVM/messages'
 import Services from '../../../extension/service'
+import { getOrderUnitPrice } from '@masknet/web3-providers'
+import { ONE } from '@masknet/web3-shared-base'
 
 export async function getNFT(address: string, tokenId: string) {
-    const asset = await PluginCollectibleRPC.getAsset(address, tokenId, ChainId.Mainnet)
-
-    let orders: AssetOrder[] = []
-    if (asset.sell_orders?.length) {
-        orders = asset.sell_orders
-    } else if (asset.orders?.length) {
-        orders = asset.orders
-    } else if (asset.buy_orders?.length) {
-        orders = asset.buy_orders
-    }
-
-    const order = head(
-        orders.sort((a, b) =>
-            new BigNumber(
-                getOrderUSDPrice(
-                    b.current_price,
-                    b.payment_token_contract?.usd_price,
-                    b.payment_token_contract?.decimals,
-                ) ?? 0,
-            )
-                .minus(
-                    getOrderUSDPrice(
-                        a.current_price,
-                        a.payment_token_contract?.usd_price,
-                        a.payment_token_contract?.decimals,
-                    ) ?? 0,
-                )
-                .toNumber(),
-        ),
-    )
-
+    const asset = await EVM_RPC.getAsset({
+        address,
+        tokenId,
+        chainId: ChainId.Mainnet,
+        provider: NonFungibleAssetProvider.OPENSEA,
+    })
+    const amount =
+        getOrderUnitPrice(
+            asset?.desktopOrder?.current_price,
+            asset?.desktopOrder?.payment_token_contract?.decimals ?? 0,
+            asset?.desktopOrder?.quantity ?? '1',
+        ) ?? ONE
     return {
-        amount: order
-            ? new BigNumber(
-                  getOrderUnitPrice(order.current_price, order.payment_token_contract?.decimals, order.quantity) ?? 0,
-              ).toFixed()
-            : getLastSalePrice(asset.last_sale) ?? '0',
-        name: asset.name,
-        symbol: order?.payment_token_contract?.symbol ?? asset.last_sale?.payment_token?.symbol ?? 'ETH',
-        image: asset.image_url ?? asset.image_preview_url ?? '',
-        owner: asset.owner.address,
+        amount: amount.toFixed(),
+        name: asset?.name ?? '',
+        symbol: asset?.desktopOrder?.payment_token_contract?.symbol ?? 'ETH',
+        image: asset?.image_url ?? '',
+        owner: asset?.top_ownerships[0].owner.address ?? '',
     }
 }
 
 export async function createNFT(address: string, tokenId: string) {
-    const asset = await PluginCollectibleRPC.getAsset(address, tokenId, ChainId.Mainnet)
-    const token = createERC721Token(
-        {
-            chainId: ChainId.Mainnet,
-            type: EthereumTokenType.ERC721,
-            name: asset.asset_contract.name,
-            symbol: asset.asset_contract.token_symbol,
-            address: asset.asset_contract.address,
-        },
-        {
-            name: asset.name,
-            description: asset.description,
-            mediaUrl: asset.image_url ?? asset.image_preview_url ?? '',
-            owner: asset.top_ownerships[0].owner.address,
-        },
-        tokenId,
-    )
-    return token
+    return EVM_RPC.getNFT({ address, tokenId, chainId: ChainId.Mainnet, provider: NonFungibleAssetProvider.OPENSEA })
 }
 
 export async function getImage(image: string): Promise<string> {

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

@@ -26,7 +26,8 @@ export interface ActionBarProps {}
 export function ActionBar(props: ActionBarProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { asset, token, assetOrder } = CollectibleState.useContainer()
+    const { asset, assetOrder } = CollectibleState.useContainer()
+    const assets = asset.value
 
     const {
         open: openCheckoutDialog,
@@ -43,7 +44,7 @@ export function ActionBar(props: ActionBarProps) {
     if (!asset.value) return null
     return (
         <Box className={classes.root} sx={{ marginTop: 1 }} display="flex" justifyContent="center">
-            {!asset.value.is_owner && asset.value.is_auction && assetOrder.value ? (
+            {!asset.value.isOwner && asset.value.is_auction && assetOrder.value ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
@@ -52,7 +53,7 @@ export function ActionBar(props: ActionBarProps) {
                     {t('plugin_collectible_buy_now')}
                 </ActionButton>
             ) : null}
-            {!asset.value.is_owner && asset.value.is_auction ? (
+            {!asset.value.isOwner && asset.value.is_auction ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
@@ -63,7 +64,7 @@ export function ActionBar(props: ActionBarProps) {
                 </ActionButton>
             ) : null}
 
-            {!asset.value.is_owner && !asset.value.is_auction ? (
+            {!asset.value.isOwner && !asset.value.is_auction ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
@@ -72,7 +73,7 @@ export function ActionBar(props: ActionBarProps) {
                     {t('plugin_collectible_make_offer')}
                 </ActionButton>
             ) : null}
-            {asset.value.is_owner ? (
+            {assets?.isOwner ? (
                 <ActionButton
                     className={classes.button}
                     color="primary"
@@ -82,8 +83,8 @@ export function ActionBar(props: ActionBarProps) {
                 </ActionButton>
             ) : null}
             <CheckoutDialog
-                assetOrder={assetOrder}
                 asset={asset}
+                order={assetOrder}
                 open={openCheckoutDialog}
                 onClose={onCloseCheckoutDialog}
             />

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

@@ -47,10 +47,10 @@ export function ArticleTab(props: ArticleTabProps) {
             <div className={classes.body}>
                 {asset.value.animation_url ? (
                     <Link href={asset.value.animation_url} target="_blank" rel="noopener noreferrer">
-                        <AssetPlayer src={resourceUrl} alt={asset.value.name} />
+                        <AssetPlayer src={resourceUrl} alt={asset.value?.name ?? ''} />
                     </Link>
                 ) : (
-                    <AssetPlayer src={resourceUrl} alt={asset.value.name} />
+                    <AssetPlayer src={resourceUrl} alt={asset.value?.name ?? ''} />
                 )}
             </div>
         </CollectibleTab>

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

@@ -19,10 +19,10 @@ import { useI18N } from '../../../utils'
 import { useRemoteControlledDialog } from '@masknet/shared'
 import ActionButton, { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import type { useAsset } from '../hooks/useAsset'
 import { PluginCollectibleRPC } from '../messages'
 import { PluginTraderMessages } from '../../Trader/messages'
 import { CheckoutOrder } from './CheckoutOrder'
+import type { useAsset } from '../../EVM/hooks/useAsset'
 import type { useAssetOrder } from '../hooks/useAssetOrder'
 
 const useStyles = makeStyles()((theme) => {
@@ -55,16 +55,15 @@ const useStyles = makeStyles()((theme) => {
 
 export interface CheckoutDialogProps {
     asset?: ReturnType<typeof useAsset>
-    assetOrder?: ReturnType<typeof useAssetOrder>
+    order: ReturnType<typeof useAssetOrder>
     open: boolean
     onClose: () => void
 }
 
 export function CheckoutDialog(props: CheckoutDialogProps) {
-    const { asset, open, onClose, assetOrder } = props
+    const { asset, open, onClose, order } = props
     const isAuction = asset?.value?.is_auction ?? false
     const isVerified = asset?.value?.is_verified ?? false
-
     const { t } = useI18N()
     const { classes } = useStyles()
 
@@ -76,13 +75,14 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
     const onCheckout = useCallback(async () => {
         if (!asset?.value) return
         if (!asset.value.token_id || !asset.value.token_address) return
-        if (!assetOrder?.value) return
+        if (!order.value) return
+
         await PluginCollectibleRPC.fulfillOrder({
-            order: assetOrder.value,
+            order: order.value,
             accountAddress: account,
             recipientAddress: account,
         })
-    }, [asset?.value, account, assetOrder?.value])
+    }, [asset?.value, account, order?.value])
 
     const { openDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
 
@@ -103,7 +103,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
                             </Box>
                         )}
                         <Box sx={{ padding: 2 }}>
-                            <CheckoutOrder asset={asset} assetOrder={assetOrder} />
+                            <CheckoutOrder asset={asset} assetOrder={order} />
                             {isVerified ? null : (
                                 <>
                                     <FormControlLabel
@@ -172,7 +172,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
                                     completeOnClick={onClose}
                                     failedOnClick="use executor"
                                 />
-                                {asset?.value?.is_order_weth ? (
+                                {asset?.value?.isOrderWeth ? (
                                     <ActionButton
                                         className={classes.button}
                                         variant="contained"

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

@@ -1,11 +1,10 @@
 import { Table, TableHead, TableBody, TableRow, TableCell, Typography, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import type { Order } from 'opensea-js/lib/types'
 import { Image } from '../../../components/shared/Image'
 import { useChainId } from '@masknet/web3-shared-evm'
-import type { useAsset } from '../hooks/useAsset'
 import { resolveAssetLinkOnOpenSea } from '../pipes'
 import { useI18N } from '../../../utils'
+import type { useAsset } from '../../EVM/hooks/useAsset'
 import type { useAssetOrder } from '../hooks/useAssetOrder'
 
 const useStyles = makeStyles()((theme) => ({
@@ -25,8 +24,8 @@ export interface CheckoutOrderProps {
 
 export function CheckoutOrder(props: CheckoutOrderProps) {
     const { t } = useI18N()
-    const { asset, assetOrder } = props
-    const order = assetOrder?.value as Order | undefined
+    const { asset } = props
+    const order = asset?.value?.desktopOrder
     const { classes } = useStyles()
     const chainId = useChainId()
 
@@ -45,7 +44,7 @@ export function CheckoutOrder(props: CheckoutOrderProps) {
                 <TableRow>
                     <TableCell>
                         <div className={classes.itemInfo}>
-                            <Image height={80} width={80} src={asset.value.image_url} />
+                            <Image height={80} width={80} src={asset.value?.image_url ?? ''} />
                             <div className={classes.texts}>
                                 <Typography>{asset.value.collection_name ?? ''}</Typography>
                                 {asset.value.token_address && asset.value.token_id ? (

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

@@ -29,16 +29,16 @@ import { HistoryTab } from './HistoryTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleCard } from './CollectibleCard'
 import { CollectibleProviderIcon } from './CollectibleProviderIcon'
-import { CollectibleProvider, CollectibleTab } from '../types'
-import { currentCollectibleProviderSettings } from '../settings'
+import { CollectibleTab } from '../types'
 import { MaskTextIcon } from '../../../resources/MaskIcon'
 import { resolveAssetLinkOnOpenSea, resolveCollectibleProviderName } from '../pipes'
 import { ActionBar } from './ActionBar'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { NonFungibleAssetProvider, useChainId } 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 { currentNonFungibleAssetProviderSettings } from '../settings'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -156,16 +156,16 @@ export function Collectible(props: CollectibleProps) {
     const { asset, provider, tabIndex, setTabIndex } = CollectibleState.useContainer()
 
     //#region sync with settings
-    const collectibleProviderOptions = getEnumAsArray(CollectibleProvider)
+    const collectibleProviderOptions = getEnumAsArray(NonFungibleAssetProvider)
     const onDataProviderChange = useCallback((option: FootnoteMenuOption) => {
-        currentCollectibleProviderSettings.value = option.value as CollectibleProvider
+        currentNonFungibleAssetProviderSettings.value = option.value as NonFungibleAssetProvider
     }, [])
     //#endregion
 
     //#region provider switcher
     const CollectibleProviderSwitcher = useSettingsSwitcher(
-        currentCollectibleProviderSettings,
-        getEnumAsArray(CollectibleProvider).map((x) => x.value),
+        currentNonFungibleAssetProviderSettings,
+        getEnumAsArray(NonFungibleAssetProvider).map((x) => x.value),
         resolveCollectibleProviderName,
     )
     //#endregion
@@ -337,7 +337,7 @@ export function Collectible(props: CollectibleProps) {
                     </Typography>
                 </Box>
             )}
-            {provider === CollectibleProvider.OPENSEA ? <ActionBar /> : null}
+            {provider === NonFungibleAssetProvider.OPENSEA ? <ActionBar /> : null}
         </>
     )
 }