v4.6.1: fix evm package

10xSebastian · 10xSebastian · commit 6832af4bdf18 · 2023-01-08T15:40:43.000+01:00
diff --git a/dist/esm/index.evm.js b/dist/esm/index.evm.js
@@ -9,6 +9,7 @@ supported.solana = [];
 
 const _jsxFileName = "/Users/sebastian/Work/DePay/react-token-image/src/index.evm.js";
 const tokenURIAPI = [{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"}];
+const uriAPI = [{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"uri","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"}];
 const UNKNOWN_IMAGE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjgzLjUgMjgzLjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI4My41IDI4My41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxjaXJjbGUgZmlsbD0iI0YwRUZFRiIgY3g9IjE0MS43IiBjeT0iMTQxLjciIHI9IjE0MS43Ii8+CjxnPgoJPHBhdGggZmlsbD0iI0FCQUJBQiIgZD0iTTEyNywxNzUuMXYtNC40YzAtOC40LDEuMS0xNS4zLDMuNC0yMC43YzIuMy01LjQsNS4xLTEwLDguNC0xMy44YzMuMy0zLjcsNi42LTcsMTAuMS05LjdzNi4zLTUuNiw4LjYtOC41CgkJYzIuMy0yLjksMy40LTYuNCwzLjQtMTAuNWMwLTUtMS4xLTguNy0zLjMtMTEuMWMtMi4yLTIuNC01LTQtOC40LTQuOGMtMy40LTAuOC02LjktMS4zLTEwLjUtMS4zYy01LjgsMC0xMS44LDEtMTcuOSwyLjkKCQljLTYuMSwxLjktMTEuNSw0LjctMTYsOC40Vjc0YzIuMy0xLjcsNS40LTMuMyw5LjQtNC45YzQtMS42LDguNC0yLjksMTMuNC00YzUtMS4xLDEwLjEtMS42LDE1LjUtMS42YzguMSwwLDE1LjEsMS4xLDIxLjEsMy40CgkJYzYsMi4zLDEwLjgsNS41LDE0LjcsOS41YzMuOCw0LDYuNyw4LjcsOC42LDE0LjFjMS45LDUuMywyLjksMTEuMSwyLjksMTcuMmMwLDYuNi0xLjEsMTItMy40LDE2LjNjLTIuMyw0LjMtNS4xLDgtOC41LDExLjIKCQljLTMuNCwzLjItNi44LDYuNC0xMC4yLDkuNWMtMy40LDMuMS02LjMsNi44LTguNiwxMWMtMi4zLDQuMi0zLjQsOS41LTMuNCwxNS45djMuNEgxMjd6IE0xMjUuMiwyMTguMnYtMjcuN2gzM3YyNy43SDEyNS4yeiIvPgo8L2c+Cjwvc3ZnPgo=';
 
 let TokenImage = function(props){
@@ -18,6 +19,7 @@ let TokenImage = function(props){
 
   const blockchain = props.blockchain.toLowerCase();
   const address = props.address;
+  const id = props.id;
 
   useEffect(()=>{
     if(CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
@@ -55,34 +57,43 @@ let TokenImage = function(props){
     setSrc(UNKNOWN_IMAGE);
   };
 
+  const uriToImage = (tokenURI)=>{
+    if(tokenURI.match(/^ipfs/)) {
+      tokenURI = `https://ipfs.io/ipfs/${tokenURI.split('://')[1]}`;
+    }
+    fetch(tokenURI).then((response) => {
+      if (response.ok) { return response.json() }
+      setUnknown();
+    })
+    .then((responseJson) => {
+      if(responseJson) {
+        let image = responseJson.image;
+        if(image){
+          if(image.match(/^ipfs/)) {
+            image = `https://ipfs.io/ipfs/${image.split('://')[1]}`;
+          } 
+          setSource('meta');
+          setSrc(image);
+        } else {
+          setUnknown();
+        }
+      }
+    }).catch(setUnknown);
+  };
+
   const handleLoadError = (error)=> {
     if(source == 'repository') {
       setSource('depay');
       setSrc(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`);
     } else if (source == 'depay' && supported.evm.includes(blockchain)) {
-      request({ blockchain, address, api: tokenURIAPI, method: 'tokenURI', params: [1] }).then(async(tokenURI)=>{
-        if(tokenURI.match(/^ipfs/)) {
-          tokenURI = `https://ipfs.io/ipfs/${tokenURI.split('://')[1]}`;
-        }
-        fetch(tokenURI).then((response) => {
-          if (response.ok) { return response.json() }
-          setUnknown();
-        })
-        .then((responseJson) => {
-          if(responseJson) {
-            let image = responseJson.image;
-            if(image){
-              if(image.match(/^ipfs/)) {
-                image = `https://ipfs.io/ipfs/${image.split('://')[1]}`;
-              } 
-              setSource('meta');
-              setSrc(image);
-            } else {
-              setUnknown();
-            }
-          }
+      if(id) {
+        request({ blockchain, address, api: uriAPI, method: 'uri', params: [id] }).then((uri)=>{
+          uri = uri.match('0x{id}') ? uri.replace('0x{id}', id) : uri;
+          uriToImage(uri);
         }).catch(setUnknown);
-      }).catch(setUnknown);
+      } else {
+        request({ blockchain, address, api: tokenURIAPI, method: 'tokenURI', params: [1] }).then(uriToImage).catch(setUnknown);
+      }
     } else {
       setUnknown();
     }
@@ -94,7 +105,7 @@ let TokenImage = function(props){
     React.createElement('img', {
       className:  props.className ,
       src:  src ,
-      onError:  handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 94}}
+      onError:  handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 105}}
     )
   )
 };
diff --git a/dist/umd/index.evm.js b/dist/umd/index.evm.js
@@ -14,6 +14,7 @@
 
   const _jsxFileName = "/Users/sebastian/Work/DePay/react-token-image/src/index.evm.js";
   const tokenURIAPI = [{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"}];
+  const uriAPI = [{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"uri","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"}];
   const UNKNOWN_IMAGE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjgzLjUgMjgzLjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI4My41IDI4My41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxjaXJjbGUgZmlsbD0iI0YwRUZFRiIgY3g9IjE0MS43IiBjeT0iMTQxLjciIHI9IjE0MS43Ii8+CjxnPgoJPHBhdGggZmlsbD0iI0FCQUJBQiIgZD0iTTEyNywxNzUuMXYtNC40YzAtOC40LDEuMS0xNS4zLDMuNC0yMC43YzIuMy01LjQsNS4xLTEwLDguNC0xMy44YzMuMy0zLjcsNi42LTcsMTAuMS05LjdzNi4zLTUuNiw4LjYtOC41CgkJYzIuMy0yLjksMy40LTYuNCwzLjQtMTAuNWMwLTUtMS4xLTguNy0zLjMtMTEuMWMtMi4yLTIuNC01LTQtOC40LTQuOGMtMy40LTAuOC02LjktMS4zLTEwLjUtMS4zYy01LjgsMC0xMS44LDEtMTcuOSwyLjkKCQljLTYuMSwxLjktMTEuNSw0LjctMTYsOC40Vjc0YzIuMy0xLjcsNS40LTMuMyw5LjQtNC45YzQtMS42LDguNC0yLjksMTMuNC00YzUtMS4xLDEwLjEtMS42LDE1LjUtMS42YzguMSwwLDE1LjEsMS4xLDIxLjEsMy40CgkJYzYsMi4zLDEwLjgsNS41LDE0LjcsOS41YzMuOCw0LDYuNyw4LjcsOC42LDE0LjFjMS45LDUuMywyLjksMTEuMSwyLjksMTcuMmMwLDYuNi0xLjEsMTItMy40LDE2LjNjLTIuMyw0LjMtNS4xLDgtOC41LDExLjIKCQljLTMuNCwzLjItNi44LDYuNC0xMC4yLDkuNWMtMy40LDMuMS02LjMsNi44LTguNiwxMWMtMi4zLDQuMi0zLjQsOS41LTMuNCwxNS45djMuNEgxMjd6IE0xMjUuMiwyMTguMnYtMjcuN2gzM3YyNy43SDEyNS4yeiIvPgo8L2c+Cjwvc3ZnPgo=';
 
   let TokenImage = function(props){
@@ -23,6 +24,7 @@
 
     const blockchain = props.blockchain.toLowerCase();
     const address = props.address;
+    const id = props.id;
 
     React.useEffect(()=>{
       if(web3Constants.CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
@@ -60,34 +62,43 @@
       setSrc(UNKNOWN_IMAGE);
     };
 
+    const uriToImage = (tokenURI)=>{
+      if(tokenURI.match(/^ipfs/)) {
+        tokenURI = `https://ipfs.io/ipfs/${tokenURI.split('://')[1]}`;
+      }
+      fetch(tokenURI).then((response) => {
+        if (response.ok) { return response.json() }
+        setUnknown();
+      })
+      .then((responseJson) => {
+        if(responseJson) {
+          let image = responseJson.image;
+          if(image){
+            if(image.match(/^ipfs/)) {
+              image = `https://ipfs.io/ipfs/${image.split('://')[1]}`;
+            } 
+            setSource('meta');
+            setSrc(image);
+          } else {
+            setUnknown();
+          }
+        }
+      }).catch(setUnknown);
+    };
+
     const handleLoadError = (error)=> {
       if(source == 'repository') {
         setSource('depay');
         setSrc(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`);
       } else if (source == 'depay' && supported.evm.includes(blockchain)) {
-        web3ClientEvm.request({ blockchain, address, api: tokenURIAPI, method: 'tokenURI', params: [1] }).then(async(tokenURI)=>{
-          if(tokenURI.match(/^ipfs/)) {
-            tokenURI = `https://ipfs.io/ipfs/${tokenURI.split('://')[1]}`;
-          }
-          fetch(tokenURI).then((response) => {
-            if (response.ok) { return response.json() }
-            setUnknown();
-          })
-          .then((responseJson) => {
-            if(responseJson) {
-              let image = responseJson.image;
-              if(image){
-                if(image.match(/^ipfs/)) {
-                  image = `https://ipfs.io/ipfs/${image.split('://')[1]}`;
-                } 
-                setSource('meta');
-                setSrc(image);
-              } else {
-                setUnknown();
-              }
-            }
+        if(id) {
+          web3ClientEvm.request({ blockchain, address, api: uriAPI, method: 'uri', params: [id] }).then((uri)=>{
+            uri = uri.match('0x{id}') ? uri.replace('0x{id}', id) : uri;
+            uriToImage(uri);
           }).catch(setUnknown);
-        }).catch(setUnknown);
+        } else {
+          web3ClientEvm.request({ blockchain, address, api: tokenURIAPI, method: 'tokenURI', params: [1] }).then(uriToImage).catch(setUnknown);
+        }
       } else {
         setUnknown();
       }
@@ -99,7 +110,7 @@
       React__default['default'].createElement('img', {
         className:  props.className ,
         src:  src ,
-        onError:  handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 94}}
+        onError:  handleLoadError , __self: this, __source: {fileName: _jsxFileName, lineNumber: 105}}
       )
     )
   };
diff --git a/package.evm.json b/package.evm.json
@@ -1,7 +1,7 @@
 {
   "name": "@depay/react-token-image-evm",
   "moduleName": "ReactTokenImage",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "React component to display token images with fallbacks and unknown state.",
   "main": "./dist/umd/index.evm.js",
   "module": "./dist/esm/index.evm.js",
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@depay/react-token-image",
   "moduleName": "ReactTokenImage",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "React component to display token images with fallbacks and unknown state.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
diff --git a/src/index.evm.js b/src/index.evm.js
@@ -5,6 +5,7 @@ import { request } from '@depay/web3-client-evm'
 import { supported } from './blockchains.evm'
 
 const tokenURIAPI = [{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"}]
+const uriAPI = [{"inputs":[{"internalType":"uint256","name":"tokenId","type":"uint256"}],"name":"uri","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"}]
 const UNKNOWN_IMAGE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjgzLjUgMjgzLjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI4My41IDI4My41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxjaXJjbGUgZmlsbD0iI0YwRUZFRiIgY3g9IjE0MS43IiBjeT0iMTQxLjciIHI9IjE0MS43Ii8+CjxnPgoJPHBhdGggZmlsbD0iI0FCQUJBQiIgZD0iTTEyNywxNzUuMXYtNC40YzAtOC40LDEuMS0xNS4zLDMuNC0yMC43YzIuMy01LjQsNS4xLTEwLDguNC0xMy44YzMuMy0zLjcsNi42LTcsMTAuMS05LjdzNi4zLTUuNiw4LjYtOC41CgkJYzIuMy0yLjksMy40LTYuNCwzLjQtMTAuNWMwLTUtMS4xLTguNy0zLjMtMTEuMWMtMi4yLTIuNC01LTQtOC40LTQuOGMtMy40LTAuOC02LjktMS4zLTEwLjUtMS4zYy01LjgsMC0xMS44LDEtMTcuOSwyLjkKCQljLTYuMSwxLjktMTEuNSw0LjctMTYsOC40Vjc0YzIuMy0xLjcsNS40LTMuMyw5LjQtNC45YzQtMS42LDguNC0yLjksMTMuNC00YzUtMS4xLDEwLjEtMS42LDE1LjUtMS42YzguMSwwLDE1LjEsMS4xLDIxLjEsMy40CgkJYzYsMi4zLDEwLjgsNS41LDE0LjcsOS41YzMuOCw0LDYuNyw4LjcsOC42LDE0LjFjMS45LDUuMywyLjksMTEuMSwyLjksMTcuMmMwLDYuNi0xLjEsMTItMy40LDE2LjNjLTIuMyw0LjMtNS4xLDgtOC41LDExLjIKCQljLTMuNCwzLjItNi44LDYuNC0xMC4yLDkuNWMtMy40LDMuMS02LjMsNi44LTguNiwxMWMtMi4zLDQuMi0zLjQsOS41LTMuNCwxNS45djMuNEgxMjd6IE0xMjUuMiwyMTguMnYtMjcuN2gzM3YyNy43SDEyNS4yeiIvPgo8L2c+Cjwvc3ZnPgo='
 
 let TokenImage = function(props){
@@ -14,6 +15,7 @@ let TokenImage = function(props){
 
   const blockchain = props.blockchain.toLowerCase()
   const address = props.address
+  const id = props.id
 
   useEffect(()=>{
     if(CONSTANTS[blockchain].NATIVE.toLowerCase() == address.toLowerCase()) {
@@ -55,34 +57,43 @@ let TokenImage = function(props){
     setSrc(UNKNOWN_IMAGE)
   }
 
+  const uriToImage = (tokenURI)=>{
+    if(tokenURI.match(/^ipfs/)) {
+      tokenURI = `https://ipfs.io/ipfs/${tokenURI.split('://')[1]}`
+    }
+    fetch(tokenURI).then((response) => {
+      if (response.ok) { return response.json() }
+      setUnknown()
+    })
+    .then((responseJson) => {
+      if(responseJson) {
+        let image = responseJson.image
+        if(image){
+          if(image.match(/^ipfs/)) {
+            image = `https://ipfs.io/ipfs/${image.split('://')[1]}`
+          } 
+          setSource('meta')
+          setSrc(image)
+        } else {
+          setUnknown()
+        }
+      }
+    }).catch(setUnknown)
+  }
+
   const handleLoadError = (error)=> {
     if(source == 'repository') {
       setSource('depay')
       setSrc(`https://integrate.depay.com/tokens/${blockchain}/${address}/image`)
     } else if (source == 'depay' && supported.evm.includes(blockchain)) {
-      request({ blockchain, address, api: tokenURIAPI, method: 'tokenURI', params: [1] }).then(async(tokenURI)=>{
-        if(tokenURI.match(/^ipfs/)) {
-          tokenURI = `https://ipfs.io/ipfs/${tokenURI.split('://')[1]}`
-        }
-        fetch(tokenURI).then((response) => {
-          if (response.ok) { return response.json() }
-          setUnknown()
-        })
-        .then((responseJson) => {
-          if(responseJson) {
-            let image = responseJson.image
-            if(image){
-              if(image.match(/^ipfs/)) {
-                image = `https://ipfs.io/ipfs/${image.split('://')[1]}`
-              } 
-              setSource('meta')
-              setSrc(image)
-            } else {
-              setUnknown()
-            }
-          }
+      if(id) {
+        request({ blockchain, address, api: uriAPI, method: 'uri', params: [id] }).then((uri)=>{
+          uri = uri.match('0x{id}') ? uri.replace('0x{id}', id) : uri
+          uriToImage(uri)
         }).catch(setUnknown)
-      }).catch(setUnknown)
+      } else {
+        request({ blockchain, address, api: tokenURIAPI, method: 'tokenURI', params: [1] }).then(uriToImage).catch(setUnknown)
+      }
     } else {
       setUnknown()
     }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@depay/react-token-image-evm",`
`3`	`3`	`"moduleName": "ReactTokenImage",`
`4`		`- "version": "4.6.0",`
	`4`	`+ "version": "4.6.1",`
`5`	`5`	`"description": "React component to display token images with fallbacks and unknown state.",`
`6`	`6`	`"main": "./dist/umd/index.evm.js",`
`7`	`7`	`"module": "./dist/esm/index.evm.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@depay/react-token-image",`
`3`	`3`	`"moduleName": "ReactTokenImage",`
`4`		`- "version": "4.6.0",`
	`4`	`+ "version": "4.6.1",`
`5`	`5`	`"description": "React component to display token images with fallbacks and unknown state.",`
`6`	`6`	`"main": "./dist/umd/index.js",`
`7`	`7`	`"module": "./dist/esm/index.js",`