fix(v0.1.2): Resolve IPFS CIDs from localhost in sandbox mode

client/src/components/Collections/Catalog/TokenGrid.tsx

@@ -4,8 +4,10 @@ import { AspectRatio, Box, Flex, Grid, Image, Text } from '@chakra-ui/react';
 import { Wind, HelpCircle } from 'react-feather';
 import { Token, CollectionsState } from '../../../reducer/slices/collections';
 import { ipfsUriToGatewayUrl } from '../../../lib/util/ipfs';
+import { useSelector } from '../../../reducer';
 
 interface TokenTileProps extends Token {
+  network: string;
   selectedCollection: string;
 }
 
@@ -61,7 +63,9 @@ function TokenTile(props: TokenTileProps) {
     >
       <AspectRatio ratio={3 / 2}>
         <Box p={4}>
-          <TokenImage src={ipfsUriToGatewayUrl(props.artifactUri)} />
+          <TokenImage
+            src={ipfsUriToGatewayUrl(props.network, props.artifactUri)}
+          />
         </Box>
       </AspectRatio>
       <Flex
@@ -84,6 +88,7 @@ interface TokenGridProps {
 }
 
 export default function TokenGrid({ state, walletAddress }: TokenGridProps) {
+  const network = useSelector(s => s.system.config.network);
   const selectedCollection = state.selectedCollection;
 
   if (selectedCollection === null) {
@@ -131,6 +136,7 @@ export default function TokenGrid({ state, walletAddress }: TokenGridProps) {
           <TokenTile
             key={token.id}
             selectedCollection={selectedCollection}
+            network={network}
             {...token}
           />
         );

client/src/components/Collections/TokenDetail/index.tsx

@@ -134,7 +134,9 @@ function TokenDetail({ contractAddress, tokenId }: TokenDetailProps) {
           </MinterButton>
         </Flex>
         <Flex align="center" justify="center" flex="1" px={16}>
-          <TokenImage src={ipfsUriToGatewayUrl(token.artifactUri)} />
+          <TokenImage
+            src={ipfsUriToGatewayUrl(system.config.network, token.artifactUri)}
+          />
         </Flex>
       </Flex>
       <Flex w="50%" h="100%" flexDir="column">

client/src/components/CreateNonFungiblePage/FileUpload.tsx

@@ -11,6 +11,7 @@ import { uploadFiletoIpfs } from '../../lib/util/ipfs';
 
 export default function FileUpload() {
   const state = useSelector(s => s.createNft);
+  const network = useSelector(s => s.system.config.network);
   const dispatch = useDispatch();
 
   const onDrop = useCallback(
@@ -59,7 +60,7 @@ export default function FileUpload() {
             p={4}
             maxWidth="400px"
             maxHeight="400px"
-            src={ipfsUriToGatewayUrl(state.artifactUri)}
+            src={ipfsUriToGatewayUrl(network, state.artifactUri)}
           />
         ) : (
           <Flex

client/src/components/CreateNonFungiblePage/Preview.tsx

@@ -4,6 +4,7 @@ import { ipfsUriToGatewayUrl, uriToCid } from '../../lib/util/ipfs';
 import { useSelector } from '../../reducer';
 
 export default function Preview() {
+  const network = useSelector(s => s.system.config.network);
   const state = useSelector(s => s.createNft);
   const { name, description } = state.fields;
   return (
@@ -25,7 +26,9 @@ export default function Preview() {
       >
         <Image
           src={
-            (state.artifactUri && ipfsUriToGatewayUrl(state.artifactUri)) || ''
+            (state.artifactUri &&
+              ipfsUriToGatewayUrl(network, state.artifactUri)) ||
+            ''
           }
           overflow="hidden"
           objectFit="contain"

client/src/lib/util/ipfs.ts

@@ -33,9 +33,13 @@ export function ipfsUriToCid(uri: string) {
   return null;
 }
 
-export function ipfsUriToGatewayUrl(uri: string) {
+export function ipfsUriToGatewayUrl(network: string, uri: string) {
+  const ipfsHost =
+    network === 'sandbox'
+      ? 'http://localhost:5001'
+      : 'https://cloudflare-ipfs.com';
   const cid = ipfsUriToCid(uri);
-  return cid ? `https://cloudflare-ipfs.com/ipfs/${cid}` : uri;
+  return cid ? `${ipfsHost}/ipfs/${cid}` : uri;
 }
 
 export function uriToCid(uri: string) {