Allow import custom EVM collectible

packages/extension-base/src/koni/api/nft/config.ts

@@ -141,42 +141,47 @@ if (isFirefox) {
   });
 }
 
-if (!RuntimeInfo?.protocol ||
-  (!RuntimeInfo?.protocol.startsWith('http') || RuntimeInfo?.protocol.startsWith('https'))) {
+if (RuntimeInfo.protocol && RuntimeInfo.protocol.startsWith('http')) {
+  // This is for https
+  if (RuntimeInfo.protocol.startsWith('https')) {
+    RANDOM_IPFS_GATEWAY_SETTING.push({
+      provider: IPFS_FLEEK,
+      weight: 4
+    },
+    {
+      provider: IPFS_GATEWAY_4EVERLAND,
+      weight: 2
+    },
+    {
+      provider: IPFS_W3S_LINK,
+      weight: 1
+    },
+    {
+      provider: CF_IPFS_GATEWAY,
+      weight: 4
+    },
+    {
+      provider: PINATA_IPFS_GATEWAY,
+      weight: 1 // Rate limit too low
+    },
+    {
+      provider: IPFS_IO,
+      weight: 5
+    }
+    );
+  }
+} else {
+  // This is for extension env or other
   RANDOM_IPFS_GATEWAY_SETTING.push({
-    provider: IPFS_FLEEK,
-    weight: 4
-  },
-  {
-    provider: IPFS_GATEWAY_4EVERLAND,
-    weight: 2
-  },
-  {
-    provider: IPFS_W3S_LINK,
-    weight: 1
-  },
-  {
-    provider: CF_IPFS_GATEWAY,
-    weight: 4
-  },
-  {
-    provider: PINATA_IPFS_GATEWAY,
-    weight: 1 // Rate limit too low
-  },
-  {
     provider: NFT_STORAGE_GATEWAY,
     weight: 50
   },
-  {
-    provider: GATEWAY_IPFS_IO,
-    weight: 5
-  },
   {
     provider: DWEB_LINK,
     weight: 5
   },
   {
-    provider: IPFS_IO,
+    provider: GATEWAY_IPFS_IO,
     weight: 5
   }
   );

packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollectionDetail.tsx

@@ -48,18 +48,22 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     const routingParams = { collectionInfo, nftItem } as INftItemDetail;
 
     if (nftItem.description) {
-      const ordinalNftItem = JSON.parse(nftItem.description) as OrdinalRemarkData;
-
-      if ('p' in ordinalNftItem && 'op' in ordinalNftItem && 'tick' in ordinalNftItem && 'amt' in ordinalNftItem) {
-        return (
-          <InscriptionGalleryWrapper
-            handleOnClick={handleOnClickNft}
-            key={`${nftItem.chain}_${nftItem.collectionId}_${nftItem.id}`}
-            name={nftItem.name as string}
-            properties={ordinalNftItem}
-            routingParams={routingParams}
-          />
-        );
+      try {
+        const ordinalNftItem = JSON.parse(nftItem.description) as OrdinalRemarkData;
+
+        if ('p' in ordinalNftItem && 'op' in ordinalNftItem && 'tick' in ordinalNftItem && 'amt' in ordinalNftItem) {
+          return (
+            <InscriptionGalleryWrapper
+              handleOnClick={handleOnClickNft}
+              key={`${nftItem.chain}_${nftItem.collectionId}_${nftItem.id}`}
+              name={nftItem.name as string}
+              properties={ordinalNftItem}
+              routingParams={routingParams}
+            />
+          );
+        }
+      } catch (e) {
+
       }
     }
 

packages/extension-koni-ui/src/Popup/Home/Nfts/NftCollections.tsx

@@ -11,18 +11,28 @@ import { INftCollectionDetail } from '@subwallet/extension-koni-ui/Popup/Home/Nf
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ActivityIndicator, ButtonProps, Icon, SwList } from '@subwallet/react-ui';
 import CN from 'classnames';
-import { ArrowClockwise, Image } from 'phosphor-react';
-import React, { useCallback, useContext } from 'react';
+import { ArrowClockwise, Image, Plus, PlusCircle } from 'phosphor-react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 type Props = ThemeProps
 
-const reloadIcon = <Icon
-  phosphorIcon={ArrowClockwise}
-  size='sm'
-  type='phosphor'
-/>;
+const reloadIcon = (
+  <Icon
+    phosphorIcon={ArrowClockwise}
+    size='sm'
+    type='phosphor'
+  />
+);
+
+const rightIcon = (
+  <Icon
+    phosphorIcon={Plus}
+    size='sm'
+    type='phosphor'
+  />
+);
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
   useSetCurrentPage('/home/nfts/collections');
@@ -55,6 +65,12 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           })
           .catch(console.error);
       }
