From 2ed882a765a5183f076c919c480a95b1285991d4 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Thu, 11 Jul 2024 14:25:22 +0700
Subject: [PATCH 01/13] [Issue: 220] Add support for Ordinals with some content
 type

---
 .../src/koni/api/nft/inscription/index.ts     |   4 +-
 .../Popup/Home/Nfts/NftCollectionDetail.tsx   |   1 +
 .../src/Popup/Home/Nfts/NftItemDetail.tsx     | 104 +++++++++++-
 .../Home/Nfts/component/NftGalleryWrapper.tsx | 153 +++++++++++++++---
 4 files changed, 239 insertions(+), 23 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 a753e4d32c..3d1b044409 100644
--- a/packages/extension-base/src/koni/api/nft/inscription/index.ts
+++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts
@@ -50,11 +50,11 @@ 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('model/gltf')) {
+    if (type.startsWith('image/svg') || type.startsWith('model/gltf')) {
       return this.createIframePreviewUrl(id);
     }
 
-    if (type.startsWith('video/')) {
+    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html')) {
       return `https://ordinals.com/content/${id}`;
     }
 
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
index d82fbef4c6..8c1832e375 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
@@ -125,6 +125,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         have3dViewer={SHOW_3D_MODELS_CHAIN.includes(nftItem.chain)}
         image={nftItem.image}
         key={`${nftItem.chain}_${nftItem.collectionId}_${nftItem.id}`}
+        nftItem={nftItem}
         routingParams={routingParams}
         title={nftItem.name || nftItem.id}
       />
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 351c0dead1..4c9cfbef08 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -146,6 +146,52 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     return false;
   }, [ordinalNftItem]);
 
+  const getContentType = useMemo(() => {
+    let contentType = '';
+
+    if (nftItem?.properties) {
+      Object.entries(nftItem.properties).forEach(([attName, attValueObj]) => {
+        const { value: attValue } = attValueObj as Record<string, string>;
+
+        if (attName === 'content_type') {
+          contentType = attValue;
+        }
+      });
+    }
+
+    return contentType;
+  }, [nftItem?.properties]);
+
+  const renderAppJsonContent = useCallback(() => {
+    const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
+      ? JSON.parse(nftItem.description) as Record<string, unknown>
+      : undefined;
+
+    if (!ordinalNftDescription) {
+      return null;
+    }
+
+    return (
+      <div className='nft-container'>
+        {Object.entries(ordinalNftDescription).map(([key, value]) => (
+          <div
+            className={'__nft-item'}
+            key={key}
+          >{key}: <div className={'__nft-item-value'}>{String(value)}</div></div>
+        ))}
+      </div>
+    );
+  }, [nftItem.description]);
+
+  const checkContentType = useCallback((type: string): boolean => getContentType.includes(type), [getContentType]);
+
+  const isAudioInscriptions = useMemo(() => checkContentType('audio'), [checkContentType]);
+
+  const isTextHTMLInscriptions = useMemo(() => checkContentType('text/html'), [checkContentType]);
+
+  const isSVGInscriptions = useMemo(() => checkContentType('image/svg'), [checkContentType]);
+  const isAppJsonInscriptions = useMemo(() => checkContentType('application/json'), [checkContentType]);
+
   return (
     <PageWrapper
       className={`${className}`}
@@ -168,7 +214,29 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
                 properties={JSON.parse(nftItem.description) as OrdinalRemarkData}
               />
             )}
