Merge pull request #943 from blockscout/bugfix/token-instance-app-link

display NFT app link even if url is not full and highlight link to ipfs

lib/regexp.ts

+export const URL_PREFIX = /^https?:\/\//i;
+
+export const IPFS_PREFIX = /^ipfs:\/\//i;

lib/token/metadata/urlParser.ts

+import * as regexp from 'lib/regexp';
+
+export default function urlParser(maybeUrl: string): URL | undefined {
+  try {
+    return constructUrl(maybeUrl);
+  } catch (error) {}
+}
+
+function constructUrl(maybeUrl: string) {
+  if (regexp.IPFS_PREFIX.test(maybeUrl)) {
+    return new URL(maybeUrl.replace(regexp.IPFS_PREFIX, 'https://ipfs.io/ipfs/'));
+  }
+
+  if (regexp.URL_PREFIX.test(maybeUrl)) {
+    return new URL(maybeUrl);
+  }
+}

mocks/tokens/tokenInstance.ts

@@ -171,7 +171,7 @@ export const withRichMetadata: TokenInstance = {
     token_id: '7741920',
     serial_total: 1100,
     blockchain_state: 'BURNING',
-    image: 'https://nftu.com/nft-content/media/PAPAYA/92ee5f5c-bce9-4d64-8a25-c7e1e6305572/dee8734bbefb0d63d6156b6fa0e1385822480589daa1862cbd37a94f6bc2ba3a',
+    image: 'ipfs://dee8734bbefb0d63d6156b6fa0e1385822480589daa1862cbd37a94f6bc2ba3a',
     revealed_nfts: null,
     nft_data_id: '92ee5f5c-bce9-4d64-8a25-c7e1e6305572',
     series: 'Tip-Off',

ui/pages/TokenInstance.tsx

@@ -9,6 +9,7 @@ import nftIcon from 'icons/nft_shield.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import * as regexp from 'lib/regexp';
 import { TOKEN_INSTANCE } from 'stubs/token';
 import * as tokenStubs from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
@@ -124,12 +125,15 @@ const TokenInstanceContent = () => {
     }
 
     try {
-      const url = new URL(tokenInstanceQuery.data.external_app_url);
+      const url = regexp.URL_PREFIX.test(tokenInstanceQuery.data.external_app_url) ?
+        new URL(tokenInstanceQuery.data.external_app_url) :
+        new URL('https://' + tokenInstanceQuery.data.external_app_url);
+
       return (
         <Skeleton isLoaded={ !tokenInstanceQuery.isPlaceholderData } display="inline-block" fontSize="sm" mt={ 6 }>
           <span>View in app </span>
-          <LinkExternal href={ tokenInstanceQuery.data.external_app_url }>
-            { url.hostname }
+          <LinkExternal href={ url.toString() }>
+            { url.hostname || tokenInstanceQuery.data.external_app_url }
           </LinkExternal>
         </Skeleton>
       );

ui/tokenInstance/metadata/MetadataItemPrimitive.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 import type { Primitive } from 'react-hook-form';
 
+import urlParser from 'lib/token/metadata/urlParser';
 import LinkExternal from 'ui/shared/LinkExternal';
 
 import MetadataAccordionItem from './MetadataAccordionItem';
@@ -22,13 +23,10 @@ const MetadataItemPrimitive = ({ name, value, isItem = true, isFlat, level }: Pr
   const content = (() => {
     switch (typeof value) {
       case 'string': {
-        try {
-          if (!value.includes('http')) {
-            throw new Error();
-          }
-          const url = new URL(value);
+        const url = urlParser(value);
+        if (url) {
           return <LinkExternal href={ url.toString() }>{ value }</LinkExternal>;
-        } catch (error) {}
+        }
       }
       // eslint-disable-next-line no-fallthrough
       default: {