Deploy @dexon-foundation/0x.jsstable

6 files changed, 0 insertions, 933 deletions

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
deleted file mode 100644
index 1c47903db..000000000
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { colors, Networks } from '@0x/react-shared';
-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 { constants } from 'ts/utils/constants';
-
-interface BlockchainErrDialogProps {
-    blockchain: Blockchain;
-    blockchainErr: BlockchainErrs;
-    isOpen: boolean;
-    userAddress: string;
-    toggleDialogFn: (isOpen: boolean) => void;
-    networkId: number;
-}
-
-export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProps, undefined> {
-    public render(): React.ReactNode {
-        const dialogActions = [
-            <FlatButton
-                key="blockchainErrOk"
-                label="Ok"
-                primary={true}
-                onClick={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
-            />,
-        ];
-
-        const hasWalletAddress = this.props.userAddress !== '';
-        return (
-            <Dialog
-                title={this._getTitle(hasWalletAddress)}
-                titleStyle={{ fontWeight: 100 }}
-                actions={dialogActions}
-                open={this.props.isOpen}
-                contentStyle={{ width: 400 }}
-                onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
-                autoScrollBodyContent={true}
-            >
-                <div className="pt2" style={{ color: colors.grey700 }}>
-                    {this._renderExplanation(hasWalletAddress)}
-                </div>
-            </Dialog>
-        );
-    }
-    private _getTitle(hasWalletAddress: boolean): string {
-        if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
-            return '0x smart contracts not found';
-        } else if (!hasWalletAddress) {
-            return 'Enable wallet communication';
-        } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
-            return 'Disconnected from Ethereum network';
-        } else if (this.props.blockchainErr === BlockchainErrs.DefaultTokensNotInTokenRegistry) {
-            return 'Default TokenRegistry tokens missing';
-        } else {
-            return 'Unexpected error';
-        }
-    }
-    private _renderExplanation(hasWalletAddress: boolean): React.ReactNode {
-        if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
-            return this._renderContractsNotDeployedExplanation();
-        } else if (!hasWalletAddress) {
-            return this._renderNoWalletFoundExplanation();
-        } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
-            return this._renderDisconnectedFromNode();
-        } else if (this.props.blockchainErr === BlockchainErrs.DefaultTokensNotInTokenRegistry) {
-            return this._renderDefaultTokenNotInTokenRegistry();
-        } else {
-            return this._renderUnexpectedErrorExplanation();
-        }
-    }
-    private _renderDisconnectedFromNode(): React.ReactNode {
-        return (
-            <div>
-                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.
-            </div>
-        );
-    }
-    private _renderDefaultTokenNotInTokenRegistry(): React.ReactNode {
-        return (
-            <div>
-                The TokenRegistry deployed on your network does not contain the needed default tokens for 0x Portal to
-                operate. Please try one of the supported networks (Mainnet, Kovan, Ropsten, Rinkeby). If on a local
-                Testnet, make sure the TokenRegistry contract is deployed and loaded with some default tokens (i.e WETH
-                & ZRX).
-            </div>
-        );
-    }
-    private _renderUnexpectedErrorExplanation(): React.ReactNode {
-        return <div>We encountered an unexpected error. Please try refreshing the page.</div>;
-    }
-    private _renderNoWalletFoundExplanation(): React.ReactNode {
-        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:
-                </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.
-                    <div className="pt1">
-                        <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 `parity ui` or `parity --chain kovan ui` in order to connect to mainnet or Kovan respectively.
-                </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.
-                </div>
-            </div>
-        );
-    }
-    private _renderContractsNotDeployedExplanation(): React.ReactNode {
-        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{' '}
-                    {Networks.Kovan} testnet (network Id: {constants.NETWORK_ID_KOVAN}) or ${constants.MAINNET_NAME}{' '}
-                    (network Id: ${constants.NETWORK_ID_MAINNET}).
-                </div>
-                <h4>Metamask</h4>
-                <div>
-                    If you are using{' '}
-                    <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
-                        Metamask
-                    </a>
-                    , you can switch networks in the top left corner of the extension popover.
-                </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 `parity ui` or `parity --chain Kovan ui` in order
-                    to connect to mainnet \ or Kovan respectively.
-                </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
deleted file mode 100644
index 5ca272b1a..000000000
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { colors } from '@0x/react-shared';
-import { BigNumber } from '@0x/utils';
-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 { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
-import { EthAmountInput } from 'ts/containers/inputs/eth_amount_input';
-import { Side, Token } from 'ts/types';
-
-interface EthWethConversionDialogProps {
-    blockchain: Blockchain;
-    userAddress: string;
-    networkId: number;
-    direction: Side;
-    onComplete: (direction: Side, value: BigNumber) => void;
-    onCancelled: () => void;
-    isOpen: boolean;
-    token: Token;
-    etherBalanceInWei?: BigNumber;
-    lastForceTokenStateRefetch: number;
-}
-
-interface EthWethConversionDialogState {
-    value?: BigNumber;
-    shouldShowIncompleteErrs: boolean;
-    hasErrors: boolean;
-    isEthTokenBalanceLoaded: boolean;
-    ethTokenBalance: BigNumber;
-}
-
-export class EthWethConversionDialog extends React.Component<
-    EthWethConversionDialogProps,
-    EthWethConversionDialogState
-> {
-    private _isUnmounted: boolean;
-    constructor(props: EthWethConversionDialogProps) {
-        super(props);
-        this._isUnmounted = false;
-        this.state = {
-            shouldShowIncompleteErrs: false,
-            hasErrors: false,
-            isEthTokenBalanceLoaded: false,
-            ethTokenBalance: new BigNumber(0),
-        };
-    }
-    public componentWillMount(): void {
-        // tslint:disable-next-line:no-floating-promises
-        this._fetchEthTokenBalanceAsync();
-    }
-    public componentWillUnmount(): void {
-        this._isUnmounted = true;
-    }
-    public render(): React.ReactNode {
-        const convertDialogActions = [
-            <FlatButton key="cancel" label="Cancel" onClick={this._onCancel.bind(this)} />,
-            <FlatButton key="convert" label="Convert" primary={true} onClick={this._onConvertClick.bind(this)} />,
-        ];
-        const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
-        return !_.isUndefined(this.props.etherBalanceInWei) ? (
-            <Dialog
-                title={title}
-                titleStyle={{ fontWeight: 100 }}
-                actions={convertDialogActions}
-                contentStyle={{ width: 448 }}
-                open={this.props.isOpen}
-            >
-                {this._renderConversionDialogBody()}
-            </Dialog>
-        ) : null;
-    }
-    private _renderConversionDialogBody(): React.ReactNode {
-        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="flex">
-                        {this._renderCurrency(isWrappedVersion)}
-                        <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 ? (
-                            <TokenAmountInput
-                                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                                blockchain={this.props.blockchain}
-                                userAddress={this.props.userAddress}
-                                networkId={this.props.networkId}
-                                token={this.props.token}
-                                shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                                shouldCheckBalance={true}
-                                shouldCheckAllowance={false}
-                                onChange={this._onValueChange.bind(this)}
-                                amount={this.state.value}
-                            />
-                        ) : (
-                            <EthAmountInput
-                                amount={this.state.value}
-                                onChange={this._onValueChange.bind(this)}
-                                shouldCheckBalance={true}
-                                shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                            />
-                        )}
-                        <div className="pt1" style={{ fontSize: 12 }}>
-                            <div className="left">1 ETH = 1 WETH</div>
-                            {this.props.direction === Side.Receive && this.state.isEthTokenBalanceLoaded && (
-                                <div
-                                    className="right"
-                                    onClick={this._onMaxClick.bind(this)}
-                                    style={{
-                                        color: colors.darkBlue,
-                                        textDecoration: 'underline',
-                                        cursor: 'pointer',
-                                    }}
-                                >
-                                    Max
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderCurrency(isWrappedVersion: boolean): React.ReactNode {
-        const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
-        const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
-        const symbol = isWrappedVersion ? 'WETH' : 'ETH';
-        return (
-            <div className="mx-auto pt2">
-                <div className="center" style={{ color: colors.darkBlue }}>
-                    {name}
-                </div>
-                <div className="center py2">
-                    <img src={iconUrl} style={{ width: 60 }} />
-                </div>
-                <div className="center" style={{ fontSize: 12 }}>
-                    ({symbol})
-                </div>
-            </div>
-        );
-    }
-    private _onMaxClick(): void {
-        this.setState({
-            value: this.state.ethTokenBalance,
-        });
-    }
-    private _onValueChange(isValid: boolean, amount?: BigNumber): void {
-        this.setState({
-            value: amount,
-            hasErrors: !isValid,
-        });
-    }
-    private _onConvertClick(): void {
-        if (this.state.hasErrors) {
-            this.setState({
-                shouldShowIncompleteErrs: true,
-            });
-        } else {
-            const value = this.state.value;
-            this.setState({
-                value: undefined,
-            });
-            this.props.onComplete(this.props.direction, value);
-        }
-    }
-    private _onCancel(): void {
-        this.setState({
-            value: undefined,
-        });
-        this.props.onCancelled();
-    }
-    private async _fetchEthTokenBalanceAsync(): Promise<void> {
-        const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress;
-        const [balance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
-            userAddressIfExists,
-            this.props.token.address,
-        );
-        if (!this._isUnmounted) {
-            this.setState({
-                isEthTokenBalanceLoaded: true,
-                ethTokenBalance: balance,
-            });
-        }
-    }
-}
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
deleted file mode 100644
index 527353aa0..000000000
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import { colors, constants as sharedConstants } from '@0x/react-shared';
-import { BigNumber, logUtils } from '@0x/utils';
-import { Web3Wrapper } from '@0x/web3-wrapper';
-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 TextField from 'material-ui/TextField';
-import * as React from 'react';
-import ReactTooltip from 'react-tooltip';
-import { Blockchain } from 'ts/blockchain';
-import { NetworkDropDown } from 'ts/components/dropdowns/network_drop_down';
-import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProviderType } from 'ts/types';
-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'`;
-
-enum LedgerSteps {
-    Connect,
-    SelectAddress,
-}
-
-interface LedgerConfigDialogProps {
-    isOpen: boolean;
-    toggleDialogFn: (isOpen: boolean) => void;
-    dispatcher: Dispatcher;
-    blockchain: Blockchain;
-    networkId?: number;
-    providerType: ProviderType;
-}
-
-interface LedgerConfigDialogState {
-    connectionErrMsg: string;
-    stepIndex: LedgerSteps;
-    userAddresses: string[];
-    addressBalances: BigNumber[];
-    derivationPath: string;
-    derivationErrMsg: string;
-    preferredNetworkId: number;
-}
-
-export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, LedgerConfigDialogState> {
-    public static defaultProps = {
-        networkId: 1,
-    };
-    constructor(props: LedgerConfigDialogProps) {
-        super(props);
-        const derivationPathIfExists = props.blockchain.getLedgerDerivationPathIfExists();
-        this.state = {
-            connectionErrMsg: '',
-            stepIndex: LedgerSteps.Connect,
-            userAddresses: [],
-            addressBalances: [],
-            derivationPath: _.isUndefined(derivationPathIfExists)
-                ? configs.DEFAULT_DERIVATION_PATH
-                : derivationPathIfExists,
-            derivationErrMsg: '',
-            preferredNetworkId: props.networkId,
-        };
-    }
-    public render(): React.ReactNode {
-        const dialogActions = [
-            <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />,
-        ];
-        const dialogTitle =
-            this.state.stepIndex === LedgerSteps.Connect ? 'Connect to your Ledger' : 'Select desired address';
-        return (
-            <Dialog
-                title={dialogTitle}
-                titleStyle={{ fontWeight: 100 }}
-                actions={dialogActions}
-                open={this.props.isOpen}
-                onRequestClose={this._onClose.bind(this)}
-                autoScrollBodyContent={true}
-                bodyStyle={{ paddingBottom: 0 }}
-            >
-                <div style={{ color: colors.grey700, paddingTop: 1 }}>
-                    {this.state.stepIndex === LedgerSteps.Connect && this._renderConnectStep()}
-                    {this.state.stepIndex === LedgerSteps.SelectAddress && this._renderSelectAddressStep()}
-                </div>
-            </Dialog>
-        );
-    }
-    private _renderConnectStep(): React.ReactNode {
-        const networkIds = _.values(sharedConstants.NETWORK_ID_BY_NAME);
-        return (
-            <div>
-                <div className="h4 pt3">Follow these instructions before proceeding:</div>
-                <ol className="mb0">
-                    <li className="pb1">Connect your Ledger Nano S & Open the Ethereum application</li>
-                    <li className="pb1">Verify that "Browser Support" AND "Contract Data" are 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>
-                    </li>
-                    <li>Choose your desired network:</li>
-                </ol>
-                <div className="pb2">
-                    <NetworkDropDown
-                        updateSelectedNetwork={this._onSelectedNetworkUpdated.bind(this)}
-                        selectedNetworkId={this.state.preferredNetworkId}
-                        avialableNetworkIds={networkIds}
-                    />
-                </div>
-                <div className="center pb3">
-                    <LifeCycleRaisedButton
-                        isPrimary={true}
-                        labelReady="Connect to Ledger"
-                        labelLoading="Connecting..."
-                        labelComplete="Connected!"
-                        onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
-                    />
-                    {!_.isEmpty(this.state.connectionErrMsg) && (
-                        <div className="pt2 left-align" style={{ color: colors.red200 }}>
-                            {this.state.connectionErrMsg}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-    private _renderSelectAddressStep(): React.ReactNode {
-        return (
-            <div>
-                <div>
-                    <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>
-                    </Table>
-                </div>
-                <div className="flex pt2" style={{ height: 100 }}>
-                    <div className="overflow-hidden" style={{ width: 180 }}>
-                        <TextField
-                            floatingLabelFixed={true}
-                            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 }}>
-                        <LifeCycleRaisedButton
-                            labelReady="Update"
-                            labelLoading="Updating..."
-                            labelComplete="Updated!"
-                            onClickAsyncFn={this._onFetchAddressesForDerivationPathAsync.bind(this)}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderAddressTableRows(): React.ReactNode {
-        const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
-            const balanceInWei = this.state.addressBalances[i];
-            const addressTooltipId = `address-${userAddress}`;
-            const balanceTooltipId = `balance-${userAddress}`;
-            const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
-            // We specifically prefix kovan ETH.
-            // TODO: We should probably add prefixes for all networks
-            const isKovanNetwork = networkName === 'Kovan';
-            const balanceInEth = Web3Wrapper.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH);
-            const balanceString = `${balanceInEth.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
-            return (
-                <TableRow key={userAddress} style={{ height: 40 }}>
-                    <TableRowColumn colSpan={2}>
-                        <div data-tip={true} data-for={addressTooltipId}>
-                            {userAddress}
-                        </div>
-                        <ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip>
-                    </TableRowColumn>
-                    <TableRowColumn>
-                        <div data-tip={true} data-for={balanceTooltipId}>
-                            {balanceString}
-                        </div>
-                        <ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip>
-                    </TableRowColumn>
-                </TableRow>
-            );
-        });
-        return rows;
-    }
-    private _onClose(): void {
-        this.setState({
-            connectionErrMsg: '',
-            stepIndex: LedgerSteps.Connect,
-        });
-        const isOpen = false;
-        this.props.toggleDialogFn(isOpen);
-    }
-    private _onAddressSelected(selectedRowIndexes: number[]): void {
-        const selectedRowIndex = selectedRowIndexes[0];
-        const selectedAddress = this.state.userAddresses[selectedRowIndex];
-        const selectAddressBalance = this.state.addressBalances[selectedRowIndex];
-        this.props.dispatcher.updateUserAddress(selectedAddress);
-        this.props.blockchain.updateWeb3WrapperPrevUserAddress(selectedAddress);
-        // tslint:disable-next-line:no-floating-promises
-        this.props.blockchain.fetchTokenInformationAsync();
-        this.props.dispatcher.updateUserWeiBalance(selectAddressBalance);
-        this.setState({
-            stepIndex: LedgerSteps.Connect,
-        });
-        const isOpen = false;
-        this.props.toggleDialogFn(isOpen);
-    }
-    private async _onFetchAddressesForDerivationPathAsync(): Promise<boolean> {
-        const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists();
-        let didSucceed;
-        if (currentlySetPath === this.state.derivationPath) {
-            didSucceed = true;
-            return didSucceed;
-        }
-        this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath);
-        didSucceed = await this._fetchAddressesAndBalancesAsync();
-        if (!didSucceed) {
-            this.setState({
-                derivationErrMsg: 'Failed to connect to Ledger.',
-            });
-        }
-        return didSucceed;
-    }
-    private async _fetchAddressesAndBalancesAsync(): Promise<boolean> {
-        let userAddresses: string[];
-        const addressBalances: BigNumber[] = [];
-        try {
-            userAddresses = await this._getUserAddressesAsync();
-            for (const address of userAddresses) {
-                const balanceInWei = await this.props.blockchain.getBalanceInWeiAsync(address);
-                addressBalances.push(balanceInWei);
-            }
-        } catch (err) {
-            logUtils.log(`Ledger error: ${JSON.stringify(err)}`);
-            this.setState({
-                connectionErrMsg: 'Failed to connect. Follow the instructions and try again.',
-            });
-            return false;
-        }
-        this.setState({
-            userAddresses,
-            addressBalances,
-        });
-        return true;
-    }
-    private _onDerivationPathChanged(_event: any, derivationPath: string): void {
-        let derivationErrMsg = '';
-        if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
-            derivationErrMsg = 'Must be valid Ethereum path.';
-        }
-
-        this.setState({
-            derivationPath,
-            derivationErrMsg,
-        });
-    }
-    private async _onConnectLedgerClickAsync(): Promise<boolean> {
-        const isU2FSupported = await utils.isU2FSupportedAsync();
-        if (!isU2FSupported) {
-            logUtils.log(`U2F not supported in this browser`);
-            this.setState({
-                connectionErrMsg: 'U2F not supported by this browser. Try using Chrome.',
-            });
-            return false;
-        }
-
-        if (
-            this.props.providerType !== ProviderType.Ledger ||
-            (this.props.providerType === ProviderType.Ledger && this.props.networkId !== this.state.preferredNetworkId)
-        ) {
-            await this.props.blockchain.updateProviderToLedgerAsync(this.state.preferredNetworkId);
-        }
-
-        const didSucceed = await this._fetchAddressesAndBalancesAsync();
-        if (didSucceed) {
-            this.setState({
-                stepIndex: LedgerSteps.SelectAddress,
-                connectionErrMsg: '',
-            });
-        }
-        return didSucceed;
-    }
-    private async _getUserAddressesAsync(): Promise<string[]> {
-        let userAddresses: string[];
-        userAddresses = await this.props.blockchain.getUserAccountsAsync();
-
-        if (_.isEmpty(userAddresses)) {
-            throw new Error('No addresses retrieved.');
-        }
-        return userAddresses;
-    }
-    private _onSelectedNetworkUpdated(_event: any, _index: number, networkId: number): void {
-        this.setState({
-            preferredNetworkId: networkId,
-        });
-    }
-}
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
deleted file mode 100644
index 326df2a8c..000000000
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { colors } from '@0x/react-shared';
-import Dialog from 'material-ui/Dialog';
-import FlatButton from 'material-ui/FlatButton';
-import * as React from 'react';
-
-interface PortalDisclaimerDialogProps {
-    isOpen: boolean;
-    onToggleDialog: () => void;
-}
-
-export const PortalDisclaimerDialog = (props: PortalDisclaimerDialogProps) => {
-    return (
-        <Dialog
-            title="0x Portal Disclaimer"
-            titleStyle={{ fontWeight: 100 }}
-            actions={[<FlatButton key="portalAgree" label="I Agree" onClick={props.onToggleDialog} />]}
-            open={props.isOpen}
-            onRequestClose={props.onToggleDialog}
-            autoScrollBodyContent={true}
-            modal={true}
-        >
-            <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.
-                </div>
-            </div>
-        </Dialog>
-    );
-};
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
deleted file mode 100644
index 5f6927cef..000000000
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { BigNumber } from '@0x/utils';
-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 { AddressInput } from 'ts/components/inputs/address_input';
-import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
-import { EthAmountInput } from 'ts/containers/inputs/eth_amount_input';
-import { Token } from 'ts/types';
-
-interface SendDialogProps {
-    blockchain: Blockchain;
-    userAddress: string;
-    networkId: number;
-    onComplete: (recipient: string, value: BigNumber) => void;
-    onCancelled: () => void;
-    isOpen: boolean;
-    asset: Token | 'ETH';
-    lastForceTokenStateRefetch: number;
-}
-
-interface SendDialogState {
-    value?: BigNumber;
-    recipient: string;
-    shouldShowIncompleteErrs: boolean;
-    isAmountValid: boolean;
-}
-
-export class SendDialog extends React.Component<SendDialogProps, SendDialogState> {
-    constructor(props: SendDialogProps) {
-        super(props);
-        this.state = {
-            recipient: '',
-            shouldShowIncompleteErrs: false,
-            isAmountValid: false,
-        };
-    }
-    public render(): React.ReactNode {
-        const transferDialogActions = [
-            <FlatButton key="cancelTransfer" label="Cancel" onClick={this._onCancel.bind(this)} />,
-            <FlatButton
-                key="sendTransfer"
-                disabled={this._hasErrors()}
-                label="Send"
-                primary={true}
-                onClick={this._onSendClick.bind(this)}
-            />,
-        ];
-        return (
-            <Dialog
-                title="I want to send"
-                titleStyle={{ fontWeight: 100 }}
-                actions={transferDialogActions}
-                open={this.props.isOpen}
-            >
-                {this._renderSendDialogBody()}
-            </Dialog>
-        );
-    }
-    private _renderSendDialogBody(): React.ReactNode {
-        const input =
-            this.props.asset === 'ETH' ? (
-                <EthAmountInput
-                    label="Amount to send"
-                    shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                    shouldCheckBalance={true}
-                    shouldShowErrs={true}
-                    onChange={this._onValueChange.bind(this)}
-                    amount={this.state.value}
-                />
-            ) : (
-                <TokenAmountInput
-                    blockchain={this.props.blockchain}
-                    userAddress={this.props.userAddress}
-                    networkId={this.props.networkId}
-                    label="Amount to send"
-                    token={this.props.asset}
-                    shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                    shouldCheckBalance={true}
-                    shouldCheckAllowance={false}
-                    onChange={this._onValueChange.bind(this)}
-                    amount={this.state.value}
-                    lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                />
-            );
-        return (
-            <div className="mx-auto" style={{ maxWidth: 300 }}>
-                <div style={{ height: 80 }}>
-                    <AddressInput
-                        initialAddress={this.state.recipient}
-                        updateAddress={this._onRecipientChange.bind(this)}
-                        isRequired={true}
-                        label="Recipient address'"
-                        hintText="Address"
-                    />
-                </div>
-                {input}
-            </div>
-        );
-    }
-    private _onRecipientChange(recipient?: string): void {
-        this.setState({
-            shouldShowIncompleteErrs: false,
-            recipient,
-        });
-    }
-    private _onValueChange(isValid: boolean, amount?: BigNumber): void {
-        this.setState({
-            isAmountValid: isValid,
-            value: amount,
-        });
-    }
-    private _onSendClick(): void {
-        if (this._hasErrors()) {
-            this.setState({
-                shouldShowIncompleteErrs: true,
-            });
-        } else {
-            const value = this.state.value;
-            this.setState({
-                recipient: undefined,
-                value: undefined,
-            });
-            this.props.onComplete(this.state.recipient, value);
-        }
-    }
-    private _onCancel(): void {
-        this.setState({
-            value: undefined,
-        });
-        this.props.onCancelled();
-    }
-    private _hasErrors(): boolean {
-        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
deleted file mode 100644
index c8d5af6b6..000000000
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import Dialog from 'material-ui/Dialog';
-import FlatButton from 'material-ui/FlatButton';
-import * as moment from 'moment';
-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';
-
-interface TrackTokenConfirmationDialogProps {
-    tokens: Token[];
-    tokenByAddress: TokenByAddress;
-    isOpen: boolean;
-    onToggleDialog: (didConfirmTokenTracking: boolean) => void;
-    dispatcher: Dispatcher;
-    networkId: number;
-    blockchain: Blockchain;
-    userAddress: string;
-}
-
-interface TrackTokenConfirmationDialogState {
-    isAddingTokenToTracked: boolean;
-}
-
-export class TrackTokenConfirmationDialog extends React.Component<
-    TrackTokenConfirmationDialogProps,
-    TrackTokenConfirmationDialogState
-> {
-    constructor(props: TrackTokenConfirmationDialogProps) {
-        super(props);
-        this.state = {
-            isAddingTokenToTracked: false,
-        };
-    }
-    public render(): React.ReactNode {
-        const tokens = this.props.tokens;
-        return (
-            <Dialog
-                title="Tracking confirmation"
-                titleStyle={{ fontWeight: 100 }}
-                actions={[
-                    <FlatButton
-                        key="trackNo"
-                        label="No"
-                        onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)}
-                    />,
-                    <FlatButton
-                        key="trackYes"
-                        label="Yes"
-                        onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)}
-                    />,
-                ]}
-                open={this.props.isOpen}
-                onRequestClose={this.props.onToggleDialog.bind(this, false)}
-                autoScrollBodyContent={true}
-            >
-                <div className="pt2">
-                    <TrackTokenConfirmation
-                        tokens={tokens}
-                        networkId={this.props.networkId}
-                        tokenByAddress={this.props.tokenByAddress}
-                        isAddingTokenToTracked={this.state.isAddingTokenToTracked}
-                    />
-                </div>
-            </Dialog>
-        );
-    }
-    private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean): Promise<void> {
-        if (!didUserAcceptTracking) {
-            this.props.onToggleDialog(didUserAcceptTracking);
-            return;
-        }
-        this.setState({
-            isAddingTokenToTracked: true,
-        });
-        const currentTimestamp = moment().unix();
-        for (const token of this.props.tokens) {
-            const newTokenEntry = {
-                ...token,
-                trackedTimestamp: currentTimestamp,
-            };
-
-            trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
-            this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
-        }
-
-        this.setState({
-            isAddingTokenToTracked: false,
-        });
-        this.props.onToggleDialog(didUserAcceptTracking);
-    }
-}