diff --git a/.circleci/config.yml b/.circleci/config.yml index d59dd776..76ffd7d2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -20,7 +20,7 @@ jobs: command: yarn flow-typed - run: name: Temporary remove broken flow definitions - command: rm flow-typed/npm/{react-redux_v5.x.x.js,redux_v3.x.x.js} + command: rm flow-typed/npm/{react-i18next_v7.x.x.js,react-redux_v5.x.x.js,redux_v3.x.x.js} - run: name: Lint command: yarn lint diff --git a/package.json b/package.json index 8cd02752..c3543e6c 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "eslint-config-prettier": "^2.9.0", "eslint-import-resolver-babel-module": "^5.0.0-beta.0", "eslint-plugin-flowtype": "^2.46.0", - "eslint-plugin-import": "^2.10.0", + "eslint-plugin-import": "^2.11.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.7.0", "flow-bin": "^0.69.0", @@ -140,7 +140,7 @@ "js-yaml": "^3.10.0", "lint-staged": "^7.0.4", "node-loader": "^0.6.0", - "prettier": "^1.11.1", + "prettier": "^1.12.0", "react-hot-loader": "^4.0.1", "react-test-renderer": "^16.3.1", "webpack": "^4.5.0", diff --git a/src/actions/accounts.js b/src/actions/accounts.js index 192d3920..679f7aac 100644 --- a/src/actions/accounts.js +++ b/src/actions/accounts.js @@ -43,7 +43,10 @@ export const updateOrderAccounts: UpdateOrderAccounts = (orderAccounts: string) export type AddAccount = Account => (Function, Function) => void export const addAccount: AddAccount = payload => (dispatch, getState) => { - const { settings: { counterValue, orderAccounts }, accounts } = getState() + const { + settings: { counterValue, orderAccounts }, + accounts, + } = getState() dispatch({ type: 'ADD_ACCOUNT', payload }) dispatch(updateOrderAccounts(orderAccounts)) @@ -63,7 +66,9 @@ export const removeAccount: RemoveAccount = payload => ({ export type FetchAccounts = () => (Function, Function) => Promise<*, *> export const fetchAccounts: FetchAccounts = () => (dispatch, getState) => { - const { settings: { orderAccounts } } = getState() + const { + settings: { orderAccounts }, + } = getState() const accounts = db.get('accounts') dispatch({ type: 'SET_ACCOUNTS', @@ -74,7 +79,9 @@ export const fetchAccounts: FetchAccounts = () => (dispatch, getState) => { export type UpdateAccount = Account => (Function, Function) => void export const updateAccount: UpdateAccount = payload => (dispatch, getState) => { - const { settings: { orderAccounts } } = getState() + const { + settings: { orderAccounts }, + } = getState() dispatch({ type: 'UPDATE_ACCOUNT', payload, diff --git a/src/components/AccountPage/index.js b/src/components/AccountPage/index.js index 8615d921..b2e05625 100644 --- a/src/components/AccountPage/index.js +++ b/src/components/AccountPage/index.js @@ -1,11 +1,14 @@ // @flow import React, { PureComponent } from 'react' +import { ipcRenderer } from 'electron' import { compose } from 'redux' import { connect } from 'react-redux' import { translate } from 'react-i18next' import { Redirect } from 'react-router' import styled from 'styled-components' +import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies' + import type { Account } from '@ledgerhq/wallet-common/lib/types' import { MODAL_SEND, MODAL_RECEIVE, MODAL_SETTINGS_ACCOUNT } from 'config/constants' @@ -75,6 +78,29 @@ class AccountPage extends PureComponent { daysCount: 7, } + handleCalculateBalance = data => { + const { counterValue, account } = this.props + + if (!account) { + return + } + + if (process.platform === 'darwin') { + ipcRenderer.send('touch-bar-update', { + text: account.name, + color: account.currency.color, + balance: { + currency: formatCurrencyUnit(account.unit, account.balance, { + showCode: true, + }), + counterValue: formatCurrencyUnit(getFiatUnit(counterValue), data.totalBalance, { + showCode: true, + }), + }, + }) + } + } + handleChangeSelectedTime = item => this.setState({ selectedTime: item.key, @@ -116,12 +142,13 @@ class AccountPage extends PureComponent { ( diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js index 495ba4e1..2e88f892 100644 --- a/src/components/BalanceSummary/index.js +++ b/src/components/BalanceSummary/index.js @@ -10,6 +10,7 @@ import CalculateBalance from 'components/CalculateBalance' import FormattedVal from 'components/base/FormattedVal' type Props = { + onCalculate: Function, counterValue: string, chartColor: string, chartId: string, @@ -20,21 +21,23 @@ type Props = { } const BalanceSummary = ({ - counterValue, + accounts, chartColor, chartId, - accounts, - selectedTime, + counterValue, daysCount, + onCalculate, renderHeader, + selectedTime, }: Props) => { const unit = getFiatUnit(counterValue) return ( ( {renderHeader !== null && ( diff --git a/src/components/CalculateBalance.js b/src/components/CalculateBalance.js index a579dc38..3698c2b4 100644 --- a/src/components/CalculateBalance.js +++ b/src/components/CalculateBalance.js @@ -2,6 +2,9 @@ import { PureComponent } from 'react' import { connect } from 'react-redux' + +import noop from 'lodash/noop' + import type { Account } from '@ledgerhq/wallet-common/lib/types' import calculateBalance from 'helpers/balance' @@ -14,6 +17,7 @@ type Props = { accounts: Account[], counterValues: Object, daysCount: number, + onCalculate: Function, render: Function, } @@ -33,14 +37,26 @@ function calculateBalanceToState(props: Object) { } class CalculateBalance extends PureComponent { - state = calculateBalanceToState(this.props) + static defaultProps = { + onCalculate: noop, + } + + constructor(props) { + super(props) + + const state = calculateBalanceToState(props) + props.onCalculate(state) + this.state = state + } componentWillReceiveProps(nextProps) { const sameAccounts = this.props.accounts === nextProps.accounts const sameCounterValues = this.props.counterValues === nextProps.counterValues const sameDaysCount = this.props.daysCount === nextProps.daysCount if (!sameAccounts || !sameCounterValues || !sameDaysCount) { - this.setState(calculateBalanceToState(nextProps)) + const state = calculateBalanceToState(nextProps) + nextProps.onCalculate(state) + this.setState(state) } } diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index d1388651..443f1101 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -1,16 +1,21 @@ // @flow import React, { PureComponent, Fragment } from 'react' +import { ipcRenderer } from 'electron' import { compose } from 'redux' import { translate } from 'react-i18next' import { connect } from 'react-redux' import { push } from 'react-router-redux' +import { formatCurrencyUnit, getFiatUnit } from '@ledgerhq/currencies' + import type { Account } from '@ledgerhq/wallet-common/lib/types' import chunk from 'lodash/chunk' import type { T } from 'types/common' +import { colors } from 'styles/theme' + import { getVisibleAccounts } from 'reducers/accounts' import { getCounterValueCode } from 'reducers/settings' @@ -77,12 +82,32 @@ class DashboardPage extends PureComponent { } } + handleCalculateBalance = data => { + const { counterValue } = this.props + + if (process.platform === 'darwin' && this._cacheBalance !== data.totalBalance) { + this._cacheBalance = data.totalBalance + + ipcRenderer.send('touch-bar-update', { + text: 'Total balance', + color: colors.wallet, + balance: { + counterValue: formatCurrencyUnit(getFiatUnit(counterValue), data.totalBalance, { + showCode: true, + }), + }, + }) + } + } + handleChangeSelectedTime = item => this.setState({ selectedTime: item.key, daysCount: item.value, }) + _cacheBalance = null + render() { const { push, accounts, t, counterValue } = this.props const { accountsChunk, selectedTime, daysCount } = this.state @@ -109,9 +134,10 @@ class DashboardPage extends PureComponent { {totalAccounts > 0 && ( p.validated ? p.theme.colors.wallet - : p.hasErrors ? p.theme.colors.alertRed : p.theme.colors.fog}; + : p.hasErrors + ? p.theme.colors.alertRed + : p.theme.colors.fog}; ` const StepIcon = styled(Box).attrs({ alignItems: 'center', diff --git a/src/components/ManagerPage/index.js b/src/components/ManagerPage/index.js index d9b4fdbe..35c00828 100644 --- a/src/components/ManagerPage/index.js +++ b/src/components/ManagerPage/index.js @@ -83,7 +83,9 @@ class ManagerPage extends PureComponent { this.setState({ status: 'busy' }) try { const { job, successResponse, errorResponse } = options - const { device: { path: devicePath } } = this.props + const { + device: { path: devicePath }, + } = this.props const data = { appParams, devicePath } await runJob({ channel: 'usb', job, successResponse, errorResponse, data }) this.setState({ status: 'success' }) diff --git a/src/components/OperationsList/index.js b/src/components/OperationsList/index.js index 65561511..f604a8ab 100644 --- a/src/components/OperationsList/index.js +++ b/src/components/OperationsList/index.js @@ -293,7 +293,7 @@ export class OperationsList extends PureComponent { } return ( { isVerified:{' '} {isVerified === null ? 'not yet...' - : isVerified === true ? 'ok!' : '/!\\ contact support'} + : isVerified === true + ? 'ok!' + : '/!\\ contact support'} diff --git a/src/components/RecipientAddress/index.js b/src/components/RecipientAddress/index.js index 5e7779d7..145c5e1a 100644 --- a/src/components/RecipientAddress/index.js +++ b/src/components/RecipientAddress/index.js @@ -28,6 +28,7 @@ const WrapperQrCode = styled(Box)` position: absolute; right: 0; top: 100%; + z-index: 2; ` type Props = { diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js index e270f2af..94fb387f 100644 --- a/src/components/SideBar/Item.js +++ b/src/components/SideBar/Item.js @@ -85,8 +85,12 @@ function Item({ isActive={isActive} onClick={ linkTo - ? isActive ? undefined : () => push(linkTo) - : modal ? () => openModal(modal) : void 0 + ? isActive + ? undefined + : () => push(linkTo) + : modal + ? () => openModal(modal) + : void 0 } > {icon && {icon}} diff --git a/src/components/TopBar.js b/src/components/TopBar.js index 7e218e66..990c8a91 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -52,7 +52,9 @@ const Activity = styled.div` background: ${p => p.progress === true ? p.theme.colors.wallet - : p.fail === true ? p.theme.colors.alertRed : p.theme.colors.positiveGreen}; + : p.fail === true + ? p.theme.colors.alertRed + : p.theme.colors.positiveGreen}; border-radius: 50%; bottom: 20px; height: 4px; diff --git a/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap b/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap index 07a9dd35..6efadc81 100644 --- a/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap +++ b/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap @@ -47,8 +47,8 @@ exports[`components FormattedVal shows sign 1`] = ` exports[`components FormattedVal shows sign 2`] = ` - 4 diff --git a/src/components/base/GrowScroll/index.js b/src/components/base/GrowScroll/index.js index 0e69235d..7c651c1b 100644 --- a/src/components/base/GrowScroll/index.js +++ b/src/components/base/GrowScroll/index.js @@ -32,16 +32,16 @@ class GrowScroll extends PureComponent { } } - componentWillReceiveProps(nextProps: Props) { - this.handleUpdate(nextProps) - } - componentWillUnmount() { if (this._scrollbar) { this._scrollbar.removeListener(this.props.onScroll) } } + componenDidUpdate() { + this.handleUpdate(this.props) + } + handleUpdate = (props: Props) => { if (this._scrollbar) { props.onUpdate(this._scrollbar) diff --git a/src/components/base/Search/index.js b/src/components/base/Search/index.js index d8927ccf..31b956b0 100644 --- a/src/components/base/Search/index.js +++ b/src/components/base/Search/index.js @@ -39,18 +39,18 @@ class Search extends PureComponent { this.initFuse(this.props) } - componentWillReceiveProps(nextProps: Props) { - if (nextProps.value !== this.props.value) { + componentDidUpdate(prevProps: Props) { + if (prevProps.value !== this.props.value) { if (this._fuse) { - const results = this._fuse.search(nextProps.value) - this.formatResults(results, nextProps) + const results = this._fuse.search(this.props.value) + this.formatResults(results, this.props) } } - if (nextProps.highlight !== this.props.highlight) { - this.initFuse(nextProps) + if (prevProps.highlight !== this.props.highlight) { + this.initFuse(this.props) } - if (nextProps.items !== this.props.items) { - this.initFuse(nextProps) + if (prevProps.items !== this.props.items) { + this.initFuse(this.props) } } diff --git a/src/components/base/Tabs/index.js b/src/components/base/Tabs/index.js index ee0869d6..f2db1445 100644 --- a/src/components/base/Tabs/index.js +++ b/src/components/base/Tabs/index.js @@ -25,7 +25,9 @@ const Tab = styled(Tabbable).attrs({ color: ${p => p.isActive ? p.theme.colors.wallet - : p.isDisabled ? p.theme.colors.grey : p.theme.colors.graphite}; + : p.isDisabled + ? p.theme.colors.grey + : p.theme.colors.graphite}; margin-bottom: -1px; outline: none; cursor: ${p => (p.isActive ? 'default' : p.isDisabled ? 'not-allowed' : 'pointer')}; diff --git a/src/components/layout/Default.js b/src/components/layout/Default.js index 2bcf6560..59020cc7 100644 --- a/src/components/layout/Default.js +++ b/src/components/layout/Default.js @@ -2,6 +2,7 @@ import React, { Fragment, Component } from 'react' import { compose } from 'redux' +import { ipcRenderer } from 'electron' import styled from 'styled-components' import { Route, withRouter } from 'react-router' import { translate } from 'react-i18next' @@ -37,6 +38,12 @@ class Default extends Component { window.requestAnimationFrame(() => (this._timeout = setTimeout(() => window.onAppReady(), 300))) } + componentWillReceiveProps(nextProps: Props) { + if (process.platform === 'darwin' && nextProps.location !== this.props.location) { + ipcRenderer.send('touch-bar-update', { clear: true }) + } + } + componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { if (this._scrollContainer) { diff --git a/src/components/modals/Send/index.js b/src/components/modals/Send/index.js index 8d7623a9..d74be19c 100644 --- a/src/components/modals/Send/index.js +++ b/src/components/modals/Send/index.js @@ -140,7 +140,7 @@ class SendModal extends PureComponent { {t('send:title')} - + {this.renderStep(acc)} {acc && ( diff --git a/src/helpers/balance.js b/src/helpers/balance.js index 340c5be2..cd12724a 100644 --- a/src/helpers/balance.js +++ b/src/helpers/balance.js @@ -135,7 +135,9 @@ export function getBalanceHistoryForAccounts({ } return { ...item, balance: b } }) - : balances.length > 0 ? balances[0] : [] + : balances.length > 0 + ? balances[0] + : [] } export default function calculateBalance(props: CalculateBalance) { diff --git a/src/helpers/staticPath.js b/src/helpers/staticPath.js index 102fe5a7..d8e7a3f8 100644 --- a/src/helpers/staticPath.js +++ b/src/helpers/staticPath.js @@ -7,4 +7,6 @@ export default (__DEV__ && !STORYBOOK_ENV && NODE_ENV !== 'test' ? __static : isRunningInAsar ? __dirname.replace(/app\.asar$/, 'static') - : !STORYBOOK_ENV ? `${__dirname}/../../static` : 'static') + : !STORYBOOK_ENV + ? `${__dirname}/../../static` + : 'static') diff --git a/src/index.ejs b/src/index.ejs index db8f5c25..c429954a 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -45,7 +45,8 @@