aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/package.json20
-rw-r--r--packages/website/ts/blockchain.ts114
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx4
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx6
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx8
-rw-r--r--packages/website/ts/components/fill_order.tsx14
-rw-r--r--packages/website/ts/components/fill_order_json.tsx4
-rw-r--r--packages/website/ts/components/flash_messages/token_send_completed.tsx4
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx11
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx8
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx6
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx5
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx8
-rw-r--r--packages/website/ts/components/order_json.tsx2
-rw-r--r--packages/website/ts/components/portal/menu.tsx4
-rw-r--r--packages/website/ts/components/portal/portal.tsx4
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx4
-rw-r--r--packages/website/ts/components/token_balances.tsx10
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx6
-rw-r--r--packages/website/ts/components/trade_history/trade_history_item.tsx16
-rw-r--r--packages/website/ts/components/ui/icon_button.tsx63
-rw-r--r--packages/website/ts/components/ui/token_icon.tsx25
-rw-r--r--packages/website/ts/components/visual_order.tsx4
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx159
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx60
-rw-r--r--packages/website/ts/containers/generate_order_form.ts2
-rw-r--r--packages/website/ts/pages/about/about.tsx2
-rw-r--r--packages/website/ts/redux/dispatcher.ts2
-rw-r--r--packages/website/ts/redux/reducer.ts7
-rw-r--r--packages/website/ts/types.ts2
-rw-r--r--packages/website/ts/utils/configs.ts2
-rw-r--r--packages/website/ts/utils/utils.ts4
-rw-r--r--packages/website/tslint.json3
-rw-r--r--packages/website/webpack.config.js17
35 files changed, 336 insertions, 278 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index 4e3141663..cd0bfaf5e 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
{
"name": "@0xproject/website",
- "version": "0.0.32",
+ "version": "0.0.33",
"engines": {
"node": ">=6.12"
},
@@ -11,20 +11,20 @@
"clean": "shx rm -f public/bundle*",
"lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
"watch": "webpack-dev-server --content-base public --https",
- "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+ "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
"deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
"deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
},
"author": "Fabio Berger",
"license": "Apache-2.0",
"dependencies": {
- "0x.js": "^0.37.2",
- "@0xproject/react-docs": "^0.0.11",
- "@0xproject/react-shared": "^0.1.6",
- "@0xproject/subproviders": "^0.10.1",
- "@0xproject/typescript-typings": "^0.3.1",
- "@0xproject/utils": "^0.6.1",
- "@0xproject/web3-wrapper": "^0.6.3",
+ "@0xproject/react-docs": "^0.0.12",
+ "@0xproject/react-shared": "^0.1.7",
+ "@0xproject/subproviders": "^0.10.2",
+ "@0xproject/contract-wrappers": "^0.0.2",
+ "@0xproject/typescript-typings": "^0.3.2",
+ "@0xproject/utils": "^0.6.2",
+ "@0xproject/web3-wrapper": "^0.6.4",
"accounting": "^0.4.1",
"basscss": "^8.0.3",
"blockies": "^0.0.2",
@@ -81,6 +81,7 @@
"imports-loader": "0.6.x",
"json-loader": "^0.5.4",
"less-loader": "^2.2.3",
+ "make-promises-safe": "^1.1.0",
"raw-loader": "^0.5.1",
"shx": "^0.2.2",
"source-map-loader": "^0.1.6",
@@ -88,6 +89,7 @@
"tslint": "5.8.0",
"tslint-config-0xproject": "^0.0.2",
"typescript": "2.7.1",
+ "uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^3.1.0",
"webpack-dev-middleware": "^1.10.0",
"webpack-dev-server": "^2.5.0"
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';
diff --git a/packages/website/tslint.json b/packages/website/tslint.json
index d6a5f5031..b55ffe90f 100644
--- a/packages/website/tslint.json
+++ b/packages/website/tslint.json
@@ -4,6 +4,7 @@
"no-implicit-dependencies": false,
"no-object-literal-type-assertion": false,
"completed-docs": false,
- "prefer-function-over-method": false
+ "prefer-function-over-method": false,
+ "custom-no-magic-numbers": false
}
}
diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js
index e28e9e064..b5e9cf6dd 100644
--- a/packages/website/webpack.config.js
+++ b/packages/website/webpack.config.js
@@ -1,5 +1,6 @@
const path = require('path');
const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: ['./ts/index.tsx'],
@@ -24,6 +25,11 @@ module.exports = {
{
test: /\.js$/,
loader: 'source-map-loader',
+ exclude: [
+ // instead of /\/node_modules\//
+ path.join(process.cwd(), 'node_modules'),
+ path.join(process.cwd(), '../..', 'node_modules'),
+ ],
},
{
test: /\.tsx?$/,
@@ -76,9 +82,14 @@ module.exports = {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
- new webpack.optimize.UglifyJsPlugin({
- mangle: {
- except: ['BigNumber'],
+ // TODO: Revert to webpack bundled version with webpack v4.
+ // The v3 series bundled version does not support ES6 and
+ // fails to build.
+ new UglifyJsPlugin({
+ uglifyOptions: {
+ mangle: {
+ reserved: ['BigNumber'],
+ },
},
}),
]