aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-07-21 01:44:59 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-07-21 01:44:59 +0800
commit0f8e6b395eb2260bbb03da9de35505a7a91c5c7b (patch)
tree8c7974d2259d008f826252b00fb992323dc137e8 /packages/website/ts/components
parentb28cc6d7d300d209bee0091369a8e221eaeb4e64 (diff)
downloaddexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.tar
dexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.tar.gz
dexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.tar.bz2
dexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.tar.lz
dexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.tar.xz
dexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.tar.zst
dexon-sol-tools-0f8e6b395eb2260bbb03da9de35505a7a91c5c7b.zip
WIP for allowance toggle redesign working
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx102
-rw-r--r--packages/website/ts/components/ui/allowance_state_view.tsx2
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx10
3 files changed, 102 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 bf661dee8..495efd806 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -1,36 +1,82 @@
-import { colors } from '@0xproject/react-shared';
+import { BigNumber, logUtils } from '@0xproject/utils';
+import * as _ from 'lodash';
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');
+import { Blockchain } from 'ts/blockchain';
+import { AllowanceState, AllowanceStateView } from 'ts/components/ui/allowance_state_view';
+import { Container } from 'ts/components/ui/container';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BalanceErrs, Token, TokenState } from 'ts/types';
+import { analytics } from 'ts/utils/analytics';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
export interface AllowanceStateToggleProps {
+ networkId: number;
+ blockchain: Blockchain;
+ dispatcher: Dispatcher;
token: Token;
tokenState: TokenState;
+ userAddress: string;
+ onErrorOccurred?: (errType: BalanceErrs) => void;
+ refetchTokenStateAsync: () => Promise<void>;
}
export interface AllowanceStateToggleState {
allowanceState: AllowanceState;
+ prevAllowance: BigNumber;
}
-const flip = () => Math.random() < 0.5;
+const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
export class AllowanceStateToggle extends React.Component<AllowanceStateToggleProps, AllowanceStateToggleState> {
- public state = {
- allowanceState: flip() ? AllowanceState.Loading : AllowanceState.Locked,
+ public static defaultProps = {
+ onErrorOccurred: _.noop.bind(_),
};
+ private static _getAllowanceStateFromAllowance(allowance?: BigNumber): AllowanceState {
+ if (_.isUndefined(allowance)) {
+ return AllowanceState.Loading;
+ }
+ if (allowance.gt(0)) {
+ return AllowanceState.Unlocked;
+ }
+ return AllowanceState.Locked;
+ }
+ constructor(props: AllowanceStateToggleProps) {
+ super(props);
+ const allowance = props.tokenState.allowance;
+ this.state = {
+ allowanceState: AllowanceState.Loading,
+ prevAllowance: allowance,
+ };
+ }
+
public render(): React.ReactNode {
const tooltipId = `tooltip-id-${this.props.token.symbol}`;
return (
<Container cursor="pointer">
<ReactTooltip id={tooltipId}>{this._getTooltipContent()}</ReactTooltip>
- <div data-tip={true} data-for={tooltipId} data-place="right" data-effect="solid">
+ <div
+ data-tip={true}
+ data-for={tooltipId}
+ data-place="right"
+ data-effect="solid"
+ onClick={this._onToggleAllowanceAsync.bind(this)}
+ >
<AllowanceStateView allowanceState={this.state.allowanceState} />
</div>
</Container>
);
}
+ public componentWillReceiveProps(nextProps: AllowanceStateToggleProps): void {
+ if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
+ const allowance = nextProps.tokenState.allowance;
+ this.setState({
+ prevAllowance: allowance,
+ allowanceState: AllowanceStateToggle._getAllowanceStateFromAllowance(allowance),
+ });
+ }
+ }
private _getTooltipContent(): React.ReactNode {
const symbol = this.props.token.symbol;
switch (this.state.allowanceState) {
@@ -53,4 +99,44 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
return null;
}
}
+ private async _onToggleAllowanceAsync(): Promise<void> {
+ if (this.props.userAddress === '') {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return;
+ }
+
+ this.setState({
+ allowanceState: AllowanceState.Loading,
+ });
+
+ let newAllowanceAmountInBaseUnits = new BigNumber(0);
+ if (!this._isAllowanceSet()) {
+ newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
+ }
+ const logData = {
+ tokenSymbol: this.props.token.symbol,
+ newAllowance: newAllowanceAmountInBaseUnits.toNumber(),
+ };
+ try {
+ await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
+ analytics.track('Set Allowances Success', logData);
+ await this.props.refetchTokenStateAsync();
+ } catch (err) {
+ analytics.track('Set Allowance Failure', logData);
+ this.setState({
+ allowanceState: AllowanceStateToggle._getAllowanceStateFromAllowance(this.state.prevAllowance),
+ });
+ const errMsg = `${err}`;
+ if (utils.didUserDenyWeb3Request(errMsg)) {
+ return;
+ }
+ logUtils.log(`Unexpected error encountered: ${err}`);
+ logUtils.log(err.stack);
+ this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
+ errorReporter.report(err);
+ }
+ }
+ private _isAllowanceSet(): boolean {
+ return !this.props.tokenState.allowance.eq(0);
+ }
}
diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx
index eecf88c34..6b20d37eb 100644
--- a/packages/website/ts/components/ui/allowance_state_view.tsx
+++ b/packages/website/ts/components/ui/allowance_state_view.tsx
@@ -1,7 +1,5 @@
-import { colors } from '@0xproject/react-shared';
import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
-import { styled } from 'ts/style/theme';
export enum AllowanceState {
Locked,
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 32c56ef14..2cba993c4 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -28,7 +28,6 @@ import { NullTokenRow } from 'ts/components/wallet/null_token_row';
import { PlaceHolder } from 'ts/components/wallet/placeholder';
import { StandardIconRow } from 'ts/components/wallet/standard_icon_row';
import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { AllowanceStateToggle } from 'ts/containers/inputs/allowance_state_toggle';
import { Dispatcher } from 'ts/redux/dispatcher';
import { colors } from 'ts/style/colors';
@@ -422,7 +421,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
// refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
// />
// );
- return <AllowanceStateToggle token={config.token} tokenState={config.tokenState} />;
+ return (
+ <AllowanceStateToggle
+ blockchain={this.props.blockchain}
+ token={config.token}
+ tokenState={config.tokenState}
+ refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
+ />
+ );
}
private _renderAmount(
amount: BigNumber,