-            {!isBRC20Inscription && (
+            {isAudioInscriptions &&
+                <div className={'-nft-audio'}>
+                  <audio controls>
+                    <source
+                      src={nftItem.image}
+                      type={getContentType}
+                    />
+                  </audio>
+                </div>
+            }
+            {isAppJsonInscriptions &&
+              renderAppJsonContent()
+            }
+            {(isTextHTMLInscriptions || isSVGInscriptions) &&
+              <div className={'-nft-text-html-wrapper'}>
+                <iframe
+                  className={'-nft-text-html'}
+                  src={nftItem.image}
+                  title={'HTML Inscription Content'}
+                />
+              </div>
+            }
+            {!isBRC20Inscription && !isAudioInscriptions && !isTextHTMLInscriptions && !isSVGInscriptions && !isAppJsonInscriptions && (
               <Image
                 className={CN({ clickable: nftItem.externalUrl })}
                 fallbackSrc={DefaultLogosMap.default_placeholder}
@@ -307,6 +375,40 @@ const NftItemDetail = styled(Component)<Props>(({ theme: { token } }: Props) =>
     '.clickable': {
       cursor: 'pointer'
     },
+    '.-nft-audio': {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    '.-nft-text-html': {
+      width: 358,
+      height: 358,
+      border: 'none',
+      overflow: 'hidden'
+    },
+    '.nft-container': {
+      width: 358,
+      height: 358,
+      backgroundColor: token.colorTextTertiary,
+      padding: token.padding,
+      gap: 8,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    },
+    '.__nft-item': {
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
+      color: token.colorTextDark1,
+      justifyContent: 'space-between',
+      display: 'flex',
+      gap: 4,
+
+    },
+    '.__nft-item-value': {
+      color: token.colorTextDark4,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
 
     '.nft_item_detail__info_container': {
       display: 'flex',
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 334e107d46..cb2c8f1e65 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
@@ -1,15 +1,18 @@
 // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { NftItem } from '@subwallet/extension-base/background/KoniTypes';
+import { isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, NftItem as NftItem_ } from '@subwallet/react-ui';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 // @ts-ignore
 import { LazyLoadComponent, LazyLoadImage } from 'react-lazy-load-image-component';
 import styled, { useTheme } from 'styled-components';
 
 interface Props extends ThemeProps {
   title: string;
+  nftItem?: NftItem;
   image: string | undefined;
   fallbackImage?: string | undefined;
   itemCount?: number;
@@ -18,25 +21,13 @@ interface Props extends ThemeProps {
   have3dViewer?: boolean;
 }
 
-function Component ({ className = '', fallbackImage, handleOnClick, image, itemCount, routingParams, title }: Props): React.ReactElement<Props> {
+function Component ({ className = '', fallbackImage, handleOnClick, image, itemCount, nftItem, routingParams, title }: Props): React.ReactElement<Props> {
   const { extendToken } = useTheme() as Theme;
 
-  const [showImage, setShowImage] = useState(true);
-  const [showVideo, setShowVideo] = useState(false);
-
   const onClick = useCallback(() => {
     handleOnClick && handleOnClick(routingParams);
   }, [handleOnClick, routingParams]);
 
-  const handleImageError = useCallback(() => {
-    setShowImage(false);
-    setShowVideo(true);
-  }, []);
-
-  const handleVideoError = useCallback(() => {
-    setShowVideo(false);
-  }, []);
-
   const getCollectionImage = useCallback(() => {
     if (image) {
       return image;
@@ -58,13 +49,74 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
     );
   }, []);
 
+  const getContentType = useMemo(() => {
+    let contentType = '';
+
+    if (nftItem?.properties) {
+      Object.entries(nftItem.properties).forEach(([attName, attValueObj]) => {
+        const { value: attValue } = attValueObj as Record<string, string>;
+
+        if (attName === 'content_type') {
+          contentType = attValue;
+        }
+      });
+    }
+
+    return contentType;
+  }, [nftItem?.properties]);
+
+  const checkContentType = useCallback((type: string): boolean => getContentType.includes(type), [getContentType]);
+
+  const isAudioInscriptions = useMemo(() => checkContentType('audio'), [checkContentType]);
+
+  const isTextHTMLInscriptions = useMemo(() => checkContentType('text/html'), [checkContentType]);
+
+  const isSVGInscriptions = useMemo(() => checkContentType('image/svg'), [checkContentType]);
+  const isVideoInscriptions = useMemo(() => checkContentType('video'), [checkContentType]);
+  const isImageCommonInscriptions = useMemo(() => checkContentType('image'), [checkContentType]);
+  const isAppJsonInscriptions = useMemo(() => checkContentType('application/json'), [checkContentType]);
+
+  const renderAppJsonContent = useCallback(() => {
+    const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
+      ? JSON.parse(nftItem.description) as Record<string, unknown>
+      : undefined;
+
+    if (!ordinalNftDescription) {
+      return null;
+    }
+
+    return (
+      <div className='nft-container'>
+        {Object.entries(ordinalNftDescription).map(([key, value]) => (
+          <div
+            className={'__nft-item'}
+            key={key}
+          >{key}: <div className={'__nft-item-value'}>{String(value)}</div></div>
+        ))}
+      </div>
+    );
+  }, [nftItem?.description]);
+
   const getCollectionImageNode = useCallback(() => {
-    if (showImage) {
+    if (isTextHTMLInscriptions || isSVGInscriptions) {
+      return (
+        <LazyLoadComponent>
+          <div className={'-nft-text-html-wrapper'}>
+            <iframe
+              className={'-nft-text-html'}
+              src={getCollectionImage()}
+              title={'HTML Inscription Content'}
+            />
+          </div>
+        </LazyLoadComponent>
+      );
+    }
+
+    if (isImageCommonInscriptions) {
       return (
         <LazyLoadImage
           delayTime={10000}
           height={'100%'}
-          onError={handleImageError}
           placeholder={loadingPlaceholder()}
           src={getCollectionImage()}
           width={'100%'}
@@ -72,7 +124,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
       );
     }
 
-    if (showVideo) {
+    if (isVideoInscriptions) {
       return (
         <LazyLoadComponent>
           <video
@@ -80,25 +132,47 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
             height={'100%'}
             loop={true}
             muted
-            onError={handleVideoError}
             width={'100%'}
           >
             <source
               src={getCollectionImage()}
-              type='video/mp4'
+              type={getContentType}
             />
           </video>
         </LazyLoadComponent>
       );
     }
 
+    if (isAudioInscriptions) {
+      return (
+        <LazyLoadComponent>
+          <div className={'nft_gallery_wrapper__audio'}>
+            <audio controls>
+              <source
+                src={getCollectionImage()}
+                type={getContentType}
+              />
+            </audio>
+          </div>
+        </LazyLoadComponent>
+      );
+    }
+
+    if (isAppJsonInscriptions) {
+      return (
+        <LazyLoadComponent>
+          {renderAppJsonContent()};
+        </LazyLoadComponent>
+      );
+    }
+
     return (
       <LazyLoadImage
         src={extendToken.defaultImagePlaceholder}
         visibleByDefault={true}
       />
     );
-  }, [extendToken.defaultImagePlaceholder, getCollectionImage, handleImageError, handleVideoError, loadingPlaceholder, showImage, showVideo]);
+  }, [extendToken.defaultImagePlaceholder, getCollectionImage, getContentType, isAppJsonInscriptions, isAudioInscriptions, isImageCommonInscriptions, isSVGInscriptions, isTextHTMLInscriptions, isVideoInscriptions, loadingPlaceholder, renderAppJsonContent]);
 
   return (
     <NftItem_
@@ -120,6 +194,45 @@ export const NftGalleryWrapper = styled(Component)<Props>(({ theme: { token } }:
       overflow: 'hidden'
     },
 
+    '.nft_gallery_wrapper__audio': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: token.padding,
+      height: '100%'
+    },
+
+    '.-nft-text-html': {
+      width: 171,
+      height: 171,
+      border: 'none',
+      overflow: 'hidden'
+    },
+
+    '.nft-container': {
+      width: 171,
+      height: 171,
+      backgroundColor: token.colorTextTertiary,
+      padding: token.paddingXS,
+      gap: 4,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden'
+    },
+    '.__nft-item': {
+      fontSize: token.fontSizeXS,
+      lineHeight: token.lineHeightXS,
+      color: token.colorTextDark1,
+      justifyContent: 'space-between',
+      display: 'flex',
+      gap: 2,
+
+    },
+    '.__nft-item-value': {
+      color: token.colorTextDark4,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+
     '.nft_gallery_wrapper__loading': {
       width: '100%',
       height: '100%',

From 9f995d0ba26384a7653e1aeb340176c27fae39b8 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Thu, 11 Jul 2024 16:59:38 +0700
Subject: [PATCH 02/13] [Issue: 220] Add support for Ordinals with some content
 type

---
 .../src/Popup/Home/Nfts/NftItemDetail.tsx     | 120 +++++-----
 .../Home/Nfts/component/NftGalleryWrapper.tsx | 211 ++++++++++--------
 .../src/Popup/Home/Nfts/utils.ts              |  54 ++++-
 3 files changed, 225 insertions(+), 160 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 4c9cfbef08..84b49e4d69 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -13,7 +13,7 @@ import useDefaultNavigate from '@subwallet/extension-koni-ui/hooks/router/useDef
 import useGetChainInfo from '@subwallet/extension-koni-ui/hooks/screen/common/useFetchChainInfo';
 import useGetAccountInfoByAddress from '@subwallet/extension-koni-ui/hooks/screen/common/useGetAccountInfoByAddress';
 import InscriptionImage from '@subwallet/extension-koni-ui/Popup/Home/Nfts/component/InscriptionImage';
-import { INftItemDetail, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
+import { ContentType, determineContentType, getContentType, INftItemDetail, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { BackgroundIcon, Field, Icon, Image, Logo, ModalContext, SwModal } from '@subwallet/react-ui';
@@ -146,22 +146,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     return false;
   }, [ordinalNftItem]);
 
-  const getContentType = useMemo(() => {
-    let contentType = '';
-
-    if (nftItem?.properties) {
-      Object.entries(nftItem.properties).forEach(([attName, attValueObj]) => {
-        const { value: attValue } = attValueObj as Record<string, string>;
-
-        if (attName === 'content_type') {
-          contentType = attValue;
-        }
-      });
-    }
-
-    return contentType;
-  }, [nftItem?.properties]);
-
   const renderAppJsonContent = useCallback(() => {
     const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
       ? JSON.parse(nftItem.description) as Record<string, unknown>
@@ -173,24 +157,64 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
     return (
       <div className='nft-container'>
-        {Object.entries(ordinalNftDescription).map(([key, value]) => (
-          <div
-            className={'__nft-item'}
-            key={key}
-          >{key}: <div className={'__nft-item-value'}>{String(value)}</div></div>
-        ))}
+        <pre>
+          <code>
+            {JSON.stringify(ordinalNftDescription, null, 2)}
+          </code>
+        </pre>
       </div>
     );
   }, [nftItem.description]);
 
-  const checkContentType = useCallback((type: string): boolean => getContentType.includes(type), [getContentType]);
-
-  const isAudioInscriptions = useMemo(() => checkContentType('audio'), [checkContentType]);
-
-  const isTextHTMLInscriptions = useMemo(() => checkContentType('text/html'), [checkContentType]);
+  const renderNftContent = useCallback(() => {
+    const contentType = determineContentType(getContentType(nftItem.properties));
+
+    switch (contentType) {
+      case ContentType.Audio:
+        return (
+          <div className='-nft-audio'>
+            <audio controls>
+              <source
+                src={nftItem.image}
+                type={getContentType(nftItem?.properties)}
+              />
+            </audio>
+          </div>
+        );
+
+      case ContentType.AppJson:
+        return renderAppJsonContent();
+
+      case ContentType.TextHTML:
+      case ContentType.ImageSVG:
+        return (
+          <div className='-nft-text-html-wrapper'>
+            <iframe
+              className='-nft-text-html'
+              src={nftItem.image}
+              title='HTML Inscription Content'
+            />
+          </div>
+        );
+
+      default:
+        if (!isBRC20Inscription) {
+          return (
+            <Image
+              className={CN({ clickable: nftItem.externalUrl })}
+              fallbackSrc={DefaultLogosMap.default_placeholder}
+              height={358}
+              modelViewerProps={show3DModel ? { ...DEFAULT_MODEL_VIEWER_PROPS, ...CAMERA_CONTROLS_MODEL_VIEWER_PROPS } : undefined}
+              onClick={onImageClick}
+              src={nftItem.image || DefaultLogosMap.default_placeholder}
+              width={show3DModel ? 358 : undefined}
+            />
+          );
+        }
 
-  const isSVGInscriptions = useMemo(() => checkContentType('image/svg'), [checkContentType]);
-  const isAppJsonInscriptions = useMemo(() => checkContentType('application/json'), [checkContentType]);
+        return null;
+    }
+  }, [isBRC20Inscription, nftItem, renderAppJsonContent, show3DModel, onImageClick]);
 
   return (
     <PageWrapper
@@ -214,39 +238,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
                 properties={JSON.parse(nftItem.description) as OrdinalRemarkData}
               />
             )}
-            {isAudioInscriptions &&
-                <div className={'-nft-audio'}>
-                  <audio controls>
-                    <source
-                      src={nftItem.image}
-                      type={getContentType}
-                    />
-                  </audio>
-                </div>
-            }
-            {isAppJsonInscriptions &&
-              renderAppJsonContent()
-            }
-            {(isTextHTMLInscriptions || isSVGInscriptions) &&
-              <div className={'-nft-text-html-wrapper'}>
-                <iframe
-                  className={'-nft-text-html'}
-                  src={nftItem.image}
-                  title={'HTML Inscription Content'}
-                />
-              </div>
-            }
-            {!isBRC20Inscription && !isAudioInscriptions && !isTextHTMLInscriptions && !isSVGInscriptions && !isAppJsonInscriptions && (
-              <Image
-                className={CN({ clickable: nftItem.externalUrl })}
-                fallbackSrc={DefaultLogosMap.default_placeholder}
-                height={358}
-                modelViewerProps={show3DModel ? { ...DEFAULT_MODEL_VIEWER_PROPS, ...CAMERA_CONTROLS_MODEL_VIEWER_PROPS } : undefined}
-                onClick={onImageClick}
-                src={nftItem.image || DefaultLogosMap.default_placeholder}
-                width={show3DModel ? 358 : undefined}
-              />
-            )}
+            {renderNftContent()}
           </div>
 
           <div className={'nft_item_detail__info_container'}>
@@ -401,7 +393,7 @@ const NftItemDetail = styled(Component)<Props>(({ theme: { token } }: Props) =>
       color: token.colorTextDark1,
       justifyContent: 'space-between',
       display: 'flex',
-      gap: 4,
+      gap: 4
 
     },
     '.__nft-item-value': {
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 cb2c8f1e65..a54c2a3a85 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
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NftItem } from '@subwallet/extension-base/background/KoniTypes';
-import { isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts';
+import { ContentType, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, NftItem as NftItem_ } from '@subwallet/react-ui';
 import React, { useCallback, useMemo } from 'react';
@@ -50,31 +50,48 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
   }, []);
 
   const getContentType = useMemo(() => {
-    let contentType = '';
-
     if (nftItem?.properties) {
-      Object.entries(nftItem.properties).forEach(([attName, attValueObj]) => {
-        const { value: attValue } = attValueObj as Record<string, string>;
+      const contentTypeEntry = Object.entries(nftItem.properties).find(([attName]) => attName === 'content_type');
+
+      if (contentTypeEntry) {
+        const { value: attValue } = contentTypeEntry[1] as Record<string, string>;
 
-        if (attName === 'content_type') {
-          contentType = attValue;
-        }
-      });
+        return attValue;
+      }
     }
 
-    return contentType;
-  }, [nftItem?.properties]);
+    return '';
+  }, [nftItem]);
 
-  const checkContentType = useCallback((type: string): boolean => getContentType.includes(type), [getContentType]);
+  const determineContentType = useCallback((): ContentType | undefined => {
+    const contentType = getContentType;
 
-  const isAudioInscriptions = useMemo(() => checkContentType('audio'), [checkContentType]);
+    if (contentType.includes(ContentType.Audio)) {
+      return ContentType.Audio;
+    }
 
-  const isTextHTMLInscriptions = useMemo(() => checkContentType('text/html'), [checkContentType]);
+    if (contentType.includes(ContentType.TextHTML)) {
+      return ContentType.TextHTML;
+    }
 
-  const isSVGInscriptions = useMemo(() => checkContentType('image/svg'), [checkContentType]);
-  const isVideoInscriptions = useMemo(() => checkContentType('video'), [checkContentType]);
-  const isImageCommonInscriptions = useMemo(() => checkContentType('image'), [checkContentType]);
-  const isAppJsonInscriptions = useMemo(() => checkContentType('application/json'), [checkContentType]);
+    if (contentType.includes(ContentType.ImageSVG)) {
+      return ContentType.ImageSVG;
+    }
+
+    if (contentType.includes(ContentType.Video)) {
+      return ContentType.Video;
+    }
+
+    if (contentType.includes(ContentType.Image)) {
+      return ContentType.Image;
+    }
+
+    if (contentType.includes(ContentType.AppJson)) {
+      return ContentType.AppJson;
+    }
+
+    return undefined;
+  }, [getContentType]);
 
   const renderAppJsonContent = useCallback(() => {
     const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
@@ -87,92 +104,96 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
 
     return (
       <div className='nft-container'>
-        {Object.entries(ordinalNftDescription).map(([key, value]) => (
-          <div
-            className={'__nft-item'}
-            key={key}
-          >{key}: <div className={'__nft-item-value'}>{String(value)}</div></div>
-        ))}
+        <pre>
+          <code>
+            {JSON.stringify(ordinalNftDescription, null, 2)}
+          </code>
+        </pre>
       </div>
     );
   }, [nftItem?.description]);
 
   const getCollectionImageNode = useCallback(() => {
-    if (isTextHTMLInscriptions || isSVGInscriptions) {
-      return (
-        <LazyLoadComponent>
-          <div className={'-nft-text-html-wrapper'}>
-            <iframe
-              className={'-nft-text-html'}
-              src={getCollectionImage()}
-              title={'HTML Inscription Content'}
-            />
-          </div>
-        </LazyLoadComponent>
-      );
-    }
-
-    if (isImageCommonInscriptions) {
-      return (
-        <LazyLoadImage
-          delayTime={10000}
-          height={'100%'}
-          placeholder={loadingPlaceholder()}
-          src={getCollectionImage()}
-          width={'100%'}
-        />
-      );
-    }
-
-    if (isVideoInscriptions) {
-      return (
-        <LazyLoadComponent>
-          <video
-            autoPlay
-            height={'100%'}
-            loop={true}
-            muted
-            width={'100%'}
-          >
-            <source
-              src={getCollectionImage()}
-              type={getContentType}
-            />
-          </video>
-        </LazyLoadComponent>
-      );
-    }
-
-    if (isAudioInscriptions) {
-      return (
-        <LazyLoadComponent>
-          <div className={'nft_gallery_wrapper__audio'}>
-            <audio controls>
+    const contentType = determineContentType();
+
+    switch (contentType) {
+      case ContentType.TextHTML:
+      case ContentType.ImageSVG:
+        return (
+          <LazyLoadComponent>
+            <div className='-nft-text-html-wrapper'>
+              <iframe
+                className='-nft-text-html'
+                src={getCollectionImage()}
+                title='HTML Inscription Content'
+              />
+            </div>
+          </LazyLoadComponent>
+        );
+
+      case ContentType.Image:
+        return (
+          <LazyLoadImage
+            delayTime={10000}
+            height='100%'
+            placeholder={loadingPlaceholder()}
+            src={getCollectionImage()}
+            width='100%'
+          />
+        );
+
+      case ContentType.Video:
+        return (
+          <LazyLoadComponent>
+            <video
+              autoPlay
+              height='100%'
+              loop={true}
+              muted
+              width='100%'
+            >
               <source
                 src={getCollectionImage()}
                 type={getContentType}
               />
-            </audio>
-          </div>
-        </LazyLoadComponent>
-      );
-    }
-
-    if (isAppJsonInscriptions) {
-      return (
-        <LazyLoadComponent>
-          {renderAppJsonContent()};
-        </LazyLoadComponent>
-      );
+            </video>
+          </LazyLoadComponent>
+        );
+
+      case ContentType.Audio:
+        return (
+          <LazyLoadComponent>
+            <div className='nft_gallery_wrapper__audio'>
+              <audio
+                autoPlay={false}
+                controls
+                muted
+              >
+                <source
+                  src={getCollectionImage()}
+                  type={getContentType}
+                />
+              </audio>
+            </div>
+          </LazyLoadComponent>
+        );
+
+      case ContentType.AppJson:
+        return (
+          <LazyLoadComponent>
+            {renderAppJsonContent()}
+          </LazyLoadComponent>
+        );
+
+      default:
+        return (
+          <LazyLoadImage
+            src={extendToken.defaultImagePlaceholder}
+            visibleByDefault={true}
+          />
+        );
     }
-
-    return (
-      <LazyLoadImage
-        src={extendToken.defaultImagePlaceholder}
-        visibleByDefault={true}
-      />
-    );
-  }, [extendToken.defaultImagePlaceholder, getCollectionImage, getContentType, isAppJsonInscriptions, isAudioInscriptions, isImageCommonInscriptions, isSVGInscriptions, isTextHTMLInscriptions, isVideoInscriptions, loadingPlaceholder, renderAppJsonContent]);
+  }, [determineContentType, extendToken.defaultImagePlaceholder, getCollectionImage, getContentType, loadingPlaceholder, renderAppJsonContent]);
 
   return (
     <NftItem_
@@ -224,7 +245,7 @@ export const NftGalleryWrapper = styled(Component)<Props>(({ theme: { token } }:
       color: token.colorTextDark1,
       justifyContent: 'space-between',
       display: 'flex',
-      gap: 2,
+      gap: 2
 
     },
     '.__nft-item-value': {
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
index 5e13c300b2..bd09e73fae 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
@@ -15,7 +15,17 @@ export interface INftItemDetail {
   collectionInfo: NftCollection,
   nftItem: NftItem
 }
-
+export enum ContentType {
+  Audio = 'audio',
+  TextHTML = 'text/html',
+  ImageSVG = 'image/svg',
+  Video = 'video',
+  Image = 'image',
+  AppJson = 'application/json'
+}
+interface NftItemProperties {
+  [key: string]: unknown;
+}
 // might set perPage based on screen height
 export const NFT_PER_PAGE = 4;
 
@@ -73,3 +83,45 @@ export const isValidJson = (str: string): boolean => {
     return false;
   }
 };
+
+export const getContentType = (nftItemProperties: NftItemProperties | null | undefined): string => {
+  if (nftItemProperties) {
+    const contentTypeEntry = Object.entries(nftItemProperties).find(([attName]) => attName === 'content_type');
+
+    if (contentTypeEntry) {
+      const { value: attValue } = contentTypeEntry[1] as Record<string, string>;
+
+      return attValue;
+    }
+  }
+
+  return '';
+};
+
+export const determineContentType = (contentType: string): ContentType | undefined => {
+  if (contentType.includes(ContentType.Audio)) {
+    return ContentType.Audio;
+  }
+
+  if (contentType.includes(ContentType.TextHTML)) {
+    return ContentType.TextHTML;
+  }
+
+  if (contentType.includes(ContentType.ImageSVG)) {
+    return ContentType.ImageSVG;
+  }
+
+  if (contentType.includes(ContentType.Video)) {
+    return ContentType.Video;
+  }
+
+  if (contentType.includes(ContentType.Image)) {
+    return ContentType.Image;
+  }
+
+  if (contentType.includes(ContentType.AppJson)) {
+    return ContentType.AppJson;
+  }
+
+  return undefined;
+};

From e183e14aff493e176b05ffae044e1a672ee4ecb1 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Thu, 11 Jul 2024 17:16:34 +0700
Subject: [PATCH 03/13] [Issue: 220] Refactor code support inscriptions

---
 .../Home/Nfts/component/NftGalleryWrapper.tsx | 64 +++----------------
 1 file changed, 10 insertions(+), 54 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 a54c2a3a85..966b864ebe 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
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NftItem } from '@subwallet/extension-base/background/KoniTypes';
-import { ContentType, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts';
+import { ContentType, determineContentType, getContentType, isValidJson } from '@subwallet/extension-koni-ui/Popup/Home/Nfts';
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, NftItem as NftItem_ } from '@subwallet/react-ui';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 // @ts-ignore
 import { LazyLoadComponent, LazyLoadImage } from 'react-lazy-load-image-component';
 import styled, { useTheme } from 'styled-components';
@@ -49,57 +49,13 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
     );
   }, []);
 
-  const getContentType = useMemo(() => {
-    if (nftItem?.properties) {
-      const contentTypeEntry = Object.entries(nftItem.properties).find(([attName]) => attName === 'content_type');
-
-      if (contentTypeEntry) {
-        const { value: attValue } = contentTypeEntry[1] as Record<string, string>;
-
-        return attValue;
-      }
-    }
-
-    return '';
-  }, [nftItem]);
-
-  const determineContentType = useCallback((): ContentType | undefined => {
-    const contentType = getContentType;
-
-    if (contentType.includes(ContentType.Audio)) {
-      return ContentType.Audio;
-    }
-
-    if (contentType.includes(ContentType.TextHTML)) {
-      return ContentType.TextHTML;
-    }
-
-    if (contentType.includes(ContentType.ImageSVG)) {
-      return ContentType.ImageSVG;
-    }
-
-    if (contentType.includes(ContentType.Video)) {
-      return ContentType.Video;
-    }
-
-    if (contentType.includes(ContentType.Image)) {
-      return ContentType.Image;
-    }
-
-    if (contentType.includes(ContentType.AppJson)) {
-      return ContentType.AppJson;
-    }
-
-    return undefined;
-  }, [getContentType]);
-
-  const renderAppJsonContent = useCallback(() => {
+  const renderAppJsonContent = () => {
     const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
       ? JSON.parse(nftItem.description) as Record<string, unknown>
       : undefined;
 
     if (!ordinalNftDescription) {
-      return null;
+      return '';
     }
 
     return (
@@ -111,10 +67,10 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
         </pre>
       </div>
     );
-  }, [nftItem?.description]);
+  };
 
-  const getCollectionImageNode = useCallback(() => {
-    const contentType = determineContentType();
+  const getCollectionImageNode = () => {
+    const contentType = determineContentType(getContentType(nftItem?.properties));
 
     switch (contentType) {
       case ContentType.TextHTML:
@@ -154,7 +110,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
             >
               <source
                 src={getCollectionImage()}
-                type={getContentType}
+                type={getContentType(nftItem?.properties)}
               />
             </video>
           </LazyLoadComponent>
@@ -171,7 +127,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
               >
                 <source
                   src={getCollectionImage()}
-                  type={getContentType}
+                  type={getContentType(nftItem?.properties)}
                 />
               </audio>
             </div>
@@ -193,7 +149,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
           />
         );
     }
-  }, [determineContentType, extendToken.defaultImagePlaceholder, getCollectionImage, getContentType, loadingPlaceholder, renderAppJsonContent]);
+  };
 
   return (
     <NftItem_

From d38281545791e5d3dd3c4500cf1938c25cdf12b8 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Thu, 11 Jul 2024 17:20:55 +0700
Subject: [PATCH 04/13] [Issue: 220] Refactor code support inscriptions

---
 .../src/Popup/Home/Nfts/NftItemDetail.tsx     | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 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 84b49e4d69..7273b5e9e7 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -146,7 +146,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     return false;
   }, [ordinalNftItem]);
 
-  const renderAppJsonContent = useCallback(() => {
+  const renderAppJsonContent = () => {
     const ordinalNftDescription = nftItem?.description && isValidJson(nftItem.description)
       ? JSON.parse(nftItem.description) as Record<string, unknown>
       : undefined;
@@ -164,9 +164,9 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         </pre>
       </div>
     );
-  }, [nftItem.description]);
+  };
 
-  const renderNftContent = useCallback(() => {
+  const renderNftContent = () => {
     const contentType = determineContentType(getContentType(nftItem.properties));
 
     switch (contentType) {
@@ -183,7 +183,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         );
 
       case ContentType.AppJson:
-        return renderAppJsonContent();
+        return renderAppJsonContent;
 
       case ContentType.TextHTML:
       case ContentType.ImageSVG:
@@ -214,7 +214,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
         return null;
     }
-  }, [isBRC20Inscription, nftItem, renderAppJsonContent, show3DModel, onImageClick]);
+  };
 
   return (
     <PageWrapper
@@ -232,13 +232,15 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       >
         <div className={'nft_item_detail__container'}>
           <div className={'nft_item_detail__nft_image'}>
-            {isBRC20Inscription && nftItem.description && (
-              <InscriptionImage
-                alone={true}
-                properties={JSON.parse(nftItem.description) as OrdinalRemarkData}
-              />
-            )}
-            {renderNftContent()}
+            <>
+              {isBRC20Inscription && nftItem.description && (
+                <InscriptionImage
+                  alone={true}
+                  properties={JSON.parse(nftItem.description) as OrdinalRemarkData}
+                />
+              )}
+              {renderNftContent()}
+            </>
           </div>
 
           <div className={'nft_item_detail__info_container'}>

From 0d974ed1f45da3eef6fa96f5f1b7b9cbaa709e0b Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Thu, 11 Jul 2024 19:19:14 +0700
Subject: [PATCH 05/13] [Issue: 220] Refactor code support inscriptions

---
 .../extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 7273b5e9e7..69583f6903 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -183,7 +183,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         );
 
       case ContentType.AppJson:
-        return renderAppJsonContent;
+        return renderAppJsonContent();
 
       case ContentType.TextHTML:
       case ContentType.ImageSVG:

From e5a4ec226545dde172c7aaa65e299e85cf943b27 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Fri, 12 Jul 2024 17:08:18 +0700
Subject: [PATCH 06/13] [Issue: 220] Refactor code support inscriptions

---
 .../src/koni/api/nft/inscription/index.ts         | 10 +++++-----
 .../src/Popup/Home/Nfts/NftItemDetail.tsx         | 15 +++++++++++++--
 .../Home/Nfts/component/NftGalleryWrapper.tsx     |  9 +++++++--
 .../src/Popup/Home/Nfts/utils.ts                  |  5 +++++
 4 files changed, 30 insertions(+), 9 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 3d1b044409..a048f68133 100644
--- a/packages/extension-base/src/koni/api/nft/inscription/index.ts
+++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts
@@ -50,7 +50,7 @@ export class InscriptionApi extends BaseNftApi {
   }
 
   private parseInsUrl (id: string, type: string) {
-    if (type.startsWith('image/svg') || type.startsWith('model/gltf')) {
+    if (type.startsWith('image/svg') || type.startsWith('model/gltf') || type.startsWith('image/gif')) {
       return this.createIframePreviewUrl(id);
     }
 
@@ -62,10 +62,10 @@ export class InscriptionApi extends BaseNftApi {
       return undefined;
     }
 
-    if (type.startsWith('image/')) {
-      return `${HIRO_API.list_of_incriptions}/${id}/content`;
-      // return getPreviewUrl(id);
-    }
+    // if (type.startsWith('image/')) {
+    //   return `${HIRO_API.list_of_incriptions}/${id}/content`;
+    //   // return getPreviewUrl(id);
+    // }
 
     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 69583f6903..e2ac136487 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -151,8 +151,18 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       ? JSON.parse(nftItem.description) as Record<string, unknown>
       : undefined;
 
-    if (!ordinalNftDescription) {
-      return null;
+    if (!ordinalNftDescription || Object.keys(ordinalNftDescription).length === 0) {
+      return (
+        <Image
+          className={CN({ clickable: nftItem.externalUrl })}
+          fallbackSrc={DefaultLogosMap.default_placeholder}
+          height={358}
+          modelViewerProps={show3DModel ? { ...DEFAULT_MODEL_VIEWER_PROPS, ...CAMERA_CONTROLS_MODEL_VIEWER_PROPS } : undefined}
+          onClick={onImageClick}
+          src={nftItem.image || DefaultLogosMap.default_placeholder}
+          width={show3DModel ? 358 : undefined}
+        />
+      );
     }
 
     return (
@@ -187,6 +197,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
       case ContentType.TextHTML:
       case ContentType.ImageSVG:
+      case ContentType.ImageGIF:
         return (
           <div className='-nft-text-html-wrapper'>
             <iframe
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 966b864ebe..df705a3ef2 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
@@ -54,8 +54,13 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
       ? JSON.parse(nftItem.description) as Record<string, unknown>
       : undefined;
 
-    if (!ordinalNftDescription) {
-      return '';
+    if (!ordinalNftDescription || Object.keys(ordinalNftDescription).length === 0) {
+      return (
+        <LazyLoadImage
+          src={extendToken.defaultImagePlaceholder}
+          visibleByDefault={true}
+        />
+      );
     }
 
     return (
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
index bd09e73fae..cca67aff22 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
@@ -19,6 +19,7 @@ export enum ContentType {
   Audio = 'audio',
   TextHTML = 'text/html',
   ImageSVG = 'image/svg',
+  ImageGIF = 'image/gif',
   Video = 'video',
   Image = 'image',
   AppJson = 'application/json'
@@ -111,6 +112,10 @@ export const determineContentType = (contentType: string): ContentType | undefin
     return ContentType.ImageSVG;
   }
 
+  if (contentType.includes(ContentType.ImageGIF)) {
+    return ContentType.ImageGIF;
+  }
+
   if (contentType.includes(ContentType.Video)) {
     return ContentType.Video;
   }

From 3c14a6d975a20892a7e104088e21fcfc082caeb0 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Fri, 12 Jul 2024 17:43:49 +0700
Subject: [PATCH 07/13] [Issue: 220] fix show image collections

---
 .../src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 df705a3ef2..178fae704b 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
@@ -80,6 +80,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
     switch (contentType) {
       case ContentType.TextHTML:
       case ContentType.ImageSVG:
+      case ContentType.ImageGIF:
         return (
           <LazyLoadComponent>
             <div className='-nft-text-html-wrapper'>
@@ -149,7 +150,8 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
       default:
         return (
           <LazyLoadImage
-            src={extendToken.defaultImagePlaceholder}
+            className={'__item-lazzad'}
+            src={getCollectionImage()}
             visibleByDefault={true}
           />
         );

From 81077c35e8fbea9472d9e360adfb5390b013d0df Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Fri, 12 Jul 2024 19:24:01 +0700
Subject: [PATCH 08/13] [Issue: 220] fix show image collections and
 fallbackimage

---
 .../src/koni/api/nft/inscription/index.ts              | 10 +++++-----
 .../src/Popup/Home/Nfts/NftCollections.tsx             |  6 ++++--
 2 files changed, 9 insertions(+), 7 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 a048f68133..8b14fd2819 100644
--- a/packages/extension-base/src/koni/api/nft/inscription/index.ts
+++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts
@@ -54,7 +54,7 @@ export class InscriptionApi extends BaseNftApi {
       return this.createIframePreviewUrl(id);
     }
 
-    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html')) {
+    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/png') || type.startsWith('image/jpeg')) {
       return `https://ordinals.com/content/${id}`;
     }
 
@@ -62,10 +62,10 @@ export class InscriptionApi extends BaseNftApi {
       return undefined;
     }
 
-    // if (type.startsWith('image/')) {
-    //   return `${HIRO_API.list_of_incriptions}/${id}/content`;
-    //   // return getPreviewUrl(id);
-    // }
+    if (type.startsWith('image/')) {
+      return `${HIRO_API.list_of_incriptions}/${id}/content`;
+      // return getPreviewUrl(id);
+    }
 
     return undefined;
   }
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
index 84f3b77f63..84d45fe5aa 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
@@ -7,7 +7,7 @@ import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { useGetNftByAccount, useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { reloadCron } from '@subwallet/extension-koni-ui/messaging';
 import { NftGalleryWrapper } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/component/NftGalleryWrapper';
-import { getTotalCollectionItems, INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
+import { ContentType, determineContentType, getContentType, getTotalCollectionItems, INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nfts/utils';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, ButtonProps, Icon, SwList } from '@subwallet/react-ui';
@@ -93,7 +93,9 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     let fallbackImage: string | undefined;
 
     for (const nft of nftList) { // fallback to any nft image
-      if (nft.image) {
+      const contentType = determineContentType(getContentType(nft?.properties));
+
+      if (nft.image && contentType === ContentType.Image) {
         fallbackImage = nft.image;
         break;
       }

From d4314859fde38b0fe054d39243b1ab436fd7bff9 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Fri, 12 Jul 2024 19:35:20 +0700
Subject: [PATCH 09/13] [Issue: 220] Support image/webp

---
 packages/extension-base/src/koni/api/nft/inscription/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 8b14fd2819..eabca363cd 100644
--- a/packages/extension-base/src/koni/api/nft/inscription/index.ts
+++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts
@@ -54,7 +54,7 @@ export class InscriptionApi extends BaseNftApi {
       return this.createIframePreviewUrl(id);
     }
 
-    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/png') || type.startsWith('image/jpeg')) {
+    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/png') || type.startsWith('image/jpeg') || type.startsWith('image/webp')) {
       return `https://ordinals.com/content/${id}`;
     }
 

From 08faa5c34751c2eb0574f00233f6216f12940329 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Mon, 15 Jul 2024 18:36:39 +0700
Subject: [PATCH 10/13] [Issue: 220] Fix cover collection, support some
 contentType

---
 .../src/koni/api/nft/inscription/index.ts           |  5 ++---
 .../src/Popup/Home/Nfts/NftCollections.tsx          |  6 +++---
 .../src/Popup/Home/Nfts/NftItemDetail.tsx           |  2 +-
 .../Popup/Home/Nfts/component/NftGalleryWrapper.tsx | 13 +++++++++----
 .../extension-koni-ui/src/Popup/Home/Nfts/utils.ts  |  7 ++++++-
 5 files changed, 21 insertions(+), 12 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 eabca363cd..fa50604d9b 100644
--- a/packages/extension-base/src/koni/api/nft/inscription/index.ts
+++ b/packages/extension-base/src/koni/api/nft/inscription/index.ts
@@ -54,7 +54,7 @@ export class InscriptionApi extends BaseNftApi {
       return this.createIframePreviewUrl(id);
     }
 
-    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/png') || type.startsWith('image/jpeg') || type.startsWith('image/webp')) {
+    if (type.startsWith('video/') || type.startsWith('audio/') || type.startsWith('text/html') || type.startsWith('image/png') || type.startsWith('image/jpeg') || type.startsWith('image/webp') || type.startsWith('image/gif')) {
       return `https://ordinals.com/content/${id}`;
     }
 
@@ -63,8 +63,7 @@ export class InscriptionApi extends BaseNftApi {
     }
 
     if (type.startsWith('image/')) {
-      return `${HIRO_API.list_of_incriptions}/${id}/content`;
-      // return getPreviewUrl(id);
+      return `https://ordinals.com/content/${id}`;
     }
 
     return undefined;
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
index 84d45fe5aa..d09ece8e38 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx
@@ -90,13 +90,13 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const renderNftCollection = useCallback((nftCollection: NftCollection) => {
     const nftList = getNftsByCollection(nftCollection);
 
-    let fallbackImage: string | undefined;
+    let fallbackImage: { image: string; contentType?: ContentType } | undefined;
 
     for (const nft of nftList) { // fallback to any nft image
       const contentType = determineContentType(getContentType(nft?.properties));
 
-      if (nft.image && contentType === ContentType.Image) {
-        fallbackImage = nft.image;
+      if (nft.image) {
+        fallbackImage = { image: nft.image, contentType: contentType };
         break;
       }
     }
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 e2ac136487..49b8d403aa 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx
@@ -197,13 +197,13 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
       case ContentType.TextHTML:
       case ContentType.ImageSVG:
+      case ContentType.ModelGltf:
       case ContentType.ImageGIF:
         return (
           <div className='-nft-text-html-wrapper'>
             <iframe
               className='-nft-text-html'
               src={nftItem.image}
-              title='HTML Inscription Content'
             />
           </div>
         );
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 178fae704b..8e5dedc85a 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
@@ -14,7 +14,7 @@ interface Props extends ThemeProps {
   title: string;
   nftItem?: NftItem;
   image: string | undefined;
-  fallbackImage?: string | undefined;
+  fallbackImage?: { image: string; contentType?: ContentType } | undefined;
   itemCount?: number;
   handleOnClick?: (params?: any) => void;
   routingParams?: any;
@@ -32,7 +32,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
     if (image) {
       return image;
     } else if (fallbackImage) {
-      return fallbackImage;
+      return fallbackImage.image;
     }
 
     return extendToken.defaultImagePlaceholder;
@@ -75,12 +75,18 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
   };
 
   const getCollectionImageNode = () => {
-    const contentType = determineContentType(getContentType(nftItem?.properties));
+    let contentType = determineContentType(getContentType(nftItem?.properties));
+    const fallbackContentType = fallbackImage?.contentType;
+
+    if (!contentType) {
+      contentType = fallbackContentType;
+    }
 
     switch (contentType) {
       case ContentType.TextHTML:
       case ContentType.ImageSVG:
       case ContentType.ImageGIF:
+      case ContentType.ModelGltf:
         return (
           <LazyLoadComponent>
             <div className='-nft-text-html-wrapper'>
@@ -150,7 +156,6 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
       default:
         return (
           <LazyLoadImage
-            className={'__item-lazzad'}
             src={getCollectionImage()}
             visibleByDefault={true}
           />
diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
index cca67aff22..352489011e 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/utils.ts
@@ -22,7 +22,8 @@ export enum ContentType {
   ImageGIF = 'image/gif',
   Video = 'video',
   Image = 'image',
-  AppJson = 'application/json'
+  AppJson = 'application/json',
+  ModelGltf = 'model/gltf'
 }
 interface NftItemProperties {
   [key: string]: unknown;
@@ -128,5 +129,9 @@ export const determineContentType = (contentType: string): ContentType | undefin
     return ContentType.AppJson;
   }
 
+  if (contentType.includes(ContentType.ModelGltf)) {
+    return ContentType.ModelGltf;
+  }
+
   return undefined;
 };

From 051b3f76f3055a915cba2b2354d75242d359905c Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Mon, 15 Jul 2024 18:57:03 +0700
Subject: [PATCH 11/13] [Issue: 220] fix eslint

---
 .../src/Popup/Home/Nfts/NftCollectionDetail.tsx                 | 2 +-
 .../src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
index 8c1832e375..b73a00da9e 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
@@ -120,7 +120,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
     return (
       <NftGalleryWrapper
-        fallbackImage={collectionInfo.image}
+        fallbackImage={{image: collectionInfo.image}}
         handleOnClick={handleOnClickNft}
         have3dViewer={SHOW_3D_MODELS_CHAIN.includes(nftItem.chain)}
         image={nftItem.image}
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 8e5dedc85a..4300d073d7 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
@@ -14,7 +14,7 @@ interface Props extends ThemeProps {
   title: string;
   nftItem?: NftItem;
   image: string | undefined;
-  fallbackImage?: { image: string; contentType?: ContentType } | undefined;
+  fallbackImage?: { image?: string; contentType?: ContentType } | undefined;
   itemCount?: number;
   handleOnClick?: (params?: any) => void;
   routingParams?: any;

From c05004e4b2879b9c96a19fde3e549fab0a80caab Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Tue, 16 Jul 2024 11:06:09 +0700
Subject: [PATCH 12/13] [Issue: 220] Update fallbackImage

---
 .../src/Popup/Home/Nfts/component/NftGalleryWrapper.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4300d073d7..19825bb626 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
@@ -31,7 +31,7 @@ function Component ({ className = '', fallbackImage, handleOnClick, image, itemC
   const getCollectionImage = useCallback(() => {
     if (image) {
       return image;
-    } else if (fallbackImage) {
+    } else if (fallbackImage && fallbackImage.image) {
       return fallbackImage.image;
     }
 

From 65110ffece5b4c31b4068a4c7a6ecf3c23d3ea32 Mon Sep 17 00:00:00 2001
From: Frenkie Nguyen <nguyentiendung.me@gmail.com>
Date: Tue, 16 Jul 2024 11:34:08 +0700
Subject: [PATCH 13/13] [Issue: 220] fix eslint

---
 .../src/Popup/Home/Nfts/NftCollectionDetail.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
index b73a00da9e..169d10bc7e 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx
@@ -120,7 +120,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
     return (
       <NftGalleryWrapper
-        fallbackImage={{image: collectionInfo.image}}
+        fallbackImage={{ image: collectionInfo.image }}
         handleOnClick={handleOnClickNft}
         have3dViewer={SHOW_3D_MODELS_CHAIN.includes(nftItem.chain)}
         image={nftItem.image}