crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #611 from 0xProject/feature/remove-0x-from=-website

Browse Source 
Remove 0x.js as a dependency from website
This commit is contained in:
Leonid Logvinov
2018-05-23 10:16:00 -07:00
committed by GitHub
parent f3fe9661f6 65f09d0528
commit af0d9439d4
24 changed files with 136 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/website/package.json
View File

@@ -18,7 +18,6 @@
"author": "Fabio Berger",
"license": "Apache-2.0",
"dependencies": {
"0x.js": "^0.38.0",
"@0xproject/react-docs": "^0.0.12",
"@0xproject/react-shared": "^0.1.7",
"@0xproject/subproviders": "^0.10.2",

114
packages/website/ts/blockchain.ts
View File

@@ -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.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<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);

4
packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
View File

@@ -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>

4
packages/website/ts/components/dialogs/ledger_config_dialog.tsx
View File

@@ -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 }}>

6
packages/website/ts/components/eth_weth_conversion_button.tsx
View File

@@ -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) {

8
packages/website/ts/components/eth_wrappers.tsx
View File

@@ -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;

14
packages/website/ts/components/fill_order.tsx
View File

@@ -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;
}

4
packages/website/ts/components/fill_order_json.tsx
View File

@@ -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,

4
packages/website/ts/components/flash_messages/token_send_completed.tsx
View File

@@ -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>

11
packages/website/ts/components/generate_order/generate_order_form.tsx
View File

@@ -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);
}
}

6
packages/website/ts/components/inputs/eth_amount_input.tsx
View File

@@ -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 {

5
packages/website/ts/components/inputs/hash_input.tsx
View File

@@ -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;
}
}

8
packages/website/ts/components/inputs/token_amount_input.tsx
View File

@@ -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);
}

2
packages/website/ts/components/order_json.tsx
View File

@@ -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';

10
packages/website/ts/components/token_balances.tsx
View File

@@ -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) {

16
packages/website/ts/components/trade_history/trade_history_item.tsx
View File

@@ -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}

4
packages/website/ts/components/visual_order.tsx
View File

@@ -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}

6
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -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<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,7 +482,7 @@ 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}`;

11
packages/website/ts/components/wallet/wrap_ether_item.tsx
View File

@@ -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<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 (
@@ -184,11 +187,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();

2
packages/website/ts/containers/generate_order_form.ts
View File

@@ -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';

2
packages/website/ts/redux/dispatcher.ts
View File

@@ -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';

7
packages/website/ts/redux/reducer.ts
View File

@@ -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,

2
packages/website/ts/types.ts
View File

@@ -1,4 +1,4 @@
import { ECSignature } from '0x.js';
import { ECSignature } from '@0xproject/types';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';

4
packages/website/ts/utils/utils.ts
View File

@@ -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';