lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

initial version of a Placeholder for when no countervalues loaded yet

master
Gaëtan Renaudeau 7 years ago
parent
9368fd31f9
commit
93cc431a24
7 changed files with 141 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/components/AccountPage/index.js
  2. 95
      src/components/BalanceSummary/BalanceInfos.js
  3. 95
      src/components/BalanceSummary/index.js
  4. 9
      src/components/DashboardPage/index.js
  5. 9
      src/components/Placeholder.js
  6. 4
      src/config/constants.js
  7. 3
      src/helpers/countervalues.js

10
src/components/AccountPage/index.js
View File

@ -148,10 +148,14 @@ class AccountPage extends PureComponent<Props> {
counterValue={counterValue}
daysCount={daysCount}
selectedTimeRange={selectedTimeRange}
renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
renderHeader={({ isAvailable, totalBalance, sinceBalance, refBalance }) => (
<Box flow={4} mb={2}>
<Box horizontal>
<BalanceTotal totalBalance={account.balance} unit={account.unit}>
<BalanceTotal
isAvailable={isAvailable}
totalBalance={account.balance}
unit={account.unit}
>
<FormattedVal
animateTicker
alwaysShowSign={false}
@ -171,6 +175,7 @@ class AccountPage extends PureComponent<Props> {
</Box>
<Box horizontal justifyContent="center" flow={7}>
<BalanceSincePercent
isAvailable={isAvailable}
t={t}
alignItems="center"
totalBalance={totalBalance}
@ -179,6 +184,7 @@ class AccountPage extends PureComponent<Props> {
since={selectedTimeRange}
/>
<BalanceSinceDiff
isAvailable={isAvailable}
t={t}
counterValue={counterValue}
alignItems="center"

95
src/components/BalanceSummary/BalanceInfos.js
View File

@ -9,6 +9,7 @@ import type { T } from 'types/common'
import Box from 'components/base/Box'
import FormattedVal from 'components/base/FormattedVal'
import DeltaChange from '../DeltaChange'
import { PlaceholderLine } from '../Placeholder'
const Sub = styled(Box).attrs({
ff: 'Open Sans',
@ -22,12 +23,14 @@ type BalanceSinceProps = {
totalBalance: number,
sinceBalance: number,
refBalance: number,
isAvailable: boolean,
t: T,
}
type BalanceTotalProps = {
children?: any,
unit: Unit,
isAvailable: boolean,
totalBalance: number,
}
@ -36,53 +39,73 @@ type Props = {
} & BalanceSinceProps
export function BalanceSincePercent(props: BalanceSinceProps) {
const { t, totalBalance, sinceBalance, refBalance, since, ...otherProps } = props
const { t, totalBalance, sinceBalance, refBalance, since, isAvailable, ...otherProps } = props
return (
<Box {...otherProps}>
<DeltaChange
from={refBalance}
to={totalBalance}
color="dark"
animateTicker
fontSize={7}
withIcon
/>
<Sub>{t(`app:time.since.${since}`)}</Sub>
{!isAvailable ? (
<PlaceholderLine width={100} />
) : (
<DeltaChange
from={refBalance}
to={totalBalance}
color="dark"
animateTicker
fontSize={7}
withIcon
/>
)}
{!isAvailable ? (
<PlaceholderLine dark width={60} />
) : (
<Sub>{t(`app:time.since.${since}`)}</Sub>
)}
</Box>
)
}
export function BalanceSinceDiff(props: Props) {
const { t, totalBalance, sinceBalance, since, counterValue, ...otherProps } = props
const { t, totalBalance, sinceBalance, since, counterValue, isAvailable, ...otherProps } = props
return (
<Box {...otherProps}>
<FormattedVal
color="dark"
animateTicker
unit={counterValue.units[0]}
fontSize={7}
showCode
val={totalBalance - sinceBalance}
withIcon
/>
<Sub>{t(`app:time.since.${since}`)}</Sub>
{!isAvailable ? (
<PlaceholderLine width={100} />
) : (
<FormattedVal
color="dark"
animateTicker
unit={counterValue.units[0]}
fontSize={7}
showCode
val={totalBalance - sinceBalance}
withIcon
/>
)}
{!isAvailable ? (
<PlaceholderLine dark width={60} />
) : (
<Sub>{t(`app:time.since.${since}`)}</Sub>
)}
</Box>
)
}
export function BalanceTotal(props: BalanceTotalProps) {
const { unit, totalBalance, children } = props
const { unit, totalBalance, isAvailable, children } = props
return (
<Box grow {...props}>
<FormattedVal
animateTicker
color="dark"
unit={unit}
fontSize={8}
showCode
val={totalBalance}
/>
{children}
{!isAvailable ? (
<PlaceholderLine width={150} />
) : (
<FormattedVal
animateTicker
color="dark"
unit={unit}
fontSize={8}
showCode
val={totalBalance}
/>
)}
{!isAvailable ? <PlaceholderLine dark width={50} /> : children}
</Box>
)
}
@ -93,16 +116,21 @@ BalanceTotal.defaultProps = {
}
function BalanceInfos(props: Props) {
const { t, totalBalance, since, sinceBalance, refBalance, counterValue } = props
const { t, totalBalance, since, sinceBalance, refBalance, isAvailable, counterValue } = props
return (
<Box horizontal alignItems="center" flow={7}>
<BalanceTotal unit={counterValue.units[0]} totalBalance={totalBalance}>
<BalanceTotal
unit={counterValue.units[0]}
isAvailable={isAvailable}
totalBalance={totalBalance}
>
<Sub>{t('app:dashboard.totalBalance')}</Sub>
</BalanceTotal>
<BalanceSincePercent
alignItems="flex-end"
totalBalance={totalBalance}
sinceBalance={sinceBalance}
isAvailable={isAvailable}
refBalance={refBalance}
since={since}
t={t}
@ -110,6 +138,7 @@ function BalanceInfos(props: Props) {
<BalanceSinceDiff
counterValue={counterValue}
alignItems="flex-end"
isAvailable={isAvailable}
totalBalance={totalBalance}
sinceBalance={sinceBalance}
refBalance={refBalance}

95
src/components/BalanceSummary/index.js
View File

@ -21,6 +21,7 @@ type Props = {
totalBalance: number,
sinceBalance: number,
refBalance: number,
isAvailable: boolean,
}) => *,
}
@ -37,54 +38,54 @@ const BalanceSummary = ({
return (
<Card p={0} py={5}>
<CalculateBalance accounts={accounts} daysCount={daysCount}>
{({ isAvailable, balanceHistory, balanceStart, balanceEnd }) =>
!isAvailable ? null : (
<Fragment>
{renderHeader ? (
<Box px={6}>
{renderHeader({
selectedTimeRange,
// FIXME refactor these
totalBalance: balanceEnd,
sinceBalance: balanceStart,
refBalance: balanceStart,
})}
</Box>
) : null}
<Box ff="Open Sans" fontSize={4} color="graphite" pt={6}>
<Chart
id={chartId}
unit={account ? account.unit : null}
color={chartColor}
data={balanceHistory}
height={200}
currency={counterValue}
tickXScale={selectedTimeRange}
renderTickY={val => formatShort(counterValue.units[0], val)}
renderTooltip={
isAvailable && !account
? d => (
<Fragment>
<FormattedVal
alwaysShowSign={false}
fontSize={5}
color="dark"
showCode
unit={counterValue.units[0]}
val={d.value}
/>
<Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
{d.date.toISOString().substr(0, 10)}
</Box>
</Fragment>
)
: undefined
}
/>
{({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
<Fragment>
{renderHeader ? (
<Box px={6}>
{renderHeader({
isAvailable,
selectedTimeRange,
// FIXME refactor these
totalBalance: balanceEnd,
sinceBalance: balanceStart,
refBalance: balanceStart,
})}
</Box>
</Fragment>
)
}
) : null}
<Box ff="Open Sans" fontSize={4} color="graphite" pt={6}>
<Chart
id={chartId}
unit={account ? account.unit : null}
color={!isAvailable ? 'transparent' : chartColor}
data={balanceHistory}
height={200}
currency={counterValue}
tickXScale={selectedTimeRange}
renderTickY={val => formatShort(counterValue.units[0], val)}
isInteractive={isAvailable}
renderTooltip={
isAvailable && !account
? d => (
<Fragment>
<FormattedVal
alwaysShowSign={false}
fontSize={5}
color="dark"
showCode
unit={counterValue.units[0]}
val={d.value}
/>
<Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
{d.date.toISOString().substr(0, 10)}
</Box>
</Fragment>
)
: undefined
}
/>
</Box>
</Fragment>
)}
</CalculateBalance>
</Card>
)

9
src/components/DashboardPage/index.js
View File

@ -120,10 +120,17 @@ class DashboardPage extends PureComponent<Props> {
accounts={accounts}
selectedTimeRange={selectedTimeRange}
daysCount={daysCount}
renderHeader={({ totalBalance, selectedTimeRange, sinceBalance, refBalance }) => (
renderHeader={({
isAvailable,
totalBalance,
selectedTimeRange,
sinceBalance,
refBalance,
}) => (
<BalanceInfos
t={t}
counterValue={counterValue}
isAvailable={isAvailable}
totalBalance={totalBalance}
since={selectedTimeRange}
sinceBalance={sinceBalance}

9
src/components/Placeholder.js
View File

@ -0,0 +1,9 @@
import styled from 'styled-components'
export const PlaceholderLine = styled.div`
background-color: ${p => (p.dark ? '#C2C2C2' : '#D6D6D6')};
width: ${p => p.width}px;
height: 10px;
border-radius: 5px;
margin: 5px 0;
`

4
src/config/constants.js
View File

@ -29,6 +29,10 @@ export const DEVICE_DISCONNECT_DEBOUNCE = intFromEnv('LEDGER_DEVICE_DISCONNECT_D
// Endpoints...
export const LEDGER_COUNTERVALUES_API = stringFromEnv(
'LEDGER_COUNTERVALUES_API',
'https://ledger-countervalue-poc.herokuapp.com',
)
export const LEDGER_REST_API_BASE = stringFromEnv(
'LEDGER_REST_API_BASE',
'https://api.ledgerwallet.com/',

3
src/helpers/countervalues.js
View File

@ -1,6 +1,7 @@
// @flow
import { createSelector } from 'reselect'
import { LEDGER_COUNTERVALUES_API } from 'config/constants'
import createCounterValues from '@ledgerhq/live-common/lib/countervalues'
import { setExchangePairsAction } from 'actions/settings'
import { currenciesSelector } from 'reducers/accounts'
@ -53,7 +54,7 @@ const addExtraPollingHooks = (schedulePoll, cancelPoll) => {
const CounterValues = createCounterValues({
log: (...args) => logger.log('CounterValues:', ...args),
getAPIBaseURL: () => 'https://ledger-countervalue-poc.herokuapp.com',
getAPIBaseURL: () => LEDGER_COUNTERVALUES_API,
storeSelector: state => state.countervalues,
pairsSelector,
setExchangePairsAction,

Write Preview
Loading…
Cancel
Save