Merge pull request #1605 from AmbireTech/use-nft-proxy

Fix Image component for nfts

Author: stojnovsky

src/components/Modals/HideCollectibleModal/Collectible/Collectible.js

@@ -1,15 +1,16 @@
 import styles from './Collectible.module.scss'
 
-const Collectible = ({ button, handleUri, asset }) => (
+const Collectible = ({ button, asset}) =>{
+  return (
   <div className={styles.wrapper}>
     <div className={styles.info}>
       <div className={styles.iconWrapper}>
-        <img src={handleUri(asset.data.image)} alt="" className={styles.icon} />
+        <img src={asset.data.image} alt="" className={styles.icon} />
       </div>
-      <h3 className={styles.name}>{asset.data.name}</h3>
+      <h3 className={styles.name}>{asset.name}</h3>
     </div>
     {button}
   </div>
-)
+)}
 
 export default Collectible

src/components/Modals/HideCollectibleModal/HideCollectibleModal.js

@@ -7,7 +7,7 @@ import Collectible from './Collectible/Collectible'
 
 import styles from './HideCollectibleModal.module.scss'
 
-const HideCollectibleModal = ({ portfolio, setIsHideCollectiblesModalOpen, handleUri }) => {
+const HideCollectibleModal = ({ portfolio, setIsHideCollectiblesModalOpen }) => {
   const { hideModal, setOnClose } = useModals()
   const { hiddenCollectibles, onAddHiddenCollectible, onRemoveHiddenCollectible, collectibles } =
     portfolio
@@ -70,7 +70,6 @@ const HideCollectibleModal = ({ portfolio, setIsHideCollectiblesModalOpen, handl
                 />
               )
             }
-            handleUri={handleUri}
           />
         ))
       )}

src/components/Wallet/Collectible/Collectible.js

@@ -4,7 +4,8 @@ import { useParams } from 'react-router-dom'
 import { Interface } from 'ethers/lib/utils'
 import { useEffect, useState, useRef, useMemo } from 'react'
 import { AiOutlineSend } from 'react-icons/ai'
