feat(slp): Added slp-mutable-data to gatsby-web-wallet

package.json

@@ -51,6 +51,8 @@
     "react-qr-reader": "^2.2.1",
     "react-redux": "^7.2.4",
     "semver": "^7.3.5",
+    "sharp": "^0.29.3",
+    "slp-mutable-data": "^1.2.2",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0"
   },

src/components/admin-lte/tokens/index.js

@@ -6,7 +6,7 @@ import TokenModal from './token-modal'
 import Spinner from '../../../images/loader.gif'
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import SendTokens from './send-tokens'
-
+import { SlpMutableData } from 'slp-mutable-data'
 let _this
 class Tokens extends React.Component {
   constructor (props) {
@@ -161,9 +161,10 @@ class Tokens extends React.Component {
       } else {
         tokens = await bchWallet.listTokens()
       }
+      const mutableTokens = await _this.handleMutableData(tokens)
 
       _this.setState({
-        tokens,
+        tokens: mutableTokens,
         inFetch: false
       })
 
@@ -171,7 +172,7 @@ class Tokens extends React.Component {
         throw new Error('No tokens found on this wallet.')
       }
 
-      _this.props.setTokensInfo(tokens)
+      _this.props.setTokensInfo(mutableTokens)
     } catch (error) {
       _this.handleError(error)
     }
@@ -264,6 +265,30 @@ class Tokens extends React.Component {
       explorerURL
     })
   }
+
+  // try to get mutable data from token id
+  async handleMutableData (tokensArr) {
+    try {
+      const tokens = []
+      const slpMutableLib = new SlpMutableData()
+      for (let i = 0; i < tokensArr.length; i++) {
+        const token = tokensArr[i]
+        try {
+          const data = await slpMutableLib.get.mutableData(token.tokenId)
+          token.mutableData = data
+          // console.log(`data: ${JSON.stringify(data, null, 2)}`)
+        } catch (error) {
+          console.warn(error)
+          // Skip error
+        }
+        tokens.push(token)
+      }
+
+      return tokens
+    } catch (error) {
+      console.warn(error)
+    }
+  }
 }
 Tokens.propTypes = {
   walletInfo: PropTypes.object.isRequired, // wallet info

src/components/admin-lte/tokens/token-card.js

@@ -13,6 +13,7 @@ class TokenCard extends React.Component {
 
   render () {
     const token = _this.props.token
+    const mutableData = token.mutableData
     // console.log(`token: ${JSON.stringify(token, null, 2)}`)
 
     return (
@@ -20,7 +21,7 @@ class TokenCard extends React.Component {
         <Box className='hover-shadow border-none mt-2' id='token-card'>
           <Row className='text-center'>
             <Col sm={12} className='text-center mt-2 '>
-              <Jdenticon size='100' value={token.tokenId} />
+              {mutableData && mutableData.tokenIcon ? <img className='mutable-img' src={mutableData.tokenIcon} width={100} /> : <Jdenticon size='100' value={token.tokenId} />}
               <hr />
             </Col>
             <Col sm={12} className='flex justify-content-center  '>

src/components/admin-lte/tokens/token.css

@@ -104,4 +104,7 @@
   }
 .nopadding{
       padding: 0!important;
+  }
+  .mutable-img{
+      margin-bottom: 5px;
   }