import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import {colors} from 'ts/utils/colors'; 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() { 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) { 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) { this.setState({ isHoveringIcon, }); } private onAssetClicked() { if (this.props.blockchainErr !== BlockchainErrs.NoError) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; } this.setState({ isPickerOpen: true, }); } }