-import { BsFillImageFill, BsXLg } from 'react-icons/bs'
+import {  BsXLg } from 'react-icons/bs'
+import FallbackImage from 'resources/icons/fallback.svg'
 import * as blockies from 'blockies-ts'
 import { useToasts } from 'hooks/toasts'
 import {
@@ -14,7 +15,8 @@ import {
   AddressBook,
   AddressWarning,
   ToolTip,
-  Panel
+  Panel,
+  Image
 } from 'components/common'
 import ERC721Abi from 'ambire-common/src/constants/abis/ERC721Abi'
 import { validateSendNftAddress } from 'lib/validations/formValidations'
@@ -24,22 +26,6 @@ import useConstants from 'hooks/useConstants'
 
 const ERC721 = new Interface(ERC721Abi)
 
-const handleUri = (uri) => {
-  if (!uri) return ''
-  uri = uri.startsWith('data:application/json')
-    ? uri.replace('data:application/json;utf8,', '')
-    : uri
-
-  if (uri.split('/').length === 1) return `https://ipfs.io/ipfs/${uri}`
-  if (uri.split('/')[0] === 'data:image') return uri
-  if (uri.startsWith('ipfs://'))
-    return uri.replace(/ipfs:\/\/ipfs\/|ipfs:\/\//g, 'https://ipfs.io/ipfs/')
-  if (uri.split('/')[2] && uri.split('/')[2].endsWith('mypinata.cloud'))
-    return `https://ipfs.io/ipfs/${uri.split('/').slice(4).join('/')}`
-
-  return uri
-}
-
 const Collectible = ({ portfolio, selectedAcc, selectedNetwork, addRequest, addressBook }) => {
   const {
     constants: { humanizerInfo }
@@ -248,8 +234,14 @@ const Collectible = ({ portfolio, selectedAcc, selectedNetwork, addRequest, addr
         </div>
 
         <div className="metadata">
-          <div className="image" style={{ backgroundImage: `url(${handleUri(metadata.image)})` }}>
-            {!metadata.image ? <BsFillImageFill /> : null}
+          <div className="image" >
+            <Image
+              alt=""
+              style={{width:"100%"}}
+              src={metadata.image}
+              fallbackImage={FallbackImage}
+              size={"100%"}
+            />
           </div>
           <div className="info">
             <div className="name">{metadata.name}</div>

src/components/Wallet/Collectible/Collectible.scss

@@ -3,7 +3,17 @@
 #collectible {
   display: flex;
   gap: 1.875rem;
+  .artworkWrapper {
+    // max-height: $collectible-size;
+    height: 100%;
+    align-items: center;
+    background-color: rgba($c-fiord, 0.2);
 
+    .artwork {
+      width: 100%;
+      // max-height: $collectible-size;
+    }
+  }
   .address {
     font-family: 'Ubuntu Mono';
   }

src/components/Wallet/Dashboard/Collectibles/Collectibles.js

@@ -9,21 +9,6 @@ import CollectiblesPlaceholder from './CollectiblesPlaceholder/CollectiblesPlace
 import CollectiblesWrapper from './CollectiblesWrapper/CollectiblesWrapper'
 import Collectible from './Collectible/Collectible'
 
-const handleUri = (uri) => {
-  if (!uri) return ''
-  uri = uri.startsWith('data:application/json')
-    ? uri.replace('data:application/json;utf8,', '')
-    : uri
-
-  if (uri.split('/').length === 1) return `https://ipfs.io/ipfs/${uri}`
-  if (uri.split('/')[0] === 'data:image') return uri
-  if (uri.startsWith('ipfs://'))
-    return uri.replace(/ipfs:\/\/ipfs\/|ipfs:\/\//g, 'https://ipfs.io/ipfs/')
-  if (uri.split('/')[2] && uri.split('/')[2].endsWith('mypinata.cloud'))
-    return `https://ipfs.io/ipfs/${uri.split('/').slice(4).join('/')}`
-
-  return uri
-}
 
 const Collectibles = ({ portfolio, isPrivateMode, selectedNetwork, footer }) => {
   const { showModal } = useModals()
@@ -41,7 +26,6 @@ const Collectibles = ({ portfolio, isPrivateMode, selectedNetwork, footer }) =>
         <HideCollectibleModal
           portfolio={portfolio}
           setIsHideCollectiblesModalOpen={setIsHideCollectiblesModalOpen}
-          handleUri={handleUri}
         />
       )
     }
@@ -77,7 +61,7 @@ const Collectibles = ({ portfolio, isPrivateMode, selectedNetwork, footer }) =>
             collectionIcon={data && data.image}
             collectionName={collectionName}
             name={(data && data.name) || name || collectionName}
-            image={handleUri(data && data.image)}
+            image={data && data.image}
             price={balanceUSD.toFixed(2)}
           />
         ))

src/components/common/Image/Image.js

@@ -20,7 +20,6 @@ function Image({
   // because the `src` prop is not being attached at all to the <img> tag (I guess JSX omits falsy props for the `src` prop).
   // That's the reason why we set `failed` value initially, based on the `src` value.
   const [failed, setFailed] = useState(isFailed(src))
-
   useEffect(() => {
     setFailed(isFailed(src))
   }, [src])

src/config/index.js

@@ -13,3 +13,4 @@ export const SUSHI_SWAP_FRAME_EXCEPTIONS = process.env.REACT_APP_SUSHI_SWAP_FRAM
 export const SIGNATURE_VERIFIER_DEBUGGER =
   (process.env.REACT_APP_SIGNATURE_VERIFIER_DEBUGGER * 1 && true) || false
 export const COINGECKO_API_URL = process.env.COINGECKO_API_URL || 'https://cena.ambire.com/api/v3'
+export const NFT_CDN_URL = process.env.REACT_APP_NFT_CDN_URL || 'https://nftcdn.ambire.com'