diff --git a/react/src/components/addcoin/addcoin.js b/react/src/components/addcoin/addcoin.js index 75462e6..7b750a6 100644 --- a/react/src/components/addcoin/addcoin.js +++ b/react/src/components/addcoin/addcoin.js @@ -8,9 +8,9 @@ import { shepherdPostCoinList } from '../../actions/actionCreators'; import Store from '../../store'; -import AddCoinOptionsCrypto from './addcoinOptionsCrypto'; -import AddCoinOptionsAC from './addcoinOptionsAC'; -import AddCoinOptionsACFiat from './addcoinOptionsACFiat'; + +import CoinSelectorsRender from './coin-selectors.render'; +import AddCoinRender from './addcoin.render'; class AddCoin extends React.Component { constructor(props) { @@ -249,131 +249,7 @@ class AddCoin extends React.Component { const _coin = _item.selectedCoin || ''; items.push( -
-
-
- -
-
-
- -
-
-
- - -
-
- - -
-
- - -
-
-
- -
-
-
- - -
this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }
-
-
-
-
+ CoinSelectorsRender.call(this, _item, _coin, i) ); } @@ -382,63 +258,7 @@ class AddCoin extends React.Component { render() { return ( -
this.handleKeydown(event) }> -
-
-
-
- -

{ translate('INDEX.SELECT_A_COIN') }

-
-
- - - - - - - { this.renderCoinSelectors() } -
- -
-
-

- { translate('INDEX.FULL_MODE') }: { translate('INDEX.FULL_MODE_DESC') } -

-

- { translate('INDEX.BASILISK_MODE') }: { translate('INDEX.BASILISK_MODE_DESC') } -

-

- { translate('INDEX.NATIVE_MODE') }: { translate('INDEX.NATIVE_MODE_DESC1') } Komodo Daemon { translate('INDEX.NATIVE_MODE_DESC2') } Iguana Daemon { translate('INDEX.NATIVE_MODE_DESC3') }. -

-
- - { translate('INDEX.NATIVE_MODE') } { translate('INDEX.NATIVE_MODE_DESC4') } { translate('INDEX.NATIVE_MODE_DESC5') }, { translate('INDEX.NATIVE_MODE_DESC5') }. -
-
-
-
-
-
-
-
+ AddCoinRender.call(this) ); } } diff --git a/react/src/components/addcoin/addcoin.render.js b/react/src/components/addcoin/addcoin.render.js new file mode 100644 index 0000000..42fc8b8 --- /dev/null +++ b/react/src/components/addcoin/addcoin.render.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const AddCoinRender = function() { + return ( +
this.handleKeydown(event) }> +
+
+
+
+ +

{ translate('INDEX.SELECT_A_COIN') }

+
+
+ + + + + + + { this.renderCoinSelectors() } +
+ +
+
+

+ { translate('INDEX.FULL_MODE') }: { translate('INDEX.FULL_MODE_DESC') } +

+

+ { translate('INDEX.BASILISK_MODE') }: { translate('INDEX.BASILISK_MODE_DESC') } +

+

+ { translate('INDEX.NATIVE_MODE') }: { translate('INDEX.NATIVE_MODE_DESC1') } Komodo Daemon { translate('INDEX.NATIVE_MODE_DESC2') } Iguana Daemon { translate('INDEX.NATIVE_MODE_DESC3') }. +

+
+ + { translate('INDEX.NATIVE_MODE') } { translate('INDEX.NATIVE_MODE_DESC4') } { translate('INDEX.NATIVE_MODE_DESC5') }, { translate('INDEX.NATIVE_MODE_DESC5') }. +
+
+
+
+
+
+
+
+ ) +}; + +export default AddCoinRender; \ No newline at end of file diff --git a/react/src/components/addcoin/coin-selectors.render.js b/react/src/components/addcoin/coin-selectors.render.js new file mode 100644 index 0000000..15aec3d --- /dev/null +++ b/react/src/components/addcoin/coin-selectors.render.js @@ -0,0 +1,139 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; +import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; +import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + + +const CoinSelectorsRender = function(item, coin, i) { + return ( +
+
+
+ +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+ + +
this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }
+
+
+
+
+ ) +}; +export default CoinSelectorsRender; \ No newline at end of file diff --git a/react/src/components/dashboard/atomic.js b/react/src/components/dashboard/atomic.js index 49ca08e..4708966 100755 --- a/react/src/components/dashboard/atomic.js +++ b/react/src/components/dashboard/atomic.js @@ -1,10 +1,8 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { atomic } from '../../actions/actionCreators'; import Store from '../../store'; -import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; -import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; -import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +import AtomicRender from './atomic.render'; /* TODO: @@ -479,67 +477,7 @@ class Atomic extends React.Component { } render() { - return ( -
-
-
-
-

Atomic Explorer

-
-
-
-
- -
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-

{ translate('ATOMIC.RAW_OUTPUT') }

-
-
-
-
{ this.state.output }
-
-
-
-
-
-
-
- ); + return AtomicRender.call(this); } } diff --git a/react/src/components/dashboard/atomic.render.js b/react/src/components/dashboard/atomic.render.js new file mode 100644 index 0000000..7b352ad --- /dev/null +++ b/react/src/components/dashboard/atomic.render.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; +import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; +import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +const AtomicRender = function () { + return ( +
+
+
+
+

Atomic Explorer

+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

{ translate('ATOMIC.RAW_OUTPUT') }

+
+
+
+
{ this.state.output }
+
+
+
+
+
+
+
+ ) +}; + +export default AtomicRender; \ No newline at end of file diff --git a/react/src/components/dashboard/coinTile.js b/react/src/components/dashboard/coinTile.js index 41967d3..5996841 100755 --- a/react/src/components/dashboard/coinTile.js +++ b/react/src/components/dashboard/coinTile.js @@ -1,11 +1,12 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { getCoinTitle, getModeInfo } from '../../util/coinHelper'; import CoinTileItem from './coinTileItem'; +import CoinTileRender from './coinTile.render'; + class CoinTile extends React.Component { constructor(props) { super(props); @@ -56,38 +57,7 @@ class CoinTile extends React.Component { } render() { - return ( -
-
- - -
-
-
-
-
-
- - -
-
-

{ translate('INDEX.ACTIVE_COINS') }

-
-
-
-
-
-
- { this.renderTiles() } -
-
-
-
-
-
- ); + return CoinTileRender.call(this); } } diff --git a/react/src/components/dashboard/coinTile.render.js b/react/src/components/dashboard/coinTile.render.js new file mode 100644 index 0000000..e10fb12 --- /dev/null +++ b/react/src/components/dashboard/coinTile.render.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const CoinTileRender = function() { + return ( +
+
+ + +
+
+
+
+
+
+ + +
+
+

{ translate('INDEX.ACTIVE_COINS') }

+
+
+
+
+
+
+ { this.renderTiles() } +
+
+
+
+
+
+ ); +}; + +export default CoinTileRender; \ No newline at end of file diff --git a/react/src/components/dashboard/coinTileItem.js b/react/src/components/dashboard/coinTileItem.js index e3445ae..28640b7 100644 --- a/react/src/components/dashboard/coinTileItem.js +++ b/react/src/components/dashboard/coinTileItem.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { dashboardChangeActiveCoin, iguanaActiveHandle, @@ -21,6 +20,8 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import CoinTileItemRender from './coinTileItem.render'; + const BASILISK_CACHE_UPDATE_TIMEOUT = 240000; const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000; const IGUNA_ACTIVE_HANDLE_TIMEOUT_KMD_NATIVE = 15000; @@ -137,26 +138,7 @@ class CoinTileItem extends React.Component { } render() { - const { item } = this.props; - - return ( -
-
-
this.dashboardChangeActiveCoin(item.coin, item.mode) }> - - { - { item.modecode } - -
{ item.coinname } ({ item.coinlogo.toUpperCase() })
-
-
-
- ); + return CoinTileItemRender.call(this); } } diff --git a/react/src/components/dashboard/coinTileItem.render.js b/react/src/components/dashboard/coinTileItem.render.js new file mode 100644 index 0000000..df96548 --- /dev/null +++ b/react/src/components/dashboard/coinTileItem.render.js @@ -0,0 +1,26 @@ +import React from 'react'; + +const CoinTileItemRender = function() { + const { item } = this.props; + + return ( +
+
+
this.dashboardChangeActiveCoin(item.coin, item.mode) }> + + { + { item.modecode } + +
{ item.coinname } ({ item.coinlogo.toUpperCase() })
+
+
+
+ ); +}; + +export default CoinTileItemRender; \ No newline at end of file diff --git a/react/src/components/dashboard/dashboard.js b/react/src/components/dashboard/dashboard.js index eb22944..3edd13b 100755 --- a/react/src/components/dashboard/dashboard.js +++ b/react/src/components/dashboard/dashboard.js @@ -1,20 +1,6 @@ import React from 'react'; -import Navbar from './navbar'; -import CoinTile from './coinTile'; -import EDEX from './edex'; -import WalletsBalance from './walletsBalance'; -import WalletsProgress from './walletsProgress'; -import WalletsNav from './walletsNav'; -import SendCoin from './sendCoin'; -import WalletsData from './walletsData'; -import Atomic from './atomic'; -import Jumblr from './jumblr'; -import Settings from './settings'; -import ReceiveCoin from './receiveCoin'; -import About from './about'; -import WalletsNative from './walletsNative'; -import WalletsNativeTxInfo from './walletsNativeTxInfo'; -import WalletsTxInfo from './walletsTxInfo'; + +import DashboardRender from './dashboard.render'; class Dashboard extends React.Component { constructor(props) { @@ -31,52 +17,21 @@ class Dashboard extends React.Component { renderDashboard() { document.body.className = ''; - return ( -
-
- -
- - - - - - - - - - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- ); + return DashboardRender.call(this); + } + + isLoggedIn() { + return this.props && + this.props.Main && + this.props.Main.isLoggedIn; } render() { - if (this.props && - this.props.Main && - this.props.Main.isLoggedIn) { + if (this.isLoggedIn()) { return this.renderDashboard(); - } else { - return null; } + + return null; } } diff --git a/react/src/components/dashboard/dashboard.render.js b/react/src/components/dashboard/dashboard.render.js new file mode 100644 index 0000000..f2e01fe --- /dev/null +++ b/react/src/components/dashboard/dashboard.render.js @@ -0,0 +1,59 @@ +import React from 'react'; + +import Navbar from './navbar'; +import CoinTile from './coinTile'; +import EDEX from './edex'; +import WalletsBalance from './walletsBalance'; +import WalletsProgress from './walletsProgress'; +import WalletsNav from './walletsNav'; +import SendCoin from './sendCoin'; +import WalletsData from './walletsData'; +import Atomic from './atomic'; +import Jumblr from './jumblr'; +import Settings from './settings'; +import ReceiveCoin from './receiveCoin'; +import About from './about'; +import WalletsNative from './walletsNative'; +import WalletsNativeTxInfo from './walletsNativeTxInfo'; +import WalletsTxInfo from './walletsTxInfo'; + +const DashboardRender = function() { + return ( +
+
+ +
+ + + + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); +}; + +export default DashboardRender; \ No newline at end of file diff --git a/react/src/components/dashboard/edex.js b/react/src/components/dashboard/edex.js index 6e85de7..3278612 100755 --- a/react/src/components/dashboard/edex.js +++ b/react/src/components/dashboard/edex.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; class EDEX extends React.Component { render() { diff --git a/react/src/components/dashboard/jumblr.js b/react/src/components/dashboard/jumblr.js index 41f93fc..44be584 100755 --- a/react/src/components/dashboard/jumblr.js +++ b/react/src/components/dashboard/jumblr.js @@ -1,9 +1,10 @@ import React from 'react'; import { translate } from '../../translate/translate'; -import WalletsHeader from './walletsHeader'; /*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators'; import Store from '../../store';*/ +import JumblrRender from './jumblr.render'; + class Jumblr extends React.Component { constructor(props) { super(props); @@ -30,218 +31,7 @@ class Jumblr extends React.Component { } render() { - return ( -
- -
-
-
-
- - - { translate('JUMBLR.NOTICE') } - -
- { translate('JUMBLR.DESCRIPTION') } -
-
- -
-
- - - { translate('JUMBLR.NEED_NATIVE') } - -
- { translate('JUMBLR.TO_USE_JUMBLR') } -
- { translate('JUMBLR.IF_YOU_ALREADY_RUNNING') } -
-
- -
-

{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }

-
- -
-
-
- -
-
-
    -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }
  • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }
  • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }
  • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }
  • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }
  • -
-
-
-
-
- -
-
-

{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }

-
    - duck dog cat donkey -
-
    -
  1. { translate('JUMBLR.TO_ACCESS') }
  2. -
  3. { translate('JUMBLR.CLOSE_IAPP') }
  4. -
  5. { translate('JUMBLR.START_IAPP') }
  6. -
  7. { translate('JUMBLR.START_KMD') }
  8. -
  9. { translate('JUMBLR.ACCESS_JUMBLR_FUNDS') } -
      -
    • { translate('JUMBLR.SMALL_LETTERS') }
    • -
    • { translate('JUMBLR.WHITE_SPACE') }
    • -
    -
  10. -
  11. - { translate('JUMBLR.PER_EXAMPLE') } -
    - jumblr duck dog cat donkey -
  12. -
  13. { translate('JUMBLR.LOGIN_WITH_JUMBLR') }
  14. -
