From 5913d654bdf77d25b95570b1e656f63cc89ff97a Mon Sep 17 00:00:00 2001 From: Leonid Logvinov Date: Tue, 22 May 2018 16:18:52 -0700 Subject: Remove 0x.js as a dependency from website --- packages/website/ts/blockchain.ts | 118 +++++++++++---------- .../dialogs/eth_weth_conversion_dialog.tsx | 4 +- .../ts/components/dialogs/ledger_config_dialog.tsx | 4 +- .../ts/components/eth_weth_conversion_button.tsx | 6 +- packages/website/ts/components/eth_wrappers.tsx | 8 +- packages/website/ts/components/fill_order.tsx | 14 +-- packages/website/ts/components/fill_order_json.tsx | 4 +- .../flash_messages/token_send_completed.tsx | 4 +- .../generate_order/generate_order_form.tsx | 11 +- .../ts/components/inputs/eth_amount_input.tsx | 6 +- .../website/ts/components/inputs/hash_input.tsx | 5 +- .../ts/components/inputs/token_amount_input.tsx | 8 +- packages/website/ts/components/order_json.tsx | 2 +- packages/website/ts/components/token_balances.tsx | 10 +- .../trade_history/trade_history_item.tsx | 16 ++- packages/website/ts/components/visual_order.tsx | 4 +- packages/website/ts/components/wallet/wallet.tsx | 6 +- .../ts/components/wallet/wrap_ether_item.tsx | 11 +- .../website/ts/containers/generate_order_form.ts | 2 +- packages/website/ts/redux/dispatcher.ts | 2 +- packages/website/ts/redux/reducer.ts | 7 +- packages/website/ts/types.ts | 2 +- packages/website/ts/utils/utils.ts | 4 +- 23 files changed, 137 insertions(+), 121 deletions(-) (limited to 'packages/website/ts') diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 32acb9d43..17dbee5c8 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 { - 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 { - 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 { - 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 { 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 { - 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 { - 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> = 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 { 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> = 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - 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 { - 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.awaitTransactionMinedAsync(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 { - 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) => { @@ -684,7 +688,7 @@ export class Blockchain { fromBlock, toBlock: 'latest' as BlockParam, }; - const decodedLogs = await this._zeroEx.exchange.getLogsAsync( + const decodedLogs = await this._contractWrappers.exchange.getLogsAsync( 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 { - 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) => { @@ -787,14 +791,12 @@ export class Blockchain { const provider = await Blockchain._getProviderAsync(injectedWeb3, networkIdIfExists); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists - : configs.IS_MAINNET_ENABLED - ? constants.NETWORK_ID_MAINNET - : constants.NETWORK_ID_KOVAN; + : configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_KOVAN; this._dispatcher.updateNetworkId(this.networkId); 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 (
{explanation}
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 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 { 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 { 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 { } } 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 ); - 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 (
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

Generate an order

@@ -224,7 +225,7 @@ export class GenerateOrderForm extends React.Component @@ -61,7 +61,7 @@ export class EthAmountInput extends React.Component { 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 \ Toggling sets an allowance for the
\ 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 {unitAmount.toFixed(configs.AMOUNT_DISPLAY_PRECSION)} {symbol} 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 {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..afcf3862f 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,6 +5,7 @@ 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'; @@ -473,7 +473,7 @@ export class Wallet extends React.Component { ); } 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
{result}
; @@ -482,7 +482,7 @@ export class Wallet extends React.Component { 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}`; diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 98b28b3ad..0a0a8a1fe 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'; @@ -82,7 +82,10 @@ export class WrapEtherItem extends React.Component