From 3f19ab1a87b3015923688669d1068f5619485da2 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 5 Jun 2018 22:48:13 -0700 Subject: Add isFullWidth prop to TokenBalances component --- packages/website/ts/components/portal/portal.tsx | 1 + packages/website/ts/components/token_balances.tsx | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9420395cf..28fcf10df 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -484,6 +484,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..f313cd27e 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -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"> -- cgit v1.2.3 From 2865f63c5d5a669011228f7e9050c3d8e456ae68 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 5 Jun 2018 22:52:22 -0700 Subject: Fix TokenBalances background color --- packages/website/ts/components/token_balances.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index f313cd27e..40cb4daa2 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', }, }; -- cgit v1.2.3 From a0e8f410d196cff4c5e25c05f085c1818496168b Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 5 Jun 2018 23:02:48 -0700 Subject: Hide action column on mainnet --- packages/website/ts/components/token_balances.tsx | 27 ++++++++++++----------- 1 file changed, 14 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 40cb4daa2..06da7f79a 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -271,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> @@ -376,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..." @@ -394,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={{ -- cgit v1.2.3 From 61dc253de1b4da6606bc0ddea463e78447598798 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 5 Jun 2018 23:10:26 -0700 Subject: Update TradeHistory component --- packages/website/ts/components/portal/portal.tsx | 2 ++ .../ts/components/trade_history/trade_history.tsx | 17 ++++++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 28fcf10df..fb818056d 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -439,6 +439,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenByAddress={this.props.tokenByAddress} userAddress={this.props.userAddress} networkId={this.props.networkId} + isFullWidth={true} + shouldRenderHeader={false} /> ); } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1ca9d866f..1c47d4ecd 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -13,6 +13,8 @@ interface TradeHistoryProps { tokenByAddress: TokenByAddress; userAddress: string; networkId: number; + isFullWidth?: boolean; + shouldRenderHeader?: boolean; } interface TradeHistoryState { @@ -20,6 +22,10 @@ interface TradeHistoryState { } export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> { + public static defaultProps: Partial<TradeHistoryProps> = { + isFullWidth: false, + shouldRenderHeader: true, + }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { super(props); @@ -38,10 +44,15 @@ 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={rootClassName}> + {this.props.shouldRenderHeader && ( + <div> + <h3>Trade history</h3> + <Divider /> + </div> + )} <div className="pt2" style={{ height: 608, overflow: 'scroll' }}> {this._renderTrades()} </div> -- cgit v1.2.3 From 03854baf53c5767db7130b8f6d7e91aae015e867 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 5 Jun 2018 23:18:26 -0700 Subject: Update EthWrappers component --- packages/website/ts/components/eth_wrappers.tsx | 7 ++++++- packages/website/ts/components/portal/portal.tsx | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 1db5ff77f..984c2a1d2 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); @@ -97,8 +101,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, ); + 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 }}> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index fb818056d..33f39a468 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} /> ); } -- cgit v1.2.3 From 1677817d9fb31d47080705fc4336555f74cbe687 Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Tue, 5 Jun 2018 23:34:20 -0700 Subject: Update GenerateOrderForm and FillOrder components --- packages/website/ts/components/fill_order.tsx | 17 ++++++++++++++--- .../components/generate_order/generate_order_form.tsx | 17 ++++++++++++++--- packages/website/ts/components/portal/portal.tsx | 4 ++++ packages/website/ts/containers/generate_order_form.ts | 2 ++ 4 files changed, 34 insertions(+), 6 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 0168ec8f6..e313a43fe 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; + shouldRenderHeader?: boolean; } interface FillOrderState { @@ -61,6 +63,10 @@ interface FillOrderState { } export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { + public static defaultProps: Partial<FillOrderProps> = { + isFullWidth: false, + shouldRenderHeader: true, + }; 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.shouldRenderHeader && ( + <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..e786719b0 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; + shouldRenderHeader?: boolean; } interface GenerateOrderFormState { @@ -56,6 +58,10 @@ interface GenerateOrderFormState { } export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> { + public static defaultProps: Partial<GenerateOrderFormProps> = { + isFullWidth: false, + shouldRenderHeader: true, + }; 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.shouldRenderHeader && ( + <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 33f39a468..f0d26aeb0 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -451,6 +451,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { blockchain={this._blockchain} hashData={this.props.hashData} dispatcher={this.props.dispatcher} + isFullWidth={true} + shouldRenderHeader={false} /> ); } @@ -470,6 +472,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenByAddress={this.props.tokenByAddress} dispatcher={this.props.dispatcher} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + isFullWidth={true} + shouldRenderHeader={false} /> ); } diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 98c9b8cd6..23c869a1e 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; + shouldRenderHeader?: boolean; } interface ConnectedState { -- cgit v1.2.3 From ab4d2faea3aadfcf75c31f5c02b6f772a07280fb Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 6 Jun 2018 00:09:28 -0700 Subject: Fix EthWrappers background color --- packages/website/ts/components/eth_wrappers.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 984c2a1d2..80929113b 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -121,7 +121,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> @@ -208,7 +208,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> -- cgit v1.2.3 From b5dc72b126bc9b9572e5837ff10ee1e3d6b8916f Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 6 Jun 2018 00:19:41 -0700 Subject: Make scrollability a prop on TradeHistory --- packages/website/ts/components/portal/portal.tsx | 1 + .../website/ts/components/trade_history/trade_history.tsx | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index f0d26aeb0..009ef06f3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -442,6 +442,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { networkId={this.props.networkId} isFullWidth={true} shouldRenderHeader={false} + isScrollable={false} /> ); } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1c47d4ecd..1e92cdb90 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -15,6 +15,7 @@ interface TradeHistoryProps { networkId: number; isFullWidth?: boolean; shouldRenderHeader?: boolean; + isScrollable?: boolean; } interface TradeHistoryState { @@ -25,6 +26,7 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor public static defaultProps: Partial<TradeHistoryProps> = { isFullWidth: false, shouldRenderHeader: true, + isScrollable: true, }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { @@ -53,9 +55,13 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor <Divider /> </div> )} - <div className="pt2" style={{ height: 608, overflow: 'scroll' }}> - {this._renderTrades()} - </div> + {this.props.isScrollable ? ( + <div className="pt2" style={{ height: 608, overflow: 'scroll' }}> + {this._renderTrades()} + </div> + ) : ( + this._renderTrades() + )} </div> ); } -- cgit v1.2.3 From 2b4cd8b2ec5801786cd317870717260b503784dc Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 6 Jun 2018 01:33:21 -0700 Subject: Fix undefined ether balance --- .../ts/components/dialogs/eth_weth_conversion_dialog.tsx | 6 +++--- .../website/ts/components/eth_weth_conversion_button.tsx | 2 +- packages/website/ts/components/eth_wrappers.tsx | 14 +++++++++----- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'packages/website') 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 80929113b..b84e15857 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -97,10 +97,9 @@ 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={rootClassName} style={{ minHeight: 600 }}> @@ -148,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 @@ -162,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> -- cgit v1.2.3 From 14e3f413a23f9ee41d880539f98e2957708b035f Mon Sep 17 00:00:00 2001 From: Brandon Millman <brandon.millman@gmail.com> Date: Wed, 6 Jun 2018 16:11:23 -0700 Subject: Change shouldRenderHeader prop to shouldHideHeader --- packages/website/ts/components/fill_order.tsx | 6 +++--- .../website/ts/components/generate_order/generate_order_form.tsx | 6 +++--- packages/website/ts/components/portal/portal.tsx | 6 +++--- packages/website/ts/components/trade_history/trade_history.tsx | 6 +++--- packages/website/ts/containers/generate_order_form.ts | 2 +- 5 files changed, 13 insertions(+), 13 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index e313a43fe..b6b52993e 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -40,7 +40,7 @@ interface FillOrderProps { dispatcher: Dispatcher; lastForceTokenStateRefetch: number; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; } interface FillOrderState { @@ -65,7 +65,7 @@ interface FillOrderState { export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { public static defaultProps: Partial<FillOrderProps> = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { @@ -106,7 +106,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return ( <div className={rootClassName} style={{ minHeight: 600 }}> - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && ( <div> <h3>Fill an order</h3> <Divider /> 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 e786719b0..52e3b73cd 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -48,7 +48,7 @@ interface GenerateOrderFormProps { tokenByAddress: TokenByAddress; lastForceTokenStateRefetch: number; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; } interface GenerateOrderFormState { @@ -60,7 +60,7 @@ interface GenerateOrderFormState { export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> { public static defaultProps: Partial<GenerateOrderFormProps> = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, }; constructor(props: GenerateOrderFormProps) { super(props); @@ -89,7 +89,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G const rootClassName = this.props.isFullWidth ? 'clearfix mb2' : 'clearfix mb2 lg-px4 md-px4 sm-px2'; return ( <div className={rootClassName}> - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && ( <div> <h3>Generate an order</h3> <Divider /> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 009ef06f3..8affcfb26 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -441,7 +441,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { userAddress={this.props.userAddress} networkId={this.props.networkId} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} isScrollable={false} /> ); @@ -453,7 +453,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { hashData={this.props.hashData} dispatcher={this.props.dispatcher} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} /> ); } @@ -474,7 +474,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { dispatcher={this.props.dispatcher} lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} /> ); } diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx index 1e92cdb90..84c0f70a8 100644 --- a/packages/website/ts/components/trade_history/trade_history.tsx +++ b/packages/website/ts/components/trade_history/trade_history.tsx @@ -14,7 +14,7 @@ interface TradeHistoryProps { userAddress: string; networkId: number; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; isScrollable?: boolean; } @@ -25,7 +25,7 @@ interface TradeHistoryState { export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> { public static defaultProps: Partial<TradeHistoryProps> = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, isScrollable: true, }; private _fillPollingIntervalId: number; @@ -49,7 +49,7 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor const rootClassName = !this.props.isFullWidth ? 'lg-px4 md-px4 sm-px2' : undefined; return ( <div className={rootClassName}> - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && ( <div> <h3>Trade history</h3> <Divider /> diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 23c869a1e..afbac58e2 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -14,7 +14,7 @@ interface GenerateOrderFormProps { hashData: HashData; dispatcher: Dispatcher; isFullWidth?: boolean; - shouldRenderHeader?: boolean; + shouldHideHeader?: boolean; } interface ConnectedState { -- cgit v1.2.3