aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs/token_input.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/inputs/token_input.tsx')
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx164
1 files changed, 82 insertions, 82 deletions
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 3aceacb22..5df19b28c 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -12,93 +12,93 @@ import { colors } from 'ts/utils/colors';
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;
+ 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;
+ isHoveringIcon: boolean;
+ isPickerOpen: boolean;
+ trackCandidateTokenIfExists?: Token;
}
export class TokenInput extends React.Component<TokenInputProps, TokenInputState> {
- 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 (
- <div className="relative">
- <div className="pb1">
- <InputLabel text={this.props.label} />
- </div>
- <Paper
- zDepth={1}
- style={{ cursor: 'pointer' }}
- onMouseEnter={this._onToggleHover.bind(this, true)}
- onMouseLeave={this._onToggleHover.bind(this, false)}
- onClick={this._onAssetClicked.bind(this)}
- >
- <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}>
- <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
- </div>
- <div className="py1 center" style={{ color: colors.grey }}>
- {token.name}
- </div>
- </Paper>
- <AssetPicker
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
- isOpen={this.state.isPickerOpen}
- currentTokenAddress={this.props.assetToken.address}
- onTokenChosen={this._onTokenChosen.bind(this)}
- tokenByAddress={this.props.tokenByAddress}
- />
- </div>
- );
- }
- 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;
- }
+ 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 (
+ <div className="relative">
+ <div className="pb1">
+ <InputLabel text={this.props.label} />
+ </div>
+ <Paper
+ zDepth={1}
+ style={{ cursor: 'pointer' }}
+ onMouseEnter={this._onToggleHover.bind(this, true)}
+ onMouseLeave={this._onToggleHover.bind(this, false)}
+ onClick={this._onAssetClicked.bind(this)}
+ >
+ <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}>
+ <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
+ </div>
+ <div className="py1 center" style={{ color: colors.grey }}>
+ {token.name}
+ </div>
+ </Paper>
+ <AssetPicker
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ isOpen={this.state.isPickerOpen}
+ currentTokenAddress={this.props.assetToken.address}
+ onTokenChosen={this._onTokenChosen.bind(this)}
+ tokenByAddress={this.props.tokenByAddress}
+ />
+ </div>
+ );
+ }
+ 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,
- });
- }
+ this.setState({
+ isPickerOpen: true,
+ });
+ }
}