+    },
+    {
+      icon: rightIcon,
+      onClick: () => {
+        navigate('/settings/tokens/import-nft', { state: { isExternalRequest: false } });
+      }
     }
   ];
 
@@ -110,15 +126,33 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     );
   }, [getNftsByCollection, handleOnClickCollection]);
 
+  const emptyButtonProps = useMemo((): ButtonProps => {
+    return {
+      icon: (
+        <Icon
+          phosphorIcon={PlusCircle}
+          weight='fill'
+        />
+      ),
+      children: t('Add collectible'),
+      shape: 'circle',
+      size: 'xs',
+      onClick: () => {
+        navigate('/settings/tokens/import-nft', { state: { isExternalRequest: false } });
+      }
+    };
+  }, [navigate, t]);
+
   const emptyNft = useCallback(() => {
     return (
       <EmptyList
+        buttonProps={emptyButtonProps}
         emptyMessage={t('Try adding one manually')}
         emptyTitle={t('No Collectible found')}
         phosphorIcon={Image}
       />
     );
-  }, [t]);
+  }, [emptyButtonProps, t]);
 
   return (
     <PageWrapper
@@ -138,6 +172,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           displayGrid={true}
           enableSearchInput={true}
           gridGap={'14px'}
+          key={nftCollections.length} // fix render issue of flat-list
           list={nftCollections}
           minColumnWidth={'160px'}
           renderItem={renderNftCollection}

packages/extension-koni-ui/src/Popup/Home/Nfts/NftImport.tsx

@@ -143,7 +143,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
         .then((result) => {
           if (result) {
             showNotification({
-              message: t('Imported NFT successfully')
+              message: t('Imported collectible successfully')
             });
             goBack();
           } else {
@@ -195,7 +195,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
               setLoading(false);
 
               if (validationResult.isExist) {
-                reject(t('Existed NFT'));
+                reject(t('Existed collectible'));
               }
 
               if (validationResult.contractError) {
@@ -242,7 +242,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           onClick: form.submit,
           children: t('Import')
         }}
-        title={t<string>('Import NFT')}
+        title={t<string>('Import collectible')}
       >
         <div className={'nft_import__container'}>
           <Form
@@ -277,8 +277,8 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
                 disabled={!selectedChain}
                 items={nftTypeOptions}
                 label={t<string>('Type')}
-                placeholder={t('Select NFT type')}
-                title={t('Select NFT type')}
+                placeholder={t('Select collectible type')}
+                title={t('Select collectible type')}
               />
             </Form.Item>
 
@@ -304,7 +304,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
             >
               <Input
                 disabled={nameDisabled}
-                label={t<string>('NFT collection name')}
+                label={t<string>('Collection name')}
               />
             </Form.Item>
           </Form>

packages/extension-koni-ui/src/Popup/Home/Nfts/NftItemDetail.tsx

@@ -28,12 +28,14 @@ type Props = ThemeProps
 
 const NFT_DESCRIPTION_MAX_LENGTH = 70;
 
-const modalCloseButton = <Icon
-  customSize={'24px'}
-  phosphorIcon={CaretLeft}
-  type='phosphor'
-  weight={'light'}
-/>;
+const modalCloseButton = (
+  <Icon
+    customSize={'24px'}
+    phosphorIcon={CaretLeft}
+    type='phosphor'
+    weight={'light'}
+  />
+);
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const location = useLocation();
@@ -137,14 +139,16 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, [nftItem.externalUrl]);
 
   const show3DModel = SHOW_3D_MODELS_CHAIN.includes(nftItem.chain);
-  const ordinalNftItem = nftItem.description && JSON.parse(nftItem.description) as OrdinalRemarkData;
+
   const isInscription = useMemo(() => {
-    if (ordinalNftItem && 'p' in ordinalNftItem && 'op' in ordinalNftItem && 'tick' in ordinalNftItem && 'amt' in ordinalNftItem) {
-      return true;
-    }
+    try {
+      const ordinalNftItem = nftItem.description && JSON.parse(nftItem.description) as OrdinalRemarkData;
 
-    return false;
-  }, [ordinalNftItem]);
+      return !!(ordinalNftItem && 'p' in ordinalNftItem && 'op' in ordinalNftItem && 'tick' in ordinalNftItem && 'amt' in ordinalNftItem);
+    } catch (e) {
+      return false;
+    }
+  }, [nftItem.description]);
 
   return (
     <PageWrapper
@@ -171,6 +175,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
             {!isInscription && (
               <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}

packages/extension-koni-ui/src/Popup/router.tsx

@@ -63,7 +63,7 @@ const TokenDetailList = new LazyLoader('TokenDetailList', () => import('@subwall
 const NftItemDetail = new LazyLoader('NftItemDetail', () => import('@subwallet/extension-koni-ui/Popup/Home/Nfts/NftItemDetail'));
 const NftCollections = new LazyLoader('NftCollections', () => import('@subwallet/extension-koni-ui/Popup/Home/Nfts/NftCollections'));
 const NftCollectionDetail = new LazyLoader('NftCollectionDetail', () => import('@subwallet/extension-koni-ui/Popup/Home/Nfts/NftCollectionDetail'));
-// const NftImport = new LazyLoader('NftImport', () => import('@subwallet/extension-koni-ui/Popup/Home/Nfts/NftImport'));
+const NftImport = new LazyLoader('NftImport', () => import('@subwallet/extension-koni-ui/Popup/Home/Nfts/NftImport'));
 
 const History = new LazyLoader('History', () => import('@subwallet/extension-koni-ui/Popup/Home/History'));
 const Home = new LazyLoader('Home', () => import('@subwallet/extension-koni-ui/Popup/Home'));
@@ -229,8 +229,8 @@ export const router = createHashRouter([
             children: [
               ManageTokens.generateRouterObject('manage'),
               FungibleTokenImport.generateRouterObject('import-token'),
-              TokenDetail.generateRouterObject('detail')
-              // NftImport.generateRouterObject('import-nft')
+              TokenDetail.generateRouterObject('detail'),
+              NftImport.generateRouterObject('import-nft')
             ]
           }
         ]

patches/@subwallet+react-ui+5.1.2-b74.patch

@@ -1,3 +1,45 @@
+diff --git a/node_modules/@subwallet/react-ui/es/image/index.d.ts b/node_modules/@subwallet/react-ui/es/image/index.d.ts
+index 6daf2a3..c12be26 100644
+--- a/node_modules/@subwallet/react-ui/es/image/index.d.ts
++++ b/node_modules/@subwallet/react-ui/es/image/index.d.ts
+@@ -13,6 +13,7 @@ export interface SwImageProps extends ImageProps {
+     isLoading?: boolean;
+     activityIndicatorSize?: number | string;
+     modelViewerProps?: ModelViewerProps;
++    fallbackSrc?: string;
+ }
+ export interface CompositionImage<P> extends React.FC<P> {
+     PreviewGroup: typeof PreviewGroup;
+diff --git a/node_modules/@subwallet/react-ui/es/image/index.js b/node_modules/@subwallet/react-ui/es/image/index.js
+index 2b8275d..25a0579 100644
+--- a/node_modules/@subwallet/react-ui/es/image/index.js
++++ b/node_modules/@subwallet/react-ui/es/image/index.js
+@@ -36,9 +36,10 @@ const Image = _a => {
+       modelViewerProps,
+       onLoad,
+       onError,
+-      src
++      src,
++      fallbackSrc
+     } = _a,
+-    otherProps = __rest(_a, ["prefixCls", "preview", "rootClassName", "shape", "width", "height", "responsive", "isLoading", "activityIndicatorSize", "modelViewerProps", "onLoad", "onError", "src"]);
++    otherProps = __rest(_a, ["prefixCls", "preview", "rootClassName", "shape", "width", "height", "responsive", "isLoading", "activityIndicatorSize", "modelViewerProps", "onLoad", "onError", "src", "fallbackSrc"]);
+   const {
+     getPrefixCls,
+     locale: contextLocale = defaultLocale,
+@@ -165,10 +166,10 @@ const Image = _a => {
+       preview: false,
+       prefixCls: `${prefixCls}`,
+       rootClassName: mergedRootClassName,
+-      fallback: FAULT_TOLERANT,
++      fallback: fallbackSrc || FAULT_TOLERANT,
+       onLoad: handleOnLoad,
+       onError: handleImageError,
+-      src: FAULT_TOLERANT
++      src: fallbackSrc || FAULT_TOLERANT
+     }, otherProps));
+   };
+   if (shape === 'squircle') {
 diff --git a/node_modules/@subwallet/react-ui/es/number/index.js b/node_modules/@subwallet/react-ui/es/number/index.js
 index 895129b..0081551 100644
 --- a/node_modules/@subwallet/react-ui/es/number/index.js