Meriadec Pillet
7 years ago
committed by
GitHub
GitHub
32 changed files with 612 additions and 332 deletions
@ -0,0 +1,19 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import React from 'react' |
||||
|
import styled from 'styled-components' |
||||
|
|
||||
|
const TopGradientBox = styled.div` |
||||
|
width: 100%; |
||||
|
height: 80px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background: linear-gradient(#ffffff 40%, rgba(255, 255, 255, 0)); |
||||
|
z-index: 2; |
||||
|
pointer-events: none; |
||||
|
` |
||||
|
|
||||
|
const el = <TopGradientBox /> |
||||
|
|
||||
|
export default () => el |
||||
@ -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('app:manager.title')} |
||||
|
</Text> |
||||
|
<Text ff="Museo Sans|Light" fontSize={5}> |
||||
|
{t('app: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('app:manager.device.title')} |
||||
|
</Text> |
||||
|
<Text ff="Museo Sans|Light" fontSize={5} color="grey" align="center"> |
||||
|
{t('app: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,82 @@ |
|||||
|
// @flow
|
||||
|
import React, { Component } from 'react' |
||||
|
import styled, { keyframes } from 'styled-components' |
||||
|
|
||||
|
import Box from 'components/base/Box' |
||||
|
|
||||
|
const inifiteAnimation = keyframes` |
||||
|
0% { |
||||
|
left: 0 |
||||
|
} |
||||
|
100% { |
||||
|
left: 102% |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const fillInAnimation = keyframes` |
||||
|
0% { |
||||
|
transform: translate3d(-110%, 0, 0); |
||||
|
} |
||||
|
50% { |
||||
|
transform: translate3d(-30%, 0, 0); |
||||
|
} |
||||
|
100% { |
||||
|
transform: translate3d(0); |
||||
|
} |
||||
|
` |
||||
|
|
||||
|
const Bar = styled(Box).attrs({ |
||||
|
color: 'fog', |
||||
|
borderRadius: '2.5px', |
||||
|
})` |
||||
|
height: 5px; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
background-color: currentColor; |
||||
|
overflow: hidden; |
||||
|
` |
||||
|
|
||||
|
const Progression = styled(Bar).attrs({ |
||||
|
color: 'wallet', |
||||
|
})` |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
${p => |
||||
|
p.infinite |
||||
|
? ` |
||||
|
animation: 1000ms ${inifiteAnimation} ease-out infinite; |
||||
|
` |
||||
|
: ` |
||||
|
animation: ${p.timing}ms ${fillInAnimation} ease-out; |
||||
|
animation-fill-mode: forwards; |
||||
|
`};
|
||||
|
` |
||||
|
|
||||
|
type Props = { |
||||
|
infinite: boolean, |
||||
|
timing?: number, |
||||
|
color?: string, |
||||
|
} |
||||
|
|
||||
|
type State = {} |
||||
|
|
||||
|
class Progress extends Component<Props, State> { |
||||
|
static defaultProps = { |
||||
|
infinite: false, |
||||
|
timing: 3000, |
||||
|
color: 'wallet', |
||||
|
} |
||||
|
|
||||
|
render() { |
||||
|
const { infinite, color, timing } = this.props |
||||
|
const styles = infinite ? { width: '20%' } : { width: '100%' } |
||||
|
return ( |
||||
|
<Bar> |
||||
|
<Progression infinite={infinite} color={color} style={styles} timing={timing} /> |
||||
|
</Bar> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default Progress |
||||
@ -0,0 +1,15 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import db from 'helpers/db' |
||||
|
import uuid from 'uuid/v4' |
||||
|
|
||||
|
// a user is an anonymous way to identify a same instance of the app
|
||||
|
|
||||
|
export default () => { |
||||
|
let user = db.get('user') |
||||
|
if (!user) { |
||||
|
user = { id: uuid() } |
||||
|
db.set('user', user) |
||||
|
} |
||||
|
return user |
||||
|
} |
||||
@ -1,7 +0,0 @@ |
|||||
const { SENTRY_URL } = process.env |
|
||||
|
|
||||
if (__PROD__ && SENTRY_URL) { |
|
||||
const Raven = require('raven') |
|
||||
const ravenConfig = { captureUnhandledRejections: true } |
|
||||
Raven.config(SENTRY_URL, ravenConfig).install() |
|
||||
} |
|
||||
@ -0,0 +1,14 @@ |
|||||
|
import { ipcRenderer } from 'electron' |
||||
|
import { sentryLogsBooleanSelector } from 'reducers/settings' |
||||
|
|
||||
|
let isSentryInstalled = false |
||||
|
|
||||
|
export default store => next => action => { |
||||
|
next(action) |
||||
|
const state = store.getState() |
||||
|
const sentryLogs = sentryLogsBooleanSelector(state) |
||||
|
if (sentryLogs !== isSentryInstalled) { |
||||
|
isSentryInstalled = sentryLogs |
||||
|
ipcRenderer.send('sentryLogsChanged', { value: sentryLogs }) |
||||
|
} |
||||
|
} |
||||
@ -1,14 +1,3 @@ |
|||||
require('@babel/polyfill') |
require('@babel/polyfill') |
||||
|
|
||||
const Raven = require('raven-js') |
|
||||
|
|
||||
require('../env') |
require('../env') |
||||
|
|
||||
const { SENTRY_URL } = process.env |
|
||||
|
|
||||
if (__PROD__ && SENTRY_URL) { |
|
||||
Raven.config(SENTRY_URL, { allowSecretKey: true }).install() |
|
||||
window.addEventListener('unhandledrejection', event => Raven.captureException(event.reason)) |
|
||||
} |
|
||||
|
|
||||
require('./init') |
require('./init') |
||||
|
|||||
@ -0,0 +1,9 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import Raven from 'raven-js' |
||||
|
import user from 'helpers/user' |
||||
|
import install from './install' |
||||
|
|
||||
|
export default (shouldSendCallback: () => boolean) => { |
||||
|
install(Raven, shouldSendCallback, user().id) |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
require('../env') |
||||
|
|
||||
|
export default (Raven: any, shouldSendCallback: () => boolean, userId: string) => { |
||||
|
if (!__SENTRY_URL__) return |
||||
|
let r = Raven.config(__SENTRY_URL__, { |
||||
|
captureUnhandledRejections: true, |
||||
|
allowSecretKey: true, |
||||
|
release: __APP_VERSION__, |
||||
|
environment: __DEV__ ? 'development' : 'production', |
||||
|
shouldSendCallback, |
||||
|
}) |
||||
|
const user = { |
||||
|
ip_address: null, |
||||
|
id: userId, |
||||
|
} |
||||
|
if (r.setUserContext) { |
||||
|
r = r.setUserContext(user) |
||||
|
} else if (r.setContext) { |
||||
|
r = r.setContext({ user }) |
||||
|
} |
||||
|
r.install() |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
// @flow
|
||||
|
|
||||
|
import Raven from 'raven' |
||||
|
import install from './install' |
||||
|
|
||||
|
export default (shouldSendCallback: () => boolean, userId: string) => { |
||||
|
install(Raven, shouldSendCallback, userId) |
||||
|
} |
||||
Loading…
Reference in new issue