2018-11-23 15:23:41 -08:00
// @flow
2019-02-04 20:41:45 -08:00
2019-01-12 19:03:33 -08:00
/* eslint-disable import/no-extraneous-dependencies */
import fs from 'fs' ;
import { promisify } from 'util' ;
2019-01-12 10:02:34 -08:00
import React , { PureComponent } from 'react' ;
import styled from 'styled-components' ;
2019-01-12 19:03:33 -08:00
import electron from 'electron' ;
import isDev from 'electron-is-dev' ;
import dateFns from 'date-fns' ;
import eres from 'eres' ;
2018-11-23 15:23:41 -08:00
2019-01-12 10:02:34 -08:00
import { Button } from '../components/button' ;
import { ConfirmDialogComponent } from '../components/confirm-dialog' ;
import { TextComponent } from '../components/text' ;
import { InputComponent } from '../components/input' ;
2019-01-12 11:30:44 -08:00
import { InputLabelComponent } from '../components/input-label' ;
import { RowComponent } from '../components/row' ;
import { Clipboard } from '../components/clipboard' ;
2019-02-08 21:02:03 -08:00
import { SelectComponent } from '../components/select' ;
2018-11-23 15:23:41 -08:00
2019-01-12 10:02:34 -08:00
import rpc from '../../services/api' ;
2019-02-10 09:52:34 -08:00
import { DARK , LIGHT , THEME _MODE } from '../constants/themes' ;
2019-02-08 21:02:03 -08:00
import electronStore from '../../config/electron-store' ;
2019-01-12 10:02:34 -08:00
2019-01-12 19:03:33 -08:00
const HOME _DIR = electron . remote . app . getPath ( 'home' ) ;
2019-01-12 10:02:34 -08:00
const Wrapper = styled . div `
2019-02-07 08:31:59 -08:00
margin - top : $ { props => props . theme . layoutContentPaddingTop } ;
2019-01-12 10:02:34 -08:00
` ;
const ModalContent = styled . div `
padding : 20 px ;
width : 100 % ;
2019-01-12 11:30:44 -08:00
max - height : 600 px ;
overflow - y : auto ;
p {
word - break : break - all ;
}
` ;
const Btn = styled ( Button ) `
margin - bottom : 10 px ;
2019-01-12 10:02:34 -08:00
` ;
2019-01-12 11:30:44 -08:00
const ClipboardButton = styled ( Clipboard ) `
width : 50 px ;
2019-02-07 08:31:59 -08:00
border - radius : $ { props => props . theme . boxBorderRadius } ;
2019-01-12 11:30:44 -08:00
height : 45 px ;
margin - left : 5 px ;
` ;
2019-01-23 21:04:15 -08:00
const SettingsWrapper = styled . div `
2019-01-23 07:07:08 -08:00
margin - bottom : 45 px ;
min - width : 200 px ;
width : 37 % ;
` ;
2019-01-23 21:04:15 -08:00
const SettingsTitle = styled ( TextComponent ) `
text - transform : uppercase ;
2019-02-07 08:31:59 -08:00
color : $ { props => props . theme . colors . transactionsDate } ;
font - size : $ { props => ` ${ props . theme . fontSize . regular * 0.9 } em ` } ;
font - weight : $ { props => String ( props . theme . fontWeight . bold ) } ;
2019-01-23 21:04:15 -08:00
margin - bottom : 5 px ;
2019-01-23 07:07:08 -08:00
` ;
2019-01-23 21:04:15 -08:00
const SettingsContent = styled ( TextComponent ) `
2019-01-23 07:07:08 -08:00
margin - bottom : 20 px ;
margin - top : 10 px ;
` ;
2019-02-08 21:02:03 -08:00
const ThemeSelectWrapper = styled . div `
margin - bottom : 20 px ;
` ;
2019-01-12 11:30:44 -08:00
type Key = {
2019-01-12 10:02:34 -08:00
zAddress : string ,
key : string ,
} ;
type Props = {
addresses : string [ ] ,
} ;
type State = {
2019-01-12 11:30:44 -08:00
viewKeys : Key [ ] ,
privateKeys : Key [ ] ,
2019-01-12 18:18:59 -08:00
importedPrivateKeys : string ,
2019-01-12 10:02:34 -08:00
successExportViewKeys : boolean ,
2019-01-12 11:30:44 -08:00
successExportPrivateKeys : boolean ,
2019-01-12 18:18:59 -08:00
successImportPrivateKeys : boolean ,
isLoading : boolean ,
error : string | null ,
2019-01-12 10:02:34 -08:00
} ;
export class SettingsView extends PureComponent < Props , State > {
state = {
viewKeys : [ ] ,
2019-01-12 11:30:44 -08:00
privateKeys : [ ] ,
2019-01-12 18:18:59 -08:00
importedPrivateKeys : '' ,
2019-01-12 10:02:34 -08:00
isLoading : false ,
successExportViewKeys : false ,
2019-01-12 11:30:44 -08:00
successExportPrivateKeys : false ,
2019-01-12 18:18:59 -08:00
successImportPrivateKeys : false ,
error : null ,
2019-01-12 10:02:34 -08:00
} ;
exportViewKeys = ( ) => {
const { addresses } = this . props ;
const zAddresses = addresses . filter ( addr => addr . startsWith ( 'z' ) ) ;
2019-01-12 11:30:44 -08:00
this . setState ( { isLoading : true } ) ;
2019-01-12 10:02:34 -08:00
Promise . all (
zAddresses . map ( async ( zAddr ) => {
const viewKey = await rpc . z _exportviewingkey ( zAddr ) ;
return { zAddress : zAddr , key : viewKey } ;
} ) ,
) . then ( ( viewKeys ) => {
this . setState ( {
viewKeys ,
successExportViewKeys : true ,
2019-01-12 11:30:44 -08:00
isLoading : false ,
2019-01-12 10:02:34 -08:00
} ) ;
} ) ;
} ;
2019-01-12 11:30:44 -08:00
exportPrivateKeys = ( ) => {
const { addresses } = this . props ;
const zAddresses = addresses . filter ( addr => addr . startsWith ( 'z' ) ) ;
this . setState ( { isLoading : true } ) ;
Promise . all (
zAddresses . map ( async ( zAddr ) => {
const privateKey = await rpc . z _exportkey ( zAddr ) ;
return { zAddress : zAddr , key : privateKey } ;
} ) ,
) . then ( ( privateKeys ) => {
this . setState ( {
privateKeys ,
successExportPrivateKeys : true ,
isLoading : false ,
} ) ;
} ) ;
2019-01-12 10:02:34 -08:00
} ;
2019-01-12 18:18:59 -08:00
importPrivateKeys = ( ) => {
const { importedPrivateKeys } = this . state ;
if ( ! importedPrivateKeys ) return ;
const keys = importedPrivateKeys
. split ( '\n' )
. map ( key => key . trim ( ) )
. filter ( key => ! ! key ) ;
this . setState ( { isLoading : true , error : null } ) ;
Promise . all ( keys . map ( key => rpc . z _importkey ( key ) ) )
. then ( ( ) => {
this . setState ( {
successImportPrivateKeys : true ,
isLoading : false ,
} ) ;
} )
. catch ( ( error ) => {
this . setState ( { isLoading : false , error : error . message } ) ;
} ) ;
} ;
2019-01-12 19:03:33 -08:00
backupWalletDat = async ( ) => {
const backupFileName = ` zcash-wallet-backup- ${ dateFns . format (
new Date ( ) ,
'YYYY-MM-DD-mm-ss' ,
) } . dat ` ;
electron . remote . dialog . showSaveDialog (
2019-01-28 16:34:07 -08:00
undefined ,
2019-01-12 19:03:33 -08:00
{ defaultPath : backupFileName } ,
2019-02-06 19:06:48 -08:00
async ( pathToSave : string ) => {
2019-01-12 19:06:05 -08:00
if ( ! pathToSave ) return ;
const zcashDir = isDev ? ` ${ HOME _DIR } /.zcash/testnet3 ` : HOME _DIR ;
const walletDatPath = ` ${ zcashDir } /wallet.dat ` ;
const [ cannotAccess ] = await eres ( promisify ( fs . access ) ( walletDatPath ) ) ;
/* eslint-disable no-alert */
if ( cannotAccess ) {
2019-01-28 16:34:07 -08:00
alert ( "Couldn't backup the wallet.dat file. You need to back it up manually." ) ;
2019-01-12 19:06:05 -08:00
}
2019-01-28 16:34:07 -08:00
const [ error ] = await eres ( promisify ( fs . copyFile ) ( walletDatPath , pathToSave ) ) ;
2019-01-12 19:03:33 -08:00
if ( error ) {
2019-01-28 16:34:07 -08:00
alert ( "Couldn't backup the wallet.dat file. You need to back it up manually." ) ;
2019-01-12 19:03:33 -08:00
}
} ,
) ;
} ;
2019-01-12 10:02:34 -08:00
render = ( ) => {
const {
2019-01-12 11:30:44 -08:00
viewKeys ,
privateKeys ,
2019-01-12 18:18:59 -08:00
importedPrivateKeys ,
successExportViewKeys ,
2019-01-12 11:30:44 -08:00
successExportPrivateKeys ,
2019-01-12 18:18:59 -08:00
successImportPrivateKeys ,
isLoading ,
error ,
2019-01-12 10:02:34 -08:00
} = this . state ;
2019-02-10 09:52:34 -08:00
const themeOptions = [
{ label : 'Dark' , value : DARK } ,
{ label : 'Light' , value : LIGHT } ,
] ;
2019-01-12 10:02:34 -08:00
return (
< Wrapper >
2019-02-08 21:02:03 -08:00
< ThemeSelectWrapper >
< SettingsTitle value = 'Theme' / >
< SelectComponent
2019-02-10 09:52:34 -08:00
onChange = { newMode => electronStore . set ( THEME _MODE , newMode ) }
value = { electronStore . get ( THEME _MODE ) }
options = { themeOptions }
2019-02-08 21:02:03 -08:00
/ >
< / T h e m e S e l e c t W r a p p e r >
2019-01-12 11:30:44 -08:00
< ConfirmDialogComponent
title = 'Export view keys'
2019-01-12 10:02:34 -08:00
renderTrigger = { toggleVisibility => (
2019-01-23 21:04:15 -08:00
< SettingsWrapper >
< SettingsTitle value = 'Export view keys' / >
< SettingsContent value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' / >
2019-01-23 07:07:08 -08:00
< Btn label = 'Export view keys' onClick = { toggleVisibility } / >
2019-01-23 21:04:15 -08:00
< / S e t t i n g s W r a p p e r >
2019-01-12 10:02:34 -08:00
) }
2019-01-12 11:30:44 -08:00
onConfirm = { this . exportViewKeys }
showButtons = { ! successExportViewKeys }
width = { 750 }
2019-01-12 10:02:34 -08:00
>
2019-01-21 13:42:20 -08:00
{ ( ) => (
< ModalContent >
{ successExportViewKeys ? (
viewKeys . map ( ( { zAddress , key } ) => (
< >
< InputLabelComponent value = { zAddress } / >
< RowComponent alignItems = 'center' >
< InputComponent
value = { key }
onFocus = { ( event ) => {
event . currentTarget . select ( ) ;
} }
/ >
< ClipboardButton text = { key } / >
< / R o w C o m p o n e n t >
< / >
) )
) : (
< TextComponent value = 'Ut id vulputate arcu. Curabitur mattis aliquam magna sollicitudin vulputate. Morbi tempus bibendum porttitor. Quisque dictum ac ipsum a luctus. Donec et lacus ac erat consectetur molestie a id erat.' / >
) }
< / M o d a l C o n t e n t >
) }
2019-01-12 11:30:44 -08:00
< / C o n f i r m D i a l o g C o m p o n e n t >
< ConfirmDialogComponent
title = 'Export private keys'
renderTrigger = { toggleVisibility => (
2019-01-23 21:04:15 -08:00
< SettingsWrapper >
< SettingsTitle value = 'Export private keys' / >
< SettingsContent value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' / >
2019-01-23 07:07:08 -08:00
< Btn label = 'Export private keys' onClick = { toggleVisibility } / >
2019-01-23 21:04:15 -08:00
< / S e t t i n g s W r a p p e r >
2019-01-12 10:02:34 -08:00
) }
2019-01-12 11:30:44 -08:00
onConfirm = { this . exportPrivateKeys }
showButtons = { ! successExportPrivateKeys }
width = { 750 }
>
2019-01-21 13:42:20 -08:00
{ ( ) => (
< ModalContent >
{ successExportPrivateKeys ? (
privateKeys . map ( ( { zAddress , key } ) => (
< >
< InputLabelComponent value = { zAddress } / >
< RowComponent alignItems = 'center' >
< InputComponent
value = { key }
onFocus = { ( event ) => {
event . currentTarget . select ( ) ;
} }
/ >
< ClipboardButton text = { key } / >
< / R o w C o m p o n e n t >
< / >
) )
) : (
< TextComponent value = 'Ut id vulputate arcu. Curabitur mattis aliquam magna sollicitudin vulputate. Morbi tempus bibendum porttitor. Quisque dictum ac ipsum a luctus. Donec et lacus ac erat consectetur molestie a id erat.' / >
) }
< / M o d a l C o n t e n t >
) }
2019-01-12 18:18:59 -08:00
< / C o n f i r m D i a l o g C o m p o n e n t >
< ConfirmDialogComponent
title = 'Import private keys'
renderTrigger = { toggleVisibility => (
2019-01-23 21:04:15 -08:00
< SettingsWrapper >
< SettingsTitle value = 'Import private keys' / >
< SettingsContent value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' / >
2019-01-23 07:07:08 -08:00
< Btn label = 'Import private keys' onClick = { toggleVisibility } / >
2019-01-23 21:04:15 -08:00
< / S e t t i n g s W r a p p e r >
2019-01-12 18:18:59 -08:00
) }
onConfirm = { this . importPrivateKeys }
showButtons = { ! successImportPrivateKeys }
width = { 900 }
isLoading = { isLoading }
>
2019-01-21 13:42:20 -08:00
{ ( ) => (
< ModalContent >
< InputLabelComponent value = 'Please paste your private keys here, one per line. The keys will be imported into your zcashd node' / >
< InputComponent
value = { importedPrivateKeys }
2019-01-28 16:34:07 -08:00
onChange = { value => this . setState ( { importedPrivateKeys : value } ) }
2019-01-21 13:42:20 -08:00
inputType = 'textarea'
rows = { 10 }
2019-01-12 11:30:44 -08:00
/ >
2019-01-21 13:42:20 -08:00
{ successImportPrivateKeys && (
2019-01-28 16:34:07 -08:00
< TextComponent value = 'Private keys imported in your node' align = 'center' / >
2019-01-21 13:42:20 -08:00
) }
{ error && < TextComponent value = { error } align = 'center' / > }
< / M o d a l C o n t e n t >
) }
2019-01-12 11:30:44 -08:00
< / C o n f i r m D i a l o g C o m p o n e n t >
2019-01-12 19:03:33 -08:00
2019-01-23 21:04:15 -08:00
< SettingsWrapper >
< SettingsTitle value = 'Backup Wallet' / >
< SettingsContent value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' / >
2019-01-23 07:07:08 -08:00
< Btn label = 'Backup wallet.dat' onClick = { this . backupWalletDat } / >
2019-01-23 21:04:15 -08:00
< / S e t t i n g s W r a p p e r >
2019-01-12 10:02:34 -08:00
< / W r a p p e r >
) ;
} ;
}