aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/dialogs
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/dialogs')
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx97
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx89
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx99
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx32
-rw-r--r--packages/website/ts/components/dialogs/send_dialog.tsx22
-rw-r--r--packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx25
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx24
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx19
8 files changed, 167 insertions, 240 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 900d0e193..f555ca6b1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {BlockchainErrs} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { Blockchain } from 'ts/blockchain';
+import { BlockchainErrs } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
interface BlockchainErrDialogProps {
blockchain: Blockchain;
@@ -32,14 +32,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
return (
<Dialog
title={this._getTitle(hasWalletAddress)}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={dialogActions}
open={this.props.isOpen}
- contentStyle={{width: 400}}
+ contentStyle={{ width: 400 }}
onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
autoScrollBodyContent={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
{this._renderExplanation(hasWalletAddress)}
</div>
</Dialog>
@@ -70,54 +70,55 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
private _renderDisconnectedFromNode() {
return (
<div>
- You were disconnected from the backing Ethereum node.
- {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
+ You were disconnected from the backing Ethereum node. If using{' '}
+ <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
- </a> or <a href={constants.URL_MIST_DOWNLOAD} target="_blank">Mist</a> try refreshing
- {' '}the page. If using a locally hosted Ethereum node, make sure it's still running.
+ </a>{' '}
+ or{' '}
+ <a href={constants.URL_MIST_DOWNLOAD} target="_blank">
+ Mist
+ </a>{' '}
+ try refreshing the page. If using a locally hosted Ethereum node, make sure it's still running.
</div>
);
}
private _renderUnexpectedErrorExplanation() {
- return (
- <div>
- We encountered an unexpected error. Please try refreshing the page.
- </div>
- );
+ return <div>We encountered an unexpected error. Please try refreshing the page.</div>;
}
private _renderNoWalletFoundExplanation() {
return (
<div>
<div>
- We were unable to access an Ethereum wallet you control. In order to interact
- {' '}with the 0x portal dApp,
- we need a way to interact with one of your Ethereum wallets.
- {' '}There are two easy ways you can enable us to do that:
+ We were unable to access an Ethereum wallet you control. In order to interact with the 0x portal
+ dApp, we need a way to interact with one of your Ethereum wallets. There are two easy ways you can
+ enable us to do that:
</div>
<h4>1. Metamask chrome extension</h4>
<div>
You can install the{' '}
<a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
- </a> Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
+ </a>{' '}
+ Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
<div className="pt1">
- <span className="bold">Note:</span>
- {' '}If you already have Metamask installed, make sure it is unlocked.
+ <span className="bold">Note:</span> If you already have Metamask installed, make sure it is
+ unlocked.
</div>
</div>
<h4>Parity Signer</h4>
<div>
- The <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
- Chrome extension</a>{' '}lets you connect to a locally running Parity node.
- Make sure you have started your local Parity node with{' '}
- {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui`{' '}
- in order to connect to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
+ The{' '}
+ <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
+ Parity Signer Chrome extension
+ </a>{' '}
+ lets you connect to a locally running Parity node. Make sure you have started your local Parity node
+ with {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui` in order to connect
+ to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
</div>
<div className="pt2">
- <span className="bold">Note:</span>
- {' '}If you have done one of the above steps and are still seeing this message,
- {' '}we might still be unable to retrieve an Ethereum address by calling `web3.eth.accounts`.
- {' '}Make sure you have created at least one Ethereum address.
+ <span className="bold">Note:</span> If you have done one of the above steps and are still seeing
+ this message, we might still be unable to retrieve an Ethereum address by calling
+ `web3.eth.accounts`. Make sure you have created at least one Ethereum address.
</div>
</div>
);
@@ -126,15 +127,12 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
return (
<div>
<div>
- The 0x smart contracts are not deployed on the Ethereum network you are
- {' '}currently connected to (network Id: {this.props.networkId}).
- {' '}In order to use the 0x portal dApp,
- {' '}please connect to the
- {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
- {configs.IS_MAINNET_ENABLED ?
- ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` :
- `.`
- }
+ The 0x smart contracts are not deployed on the Ethereum network you are currently connected to
+ (network Id: {this.props.networkId}). In order to use the 0x portal dApp, please connect to the{' '}
+ {constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
+ {configs.IS_MAINNET_ENABLED
+ ? ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).`
+ : `.`}
</div>
<h4>Metamask</h4>
<div>
@@ -145,13 +143,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
</div>
<h4>Parity Signer</h4>
<div>
- If using the <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
- Chrome extension</a>, make sure to start your local Parity node with{' '}
- {configs.IS_MAINNET_ENABLED ?
- '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
- or Kovan respectively.' :
- '`parity --chain kovan ui` in order to connect to Kovan.'
- }
+ If using the{' '}
+ <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
+ Parity Signer Chrome extension
+ </a>, make sure to start your local Parity node with{' '}
+ {configs.IS_MAINNET_ENABLED
+ ? '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
+ or Kovan respectively.'
+ : '`parity --chain kovan ui` in order to connect to Kovan.'}
</div>
</div>
);
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 d78cbdc29..ae4328976 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Side, Token, TokenState} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Side, Token, TokenState } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface EthWethConversionDialogProps {
direction: Side;
@@ -23,8 +23,10 @@ interface EthWethConversionDialogState {
hasErrors: boolean;
}
-export class EthWethConversionDialog extends
- React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> {
+export class EthWethConversionDialog extends React.Component<
+ EthWethConversionDialogProps,
+ EthWethConversionDialogState
+> {
constructor() {
super();
this.state = {
@@ -34,25 +36,16 @@ export class EthWethConversionDialog extends
}
public render() {
const convertDialogActions = [
- <FlatButton
- key="cancel"
- label="Cancel"
- onTouchTap={this._onCancel.bind(this)}
- />,
- <FlatButton
- key="convert"
- label="Convert"
- primary={true}
- onTouchTap={this._onConvertClick.bind(this)}
- />,
+ <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
+ <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />,
];
- const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
+ const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
return (
<Dialog
title={title}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={convertDialogActions}
- contentStyle={{width: 448}}
+ contentStyle={{ width: 448 }}
open={this.props.isOpen}
>
{this._renderConversionDialogBody()}
@@ -60,31 +53,24 @@ export class EthWethConversionDialog extends
);
}
private _renderConversionDialogBody() {
- const explanation = this.props.direction === Side.Deposit ?
- 'Convert your Ether into a tokenized, tradable form.' :
- 'Convert your Wrapped Ether back into it\'s native form.';
+ const explanation =
+ this.props.direction === Side.Deposit
+ ? 'Convert your Ether into a tokenized, tradable form.'
+ : "Convert your Wrapped Ether back into it's native form.";
const isWrappedVersion = this.props.direction === Side.Receive;
return (
<div>
- <div className="pb2">
- {explanation}
- </div>
- <div className="mx-auto" style={{maxWidth: 312}}>
+ <div className="pb2">{explanation}</div>
+ <div className="mx-auto" style={{ maxWidth: 312 }}>
<div className="flex">
{this._renderCurrency(isWrappedVersion)}
- <div style={{paddingTop: 68}}>
- <i
- style={{fontSize: 28, color: colors.darkBlue}}
- className="zmdi zmdi-arrow-right"
- />
+ <div style={{ paddingTop: 68 }}>
+ <i style={{ fontSize: 28, color: colors.darkBlue }} className="zmdi zmdi-arrow-right" />
</div>
{this._renderCurrency(!isWrappedVersion)}
</div>
- <div
- className="pt2 mx-auto"
- style={{width: 245}}
- >
- {this.props.direction === Side.Receive ?
+ <div className="pt2 mx-auto" style={{ width: 245 }}>
+ {this.props.direction === Side.Receive ? (
<TokenAmountInput
token={this.props.token}
tokenState={this.props.tokenState}
@@ -94,7 +80,8 @@ export class EthWethConversionDialog extends
onChange={this._onValueChange.bind(this)}
amount={this.state.value}
onVisitBalancesPageClick={this.props.onCancelled}
- /> :
+ />
+ ) : (
<EthAmountInput
balance={this.props.etherBalance}
amount={this.state.value}
@@ -103,21 +90,22 @@ export class EthWethConversionDialog extends
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
onVisitBalancesPageClick={this.props.onCancelled}
/>
- }
- <div
- className="pt1"
- style={{fontSize: 12}}
- >
+ )}
+ <div className="pt1" style={{ fontSize: 12 }}>
<div className="left">1 ETH = 1 WETH</div>
- {this.props.direction === Side.Receive &&
+ {this.props.direction === Side.Receive && (
<div
className="right"
onClick={this._onMaxClick.bind(this)}
- style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}}
+ style={{
+ color: colors.darkBlue,
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ }}
>
Max
</div>
- }
+ )}
</div>
</div>
</div>
@@ -130,16 +118,13 @@ export class EthWethConversionDialog extends
const symbol = isWrappedVersion ? 'WETH' : 'ETH';
return (
<div className="mx-auto pt2">
- <div
- className="center"
- style={{color: colors.darkBlue}}
- >
+ <div className="center" style={{ color: colors.darkBlue }}>
{name}
</div>
<div className="center py2">
- <img src={iconUrl} style={{width: 60}} />
+ <img src={iconUrl} style={{ width: 60 }} />
</div>
- <div className="center" style={{fontSize: 12}}>
+ <div className="center" style={{ fontSize: 12 }}>
({symbol})
</div>
</div>
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index cc68ef2df..ae7117a70 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -2,24 +2,17 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {
- Table,
- TableBody,
- TableHeader,
- TableHeaderColumn,
- TableRow,
- TableRowColumn,
-} from 'material-ui/Table';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`;
@@ -59,32 +52,23 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
}
public render() {
const dialogActions = [
- <FlatButton
- key="ledgerConnectCancel"
- label="Cancel"
- onTouchTap={this._onClose.bind(this)}
- />,
+ <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
];
- const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ?
- 'Connect to your Ledger' :
- 'Select desired address';
+ const dialogTitle =
+ this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
return (
<Dialog
title={dialogTitle}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={dialogActions}
open={this.props.isOpen}
onRequestClose={this._onClose.bind(this)}
autoScrollBodyContent={true}
- bodyStyle={{paddingBottom: 0}}
+ bodyStyle={{ paddingBottom: 0 }}
>
- <div style={{color: colors.grey700, paddingTop: 1}}>
- {this.state.stepIndex === LedgerSteps.CONNECT &&
- this._renderConnectStep()
- }
- {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS &&
- this._renderSelectAddressStep()
- }
+ <div style={{ color: colors.grey700, paddingTop: 1 }}>
+ {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()}
+ {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()}
</div>
</Dialog>
);
@@ -92,19 +76,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
private _renderConnectStep() {
return (
<div>
- <div className="h4 pt3">
- Follow these instructions before proceeding:
- </div>
+ <div className="h4 pt3">Follow these instructions before proceeding:</div>
<ol>
- <li className="pb1">
- Connect your Ledger Nano S & Open the Ethereum application
- </li>
- <li className="pb1">
- Verify that Browser Support is enabled in Settings
- </li>
+ <li className="pb1">Connect your Ledger Nano S & Open the Ethereum application</li>
+ <li className="pb1">Verify that Browser Support is enabled in Settings</li>
<li className="pb1">
If no Browser Support is found in settings, verify that you have{' '}
- <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">Firmware >1.2</a>
+ <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">
+ Firmware >1.2
+ </a>
</li>
</ol>
<div className="center pb3">
@@ -115,11 +95,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
labelComplete="Connected!"
onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
/>
- {this.state.didConnectFail &&
- <div className="pt2 left-align" style={{color: colors.red200}}>
+ {this.state.didConnectFail && (
+ <div className="pt2 left-align" style={{ color: colors.red200 }}>
Failed to connect. Follow the instructions and try again.
</div>
- }
+ )}
</div>
</div>
);
@@ -128,33 +108,28 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
return (
<div>
<div>
- <Table
- bodyStyle={{height: 300}}
- onRowSelection={this._onAddressSelected.bind(this)}
- >
+ <Table bodyStyle={{ height: 300 }} onRowSelection={this._onAddressSelected.bind(this)}>
<TableHeader displaySelectAll={false}>
<TableRow>
<TableHeaderColumn colSpan={2}>Address</TableHeaderColumn>
<TableHeaderColumn>Balance</TableHeaderColumn>
</TableRow>
</TableHeader>
- <TableBody>
- {this._renderAddressTableRows()}
- </TableBody>
+ <TableBody>{this._renderAddressTableRows()}</TableBody>
</Table>
</div>
- <div className="flex pt2" style={{height: 100}}>
- <div className="overflow-hidden" style={{width: 180}}>
+ <div className="flex pt2" style={{ height: 100 }}>
+ <div className="overflow-hidden" style={{ width: 180 }}>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey}}
+ floatingLabelStyle={{ color: colors.grey }}
floatingLabelText="Update path derivation (advanced)"
value={this.state.derivationPath}
errorText={this.state.derivationErrMsg}
onChange={this._onDerivationPathChanged.bind(this)}
/>
</div>
- <div className="pl2" style={{paddingTop: 28}}>
+ <div className="pl2" style={{ paddingTop: 28 }}>
<LifeCycleRaisedButton
labelReady="Update"
labelLoading="Updating..."
@@ -177,21 +152,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
const isKovanNetwork = networkName === 'Kovan';
const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
return (
- <TableRow key={userAddress} style={{height: 40}}>
+ <TableRow key={userAddress} style={{ height: 40 }}>
<TableRowColumn colSpan={2}>
- <div
- data-tip={true}
- data-for={addressTooltipId}
- >
+ <div data-tip={true} data-for={addressTooltipId}>
{userAddress}
</div>
<ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip>
</TableRowColumn>
<TableRowColumn>
- <div
- data-tip={true}
- data-for={balanceTooltipId}
- >
+ <div data-tip={true} data-for={balanceTooltipId}>
{balanceString}
</div>
<ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip>
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index ffe55794f..3ecc454a0 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
interface PortalDisclaimerDialogProps {
isOpen: boolean;
@@ -12,31 +12,23 @@ export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) {
return (
<Dialog
title="0x Portal Disclaimer"
- titleStyle={{fontWeight: 100}}
- actions={[
- <FlatButton
- key="portalAgree"
- label="I Agree"
- onTouchTap={props.onToggleDialog}
- />,
- ]}
+ titleStyle={{ fontWeight: 100 }}
+ actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
modal={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- 0x Portal is a free software-based tool intended to help users to
- buy and sell ERC20-compatible blockchain tokens through the 0x protocol
- on a purely peer-to-peer basis. 0x portal is not a regulated marketplace,
- exchange or intermediary of any kind, and therefore, you should only use
- 0x portal to exchange tokens that are not securities, commodity interests,
- or any other form of regulated instrument. 0x has not attempted to screen
- or otherwise limit the tokens that you may enter in 0x Portal. By clicking
- “I Agree” below, you understand that you are solely responsible for using 0x
- Portal and buying and selling tokens using 0x Portal in compliance with all
- applicable laws and regulations.
+ 0x Portal is a free software-based tool intended to help users to buy and sell ERC20-compatible
+ blockchain tokens through the 0x protocol on a purely peer-to-peer basis. 0x portal is not a
+ regulated marketplace, exchange or intermediary of any kind, and therefore, you should only use 0x
+ portal to exchange tokens that are not securities, commodity interests, or any other form of
+ regulated instrument. 0x has not attempted to screen or otherwise limit the tokens that you may
+ enter in 0x Portal. By clicking “I Agree” below, you understand that you are solely responsible for
+ using 0x Portal and buying and selling tokens using 0x Portal in compliance with all applicable laws
+ and regulations.
</div>
</div>
</Dialog>
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index 9a85ea8b1..cd29b34e6 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -3,9 +3,9 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Token, TokenState} from 'ts/types';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Token, TokenState } from 'ts/types';
interface SendDialogProps {
onComplete: (recipient: string, value: BigNumber) => void;
@@ -33,11 +33,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
}
public render() {
const transferDialogActions = [
- <FlatButton
- key="cancelTransfer"
- label="Cancel"
- onTouchTap={this._onCancel.bind(this)}
- />,
+ <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
<FlatButton
key="sendTransfer"
disabled={this._hasErrors()}
@@ -49,7 +45,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
return (
<Dialog
title="I want to send"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={transferDialogActions}
open={this.props.isOpen}
>
@@ -59,8 +55,8 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
}
private _renderSendDialogBody() {
return (
- <div className="mx-auto" style={{maxWidth: 300}}>
- <div style={{height: 80}}>
+ <div className="mx-auto" style={{ maxWidth: 300 }}>
+ <div style={{ height: 80 }}>
<AddressInput
initialAddress={this.state.recipient}
updateAddress={this._onRecipientChange.bind(this)}
@@ -116,8 +112,6 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
this.props.onCancelled();
}
private _hasErrors() {
- return _.isUndefined(this.state.recipient) ||
- _.isUndefined(this.state.value) ||
- !this.state.isAmountValid;
+ return _.isUndefined(this.state.recipient) || _.isUndefined(this.state.value) || !this.state.isAmountValid;
}
}
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 9e00b4110..3f29d46f8 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {TrackTokenConfirmation} from 'ts/components/track_token_confirmation';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {Token, TokenByAddress} from 'ts/types';
+import { Blockchain } from 'ts/blockchain';
+import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Token, TokenByAddress } from 'ts/types';
interface TrackTokenConfirmationDialogProps {
tokens: Token[];
@@ -23,8 +23,10 @@ interface TrackTokenConfirmationDialogState {
isAddingTokenToTracked: boolean;
}
-export class TrackTokenConfirmationDialog extends
- React.Component<TrackTokenConfirmationDialogProps, TrackTokenConfirmationDialogState> {
+export class TrackTokenConfirmationDialog extends React.Component<
+ TrackTokenConfirmationDialogProps,
+ TrackTokenConfirmationDialogState
+> {
constructor(props: TrackTokenConfirmationDialogProps) {
super(props);
this.state = {
@@ -36,7 +38,7 @@ export class TrackTokenConfirmationDialog extends
return (
<Dialog
title="Tracking confirmation"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={[
<FlatButton
key="trackNo"
@@ -81,10 +83,9 @@ export class TrackTokenConfirmationDialog extends
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
- const [
- balance,
- allowance,
- ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(token.address);
+ const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+ token.address,
+ );
this.props.dispatcher.updateTokenStateByAddress({
[token.address]: {
balance,
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index ff884a94e..098e3e26d 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,8 +1,8 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
interface U2fNotSupportedDialogProps {
isOpen: boolean;
@@ -13,24 +13,16 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
return (
<Dialog
title="U2F Not Supported"
- titleStyle={{fontWeight: 100}}
- actions={[
- <FlatButton
- key="u2fNo"
- label="Ok"
- onTouchTap={props.onToggleDialog.bind(this)}
- />,
- ]}
+ titleStyle={{ fontWeight: 100 }}
+ actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog.bind(this)} />]}
open={props.isOpen}
onRequestClose={props.onToggleDialog.bind(this)}
autoScrollBodyContent={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- It looks like your browser does not support U2F connections
- required for us to communicate with your hardware wallet.
- Please use a browser that supports U2F connections and try
- again.
+ It looks like your browser does not support U2F connections required for us to communicate with your
+ hardware wallet. Please use a browser that supports U2F connections and try again.
</div>
<div>
<ul>
@@ -41,7 +33,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
<a
href={constants.URL_FIREFOX_U2F_ADDON}
target="_blank"
- style={{textDecoration: 'underline'}}
+ style={{ textDecoration: 'underline' }}
>
this extension
</a>.
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
index 3f485ce4f..9e91ff12d 100644
--- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -1,6 +1,6 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import { colors } from 'material-ui/styles';
import * as React from 'react';
interface WrappedEthSectionNoticeDialogProps {
@@ -12,25 +12,20 @@ export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDial
return (
<Dialog
title="Dedicated Wrapped Ether Section"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={[
- <FlatButton
- key="acknowledgeWrapEthSection"
- label="Sounds good"
- onTouchTap={props.onToggleDialog}
- />,
+ <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />,
]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
modal={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- We have recently updated the Wrapped Ether token (WETH) used by 0x Portal.
- Don't worry, unwrapping Ether tied to the old Wrapped Ether token can
- be done at any time by clicking on the "Wrap ETH" section in the menu
- to the left.
+ We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. Don't worry, unwrapping
+ Ether tied to the old Wrapped Ether token can be done at any time by clicking on the "Wrap ETH"
+ section in the menu to the left.
</div>
</div>
</Dialog>