diff --git a/src/components/EnsureDeviceApp.js b/src/components/EnsureDeviceApp.js index 1d300a98..e742a663 100644 --- a/src/components/EnsureDeviceApp.js +++ b/src/components/EnsureDeviceApp.js @@ -77,7 +77,7 @@ class EnsureDeviceApp extends Component<{ const cur = account ? account.currency : currency invariant(cur, 'No currency given') return ( - + {'Open the '} {cur.managerAppName} {' app on your device'} @@ -97,7 +97,7 @@ class EnsureDeviceApp extends Component<{ { id: 'device', title: ( - + {'Connect and unlock your '} {'Ledger device'} diff --git a/src/components/GenuineCheck.js b/src/components/GenuineCheck.js index 325f9dfa..aef771e9 100644 --- a/src/components/GenuineCheck.js +++ b/src/components/GenuineCheck.js @@ -124,7 +124,7 @@ class GenuineCheck extends PureComponent { { id: 'device', title: ( - + {'Connect and unlock your '} {'Ledger device'} @@ -135,10 +135,10 @@ class GenuineCheck extends PureComponent { { id: 'deviceInfo', title: ( - + {'Navigate to the '} {'dashboard'} - {' on your device'} + {' app on your device'} ), icon: homeIcon, @@ -147,7 +147,7 @@ class GenuineCheck extends PureComponent { { id: 'isGenuine', title: ( - + {'Allow '} {'Ledger Manager'} {' on your device'} diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index c9e62747..632d79e3 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -69,6 +69,19 @@ export function OptionRow({ step, ...p }: { step: StepType }) { ) } +export function BulletRow({ step, ...p }: { step: StepType }) { + const { icon, desc } = step + return ( + + + {icon} + + + {desc} + + + ) +} export const OptionRowDesc = styled(Box).attrs({ ff: 'Open Sans|Regular', fontSize: 4, diff --git a/src/components/SettingsPage/index.js b/src/components/SettingsPage/index.js index 5652f5f3..9c773cd7 100644 --- a/src/components/SettingsPage/index.js +++ b/src/components/SettingsPage/index.js @@ -15,7 +15,7 @@ import SectionDisplay from './sections/Display' import SectionCurrencies from './sections/Currencies' import SectionHelp from './sections/Help' import SectionAbout from './sections/About' -import SectionTools from './sections/Tools' +import SectionExport from './sections/Export' const mapStateToProps = state => ({ accountsCount: accountsSelector(state).length, @@ -61,10 +61,10 @@ class SettingsPage extends PureComponent { ] if (EXPERIMENTAL_TOOLS_SETTINGS) { - this._items.push({ + this._items.splice(2, 0, { key: 'tool', label: 'Experimental Tools', - value: SectionTools, + value: SectionExport, }) } diff --git a/src/components/SettingsPage/sections/Export.js b/src/components/SettingsPage/sections/Export.js new file mode 100644 index 00000000..17932932 --- /dev/null +++ b/src/components/SettingsPage/sections/Export.js @@ -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 { + 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: {'1'}, + desc: ( + + + {'Tap the'} + + {'+'} + + {'button in Accounts'} + + + ), + }, + { + key: 'step2', + icon: {'2'}, + desc: ( + + + {'Tap'} + + {'Import desktop accounts'} + + + + ), + }, + { + key: 'step3', + icon: {'3'}, + desc: ( + + + + ), + }, + ] + + return ( + + {t('settings.export.modal.title')} + + + + + + + {t('settings.export.modal.listTitle')} + + + + {stepsImportMobile.map(step => )} + + + + + + + ) + } + + render() { + const { t } = this.props + const { isModalOpened } = this.state + + return ( +
+ + +
} + title={t('settings.tabs.export')} + desc={t('settings.export.desc')} + renderRight={ + + } + /> + +
+ ) + } +} + +export default translate()(SectionExport) diff --git a/src/components/SettingsPage/sections/Tools.js b/src/components/SettingsPage/sections/Tools.js deleted file mode 100644 index 23192ed1..00000000 --- a/src/components/SettingsPage/sections/Tools.js +++ /dev/null @@ -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) => ( - - {'QRCode Mobile Export'} - - Scan this animated QRCode with Ledger Live Mobile App - - - - {liveCommonPkg.version} - - - ) - - render() { - const { qrcodeMobileExportModal } = this.state - return ( - - - - - - - - ) - } -} - -export default translate()(TabProfile) diff --git a/static/i18n/en/app.json b/static/i18n/en/app.json index 65d182f0..d4f947f9 100644 --- a/static/i18n/en/app.json +++ b/static/i18n/en/app.json @@ -138,12 +138,9 @@ "messageIfSkipped": "Your {{currencyName}} address has not been confirmed on your Ledger device. Please verify it for optimal security." }, "deviceConnect": { - "step1": { - "connect": "Connect and unlock your <1>Ledger device" - }, - "step2": { - "open": "Open the <1><0>{{managerAppName}} app on your device" - } + "step1": "Connect and unlock your <1>Ledger device", + "step2": "Navigate to the <1><0>{{managerAppName}} app on your device", + "step3": "Allow <1><0>Ledger Manager on your device" }, "emptyState": { "sidebar": { @@ -347,10 +344,23 @@ "title": "Settings", "tabs": { "display": "General", + "export": "Export accounts", "currencies": "Currencies", "help": "Help", "about": "About" }, + "export": { + "desc": "Import accounts on your Ledger Live Mobile app", + "button": "Export", + "modal":{ + "button": "Done", + "title": "Scan to export to mobile", + "listTitle": "To import accounts on your Ledger Live Mobile app:", + "step1": "Tap the <1><0>+ button in Accounts", + "step2": "Tap <1><0>Import desktop accounts", + "step3": "Scan until the loader hits 100%" + } + }, "display": { "desc": "Configure general Ledger Live settings.", "language": "Display language", @@ -619,7 +629,7 @@ "step2": { "title": "Did you save your recovery phrase by yourself?" }, - "step3": { + "step3":{ "title": "Is your Ledger device genuine?" }, "isGenuinePassed": "Your device is genuine",