aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-21 00:55:08 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-21 00:55:08 +0800
commit3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec (patch)
treeec201f62a2cfc33bcf3a30ed9a5d5b188c63f5aa /packages/website/ts
parentf27084ced46d88164b526ea5f281637ca87d0583 (diff)
downloaddexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar
dexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.gz
dexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.bz2
dexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.lz
dexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.xz
dexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.tar.zst
dexon-sol-tools-3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec.zip
Implement tooltips
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx52
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx12
2 files changed, 56 insertions, 8 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index 4a9c99ca7..8908e457b 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/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;
+ }
+ }
+}
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index fce06c664..eecf88c34 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/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;