[Issue-102] Update send collectible for EVM networks

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>