aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/package.json1
-rw-r--r--packages/instant/src/components/amount_input.tsx37
-rw-r--r--packages/instant/src/components/instant_heading.tsx4
-rw-r--r--packages/instant/src/containers/selected_asset_amount_input.tsx36
-rw-r--r--packages/instant/src/redux/reducer.ts8
-rw-r--r--packages/instant/src/types.ts1
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 {