crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'v2-prototype' of https://github.com/0xProject/0x-monorepo into feature/improve-linting

Browse Source
This commit is contained in:
fragosti
2018-06-06 16:43:37 -07:00
parent e75721016e 5989844f1c
commit 64906a1ba5
9 changed files with 102 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
View File

@@ -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 =

2
packages/website/ts/components/eth_weth_conversion_button.tsx
View File

@@ -18,7 +18,7 @@ interface EthWethConversionButtonProps {
ethToken: Token;
dispatcher: Dispatcher;
blockchain: Blockchain;
userEtherBalanceInWei?: BigNumber;
userEtherBalanceInWei: BigNumber;
isOutdatedWrappedEther: boolean;
onConversionSuccessful?: () => void;
isDisabled?: boolean;

25
packages/website/ts/components/eth_wrappers.tsx
View File

@@ -34,6 +34,7 @@ interface EthWrappersProps {
userAddress: string;
userEtherBalanceInWei?: BigNumber;
lastForceTokenStateRefetch: number;
isFullWidth?: boolean;
}
interface EthWrappersState {
@@ -42,6 +43,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);
@@ -92,12 +96,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 }}>
@@ -115,7 +119,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>
@@ -142,7 +146,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
@@ -156,6 +164,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>
@@ -202,7 +211,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>

17
packages/website/ts/components/fill_order.tsx
View File

@@ -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>

17
packages/website/ts/components/generate_order/generate_order_form.tsx
View File

@@ -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">

9
packages/website/ts/components/portal/portal.tsx
View File

@@ -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}
/>
);
}

34
packages/website/ts/components/token_balances.tsx
View File

@@ -56,7 +56,7 @@ const TOKEN_COL_SPAN_SM = 1;
const styles: Styles = {
bgColor: {
backgroundColor: colors.grey50,
backgroundColor: 'transparent',
},
};
@@ -72,6 +72,7 @@ interface TokenBalancesProps {
userEtherBalanceInWei: BigNumber;
networkId: number;
lastForceTokenStateRefetch: number;
isFullWidth?: boolean;
}
interface TokenBalancesState {
@@ -86,6 +87,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) {
@@ -185,8 +187,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">
@@ -266,7 +269,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>
@@ -371,17 +374,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..."
@@ -389,7 +392,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
/>
)}
</TableRowColumn>
</TableRowColumn>
)}
{this.props.screenWidth !== ScreenWidths.Sm && (
<TableRowColumn
style={{

29
packages/website/ts/components/trade_history/trade_history.tsx
View File

@@ -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>
);
}

2
packages/website/ts/containers/generate_order_form.ts
View File

@@ -12,6 +12,8 @@ interface GenerateOrderFormProps {
blockchain: Blockchain;
hashData: HashData;
dispatcher: Dispatcher;
isFullWidth?: boolean;
shouldHideHeader?: boolean;
}
interface ConnectedState {