From 507bb0f186638cdafb7c170ade9c2624656b1330 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Thu, 27 Jul 2017 04:43:51 -0700 Subject: [PATCH 1/9] added settings/about modal to login ui --- react/change.log | 1 + react/src/actions/actionCreators.js | 8 + react/src/actions/storeType.js | 3 +- .../components/dashboard/settings/settings.js | 6 +- .../dashboard/settings/settings.render.js | 227 +++++++++--------- react/src/components/login/login.js | 24 +- react/src/components/login/login.render.js | 38 ++- react/src/components/login/login.scss | 26 ++ react/src/reducers/main.js | 8 +- 9 files changed, 222 insertions(+), 119 deletions(-) diff --git a/react/change.log b/react/change.log index 534043b..980c898 100644 --- a/react/change.log +++ b/react/change.log @@ -10,6 +10,7 @@ UI: - komodod crash report modal - values rounding (up to 6 decimals) - add coin multi ui reflow fix +- reset app setting to default v0.2.0.21a-beta -------------- diff --git a/react/src/actions/actionCreators.js b/react/src/actions/actionCreators.js index baf8d37..f070101 100644 --- a/react/src/actions/actionCreators.js +++ b/react/src/actions/actionCreators.js @@ -25,6 +25,7 @@ import { DASHBOARD_ACTIVE_COIN_CHANGE, ACTIVE_COIN_GET_ADDRESSES, DASHBOARD_ACTIVE_COIN_NATIVE_TXHISTORY, + DISPLAY_LOGIN_SETTINGS_MODAL, DISPLAY_COIND_DOWN_MODAL, START_INTERVAL, STOP_INTERVAL @@ -358,4 +359,11 @@ export function toggleCoindDownModal(display) { type: DISPLAY_COIND_DOWN_MODAL, displayCoindDownModal: display, } +} + +export function toggleLoginSettingsModal(display) { + return { + type: DISPLAY_LOGIN_SETTINGS_MODAL, + displayLoginSettingsModal: display, + } } \ No newline at end of file diff --git a/react/src/actions/storeType.js b/react/src/actions/storeType.js index d00021b..23deb33 100644 --- a/react/src/actions/storeType.js +++ b/react/src/actions/storeType.js @@ -44,4 +44,5 @@ export const LOAD_APP_INFO = 'LOAD_APP_INFO'; export const LOG_GUI_HTTP = 'LOG_GUI_HTTP'; export const CLI = 'CLI'; export const LOGOUT = 'LOGOUT'; -export const DISPLAY_COIND_DOWN_MODAL = 'DISPLAY_COIND_DOWN_MODAL'; \ No newline at end of file +export const DISPLAY_COIND_DOWN_MODAL = 'DISPLAY_COIND_DOWN_MODAL'; +export const DISPLAY_LOGIN_SETTINGS_MODAL = 'DISPLAY_LOGIN_SETTINGS_MODAL'; \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js index c1031cf..3d5f74d 100644 --- a/react/src/components/dashboard/settings/settings.js +++ b/react/src/components/dashboard/settings/settings.js @@ -62,6 +62,7 @@ class Settings extends React.Component { updateProgressPatch: null, wifkeysPassphrase: '', trimPassphraseTimer: null, + disableWalletSpecificUI: null, }; this.exportWifKeys = this.exportWifKeys.bind(this); this.updateInput = this.updateInput.bind(this); @@ -82,7 +83,9 @@ class Settings extends React.Component { } componentDidMount() { - Store.dispatch(iguanaActiveHandle()); + if (!this.props.disableWalletSpecificUI) { + Store.dispatch(iguanaActiveHandle()); + } Store.dispatch(getAppConfig()); Store.dispatch(getAppInfo()); } @@ -95,6 +98,7 @@ class Settings extends React.Component { activeTab: this.state.activeTab, activeTabHeight: _height, tabElId: this.state.tabElId, + disableWalletSpecificUI: props.disableWalletSpecificUI, })); } } diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js index 5988490..c6a0ddc 100644 --- a/react/src/components/dashboard/settings/settings.render.js +++ b/react/src/components/dashboard/settings/settings.render.js @@ -156,57 +156,59 @@ export const SettingsRender = function() {
-
this.openTab('WalletInfo', 0) } - className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> -
- - { translate('INDEX.WALLET_INFO') } - -
+ { !this.props.disableWalletSpecificUI &&
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{ 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 }
+ id="WalletInfo" + onClick={ () => this.openTab('WalletInfo', 0) } + className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ 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.props.disableWalletSpecificUI &&
this.openTab('AddNodeforCoin', 1) } @@ -292,7 +294,8 @@ export const SettingsRender = function() {
- + } + { !this.props.disableWalletSpecificUI &&
this.openTab('DumpWallet', 2) } @@ -308,7 +311,8 @@ export const SettingsRender = function() {
Wallet Backup section to be updated soon.
- + } + { !this.props.disableWalletSpecificUI &&
this.openTab('FiatCurrencySettings', 3) } @@ -324,7 +328,8 @@ export const SettingsRender = function() {
Fiat currency settings section to be updated soon.
- + } + { !this.props.disableWalletSpecificUI &&
this.openTab('ExportKeys', 4) } @@ -401,7 +406,8 @@ export const SettingsRender = function() {
- + } + { !this.props.disableWalletSpecificUI &&
this.openTab('ImportKeys', 5) } @@ -450,6 +456,7 @@ export const SettingsRender = function() {
+ }
{ this.renderAppInfoTab() } -
this.openTab('Cli', 9) } - className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }> -
- - CLI - -
+ { this.props.Main && this.props.Main.coins.native &&
-
-

{ translate('INDEX.CLI_SELECT_A_COIN') }

-
-
-
- - -
-
- - -
-
- -
-
-
- { this.renderCliResponse() } + id="Cli" + onClick={ () => this.openTab('Cli', 9) } + className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }> + +
+
+

