diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index becbc804961c..de18a192d279 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -2,6 +2,7 @@ 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) => ({
@@ -56,11 +57,14 @@ export function ArticleTab(props: ArticleTabProps) {
return useMemo(() => {
if (!asset.value) return null
- const resourceUrl = asset.value.animation_url || asset.value.image_url
+ const resourceUrl = hasNativeAPI
+ ? asset.value.image_url || asset.value.animation_url
+ : asset.value.animation_url || asset.value.image_url
return (
-
+ {/* Todo: Migrate `hasNativeAPI` to `@masknet/shared` to use it in directly. */}
+
)
diff --git a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
index 7a4a6b1d65fe..2aeb6adc0757 100644
--- a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
@@ -41,6 +41,7 @@ interface Props extends withClasses<'loadingFailImage' | 'iframe' | 'wrapper' |
fallbackImage?: URL
fallbackResourceLoader?: JSX.Element
renderOrder?: number
+ isNative?: boolean
setERC721TokenName?: (name: string) => void
setSourceType?: (type: string) => void
}
@@ -49,6 +50,7 @@ export function NFTCardStyledAssetPlayer(props: Props) {
chainId = ChainId.Mainnet,
contractAddress = '',
tokenId = '',
+ isNative = false,
fallbackImage,
fallbackResourceLoader,
url,
@@ -69,7 +71,7 @@ export function NFTCardStyledAssetPlayer(props: Props) {
? new URL('./nft_token_fallback_dark.png', import.meta.url)
: new URL('./nft_token_fallback.png', import.meta.url)
- return isImageToken ? (
+ return isImageToken || isNative ? (