Show token name dynamically in tooltip

1 files changed, 13 insertions, 11 deletions

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: