lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

add coin selector icons

v0.25
pbca26 7 years ago
parent
f49ac26eb9
commit
deaf415478
8 changed files with 176 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      react/package.json
  2. 64
      react/src/components/addcoin/addcoin.js
  3. 35
      react/src/components/addcoin/addcoin.scss
  4. 73
      react/src/components/addcoin/addcoinOptionsAC.js
  5. 97
      react/src/components/addcoin/addcoinOptionsACFiat.js
  6. 31
      react/src/components/addcoin/addcoinOptionsCrypto.js
  7. 21
      react/src/components/addcoin/coin-selectors.render.js
  8. 1
      react/src/styles/index.scss

1
react/package.json
View File

@ -47,6 +47,7 @@
"react-redux": "^5.0.3", "react-redux": "^5.0.3",
"react-router": "^3.0.2", "react-router": "^3.0.2",
"react-router-redux": "^4.0.4", "react-router-redux": "^4.0.4",
"react-select": "^1.1.0",
"react-table": "~6.5.1", "react-table": "~6.5.1",
"react-transform-catch-errors": "^1.0.2", "react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4", "react-transform-hmr": "^1.0.4",

64
react/src/components/addcoin/addcoin.js
View File

@ -174,37 +174,53 @@ class AddCoin extends React.Component {
} }
} }
renderCoinOption(option) {
return (
<div>
<img
src={ `/assets/images/cryptologo/${option.icon.toLowerCase()}.png` }
alt={ option.label }
width="30px"
height="30px"/>
<span className="margin-left-10">{ option.label }</span>
</div>
);
}
updateSelectedCoin(e, index) { updateSelectedCoin(e, index) {
const coin = e.target.value.split('|'); if (e.value &&
const defaultMode = coin[1]; e.value.indexOf('|')) {
const modeToValue = { // TODO: move to utils const coin = e.value.split('|');
'spv': 0, const defaultMode = coin[1];
'native': -1, const modeToValue = { // TODO: move to utils
}; 'spv': 0,
const _value = e.target.value; 'native': -1,
let _coins = this.state.coins; };
const _value = e.value;
let _coins = this.state.coins;
_coins[index] = {
selectedCoin: _value,
spvMode: {
disabled: _value.indexOf('spv') > -1 ? false : true,
checked: defaultMode === 'spv' ? true : false,
},
nativeMode: {
disabled: _value.indexOf('native') > -1 ? false : true,
checked: defaultMode === 'native' ? true : false,
},
mode: modeToValue[defaultMode] !== undefined ? modeToValue[defaultMode] : -2,
}
_coins[index] = { this.setState(Object.assign({}, this.state, {
[e.target.name]: _value, coins: _coins,
spvMode: { }));
disabled: _value.indexOf('spv') > -1 ? false : true,
checked: defaultMode === 'spv' ? true : false,
},
nativeMode: {
disabled: _value.indexOf('native') > -1 ? false : true,
checked: defaultMode === 'native' ? true : false,
},
mode: modeToValue[defaultMode] !== undefined ? modeToValue[defaultMode] : -2,
} }
this.setState(Object.assign({}, this.state, {
coins: _coins,
}));
} }
updateSelectedMode(_value, index) { updateSelectedMode(_value, index) {
let _coins = this.state.coins;
const _selectedCoin = _coins[index].selectedCoin; const _selectedCoin = _coins[index].selectedCoin;
let _coins = this.state.coins;
_coins[index] = { _coins[index] = {
selectedCoin: _selectedCoin, selectedCoin: _selectedCoin,

35
react/src/components/addcoin/addcoin.scss
View File

@ -38,6 +38,41 @@
} }
} }
} }
.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 { .vertical-margin-20 {

73
react/src/components/addcoin/addcoinOptionsAC.js
View File

@ -1,50 +1,43 @@
import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import mainWindow from '../../util/mainWindow'; import mainWindow from '../../util/mainWindow';
class AddCoinOptionsAC extends React.Component { const addCoinOptionsAC = () => {
render() { const _assetChains = [
const _assetChains = [ 'bet',
'bet', 'bots',
'bots', 'ceal',
'ceal', 'coqui',
'coqui', 'crypto',
'crypto', 'hodl',
'hodl', 'dex',
'dex', 'jumblr',
'jumblr', 'kv',
'kv', 'mgw',
'mgw', //'mvp',
//'mvp', 'mnz',
'mnz', 'pangea',
'pangea', 'revs',
'revs', 'mshark',
'mshark', 'supernet',
'supernet', 'wlc',
'wlc', ];
]; let _items = [];
let _items = [];
for (let i = 0; i < _assetChains.length; i++) { for (let i = 0; i < _assetChains.length; i++) {
let availableModes = _assetChains[i] !== 'kv' && _assetChains[i] !== 'mgw' ? 'spv|native' : 'native'; let availableModes = _assetChains[i] !== 'kv' && _assetChains[i] !== 'mgw' ? 'spv|native' : 'native';
if (mainWindow.arch !== 'x64') { if (mainWindow.arch !== 'x64') {
availableModes = 'spv'; availableModes = 'spv';
}
_items.push(
<option
key={ _assetChains[i] }
value={ `${_assetChains[i].toUpperCase()}|${availableModes}` }>{ translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`) }</option>
);
} }
return ( _items.push({
<optgroup label={ translate('ADD_COIN.ASSETCHAINS') }> label: translate(`ASSETCHAINS.${_assetChains[i].toUpperCase()}`),
{ _items } icon: _assetChains[i],
</optgroup> value: `${_assetChains[i].toUpperCase()}|${availableModes}`,
); });
} }
return _items;
} }
export default AddCoinOptionsAC; export default addCoinOptionsAC;

97
react/src/components/addcoin/addcoinOptionsACFiat.js
View File

@ -1,58 +1,51 @@
import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
class AddCoinOptionsACFiat extends React.Component { const addCoinOptionsACFiat = () => {
render() { const _fiat = [
const _fiat = [ 'aud',
'aud', 'brl',
'brl', 'gbp',
'gbp', 'bgn',
'bgn', 'cad',
'cad', 'hrk',
'hrk', 'czk',
'czk', 'cny',
'cny', 'dkk',
'dkk', 'eur',
'eur', 'hkd',
'hkd', 'huf',
'huf', 'inr',
'inr', 'idr',
'idr', 'ils',
'ils', 'jpy',
'jpy', 'krw',
'krw', 'myr',
'myr', 'mxn',
'mxn', 'nzd',
'nzd', 'nok',
'nok', 'php',
'php', 'pln',
'pln', 'ron',
'ron', 'rub',
'rub', 'sgd',
'sgd', 'zar',
'zar', 'sek',
'sek', 'chf',
'chf', 'thb',
'thb', 'try',
'try', 'usd'
'usd' ];
]; let _items = [];
let _items = [];
for (let i = 0; i < _fiat.length; i++) { for (let i = 0; i < _fiat.length; i++) {
_items.push( _items.push({
<option label: translate(`FIAT_CURRENCIES.${_fiat[i].toUpperCase()}`),
key={ _fiat[i] } icon: _fiat[i],
value={ `${_fiat[i].toUpperCase()}|native` }>{ translate(`FIAT_CURRENCIES.${_fiat[i].toUpperCase()}`) }</option> value: `${_fiat[i].toUpperCase()}|native`,
); });
}
return (
<optgroup label={ translate('ADD_COIN.FIAT_CURRENCIES') }>
{ _items }
</optgroup>
);
} }
return _items;
} }
export default AddCoinOptionsACFiat; export default addCoinOptionsACFiat;

31
react/src/components/addcoin/addcoinOptionsCrypto.js
View File

@ -1,24 +1,19 @@
import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import mainWindow from '../../util/mainWindow'; import mainWindow from '../../util/mainWindow';
class AddCoinOptionsCrypto extends React.Component { const addCoinOptionsCrypto = () => {
constructor() { const availableKMDModes = mainWindow.arch === 'x64' ? 'spv|native' : 'spv';
super();
this.state = {
};
}
render() { return [{
let availableKMDModes = mainWindow.arch === 'x64' ? 'spv|native' : 'spv'; label: 'Komodo (KMD)',
icon: 'KMD',
return ( value: `KMD|${availableKMDModes}`,
<optgroup label={ translate('ADD_COIN.CRYPTO_CURRENCIES') }> },
<option value={ `KMD|${availableKMDModes}` }>Komodo (KMD)</option> {
<option value="CHIPS|spv">Chips (CHIPS)</option> label: 'Chips (CHIPS)',
</optgroup> icon: 'CHIPS',
); value: `CHIPS|spv`,
} }];
} }
export default AddCoinOptionsCrypto; export default addCoinOptionsCrypto;

21
react/src/components/addcoin/coin-selectors.render.js
View File

@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import { translate } from '../../translate/translate'; import { translate } from '../../translate/translate';
import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; import addCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; import addCoinOptionsAC from '../addcoin/addcoinOptionsAC';
import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; import addCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
import mainWindow from '../../util/mainWindow'; import mainWindow from '../../util/mainWindow';
import Select from 'react-select';
const CoinSelectorsRender = function(item, coin, i) { const CoinSelectorsRender = function(item, coin, i) {
return ( return (
@ -16,19 +17,13 @@ const CoinSelectorsRender = function(item, coin, i) {
<div <div
className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6 form-group' : 'form-group' } className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6 form-group' : 'form-group' }
style={{ paddingLeft: this.hasMoreThanOneCoin() ? '0' : '15px' }}> style={{ paddingLeft: this.hasMoreThanOneCoin() ? '0' : '15px' }}>
<select <Select
className="form-control form-material"
name="selectedCoin" name="selectedCoin"
value={ coin } value={ coin }
onChange={ (event) => this.updateSelectedCoin(event, i) } onChange={ (event) => this.updateSelectedCoin(event, i) }
autoFocus> optionRenderer={ this.renderCoinOption }
<option>{ translate('INDEX.SELECT') }</option> valueRenderer={ this.renderCoinOption }
<AddCoinOptionsCrypto appSettings={ this.props.Settings } /> options={ addCoinOptionsCrypto().concat(addCoinOptionsAC()).concat(addCoinOptionsACFiat()) } />
<AddCoinOptionsAC appSettings={ this.props.Settings } />
{ mainWindow.arch === 'x64' &&
<AddCoinOptionsACFiat appSettings={ this.props.Settings } />
}
</select>
</div> </div>
<div className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6' : 'hide' }> <div className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6' : 'hide' }>
<div className="toggle-box padding-bottom-10"> <div className="toggle-box padding-bottom-10">

1
react/src/styles/index.scss
View File

@ -46,6 +46,7 @@
@import '../components/dashboard/spinner/spinner.scss'; @import '../components/dashboard/spinner/spinner.scss';
@import '../components/toaster/toaster.scss'; @import '../components/toaster/toaster.scss';
@import '~react-table/react-table.css'; @import '~react-table/react-table.css';
@import '~react-select/dist/react-select.css';
/* dex */ /* dex */
@import 'dex/main.scss'; @import 'dex/main.scss';

Write Preview
Loading…
Cancel
Save