translate interpolation

react/src/actions/actions/nativeSend.js

@@ -156,7 +156,7 @@ export function sendNativeTx(coin, _payload) {
           } else if (json.indexOf('"code":-5') > -1) {
             dispatch(
               triggerToaster(
-                `Invalid ${coin} address`,
+                translate('TOASTR.INVALID_ADDRESS', coin),
                 translate('TOASTR.WALLET_NOTIFICATION'),
                 'error',
               )

react/src/components/dashboard/walletsData/walletsData.render.js

@@ -13,7 +13,8 @@ export const AddressTypeRender = function() {
   return (
     <span>
       <span className="label label-default">
-        <i className="icon fa-eye"></i> { translate('IAPI.PUBLIC_SM') }
+        <i className="icon fa-eye"></i>&nbsp;
+        { translate('IAPI.PUBLIC_SM') }
       </span>
     </span>
   );
@@ -34,7 +35,7 @@ export const AddressRender = function(tx) {
   if (!tx.address) {
     return (
       <span>
-        <i className="icon fa-bullseye"></i>
+        <i className="icon fa-bullseye"></i>&nbsp;
         <span className="label label-dark">
           { translate('DASHBOARD.ZADDR_NOT_LISTED') }
         </span>
@@ -200,7 +201,7 @@ export const WalletsDataRender = function() {
                     <div className={ 'margin-bottom-3 basilisk-progress-bar ' + (this.state.currentStackLength === 1 || (this.state.currentStackLength === 0 && this.state.totalStackLength === 0) ? 'hide' : 'progress progress-sm') }>
                       <div
                         className="progress-bar progress-bar-striped active progress-bar-indicating progress-bar-success font-size-80-percent"
-                        style={{ width: _basiliskProgressBarWidth + '%' }}>
+                        style={{ width: `${_basiliskProgressBarWidth}%` }}>
                         { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength }
                       </div>
                     </div>

react/src/components/main/main.js

@@ -2,6 +2,7 @@ import React from 'react';
 import WalletMain from './walletMain';
 import { iguanaSetRPCAuth } from '../../util/auth';
 import Store from '../../store';
+import { translate } from '../../translate/translate';
 import {
   Config,
   getDexCoins,
@@ -39,7 +40,7 @@ class Main extends React.Component {
     if (!zcashParamsExist) {
       Store.dispatch(
         triggerToaster(
-          'Zcash params are missing',
+          translate('KMD_NATIVE.ZCASH_PARAMS_MISSING'),
           'Komodo',
           'error',
           false

react/src/translate/en.js

@@ -443,6 +443,7 @@ export const _lang = {
       'QR_ERR_UNKNOWN': 'Error: unknown error!',
     },
     'TOASTR': {
+      'INVALID_ADDRESS': 'Invalid @template@ address',
       'RESTART_AGAMA_WITH_REINDEX_PARAM': 'Restart Agama and run Komodo with -reindex param',
       'JUMBLR_DEPOSIT_ADDRESS_SET': 'Jumblr deposit address is set',
       'JUMBLR_SECRET_ADDRESSES_IMPORTED': 'Jumblr secret addresses imported',
@@ -545,6 +546,7 @@ export const _lang = {
       'EXECUTION_SECONDS': 'Execution Seconds',
       'WAIT_UNTIL_SYNCED': 'Transaction history is unavailable during synchronization progresss',
       'TXID': 'Transaction ID',
+      'ZCASH_PARAMS_MISSING': 'Zcash params are missing',
     },
     'LOGIN': {
       'QUICK_ACCESS': 'Quick access',

react/src/translate/translate.js

@@ -1,7 +1,7 @@
 import { _lang } from './en';
 import Config from '../config';
 
-export function translate(langID) {
+export function translate(langID, interpolateStr) {
   let defaultLang = Config.defaultLang || 'EN';
 
   if (langID &&
@@ -11,7 +11,11 @@ export function translate(langID) {
     if (_lang &&
         langIDComponents &&
         _lang[defaultLang][langIDComponents[0]][langIDComponents[1]]) {
-      return _lang[defaultLang][langIDComponents[0]][langIDComponents[1]];
+      if (interpolateStr) {
+        return _lang[defaultLang][langIDComponents[0]][langIDComponents[1]].replace('@template@', interpolateStr);
+      } else {
+        return _lang[defaultLang][langIDComponents[0]][langIDComponents[1]];
+      }
     } else {
       console.warn(`Missing translation ${langID} in js/${defaultLang.toLowerCase()}.js`);
       return `--> ${langID} <--`;

react/src/util/sort.js

@@ -1,4 +1,4 @@
-export function sortByDate(data, sortKey) {
+export function sortByDate(data, sortKey) { // deprecated
   return data.sort(function(a, b) {
     if (a[sortKey] < b[sortKey]) {
       return -1;