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

feture: add Send view side information

This commit is contained in:
George Lima 2018-12-20 11:10:44 -03:00
parent b6308f8a3e
commit e6c3e8c7f6
1 changed files with 122 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
app/views/send.js
View File

@ -6,9 +6,19 @@ import { InputLabelComponent } from '../components/input-label';
import { InputComponent } from '../components/input'; import { InputComponent } from '../components/input';
import { TextComponent } from '../components/text'; import { TextComponent } from '../components/text';
import { SelectComponent } from '../components/select'; import { SelectComponent } from '../components/select';
import { RowComponent } from '../components/row';
import { ColumnComponent } from '../components/column';
import { Divider } from '../components/divider';
import { Button } from '../components/button';
const Wrapper = styled.div` const FormWrapper = styled.div`
margin-top: ${props => props.theme.layoutContentPaddingTop}; margin-top: ${props => props.theme.layoutContentPaddingTop};
width: 80%;
`;
const SendWrapper = styled(ColumnComponent)`
margin-top: 60px;
width: 15%;
`; `;
const ShowFeeButton = styled.button` const ShowFeeButton = styled.button`
@ -24,6 +34,42 @@ const ShowFeeButton = styled.button`
} }
`; `;
const InfoCard = styled.div`
width: 100%;
background-color: ${props => props.theme.colors.cardBackgroundColor};
border-radius: ${props => props.theme.boxBorderRadius};
`;
const InfoContent = styled.div`
padding: 15px;
`;
const InfoCardLabel = styled(TextComponent)`
opacity: 0.5;
margin-bottom: 10px;
`;
const InfoCardUSD = styled(TextComponent)`
opacity: 0.5;
margin-top: 2.5px;
`;
const FormButton = styled(Button)`
margin: 10px 0;
border-color: ${props => (props.focused
? props.theme.colors.activeItem
: props.theme.colors.inactiveItem)};
&:hover {
border-color: ${props => (props.focused
? props.theme.colors.activeItem
: props.theme.colors.inactiveItem)};
background-color: ${props => (props.focused
? props.theme.colors.activeItem
: props.theme.colors.inactiveItem)};
}
`;
type Props = {}; type Props = {};
type State = { type State = {
showFee: boolean, showFee: boolean,
@ -56,65 +102,84 @@ export class SendView extends PureComponent<Props, State> {
} = this.state; } = this.state;
return ( return (
<Wrapper> <RowComponent justifyContent='space-between'>
<InputLabelComponent value='From' /> <FormWrapper>
<SelectComponent <InputLabelComponent value='From' />
onChange={this.handleChange('from')} <SelectComponent
value={from} onChange={this.handleChange('from')}
placeholder='Select a address' value={from}
options={[ placeholder='Select a address'
{ options={[
label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds', {
value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds', label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
}, value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
{ },
label: 'kjnasG8643asd12e45jbhbdsDGvds', {
value: 'kjnasG8643asd12e45jbhbdsDGvds', label: 'kjnasG8643asd12e45jbhbdsDGvds',
}, value: 'kjnasG8643asd12e45jbhbdsDGvds',
]} },
/> ]}
<InputLabelComponent value='Amount' /> />
<InputComponent <InputLabelComponent value='Amount' />
type='number' <InputComponent
onChange={this.handleChange('amount')} type='number'
value={String(amount)} onChange={this.handleChange('amount')}
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds' value={String(amount)}
/> placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
<InputLabelComponent value='To' /> />
<InputComponent <InputLabelComponent value='To' />
onChange={this.handleChange('to')} <InputComponent
value={to} onChange={this.handleChange('to')}
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds' value={to}
/> placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
<InputLabelComponent value='Memo' /> />
<InputComponent <InputLabelComponent value='Memo' />
onChange={this.handleChange('memo')} <InputComponent
value={memo} onChange={this.handleChange('memo')}
inputType='textarea' value={memo}
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds' inputType='textarea'
/> placeholder='Enter a text here'
<ShowFeeButton
onClick={() => this.setState(state => ({ showFee: !state.showFee }))}
>
<TextComponent
value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
align='right'
/> />
</ShowFeeButton>
{showFee && ( <ShowFeeButton
<Fragment> onClick={() => this.setState(state => ({ showFee: !state.showFee }))
<InputLabelComponent value='Fee' /> }
<InputComponent >
type='number' <TextComponent
onChange={this.handleChange('fee')} value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
value={String(fee)} align='right'
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
/> />
</Fragment> </ShowFeeButton>
)} {showFee && (
</Wrapper> <Fragment>
<InputLabelComponent value='Fee' />
<InputComponent
type='number'
onChange={this.handleChange('fee')}
value={String(fee)}
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
/>
</Fragment>
)}
</FormWrapper>
<SendWrapper>
<InfoCard>
<InfoContent>
<InfoCardLabel value='Available Funds:' />
<TextComponent value='ZEC 2.235' size={1.125} isBold />
<InfoCardUSD value='USD $25.000,00' />
</InfoContent>
<Divider opacity={0.5} />
<InfoContent>
<InfoCardLabel value='Sending' />
<TextComponent value='ZEC 0' size={1.125} isBold />
<InfoCardUSD value='USD $0.00' />
</InfoContent>
</InfoCard>
<FormButton label='Send' variant='secondary' focused />
<FormButton label='Cancel' variant='secondary' />
</SendWrapper>
</RowComponent>
); );
} }
} }