Merge pull request #108 from HathorNetwork/dev

Release v0.7.9

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hathor-admin",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "private": true,
   "dependencies": {
     "@hathor/wallet-lib": "^0.11.1",

src/components/TxData.js

@@ -170,7 +170,7 @@ class TxData extends React.Component {
         return (
           <div key={`${input.tx_id}${input.index}`}>
             <Link to={`/transaction/${input.tx_id}`}>{helpers.getShortHash(input.tx_id)}</Link> ({input.index})
-            {renderOutput(input, 0, false)}
+            {renderInputOrOutput(input, 0, false)}
           </div>
         );
       });
@@ -197,21 +197,29 @@ class TxData extends React.Component {
       }
     }
 
-    const renderOutput = (output, idx, addBadge) => {
+    const renderOutputLink = (idx) => {
+      if (idx in this.props.spentOutputs) {
+        return <span> (<Link to={`/transaction/${this.props.spentOutputs[idx]}`}>Spent</Link>)</span>;
+      } else {
+        return null;
+      }
+    }
+
+    const renderInputOrOutput = (output, idx, isOutput) => {
       return (
         <div key={idx}>
           <div>{outputValue(output)} {renderOutputToken(output)}</div>
           <div>
             {renderDecodedScript(output)}
-            {idx in this.props.spentOutputs ? <span> (<Link to={`/transaction/${this.props.spentOutputs[idx]}`}>Spent</Link>)</span> : ''}
+            {isOutput && renderOutputLink(idx)}
           </div>
         </div>
       );
     }
 
     const renderOutputs = (outputs) => {
       return outputs.map((output, idx) => {
-        return renderOutput(output, idx, true);
+        return renderInputOrOutput(output, idx, true);
       });
     }
 
@@ -464,11 +472,11 @@ class TxData extends React.Component {
           </div>
           <div className="d-flex flex-column flex-lg-row align-items-start mb-3 w-100">
             <div className="f-flex flex-column align-items-start common-div bordered-wrapper mr-lg-3 w-100">
-              <div><label>Inputs:</label></div>
+              <div><label>Inputs ({ this.props.transaction.inputs.length })</label></div>
               {renderInputs(this.props.transaction.inputs)}
             </div>
             <div className="d-flex flex-column align-items-center common-div bordered-wrapper mt-3 mt-lg-0 w-100">
-              <div><label>Outputs:</label></div>
+              <div><label>Outputs ({ this.props.transaction.outputs.length })</label></div>
               {renderOutputs(this.props.transaction.outputs)}
             </div>
           </div>

src/components/token/TokenAlerts.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import { tokenBannedMessage } from '../../messages';
+
+
+const TokenAlerts = (props) => {
+  const [token, setToken] = useState(props.token);
+
+  useEffect(() => {
+    setToken(props.token);
+  }, [props.token]);
+
+  const bannedAlert = () => {
+    if (!token.banned) {
+      return null;
+    }
+
+    return (
+      <div className="alert alert-danger backup-alert" role="alert">
+        <i className="fa fa-exclamation-triangle mr-2" title="Banned Token"></i>
+          {tokenBannedMessage}
+      </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,50 @@
+import React, { useState, useEffect } from 'react';
+import { tokenBannedMessage } from '../../messages';
+
+
+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;
+    }
+
+    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">
+          {tokenBannedMessage}
+        </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);
@@ -52,14 +52,26 @@ const TokenNFTPreview = (props) => {
     media = <img src={token.meta.nft.file} width="100%" height="100%" alt="NFT Preview" />;
   } else if(nftType === NFT_MEDIA_TYPES.video && fileType) {
     media = (
-      <video controls controlsList="nodownload noremoteplayback" disablePictureInPicture onPlay={onPlayMedia}>
+      <video
+        controls
+        controlsList="nodownload noremoteplayback"
+        disablePictureInPicture onPlay={onPlayMedia}
+        loop={token.meta.nft.loop}
+        autoPlay={token.meta.nft.autoplay}
+      >
         <source src={token.meta.nft.file} type={fileType} />
         Your browser does not support html video tag.
       </video>
     )
   } else if(nftType === NFT_MEDIA_TYPES.audio && fileType) {
     media = (
-      <audio controls controlsList="nodownload" onPlay={onPlayMedia} >
+      <audio
+        controls
+        controlsList="nodownload"
+        onPlay={onPlayMedia}
+        loop={token.meta.nft.loop}
+        autoPlay={token.meta.nft.autoplay}
+      >
         <source src={token.meta.nft.file} type={fileType} />
         Your browser does not support the audio element.
       </audio>

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/constants.js

@@ -45,7 +45,7 @@ export const TESTNET_GENESIS_TX = [
 
 export const DECIMAL_PLACES = 2;
 
-export const VERSION = '0.7.8';
+export const VERSION = '0.7.9';
 
 export const MIN_API_VERSION = '0.33.0';
 

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} />