aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-06 12:36:05 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-07 01:11:30 +0800
commit3898b8e8ab083689221e39de6b18fe31e6699d38 (patch)
tree3a391b102aad84020edd74ee5912102a86dd7ada /packages/website/ts/components
parent7ee7f9978049383030be8fd95100a9dfcd1923a3 (diff)
downloaddexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.tar
dexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.tar.gz
dexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.tar.bz2
dexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.tar.lz
dexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.tar.xz
dexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.tar.zst
dexon-sol-tools-3898b8e8ab083689221e39de6b18fe31e6699d38.zip
Wrap AllowanceToggle in redux container
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx8
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx15
-rw-r--r--packages/website/ts/components/token_balances.tsx5
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx7
4 files changed, 24 insertions, 11 deletions
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index a8df4935a..ca4b89f77 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -18,11 +18,11 @@ interface AllowanceToggleProps {
networkId: number;
blockchain: Blockchain;
dispatcher: Dispatcher;
- onErrorOccurred: (errType: BalanceErrs) => void;
token: Token;
tokenState: TokenState;
userAddress: string;
- isDisabled: boolean;
+ isDisabled?: boolean;
+ onErrorOccurred?: (errType: BalanceErrs) => void;
refetchTokenStateAsync: () => Promise<void>;
}
@@ -57,6 +57,10 @@ const styles: Styles = {
};
export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
+ public static defaultProps = {
+ onErrorOccurred: _.noop,
+ isDisabled: false,
+ };
constructor(props: AllowanceToggleProps) {
super(props);
this.state = {
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index bf52684d7..65cb20733 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -5,6 +5,7 @@ import { BigNumber } from '@0xproject/utils';
import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { utils } from 'ts/utils/utils';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
export interface PortalOnboardingFlowProps {
stepIndex: number;
@@ -77,6 +78,12 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
placement: 'right',
continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
},
+ {
+ target: '.weth-row',
+ content: 'Unlock your tokens for trading. You only need to do this once for each token.',
+ placement: 'right',
+ continueButtonDisplay: 'disabled',
+ },
];
return steps;
}
@@ -125,4 +132,12 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
this.props.updateIsRunning(true);
}
}
+ private _renderAllowanceToggle(): React.ReactNode {
+ return (
+ <AllowanceToggle
+ blockchain={this.props.blockchain}
+ refetchTokenStateAsync={this.props.refetchTokenStateAsync}
+ />
+ );
+ }
}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 2bc065b0f..f95bfb39d 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -22,7 +22,7 @@ import ReactTooltip = require('react-tooltip');
import firstBy = require('thenby');
import { Blockchain } from 'ts/blockchain';
import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { SendButton } from 'ts/components/send_button';
import { HelpTooltip } from 'ts/components/ui/help_tooltip';
import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
@@ -362,13 +362,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
</TableRowColumn>
<TableRowColumn>
<AllowanceToggle
- networkId={this.props.networkId}
blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
token={token}
tokenState={tokenState}
onErrorOccurred={this._onErrorOccurred.bind(this)}
- userAddress={this.props.userAddress}
isDisabled={!tokenState.isLoaded}
refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)}
/>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 37233930e..f8ec05790 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -23,7 +23,7 @@ import ReactTooltip = require('react-tooltip');
import firstBy = require('thenby');
import { Blockchain } from 'ts/blockchain';
-import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { Container } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
import { Identicon } from 'ts/components/ui/identicon';
@@ -428,15 +428,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
);
}
private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode {
+ // TODO: Error handling
return (
<AllowanceToggle
- networkId={this.props.networkId}
blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
token={config.token}
tokenState={config.tokenState}
- onErrorOccurred={_.noop} // TODO: Error handling
- userAddress={this.props.userAddress}
isDisabled={!config.tokenState.isLoaded}
refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
/>