From 983658ccae70aa84b6bb8221d9b0f72672e12138 Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Wed, 7 Jun 2017 00:02:03 +0200 Subject: [PATCH] Decouple jsx out of js - dashboard pages --- react/src/components/dashboard/sendCoin.js | 361 ++---------------- .../components/dashboard/sendCoin.render.js | 336 ++++++++++++++++ .../dashboard/walletsBasiliskRefresh.js | 38 +- .../walletsBasiliskRefresh.render.js | 38 ++ .../components/dashboard/walletsCacheData.js | 37 +- .../dashboard/walletsCacheData.render.js | 40 ++ react/src/components/dashboard/walletsData.js | 239 +----------- .../dashboard/walletsData.render.js | 245 ++++++++++++ .../src/components/dashboard/walletsHeader.js | 110 +----- .../dashboard/walletsHeader.render.js | 114 ++++++ .../src/components/dashboard/walletsNative.js | 33 +- .../dashboard/walletsNative.render.js | 35 ++ .../dashboard/walletsNativeAlert.js | 22 +- .../dashboard/walletsNativeAlert.render.js | 22 ++ .../dashboard/walletsNativeBalance.js | 70 +--- .../dashboard/walletsNativeBalance.render.js | 70 ++++ .../components/dashboard/walletsNativeInfo.js | 143 +------ .../dashboard/walletsNativeInfo.render.js | 143 +++++++ .../dashboard/walletsNativeReceive.js | 87 +---- .../dashboard/walletsNativeReceive.render.js | 82 ++++ .../components/dashboard/walletsNativeSend.js | 184 +-------- .../dashboard/walletsNativeSend.render.js | 179 +++++++++ .../dashboard/walletsNativeSyncProgress.js | 37 +- .../walletsNativeSyncProgress.render.js | 31 ++ .../dashboard/walletsNativeTxHistory.js | 143 +------ .../walletsNativeTxHistory.render.js | 137 +++++++ .../dashboard/walletsNativeTxInfo.js | 149 +------- .../dashboard/walletsNativeTxInfo.render.js | 154 ++++++++ react/src/components/dashboard/walletsNav.js | 57 +-- .../components/dashboard/walletsNav.render.js | 56 +++ .../dashboard/walletsNotariesList.js | 51 +-- .../dashboard/walletsNotariesList.render.js | 46 +++ .../components/dashboard/walletsProgress.js | 49 +-- .../dashboard/walletsProgress.render.js | 48 +++ .../src/components/dashboard/walletsTxInfo.js | 101 +---- .../dashboard/walletsTxInfo.render.js | 100 +++++ 36 files changed, 2019 insertions(+), 1768 deletions(-) create mode 100644 react/src/components/dashboard/sendCoin.render.js create mode 100644 react/src/components/dashboard/walletsBasiliskRefresh.render.js create mode 100644 react/src/components/dashboard/walletsCacheData.render.js create mode 100644 react/src/components/dashboard/walletsData.render.js create mode 100644 react/src/components/dashboard/walletsHeader.render.js create mode 100644 react/src/components/dashboard/walletsNative.render.js create mode 100644 react/src/components/dashboard/walletsNativeAlert.render.js create mode 100644 react/src/components/dashboard/walletsNativeBalance.render.js create mode 100644 react/src/components/dashboard/walletsNativeInfo.render.js create mode 100644 react/src/components/dashboard/walletsNativeReceive.render.js create mode 100644 react/src/components/dashboard/walletsNativeSend.render.js create mode 100644 react/src/components/dashboard/walletsNativeSyncProgress.render.js create mode 100644 react/src/components/dashboard/walletsNativeTxHistory.render.js create mode 100644 react/src/components/dashboard/walletsNativeTxInfo.render.js create mode 100644 react/src/components/dashboard/walletsNav.render.js create mode 100644 react/src/components/dashboard/walletsNotariesList.render.js create mode 100644 react/src/components/dashboard/walletsProgress.render.js create mode 100644 react/src/components/dashboard/walletsTxInfo.render.js 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..0803e4d --- /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/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..c88758c --- /dev/null +++ b/react/src/components/dashboard/walletsBasiliskRefresh.render.js @@ -0,0 +1,38 @@ +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..9101f94 --- /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..983ddfd --- /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. -
    2. -
      { translate('SIDEBAR.JUMBLR_MOTTO') } -
      3. -
    -
    - - - - -
    - -
    - - - -
    -
    -
    - - 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..ea99bd5 --- /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. +
    2. +
      { translate('SIDEBAR.JUMBLR_MOTTO') } +
      3. +
    +
    + + + + +
    + +
    + + + +
    +
    +
    + - 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..7e3dbb2 --- /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..fc6d16a --- /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..af27803 --- /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..e244f7e --- /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..0841d3f --- /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..aa682dd --- /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..7f714f5 --- /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..84c84a4 --- /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..51d80fe --- /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..c365a14 --- /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