diff options
author | Hsuan Lee <boczeratul@gmail.com> | 2019-03-06 17:46:50 +0800 |
---|---|---|
committer | Hsuan Lee <boczeratul@gmail.com> | 2019-03-06 17:46:50 +0800 |
commit | 35703539d0f2b4ddb3b11d0de8c9634af59ab71f (patch) | |
tree | ae3731221dbbb3a6fa40060a8d916cfd3f738289 /packages/website/ts/components/dialogs | |
parent | 92a1fde5b1ecd81b07cdb5bf0c9c1cd3544799db (diff) | |
download | dexon-0x-contracts-stable.tar dexon-0x-contracts-stable.tar.gz dexon-0x-contracts-stable.tar.bz2 dexon-0x-contracts-stable.tar.lz dexon-0x-contracts-stable.tar.xz dexon-0x-contracts-stable.tar.zst dexon-0x-contracts-stable.zip |
Deploy @dexon-foundation/0x.jsstable
Diffstat (limited to 'packages/website/ts/components/dialogs')
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); - } -} |