diff options
Diffstat (limited to 'packages/website/ts')
32 files changed, 309 insertions, 265 deletions
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 32acb9d43..212e829dd 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -1,20 +1,15 @@ import { - BlockParam, BlockRange, + ContractWrappers, DecodedLogEvent, - ECSignature, ExchangeContractEventArgs, ExchangeEvents, IndexedFilterValues, LogCancelContractEventArgs, LogFillContractEventArgs, - LogWithDecodedArgs, - Order, - SignedOrder, Token as ZeroExToken, - TransactionReceiptWithDecodedLogs, - ZeroEx, -} from '0x.js'; +} from '@0xproject/contract-wrappers'; +import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils'; import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { InjectedWeb3Subprovider, @@ -23,7 +18,15 @@ import { RedundantSubprovider, Subprovider, } from '@0xproject/subproviders'; -import { Provider } from '@0xproject/types'; +import { + BlockParam, + ECSignature, + LogWithDecodedArgs, + Order, + Provider, + SignedOrder, + TransactionReceiptWithDecodedLogs, +} from '@0xproject/types'; import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; @@ -72,7 +75,7 @@ const providerToName: { [provider: string]: string } = { export class Blockchain { public networkId: number; public nodeVersion: string; - private _zeroEx: ZeroEx; + private _contractWrappers: ContractWrappers; private _dispatcher: Dispatcher; private _web3Wrapper?: Web3Wrapper; private _blockchainWatcher?: BlockchainWatcher; @@ -164,8 +167,8 @@ export class Blockchain { } } public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); - const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress); + utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); + const tokenIfExists = await this._contractWrappers.tokenRegistry.getTokenIfExistsAsync(tokenAddress); return !_.isUndefined(tokenIfExists); } public getLedgerDerivationPathIfExists(): string { @@ -182,7 +185,7 @@ export class Blockchain { this._ledgerSubprovider.setPath(path); } public async updateProviderToLedgerAsync(networkId: number): Promise<void> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); const isU2FSupported = await utils.isU2FSupportedAsync(); if (!isU2FSupported) { @@ -225,12 +228,12 @@ export class Blockchain { this.networkId, shouldPollUserAddress, ); - this._zeroEx.setProvider(provider, this.networkId); + this._contractWrappers.setProvider(provider, this.networkId); this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState(); this._dispatcher.updateProviderType(ProviderType.Ledger); } public async updateProviderToInjectedAsync(): Promise<void> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); if (_.isUndefined(this._cachedProvider)) { return; // Going from injected to injected, so we noop @@ -253,7 +256,7 @@ export class Blockchain { const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync(); this._userAddressIfExists = userAddresses[0]; - this._zeroEx.setProvider(provider, this.networkId); + this._contractWrappers.setProvider(provider, this.networkId); await this.fetchTokenInformationAsync(); this._blockchainWatcher.startEmittingNetworkConnectionAndUserBalanceState(); @@ -264,10 +267,10 @@ export class Blockchain { public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> { utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TokenAddressIsInvalid); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); this._showFlashMessageIfLedger(); - const txHash = await this._zeroEx.token.setProxyAllowanceAsync( + const txHash = await this._contractWrappers.token.setProxyAllowanceAsync( token.address, this._userAddressIfExists, amountInBaseUnits, @@ -278,11 +281,11 @@ export class Blockchain { await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); } public async transferAsync(token: Token, toAddress: string, amountInBaseUnits: BigNumber): Promise<void> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); this._showFlashMessageIfLedger(); - const txHash = await this._zeroEx.token.transferAsync( + const txHash = await this._contractWrappers.token.transferAsync( token.address, this._userAddressIfExists, toAddress, @@ -326,13 +329,13 @@ export class Blockchain { return zeroExSignedOrder; } public async fillOrderAsync(signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber): Promise<BigNumber> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); const shouldThrowOnInsufficientBalanceOrAllowance = true; this._showFlashMessageIfLedger(); - const txHash = await this._zeroEx.exchange.fillOrderAsync( + const txHash = await this._contractWrappers.exchange.fillOrderAsync( signedOrder, fillTakerTokenAmount, shouldThrowOnInsufficientBalanceOrAllowance, @@ -343,7 +346,7 @@ export class Blockchain { ); const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any; - this._zeroEx.exchange.throwLogErrorsAsErrors(logs); + this._contractWrappers.exchange.throwLogErrorsAsErrors(logs); const logFill = _.find(logs, { event: 'LogFill' }); const args = (logFill.args as any) as LogFillContractEventArgs; const filledTakerTokenAmount = args.filledTakerTokenAmount; @@ -351,32 +354,32 @@ export class Blockchain { } public async cancelOrderAsync(signedOrder: SignedOrder, cancelTakerTokenAmount: BigNumber): Promise<BigNumber> { this._showFlashMessageIfLedger(); - const txHash = await this._zeroEx.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, { + const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, { gasPrice: this._defaultGasPrice, }); const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any; - this._zeroEx.exchange.throwLogErrorsAsErrors(logs); + this._contractWrappers.exchange.throwLogErrorsAsErrors(logs); const logCancel = _.find(logs, { event: ExchangeEvents.LogCancel }); const args = (logCancel.args as any) as LogCancelContractEventArgs; const cancelledTakerTokenAmount = args.cancelledTakerTokenAmount; return cancelledTakerTokenAmount; } public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> { - utils.assert(ZeroEx.isValidOrderHash(orderHash), 'Must be valid orderHash'); - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); - const unavailableTakerAmount = await this._zeroEx.exchange.getUnavailableTakerAmountAsync(orderHash); + utils.assert(isValidOrderHash(orderHash), 'Must be valid orderHash'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); + const unavailableTakerAmount = await this._contractWrappers.exchange.getUnavailableTakerAmountAsync(orderHash); return unavailableTakerAmount; } public getExchangeContractAddressIfExists(): string | undefined { - return this._zeroEx.exchange.getContractAddress(); + return this._contractWrappers.exchange.getContractAddress(); } public async validateFillOrderThrowIfInvalidAsync( signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber, takerAddress: string, ): Promise<void> { - await this._zeroEx.exchange.validateFillOrderThrowIfInvalidAsync( + await this._contractWrappers.exchange.validateFillOrderThrowIfInvalidAsync( signedOrder, fillTakerTokenAmount, takerAddress, @@ -386,7 +389,7 @@ export class Blockchain { order: Order, cancelTakerTokenAmount: BigNumber, ): Promise<void> { - await this._zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount); + await this._contractWrappers.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount); } public isValidAddress(address: string): boolean { const lowercaseAddress = address.toLowerCase(); @@ -421,7 +424,7 @@ export class Blockchain { return newTokenBalancePromise; } public async signOrderHashAsync(orderHash: string): Promise<ECSignature> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); const makerAddress = this._userAddressIfExists; // If makerAddress is undefined, this means they have a web3 instance injected into their browser // but no account addresses associated with it. @@ -438,11 +441,8 @@ export class Blockchain { if ((isParityNode && !isLedgerSigner) || isTestRpc || isLedgerSigner) { shouldAddPersonalMessagePrefix = false; } - const ecSignature = await this._zeroEx.signOrderHashAsync( - orderHash, - makerAddress, - shouldAddPersonalMessagePrefix, - ); + const provider = this._contractWrappers.getProvider(); + const ecSignature = await signOrderHashAsync(provider, orderHash, makerAddress, shouldAddPersonalMessagePrefix); this._dispatcher.updateECSignature(ecSignature); return ecSignature; } @@ -461,11 +461,11 @@ export class Blockchain { return balanceInWei; } public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); this._showFlashMessageIfLedger(); - const txHash = await this._zeroEx.etherToken.depositAsync( + const txHash = await this._contractWrappers.etherToken.depositAsync( etherTokenAddress, amount, this._userAddressIfExists, @@ -476,11 +476,11 @@ export class Blockchain { await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); } public async convertWrappedEthTokensToEthAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); this._showFlashMessageIfLedger(); - const txHash = await this._zeroEx.etherToken.withdrawAsync( + const txHash = await this._contractWrappers.etherToken.withdrawAsync( etherTokenAddress, amount, this._userAddressIfExists, @@ -507,7 +507,7 @@ export class Blockchain { ownerAddressIfExists: string, tokenAddress: string, ): Promise<BigNumber[]> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); if (_.isUndefined(ownerAddressIfExists)) { const zero = new BigNumber(0); @@ -516,14 +516,16 @@ export class Blockchain { let balance = new BigNumber(0); let allowance = new BigNumber(0); if (this._doesUserAddressExist()) { - balance = await this._zeroEx.token.getBalanceAsync(tokenAddress, ownerAddressIfExists); - allowance = await this._zeroEx.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists); + balance = await this._contractWrappers.token.getBalanceAsync(tokenAddress, ownerAddressIfExists); + allowance = await this._contractWrappers.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists); } return [balance, allowance]; } public async getUserAccountsAsync(): Promise<string[]> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); - const userAccountsIfExists = await this._zeroEx.getAvailableAddressesAsync(); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); + const provider = this._contractWrappers.getProvider(); + const web3Wrapper = new Web3Wrapper(provider); + const userAccountsIfExists = await web3Wrapper.getAvailableAddressesAsync(); return userAccountsIfExists; } // HACK: When a user is using a Ledger, we simply dispatch the selected userAddress, which @@ -619,7 +621,9 @@ export class Blockchain { etherScanLinkIfExists, }), ); - const receipt = await this._zeroEx.awaitTransactionMinedAsync(txHash); + const provider = this._contractWrappers.getProvider(); + const web3Wrapper = new Web3Wrapper(provider); + const receipt = await web3Wrapper.awaitTransactionSuccessAsync(txHash); return receipt; } private _doesUserAddressExist(): boolean { @@ -633,7 +637,7 @@ export class Blockchain { return; // short-circuit } - if (!_.isUndefined(this._zeroEx)) { + if (!_.isUndefined(this._contractWrappers)) { // Since we do not have an index on the `taker` address and want to show // transactions where an account is either the `maker` or `taker`, we loop // through all fill events, and filter/cache them client-side. @@ -642,14 +646,14 @@ export class Blockchain { } } private async _startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); // Fetch historical logs await this._fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues); // Start a subscription for new logs - this._zeroEx.exchange.subscribe( + this._contractWrappers.exchange.subscribe( ExchangeEvents.LogFill, indexFilterValues, async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => { @@ -684,7 +688,7 @@ export class Blockchain { fromBlock, toBlock: 'latest' as BlockParam, }; - const decodedLogs = await this._zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>( + const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<LogFillContractEventArgs>( ExchangeEvents.LogFill, blockRange, indexFilterValues, @@ -741,11 +745,11 @@ export class Blockchain { } } private _stopWatchingExchangeLogFillEvents(): void { - this._zeroEx.exchange.unsubscribeAll(); + this._contractWrappers.exchange.unsubscribeAll(); } private async _getTokenRegistryTokensByAddressAsync(): Promise<TokenByAddress> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); - const tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync(); + utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); + const tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync(); const tokenByAddress: TokenByAddress = {}; _.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => { @@ -794,7 +798,7 @@ export class Blockchain { const zeroExConfigs = { networkId: this.networkId, }; - this._zeroEx = new ZeroEx(provider, zeroExConfigs); + this._contractWrappers = new ContractWrappers(provider, zeroExConfigs); this._updateProviderName(injectedWeb3); const shouldPollUserAddress = true; this._web3Wrapper = new Web3Wrapper(provider); 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 069a75560..d647bba80 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -78,7 +78,7 @@ export class EthWethConversionDialog extends React.Component< ? '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; - const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH); + const etherBalanceInEth = Web3Wrapper.toUnitAmount(this.props.etherBalanceInWei, constants.DECIMAL_PLACES_ETH); return ( <div> <div className="pb2">{explanation}</div> diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index 3c839d6f5..196414407 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -168,7 +168,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, // We specifically prefix kovan ETH. // TODO: We should probably add prefixes for all networks const isKovanNetwork = networkName === 'Kovan'; - const balanceInEth = ZeroEx.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH); + const balanceInEth = Web3Wrapper.toUnitAmount(balanceInWei, constants.DECIMAL_PLACES_ETH); const balanceString = `${balanceInEth.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`; return ( <TableRow key={userAddress} style={{ height: 40 }}> diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index e8db42a7a..4b91a2ebd 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -1,5 +1,5 @@ -import { ZeroEx } from '0x.js'; import { BigNumber, logUtils } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -95,11 +95,11 @@ export class EthWethConversionButton extends React.Component< try { if (direction === Side.Deposit) { await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value); - const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH); + const ethAmount = Web3Wrapper.toUnitAmount(value, constants.DECIMAL_PLACES_ETH); this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`); } else { await this.props.blockchain.convertWrappedEthTokensToEthAsync(token.address, value); - const tokenAmount = ZeroEx.toUnitAmount(value, token.decimals); + const tokenAmount = Web3Wrapper.toUnitAmount(value, token.decimals); this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`); } if (!this.props.isOutdatedWrappedEther) { diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index f19b05861..a5758a66a 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; @@ -85,7 +85,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt } public render(): React.ReactNode { const etherToken = this._getEthToken(); - const wethBalance = ZeroEx.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH); + const wethBalance = Web3Wrapper.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH); const isBidirectional = true; const etherscanUrl = sharedUtils.getEtherScanLinkIfExists( etherToken.address, @@ -93,7 +93,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt EtherscanLinkSuffixes.Address, ); const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH); - const userEtherBalanceInEth = ZeroEx.toUnitAmount( + const userEtherBalanceInEth = Web3Wrapper.toUnitAmount( this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, ); @@ -265,7 +265,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address]; const isStateLoaded = outdatedEtherTokenState.isLoaded; const balanceInEthIfExists = isStateLoaded - ? ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed( + ? Web3Wrapper.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed( configs.AMOUNT_DISPLAY_PRECSION, ) : undefined; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 59c32cebc..0168ec8f6 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,6 +1,8 @@ -import { Order as ZeroExOrder, ZeroEx } from '0x.js'; +import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils'; import { colors, constants as sharedConstants } from '@0xproject/react-shared'; +import { Order as ZeroExOrder } from '@0xproject/types'; import { BigNumber, logUtils } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as accounting from 'accounting'; import * as _ from 'lodash'; import { Card, CardHeader, CardText } from 'material-ui/Card'; @@ -433,15 +435,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress, takerTokenAmount: takerAmount, }; - orderHash = ZeroEx.getOrderHashHex(zeroExOrder); + orderHash = getOrderHashHex(zeroExOrder); const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists(); const signature = parsedOrder.signedOrder.ecSignature; - const isValidSignature = ZeroEx.isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker); + const isSignatureValid = isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker); if (exchangeContractAddr !== parsedOrder.signedOrder.exchangeContractAddress) { orderJSONErrMsg = 'This order was made on another network or using a deprecated Exchange contract'; parsedOrder = undefined; - } else if (!isValidSignature) { + } else if (!isSignatureValid) { orderJSONErrMsg = 'Order signature is invalid'; parsedOrder = undefined; } else { @@ -600,7 +602,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount); const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder); - const orderHash = ZeroEx.getOrderHashHex(signedOrder); + const orderHash = getOrderHashHex(signedOrder); const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash); const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount); try { @@ -646,7 +648,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { } } private _formatCurrencyAmount(amount: BigNumber, decimals: number): number { - const unitAmount = ZeroEx.toUnitAmount(amount, decimals); + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000; return roundedUnitAmount; } diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx index 97297d5a1..90eedbb18 100644 --- a/packages/website/ts/components/fill_order_json.tsx +++ b/packages/website/ts/components/fill_order_json.tsx @@ -1,4 +1,4 @@ -import { ZeroEx } from '0x.js'; +import { generatePseudoRandomSalt } from '@0xproject/order-utils'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; @@ -38,7 +38,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder s: '937862111edcba395f8a9e0cc1b2c5e12320...', v: 27, }; - const hintSalt = ZeroEx.generatePseudoRandomSalt(); + const hintSalt = generatePseudoRandomSalt(); const feeRecipient = constants.NULL_ADDRESS; const hintOrder = utils.generateOrder( exchangeContract, diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx index bb5adfa4e..f3f1ea2fc 100644 --- a/packages/website/ts/components/flash_messages/token_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Token } from 'ts/types'; @@ -22,7 +22,7 @@ export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, Verify on Etherscan </a> ); - const amountInUnits = ZeroEx.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals); + const amountInUnits = Web3Wrapper.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals); const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress); return ( <div> diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index d46c29058..5f968a5e4 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,5 +1,6 @@ -import { ECSignature, Order, ZeroEx } from '0x.js'; +import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils'; import { colors, constants as sharedConstants } from '@0xproject/react-shared'; +import { ECSignature, Order } from '@0xproject/types'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -78,7 +79,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G specified, anyone is able to fill it.'; const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists(); const initialTakerAddress = - this.props.orderTakerAddress === ZeroEx.NULL_ADDRESS ? '' : this.props.orderTakerAddress; + this.props.orderTakerAddress === constants.NULL_ADDRESS ? '' : this.props.orderTakerAddress; return ( <div className="clearfix mb2 lg-px4 md-px4 sm-px2"> <h3>Generate an order</h3> @@ -224,7 +225,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G // Upon closing the order JSON dialog, we update the orderSalt stored in the Redux store // with a new value so that if a user signs the identical order again, the newly signed // orderHash will not collide with the previously generated orderHash. - this.props.dispatcher.updateOrderSalt(ZeroEx.generatePseudoRandomSalt()); + this.props.dispatcher.updateOrderSalt(generatePseudoRandomSalt()); this.setState({ signingState: SigningState.UNSIGNED, }); @@ -305,7 +306,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G takerTokenAddress: hashData.receiveTokenContractAddr, takerTokenAmount: hashData.receiveAmount, }; - const orderHash = ZeroEx.getOrderHashHex(zeroExOrder); + const orderHash = getOrderHashHex(zeroExOrder); let globalErrMsg = ''; try { @@ -348,7 +349,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } private _updateOrderAddress(address?: string): void { if (!_.isUndefined(address)) { - const normalizedAddress = _.isEmpty(address) ? ZeroEx.NULL_ADDRESS : address; + const normalizedAddress = _.isEmpty(address) ? constants.NULL_ADDRESS : address; this.props.dispatcher.updateOrderTakerAddress(normalizedAddress); } } diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index 10f71b430..a9b8e9589 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -157,14 +157,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor const maxLength = 30; const tokens = _.values(this.props.tokenByAddress); const tokenWithNameIfExists = _.find(tokens, { name }); - const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists); + const doesTokenWithNameExists = !_.isUndefined(tokenWithNameIfExists); if (name === '') { nameErrText = 'Name is required'; } else if (!this._isValidName(name)) { nameErrText = 'Name should only contain letters, digits and spaces'; } else if (name.length > maxLength) { nameErrText = `Max length is ${maxLength}`; - } else if (tokenWithNameExists) { + } else if (doesTokenWithNameExists) { nameErrText = 'Token with this name already exists'; } @@ -177,14 +177,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor let symbolErrText = ''; const maxLength = 5; const tokens = _.values(this.props.tokenByAddress); - const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol })); + const doesTokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol })); if (symbol === '') { symbolErrText = 'Symbol is required'; } else if (!this._isAlphanumeric(symbol)) { symbolErrText = 'Can only include alphanumeric characters'; } else if (symbol.length > maxLength) { symbolErrText = `Max length is ${maxLength}`; - } else if (tokenWithSymbolExists) { + } else if (doesTokenWithSymbolExists) { symbolErrText = 'Token with symbol already exists'; } diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index fa684d85c..1f0f27410 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -1,5 +1,5 @@ -import { ZeroEx } from '0x.js'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; @@ -34,7 +34,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou }; public render(): React.ReactNode { const amount = this.props.amount - ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) + ? Web3Wrapper.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) : undefined; return ( <div className="flex overflow-hidden" style={this.props.style}> @@ -61,7 +61,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou private _onChange(isValid: boolean, amount?: BigNumber): void { const baseUnitAmountIfExists = _.isUndefined(amount) ? undefined - : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH); + : Web3Wrapper.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH); this.props.onChange(isValid, baseUnitAmountIfExists); } private _getLabelStyle(): React.CSSProperties { diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 37d4af138..8d9cdfc0b 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -1,5 +1,6 @@ -import { Order, ZeroEx } from '0x.js'; +import { getOrderHashHex } from '@0xproject/order-utils'; import { Styles } from '@0xproject/react-shared'; +import { Order } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); @@ -57,7 +58,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> { takerTokenAddress: hashData.receiveTokenContractAddr, takerTokenAmount: hashData.receiveAmount, }; - const orderHash = ZeroEx.getOrderHashHex(order); + const orderHash = getOrderHashHex(order); return orderHash; } } diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index f040928f1..a67120320 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { colors } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Link } from 'react-router-dom'; @@ -75,14 +75,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok } public render(): React.ReactNode { const amount = this.props.amount - ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) + ? Web3Wrapper.toUnitAmount(this.props.amount, this.props.token.decimals) : undefined; return ( <div className="flex overflow-hidden" style={this._getStyle()}> <BalanceBoundedInput label={this.props.label} amount={amount} - balance={ZeroEx.toUnitAmount(this.state.balance, this.props.token.decimals)} + balance={Web3Wrapper.toUnitAmount(this.state.balance, this.props.token.decimals)} onChange={this._onChange.bind(this)} onErrorMsgChange={this.props.onErrorMsgChange} validate={this._validate.bind(this)} @@ -103,7 +103,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok private _onChange(isValid: boolean, amount?: BigNumber): void { let baseUnitAmount; if (!_.isUndefined(amount)) { - baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals); + baseUnitAmount = Web3Wrapper.toBaseUnitAmount(amount, this.props.token.decimals); } this.props.onChange(isValid, baseUnitAmount); } diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index 6feefea50..35188c024 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -1,4 +1,4 @@ -import { ECSignature } from '0x.js'; +import { ECSignature } from '@0xproject/types'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index e8353a3b0..6a3301549 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -61,13 +61,13 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { return ( <div> {_.map(props.menuItemEntries, entry => { - const selected = entry.to === props.selectedPath; + const isSelected = entry.to === props.selectedPath; return ( <MenuItem key={entry.to} to={entry.to}> <MenuItemLabel title={entry.labelText} iconName={entry.iconName} - selected={selected} + selected={isSelected} theme={props.theme} /> </MenuItem> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index b992204a7..1bd318c28 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -466,8 +466,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { this.props.dispatcher.updateScreenWidth(newScreenWidth); } private _isSmallScreen(): boolean { - const result = this.props.screenWidth === ScreenWidths.Sm; - return result; + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + return isSmallScreen; } } diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 8da4e0e10..9ef6eaf59 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -60,8 +60,8 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde this._isUnmounted = true; } public render(): React.ReactNode { - const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); - if (!readyToRender) { + const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); + if (!isReadyToRender) { return ( // TODO: consolidate this loading component with the one in portal <div className="center"> diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 83948e5c2..f5a51dabb 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,4 +1,3 @@ -import { ZeroEx } from '0x.js'; import { colors, constants as sharedConstants, @@ -8,6 +7,7 @@ import { utils as sharedUtils, } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; @@ -111,7 +111,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala if (nextProps.userEtherBalanceInWei !== this.props.userEtherBalanceInWei) { if (this.state.isBalanceSpinnerVisible) { const receivedAmountInWei = nextProps.userEtherBalanceInWei.minus(this.props.userEtherBalanceInWei); - const receivedAmountInEth = ZeroEx.toUnitAmount(receivedAmountInWei, constants.DECIMAL_PLACES_ETH); + const receivedAmountInEth = Web3Wrapper.toUnitAmount(receivedAmountInWei, constants.DECIMAL_PLACES_ETH); const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; this.props.dispatcher.showFlashMessage( `Received ${receivedAmountInEth.toString(10)} ${networkName} Ether`, @@ -180,7 +180,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala token balances in order to execute trades.<br> \ Toggling sets an allowance for the<br> \ smart contract so you can start trading that token.'; - const userEtherBalanceInEth = ZeroEx.toUnitAmount( + const userEtherBalanceInEth = Web3Wrapper.toUnitAmount( this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, ); @@ -445,7 +445,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala }); } private _renderAmount(amount: BigNumber, decimals: number): React.ReactNode { - const unitAmount = ZeroEx.toUnitAmount(amount, decimals); + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); return unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION); } private _renderTokenName(token: Token): React.ReactNode { @@ -508,7 +508,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala try { await this.props.blockchain.mintTestTokensAsync(token); await this._refetchTokenStateAsync(token.address); - const amount = ZeroEx.toUnitAmount(constants.MINT_AMOUNT, token.decimals); + const amount = Web3Wrapper.toUnitAmount(constants.MINT_AMOUNT, token.decimals); this.props.dispatcher.showFlashMessage(`Successfully minted ${amount.toString(10)} ${token.symbol}`); return true; } catch (err) { diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 2c3273dee..f2d0c6177 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -152,12 +152,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)} /> </Link>, - <Link key="subMenuItem-order-utils" to={WebsitePaths.OrderUtils} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)} - /> - </Link>, <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none"> <MenuItem style={{ fontSize: styles.menuItem.fontSize }} diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx index adca4d58c..321a8b0e1 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as moment from 'moment'; @@ -90,10 +90,16 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra } private _renderAmounts(makerToken: Token, takerToken: Token): React.ReactNode { const fill = this.props.fill; - const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals); - const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals); + const filledTakerTokenAmountInUnits = Web3Wrapper.toUnitAmount( + fill.filledTakerTokenAmount, + takerToken.decimals, + ); + const filledMakerTokenAmountInUnits = Web3Wrapper.toUnitAmount( + fill.filledMakerTokenAmount, + takerToken.decimals, + ); let exchangeRate = filledTakerTokenAmountInUnits.div(filledMakerTokenAmountInUnits); - const fillMakerTokenAmount = ZeroEx.toBaseUnitAmount(filledMakerTokenAmountInUnits, makerToken.decimals); + const fillMakerTokenAmount = Web3Wrapper.toBaseUnitAmount(filledMakerTokenAmountInUnits, makerToken.decimals); let receiveAmount; let receiveToken; @@ -160,7 +166,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra ); } private _renderAmount(amount: BigNumber, symbol: string, decimals: number): React.ReactNode { - const unitAmount = ZeroEx.toUnitAmount(amount, decimals); + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); return ( <span> {unitAmount.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {symbol} diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx new file mode 100644 index 000000000..2f5172f05 --- /dev/null +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -0,0 +1,63 @@ +import { colors, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +export interface IconButtonProps { + iconName: string; + labelText?: string; + onClick: () => void; + color?: string; +} +interface IconButtonState { + isHovering: boolean; +} +export class IconButton extends React.Component<IconButtonProps, IconButtonState> { + public static defaultProps: Partial<IconButtonProps> = { + onClick: _.noop, + labelText: '', + color: colors.mediumBlue, + }; + public constructor(props: IconButtonProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render(): React.ReactNode { + const styles: Styles = { + root: { + cursor: 'pointer', + opacity: this.state.isHovering ? 0.5 : 1, + }, + icon: { + color: this.props.color, + fontSize: 20, + }, + label: { + color: this.props.color, + fontSize: 10, + }, + }; + return ( + <div + className="flex items-center py2" + onClick={this.props.onClick} + onMouseEnter={this._onToggleHover.bind(this, true)} + onMouseLeave={this._onToggleHover.bind(this, false)} + style={styles.root} + > + <i style={styles.icon} className={`zmdi ${this.props.iconName}`} /> + {!_.isEmpty(this.props.labelText) && ( + <div className="pl1" style={styles.label}> + {this.props.labelText} + </div> + )} + </div> + ); + } + private _onToggleHover(isHovering: boolean): void { + this.setState({ + isHovering, + }); + } +} diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx index a9ad567ef..0875cc56b 100644 --- a/packages/website/ts/components/ui/token_icon.tsx +++ b/packages/website/ts/components/ui/token_icon.tsx @@ -6,6 +6,7 @@ import { Token } from 'ts/types'; interface TokenIconProps { token: Token; diameter: number; + link?: string; } interface TokenIconState {} @@ -14,14 +15,20 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> { public render(): React.ReactNode { const token = this.props.token; const diameter = this.props.diameter; - return ( - <div> - {token.isRegistered && !_.isUndefined(token.iconUrl) ? ( - <img style={{ width: diameter, height: diameter }} src={token.iconUrl} /> - ) : ( - <Identicon address={token.address} diameter={diameter} /> - )} - </div> - ); + const icon = + token.isRegistered && !_.isUndefined(token.iconUrl) ? ( + <img style={{ width: diameter, height: diameter }} src={token.iconUrl} /> + ) : ( + <Identicon address={token.address} diameter={diameter} /> + ); + if (_.isEmpty(this.props.link)) { + return icon; + } else { + return ( + <a href={this.props.link} target="_blank" style={{ textDecoration: 'none' }}> + {icon} + </a> + ); + } } } diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx index 76a283547..a8d18006e 100644 --- a/packages/website/ts/components/visual_order.tsx +++ b/packages/website/ts/components/visual_order.tsx @@ -1,4 +1,4 @@ -import { ZeroEx } from '0x.js'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; @@ -63,7 +63,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt ); } private _renderAmount(assetToken: AssetToken, token: Token): React.ReactNode { - const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals); + const unitAmount = Web3Wrapper.toUnitAmount(assetToken.amount, token.decimals); return ( <div style={{ fontSize: 13 }}> {unitAmount.toNumber().toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {token.symbol} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index dab8b7d2f..d0354580d 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,4 +1,3 @@ -import { ZeroEx } from '0x.js'; import { constants as sharedConstants, EtherscanLinkSuffixes, @@ -6,10 +5,11 @@ import { utils as sharedUtils, } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; import FloatingActionButton from 'material-ui/FloatingActionButton'; -import { List, ListItem } from 'material-ui/List'; +import { ListItem } from 'material-ui/List'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import ContentAdd from 'material-ui/svg-icons/content/add'; import ContentRemove from 'material-ui/svg-icons/content/remove'; @@ -23,6 +23,7 @@ import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; @@ -91,12 +92,6 @@ const styles: Styles = { boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, overflow: 'hidden', }, - list: { - padding: 0, - }, - tokenItemInnerDiv: { - paddingLeft: 60, - }, headerItemInnerDiv: { paddingLeft: 65, }, @@ -114,23 +109,19 @@ const styles: Styles = { tokenItem: { backgroundColor: colors.walletDefaultItemBackground, }, - wrappedEtherOpenButtonLabel: { - fontSize: 10, - }, amountLabel: { fontWeight: 'bold', color: colors.black, }, + valueLabel: { + color: colors.grey, + fontSize: 14, + }, paddedItem: { paddingTop: 8, paddingBottom: 8, }, - accessoryItemsContainer: { - width: 150, - right: 8, - }, bodyInnerDiv: { - padding: 0, // TODO: make this completely responsive maxHeight: 475, overflow: 'auto', @@ -154,6 +145,7 @@ const FOOTER_ITEM_KEY = 'FOOTER'; const DISCONNECTED_ITEM_KEY = 'DISCONNECTED'; const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; +const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; export class Wallet extends React.Component<WalletProps, WalletState> { private _isUnmounted: boolean; @@ -204,16 +196,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> { } public render(): React.ReactNode { const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError; - return <div style={styles.root}>{isReadyToRender && this._renderRows()}</div>; - } - private _renderRows(): React.ReactNode { const isAddressAvailable = !_.isEmpty(this.props.userAddress); return ( - <List style={styles.list}> - {isAddressAvailable + <div className="flex flex-column" style={styles.root}> + {isReadyToRender && isAddressAvailable ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows()) : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())} - </List> + </div> ); } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { @@ -259,15 +248,15 @@ export class Wallet extends React.Component<WalletProps, WalletState> { overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', }; return ( - <ListItem + <div + style={bodyStyle} key={BODY_ITEM_KEY} - innerDivStyle={bodyStyle} onMouseEnter={this._onSidebarHover.bind(this)} onMouseLeave={this._onSidebarHoverOff.bind(this)} > {this._renderEthRows()} {this._renderTokenRows()} - </ListItem> + </div> ); } private _onSidebarHover(event: React.FormEvent<HTMLInputElement>): void { @@ -329,6 +318,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); } private _renderEthRows(): React.ReactNode { + const icon = <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />; const primaryText = this._renderAmount( this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, @@ -350,33 +340,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const style = isInWrappedEtherState ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; - return ( - <div key={ETHER_ITEM_KEY}> - <ListItem - primaryText={primaryText} - secondaryText={secondaryText} - leftIcon={<img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />} - rightAvatar={this._renderAccessoryItems(accessoryItemConfig)} - disableTouchRipple={true} - style={style} - innerDivStyle={styles.tokenItemInnerDiv} - /> - {isInWrappedEtherState && ( - <WrapEtherItem - userAddress={this.props.userAddress} - networkId={this.props.networkId} - blockchain={this.props.blockchain} - dispatcher={this.props.dispatcher} - userEtherBalanceInWei={this.props.userEtherBalanceInWei} - direction={accessoryItemConfig.wrappedEtherDirection} - etherToken={etherToken} - lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} - onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)} - refetchEthTokenStateAsync={this._refetchTokenStateAsync.bind(this, etherToken.address)} - /> - )} - </div> - ); + const key = ETHER_ITEM_KEY; + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; @@ -394,6 +359,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { this.props.networkId, EtherscanLinkSuffixes.Address, ); + const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />; const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol); const secondaryText = this._renderValue(tokenState.balance, token.decimals, tokenState.price); const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined; @@ -404,26 +370,34 @@ export class Wallet extends React.Component<WalletProps, WalletState> { tokenState, }, }; - // if this is the last item in the list, do not render the border, it is rendered by the footer - const borderedStyle = index !== this.props.trackedTokens.length - 1 ? styles.borderedItem : {}; + const key = token.address; + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig); + } + private _renderBalanceRow( + key: string, + icon: React.ReactNode, + primaryText: React.ReactNode, + secondaryText: React.ReactNode, + accessoryItemConfig: AccessoryItemConfig, + ): React.ReactNode { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection; const style = shouldShowWrapEtherItem ? { ...walletItemStyles.focusedItem, ...styles.paddedItem } - : { ...styles.tokenItem, ...borderedStyle, ...styles.paddedItem }; + : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem }; const etherToken = this._getEthToken(); return ( - <div key={token.address}> - <ListItem - primaryText={primaryText} - secondaryText={secondaryText} - leftIcon={this._renderTokenIcon(token, tokenLink)} - rightAvatar={this._renderAccessoryItems(accessoryItemConfig)} - disableTouchRipple={true} - style={style} - innerDivStyle={styles.tokenItemInnerDiv} - /> + <div key={key} className="flex flex-column"> + <div className="flex items-center" style={style}> + <div className="px2">{icon}</div> + <div className="flex-none pr2 pt2 pb2"> + {primaryText} + {secondaryText} + </div> + <div className="flex-auto" /> + <div>{this._renderAccessoryItems(accessoryItemConfig)}</div> + </div> {shouldShowWrapEtherItem && ( <WrapEtherItem userAddress={this.props.userAddress} @@ -444,16 +418,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> { private _renderAccessoryItems(config: AccessoryItemConfig): React.ReactElement<{}> { const shouldShowWrappedEtherAction = !_.isUndefined(config.wrappedEtherDirection); const shouldShowToggle = !_.isUndefined(config.allowanceToggleConfig); + // if we don't have a toggle, we still want some space to the right of the "wrap" button so that it aligns with + // the "unwrap" button in the row below + const toggle = shouldShowToggle ? ( + this._renderAllowanceToggle(config.allowanceToggleConfig) + ) : ( + <div style={{ width: NO_ALLOWANCE_TOGGLE_SPACE_WIDTH }} /> + ); return ( - <div style={styles.accessoryItemsContainer}> - <div className="flex"> - <div className="flex-auto"> - {shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherDirection)} - </div> - <div className="flex-last py1"> - {shouldShowToggle && this._renderAllowanceToggle(config.allowanceToggleConfig)} - </div> + <div className="flex items-center"> + <div className="flex-auto"> + {shouldShowWrappedEtherAction && this._renderWrappedEtherButton(config.wrappedEtherDirection)} </div> + <div className="flex-last pl2">{toggle}</div> </div> ); } @@ -473,7 +450,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); } private _renderAmount(amount: BigNumber, decimals: number, symbol: string): React.ReactNode { - const unitAmount = ZeroEx.toUnitAmount(amount, decimals); + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); const result = `${formattedAmount} ${symbol}`; return <div style={styles.amountLabel}>{result}</div>; @@ -482,41 +459,28 @@ export class Wallet extends React.Component<WalletProps, WalletState> { if (_.isUndefined(price)) { return null; } - const unitAmount = ZeroEx.toUnitAmount(amount, decimals); + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const value = unitAmount.mul(price); const formattedAmount = value.toFixed(USD_DECIMAL_PLACES); const result = `$${formattedAmount}`; - return result; - } - private _renderTokenIcon(token: Token, tokenLink?: string): React.ReactElement<{}> { - const tooltipId = `tooltip-${token.address}`; - const tokenIcon = <TokenIcon token={token} diameter={ICON_DIMENSION} />; - if (_.isUndefined(tokenLink)) { - return tokenIcon; - } else { - return ( - <a href={tokenLink} target="_blank" style={{ textDecoration: 'none' }}> - {tokenIcon} - </a> - ); - } + return <div style={styles.valueLabel}>{result}</div>; } private _renderWrappedEtherButton(wrappedEtherDirection: Side): React.ReactNode { const isWrappedEtherDirectionOpen = this.state.wrappedEtherDirection === wrappedEtherDirection; let buttonLabel; - let buttonIcon; + let buttonIconName; if (isWrappedEtherDirectionOpen) { buttonLabel = 'cancel'; - buttonIcon = <Close />; + buttonIconName = 'zmdi-close'; } else { switch (wrappedEtherDirection) { case Side.Deposit: buttonLabel = 'wrap'; - buttonIcon = <NavigationArrowDownward />; + buttonIconName = 'zmdi-long-arrow-down'; break; case Side.Receive: buttonLabel = 'unwrap'; - buttonIcon = <NavigationArrowUpward />; + buttonIconName = 'zmdi-long-arrow-up'; break; default: throw utils.spawnSwitchErr('wrappedEtherDirection', wrappedEtherDirection); @@ -526,14 +490,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ? this._closeWrappedEtherActionRow.bind(this) : this._openWrappedEtherActionRow.bind(this, wrappedEtherDirection); return ( - <FlatButton - label={buttonLabel} - labelPosition="after" - primary={true} - icon={buttonIcon} - labelStyle={styles.wrappedEtherOpenButtonLabel} - onClick={onClick} - /> + <IconButton iconName={buttonIconName} labelText={buttonLabel} onClick={onClick} color={colors.mediumBlue} /> ); } private _getInitialTrackedTokenStateByAddress(tokenAddresses: string[]): TokenStateByAddress { diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 98b28b3ad..1dfcffadf 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -1,6 +1,6 @@ -import { ZeroEx } from '0x.js'; import { Styles } from '@0xproject/react-shared'; import { BigNumber, logUtils } from '@0xproject/utils'; +import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; import { ListItem } from 'material-ui/List'; @@ -37,7 +37,10 @@ interface WrapEtherItemState { } const styles: Styles = { - topLabel: { color: colors.black, fontSize: 11 }, + topLabel: { + color: colors.black, + fontSize: 11, + }, inputContainer: { backgroundColor: colors.white, borderBottomRightRadius: 3, @@ -45,9 +48,10 @@ const styles: Styles = { borderTopRightRadius: 3, borderTopLeftRadius: 3, padding: 4, - width: 125, }, - amountInput: { height: 34 }, + amountInput: { + height: 34, + }, amountInputLabel: { paddingTop: 10, paddingRight: 10, @@ -58,8 +62,6 @@ const styles: Styles = { amountInputHint: { bottom: 18, }, - innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 }, - wrapEtherConfirmationButtonContainer: { width: 128, top: 19 }, wrapEtherConfirmationButtonLabel: { fontSize: 12, color: colors.white, @@ -70,6 +72,9 @@ const styles: Styles = { color: colors.red, minHeight: 20, }, + conversionSpinner: { + paddingTop: 26, + }, }; export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEtherItemState> { @@ -82,14 +87,19 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther }; } public render(): React.ReactNode { - const etherBalanceInEth = ZeroEx.toUnitAmount(this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH); + const etherBalanceInEth = Web3Wrapper.toUnitAmount( + this.props.userEtherBalanceInWei, + constants.DECIMAL_PLACES_ETH, + ); const isWrappingEth = this.props.direction === Side.Deposit; const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1'; + return ( - <ListItem - primaryText={ - <div> - <div style={styles.topLabel}>{topLabelText}</div> + <div className="flex" style={walletItemStyles.focusedItem}> + <div>{this._renderIsEthConversionHappeningSpinner()} </div> + <div className="flex flex-column"> + <div style={styles.topLabel}>{topLabelText}</div> + <div className="flex items-center"> <div style={styles.inputContainer}> {isWrappingEth ? ( <EthAmountInput @@ -128,16 +138,12 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther /> )} </div> - {this._renderErrorMsg()} + <div>{this._renderWrapEtherConfirmationButton()}</div> </div> - } - secondaryTextLines={2} - disableTouchRipple={true} - style={walletItemStyles.focusedItem} - innerDivStyle={styles.innerDiv} - leftIcon={this._renderIsEthConversionHappeningSpinner()} - rightAvatar={this._renderWrapEtherConfirmationButton()} - /> + + {this._renderErrorMsg()} + </div> + </div> ); } private _onValueChange(isValid: boolean, amount?: BigNumber): void { @@ -151,17 +157,19 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther }); } private _renderIsEthConversionHappeningSpinner(): React.ReactElement<{}> { - return this.state.isEthConversionHappening ? ( - <div className="pl1" style={{ paddingTop: 10 }}> + const visibility = this.state.isEthConversionHappening ? 'visible' : 'hidden'; + const style: React.CSSProperties = { ...styles.conversionSpinner, visibility }; + return ( + <div className="pl3 pr2" style={style}> <i className="zmdi zmdi-spinner zmdi-hc-spin" /> </div> - ) : null; + ); } private _renderWrapEtherConfirmationButton(): React.ReactElement<{}> { const isWrappingEth = this.props.direction === Side.Deposit; const labelText = isWrappingEth ? 'wrap' : 'unwrap'; return ( - <div style={styles.wrapEtherConfirmationButtonContainer}> + <div className="pl1 pr3"> <FlatButton backgroundColor={colors.wrapEtherConfirmationButton} label={labelText} @@ -184,11 +192,11 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther const amountToConvert = this.state.currentInputAmount; if (this.props.direction === Side.Deposit) { await this.props.blockchain.convertEthToWrappedEthTokensAsync(etherToken.address, amountToConvert); - const ethAmount = ZeroEx.toUnitAmount(amountToConvert, constants.DECIMAL_PLACES_ETH); + const ethAmount = Web3Wrapper.toUnitAmount(amountToConvert, constants.DECIMAL_PLACES_ETH); this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`); } else { await this.props.blockchain.convertWrappedEthTokensToEthAsync(etherToken.address, amountToConvert); - const tokenAmount = ZeroEx.toUnitAmount(amountToConvert, etherToken.decimals); + const tokenAmount = Web3Wrapper.toUnitAmount(amountToConvert, etherToken.decimals); this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`); } await this.props.refetchEthTokenStateAsync(); diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 8c5deb690..98c9b8cd6 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -1,4 +1,4 @@ -import { ECSignature } from '0x.js'; +import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 24ea7614f..ac67ca968 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -151,7 +151,7 @@ const teamRow5: ProfileInfo[] = [ }, { name: 'Francesco Agosti', - title: 'Engineer', + title: 'Senior Frontend Engineer', description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer Science at Duke.`, image: 'images/team/fragosti.png', linkedIn: 'https://www.linkedin.com/in/fragosti/', diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts index 981522360..340b80d49 100644 --- a/packages/website/ts/redux/dispatcher.ts +++ b/packages/website/ts/redux/dispatcher.ts @@ -1,4 +1,4 @@ -import { ECSignature } from '0x.js'; +import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Dispatch } from 'redux'; import { State } from 'ts/redux/reducer'; diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index bb8f1472b..fba6afa5d 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -1,4 +1,5 @@ -import { ECSignature, ZeroEx } from '0x.js'; +import { constants, generatePseudoRandomSalt } from '@0xproject/order-utils'; +import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as moment from 'moment'; @@ -65,8 +66,8 @@ const INITIAL_STATE: State = { s: '', v: 27, }, - orderTakerAddress: ZeroEx.NULL_ADDRESS, - orderSalt: ZeroEx.generatePseudoRandomSalt(), + orderTakerAddress: constants.NULL_ADDRESS, + orderSalt: generatePseudoRandomSalt(), nodeVersion: undefined, screenWidth: utils.getScreenWidth(), shouldBlockchainErrDialogBeOpen: false, diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 33e4d6c30..294a58f64 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,4 +1,4 @@ -import { ECSignature } from '0x.js'; +import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 9fec814b7..e72a7f201 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -19,7 +19,7 @@ export const configs = { // WARNING: ZRX & WETH MUST always be default trackedTokens DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'], DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com', - DOMAIN_DOGFOOD: 'dogfood-0xproject.s3-website-us-east-1.amazonaws.com', + DOMAIN_DOGFOOD: 'dogfood.0xproject.com', DOMAIN_DEVELOPMENT: '0xproject.localhost:3572', DOMAIN_PRODUCTION: '0xproject.com', ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION, diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index c370ac90c..e79a873e0 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,7 +1,7 @@ -import { ContractWrappersError, ECSignature, ExchangeContractErrs, ZeroEx } from '0x.js'; +import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers'; import { OrderError } from '@0xproject/order-utils'; import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared'; -import { Provider } from '@0xproject/types'; +import { ECSignature, Provider } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; |