aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-13 07:11:30 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-13 07:11:30 +0800
commitf39541436a5088e928660b61bde7cef5153bc7a1 (patch)
tree5c6fe7ff4b9621a5cc59fe795b6feb1ad346b479 /packages/instant/src/components
parentccf021b8bf34aa7c0714f29f9153a5a11ce682a2 (diff)
downloaddexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.tar
dexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.tar.gz
dexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.tar.bz2
dexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.tar.lz
dexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.tar.xz
dexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.tar.zst
dexon-sol-tools-f39541436a5088e928660b61bde7cef5153bc7a1.zip
feat: model asset meta data and add dynamic assetData state
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/amount_input.tsx9
-rw-r--r--packages/instant/src/components/asset_amount_input.tsx51
-rw-r--r--packages/instant/src/components/instant_heading.tsx9
3 files changed, 57 insertions, 12 deletions
diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
index a2113f143..5b81a3d68 100644
--- a/packages/instant/src/components/amount_input.tsx
+++ b/packages/instant/src/components/amount_input.tsx
@@ -10,10 +10,13 @@ export interface AmountInputProps {
fontColor?: ColorOption;
fontSize?: string;
value?: BigNumber;
- onChange?: (value?: BigNumber) => void;
+ onChange: (value?: BigNumber) => void;
}
export class AmountInput extends React.Component<AmountInputProps> {
+ public static defaultProps = {
+ onChange: _.noop.bind(_),
+ };
public render(): React.ReactNode {
const { fontColor, fontSize, value } = this.props;
return (
@@ -40,8 +43,6 @@ export class AmountInput extends React.Component<AmountInputProps> {
return;
}
}
- if (!_.isUndefined(this.props.onChange)) {
- this.props.onChange(bigNumberValue);
- }
+ this.props.onChange(bigNumberValue);
};
}
diff --git a/packages/instant/src/components/asset_amount_input.tsx b/packages/instant/src/components/asset_amount_input.tsx
new file mode 100644
index 000000000..915c66e1e
--- /dev/null
+++ b/packages/instant/src/components/asset_amount_input.tsx
@@ -0,0 +1,51 @@
+import { AssetProxyId } from '@0xproject/types';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { assetMetaData } from '../data/asset_meta_data';
+import { ColorOption } from '../style/theme';
+
+import { AmountInput, AmountInputProps } from './amount_input';
+import { Container, Text } from './ui';
+
+export interface AssetAmountInputProps extends AmountInputProps {
+ assetData?: string;
+ onChange: (value?: BigNumber, assetData?: string) => void;
+}
+
+export class AssetAmountInput extends React.Component<AssetAmountInputProps> {
+ public static defaultProps = {
+ onChange: _.noop.bind(_),
+ };
+ public render(): React.ReactNode {
+ const { assetData, onChange, ...rest } = this.props;
+ return (
+ <Container>
+ <AmountInput {...rest} onChange={this._handleChange} />
+ <Container display="inline-block" marginLeft="10px">
+ <Text fontSize={rest.fontSize} fontColor={ColorOption.white} textTransform="uppercase">
+ {this._getLabel()}
+ </Text>
+ </Container>
+ </Container>
+ );
+ }
+ private readonly _getLabel = (): string => {
+ const unknownLabel = '???';
+ if (_.isUndefined(this.props.assetData)) {
+ return unknownLabel;
+ }
+ const metaData = assetMetaData[this.props.assetData];
+ if (_.isUndefined(metaData)) {
+ return unknownLabel;
+ }
+ if (metaData.assetProxyId === AssetProxyId.ERC20) {
+ return metaData.symbol;
+ }
+ return unknownLabel;
+ };
+ private readonly _handleChange = (value?: BigNumber): void => {
+ this.props.onChange(value, this.props.assetData);
+ };
+}
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 377bb20bf..492c1b2c0 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -43,14 +43,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
</Text>
</Container>
<Flex direction="row" justify="space-between">
- <Container>
- <SelectedAssetAmountInput fontSize="45px" />
- <Container display="inline-block" marginLeft="10px">
- <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
- zrx
- </Text>
- </Container>
- </Container>
+ <SelectedAssetAmountInput fontSize="45px" />
<Flex direction="column" justify="space-between">
<Container marginBottom="5px">
<Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>