From 11b24b1b0a4a1852824623b9b251a861f139db4c Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Sat, 17 Jun 2017 15:23:40 +0200 Subject: [PATCH] Merge the walletsNativeReceive component --- .../dashboard/main/dashboard.render.js | 2 +- .../dashboard/receiveCoin/receiveCoin.js | 83 ++++++++++++---- .../receiveCoin/receiveCoin.render.js | 98 ++++++++++++++----- .../walletsNative/walletsNative.render.js | 2 - .../walletsNativeReceive.js | 76 -------------- .../walletsNativeReceive.render.js | 82 ---------------- .../walletsNativeSyncProgress.js | 1 + 7 files changed, 137 insertions(+), 207 deletions(-) delete mode 100644 react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.js delete mode 100644 react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.render.js diff --git a/react/src/components/dashboard/main/dashboard.render.js b/react/src/components/dashboard/main/dashboard.render.js index 32a36c9..f6a5727 100644 --- a/react/src/components/dashboard/main/dashboard.render.js +++ b/react/src/components/dashboard/main/dashboard.render.js @@ -30,10 +30,10 @@ const DashboardRender = function() { - +
diff --git a/react/src/components/dashboard/receiveCoin/receiveCoin.js b/react/src/components/dashboard/receiveCoin/receiveCoin.js index 99c5069..4be2de3 100644 --- a/react/src/components/dashboard/receiveCoin/receiveCoin.js +++ b/react/src/components/dashboard/receiveCoin/receiveCoin.js @@ -1,17 +1,17 @@ -import React from 'react'; +import React from "react"; import { copyCoinAddress, checkAddressBasilisk, - validateAddressBasilisk -} from '../../../actions/actionCreators'; -import Store from '../../../store'; - + validateAddressBasilisk, + getNewKMDAddresses +} from "../../../actions/actionCreators"; +import Store from "../../../store"; import { AddressActionsBasiliskModeRender, AddressActionsNonBasiliskModeRender, AddressItemRender, ReceiveCoinRender -} from './receiveCoin.render'; +} from "./receiveCoin.render"; // TODO: implement sorting // TODO: fallback to localstorage/stores data in case iguana is taking too long to respond @@ -19,6 +19,35 @@ import { class ReceiveCoin extends React.Component { constructor(props) { super(props); + + this.state = { + openDropMenu: false, + }; + this.openDropMenu = this.openDropMenu.bind(this); + this.handleClickOutside = this.handleClickOutside.bind(this); + } + + componentWillMount() { + document.addEventListener('click', this.handleClickOutside, false); + } + + componentWillUnmount() { + document.removeEventListener('click', this.handleClickOutside, false); + } + + handleClickOutside(e) { + if (e.srcElement.className.indexOf('dropdown') === -1 && + (e.srcElement.offsetParent && e.srcElement.offsetParent.className.indexOf('dropdown') === -1)) { + this.setState({ + openDropMenu: false, + }); + } + } + + openDropMenu() { + this.setState(Object.assign({}, this.state, { + openDropMenu: !this.state.openDropMenu, + })); } _checkAddressBasilisk(address) { @@ -37,12 +66,16 @@ class ReceiveCoin extends React.Component { return this.props.mode === 'basilisk'; } - renderAddressActions(address) { + isNativeMode() { + return this.props.mode == 'native'; + } + + renderAddressActions(address, type) { if (this.isBasiliskMode()) { return AddressActionsBasiliskModeRender.call(this, address); } - return AddressActionsNonBasiliskModeRender.call(this, address); + return AddressActionsNonBasiliskModeRender.call(this, address, type); } hasNoAmount(address) { @@ -53,26 +86,34 @@ class ReceiveCoin extends React.Component { return address.interest === 'N/A' || address.interest === 0 || !address.interest; } - renderAddressList() { + getNewAddress(type) { + Store.dispatch(getNewKMDAddresses(this.props.coin, type)); + } + + renderAddressList(type) { if (this.props.addresses && - this.props.addresses.public && - this.props.addresses.public.length) { + this.props.addresses[type] && + this.props.addresses[type].length) { let items = []; - for (let i = 0; i < this.props.addresses.public.length; i++) { - let address = this.props.addresses.public[i]; + for (let i = 0; i < this.props.addresses[type].length; i++) { + let address = this.props.addresses[type][i]; if (this.isBasiliskMode() && - this.hasNoAmount(address)) { - address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.balance ? this.props.cache[this.props.coin][address.address].getbalance.data.balance : 'N/A'; + this.hasNoAmount(address)) { + address.amount = this.props.cache && this.props.cache[this.props.coin][address.address] + && this.props.cache[this.props.coin][address.address].getbalance.data + && this.props.cache[this.props.coin][address.address].getbalance.data.balance ? this.props.cache[this.props.coin][address.address].getbalance.data.balance : 'N/A'; } if (this.isBasiliskMode() && - this.hasNoInterest(address)) { - address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] && this.props.cache[this.props.coin][address.address].getbalance.data && this.props.cache[this.props.coin][address.address].getbalance.data.interest ? this.props.cache[this.props.coin][address.address].getbalance.data.interest : 'N/A'; + this.hasNoInterest(address)) { + address.interest = this.props.cache && this.props.cache[this.props.coin][address.address] + && this.props.cache[this.props.coin][address.address].getbalance.data + && this.props.cache[this.props.coin][address.address].getbalance.data.interest ? this.props.cache[this.props.coin][address.address].getbalance.data.interest : 'N/A'; } items.push( - AddressItemRender.call(this, address) + AddressItemRender.call(this, address, type) ); } @@ -83,9 +124,11 @@ class ReceiveCoin extends React.Component { } render() { + console.log('RENDER11', this.props.receive, this.isNativeMode(), this.props.nativeActiveSection); + // TODO nativeActiveSection === 'receive' should be removed when native mode is fully merged + // into the rest of the components if (this.props && - this.props.receive && - this.props.mode !== 'native') { + (this.props.receive || (this.isNativeMode() && this.props.nativeActiveSection === 'receive'))) { return ReceiveCoinRender.call(this); } diff --git a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js index c83f736..585c9d6 100644 --- a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js +++ b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js @@ -1,7 +1,7 @@ -import React from 'react'; -import { translate } from '../../../translate/translate'; +import React from "react"; +import {translate} from "../../../translate/translate"; -export const AddressActionsBasiliskModeRender = function(address) { +export const AddressActionsBasiliskModeRender = function (address) { return ( @@ -10,7 +10,8 @@ export const AddressActionsBasiliskModeRender = function(address) { + onClick={ () => this._copyCoinAddress(address) }> { translate('INDEX.COPY') } + - - { translate('IAPI.PUBLIC_SM') } + + + { type === 'public' ? translate('IAPI.PUBLIC_SM') : translate('KMD_NATIVE.PRIVATE') } + onClick={ () => this._copyCoinAddress(address) }> { translate('INDEX.COPY') } + ); }; -export const AddressItemRender = function(address) { +export const AddressItemRender = function (address, type) { return ( - { this.renderAddressActions(address.address) } - { address.address } + { this.renderAddressActions(address.address, type) } + { type === 'public' ? address.address : address.address.substring(0, 34) + '...' } { address.amount } + {!this.isNativeMode() && { address.interest ? address.interest : 'N/A' } + } ); }; -export const ReceiveCoinRender = function() { +export const ReceiveCoinRender = function () { return (
@@ -60,29 +65,70 @@ export const ReceiveCoinRender = function() {
-
+ {this.isNativeMode() && + + }

{ translate('INDEX.RECEIVING_ADDRESS') }

- - - - - - + {this.isNativeMode() ? + + + + + + : + + + + + + + } - { this.renderAddressList() } + {this.renderAddressList('public')} + {this.isNativeMode() && this.renderAddressList('private')} - - - - - - + {this.isNativeMode() ? + + + + + + : + + + + + + + }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.AMOUNT') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') } {translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.AMOUNT') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
diff --git a/react/src/components/dashboard/walletsNative/walletsNative.render.js b/react/src/components/dashboard/walletsNative/walletsNative.render.js index b94ea84..2c3cf15 100644 --- a/react/src/components/dashboard/walletsNative/walletsNative.render.js +++ b/react/src/components/dashboard/walletsNative/walletsNative.render.js @@ -1,7 +1,6 @@ import React from 'react'; import WalletsNativeBalance from '../walletsNativeBalance/walletsNativeBalance'; import WalletsNativeInfo from '../walletsNativeInfo/walletsNativeInfo'; -import WalletsNativeReceive from '../walletsNativeReceive/walletsNativeReceive'; import WalletsNativeSend from '../walletsNativeSend/walletsNativeSend'; import WalletsNativeSyncProgress from '../walletsNativeSyncProgress/walletsNativeSyncProgress'; import WalletsNativeTxHistory from '../walletsNativeTxHistory/walletsNativeTxHistory'; @@ -22,7 +21,6 @@ const WalletsNativeRender = function() {
-
diff --git a/react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.js b/react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.js deleted file mode 100644 index 16fb502..0000000 --- a/react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { - copyCoinAddress, - getNewKMDAddresses -} from '../../../actions/actionCreators'; -import Store from '../../../store'; -import { - AddressListRender, - WalletsNativeReceiveRender -} from './walletsNativeReceive.render'; - -class WalletsNativeReceive extends React.Component { - constructor(props) { - super(props); - this.state = { - openDropMenu: false, - }; - this.openDropMenu = this.openDropMenu.bind(this); - this.handleClickOutside = this.handleClickOutside.bind(this); - } - - componentWillMount() { - document.addEventListener('click', this.handleClickOutside, false); - } - - componentWillUnmount() { - document.removeEventListener('click', this.handleClickOutside, false); - } - - handleClickOutside(e) { - if (e.srcElement.className.indexOf('dropdown') === -1 && - (e.srcElement.offsetParent && e.srcElement.offsetParent.className.indexOf('dropdown') === -1)) { - this.setState({ - openDropMenu: false, - }); - } - } - - openDropMenu() { - this.setState(Object.assign({}, this.state, { - openDropMenu: !this.state.openDropMenu, - })); - } - - copyZAddress(address) { - Store.dispatch(copyCoinAddress(address)); - } - - renderAddressList(type) { - if (this.props.ActiveCoin.addresses && - this.props.ActiveCoin.addresses[type] && - this.props.ActiveCoin.addresses[type].length) { - return this.props.ActiveCoin.addresses[type].map((address) => - AddressListRender.call(this, address, type) - ); - } - - return null; - } - - getNewAddress(type) { - Store.dispatch(getNewKMDAddresses(this.props.ActiveCoin.coin, type)); - } - - render() { - if (this.props && - this.props.ActiveCoin && - this.props.ActiveCoin.nativeActiveSection === 'receive') { - return WalletsNativeReceiveRender.call(this); - } - - return null; - } -} - -export default WalletsNativeReceive; diff --git a/react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.render.js b/react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.render.js deleted file mode 100644 index 483df3d..0000000 --- a/react/src/components/dashboard/walletsNativeReceive/walletsNativeReceive.render.js +++ /dev/null @@ -1,82 +0,0 @@ -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/walletsNativeSyncProgress/walletsNativeSyncProgress.js b/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js index 2d97a40..1cd8466 100644 --- a/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js +++ b/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js @@ -63,6 +63,7 @@ class WalletsNativeSyncProgress extends React.Component { } } else if (this.props.Settings.debugLog.indexOf('Still rescanning') > -1) { const temp = this.props.Settings.debugLog.split(' '); + let currentProgress; for (let i = 0; i < temp.length; i++) { if (temp[i].indexOf('Progress=') > -1) {