diff --git a/assets/mainWindow/js/loading.js b/assets/mainWindow/js/loading.js index 55b9ed9..0717e19 100644 --- a/assets/mainWindow/js/loading.js +++ b/assets/mainWindow/js/loading.js @@ -1,303 +1,6 @@ -// TODO: merge into react app -let _configCopy; - -function toggleMainWindowHelp() { - const _help = $('.agama-modes-help'); - - if (_help.is(':visible')) { - _help.hide(); - } else { - _help.show(); - } -} - -function toggleDropdown(type) { - const _dropdown = $('.dropdown-menu.' + (type === 'lite' ? 'lite' : 'native')); - - if (_dropdown.hasClass('hide')) { - _dropdown.removeClass('hide'); - } else { - _dropdown.addClass('hide'); - } - - $('.dropdown-menu.' + (type === 'lite' ? 'native' : 'lite')).addClass('hide'); -} - -function initSettingsForm() { - const remote = require('electron').remote; - let appConf = remote.getCurrentWindow().appConfig; - let appConfSchema = remote.getCurrentWindow().appConfigSchema; - _configCopy = Object.assign({}, appConf); - - let _htmlOut = ''; - for (let key in appConf) { - if (appConfSchema[key] && - appConfSchema[key].initDisplay) { - _htmlOut = ` - ${_htmlOut} - - - - `; - } else if (appConfSchema[key].type === 'string' || appConfSchema[key].type === 'folder') { - _htmlOut = ` - ${_htmlOut} - - - `; - } else if (appConfSchema[key].type === 'boolean') { - _htmlOut = `${_htmlOut} - - - `; - } - } - } - - _htmlOut = ` - ${_htmlOut} -
- ${appConfSchema[key].displayName}`; - - if (appConfSchema[key].info) { - _htmlOut = ` - ${_htmlOut} -
- -
`; - } - - if (appConfSchema[key].type === 'number') { - _htmlOut = ` - ${_htmlOut} - 		- -
- -
- -
`; - - $('#agamaConfigBlock').html(_htmlOut); -} - -function hideToastImmediate() { - $('#toast-container').addClass('hide'); -} - -function hideToast() { - setTimeout(function() { - $('#toast-container').addClass('hide'); - }, 5000); -} - -function showToast(type, message) { - $('#toast-container .toast').removeClass('toast-success').removeClass('toast-error'); - $('#toast-container .toast').addClass(`toast-${type}`); - $('#toast-container .toast-message').html(message); - $('#toast-container').removeClass('hide'); - hideToast(); -} - -function setDefaultAppSettings() { - const remote = require('electron').remote; - - remote.getCurrentWindow().setDefaultAppSettings(); - remote.getCurrentWindow().appConfig = remote.getCurrentWindow().defaultAppSettings; - initSettingsForm(); - showToast('success', 'App settings are reset to default'); -} - -function testBins(binName) { - const remote = require('electron').remote; - remote.getCurrentWindow().testBins(binName). - then(function(res) { - $('#debugOut').html(JSON.stringify(res, null, '\t')); - }); -} - -function handleSaveSettings() { - if (_configCopy.dataDir && - _configCopy.dataDir.length) { - const remote = require('electron').remote; - - remote.getCurrentWindow().testLocation(_configCopy.dataDir) - .then(function(res) { - if (res === -1) { - showToast('error', 'Komodo datadir path is invalid.
It must be an absolute path to an existing folder that doesn\'t contain spaces and/or any special characters.'); - } else if (res === false) { - showToast('error', 'Komodo datadir path is not a directory.
It must be an absolute path to an existing folder that doesn\'t contain spaces and/or any special characters.'); - } else { - // save settings - remote.getCurrentWindow().updateAppSettings(_configCopy); - remote.getCurrentWindow().appConfig = _configCopy; - showToast('success', 'Settings saved'); - } - }); - } else { - // save settings - const remote = require('electron').remote; - - remote.getCurrentWindow().updateAppSettings(_configCopy); - remote.getCurrentWindow().appConfig = _configCopy; - showToast('success', 'Settings saved'); - } -} - -function handleInput(key) { - const _value = $(`#${key}`).val(); - _configCopy[key] = _value; -} - -function settingsToggle(key) { - const _value = $(`#${key} .cb`).prop('checked'); - _configCopy[key] = _value; -} - -function closeSettingsWindow() { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - toggleDropdown(); - window.destroyAppSettingsWindow(); -} - -function reloadSettingsWindow() { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - window.reloadSettingsWindow(); -} - -function openSettingsWindow() { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - $('.dropdown-menu.lite').addClass('hide'); - $('.dropdown-menu.native').addClass('hide'); - window.createAppSettingsWindow(); -} - -function startKMDPassive() { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - $('.dropdown-menu.lite').addClass('hide'); - $('.dropdown-menu.native').addClass('hide'); - disableModeButtons(); - - window.startKMDNative('KMD', true); - - window.createWindow('open'); - window.hide(); -} - -function startKMDPassive() { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - $('.dropdown-menu.lite').addClass('hide'); - $('.dropdown-menu.native').addClass('hide'); - disableModeButtons(); - - window.startKMDNative('KMD', true); - - window.createWindow('open'); - window.hide(); -} - -function startSPV(coin) { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - $('.dropdown-menu.lite').addClass('hide'); - $('.dropdown-menu.native').addClass('hide'); - disableModeButtons(); - - window.startSPV(coin); - - window.createWindow('open'); - window.hide(); -} - -function closeMainWindow(isKmdOnly, isCustom) { - const remote = require('electron').remote; - const window = remote.getCurrentWindow(); - - $('.dropdown-menu.lite').addClass('hide'); - $('.dropdown-menu.native').addClass('hide'); - disableModeButtons(); - - if (!isCustom) { - window.startKMDNative(isKmdOnly ? 'KMD' : null); - - setTimeout(function() { - window.createWindow('open'); - window.hide(); - }, 3000); - } else { - window.createWindow('open'); - window.hide(); - } -} - function quitApp() { const remote = require('electron').remote; const window = remote.getCurrentWindow(); window.forseCloseApp(); -} - -function disableModeButtons() { - $('#nativeOnlyBtn').attr('disabled', true); - $('#normalStartBtn').attr('disabled', true); - $('#settingsBtn').attr('disabled', true); - $('#nativeOnlyBtnCarret').attr('disabled', true); - $('#spvBtn').attr('disabled', true); - $('#spvBtnCarret').attr('disabled', true); -} - -function normalStart() { - const remote = require('electron').remote; - let appConf = remote.getCurrentWindow().appConfig; - appConf.iguanaLessMode = false; - - $('.dropdown-menu.lite').addClass('hide'); - $('.dropdown-menu.native').addClass('hide'); - disableModeButtons(); -} - -function init() { - const remote = require('electron').remote; - var window = remote.getCurrentWindow(); - var appConf = remote.getCurrentWindow().appConfig; - var arch = remote.getCurrentWindow().arch; - - if (arch !== 'x64') { - $('.settings-help').hide(); - $('#agamaModeStatusText').html('Choose a shortcut or custom selection'); - $('#settingsBtn').hide(); - $('.mode-desc.native').hide(); - $('#nativeOnlyBtn').hide(); - $('#nativeOnlyBtnCarret').hide(); - $('.mode-desc.spv').css('left', '200px'); - $('.dropdown-menu.lite').css('left', '180px'); - } } \ No newline at end of file diff --git a/react/package.json b/react/package.json index b070555..067d946 100644 --- a/react/package.json +++ b/react/package.json @@ -47,6 +47,7 @@ "react-router-redux": "^4.0.4", "react-select": "^1.1.0", "react-table": "~6.5.1", + "react-tooltip": "^3.4.0", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "redux": "^3.6.0", diff --git a/react/src/components/addcoin/addcoin.scss b/react/src/components/addcoin/addcoin.scss index bab6c8c..284e025 100644 --- a/react/src/components/addcoin/addcoin.scss +++ b/react/src/components/addcoin/addcoin.scss @@ -38,41 +38,6 @@ } } } - - .Select { - cursor: pointer; - - * { color: #757575 !important; } - - .Select-clear { - display: none; - } - .Select-control { - height: 40px !important; - - .Select-placeholder, - .Select-value { - line-height: 36px !important; - } - } - } - .Select-menu-outer { - max-height: 253px !important; - } - .Select-menu { - max-height: 250px !important; - } - .Select.is-open, - .Select.is-focused { - .Select-control { - border-color: #FF6600 !important; - box-shadow: none !important; - } - .Select-menu-outer { - border-color: #FF6600 !important; - border-top-color: #d9d9d9 !important; - } - } } .vertical-margin-20 { diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js index 4f6285e..edd675c 100644 --- a/react/src/components/login/login.js +++ b/react/src/components/login/login.js @@ -10,10 +10,13 @@ import { toggleLoginSettingsModal, stopInterval, dashboardChangeActiveCoin, + toggleZcparamsFetchModal, + activeHandle, } from '../../actions/actionCreators'; import Config from '../../config'; import Store from '../../store'; import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator'; +import { zcashParamsCheckErrors } from '../../util/zcashParams'; import SwallModalRender from './swall-modal.render'; import LoginRender from './login.render'; import { translate } from '../../translate/translate'; @@ -57,6 +60,8 @@ class Login extends React.Component { selectedPin: '', isExperimentalOn: false, enableEncryptSeed: false, + selectedShortcutNative: '', + selectedShortcutSPV: '', }; this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this); this.updateRegisterConfirmPassPhraseInput = this.updateRegisterConfirmPassPhraseInput.bind(this); @@ -73,6 +78,7 @@ class Login extends React.Component { this.updatePubKey = this.updatePubKey.bind(this); this.updateDecryptKey = this.updateDecryptKey.bind(this); this.loadPinList = this.loadPinList.bind(this); + this.updateSelectedShortcut = this.updateSelectedShortcut.bind(this); } // the setInterval handler for 'activeCoins' @@ -452,6 +458,68 @@ class Login extends React.Component { ); } + updateSelectedShortcut(e, type) { + this.setState({ + [type === 'native' ? 'selectedShortcutNative' : 'selectedShortcutSPV'] : e.value, + }); + + if (type === 'native') { + const _res = mainWindow.zcashParamsExist; + const __errors = zcashParamsCheckErrors(_res); + + if (__errors) { + mainWindow.zcashParamsExistPromise() + .then((res) => { + const _errors = zcashParamsCheckErrors(res); + mainWindow.zcashParamsExist = res; + + if (_errors) { + Store.dispatch( + triggerToaster( + _errors, + 'Komodod', + 'error', + false + ) + ); + Store.dispatch(toggleZcparamsFetchModal(true)); + } else { + mainWindow.startKMDNative(e.value.toUpperCase()); + } + }); + } else { + mainWindow.startKMDNative(e.value.toUpperCase()); + } + + console.warn('native'); + } else { + mainWindow.startSPV(e.value.toUpperCase()); + console.warn('spv'); + } + + setTimeout(() => { + Store.dispatch(activeHandle()); + if (type === 'native') { + Store.dispatch(shepherdElectrumCoins()); + } + Store.dispatch(getDexCoins()); + }, 500); + setTimeout(() => { + Store.dispatch(activeHandle()); + if (type === 'native') { + Store.dispatch(shepherdElectrumCoins()); + } + Store.dispatch(getDexCoins()); + }, 1000); + setTimeout(() => { + Store.dispatch(activeHandle()); + if (type === 'native') { + Store.dispatch(shepherdElectrumCoins()); + } + Store.dispatch(getDexCoins()); + }, type === 'native' ? 5000 : 2000); + } + renderSwallModal() { if (this.state.displaySeedBackupModal) { return SwallModalRender.call(this); @@ -460,6 +528,41 @@ class Login extends React.Component { return null; } + renderShortcutOption(option) { + if (option.value.indexOf('+') > -1) { + const _comps = option.value.split('+'); + let _items = []; + + for (let i = 0; i < _comps.length; i++) { + _items.push( + + { + { i !== _comps.length - 1 && + + + } + + ); + } + + return _items; + } else { + return ( +
+ { + { option.value.toUpperCase() } +
+ ); + } + } + render() { if ((this.state && this.state.display) || !this.props.Main) { diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js index 7815a2c..82a2ede 100644 --- a/react/src/components/login/login.render.js +++ b/react/src/components/login/login.render.js @@ -2,6 +2,8 @@ import React from 'react'; import { translate } from '../../translate/translate'; import LoginSettingsModal from '../dashboard/loginSettingsModal/loginSettingsModal'; import ZcparamsFetchModal from '../dashboard/zcparamsFetchModal/zcparamsFetchModal'; +import Select from 'react-select'; +import ReactTooltip from 'react-tooltip'; const LoginRender = function() { return ( @@ -142,7 +144,8 @@ const LoginRender = function() {
- { translate('INDEX.OR') }
+ { translate('INDEX.OR') } +
@@ -187,12 +190,16 @@ const LoginRender = function() { type="button" className="btn btn-primary btn-block margin-top-20" onClick={ this.loginSeed } - disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') } + disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }> + { translate('INDEX.SIGN_IN') } +
+ onClick={ () => this.updateActiveLoginSection('signup') }> + { translate('INDEX.CREATE_WALLET') } + @@ -221,6 +228,58 @@ const LoginRender = function() { { translate('INDEX.ACTIVATE_COIN') } +
{ translate('LOGIN.OR_USE_A_SHORTCUT') }
+
+
+ + { translate('INDEX.NATIVE_MODE') } + + +
+ this.updateSelectedShortcut(event, 'spv') } + optionRenderer={ this.renderShortcutOption } + valueRenderer={ this.renderShortcutOption } + options={[ + { value: 'kmd', label: 'kmd' }, + { value: 'chips', label: 'chips' }, + { value: 'btch', label: 'btch' }, + { value: 'mnz', label: 'mnz' }, + { value: 'revs', label: 'revs' }, + { value: 'jumblr', label: 'jumblr' }, + { value: 'kmd+revs+jumblr', label: 'kmd+revs+jumblr' }, + ]} /> +
diff --git a/react/src/components/login/login.scss b/react/src/components/login/login.scss index 458abd3..0ae1376 100644 --- a/react/src/components/login/login.scss +++ b/react/src/components/login/login.scss @@ -184,4 +184,52 @@ option.login-option { .pin-block-three { width: 10%; float: left; +} + +.page-login { + .addcoin-shortcut { + display: inline-block; + width: 46%; + + &:last-child { + margin-left: 8%; + } + > div { + margin-bottom: 10px; + } + } + .line { + padding: 60px 0 40px 0; + text-transform: uppercase; + font-weight: bold; + white-space: nowrap; + + &:before { + content: ''; + display: inline-block; + height: 1px; + width: 33%; + background: #ccc; + margin-right: 10px; + position: relative; + top: -4px; + } + &:after { + content: ''; + display: inline-block; + height: 1px; + width: 33%; + background: #ccc; + margin-left: 10px; + position: relative; + top: -4px; + } + } + .login-help { + font-size: 20px; + position: relative; + top: 2px; + left: 15px; + color: #fff; + } } \ No newline at end of file diff --git a/react/src/components/overrides.scss b/react/src/components/overrides.scss index 9e3ce90..a514195 100644 --- a/react/src/components/overrides.scss +++ b/react/src/components/overrides.scss @@ -282,4 +282,46 @@ select{ .no-margin { margin: 0 !important; +} + +.Select { + cursor: pointer; + text-align: left; + + * { color: #757575 !important; } + + .Select-clear { + display: none; + } + .Select-control { + height: 40px !important; + + .Select-placeholder, + .Select-value { + line-height: 36px !important; + } + } +} +.Select-menu-outer { + max-height: 253px !important; +} +.Select-menu { + max-height: 250px !important; +} +.Select.is-open, +.Select.is-focused { + .Select-control { + border-color: #FF6600 !important; + box-shadow: none !important; + } + .Select-menu-outer { + border-color: #FF6600 !important; + border-top-color: #d9d9d9 !important; + } +} + +.__react_component_tooltip { + &.type-dark { + background-color: #000; + } } \ No newline at end of file diff --git a/react/src/translate/en.js b/react/src/translate/en.js index 2c1e99a..ebc9dbf 100644 --- a/react/src/translate/en.js +++ b/react/src/translate/en.js @@ -626,6 +626,7 @@ export const LANG_EN = { 'ZCASH_PARAMS_MISSING_VERIFYING_KEY_SIZE': '- verifying key size is incorrect', }, 'LOGIN': { + 'OR_USE_A_SHORTCUT': 'or use a shortcut', 'PIN_LOGIN_INFO': 'You can login be entering a login seed or by selecting a pin', 'QUICK_ACCESS': 'Quick access', 'PWD_REQ': 'Password is required.', @@ -742,6 +743,10 @@ export const LANG_EN = { 'DOWNLOAD': 'Download', }, 'SEND': { + 'BAD_TXN_SPENT_ERR1': 'This particular error can happen in the following cases:', + 'BAD_TXN_SPENT_ERR2': 'Your machine\'s clock is not set properly', + 'BAD_TXN_SPENT_ERR3': 'SPV server is temporary out of sync. Try to switch over to another one.', + 'BAD_TXN_SPENT_ERR4': 'Double spend in case you just made another transaction', 'MIN_AMOUNT_IS': 'min @template@ amount is', 'AMOUNT_IS_TOO_SMALL': 'Amount @template@ is too small', 'MAX_AVAIL_BALANCE': 'max available balance is',