Implement tooltips

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;
+        }
+    }
+}

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;