aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-28 02:48:04 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-28 02:48:04 +0800
commit1a06e6b305a96076afc86c8b5073a907d5670bfe (patch)
treefbe25097809c0182b0e6498fb4076dd04879a89b /packages/website/ts/components
parent490fed622868d594f0e8ff790b2dda277c117a48 (diff)
downloaddexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.tar
dexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.tar.gz
dexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.tar.bz2
dexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.tar.lz
dexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.tar.xz
dexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.tar.zst
dexon-0x-contracts-1a06e6b305a96076afc86c8b5073a907d5670bfe.zip
Add loading state for initial load and other PR feedback
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx21
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx3
2 files changed, 14 insertions, 10 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index a8f8f554f..5de041f6d 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import { BigNumber, logUtils } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
@@ -28,6 +29,7 @@ export interface AllowanceStateToggleProps {
export interface AllowanceStateToggleState {
allowanceState: AllowanceState;
prevTokenState: TokenState;
+ loadingMessage?: string;
}
const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
@@ -89,23 +91,23 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
}
private _getTooltipContent(): React.ReactNode {
const symbol = this.props.token.symbol;
- const isLockingToken = this.props.tokenState.allowance.gt(0);
switch (this.state.allowanceState) {
case AllowanceState.Loading:
+ const isLockingToken = this.props.tokenState.allowance.gt(0);
return (
- <Text noWrap={true} fontColor="white">
- {isLockingToken ? 'Locking' : 'Unlocking'} <b>{symbol}</b>
+ <Text noWrap={true} fontColor={colors.white}>
+ {this.state.loadingMessage || 'Loading...'}
</Text>
);
case AllowanceState.Locked:
return (
- <Text noWrap={true} fontColor="white">
+ <Text noWrap={true} fontColor={colors.white}>
Click to enable <b>{symbol}</b> for trading
</Text>
);
case AllowanceState.Unlocked:
return (
- <Text noWrap={true} fontColor="white">
+ <Text noWrap={true} fontColor={colors.white}>
<b>{symbol}</b> is available for trading
</Text>
);
@@ -121,14 +123,15 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
return;
}
- this.setState({
- allowanceState: AllowanceState.Loading,
- });
-
let newAllowanceAmountInBaseUnits = new BigNumber(0);
if (!this._isAllowanceSet()) {
newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
}
+ const isUnlockingToken = newAllowanceAmountInBaseUnits.gt(0);
+ this.setState({
+ allowanceState: AllowanceState.Loading,
+ loadingMessage: `${isUnlockingToken ? 'Unlocking' : 'Locking'} ${this.props.token.symbol}`,
+ });
const logData = {
tokenSymbol: this.props.token.symbol,
newAllowance: newAllowanceAmountInBaseUnits.toNumber(),
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index 4e7a4cdf2..93d6b0ebb 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/packages/website/ts/components/ui/allowance_state_view.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Spinner } from 'ts/components/ui/spinner';
@@ -29,7 +30,7 @@ export const AllowanceStateView: React.StatelessComponent<AllowanceStateViewProp
}
};
-const renderCheck = (color: string = '#37D400') => (
+const renderCheck = (color: string = colors.lightGreen) => (
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8.5" cy="8.5" r="8.5" fill={color} />
<path