aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-06-07 07:12:47 +0800
committerGitHub <noreply@github.com>2018-06-07 07:12:47 +0800
commit5989844f1c3d00f57f1ab86a00aa97e17751c576 (patch)
tree35e5f4042e9e7d0ffaec51d1aa94430dae1ca83f /packages/website/ts
parent785b9811f30869f01242ce9ff81c282bf7f5352f (diff)
parent14e3f413a23f9ee41d880539f98e2957708b035f (diff)
downloaddexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar
dexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.gz
dexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.bz2
dexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.lz
dexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.xz
dexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.tar.zst
dexon-sol-tools-5989844f1c3d00f57f1ab86a00aa97e17751c576.zip
Merge pull request #672 from 0xProject/feature/website/account-management-polish
Account management polish
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx6
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx2
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx25
-rw-r--r--packages/website/ts/components/fill_order.tsx17
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx17
-rw-r--r--packages/website/ts/components/portal/portal.tsx9
-rw-r--r--packages/website/ts/components/token_balances.tsx34
-rw-r--r--packages/website/ts/components/trade_history/trade_history.tsx29
-rw-r--r--packages/website/ts/containers/generate_order_form.ts2
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 {