-

{ translate('JUMBLR.AGAIN_DONT_SHARE') }

-
-
-
-
-
this.openTab(2) }> - { translate('JUMBLR.USING_JUMBLR') } -
-
-
-
    -
  • { translate('JUMBLR.RUN_KMD') }
  • -
  • { translate('JUMBLR.LOGIN_KMD') }
  • -
  • { translate('JUMBLR.GO_TO') }
  • -
  • { translate('JUMBLR.FIND_DEPOSIT_ADDR') }
  • -
  • { translate('JUMBLR.YOU_SEND_FUNDS') }
  • -
  • { translate('JUMBLR.KEEP_WALLET_OPEN') }
  • -
  • { translate('JUMBLR.IMPORTANT_FUNDS') }
  • -
  • { translate('JUMBLR.LARGE_LOT') }
  • -
-

{ this.renderLB('JUMBLR.EG') }

-

{ translate('JUMBLR.93_KMD') }

-

{ translate('JUMBLR.TO_CLEAR_THEM') }

-

{ translate('JUMBLR.WHEN_IT_TOTALS') }

-
-
-
-
-
- -
-

{ translate('JUMBLR.JADDR') }

-
-
- - - - - - - - - - - - - - - - - - - -
{ translate('JUMBLR.BTC_DEPOSIT') } - -
BTC Jumblr - - - { translate('JUMBLR.HIDDEN') } -
{ translate('JUMBLR.KMD_DEPOSIT') }
KMD Jumblr - - - { translate('JUMBLR.HIDDEN') } -
-
-
-
- -
-

{ translate('JUMBLR.JSTATUS') }

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{ translate('JUMBLR.RESULT') } - -
{ translate('JUMBLR.DEPOSITED') }
{ translate('JUMBLR.PUB_TO_PRIV') }
{ translate('JUMBLR.PRIV_TO_PRIV') }
{ translate('JUMBLR.PRIV_TO_PUB') }
{ translate('JUMBLR.FINISHED') }
{ translate('JUMBLR.PENDING') }
-
-
-
-
-
-
- ) + return JumblrRender.call(this); } } diff --git a/react/src/components/dashboard/jumblr.render.js b/react/src/components/dashboard/jumblr.render.js new file mode 100644 index 0000000..4396dc1 --- /dev/null +++ b/react/src/components/dashboard/jumblr.render.js @@ -0,0 +1,221 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +import WalletsHeader from './walletsHeader'; + +const JumblrRender = function() { + return ( +
+ +
+
+
+
+ + + { translate('JUMBLR.NOTICE') } + +
+ { translate('JUMBLR.DESCRIPTION') } +
+
+ +
+
+ + + { translate('JUMBLR.NEED_NATIVE') } + +
+ { translate('JUMBLR.TO_USE_JUMBLR') } +
+ { translate('JUMBLR.IF_YOU_ALREADY_RUNNING') } +
+
+ +
+

{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }

+
+ +
+
+
+ +
+
+
    +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }
  • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }
  • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }
  • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }
  • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }
  • +
+
+
+
+
+ +
+
+

{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }

+
    + duck dog cat donkey +
+
    +
  1. { translate('JUMBLR.TO_ACCESS') }
  2. +
  3. { translate('JUMBLR.CLOSE_IAPP') }
  4. +
  5. { translate('JUMBLR.START_IAPP') }
  6. +
  7. { translate('JUMBLR.START_KMD') }
  8. +
  9. { translate('JUMBLR.ACCESS_JUMBLR_FUNDS') } +
      +
    • { translate('JUMBLR.SMALL_LETTERS') }
    • +
    • { translate('JUMBLR.WHITE_SPACE') }
    • +
    +
  10. +
  11. + { translate('JUMBLR.PER_EXAMPLE') } +
    + jumblr duck dog cat donkey +
  12. +
  13. { translate('JUMBLR.LOGIN_WITH_JUMBLR') }
  14. +
+

{ translate('JUMBLR.AGAIN_DONT_SHARE') }

+
+
+
+
+
this.openTab(2) }> + { translate('JUMBLR.USING_JUMBLR') } +
+
+
+
    +
  • { translate('JUMBLR.RUN_KMD') }
  • +
  • { translate('JUMBLR.LOGIN_KMD') }
  • +
  • { translate('JUMBLR.GO_TO') }
  • +
  • { translate('JUMBLR.FIND_DEPOSIT_ADDR') }
  • +
  • { translate('JUMBLR.YOU_SEND_FUNDS') }
  • +
  • { translate('JUMBLR.KEEP_WALLET_OPEN') }
  • +
  • { translate('JUMBLR.IMPORTANT_FUNDS') }
  • +
  • { translate('JUMBLR.LARGE_LOT') }
  • +
+

{ this.renderLB('JUMBLR.EG') }

+

{ translate('JUMBLR.93_KMD') }

+

{ translate('JUMBLR.TO_CLEAR_THEM') }

+

{ translate('JUMBLR.WHEN_IT_TOTALS') }

+
+
+
+
+
+ +
+

{ translate('JUMBLR.JADDR') }

+
+
+ + + + + + + + + + + + + + + + + + + +
{ translate('JUMBLR.BTC_DEPOSIT') } + +
BTC Jumblr + + + { translate('JUMBLR.HIDDEN') } +
{ translate('JUMBLR.KMD_DEPOSIT') }
KMD Jumblr + + + { translate('JUMBLR.HIDDEN') } +
+
+
+
+ +
+

