[WIP] feature: add SendView
This commit is contained in:
parent
dedb3380d5
commit
4c139dae05
|
@ -1,5 +1,120 @@
|
|||
// @flow
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import React from 'react';
|
||||
import { InputLabelComponent } from '../components/input-label';
|
||||
import { InputComponent } from '../components/input';
|
||||
import { TextComponent } from '../components/text';
|
||||
import { SelectComponent } from '../components/select';
|
||||
|
||||
export const SendView = () => <div className='send'>send</div>;
|
||||
const Wrapper = styled.div`
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
`;
|
||||
|
||||
const ShowFeeButton = styled.button`
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: ${props => props.theme.colors.text};
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
type Props = {};
|
||||
type State = {
|
||||
showFee: boolean,
|
||||
from: string,
|
||||
amount: number,
|
||||
to: string,
|
||||
fee: number,
|
||||
memo: string,
|
||||
};
|
||||
|
||||
export class SendView extends PureComponent<Props, State> {
|
||||
state = {
|
||||
showFee: false,
|
||||
from: '',
|
||||
amount: 0,
|
||||
to: '',
|
||||
fee: 0,
|
||||
memo: '',
|
||||
};
|
||||
|
||||
handleChange = (field: string) => (value: string) => {
|
||||
this.setState(() => ({
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
showFee, from, amount, to, memo, fee,
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<InputLabelComponent value='From' />
|
||||
<SelectComponent
|
||||
onChange={this.handleChange('from')}
|
||||
value={from}
|
||||
placeholder='Select a address'
|
||||
options={[
|
||||
{
|
||||
label: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
|
||||
value: 'kjnasG86431nvtsa…ks345jbhbdsDGvds',
|
||||
},
|
||||
{
|
||||
label: 'kjnasG8643asd12e45jbhbdsDGvds',
|
||||
value: 'kjnasG8643asd12e45jbhbdsDGvds',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<InputLabelComponent value='Amount' />
|
||||
<InputComponent
|
||||
type='number'
|
||||
onChange={this.handleChange('amount')}
|
||||
value={String(amount)}
|
||||
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
|
||||
/>
|
||||
<InputLabelComponent value='To' />
|
||||
<InputComponent
|
||||
onChange={this.handleChange('to')}
|
||||
value={to}
|
||||
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
|
||||
/>
|
||||
<InputLabelComponent value='Memo' />
|
||||
<InputComponent
|
||||
onChange={this.handleChange('memo')}
|
||||
value={memo}
|
||||
inputType='textarea'
|
||||
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
|
||||
/>
|
||||
|
||||
<ShowFeeButton
|
||||
onClick={() => this.setState(state => ({ showFee: !state.showFee }))}
|
||||
>
|
||||
<TextComponent
|
||||
value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
|
||||
align='right'
|
||||
/>
|
||||
</ShowFeeButton>
|
||||
|
||||
{showFee && (
|
||||
<Fragment>
|
||||
<InputLabelComponent value='Fee' />
|
||||
<InputComponent
|
||||
type='number'
|
||||
onChange={this.handleChange('fee')}
|
||||
value={String(fee)}
|
||||
placeholder='kjnasG86431nvtsa…ks345jbhbdsDGvds'
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue