From b28cc6d7d300d209bee0091369a8e221eaeb4e64 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 20 Jul 2018 10:14:17 -0700
Subject: Show token name dynamically in tooltip

---
 .../components/inputs/allowance_state_toggle.tsx   | 24 ++++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts/components/inputs')

diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index 8908e457b..bf661dee8 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -2,18 +2,18 @@ import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 import { AllowanceStateView, AllowanceState } from 'ts/components/ui/allowance_state_view';
 import { Token, TokenState } from 'ts/types';
+import { Container } from 'ts/components/ui/container';
 import ReactTooltip = require('react-tooltip');
 
-export interface AllowanceStateToggleProps {}
+export interface AllowanceStateToggleProps {
+    token: Token;
+    tokenState: TokenState;
+}
 
 export interface AllowanceStateToggleState {
     allowanceState: AllowanceState;
-    token?: Token;
-    tokenState?: TokenState;
 }
 
-const TOOLTIP_ID = 'AllowanceStateToggleTooltip';
-
 const flip = () => Math.random() < 0.5;
 
 export class AllowanceStateToggle extends React.Component<AllowanceStateToggleProps, AllowanceStateToggleState> {
@@ -21,16 +21,18 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
         allowanceState: flip() ? AllowanceState.Loading : AllowanceState.Locked,
     };
     public render(): React.ReactNode {
+        const tooltipId = `tooltip-id-${this.props.token.symbol}`;
         return (
-            <div>
-                <ReactTooltip id={TOOLTIP_ID}>{this._getTooltipContent()}</ReactTooltip>
-                <div data-tip={true} data-for={TOOLTIP_ID} data-place="right" data-effect="solid">
+            <Container cursor="pointer">
+                <ReactTooltip id={tooltipId}>{this._getTooltipContent()}</ReactTooltip>
+                <div data-tip={true} data-for={tooltipId} data-place="right" data-effect="solid">
                     <AllowanceStateView allowanceState={this.state.allowanceState} />
                 </div>
-            </div>
+            </Container>
         );
     }
     private _getTooltipContent(): React.ReactNode {
+        const symbol = this.props.token.symbol;
         switch (this.state.allowanceState) {
             case AllowanceState.Loading:
                 // TODO: support both awaiting confirmation and awaiting transaction.
@@ -38,13 +40,13 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
             case AllowanceState.Locked:
                 return (
                     <span>
-                        Click to enable <b>WETH</b> for trading
+                        Click to enable <b>{symbol}</b> for trading
                     </span>
                 );
             case AllowanceState.Unlocked:
                 return (
                     <span>
-                        <b>WETH</b> is available for trading
+                        <b>{symbol}</b> is available for trading
                     </span>
                 );
             default:
-- 
cgit v1.2.3