diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 10:24:10 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-05 10:24:10 +0800 |
commit | 1eb8d17ce36274093583069aab0025768a4a91ce (patch) | |
tree | 13ca27cc615ed28633e3513f1e7a5dde303c36a6 | |
parent | c5084f023ac0356660b9480f9e1f477001a61284 (diff) | |
download | dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.tar dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.tar.gz dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.tar.bz2 dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.tar.lz dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.tar.xz dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.tar.zst dexon-0x-contracts-1eb8d17ce36274093583069aab0025768a4a91ce.zip |
Create SelectedAssetInputAmount
-rw-r--r-- | packages/instant/package.json | 1 | ||||
-rw-r--r-- | packages/instant/src/components/amount_input.tsx | 37 | ||||
-rw-r--r-- | packages/instant/src/components/instant_heading.tsx | 4 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_amount_input.tsx | 36 | ||||
-rw-r--r-- | packages/instant/src/redux/reducer.ts | 8 | ||||
-rw-r--r-- | packages/instant/src/types.ts | 1 |
6 files changed, 72 insertions, 15 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json index 557a7f00f..949854197 100644 --- a/packages/instant/package.json +++ b/packages/instant/package.json @@ -45,6 +45,7 @@ "dependencies": { "@0xproject/types": "^1.1.1", "@0xproject/typescript-typings": "^2.0.2", + "@0xproject/utils": "^2.0.2", "@0xproject/web3-wrapper": "^3.0.1", "ethereum-types": "^1.0.8", "lodash": "^4.17.10", diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx index 699541bfb..8fead78ca 100644 --- a/packages/instant/src/components/amount_input.tsx +++ b/packages/instant/src/components/amount_input.tsx @@ -1,4 +1,5 @@ import { BigNumber } from '@0xproject/utils'; +import * as _ from 'lodash'; import * as React from 'react'; import { ColorOption } from '../style/theme'; @@ -12,16 +13,26 @@ export interface AmountInputProps { onChange?: (value: BigNumber) => void; } -export const AmountInput: React.StatelessComponent<AmountInputProps> = props => ( - <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block"> - <Input - fontColor={props.fontColor} - fontSize={props.fontSize} - value={props.value ? props.value.toString() : undefined} - placeholder="0.00" - width="2em" - /> - </Container> -); - -AmountInput.defaultProps = {}; +export class AmountInput extends React.Component<AmountInputProps> { + public render(): React.ReactNode { + const { fontColor, fontSize, value } = this.props; + return ( + <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block"> + <Input + fontColor={fontColor} + fontSize={fontSize} + onChange={this._handleChange} + value={value ? value.toString() : undefined} + placeholder="0.00" + width="2em" + /> + </Container> + ); + } + private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { + const bigNumberValue = new BigNumber(event.target.value); + if (!_.isUndefined(this.props.onChange)) { + this.props.onChange(bigNumberValue); + } + }; +} diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx index 3da280652..2b07ef666 100644 --- a/packages/instant/src/components/instant_heading.tsx +++ b/packages/instant/src/components/instant_heading.tsx @@ -1,9 +1,9 @@ import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; +import { SelectedAssetAmountInput } from '../containers/selected_asset_amount_input'; import { ColorOption } from '../style/theme'; -import { AmountInput } from './amount_input'; import { Container, Flex, Text } from './ui'; export interface InstantHeadingProps {} @@ -24,7 +24,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro </Container> <Flex direction="row" justify="space-between"> <Container> - <AmountInput fontSize="45px" /> + <SelectedAssetAmountInput fontSize="45px" /> <Container display="inline-block" marginLeft="10px"> <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase"> rep diff --git a/packages/instant/src/containers/selected_asset_amount_input.tsx b/packages/instant/src/containers/selected_asset_amount_input.tsx new file mode 100644 index 000000000..f5e1e134a --- /dev/null +++ b/packages/instant/src/containers/selected_asset_amount_input.tsx @@ -0,0 +1,36 @@ +import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; + +import { State } from '../redux/reducer'; +import { ColorOption } from '../style/theme'; +import { Action, ActionTypes } from '../types'; + +import { AmountInput, AmountInputProps } from '../components/amount_input'; + +export interface SelectedAssetAmountInputProps { + fontColor?: ColorOption; + fontSize?: string; +} + +interface ConnectedState { + value?: BigNumber; +} + +interface ConnectedDispatch { + onChange?: (value: BigNumber) => void; +} + +const mapStateToProps = (state: State, _ownProps: SelectedAssetAmountInputProps): ConnectedState => ({ + value: state.selectedAssetAmount, +}); + +const mapDispatchToProps = (dispatch: Dispatch<Action>): ConnectedDispatch => ({ + onChange: value => dispatch({ type: ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT, data: value }), +}); + +export const SelectedAssetAmountInput: React.ComponentClass<SelectedAssetAmountInputProps> = connect(mapStateToProps)( + AmountInput, +); diff --git a/packages/instant/src/redux/reducer.ts b/packages/instant/src/redux/reducer.ts index e4578d620..5026895ae 100644 --- a/packages/instant/src/redux/reducer.ts +++ b/packages/instant/src/redux/reducer.ts @@ -1,13 +1,16 @@ +import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import { Action, ActionTypes } from '../types'; export interface State { ethUsdPrice?: string; + selectedAssetAmount?: BigNumber; } export const INITIAL_STATE: State = { ethUsdPrice: undefined, + selectedAssetAmount: undefined, }; export const reducer = (state: State = INITIAL_STATE, action: Action): State => { @@ -17,6 +20,11 @@ export const reducer = (state: State = INITIAL_STATE, action: Action): State => ...state, ethUsdPrice: action.data, }; + case ActionTypes.UPDATE_SELECTED_ASSET_AMOUNT: + return { + ...state, + selectedAssetAmount: action.data, + }; default: return state; } diff --git a/packages/instant/src/types.ts b/packages/instant/src/types.ts index 3ba5a9b94..d150bd8ab 100644 --- a/packages/instant/src/types.ts +++ b/packages/instant/src/types.ts @@ -1,5 +1,6 @@ export enum ActionTypes { UPDATE_ETH_USD_PRICE, + UPDATE_SELECTED_ASSET_AMOUNT, } export interface Action { |