From cdcf624e9e6fe671611b239f903c2f2cb3097e7c Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 20 Jul 2018 08:52:14 -0700 Subject: Have basic lock and check working in walelt --- .../components/inputs/allowance_state_toggle.tsx | 10 ++++++ .../ts/components/ui/allowance_state_view.tsx | 42 ++++++++++++++++++++++ packages/website/ts/components/wallet/wallet.tsx | 28 ++++++++------- .../ts/containers/inputs/allowance_state_toggle.ts | 26 ++++++++++++++ 4 files changed, 93 insertions(+), 13 deletions(-) create mode 100644 packages/website/ts/components/inputs/allowance_state_toggle.tsx create mode 100644 packages/website/ts/components/ui/allowance_state_view.tsx create mode 100644 packages/website/ts/containers/inputs/allowance_state_toggle.ts (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx new file mode 100644 index 000000000..7e8628e64 --- /dev/null +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import { AllowanceStateView } from 'ts/components/ui/allowance_state_view'; + +export interface AllowanceStateToggleProps {} + +const flip = () => Math.random() < 0.5; + +export const AllowanceStateToggle: React.StatelessComponent = () => ( + +); diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx new file mode 100644 index 000000000..55ad3a889 --- /dev/null +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -0,0 +1,42 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export type AllowanceState = 'locked' | 'unlocked' | 'loading'; + +export interface AllowanceStateViewProps { + allowanceState: AllowanceState; +} + +export const AllowanceStateView: React.StatelessComponent = ({ allowanceState }) => { + switch (allowanceState) { + case 'locked': + return renderLock(); + case 'unlocked': + return renderCheck(); + case 'loading': + return
'...'
; + default: + return null; + } +}; + +const renderCheck = (color: string = '#37D400') => ( + + + + +); + +const renderLock = () => ( + + + +); diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 40a8a23ea..84c091b5c 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -29,6 +29,7 @@ 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'; import { @@ -396,10 +397,10 @@ export class Wallet extends React.Component { const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below - const toggle = shouldShowToggle ? ( - this._renderAllowanceToggle(config.allowanceToggleConfig) - ) : ( -
+ const toggle = ( + + {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} + ); return (
@@ -412,15 +413,16 @@ export class Wallet extends React.Component { } private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { // TODO: Error handling - return ( - this.props.refetchTokenStateAsync(config.token.address)} - /> - ); + // return ( + // this.props.refetchTokenStateAsync(config.token.address)} + // /> + // ); + return ; } private _renderAmount( amount: BigNumber, diff --git a/packages/website/ts/containers/inputs/allowance_state_toggle.ts b/packages/website/ts/containers/inputs/allowance_state_toggle.ts new file mode 100644 index 000000000..6e2698b0b --- /dev/null +++ b/packages/website/ts/containers/inputs/allowance_state_toggle.ts @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { Blockchain } from 'ts/blockchain'; +import { State } from 'ts/redux/reducer'; +import { BalanceErrs, Token, TokenState } from 'ts/types'; + +import { AllowanceStateToggle as AllowanceStateToggleComponent } from 'ts/components/inputs/allowance_state_toggle'; +import { Dispatcher } from 'ts/redux/dispatcher'; + +interface AllowanceStateToggleProps {} + +interface ConnectedState {} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: AllowanceStateToggleProps): ConnectedState => ({}); + +// const mapDispatchTopProps = (dispatch: Dispatch): ConnectedDispatch => ({}); + +export const AllowanceStateToggle: React.ComponentClass = connect( + mapStateToProps, + // mapDispatchTopProps, +)(AllowanceStateToggleComponent); -- cgit v1.2.3 From f27084ced46d88164b526ea5f281637ca87d0583 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 20 Jul 2018 09:16:55 -0700 Subject: Add loading state --- packages/website/ts/components/inputs/allowance_state_toggle.tsx | 2 +- packages/website/ts/components/ui/allowance_state_view.tsx | 3 ++- packages/website/ts/components/wallet/wallet.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 7e8628e64..4a9c99ca7 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -6,5 +6,5 @@ export interface AllowanceStateToggleProps {} const flip = () => Math.random() < 0.5; export const AllowanceStateToggle: React.StatelessComponent = () => ( - + ); diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index 55ad3a889..fce06c664 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -1,4 +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'; @@ -15,7 +16,7 @@ export const AllowanceStateView: React.StatelessComponent'...'
; + return ; default: return null; } diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 84c091b5c..f5e054793 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -398,7 +398,7 @@ export class Wallet extends React.Component { // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below const toggle = ( - + {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} ); -- cgit v1.2.3 From 3bf12a98a7062f02edb1cd3f4e1209ac34dc55ec Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 20 Jul 2018 09:55:08 -0700 Subject: Implement tooltips --- .../components/inputs/allowance_state_toggle.tsx | 52 ++++++++++++++++++++-- .../ts/components/ui/allowance_state_view.tsx | 12 +++-- 2 files changed, 56 insertions(+), 8 deletions(-) (limited to 'packages') 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 = () => ( - -); +export class AllowanceStateToggle extends React.Component { + public state = { + allowanceState: flip() ? AllowanceState.Loading : AllowanceState.Locked, + }; + public render(): React.ReactNode { + return ( +
+ {this._getTooltipContent()} +
+ +
+
+ ); + } + 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 ( + + Click to enable WETH for trading + + ); + case AllowanceState.Unlocked: + return ( + + WETH is available for trading + + ); + 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 = ({ allowanceState }) => { switch (allowanceState) { - case 'locked': + case AllowanceState.Locked: return renderLock(); - case 'unlocked': + case AllowanceState.Unlocked: return renderCheck(); - case 'loading': + case AllowanceState.Loading: return ; default: return null; -- cgit v1.2.3 From b28cc6d7d300d209bee0091369a8e221eaeb4e64 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 20 Jul 2018 10:14:17 -0700 Subject: Show token name dynamically in tooltip --- .../components/inputs/allowance_state_toggle.tsx | 24 ++++++++++++---------- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/wallet/wallet.tsx | 2 +- .../ts/containers/inputs/allowance_state_toggle.ts | 5 ++++- 4 files changed, 19 insertions(+), 13 deletions(-) (limited to 'packages') 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 { @@ -21,16 +21,18 @@ export class AllowanceStateToggle extends React.Component - {this._getTooltipContent()} -
+ + {this._getTooltipContent()} +
-
+ ); } 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 - Click to enable WETH for trading + Click to enable {symbol} for trading ); case AllowanceState.Unlocked: return ( - WETH is available for trading + {symbol} is available for trading ); 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 = 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 { // refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} // /> // ); - return ; + return ; } private _renderAmount( amount: BigNumber, diff --git a/packages/website/ts/containers/inputs/allowance_state_toggle.ts b/packages/website/ts/containers/inputs/allowance_state_toggle.ts index 6e2698b0b..cdda5ecf0 100644 --- a/packages/website/ts/containers/inputs/allowance_state_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_state_toggle.ts @@ -8,7 +8,10 @@ import { BalanceErrs, Token, TokenState } from 'ts/types'; import { AllowanceStateToggle as AllowanceStateToggleComponent } from 'ts/components/inputs/allowance_state_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; -interface AllowanceStateToggleProps {} +interface AllowanceStateToggleProps { + token: Token; + tokenState: TokenState; +} interface ConnectedState {} -- cgit v1.2.3 From 0f8e6b395eb2260bbb03da9de35505a7a91c5c7b Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 20 Jul 2018 10:44:59 -0700 Subject: WIP for allowance toggle redesign working --- .../components/inputs/allowance_state_toggle.tsx | 102 +++++++++++++++++++-- .../ts/components/ui/allowance_state_view.tsx | 2 - packages/website/ts/components/wallet/wallet.tsx | 10 +- .../ts/containers/inputs/allowance_state_toggle.ts | 20 +++- 4 files changed, 118 insertions(+), 16 deletions(-) (limited to 'packages') 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; } 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 { - 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 ( {this._getTooltipContent()} -
+
); } + 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 { + 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 { // refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} // /> // ); - return ; + return ( + this.props.refetchTokenStateAsync(config.token.address)} + /> + ); } private _renderAmount( amount: BigNumber, diff --git a/packages/website/ts/containers/inputs/allowance_state_toggle.ts b/packages/website/ts/containers/inputs/allowance_state_toggle.ts index cdda5ecf0..d6ff11f84 100644 --- a/packages/website/ts/containers/inputs/allowance_state_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_state_toggle.ts @@ -9,21 +9,33 @@ import { AllowanceStateToggle as AllowanceStateToggleComponent } from 'ts/compon import { Dispatcher } from 'ts/redux/dispatcher'; interface AllowanceStateToggleProps { + blockchain: Blockchain; + onErrorOccurred?: (errType: BalanceErrs) => void; token: Token; tokenState: TokenState; + isDisabled?: boolean; + refetchTokenStateAsync: () => Promise; } -interface ConnectedState {} +interface ConnectedState { + networkId: number; + userAddress: string; +} interface ConnectedDispatch { dispatcher: Dispatcher; } -const mapStateToProps = (state: State, _ownProps: AllowanceStateToggleProps): ConnectedState => ({}); +const mapStateToProps = (state: State, _ownProps: AllowanceStateToggleProps): ConnectedState => ({ + networkId: state.networkId, + userAddress: state.userAddress, +}); -// const mapDispatchTopProps = (dispatch: Dispatch): ConnectedDispatch => ({}); +const mapDispatchTopProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); export const AllowanceStateToggle: React.ComponentClass = connect( mapStateToProps, - // mapDispatchTopProps, + mapDispatchTopProps, )(AllowanceStateToggleComponent); -- cgit v1.2.3 From b9f5c9383067874d2bb87dcc68808d4563f45363 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 14:19:19 -0700 Subject: Fix wrap button alignment issue --- .../components/inputs/allowance_state_toggle.tsx | 30 +++-- .../ts/components/inputs/allowance_toggle.tsx | 140 --------------------- .../onboarding/portal_onboarding_flow.tsx | 19 ++- packages/website/ts/components/token_balances.tsx | 5 +- packages/website/ts/components/wallet/wallet.tsx | 28 ++--- .../ts/containers/inputs/allowance_state_toggle.ts | 1 - .../ts/containers/inputs/allowance_toggle.ts | 41 ------ 7 files changed, 40 insertions(+), 224 deletions(-) delete mode 100644 packages/website/ts/components/inputs/allowance_toggle.tsx delete mode 100644 packages/website/ts/containers/inputs/allowance_toggle.ts (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 495efd806..ce439e147 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -24,7 +24,7 @@ export interface AllowanceStateToggleProps { export interface AllowanceStateToggleState { allowanceState: AllowanceState; - prevAllowance: BigNumber; + prevTokenState: TokenState; } const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1); @@ -33,21 +33,21 @@ export class AllowanceStateToggle extends React.Component void; - refetchTokenStateAsync: () => Promise; -} - -interface AllowanceToggleState { - isSpinnerVisible: boolean; - prevAllowance: BigNumber; -} - -const styles: Styles = { - baseThumbStyle: { - height: 10, - width: 10, - top: 6, - backgroundColor: colors.white, - boxShadow: `0px 0px 0px ${colors.allowanceToggleShadow}`, - }, - offThumbStyle: { - left: 4, - }, - onThumbStyle: { - left: 25, - }, - baseTrackStyle: { - width: 25, - }, - offTrackStyle: { - backgroundColor: colors.grey300, - }, - onTrackStyle: { - backgroundColor: colors.mediumBlue, - }, -}; - -export class AllowanceToggle extends React.Component { - public static defaultProps = { - onErrorOccurred: _.noop.bind(_), - isDisabled: false, - }; - constructor(props: AllowanceToggleProps) { - super(props); - this.state = { - isSpinnerVisible: false, - prevAllowance: props.tokenState.allowance, - }; - } - public componentWillReceiveProps(nextProps: AllowanceToggleProps): void { - if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) { - this.setState({ - isSpinnerVisible: false, - prevAllowance: nextProps.tokenState.allowance, - }); - } - } - public render(): React.ReactNode { - return ( -
-
- -
- {this.state.isSpinnerVisible && ( -
- -
- )} -
- ); - } - private async _onToggleAllowanceAsync(): Promise { - if (this.props.userAddress === '') { - this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); - return; - } - - this.setState({ - isSpinnerVisible: true, - }); - - 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({ - isSpinnerVisible: false, - }); - 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/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index f395674a1..522687758 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -21,7 +21,7 @@ import { WrapEthOnboardingStep2, WrapEthOnboardingStep3, } from 'ts/components/onboarding/wrap_eth_onboarding_step'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; +import { AllowanceStateToggle } from 'ts/containers/inputs/allowance_state_toggle'; import { BrowserType, ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; import { utils } from 'ts/utils/utils'; @@ -149,8 +149,8 @@ class PlainPortalOnboardingFlow extends React.Component ), @@ -243,15 +243,15 @@ class PlainPortalOnboardingFlow extends React.Component this.props.refetchTokenStateAsync(token.address)} diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index c8d80702b..cfade8f13 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -24,7 +24,7 @@ import { SendButton } from 'ts/components/send_button'; import { HelpTooltip } from 'ts/components/ui/help_tooltip'; import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button'; import { TokenIcon } from 'ts/components/ui/token_icon'; -import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; +import { AllowanceStateToggle } from 'ts/containers/inputs/allowance_state_toggle'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; import { @@ -361,12 +361,11 @@ export class TokenBalances extends React.Component - diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 2cba993c4..02b403220 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -74,14 +74,14 @@ interface WalletState { isHoveringSidebar: boolean; } -interface AllowanceToggleConfig { +interface AllowanceStateToggleConfig { token: Token; tokenState: TokenState; } interface AccessoryItemConfig { wrappedEtherDirection?: Side; - allowanceToggleConfig?: AllowanceToggleConfig; + allowanceStateToggleConfig?: AllowanceStateToggleConfig; } const ETHER_ICON_PATH = '/images/ether.png'; @@ -89,7 +89,8 @@ const ICON_DIMENSION = 28; const BODY_ITEM_KEY = 'BODY'; const HEADER_ITEM_KEY = 'HEADER'; const ETHER_ITEM_KEY = 'ETHER'; -const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; +const WRAP_ROW_ALLOWANCE_TOGGLE_WIDTH = 67; +const ALLOWANCE_TOGGLE_WIDTH = 56; const PLACEHOLDER_COLOR = colors.grey300; const LOADING_ROWS_COUNT = 6; @@ -338,7 +339,7 @@ export class Wallet extends React.Component { ); const accessoryItemConfig: AccessoryItemConfig = { wrappedEtherDirection, - allowanceToggleConfig: { + allowanceStateToggleConfig: { token, tokenState, }, @@ -393,12 +394,14 @@ export class Wallet extends React.Component { } private _renderAccessoryItems(config: AccessoryItemConfig): React.ReactElement<{}> { const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection); - const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); + const shouldShowToggle = !_.isUndefined(config.allowanceStateToggleConfig); // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with // the "unwrap" button in the row below + const isWrapEtherRow = shouldShowWrappedEtherAction && config.wrappedEtherDirection === Side.Deposit; + const width = isWrapEtherRow ? WRAP_ROW_ALLOWANCE_TOGGLE_WIDTH : ALLOWANCE_TOGGLE_WIDTH; const toggle = ( - - {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} + + {shouldShowToggle && this._renderAllowanceToggle(config.allowanceStateToggleConfig)} ); return ( @@ -410,17 +413,8 @@ export class Wallet extends React.Component {
); } - private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode { + private _renderAllowanceToggle(config: AllowanceStateToggleConfig): React.ReactNode { // TODO: Error handling - // return ( - // this.props.refetchTokenStateAsync(config.token.address)} - // /> - // ); return ( void; token: Token; tokenState: TokenState; - isDisabled?: boolean; refetchTokenStateAsync: () => Promise; } diff --git a/packages/website/ts/containers/inputs/allowance_toggle.ts b/packages/website/ts/containers/inputs/allowance_toggle.ts deleted file mode 100644 index 545708f92..000000000 --- a/packages/website/ts/containers/inputs/allowance_toggle.ts +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import { connect } from 'react-redux'; -import { Dispatch } from 'redux'; -import { Blockchain } from 'ts/blockchain'; -import { State } from 'ts/redux/reducer'; -import { BalanceErrs, Token, TokenState } from 'ts/types'; - -import { AllowanceToggle as AllowanceToggleComponent } from 'ts/components/inputs/allowance_toggle'; -import { Dispatcher } from 'ts/redux/dispatcher'; - -interface AllowanceToggleProps { - blockchain: Blockchain; - onErrorOccurred?: (errType: BalanceErrs) => void; - token: Token; - tokenState: TokenState; - isDisabled?: boolean; - refetchTokenStateAsync: () => Promise; -} - -interface ConnectedState { - networkId: number; - userAddress: string; -} - -interface ConnectedDispatch { - dispatcher: Dispatcher; -} - -const mapStateToProps = (state: State, _ownProps: AllowanceToggleProps): ConnectedState => ({ - networkId: state.networkId, - userAddress: state.userAddress, -}); - -const mapDispatchTopProps = (dispatch: Dispatch): ConnectedDispatch => ({ - dispatcher: new Dispatcher(dispatch), -}); - -export const AllowanceToggle: React.ComponentClass = connect( - mapStateToProps, - mapDispatchTopProps, -)(AllowanceToggleComponent); -- cgit v1.2.3 From 3890f8224d371cecbd5c9d0e3d5c4b54f4381fdb Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 14:44:31 -0700 Subject: Fix tooltip wrapping issue in onboardin --- .../ts/components/inputs/allowance_state_toggle.tsx | 21 +++++++++++++-------- packages/website/ts/components/ui/text.tsx | 3 +++ 2 files changed, 16 insertions(+), 8 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index ce439e147..a812ead5d 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -5,6 +5,7 @@ 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 { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, Token, TokenState } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; @@ -55,12 +56,13 @@ export class AllowanceStateToggle extends React.Component - {this._getTooltipContent()} + + {this._getTooltipContent()} +
@@ -76,7 +78,6 @@ export class AllowanceStateToggle extends React.Component + Please confirm in MetaMask + + ); case AllowanceState.Locked: return ( - + Click to enable {symbol} for trading - + ); case AllowanceState.Unlocked: return ( - + {symbol} is available for trading - + ); default: return null; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 315f72854..72bee8c0a 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -18,6 +18,7 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent) => void; hoverColor?: string; + noWrap?: boolean; } const PlainText: React.StatelessComponent = ({ children, className, onClick, Tag }) => ( @@ -37,6 +38,7 @@ export const Text = styled(PlainText)` ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; + ${props => (props.noWrap ? 'white-space: nowrap' : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } @@ -50,6 +52,7 @@ Text.defaultProps = { lineHeight: '1.5em', textDecorationLine: 'none', Tag: 'div', + noWrap: false, }; Text.displayName = 'Text'; -- cgit v1.2.3 From 5b6cf447e5793a775d8d590647c85971a6746909 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 15:09:47 -0700 Subject: Make tooltip appear to the left of the toggle when onboarding in progress --- packages/website/ts/components/inputs/allowance_state_toggle.tsx | 5 ++++- packages/website/ts/components/onboarding/onboarding_tooltip.tsx | 2 +- packages/website/ts/components/portal/portal.tsx | 4 ++++ packages/website/ts/components/ui/pointer.tsx | 7 ++++++- packages/website/ts/components/wallet/wallet.tsx | 3 +++ packages/website/ts/containers/inputs/allowance_state_toggle.ts | 2 ++ 6 files changed, 20 insertions(+), 3 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index a812ead5d..764013682 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -5,6 +5,7 @@ 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 { PointerDirection } from 'ts/components/ui/pointer'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, Token, TokenState } from 'ts/types'; @@ -21,6 +22,7 @@ export interface AllowanceStateToggleProps { userAddress: string; onErrorOccurred?: (errType: BalanceErrs) => void; refetchTokenStateAsync: () => Promise; + tooltipDirection?: PointerDirection; } export interface AllowanceStateToggleState { @@ -33,6 +35,7 @@ const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1 export class AllowanceStateToggle extends React.Component { public static defaultProps = { onErrorOccurred: _.noop.bind(_), + tooltipDirection: PointerDirection.Right, }; private static _getAllowanceState(tokenState: TokenState): AllowanceState { if (!tokenState.isLoaded) { @@ -62,7 +65,7 @@ export class AllowanceStateToggle extends React.Component diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 15d47908d..ff5f0bab6 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -24,7 +24,7 @@ export const OnboardingTooltip: React.StatelessComponent ); }; OnboardingTooltip.defaultProps = { - pointerDisplay: 'left', + pointerDisplay: PointerDirection.Left, }; OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 1790a9678..c61d04906 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -24,6 +24,7 @@ import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Image } from 'ts/components/ui/image'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; @@ -355,6 +356,9 @@ export class Portal extends React.Component { onAddToken={this._onAddToken.bind(this)} onRemoveToken={this._onRemoveToken.bind(this)} refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} + toggleTooltipDirection={ + this.props.isPortalOnboardingShowing ? PointerDirection.Left : PointerDirection.Right + } /> {!isMobile && {this._renderStartOnboarding()}} diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index 448786bb4..db0a4188d 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -2,7 +2,12 @@ import { colors } from '@0xproject/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; -export type PointerDirection = 'top' | 'right' | 'bottom' | 'left'; +export enum PointerDirection { + Top = 'top', + Right = 'right', + Bottom = 'bottom', + Left = 'left', +} export interface PointerProps { className?: string; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 02b403220..6abaa840b 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -14,6 +14,7 @@ import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { CopyAddressSimpleMenuItem, DifferentWalletSimpleMenuItem, @@ -67,6 +68,7 @@ export interface WalletProps { onRemoveToken: () => void; refetchTokenStateAsync: (tokenAddress: string) => Promise; style: React.CSSProperties; + toggleTooltipDirection?: PointerDirection; } interface WalletState { @@ -420,6 +422,7 @@ export class Wallet extends React.Component { blockchain={this.props.blockchain} token={config.token} tokenState={config.tokenState} + tooltipDirection={this.props.toggleTooltipDirection} refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)} /> ); diff --git a/packages/website/ts/containers/inputs/allowance_state_toggle.ts b/packages/website/ts/containers/inputs/allowance_state_toggle.ts index 2a099b557..70712685e 100644 --- a/packages/website/ts/containers/inputs/allowance_state_toggle.ts +++ b/packages/website/ts/containers/inputs/allowance_state_toggle.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { Blockchain } from 'ts/blockchain'; +import { PointerDirection } from 'ts/components/ui/pointer'; import { State } from 'ts/redux/reducer'; import { BalanceErrs, Token, TokenState } from 'ts/types'; @@ -14,6 +15,7 @@ interface AllowanceStateToggleProps { token: Token; tokenState: TokenState; refetchTokenStateAsync: () => Promise; + tooltipDirection?: PointerDirection; } interface ConnectedState { -- cgit v1.2.3 From c0d75c64767c36b2d08d5392d49f8f3994ba6f32 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 15:19:06 -0700 Subject: Hide tooltip after allowance toggle click --- packages/website/ts/components/inputs/allowance_state_toggle.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 764013682..4f986dadc 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -59,7 +59,7 @@ export class AllowanceStateToggle extends React.Component - + {this._getTooltipContent()}
{ + // Close all tooltips + ReactTooltip.hide(); if (this.props.userAddress === '') { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); return; -- cgit v1.2.3 From 88556d31e21e8858938788a0af7648e5bf7ae213 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 15:32:12 -0700 Subject: Add unlocking and locking token copy --- packages/website/ts/components/inputs/allowance_state_toggle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 4f986dadc..a8f8f554f 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -89,12 +89,12 @@ export class AllowanceStateToggle extends React.Component - Please confirm in MetaMask + {isLockingToken ? 'Locking' : 'Unlocking'} {symbol} ); case AllowanceState.Locked: -- cgit v1.2.3 From ee71f574538f1c667e77c351bb02d13c2d23f863 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 15:51:07 -0700 Subject: Increase allowance toggle loading spinner size by 1 --- packages/website/ts/components/ui/allowance_state_view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index 6b20d37eb..c9a96859c 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -18,7 +18,7 @@ export const AllowanceStateView: React.StatelessComponent; + return ; default: return null; } -- cgit v1.2.3 From c505ba6f3e05f4bb415f50352fbb124fec3a71ad Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 15:58:33 -0700 Subject: Center allowance toggles in account page --- packages/website/ts/components/token_balances.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index cfade8f13..5ac0f0caf 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -361,13 +361,15 @@ export class TokenBalances extends React.Component - +
+ +
{utils.isTestNetwork(this.props.networkId) && ( -- cgit v1.2.3 From 490fed622868d594f0e8ff790b2dda277c117a48 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 24 Jul 2018 19:03:52 -0700 Subject: Make a non-jank Spinner component and use it --- .../ts/components/ui/allowance_state_view.tsx | 9 +++- packages/website/ts/components/ui/spinner.tsx | 54 ++++++++++++++++++++++ packages/website/ts/style/keyframes.ts | 22 +++++++++ 3 files changed, 83 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/components/ui/spinner.tsx create mode 100644 packages/website/ts/style/keyframes.ts (limited to 'packages') diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index c9a96859c..4e7a4cdf2 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -1,5 +1,6 @@ -import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Spinner } from 'ts/components/ui/spinner'; export enum AllowanceState { Locked, @@ -18,7 +19,11 @@ export const AllowanceStateView: React.StatelessComponent; + return ( + + + + ); default: return null; } diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx new file mode 100644 index 000000000..e8670cc3e --- /dev/null +++ b/packages/website/ts/components/ui/spinner.tsx @@ -0,0 +1,54 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +import { dash, rotate } from 'ts/style/keyframes'; + +interface SpinnerSvgProps { + color: string; + size: number; + viewBox?: string; +} + +const SpinnerSvg: React.StatelessComponent = props => ; + +const StyledSpinner = styled(SpinnerSvg)` + animation: ${rotate} 3s linear infinite; + margin: ${props => `-${props.size / 2}px 0 0 -${props.size / 2}px`}; + margin-top: ${props => `-${props.size / 2}px`}; + margin-left: ${props => `-${props.size / 2}px`}; + margin-bottom: 0px; + margin-right: 0px; + size: ${props => `${props.size}px`}; + height: ${props => `${props.size}px`}; + + & .path { + stroke: ${props => props.color}; + stroke-linecap: round; + animation: ${dash} 2.5s ease-in-out infinite; + } +`; + +export interface SpinnerProps { + size?: number; + strokeSize?: number; + color?: string; +} + +export const Spinner: React.StatelessComponent = ({ size, strokeSize, color }) => { + const c = size / 2; + const r = c - strokeSize; + return ( + + + + ); +}; + +Spinner.defaultProps = { + size: 50, + color: colors.mediumBlue, + strokeSize: 4, +}; + +Spinner.displayName = 'Spinner'; diff --git a/packages/website/ts/style/keyframes.ts b/packages/website/ts/style/keyframes.ts new file mode 100644 index 000000000..28ea50247 --- /dev/null +++ b/packages/website/ts/style/keyframes.ts @@ -0,0 +1,22 @@ +import { keyframes } from 'ts/style/theme'; + +export const rotate = keyframes` + 100% { + transform: rotate(360deg); + } +`; + +export const dash = keyframes` + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +`; -- cgit v1.2.3 From 1a06e6b305a96076afc86c8b5073a907d5670bfe Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 27 Jul 2018 11:48:04 -0700 Subject: Add loading state for initial load and other PR feedback --- .../ts/components/inputs/allowance_state_toggle.tsx | 21 ++++++++++++--------- .../ts/components/ui/allowance_state_view.tsx | 3 ++- 2 files changed, 14 insertions(+), 10 deletions(-) (limited to 'packages') 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 - {isLockingToken ? 'Locking' : 'Unlocking'} {symbol} + + {this.state.loadingMessage || 'Loading...'} ); case AllowanceState.Locked: return ( - + Click to enable {symbol} for trading ); case AllowanceState.Unlocked: return ( - + {symbol} is available for trading ); @@ -121,14 +123,15 @@ export class AllowanceStateToggle extends React.Component ( +const renderCheck = (color: string = colors.lightGreen) => ( Date: Fri, 27 Jul 2018 11:49:06 -0700 Subject: Remove unused variable --- packages/website/ts/components/inputs/allowance_state_toggle.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages') diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 5de041f6d..39d2e3030 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -93,7 +93,6 @@ export class AllowanceStateToggle extends React.Component {this.state.loadingMessage || 'Loading...'} -- cgit v1.2.3