{ translate('JUMBLR.JSTATUS') }

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ translate('JUMBLR.RESULT') } + +
{ translate('JUMBLR.DEPOSITED') }
{ translate('JUMBLR.PUB_TO_PRIV') }
{ translate('JUMBLR.PRIV_TO_PRIV') }
{ translate('JUMBLR.PRIV_TO_PUB') }
{ translate('JUMBLR.FINISHED') }
{ translate('JUMBLR.PENDING') }
+
+
+
+
+
+
+ ); +}; + +export default JumblrRender; \ No newline at end of file diff --git a/react/src/components/dashboard/loginModal.js b/react/src/components/dashboard/loginModal.js index a0de196..629d2d3 100755 --- a/react/src/components/dashboard/loginModal.js +++ b/react/src/components/dashboard/loginModal.js @@ -1,12 +1,12 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { toggleAddcoinModal, - iguanaWalletPassphrase, - iguanaActiveHandle + iguanaWalletPassphrase } from '../../actions/actionCreators'; import Store from '../../store'; +import LoginModalRender from './loginModal.render'; + class LoginModal extends React.Component { constructor(props) { super(props); @@ -50,70 +50,10 @@ class LoginModal extends React.Component { render() { if (this.props.Dashboard.activateLoginModal) { - return ( -
- -
- ); - } else { - return null; + return LoginModalRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/loginModal.render.js b/react/src/components/dashboard/loginModal.render.js new file mode 100644 index 0000000..ecb1332 --- /dev/null +++ b/react/src/components/dashboard/loginModal.render.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const LoginModalRender = function () { + return ( +
+ +
+ ); +}; + +export default LoginModalRender; \ No newline at end of file diff --git a/react/src/components/dashboard/navbar.js b/react/src/components/dashboard/navbar.js index 7e7e068..6785f2a 100755 --- a/react/src/components/dashboard/navbar.js +++ b/react/src/components/dashboard/navbar.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { dashboardChangeSection, toggleAddcoinModal, @@ -11,6 +10,8 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import NavbarRender from './navbar.render'; + class Navbar extends React.Component { constructor(props) { super(props); @@ -78,111 +79,7 @@ class Navbar extends React.Component { } render() { - return ( - - ); + return NavbarRender.call(this); } } diff --git a/react/src/components/dashboard/navbar.render.js b/react/src/components/dashboard/navbar.render.js new file mode 100644 index 0000000..b712fc1 --- /dev/null +++ b/react/src/components/dashboard/navbar.render.js @@ -0,0 +1,112 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const NavbarRender = function() { + return ( + + ); +}; + +export default NavbarRender; \ No newline at end of file diff --git a/react/src/components/dashboard/notifications.js b/react/src/components/dashboard/notifications.js index f54216f..908aab5 100755 --- a/react/src/components/dashboard/notifications.js +++ b/react/src/components/dashboard/notifications.js @@ -1,11 +1,12 @@ import React from 'react'; -import { - checkTimestamp, - secondsElapsedToString, - secondsToString -} from '../../util/time'; + import { sortByDate } from '../../util/sort'; -import { translate } from '../../translate/translate'; + +import { + NotificationsByTypeRender, + NotificationsModalRender, + NotificationsRender +} from './notifications.render'; class Notifications extends React.Component { constructor(props) { @@ -74,28 +75,7 @@ class Notifications extends React.Component { const _logItem = _guiLog[i]; items.push( -
-
{ i + 1 }.
-
- Time: { secondsToString(_logItem.timestamp, true, true) } -
-
- GUI Function: { _logItem.function } -
-
- HTTP: { _logItem.httpMethod.toUpperCase() } -
-
- URL: { _logItem.url } -
-
- Payload: { JSON.stringify(_logItem.payload, null, '\t') } -
-
- Response: { JSON.stringify(_logItem.response, null, '\t') } -
-
-
+ NotificationsByTypeRender.call(this, _logItem, type, i) ); } } @@ -106,60 +86,10 @@ class Notifications extends React.Component { renderNotificationsModal() { if (this.state.displayModal) { - return ( -
this.handleKeydown(event) }> -
-
-
-
-
- -
-
-
- { this.renderNotificationsByType('success') } -
-
- { this.renderNotificationsByType('error') } -
-
- { this.renderNotificationsByType('pending') } -
-
-
-
-
-
- -
-
-
-
-
-
- ); - } else { - return null; + return NotificationsModalRender.call(this); } + + return null; } toggleNotificationsModal() { @@ -169,25 +99,7 @@ class Notifications extends React.Component { } render() { - return ( -
-
- { this.state.calls.success } - { this.state.calls.error } - { this.state.calls.pending } -
-
-
-
-
-
-
-
- { this.renderNotificationsModal() } -
- ); + return NotificationsRender.call(this); } } diff --git a/react/src/components/dashboard/notifications.render.js b/react/src/components/dashboard/notifications.render.js new file mode 100644 index 0000000..f4adcb0 --- /dev/null +++ b/react/src/components/dashboard/notifications.render.js @@ -0,0 +1,114 @@ +import React from 'react'; +import { + secondsToString +} from '../../util/time'; +import { translate } from '../../translate/translate'; + +export const NotificationsByTypeRender = function(logItem, type, index) { + return ( +
+
{ index + 1 }.
+
+ Time: { secondsToString(logItem.timestamp, true, true) } +
+
+ GUI Function: { logItem.function } +
+
+ HTTP: { logItem.httpMethod.toUpperCase() } +
+
+ URL: { logItem.url } +
+
+ Payload: { JSON.stringify(logItem.payload, null, '\t') } +
+
+ Response: { JSON.stringify(logItem.response, null, '\t') } +
+
+
+ ); +} + +export const NotificationsModalRender = function() { + return ( +
this.handleKeydown(event) }> +
+
+
+
+
+ +
+
+
+ { this.renderNotificationsByType('success') } +
+
+ { this.renderNotificationsByType('error') } +
+
+ { this.renderNotificationsByType('pending') } +
+
+
+
+
+
+ +
+
+
+
+
+
+ ); +}; + +export const NotificationsRender = function() { + return ( +
+
+ { this.state.calls.success } + { this.state.calls.error } + { this.state.calls.pending } +
+
+
+
+
+
+
+
+ { this.renderNotificationsModal() } +
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/receiveCoin.js b/react/src/components/dashboard/receiveCoin.js index e2ab157..64b2023 100644 --- a/react/src/components/dashboard/receiveCoin.js +++ b/react/src/components/dashboard/receiveCoin.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { copyCoinAddress, checkAddressBasilisk, @@ -7,6 +6,13 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import { + AddressActionsBasiliskModeRender, + AddressActionsNonBasiliskModeRender, + AddressItemRender, + ReceiveCoinRender +} from './receiveCoin.render'; + // TODO: implement sorting // TODO: fallback to localstorage/stores data in case iguana is taking too long to respond @@ -33,41 +39,10 @@ class ReceiveCoin extends React.Component { renderAddressActions(address) { if (this.isBasiliskMode()) { - return ( - - - { translate('IAPI.PUBLIC_SM') } - - - this._checkAddressBasilisk(address) }> - - - this._validateAddressBasilisk(address) }> - - - - ); - } else { - return ( - - - { translate('IAPI.PUBLIC_SM') } - - - - ); + return AddressActionsBasiliskModeRender.call(this, address); } + + return AddressActionsNonBasiliskModeRender.call(this, address); } hasNoAmount(address) { @@ -95,12 +70,7 @@ class ReceiveCoin extends React.Component { } items.push( - - { this.renderAddressActions(address.address) } - { address.address } - { address.amount } - { address.interest ? address.interest : 'N/A' } - + AddressItemRender.call(this, address) ); } @@ -114,50 +84,10 @@ class ReceiveCoin extends React.Component { if (this.props && this.props.receive && this.props.mode !== 'native') { - return ( -
-
-
-
-
-
-
-
-

{ translate('INDEX.RECEIVING_ADDRESS') }

-
-
- - - - - - - - - - - { this.renderAddressList() } - - - - - - - - - -
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
-
-
-
-
-
-
-
- ); - } else { - return null; + return ReceiveCoinRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin.render.js new file mode 100644 index 0000000..33a2208 --- /dev/null +++ b/react/src/components/dashboard/receiveCoin.render.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const AddressActionsBasiliskModeRender = function(address) { + return ( + + + { translate('IAPI.PUBLIC_SM') } + + + this._checkAddressBasilisk(address) }> + + + this._validateAddressBasilisk(address) }> + + + + ); +}; + +export const AddressActionsNonBasiliskModeRender = function (address) { + return ( + + + { translate('IAPI.PUBLIC_SM') } + + + + ); +}; + +export const AddressItemRender = function (address) { + return ( + + { this.renderAddressActions(address.address) } + { address.address } + { address.amount } + { address.interest ? address.interest : 'N/A' } + + ); +}; + +export const ReceiveCoinRender = function () { + return ( +
+
+
+
+
+
+
+
+

{ translate('INDEX.RECEIVING_ADDRESS') }

+
+
+ + + + + + + + + + + { this.renderAddressList() } + + + + + + + + + +
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
+
+
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/sendCoin.js b/react/src/components/dashboard/sendCoin.js index 6f47d28..d98364c 100644 --- a/react/src/components/dashboard/sendCoin.js +++ b/react/src/components/dashboard/sendCoin.js @@ -1,20 +1,14 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import Config from '../../config'; import { translate } from '../../translate/translate'; import { - checkTimestamp, - secondsElapsedToString, - secondsToString + checkTimestamp } from '../../util/time'; import { edexGetTxIDList, edexRemoveTXID } from '../../util/cacheFormat'; import { - sendFromAddress, - sendNativeTx, - getKMDOPID, resolveOpenAliasAddress, triggerToaster, basiliskRefresh, @@ -29,6 +23,13 @@ import { dexSendRawTX } from '../../actions/actionCreators'; import Store from '../../store'; +import { + UTXOCacheInfoRender, + SendCoinResponseRender, + OASendUIRender, + SendApiTypeSelectorRender, + SendCoinRender +} from './sendCoin.render'; import { SocketProvider } from 'socket.io-react'; import io from 'socket.io-client'; @@ -133,6 +134,7 @@ class SendCoin extends React.Component { if (this.props.ActiveCoin.mode === 'basilisk' && this.state.sendFrom && !this.state.sendApiType && + this.props.ActiveCoin.cache && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom]) { let refreshCacheData, timestamp, @@ -155,34 +157,10 @@ class SendCoin extends React.Component { timestamp = null; } - return ( -
-
- { translate('SEND.TOTAL_UTXO_AVAILABLE') }: { refreshCacheData ? refreshCacheData.data && refreshCacheData.data.length : translate('SEND.PRESS_UPDATE_BTN') }
-
- { translate('SEND.LAST_UPDATED') } @ { secondsToString(refreshCacheData ? refreshCacheData.timestamp : 0, true) } | { secondsElapsedToString(timestamp || 0) } { translate('SEND.AGO') }
-
-
{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s
-
-
- { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } -
-
- -
- ); - } else { - return null; + return UTXOCacheInfoRender.call(this, refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp); } + + return null; /*
@@ -230,7 +208,8 @@ class SendCoin extends React.Component { const address = this.props.ActiveCoin.addresses[type][i]; let _amount = address.amount; - if (this.props.ActiveCoin.mode === 'basilisk') { + if (this.props.ActiveCoin.mode === 'basilisk' && + this.props.ActiveCoin.cache) { _amount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address] && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address.address].getbalance.data.balance : 'N/A'; } @@ -257,7 +236,8 @@ class SendCoin extends React.Component { let _amount; if (this.state.sendFromAmount === 0 && - this.props.ActiveCoin.mode === 'basilisk') { + this.props.ActiveCoin.mode === 'basilisk' && + this.props.ActiveCoin.cache) { _amount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][this.state.sendFrom].getbalance.data.balance : 'N/A'; } else { _amount = this.state.sendFromAmount; @@ -318,7 +298,8 @@ class SendCoin extends React.Component { updateAddressSelection(address, type, amount) { let _sendFromAmount = amount ? amount : this.props.ActiveCoin.addresses[type][address].amount; - if (this.props.ActiveCoin.mode === 'basilisk') { + if (this.props.ActiveCoin.mode === 'basilisk' && + this.props.ActiveCoin.cache) { _sendFromAmount = this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data && this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data.balance ? this.props.ActiveCoin.cache[this.props.ActiveCoin.coin][address].getbalance.data.balance : 'N/A'; } @@ -618,70 +599,7 @@ class SendCoin extends React.Component { } renderSendCoinResponse() { - if (this.props.ActiveCoin.lastSendToResponse) { - let items = []; - const _response = this.props.ActiveCoin.lastSendToResponse; - - for (let key in _response) { - if (key !== 'tag') { - items.push( - - { key } - { this.renderKey(key) } - - ); - } - } - - return items; - } else { - return ( -
-
- { translate('SEND.PROCESSING_TRANSACTION') }...
- { translate('SEND.NOTE_IT_WILL_TAKE') }. -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); - } + return SendCoinResponseRender.call(this); } getOAdress() { @@ -714,251 +632,28 @@ class SendCoin extends React.Component { renderOASendUI() { if (Config.openAlias) { - return ( -
-
- - -
-
- -
-
- ); - } else { - return null; + return OASendUIRender.call(this); } + + return null; } renderSendApiTypeSelector() { if (this.props.ActiveCoin.mode === 'basilisk') { - return ( -
-
- - -
{ translate('SEND.SEND_VIA') } (sendtoaddress API)
-
-
-
- ); - } else { - return null; + return SendApiTypeSelectorRender.call(this); } + + return null; } render() { if (this.props.ActiveCoin && this.props.ActiveCoin.send && this.props.ActiveCoin.mode !== 'native') { - return ( -
-
-
-
- 1 -
- { translate('INDEX.FILL_SEND_FORM') } -

{ translate('INDEX.FILL_SEND_DETAILS') }

-
-
-
- 2 -
- { translate('INDEX.CONFIRMING') } -

{ translate('INDEX.CONFIRM_DETAILS') }

-
-
-
- 3 -
- { translate('INDEX.PROCESSING_TX') } -

{ translate('INDEX.PROCESSING_DETAILS') }

-
-
-
- -
-
-

- { translate('INDEX.SEND') } { this.props.ActiveCoin.coin } -

-
-
-
- { this.renderSendApiTypeSelector() } -
-
- - { this.renderAddressList() } -
-
- { this.renderOASendUI() } -
-
- - -
-
- - -
-
- - -
-
- - { translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee): { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } - -
-
- - -
{ translate('INDEX.DONT_SEND') }
-
-
- { this.renderUTXOCacheInfo()} -
- -
-
-
-
-
-
- -
-
-
-
-
- { translate('INDEX.TO') } -
-
{ this.state.sendTo }
-
- { this.state.amount } { this.props.ActiveCoin.coin } -
-
{ translate('INDEX.TX_FEE_REQ') }
-
- { this.state.fee } { this.props.ActiveCoin.coin } -
-
-
- -
-
- { translate('INDEX.FROM') } -
-
{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }
-
- { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } -
-
-
- this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') } -
- -
-
-
-
-
- -
-
-
-

{ translate('INDEX.TRANSACTION_RESULT') }

-
- { translate('SEND.YOU_PICKED_OPT') } -
- - - - - - - - - { this.renderSendCoinResponse() } - -
{ translate('INDEX.KEY') }{ translate('INDEX.INFO') }
-
-
- -
-
-
-
-
-
- ); - } else { - return null; + return SendCoinRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/sendCoin.render.js b/react/src/components/dashboard/sendCoin.render.js new file mode 100644 index 0000000..9672a90 --- /dev/null +++ b/react/src/components/dashboard/sendCoin.render.js @@ -0,0 +1,336 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import { + secondsElapsedToString, + secondsToString +} from '../../util/time'; + +export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp) { + return ( +
+
+ { translate('SEND.TOTAL_UTXO_AVAILABLE') }: { refreshCacheData ? refreshCacheData.data && refreshCacheData.data.length : translate('SEND.PRESS_UPDATE_BTN') }
+
+ { translate('SEND.LAST_UPDATED') } @ { secondsToString(refreshCacheData ? refreshCacheData.timestamp : 0, true) } | { secondsElapsedToString(timestamp || 0) } { translate('SEND.AGO') }
+
+
{ translate('SEND.NEXT_UPDATE_IN') } { secondsElapsedToString(600 - timestamp) }s
+
+
+ { translate('SEND.PROCESSING_REQ') }: { this.state.currentStackLength } / { this.state.totalStackLength } +
+
+ +
+ ); +}; + +export const SendCoinResponseRender = function () { + if (this.props.ActiveCoin.lastSendToResponse) { + let items = []; + const _response = this.props.ActiveCoin.lastSendToResponse; + + for (let key in _response) { + if (key !== 'tag') { + items.push( + + { key } + { this.renderKey(key) } + + ); + } + } + + return items; + } else { + return ( +
+
+ { translate('SEND.PROCESSING_TRANSACTION') }...
+ { translate('SEND.NOTE_IT_WILL_TAKE') }. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); + } +} + +export const OASendUIRender = function () { + return ( +
+
+ + +
+
+ +
+
+ ); +}; + +export const SendApiTypeSelectorRender = function () { + return ( +
+
+ + +
{ translate('SEND.SEND_VIA') } (sendtoaddress API)
+
+
+
+ ); +}; + +export const SendCoinRender = function () { + return ( +
+
+
+
+ 1 +
+ { translate('INDEX.FILL_SEND_FORM') } +

{ translate('INDEX.FILL_SEND_DETAILS') }

+
+
+
+ 2 +
+ { translate('INDEX.CONFIRMING') } +

{ translate('INDEX.CONFIRM_DETAILS') }

+
+
+
+ 3 +
+ { translate('INDEX.PROCESSING_TX') } +

{ translate('INDEX.PROCESSING_DETAILS') }

+
+
+
+ +
+
+

+ { translate('INDEX.SEND') } { this.props.ActiveCoin.coin } +

+
+
+
+ { this.renderSendApiTypeSelector() } +
+
+ + { this.renderAddressList() } +
+
+ { this.renderOASendUI() } +
+
+ + +
+
+ + +
+
+ + +
+
+ + { translate('INDEX.TOTAL') } ({ translate('INDEX.AMOUNT_SM') } - txfee): { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } + +
+
+ + +
{ translate('INDEX.DONT_SEND') }
+
+
+ { this.renderUTXOCacheInfo()} +
+ +
+
+
+
+
+
+ +
+
+
+
+
+ { translate('INDEX.TO') } +
+
{ this.state.sendTo }
+
+ { this.state.amount } { this.props.ActiveCoin.coin } +
+
{ translate('INDEX.TX_FEE_REQ') }
+
+ { this.state.fee } { this.props.ActiveCoin.coin } +
+
+
+ +
+
+ { translate('INDEX.FROM') } +
+
{ this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] }
+
+ { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } +
+
+
+ this.changeSendCoinStep(0) }>{ translate('INDEX.BACK') } +
+ +
+
+
+
+
+ +
+
+
+

{ translate('INDEX.TRANSACTION_RESULT') }

+
+ { translate('SEND.YOU_PICKED_OPT') } +
+ + + + + + + + + { this.renderSendCoinResponse() } + +
{ translate('INDEX.KEY') }{ translate('INDEX.INFO') }
+
+
+ +
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/settings.js b/react/src/components/dashboard/settings.js index 98e8f9a..93742a8 100644 --- a/react/src/components/dashboard/settings.js +++ b/react/src/components/dashboard/settings.js @@ -14,9 +14,11 @@ import { shepherdCli } from '../../actions/actionCreators'; import Store from '../../store'; -import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; -import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; -import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +import { + AppInfoTabRender, + SettingsRender +} from './settings.render'; /* TODO: @@ -132,87 +134,10 @@ class Settings extends React.Component { const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo; if (releaseInfo) { - return ( -
this.openTab('AppInfo', 8) }> -
- - { translate('SETTINGS.APP_INFO') } - -
-
-
-
-
-
{ translate('SETTINGS.APP_RELEASE') }
-
- { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } -
-
- { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version } -
-
- { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } -
-
-
-
-
-
{ translate('SETTINGS.SYS_INFO') }
-
- { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } -
-
- { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } -
-
- { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } -
-
- { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } -
-
- { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } -
-
- { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } -
-
- { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } -
-
-
-
-
-
{ translate('SETTINGS.LOCATIONS') }
-
- { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } -
-
- { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } -
-
- Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } -
-
- Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } -
-
- Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } -
-
- Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } -
-
-
-
-
-
- ); - } else { - return null; + return AppInfoTabRender.call(this); } + + return null; } renderSNPeersList() { @@ -407,453 +332,7 @@ class Settings extends React.Component { } render() { - return ( -
-
-
-
-
-
-

{ translate('INDEX.WALLET_SETTINGS') }

-
-
this.openTab('WalletInfo', 0) }> - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{ translate('INDEX.KEY') }{ translate('INDEX.VALUE') }
pubkey{ this.props.Main.activeHandle.pubkey }
btcpubkey{ this.props.Main.activeHandle.btcpubkey }
rmd160{ this.props.Main.activeHandle.rmd160 }
NXT{ this.props.Main.activeHandle.NXT }
notary{ this.props.Main.activeHandle.notary }
status{ this.props.Main.activeHandle.status }
-
-
-
- -
this.openTab('AddNodeforCoin', 1) }> - -
-
-
-
-
-

{ translate('INDEX.USE_THIS_SECTION') }

-
-
-
- -
-
-
- -
-
-
- SuperNET Peers: -
-

{ this.renderSNPeersList() }

-
- Raw Peers: -
-

{ this.renderPeersList() }

-
-
- -
-
-

{ translate('INDEX.USE_THIS_SECTION_PEER') }

-
-
-
- -
-
- -
-
-
- -
-
-
-
-
-
- -
this.openTab('DumpWallet', 2) }> - -
-
Wallet Backup section to be updated soon.
-
-
- -
this.openTab('FiatCurrencySettings', 3) }> - -
-
Fiat currency settings section to be updated soon.
-
-
- -
this.openTab('ExportKeys', 4) }> - -
-
-

-

{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }

- - { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } - -

-
-
-
- - -
-
- -
-
- -
-
- - - - - - - - - -
- { this.props.ActiveCoin.coin } - { this.props.Settings.address }
- { this.props.ActiveCoin.coin }Wif - { this.props.Settings.wifkey }
-
-
-
-
-
- -
this.openTab('ImportKeys', 5) }> - -
-
-

-

{ translate('INDEX.IMPORT_KEYS_DESC_P1') }

-
{ translate('INDEX.IMPORT_KEYS_DESC_P2') }

-
{ translate('INDEX.IMPORT_KEYS_DESC_P3') }

- - { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } - -

-
-
-
- - -
-
- -
-
-
-
-
- -
this.openTab('DebugLog', 6) }> - -
-
-

{ translate('INDEX.DEBUG_LOG_DESC') }

-
-
-
- - -
-
- - -
-
- -
-
-
- { this.renderDebugLogData() } -
-
-
-
-
-
- -
this.openTab('AppSettings', 7) }> - -
-
-

- { translate('SETTINGS.CONFIG_RESTART_REQUIRED') } -

-
- - - { this.renderConfigEditForm() } - -
-
-
- -
-
-
-
- { this.renderAppInfoTab() } - -
this.openTab('Cli', 9) }> - -
-
-

Select a coin and type in CLI compatible command

-
-
-
- - -
-
- - -
-
- -
-
-
- { this.renderCliResponse() } -
-
-
-
-
-
-
-
-
-
-
-
-
- ); + return SettingsRender.call(this); } } diff --git a/react/src/components/dashboard/settings.render.js b/react/src/components/dashboard/settings.render.js new file mode 100644 index 0000000..a24fb37 --- /dev/null +++ b/react/src/components/dashboard/settings.render.js @@ -0,0 +1,534 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; +import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; +import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +export const AppInfoTabRender = function() { + return ( +
this.openTab('AppInfo', 8) }> +
+ + { translate('SETTINGS.APP_INFO') } + +
+
+
+
+
+
{ translate('SETTINGS.APP_RELEASE') }
+
+ { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } +
+
+ { translate('SETTINGS.VERSION') }: { this.props.Settings.appInfo.releaseInfo.version } +
+
+ { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } +
+
+
+
+
+
{ translate('SETTINGS.SYS_INFO') }
+
+ { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } +
+
+ { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } +
+
+ { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } +
+
+ { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } +
+
+ { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } +
+
+ { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } +
+
+ { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } +
+
+
+
+
+
{ translate('SETTINGS.LOCATIONS') }
+
+ { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } +
+
+ { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } +
+
+ Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } +
+
+ Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } +
+
+ Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } +
+
+ Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } +
+
+
+
+
+
+ ); +}; + +export const SettingsRender = function() { + return ( +
+
+
+
+
+
+

{ translate('INDEX.WALLET_SETTINGS') }

+
+
this.openTab('WalletInfo', 0) }> + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ translate('INDEX.KEY') }{ translate('INDEX.VALUE') }
pubkey{ this.props.Main.activeHandle.pubkey }
btcpubkey{ this.props.Main.activeHandle.btcpubkey }
rmd160{ this.props.Main.activeHandle.rmd160 }
NXT{ this.props.Main.activeHandle.NXT }
notary{ this.props.Main.activeHandle.notary }
status{ this.props.Main.activeHandle.status }
+
+
+
+ +
this.openTab('AddNodeforCoin', 1) }> + +
+
+
+
+
+

{ translate('INDEX.USE_THIS_SECTION') }

+
+
+
+ +
+
+
+ +
+
+
+ SuperNET Peers: +
+

{ this.renderSNPeersList() }

+
+ Raw Peers: +
+

{ this.renderPeersList() }

+
+
+ +
+
+

{ translate('INDEX.USE_THIS_SECTION_PEER') }

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+ +
this.openTab('DumpWallet', 2) }> + +
+
Wallet Backup section to be updated soon.
+
+
+ +
this.openTab('FiatCurrencySettings', 3) }> + +
+
Fiat currency settings section to be updated soon.
+
+
+ +
this.openTab('ExportKeys', 4) }> + +
+
+

+

{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }

+ + { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } + +

+
+
+
+ + +
+
+ +
+
+ +
+
+ + + + + + + + + +
+ { this.props.ActiveCoin.coin } + { this.props.Settings.address }
+ { this.props.ActiveCoin.coin }Wif + { this.props.Settings.wifkey }
+
+
+
+
+
+ +
this.openTab('ImportKeys', 5) }> + +
+
+

+

{ translate('INDEX.IMPORT_KEYS_DESC_P1') }

+
{ translate('INDEX.IMPORT_KEYS_DESC_P2') }

+
{ translate('INDEX.IMPORT_KEYS_DESC_P3') }

+ + { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } + +

+
+
+
+ + +
+
+ +
+
+
+
+
+ +
this.openTab('DebugLog', 6) }> + +
+
+

{ translate('INDEX.DEBUG_LOG_DESC') }

+
+
+
+ + +
+
+ + +
+
+ +
+
+
{ this.renderDebugLogData() }
+
+
+
+
+
+ +
this.openTab('AppSettings', 7) }> + +
+
+

+ { translate('SETTINGS.CONFIG_RESTART_REQUIRED') } +

+
+ + + { this.renderConfigEditForm() } + +
+
+
+ +
+
+
+
+ { this.renderAppInfoTab() } + +
this.openTab('Cli', 9) }> + +
+
+

Select a coin and type in CLI compatible command

+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ { this.renderCliResponse() } +
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/syncOnly.js b/react/src/components/dashboard/syncOnly.js index 970e6f9..6afe42a 100644 --- a/react/src/components/dashboard/syncOnly.js +++ b/react/src/components/dashboard/syncOnly.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { getCoinTitle } from '../../util/coinHelper'; import { stopInterval, @@ -10,6 +9,12 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import { + ProgressRender, + ForkItemRender, + SyncOnlyRender +} from './syncOnly.render'; + class SyncOnly extends React.Component { constructor(props) { super(props); @@ -92,46 +97,7 @@ class SyncOnly extends React.Component { } renderProgress(fork) { - return ( -
-
-
-
- { translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==>> RT{ fork.RTheight } -
-
- { translate('INDEX.BUNDLES') } { fork.bundles }% -
-
-
-
-
-
- utxo { fork.utxo }% -
-
-
-
- { translate('INDEX.BALANCES') } { fork.balances }% -
-
-
-
- { translate('INDEX.VALIDATED') } { fork.validated }% -
-
-
-
- ); + return ProgressRender.call(this, fork); } renderForksList() { @@ -144,31 +110,7 @@ class SyncOnly extends React.Component { forkInfo.registry && forkInfo.getinfo) { items.push( -
-
- { - Full -
{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })
-
- this._stopIguanaFork(forkInfo.registry.pmid) }> - { translate('INDEX.STOP') } - - this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }> - { translate('INDEX.RESTART') } - -
-
-
- { this.renderProgress(forkInfo.getinfo) } -
-
+ ForkItemRender.call(this, forkInfo, port) ); } } @@ -185,26 +127,7 @@ class SyncOnly extends React.Component { render() { if (this.props && this.props.SyncOnly.display) { - return ( -
-
-
-
-
- { this.renderForksList() } -
-
- -
-
-
-
-
-
- ); + return SyncOnlyRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/syncOnly.render.js b/react/src/components/dashboard/syncOnly.render.js new file mode 100644 index 0000000..5183c35 --- /dev/null +++ b/react/src/components/dashboard/syncOnly.render.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const ProgressRender = function (fork) { + return ( +
+
+
+
+ { translate('INDEX.BUNDLES') } ({ fork.coin }) 100.00% - ( { fork.blocks } / { fork.blocks } ) ==>> RT{ fork.RTheight } +
+
+ { translate('INDEX.BUNDLES') } { fork.bundles }% +
+
+
+
+
+
+ utxo { fork.utxo }% +
+
+
+
+ { translate('INDEX.BALANCES') } { fork.balances }% +
+
+
+
+ { translate('INDEX.VALIDATED') } { fork.validated }% +
+
+
+
+ ); +}; + +export const ForkItemRender = function (forkInfo, port) { + return ( +
+
+ { + Full +
{ this.renderCoinName(forkInfo.registry.coin).name } ({ forkInfo.registry.coin.toUpperCase() })
+
+ this._stopIguanaFork(forkInfo.registry.pmid) }> + { translate('INDEX.STOP') } + + this._restartIguanaFork(forkInfo.registry.coin.toUpperCase(), forkInfo.registry.pmid, port) }> + { translate('INDEX.RESTART') } + +
+
+
+ { this.renderProgress(forkInfo.getinfo) } +
+
+ ); +}; + +export const SyncOnlyRender = function() { + return ( +
+
+
+
+
+ { this.renderForksList() } +
+
+ +
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsBalance.js b/react/src/components/dashboard/walletsBalance.js index 1c48218..4603765 100755 --- a/react/src/components/dashboard/walletsBalance.js +++ b/react/src/components/dashboard/walletsBalance.js @@ -1,6 +1,8 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import WalletsBalanceRender from './walletsBalance.render'; + class WalletsBalance extends React.Component { constructor(props) { super(props); @@ -94,87 +96,10 @@ class WalletsBalance extends React.Component { this.props.ActiveCoin.mode !== 'native' && !this.props.ActiveCoin.send && !this.props.ActiveCoin.receive) { - return ( -
-
-
-
- -

{ translate('INDEX.ACTIVATING_WALLET_RT') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

-

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

-
- -
- -

{ translate('INDEX.FETCHING_COIN_DATA') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

-

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

-

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

-
-
- -
-
-
-
-
-
- { translate('INDEX.BALANCE')} -
- - { this.renderBalance('main') } { this.props.ActiveCoin.coin } - -
-
-
-
-
- -
-
-
-
-
-
- { translate('INDEX.INTEREST_EARNED') } -
- - { this.renderBalance('interest') } { this.props.ActiveCoin.coin } - -
-
-
-
-
- -
-
-
-
-
-
- { translate('INDEX.TOTAL_BALANCE') } -
- - { this.renderBalance('total') } { this.props.ActiveCoin.coin } - -
-
-
-
-
-
-
- ); - } else { - return null; + return WalletsBalanceRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsBalance.render.js b/react/src/components/dashboard/walletsBalance.render.js new file mode 100644 index 0000000..205c77c --- /dev/null +++ b/react/src/components/dashboard/walletsBalance.render.js @@ -0,0 +1,85 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsBalanceRender = function() { + return ( +
+
+
+
+ +

{ translate('INDEX.ACTIVATING_WALLET_RT') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

+

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

+
+ +
+ +

{ translate('INDEX.FETCHING_COIN_DATA') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P1') }

+

{ translate('INDEX.IGUANA_FULL_MODE_SYNC_P2') }

+

{ this.renderLB('INDEX.IGUANA_FULL_MODE_SYNC_P3') }

+
+
+ +
+
+
+
+
+
+ { translate('INDEX.BALANCE')} +
+ + { this.renderBalance('main') } { this.props.ActiveCoin.coin } + +
+
+
+
+
+ +
+
+
+
+
+
+ { translate('INDEX.INTEREST_EARNED') } +
+ + { this.renderBalance('interest') } { this.props.ActiveCoin.coin } + +
+
+
+
+
+ +
+
+
+
+
+
+ { translate('INDEX.TOTAL_BALANCE') } +
+ + { this.renderBalance('total') } { this.props.ActiveCoin.coin } + +
+
+
+
+
+
+
+ ); +}; + +export default WalletsBalanceRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsBasiliskConnection.js b/react/src/components/dashboard/walletsBasiliskConnection.js index 3e9b2d8..402867d 100755 --- a/react/src/components/dashboard/walletsBasiliskConnection.js +++ b/react/src/components/dashboard/walletsBasiliskConnection.js @@ -1,7 +1,7 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { basiliskConnection } from '../../actions/actionCreators'; import Store from '../../store'; +import WalletsBasiliskConnectionRender from './walletsBasiliskConnection.render'; class WalletsBasiliskConnection extends React.Component { constructor(props) { @@ -26,75 +26,7 @@ class WalletsBasiliskConnection extends React.Component { render() { if (this.isBasiliskConnection()) { - return ( -
this.handleKeydown(event) }> -
-
-
-
-

- { translate('INDEX.REFRESHING_BASILISK_NET') }... -

- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } { Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }% -
-
-
-
-
-                  { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null }
-                  
-
-
-
-
-
-
- ); + return WalletsBasiliskConnectionRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/walletsBasiliskConnection.render.js b/react/src/components/dashboard/walletsBasiliskConnection.render.js new file mode 100644 index 0000000..0e4d65a --- /dev/null +++ b/react/src/components/dashboard/walletsBasiliskConnection.render.js @@ -0,0 +1,76 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsBasiliskConnectionRender = function() { + return ( +
this.handleKeydown(event) }> +
+
+
+
+

+ { translate('INDEX.REFRESHING_BASILISK_NET') }... +

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { `${translate('IAPI.CON_STATUS')}... ${this.props.Dashboard.connectedNotaries.current}/${this.props.Dashboard.connectedNotaries.total}:${this.props.Dashboard.connectedNotaries.currentNodeName}` } { Math.floor(this.props.Dashboard.connectedNotaries.current * 100 / this.props.Dashboard.connectedNotaries.total) }% +
+
+
+
+
+                { this.props.Dashboard.connectedNotaries.failedToConnectNodes ? `Failed: ${this.props.Dashboard.connectedNotaries.failedToConnectNodes}` : null }
+                
+
+
+
+
+
+
+ ); +}; + +export default WalletsBasiliskConnectionRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsBasiliskRefresh.js b/react/src/components/dashboard/walletsBasiliskRefresh.js index d768d76..c55f903 100644 --- a/react/src/components/dashboard/walletsBasiliskRefresh.js +++ b/react/src/components/dashboard/walletsBasiliskRefresh.js @@ -1,5 +1,5 @@ import React from 'react'; -import { translate } from '../../translate/translate'; +import WalletsBasiliskRefreshRender from './walletsBasiliskRefresh.render'; class WalletsBasiliskRefresh extends React.Component { isBasiliskRefresh() { @@ -9,40 +9,10 @@ class WalletsBasiliskRefresh extends React.Component { render() { if (this.isBasiliskRefresh()) { - return ( -
-
-
-
-
-

{ translate('INDEX.FETCHING_BASILISK_DATA') }

-
- -
-
-
- - - - - - - - - - - - -
{ translate('INDEX.ADDRESS') }{ translate('INDEX.LIST_UNSPENT') }{ translate('INDEX.LIST_TRANSACTIONS') }{ translate('INDEX.GET_BALANCE') }{ translate('INDEX.REFRESH') }
-
-
-
-
-
- ); - } else { - return null; + return WalletsBasiliskRefreshRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsBasiliskRefresh.render.js b/react/src/components/dashboard/walletsBasiliskRefresh.render.js new file mode 100644 index 0000000..2e03d19 --- /dev/null +++ b/react/src/components/dashboard/walletsBasiliskRefresh.render.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsBasiliskRefreshRender = function() { + return ( +
+
+
+
+
+

{ translate('INDEX.FETCHING_BASILISK_DATA') }

+
+ +
+
+
+ + + + + + + + + + +
{ translate('INDEX.ADDRESS') }{ translate('INDEX.LIST_UNSPENT') }{ translate('INDEX.LIST_TRANSACTIONS') }{ translate('INDEX.GET_BALANCE') }{ translate('INDEX.REFRESH') }
+
+
+
+
+
+ ); +}; + +export default WalletsBasiliskRefreshRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsCacheData.js b/react/src/components/dashboard/walletsCacheData.js index 98ca732..8088771 100644 --- a/react/src/components/dashboard/walletsCacheData.js +++ b/react/src/components/dashboard/walletsCacheData.js @@ -1,10 +1,9 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { secondsToString } from '../../util/time'; import { toggleViewCacheModal } from '../../actions/actionCreators'; import Store from '../../store'; -import Tree, { TreeNode } from 'rc-tree'; -import { animation } from '../../util/rc-tree-animate'; +import { TreeNode } from 'rc-tree'; +import WalletsCacheDataRender from './walletsCacheData.render'; // TODO: refresh data render @@ -160,37 +159,7 @@ class WalletsCacheData extends React.Component { this.props.ActiveCoin.mode === 'basilisk' && this.props.Dashboard.displayViewCacheModal) { - return ( -
-
-
-
-
-
-
-
-
- { this.renderNotariesFetching() } - - { this.renderCoinRootNodes() } - -
-
-
-
-
-
- -
-
-
-
-
-
- ); + return WalletsCacheDataRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/walletsCacheData.render.js b/react/src/components/dashboard/walletsCacheData.render.js new file mode 100644 index 0000000..e912448 --- /dev/null +++ b/react/src/components/dashboard/walletsCacheData.render.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import { animation } from '../../util/rc-tree-animate'; +import { TreeNode } from 'rc-tree'; + +const WalletsCacheDataRender = function() { + return ( +
+
+
+
+
+
+
+
+
+ { this.renderNotariesFetching() } + + { this.renderCoinRootNodes() } + +
+
+
+
+
+
+ +
+
+
+
+
+
+ ); +}; + +export default WalletsCacheDataRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsData.js b/react/src/components/dashboard/walletsData.js index e775326..5274360 100644 --- a/react/src/components/dashboard/walletsData.js +++ b/react/src/components/dashboard/walletsData.js @@ -1,7 +1,6 @@ import React from 'react'; import Config from '../../config'; import { translate } from '../../translate/translate'; -import { secondsToString } from '../../util/time'; import { sortByDate } from '../../util/sort'; import { basiliskRefresh, @@ -20,11 +19,15 @@ import { fetchUtxoCache } from '../../actions/actionCreators'; import Store from '../../store'; - -import WalletsBasiliskRefresh from './walletsBasiliskRefresh'; -import WalletsBasiliskConnection from './walletsBasiliskConnection'; -import WalletsNotariesList from './walletsNotariesList'; -import WalletsCacheData from './walletsCacheData'; +import { + PaginationItemRender, + PaginationItemsPerPageSelectorRender, + PaginationRender, + TxHistoryListRender, + UseCacheToggleRender, + AddressListRender, + WalletsDataRender +} from './walletsData.render'; import { SocketProvider } from 'socket.io-react'; import io from 'socket.io-client'; @@ -249,13 +252,7 @@ class WalletsData extends React.Component { for (let i=0; i < Math.ceil(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); i++) { items.push( -
  • - this.updateCurrentPage(i + 1) : null }>{ i + 1 } -
  • + PaginationItemRender.call(this, i) ); } @@ -266,23 +263,7 @@ class WalletsData extends React.Component { if (this.props.ActiveCoin.txhistory && this.state.itemsList !== 'loading' && this.props.ActiveCoin.txhistory.length > 10) { - return ( -
    - -
    - ); + return PaginationItemsPerPageSelectorRender.call(this); } else { return null; } @@ -295,26 +276,7 @@ class WalletsData extends React.Component { const _paginationFrom = ((this.state.activePage - 1) * this.state.itemsPerPage) + 1; const _paginationTo = this.state.activePage * this.state.itemsPerPage; - return ( -
    -
    -
    { translate('INDEX.SHOWING') } { _paginationFrom } { translate('INDEX.TO_ALT') } { _paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }
    -
    -
    -
    - -
    -
    -
    - ); + return PaginationRender.call(this, _paginationFrom, _paginationTo); } else { return null; } @@ -374,21 +336,7 @@ class WalletsData extends React.Component { this.state.itemsList.length && this.state.itemsList !== 'no data') { return this.state.itemsList.map((tx, index) => - - { this.renderTxType(tx.category || tx.type) } - { tx.confirmations } - { tx.amount || translate('DASHBOARD.UNKNOWN') } - { secondsToString(tx.blocktime || tx.timestamp) } - { tx.address } - - - - + TxHistoryListRender.call(this, tx, index) ); } } @@ -451,17 +399,10 @@ class WalletsData extends React.Component { // deprecated renderUseCacheToggle() { if (this.props.ActiveCoin.mode === 'basilisk') { - return ( -
    -
    - -
    - -
    - ); - } else { - return null; + return UseCacheToggleRender.call(this); } + + return null; } renderAddressByType(type) { @@ -535,28 +476,7 @@ class WalletsData extends React.Component { this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] && this.props.ActiveCoin.mode === 'basilisk') { - return ( -
    - -
    - -
    -
    - ); + return AddressListRender.call(this); } else { return null; } @@ -569,130 +489,7 @@ class WalletsData extends React.Component { this.props.ActiveCoin.mode !== 'native' && !this.props.ActiveCoin.send && !this.props.ActiveCoin.receive) { - return ( - - - - - -
    -
    -
    -
    -
    -
    -
    - -

    { translate('INDEX.TRANSACTION_HISTORY') }

    -
    -
    -
    -
    - { this.renderAddressList() } -
    - { this.renderUseCacheToggle } -
    -
    -
    - { this.renderPaginationItemsPerPageSelector() } -
    -
    -
    - -
    -
    -
    -
    - - - - - - - - - - - - - { this.renderTxHistoryList() } - - - - - - - - - - - -
    { translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    { translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    -
    - { this.renderPagination() } -
    -
    -
    -
    -
    -
    -
    -
    - ); + return WalletsDataRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/walletsData.render.js b/react/src/components/dashboard/walletsData.render.js new file mode 100644 index 0000000..0a8a7c4 --- /dev/null +++ b/react/src/components/dashboard/walletsData.render.js @@ -0,0 +1,245 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import WalletsBasiliskRefresh from './walletsBasiliskRefresh'; +import WalletsBasiliskConnection from './walletsBasiliskConnection'; +import WalletsNotariesList from './walletsNotariesList'; +import WalletsCacheData from './walletsCacheData'; +import { secondsToString } from '../../util/time'; + +export const PaginationItemRender = function(i) { + return ( +
  • + this.updateCurrentPage(i + 1) : null }>{ i + 1 } +
  • + ); +}; + +export const PaginationItemsPerPageSelectorRender = function() { + return ( +
    + +
    + ); +}; + +export const PaginationRender = function(paginationFrom, paginationTo) { + return ( +
    +
    +
    { translate('INDEX.SHOWING') } { paginationFrom } { translate('INDEX.TO_ALT') } { paginationTo } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }
    +
    +
    +
    + +
    +
    +
    + ); +}; + +export const TxHistoryListRender = function(tx, index) { + return ( + + { this.renderTxType(tx.category || tx.type) } + { tx.confirmations } + { tx.amount || translate('DASHBOARD.UNKNOWN') } + { secondsToString(tx.blocktime || tx.timestamp) } + { tx.address } + + + + + ); +}; + +export const UseCacheToggleRender = function() { + return ( +
    +
    + +
    + +
    + ); +}; + +export const AddressListRender = function() { + return ( +
    + +
    + +
    +
    + ); +}; + +export const WalletsDataRender = function() { + return ( + + + + + +
    +
    +
    +
    +
    +
    +
    + +

    { translate('INDEX.TRANSACTION_HISTORY') }

    +
    +
    +
    +
    + { this.renderAddressList() } +
    + { this.renderUseCacheToggle } +
    +
    +
    + { this.renderPaginationItemsPerPageSelector() } +
    +
    +
    + +
    +
    +
    +
    + + + + + + + + + + + + + { this.renderTxHistoryList() } + + + + + + + + + + + +
    { translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    { translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    +
    + { this.renderPagination() } +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsHeader.js b/react/src/components/dashboard/walletsHeader.js index ad1b176..372f426 100644 --- a/react/src/components/dashboard/walletsHeader.js +++ b/react/src/components/dashboard/walletsHeader.js @@ -1,5 +1,5 @@ import React from 'react'; -import { translate } from '../../translate/translate'; +import WalletsHeaderRender from './walletsHeader.render'; class WalletsHeader extends React.Component { hasActiveSection() { @@ -13,113 +13,7 @@ class WalletsHeader extends React.Component { render() { if (this.hasActiveSection()) { - return ( -
    -

    EasyDEX

    -
      -
    1. { translate('INDEX.DASHBOARD') }
    2. -
    3. -
      { translate('SIDEBAR.JUMBLR_MOTTO') } -
    4. -
    -
    - - - - -
    - -
    - - - -
    -
    -
    - - BTC - - USD -
    -
    -
    -
    - - BTCD - - USD -
    -
    -
    -
    -
    - ); + return WalletsHeaderRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/walletsHeader.render.js b/react/src/components/dashboard/walletsHeader.render.js new file mode 100644 index 0000000..0de50dc --- /dev/null +++ b/react/src/components/dashboard/walletsHeader.render.js @@ -0,0 +1,114 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsHeaderRender = function() { + return ( +
    +

    EasyDEX

    +
      +
    1. { translate('INDEX.DASHBOARD') }
    2. +
    3. +
      { translate('SIDEBAR.JUMBLR_MOTTO') } +
    4. +
    +
    + + + + +
    + +
    + + + +
    +
    +
    + - BTC + - USD +
    +
    +
    +
    + - BTCD + - USD +
    +
    +
    +
    +
    + ); +}; + +export default WalletsHeaderRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNative.js b/react/src/components/dashboard/walletsNative.js index 889165a..b6f5853 100644 --- a/react/src/components/dashboard/walletsNative.js +++ b/react/src/components/dashboard/walletsNative.js @@ -1,12 +1,5 @@ import React from 'react'; -import { translate } from '../../translate/translate'; -import WalletsNativeAlert from './walletsNativeAlert'; -import WalletsNativeBalance from './walletsNativeBalance'; -import WalletsNativeInfo from './walletsNativeInfo'; -import WalletsNativeReceive from './walletsNativeReceive'; -import WalletsNativeSend from './walletsNativeSend'; -import WalletsNativeSyncProgress from './walletsNativeSyncProgress'; -import WalletsNativeTxHistory from './walletsNativeTxHistory'; +import WalletsNativeRender from './walletsNative.render'; class WalletsNative extends React.Component { constructor(props) { @@ -30,29 +23,7 @@ class WalletsNative extends React.Component { // render() { if (this.isActiveCoinModeNative()) { - return ( -
    -
    -
    -
      -
    1. - { this.props.ActiveCoin.coin } -
    2. -
    -
    -
    - -
    - - - - - -
    -
    -
    -
    - ); + return WalletsNativeRender.call(this); } else { return null; } diff --git a/react/src/components/dashboard/walletsNative.render.js b/react/src/components/dashboard/walletsNative.render.js new file mode 100644 index 0000000..8cc220a --- /dev/null +++ b/react/src/components/dashboard/walletsNative.render.js @@ -0,0 +1,35 @@ +import React from 'react'; +import WalletsNativeBalance from './walletsNativeBalance'; +import WalletsNativeInfo from './walletsNativeInfo'; +import WalletsNativeReceive from './walletsNativeReceive'; +import WalletsNativeSend from './walletsNativeSend'; +import WalletsNativeSyncProgress from './walletsNativeSyncProgress'; +import WalletsNativeTxHistory from './walletsNativeTxHistory'; + +const WalletsNativeRender = function() { + return ( +
    +
    +
    +
      +
    1. + { this.props.ActiveCoin.coin } +
    2. +
    +
    +
    + +
    + + + + + +
    +
    +
    +
    + ); +}; + +export default WalletsNativeRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeAlert.js b/react/src/components/dashboard/walletsNativeAlert.js index e4676f2..79b137c 100644 --- a/react/src/components/dashboard/walletsNativeAlert.js +++ b/react/src/components/dashboard/walletsNativeAlert.js @@ -1,5 +1,5 @@ import React from 'react'; -import { translate } from '../../translate/translate'; +import WalletsNativeAlertRender from './walletsNativeAlert.render'; class WalletsNativeAlert extends React.Component { hasNoProgress() { @@ -10,24 +10,10 @@ class WalletsNativeAlert extends React.Component { render() { if (this.hasNoProgress()) { - return ( -
    - -

    { translate('INDEX.OOPS_ERROR') }

    -

    - { translate('INDEX.OOPS_ERROR_DESC') } - server=1
    - rpcport=
    - rpcuser=
    - rpcpassword= -

    -
    - ); - } else { - return null; + return WalletsNativeAlertRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeAlert.render.js b/react/src/components/dashboard/walletsNativeAlert.render.js new file mode 100644 index 0000000..1a5dd27 --- /dev/null +++ b/react/src/components/dashboard/walletsNativeAlert.render.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsNativeAlertRender = function() { + return ( +
    + +

    { translate('INDEX.OOPS_ERROR') }

    +

    + { translate('INDEX.OOPS_ERROR_DESC') } + server=1
    + rpcport=
    + rpcuser=
    + rpcpassword= +

    +
    + ); +}; + +export default WalletsNativeAlertRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeBalance.js b/react/src/components/dashboard/walletsNativeBalance.js index 30d10f2..d7e0f33 100644 --- a/react/src/components/dashboard/walletsNativeBalance.js +++ b/react/src/components/dashboard/walletsNativeBalance.js @@ -1,76 +1,14 @@ import React from 'react'; -import { translate } from '../../translate/translate'; +import WalletsNativeBalanceRender from './walletsNativeBalance.render'; class WalletsNativeBalance extends React.Component { render() { if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') { - return ( -
    -
    -
    -
    -
    -
    -
    - { translate('INDEX.TRANSPARENT_BALANCE') } -
    - { this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' } -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - { translate('INDEX.Z_BALANCE') } -
    - { this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' } -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - { translate('INDEX.INTEREST_EARNED') } -
    - { this.props.Dashboard.progress && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' } -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - { translate('INDEX.ZT_BALANCE') } -
    - { this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' } -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + return WalletsNativeBalanceRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeBalance.render.js b/react/src/components/dashboard/walletsNativeBalance.render.js new file mode 100644 index 0000000..6e3344a --- /dev/null +++ b/react/src/components/dashboard/walletsNativeBalance.render.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsNativeBalanceRender = function() { + return ( +
    +
    +
    +
    +
    +
    +
    + { translate('INDEX.TRANSPARENT_BALANCE') } +
    + { this.props.ActiveCoin.balance.transparent ? this.props.ActiveCoin.balance.transparent : '-' } +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + { translate('INDEX.Z_BALANCE') } +
    + { this.props.ActiveCoin.balance.private ? this.props.ActiveCoin.balance.private : '-' } +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + { translate('INDEX.INTEREST_EARNED') } +
    + { this.props.Dashboard.progress && this.props.Dashboard.progress.interest ? this.props.Dashboard.progress.interest : '-' } +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + { translate('INDEX.ZT_BALANCE') } +
    + { this.props.ActiveCoin.balance.total ? this.props.ActiveCoin.balance.total : '-' } +
    +
    +
    +
    +
    +
    + ); +}; + +export default WalletsNativeBalanceRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeInfo.js b/react/src/components/dashboard/walletsNativeInfo.js index 42528fe..6e025e1 100644 --- a/react/src/components/dashboard/walletsNativeInfo.js +++ b/react/src/components/dashboard/walletsNativeInfo.js @@ -1,5 +1,5 @@ import React from 'react'; -import { translate } from '../../translate/translate'; +import WalletsNativeInfoRender from './walletsNativeInfo.render'; class WalletsNativeInfo extends React.Component { constructor(props) { @@ -11,145 +11,10 @@ class WalletsNativeInfo extends React.Component { this.props.Dashboard && this.props.Dashboard.progress && this.props.ActiveCoin.nativeActiveSection === 'settings') { - return ( -
    -
    -
    -
    -

    { translate('INDEX.WALLET_INFO') }

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    { translate('INDEX.WALLET_VERSION') } - { this.props.Dashboard.progress.walletversion } -
    { translate('INDEX.BALANCE') } - { this.props.Dashboard.progress.balance } -
    { translate('INDEX.UNCONFIRMED_BALANCE') }
    { translate('INDEX.IMMATURE_BALANCE') }
    { translate('INDEX.TOTAL_TX_COUNT') }
    -
    -
    -
    - -
    -
    -
    -

    - Komodo { translate('INDEX.INFO') } -

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    { translate('INDEX.VERSION') } - { this.props.Dashboard.progress.KMDversion } -
    { translate('INDEX.PROTOCOL_VERSION') } - { this.props.Dashboard.progress.protocolversion } -
    { translate('INDEX.NOTARIZED') } - { this.props.Dashboard.progress.notarized } -
    - { translate('INDEX.NOTARIZED') } Hash - - { this.props.Dashboard.progress.notarizedhash ? - this.props.Dashboard.progress.notarizedhash.substring(0, Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2)) + - '\t' + - this.props.Dashboard.progress.notarizedhash.substring(Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2), this.props.Dashboard.progress.notarizedhash.length) - : '' - } -
    - { translate('INDEX.NOTARIZED') } BTC -
    { translate('INDEX.BLOCKS') } - { this.props.Dashboard.progress.blocks } -
    { translate('INDEX.CONNECTIONS') } - { this.props.Dashboard.progress.connections } -
    { translate('INDEX.DIFFICULTY') } - { this.props.Dashboard.progress.difficulty } -
    Testnet - { this.props.Dashboard.progress.testnet } -
    { translate('INDEX.PAY_TX_FEE') } - { this.props.Dashboard.progress.paytxfee } -
    { translate('INDEX.RELAY_FEE') } - { this.props.Dashboard.progress.relayfee } -
    { translate('INDEX.ERRORS') } - { this.props.Dashboard.progress.errors } -
    -
    -
    -
    -
    - ); - } else { - return null; + return WalletsNativeInfoRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeInfo.render.js b/react/src/components/dashboard/walletsNativeInfo.render.js new file mode 100644 index 0000000..bf9f26d --- /dev/null +++ b/react/src/components/dashboard/walletsNativeInfo.render.js @@ -0,0 +1,143 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsNativeInfoRender = function() { + return ( +
    +
    +
    +
    +

    { translate('INDEX.WALLET_INFO') }

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    { translate('INDEX.WALLET_VERSION') } + { this.props.Dashboard.progress.walletversion } +
    { translate('INDEX.BALANCE') } + { this.props.Dashboard.progress.balance } +
    { translate('INDEX.UNCONFIRMED_BALANCE') }
    { translate('INDEX.IMMATURE_BALANCE') }
    { translate('INDEX.TOTAL_TX_COUNT') }
    +
    +
    +
    + +
    +
    +
    +

    + Komodo { translate('INDEX.INFO') } +

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    { translate('INDEX.VERSION') } + { this.props.Dashboard.progress.KMDversion } +
    { translate('INDEX.PROTOCOL_VERSION') } + { this.props.Dashboard.progress.protocolversion } +
    { translate('INDEX.NOTARIZED') } + { this.props.Dashboard.progress.notarized } +
    + { translate('INDEX.NOTARIZED') } Hash + + { this.props.Dashboard.progress.notarizedhash ? + this.props.Dashboard.progress.notarizedhash.substring(0, Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2)) + + '\t' + + this.props.Dashboard.progress.notarizedhash.substring(Math.floor(this.props.Dashboard.progress.notarizedhash.length / 2), this.props.Dashboard.progress.notarizedhash.length) + : '' + } +
    + { translate('INDEX.NOTARIZED') } BTC +
    { translate('INDEX.BLOCKS') } + { this.props.Dashboard.progress.blocks } +
    { translate('INDEX.CONNECTIONS') } + { this.props.Dashboard.progress.connections } +
    { translate('INDEX.DIFFICULTY') } + { this.props.Dashboard.progress.difficulty } +
    Testnet + { this.props.Dashboard.progress.testnet } +
    { translate('INDEX.PAY_TX_FEE') } + { this.props.Dashboard.progress.paytxfee } +
    { translate('INDEX.RELAY_FEE') } + { this.props.Dashboard.progress.relayfee } +
    { translate('INDEX.ERRORS') } + { this.props.Dashboard.progress.errors } +
    +
    +
    +
    +
    + ); +}; + +export default WalletsNativeInfoRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeReceive.js b/react/src/components/dashboard/walletsNativeReceive.js index 60d4036..7cc7b4f 100644 --- a/react/src/components/dashboard/walletsNativeReceive.js +++ b/react/src/components/dashboard/walletsNativeReceive.js @@ -1,10 +1,13 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { copyCoinAddress, getNewKMDAddresses } from '../../actions/actionCreators'; import Store from '../../store'; +import { + AddressListRender, + WalletsNativeReceiveRender +} from './walletsNativeReceive.render'; class WalletsNativeReceive extends React.Component { constructor(props) { @@ -48,23 +51,11 @@ class WalletsNativeReceive extends React.Component { this.props.ActiveCoin.addresses[type] && this.props.ActiveCoin.addresses[type].length) { return this.props.ActiveCoin.addresses[type].map((address) => - - - - { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') } - - - - { type === 'public' ? address.address : address.address.substring(0, 34) + '...' } - { address.amount } - - + AddressListRender.call(this, address, type) ); - } else { - return null; } + + return null; } getNewAddress(type) { @@ -75,68 +66,10 @@ class WalletsNativeReceive extends React.Component { if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'receive') { - return ( -
    -
    -
    -
    -
    -
    -
    - -

    { translate('INDEX.RECEIVING_ADDRESS') }

    -
    -
    - - - - - - - - - - { this.renderAddressList('public') } - { this.renderAddressList('private') } - - - - - - - - -
    { translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.AMOUNT') }
    { translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.AMOUNT') }
    -
    -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + WalletsNativeReceiveRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeReceive.render.js b/react/src/components/dashboard/walletsNativeReceive.render.js new file mode 100644 index 0000000..f172524 --- /dev/null +++ b/react/src/components/dashboard/walletsNativeReceive.render.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const AddressListRender = function(address, type) { + return ( + + + + { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') } + + + + { type === 'public' ? address.address : address.address.substring(0, 34) + '...' } + { address.amount } + + + ); +}; + +export const WalletsNativeReceiveRender = function() { + return ( +
    +
    +
    +
    +
    +
    +
    + +

    { translate('INDEX.RECEIVING_ADDRESS') }

    +
    +
    + + + + + + + + + + { this.renderAddressList('public') } + { this.renderAddressList('private') } + + + + + + + + +
    { translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.AMOUNT') }
    { translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.AMOUNT') }
    +
    +
    +
    +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeSend.js b/react/src/components/dashboard/walletsNativeSend.js index 666881e..cd8e1b5 100644 --- a/react/src/components/dashboard/walletsNativeSend.js +++ b/react/src/components/dashboard/walletsNativeSend.js @@ -9,6 +9,11 @@ import { getKMDOPID } from '../../actions/actionCreators'; import Store from '../../store'; +import { + AddressListRender, + OASendUIRender, + WalletsNativeSendRender +} from './walletsNativeSend.render'; class WalletsNativeSend extends React.Component { constructor(props) { @@ -77,29 +82,7 @@ class WalletsNativeSend extends React.Component { } renderAddressList() { - return ( -
    - -
    - -
    -
    - ); + return AddressListRender.call(this); } renderOPIDLabel(opid) { @@ -245,163 +228,20 @@ class WalletsNativeSend extends React.Component { renderOASendUI() { if (Config.openAlias) { - return ( -
    -
    - - -
    -
    - -
    -
    - ); - } else { - return null; + return OASendUIRender.call(this); } + + return null; } render() { if (this.props && this.props.ActiveCoin && this.props.ActiveCoin.nativeActiveSection === 'send') { - return ( -
    -
    -
    -
    -

    - { translate('INDEX.SEND') } { this.props.ActiveCoin.coin } -

    -
    -
    -
    -
    -
    - - { this.renderAddressList() } -
    -
    - { this.renderOASendUI() } -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - { translate('INDEX.TOTAL') }: { this.state.amount } - { this.state.fee }/kb = { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } - -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -

    { translate('INDEX.OPERATIONS_STATUSES') }

    -
    -
    - - - - - - - - - - - { this.renderOPIDList() } - - - - - - - - - -
    { translate('INDEX.STATUS') }ID{ translate('INDEX.TIME') }{ translate('INDEX.RESULT') }
    { translate('INDEX.STATUS') }ID{ translate('INDEX.TIME') }{ translate('INDEX.RESULT') }
    -
    -
    -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + return WalletsNativeSendRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeSend.render.js b/react/src/components/dashboard/walletsNativeSend.render.js new file mode 100644 index 0000000..71400f6 --- /dev/null +++ b/react/src/components/dashboard/walletsNativeSend.render.js @@ -0,0 +1,179 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const AddressListRender = function() { + return ( +
    + +
    + +
    +
    + ); +}; + +export const OASendUIRender = function() { + return ( +
    +
    + + +
    +
    + +
    +
    + ); +}; + +export const WalletsNativeSendRender = function() { + return ( +
    +
    +
    +
    +

    + { translate('INDEX.SEND') } { this.props.ActiveCoin.coin } +

    +
    +
    +
    +
    +
    + + { this.renderAddressList() } +
    +
    + { this.renderOASendUI() } +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + { translate('INDEX.TOTAL') }: { this.state.amount } - { this.state.fee }/kb = { Number(this.state.amount) - Number(this.state.fee) } { this.props.ActiveCoin.coin } + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    { translate('INDEX.OPERATIONS_STATUSES') }

    +
    +
    + + + + + + + + + + + { this.renderOPIDList() } + + + + + + + + + +
    { translate('INDEX.STATUS') }ID{ translate('INDEX.TIME') }{ translate('INDEX.RESULT') }
    { translate('INDEX.STATUS') }ID{ translate('INDEX.TIME') }{ translate('INDEX.RESULT') }
    +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeSyncProgress.js b/react/src/components/dashboard/walletsNativeSyncProgress.js index 0a052c0..46f65c3 100644 --- a/react/src/components/dashboard/walletsNativeSyncProgress.js +++ b/react/src/components/dashboard/walletsNativeSyncProgress.js @@ -1,5 +1,9 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import { + ChainActivationNotificationRender, + WalletsNativeSyncProgressRender +} from './walletsNativeSyncProgress.render'; class WalletsNativeSyncProgress extends React.Component { renderSyncPercentagePlaceholder() { @@ -79,41 +83,20 @@ class WalletsNativeSyncProgress extends React.Component { renderChainActivationNotification() { if ((!this.props.Dashboard.progress.blocks && !this.props.Dashboard.progress.longestchain) || (this.props.Dashboard.progress.blocks < this.props.Dashboard.progress.longestchain)) { - return ( -
    - -

    - { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() } -

    -

    { this.renderLB('INDEX.KMD_STARTED') }

    -
    - ); - } else { - return null; + return ChainActivationNotificationRender.call(this); } + + return null; } render() { if (this.props && this.props.Dashboard && this.props.Dashboard.progress) { - return ( -
    - { this.renderChainActivationNotification() } -
    -
    -
    - { this.renderSyncPercentagePlaceholder() } -
    -
    -
    -
    - ); - } else { - return null; + return WalletsNativeSyncProgressRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeSyncProgress.render.js b/react/src/components/dashboard/walletsNativeSyncProgress.render.js new file mode 100644 index 0000000..149e0c9 --- /dev/null +++ b/react/src/components/dashboard/walletsNativeSyncProgress.render.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const ChainActivationNotificationRender = function() { + return ( +
    + +

    + { translate('INDEX.ACTIVATING_CHAIN') }{ this.renderActivatingBestChainProgress() } +

    +

    { this.renderLB('INDEX.KMD_STARTED') }

    +
    + ); +}; + +export const WalletsNativeSyncProgressRender = function() { + return ( +
    + { this.renderChainActivationNotification() } +
    +
    +
    + { this.renderSyncPercentagePlaceholder() } +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeTxHistory.js b/react/src/components/dashboard/walletsNativeTxHistory.js index 39162f5..2090ace 100644 --- a/react/src/components/dashboard/walletsNativeTxHistory.js +++ b/react/src/components/dashboard/walletsNativeTxHistory.js @@ -1,9 +1,14 @@ import React from 'react'; import { translate } from '../../translate/translate'; -import { secondsToString } from '../../util/time'; import { sortByDate } from '../../util/sort'; import { toggleDashboardTxInfoModal } from '../../actions/actionCreators'; import Store from '../../store'; +import { + PaginationItemsPerPageSelectorRender, + PaginationRender, + TxHistoryListRender, + WalletsNativeTxHistoryRender +} from './walletsNativeTxHistory.render'; class WalletsNativeTxHistory extends React.Component { constructor(props) { @@ -138,23 +143,7 @@ class WalletsNativeTxHistory extends React.Component { if (this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory !== 'loading' && this.props.ActiveCoin.txhistory.length > 10) { - return ( -
    - -
    - ); + return PaginationItemsPerPageSelectorRender.call(this); } else { return null; } @@ -168,29 +157,10 @@ class WalletsNativeTxHistory extends React.Component { const _paginationEnd = this.state.activePage * this.state.itemsPerPage; const _paginationNextState = this.state.activePage > Math.floor(this.props.ActiveCoin.txhistory.length / this.state.itemsPerPage); - return ( -
    -
    -
    { translate('INDEX.SHOWING') } { _paginationStart } { translate('INDEX.TO') } { _paginationEnd } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }
    -
    -
    -
    - -
    -
    -
    - ); - } else { - return null; + return PaginationRender.call(this, _paginationStart, _paginationEnd, _paginationNextState); } + + return null; } renderTxHistoryList() { @@ -211,101 +181,20 @@ class WalletsNativeTxHistory extends React.Component { if (this.state.itemsList && this.state.itemsList.length && this.props.ActiveCoin.nativeActiveSection === 'default') { - return this.state.itemsList.map((tx, index) => - - - - { translate('IAPI.PUBLIC_SM') } - - - { this.renderTxType(tx.category) } - { tx.confirmations } - { tx.amount } - { secondsToString(tx.time) } - { this.renderAddress(tx) } - - - - - ); - } else { - return null; + return TxHistoryListRender.call(this); } + + return null; } } render() { if (this.props && this.props.ActiveCoin.nativeActiveSection === 'default') { - return ( -
    -
    -
    -
    -
    -
    -
    -
    -

    { translate('INDEX.TRANSACTION_HISTORY') }

    -
    -
    -
    -
    - { this.renderPaginationItemsPerPageSelector() } -
    -
    -
    - -
    -
    -
    -
    - - - - - - - - - - - - - - { this.renderTxHistoryList() } - - - - - - - - - - - - -
    { translate('INDEX.TYPE') }{ translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    { translate('INDEX.TYPE') }{ translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    -
    - { this.renderPagination() } -
    -
    -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + return WalletsNativeTxHistoryRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNativeTxHistory.render.js b/react/src/components/dashboard/walletsNativeTxHistory.render.js new file mode 100644 index 0000000..7e37d9c --- /dev/null +++ b/react/src/components/dashboard/walletsNativeTxHistory.render.js @@ -0,0 +1,137 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import { secondsToString } from '../../util/time'; + +export const PaginationItemsPerPageSelectorRender = function() { + return ( +
    + +
    + ); +}; + +export const PaginationRender = function(paginationStart, paginationEnd, paginationNextState) { + return ( +
    +
    +
    { translate('INDEX.SHOWING') } { paginationStart } { translate('INDEX.TO') } { paginationEnd } { translate('INDEX.OF') } { this.props.ActiveCoin.txhistory.length } { translate('INDEX.ENTRIES_SM') }
    +
    +
    +
    + +
    +
    +
    + ); +}; + +export const TxHistoryListRender = function() { + return this.state.itemsList.map((tx, index) => + + + + { translate('IAPI.PUBLIC_SM') } + + + { this.renderTxType(tx.category) } + { tx.confirmations } + { tx.amount } + { secondsToString(tx.time) } + { this.renderAddress(tx) } + + + + + ); +}; + +export const WalletsNativeTxHistoryRender = function() { + return ( +
    +
    +
    +
    +
    +
    +
    +
    +

    { translate('INDEX.TRANSACTION_HISTORY') }

    +
    +
    +
    +
    + { this.renderPaginationItemsPerPageSelector() } +
    +
    +
    + +
    +
    +
    +
    + + + + + + + + + + + + + + { this.renderTxHistoryList() } + + + + + + + + + + + + +
    { translate('INDEX.TYPE') }{ translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    { translate('INDEX.TYPE') }{ translate('INDEX.DIRECTION') }{ translate('INDEX.CONFIRMATIONS') }{ translate('INDEX.AMOUNT') }{ translate('INDEX.TIME') }{ translate('INDEX.DEST_ADDRESS') }{ translate('INDEX.TX_DETAIL') }
    +
    + { this.renderPagination() } +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNativeTxInfo.js b/react/src/components/dashboard/walletsNativeTxInfo.js index 9378453..e498e77 100644 --- a/react/src/components/dashboard/walletsNativeTxInfo.js +++ b/react/src/components/dashboard/walletsNativeTxInfo.js @@ -1,6 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; -import { secondsToString } from '../../util/time'; import { toggleDashboardTxInfoModal } from '../../actions/actionCreators'; import Store from '../../store'; @@ -36,152 +34,7 @@ class WalletsNativeTxInfo extends React.Component { this.props.ActiveCoin.mode === 'native') { const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex]; - return ( -
    this.handleKeydown(event) }> -
    -
    -
    -
    -
    - -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    amount - { txInfo.amount } -
    fee - { txInfo.fee } -
    confirmations - { txInfo.confirmations } -
    blockhash - { txInfo.blockhash } -
    blockindex - {txInfo.blockindex} -
    blocktime - { secondsToString(txInfo.blocktime) } -
    txid - { txInfo.txid } -
    walletconflicts - { txInfo.walletconflicts.length } -
    time - { secondsToString(txInfo.time) } -
    timereceived - { secondsToString(txInfo.timereceived) } -
    -
    -
    - - - - - - - - - - - -
    vjoinsplit - { txInfo.vjoinsplit } -
    details - { txInfo.details } -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - ); + return WalletsNativeTxInfoRender.call(this, txInfo); } else { return null; } diff --git a/react/src/components/dashboard/walletsNativeTxInfo.render.js b/react/src/components/dashboard/walletsNativeTxInfo.render.js new file mode 100644 index 0000000..0f5a2cb --- /dev/null +++ b/react/src/components/dashboard/walletsNativeTxInfo.render.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import { secondsToString } from '../../util/time'; + +const WalletsNativeTxInfoRender = function(txInfo) { + return ( +
    this.handleKeydown(event) }> +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    amount + { txInfo.amount } +
    fee + { txInfo.fee } +
    confirmations + { txInfo.confirmations } +
    blockhash + { txInfo.blockhash } +
    blockindex + {txInfo.blockindex} +
    blocktime + { secondsToString(txInfo.blocktime) } +
    txid + { txInfo.txid } +
    walletconflicts + { txInfo.walletconflicts.length } +
    time + { secondsToString(txInfo.time) } +
    timereceived + { secondsToString(txInfo.timereceived) } +
    +
    +
    + + + + + + + + + + + +
    vjoinsplit + { txInfo.vjoinsplit } +
    details + { txInfo.details } +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + ); +}; + +export default WalletsNativeTxInfoRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNav.js b/react/src/components/dashboard/walletsNav.js index 59ff523..2860a48 100644 --- a/react/src/components/dashboard/walletsNav.js +++ b/react/src/components/dashboard/walletsNav.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { copyCoinAddress, iguanaEdexBalance, @@ -9,6 +8,10 @@ import { toggleDashboardActiveSection } from '../../actions/actionCreators'; import Store from '../../store'; +import { + WalletsNavNoWalletRender, + WalletsNavWithWalletRender +} from './walletsNav.render'; class WalletsNav extends React.Component { constructor(props) { @@ -52,56 +55,10 @@ class WalletsNav extends React.Component { if (this.props && this.props.ActiveCoin && !this.props.ActiveCoin.coin) { - return ( -
    -
    -
    - - - { translate('INDEX.NO_WALLET_CAPS') } - -
    - { translate('INDEX.PLEASE_SELECT_A_WALLET') }. -
    -
    -
    - ); - } else { - return ( -
    -
    -
      - { translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' } -
    -
    -
    - - - -
    -
    -
    -
    - ); + return WalletsNavNoWalletRender.call(this); } + + return WalletsNavWithWalletRender.call(this); } } diff --git a/react/src/components/dashboard/walletsNav.render.js b/react/src/components/dashboard/walletsNav.render.js new file mode 100644 index 0000000..57db2c9 --- /dev/null +++ b/react/src/components/dashboard/walletsNav.render.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const WalletsNavNoWalletRender = function () { + return ( +
    +
    +
    + + + { translate('INDEX.NO_WALLET_CAPS') } + +
    + { translate('INDEX.PLEASE_SELECT_A_WALLET') }. +
    +
    +
    + ); +}; + +export const WalletsNavWithWalletRender = function () { + return ( +
    +
    +
      + { translate('INDEX.MY') } { this.props && this.props.ActiveCoin ? this.props.ActiveCoin.coin : '-' } { translate('INDEX.ADDRESS') }: { this.props && this.props.Dashboard && this.props.Dashboard.activeHandle ? this.props.Dashboard.activeHandle[this.props.ActiveCoin.coin] : '-' } +
    +
    +
    + + + +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsNotariesList.js b/react/src/components/dashboard/walletsNotariesList.js index bc6326a..24f16e5 100644 --- a/react/src/components/dashboard/walletsNotariesList.js +++ b/react/src/components/dashboard/walletsNotariesList.js @@ -2,8 +2,11 @@ import React from 'react'; import { translate } from '../../translate/translate'; import { displayNotariesModal } from '../../actions/actionCreators'; import Store from '../../store'; -import Tree, { TreeNode } from 'rc-tree'; -import { animation } from '../../util/rc-tree-animate'; +import { TreeNode } from 'rc-tree'; +import { + NotariesListRender, + WalletsNotariesListRender +} from './walletsNotariesList.render'; class WalletsNotariesList extends React.Component { constructor(props) { @@ -38,11 +41,7 @@ class WalletsNotariesList extends React.Component { this.props.ActiveCoin.notaries.notaries && this.props.ActiveCoin.notaries.notaries.length) { return this.props.ActiveCoin.notaries.notaries.map((node, index) => - - - - - + NotariesListRender.call(this, node, index) ); } else { return null; @@ -53,42 +52,10 @@ class WalletsNotariesList extends React.Component { if (this.props && this.props.ActiveCoin.mode === 'basilisk' && this.props.ActiveCoin.displayNotariesModal) { - const notariesData = this.props.ActiveCoin.notaries ? this.props.ActiveCoin.notaries.notaries : null; - - return ( -
    this.handleKeydown(event) }> -
    -
    -
    -
    -
    -
    -
    -
    - { this.renderNotariesFetching() } - - { this.renderNotariesList() } - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + return WalletsNotariesListRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsNotariesList.render.js b/react/src/components/dashboard/walletsNotariesList.render.js new file mode 100644 index 0000000..f1db6c5 --- /dev/null +++ b/react/src/components/dashboard/walletsNotariesList.render.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import Tree, { TreeNode } from 'rc-tree'; +import { animation } from '../../util/rc-tree-animate'; + +export const NotariesListRender = function (node, index) { + + + + + +}; + +export const WalletsNotariesListRender = function () { + return ( +
    this.handleKeydown(event) }> +
    +
    +
    +
    +
    +
    +
    +
    + { this.renderNotariesFetching() } + + { this.renderNotariesList() } + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsProgress.js b/react/src/components/dashboard/walletsProgress.js index a33d5c2..f2200bf 100644 --- a/react/src/components/dashboard/walletsProgress.js +++ b/react/src/components/dashboard/walletsProgress.js @@ -1,5 +1,6 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import WalletsProgressRender from './walletsProgress.render'; class WalletsProgress extends React.Component { constructor(props) { @@ -28,52 +29,12 @@ class WalletsProgress extends React.Component { return (
    { translate('INDEX.COIN_IS_BUSY') }
    ); - } else { - return ( - - ); } - } else { - return null; + + return WalletsProgressRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/walletsProgress.render.js b/react/src/components/dashboard/walletsProgress.render.js new file mode 100644 index 0000000..3591ffd --- /dev/null +++ b/react/src/components/dashboard/walletsProgress.render.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const WalletsProgressRender = function () { + return ( + + ); +}; + +export default WalletsProgressRender; \ No newline at end of file diff --git a/react/src/components/dashboard/walletsTxInfo.js b/react/src/components/dashboard/walletsTxInfo.js index 2f4363e..f90f554 100644 --- a/react/src/components/dashboard/walletsTxInfo.js +++ b/react/src/components/dashboard/walletsTxInfo.js @@ -1,8 +1,7 @@ import React from 'react'; -import { translate } from '../../translate/translate'; -import { secondsToString } from '../../util/time'; import { toggleDashboardTxInfoModal } from '../../actions/actionCreators'; import Store from '../../store'; +import WalletsTxInfoRender from './walletsTxInfo.render'; class WalletsTxInfo extends React.Component { constructor(props) { @@ -34,102 +33,10 @@ class WalletsTxInfo extends React.Component { this.props.ActiveCoin.showTransactionInfo && this.props.ActiveCoin.mode !== 'native') { const txInfo = this.props.ActiveCoin.txhistory[this.props.ActiveCoin.showTransactionInfoTxIndex]; - - return ( -
    this.handleKeydown(event) }> -
    -
    -
    -
    -
    - -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    { translate('TX_INFO.ADDRESS') } - { txInfo.address } -
    { translate('TX_INFO.AMOUNT') } - { txInfo.amount } -
    { translate('TX_INFO.CATEGORY') } - { txInfo.category || txInfo.type } -
    { translate('TX_INFO.CONFIRMATIONS') } - { txInfo.confirmations } -
    blockhash - { txInfo.blockhash } -
    blocktime - { secondsToString(txInfo.blocktime || txInfo.timestamp) } -
    txid - { txInfo.txid } -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + return WalletsTxInfoRender.call(this, txInfo); } + + return null; } } diff --git a/react/src/components/dashboard/walletsTxInfo.render.js b/react/src/components/dashboard/walletsTxInfo.render.js new file mode 100644 index 0000000..d27daa3 --- /dev/null +++ b/react/src/components/dashboard/walletsTxInfo.render.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import { secondsToString } from '../../util/time'; + +const WalletsTxInfoRender = function(txInfo) { + return ( +
    this.handleKeydown(event) }> +
    +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    { translate('TX_INFO.ADDRESS') } + { txInfo.address } +
    { translate('TX_INFO.AMOUNT') } + { txInfo.amount } +
    { translate('TX_INFO.CATEGORY') } + { txInfo.category || txInfo.type } +
    { translate('TX_INFO.CONFIRMATIONS') } + { txInfo.confirmations } +
    blockhash + { txInfo.blockhash } +
    blocktime + { secondsToString(txInfo.blocktime || txInfo.timestamp) } +
    txid + { txInfo.txid } +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + ); +}; + +export default WalletsTxInfoRender; \ No newline at end of file diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js index 1a32c55..fcadff9 100644 --- a/react/src/components/login/login.js +++ b/react/src/components/login/login.js @@ -14,6 +14,9 @@ import { import Store from '../../store'; import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator'; +import SwallModalRender from './swall-modal.render'; +import LoginRender from './login.render'; + const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000; const IGUNA_ACTIVE_COINS_TIMEOUT = 10000; @@ -165,195 +168,18 @@ class Login extends React.Component { renderSwallModal() { if (this.state.displaySeedBackupModal) { - return ( -
    -
    -
    -
    !
    -

    { translate('LOGIN.SAVED_WALLET_SEED') }

    -
    { translate('LOGIN.SEED_MAKE_SURE_BACKUP') }
    -
    - - -
    -
    - ); - } else { - return null; + return SwallModalRender.call(this); } + + return null; } render() { if ((this.state && this.state.display) || !this.props.Main) { - return ( -
    - { this.renderSwallModal() } -
    -
    -
    - SuperNET Iguana -
    - -
    - - { translate('LOGIN.DISPLAY_SYNC_ONLY') } - -
    - -
    -
    -
    -

    { translate('INDEX.UNSUPPORTED_BROWSER') }

    -
    -
    - - { translate('INDEX.IE_UNSUPPORTED') } -
    -
    -

    - { translate('INDEX.PLEASE_USE') } Google Chrome { translate('INDEX.OR') } Mozilla FireFox { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }. -

    -
    - Google Chrome -
    -
    - Mozilla FireFox -
    -
    -
    -
    - -
    -

    {translate('INDEX.WELCOME_LOGIN')}

    -
    -
    - this.handleKeydown(event) } /> - - -
    - -
    - - - -
    -
    -
    - -
    -

    { translate('INDEX.WELCOME_PLEASE_ADD') }

    -
    - -
    -
    - -
    -
    -

    - { translate('INDEX.SELECT_SEED_TYPE') }: -

    -
    -
    this.generateNewSeed(256) }> - - -
    -
    this.generateNewSeed(160) }> - - -
    -
    this.generateNewSeed(128) }> - - -
    -
    -
    - - -
    -
    - - { translate('LOGIN.ENTER_VALUE_AGAIN') }. - -
    - -
    - -
    -
    -
    -
    -
    -
    - ); - } else { - return null; + return LoginRender.call(this); } + + return null; } } diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js new file mode 100644 index 0000000..61b40ce --- /dev/null +++ b/react/src/components/login/login.render.js @@ -0,0 +1,168 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const LoginRender = function () { + return ( +
    + { this.renderSwallModal() } +
    +
    +
    + SuperNET Iguana +
    + +
    + + { translate('LOGIN.DISPLAY_SYNC_ONLY') } + +
    + +
    +
    +
    +

    { translate('INDEX.UNSUPPORTED_BROWSER') }

    +
    +
    + + { translate('INDEX.IE_UNSUPPORTED') } +
    +
    +

    + { translate('INDEX.PLEASE_USE') } Google Chrome { translate('INDEX.OR') } Mozilla FireFox { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }. +

    +
    + Google Chrome +
    +
    + Mozilla FireFox +
    +
    +
    +
    + +
    +

    {translate('INDEX.WELCOME_LOGIN')}

    +
    +
    + this.handleKeydown(event) } /> + + +
    + +
    + + + +
    +
    +
    + +
    +

    { translate('INDEX.WELCOME_PLEASE_ADD') }

    +
    + +
    +
    + +
    +
    +

    + { translate('INDEX.SELECT_SEED_TYPE') }: +

    +
    +
    this.generateNewSeed(256) }> + + +
    +
    this.generateNewSeed(160) }> + + +
    +
    this.generateNewSeed(128) }> + + +
    +
    +
    + + +
    +
    + + { translate('LOGIN.ENTER_VALUE_AGAIN') }. + +
    + +
    + +
    +
    +
    +
    +
    +
    + ); +}; + +export default LoginRender; \ No newline at end of file diff --git a/react/src/components/login/swall-modal.render.js b/react/src/components/login/swall-modal.render.js new file mode 100644 index 0000000..9f5a7b1 --- /dev/null +++ b/react/src/components/login/swall-modal.render.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const SwallModalRender = function () { + return ( +
    +
    +
    +
    !
    +

    { translate('LOGIN.SAVED_WALLET_SEED') }

    +
    { translate('LOGIN.SEED_MAKE_SURE_BACKUP') }
    +
    + + +
    +
    + ); +}; + +export default SwallModalRender; \ No newline at end of file