import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; import { InputLabel } from 'ts/components/ui/input_label'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types'; const TOKEN_ICON_DIMENSION = 80; interface TokenInputProps { blockchain: Blockchain; blockchainErr: BlockchainErrs; dispatcher: Dispatcher; label: string; side: Side; networkId: number; assetToken: AssetToken; updateChosenAssetToken: (side: Side, token: AssetToken) => void; tokenByAddress: TokenByAddress; userAddress: string; } interface TokenInputState { isHoveringIcon: boolean; isPickerOpen: boolean; trackCandidateTokenIfExists?: Token; } export class TokenInput extends React.Component { constructor(props: TokenInputProps) { super(props); this.state = { isHoveringIcon: false, isPickerOpen: false, }; } public render(): React.ReactNode { const token = this.props.tokenByAddress[this.props.assetToken.address]; const iconStyles = { cursor: 'pointer', opacity: this.state.isHoveringIcon ? 0.5 : 1, }; return (
{token.name}
); } private _onTokenChosen(tokenAddress: string): void { const assetToken: AssetToken = { address: tokenAddress, amount: this.props.assetToken.amount, }; this.props.updateChosenAssetToken(this.props.side, assetToken); this.setState({ isPickerOpen: false, }); } private _onToggleHover(isHoveringIcon: boolean): void { this.setState({ isHoveringIcon, }); } private _onAssetClicked(): void { if (this.props.blockchainErr !== BlockchainErrs.NoError) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; } this.setState({ isPickerOpen: true, }); } }