Moves the account exporter from the experimental to a top level tab

Tried to stay as true as possible to the design while removing the references to QrCodes
I kept the experimental tab available but without content right now.

src/components/Onboarding/helperComponents.js

@@ -69,6 +69,19 @@ export function OptionRow({ step, ...p }: { step: StepType }) {
     </Box>
   )
 }
+export function BulletRow({ step, ...p }: { step: StepType }) {
+  const { icon, desc } = step
+  return (
+    <Box horizontal my="7px">
+      <Box {...p} mr="7px">
+        {icon}
+      </Box>
+      <Box justify="center" shrink>
+        <OptionRowDesc>{desc}</OptionRowDesc>
+      </Box>
+    </Box>
+  )
+}
 export const OptionRowDesc = styled(Box).attrs({
   ff: 'Open Sans|Regular',
   fontSize: 4,

src/components/SettingsPage/index.js

@@ -15,6 +15,7 @@ import SectionDisplay from './sections/Display'
 import SectionCurrencies from './sections/Currencies'
 import SectionHelp from './sections/Help'
 import SectionAbout from './sections/About'
+import SectionExport from './sections/Export'
 import SectionTools from './sections/Tools'
 
 const mapStateToProps = state => ({
@@ -48,6 +49,11 @@ class SettingsPage extends PureComponent<Props, State> {
         label: <Trans i18nKey="settings.tabs.currencies" />,
         value: SectionCurrencies,
       },
+      {
+        key: 'export',
+        label: <Trans i18nKey="settings.tabs.export" />,
+        value: SectionExport,
+      },
       {
         key: 'about',
         label: <Trans i18nKey="settings.tabs.about" />,

src/components/SettingsPage/sections/Export.js

@@ -0,0 +1,166 @@
+// @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: 'Open Sans|Regular',
+  fontSize: 12,
+  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;
+`
+
+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">
+              {'Go to'}
+              <Text ff="Open Sans|SemiBold" color="dark">
+                {'Accounts'}
+              </Text>
+            </Trans>
+          </Box>
+        ),
+      },
+      {
+        key: 'step2',
+        icon: <BulletRowIcon>{'2'}</BulletRowIcon>,
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="settings.export.modal.step2">
+              {'Click on the'}
+              <Text ff="Open Sans|SemiBold" color="dark">
+                {'+'}
+              </Text>
+              {'button'}
+            </Trans>
+          </Box>
+        ),
+      },
+      {
+        key: 'step3',
+        icon: <BulletRowIcon>{'3'}</BulletRowIcon>,
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="settings.export.modal.step3">
+              {'Select'}
+              <Text ff="Open Sans|SemiBold" color="dark">
+                {'Import accounts'}
+              </Text>
+            </Trans>
+          </Box>
+        ),
+      },
+      {
+        key: 'step4',
+        icon: <BulletRowIcon>{'4'}</BulletRowIcon>,
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="settings.export.modal.step4">
+              {'Scan the image'}
+              <Text ff="Open Sans|SemiBold" color="dark">
+                {'until the loader hits 100%'}
+              </Text>
+            </Trans>
+          </Box>
+        ),
+      },
+    ]
+
+    return (
+      <ModalBody onClose={onClose}>
+        <ModalTitle>{'Export accounts'}</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)

src/components/SettingsPage/sections/Tools.js

@@ -3,54 +3,14 @@
 /* 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>
+        <Box horizontal>Nothing here</Box>
       </Card>
     )
   }

src/components/modals/Receive/steps/02-step-connect-device.js

@@ -8,8 +8,8 @@ import EnsureDeviceApp from 'components/EnsureDeviceApp'
 import CurrencyDownStatusAlert from 'components/CurrencyDownStatusAlert'
 import TrackPage from 'analytics/TrackPage'
 
-import type { StepProps } from '../index'
 import { Trans } from 'react-i18next'
+import type { StepProps } from '../index'
 
 export default function StepConnectDevice({ account, onChangeAppOpened }: StepProps) {
   return (

src/components/modals/Send/index.js

@@ -75,26 +75,26 @@ export type StepProps<Transaction> = DefaultStepProps & {
 const createSteps = () => [
   {
     id: 'amount',
-    label: <Trans i18nKey='send.steps.amount.title'/>,
+    label: <Trans i18nKey="send.steps.amount.title" />,
     component: StepAmount,
     footer: StepAmountFooter,
   },
   {
     id: 'device',
-    label: <Trans i18nKey='send.steps.connectDevice.title'/>,
+    label: <Trans i18nKey="send.steps.connectDevice.title" />,
     component: StepConnectDevice,
     footer: StepConnectDeviceFooter,
     onBack: ({ transitionTo }) => transitionTo('amount'),
   },
   {
     id: 'verification',
-    label: <Trans i18nKey='send.steps.verification.title'/>,
+    label: <Trans i18nKey="send.steps.verification.title" />,
     component: StepVerification,
     shouldPreventClose: true,
   },
   {
     id: 'confirmation',
-    label: <Trans i18nKey='send.steps.confirmation.title'/>,
+    label: <Trans i18nKey="send.steps.confirmation.title" />,
     component: StepConfirmation,
     footer: StepConfirmationFooter,
     onBack: ({ transitionTo, onRetry }) => {

static/i18n/en/app.json

@@ -347,10 +347,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",
+        "listTitle": "To import accounts on your Ledger Live Mobile app:",
+        "step1": "Go to <1><0>Accounts</0></1>",
+        "step2": "Click on the <1><0>+</0></1> button",
+        "step3": "Select <1><0>Import accounts</0></1>",
+        "step4": "Scan the image <1><0>until the loader hits 100%</0></1>"
+      }
+    },
     "display": {
       "desc": "Configure general Ledger Live settings.",
       "language": "Display language",