Show token name dynamically in tooltip

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:

packages/website/ts/components/ui/container.tsx

@@ -31,6 +31,7 @@ export interface ContainerProps {
     bottom?: string;
     zIndex?: number;
     Tag?: ContainerTag;
+    cursor?: string;
 }
 
 export const Container: React.StatelessComponent<ContainerProps> = props => {

packages/website/ts/components/wallet/wallet.tsx

@@ -422,7 +422,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         //         refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
         //     />
         // );
-        return <AllowanceStateToggle />;
+        return <AllowanceStateToggle token={config.token} tokenState={config.tokenState} />;
     }
     private _renderAmount(
         amount: BigNumber,

packages/website/ts/containers/inputs/allowance_state_toggle.ts

@@ -8,7 +8,10 @@ import { BalanceErrs, Token, TokenState } from 'ts/types';
 import { AllowanceStateToggle as AllowanceStateToggleComponent } from 'ts/components/inputs/allowance_state_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
 
-interface AllowanceStateToggleProps {}
+interface AllowanceStateToggleProps {
+    token: Token;
+    tokenState: TokenState;
+}
 
 interface ConnectedState {}