diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-06-07 07:12:47 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-06-07 07:12:47 +0800 |
commit | 5989844f1c3d00f57f1ab86a00aa97e17751c576 (patch) | |
tree | 35e5f4042e9e7d0ffaec51d1aa94430dae1ca83f | |
parent | 785b9811f30869f01242ce9ff81c282bf7f5352f (diff) | |
parent | 14e3f413a23f9ee41d880539f98e2957708b035f (diff) | |
download | dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.gz dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.bz2 dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.lz dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.xz dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.zst dexon-0x-contracts-5989844f1c3d00f57f1ab86a00aa97e17751c576.zip |
Merge pull request #672 from 0xProject/feature/website/account-management-polish
Account management polish
9 files changed, 102 insertions, 39 deletions
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index d647bba80..9ac78e80e 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -20,7 +20,7 @@ interface EthWethConversionDialogProps { onCancelled: () => void; isOpen: boolean; token: Token; - etherBalanceInWei: BigNumber; + etherBalanceInWei?: BigNumber; lastForceTokenStateRefetch: number; } @@ -60,7 +60,7 @@ export class EthWethConversionDialog extends React.Component< <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />, ]; const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; - return ( + return !_.isUndefined(this.props.etherBalanceInWei) ? ( <Dialog title={title} titleStyle={{ fontWeight: 100 }} @@ -70,7 +70,7 @@ export class EthWethConversionDialog extends React.Component< > {this._renderConversionDialogBody()} </Dialog> - ); + ) : null; } private _renderConversionDialogBody(): React.ReactNode { const explanation = diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index 2fb35cc1c..4b91a2ebd 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -18,7 +18,7 @@ interface EthWethConversionButtonProps { ethToken: Token; dispatcher: Dispatcher; blockchain: Blockchain; - userEtherBalanceInWei?: BigNumber; + userEtherBalanceInWei: BigNumber; isOutdatedWrappedEther: boolean; onConversionSuccessful?: () => void; isDisabled?: boolean; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 1db5ff77f..b84e15857 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -35,6 +35,7 @@ interface EthWrappersProps { userAddress: string; userEtherBalanceInWei?: BigNumber; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; } interface EthWrappersState { @@ -43,6 +44,9 @@ interface EthWrappersState { } export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> { + public static defaultProps: Partial<EthWrappersProps> = { + isFullWidth: false, + }; private _isUnmounted: boolean; constructor(props: EthWrappersProps) { super(props); @@ -93,12 +97,12 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt EtherscanLinkSuffixes.Address, ); const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH); - const userEtherBalanceInEth = Web3Wrapper.toUnitAmount( - this.props.userEtherBalanceInWei, - constants.DECIMAL_PLACES_ETH, - ); + const userEtherBalanceInEth = !_.isUndefined(this.props.userEtherBalanceInWei) + ? Web3Wrapper.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH) + : undefined; + const rootClassName = this.props.isFullWidth ? 'clearfix' : 'clearfix lg-px4 md-px4 sm-px2'; return ( - <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}> + <div className={rootClassName} style={{ minHeight: 600 }}> <div className="relative"> <h3>ETH Wrapper</h3> <div className="absolute" style={{ top: 0, right: 0 }}> @@ -116,7 +120,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <div> <div className="py2">Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.</div> <div> - <Table selectable={false} style={{ backgroundColor: colors.grey50 }}> + <Table selectable={false} style={{ backgroundColor: 'transparent' }}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> <TableHeaderColumn>ETH Token</TableHeaderColumn> @@ -143,7 +147,11 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> </TableRowColumn> <TableRowColumn> - {userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH + {!_.isUndefined(userEtherBalanceInEth) ? ( + `${userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH` + ) : ( + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + )} </TableRowColumn> <TableRowColumn> <EthWethConversionButton @@ -157,6 +165,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt dispatcher={this.props.dispatcher} blockchain={this.props.blockchain} userEtherBalanceInWei={this.props.userEtherBalanceInWei} + isDisabled={_.isUndefined(userEtherBalanceInEth)} /> </TableRowColumn> </TableRow> @@ -203,7 +212,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt it to the updated WETH token. </div> <div> - <Table selectable={false} style={{ backgroundColor: colors.grey50 }}> + <Table selectable={false} style={{ backgroundColor: 'transparent' }}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> <TableHeaderColumn>WETH Version</TableHeaderColumn> diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 0168ec8f6..b6b52993e 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -39,6 +39,8 @@ interface FillOrderProps { initialOrder: Order; dispatcher: Dispatcher; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; + shouldHideHeader?: boolean; } interface FillOrderState { @@ -61,6 +63,10 @@ interface FillOrderState { } export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { + public static defaultProps: Partial<FillOrderProps> = { + isFullWidth: false, + shouldHideHeader: false, + }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { super(props); @@ -97,10 +103,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this._isUnmounted = true; } public render(): React.ReactNode { + const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return ( - <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}> - <h3>Fill an order</h3> - <Divider /> + <div className={rootClassName} style={{ minHeight: 600 }}> + {!this.props.shouldHideHeader && ( + <div> + <h3>Fill an order</h3> + <Divider /> + </div> + )} <div> {!this.props.isOrderInUrl && ( <div> diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 5f968a5e4..52e3b73cd 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -47,6 +47,8 @@ interface GenerateOrderFormProps { sideToAssetToken: SideToAssetToken; tokenByAddress: TokenByAddress; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; + shouldHideHeader?: boolean; } interface GenerateOrderFormState { @@ -56,6 +58,10 @@ interface GenerateOrderFormState { } export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> { + public static defaultProps: Partial<GenerateOrderFormProps> = { + isFullWidth: false, + shouldHideHeader: false, + }; constructor(props: GenerateOrderFormProps) { super(props); this.state = { @@ -80,10 +86,15 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists(); const initialTakerAddress = this.props.orderTakerAddress === constants.NULL_ADDRESS ? '' : this.props.orderTakerAddress; + const rootClassName = this.props.isFullWidth ? 'clearfix mb2' : 'clearfix mb2 lg-px4 md-px4 sm-px2'; return ( - <div className="clearfix mb2 lg-px4 md-px4 sm-px2"> - <h3>Generate an order</h3> - <Divider /> + <div className={rootClassName}> + {!this.props.shouldHideHeader && ( + <div> + <h3>Generate an order</h3> + <Divider /> + </div> + )} <div className="mx-auto" style={{ maxWidth: 580 }}> <div className="pt3"> <div className="mx-auto clearfix"> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9420395cf..8affcfb26 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -430,6 +430,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { userAddress={this.props.userAddress} userEtherBalanceInWei={this.props.userEtherBalanceInWei} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} /> ); } @@ -439,6 +440,9 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenByAddress={this.props.tokenByAddress} userAddress={this.props.userAddress} networkId={this.props.networkId} + isFullWidth={true} + shouldHideHeader={true} + isScrollable={false} /> ); } @@ -448,6 +452,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { blockchain={this._blockchain} hashData={this.props.hashData} dispatcher={this.props.dispatcher} + isFullWidth={true} + shouldHideHeader={true} /> ); } @@ -467,6 +473,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenByAddress={this.props.tokenByAddress} dispatcher={this.props.dispatcher} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} + shouldHideHeader={true} /> ); } @@ -484,6 +492,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { userEtherBalanceInWei={this.props.userEtherBalanceInWei} networkId={this.props.networkId} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} /> ); } diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 2bc065b0f..06da7f79a 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -57,7 +57,7 @@ const TOKEN_COL_SPAN_SM = 1; const styles: Styles = { bgColor: { - backgroundColor: colors.grey50, + backgroundColor: 'transparent', }, }; @@ -73,6 +73,7 @@ interface TokenBalancesProps { userEtherBalanceInWei: BigNumber; networkId: number; lastForceTokenStateRefetch: number; + isFullWidth?: boolean; } interface TokenBalancesState { @@ -87,6 +88,7 @@ interface TokenBalancesState { export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> { public static defaultProps: Partial<TokenBalancesProps> = { userEtherBalanceInWei: new BigNumber(0), + isFullWidth: false, }; private _isUnmounted: boolean; public constructor(props: TokenBalancesProps) { @@ -187,8 +189,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, ); + const rootClassName = this.props.isFullWidth ? 'pb2' : 'lg-px4 md-px4 sm-px1 pb2'; return ( - <div className="lg-px4 md-px4 sm-px1 pb2"> + <div className={rootClassName}> <h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3> <Divider /> <div className="pt2 pb2"> @@ -268,7 +271,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala <div className="inline-block">Allowance</div> <HelpTooltip style={{ paddingLeft: 4 }} explanation={allowanceExplanation} /> </TableHeaderColumn> - <TableHeaderColumn>Action</TableHeaderColumn> + {isTestNetwork && <TableHeaderColumn>Action</TableHeaderColumn>} {this.props.screenWidth !== ScreenWidths.Sm && <TableHeaderColumn>Send</TableHeaderColumn>} </TableRow> </TableHeader> @@ -373,17 +376,17 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)} /> </TableRowColumn> - <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}> - {isMintable && ( - <LifeCycleRaisedButton - labelReady="Mint" - labelLoading={<span style={{ fontSize: 12 }}>Minting...</span>} - labelComplete="Minted!" - onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} - /> - )} - {token.symbol === ZRX_TOKEN_SYMBOL && - utils.isTestNetwork(this.props.networkId) && ( + {utils.isTestNetwork(this.props.networkId) && ( + <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}> + {isMintable && ( + <LifeCycleRaisedButton + labelReady="Mint" + labelLoading={<span style={{ fontSize: 12 }}>Minting...</span>} + labelComplete="Minted!" + onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} + /> + )} + {token.symbol === ZRX_TOKEN_SYMBOL && ( <LifeCycleRaisedButton labelReady="Request" labelLoading="Sending..." @@ -391,7 +394,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala onClickAsyncFn={this._faucetRequestAsync.bind(this, false)} /> )} - </TableRowColumn> + </TableRowColumn> + )} {this.props.screenWidth !== ScreenWidths.Sm && ( <TableRowColumn style={{ diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1ca9d866f..84c0f70a8 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -13,6 +13,9 @@ interface TradeHistoryProps { tokenByAddress: TokenByAddress; userAddress: string; networkId: number; + isFullWidth?: boolean; + shouldHideHeader?: boolean; + isScrollable?: boolean; } interface TradeHistoryState { @@ -20,6 +23,11 @@ interface TradeHistoryState { } export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> { + public static defaultProps: Partial<TradeHistoryProps> = { + isFullWidth: false, + shouldHideHeader: false, + isScrollable: true, + }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { super(props); @@ -38,13 +46,22 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor window.scrollTo(0, 0); } public render(): React.ReactNode { + const rootClassName = !this.props.isFullWidth ? 'lg-px4 md-px4 sm-px2' : undefined; return ( - <div className="lg-px4 md-px4 sm-px2"> - <h3>Trade history</h3> - <Divider /> - <div className="pt2" style={{ height: 608, overflow: 'scroll' }}> - {this._renderTrades()} - </div> + <div className={rootClassName}> + {!this.props.shouldHideHeader && ( + <div> + <h3>Trade history</h3> + <Divider /> + </div> + )} + {this.props.isScrollable ? ( + <div className="pt2" style={{ height: 608, overflow: 'scroll' }}> + {this._renderTrades()} + </div> + ) : ( + this._renderTrades() + )} </div> ); } diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 98c9b8cd6..afbac58e2 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -13,6 +13,8 @@ interface GenerateOrderFormProps { blockchain: Blockchain; hashData: HashData; dispatcher: Dispatcher; + isFullWidth?: boolean; + shouldHideHeader?: boolean; } interface ConnectedState { |