zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feature: add wallet summary component

This commit is contained in:
George Lima 2018-12-10 14:07:45 -03:00
parent bc56fde68b
commit d294f46f79
1 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/components/wallet-summary.js Normal file
View File

@ -0,0 +1,69 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { TextComponent } from './text';
import { RowComponent } from './row';
const Wrapper = styled.div`
background-color: ${props => props.theme.colors.cardBackgroundColor};
border-radius: 10px;
width: 100%;
padding: 30px;
margin: 10px;
`;
const AllAddresses = styled(TextComponent)`
margin-bottom: 2.5px;
`;
const ValueBox = styled.div`
margin-bottom: 15px;
margin-right: 25px;
`;
const Label = styled(TextComponent)`
margin: 10px 0;
margin-left: -15px;
`;
const USDValue = styled(TextComponent)`
opacity: 0.7;
`;
const ShieldedValue = styled(Label)`
color: ${props => props.theme.colors.activeItem};
`;
type Props = {
total: number,
shielded: number,
transparent: number,
dollarValue: number,
};
const formatNumber = number => number.toLocaleString('de-DE');
export const WalletSummaryComponent = ({
total, shielded, transparent, dollarValue,
}: Props) => (
<Wrapper>
<AllAddresses value='ALL ADDRESSES' isBold />
<ValueBox>
<TextComponent size='3em' value={`ZEC ${formatNumber(total)}`} isBold />
<USDValue value={`USD $${formatNumber(total * dollarValue)}`} size='2em' />
</ValueBox>
<RowComponent>
<ValueBox>
<ShieldedValue value='&#9679; SHIELDED' isBold />
<TextComponent value={`ZEC ${formatNumber(shielded)}`} isBold size='1.3em' />
<USDValue value={`USD $${formatNumber(shielded * dollarValue)}`} size='1.3em' />
</ValueBox>
<ValueBox>
<Label value='&#9679; TRANSPARENT' isBold />
<TextComponent value={`ZEC ${formatNumber(transparent)}`} isBold size='1.3em' />
<USDValue value={`USD $${formatNumber(transparent * dollarValue)}`} size='1.3em' />
</ValueBox>
</RowComponent>
</Wrapper>
);