From 039ebf8158707982b2759e02fb7956a3bbca8c46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Tue, 29 May 2018 13:08:20 +0200
Subject: [PATCH] remove fiat prop of FormattedVal
---
src/components/AccountPage/index.js | 49 ++-----------------
src/components/BalanceSummary/BalanceInfos.js | 17 +++----
src/components/BalanceSummary/index.js | 19 ++-----
src/components/CounterValue/index.js | 2 +-
src/components/DashboardPage/AccountCard.js | 12 ++---
src/components/DashboardPage/index.js | 40 ++-------------
src/components/base/Chart/Tooltip.js | 6 ++-
.../base/Chart/handleMouseEvents.js | 9 +++-
.../__tests__/FormattedVal.test.js | 6 ---
.../__snapshots__/FormattedVal.test.js.snap | 9 ----
src/components/base/FormattedVal/index.js | 35 ++++---------
.../modals/AddAccount/03-step-import.js | 2 +-
12 files changed, 49 insertions(+), 157 deletions(-)
diff --git a/src/components/AccountPage/index.js b/src/components/AccountPage/index.js
index cdda36cb..f972c9f7 100644
--- a/src/components/AccountPage/index.js
+++ b/src/components/AccountPage/index.js
@@ -1,18 +1,12 @@
// @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,
- getFiatCurrencyByTicker,
-} from '@ledgerhq/live-common/lib/helpers/currencies'
-
-import type { Account } from '@ledgerhq/live-common/lib/types'
+import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
import { MODAL_SEND, MODAL_RECEIVE, MODAL_SETTINGS_ACCOUNT } from 'config/constants'
@@ -21,7 +15,7 @@ import type { T } from 'types/common'
import { darken } from 'styles/helpers'
import { getAccountById } from 'reducers/accounts'
-import { getCounterValueCode, localeSelector } from 'reducers/settings'
+import { counterValueCurrencySelector, localeSelector } from 'reducers/settings'
import { openModal } from 'reducers/modals'
import IconControls from 'icons/Controls'
@@ -56,7 +50,7 @@ const ButtonSettings = styled(Button).attrs({
const mapStateToProps = (state, props) => ({
account: getAccountById(state, props.match.params.id),
- counterValue: getCounterValueCode(state),
+ counterValue: counterValueCurrencySelector(state),
settings: localeSelector(state),
})
@@ -65,11 +59,10 @@ const mapDispatchToProps = {
}
type Props = {
- counterValue: string,
+ counterValue: Currency,
t: T,
account?: Account,
openModal: Function,
- locale: string,
}
type State = {
@@ -83,37 +76,6 @@ class AccountPage extends PureComponent<Props, State> {
daysCount: 7,
}
- handleCalculateBalance = data => {
- const { counterValue, account, locale } = this.props
-
- if (!account) {
- return
- }
-
- if (process.platform === 'darwin' && this._cacheBalance !== data.totalBalance) {
- this._cacheBalance = data.totalBalance
-
- ipcRenderer.send('touch-bar-update', {
- text: account.name,
- color: account.currency.color,
- balance: {
- currency: formatCurrencyUnit(account.unit, account.balance, {
- showCode: true,
- locale,
- }),
- counterValue: formatCurrencyUnit(
- getFiatCurrencyByTicker(counterValue).units[0],
- data.totalBalance,
- {
- showCode: true,
- locale,
- },
- ),
- },
- })
- }
- }
-
handleChangeSelectedTime = item =>
this.setState({
selectedTime: item.key,
@@ -163,7 +125,6 @@ class AccountPage extends PureComponent<Props, State> {
chartId={`account-chart-${account.id}`}
counterValue={counterValue}
daysCount={daysCount}
- onCalculate={this.handleCalculateBalance}
selectedTime={selectedTime}
renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
<Box flow={4} mb={2}>
@@ -173,7 +134,7 @@ class AccountPage extends PureComponent<Props, State> {
animateTicker
alwaysShowSign={false}
color="warmGrey"
- fiat={counterValue}
+ unit={counterValue.units[0]}
fontSize={6}
showCode
val={totalBalance}
diff --git a/src/components/BalanceSummary/BalanceInfos.js b/src/components/BalanceSummary/BalanceInfos.js
index 99463c2a..bcf29524 100644
--- a/src/components/BalanceSummary/BalanceInfos.js
+++ b/src/components/BalanceSummary/BalanceInfos.js
@@ -3,7 +3,7 @@
import React from 'react'
import styled from 'styled-components'
-import type { Unit } from '@ledgerhq/live-common/lib/types'
+import type { Unit, Currency } from '@ledgerhq/live-common/lib/types'
import type { T } from 'types/common'
import Box from 'components/base/Box'
@@ -27,13 +27,12 @@ type BalanceSinceProps = {
type BalanceTotalProps = {
children?: any,
- counterValue?: string,
+ unit: Unit,
totalBalance: number,
- unit?: Unit,
}
type Props = {
- counterValue: string,
+ counterValue: Currency,
} & BalanceSinceProps
export function BalanceSincePercent(props: BalanceSinceProps) {
@@ -60,7 +59,7 @@ export function BalanceSinceDiff(props: Props) {
<FormattedVal
color="dark"
animateTicker
- fiat={counterValue}
+ unit={counterValue.units[0]}
fontSize={7}
showCode
val={totalBalance - sinceBalance}
@@ -72,16 +71,15 @@ export function BalanceSinceDiff(props: Props) {
}
export function BalanceTotal(props: BalanceTotalProps) {
- const { counterValue, totalBalance, children, unit } = props
+ const { unit, totalBalance, children } = props
return (
<Box grow {...props}>
<FormattedVal
animateTicker
color="dark"
- fiat={counterValue}
+ unit={unit}
fontSize={8}
showCode
- unit={unit}
val={totalBalance}
/>
{children}
@@ -90,7 +88,6 @@ export function BalanceTotal(props: BalanceTotalProps) {
}
BalanceTotal.defaultProps = {
- counterValue: undefined,
children: null,
unit: undefined,
}
@@ -99,7 +96,7 @@ function BalanceInfos(props: Props) {
const { t, totalBalance, since, sinceBalance, refBalance, counterValue } = props
return (
<Box horizontal alignItems="center" flow={7}>
- <BalanceTotal counterValue={counterValue} totalBalance={totalBalance}>
+ <BalanceTotal unit={counterValue.units[0]} totalBalance={totalBalance}>
<Sub>{t('dashboard:totalBalance')}</Sub>
</BalanceTotal>
<BalanceSincePercent
diff --git a/src/components/BalanceSummary/index.js b/src/components/BalanceSummary/index.js
index 0a032cf3..be091a8f 100644
--- a/src/components/BalanceSummary/index.js
+++ b/src/components/BalanceSummary/index.js
@@ -1,8 +1,7 @@
// @flow
import React, { Fragment } from 'react'
-import type { Account } from '@ledgerhq/live-common/lib/types'
-import { getFiatCurrencyByTicker } from '@ledgerhq/live-common/lib/helpers/currencies'
+import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
import Chart from 'components/base/Chart'
import Box, { Card } from 'components/base/Box'
@@ -10,8 +9,7 @@ import CalculateBalance from 'components/CalculateBalance'
import FormattedVal from 'components/base/FormattedVal'
type Props = {
- onCalculate: Function,
- counterValue: string,
+ counterValue: Currency,
chartColor: string,
chartId: string,
accounts: Account[],
@@ -31,20 +29,13 @@ const BalanceSummary = ({
chartId,
counterValue,
daysCount,
- onCalculate,
renderHeader,
selectedTime,
}: Props) => {
- const currency = getFiatCurrencyByTicker(counterValue)
const account = accounts.length === 1 ? accounts[0] : undefined
return (
<Card p={0} py={6}>
- <CalculateBalance
- accounts={accounts}
- counterValue={counterValue}
- daysCount={daysCount}
- onCalculate={onCalculate}
- >
+ <CalculateBalance accounts={accounts} daysCount={daysCount}>
{({ isAvailable, balanceHistory, balanceStart, balanceEnd }) =>
!isAvailable ? null : (
<Fragment>
@@ -66,7 +57,7 @@ const BalanceSummary = ({
color={chartColor}
data={balanceHistory}
height={250}
- currency={currency}
+ currency={counterValue}
tickXScale={selectedTime}
renderTooltip={
isAvailable && !account
@@ -77,7 +68,7 @@ const BalanceSummary = ({
fontSize={5}
color="dark"
showCode
- fiat={counterValue}
+ unit={counterValue.units[0]}
val={d.value}
/>
<Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
diff --git a/src/components/CounterValue/index.js b/src/components/CounterValue/index.js
index 1874ee01..16f4b08b 100644
--- a/src/components/CounterValue/index.js
+++ b/src/components/CounterValue/index.js
@@ -55,7 +55,7 @@ class CounterValue extends PureComponent<Props> {
return (
<FormattedVal
val={value}
- fiat={counterValueCurrency.units[0].code}
+ unit={counterValueCurrency.units[0]}
showCode
alwaysShowSign
{...props}
diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index 62f6d608..0805632f 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -3,7 +3,7 @@
import React from 'react'
import styled from 'styled-components'
-import type { Account } from '@ledgerhq/live-common/lib/types'
+import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
import Chart from 'components/base/Chart'
import Bar from 'components/base/Bar'
@@ -27,9 +27,9 @@ const AccountCard = ({
daysCount,
...props
}: {
- counterValue: string,
+ counterValue: Currency,
account: Account,
- onClick?: Function,
+ onClick?: () => void,
daysCount: number,
}) => (
<Wrapper onClick={onClick} {...props}>
@@ -66,7 +66,7 @@ const AccountCard = ({
{isAvailable ? (
<FormattedVal
animateTicker
- fiat={counterValue}
+ unit={counterValue.units[0]}
val={balanceEnd}
alwaysShowSign={false}
showCode
@@ -96,8 +96,4 @@ const AccountCard = ({
</Wrapper>
)
-AccountCard.defaultProps = {
- onClick: undefined,
-}
-
export default AccountCard
diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index aec0c8a3..d2894086 100644
--- a/src/components/DashboardPage/index.js
+++ b/src/components/DashboardPage/index.js
@@ -1,25 +1,19 @@
// @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 chunk from 'lodash/chunk'
-import {
- formatCurrencyUnit,
- getFiatCurrencyByTicker,
-} from '@ledgerhq/live-common/lib/helpers/currencies'
-
-import type { Account } from '@ledgerhq/live-common/lib/types'
+import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
import type { T } from 'types/common'
import { colors } from 'styles/theme'
import { getVisibleAccounts } from 'reducers/accounts'
-import { getCounterValueCode, localeSelector } from 'reducers/settings'
+import { counterValueCurrencySelector, localeSelector } from 'reducers/settings'
import { updateOrderAccounts } from 'actions/accounts'
import { saveSettings } from 'actions/settings'
@@ -37,7 +31,7 @@ import AccountsOrder from './AccountsOrder'
const mapStateToProps = state => ({
accounts: getVisibleAccounts(state),
- counterValue: getCounterValueCode(state),
+ counterValue: counterValueCurrencySelector(state),
locale: localeSelector(state),
})
@@ -51,8 +45,7 @@ type Props = {
t: T,
accounts: Account[],
push: Function,
- counterValue: string,
- locale: string,
+ counterValue: Currency,
}
type State = {
@@ -87,30 +80,6 @@ class DashboardPage extends PureComponent<Props, State> {
}
}
- handleCalculateBalance = data => {
- const { counterValue, locale } = this.props
-
- if (process.platform === 'darwin' && this._cacheBalance !== data.totalBalance) {
- this._cacheBalance = data.totalBalance
-
- // TODO abstract this out in a component
- ipcRenderer.send('touch-bar-update', {
- text: 'Total balance',
- color: colors.wallet,
- balance: {
- counterValue: formatCurrencyUnit(
- getFiatCurrencyByTicker(counterValue).units[0],
- data.totalBalance,
- {
- showCode: true,
- locale,
- },
- ),
- },
- })
- }
- }
-
handleGreeting = () => {
const localTimeHour = new Date().getHours()
const afternoon_breakpoint = 12
@@ -159,7 +128,6 @@ class DashboardPage extends PureComponent<Props, State> {
{totalAccounts > 0 && (
<Fragment>
<BalanceSummary
- onCalculate={this.handleCalculateBalance}
counterValue={counterValue}
chartId="dashboard-chart"
chartColor={colors.wallet}
diff --git a/src/components/base/Chart/Tooltip.js b/src/components/base/Chart/Tooltip.js
index ef97bc25..2ccbdbec 100644
--- a/src/components/base/Chart/Tooltip.js
+++ b/src/components/base/Chart/Tooltip.js
@@ -3,7 +3,7 @@
import React, { Fragment } from 'react'
import styled from 'styled-components'
-import type { Account } from '@ledgerhq/live-common/lib/types'
+import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
import FormattedVal from 'components/base/FormattedVal'
import Box from 'components/base/Box'
@@ -26,10 +26,12 @@ const Tooltip = ({
item,
renderTooltip,
account,
+ counterValue,
}: {
item: Item,
renderTooltip?: Function,
account?: Account,
+ counterValue: Currency,
}) => (
<div style={{ position: 'relative' }}>
<div
@@ -52,7 +54,7 @@ const Tooltip = ({
fontSize={5}
alwaysShowSign={false}
showCode
- fiat="USD"
+ unit={counterValue.units[0]}
val={item.value}
/>
{account && (
diff --git a/src/components/base/Chart/handleMouseEvents.js b/src/components/base/Chart/handleMouseEvents.js
index 9809b066..bf5a918a 100644
--- a/src/components/base/Chart/handleMouseEvents.js
+++ b/src/components/base/Chart/handleMouseEvents.js
@@ -5,6 +5,7 @@ import * as d3 from 'd3'
import { renderToString } from 'react-dom/server'
import { ThemeProvider } from 'styled-components'
import { Provider } from 'react-redux'
+import { getFiatCurrencyByTicker } from '@ledgerhq/live-common/lib/helpers/currencies'
import createStore from 'renderer/createStore'
@@ -89,9 +90,15 @@ export default function handleMouseEvents({
NODES.tooltip
.html(
renderToString(
+ // FIXME :o why is this not in React tree. maybe use a portal (native in React now)
<Provider store={createStore({})}>
<ThemeProvider theme={theme}>
- <Tooltip account={account} renderTooltip={renderTooltip} item={d.ref} />
+ <Tooltip
+ account={account}
+ renderTooltip={renderTooltip}
+ item={d.ref}
+ counterValue={getFiatCurrencyByTicker('USD')}
+ />
</ThemeProvider>
</Provider>,
),
diff --git a/src/components/base/FormattedVal/__tests__/FormattedVal.test.js b/src/components/base/FormattedVal/__tests__/FormattedVal.test.js
index a3fbf606..7748a7aa 100644
--- a/src/components/base/FormattedVal/__tests__/FormattedVal.test.js
+++ b/src/components/base/FormattedVal/__tests__/FormattedVal.test.js
@@ -35,11 +35,5 @@ describe('components', () => {
const tree = render(component)
expect(tree).toMatchSnapshot()
})
-
- it('renders a fiat', () => {
- const component = <FormattedVal fiat="USD" val={2000} />
- const tree = render(component)
- expect(tree).toMatchSnapshot()
- })
})
})
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 66a34cff..45d28048 100644
--- a/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap
+++ b/src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap
@@ -1,14 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`components FormattedVal renders a fiat 1`] = `
-<div
- className="k45ou1-0 iqaJGf e345n3-0 eoitYS"
- color="#66be54"
->
- 20.00
-</div>
-`;
-
exports[`components FormattedVal renders a formatted val 1`] = `
<div
className="k45ou1-0 iqaJGf e345n3-0 eoitYS"
diff --git a/src/components/base/FormattedVal/index.js b/src/components/base/FormattedVal/index.js
index a89183a7..8769e36d 100644
--- a/src/components/base/FormattedVal/index.js
+++ b/src/components/base/FormattedVal/index.js
@@ -9,10 +9,7 @@ import isUndefined from 'lodash/isUndefined'
import type { Unit } from '@ledgerhq/live-common/lib/types'
import type { State } from 'reducers'
-import {
- formatCurrencyUnit,
- findCurrencyByTicker,
-} from '@ledgerhq/live-common/lib/helpers/currencies'
+import { formatCurrencyUnit } from '@ledgerhq/live-common/lib/helpers/currencies'
import { marketIndicatorSelector, localeSelector } from 'reducers/settings'
@@ -42,16 +39,15 @@ I.defaultProps = {
}
type OwnProps = {
+ unit?: Unit,
+ val: number,
alwaysShowSign?: boolean,
- animateTicker?: boolean,
+ showCode?: boolean,
+ withIcon?: boolean,
color?: string,
+ animateTicker?: boolean,
disableRounding?: boolean,
- fiat?: string,
isPercent?: boolean,
- showCode?: boolean,
- unit?: Unit,
- val: number,
- withIcon?: boolean,
}
const mapStateToProps = (state: State, _props: OwnProps) => ({
@@ -64,13 +60,11 @@ type Props = OwnProps & {
locale: string,
}
-let _logged
-
function FormattedVal(props: Props) {
const {
animateTicker,
disableRounding,
- fiat,
+ unit,
isPercent,
alwaysShowSign,
showCode,
@@ -80,7 +74,7 @@ function FormattedVal(props: Props) {
color,
...p
} = props
- let { val, unit } = props
+ let { val } = props
if (isUndefined(val)) {
throw new Error('FormattedVal require a `val` prop. Received `undefined`')
@@ -91,20 +85,11 @@ function FormattedVal(props: Props) {
let text = ''
if (isPercent) {
+ // FIXME move out the % feature of this component... totally unrelated to currency & annoying for flow type.
text = `${alwaysShowSign ? (isNegative ? '- ' : '+ ') : ''}${isNegative ? val * -1 : val} %`
} else {
- if (fiat) {
- if (!_logged) {
- _logged = true
- console.warn('FormattedVal: passing fiat prop is deprecated')
- }
- const cur = findCurrencyByTicker(fiat)
- if (cur) {
- ;[unit] = cur.units
- }
- }
if (!unit) {
- return ''
+ throw new Error('FormattedVal require a `unit` prop. Received `undefined`')
}
if (withIcon && isNegative) {
diff --git a/src/components/modals/AddAccount/03-step-import.js b/src/components/modals/AddAccount/03-step-import.js
index 05482527..8821aaed 100644
--- a/src/components/modals/AddAccount/03-step-import.js
+++ b/src/components/modals/AddAccount/03-step-import.js
@@ -38,7 +38,7 @@ function StepImport(props: Props) {
color="warmGrey"
fontSize={6}
showCode
- fiat={account.currency.ticker}
+ unit={account.currency.units[0]}
val={account.balance}
/>
</Box>