@ -1,5 +1,7 @@
// @flow
// @flow
/* eslint-disable react/no-multi-comp */
import React , { PureComponent , Fragment } from 'react' import React , { PureComponent , Fragment } from 'react'
import invariant from 'invariant' import invariant from 'invariant'
import { connect } from 'react-redux' import { connect } from 'react-redux'
@ -9,7 +11,8 @@ import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
import { decodeAccount } from 'reducers/accounts' import { decodeAccount } from 'reducers/accounts'
import { addAccount } from 'actions/accounts' import { addAccount } from 'actions/accounts'
import FormattedVal from 'components/base/FormattedVal' import FakeLink from 'components/base/FakeLink'
import Ellipsis from 'components/base/Ellipsis'
import Switch from 'components/base/Switch' import Switch from 'components/base/Switch'
import Spinner from 'components/base/Spinner' import Spinner from 'components/base/Spinner'
import Box , { Card } from 'components/base/Box' import Box , { Card } from 'components/base/Box'
@ -32,26 +35,40 @@ type Props = {
addAccount : Account => void , addAccount : Account => void ,
} }
const INITIAL_STATE = { type ImportableAccountType = {
status : 'idle' , name : string ,
currency : null , currency : Currency ,
xpub : '' , derivationMode : string ,
account : null , xpub : string ,
isSegwit : true ,
isUnsplit : false ,
error : null ,
} }
type State = { type State = {
status : string , status : string ,
importableAccounts : ImportableAccountType [ ] ,
currency : ? Currency , currency : ? Currency ,
xpub : string , xpub : string ,
account : ? Account , name : string ,
isSegwit : boolean , isSegwit : boolean ,
isUnsplit : boolean , isUnsplit : boolean ,
error : ? Error , error : ? Error ,
} }
const INITIAL_STATE = {
status : 'idle' ,
currency : null ,
xpub : '' ,
name : 'dev' ,
isSegwit : true ,
isUnsplit : false ,
error : null ,
importableAccounts : [ ] ,
}
class AccountImporter extends PureComponent < Props , State > { class AccountImporter extends PureComponent < Props , State > {
state = INITIAL_STATE state = INITIAL_STATE
@ -67,18 +84,41 @@ class AccountImporter extends PureComponent<Props, State> {
onChangeXPUB = xpub => this . setState ( { xpub } ) onChangeXPUB = xpub => this . setState ( { xpub } )
onChangeSegwit = isSegwit => this . setState ( { isSegwit } ) onChangeSegwit = isSegwit => this . setState ( { isSegwit } )
onChangeUnsplit = isUnsplit => this . setState ( { isUnsplit } ) onChangeUnsplit = isUnsplit => this . setState ( { isUnsplit } )
onChangeName = name => this . setState ( { name } )
isValid = ( ) => { isValid = ( ) => {
const { currency , xpub } = this . state const { currency , xpub , status } = this . state
return ! ! currency && ! ! xpub return ! ! currency && ! ! xpub && status !== 'scanning'
} }
scan = async ( ) => { scan = async ( ) => {
if ( ! this . isValid ( ) ) return
this . setState ( { status : 'scanning' } ) this . setState ( { status : 'scanning' } )
const { importableAccounts } = this . state
try { try {
const { currency , xpub , isSegwit , isUnsplit } = this . state for ( let i = 0 ; i < importableAccounts . length ; i ++ ) {
invariant ( currency , 'no currency' ) const a = importableAccounts [ i ]
const scanPayload = {
seedIdentifier : ` dev_ ${ a . xpub } ` ,
currencyId : a . currency . id ,
xpub : a . xpub ,
derivationMode : a . derivationMode ,
}
const rawAccount = await scanFromXPUB . send ( scanPayload ) . toPromise ( )
const account = decodeAccount ( rawAccount )
await this . import ( {
... account ,
name : a . name ,
} )
this . removeImportableAccount ( a )
}
this . reset ( )
} catch ( error ) {
this . setState ( { status : 'error' , error } )
}
}
addToScan = ( ) => {
const { xpub , currency , isSegwit , isUnsplit , name } = this . state
const derivationMode = isSegwit const derivationMode = isSegwit
? isUnsplit ? isUnsplit
? 'segwit_unsplit' ? 'segwit_unsplit'
@ -86,37 +126,47 @@ class AccountImporter extends PureComponent<Props, State> {
: isUnsplit : isUnsplit
? 'unsplit' ? 'unsplit'
: '' : ''
const rawAccount = await scanFromXPUB const importableAccount = { xpub , currency , derivationMode , name }
. send ( { this . setState ( ( { importableAccounts } ) => ( {
seedIdentifier : 'dev_tool' , importableAccounts : [ ... importableAccounts , importableAccount ] ,
currencyId : currency . id , currency : null ,
xpub , xpub : '' ,
derivationMode , name : 'dev' ,
} ) isSegwit : true ,
. toPromise ( ) isUnsplit : false ,
const account = decodeAccount ( rawAccount ) } ) )
this . setState ( { status : 'finish' , account } )
} catch ( error ) {
this . setState ( { status : 'error' , error } )
} }
removeImportableAccount = importableAccount => {
this . setState ( ( { importableAccounts } ) => ( {
importableAccounts : importableAccounts . filter ( i => i . xpub !== importableAccount . xpub ) ,
} ) )
} }
import = async ( ) => { import = async account => {
const { account } = this . state
invariant ( account , 'no account' ) invariant ( account , 'no account' )
await idleCallback ( ) await idleCallback ( )
this . props . addAccount ( account ) this . props . addAccount ( account )
this . reset ( )
} }
reset = ( ) => this . setState ( INITIAL_STATE ) reset = ( ) => this . setState ( INITIAL_STATE )
render ( ) { render ( ) {
const { currency , xpub , isSegwit , isUnsplit , status , account , error } = this . state const {
currency ,
xpub ,
name ,
isSegwit ,
isUnsplit ,
status ,
error ,
importableAccounts ,
} = this . state
const supportsSplit = ! ! currency && ! ! currency . forkedFrom const supportsSplit = ! ! currency && ! ! currency . forkedFrom
return ( return (
< Fragment >
< Card title = "Import from xpub" flow = { 3 } > < Card title = "Import from xpub" flow = { 3 } >
{ status === 'idle' ? ( { status === 'idle' || status === 'scanning ' ? (
< Fragment > < Fragment >
< Box flow = { 1 } > < Box flow = { 1 } >
< Label > { 'currency' } < / L a b e l > < Label > { 'currency' } < / L a b e l >
@ -148,50 +198,24 @@ class AccountImporter extends PureComponent<Props, State> {
placeholder = "xpub" placeholder = "xpub"
value = { xpub } value = { xpub }
onChange = { this . onChangeXPUB } onChange = { this . onChangeXPUB }
onEnter = { this . s can} onEnter = { this . addToS can}
/ > / >
< / B o x > < / B o x >
< Box align = "flex-end" > < Box flow = { 1 } >
< Button primary small disabled = { ! this . isValid ( ) } onClick = { this . scan } > < Label > { 'name' } < / L a b e l >
{ 'scan' } < Input
< / B u t t o n > placeholder = "name"
< / B o x > value = { name }
< / F r a g m e n t > onChange = { this . onChangeName }
) : status === 'scanning' ? ( onEnter = { this . addToScan }
< Box align = "center" justify = "center" p = { 5 } >
< Spinner size = { 16 } / >
< / B o x >
) : status === 'finish' ? (
account ? (
< Box p = { 8 } align = "center" justify = "center" flow = { 5 } horizontal >
< Box horizontal flow = { 4 } color = "graphite" align = "center" >
{ currency && < CurrencyCircleIcon size = { 64 } currency = { currency } / > }
< Box >
< Box ff = "Museo Sans|Bold" > { account . name } < / B o x >
< FormattedVal
fontSize = { 2 }
alwaysShowSign = { false }
color = "graphite"
unit = { account . unit }
showCode
val = { account . balance || 0 }
/ > / >
< Box fontSize = { 2 } > { ` ${ account . operations . length } operation(s) ` } < / B o x >
< / B o x >
< / B o x > < / B o x >
< Box align = "flex-end" >
< Button outline small disabled = { ! account } onClick = { this . import } > < Button primary small disabled = { ! this . isValid ( ) } onClick = { this . addToScan } >
{ 'import' } { 'add to scan' }
< / B u t t o n >
< / B o x >
) : (
< Box align = "center" justify = "center" p = { 5 } flow = { 4 } >
< Box > { 'No accounts found or wrong xpub' } < / B o x >
< Button primary onClick = { this . reset } small autoFocus >
{ 'Reset' }
< / B u t t o n > < / B u t t o n >
< / B o x > < / B o x >
) < / F r a g m e n t >
) : status === 'error' ? ( ) : status === 'error' ? (
< Box align = "center" justify = "center" p = { 5 } flow = { 4 } > < Box align = "center" justify = "center" p = { 5 } flow = { 4 } >
< Box > < Box >
@ -203,6 +227,56 @@ class AccountImporter extends PureComponent<Props, State> {
< / B o x > < / B o x >
) : null } ) : null }
< / C a r d > < / C a r d >
{ ! ! importableAccounts . length && (
< Card flow = { 2 } >
{ importableAccounts . map ( ( acc , i ) => (
< ImportableAccount
key = { acc . xpub }
importableAccount = { acc }
onRemove = { this . removeImportableAccount }
isLoading = { status === 'scanning' && i === 0 }
>
{ acc . xpub }
< / I m p o r t a b l e A c c o u n t >
) ) }
{ status !== 'scanning' && (
< Box mt = { 4 } align = "flex-start" >
< Button primary onClick = { this . scan } >
{ 'Launch scan' }
< / B u t t o n >
< / B o x >
) }
< / C a r d >
) }
< / F r a g m e n t >
)
}
}
class ImportableAccount extends PureComponent < {
importableAccount : ImportableAccountType ,
onRemove : ImportableAccountType => void ,
isLoading : boolean ,
} > {
remove = ( ) => {
this . props . onRemove ( this . props . importableAccount )
}
render ( ) {
const { importableAccount , isLoading } = this . props
return (
< Box horizontal flow = { 2 } align = "center" >
{ isLoading && < Spinner size = { 16 } color = "rgba(0, 0, 0, 0.3)" / > }
< CurrencyCircleIcon currency = { importableAccount . currency } size = { 24 } / >
< Box grow ff = "Rubik" fontSize = { 3 } >
< Ellipsis > { ` [ ${ importableAccount . name } ] ${ importableAccount . derivationMode ||
'default' } $ { importableAccount . xpub } ` }</Ellipsis>
< / B o x >
{ ! isLoading && (
< FakeLink onClick = { this . remove } fontSize = { 3 } >
{ 'Remove' }
< / F a k e L i n k >
) }
< / B o x >
) )
} }
} }
Gaëtan Renaudeau
7 years ago