From 3f19ab1a87b3015923688669d1068f5619485da2 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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 { 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 { public static defaultProps: Partial = { userEtherBalanceInWei: new BigNumber(0), + isFullWidth: false, }; private _isUnmounted: boolean; public constructor(props: TokenBalancesProps) { @@ -187,8 +189,9 @@ export class TokenBalances extends React.Component +

{isTestNetwork ? 'Test ether' : 'Ether'}

-- cgit v1.2.3 From 2865f63c5d5a669011228f7e9050c3d8e456ae68 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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 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.ComponentAllowance
- Action + {isTestNetwork && Action} {this.props.screenWidth !== ScreenWidths.Sm && Send} @@ -376,17 +376,17 @@ export class TokenBalances extends React.Component - - {isMintable && ( - Minting...} - labelComplete="Minted!" - onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} - /> - )} - {token.symbol === ZRX_TOKEN_SYMBOL && - utils.isTestNetwork(this.props.networkId) && ( + {utils.isTestNetwork(this.props.networkId) && ( + + {isMintable && ( + Minting...} + labelComplete="Minted!" + onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} + /> + )} + {token.symbol === ZRX_TOKEN_SYMBOL && ( )} - + + )} {this.props.screenWidth !== ScreenWidths.Sm && ( 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 { 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 { + public static defaultProps: Partial = { + isFullWidth: false, + shouldRenderHeader: true, + }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { super(props); @@ -38,10 +44,15 @@ export class TradeHistory extends React.Component -

Trade history

- +
+ {this.props.shouldRenderHeader && ( +
+

Trade history

+ +
+ )}
{this._renderTrades()}
-- cgit v1.2.3 From 03854baf53c5767db7130b8f6d7e91aae015e867 Mon Sep 17 00:00:00 2001 From: Brandon Millman 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 { + public static defaultProps: Partial = { + isFullWidth: false, + }; private _isUnmounted: boolean; constructor(props: EthWrappersProps) { super(props); @@ -97,8 +101,9 @@ export class EthWrappers extends React.Component +

ETH Wrapper

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 { 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 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 { + public static defaultProps: Partial = { + isFullWidth: false, + shouldRenderHeader: true, + }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { super(props); @@ -97,10 +103,15 @@ export class FillOrder extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { + const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return ( -
-

Fill an order

- +
+ {this.props.shouldRenderHeader && ( +
+

Fill an order

+ +
+ )}
{!this.props.isOrderInUrl && (
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 { + public static defaultProps: Partial = { + isFullWidth: false, + shouldRenderHeader: true, + }; constructor(props: GenerateOrderFormProps) { super(props); this.state = { @@ -80,10 +86,15 @@ export class GenerateOrderForm extends React.Component -

Generate an order

- +
+ {this.props.shouldRenderHeader && ( +
+

Generate an order

+ +
+ )}
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 { 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 { 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 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
Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.
- +
ETH Token @@ -208,7 +208,7 @@ export class EthWrappers extends React.Component
-
+
WETH Version -- cgit v1.2.3 From b5dc72b126bc9b9572e5837ff10ee1e3d6b8916f Mon Sep 17 00:00:00 2001 From: Brandon Millman 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 { 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 = { isFullWidth: false, shouldRenderHeader: true, + isScrollable: true, }; private _fillPollingIntervalId: number; public constructor(props: TradeHistoryProps) { @@ -53,9 +55,13 @@ export class TradeHistory extends React.Component )} -
- {this._renderTrades()} -
+ {this.props.isScrollable ? ( +
+ {this._renderTrades()} +
+ ) : ( + this._renderTrades() + )} ); } -- cgit v1.2.3 From 2b4cd8b2ec5801786cd317870717260b503784dc Mon Sep 17 00:00:00 2001 From: Brandon Millman 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< , ]; const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; - return ( + return !_.isUndefined(this.props.etherBalanceInWei) ? ( {this._renderConversionDialogBody()} - ); + ) : 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 @@ -148,7 +147,11 @@ export class EthWrappers extends React.Component - {userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH + {!_.isUndefined(userEtherBalanceInEth) ? ( + `${userEtherBalanceInEth.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} ETH` + ) : ( + + )} -- cgit v1.2.3 From 14e3f413a23f9ee41d880539f98e2957708b035f Mon Sep 17 00:00:00 2001 From: Brandon Millman 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 { public static defaultProps: Partial = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, }; private _isUnmounted: boolean; constructor(props: FillOrderProps) { @@ -106,7 +106,7 @@ export class FillOrder extends React.Component { const rootClassName = this.props.isFullWidth ? 'clearfix' : 'lg-px4 md-px4 sm-px2'; return (
- {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && (

Fill an order

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 { public static defaultProps: Partial = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, }; constructor(props: GenerateOrderFormProps) { super(props); @@ -89,7 +89,7 @@ export class GenerateOrderForm extends React.Component - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && (

Generate an order

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 { 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 { hashData={this.props.hashData} dispatcher={this.props.dispatcher} isFullWidth={true} - shouldRenderHeader={false} + shouldHideHeader={true} /> ); } @@ -474,7 +474,7 @@ export class Portal extends React.Component { 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 { public static defaultProps: Partial = { isFullWidth: false, - shouldRenderHeader: true, + shouldHideHeader: false, isScrollable: true, }; private _fillPollingIntervalId: number; @@ -49,7 +49,7 @@ export class TradeHistory extends React.Component - {this.props.shouldRenderHeader && ( + {!this.props.shouldHideHeader && (

Trade history

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