diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-13 07:11:30 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-13 07:11:30 +0800 |
commit | f39541436a5088e928660b61bde7cef5153bc7a1 (patch) | |
tree | 5c6fe7ff4b9621a5cc59fe795b6feb1ad346b479 /packages/instant/src/components/asset_amount_input.tsx | |
parent | ccf021b8bf34aa7c0714f29f9153a5a11ce682a2 (diff) | |
download | dexon-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/asset_amount_input.tsx')
-rw-r--r-- | packages/instant/src/components/asset_amount_input.tsx | 51 |
1 files changed, 51 insertions, 0 deletions
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); + }; +} |