Valentin D. Pinkman
7 years ago
7 changed files with 323 additions and 244 deletions
@ -0,0 +1,51 @@ |
|||||
|
// @flow
|
||||
|
import React from 'react' |
||||
|
import { translate } from 'react-i18next' |
||||
|
|
||||
|
import type { T, Device } from 'types/common' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Text from 'components/base/Text' |
||||
|
|
||||
|
import AppsList from './AppsList' |
||||
|
import FirmwareUpdate from './FirmwareUpdate' |
||||
|
|
||||
|
type DeviceInfo = { |
||||
|
targetId: number | string, |
||||
|
version: string, |
||||
|
final: boolean, |
||||
|
mcu: boolean, |
||||
|
} |
||||
|
|
||||
|
type Props = { |
||||
|
t: T, |
||||
|
device: Device, |
||||
|
deviceInfo: DeviceInfo, |
||||
|
} |
||||
|
|
||||
|
const Dashboard = ({ device, deviceInfo, t }: Props) => ( |
||||
|
<Box flow={4}> |
||||
|
<Box> |
||||
|
<Text ff="Museo Sans|Regular" fontSize={7} color="black"> |
||||
|
{t('manager:title')} |
||||
|
</Text> |
||||
|
<Text ff="Museo Sans|Light" fontSize={5}> |
||||
|
{t('manager:subtitle')} |
||||
|
</Text> |
||||
|
</Box> |
||||
|
<Box mt={7}> |
||||
|
<FirmwareUpdate |
||||
|
infos={{ |
||||
|
targetId: deviceInfo.targetId, |
||||
|
version: deviceInfo.version, |
||||
|
}} |
||||
|
device={device} |
||||
|
/> |
||||
|
</Box> |
||||
|
<Box> |
||||
|
<AppsList device={device} targetId={deviceInfo.targetId} /> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
) |
||||
|
|
||||
|
export default translate()(Dashboard) |
||||
@ -0,0 +1,187 @@ |
|||||
|
// @flow
|
||||
|
import React from 'react' |
||||
|
import { Trans, translate } from 'react-i18next' |
||||
|
import styled from 'styled-components' |
||||
|
import isNull from 'lodash/isNull' |
||||
|
import type { Device, T } from 'types/common' |
||||
|
|
||||
|
import { i } from 'helpers/staticPath' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
import Space from 'components/base/Space' |
||||
|
import Text from 'components/base/Text' |
||||
|
import Spinner from 'components/base/Spinner' |
||||
|
|
||||
|
import IconCheck from 'icons/Check' |
||||
|
import IconExclamationCircle from 'icons/ExclamationCircle' |
||||
|
import IconUsb from 'icons/Usb' |
||||
|
import IconHome from 'icons/Home' |
||||
|
|
||||
|
const WrapperIconCurrency = styled(Box).attrs({ |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
})` |
||||
|
border: 1px solid ${p => p.theme.colors[p.color]}; |
||||
|
border-radius: 8px; |
||||
|
height: 24px; |
||||
|
width: 24px; |
||||
|
` |
||||
|
|
||||
|
const Step = styled(Box).attrs({ |
||||
|
borderRadius: 1, |
||||
|
justifyContent: 'center', |
||||
|
fontSize: 4, |
||||
|
})` |
||||
|
border: 1px solid |
||||
|
${p => |
||||
|
p.validated |
||||
|
? p.theme.colors.wallet |
||||
|
: p.hasErrors |
||||
|
? p.theme.colors.alertRed |
||||
|
: p.theme.colors.fog}; |
||||
|
` |
||||
|
|
||||
|
const StepIcon = styled(Box).attrs({ |
||||
|
alignItems: 'center', |
||||
|
justifyContent: 'center', |
||||
|
})` |
||||
|
width: 64px; |
||||
|
` |
||||
|
|
||||
|
const StepContent = styled(Box).attrs({ |
||||
|
color: 'dark', |
||||
|
horizontal: true, |
||||
|
alignItems: 'center', |
||||
|
})` |
||||
|
height: 60px; |
||||
|
line-height: 1.2; |
||||
|
|
||||
|
strong { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const StepCheck = ({ checked, hasErrors }: { checked: ?boolean, hasErrors?: boolean }) => ( |
||||
|
<Box pr={5}> |
||||
|
{checked ? ( |
||||
|
<Box color="wallet"> |
||||
|
<IconCheck size={16} /> |
||||
|
</Box> |
||||
|
) : hasErrors ? ( |
||||
|
<Box color="alertRed"> |
||||
|
<IconExclamationCircle size={16} /> |
||||
|
</Box> |
||||
|
) : ( |
||||
|
<Spinner size={16} /> |
||||
|
)} |
||||
|
</Box> |
||||
|
) |
||||
|
|
||||
|
StepCheck.defaultProps = { |
||||
|
hasErrors: false, |
||||
|
} |
||||
|
|
||||
|
type DeviceInfo = { |
||||
|
targetId: number | string, |
||||
|
version: string, |
||||
|
final: boolean, |
||||
|
mcu: boolean, |
||||
|
} |
||||
|
|
||||
|
type Error = { |
||||
|
message: string, |
||||
|
stack: string, |
||||
|
} |
||||
|
|
||||
|
type Props = { |
||||
|
t: T, |
||||
|
device: ?Device, |
||||
|
deviceInfo: ?DeviceInfo, |
||||
|
dashboardError: ?Error, |
||||
|
isGenuine: boolean, |
||||
|
} |
||||
|
|
||||
|
const WorkflowDefault = ({ device, deviceInfo, dashboardError, isGenuine, t }: Props) => ( |
||||
|
<Box align="center"> |
||||
|
<Space of={152} /> |
||||
|
<Box align="center" style={{ maxWidth: 460, padding: '0 10px' }}> |
||||
|
<img |
||||
|
src={i('logos/connectDevice.png')} |
||||
|
alt="connect your device" |
||||
|
style={{ marginBottom: 30, maxWidth: 362, width: '100%' }} |
||||
|
/> |
||||
|
<Text ff="Museo Sans|Regular" fontSize={7} color="black" style={{ marginBottom: 10 }}> |
||||
|
{t('manager:device.title')} |
||||
|
</Text> |
||||
|
<Text ff="Museo Sans|Light" fontSize={5} color="grey" align="center"> |
||||
|
{t('manager:device.desc')} |
||||
|
</Text> |
||||
|
</Box> |
||||
|
<Box flow={4} style={{ maxWidth: 460, padding: '60px 10px 0' }}> |
||||
|
{/* DEVICE CHECK */} |
||||
|
<Step validated={!!device}> |
||||
|
<StepContent> |
||||
|
<StepIcon> |
||||
|
<IconUsb size={36} /> |
||||
|
</StepIcon> |
||||
|
<Box grow shrink> |
||||
|
<Trans i18nKey="deviceConnect:step1.connect" parent="div"> |
||||
|
{'Connect your '} |
||||
|
<strong>Ledger device</strong> |
||||
|
{' to your computer and enter your '} |
||||
|
<strong>PIN code</strong> |
||||
|
{' on your device'} |
||||
|
</Trans> |
||||
|
</Box> |
||||
|
<StepCheck checked={!!device} /> |
||||
|
</StepContent> |
||||
|
</Step> |
||||
|
|
||||
|
{/* DASHBOARD CHECK */} |
||||
|
<Step validated={!!device && !!deviceInfo} hasErrors={!!device && !!dashboardError}> |
||||
|
<StepContent> |
||||
|
<StepIcon> |
||||
|
<WrapperIconCurrency> |
||||
|
<IconHome size={12} /> |
||||
|
</WrapperIconCurrency> |
||||
|
</StepIcon> |
||||
|
<Box grow shrink> |
||||
|
<Trans i18nKey="deviceConnect:dashboard.open" parent="div"> |
||||
|
{'Go to the '} |
||||
|
<strong>{'dashboard'}</strong> |
||||
|
{' on your device'} |
||||
|
</Trans> |
||||
|
</Box> |
||||
|
<StepCheck checked={!!device && !!deviceInfo} hasErrors={!!device && !!dashboardError} /> |
||||
|
</StepContent> |
||||
|
</Step> |
||||
|
|
||||
|
{/* GENUINE CHECK */} |
||||
|
<Step |
||||
|
validated={(!!device && !isNull(isGenuine) && isGenuine) || undefined} |
||||
|
hasErrors={(!!device && !isNull(isGenuine) && !isGenuine) || undefined} |
||||
|
> |
||||
|
<StepContent> |
||||
|
<StepIcon> |
||||
|
<WrapperIconCurrency> |
||||
|
<IconCheck size={12} /> |
||||
|
</WrapperIconCurrency> |
||||
|
</StepIcon> |
||||
|
<Box grow shrink> |
||||
|
<Trans i18nKey="deviceConnect:stepGenuine.open" parent="div"> |
||||
|
{'Confirm '} |
||||
|
<strong>{'authentication'}</strong> |
||||
|
{' on your device'} |
||||
|
</Trans> |
||||
|
</Box> |
||||
|
<StepCheck |
||||
|
checked={(!!device && !isNull(isGenuine) && isGenuine) || undefined} |
||||
|
hasErrors={(!!device && !isNull(isGenuine) && !isGenuine) || undefined} |
||||
|
/> |
||||
|
</StepContent> |
||||
|
</Step> |
||||
|
</Box> |
||||
|
</Box> |
||||
|
) |
||||
|
|
||||
|
export default translate()(WorkflowDefault) |
||||
@ -0,0 +1,21 @@ |
|||||
|
tabs: |
||||
|
apps: Apps |
||||
|
device: My device |
||||
|
apps: |
||||
|
install: Install |
||||
|
all: Apps |
||||
|
help: To update an app, you have to uninstall the app and re install it. |
||||
|
firmware: |
||||
|
update: Update firmware |
||||
|
updateTitle: Firmware update |
||||
|
latest: A new firmware {{version}} is available |
||||
|
title: Manager |
||||
|
subtitle: Get all your apps here |
||||
|
device: |
||||
|
title: Plug your device |
||||
|
desc: Please connect your Ledger device and follow the steps below to access the manager |
||||
|
cta: Plug my device |
||||
|
errors: |
||||
|
noDevice: Please make sur your device is connected (TEMPLATE NEEDED) |
||||
|
noDashboard: Please make sure your device is on the dashboard screen (TEMPLATED NEEDED) |
||||
|
noGenuine: You did not approve request on your device or your device is not genuine (TEMPLATE NEEDED) |
||||
Loading…
Reference in new issue