aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-21 01:14:17 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-21 01:14:17 +0800
commitb28cc6d7d300d209bee0091369a8e221eaeb4e64 (patch)
tree583dffa9f677fb7f15799e0c6e637fb9eb29ed08 /packages/website/ts/components
parent3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec (diff)
downloaddexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.tar
dexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.tar.gz
dexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.tar.bz2
dexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.tar.lz
dexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.tar.xz
dexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.tar.zst
dexon-sol-tools-b28cc6d7d300d209bee0091369a8e221eaeb4e64.zip
Show token name dynamically in tooltip
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx24
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx2
3 files changed, 15 insertions, 12 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:
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 427cc6cc7..afc2c08a4 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/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 => {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index f5e054793..32c56ef14 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/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,