{ translate('INDEX.CLI_SELECT_A_COIN') }

+
+ +
+ +
-
- +
+ + +
+
+ +
+
+
+ { this.renderCliResponse() } +
+
+ +
-
+ } { this.renderAppUpdateTab() }
diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js index 9fd8bc4..a2b475b 100644 --- a/react/src/components/login/login.js +++ b/react/src/components/login/login.js @@ -8,7 +8,8 @@ import { toggleSyncOnlyModal, getSyncOnlyForks, createNewWallet, - triggerToaster + triggerToaster, + toggleLoginSettingsModal } from '../../actions/actionCreators'; import Config from '../../config'; import Store from '../../store'; @@ -39,6 +40,8 @@ class Login extends React.Component { isCustomSeedWeak: false, nativeOnly: Config.iguanaLessMode, trimPassphraseTimer: null, + displayLoginSettingsDropdown: false, + displayLoginSettingsDropdownSection: null, }; this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this); this.updateRegisterConfirmPassPhraseInput = this.updateRegisterConfirmPassPhraseInput.bind(this); @@ -51,11 +54,21 @@ class Login extends React.Component { this.copyPassPhraseToClipboard = this.copyPassPhraseToClipboard.bind(this); this.execWalletCreate = this.execWalletCreate.bind(this); this.resizeLoginTextarea = this.resizeLoginTextarea.bind(this); + this.toggleLoginSettingsDropdown = this.toggleLoginSettingsDropdown.bind(this); } // the setInterval handler for 'activeCoins' _iguanaActiveCoins = null; + toggleLoginSettingsDropdownSection(sectionName) { + Store.dispatch(toggleLoginSettingsModal(true)); + + this.setState({ + displayLoginSettingsDropdown: false, + displayLoginSettingsDropdownSection: sectionName, + }); + } + isCustomWalletSeed() { return this.state.customWalletSeed; } @@ -95,6 +108,9 @@ class Login extends React.Component { ); Store.dispatch(toggleSyncOnlyModal(true)); + this.setState({ + displayLoginSettingsDropdown: false, + }); } componentDidMount() { @@ -117,6 +133,12 @@ class Login extends React.Component { })); } + toggleLoginSettingsDropdown() { + this.setState(Object.assign({}, this.state, { + displayLoginSettingsDropdown: !this.state.displayLoginSettingsDropdown, + })); + } + componentWillReceiveProps(props) { if (props && props.Main && diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js index 50f7995..45f3016 100644 --- a/react/src/components/login/login.render.js +++ b/react/src/components/login/login.render.js @@ -1,9 +1,13 @@ import React from 'react'; import { translate } from '../../translate/translate'; +import LoginSettingsModal from '../dashboard/loginSettingsModal/loginSettingsModal'; const LoginRender = function () { return (
+ { this.renderSwallModal() }
@@ -16,12 +20,34 @@ const LoginRender = function () { alt="SuperNET Iguana" />
-
- - { translate('LOGIN.DISPLAY_SYNC_ONLY') } - +
diff --git a/react/src/components/login/login.scss b/react/src/components/login/login.scss index ed3e5c3..4b07173 100644 --- a/react/src/components/login/login.scss +++ b/react/src/components/login/login.scss @@ -126,4 +126,30 @@ input[type="password"] { .floating-label { font-size: 13px; } +} + +.login-settings-dropdown { + font-size: 16px; + + .dropdown-menu { + left: 42%; + top: inherit; + } +} + +.login-settings-dropdown-trigger { + cursor: pointer; +} + +.login-settings-modal { + .modal-body { + overflow-y: scroll; + color: #757575; + } + .panel-title { + color: #757575; + } + a { + color: #fb8c00; + } } \ No newline at end of file diff --git a/react/src/reducers/main.js b/react/src/reducers/main.js index f000ae6..0381ef1 100644 --- a/react/src/reducers/main.js +++ b/react/src/reducers/main.js @@ -1,12 +1,14 @@ import { GET_ACTIVE_COINS, LOGIN, - ACTIVE_HANDLE + ACTIVE_HANDLE, + DISPLAY_LOGIN_SETTINGS_MODAL } from '../actions/storeType'; export function Main(state = { isLoggedIn: false, activeCoins: [], + displayLoginSettingsModal: false, }, action) { switch (action.type) { case GET_ACTIVE_COINS: @@ -23,6 +25,10 @@ export function Main(state = { isLoggedIn: action.isLoggedIn, activeHandle: action.handle, }); + case DISPLAY_LOGIN_SETTINGS_MODAL: + return Object.assign({}, state, { + displayLoginSettingsModal: action.displayLoginSettingsModal, + }); default: return state; } From a9f08f50dac1f007b71adf53d1a8a2f26577a086 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Thu, 27 Jul 2017 06:16:09 -0700 Subject: [PATCH 2/9] basilisk refresh btn (wip) --- react/src/actions/actions/basiliskCache.js | 3 +- .../walletsBalance/walletsBalance.js | 28 +++++++++++++++++++ .../walletsBalance/walletsBalance.render.js | 3 ++ react/src/components/overrides.scss | 6 ++++ 4 files changed, 39 insertions(+), 1 deletion(-) diff --git a/react/src/actions/actions/basiliskCache.js b/react/src/actions/actions/basiliskCache.js index 07a5713..00d4087 100644 --- a/react/src/actions/actions/basiliskCache.js +++ b/react/src/actions/actions/basiliskCache.js @@ -67,10 +67,11 @@ export function fetchNewCacheData(_payload) { _coin = `&coin=${_payload.coin}`, _calls = `&calls=${_payload.calls}`, _address = _payload.address ? (`&address=${_payload.address}`) : '', + _skip = _payload.skip ? (`&skip=${_payload.skip}`) : '', _iguanaInstancePort = Config.useBasiliskInstance ? `&port=${Config.iguanaCorePort + 1}` : ''; return dispatch => { - return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/${_route}${_userpass}${_pubkey}${_coin}${_calls}${_address}${_iguanaInstancePort}`, { + return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/${_route}${_userpass}${_pubkey}${_coin}${_calls}${_address}${_skip}${_iguanaInstancePort}`, { method: 'GET', headers: { 'Content-Type': 'application/json', diff --git a/react/src/components/dashboard/walletsBalance/walletsBalance.js b/react/src/components/dashboard/walletsBalance/walletsBalance.js index 1dab912..a3b7a31 100755 --- a/react/src/components/dashboard/walletsBalance/walletsBalance.js +++ b/react/src/components/dashboard/walletsBalance/walletsBalance.js @@ -1,12 +1,27 @@ import React from 'react'; import { translate } from '../../../translate/translate'; +import { fetchNewCacheData } from '../../../actions/actionCreators'; +import Store from '../../../store'; import WalletsBalanceRender from './walletsBalance.render'; class WalletsBalance extends React.Component { constructor(props) { super(props); + this.state = { + currentAddress: null, + }; this.isFullySynced = this.isFullySynced.bind(this); + this.refreshBalance = this.refreshBalance.bind(this); + } + + componentWillReceiveProps(props) { + if (!this.state.currentAddress && + this.props.ActiveCoin.activeAddress) { + this.setState(Object.assign({}, this.state, { + currentAddress: this.props.ActiveCoin.activeAddress, + })); + } } isFullySynced() { @@ -21,6 +36,19 @@ class WalletsBalance extends React.Component { } } + refreshBalance() { + if (this.props.ActiveCoin.mode === 'basilisk') { + Store.dispatch(fetchNewCacheData({ + 'pubkey': this.props.Dashboard.activeHandle.pubkey, + 'allcoins': false, + 'coin': this.props.ActiveCoin.coin, + 'calls': 'getbalance', + 'skip': true, + 'address': this.state.currentAddress, + })); + } + } + renderBalance(type) { let _balance = '0'; const _mode = this.props.ActiveCoin.mode; diff --git a/react/src/components/dashboard/walletsBalance/walletsBalance.render.js b/react/src/components/dashboard/walletsBalance/walletsBalance.render.js index 5a97998..4664e40 100644 --- a/react/src/components/dashboard/walletsBalance/walletsBalance.render.js +++ b/react/src/components/dashboard/walletsBalance/walletsBalance.render.js @@ -26,6 +26,9 @@ const WalletsBalanceRender = function() {
+
diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss index 55cd8a3..d23281c 100644 --- a/react/src/components/overrides.scss +++ b/react/src/components/overrides.scss @@ -641,4 +641,10 @@ select{ .backround-gray { background: #f3f4f5; +} + +.manual-balance-refresh { + position: absolute; + right: 4px; + top: 3px; } \ No newline at end of file From e58ad7960e299f47cc54120ca742a1dccd98bbe9 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Thu, 27 Jul 2017 19:55:01 +0300 Subject: [PATCH 3/9] QR Code feature --- react/package.json | 2 + .../components/dashboard/qrModal/qrModal.js | 71 ++++++++++++++ .../dashboard/qrModal/qrModal.render.js | 97 +++++++++++++++++++ .../receiveCoin/receiveCoin.render.js | 10 +- .../components/dashboard/sendCoin/sendCoin.js | 9 +- .../dashboard/sendCoin/sendCoin.render.js | 10 +- react/src/translate/en.js | 5 +- 7 files changed, 200 insertions(+), 4 deletions(-) create mode 100755 react/src/components/dashboard/qrModal/qrModal.js create mode 100644 react/src/components/dashboard/qrModal/qrModal.render.js diff --git a/react/package.json b/react/package.json index 81b81d2..656d1fd 100644 --- a/react/package.json +++ b/react/package.json @@ -38,10 +38,12 @@ "bluebird": "^3.5.0", "express": "^4.14.0", "file-loader": "^0.10.0", + "qrcode.react": "^0.7.1", "rc-tree": "^1.4.6", "react": "^15.3.1", "react-dom": "^15.3.1", "react-hot-loader": "^1.3.0", + "react-qr-reader": "^1.1.3", "react-redux": "^5.0.3", "react-router": "^3.0.2", "react-router-redux": "^4.0.4", diff --git a/react/src/components/dashboard/qrModal/qrModal.js b/react/src/components/dashboard/qrModal/qrModal.js new file mode 100755 index 0000000..fcd8560 --- /dev/null +++ b/react/src/components/dashboard/qrModal/qrModal.js @@ -0,0 +1,71 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import Store from '../../../store'; +import { translate } from '../../../translate/translate'; +import QrReader from 'react-qr-reader' +import { + QRModalRender, + QRModalReaderRender +} from './qrModal.render'; + +class QRModal extends React.Component { + constructor(props) { + super(props); + + this.state = { + modalIsOpen: false, + error: "" + }; + + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + + this.handleScan = this.handleScan.bind(this); + this.handleError = this.handleError.bind(this); + + document.body.addEventListener('click', this.closeModal); + + } + + handleScan(data){ + if(data!==null) { + if(this.props.mode==="scan") { + this.props.setRecieverFromScan(data) + } + this.closeModal(); + } + return data; + } + handleError(err){ + this.setState({error: err}); + } + openModal() { + this.setState({modalIsOpen: true}); + if(this.props.mode==="scan") { + ReactDOM.render(, document.getElementById('webcam')); + } + } + closeModal() { + this.setState({modalIsOpen: false}); + if(this.props.mode==="scan") { + ReactDOM.unmountComponentAtNode(document.getElementById('webcam')); + } + } + render() { + if(this.props.mode==="scan") { + return QRModalReaderRender.call(this); + } else { + return QRModalRender.call(this); + } + + + } +} + +export default QRModal; diff --git a/react/src/components/dashboard/qrModal/qrModal.render.js b/react/src/components/dashboard/qrModal/qrModal.render.js new file mode 100644 index 0000000..9dd3b12 --- /dev/null +++ b/react/src/components/dashboard/qrModal/qrModal.render.js @@ -0,0 +1,97 @@ +import React from 'react'; +import { translate } from '../../../translate/translate'; +import QRCode from 'qrcode.react'; + +export const QRModalRender = function () { + return ( + + + + + +
+ + ); +}; + + +export const QRModalReaderRender = function () { + return ( + + + +
+ + ); +}; + + diff --git a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js index f5acf16..108fb88 100644 --- a/react/src/components/dashboard/receiveCoin/receiveCoin.render.js +++ b/react/src/components/dashboard/receiveCoin/receiveCoin.render.js @@ -1,5 +1,6 @@ import React from 'react'; import { translate } from '../../../translate/translate'; +import QRModal from '../qrModal/qrModal'; export const AddressActionsBasiliskModeRender = function(address) { return ( @@ -25,6 +26,9 @@ export const AddressActionsBasiliskModeRender = function(address) { onClick={ () => this._validateAddressBasilisk(address) }> + ); }; @@ -41,6 +45,9 @@ export const AddressActionsNonBasiliskModeRender = function(address, type) { onClick={ () => this._copyCoinAddress(address) }> { translate('INDEX.COPY') } + ); }; @@ -140,4 +147,5 @@ export const ReceiveCoinRender = function() {
); -}; \ No newline at end of file +}; + diff --git a/react/src/components/dashboard/sendCoin/sendCoin.js b/react/src/components/dashboard/sendCoin/sendCoin.js index 3d41a4b..850d1f2 100644 --- a/react/src/components/dashboard/sendCoin/sendCoin.js +++ b/react/src/components/dashboard/sendCoin/sendCoin.js @@ -64,9 +64,17 @@ class SendCoin extends React.Component { this.toggleSendAPIType = this.toggleSendAPIType.bind(this); this._fetchNewUTXOData = this._fetchNewUTXOData.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this); + this.setRecieverFromScan = this.setRecieverFromScan.bind(this); socket.on('messages', msg => this.updateSocketsData(msg)); } + setRecieverFromScan(receiver) { + this.setState({ + sendTo: receiver + }); + document.getElementById('edexcoinSendTo').focus() + } + componentWillMount() { document.addEventListener( 'click', @@ -745,7 +753,6 @@ class SendCoin extends React.Component { return null; } - render() { if (this.props.ActiveCoin && this.props.ActiveCoin.send && diff --git a/react/src/components/dashboard/sendCoin/sendCoin.render.js b/react/src/components/dashboard/sendCoin/sendCoin.render.js index a7fc0a5..c7a3f5b 100644 --- a/react/src/components/dashboard/sendCoin/sendCoin.render.js +++ b/react/src/components/dashboard/sendCoin/sendCoin.render.js @@ -5,6 +5,8 @@ import { secondsToString } from '../../../util/time'; +import QRModal from '../qrModal/qrModal'; + export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp) { return (
@@ -137,7 +139,7 @@ export const OASendUIRender = function () { export const SendApiTypeSelectorRender = function () { return (
-
+
+
+ +
); }; diff --git a/react/src/translate/en.js b/react/src/translate/en.js index 8a47b93..4d5937c 100644 --- a/react/src/translate/en.js +++ b/react/src/translate/en.js @@ -249,7 +249,10 @@ export const _lang = { 'INFO': 'Info', 'ENTER': 'Enter', 'ADDR_SM': 'address', - 'ACTIVATING': 'Activating' + 'ACTIVATING': 'Activating', + 'QRCODE': 'Show QR code', + 'SCAN_QR_CODE': 'Scan QR Code', + 'SCAN_QRCODE_WEBCAM': 'Scan QR Code with webcam' }, 'ATOMIC': { 'RAW_OUTPUT': 'Raw Output', From c6382c215305ebacfba013a900448e87ca3be0d9 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Fri, 28 Jul 2017 12:21:20 +0300 Subject: [PATCH 4/9] missing loginSettingsModal component --- .../loginSettingsModal/loginSettingsModal.js | 32 +++++++++++++++++ .../loginSettingsModal.render.js | 36 +++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100755 react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js create mode 100644 react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js diff --git a/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js b/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js new file mode 100755 index 0000000..cea9312 --- /dev/null +++ b/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { getCoinTitle } from '../../../util/coinHelper'; +import { translate } from '../../../translate/translate'; +import { toggleLoginSettingsModal } from '../../../actions/actionCreators'; +import Store from '../../../store'; + +import { LoginSettingsModalRender } from './loginSettingsModal.render'; + +class LoginSettingsModal extends React.Component { + constructor(props) { + super(props); + this.state = { + }; + this.closeLoginSettingsModal = this.closeLoginSettingsModal.bind(this); + } + + closeLoginSettingsModal() { + Store.dispatch(toggleLoginSettingsModal(false)); + } + + render() { + if (this.props && + this.props.Main && + this.props.Main.displayLoginSettingsModal) { + return LoginSettingsModalRender.call(this); + } else { + return null; + } + } +} + +export default LoginSettingsModal; \ No newline at end of file diff --git a/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js b/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js new file mode 100644 index 0000000..3a84e50 --- /dev/null +++ b/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { translate } from '../../../translate/translate'; +import About from '../about/about'; +import Settings from '../settings/settings'; + +export const LoginSettingsModalRender = function() { + console.log(this.props); + + return ( +
+
+
+
+
+ { this.props.section === 'settings' && + + } + { this.props.section === 'about' && + + } +
+
+ +
+
+
+
+
+
+ ); +}; \ No newline at end of file From 16908a893ee42e2078c536d4b4e3133063a5ee81 Mon Sep 17 00:00:00 2001 From: pbca26 Date: Fri, 28 Jul 2017 20:17:49 +0300 Subject: [PATCH 5/9] manual balance and tx history refresh --- .../loginSettingsModal.render.js | 2 -- .../walletsBalance/walletsBalance.js | 35 +++++++++++++------ .../walletsBalance/walletsBalance.render.js | 2 +- .../dashboard/walletsData/walletsData.js | 30 +++++++++++++++- .../walletsData/walletsData.render.js | 3 ++ react/src/components/overrides.scss | 3 +- 6 files changed, 60 insertions(+), 15 deletions(-) diff --git a/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js b/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js index 3a84e50..8a59705 100644 --- a/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js +++ b/react/src/components/dashboard/loginSettingsModal/loginSettingsModal.render.js @@ -4,8 +4,6 @@ import About from '../about/about'; import Settings from '../settings/settings'; export const LoginSettingsModalRender = function() { - console.log(this.props); - return (
diff --git a/react/src/components/dashboard/walletsBalance/walletsBalance.js b/react/src/components/dashboard/walletsBalance/walletsBalance.js index a3b7a31..c0f79c5 100755 --- a/react/src/components/dashboard/walletsBalance/walletsBalance.js +++ b/react/src/components/dashboard/walletsBalance/walletsBalance.js @@ -1,6 +1,10 @@ import React from 'react'; import { translate } from '../../../translate/translate'; -import { fetchNewCacheData } from '../../../actions/actionCreators'; +import { + fetchNewCacheData, + getKMDBalanceTotal, + iguanaEdexBalance +} from '../../../actions/actionCreators'; import Store from '../../../store'; import WalletsBalanceRender from './walletsBalance.render'; @@ -37,15 +41,26 @@ class WalletsBalance extends React.Component { } refreshBalance() { - if (this.props.ActiveCoin.mode === 'basilisk') { - Store.dispatch(fetchNewCacheData({ - 'pubkey': this.props.Dashboard.activeHandle.pubkey, - 'allcoins': false, - 'coin': this.props.ActiveCoin.coin, - 'calls': 'getbalance', - 'skip': true, - 'address': this.state.currentAddress, - })); + const _mode = this.props.ActiveCoin.mode; + const _coin = this.props.ActiveCoin.coin; + + switch(_mode) { + case 'basilisk': + Store.dispatch(fetchNewCacheData({ + 'pubkey': this.props.Dashboard.activeHandle.pubkey, + 'allcoins': false, + 'coin': this.props.ActiveCoin.coin, + 'calls': 'getbalance', + 'skip': true, + 'address': this.state.currentAddress, + })); + break; + case 'native': + Store.dispatch(getKMDBalanceTotal(_coin)); + break; + case 'full': + Store.dispatch(iguanaEdexBalance(_coin)); + break; } } diff --git a/react/src/components/dashboard/walletsBalance/walletsBalance.render.js b/react/src/components/dashboard/walletsBalance/walletsBalance.render.js index 4664e40..6ce2b32 100644 --- a/react/src/components/dashboard/walletsBalance/walletsBalance.render.js +++ b/react/src/components/dashboard/walletsBalance/walletsBalance.render.js @@ -27,7 +27,7 @@ const WalletsBalanceRender = function() {
diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js index 2dffcd5..bc3ed5e 100644 --- a/react/src/components/dashboard/walletsData/walletsData.js +++ b/react/src/components/dashboard/walletsData/walletsData.js @@ -17,7 +17,9 @@ import { getDexNotaries, deleteCacheFile, fetchNewCacheData, - fetchUtxoCache + fetchUtxoCache, + getNativeTxHistory, + getFullTransactionsList } from '../../../actions/actionCreators'; import Store from '../../../store'; import { @@ -61,6 +63,7 @@ class WalletsData extends React.Component { this.restartBasiliskInstance = this.restartBasiliskInstance.bind(this); this.basiliskRefreshActionOne = this.basiliskRefreshActionOne.bind(this); this.handleClickOutside = this.handleClickOutside.bind(this); + this.refreshTxHistory = this.refreshTxHistory.bind(this); socket.on('messages', msg => this.updateSocketsData(msg)); } @@ -137,6 +140,31 @@ class WalletsData extends React.Component { } } + refreshTxHistory() { + const _mode = this.props.ActiveCoin.mode; + const _coin = this.props.ActiveCoin.coin; + + switch(_mode) { + case 'basilisk': + Store.dispatch(fetchNewCacheData({ + 'pubkey': this.props.Dashboard.activeHandle.pubkey, + 'allcoins': false, + 'coin': _coin, + 'calls': 'listtransactions', + 'skip': true, + 'address': this.state.currentAddress, + })); + break; + case 'native': + console.log('refresh'); + Store.dispatch(getNativeTxHistory(_coin)); + break; + case 'full': + Store.dispatch(getFullTransactionsList(_coin)); + break; + } + } + removeAndFetchNewCache() { Store.dispatch(deleteCacheFile({ 'pubkey': this.props.Dashboard.activeHandle.pubkey, diff --git a/react/src/components/dashboard/walletsData/walletsData.render.js b/react/src/components/dashboard/walletsData/walletsData.render.js index f7e6fbb..078e2b0 100644 --- a/react/src/components/dashboard/walletsData/walletsData.render.js +++ b/react/src/components/dashboard/walletsData/walletsData.render.js @@ -157,6 +157,9 @@ export const WalletsDataRender = function() {
+
Date: Fri, 28 Jul 2017 20:25:55 +0300 Subject: [PATCH 6/9] dont log store updates in prod mode --- react/change.log | 2 ++ react/src/components/dashboard/walletsData/walletsData.js | 1 - react/src/components/login/login.render.js | 2 +- react/src/store.js | 3 ++- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/react/change.log b/react/change.log index 980c898..c376a6b 100644 --- a/react/change.log +++ b/react/change.log @@ -11,6 +11,8 @@ UI: - values rounding (up to 6 decimals) - add coin multi ui reflow fix - reset app setting to default +- manual balance / transactions list refresh +- quick access dropdown on login to open settings / about / sync only modals v0.2.0.21a-beta -------------- diff --git a/react/src/components/dashboard/walletsData/walletsData.js b/react/src/components/dashboard/walletsData/walletsData.js index bc3ed5e..84dc35d 100644 --- a/react/src/components/dashboard/walletsData/walletsData.js +++ b/react/src/components/dashboard/walletsData/walletsData.js @@ -156,7 +156,6 @@ class WalletsData extends React.Component { })); break; case 'native': - console.log('refresh'); Store.dispatch(getNativeTxHistory(_coin)); break; case 'full': diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js index 45f3016..21bf49a 100644 --- a/react/src/components/login/login.render.js +++ b/react/src/components/login/login.render.js @@ -26,7 +26,7 @@ const LoginRender = function () { className="login-settings-dropdown-trigger" onClick={ this.toggleLoginSettingsDropdown }>   - Settings + Quick access
diff --git a/react/src/store.js b/react/src/store.js index acd567c..1047d99 100644 --- a/react/src/store.js +++ b/react/src/store.js @@ -3,6 +3,7 @@ import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import { syncHistoryWithStore } from 'react-router-redux'; import { browserHistory } from 'react-router'; +import Config from './config'; import rootReducer from './reducers/index'; @@ -19,7 +20,7 @@ const defaultState = { /* eslint-disable no-underscore-dangle */ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -const enhancers = composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware)); +const enhancers = Config.debug || Config.dev ? composeEnhancers(applyMiddleware(thunkMiddleware, loggerMiddleware)) : composeEnhancers(applyMiddleware(thunkMiddleware)); const store = createStore( rootReducer, defaultState, From 92bdfd96f1fc204fedbb729ada5ca1f5cc9fb38a Mon Sep 17 00:00:00 2001 From: Miikat Date: Fri, 28 Jul 2017 20:36:53 +0300 Subject: [PATCH 7/9] Code formatting, small UI fix & Mirror video --- .../components/dashboard/qrModal/qrModal.js | 53 ++++++-------- .../dashboard/qrModal/qrModal.render.js | 73 +++++++++---------- .../dashboard/sendCoin/sendCoin.render.js | 12 +-- 3 files changed, 64 insertions(+), 74 deletions(-) diff --git a/react/src/components/dashboard/qrModal/qrModal.js b/react/src/components/dashboard/qrModal/qrModal.js index fcd8560..069bac2 100755 --- a/react/src/components/dashboard/qrModal/qrModal.js +++ b/react/src/components/dashboard/qrModal/qrModal.js @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; - import Store from '../../../store'; import { translate } from '../../../translate/translate'; import QrReader from 'react-qr-reader' @@ -10,62 +9,58 @@ import { } from './qrModal.render'; class QRModal extends React.Component { - constructor(props) { + constructor(props) { super(props); - this.state = { modalIsOpen: false, - error: "" + error: '' }; - this.openModal = this.openModal.bind(this); this.closeModal = this.closeModal.bind(this); - this.handleScan = this.handleScan.bind(this); this.handleError = this.handleError.bind(this); - document.body.addEventListener('click', this.closeModal); - - } + } - handleScan(data){ - if(data!==null) { - if(this.props.mode==="scan") { + handleScan(data) { + if(data !== null) { + if(this.props.mode === 'scan') { this.props.setRecieverFromScan(data) - } + } this.closeModal(); } - return data; } - handleError(err){ + + handleError(err) { this.setState({error: err}); } + openModal() { this.setState({modalIsOpen: true}); - if(this.props.mode==="scan") { - ReactDOM.render(, document.getElementById('webcam')); + if(this.props.mode === 'scan') { + ReactDOM.render( + , document.getElementById('webcam')); } } + closeModal() { this.setState({modalIsOpen: false}); - if(this.props.mode==="scan") { + if(this.props.mode === 'scan') { ReactDOM.unmountComponentAtNode(document.getElementById('webcam')); } } + render() { - if(this.props.mode==="scan") { - return QRModalReaderRender.call(this); + if(this.props.mode === 'scan') { + return QRModalReaderRender.call(this); } else { - return QRModalRender.call(this); + return QRModalRender.call(this); } - - } } -export default QRModal; +export default QRModal; \ No newline at end of file diff --git a/react/src/components/dashboard/qrModal/qrModal.render.js b/react/src/components/dashboard/qrModal/qrModal.render.js index 9dd3b12..9f63a5e 100644 --- a/react/src/components/dashboard/qrModal/qrModal.render.js +++ b/react/src/components/dashboard/qrModal/qrModal.render.js @@ -3,10 +3,9 @@ import { translate } from '../../../translate/translate'; import QRCode from 'qrcode.react'; export const QRModalRender = function () { - return ( - - + @@ -31,67 +30,63 @@ export const QRModalRender = function () {

{ translate('INDEX.SCAN_QR_CODE') }

-
-
- -
+
+
+ +
-
-
- +
+
+ ); }; - export const QRModalReaderRender = function () { - return ( - + return ( + -