diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-07-21 00:55:08 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-07-21 00:55:08 +0800 |
commit | 3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec (patch) | |
tree | ec201f62a2cfc33bcf3a30ed9a5d5b188c63f5aa | |
parent | f27084ced46d88164b526ea5f281637ca87d0583 (diff) | |
download | dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.gz dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.bz2 dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.lz dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.xz dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.zst dexon-0x-contracts-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.zip |
Implement tooltips
-rw-r--r-- | packages/website/ts/components/inputs/allowance_state_toggle.tsx | 52 | ||||
-rw-r--r-- | packages/website/ts/components/ui/allowance_state_view.tsx | 12 |
2 files changed, 56 insertions, 8 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 4a9c99ca7..8908e457b 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -1,10 +1,54 @@ +import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import { AllowanceStateView } from 'ts/components/ui/allowance_state_view'; +import { AllowanceStateView, AllowanceState } from 'ts/components/ui/allowance_state_view'; +import { Token, TokenState } from 'ts/types'; +import ReactTooltip = require('react-tooltip'); export interface AllowanceStateToggleProps {} +export interface AllowanceStateToggleState { + allowanceState: AllowanceState; + token?: Token; + tokenState?: TokenState; +} + +const TOOLTIP_ID = 'AllowanceStateToggleTooltip'; + const flip = () => Math.random() < 0.5; -export const AllowanceStateToggle: React.StatelessComponent<AllowanceStateToggleProps> = () => ( - <AllowanceStateView allowanceState={flip() ? 'locked' : 'loading'} /> -); +export class AllowanceStateToggle extends React.Component<AllowanceStateToggleProps, AllowanceStateToggleState> { + public state = { + allowanceState: flip() ? AllowanceState.Loading : AllowanceState.Locked, + }; + public render(): React.ReactNode { + return ( + <div> + <ReactTooltip id={TOOLTIP_ID}>{this._getTooltipContent()}</ReactTooltip> + <div data-tip={true} data-for={TOOLTIP_ID} data-place="right" data-effect="solid"> + <AllowanceStateView allowanceState={this.state.allowanceState} /> + </div> + </div> + ); + } + private _getTooltipContent(): React.ReactNode { + switch (this.state.allowanceState) { + case AllowanceState.Loading: + // TODO: support both awaiting confirmation and awaiting transaction. + return 'Please confirm in MetaMask'; + case AllowanceState.Locked: + return ( + <span> + Click to enable <b>WETH</b> for trading + </span> + ); + case AllowanceState.Unlocked: + return ( + <span> + <b>WETH</b> is available for trading + </span> + ); + default: + return null; + } + } +} diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index fce06c664..eecf88c34 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -3,7 +3,11 @@ import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type AllowanceState = 'locked' | 'unlocked' | 'loading'; +export enum AllowanceState { + Locked, + Unlocked, + Loading, +} export interface AllowanceStateViewProps { allowanceState: AllowanceState; @@ -11,11 +15,11 @@ export interface AllowanceStateViewProps { export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProps> = ({ allowanceState }) => { switch (allowanceState) { - case 'locked': + case AllowanceState.Locked: return renderLock(); - case 'unlocked': + case AllowanceState.Unlocked: return renderCheck(); - case 'loading': + case AllowanceState.Loading: return <CircularProgress size={15} thickness={2} />; default: return null; |