feat: show token metadata

src/components/token/TokenAlerts.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+
+
+const TokenAlerts = (props) => {
+  const [token, setToken] = useState(props.token);
+
+  useEffect(() => {
+    setToken(props.token);
+  }, [props.token]);
+
+  const bannedAlert = () => {
+    if (!token.banned) {
+      return null;
+    }
+
+    const bannedMessage = ''; // TODO: this message is being disscussed here: https://github.com/HathorNetwork/hathor-explorer/issues/92
+
+    return (
+      <div className="alert alert-danger backup-alert" role="alert">
+        <i className="fa fa-exclamation-triangle mr-2" title="Banned Token"></i>
+          {bannedMessage}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="alert alert-warning backup-alert" role="alert">
+        Only the UID is unique, there might be more than one token with the same name and symbol.
+      </div>
+      {bannedAlert()}
+    </>
+  );
+}
+
+export default TokenAlerts;

src/components/TokenConfig.js → src/components/token/TokenConfig.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import hathorLib from '@hathor/wallet-lib';
-import HathorAlert from './HathorAlert';
+import HathorAlert from '../HathorAlert';
 import QRCode from 'qrcode.react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 

src/components/TokenDetailsTop.js → src/components/token/TokenDetailsTop.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import TokenConfig from '../components/TokenConfig';
-import TokenInfo from '../components/TokenInfo';
+import TokenConfig from './TokenConfig';
+import TokenInfo from './TokenInfo';
+import TokenTitle from './TokenTitle';
+
 
 const TokenDetailsTop = (props) => {
   const [token, setToken] = useState(props.token);
@@ -13,7 +15,7 @@ const TokenDetailsTop = (props) => {
     <>
       <div className='d-flex flex-column justify-content-between mt-4 mb-3'>
         <p className='token-name mb-0 mt-4'>
-          <strong>{token.name} ({token.symbol})</strong>
+          <TokenTitle token={token} />
         </p>
       </div>
       <div className='d-flex flex-column flex-lg-row align-items-lg-stretch align-items-center justify-content-between mb-4'>

src/components/TokenDetailsTopNFT.js → src/components/token/TokenDetailsTopNFT.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import TokenConfig from '../components/TokenConfig';
-import TokenInfo from '../components/TokenInfo';
-import TokenNFTPreview from '../components/TokenNFTPreview';
+import TokenConfig from './TokenConfig';
+import TokenInfo from './TokenInfo';
+import TokenNFTPreview from './TokenNFTPreview';
 
 const TokenDetailsTopNFT = (props) => {
   const [token, setToken] = useState(props.token);

src/components/token/TokenMarkers.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+
+
+const TokenMarkers = (props) => {
+  const [token, setToken] = useState(props.token);
+
+  useEffect(() => {
+    setToken(props.token);
+  }, [props.token]);
+
+  const verifiedMarker = () => {
+    if (!token.verified) {
+      return null;
+    }
+
+    return (
+      <button className="info-hover-wrapper btn btn-link pl-2">
+        <i className="fa fa-check-circle fa-lg text-info" title="Verified"></i>
+        <span className="subtitle info-hover-popover">
+          This is a verified token. <a href="https://hathor.network" >Learn more.</a>
+        </span>
+      </button>
+    )
+  }
+
+  const bannedMarker = () => {
+    if (!token.banned) {
+      return null;
+    }
+
+    const bannedMessage = ''; // TODO: this message is being disscussed here: https://github.com/HathorNetwork/hathor-explorer/issues/92
+
+    return (
+      <button className="info-hover-wrapper btn btn-link pl-2">
+        <i className="fa fa-exclamation-triangle fa-lg text-danger" title="Banned"></i>
+        <span className="subtitle info-hover-popover">
+          {bannedMessage}
+        </span>
+      </button>
+    )
+  }
+
+  return (
+    <>
+      {verifiedMarker()}
+      {bannedMarker()}
+    </>
+  );
+}
+
+export default TokenMarkers;

src/components/TokenNFTPreview.js → src/components/token/TokenNFTPreview.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import TagManager from 'react-gtm-module';
-import helpers from '../utils/helpers';
-import { NFT_MEDIA_TYPES, VIDEO_MEDIA_TYPES_BY_EXTENSION, AUDIO_MEDIA_TYPES_BY_EXTENSION } from '../constants';
+import helpers from '../../utils/helpers';
+import { NFT_MEDIA_TYPES, VIDEO_MEDIA_TYPES_BY_EXTENSION, AUDIO_MEDIA_TYPES_BY_EXTENSION } from '../../constants';
 
 const TokenNFTPreview = (props) => {
   const [token, setToken] = useState(props.token);

src/components/token/TokenTitle.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import TokenMarkers from './TokenMarkers';
+
+
+const TokenTitle = (props) => {
+
+  const [token, setToken] = useState(props.token);
+
+  useEffect(() => {
+    setToken(props.token);
+  }, [props.token]);
+
+  const bannedClassName = () => {
+    if (!token.banned) {
+      return '';
+    }
+
+    return 'text-danger'
+  }
+
+  return (
+    <>
+      <strong className={bannedClassName()} >{token.name} ({token.symbol})</strong>
+      <TokenMarkers token={token} />
+    </>
+  )
+
+}
+
+export default TokenTitle;

src/screens/TokenDetail.js

@@ -10,8 +10,10 @@ import Transactions from '../components/Transactions';
 import hathorLib from '@hathor/wallet-lib';
 import tokenApi from '../api/tokenApi';
 import { TX_COUNT } from '../constants';
-import TokenDetailsTop from '../components/TokenDetailsTop';
-import TokenDetailsTopNFT from '../components/TokenDetailsTopNFT';
+import TokenDetailsTop from '../components/token/TokenDetailsTop';
+import TokenDetailsTopNFT from '../components/token/TokenDetailsTopNFT';
+import TokenAlerts from '../components/token/TokenAlerts';
+
 
 /**
  * Screen to manage a token. See total amount, if can mint/melt and the history of transaction
@@ -150,21 +152,13 @@ class TokenDetail extends React.Component {
 
     if (!this.state.token) return null;
 
-    const renderTokenAlert = () => {
-      return (
-        <div className="alert alert-warning backup-alert" role="alert">
-          Only the UID is unique, there might be more than one token with the same name and symbol.
-        </div>
-      )
-    }
-
     const isNFT = () => {
       return this.state.token.meta && this.state.token.meta.nft;
     }
 
     return (
       <div className="content-wrapper flex align-items-center">
-        {renderTokenAlert()}
+        <TokenAlerts token={this.state.token} />
         { isNFT() ? 
           <TokenDetailsTopNFT token={this.state.token} />
           : <TokenDetailsTop token={this.state.token} />