Merge pull request #672 from 0xProject/feature/website/account-management-polish

Account management polish

8 files changed, 100 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>
         );
     }