2018-12-10 09:07:45 -08:00
|
|
|
// @flow
|
2019-02-04 20:41:45 -08:00
|
|
|
|
2018-12-10 09:07:45 -08:00
|
|
|
import React from 'react';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
|
|
|
import { TextComponent } from './text';
|
|
|
|
import { RowComponent } from './row';
|
2018-12-10 13:24:25 -08:00
|
|
|
|
2019-01-29 07:36:13 -08:00
|
|
|
import { formatNumber } from '../utils/format-number';
|
2018-12-12 13:13:13 -08:00
|
|
|
|
2019-02-10 09:52:34 -08:00
|
|
|
import { appTheme } from '../theme';
|
2018-12-10 09:07:45 -08:00
|
|
|
|
|
|
|
const Wrapper = styled.div`
|
2018-12-10 16:11:53 -08:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2019-02-10 12:25:09 -08:00
|
|
|
background-color: ${props => props.theme.colors.walletSummaryBg};
|
|
|
|
border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
|
2019-02-07 08:31:59 -08:00
|
|
|
border-radius: ${props => props.theme.boxBorderRadius};
|
2018-12-11 14:26:28 -08:00
|
|
|
padding: 37px 45px;
|
2019-01-08 06:33:39 -08:00
|
|
|
min-height: 250px;
|
2018-12-10 13:24:25 -08:00
|
|
|
position: relative;
|
2019-02-07 08:31:59 -08:00
|
|
|
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
2018-12-10 09:07:45 -08:00
|
|
|
`;
|
|
|
|
|
|
|
|
const AllAddresses = styled(TextComponent)`
|
|
|
|
margin-bottom: 2.5px;
|
2019-02-07 08:31:59 -08:00
|
|
|
font-size: ${props => `${props.theme.fontSize.small}em`};
|
2018-12-10 09:07:45 -08:00
|
|
|
`;
|
|
|
|
|
|
|
|
const ValueBox = styled.div`
|
|
|
|
margin-bottom: 15px;
|
|
|
|
margin-right: 25px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Label = styled(TextComponent)`
|
2018-12-11 14:26:28 -08:00
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
margin-left: -7.5px;
|
2018-12-10 09:07:45 -08:00
|
|
|
`;
|
|
|
|
|
|
|
|
const USDValue = styled(TextComponent)`
|
2018-12-11 14:26:28 -08:00
|
|
|
opacity: 0.5;
|
2019-02-07 08:31:59 -08:00
|
|
|
font-weight: ${props => String(props.theme.fontWeight.light)};
|
2018-12-10 09:07:45 -08:00
|
|
|
`;
|
|
|
|
|
|
|
|
const ShieldedValue = styled(Label)`
|
2019-02-07 08:31:59 -08:00
|
|
|
color: ${props => props.theme.colors.activeItem};
|
2018-12-10 09:07:45 -08:00
|
|
|
`;
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
total: number,
|
|
|
|
shielded: number,
|
|
|
|
transparent: number,
|
2018-12-13 13:37:15 -08:00
|
|
|
zecPrice: number,
|
2018-12-10 09:07:45 -08:00
|
|
|
};
|
|
|
|
|
|
|
|
export const WalletSummaryComponent = ({
|
2019-01-29 07:36:13 -08:00
|
|
|
total, shielded, transparent, zecPrice,
|
2018-12-10 09:07:45 -08:00
|
|
|
}: Props) => (
|
|
|
|
<Wrapper>
|
2019-01-29 07:36:13 -08:00
|
|
|
<AllAddresses value='ALL ADDRESSES' isBold />
|
2018-12-10 09:07:45 -08:00
|
|
|
<ValueBox>
|
2018-12-15 07:10:39 -08:00
|
|
|
<TextComponent
|
2019-02-10 09:52:34 -08:00
|
|
|
size={appTheme.fontSize.medium * 2.5}
|
2018-12-15 07:10:39 -08:00
|
|
|
value={`ZEC ${formatNumber({ value: total })}`}
|
|
|
|
isBold
|
|
|
|
/>
|
|
|
|
<USDValue
|
|
|
|
value={`USD $${formatNumber({ value: total * zecPrice })}`}
|
2019-02-10 09:52:34 -08:00
|
|
|
size={appTheme.fontSize.medium * 2}
|
2018-12-15 07:10:39 -08:00
|
|
|
/>
|
2018-12-10 09:07:45 -08:00
|
|
|
</ValueBox>
|
|
|
|
<RowComponent>
|
|
|
|
<ValueBox>
|
2019-02-10 09:52:34 -08:00
|
|
|
<ShieldedValue value='● SHIELDED' isBold size={appTheme.fontSize.small} />
|
2018-12-15 07:10:39 -08:00
|
|
|
<TextComponent
|
|
|
|
value={`ZEC ${formatNumber({ value: shielded })}`}
|
|
|
|
isBold
|
2019-02-10 09:52:34 -08:00
|
|
|
size={appTheme.fontSize.medium}
|
2018-12-15 07:10:39 -08:00
|
|
|
/>
|
2019-02-06 19:06:48 -08:00
|
|
|
<USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
|
2018-12-10 09:07:45 -08:00
|
|
|
</ValueBox>
|
|
|
|
<ValueBox>
|
2019-02-10 09:52:34 -08:00
|
|
|
<Label value='● TRANSPARENT' isBold size={appTheme.fontSize.small} />
|
2018-12-13 12:20:22 -08:00
|
|
|
<TextComponent
|
|
|
|
value={`ZEC ${formatNumber({ value: transparent })}`}
|
|
|
|
isBold
|
2019-02-10 09:52:34 -08:00
|
|
|
size={appTheme.fontSize.medium}
|
2018-12-13 12:20:22 -08:00
|
|
|
/>
|
2019-02-06 19:06:48 -08:00
|
|
|
<USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
|
2018-12-10 09:07:45 -08:00
|
|
|
</ValueBox>
|
|
|
|
</RowComponent>
|
|
|
|
</Wrapper>
|
|
|
|
);
|