Fix view and js code

README.md

@@ -11,17 +11,18 @@ Demo is available on [https://explorer.acrylplatform.com](https://explorer.acryl
 Install [NodeJS](https://nodejs.org/en/download/)
 
 Install gulp:
-```
+```sh
 npm install -g gulp-cli
 ```
 
 # Run locally
 
+```sh
 npm install
+npm start
+```
 
-node server.js
-
-Open http://localhost:3000 in browser. You'll see testnet version of explorer.
+Open http://localhost:8080 in browser. You'll see testnet version of explorer.
 
 # Build
 

src/addresses/BalanceDetails.js

@@ -4,19 +4,19 @@ import PropTypes from 'prop-types';
 const BalanceDetails = ({balance}) => {
     return (
         <div className="info-box grid grid-wrap">
-            <div>
+            <div className="column-sm-6">
                 <div className="line"><label>Regular Balance</label></div>
                 <div className="line">{balance.regular}</div>
             </div>
-            <div>
+            <div className="column-sm-6">
                 <div className="line"><label>Generating Balance</label></div>
                 <div className="line">{balance.generating}</div>
             </div>
-            <div>
+            <div className="column-sm-6">
                 <div className="line"><label>Available Balance</label></div>
                 <div className="line">{balance.available}</div>
             </div>
-            <div>
+            <div className="column-sm-6">
                 <div className="line"><label>Effective Balance</label></div>
                 <div className="line">{balance.effective}</div>
             </div>

src/addresses/SingleAddressPage.js

@@ -33,7 +33,7 @@ export default class SingleAddressPage extends React.Component {
     }
 
     setAcryl(str) {
-        return str.includes('WAVES') ? str.replace('WAVES', 'ACRYL') : str;
+        return str.replace('WAVES', 'ACRYL');
     }
 
     fetchData = () => {

src/main/NetworkInfo.js

@@ -39,7 +39,7 @@ export default class NetworkInfoContainer extends React.Component {
     fetchData = () => {
         const infoService = ServiceFactory.infoService();
         return infoService.loadInfo().then(info => {
-            info.Version = info.Version.includes('Waves') ? info.Version.replace('Waves', 'Acryl') : info.Version;
+            info.Version = info.Version.replace('Waves', 'Acryl');
             const change = Object.assign({}, this.state.info, info);
             this.setState({ info: change });
 

src/main/UnconfirmedTxList.js

@@ -61,13 +61,7 @@ export default class UnconfirmedTxListContainer extends React.Component {
     };
 
     setAcryl = str =>  {
-        if(str.includes('WAVES') ) {
-            return str.replace('WAVES', 'ACRYL');
-        } else if (str.includes('Waves') ) {
-            return str.replace('Waves', 'Acryl');
-        } else {
-            return str;
-        }
+        return str.replace('WAVES', 'ACRYL').replace('Waves', 'Acryl');
     }
 
     fetchData = () => {

src/nodes/NodeListItem.js

@@ -8,7 +8,7 @@ export default class NodeListItem extends React.Component {
 
     render() {
         const {node} = this.props;      
-        node.version = node.version.includes('Waves') ? node.version.replace('Waves', 'Acryl') : node.version;
+        node.version = node.version.replace('Waves', 'Acryl');
         return (
             <tr>
                 <td data-label="Node">

src/peers/PeerList.js

@@ -21,6 +21,11 @@ export default class PeerList extends React.Component {
                 </thead>
                 <tbody>
                 {this.props.peers.map((peer, index) => {
+
+                    // Response server bad ip address
+                    peer.address = peer.address.replace("/","");
+                    if (peer.declaredAddress != "N/A") { peer.declaredAddress = peer.declaredAddress.replace("/",""); }
+
                     return (<PeerListItem key={index} peer={peer} />);
                 })}
                 </tbody>

src/peers/PeerListItem.js

@@ -11,16 +11,16 @@ export default class PeerListItem extends React.Component {
         return (
             <tr>
                 <td data-label="Address">
-                    <div className="line">{peer.address}</div>
+                    <div className="line no-wrap">{peer.address}</div>
                 </td>
                 <td data-label="Declared address">
-                    <div className="line">{peer.declaredAddress}</div>
+                    <div className="line no-wrap">{peer.declaredAddress}</div>
                 </td>
                 <td data-label="Node name">
-                    <div className="line">{peer.name}</div>
+                    <div className="line no-wrap">{peer.name}</div>
                 </td>
                 <td data-label="Node nonce">
-                    <div className="line">{peer.nonce}</div>
+                    <div className="line no-wrap">{peer.nonce}</div>
                 </td>
             </tr>
         );

src/services/AddressService.js

@@ -17,10 +17,10 @@ export class AddressService extends ApiClientService {
         return this.getApi().addresses.details(address).then(balanceResponse => {
             const data = balanceResponse.data;
             return {
-                regular: Money.fromCoins(data.regular, Currency.WAVES).toString(),
-                generating: Money.fromCoins(data.generating, Currency.WAVES).toString(),
-                available: Money.fromCoins(data.available, Currency.WAVES).toString(),
-                effective: Money.fromCoins(data.effective, Currency.WAVES).toString()
+                regular: Money.fromCoins(data.regular, Currency.ACRYL).toString(),
+                generating: Money.fromCoins(data.generating, Currency.ACRYL).toString(),
+                available: Money.fromCoins(data.available, Currency.ACRYL).toString(),
+                effective: Money.fromCoins(data.effective, Currency.ACRYL).toString()
             };
         });
     };

src/services/CurrencyService.js

@@ -25,7 +25,7 @@ export class CurrencyService extends ApiClientService {
 
     get = assetId => {
         if (!assetId) {
-            return Promise.resolve(Currency.WAVES);
+            return Promise.resolve(Currency.ACRYL);
         }
 
         const currency = this.currencyCache[assetId];

src/services/TransactionTransformerService.js

@@ -126,7 +126,7 @@ const transformMassTransfer = (currencyService, spamDetectionService, tx) => {
 const transformAlias = (currencyService, tx) => {
     return Promise.resolve(
         Object.assign(copyMandatoryAttributes(tx), {
-            fee: Money.fromCoins(tx.fee, Currency.WAVES),
+            fee: Money.fromCoins(tx.fee, Currency.ACRYL),
             alias: tx.alias
         })
     );
@@ -137,7 +137,7 @@ const transformLease = (currencyService, tx) => {
         return Object.assign(copyMandatoryAttributes(tx), {
             recipient: tx.recipient,
             fee: Money.fromCoins(tx.fee, feeCurrency),
-            amount: Money.fromCoins(tx.amount, Currency.WAVES),
+            amount: Money.fromCoins(tx.amount, Currency.ACRYL),
             status: tx.status
         })
     });
@@ -171,9 +171,9 @@ const transformExchange = (currencyService, tx) => {
         const amount = Money.fromCoins(tx.amount, currencyPair.amountAsset);
 
         return Object.assign(copyMandatoryAttributes(tx), {
-            fee: Money.fromCoins(tx.fee, Currency.WAVES),
-            buyFee: Money.fromCoins(tx.buyMatcherFee, Currency.WAVES),
-            sellFee: Money.fromCoins(tx.sellMatcherFee, Currency.WAVES),
+            fee: Money.fromCoins(tx.fee, Currency.ACRYL),
+            buyFee: Money.fromCoins(tx.buyMatcherFee, Currency.ACRYL),
+            sellFee: Money.fromCoins(tx.sellMatcherFee, Currency.ACRYL),
             price,
             amount,
             total: Money.fromTokens(price.toTokens() * amount.toTokens(), currencyPair.priceAsset),
@@ -195,15 +195,15 @@ const transformOrder = (order, assetPair) => {
         price: OrderPrice.fromBackendPrice(order.price, assetPair),
         timestamp: new DateTime(order.timestamp),
         expiration: new DateTime(order.expiration),
-        fee: Money.fromCoins(order.matcherFee, Currency.WAVES)
+        fee: Money.fromCoins(order.matcherFee, Currency.ACRYL)
     };
 };
 
 const tranformBurn = (currencyService, tx) => {
     return currencyService.get(tx.assetId).then(currency => {
         return Object.assign(copyMandatoryAttributes(tx), {
             amount: Money.fromCoins(tx.amount, currency),
-            fee: Money.fromCoins(tx.fee, Currency.WAVES)
+            fee: Money.fromCoins(tx.fee, Currency.ACRYL)
         });
     });
 };
@@ -212,7 +212,7 @@ const transformReissue = (currencyService, tx) => {
     return currencyService.get(tx.assetId).then(currency => {
         return Object.assign(copyMandatoryAttributes(tx), {
             amount: Money.fromCoins(tx.quantity, currency),
-            fee: Money.fromCoins(tx.fee, Currency.WAVES),
+            fee: Money.fromCoins(tx.fee, Currency.ACRYL),
             reissuable: tx.reissuable,
 
         });
@@ -226,7 +226,7 @@ const transformIssue = (currencyService, tx) => {
     return currencyService.get(c.id).then(currency => {
         return Object.assign(copyMandatoryAttributes(tx), {
             amount: Money.fromCoins(tx.quantity, currency),
-            fee: Money.fromCoins(tx.fee, Currency.WAVES),
+            fee: Money.fromCoins(tx.fee, Currency.ACRYL),
             name: tx.name,
             reissuable: tx.reissuable,
             decimals: tx.decimals,

src/shared/Currency.js

@@ -16,7 +16,7 @@ export default class Currency {
         }
     }
 
-    static WAVES = new Currency({
+    static ACRYL = new Currency({
         id: '',
         displayName: 'Acryl',
         shortName: 'ACRYL',

src/shared/CurrencyRef.js

@@ -5,7 +5,7 @@ import Currency from './Currency';
 import TransactionRef from './TransactionRef';
 
 const CurrencyRef = ({currency}) => {
-    if (currency === Currency.WAVES)
+    if (currency === Currency.ACRYL)
         return currency.toString();
 
     return <TransactionRef txId={currency.id} text={currency.toString()} />;

src/shared/DictionaryItem.js

@@ -21,12 +21,4 @@ export default class DictionaryItem extends React.PureComponent {
             </div>
         );
     }
-}
-
-{/*<div className="dictionary-pair">*/}
-    {/*<div className="dictionary-pair-key">{this.props.label}</div>*/}
-    {/*<div className="dictionary-pair-value">{this.props.action && <div className="ellipsis">{this.props.value}</div>}</div>*/}
-    {/*{this.props.action && <div className="dictionary-action">*/}
-        {/*{this.props.action}*/}
-    {/*</div>}*/}
-{/*</div>*/}
+}

src/shared/Loader.js

@@ -16,6 +16,10 @@ export default class Loader extends React.Component {
         hasError: false
     };
 
+    componentWillUnmount() {
+        this.setState({loading: false});
+    }
+
     componentDidMount() {
         this.setState({loading: true});
         this.props.fetchData()

src/shared/Money.js

@@ -119,5 +119,5 @@ export default class Money {
 }
 
 // set up decimal to format 0.00000001 as is instead of 1e-8
-Decimal.config({toExpNeg: -(Currency.WAVES.precision + 1)});
+Decimal.config({toExpNeg: -(Currency.ACRYL.precision + 1)});
 

src/styles/general.scss

@@ -14,6 +14,14 @@
                 )))
         );
     }
+
+    @each $num in 1,2 {
+        .column-sm-6:nth-child(#{$num}) {
+            @include breakpoint(sm) {
+                margin-bottom: 10px;
+            }
+        }
+    }
 }
 
 .line {
@@ -158,6 +166,7 @@
 
     .title {
         @include font(headline1);
+        margin-right: 5px;
     }
 
     .title-details {

src/styles/main.scss

@@ -164,7 +164,7 @@ body {
             &::after {
                 content: "Explorer";
                 left: 132px;
-                bottom: -8px;
+                bottom: -5px;
                 position: relative;
                 @include font(headline1);
             }
@@ -195,6 +195,8 @@ body {
 
     > .menu-list {
         padding-top: 39px;
+        flex-grow: 1;
+        min-height: calc(100vh - 350px);
 
         > .menu-item {
             position: relative;
@@ -309,7 +311,6 @@ body {
 
     > .menu-footer {
         @include font(body, basic500);
-        position: fixed;
         bottom: map-get($layout, padding-top);
 
         > * {
@@ -575,6 +576,7 @@ body {
             background: map-get($colors, iceBlue);
             position: relative;
             padding: 6px 40px 6px 8px;
+            margin-left: 12px;
 
             &:hover {
                 background: map-get($colors, paleBlue);

src/transactions/TransactionToDictionaryTransformer.js

@@ -294,7 +294,7 @@ const buildAmountItem = tx => ({
 });
 
 const setAcryl = str =>  {
-    return str.includes('WAVES') ? str.replace('WAVES', 'ACRYL') : str;
+    return str.replace('WAVES', 'ACRYL');
 }
 
 export default transactionToDictionary;