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

Merge pull request #239 from loeck/master 

Add Unit selector in InputCurrency
master
Meriadec Pillet 7 years ago
committed by GitHub
parent
6553e32b15 1368aad674
commit
e886e91cea
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 197 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      package.json
  2. 8
      src/components/SelectAccount/stories.js
  3. 4
      src/components/base/DropDown/index.js
  4. 48
      src/components/base/InputCurrency/index.js
  5. 43
      src/components/base/InputCurrency/stories.js
  6. 32
      src/components/base/Select/index.js
  7. 85
      src/components/modals/Send/01-step-amount.js
  8. 11
      src/components/modals/Send/index.js
  9. 11
      src/styles/theme.js
  10. 33
      yarn.lock

6
package.json
View File

@ -57,12 +57,12 @@
"cross-env": "^5.1.4",
"d3": "^4.13.0",
"debug": "^3.1.0",
"downshift": "^1.30.1",
"downshift": "^1.31.1",
"electron-store": "^1.3.0",
"electron-updater": "^2.21.1",
"fuse.js": "^3.2.0",
"history": "^4.7.2",
"i18next": "^10.5.1",
"i18next": "^10.6.0",
"i18next-node-fs-backend": "^1.0.0",
"ledger-test-library": "KhalilBellakrid/ledger-test-library-nodejs#7d37482",
"lodash": "^4.17.5",
@ -91,7 +91,7 @@
"source-map-support": "^0.5.4",
"styled-components": "^3.2.3",
"styled-system": "^2.2.1",
"tippy.js": "^2.3.0",
"tippy.js": "^2.4.0",
"victory": "^0.25.6"
},
"devDependencies": {

8
src/components/SelectAccount/stories.js
View File

@ -1,6 +1,6 @@
// @flow
import React, { PureComponent } from 'react'
import React, { Component } from 'react'
import { storiesOf } from '@storybook/react'
import Chance from 'chance'
import { getCurrencyByCoinType, getDefaultUnitByCoinType } from '@ledgerhq/currencies'
@ -29,11 +29,7 @@ export const accounts = [...Array(20)].map(() => ({
},
}))
type State = {
value: any,
}
class Wrapper extends PureComponent<any, State> {
class Wrapper extends Component<any, any> {
state = {
value: '',
}

4
src/components/base/DropDown/index.js
View File

@ -145,7 +145,7 @@ class DropDown extends PureComponent<Props> {
itemToString={itemToString}
selectedItem={value}
render={({
getButtonProps,
getToggleButtonProps,
getRootProps,
isOpen,
openMenu,
@ -153,7 +153,7 @@ class DropDown extends PureComponent<Props> {
...downshiftProps
}) => (
<Box {...getRootProps({ refKey: 'innerRef' })} horizontal relative>
<Trigger {...getButtonProps()} tabIndex={0} {...props}>
<Trigger {...getToggleButtonProps()} tabIndex={0} {...props}>
{children}
</Trigger>
{isOpen && this.renderItems(items, selectedItem, downshiftProps)}

48
src/components/base/InputCurrency/index.js
View File

@ -1,13 +1,15 @@
// @flow
import React, { PureComponent } from 'react'
import styled from 'styled-components'
import { parseCurrencyUnit, formatCurrencyUnit } from '@ledgerhq/currencies'
import noop from 'lodash/noop'
import isNaN from 'lodash/isNaN'
import Box from 'components/base/Box'
import Input from 'components/base/Input'
import Select from 'components/base/Select'
import type { Unit } from '@ledgerhq/currencies'
@ -35,12 +37,20 @@ function unformat(unit, value) {
return v
}
const Currencies = styled(Box)`
position: relative;
top: -1px;
right: -1px;
`
type Value = string | number
type Props = {
onChange: Function,
value: Value,
renderRight: any,
unit: Unit,
units: Array<Unit>,
value: Value,
}
type State = {
@ -51,6 +61,8 @@ type State = {
class InputCurrency extends PureComponent<Props, State> {
static defaultProps = {
onChange: noop,
renderRight: null,
units: [],
value: 0,
}
@ -105,15 +117,42 @@ class InputCurrency extends PureComponent<Props, State> {
}
emitOnChange = (v: Value) => {
const { onChange } = this.props
const { onChange, unit } = this.props
const { value } = this.state
if (value.toString() !== v.toString()) {
onChange(v.toString())
onChange(v.toString(), unit)
}
}
renderListUnits = () => {
const { unit, units, onChange } = this.props
const { value } = this.state
if (units.length <= 1) {
return null
}
const renderItem = item => item.code
return (
<Currencies onClick={e => e.stopPropagation()}>
<Select
bg="lightGraphite"
keyProp="code"
flatLeft
onChange={item => onChange(unformat(item, value), item)}
items={units}
value={unit}
renderItem={renderItem}
renderSelected={renderItem}
/>
</Currencies>
)
}
render() {
const { renderRight } = this.props
const { value } = this.state
return (
@ -124,6 +163,7 @@ class InputCurrency extends PureComponent<Props, State> {
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
renderRight={renderRight || this.renderListUnits()}
/>
)
}

43
src/components/base/InputCurrency/stories.js
View File

@ -1,15 +1,46 @@
// @flow
import React from 'react'
import React, { Component } from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
import { getDefaultUnitByCoinType, getFiatUnit } from '@ledgerhq/currencies'
import InputCurrency from 'components/base/InputCurrency'
const stories = storiesOf('Components/base', module)
const stories = storiesOf('Components', module)
const unit = getDefaultUnitByCoinType(1)
const units = [
getDefaultUnitByCoinType(1),
getDefaultUnitByCoinType(2),
getDefaultUnitByCoinType(3),
getDefaultUnitByCoinType(6),
getFiatUnit('USD'),
]
stories.add('InputCurrency', () => <InputCurrency unit={unit} onChange={action('onChange')} />)
class Wrapper extends Component<any, any> {
state = {
value: 0,
unit: units[0],
}
handleChange = (value, unit) => this.setState({ value, unit })
render() {
const { render } = this.props
const { value, unit } = this.state
return render({
onChange: this.handleChange,
unit,
value,
})
}
}
stories.add('InputCurrency', () => (
<Wrapper
render={({ value, unit, onChange }) => (
<InputCurrency value={value} unit={unit} units={units} onChange={onChange} />
)}
/>
))

32
src/components/base/Select/index.js
View File

@ -17,6 +17,9 @@ import IconCheck from 'icons/Check'
import IconAngleDown from 'icons/AngleDown'
type Props = {
bg?: string,
flatLeft?: boolean,
flatRight?: boolean,
fuseOptions?: Object,
highlight?: boolean,
items: Array<any>,
@ -40,15 +43,18 @@ const TriggerBtn = styled(Box).attrs({
pl: 3,
pr: 5,
})`
height: 40px;
${space};
height: 40px;
background: ${p => p.bg || p.theme.colors.white};
border-bottom-left-radius: ${p => (p.flatLeft ? 0 : p.theme.radii[1])}px;
border-bottom-right-radius: ${p => (p.flatRight ? 0 : p.theme.radii[1])}px;
border-top-left-radius: ${p => (p.flatLeft ? 0 : p.theme.radii[1])}px;
border-top-right-radius: ${p => (p.flatRight ? 0 : p.theme.radii[1])}px;
border: 1px solid ${p => p.theme.colors.fog};
border-radius: 3px;
display: flex;
width: 100%;
color: ${p => p.theme.colors.graphite};
background: ${p => p.theme.colors.white};
cursor: pointer;
display: flex;
width: 100%;
&:focus {
outline: none;
box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
@ -103,6 +109,9 @@ const IconSelected = styled(Box).attrs({
class Select extends PureComponent<Props> {
static defaultProps = {
bg: undefined,
flatLeft: false,
flatRight: false,
itemToString: (item: Object) => item && item.name,
keyProp: undefined,
maxHeight: 300,
@ -181,6 +190,8 @@ class Select extends PureComponent<Props> {
render() {
const {
flatLeft,
flatRight,
items,
searchable,
itemToString,
@ -201,7 +212,7 @@ class Select extends PureComponent<Props> {
onChange={onChange}
render={({
getInputProps,
getButtonProps,
getToggleButtonProps,
getRootProps,
isOpen,
inputValue,
@ -229,11 +240,14 @@ class Select extends PureComponent<Props> {
</Box>
) : (
<TriggerBtn
{...getButtonProps()}
tabIndex={0}
horizontal
{...getToggleButtonProps()}
bg={props.bg}
alignItems="center"
flatLeft={flatLeft}
flatRight={flatRight}
flow={2}
horizontal
tabIndex={0}
>
<Box grow>
{selectedItem && renderSelected ? (

85
src/components/modals/Send/01-step-amount.js
View File

@ -2,45 +2,47 @@
import React, { Fragment } from 'react'
import type { Unit } from '@ledgerhq/currencies'
import type { Account, T } from 'types/common'
import type { DoubleVal } from 'components/RequestAmount'
import Box from 'components/base/Box'
import SelectAccount from 'components/SelectAccount'
import CheckBox from 'components/base/CheckBox'
import { Textarea } from 'components/base/Input'
import InputCurrency from 'components/base/InputCurrency'
import Label from 'components/base/Label'
import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
import RecipientAddress from 'components/RecipientAddress'
import RequestAmount from 'components/RequestAmount'
import Select from 'components/base/Select'
import Input, { Textarea } from 'components/base/Input'
import SelectAccount from 'components/SelectAccount'
import Spoiler from 'components/base/Spoiler'
import CheckBox from 'components/base/CheckBox'
type Props = {
type PropsStepAmount = {
account: Account | null,
onChange: Function,
recipientAddress: string,
amount: DoubleVal,
fees: {
value: number,
unit: Unit | null,
},
isRBF: boolean,
t: T,
}
function StepAmount(props: Props) {
const { onChange, account, recipientAddress, t, amount, isRBF } = props
function StepAmount(props: PropsStepAmount) {
const { onChange, fees, account, recipientAddress, t, amount, isRBF } = props
return (
<Box flow={4}>
{/* */}
{/* ACCOUNT SELECTION */}
{/* */}
{/* ACCOUNT SELECTION */}
<Box flow={1}>
<Label>{t('send:steps.amount.selectAccountDebit')}</Label>
<SelectAccount onChange={onChange('account')} value={account} />
</Box>
{/* */}
{/* RECIPIENT ADDRESS */}
{/* */}
{/* RECIPIENT ADDRESS */}
<Box flow={1}>
<Label>
<span>{t('send:steps.amount.recipientAddress')}</span>
@ -55,41 +57,31 @@ function StepAmount(props: Props) {
{account && (
<Fragment>
{/* */}
{/* AMOUNT */}
{/* */}
{/* AMOUNT */}
<Box flow={1}>
<Label>{t('send:steps.amount.amount')}</Label>
<RequestAmount account={account} onChange={onChange('amount')} value={amount} />
</Box>
{/* */}
{/* FEES */}
{/* */}
{/* FEES */}
<Box flow={1}>
<Label>
<span>{t('send:steps.amount.fees')}</span>
<LabelInfoTooltip ml={1} text={t('send:steps.amount.fees')} />
</Label>
<Box horizontal flow={5}>
<Select
style={{ width: 200 }}
items={[{ key: 'custom', name: 'Custom' }]}
value={{ key: 'custom', name: 'Custom' }}
renderSelected={item => item.name}
onChange={onChange('fees')}
<Fees
amount={fees.value}
unit={fees.unit}
account={account}
onChange={(value, unit) => onChange('fees')({ value, unit })}
/>
<Input containerProps={{ grow: true }} />
</Box>
</Box>
{/* */}
{/* ADVANCED OPTIONS */}
{/* */}
{/* ADVANCED OPTIONS */}
<Spoiler title="Advanced options">
{/* */}
{/* RBF transaction */}
{/* */}
<Box horizontal align="center" flow={5}>
<Box style={{ width: 200 }}>
<Label>
@ -102,9 +94,7 @@ function StepAmount(props: Props) {
</Box>
</Box>
{/* */}
{/* Message */}
{/* */}
<Box horizontal align="flex-start" flow={5}>
<Box style={{ width: 200 }}>
<Label>
@ -122,4 +112,35 @@ function StepAmount(props: Props) {
)
}
type PropsFees = {
account: Account,
amount: number,
onChange: Function,
unit: Unit | null,
}
function Fees(props: PropsFees) {
const { onChange, account, unit, amount } = props
const { units } = account.currency
return (
<Fragment>
<Select
style={{ width: 200 }}
items={[{ key: 'custom', name: 'Custom' }]}
value={{ key: 'custom', name: 'Custom' }}
renderSelected={item => item.name}
onChange={() => onChange(amount, unit)}
/>
<InputCurrency
units={units}
unit={unit || units[0]}
containerProps={{ grow: true }}
value={amount}
onChange={onChange}
/>
</Fragment>
)
}
export default StepAmount

11
src/components/modals/Send/index.js
View File

@ -6,6 +6,7 @@ import { connect } from 'react-redux'
import { translate } from 'react-i18next'
import get from 'lodash/get'
import type { Unit } from '@ledgerhq/currencies'
import type { T, Account } from 'types/common'
import type { DoubleVal } from 'components/RequestAmount'
@ -41,7 +42,10 @@ type State = {
},
account: Account | null,
recipientAddress: string,
fees: number,
fees: {
value: number,
unit: Unit | null,
},
isRBF: boolean,
}
@ -67,7 +71,10 @@ const INITIAL_STATE = {
right: 0,
},
},
fees: 0,
fees: {
value: 0,
unit: null,
},
isRBF: false,
}

11
src/styles/theme.js
View File

@ -66,17 +66,18 @@ export const colors = {
pearl: '#ff0000',
// new colors
identity: '#41ccb4',
wallet: '#4b84ff',
positiveGreen: '#96d071',
alertRed: '#fa4352',
black: '#000000',
dark: '#1d2028',
smoke: '#666666',
fog: '#d8d8d8',
graphite: '#767676',
grey: '#999999',
fog: '#d8d8d8',
identity: '#41ccb4',
lightGraphite: '#fafafa',
lightGrey: '#f9f9f9',
positiveGreen: '#96d071',
smoke: '#666666',
wallet: '#4b84ff',
white: '#ffffff',
}

33
yarn.lock
View File

@ -3560,9 +3560,9 @@ dotenv@^5.0.0, dotenv@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
downshift@^1.30.1:
version "1.30.1"
resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.30.1.tgz#b5a8d771e7a412afb982eacae36a00a320e8cdee"
downshift@^1.31.1:
version "1.31.1"
resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.1.tgz#86760be5d2ceb9f322746458fc085ea0b923805c"
duplexer2@~0.1.4:
version "0.1.4"
@ -3637,7 +3637,7 @@ electron-builder-lib@20.5.1, electron-builder-lib@~20.5.0:
semver "^5.5.0"
temp-file "^3.1.1"
electron-builder@^20.5.1:
electron-builder@^20.0.4, electron-builder@^20.5.1:
version "20.5.1"
resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.5.1.tgz#8e6fba76dcd65aeabab60f15bd46f294ee04dd11"
dependencies:
@ -3801,7 +3801,7 @@ electron-webpack@1.13.0:
webpack-merge "^4.1.1"
yargs "^11.0.0"
electron@1.8.4:
electron@1.8.4, electron@^1.8.2:
version "1.8.4"
resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.4.tgz#cca8d0e6889f238f55b414ad224f03e03b226a38"
dependencies:
@ -5324,9 +5324,9 @@ i18next-node-fs-backend@^1.0.0:
js-yaml "3.5.4"
json5 "0.5.0"
i18next@^10.5.1:
version "10.5.1"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-10.5.1.tgz#f8e1ca4e15c440ebc3a9a5c3d015c3a6d2887890"
i18next@^10.6.0:
version "10.6.0"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-10.6.0.tgz#90ffd9f9bc617f34b9a12e037260f524445f7684"
iconv-lite@0.4, iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.19, iconv-lite@~0.4.13:
version "0.4.19"
@ -6385,6 +6385,9 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482:
dependencies:
axios "^0.17.1"
bindings "^1.3.0"
electron "^1.8.2"
electron-builder "^20.0.4"
electron-rebuild "^1.7.3"
nan "^2.6.2"
prebuild-install "^2.2.2"
@ -7692,9 +7695,9 @@ pngjs@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.2.tgz#097c3c2a75feb223eadddea6bc9f0050cf830bc3"
popper.js@^1.13.0:
version "1.13.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.13.0.tgz#e1e7ff65cc43f7cf9cf16f1510a75e81f84f4565"
popper.js@^1.14.1:
version "1.14.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.1.tgz#b8815e5cda6f62fc2042e47618649f75866e6753"
portfinder@^1.0.9:
version "1.0.13"
@ -9958,11 +9961,11 @@ tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
tippy.js@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-2.3.0.tgz#22505ce181f5049063c0201d310f4f0bfa794ce7"
tippy.js@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-2.4.0.tgz#a5e28b63f0c9b06c29cd65c0ac629953b673e35e"
dependencies:
popper.js "^1.13.0"
popper.js "^1.14.1"
tmp@^0.0.33:
version "0.0.33"

Write Preview
Loading…
Cancel
Save