From 88076fd7bc060fe5042002b6f1c8ba62cee29423 Mon Sep 17 00:00:00 2001 From: nguyentiendung Date: Mon, 24 Jun 2024 10:46:21 +0700 Subject: [PATCH 1/5] [Issue-202] Add support Ordinal with Video/Text format --- .../src/koni/api/nft/inscription/index.ts | 6 ++- .../src/Popup/Home/Nfts/NftItemDetail.tsx | 41 ++++++++++++++++++- .../Home/Nfts/component/NftGalleryWrapper.tsx | 22 +++++++++- 3 files changed, 66 insertions(+), 3 deletions(-) diff --git a/packages/extension-base/src/koni/api/nft/inscription/index.ts b/packages/extension-base/src/koni/api/nft/inscription/index.ts index a0785206424..c1c625ff1ef 100644 --- a/packages/extension-base/src/koni/api/nft/inscription/index.ts +++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts @@ -33,10 +33,14 @@ export class InscriptionApi extends BaseNftApi { } private parseInsUrl (id: string, type: string) { - if (type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/svg') || type.startsWith('video/') || type.startsWith('model/gltf')) { + if (type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/svg') || type.startsWith('model/gltf')) { return this.createIframePreviewUrl(id); } + if (type.startsWith('video/')) { + return `https://ordinals.com/content/${id}`; + } + if (type.startsWith('text/')) { return undefined; } diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx index bd9f5557b71..bd2579476de 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx @@ -1,6 +1,8 @@ // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 +import { _AssetType } from '@subwallet/chain-list/types'; +import { RMRK_VER } from '@subwallet/extension-base/background/KoniTypes'; import { getExplorerLink } from '@subwallet/extension-base/services/transaction-service/utils'; import { OrdinalRemarkData } from '@subwallet/extension-base/types'; import DefaultLogosMap from '@subwallet/extension-koni-ui/assets/logo'; @@ -35,6 +37,27 @@ const modalCloseButton = ; +export interface NftItemWrapper { + id: string; + chain: string; + collectionId: string; + owner: string; + originAsset?: string; + name?: string; + image?: string; + externalUrl?: string; + rarity?: string; + description?: string; + properties?: { + [key: string]: { + value: string; + }; + } | null; + type?: _AssetType.ERC721 | _AssetType.PSP34 | RMRK_VER; + rmrk_ver?: RMRK_VER; + onChainOption?: any; +} + function Component ({ className = '' }: Props): React.ReactElement { const location = useLocation(); const { collectionInfo, nftItem } = location.state as INftItemDetail; @@ -146,6 +169,16 @@ function Component ({ className = '' }: Props): React.ReactElement { return false; }, [ordinalNftItem]); + const getContentStartsWith = (nftItem: NftItemWrapper, type: string) => { + if (nftItem && nftItem.properties && nftItem.properties.content_type && nftItem.properties.content_type.value) { + return nftItem?.properties?.content_type?.value.startsWith(type) || false; + } + + return false; + }; + + const isTextPlainInscription = useMemo(() => getContentStartsWith(nftItem, 'text'), [nftItem]); + return ( { properties={JSON.parse(nftItem.description) as OrdinalRemarkData} /> )} - {!isInscription && ( + {isTextPlainInscription && ( + + )} + {!(isInscription && nftItem.description) && !isTextPlainInscription && ( { handleOnClick && handleOnClick(routingParams); @@ -37,6 +38,11 @@ function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer const handleVideoError = useCallback(() => { setShowVideo(false); + setShowTextPlain(true); + }, []); + + const handleTextPlainError = useCallback(() => { + setShowTextPlain(false); setShow3dViewer(true); }, []); @@ -95,6 +101,20 @@ function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer ); } + if (showTextPlain) { + return ( + + + + ); + } + if (have3dViewer && show3dViewer) { return ( @@ -127,7 +147,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer visibleByDefault={true} /> ); - }, [showImage, showVideo, have3dViewer, show3dViewer, extendToken.defaultImagePlaceholder, handleImageError, loadingPlaceholder, getCollectionImage, handleVideoError]); + }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleTextPlainError, handleVideoError, have3dViewer, loadingPlaceholder, show3dViewer, showImage, showTextPlain, showVideo]); return ( Date: Wed, 26 Jun 2024 15:25:35 +0700 Subject: [PATCH 2/5] [Issue-202] merge openbit-dev into issue-202 and resolved conflicts --- .../Home/Nfts/component/NftGalleryWrapper.tsx | 32 ++----------------- 1 file changed, 2 insertions(+), 30 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx index 235ba9dfbe9..4ecf41e97a1 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx @@ -18,12 +18,11 @@ interface Props extends ThemeProps { have3dViewer?: boolean; } -function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer, image, itemCount, routingParams, title }: Props): React.ReactElement { +function Component ({ className = '', fallbackImage, handleOnClick, image, itemCount, routingParams, title }: Props): React.ReactElement { const { extendToken } = useTheme() as Theme; const [showImage, setShowImage] = useState(true); const [showVideo, setShowVideo] = useState(false); - const [show3dViewer, setShow3dViewer] = useState(false); const [showTextPlain, setShowTextPlain] = useState(false); const onClick = useCallback(() => { @@ -42,7 +41,6 @@ function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer const handleTextPlainError = useCallback(() => { setShowTextPlain(false); - setShow3dViewer(true); }, []); const getCollectionImage = useCallback(() => { @@ -114,39 +112,13 @@ function Component ({ className = '', fallbackImage, handleOnClick, have3dViewer ); } - if (have3dViewer && show3dViewer) { - return ( - - {/* @ts-ignore */} - - - ); - } - return ( ); - }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleTextPlainError, handleVideoError, have3dViewer, loadingPlaceholder, show3dViewer, showImage, showTextPlain, showVideo]); + }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleTextPlainError, handleVideoError, loadingPlaceholder, showImage, showTextPlain, showVideo]); return ( Date: Wed, 26 Jun 2024 16:10:06 +0700 Subject: [PATCH 3/5] [Issue-202] add condition display in NFT details screen --- .../src/Popup/Home/Nfts/NftItemDetail.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx index 69e2d3b6643..6d3abd79455 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx @@ -161,7 +161,7 @@ function Component ({ className = '' }: Props): React.ReactElement { const show3DModel = SHOW_3D_MODELS_CHAIN.includes(nftItem.chain); const ordinalNftItem = nftItem.description && isValidJson(nftItem.description) && JSON.parse(nftItem.description) as OrdinalRemarkData; - const isInscription = useMemo(() => { + const isBRC20Inscription = useMemo(() => { if (ordinalNftItem && 'p' in ordinalNftItem && 'op' in ordinalNftItem && 'tick' in ordinalNftItem && 'amt' in ordinalNftItem) { return true; } @@ -171,7 +171,7 @@ function Component ({ className = '' }: Props): React.ReactElement { const getContentStartsWith = (nftItem: NftItemWrapper, type: string) => { if (nftItem && nftItem.properties && nftItem.properties.content_type && nftItem.properties.content_type.value) { - return nftItem?.properties?.content_type?.value.startsWith(type) || false; + return (nftItem.image && nftItem?.properties?.content_type?.value.startsWith(type)) || false; } return false; @@ -195,19 +195,19 @@ function Component ({ className = '' }: Props): React.ReactElement { >
- {isInscription && nftItem.description && ( + {isBRC20Inscription && nftItem.description && ( )} - {isTextPlainInscription && ( + {isTextPlainInscription && !isBRC20Inscription && ( )} - {!(isInscription && nftItem.description) && !isTextPlainInscription && ( + {!isBRC20Inscription && !isTextPlainInscription && ( Date: Wed, 26 Jun 2024 18:15:31 +0700 Subject: [PATCH 4/5] [Issue-202] Add support video for ordinals --- .../src/Popup/Home/Nfts/NftItemDetail.tsx | 41 +------------------ .../Home/Nfts/component/NftGalleryWrapper.tsx | 22 +--------- 2 files changed, 2 insertions(+), 61 deletions(-) diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx index 6d3abd79455..a20d4bc6d72 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import { _AssetType } from '@subwallet/chain-list/types'; -import { RMRK_VER } from '@subwallet/extension-base/background/KoniTypes'; import { getExplorerLink } from '@subwallet/extension-base/services/transaction-service/utils'; import { OrdinalRemarkData } from '@subwallet/extension-base/types'; import DefaultLogosMap from '@subwallet/extension-koni-ui/assets/logo'; @@ -37,27 +35,6 @@ const modalCloseButton = ; -export interface NftItemWrapper { - id: string; - chain: string; - collectionId: string; - owner: string; - originAsset?: string; - name?: string; - image?: string; - externalUrl?: string; - rarity?: string; - description?: string; - properties?: { - [key: string]: { - value: string; - }; - } | null; - type?: _AssetType.ERC721 | _AssetType.PSP34 | RMRK_VER; - rmrk_ver?: RMRK_VER; - onChainOption?: any; -} - function Component ({ className = '' }: Props): React.ReactElement { const location = useLocation(); const { collectionInfo, nftItem } = location.state as INftItemDetail; @@ -169,16 +146,6 @@ function Component ({ className = '' }: Props): React.ReactElement { return false; }, [ordinalNftItem]); - const getContentStartsWith = (nftItem: NftItemWrapper, type: string) => { - if (nftItem && nftItem.properties && nftItem.properties.content_type && nftItem.properties.content_type.value) { - return (nftItem.image && nftItem?.properties?.content_type?.value.startsWith(type)) || false; - } - - return false; - }; - - const isTextPlainInscription = useMemo(() => getContentStartsWith(nftItem, 'text'), [nftItem]); - return ( { properties={JSON.parse(nftItem.description) as OrdinalRemarkData} /> )} - {isTextPlainInscription && !isBRC20Inscription && ( - - )} - {!isBRC20Inscription && !isTextPlainInscription && ( + {!isBRC20Inscription && ( { handleOnClick && handleOnClick(routingParams); @@ -36,11 +35,6 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC const handleVideoError = useCallback(() => { setShowVideo(false); - setShowTextPlain(true); - }, []); - - const handleTextPlainError = useCallback(() => { - setShowTextPlain(false); }, []); const getCollectionImage = useCallback(() => { @@ -98,27 +92,13 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC ); } - if (showTextPlain) { - return ( - - - - ); - } - return ( ); - }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleTextPlainError, handleVideoError, loadingPlaceholder, showImage, showTextPlain, showVideo]); + }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleVideoError, loadingPlaceholder, showImage, showVideo]); return ( Date: Wed, 26 Jun 2024 19:18:34 +0700 Subject: [PATCH 5/5] Update fallback image for NFT --- packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx index a20d4bc6d72..351c0dead1c 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx @@ -171,6 +171,7 @@ function Component ({ className = '' }: Props): React.ReactElement { {!isBRC20Inscription && (