meriadec
6 years ago
9 changed files with 196 additions and 78 deletions
@ -0,0 +1,148 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React, { PureComponent } from 'react' |
||||
|
import { Trans, translate } from 'react-i18next' |
||||
|
|
||||
|
import type { T } from 'types/common' |
||||
|
|
||||
|
import TrackPage from 'analytics/TrackPage' |
||||
|
import styled from 'styled-components' |
||||
|
import { SettingsSection as Section, SettingsSectionHeader as Header } from '../SettingsSection' |
||||
|
import IconShare from '../../../icons/Share' |
||||
|
import Button from '../../base/Button' |
||||
|
import Modal, { ModalBody, ModalContent, ModalFooter, ModalTitle } from '../../base/Modal' |
||||
|
import Box from '../../base/Box' |
||||
|
import QRCodeExporter from '../../QRCodeExporter' |
||||
|
import { BulletRow } from '../../Onboarding/helperComponents' |
||||
|
import Text from '../../base/Text' |
||||
|
|
||||
|
const BulletRowIcon = styled(Box).attrs({ |
||||
|
ff: 'Rubik|Regular', |
||||
|
fontSize: 10, |
||||
|
textAlign: 'center', |
||||
|
color: 'wallet', |
||||
|
pl: 2, |
||||
|
})` |
||||
|
background-color: rgba(100, 144, 241, 0.1); |
||||
|
border-radius: 12px; |
||||
|
display: inline-flex; |
||||
|
height: 18px; |
||||
|
width: 18px; |
||||
|
padding: 0px; |
||||
|
padding-top: 2px; |
||||
|
` |
||||
|
|
||||
|
type Props = { |
||||
|
t: T, |
||||
|
} |
||||
|
|
||||
|
type State = { |
||||
|
isModalOpened: boolean, |
||||
|
} |
||||
|
|
||||
|
class SectionExport extends PureComponent<Props, State> { |
||||
|
state = { |
||||
|
isModalOpened: false, |
||||
|
} |
||||
|
|
||||
|
onModalOpen = () => { |
||||
|
this.setState({ isModalOpened: true }) |
||||
|
} |
||||
|
|
||||
|
onModalClose = () => { |
||||
|
this.setState({ isModalOpened: false }) |
||||
|
} |
||||
|
|
||||
|
renderModal = ({ onClose }: any) => { |
||||
|
const { t } = this.props |
||||
|
const stepsImportMobile = [ |
||||
|
{ |
||||
|
key: 'step1', |
||||
|
icon: <BulletRowIcon>{'1'}</BulletRowIcon>, |
||||
|
desc: ( |
||||
|
<Box style={{ display: 'block' }}> |
||||
|
<Trans i18nKey="settings.export.modal.step1"> |
||||
|
{'Tap the'} |
||||
|
<Text ff="Open Sans|SemiBold" color="dark"> |
||||
|
{'+'} |
||||
|
</Text> |
||||
|
{'button in Accounts'} |
||||
|
</Trans> |
||||
|
</Box> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
key: 'step2', |
||||
|
icon: <BulletRowIcon>{'2'}</BulletRowIcon>, |
||||
|
desc: ( |
||||
|
<Box style={{ display: 'block' }}> |
||||
|
<Trans i18nKey="settings.export.modal.step2"> |
||||
|
{'Tap'} |
||||
|
<Text ff="Open Sans|SemiBold" color="dark"> |
||||
|
{'Import desktop accounts'} |
||||
|
</Text> |
||||
|
</Trans> |
||||
|
</Box> |
||||
|
), |
||||
|
}, |
||||
|
{ |
||||
|
key: 'step3', |
||||
|
icon: <BulletRowIcon>{'3'}</BulletRowIcon>, |
||||
|
desc: ( |
||||
|
<Box style={{ display: 'block' }}> |
||||
|
<Trans i18nKey="settings.export.modal.step3" /> |
||||
|
</Box> |
||||
|
), |
||||
|
}, |
||||
|
] |
||||
|
|
||||
|
return ( |
||||
|
<ModalBody onClose={onClose}> |
||||
|
<ModalTitle>{t('settings.export.modal.title')}</ModalTitle> |
||||
|
<ModalContent flow={2} justify="center" align="center"> |
||||
|
<Box flow={2}> |
||||
|
<QRCodeExporter size={330} /> |
||||
|
</Box> |
||||
|
<Box shrink style={{ width: 330, fontSize: 13, marginTop: 20 }}> |
||||
|
<Text ff="Open Sans|SemiBold" color="dark"> |
||||
|
{t('settings.export.modal.listTitle')} |
||||
|
</Text> |
||||
|
</Box> |
||||
|
<Box style={{ width: 330 }}> |
||||
|
{stepsImportMobile.map(step => <BulletRow key={step.key} step={step} />)} |
||||
|
</Box> |
||||
|
</ModalContent> |
||||
|
<ModalFooter horizontal align="center" justify="flex-end" flow={2}> |
||||
|
<Button small onClick={onClose} primary> |
||||
|
{t('settings.export.modal.button')} |
||||
|
</Button> |
||||
|
</ModalFooter> |
||||
|
</ModalBody> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { t } = this.props |
||||
|
const { isModalOpened } = this.state |
||||
|
|
||||
|
return ( |
||||
|
<Section style={{ flowDirection: 'column' }}> |
||||
|
<TrackPage category="Settings" name="Export" /> |
||||
|
|
||||
|
<Header |
||||
|
icon={<IconShare size={16} />} |
||||
|
title={t('settings.tabs.export')} |
||||
|
desc={t('settings.export.desc')} |
||||
|
renderRight={ |
||||
|
<Button small onClick={this.onModalOpen} primary> |
||||
|
{t('settings.export.button')} |
||||
|
</Button> |
||||
|
} |
||||
|
/> |
||||
|
<Modal isOpened={isModalOpened} onClose={this.onModalClose} render={this.renderModal} /> |
||||
|
</Section> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default translate()(SectionExport) |
||||
@ -1,59 +0,0 @@ |
|||||
// @flow
|
|
||||
|
|
||||
/* eslint-disable react/jsx-no-literals */ |
|
||||
|
|
||||
import React, { PureComponent } from 'react' |
|
||||
import liveCommonPkg from '@ledgerhq/live-common/package.json' |
|
||||
import { translate } from 'react-i18next' |
|
||||
import Box, { Card } from 'components/base/Box' |
|
||||
import Modal, { ModalBody, ModalContent, ModalTitle } from 'components/base/Modal' |
|
||||
import Button from 'components/base/Button' |
|
||||
import QRCodeExporter from 'components/QRCodeExporter' |
|
||||
|
|
||||
class TabProfile extends PureComponent<*, *> { |
|
||||
state = { |
|
||||
qrcodeMobileExportModal: false, |
|
||||
} |
|
||||
|
|
||||
onQRCodeMobileExport = () => { |
|
||||
this.setState({ qrcodeMobileExportModal: true }) |
|
||||
} |
|
||||
|
|
||||
onRequestClose = () => { |
|
||||
this.setState({ qrcodeMobileExportModal: false }) |
|
||||
} |
|
||||
|
|
||||
renderQRCodeModal = ({ onClose }: any) => ( |
|
||||
<ModalBody onClose={onClose} justify="center" align="center"> |
|
||||
<ModalTitle>{'QRCode Mobile Export'}</ModalTitle> |
|
||||
<ModalContent flow={2}> |
|
||||
<Box>Scan this animated QRCode with Ledger Live Mobile App</Box> |
|
||||
<Box flow={2}> |
|
||||
<QRCodeExporter /> |
|
||||
</Box> |
|
||||
<Box style={{ textAlign: 'right' }}>{liveCommonPkg.version}</Box> |
|
||||
</ModalContent> |
|
||||
</ModalBody> |
|
||||
) |
|
||||
|
|
||||
render() { |
|
||||
const { qrcodeMobileExportModal } = this.state |
|
||||
return ( |
|
||||
<Card flow={3}> |
|
||||
<Box horizontal> |
|
||||
<Button small onClick={this.onQRCodeMobileExport} primary> |
|
||||
QRCode Mobile Export |
|
||||
</Button> |
|
||||
|
|
||||
<Modal |
|
||||
isOpened={qrcodeMobileExportModal} |
|
||||
onClose={this.onRequestClose} |
|
||||
render={this.renderQRCodeModal} |
|
||||
/> |
|
||||
</Box> |
|
||||
</Card> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default translate()(TabProfile) |
|
||||
Loading…
Reference in new issue