aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/package.json8
-rw-r--r--packages/website/ts/blockchain.ts249
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx97
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx89
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx99
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx32
-rw-r--r--packages/website/ts/components/dialogs/send_dialog.tsx22
-rw-r--r--packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx25
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx24
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx19
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx33
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx268
-rw-r--r--packages/website/ts/components/fill_order.tsx235
-rw-r--r--packages/website/ts/components/fill_order_json.tsx36
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx16
-rw-r--r--packages/website/ts/components/flash_messages/token_send_completed.tsx23
-rw-r--r--packages/website/ts/components/flash_messages/transaction_submitted.tsx8
-rw-r--r--packages/website/ts/components/footer.tsx87
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx76
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx92
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx47
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx20
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx16
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx65
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx26
-rw-r--r--packages/website/ts/components/inputs/expiration_input.tsx26
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx16
-rw-r--r--packages/website/ts/components/inputs/identicon_address_input.tsx17
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx28
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx23
-rw-r--r--packages/website/ts/components/order_json.tsx115
-rw-r--r--packages/website/ts/components/portal.tsx115
-rw-r--r--packages/website/ts/components/portal_menu.tsx12
-rw-r--r--packages/website/ts/components/send_button.tsx16
-rw-r--r--packages/website/ts/components/token_balances.tsx313
-rw-r--r--packages/website/ts/components/top_bar.tsx162
-rw-r--r--packages/website/ts/components/top_bar_menu_item.tsx30
-rw-r--r--packages/website/ts/components/track_token_confirmation.tsx32
-rw-r--r--packages/website/ts/components/trade_history/trade_history.tsx12
-rw-r--r--packages/website/ts/components/trade_history/trade_history_item.tsx65
-rw-r--r--packages/website/ts/components/ui/alert.tsx6
-rw-r--r--packages/website/ts/components/ui/badge.tsx2
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx38
-rw-r--r--packages/website/ts/components/ui/drop_down_menu_item.tsx29
-rw-r--r--packages/website/ts/components/ui/ethereum_address.tsx13
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx35
-rw-r--r--packages/website/ts/components/ui/fake_text_field.tsx6
-rw-r--r--packages/website/ts/components/ui/flash_message.tsx4
-rw-r--r--packages/website/ts/components/ui/help_tooltip.tsx4
-rw-r--r--packages/website/ts/components/ui/identicon.tsx18
-rw-r--r--packages/website/ts/components/ui/input_label.tsx6
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx21
-rw-r--r--packages/website/ts/components/ui/loading.tsx21
-rw-r--r--packages/website/ts/components/ui/menu_item.tsx4
-rw-r--r--packages/website/ts/components/ui/party.tsx126
-rw-r--r--packages/website/ts/components/ui/required_label.tsx6
-rw-r--r--packages/website/ts/components/ui/simple_loading.tsx11
-rw-r--r--packages/website/ts/components/ui/swap_icon.tsx9
-rw-r--r--packages/website/ts/components/ui/token_icon.tsx14
-rw-r--r--packages/website/ts/components/visual_order.tsx12
-rw-r--r--packages/website/ts/containers/connect_documentation.tsx51
-rw-r--r--packages/website/ts/containers/generate_order_form.tsx15
-rw-r--r--packages/website/ts/containers/portal.tsx43
-rw-r--r--packages/website/ts/containers/smart_contracts_documentation.tsx42
-rw-r--r--packages/website/ts/containers/zero_ex_js_documentation.tsx52
-rw-r--r--packages/website/ts/globals.d.ts26
-rw-r--r--packages/website/ts/index.tsx61
-rw-r--r--packages/website/ts/lazy_component.tsx13
-rw-r--r--packages/website/ts/local_storage/tracked_token_storage.ts12
-rw-r--r--packages/website/ts/local_storage/trade_history_storage.tsx18
-rw-r--r--packages/website/ts/pages/about/about.tsx97
-rw-r--r--packages/website/ts/pages/about/profile.tsx54
-rw-r--r--packages/website/ts/pages/documentation/comment.tsx7
-rw-r--r--packages/website/ts/pages/documentation/custom_enum.tsx9
-rw-r--r--packages/website/ts/pages/documentation/docs_info.ts9
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx246
-rw-r--r--packages/website/ts/pages/documentation/enum.tsx6
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx36
-rw-r--r--packages/website/ts/pages/documentation/interface.tsx32
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx106
-rw-r--r--packages/website/ts/pages/documentation/method_signature.tsx60
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx17
-rw-r--r--packages/website/ts/pages/documentation/type.tsx113
-rw-r--r--packages/website/ts/pages/documentation/type_definition.tsx68
-rw-r--r--packages/website/ts/pages/faq/faq.tsx374
-rw-r--r--packages/website/ts/pages/faq/question.tsx18
-rw-r--r--packages/website/ts/pages/landing/landing.tsx427
-rw-r--r--packages/website/ts/pages/not_found.tsx13
-rw-r--r--packages/website/ts/pages/shared/anchor_title.tsx21
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx8
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx23
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx107
-rw-r--r--packages/website/ts/pages/shared/section_header.tsx10
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx10
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx96
-rw-r--r--packages/website/ts/redux/dispatcher.ts66
-rw-r--r--packages/website/ts/redux/reducer.ts6
-rw-r--r--packages/website/ts/schemas/order_schema.ts27
-rw-r--r--packages/website/ts/schemas/order_taker_schema.ts8
-rw-r--r--packages/website/ts/schemas/signature_data_schema.ts8
-rw-r--r--packages/website/ts/schemas/token_schema.ts8
-rw-r--r--packages/website/ts/schemas/validator.ts10
-rw-r--r--packages/website/ts/types.ts77
-rw-r--r--packages/website/ts/utils/colors.ts2
-rw-r--r--packages/website/ts/utils/configs.ts97
-rw-r--r--packages/website/ts/utils/constants.ts10
-rw-r--r--packages/website/ts/utils/doc_utils.ts15
-rw-r--r--packages/website/ts/utils/doxity_utils.ts74
-rw-r--r--packages/website/ts/utils/error_reporter.ts10
-rw-r--r--packages/website/ts/utils/mui_theme.ts4
-rw-r--r--packages/website/ts/utils/typedoc_utils.ts182
-rw-r--r--packages/website/ts/utils/utils.ts81
-rw-r--r--packages/website/ts/web3_wrapper.ts16
113 files changed, 2778 insertions, 3302 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index ad7f361e5..dcfbe9330 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
{
"name": "@0xproject/website",
- "version": "0.0.3",
+ "version": "0.0.4",
"private": true,
"description": "Website and 0x portal dapp",
"scripts": {
@@ -18,9 +18,9 @@
"author": "Fabio Berger",
"license": "Apache-2.0",
"dependencies": {
- "0x.js": "^0.28.0",
- "@0xproject/subproviders": "^0.1.1",
- "@0xproject/utils": "^0.1.1",
+ "0x.js": "^0.29.0",
+ "@0xproject/subproviders": "^0.2.0",
+ "@0xproject/utils": "^0.1.2",
"accounting": "^0.4.1",
"basscss": "^8.0.3",
"bignumber.js": "~4.1.0",
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 3d21a5046..4ed1fe371 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -21,16 +21,16 @@ import {
LedgerWalletSubprovider,
RedundantRPCSubprovider,
} from '@0xproject/subproviders';
-import {intervalUtils, promisify} from '@0xproject/utils';
+import { intervalUtils, promisify } from '@0xproject/utils';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
import contract = require('truffle-contract');
-import {TokenSendCompleted} from 'ts/components/flash_messages/token_send_completed';
-import {TransactionSubmitted} from 'ts/components/flash_messages/transaction_submitted';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {tradeHistoryStorage} from 'ts/local_storage/trade_history_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { TokenSendCompleted } from 'ts/components/flash_messages/token_send_completed';
+import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
import {
BlockchainCallErrs,
BlockchainErrs,
@@ -43,11 +43,11 @@ import {
TokenByAddress,
TokenStateByAddress,
} from 'ts/types';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
-import {Web3Wrapper} from 'ts/web3_wrapper';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
+import { Web3Wrapper } from 'ts/web3_wrapper';
import Web3 = require('web3');
import ProviderEngine = require('web3-provider-engine');
import FilterSubprovider = require('web3-provider-engine/subproviders/filters');
@@ -101,9 +101,7 @@ export class Blockchain {
provider = new ProviderEngine();
provider.addProvider(new InjectedWeb3Subprovider(injectedWeb3));
provider.addProvider(new FilterSubprovider());
- provider.addProvider(new RedundantRPCSubprovider(
- publicNodeUrlsIfExistsForNetworkId,
- ));
+ provider.addProvider(new RedundantRPCSubprovider(publicNodeUrlsIfExistsForNetworkId));
provider.start();
} else if (doesInjectedWeb3Exist) {
// Since no public node for this network, all requests go to injectedWeb3 instance
@@ -114,12 +112,8 @@ export class Blockchain {
// injected into their browser.
provider = new ProviderEngine();
provider.addProvider(new FilterSubprovider());
- const networkId = configs.IS_MAINNET_ENABLED ?
- constants.NETWORK_ID_MAINNET :
- constants.NETWORK_ID_TESTNET;
- provider.addProvider(new RedundantRPCSubprovider(
- configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
- ));
+ const networkId = configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_TESTNET;
+ provider.addProvider(new RedundantRPCSubprovider(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId]));
provider.start();
}
@@ -162,8 +156,7 @@ export class Blockchain {
// already in the tokenRegistry.
// TODO: Remove this hack once we've updated the TokenRegistries
// Airtable task: https://airtable.com/tblFe0Q9JuKJPYbTn/viwsOG2Y97qdIeCIO/recv3VGmIorFzHBVz
- if (configs.SHOULD_DEPRECATE_OLD_WETH_TOKEN &&
- tokenAddress === configs.NEW_WRAPPED_ETHERS[this.networkId]) {
+ if (configs.SHOULD_DEPRECATE_OLD_WETH_TOKEN && tokenAddress === configs.NEW_WRAPPED_ETHERS[this.networkId]) {
return true;
}
const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
@@ -213,12 +206,10 @@ export class Blockchain {
this._ledgerSubprovider = new LedgerSubprovider(ledgerWalletConfigs);
provider.addProvider(this._ledgerSubprovider);
provider.addProvider(new FilterSubprovider());
- const networkId = configs.IS_MAINNET_ENABLED ?
- constants.NETWORK_ID_MAINNET :
- constants.NETWORK_ID_TESTNET;
- provider.addProvider(new RedundantRPCSubprovider(
- configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
- ));
+ const networkId = configs.IS_MAINNET_ENABLED
+ ? constants.NETWORK_ID_MAINNET
+ : constants.NETWORK_ID_TESTNET;
+ provider.addProvider(new RedundantRPCSubprovider(configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId]));
provider.start();
this._web3Wrapper.destroy();
const shouldPollUserAddress = false;
@@ -254,32 +245,46 @@ export class Blockchain {
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
const txHash = await this._zeroEx.token.setProxyAllowanceAsync(
- token.address, this._userAddress, amountInBaseUnits,
+ token.address,
+ this._userAddress,
+ amountInBaseUnits,
);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const allowance = amountInBaseUnits;
this._dispatcher.replaceTokenAllowanceByAddress(token.address, allowance);
}
- public async transferAsync(token: Token, toAddress: string,
- amountInBaseUnits: BigNumber): Promise<void> {
+ public async transferAsync(token: Token, toAddress: string, amountInBaseUnits: BigNumber): Promise<void> {
const txHash = await this._zeroEx.token.transferAsync(
- token.address, this._userAddress, toAddress, amountInBaseUnits,
+ token.address,
+ this._userAddress,
+ toAddress,
+ amountInBaseUnits,
);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
- this._dispatcher.showFlashMessage(React.createElement(TokenSendCompleted, {
- etherScanLinkIfExists,
- token,
- toAddress,
- amountInBaseUnits,
- }));
- }
- public portalOrderToSignedOrder(maker: string, taker: string, makerTokenAddress: string,
- takerTokenAddress: string, makerTokenAmount: BigNumber,
- takerTokenAmount: BigNumber, makerFee: BigNumber,
- takerFee: BigNumber, expirationUnixTimestampSec: BigNumber,
- feeRecipient: string,
- signatureData: SignatureData, salt: BigNumber): SignedOrder {
+ this._dispatcher.showFlashMessage(
+ React.createElement(TokenSendCompleted, {
+ etherScanLinkIfExists,
+ token,
+ toAddress,
+ amountInBaseUnits,
+ }),
+ );
+ }
+ public portalOrderToSignedOrder(
+ maker: string,
+ taker: string,
+ makerTokenAddress: string,
+ takerTokenAddress: string,
+ makerTokenAmount: BigNumber,
+ takerTokenAmount: BigNumber,
+ makerFee: BigNumber,
+ takerFee: BigNumber,
+ expirationUnixTimestampSec: BigNumber,
+ feeRecipient: string,
+ signatureData: SignatureData,
+ salt: BigNumber,
+ ): SignedOrder {
const ecSignature = signatureData;
const exchangeContractAddress = this.getExchangeContractAddressIfExists();
const takerOrNullAddress = _.isEmpty(taker) ? constants.NULL_ADDRESS : taker;
@@ -300,33 +305,32 @@ export class Blockchain {
};
return signedOrder;
}
- public async fillOrderAsync(signedOrder: SignedOrder,
- fillTakerTokenAmount: BigNumber): Promise<BigNumber> {
+ public async fillOrderAsync(signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber): Promise<BigNumber> {
utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const shouldThrowOnInsufficientBalanceOrAllowance = true;
const txHash = await this._zeroEx.exchange.fillOrderAsync(
- signedOrder, fillTakerTokenAmount, shouldThrowOnInsufficientBalanceOrAllowance, this._userAddress,
+ signedOrder,
+ fillTakerTokenAmount,
+ shouldThrowOnInsufficientBalanceOrAllowance,
+ this._userAddress,
);
const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
this._zeroEx.exchange.throwLogErrorsAsErrors(logs);
- const logFill = _.find(logs, {event: 'LogFill'});
- const args = logFill.args as any as LogFillContractEventArgs;
+ const logFill = _.find(logs, { event: 'LogFill' });
+ const args = (logFill.args as any) as LogFillContractEventArgs;
const filledTakerTokenAmount = args.filledTakerTokenAmount;
return filledTakerTokenAmount;
}
- public async cancelOrderAsync(signedOrder: SignedOrder,
- cancelTakerTokenAmount: BigNumber): Promise<BigNumber> {
- const txHash = await this._zeroEx.exchange.cancelOrderAsync(
- signedOrder, cancelTakerTokenAmount,
- );
+ public async cancelOrderAsync(signedOrder: SignedOrder, cancelTakerTokenAmount: BigNumber): Promise<BigNumber> {
+ const txHash = await this._zeroEx.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount);
const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any;
this._zeroEx.exchange.throwLogErrorsAsErrors(logs);
- const logCancel = _.find(logs, {event: ExchangeEvents.LogCancel});
- const args = logCancel.args as any as LogCancelContractEventArgs;
+ const logCancel = _.find(logs, { event: ExchangeEvents.LogCancel });
+ const args = (logCancel.args as any) as LogCancelContractEventArgs;
const cancelledTakerTokenAmount = args.cancelledTakerTokenAmount;
return cancelledTakerTokenAmount;
}
@@ -339,14 +343,21 @@ export class Blockchain {
public getExchangeContractAddressIfExists() {
return this._exchangeAddress;
}
- public async validateFillOrderThrowIfInvalidAsync(signedOrder: SignedOrder,
- fillTakerTokenAmount: BigNumber,
- takerAddress: string): Promise<void> {
+ public async validateFillOrderThrowIfInvalidAsync(
+ signedOrder: SignedOrder,
+ fillTakerTokenAmount: BigNumber,
+ takerAddress: string,
+ ): Promise<void> {
await this._zeroEx.exchange.validateFillOrderThrowIfInvalidAsync(
- signedOrder, fillTakerTokenAmount, takerAddress);
+ signedOrder,
+ fillTakerTokenAmount,
+ takerAddress,
+ );
}
- public async validateCancelOrderThrowIfInvalidAsync(order: Order,
- cancelTakerTokenAmount: BigNumber): Promise<void> {
+ public async validateCancelOrderThrowIfInvalidAsync(
+ order: Order,
+ cancelTakerTokenAmount: BigNumber,
+ ): Promise<void> {
await this._zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
}
public isValidAddress(address: string): boolean {
@@ -415,11 +426,10 @@ export class Blockchain {
return doesContractExist;
}
public async getCurrentUserTokenBalanceAndAllowanceAsync(tokenAddress: string): Promise<BigNumber[]> {
- const tokenBalanceAndAllowance = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, tokenAddress);
- return tokenBalanceAndAllowance;
+ const tokenBalanceAndAllowance = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, tokenAddress);
+ return tokenBalanceAndAllowance;
}
- public async getTokenBalanceAndAllowanceAsync(ownerAddress: string, tokenAddress: string):
- Promise<BigNumber[]> {
+ public async getTokenBalanceAndAllowanceAsync(ownerAddress: string, tokenAddress: string): Promise<BigNumber[]> {
utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
if (_.isEmpty(ownerAddress)) {
@@ -440,10 +450,7 @@ export class Blockchain {
let balance = new BigNumber(0);
let allowance = new BigNumber(0);
if (this._doesUserAddressExist()) {
- [
- balance,
- allowance,
- ] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
+ [balance, allowance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
}
const tokenState = {
balance,
@@ -470,11 +477,14 @@ export class Blockchain {
this._stopWatchingExchangeLogFillEvents();
}
private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
- txHash: string): Promise<TransactionReceiptWithDecodedLogs> {
+ txHash: string,
+ ): Promise<TransactionReceiptWithDecodedLogs> {
const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
- this._dispatcher.showFlashMessage(React.createElement(TransactionSubmitted, {
- etherScanLinkIfExists,
- }));
+ this._dispatcher.showFlashMessage(
+ React.createElement(TransactionSubmitted, {
+ etherScanLinkIfExists,
+ }),
+ );
const receipt = await this._zeroEx.awaitTransactionMinedAsync(txHash);
return receipt;
}
@@ -506,29 +516,31 @@ export class Blockchain {
// Start a subscription for new logs
this._zeroEx.exchange.subscribe(
- ExchangeEvents.LogFill, indexFilterValues,
+ ExchangeEvents.LogFill,
+ indexFilterValues,
async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => {
- if (err) {
- // Note: it's not entirely clear from the documentation which
- // errors will be thrown by `watch`. For now, let's log the error
- // to rollbar and stop watching when one occurs
- // tslint:disable-next-line:no-floating-promises
- errorReporter.reportAsync(err); // fire and forget
- return;
- } else {
- const decodedLog = decodedLogEvent.log;
- if (!this._doesLogEventInvolveUser(decodedLog)) {
- return; // We aren't interested in the fill event
- }
- this._updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
- const fill = await this._convertDecodedLogToFillAsync(decodedLog);
- if (decodedLogEvent.isRemoved) {
- tradeHistoryStorage.removeFillFromUser(this._userAddress, this.networkId, fill);
+ if (err) {
+ // Note: it's not entirely clear from the documentation which
+ // errors will be thrown by `watch`. For now, let's log the error
+ // to rollbar and stop watching when one occurs
+ // tslint:disable-next-line:no-floating-promises
+ errorReporter.reportAsync(err); // fire and forget
+ return;
} else {
- tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
+ const decodedLog = decodedLogEvent.log;
+ if (!this._doesLogEventInvolveUser(decodedLog)) {
+ return; // We aren't interested in the fill event
+ }
+ this._updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
+ const fill = await this._convertDecodedLogToFillAsync(decodedLog);
+ if (decodedLogEvent.isRemoved) {
+ tradeHistoryStorage.removeFillFromUser(this._userAddress, this.networkId, fill);
+ } else {
+ tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
+ }
}
- }
- });
+ },
+ );
}
private async _fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues) {
const fromBlock = tradeHistoryStorage.getFillsLatestBlock(this._userAddress, this.networkId);
@@ -537,7 +549,9 @@ export class Blockchain {
toBlock: 'latest' as BlockParam,
};
const decodedLogs = await this._zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>(
- ExchangeEvents.LogFill, blockRange, indexFilterValues,
+ ExchangeEvents.LogFill,
+ blockRange,
+ indexFilterValues,
);
for (const decodedLog of decodedLogs) {
if (!this._doesLogEventInvolveUser(decodedLog)) {
@@ -569,8 +583,7 @@ export class Blockchain {
}
private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
const args = decodedLog.args;
- const isUserMakerOrTaker = args.maker === this._userAddress ||
- args.taker === this._userAddress;
+ const isUserMakerOrTaker = args.maker === this._userAddress || args.taker === this._userAddress;
return isUserMakerOrTaker;
}
private _updateLatestFillsBlockIfNeeded(blockNumber: number) {
@@ -582,9 +595,8 @@ export class Blockchain {
// would still attempt to re-fetch events from the previous 50 blocks, but won't need to
// re-fetch all events in all blocks.
// TODO: Debug if this is a race condition, and apply a more precise fix
- const blockNumberToSet = blockNumber - BLOCK_NUMBER_BACK_TRACK < 0 ?
- 0 :
- blockNumber - BLOCK_NUMBER_BACK_TRACK;
+ const blockNumberToSet =
+ blockNumber - BLOCK_NUMBER_BACK_TRACK < 0 ? 0 : blockNumber - BLOCK_NUMBER_BACK_TRACK;
tradeHistoryStorage.setFillsLatestBlock(this._userAddress, this.networkId, blockNumberToSet);
}
}
@@ -608,10 +620,10 @@ export class Blockchain {
// Airtable task: https://airtable.com/tblFe0Q9JuKJPYbTn/viwsOG2Y97qdIeCIO/recv3VGmIorFzHBVz
let address = t.address;
if (configs.SHOULD_DEPRECATE_OLD_WETH_TOKEN && t.symbol === 'WETH') {
- const newEtherTokenAddressIfExists = configs.NEW_WRAPPED_ETHERS[this.networkId];
- if (!_.isUndefined(newEtherTokenAddressIfExists)) {
- address = newEtherTokenAddressIfExists;
- }
+ const newEtherTokenAddressIfExists = configs.NEW_WRAPPED_ETHERS[this.networkId];
+ if (!_.isUndefined(newEtherTokenAddressIfExists)) {
+ address = newEtherTokenAddressIfExists;
+ }
}
const token: Token = {
iconUrl,
@@ -646,10 +658,9 @@ export class Blockchain {
}
const provider = await Blockchain._getProviderAsync(injectedWeb3, networkIdIfExists);
- const networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists :
- configs.IS_MAINNET_ENABLED ?
- constants.NETWORK_ID_MAINNET :
- constants.NETWORK_ID_TESTNET;
+ const networkId = !_.isUndefined(networkIdIfExists)
+ ? networkIdIfExists
+ : configs.IS_MAINNET_ENABLED ? constants.NETWORK_ID_MAINNET : constants.NETWORK_ID_TESTNET;
const zeroExConfigs = {
networkId,
};
@@ -667,14 +678,16 @@ export class Blockchain {
}
private _updateProviderName(injectedWeb3: Web3) {
const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
- const providerName = doesInjectedWeb3Exist ?
- Blockchain._getNameGivenProvider(injectedWeb3.currentProvider) :
- constants.PROVIDER_NAME_PUBLIC;
+ const providerName = doesInjectedWeb3Exist
+ ? Blockchain._getNameGivenProvider(injectedWeb3.currentProvider)
+ : constants.PROVIDER_NAME_PUBLIC;
this._dispatcher.updateInjectedProviderName(providerName);
}
private async _fetchTokenInformationAsync() {
- utils.assert(!_.isUndefined(this.networkId),
- 'Cannot call fetchTokenInformationAsync if disconnected from Ethereum node');
+ utils.assert(
+ !_.isUndefined(this.networkId),
+ 'Cannot call fetchTokenInformationAsync if disconnected from Ethereum node',
+ );
this._dispatcher.updateBlockchainIsLoaded(false);
this._dispatcher.clearTokenByAddress();
@@ -717,8 +730,8 @@ export class Blockchain {
await this.updateTokenBalancesAndAllowancesAsync(trackedTokensIfExists);
const mostPopularTradingPairTokens: Token[] = [
- _.find(allTokens, {symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0]}),
- _.find(allTokens, {symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1]}),
+ _.find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0] }),
+ _.find(allTokens, { symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1] }),
];
this._dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
this._dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
@@ -746,9 +759,7 @@ export class Blockchain {
}
try {
- const contractInstance = _.isUndefined(address) ?
- await c.deployed() :
- await c.at(address);
+ const contractInstance = _.isUndefined(address) ? await c.deployed() : await c.at(address);
return contractInstance;
} catch (err) {
const errMsg = `${err}`;
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 900d0e193..f555ca6b1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {BlockchainErrs} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { Blockchain } from 'ts/blockchain';
+import { BlockchainErrs } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
interface BlockchainErrDialogProps {
blockchain: Blockchain;
@@ -32,14 +32,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
return (
<Dialog
title={this._getTitle(hasWalletAddress)}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={dialogActions}
open={this.props.isOpen}
- contentStyle={{width: 400}}
+ contentStyle={{ width: 400 }}
onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
autoScrollBodyContent={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
{this._renderExplanation(hasWalletAddress)}
</div>
</Dialog>
@@ -70,54 +70,55 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
private _renderDisconnectedFromNode() {
return (
<div>
- You were disconnected from the backing Ethereum node.
- {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
+ You were disconnected from the backing Ethereum node. If using{' '}
+ <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
- </a> or <a href={constants.URL_MIST_DOWNLOAD} target="_blank">Mist</a> try refreshing
- {' '}the page. If using a locally hosted Ethereum node, make sure it's still running.
+ </a>{' '}
+ or{' '}
+ <a href={constants.URL_MIST_DOWNLOAD} target="_blank">
+ Mist
+ </a>{' '}
+ try refreshing the page. If using a locally hosted Ethereum node, make sure it's still running.
</div>
);
}
private _renderUnexpectedErrorExplanation() {
- return (
- <div>
- We encountered an unexpected error. Please try refreshing the page.
- </div>
- );
+ return <div>We encountered an unexpected error. Please try refreshing the page.</div>;
}
private _renderNoWalletFoundExplanation() {
return (
<div>
<div>
- We were unable to access an Ethereum wallet you control. In order to interact
- {' '}with the 0x portal dApp,
- we need a way to interact with one of your Ethereum wallets.
- {' '}There are two easy ways you can enable us to do that:
+ We were unable to access an Ethereum wallet you control. In order to interact with the 0x portal
+ dApp, we need a way to interact with one of your Ethereum wallets. There are two easy ways you can
+ enable us to do that:
</div>
<h4>1. Metamask chrome extension</h4>
<div>
You can install the{' '}
<a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
- </a> Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
+ </a>{' '}
+ Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
<div className="pt1">
- <span className="bold">Note:</span>
- {' '}If you already have Metamask installed, make sure it is unlocked.
+ <span className="bold">Note:</span> If you already have Metamask installed, make sure it is
+ unlocked.
</div>
</div>
<h4>Parity Signer</h4>
<div>
- The <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
- Chrome extension</a>{' '}lets you connect to a locally running Parity node.
- Make sure you have started your local Parity node with{' '}
- {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui`{' '}
- in order to connect to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
+ The{' '}
+ <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
+ Parity Signer Chrome extension
+ </a>{' '}
+ lets you connect to a locally running Parity node. Make sure you have started your local Parity node
+ with {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui` in order to connect
+ to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
</div>
<div className="pt2">
- <span className="bold">Note:</span>
- {' '}If you have done one of the above steps and are still seeing this message,
- {' '}we might still be unable to retrieve an Ethereum address by calling `web3.eth.accounts`.
- {' '}Make sure you have created at least one Ethereum address.
+ <span className="bold">Note:</span> If you have done one of the above steps and are still seeing
+ this message, we might still be unable to retrieve an Ethereum address by calling
+ `web3.eth.accounts`. Make sure you have created at least one Ethereum address.
</div>
</div>
);
@@ -126,15 +127,12 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
return (
<div>
<div>
- The 0x smart contracts are not deployed on the Ethereum network you are
- {' '}currently connected to (network Id: {this.props.networkId}).
- {' '}In order to use the 0x portal dApp,
- {' '}please connect to the
- {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
- {configs.IS_MAINNET_ENABLED ?
- ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` :
- `.`
- }
+ The 0x smart contracts are not deployed on the Ethereum network you are currently connected to
+ (network Id: {this.props.networkId}). In order to use the 0x portal dApp, please connect to the{' '}
+ {constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
+ {configs.IS_MAINNET_ENABLED
+ ? ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).`
+ : `.`}
</div>
<h4>Metamask</h4>
<div>
@@ -145,13 +143,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
</div>
<h4>Parity Signer</h4>
<div>
- If using the <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
- Chrome extension</a>, make sure to start your local Parity node with{' '}
- {configs.IS_MAINNET_ENABLED ?
- '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
- or Kovan respectively.' :
- '`parity --chain kovan ui` in order to connect to Kovan.'
- }
+ If using the{' '}
+ <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
+ Parity Signer Chrome extension
+ </a>, make sure to start your local Parity node with{' '}
+ {configs.IS_MAINNET_ENABLED
+ ? '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
+ or Kovan respectively.'
+ : '`parity --chain kovan ui` in order to connect to Kovan.'}
</div>
</div>
);
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index d78cbdc29..ae4328976 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Side, Token, TokenState} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Side, Token, TokenState } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface EthWethConversionDialogProps {
direction: Side;
@@ -23,8 +23,10 @@ interface EthWethConversionDialogState {
hasErrors: boolean;
}
-export class EthWethConversionDialog extends
- React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> {
+export class EthWethConversionDialog extends React.Component<
+ EthWethConversionDialogProps,
+ EthWethConversionDialogState
+> {
constructor() {
super();
this.state = {
@@ -34,25 +36,16 @@ export class EthWethConversionDialog extends
}
public render() {
const convertDialogActions = [
- <FlatButton
- key="cancel"
- label="Cancel"
- onTouchTap={this._onCancel.bind(this)}
- />,
- <FlatButton
- key="convert"
- label="Convert"
- primary={true}
- onTouchTap={this._onConvertClick.bind(this)}
- />,
+ <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
+ <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />,
];
- const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
+ const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
return (
<Dialog
title={title}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={convertDialogActions}
- contentStyle={{width: 448}}
+ contentStyle={{ width: 448 }}
open={this.props.isOpen}
>
{this._renderConversionDialogBody()}
@@ -60,31 +53,24 @@ export class EthWethConversionDialog extends
);
}
private _renderConversionDialogBody() {
- const explanation = this.props.direction === Side.Deposit ?
- 'Convert your Ether into a tokenized, tradable form.' :
- 'Convert your Wrapped Ether back into it\'s native form.';
+ const explanation =
+ this.props.direction === Side.Deposit
+ ? 'Convert your Ether into a tokenized, tradable form.'
+ : "Convert your Wrapped Ether back into it's native form.";
const isWrappedVersion = this.props.direction === Side.Receive;
return (
<div>
- <div className="pb2">
- {explanation}
- </div>
- <div className="mx-auto" style={{maxWidth: 312}}>
+ <div className="pb2">{explanation}</div>
+ <div className="mx-auto" style={{ maxWidth: 312 }}>
<div className="flex">
{this._renderCurrency(isWrappedVersion)}
- <div style={{paddingTop: 68}}>
- <i
- style={{fontSize: 28, color: colors.darkBlue}}
- className="zmdi zmdi-arrow-right"
- />
+ <div style={{ paddingTop: 68 }}>
+ <i style={{ fontSize: 28, color: colors.darkBlue }} className="zmdi zmdi-arrow-right" />
</div>
{this._renderCurrency(!isWrappedVersion)}
</div>
- <div
- className="pt2 mx-auto"
- style={{width: 245}}
- >
- {this.props.direction === Side.Receive ?
+ <div className="pt2 mx-auto" style={{ width: 245 }}>
+ {this.props.direction === Side.Receive ? (
<TokenAmountInput
token={this.props.token}
tokenState={this.props.tokenState}
@@ -94,7 +80,8 @@ export class EthWethConversionDialog extends
onChange={this._onValueChange.bind(this)}
amount={this.state.value}
onVisitBalancesPageClick={this.props.onCancelled}
- /> :
+ />
+ ) : (
<EthAmountInput
balance={this.props.etherBalance}
amount={this.state.value}
@@ -103,21 +90,22 @@ export class EthWethConversionDialog extends
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
onVisitBalancesPageClick={this.props.onCancelled}
/>
- }
- <div
- className="pt1"
- style={{fontSize: 12}}
- >
+ )}
+ <div className="pt1" style={{ fontSize: 12 }}>
<div className="left">1 ETH = 1 WETH</div>
- {this.props.direction === Side.Receive &&
+ {this.props.direction === Side.Receive && (
<div
className="right"
onClick={this._onMaxClick.bind(this)}
- style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}}
+ style={{
+ color: colors.darkBlue,
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ }}
>
Max
</div>
- }
+ )}
</div>
</div>
</div>
@@ -130,16 +118,13 @@ export class EthWethConversionDialog extends
const symbol = isWrappedVersion ? 'WETH' : 'ETH';
return (
<div className="mx-auto pt2">
- <div
- className="center"
- style={{color: colors.darkBlue}}
- >
+ <div className="center" style={{ color: colors.darkBlue }}>
{name}
</div>
<div className="center py2">
- <img src={iconUrl} style={{width: 60}} />
+ <img src={iconUrl} style={{ width: 60 }} />
</div>
- <div className="center" style={{fontSize: 12}}>
+ <div className="center" style={{ fontSize: 12 }}>
({symbol})
</div>
</div>
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index cc68ef2df..ae7117a70 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -2,24 +2,17 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {
- Table,
- TableBody,
- TableHeader,
- TableHeaderColumn,
- TableRow,
- TableRowColumn,
-} from 'material-ui/Table';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`;
@@ -59,32 +52,23 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
}
public render() {
const dialogActions = [
- <FlatButton
- key="ledgerConnectCancel"
- label="Cancel"
- onTouchTap={this._onClose.bind(this)}
- />,
+ <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
];
- const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ?
- 'Connect to your Ledger' :
- 'Select desired address';
+ const dialogTitle =
+ this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
return (
<Dialog
title={dialogTitle}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={dialogActions}
open={this.props.isOpen}
onRequestClose={this._onClose.bind(this)}
autoScrollBodyContent={true}
- bodyStyle={{paddingBottom: 0}}
+ bodyStyle={{ paddingBottom: 0 }}
>
- <div style={{color: colors.grey700, paddingTop: 1}}>
- {this.state.stepIndex === LedgerSteps.CONNECT &&
- this._renderConnectStep()
- }
- {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS &&
- this._renderSelectAddressStep()
- }
+ <div style={{ color: colors.grey700, paddingTop: 1 }}>
+ {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()}
+ {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()}
</div>
</Dialog>
);
@@ -92,19 +76,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
private _renderConnectStep() {
return (
<div>
- <div className="h4 pt3">
- Follow these instructions before proceeding:
- </div>
+ <div className="h4 pt3">Follow these instructions before proceeding:</div>
<ol>
- <li className="pb1">
- Connect your Ledger Nano S & Open the Ethereum application
- </li>
- <li className="pb1">
- Verify that Browser Support is enabled in Settings
- </li>
+ <li className="pb1">Connect your Ledger Nano S & Open the Ethereum application</li>
+ <li className="pb1">Verify that Browser Support is enabled in Settings</li>
<li className="pb1">
If no Browser Support is found in settings, verify that you have{' '}
- <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">Firmware >1.2</a>
+ <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">
+ Firmware >1.2
+ </a>
</li>
</ol>
<div className="center pb3">
@@ -115,11 +95,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
labelComplete="Connected!"
onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
/>
- {this.state.didConnectFail &&
- <div className="pt2 left-align" style={{color: colors.red200}}>
+ {this.state.didConnectFail && (
+ <div className="pt2 left-align" style={{ color: colors.red200 }}>
Failed to connect. Follow the instructions and try again.
</div>
- }
+ )}
</div>
</div>
);
@@ -128,33 +108,28 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
return (
<div>
<div>
- <Table
- bodyStyle={{height: 300}}
- onRowSelection={this._onAddressSelected.bind(this)}
- >
+ <Table bodyStyle={{ height: 300 }} onRowSelection={this._onAddressSelected.bind(this)}>
<TableHeader displaySelectAll={false}>
<TableRow>
<TableHeaderColumn colSpan={2}>Address</TableHeaderColumn>
<TableHeaderColumn>Balance</TableHeaderColumn>
</TableRow>
</TableHeader>
- <TableBody>
- {this._renderAddressTableRows()}
- </TableBody>
+ <TableBody>{this._renderAddressTableRows()}</TableBody>
</Table>
</div>
- <div className="flex pt2" style={{height: 100}}>
- <div className="overflow-hidden" style={{width: 180}}>
+ <div className="flex pt2" style={{ height: 100 }}>
+ <div className="overflow-hidden" style={{ width: 180 }}>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey}}
+ floatingLabelStyle={{ color: colors.grey }}
floatingLabelText="Update path derivation (advanced)"
value={this.state.derivationPath}
errorText={this.state.derivationErrMsg}
onChange={this._onDerivationPathChanged.bind(this)}
/>
</div>
- <div className="pl2" style={{paddingTop: 28}}>
+ <div className="pl2" style={{ paddingTop: 28 }}>
<LifeCycleRaisedButton
labelReady="Update"
labelLoading="Updating..."
@@ -177,21 +152,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
const isKovanNetwork = networkName === 'Kovan';
const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
return (
- <TableRow key={userAddress} style={{height: 40}}>
+ <TableRow key={userAddress} style={{ height: 40 }}>
<TableRowColumn colSpan={2}>
- <div
- data-tip={true}
- data-for={addressTooltipId}
- >
+ <div data-tip={true} data-for={addressTooltipId}>
{userAddress}
</div>
<ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip>
</TableRowColumn>
<TableRowColumn>
- <div
- data-tip={true}
- data-for={balanceTooltipId}
- >
+ <div data-tip={true} data-for={balanceTooltipId}>
{balanceString}
</div>
<ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip>
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index ffe55794f..3ecc454a0 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
interface PortalDisclaimerDialogProps {
isOpen: boolean;
@@ -12,31 +12,23 @@ export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) {
return (
<Dialog
title="0x Portal Disclaimer"
- titleStyle={{fontWeight: 100}}
- actions={[
- <FlatButton
- key="portalAgree"
- label="I Agree"
- onTouchTap={props.onToggleDialog}
- />,
- ]}
+ titleStyle={{ fontWeight: 100 }}
+ actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
modal={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- 0x Portal is a free software-based tool intended to help users to
- buy and sell ERC20-compatible blockchain tokens through the 0x protocol
- on a purely peer-to-peer basis. 0x portal is not a regulated marketplace,
- exchange or intermediary of any kind, and therefore, you should only use
- 0x portal to exchange tokens that are not securities, commodity interests,
- or any other form of regulated instrument. 0x has not attempted to screen
- or otherwise limit the tokens that you may enter in 0x Portal. By clicking
- “I Agree” below, you understand that you are solely responsible for using 0x
- Portal and buying and selling tokens using 0x Portal in compliance with all
- applicable laws and regulations.
+ 0x Portal is a free software-based tool intended to help users to buy and sell ERC20-compatible
+ blockchain tokens through the 0x protocol on a purely peer-to-peer basis. 0x portal is not a
+ regulated marketplace, exchange or intermediary of any kind, and therefore, you should only use 0x
+ portal to exchange tokens that are not securities, commodity interests, or any other form of
+ regulated instrument. 0x has not attempted to screen or otherwise limit the tokens that you may
+ enter in 0x Portal. By clicking “I Agree” below, you understand that you are solely responsible for
+ using 0x Portal and buying and selling tokens using 0x Portal in compliance with all applicable laws
+ and regulations.
</div>
</div>
</Dialog>
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index 9a85ea8b1..cd29b34e6 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -3,9 +3,9 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Token, TokenState} from 'ts/types';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Token, TokenState } from 'ts/types';
interface SendDialogProps {
onComplete: (recipient: string, value: BigNumber) => void;
@@ -33,11 +33,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
}
public render() {
const transferDialogActions = [
- <FlatButton
- key="cancelTransfer"
- label="Cancel"
- onTouchTap={this._onCancel.bind(this)}
- />,
+ <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
<FlatButton
key="sendTransfer"
disabled={this._hasErrors()}
@@ -49,7 +45,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
return (
<Dialog
title="I want to send"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={transferDialogActions}
open={this.props.isOpen}
>
@@ -59,8 +55,8 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
}
private _renderSendDialogBody() {
return (
- <div className="mx-auto" style={{maxWidth: 300}}>
- <div style={{height: 80}}>
+ <div className="mx-auto" style={{ maxWidth: 300 }}>
+ <div style={{ height: 80 }}>
<AddressInput
initialAddress={this.state.recipient}
updateAddress={this._onRecipientChange.bind(this)}
@@ -116,8 +112,6 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
this.props.onCancelled();
}
private _hasErrors() {
- return _.isUndefined(this.state.recipient) ||
- _.isUndefined(this.state.value) ||
- !this.state.isAmountValid;
+ return _.isUndefined(this.state.recipient) || _.isUndefined(this.state.value) || !this.state.isAmountValid;
}
}
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 9e00b4110..3f29d46f8 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {TrackTokenConfirmation} from 'ts/components/track_token_confirmation';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {Token, TokenByAddress} from 'ts/types';
+import { Blockchain } from 'ts/blockchain';
+import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Token, TokenByAddress } from 'ts/types';
interface TrackTokenConfirmationDialogProps {
tokens: Token[];
@@ -23,8 +23,10 @@ interface TrackTokenConfirmationDialogState {
isAddingTokenToTracked: boolean;
}
-export class TrackTokenConfirmationDialog extends
- React.Component<TrackTokenConfirmationDialogProps, TrackTokenConfirmationDialogState> {
+export class TrackTokenConfirmationDialog extends React.Component<
+ TrackTokenConfirmationDialogProps,
+ TrackTokenConfirmationDialogState
+> {
constructor(props: TrackTokenConfirmationDialogProps) {
super(props);
this.state = {
@@ -36,7 +38,7 @@ export class TrackTokenConfirmationDialog extends
return (
<Dialog
title="Tracking confirmation"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={[
<FlatButton
key="trackNo"
@@ -81,10 +83,9 @@ export class TrackTokenConfirmationDialog extends
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
- const [
- balance,
- allowance,
- ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(token.address);
+ const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+ token.address,
+ );
this.props.dispatcher.updateTokenStateByAddress({
[token.address]: {
balance,
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index ff884a94e..098e3e26d 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,8 +1,8 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
interface U2fNotSupportedDialogProps {
isOpen: boolean;
@@ -13,24 +13,16 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
return (
<Dialog
title="U2F Not Supported"
- titleStyle={{fontWeight: 100}}
- actions={[
- <FlatButton
- key="u2fNo"
- label="Ok"
- onTouchTap={props.onToggleDialog.bind(this)}
- />,
- ]}
+ titleStyle={{ fontWeight: 100 }}
+ actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog.bind(this)} />]}
open={props.isOpen}
onRequestClose={props.onToggleDialog.bind(this)}
autoScrollBodyContent={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- It looks like your browser does not support U2F connections
- required for us to communicate with your hardware wallet.
- Please use a browser that supports U2F connections and try
- again.
+ It looks like your browser does not support U2F connections required for us to communicate with your
+ hardware wallet. Please use a browser that supports U2F connections and try again.
</div>
<div>
<ul>
@@ -41,7 +33,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
<a
href={constants.URL_FIREFOX_U2F_ADDON}
target="_blank"
- style={{textDecoration: 'underline'}}
+ style={{ textDecoration: 'underline' }}
>
this extension
</a>.
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
index 3f485ce4f..9e91ff12d 100644
--- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -1,6 +1,6 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import { colors } from 'material-ui/styles';
import * as React from 'react';
interface WrappedEthSectionNoticeDialogProps {
@@ -12,25 +12,20 @@ export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDial
return (
<Dialog
title="Dedicated Wrapped Ether Section"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={[
- <FlatButton
- key="acknowledgeWrapEthSection"
- label="Sounds good"
- onTouchTap={props.onToggleDialog}
- />,
+ <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />,
]}
open={props.isOpen}
onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
modal={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- We have recently updated the Wrapped Ether token (WETH) used by 0x Portal.
- Don't worry, unwrapping Ether tied to the old Wrapped Ether token can
- be done at any time by clicking on the "Wrap ETH" section in the menu
- to the left.
+ We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. Don't worry, unwrapping
+ Ether tied to the old Wrapped Ether token can be done at any time by clicking on the "Wrap ETH"
+ section in the menu to the left.
</div>
</div>
</Dialog>
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index f2aee9d6d..924ee43b7 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -1,15 +1,15 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {EthWethConversionDialog} from 'ts/components/dialogs/eth_weth_conversion_dialog';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {BlockchainCallErrs, Side, Token, TokenState} from 'ts/types';
-import {constants} from 'ts/utils/constants';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { EthWethConversionDialog } from 'ts/components/dialogs/eth_weth_conversion_dialog';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BlockchainCallErrs, Side, Token, TokenState } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
interface EthWethConversionButtonProps {
direction: Side;
@@ -28,8 +28,10 @@ interface EthWethConversionButtonState {
isEthConversionHappening: boolean;
}
-export class EthWethConversionButton extends
- React.Component<EthWethConversionButtonProps, EthWethConversionButtonState> {
+export class EthWethConversionButton extends React.Component<
+ EthWethConversionButtonProps,
+ EthWethConversionButtonState
+> {
public static defaultProps: Partial<EthWethConversionButtonProps> = {
isDisabled: false,
onConversionSuccessful: _.noop,
@@ -42,7 +44,7 @@ export class EthWethConversionButton extends
};
}
public render() {
- const labelStyle = this.state.isEthConversionHappening ? {fontSize: 10} : {};
+ const labelStyle = this.state.isEthConversionHappening ? { fontSize: 10 } : {};
let callToActionLabel;
let inProgressLabel;
if (this.props.direction === Side.Deposit) {
@@ -55,7 +57,7 @@ export class EthWethConversionButton extends
return (
<div>
<RaisedButton
- style={{width: '100%'}}
+ style={{ width: '100%' }}
labelStyle={labelStyle}
disabled={this.props.isDisabled || this.state.isEthConversionHappening}
label={this.state.isEthConversionHappening ? inProgressLabel : callToActionLabel}
@@ -109,9 +111,10 @@ export class EthWethConversionButton extends
} else if (!_.includes(errMsg, 'User denied transaction')) {
utils.consoleLog(`Unexpected error encountered: ${err}`);
utils.consoleLog(err.stack);
- const errorMsg = direction === Side.Deposit ?
- 'Failed to wrap your ETH. Please try again.' :
- 'Failed to unwrap your WETH. Please try again.';
+ const errorMsg =
+ direction === Side.Deposit
+ ? 'Failed to wrap your ETH. Please try again.'
+ : 'Failed to unwrap your WETH. Please try again.';
this.props.dispatcher.showFlashMessage(errorMsg);
await errorReporter.reportAsync(err);
}
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 934df9176..fe733ea76 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -1,21 +1,14 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Divider from 'material-ui/Divider';
-import {
- Table,
- TableBody,
- TableHeader,
- TableHeaderColumn,
- TableRow,
- TableRowColumn,
-} from 'material-ui/Table';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import * as moment from 'moment';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {EthWethConversionButton} from 'ts/components/eth_weth_conversion_button';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { Blockchain } from 'ts/blockchain';
+import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button';
+import { Dispatcher } from 'ts/redux/dispatcher';
import {
EtherscanLinkSuffixes,
OutdatedWrappedEtherByNetworkId,
@@ -25,10 +18,10 @@ import {
TokenState,
TokenStateByAddress,
} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const PRECISION = 5;
const DATE_FORMAT = 'D/M/YY';
@@ -83,24 +76,22 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
}
public render() {
const tokens = _.values(this.props.tokenByAddress);
- const etherToken = _.find(tokens, {symbol: 'WETH'});
+ const etherToken = _.find(tokens, { symbol: 'WETH' });
const etherTokenState = this.props.tokenStateByAddress[etherToken.address];
const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, constants.DECIMAL_PLACES_ETH);
const isBidirectional = true;
const etherscanUrl = utils.getEtherScanLinkIfExists(
- etherToken.address, this.props.networkId, EtherscanLinkSuffixes.Address,
+ etherToken.address,
+ this.props.networkId,
+ EtherscanLinkSuffixes.Address,
);
const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
return (
- <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
+ <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
<div className="relative">
<h3>ETH Wrapper</h3>
- <div className="absolute" style={{top: 0, right: 0}}>
- <a
- target="_blank"
- href={constants.URL_WETH_IO}
- style={{color: colors.grey}}
- >
+ <div className="absolute" style={{ top: 0, right: 0 }}>
+ <a target="_blank" href={constants.URL_WETH_IO} style={{ color: colors.grey }}>
<div className="flex">
<div>About Wrapped ETH</div>
<div className="pl1">
@@ -112,14 +103,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</div>
<Divider />
<div>
- <div className="py2">
- Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.
- </div>
+ <div className="py2">Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.</div>
<div>
- <Table
- selectable={false}
- style={{backgroundColor: colors.grey50}}
- >
+ <Table selectable={false} style={{ backgroundColor: colors.grey50 }}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
<TableHeaderColumn>ETH Token</TableHeaderColumn>
@@ -134,13 +120,13 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<TableRowColumn className="py1">
<div className="flex">
<img
- style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
+ style={{
+ width: ICON_DIMENSION,
+ height: ICON_DIMENSION,
+ }}
src={ETHER_ICON_PATH}
/>
- <div
- className="ml2 sm-hide xs-hide"
- style={{marginTop: 12}}
- >
+ <div className="ml2 sm-hide xs-hide" style={{ marginTop: 12 }}>
ETH
</div>
</div>
@@ -164,9 +150,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<TableRowColumn className="py1">
{this._renderTokenLink(tokenLabel, etherscanUrl)}
</TableRowColumn>
- <TableRowColumn>
- {wethBalance.toFixed(PRECISION)} WETH
- </TableRowColumn>
+ <TableRowColumn>{wethBalance.toFixed(PRECISION)} WETH</TableRowColumn>
<TableRowColumn>
<EthWethConversionButton
isOutdatedWrappedEther={false}
@@ -186,22 +170,16 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<div>
<h4>Outdated WETH</h4>
<Divider />
- <div className="pt2" style={{lineHeight: 1.5}}>
+ <div className="pt2" style={{ lineHeight: 1.5 }}>
The{' '}
- <a
- href="https://blog.0xproject.com/canonical-weth-a9aa7d0279dd"
- target="_blank"
- >
+ <a href="https://blog.0xproject.com/canonical-weth-a9aa7d0279dd" target="_blank">
canonical WETH
- </a> contract is updated when necessary.
- Unwrap outdated WETH in order to
 retrieve your ETH and move it
- to the updated WETH token.
+ </a>{' '}
+ contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move
+ it to the updated WETH token.
</div>
<div>
- <Table
- selectable={false}
- style={{backgroundColor: colors.grey50}}
- >
+ <Table selectable={false} style={{ backgroundColor: colors.grey50 }}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
<TableHeaderColumn>WETH Version</TableHeaderColumn>
@@ -230,90 +208,94 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
rightSymbol = 'WETH';
}
return (
- <div className="flex mx-auto" style={{width: 85}}>
- <div style={{paddingTop: 3}}>{leftSymbol}</div>
+ <div className="flex mx-auto" style={{ width: 85 }}>
+ <div style={{ paddingTop: 3 }}>{leftSymbol}</div>
<div className="px1">
- <i
- style={{fontSize: 18}}
- className={`zmdi ${iconClass}`}
- />
+ <i style={{ fontSize: 18 }} className={`zmdi ${iconClass}`} />
</div>
- <div style={{paddingTop: 3}}>{rightSymbol}</div>
+ <div style={{ paddingTop: 3 }}>{rightSymbol}</div>
</div>
);
}
private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) {
- const rows = _.map(configs.OUTDATED_WRAPPED_ETHERS,
- (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => {
- const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId];
- if (_.isUndefined(outdatedWETHIfExists)) {
- return null; // noop
- }
- const timestampMsRange = outdatedWETHIfExists.timestampMsRange;
- let dateRange: string;
- if (!_.isUndefined(timestampMsRange)) {
- const startMoment = moment(timestampMsRange.startTimestampMs);
- const endMoment = moment(timestampMsRange.endTimestampMs);
- dateRange = `${startMoment.format(DATE_FORMAT)}-${endMoment.format(DATE_FORMAT)}`;
- } else {
- dateRange = '-';
- }
- const outdatedEtherToken = {
- ...etherToken,
- address: outdatedWETHIfExists.address,
- };
- const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETHIfExists.address];
- const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address];
- const balanceInEthIfExists = isStateLoaded ?
- ZeroEx.toUnitAmount(
- outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH,
- ).toFixed(PRECISION) :
- undefined;
- const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind(
- this, outdatedWETHIfExists.address,
- );
- const etherscanUrl = utils.getEtherScanLinkIfExists(
- outdatedWETHIfExists.address, this.props.networkId, EtherscanLinkSuffixes.Address,
- );
- const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH);
- return (
- <TableRow key={`weth-${outdatedWETHIfExists.address}`}>
- <TableRowColumn className="py1">
- {this._renderTokenLink(tokenLabel, etherscanUrl)}
- </TableRowColumn>
- <TableRowColumn>
- {isStateLoaded ?
- `${balanceInEthIfExists} WETH` :
- <i className="zmdi zmdi-spinner zmdi-hc-spin" />
- }
- </TableRowColumn>
- <TableRowColumn>
- <EthWethConversionButton
- isDisabled={!isStateLoaded}
- isOutdatedWrappedEther={true}
- direction={Side.Receive}
- ethToken={outdatedEtherToken}
- ethTokenState={outdatedEtherTokenState}
- dispatcher={this.props.dispatcher}
- blockchain={this.props.blockchain}
- userEtherBalance={this.props.userEtherBalance}
- onConversionSuccessful={onConversionSuccessful}
- />
- </TableRowColumn>
- </TableRow>
- );
- });
+ const rows = _.map(
+ configs.OUTDATED_WRAPPED_ETHERS,
+ (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => {
+ const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId];
+ if (_.isUndefined(outdatedWETHIfExists)) {
+ return null; // noop
+ }
+ const timestampMsRange = outdatedWETHIfExists.timestampMsRange;
+ let dateRange: string;
+ if (!_.isUndefined(timestampMsRange)) {
+ const startMoment = moment(timestampMsRange.startTimestampMs);
+ const endMoment = moment(timestampMsRange.endTimestampMs);
+ dateRange = `${startMoment.format(DATE_FORMAT)}-${endMoment.format(DATE_FORMAT)}`;
+ } else {
+ dateRange = '-';
+ }
+ const outdatedEtherToken = {
+ ...etherToken,
+ address: outdatedWETHIfExists.address,
+ };
+ const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETHIfExists.address];
+ const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address];
+ const balanceInEthIfExists = isStateLoaded
+ ? ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed(
+ PRECISION,
+ )
+ : undefined;
+ const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind(
+ this,
+ outdatedWETHIfExists.address,
+ );
+ const etherscanUrl = utils.getEtherScanLinkIfExists(
+ outdatedWETHIfExists.address,
+ this.props.networkId,
+ EtherscanLinkSuffixes.Address,
+ );
+ const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH);
+ return (
+ <TableRow key={`weth-${outdatedWETHIfExists.address}`}>
+ <TableRowColumn className="py1">
+ {this._renderTokenLink(tokenLabel, etherscanUrl)}
+ </TableRowColumn>
+ <TableRowColumn>
+ {isStateLoaded ? (
+ `${balanceInEthIfExists} WETH`
+ ) : (
+ <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+ )}
+ </TableRowColumn>
+ <TableRowColumn>
+ <EthWethConversionButton
+ isDisabled={!isStateLoaded}
+ isOutdatedWrappedEther={true}
+ direction={Side.Receive}
+ ethToken={outdatedEtherToken}
+ ethTokenState={outdatedEtherTokenState}
+ dispatcher={this.props.dispatcher}
+ blockchain={this.props.blockchain}
+ userEtherBalance={this.props.userEtherBalance}
+ onConversionSuccessful={onConversionSuccessful}
+ />
+ </TableRowColumn>
+ </TableRow>
+ );
+ },
+ );
return rows;
}
private _renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) {
return (
<span>
- {_.isUndefined(etherscanUrl) ?
- tokenLabel :
- <a href={etherscanUrl} target="_blank" style={{textDecoration: 'none'}}>
+ {_.isUndefined(etherscanUrl) ? (
+ tokenLabel
+ ) : (
+ <a href={etherscanUrl} target="_blank" style={{ textDecoration: 'none' }}>
{tokenLabel}
</a>
- }
+ )}
</span>
);
}
@@ -321,18 +303,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
const tooltipId = `tooltip-${address}`;
return (
<div className="flex">
- <img
- style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
- src={imgPath}
- />
- <div
- className="ml2 sm-hide xs-hide"
- style={{marginTop: 12}}
- >
- <span
- data-tip={true}
- data-for={tooltipId}
- >
+ <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={imgPath} />
+ <div className="ml2 sm-hide xs-hide" style={{ marginTop: 12 }}>
+ <span data-tip={true} data-for={tooltipId}>
{name}
</span>
<ReactTooltip id={tooltipId}>{address}</ReactTooltip>
@@ -348,7 +321,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
},
});
const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
- this.props.userAddress, outdatedWETHAddress,
+ this.props.userAddress,
+ outdatedWETHAddress,
);
this.setState({
outdatedWETHAddressToIsStateLoaded: {
@@ -370,7 +344,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
for (const address of outdatedWETHAddresses) {
const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
- this.props.userAddress, address,
+ this.props.userAddress,
+ address,
);
outdatedWETHStateByAddress[address] = {
balance,
@@ -384,15 +359,16 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
});
}
private _getOutdatedWETHAddresses(): string[] {
- const outdatedWETHAddresses = _.compact(_.map(configs.OUTDATED_WRAPPED_ETHERS,
- outdatedWrappedEtherByNetwork => {
- const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId];
- if (_.isUndefined(outdatedWrappedEtherIfExists)) {
- return undefined;
- }
- const address = outdatedWrappedEtherIfExists.address;
- return address;
- }));
+ const outdatedWETHAddresses = _.compact(
+ _.map(configs.OUTDATED_WRAPPED_ETHERS, outdatedWrappedEtherByNetwork => {
+ const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId];
+ if (_.isUndefined(outdatedWrappedEtherIfExists)) {
+ return undefined;
+ }
+ const address = outdatedWrappedEtherIfExists.address;
+ return address;
+ }),
+ );
return outdatedWETHAddresses;
}
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index abb46f7f2..178b1adaf 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,37 +1,29 @@
-import {Order as ZeroExOrder, ZeroEx} from '0x.js';
+import { Order as ZeroExOrder, ZeroEx } from '0x.js';
import * as accounting from 'accounting';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-import {Card, CardHeader, CardText} from 'material-ui/Card';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
import Divider from 'material-ui/Divider';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {Blockchain} from 'ts/blockchain';
-import {TrackTokenConfirmationDialog} from 'ts/components/dialogs/track_token_confirmation_dialog';
-import {FillOrderJSON} from 'ts/components/fill_order_json';
-import {FillWarningDialog} from 'ts/components/fill_warning_dialog';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Alert} from 'ts/components/ui/alert';
-import {EthereumAddress} from 'ts/components/ui/ethereum_address';
-import {Identicon} from 'ts/components/ui/identicon';
-import {VisualOrder} from 'ts/components/visual_order';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {orderSchema} from 'ts/schemas/order_schema';
-import {SchemaValidator} from 'ts/schemas/validator';
-import {
- AlertTypes,
- BlockchainErrs,
- Order,
- Token,
- TokenByAddress,
- TokenStateByAddress,
- WebsitePaths,
-} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { Blockchain } from 'ts/blockchain';
+import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog';
+import { FillOrderJSON } from 'ts/components/fill_order_json';
+import { FillWarningDialog } from 'ts/components/fill_warning_dialog';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Alert } from 'ts/components/ui/alert';
+import { EthereumAddress } from 'ts/components/ui/ethereum_address';
+import { Identicon } from 'ts/components/ui/identicon';
+import { VisualOrder } from 'ts/components/visual_order';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { orderSchema } from 'ts/schemas/order_schema';
+import { SchemaValidator } from 'ts/schemas/validator';
+import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, TokenStateByAddress, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
interface FillOrderProps {
blockchain: Blockchain;
@@ -100,15 +92,13 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
}
public render() {
return (
- <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
+ <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
<h3>Fill an order</h3>
<Divider />
<div>
- {!this.props.isOrderInUrl &&
+ {!this.props.isOrderInUrl && (
<div>
- <div className="pt2 pb2">
- Paste an order JSON snippet below to begin
- </div>
+ <div className="pt2 pb2">Paste an order JSON snippet below to begin</div>
<div className="pb2">Order JSON</div>
<FillOrderJSON
blockchain={this.props.blockchain}
@@ -119,21 +109,23 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
/>
{this._renderOrderJsonNotices()}
</div>
- }
+ )}
<div>
- {!_.isUndefined(this.state.parsedOrder) && this.state.didOrderValidationRun
- && this.state.areAllInvolvedTokensTracked &&
- this._renderVisualOrder()
- }
+ {!_.isUndefined(this.state.parsedOrder) &&
+ this.state.didOrderValidationRun &&
+ this.state.areAllInvolvedTokensTracked &&
+ this._renderVisualOrder()}
</div>
- {this.props.isOrderInUrl &&
+ {this.props.isOrderInUrl && (
<div className="pt2">
- <Card style={{boxShadow: 'none', backgroundColor: 'none', border: '1px solid #eceaea'}}>
- <CardHeader
- title="Order JSON"
- actAsExpander={true}
- showExpandableButton={true}
- />
+ <Card
+ style={{
+ boxShadow: 'none',
+ backgroundColor: 'none',
+ border: '1px solid #eceaea',
+ }}
+ >
+ <CardHeader title="Order JSON" actAsExpander={true} showExpandableButton={true} />
<CardText expandable={true}>
<FillOrderJSON
blockchain={this.props.blockchain}
@@ -146,7 +138,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
</Card>
{this._renderOrderJsonNotices()}
</div>
- }
+ )}
</div>
<FillWarningDialog
isOpen={this.state.isFillWarningDialogOpen}
@@ -168,17 +160,18 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
private _renderOrderJsonNotices() {
return (
<div>
- {!_.isUndefined(this.props.initialOrder) && !this.state.didOrderValidationRun &&
- <div className="pt2">
- <span className="pr1">
- <i className="zmdi zmdi-spinner zmdi-hc-spin" />
- </span>
- <span>Validating order...</span>
- </div>
- }
- {!_.isEmpty(this.state.orderJSONErrMsg) &&
+ {!_.isUndefined(this.props.initialOrder) &&
+ !this.state.didOrderValidationRun && (
+ <div className="pt2">
+ <span className="pr1">
+ <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+ </span>
+ <span>Validating order...</span>
+ </div>
+ )}
+ {!_.isEmpty(this.state.orderJSONErrMsg) && (
<Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
- }
+ )}
</div>
);
}
@@ -203,8 +196,9 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
amount: this.props.orderFillAmount,
symbol: takerToken.symbol,
};
- const orderTaker = !_.isEmpty(this.state.parsedOrder.taker.address) ? this.state.parsedOrder.taker.address :
- this.props.userAddress;
+ const orderTaker = !_.isEmpty(this.state.parsedOrder.taker.address)
+ ? this.state.parsedOrder.taker.address
+ : this.props.userAddress;
const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.expiration);
const exchangeRate = orderMakerAmount.div(orderTakerAmount);
@@ -213,22 +207,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
const orderReceiveAmountBigNumber = exchangeRate.mul(this.props.orderFillAmount);
orderReceiveAmount = this._formatCurrencyAmount(orderReceiveAmountBigNumber, makerToken.decimals);
}
- const isUserMaker = !_.isUndefined(this.state.parsedOrder) &&
- this.state.parsedOrder.maker.address === this.props.userAddress;
+ const isUserMaker =
+ !_.isUndefined(this.state.parsedOrder) && this.state.parsedOrder.maker.address === this.props.userAddress;
const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
return (
<div className="pt3 pb1">
- <div className="clearfix pb2" style={{width: '100%'}}>
+ <div className="clearfix pb2" style={{ width: '100%' }}>
<div className="inline left">Order details</div>
- <div className="inline right" style={{minWidth: 208}}>
- <div className="col col-4 pl2" style={{color: colors.grey}}>
+ <div className="inline right" style={{ minWidth: 208 }}>
+ <div className="col col-4 pl2" style={{ color: colors.grey }}>
Maker:
</div>
<div className="col col-2 pr1">
- <Identicon
- address={this.state.parsedOrder.maker.address}
- diameter={23}
- />
+ <Identicon address={this.state.parsedOrder.maker.address} diameter={23} />
</div>
<div className="col col-6">
<EthereumAddress
@@ -252,65 +243,63 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
isMakerTokenAddressInRegistry={this.state.isMakerTokenAddressInRegistry}
isTakerTokenAddressInRegistry={this.state.isTakerTokenAddressInRegistry}
/>
- <div className="center pt3 pb2">
- Expires: {expiryDate} UTC
- </div>
+ <div className="center pt3 pb2">Expires: {expiryDate} UTC</div>
</div>
</div>
- {!isUserMaker &&
- <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
- <TokenAmountInput
- label="Fill amount"
- onChange={this._onFillAmountChange.bind(this)}
- shouldShowIncompleteErrs={false}
- token={fillToken}
- tokenState={fillTokenState}
- amount={fillAssetToken.amount}
- shouldCheckBalance={true}
- shouldCheckAllowance={true}
- />
- <div
- className="absolute sm-hide xs-hide"
- style={{color: colors.grey400, right: -247, top: 39, width: 242}}
- >
- = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
- </div>
+ {!isUserMaker && (
+ <div className="clearfix mx-auto relative" style={{ width: 235, height: 108 }}>
+ <TokenAmountInput
+ label="Fill amount"
+ onChange={this._onFillAmountChange.bind(this)}
+ shouldShowIncompleteErrs={false}
+ token={fillToken}
+ tokenState={fillTokenState}
+ amount={fillAssetToken.amount}
+ shouldCheckBalance={true}
+ shouldCheckAllowance={true}
+ />
+ <div
+ className="absolute sm-hide xs-hide"
+ style={{
+ color: colors.grey400,
+ right: -247,
+ top: 39,
+ width: 242,
+ }}
+ >
+ = {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
+ </div>
</div>
- }
+ )}
<div>
- {isUserMaker ?
+ {isUserMaker ? (
<div>
<RaisedButton
- style={{width: '100%'}}
+ style={{ width: '100%' }}
disabled={this.state.isCancelling}
label={this.state.isCancelling ? 'Cancelling order...' : 'Cancel order'}
onClick={this._onCancelOrderClickFireAndForgetAsync.bind(this)}
/>
- {this.state.didCancelOrderSucceed &&
- <Alert
- type={AlertTypes.SUCCESS}
- message={this._renderCancelSuccessMsg()}
- />
- }
- </div> :
+ {this.state.didCancelOrderSucceed && (
+ <Alert type={AlertTypes.SUCCESS} message={this._renderCancelSuccessMsg()} />
+ )}
+ </div>
+ ) : (
<div>
<RaisedButton
- style={{width: '100%'}}
+ style={{ width: '100%' }}
disabled={this.state.isFilling}
label={this.state.isFilling ? 'Filling order...' : 'Fill order'}
onClick={this._onFillOrderClick.bind(this)}
/>
- {!_.isEmpty(this.state.globalErrMsg) &&
+ {!_.isEmpty(this.state.globalErrMsg) && (
<Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
- }
- {this.state.didFillOrderSucceed &&
- <Alert
- type={AlertTypes.SUCCESS}
- message={this._renderFillSuccessMsg()}
- />
- }
+ )}
+ {this.state.didFillOrderSucceed && (
+ <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} />
+ )}
</div>
- }
+ )}
</div>
</div>
);
@@ -319,21 +308,14 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return (
<div>
Order successfully filled. See the trade details in your{' '}
- <Link
- to={`${WebsitePaths.Portal}/trades`}
- style={{color: colors.white}}
- >
+ <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
trade history
</Link>
</div>
);
}
private _renderCancelSuccessMsg() {
- return (
- <div>
- Order successfully cancelled.
- </div>
- );
+ return <div>Order successfully cancelled.</div>;
}
private _onFillOrderClick() {
if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) {
@@ -554,11 +536,12 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
if (_.isEmpty(globalErrMsg)) {
try {
await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
- signedOrder, takerFillAmount, this.props.userAddress);
- } catch (err) {
- globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(
- err.message, parsedOrder.taker.address,
+ signedOrder,
+ takerFillAmount,
+ this.props.userAddress,
);
+ } catch (err) {
+ globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
}
}
if (!_.isEmpty(globalErrMsg)) {
@@ -570,7 +553,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
}
try {
const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
- signedOrder, this.props.orderFillAmount,
+ signedOrder,
+ this.props.orderFillAmount,
);
// After fill completes, let's update the token balances
const makerToken = this.props.tokenByAddress[parsedOrder.maker.token.address];
@@ -644,8 +628,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
try {
- await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(
- signedOrder, availableTakerTokenAmount);
+ await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount);
} catch (err) {
globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
}
@@ -657,9 +640,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
return;
}
try {
- await this.props.blockchain.cancelOrderAsync(
- signedOrder, availableTakerTokenAmount,
- );
+ await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
this.setState({
isCancelling: false,
didCancelOrderSucceed: true,
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index 4a4bdac9f..d7d9fac4e 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -1,13 +1,13 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {Side, TokenByAddress} from 'ts/types';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { Side, TokenByAddress } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
interface FillOrderJSONProps {
blockchain: Blockchain;
@@ -42,17 +42,27 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
};
const hintSalt = ZeroEx.generatePseudoRandomSalt();
const feeRecipient = constants.NULL_ADDRESS;
- const hintOrder = utils.generateOrder(this.props.networkId, exchangeContract, hintSideToAssetToken,
- hintOrderExpiryTimestamp, '', '', constants.MAKER_FEE,
- constants.TAKER_FEE, feeRecipient,
- hintSignatureData, this.props.tokenByAddress, hintSalt);
+ const hintOrder = utils.generateOrder(
+ this.props.networkId,
+ exchangeContract,
+ hintSideToAssetToken,
+ hintOrderExpiryTimestamp,
+ '',
+ '',
+ constants.MAKER_FEE,
+ constants.TAKER_FEE,
+ feeRecipient,
+ hintSignatureData,
+ this.props.tokenByAddress,
+ hintSalt,
+ );
const hintOrderJSON = `${JSON.stringify(hintOrder, null, '\t').substring(0, 500)}...`;
return (
<div>
- <Paper className="p1 overflow-hidden" style={{height: 164}}>
+ <Paper className="p1 overflow-hidden" style={{ height: 164 }}>
<TextField
id="orderJSON"
- hintStyle={{bottom: 0, top: 0}}
+ hintStyle={{ bottom: 0, top: 0 }}
fullWidth={true}
value={this.props.orderJSON}
onChange={this.props.onFillOrderJSONChanged.bind(this)}
@@ -60,8 +70,8 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
multiLine={true}
rows={6}
rowsMax={6}
- underlineStyle={{display: 'none'}}
- textareaStyle={{marginTop: 0}}
+ underlineStyle={{ display: 'none' }}
+ textareaStyle={{ marginTop: 0 }}
/>
</Paper>
</div>
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 7370ee2d8..38c10870b 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,7 +1,7 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
interface FillWarningDialogProps {
isOpen: boolean;
@@ -13,7 +13,7 @@ export function FillWarningDialog(props: FillWarningDialogProps) {
return (
<Dialog
title="Warning"
- titleStyle={{fontWeight: 100, color: colors.red500}}
+ titleStyle={{ fontWeight: 100, color: colors.red500 }}
actions={[
<FlatButton
key="fillWarningCancel"
@@ -31,15 +31,11 @@ export function FillWarningDialog(props: FillWarningDialogProps) {
autoScrollBodyContent={true}
modal={true}
>
- <div className="pt2" style={{color: colors.grey700}}>
+ <div className="pt2" style={{ color: colors.grey700 }}>
<div>
- At least one of the tokens in this order was not found in the
- token registry smart contract and may be counterfeit. It is your
- responsibility to verify the token addresses on Etherscan (
- <a
- href="https://0xproject.com/wiki#Verifying-Custom-Tokens"
- target="_blank"
- >
+ At least one of the tokens in this order was not found in the token registry smart contract and may
+ be counterfeit. It is your responsibility to verify the token addresses on Etherscan (
+ <a href="https://0xproject.com/wiki#Verifying-Custom-Tokens" target="_blank">
See this how-to guide
</a>) before filling an order. <b>This action may result in the loss of funds</b>.
</div>
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 26619c54f..060cd2e23 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -1,10 +1,10 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
-import {Token} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { Token } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
interface TokenSendCompletedProps {
etherScanLinkIfExists?: string;
@@ -17,16 +17,11 @@ interface TokenSendCompletedState {}
export class TokenSendCompleted extends React.Component<TokenSendCompletedProps, TokenSendCompletedState> {
public render() {
- const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) &&
- (
- <a
- style={{color: colors.white}}
- href={`${this.props.etherScanLinkIfExists}`}
- target="_blank"
- >
- Verify on Etherscan
- </a>
- );
+ const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) && (
+ <a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank">
+ Verify on Etherscan
+ </a>
+ );
const amountInUnits = ZeroEx.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
return (
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index 64f460e20..862e382dd 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
interface TransactionSubmittedProps {
etherScanLinkIfExists?: string;
@@ -16,11 +16,7 @@ export class TransactionSubmitted extends React.Component<TransactionSubmittedPr
return (
<div>
Transaction submitted to the network:{' '}
- <a
- style={{color: colors.white}}
- href={`${this.props.etherScanLinkIfExists}`}
- target="_blank"
- >
+ <a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank">
Verify on Etherscan
</a>
</div>
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 4b9942276..3346f2545 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,11 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {
- Link,
-} from 'react-router-dom';
-import {WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
+import { Link } from 'react-router-dom';
+import { WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
interface MenuItemsBySection {
[sectionName: string]: FooterMenuItem[];
@@ -102,11 +100,11 @@ const linkStyle = {
cursor: 'pointer',
};
-const titleToIcon: {[title: string]: string} = {
+const titleToIcon: { [title: string]: string } = {
'Rocket.chat': 'rocketchat.png',
- 'Blog': 'medium.png',
- 'Twitter': 'twitter.png',
- 'Reddit': 'reddit.png',
+ Blog: 'medium.png',
+ Twitter: 'twitter.png',
+ Reddit: 'reddit.png',
};
export interface FooterProps {}
@@ -116,15 +114,20 @@ interface FooterState {}
export class Footer extends React.Component<FooterProps, FooterState> {
public render() {
return (
- <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGrey}}>
- <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: colors.white}}>
+ <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
+ <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
<div className="col lg-col-4 md-col-4 col-12 left">
- <div className="sm-mx-auto" style={{width: 148}}>
+ <div className="sm-mx-auto" style={{ width: 148 }}>
<div>
<img src="/images/protocol_logo_white.png" height="30" />
</div>
<div
- style={{fontSize: 11, color: colors.grey, paddingLeft: 37, paddingTop: 2}}
+ style={{
+ fontSize: 11,
+ color: colors.grey,
+ paddingLeft: 37,
+ paddingTop: 2,
+ }}
>
© ZeroEx, Intl.
</div>
@@ -156,53 +159,38 @@ export class Footer extends React.Component<FooterProps, FooterState> {
}
private _renderIcon(fileName: string) {
return (
- <div style={{height: ICON_DIMENSION, width: ICON_DIMENSION}}>
- <img src={`/images/social/${fileName}`} style={{width: ICON_DIMENSION}} />
+ <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
+ <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
</div>
);
}
private _renderMenuItem(item: FooterMenuItem) {
const iconIfExists = titleToIcon[item.title];
return (
- <div
- key={item.title}
- className="sm-center"
- style={{fontSize: 13, paddingTop: 25}}
- >
- {item.isExternal ?
- <a
- className="text-decoration-none"
- style={linkStyle}
- target="_blank"
- href={item.path}
- >
- {!_.isUndefined(iconIfExists) ?
- <div className="sm-mx-auto" style={{width: 65}}>
+ <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+ {item.isExternal ? (
+ <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
+ {!_.isUndefined(iconIfExists) ? (
+ <div className="sm-mx-auto" style={{ width: 65 }}>
<div className="flex">
- <div className="pr1">
- {this._renderIcon(iconIfExists)}
- </div>
+ <div className="pr1">{this._renderIcon(iconIfExists)}</div>
<div>{item.title}</div>
</div>
- </div> :
+ </div>
+ ) : (
item.title
- }
- </a> :
- <Link
- to={item.path}
- style={linkStyle}
- className="text-decoration-none"
- >
+ )}
+ </a>
+ ) : (
+ <Link to={item.path} style={linkStyle} className="text-decoration-none">
<div>
- {!_.isUndefined(iconIfExists) &&
- <div className="pr1">
- {this._renderIcon(iconIfExists)}
- </div>
- }
+ {!_.isUndefined(iconIfExists) && (
+ <div className="pr1">{this._renderIcon(iconIfExists)}</div>
+ )}
{item.title}
</div>
</Link>
- }
+ )}
</div>
);
}
@@ -215,10 +203,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
fontSize: 13,
};
return (
- <div
- className="lg-pb2 md-pb2 sm-pt4"
- style={headerStyle}
- >
+ <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
{title}
</div>
);
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 407070607..df7d87cfd 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -2,19 +2,13 @@ import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {NewTokenForm} from 'ts/components/generate_order/new_token_form';
-import {TrackTokenConfirmation} from 'ts/components/track_token_confirmation';
-import {TokenIcon} from 'ts/components/ui/token_icon';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {
- DialogConfigs,
- Token,
- TokenByAddress,
- TokenState,
- TokenVisibility,
-} from 'ts/types';
+import { Blockchain } from 'ts/blockchain';
+import { NewTokenForm } from 'ts/components/generate_order/new_token_form';
+import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { DialogConfigs, Token, TokenByAddress, TokenState, TokenVisibility } from 'ts/types';
const TOKEN_ICON_DIMENSION = 100;
const TILE_DIMENSION = 146;
@@ -47,7 +41,7 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
public static defaultProps: Partial<AssetPickerProps> = {
tokenVisibility: TokenVisibility.ALL,
};
- private _dialogConfigsByAssetView: {[assetView: string]: DialogConfigs};
+ private _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs };
constructor(props: AssetPickerProps) {
super(props);
this.state = {
@@ -90,25 +84,21 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
return (
<Dialog
title={dialogConfigs.title}
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
modal={dialogConfigs.isModal}
open={this.props.isOpen}
actions={dialogConfigs.actions}
onRequestClose={this._onCloseDialog.bind(this)}
>
- {this.state.assetView === AssetViews.ASSET_PICKER &&
- this._renderAssetPicker()
- }
- {this.state.assetView === AssetViews.NEW_TOKEN_FORM &&
+ {this.state.assetView === AssetViews.ASSET_PICKER && this._renderAssetPicker()}
+ {this.state.assetView === AssetViews.NEW_TOKEN_FORM && (
<NewTokenForm
blockchain={this.props.blockchain}
onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)}
tokenByAddress={this.props.tokenByAddress}
/>
- }
- {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN &&
- this._renderConfirmTrackToken()
- }
+ )}
+ {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()}
</Dialog>
);
}
@@ -127,7 +117,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
return (
<div
className="clearfix flex flex-wrap"
- style={{overflowY: 'auto', maxWidth: 720, maxHeight: 356, marginBottom: 10}}
+ style={{
+ overflowY: 'auto',
+ maxWidth: 720,
+ maxHeight: 356,
+ marginBottom: 10,
+ }}
>
{this._renderGridTiles()}
</div>
@@ -137,8 +132,10 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
let isHovered;
let tileStyles;
const gridTiles = _.map(this.props.tokenByAddress, (token: Token, address: string) => {
- if ((this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
- (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked)) {
+ if (
+ (this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) ||
+ (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked)
+ ) {
return null; // Skip
}
isHovered = this.state.hoveredAddress === address;
@@ -149,7 +146,11 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
return (
<div
key={address}
- style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}}
+ style={{
+ width: TILE_DIMENSION,
+ height: TILE_DIMENSION,
+ ...tileStyles,
+ }}
className="p2 mx-auto"
onClick={this._onChooseToken.bind(this, address)}
onMouseEnter={this._onToggleHover.bind(this, address, true)}
@@ -169,10 +170,14 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
opacity: isHovered ? 0.6 : 1,
};
if (this.props.tokenVisibility !== TokenVisibility.TRACKED) {
- gridTiles.push((
+ gridTiles.push(
<div
key={otherTokenKey}
- style={{width: TILE_DIMENSION, height: TILE_DIMENSION, ...tileStyles}}
+ style={{
+ width: TILE_DIMENSION,
+ height: TILE_DIMENSION,
+ ...tileStyles,
+ }}
className="p2 mx-auto"
onClick={this._onCustomAssetChosen.bind(this)}
onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)}
@@ -180,13 +185,13 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
>
<div className="p1 center">
<i
- style={{fontSize: 105, paddingLeft: 1, paddingRight: 1}}
+ style={{ fontSize: 105, paddingLeft: 1, paddingRight: 1 }}
className="zmdi zmdi-plus-circle"
/>
</div>
<div className="center">Other ERC20 Token</div>
- </div>
- ));
+ </div>,
+ );
}
return gridTiles;
}
@@ -251,10 +256,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
newTokenEntry.isTracked = true;
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
- const [
- balance,
- allowance,
- ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(token.address);
+ const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+ token.address,
+ );
this.props.dispatcher.updateTokenStateByAddress({
[token.address]: {
balance,
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 7a25609b8..949be4f84 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,23 +1,23 @@
-import {Order, ZeroEx} from '0x.js';
+import { Order, ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import Divider from 'material-ui/Divider';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {ExpirationInput} from 'ts/components/inputs/expiration_input';
-import {HashInput} from 'ts/components/inputs/hash_input';
-import {IdenticonAddressInput} from 'ts/components/inputs/identicon_address_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {TokenInput} from 'ts/components/inputs/token_input';
-import {OrderJSON} from 'ts/components/order_json';
-import {Alert} from 'ts/components/ui/alert';
-import {HelpTooltip} from 'ts/components/ui/help_tooltip';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {SwapIcon} from 'ts/components/ui/swap_icon';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {orderSchema} from 'ts/schemas/order_schema';
-import {SchemaValidator} from 'ts/schemas/validator';
+import { Blockchain } from 'ts/blockchain';
+import { ExpirationInput } from 'ts/components/inputs/expiration_input';
+import { HashInput } from 'ts/components/inputs/hash_input';
+import { IdenticonAddressInput } from 'ts/components/inputs/identicon_address_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { TokenInput } from 'ts/components/inputs/token_input';
+import { OrderJSON } from 'ts/components/order_json';
+import { Alert } from 'ts/components/ui/alert';
+import { HelpTooltip } from 'ts/components/ui/help_tooltip';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { SwapIcon } from 'ts/components/ui/swap_icon';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { orderSchema } from 'ts/schemas/order_schema';
+import { SchemaValidator } from 'ts/schemas/validator';
import {
AlertTypes,
BlockchainErrs,
@@ -29,9 +29,9 @@ import {
TokenByAddress,
TokenStateByAddress,
} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
enum SigningState {
UNSIGNED,
@@ -84,7 +84,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
const receiveTokenAddress = this.props.sideToAssetToken[Side.Receive].address;
const receiveToken = this.props.tokenByAddress[receiveTokenAddress];
const receiveTokenState = this.props.tokenStateByAddress[receiveTokenAddress];
- const takerExplanation = 'If a taker is specified, only they are<br> \
+ const takerExplanation =
+ 'If a taker is specified, only they are<br> \
allowed to fill this order. If no taker is<br> \
specified, anyone is able to fill it.';
const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists();
@@ -92,7 +93,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
<div className="clearfix mb2 lg-px4 md-px4 sm-px2">
<h3>Generate an order</h3>
<Divider />
- <div className="mx-auto" style={{maxWidth: 580}}>
+ <div className="mx-auto" style={{ maxWidth: 580 }}>
<div className="pt3">
<div className="mx-auto clearfix">
<div className="lg-col md-col lg-col-5 md-col-5 sm-col sm-col-5 sm-pb2">
@@ -121,9 +122,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
</div>
<div className="lg-col md-col lg-col-2 md-col-2 sm-col sm-col-2 xs-hide">
<div className="p1">
- <SwapIcon
- swapTokensFn={dispatcher.swapAssetTokenSymbols.bind(dispatcher)}
- />
+ <SwapIcon swapTokensFn={dispatcher.swapAssetTokenSymbols.bind(dispatcher)} />
</div>
</div>
<div className="lg-col md-col lg-col-5 md-col-5 sm-col sm-col-5 sm-pb2">
@@ -154,7 +153,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
</div>
<div className="pt1 sm-pb2 lg-px4 md-px4">
<div className="lg-px3 md-px3">
- <div style={{fontSize: 12, color: colors.grey}}>Expiration</div>
+ <div style={{ fontSize: 12, color: colors.grey }}>Expiration</div>
<ExpirationInput
orderExpiryTimestamp={this.props.orderExpiryTimestamp}
updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)}
@@ -169,9 +168,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
/>
<div className="pt3">
<div className="pl1">
- <HelpTooltip
- explanation={takerExplanation}
- />
+ <HelpTooltip explanation={takerExplanation} />
</div>
</div>
</div>
@@ -192,14 +189,14 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
onClickAsyncFn={this._onSignClickedAsync.bind(this)}
/>
</div>
- {this.state.globalErrMsg !== '' &&
+ {this.state.globalErrMsg !== '' && (
<Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
- }
+ )}
</div>
</div>
<Dialog
title="Order JSON"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
modal={false}
open={this.state.signingState === SigningState.SIGNED}
onRequestClose={this._onCloseOrderJSONDialog.bind(this)}
@@ -223,7 +220,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
);
}
private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) {
- this.props.dispatcher.updateChosenAssetToken(side, {address: token.address, amount});
+ this.props.dispatcher.updateChosenAssetToken(side, {
+ address: token.address,
+ amount,
+ });
}
private _onCloseOrderJSONDialog() {
// Upon closing the order JSON dialog, we update the orderSalt stored in the Redux store
@@ -245,10 +245,15 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
const debitBalance = this.props.tokenStateByAddress[debitToken.address].balance;
const debitAllowance = this.props.tokenStateByAddress[debitToken.address].allowance;
const receiveAmount = this.props.sideToAssetToken[Side.Receive].amount;
- if (!_.isUndefined(debitToken.amount) && !_.isUndefined(receiveAmount) &&
- debitToken.amount.gt(0) && receiveAmount.gt(0) &&
+ if (
+ !_.isUndefined(debitToken.amount) &&
+ !_.isUndefined(receiveAmount) &&
+ debitToken.amount.gt(0) &&
+ receiveAmount.gt(0) &&
this.props.userAddress !== '' &&
- debitBalance.gte(debitToken.amount) && debitAllowance.gte(debitToken.amount)) {
+ debitBalance.gte(debitToken.amount) &&
+ debitAllowance.gte(debitToken.amount)
+ ) {
const didSignSuccessfully = await this._signTransactionAsync();
if (didSignSuccessfully) {
this.setState({
@@ -303,11 +308,20 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
let globalErrMsg = '';
try {
const signatureData = await this.props.blockchain.signOrderHashAsync(orderHash);
- const order = utils.generateOrder(this.props.networkId, exchangeContractAddr, this.props.sideToAssetToken,
- hashData.orderExpiryTimestamp, this.props.orderTakerAddress,
- this.props.userAddress, hashData.makerFee, hashData.takerFee,
- hashData.feeRecipientAddress, signatureData, this.props.tokenByAddress,
- hashData.orderSalt);
+ const order = utils.generateOrder(
+ this.props.networkId,
+ exchangeContractAddr,
+ this.props.sideToAssetToken,
+ hashData.orderExpiryTimestamp,
+ this.props.orderTakerAddress,
+ this.props.userAddress,
+ hashData.makerFee,
+ hashData.takerFee,
+ hashData.feeRecipientAddress,
+ signatureData,
+ this.props.tokenByAddress,
+ hashData.orderSalt,
+ );
const validationResult = this._validator.validate(order, orderSchema);
if (validationResult.errors.length > 0) {
globalErrMsg = 'Order signing failed. Please refresh and try again';
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 fe40854cb..d0cd6add1 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -2,13 +2,13 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {Alert} from 'ts/components/ui/alert';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {AlertTypes, Token, TokenByAddress, TokenState} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Blockchain } from 'ts/blockchain';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { Alert } from 'ts/components/ui/alert';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { AlertTypes, Token, TokenByAddress, TokenState } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface NewTokenFormProps {
blockchain: Blockchain;
@@ -45,11 +45,11 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
}
public render() {
return (
- <div className="mx-auto pb2" style={{width: 256}}>
+ <div className="mx-auto pb2" style={{ width: 256 }}>
<div>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey}}
+ floatingLabelStyle={{ color: colors.grey }}
floatingLabelText={<RequiredLabel label="Name" />}
value={this.state.name}
errorText={this.state.nameErrText}
@@ -59,7 +59,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey}}
+ floatingLabelStyle={{ color: colors.grey }}
floatingLabelText={<RequiredLabel label="Symbol" />}
value={this.state.symbol}
errorText={this.state.symbolErrText}
@@ -78,14 +78,14 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey}}
+ floatingLabelStyle={{ color: colors.grey }}
floatingLabelText={<RequiredLabel label="Decimals" />}
value={this.state.decimals}
errorText={this.state.decimalsErrText}
onChange={this._onTokenDecimalsChanged.bind(this)}
/>
</div>
- <div className="pt2 mx-auto" style={{width: 120}}>
+ <div className="pt2 mx-auto" style={{ width: 120 }}>
<LifeCycleRaisedButton
labelReady="Add"
labelLoading="Adding..."
@@ -93,9 +93,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)}
/>
</div>
- {this.state.globalErrMsg !== '' &&
- <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
- }
+ {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />}
</div>
);
}
@@ -116,18 +114,21 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
let allowance = new BigNumber(0);
if (doesContractExist) {
try {
- [
- balance,
- allowance,
- ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(this.state.address);
+ [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+ this.state.address,
+ );
} catch (err) {
hasBalanceAllowanceErr = true;
}
}
let globalErrMsg = '';
- if (this.state.nameErrText !== '' || this.state.symbolErrText !== '' ||
- this.state.decimalsErrText !== '' || isAddressIncomplete) {
+ if (
+ this.state.nameErrText !== '' ||
+ this.state.symbolErrText !== '' ||
+ this.state.decimalsErrText !== '' ||
+ isAddressIncomplete
+ ) {
globalErrMsg = 'Please fix the above issues';
} else if (!doesContractExist) {
globalErrMsg = 'No contract found at supplied address';
@@ -164,7 +165,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
let nameErrText = '';
const maxLength = 30;
const tokens = _.values(this.props.tokenByAddress);
- const tokenWithNameIfExists = _.find(tokens, {name});
+ const tokenWithNameIfExists = _.find(tokens, { name });
const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
if (name === '') {
nameErrText = 'Name is required';
@@ -185,7 +186,7 @@ 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 tokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol }));
if (symbol === '') {
symbolErrText = 'Symbol is required';
} else if (!this._isLetters(symbol)) {
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index 343eecc42..dd4131140 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
-import {addressUtils} from '@0xproject/utils';
+import { addressUtils } from '@0xproject/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {colors} from 'ts/utils/colors';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { colors } from 'ts/utils/colors';
interface AddressInputProps {
disabled?: boolean;
@@ -30,16 +30,14 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
};
}
public componentWillReceiveProps(nextProps: AddressInputProps) {
- if (nextProps.shouldShowIncompleteErrs && this.props.isRequired &&
- this.state.address === '') {
- this.setState({
- errMsg: 'Address is required',
- });
+ if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') {
+ this.setState({
+ errMsg: 'Address is required',
+ });
}
}
public render() {
- const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
- this.props.label;
+ const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
const hintText = this.props.hintText ? this.props.hintText : '';
return (
@@ -50,7 +48,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
fullWidth={true}
hintText={hintText}
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey, display: labelDisplay}}
+ floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
floatingLabelText={label}
errorText={this.state.errMsg}
value={this.state.address}
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 2404a1e31..05da03f86 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -2,11 +2,11 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Toggle from 'material-ui/Toggle';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {BalanceErrs, Token, TokenState} from 'ts/types';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BalanceErrs, Token, TokenState } from 'ts/types';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
@@ -50,11 +50,11 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
onToggle={this._onToggleAllowanceAsync.bind(this, this.props.token)}
/>
</div>
- {this.state.isSpinnerVisible &&
- <div className="pl1" style={{paddingTop: 3}}>
+ {this.state.isSpinnerVisible && (
+ <div className="pl1" style={{ paddingTop: 3 }}>
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
</div>
- }
+ )}
</div>
);
}
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 91cc36e0c..8a9fcc1c5 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -2,11 +2,11 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
interface BalanceBoundedInputProps {
label?: string;
@@ -25,8 +25,7 @@ interface BalanceBoundedInputState {
amountString: string;
}
-export class BalanceBoundedInput extends
- React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
+export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
public static defaultProps: Partial<BalanceBoundedInputProps> = {
shouldShowIncompleteErrs: false,
shouldHideVisitBalancesLink: false,
@@ -74,37 +73,40 @@ export class BalanceBoundedInput extends
if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
errorText = 'This field is required';
}
- let label: React.ReactNode|string = '';
+ let label: React.ReactNode | string = '';
if (!_.isUndefined(this.props.label)) {
- label = <RequiredLabel label={this.props.label}/>;
+ label = <RequiredLabel label={this.props.label} />;
}
return (
<TextField
fullWidth={true}
floatingLabelText={label}
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey, width: 206}}
+ floatingLabelStyle={{ color: colors.grey, width: 206 }}
errorText={errorText}
value={this.state.amountString}
- hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
+ hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>}
onChange={this._onValueChange.bind(this)}
- underlineStyle={{width: 'calc(100% + 50px)'}}
+ underlineStyle={{ width: 'calc(100% + 50px)' }}
/>
);
}
private _onValueChange(e: any, amountString: string) {
const errMsg = this._validate(amountString, this.props.balance);
- this.setState({
- amountString,
- errMsg,
- }, () => {
- const isValid = _.isUndefined(errMsg);
- if (utils.isNumeric(amountString)) {
- this.props.onChange(isValid, new BigNumber(amountString));
- } else {
- this.props.onChange(isValid);
- }
- });
+ this.setState(
+ {
+ amountString,
+ errMsg,
+ },
+ () => {
+ const isValid = _.isUndefined(errMsg);
+ if (utils.isNumeric(amountString)) {
+ this.props.onChange(isValid, new BigNumber(amountString));
+ } else {
+ this.props.onChange(isValid);
+ }
+ },
+ );
}
private _validate(amountString: string, balance: BigNumber): InputErrMsg {
if (!utils.isNumeric(amountString)) {
@@ -115,12 +117,7 @@ export class BalanceBoundedInput extends
return 'Cannot be zero';
}
if (this.props.shouldCheckBalance && amount.gt(balance)) {
- return (
- <span>
- Insufficient balance.{' '}
- {this._renderIncreaseBalanceLink()}
- </span>
- );
+ return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
}
const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
return errMsg;
@@ -139,19 +136,13 @@ export class BalanceBoundedInput extends
};
if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
return (
- <Link
- to={`${WebsitePaths.Portal}/balances`}
- style={linkStyle}
- >
+ <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
{increaseBalanceText}
</Link>
);
} else {
return (
- <div
- onClick={this.props.onVisitBalancesPageClick}
- style={linkStyle}
- >
+ <div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}>
{increaseBalanceText}
</div>
);
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index da5bc9805..855892e28 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -1,10 +1,10 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
-import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
-import {ValidatedBigNumberCallback} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
+import { ValidatedBigNumberCallback } from 'ts/types';
+import { constants } from 'ts/utils/constants';
interface EthAmountInputProps {
label?: string;
@@ -21,11 +21,11 @@ interface EthAmountInputState {}
export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
public render() {
- const amount = this.props.amount ?
- ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) :
- undefined;
+ const amount = this.props.amount
+ ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
+ : undefined;
return (
- <div className="flex overflow-hidden" style={{height: 63}}>
+ <div className="flex overflow-hidden" style={{ height: 63 }}>
<BalanceBoundedInput
label={this.props.label}
balance={this.props.balance}
@@ -36,16 +36,14 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
/>
- <div style={{paddingTop: _.isUndefined(this.props.label) ? 15 : 40}}>
- ETH
- </div>
+ <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div>
</div>
);
}
private _onChange(isValid: boolean, amount?: BigNumber) {
- const baseUnitAmountIfExists = _.isUndefined(amount) ?
- undefined :
- ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
+ const baseUnitAmountIfExists = _.isUndefined(amount)
+ ? undefined
+ : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
this.props.onChange(isValid, baseUnitAmountIfExists);
}
}
diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx
index fe471e39b..16aa5aa09 100644
--- a/packages/website/ts/components/inputs/expiration_input.tsx
+++ b/packages/website/ts/components/inputs/expiration_input.tsx
@@ -4,7 +4,7 @@ import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
import * as moment from 'moment';
import * as React from 'react';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
interface ExpirationInputProps {
orderExpiryTimestamp: BigNumber;
@@ -45,10 +45,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
onChange={this._onDateChanged.bind(this)}
shouldDisableDate={this._shouldDisableDate.bind(this)}
/>
- <div
- className="absolute"
- style={{fontSize: 20, right: 40, top: 13, pointerEvents: 'none'}}
- >
+ <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
<i className="zmdi zmdi-calendar" />
</div>
</div>
@@ -60,25 +57,20 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
value={time}
onChange={this._onTimeChanged.bind(this)}
/>
- <div
- className="absolute"
- style={{fontSize: 20, right: 9, top: 13, pointerEvents: 'none'}}
- >
+ <div className="absolute" style={{ fontSize: 20, right: 9, top: 13, pointerEvents: 'none' }}>
<i className="zmdi zmdi-time" />
</div>
</div>
- <div
- onClick={this._clearDates.bind(this)}
- className="col col-1 pt2"
- style={{textAlign: 'right'}}
- >
- <i style={{fontSize: 16, cursor: 'pointer'}} className="zmdi zmdi-close" />
+ <div onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{ textAlign: 'right' }}>
+ <i style={{ fontSize: 16, cursor: 'pointer' }} className="zmdi zmdi-close" />
</div>
</div>
);
}
private _shouldDisableDate(date: Date): boolean {
- return moment(date).startOf('day').isBefore(this._earliestPickableMoment);
+ return moment(date)
+ .startOf('day')
+ .isBefore(this._earliestPickableMoment);
}
private _clearDates() {
this.setState({
@@ -101,7 +93,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
this.setState({
timeMoment,
});
- const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
+ const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
this.props.updateOrderExpiry(timestamp);
}
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 4dc96a062..5a3d34fe6 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,11 +1,11 @@
-import {Order, ZeroEx} from '0x.js';
+import { Order, ZeroEx } from '0x.js';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {FakeTextField} from 'ts/components/ui/fake_text_field';
-import {HashData, Styles} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Blockchain } from 'ts/blockchain';
+import { FakeTextField } from 'ts/components/ui/fake_text_field';
+import { HashData, Styles } from 'ts/types';
+import { constants } from 'ts/utils/constants';
const styles: Styles = {
textField: {
@@ -31,11 +31,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
return (
<div>
<FakeTextField label={this.props.label}>
- <div
- style={styles.textField}
- data-tip={true}
- data-for="hashTooltip"
- >
+ <div style={styles.textField} data-tip={true} data-for="hashTooltip">
{msgHashHex}
</div>
</FakeTextField>
diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx
index 0f220f955..4cf9af64d 100644
--- a/packages/website/ts/components/inputs/identicon_address_input.tsx
+++ b/packages/website/ts/components/inputs/identicon_address_input.tsx
@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {Identicon} from 'ts/components/ui/identicon';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {RequiredLabel} from 'ts/components/ui/required_label';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { Identicon } from 'ts/components/ui/identicon';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { RequiredLabel } from 'ts/components/ui/required_label';
interface IdenticonAddressInputProps {
initialAddress: string;
@@ -24,16 +24,15 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput
};
}
public render() {
- const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
- this.props.label;
+ const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
return (
- <div className="relative" style={{width: '100%'}}>
+ <div className="relative" style={{ width: '100%' }}>
<InputLabel text={label} />
<div className="flex">
- <div className="col col-1 pb1 pr1" style={{paddingTop: 13}}>
+ <div className="col col-1 pb1 pr1" style={{ paddingTop: 13 }}>
<Identicon address={this.state.address} diameter={26} />
</div>
- <div className="col col-11 pb1 pl1" style={{height: 65}}>
+ <div className="col col-11 pb1 pl1" style={{ height: 65 }}>
<AddressInput
hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
shouldHideLabel={true}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 84117e843..b3ded96c7 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,11 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
-import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Link } from 'react-router-dom';
+import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
+import { InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface TokenAmountInputProps {
token: Token;
@@ -19,16 +19,16 @@ interface TokenAmountInputProps {
onVisitBalancesPageClick?: () => void;
}
-interface TokenAmountInputState {}
+interface TokenAmountInputState {}
export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> {
public render() {
- const amount = this.props.amount ?
- ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) :
- undefined;
+ const amount = this.props.amount
+ ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals)
+ : undefined;
const hasLabel = !_.isUndefined(this.props.label);
return (
- <div className="flex overflow-hidden" style={{height: hasLabel ? 84 : 62}}>
+ <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}>
<BalanceBoundedInput
label={this.props.label}
amount={amount}
@@ -39,9 +39,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
/>
- <div style={{paddingTop: hasLabel ? 39 : 14}}>
- {this.props.token.symbol}
- </div>
+ <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
</div>
);
}
@@ -59,9 +57,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
Insufficient allowance.{' '}
<Link
to={`${WebsitePaths.Portal}/balances`}
- style={{cursor: 'pointer', color: colors.darkestGrey}}
+ style={{ cursor: 'pointer', color: colors.darkestGrey }}
>
- Set allowance
+ Set allowance
</Link>
</span>
);
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index ba348dade..5df19b28c 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,13 +1,13 @@
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {AssetPicker} from 'ts/components/generate_order/asset_picker';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {TokenIcon} from 'ts/components/ui/token_icon';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Blockchain } from 'ts/blockchain';
+import { AssetPicker } from 'ts/components/generate_order/asset_picker';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types';
+import { colors } from 'ts/utils/colors';
const TOKEN_ICON_DIMENSION = 80;
@@ -51,18 +51,15 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
</div>
<Paper
zDepth={1}
- style={{cursor: 'pointer'}}
+ style={{ cursor: 'pointer' }}
onMouseEnter={this._onToggleHover.bind(this, true)}
onMouseLeave={this._onToggleHover.bind(this, false)}
onClick={this._onAssetClicked.bind(this)}
>
- <div
- className="mx-auto pt2"
- style={{width: TOKEN_ICON_DIMENSION, ...iconStyles}}
- >
+ <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}>
<TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
</div>
- <div className="py1 center" style={{color: colors.grey}}>
+ <div className="py1 center" style={{ color: colors.grey }}>
{token.name}
</div>
</Paper>
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 21ec9ba93..bd462b42a 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -3,12 +3,12 @@ import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import * as React from 'react';
-import {CopyIcon} from 'ts/components/ui/copy_icon';
-import {SideToAssetToken, SignatureData, TokenByAddress, WebsitePaths} from 'ts/types';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { CopyIcon } from 'ts/components/ui/copy_icon';
+import { SideToAssetToken, SignatureData, TokenByAddress, WebsitePaths } from 'ts/types';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
interface OrderJSONProps {
exchangeContractIfExists: string;
@@ -39,69 +39,75 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
this._setShareLinkAsync();
}
public render() {
- const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists,
- this.props.sideToAssetToken, this.props.orderExpiryTimestamp,
- this.props.orderTakerAddress, this.props.orderMakerAddress,
- this.props.orderMakerFee, this.props.orderTakerFee,
- this.props.orderFeeRecipient, this.props.orderSignatureData,
- this.props.tokenByAddress, this.props.orderSalt);
+ const order = utils.generateOrder(
+ this.props.networkId,
+ this.props.exchangeContractIfExists,
+ this.props.sideToAssetToken,
+ this.props.orderExpiryTimestamp,
+ this.props.orderTakerAddress,
+ this.props.orderMakerAddress,
+ this.props.orderMakerFee,
+ this.props.orderTakerFee,
+ this.props.orderFeeRecipient,
+ this.props.orderSignatureData,
+ this.props.tokenByAddress,
+ this.props.orderSalt,
+ );
const orderJSON = JSON.stringify(order);
return (
<div>
<div className="pb2">
- You have successfully generated and cryptographically signed an order! The{' '}
- following JSON contains the order parameters and cryptographic signature that{' '}
- your counterparty will need to execute a trade with you.
+ You have successfully generated and cryptographically signed an order! The following JSON contains
+ the order parameters and cryptographic signature that your counterparty will need to execute a trade
+ with you.
</div>
<div className="pb2 flex">
- <div
- className="inline-block pl1"
- style={{top: 1}}
- >
+ <div className="inline-block pl1" style={{ top: 1 }}>
<CopyIcon data={orderJSON} callToAction="Copy" />
</div>
</div>
<Paper className="center overflow-hidden">
<TextField
id="orderJSON"
- style={{width: 710}}
+ style={{ width: 710 }}
value={JSON.stringify(order, null, '\t')}
multiLine={true}
rows={2}
rowsMax={8}
- underlineStyle={{display: 'none'}}
+ underlineStyle={{ display: 'none' }}
/>
</Paper>
<div className="pt3 pb2 center">
+ <div>Share your signed order!</div>
<div>
- Share your signed order!
- </div>
- <div>
- <div className="mx-auto overflow-hidden" style={{width: 152}}>
- <TextField
- id={`${this.state.shareLink}-bitly`}
- value={this.state.shareLink}
- />
+ <div className="mx-auto overflow-hidden" style={{ width: 152 }}>
+ <TextField id={`${this.state.shareLink}-bitly`} value={this.state.shareLink} />
</div>
</div>
- <div className="mx-auto pt1 flex" style={{width: 91}}>
+ <div className="mx-auto pt1 flex" style={{ width: 91 }}>
<div>
<i
- style={{cursor: 'pointer', fontSize: 29}}
+ style={{ cursor: 'pointer', fontSize: 29 }}
onClick={this._shareViaFacebook.bind(this)}
className="zmdi zmdi-facebook-box"
/>
</div>
- <div className="pl1" style={{position: 'relative', width: 28}}>
+ <div className="pl1" style={{ position: 'relative', width: 28 }}>
<i
- style={{cursor: 'pointer', fontSize: 32, position: 'absolute', top: -2, left: 8}}
+ style={{
+ cursor: 'pointer',
+ fontSize: 32,
+ position: 'absolute',
+ top: -2,
+ left: 8,
+ }}
onClick={this._shareViaEmailAsync.bind(this)}
className="zmdi zmdi-email"
/>
</div>
<div className="pl1">
<i
- style={{cursor: 'pointer', fontSize: 29}}
+ style={{ cursor: 'pointer', fontSize: 29 }}
onClick={this._shareViaTwitterAsync.bind(this)}
className="zmdi zmdi-twitter-box"
/>
@@ -116,14 +122,17 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
window.open(`https://twitter.com/intent/tweet?text=${tweetText}`, 'Share your order', 'width=500,height=400');
}
private async _shareViaFacebook() {
- (window as any).FB.ui({
- display: 'popup',
- href: this.state.shareLink,
- method: 'share',
- }, _.noop);
+ (window as any).FB.ui(
+ {
+ display: 'popup',
+ href: this.state.shareLink,
+ method: 'share',
+ },
+ _.noop,
+ );
}
private async _shareViaEmailAsync() {
- const encodedSubject = encodeURIComponent('Let\'s trade using the 0x protocol');
+ const encodedSubject = encodeURIComponent("Let's trade using the 0x protocol");
const encodedBody = encodeURIComponent(`I generated an order with the 0x protocol.
You can see and fill it here: ${this.state.shareLink}`);
const mailToLink = `mailto:mail@example.org?subject=${encodedSubject}&body=${encodedBody}`;
@@ -137,8 +146,9 @@ You can see and fill it here: ${this.state.shareLink}`);
}
private async _generateShareLinkAsync(): Promise<string> {
const longUrl = encodeURIComponent(this._getOrderUrl());
- const bitlyRequestUrl =
- `${constants.URL_BITLY_API}/v3/shorten?access_token=${configs.BITLY_ACCESS_TOKEN}&longUrl=${longUrl}`;
+ const bitlyRequestUrl = `${constants.URL_BITLY_API}/v3/shorten?access_token=${
+ configs.BITLY_ACCESS_TOKEN
+ }&longUrl=${longUrl}`;
const response = await fetch(bitlyRequestUrl);
const responseBody = await response.text();
const bodyObj = JSON.parse(responseBody);
@@ -148,14 +158,23 @@ You can see and fill it here: ${this.state.shareLink}`);
await errorReporter.reportAsync(new Error(`Bitly returned non-200: ${JSON.stringify(response)}`));
return '';
}
- return (bodyObj).data.url;
+ return bodyObj.data.url;
}
private _getOrderUrl() {
- const order = utils.generateOrder(this.props.networkId, this.props.exchangeContractIfExists,
- this.props.sideToAssetToken, this.props.orderExpiryTimestamp, this.props.orderTakerAddress,
- this.props.orderMakerAddress, this.props.orderMakerFee, this.props.orderTakerFee,
- this.props.orderFeeRecipient, this.props.orderSignatureData, this.props.tokenByAddress,
- this.props.orderSalt);
+ const order = utils.generateOrder(
+ this.props.networkId,
+ this.props.exchangeContractIfExists,
+ this.props.sideToAssetToken,
+ this.props.orderExpiryTimestamp,
+ this.props.orderTakerAddress,
+ this.props.orderMakerAddress,
+ this.props.orderMakerFee,
+ this.props.orderTakerFee,
+ this.props.orderFeeRecipient,
+ this.props.orderSignatureData,
+ this.props.tokenByAddress,
+ this.props.orderSalt,
+ );
const orderJSONString = JSON.stringify(order);
const orderUrl = `${configs.BASE_URL}${WebsitePaths.Portal}/fill?order=${orderJSONString}`;
return orderUrl;
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 574862dfc..cfd70b0b2 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -3,25 +3,25 @@ import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import {Route, Switch} from 'react-router-dom';
-import {Blockchain} from 'ts/blockchain';
-import {BlockchainErrDialog} from 'ts/components/dialogs/blockchain_err_dialog';
-import {PortalDisclaimerDialog} from 'ts/components/dialogs/portal_disclaimer_dialog';
-import {WrappedEthSectionNoticeDialog} from 'ts/components/dialogs/wrapped_eth_section_notice_dialog';
-import {EthWrappers} from 'ts/components/eth_wrappers';
-import {FillOrder} from 'ts/components/fill_order';
-import {Footer} from 'ts/components/footer';
-import {PortalMenu} from 'ts/components/portal_menu';
-import {TokenBalances} from 'ts/components/token_balances';
-import {TopBar} from 'ts/components/top_bar';
-import {TradeHistory} from 'ts/components/trade_history/trade_history';
-import {FlashMessage} from 'ts/components/ui/flash_message';
-import {Loading} from 'ts/components/ui/loading';
-import {GenerateOrderForm} from 'ts/containers/generate_order_form';
-import {localStorage} from 'ts/local_storage/local_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {orderSchema} from 'ts/schemas/order_schema';
-import {SchemaValidator} from 'ts/schemas/validator';
+import { Route, Switch } from 'react-router-dom';
+import { Blockchain } from 'ts/blockchain';
+import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
+import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_dialog';
+import { WrappedEthSectionNoticeDialog } from 'ts/components/dialogs/wrapped_eth_section_notice_dialog';
+import { EthWrappers } from 'ts/components/eth_wrappers';
+import { FillOrder } from 'ts/components/fill_order';
+import { Footer } from 'ts/components/footer';
+import { PortalMenu } from 'ts/components/portal_menu';
+import { TokenBalances } from 'ts/components/token_balances';
+import { TopBar } from 'ts/components/top_bar';
+import { TradeHistory } from 'ts/components/trade_history/trade_history';
+import { FlashMessage } from 'ts/components/ui/flash_message';
+import { Loading } from 'ts/components/ui/loading';
+import { GenerateOrderForm } from 'ts/containers/generate_order_form';
+import { localStorage } from 'ts/local_storage/local_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { orderSchema } from 'ts/schemas/order_schema';
+import { SchemaValidator } from 'ts/schemas/validator';
import {
BlockchainErrs,
HashData,
@@ -32,10 +32,10 @@ import {
TokenStateByAddress,
WebsitePaths,
} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const THROTTLE_TIMEOUT = 100;
@@ -57,7 +57,7 @@ export interface PortalAllProps {
shouldBlockchainErrDialogBeOpen: boolean;
userSuppliedOrderCache: Order;
location: Location;
- flashMessage?: string|React.ReactNode;
+ flashMessage?: string | React.ReactNode;
}
interface PortalAllState {
@@ -75,8 +75,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
private _throttledScreenWidthUpdate: () => void;
public static hasAlreadyDismissedWethNotice() {
const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE);
- const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) &&
- !_.isEmpty(didDismissWethNotice);
+ const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) && !_.isEmpty(didDismissWethNotice);
return hasAlreadyDismissedWethNotice;
}
constructor(props: PortalAllProps) {
@@ -88,8 +87,8 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
- const hasAcceptedDisclaimer = !_.isUndefined(didAcceptPortalDisclaimer) &&
- !_.isEmpty(didAcceptPortalDisclaimer);
+ const hasAcceptedDisclaimer =
+ !_.isUndefined(didAcceptPortalDisclaimer) && !_.isEmpty(didAcceptPortalDisclaimer);
this.state = {
prevNetworkId: this.props.networkId,
prevNodeVersion: this.props.nodeVersion,
@@ -126,8 +125,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
if (nextProps.userAddress !== this.state.prevUserAddress) {
// tslint:disable-next-line:no-floating-promises
this._blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress);
- if (!_.isEmpty(nextProps.userAddress) &&
- nextProps.blockchainIsLoaded) {
+ if (!_.isEmpty(nextProps.userAddress) && nextProps.blockchainIsLoaded) {
const tokens = _.values(nextProps.tokenByAddress);
// tslint:disable-next-line:no-floating-promises
this._updateBalanceAndAllowanceWithLoadingScreenAsync(tokens);
@@ -150,8 +148,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
}
public render() {
- const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher
- .updateShouldBlockchainErrDialogBeOpen.bind(this.props.dispatcher);
+ const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
+ this.props.dispatcher,
+ );
const portalStyle: React.CSSProperties = {
minHeight: '100vh',
display: 'flex',
@@ -165,44 +164,34 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
};
return (
<div style={portalStyle}>
- <DocumentTitle title="0x Portal DApp"/>
+ <DocumentTitle title="0x Portal DApp" />
<TopBar
userAddress={this.props.userAddress}
blockchainIsLoaded={this.props.blockchainIsLoaded}
location={this.props.location}
/>
- <div id="portal" className="mx-auto max-width-4" style={{width: '100%'}}>
+ <div id="portal" className="mx-auto max-width-4" style={{ width: '100%' }}>
<Paper className="mb3 mt2">
- {!configs.IS_MAINNET_ENABLED && this.props.networkId === constants.NETWORK_ID_MAINNET ?
+ {!configs.IS_MAINNET_ENABLED && this.props.networkId === constants.NETWORK_ID_MAINNET ? (
<div className="p3 center">
<div className="h2 py2">Mainnet unavailable</div>
<div className="mx-auto pb2 pt2">
- <img
- src="/images/zrx_token.png"
- style={{width: 150}}
- />
+ <img src="/images/zrx_token.png" style={{ width: 150 }} />
</div>
<div>
0x portal is currently unavailable on the Ethereum mainnet.
- <div>
- To try it out, switch to the Kovan test network
- (networkId: 42).
- </div>
- <div className="py2">
- Check back soon!
- </div>
+ <div>To try it out, switch to the Kovan test network (networkId: 42).</div>
+ <div className="py2">Check back soon!</div>
</div>
- </div> :
+ </div>
+ ) : (
<div className="mx-auto flex">
- <div
- className="col col-2 pr2 pt1 sm-hide xs-hide"
- style={portalMenuContainerStyle}
- >
- <PortalMenu menuItemStyle={{color: colors.white}} />
+ <div className="col col-2 pr2 pt1 sm-hide xs-hide" style={portalMenuContainerStyle}>
+ <PortalMenu menuItemStyle={{ color: colors.white }} />
</div>
<div className="col col-12 lg-col-10 md-col-10 sm-col sm-col-12">
- <div className="py2" style={{backgroundColor: colors.grey50}}>
- {this.props.blockchainIsLoaded ?
+ <div className="py2" style={{ backgroundColor: colors.grey50 }}>
+ {this.props.blockchainIsLoaded ? (
<Switch>
<Route
path={`${WebsitePaths.Portal}/weth`}
@@ -224,13 +213,14 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
path={`${WebsitePaths.Home}`}
render={this._renderGenerateOrderForm.bind(this)}
/>
- </Switch> :
+ </Switch>
+ ) : (
<Loading />
- }
+ )}
</div>
</div>
</div>
- }
+ )}
</Paper>
<BlockchainErrDialog
blockchain={this._blockchain}
@@ -248,10 +238,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
isOpen={this.state.isDisclaimerDialogOpen}
onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
/>
- <FlashMessage
- dispatcher={this.props.dispatcher}
- flashMessage={this.props.flashMessage}
- />
+ <FlashMessage dispatcher={this.props.dispatcher} flashMessage={this.props.flashMessage} />
</div>
<Footer />
</div>
@@ -296,9 +283,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
);
}
private _renderFillOrder(match: any, location: Location, history: History) {
- const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache) ?
- this.props.userSuppliedOrderCache :
- this._sharedOrderIfExists;
+ const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache)
+ ? this.props.userSuppliedOrderCache
+ : this._sharedOrderIfExists;
return (
<FillOrder
blockchain={this._blockchain}
diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/portal_menu.tsx
index a6125d842..a2f9340c8 100644
--- a/packages/website/ts/components/portal_menu.tsx
+++ b/packages/website/ts/components/portal_menu.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {MenuItem} from 'ts/components/ui/menu_item';
-import {WebsitePaths} from 'ts/types';
+import { MenuItem } from 'ts/components/ui/menu_item';
+import { WebsitePaths } from 'ts/types';
export interface PortalMenuProps {
menuItemStyle: React.CSSProperties;
@@ -62,13 +62,11 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
}
private _renderMenuItemWithIcon(title: string, iconName: string) {
return (
- <div className="flex" style={{fontWeight: 100}}>
+ <div className="flex" style={{ fontWeight: 100 }}>
<div className="pr1 pl2">
- <i style={{fontSize: 20}} className={`zmdi ${iconName}`} />
- </div>
- <div className="pl1">
- {title}
+ <i style={{ fontSize: 20 }} className={`zmdi ${iconName}`} />
</div>
+ <div className="pl1">{title}</div>
</div>
);
}
diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx
index 30395c08e..356286f93 100644
--- a/packages/website/ts/components/send_button.tsx
+++ b/packages/website/ts/components/send_button.tsx
@@ -2,12 +2,12 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {SendDialog} from 'ts/components/dialogs/send_dialog';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {BlockchainCallErrs, Token, TokenState} from 'ts/types';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { SendDialog } from 'ts/components/dialogs/send_dialog';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BlockchainCallErrs, Token, TokenState } from 'ts/types';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
interface SendButtonProps {
token: Token;
@@ -31,11 +31,11 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState
};
}
public render() {
- const labelStyle = this.state.isSending ? {fontSize: 10} : {};
+ const labelStyle = this.state.isSending ? { fontSize: 10 } : {};
return (
<div>
<RaisedButton
- style={{width: '100%'}}
+ style={{ width: '100%' }}
labelStyle={labelStyle}
disabled={this.state.isSending}
label={this.state.isSending ? 'Sending...' : 'Send'}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 208cd54e1..913eb8a78 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -1,4 +1,4 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import DharmaLoanFrame from 'dharma-loan-frame';
import * as _ from 'lodash';
@@ -9,26 +9,19 @@ import FloatingActionButton from 'material-ui/FloatingActionButton';
import RaisedButton from 'material-ui/RaisedButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentRemove from 'material-ui/svg-icons/content/remove';
-import {
- Table,
- TableBody,
- TableHeader,
- TableHeaderColumn,
- TableRow,
- TableRowColumn,
-} from 'material-ui/Table';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import firstBy = require('thenby');
-import {Blockchain} from 'ts/blockchain';
-import {AssetPicker} from 'ts/components/generate_order/asset_picker';
-import {AllowanceToggle} from 'ts/components/inputs/allowance_toggle';
-import {SendButton} from 'ts/components/send_button';
-import {HelpTooltip} from 'ts/components/ui/help_tooltip';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {TokenIcon} from 'ts/components/ui/token_icon';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { Blockchain } from 'ts/blockchain';
+import { AssetPicker } from 'ts/components/generate_order/asset_picker';
+import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { SendButton } from 'ts/components/send_button';
+import { HelpTooltip } from 'ts/components/ui/help_tooltip';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
import {
BalanceErrs,
BlockchainCallErrs,
@@ -41,11 +34,11 @@ import {
TokenStateByAddress,
TokenVisibility,
} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
const ETHER_ICON_PATH = '/images/ether.png';
const ETHER_TOKEN_SYMBOL = 'WETH';
@@ -153,16 +146,17 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
display: isTestNetwork ? 'none' : 'table-cell',
};
const allTokenRowHeight = _.size(this.props.tokenByAddress) * TOKEN_TABLE_ROW_HEIGHT;
- const tokenTableHeight = allTokenRowHeight < MAX_TOKEN_TABLE_HEIGHT ?
- allTokenRowHeight :
- MAX_TOKEN_TABLE_HEIGHT;
+ const tokenTableHeight =
+ allTokenRowHeight < MAX_TOKEN_TABLE_HEIGHT ? allTokenRowHeight : MAX_TOKEN_TABLE_HEIGHT;
const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
- const dharmaLoanExplanation = 'If you need access to larger amounts of ether,<br> \
+ const dharmaLoanExplanation =
+ 'If you need access to larger amounts of ether,<br> \
you can request a loan from the Dharma Loan<br> \
network. Your loan should be funded in 5<br> \
minutes or less.';
- const allowanceExplanation = '0x smart contracts require access to your<br> \
+ const allowanceExplanation =
+ '0x smart contracts require access to your<br> \
token balances in order to execute trades.<br> \
Toggling sets an allowance for the<br> \
smart contract so you can start trading that token.';
@@ -171,70 +165,47 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<h3>{isTestNetwork ? 'Test ether' : 'Ether'}</h3>
<Divider />
<div className="pt2 pb2">
- {isTestNetwork ?
- 'In order to try out the 0x Portal Dapp, request some test ether to pay for \
- gas costs. It might take a bit of time for the test ether to show up.' :
- 'Ether must be converted to Ether Tokens in order to be tradable via 0x. \
- You can convert between Ether and Ether Tokens by clicking the "convert" button below.'
- }
+ {isTestNetwork
+ ? 'In order to try out the 0x Portal Dapp, request some test ether to pay for \
+ gas costs. It might take a bit of time for the test ether to show up.'
+ : 'Ether must be converted to Ether Tokens in order to be tradable via 0x. \
+ You can convert between Ether and Ether Tokens by clicking the "convert" button below.'}
</div>
- <Table
- selectable={false}
- style={styles.bgColor}
- >
+ <Table selectable={false} style={styles.bgColor}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
<TableHeaderColumn>Currency</TableHeaderColumn>
<TableHeaderColumn>Balance</TableHeaderColumn>
- <TableRowColumn
- className="sm-hide xs-hide"
- style={stubColumnStyle}
- />
- {
- isTestNetwork &&
- <TableHeaderColumn
- style={{paddingLeft: 3}}
- >
+ <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} />
+ {isTestNetwork && (
+ <TableHeaderColumn style={{ paddingLeft: 3 }}>
{isSmallScreen ? 'Faucet' : 'Request from faucet'}
</TableHeaderColumn>
- }
- {
- isTestNetwork &&
- <TableHeaderColumn
- style={dharmaButtonColumnStyle}
- >
+ )}
+ {isTestNetwork && (
+ <TableHeaderColumn style={dharmaButtonColumnStyle}>
{isSmallScreen ? 'Loan' : 'Request Dharma loan'}
- <HelpTooltip
- style={{paddingLeft: 4}}
- explanation={dharmaLoanExplanation}
- />
+ <HelpTooltip style={{ paddingLeft: 4 }} explanation={dharmaLoanExplanation} />
</TableHeaderColumn>
- }
+ )}
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
<TableRow key="ETH">
<TableRowColumn className="py1">
- <img
- style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
- src={ETHER_ICON_PATH}
- />
+ <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />
</TableRowColumn>
<TableRowColumn>
{this.props.userEtherBalance.toFixed(PRECISION)} ETH
- {this.state.isBalanceSpinnerVisible &&
+ {this.state.isBalanceSpinnerVisible && (
<span className="pl1">
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
</span>
- }
+ )}
</TableRowColumn>
- <TableRowColumn
- className="sm-hide xs-hide"
- style={stubColumnStyle}
- />
- {
- isTestNetwork &&
- <TableRowColumn style={{paddingLeft: 3}}>
+ <TableRowColumn className="sm-hide xs-hide" style={stubColumnStyle} />
+ {isTestNetwork && (
+ <TableRowColumn style={{ paddingLeft: 3 }}>
<LifeCycleRaisedButton
labelReady="Request"
labelLoading="Sending..."
@@ -242,89 +213,58 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
onClickAsyncFn={this._faucetRequestAsync.bind(this, true)}
/>
</TableRowColumn>
- }
- {
- isTestNetwork &&
+ )}
+ {isTestNetwork && (
<TableRowColumn style={dharmaButtonColumnStyle}>
<RaisedButton
label="Request"
- style={{width: '100%'}}
+ style={{ width: '100%' }}
onTouchTap={this._onDharmaDialogToggle.bind(this)}
/>
</TableRowColumn>
- }
+ )}
</TableRow>
</TableBody>
</Table>
- <div className="clearfix" style={{paddingBottom: 1}}>
+ <div className="clearfix" style={{ paddingBottom: 1 }}>
<div className="col col-10">
- <h3 className="pt2">
- {isTestNetwork ? 'Test tokens' : 'Tokens'}
- </h3>
+ <h3 className="pt2">{isTestNetwork ? 'Test tokens' : 'Tokens'}</h3>
</div>
<div className="col col-1 pt3 align-right">
- <FloatingActionButton
- mini={true}
- zDepth={0}
- onClick={this._onAddTokenClicked.bind(this)}
- >
+ <FloatingActionButton mini={true} zDepth={0} onClick={this._onAddTokenClicked.bind(this)}>
<ContentAdd />
</FloatingActionButton>
</div>
<div className="col col-1 pt3 align-right">
- <FloatingActionButton
- mini={true}
- zDepth={0}
- onClick={this._onRemoveTokenClicked.bind(this)}
- >
+ <FloatingActionButton mini={true} zDepth={0} onClick={this._onRemoveTokenClicked.bind(this)}>
<ContentRemove />
</FloatingActionButton>
</div>
</div>
<Divider />
<div className="pt2 pb2">
- {isTestNetwork ?
- 'Mint some test tokens you\'d like to use to generate or fill an order using 0x.' :
- 'Set trading permissions for a token you\'d like to start trading.'
- }
+ {isTestNetwork
+ ? "Mint some test tokens you'd like to use to generate or fill an order using 0x."
+ : "Set trading permissions for a token you'd like to start trading."}
</div>
- <Table
- selectable={false}
- bodyStyle={{height: tokenTableHeight}}
- style={styles.bgColor}
- >
+ <Table selectable={false} bodyStyle={{ height: tokenTableHeight }} style={styles.bgColor}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
- <TableHeaderColumn
- colSpan={tokenColSpan}
- >
- Token
- </TableHeaderColumn>
- <TableHeaderColumn style={{paddingLeft: 3}}>Balance</TableHeaderColumn>
+ <TableHeaderColumn colSpan={tokenColSpan}>Token</TableHeaderColumn>
+ <TableHeaderColumn style={{ paddingLeft: 3 }}>Balance</TableHeaderColumn>
<TableHeaderColumn>
<div className="inline-block">Allowance</div>
- <HelpTooltip
- style={{paddingLeft: 4}}
- explanation={allowanceExplanation}
- />
+ <HelpTooltip style={{ paddingLeft: 4 }} explanation={allowanceExplanation} />
</TableHeaderColumn>
- <TableHeaderColumn>
- Action
- </TableHeaderColumn>
- {this.props.screenWidth !== ScreenWidths.Sm &&
- <TableHeaderColumn>
- Send
- </TableHeaderColumn>
- }
+ <TableHeaderColumn>Action</TableHeaderColumn>
+ {this.props.screenWidth !== ScreenWidths.Sm && <TableHeaderColumn>Send</TableHeaderColumn>}
</TableRow>
</TableHeader>
- <TableBody displayRowCheckbox={false}>
- {this._renderTokenTableRows()}
- </TableBody>
+ <TableBody displayRowCheckbox={false}>{this._renderTokenTableRows()}</TableBody>
</Table>
<Dialog
title="Oh oh"
- titleStyle={{fontWeight: 100}}
+ titleStyle={{ fontWeight: 100 }}
actions={errorDialogActions}
open={!_.isUndefined(this.state.errorType)}
onRequestClose={this._onErrorDialogToggle.bind(this, false)}
@@ -333,9 +273,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
</Dialog>
<Dialog
title="Request Dharma Loan"
- titleStyle={{fontWeight: 100, backgroundColor: colors.white}}
- bodyStyle={{backgroundColor: colors.dharmaDarkGrey}}
- actionsContainerStyle={{backgroundColor: colors.white}}
+ titleStyle={{ fontWeight: 100, backgroundColor: colors.white }}
+ bodyStyle={{ backgroundColor: colors.dharmaDarkGrey }}
+ actionsContainerStyle={{ backgroundColor: colors.white }}
autoScrollBodyContent={true}
actions={dharmaDialogActions}
open={this.state.isDharmaDialogVisible}
@@ -366,9 +306,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
const trackedTokensStartingWithEtherToken = trackedTokens.sort(
- firstBy((t: Token) => (t.symbol !== ETHER_TOKEN_SYMBOL))
- .thenBy((t: Token) => (t.symbol !== ZRX_TOKEN_SYMBOL))
- .thenBy('address'),
+ firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL)
+ .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL)
+ .thenBy('address'),
);
const tableRows = _.map(
trackedTokensStartingWithEtherToken,
@@ -378,29 +318,33 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
}
private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
const tokenState = this.props.tokenStateByAddress[token.address];
- const tokenLink = utils.getEtherScanLinkIfExists(token.address, this.props.networkId,
- EtherscanLinkSuffixes.Address);
- const isMintable = _.includes(configs.SYMBOLS_OF_MINTABLE_TOKENS, token.symbol) &&
+ const tokenLink = utils.getEtherScanLinkIfExists(
+ token.address,
+ this.props.networkId,
+ EtherscanLinkSuffixes.Address,
+ );
+ const isMintable =
+ _.includes(configs.SYMBOLS_OF_MINTABLE_TOKENS, token.symbol) &&
this.props.networkId !== constants.NETWORK_ID_MAINNET;
return (
- <TableRow key={token.address} style={{height: TOKEN_TABLE_ROW_HEIGHT}}>
- <TableRowColumn
- colSpan={tokenColSpan}
- >
- {_.isUndefined(tokenLink) ?
- this._renderTokenName(token) :
- <a href={tokenLink} target="_blank" style={{textDecoration: 'none'}}>
+ <TableRow key={token.address} style={{ height: TOKEN_TABLE_ROW_HEIGHT }}>
+ <TableRowColumn colSpan={tokenColSpan}>
+ {_.isUndefined(tokenLink) ? (
+ this._renderTokenName(token)
+ ) : (
+ <a href={tokenLink} target="_blank" style={{ textDecoration: 'none' }}>
{this._renderTokenName(token)}
</a>
- }
+ )}
</TableRowColumn>
- <TableRowColumn style={{paddingRight: 3, paddingLeft: 3}}>
+ <TableRowColumn style={{ paddingRight: 3, paddingLeft: 3 }}>
{this._renderAmount(tokenState.balance, token.decimals)} {token.symbol}
- {this.state.isZRXSpinnerVisible && token.symbol === ZRX_TOKEN_SYMBOL &&
- <span className="pl1">
- <i className="zmdi zmdi-spinner zmdi-hc-spin" />
- </span>
- }
+ {this.state.isZRXSpinnerVisible &&
+ token.symbol === ZRX_TOKEN_SYMBOL && (
+ <span className="pl1">
+ <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+ </span>
+ )}
</TableRowColumn>
<TableRowColumn>
<AllowanceToggle
@@ -412,29 +356,31 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
userAddress={this.props.userAddress}
/>
</TableRowColumn>
- <TableRowColumn
- style={{paddingLeft: actionPaddingX, paddingRight: actionPaddingX}}
- >
- {isMintable &&
+ <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}>
+ {isMintable && (
<LifeCycleRaisedButton
labelReady="Mint"
- labelLoading={<span style={{fontSize: 12}}>Minting...</span>}
+ labelLoading={<span style={{ fontSize: 12 }}>Minting...</span>}
labelComplete="Minted!"
onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)}
/>
- }
- {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.NETWORK_ID_TESTNET &&
- <LifeCycleRaisedButton
- labelReady="Request"
- labelLoading="Sending..."
- labelComplete="Sent!"
- onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
- />
- }
+ )}
+ {token.symbol === ZRX_TOKEN_SYMBOL &&
+ this.props.networkId === constants.NETWORK_ID_TESTNET && (
+ <LifeCycleRaisedButton
+ labelReady="Request"
+ labelLoading="Sending..."
+ labelComplete="Sent!"
+ onClickAsyncFn={this._faucetRequestAsync.bind(this, false)}
+ />
+ )}
</TableRowColumn>
- {this.props.screenWidth !== ScreenWidths.Sm &&
+ {this.props.screenWidth !== ScreenWidths.Sm && (
<TableRowColumn
- style={{paddingLeft: actionPaddingX, paddingRight: actionPaddingX}}
+ style={{
+ paddingLeft: actionPaddingX,
+ paddingRight: actionPaddingX,
+ }}
>
<SendButton
blockchain={this.props.blockchain}
@@ -444,7 +390,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
onError={this._onSendFailed.bind(this)}
/>
</TableRowColumn>
- }
+ )}
</TableRow>
);
}
@@ -491,11 +437,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
return (
<div className="flex">
<TokenIcon token={token} diameter={ICON_DIMENSION} />
- <div
- data-tip={true}
- data-for={tooltipId}
- className="mt2 ml2 sm-hide xs-hide"
- >
+ <div data-tip={true} data-for={tooltipId} className="mt2 ml2 sm-hide xs-hide">
{token.name}
</div>
<ReactTooltip id={tooltipId}>{token.address}</ReactTooltip>
@@ -507,39 +449,31 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
case BalanceErrs.incorrectNetworkForFaucet:
return (
<div>
- Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME}
- {' '}testnet (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are
- {' '}connected to the {constants.TESTNET_NAME} testnet and try requesting ether again.
+ Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME} testnet
+ (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are connected to the{' '}
+ {constants.TESTNET_NAME} testnet and try requesting ether again.
</div>
);
case BalanceErrs.faucetRequestFailed:
return (
<div>
- An unexpected error occurred while trying to request test Ether from our faucet.
- {' '}Please refresh the page and try again.
+ An unexpected error occurred while trying to request test Ether from our faucet. Please refresh
+ the page and try again.
</div>
);
case BalanceErrs.faucetQueueIsFull:
- return (
- <div>
- Our test Ether faucet queue is full. Please try requesting test Ether again later.
- </div>
- );
+ return <div>Our test Ether faucet queue is full. Please try requesting test Ether again later.</div>;
case BalanceErrs.mintingFailed:
- return (
- <div>
- Minting your test tokens failed unexpectedly. Please refresh the page and try again.
- </div>
- );
+ return <div>Minting your test tokens failed unexpectedly. Please refresh the page and try again.</div>;
case BalanceErrs.allowanceSettingFailed:
return (
<div>
- An unexpected error occurred while trying to set your test token allowance.
- {' '}Please refresh the page and try again.
+ An unexpected error occurred while trying to set your test token allowance. Please refresh the
+ page and try again.
</div>
);
@@ -553,9 +487,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
private _renderDharmaLoanFrame() {
if (utils.isUserOnMobile()) {
return (
- <h4 style={{textAlign: 'center'}}>
- We apologize -- Dharma loan requests are not available on
- mobile yet. Please try again through your desktop browser.
+ <h4 style={{ textAlign: 'center' }}>
+ We apologize -- Dharma loan requests are not available on mobile yet. Please try again through your
+ desktop browser.
</h4>
);
} else {
@@ -619,9 +553,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
const responseBody = await response.text();
if (response.status !== constants.SUCCESS_STATUS) {
utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`);
- const errorType = response.status === constants.UNAVAILABLE_STATUS ?
- BalanceErrs.faucetQueueIsFull :
- BalanceErrs.faucetRequestFailed;
+ const errorType =
+ response.status === constants.UNAVAILABLE_STATUS
+ ? BalanceErrs.faucetQueueIsFull
+ : BalanceErrs.faucetRequestFailed;
this.setState({
errorType,
});
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index eec48b21a..cd835930b 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -2,17 +2,17 @@ import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
import ReactTooltip = require('react-tooltip');
-import {PortalMenu} from 'ts/components/portal_menu';
-import {TopBarMenuItem} from 'ts/components/top_bar_menu_item';
-import {DropDownMenuItem} from 'ts/components/ui/drop_down_menu_item';
-import {Identicon} from 'ts/components/ui/identicon';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
-import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
+import { PortalMenu } from 'ts/components/portal_menu';
+import { TopBarMenuItem } from 'ts/components/top_bar_menu_item';
+import { DropDownMenuItem } from 'ts/components/ui/drop_down_menu_item';
+import { Identicon } from 'ts/components/ui/identicon';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
+import { DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
interface TopBarProps {
userAddress?: string;
@@ -81,26 +81,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const isFullWidthPage = this.props.shouldFullWidth;
const parentClassNames = `flex mx-auto ${isFullWidthPage ? 'pl2' : 'max-width-4'}`;
const developerSectionMenuItems = [
- <Link
- key="subMenuItem-zeroEx"
- to={WebsitePaths.ZeroExJs}
- className="text-decoration-none"
- >
- <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="0x.js" />
+ <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
</Link>,
- <Link
- key="subMenuItem-smartContracts"
- to={WebsitePaths.SmartContracts}
- className="text-decoration-none"
- >
- <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Smart Contracts" />
+ <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Smart Contracts" />
</Link>,
- <Link
- key="subMenuItem-0xconnect"
- to={WebsitePaths.Connect}
- className="text-decoration-none"
- >
- <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="0x Connect" />
+ <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x Connect" />
</Link>,
<a
key="subMenuItem-standard-relayer-api"
@@ -108,7 +96,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
className="text-decoration-none"
href={constants.URL_STANDARD_RELAYER_API_GITHUB}
>
- <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Standard Relayer API" />
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Standard Relayer API" />
</a>,
<a
key="subMenuItem-github"
@@ -116,7 +104,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
className="text-decoration-none"
href={constants.URL_GITHUB_ORG}
>
- <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="GitHub" />
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
</a>,
<a
key="subMenuItem-whitePaper"
@@ -124,7 +112,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
className="text-decoration-none"
href={`${WebsitePaths.Whitepaper}`}
>
- <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Whitepaper" />
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Whitepaper" />
</a>,
];
const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
@@ -138,19 +126,17 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
paddingTop: 16,
};
return (
- <div style={{...styles.topBar, ...bottomBorderStyle, ...this.props.style}} className="pb1">
+ <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style }} className="pb1">
<div className={parentClassNames}>
- <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{paddingTop: 15}}>
+ <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
<Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
<img src={logoUrl} height="30" />
</Link>
</div>
<div className={`col col-${isFullWidthPage ? '8' : '9'} lg-hide md-hide`} />
<div className={`col col-${isFullWidthPage ? '6' : '5'} sm-hide xs-hide`} />
- {!this._isViewingPortal() &&
- <div
- className={menuClasses}
- >
+ {!this._isViewingPortal() && (
+ <div className={menuClasses}>
<div className="flex justify-between">
<DropDownMenuItem
title="Developers"
@@ -180,24 +166,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
/>
</div>
</div>
- }
- {this.props.blockchainIsLoaded && !_.isEmpty(this.props.userAddress) &&
- <div className="col col-5">
- {this._renderUser()}
- </div>
- }
- {!this._isViewingPortal() &&
- <div
- className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}
- >
+ )}
+ {this.props.blockchainIsLoaded &&
+ !_.isEmpty(this.props.userAddress) && <div className="col col-5">{this._renderUser()}</div>}
+ {!this._isViewingPortal() && (
+ <div className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}>
<div style={menuIconStyle}>
- <i
- className="zmdi zmdi-menu"
- onClick={this._onMenuButtonClick.bind(this)}
- />
+ <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
</div>
</div>
- }
+ )}
</div>
{this._renderDrawer()}
</div>
@@ -214,55 +192,46 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
{this._renderPortalMenu()}
{this._renderDocsMenu()}
{this._renderWiki()}
- <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div>
+ <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
+ Website
+ </div>
<Link to={WebsitePaths.Home} className="text-decoration-none">
<MenuItem className="py2">Home</MenuItem>
</Link>
<Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
<MenuItem className="py2">Wiki</MenuItem>
</Link>
- {!this._isViewing0xjsDocs() &&
+ {!this._isViewing0xjsDocs() && (
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
<MenuItem className="py2">0x.js Docs</MenuItem>
</Link>
- }
- {!this._isViewingConnectDocs() &&
+ )}
+ {!this._isViewingConnectDocs() && (
<Link to={WebsitePaths.Connect} className="text-decoration-none">
<MenuItem className="py2">0x Connect Docs</MenuItem>
</Link>
- }
- {!this._isViewingSmartContractsDocs() &&
+ )}
+ {!this._isViewingSmartContractsDocs() && (
<Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
<MenuItem className="py2">Smart Contract Docs</MenuItem>
</Link>
- }
- {!this._isViewingPortal() &&
+ )}
+ {!this._isViewingPortal() && (
<Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
<MenuItem className="py2">Portal DApp</MenuItem>
</Link>
- }
- <a
- className="text-decoration-none"
- target="_blank"
- href={`${WebsitePaths.Whitepaper}`}
- >
+ )}
+ <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
<MenuItem className="py2">Whitepaper</MenuItem>
</a>
<Link to={`${WebsitePaths.About}`} className="text-decoration-none">
<MenuItem className="py2">About</MenuItem>
</Link>
- <a
- className="text-decoration-none"
- target="_blank"
- href={constants.URL_BLOG}
- >
+ <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
<MenuItem className="py2">Blog</MenuItem>
</a>
<Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
- <MenuItem
- className="py2"
- onTouchTap={this._onMenuButtonClick.bind(this)}
- >
+ <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
FAQ
</MenuItem>
</Link>
@@ -270,15 +239,19 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
);
}
private _renderDocsMenu() {
- if (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()
- || _.isUndefined(this.props.menu)) {
+ if (
+ (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) ||
+ _.isUndefined(this.props.menu)
+ ) {
return;
}
const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
return (
<div className="lg-hide md-hide">
- <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>{sectionTitle}</div>
+ <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+ {sectionTitle}
+ </div>
<NestedSidebarMenu
topLevelMenu={this.props.menu}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -298,7 +271,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return (
<div className="lg-hide md-hide">
- <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>0x Protocol Wiki</div>
+ <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+ 0x Protocol Wiki
+ </div>
<NestedSidebarMenu
topLevelMenu={this.props.menuSubsectionsBySection}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -315,11 +290,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return (
<div className="lg-hide md-hide">
- <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>Portal DApp</div>
- <PortalMenu
- menuItemStyle={{color: 'black'}}
- onClick={this._onMenuButtonClick.bind(this)}
- />
+ <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+ Portal DApp
+ </div>
+ <PortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} />
</div>
);
}
@@ -327,15 +301,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const userAddress = this.props.userAddress;
const identiconDiameter = 26;
return (
- <div
- className="flex right lg-pr0 md-pr2 sm-pr2"
- style={{paddingTop: 16}}
- >
- <div
- style={styles.address}
- data-tip={true}
- data-for="userAddressTooltip"
- >
+ <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}>
+ <div style={styles.address} data-tip={true} data-for="userAddressTooltip">
{!_.isEmpty(userAddress) ? userAddress : ''}
</div>
<ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip>
@@ -369,7 +336,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
}
private _shouldDisplayBottomBar() {
- return this._isViewingWiki() || this._isViewing0xjsDocs() || this._isViewingFAQ() ||
- this._isViewingSmartContractsDocs() || this._isViewingConnectDocs();
+ return (
+ this._isViewingWiki() ||
+ this._isViewing0xjsDocs() ||
+ this._isViewingFAQ() ||
+ this._isViewingSmartContractsDocs() ||
+ this._isViewingConnectDocs()
+ );
}
}
diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx
index 64cb48b2e..96ee86142 100644
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {colors} from 'ts/utils/colors';
+import { Link } from 'react-router-dom';
+import { colors } from 'ts/utils/colors';
const DEFAULT_STYLE = {
color: colors.darkestGrey,
@@ -26,24 +26,24 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
isNightVersion: false,
};
public render() {
- const primaryStyles = this.props.isPrimary ? {
- borderRadius: 4,
- border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
- marginTop: 15,
- paddingLeft: 9,
- paddingRight: 9,
- width: 77,
- } : {};
+ const primaryStyles = this.props.isPrimary
+ ? {
+ borderRadius: 4,
+ border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
+ marginTop: 15,
+ paddingLeft: 9,
+ paddingRight: 9,
+ width: 77,
+ }
+ : {};
const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
- const linkColor = _.isUndefined(menuItemColor) ?
- colors.darkestGrey :
- menuItemColor;
+ const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor;
return (
<div
className={`center ${this.props.className}`}
- style={{...this.props.style, ...primaryStyles, color: menuItemColor}}
+ style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
>
- <Link to={this.props.path} className="text-decoration-none" style={{color: linkColor}}>
+ <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
{this.props.title}
</Link>
</div>
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index ff840fe8c..76971aefa 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Party} from 'ts/components/ui/party';
-import {Token, TokenByAddress} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { Party } from 'ts/components/ui/party';
+import { Token, TokenByAddress } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
interface TrackTokenConfirmationProps {
tokens: Token[];
@@ -14,25 +14,23 @@ interface TrackTokenConfirmationProps {
interface TrackTokenConfirmationState {}
-export class TrackTokenConfirmation extends
- React.Component<TrackTokenConfirmationProps, TrackTokenConfirmationState> {
+export class TrackTokenConfirmation extends React.Component<TrackTokenConfirmationProps, TrackTokenConfirmationState> {
public render() {
const isMultipleTokens = this.props.tokens.length > 1;
const allTokens = _.values(this.props.tokenByAddress);
return (
- <div style={{color: colors.grey700}}>
- {this.props.isAddingTokenToTracked ?
+ <div style={{ color: colors.grey700 }}>
+ {this.props.isAddingTokenToTracked ? (
<div className="py4 my4 center">
<span className="pr1">
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
</span>
<span>Adding token{isMultipleTokens && 's'}...</span>
- </div> :
+ </div>
+ ) : (
<div>
- <div>
- You do not currently track the following token{isMultipleTokens && 's'}:
- </div>
- <div className="py2 clearfix mx-auto center" style={{width: 355}}>
+ <div>You do not currently track the following token{isMultipleTokens && 's'}:</div>
+ <div className="py2 clearfix mx-auto center" style={{ width: 355 }}>
{_.map(this.props.tokens, (token: Token) => (
<div
key={`token-profile-${token.name}`}
@@ -50,13 +48,13 @@ export class TrackTokenConfirmation extends
))}
</div>
<div>
- Tracking a token adds it to the balances section of 0x Portal and
- allows you to generate/fill orders involving the token
+ Tracking a token adds it to the balances section of 0x Portal and allows you to
+ generate/fill orders involving the token
{isMultipleTokens && 's'}. Would you like to start tracking{' '}
- {isMultipleTokens ? 'these' : 'this'}{' '}token?
+ {isMultipleTokens ? 'these' : 'this'} token?
</div>
</div>
- }
+ )}
</div>
);
}
diff --git a/packages/website/ts/components/trade_history/trade_history.tsx b/packages/website/ts/components/trade_history/trade_history.tsx
index aa41b9392..635358627 100644
--- a/packages/website/ts/components/trade_history/trade_history.tsx
+++ b/packages/website/ts/components/trade_history/trade_history.tsx
@@ -2,10 +2,10 @@ import * as _ from 'lodash';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';
import * as React from 'react';
-import {TradeHistoryItem} from 'ts/components/trade_history/trade_history_item';
-import {tradeHistoryStorage} from 'ts/local_storage/trade_history_storage';
-import {Fill, TokenByAddress} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { TradeHistoryItem } from 'ts/components/trade_history/trade_history_item';
+import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
+import { Fill, TokenByAddress } from 'ts/types';
+import { utils } from 'ts/utils/utils';
const FILL_POLLING_INTERVAL = 1000;
@@ -42,7 +42,7 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
<div className="lg-px4 md-px4 sm-px2">
<h3>Trade history</h3>
<Divider />
- <div className="pt2" style={{height: 608, overflow: 'scroll'}}>
+ <div className="pt2" style={{ height: 608, overflow: 'scroll' }}>
{this._renderTrades()}
</div>
</div>
@@ -68,7 +68,7 @@ export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistor
}
private _renderEmptyNotice() {
return (
- <Paper className="mt1 p2 mx-auto center" style={{width: '80%'}}>
+ <Paper className="mt1 p2 mx-auto center" style={{ width: '80%' }}>
No filled orders yet.
</Paper>
);
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 3586a96a5..03f9862f2 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -1,14 +1,14 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import * as moment from 'moment';
import * as React from 'react';
import * as ReactTooltip from 'react-tooltip';
-import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
-import {Party} from 'ts/components/ui/party';
-import {EtherscanLinkSuffixes, Fill, Token, TokenByAddress} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
+import { Party } from 'ts/components/ui/party';
+import { EtherscanLinkSuffixes, Fill, Token, TokenByAddress } from 'ts/types';
+import { colors } from 'ts/utils/colors';
const PRECISION = 5;
const IDENTICON_DIAMETER = 40;
@@ -44,30 +44,26 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
fontWeight: 100,
display: 'inline-block',
};
- const amountColClassNames = 'col col-12 lg-col-4 md-col-4 lg-py2 md-py2 sm-py1 lg-pr2 md-pr2 \
+ const amountColClassNames =
+ 'col col-12 lg-col-4 md-col-4 lg-py2 md-py2 sm-py1 lg-pr2 md-pr2 \
lg-right-align md-right-align sm-center';
return (
- <Paper
- className="py1"
- style={{margin: '3px 3px 15px 3px'}}
- >
+ <Paper className="py1" style={{ margin: '3px 3px 15px 3px' }}>
<div className="clearfix">
- <div className="col col-12 lg-col-1 md-col-1 pt2 lg-pl3 md-pl3">
- {this._renderDate()}
- </div>
+ <div className="col col-12 lg-col-1 md-col-1 pt2 lg-pl3 md-pl3">{this._renderDate()}</div>
<div
className="col col-12 lg-col-6 md-col-6 lg-pl3 md-pl3"
- style={{fontSize: 12, fontWeight: 100}}
+ style={{ fontSize: 12, fontWeight: 100 }}
>
- <div className="flex sm-mx-auto xs-mx-auto" style={{paddingTop: 4, width: 224}}>
+ <div className="flex sm-mx-auto xs-mx-auto" style={{ paddingTop: 4, width: 224 }}>
<Party
label="Maker"
address={fill.maker}
identiconDiameter={IDENTICON_DIAMETER}
networkId={this.props.networkId}
/>
- <i style={{fontSize: 30}} className="zmdi zmdi-swap py3" />
+ <i style={{ fontSize: 30 }} className="zmdi zmdi-swap py3" />
<Party
label="Taker"
address={fill.taker}
@@ -76,14 +72,11 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
/>
</div>
</div>
- <div
- className={amountColClassNames}
- style={amountColStyle}
- >
+ <div className={amountColClassNames} style={amountColStyle}>
{this._renderAmounts(makerToken, takerToken)}
</div>
<div className="col col-12 lg-col-1 md-col-1 lg-pr3 md-pr3 lg-py3 md-py3 sm-pb1 sm-center">
- <div className="pt1 lg-right md-right sm-mx-auto" style={{width: 13}}>
+ <div className="pt1 lg-right md-right sm-mx-auto" style={{ width: 13 }}>
<EtherScanIcon
addressOrTxHash={fill.transactionHash}
networkId={this.props.networkId}
@@ -124,25 +117,20 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
givenToken = takerToken;
} else {
// This condition should never be hit
- throw new Error('Found Fill that wasn\'t performed by this user');
+ throw new Error("Found Fill that wasn't performed by this user");
}
return (
<div>
- <div
- style={{color: colors.green400, fontSize: 16}}
- >
- <span>+{' '}</span>
+ <div style={{ color: colors.green400, fontSize: 16 }}>
+ <span>+ </span>
{this._renderAmount(receiveAmount, receiveToken.symbol, receiveToken.decimals)}
</div>
- <div
- className="pb1 inline-block"
- style={{color: colors.red200, fontSize: 16}}
- >
- <span>-{' '}</span>
+ <div className="pb1 inline-block" style={{ color: colors.red200, fontSize: 16 }}>
+ <span>- </span>
{this._renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)}
</div>
- <div style={{color: colors.grey400, fontSize: 14}}>
+ <div style={{ color: colors.grey400, fontSize: 14 }}>
{exchangeRate.toFixed(PRECISION)} {givenToken.symbol}/{receiveToken.symbol}
</div>
</div>
@@ -160,12 +148,13 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
const dateTooltipId = `${this.props.fill.transactionHash}-date`;
return (
- <div
- data-tip={true}
- data-for={dateTooltipId}
- >
- <div className="center pt1" style={{fontSize: 13}}>{monthAbreviation}</div>
- <div className="center" style={{fontSize: 24, fontWeight: 100}}>{dayOfMonth}</div>
+ <div data-tip={true} data-for={dateTooltipId}>
+ <div className="center pt1" style={{ fontSize: 13 }}>
+ {monthAbreviation}
+ </div>
+ <div className="center" style={{ fontSize: 24, fontWeight: 100 }}>
+ {dayOfMonth}
+ </div>
<ReactTooltip id={dateTooltipId}>{formattedBlockDate}</ReactTooltip>
</div>
);
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index bc65d0f0f..54881b499 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,10 +1,10 @@
import * as React from 'react';
-import {AlertTypes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { AlertTypes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface AlertProps {
type: AlertTypes;
- message: string|React.ReactNode;
+ message: string | React.ReactNode;
}
export function Alert(props: AlertProps) {
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
index fae51860e..7f7ea006e 100644
--- a/packages/website/ts/components/ui/badge.tsx
+++ b/packages/website/ts/components/ui/badge.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Styles} from 'ts/types';
+import { Styles } from 'ts/types';
const styles: Styles = {
badge: {
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 754f5d456..df55e0922 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import * as ReactDOM from 'react-dom';
import ReactTooltip = require('react-tooltip');
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
interface CopyIconProps {
data: string;
@@ -33,26 +33,24 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
public render() {
return (
<div className="inline-block">
- <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}>
- <div
- className="inline flex"
- style={{cursor: 'pointer', color: colors.amber600}}
- ref={this._setRefToProperty.bind(this)}
- data-tip={true}
- data-for="copy"
- data-event="click"
- data-iscapture={true} // This let's the click event continue to propogate
- onMouseOver={this._setHoverState.bind(this, true)}
- onMouseOut={this._setHoverState.bind(this, false)}
- >
- <div>
- <i style={{fontSize: 15}} className="zmdi zmdi-copy" />
- </div>
- {this.props.callToAction &&
- <div className="pl1">{this.props.callToAction}</div>
- }
+ <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}>
+ <div
+ className="inline flex"
+ style={{ cursor: 'pointer', color: colors.amber600 }}
+ ref={this._setRefToProperty.bind(this)}
+ data-tip={true}
+ data-for="copy"
+ data-event="click"
+ data-iscapture={true} // This let's the click event continue to propogate
+ onMouseOver={this._setHoverState.bind(this, true)}
+ onMouseOut={this._setHoverState.bind(this, false)}
+ >
+ <div>
+ <i style={{ fontSize: 15 }} className="zmdi zmdi-copy" />
</div>
- </CopyToClipboard>
+ {this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>}
+ </div>
+ </CopyToClipboard>
<ReactTooltip id="copy">Copied!</ReactTooltip>
</div>
);
diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx
index ee26e004e..a578fb4f9 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
import Menu from 'material-ui/Menu';
import Popover from 'material-ui/Popover';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
const DEFAULT_STYLE = {
@@ -48,33 +48,26 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
return (
<div
- style={{...this.props.style, color: colorStyle}}
+ style={{ ...this.props.style, color: colorStyle }}
onMouseEnter={this._onHover.bind(this)}
onMouseLeave={this._onHoverOff.bind(this)}
>
<div className="flex relative">
- <div style={{paddingRight: 10}}>
- {this.props.title}
- </div>
- <div className="absolute" style={{paddingLeft: 3, right: 3, top: -2}}>
- <i className="zmdi zmdi-caret-right" style={{fontSize: 22}} />
+ <div style={{ paddingRight: 10 }}>{this.props.title}</div>
+ <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
+ <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
</div>
</div>
<Popover
open={this.state.isDropDownOpen}
anchorEl={this.state.anchorEl}
- anchorOrigin={{horizontal: 'middle', vertical: 'bottom'}}
- targetOrigin={{horizontal: 'middle', vertical: 'top'}}
+ anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+ targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
onRequestClose={this._closePopover.bind(this)}
useLayerForClickAway={false}
>
- <div
- onMouseEnter={this._onHover.bind(this)}
- onMouseLeave={this._onHoverOff.bind(this)}
- >
- <Menu style={{color: colors.grey}}>
- {this.props.subMenuItems}
- </Menu>
+ <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
+ <Menu style={{ color: colors.grey }}>{this.props.subMenuItems}</Menu>
</div>
</Popover>
</div>
@@ -90,8 +83,8 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
}
this.setState({
- isDropDownOpen: true,
- anchorEl: event.currentTarget,
+ isDropDownOpen: true,
+ anchorEl: event.currentTarget,
});
}
private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index d56840689..b75d97e39 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
+import { EtherscanLinkSuffixes } from 'ts/types';
+import { utils } from 'ts/utils/utils';
interface EthereumAddressProps {
address: string;
@@ -14,12 +14,7 @@ export const EthereumAddress = (props: EthereumAddressProps) => {
const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
return (
<div>
- <div
- className="inline"
- style={{fontSize: 13}}
- data-tip={true}
- data-for={tooltipId}
- >
+ <div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}>
{truncatedAddress}
</div>
<div className="pl1 inline">
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 111d5d478..3b17bd0fa 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { EtherscanLinkSuffixes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
interface EtherScanIconProps {
addressOrTxHash: string;
@@ -13,38 +13,29 @@ interface EtherScanIconProps {
export const EtherScanIcon = (props: EtherScanIconProps) => {
const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
- props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.Address,
+ props.addressOrTxHash,
+ props.networkId,
+ EtherscanLinkSuffixes.Address,
);
const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
return (
<div className="inline">
- {!_.isUndefined(etherscanLinkIfExists) ?
- <a
- href={etherscanLinkIfExists}
- target="_blank"
- >
+ {!_.isUndefined(etherscanLinkIfExists) ? (
+ <a href={etherscanLinkIfExists} target="_blank">
{renderIcon()}
- </a> :
- <div
- className="inline"
- data-tip={true}
- data-for={transactionTooltipId}
- >
+ </a>
+ ) : (
+ <div className="inline" data-tip={true} data-for={transactionTooltipId}>
{renderIcon()}
<ReactTooltip id={transactionTooltipId}>
Your network (id: {props.networkId}) is not supported by Etherscan
</ReactTooltip>
</div>
- }
+ )}
</div>
);
};
function renderIcon() {
- return (
- <i
- style={{color: colors.amber600}}
- className="zmdi zmdi-open-in-new"
- />
- );
+ return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />;
}
diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx
index 8ee4349a2..f3d9410f6 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {Styles} from 'ts/types';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { Styles } from 'ts/types';
const styles: Styles = {
hr: {
@@ -25,7 +25,7 @@ export function FakeTextField(props: FakeTextFieldProps) {
return (
<div className="relative">
{props.label !== '' && <InputLabel text={props.label} />}
- <div className="pb2" style={{height: 23}}>
+ <div className="pb2" style={{ height: 23 }}>
{props.children}
</div>
<hr style={styles.hr} />
diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx
index c0c00463e..2cb1fc764 100644
--- a/packages/website/ts/components/ui/flash_message.tsx
+++ b/packages/website/ts/components/ui/flash_message.tsx
@@ -1,13 +1,13 @@
import * as _ from 'lodash';
import Snackbar from 'material-ui/Snackbar';
import * as React from 'react';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { Dispatcher } from 'ts/redux/dispatcher';
const SHOW_DURATION_MS = 4000;
interface FlashMessageProps {
dispatcher: Dispatcher;
- flashMessage?: string|React.ReactNode;
+ flashMessage?: string | React.ReactNode;
showDurationMs?: number;
bodyStyle?: React.CSSProperties;
}
diff --git a/packages/website/ts/components/ui/help_tooltip.tsx b/packages/website/ts/components/ui/help_tooltip.tsx
index 003b795ef..d827eebb9 100644
--- a/packages/website/ts/components/ui/help_tooltip.tsx
+++ b/packages/website/ts/components/ui/help_tooltip.tsx
@@ -9,13 +9,13 @@ interface HelpTooltipProps {
export const HelpTooltip = (props: HelpTooltipProps) => {
return (
<div
- style={{...props.style}}
+ style={{ ...props.style }}
className="inline-block"
data-tip={props.explanation}
data-for="helpTooltip"
data-multiline={true}
>
- <i style={{fontSize: 16}} className="zmdi zmdi-help" />
+ <i style={{ fontSize: 16 }} className="zmdi zmdi-help" />
<ReactTooltip id="helpTooltip" />
</div>
);
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index a741ae43b..bad6c2a78 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -1,7 +1,7 @@
import blockies = require('blockies');
import * as _ from 'lodash';
import * as React from 'react';
-import {constants} from 'ts/utils/constants';
+import { constants } from 'ts/utils/constants';
interface IdenticonProps {
address: string;
@@ -27,9 +27,21 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
return (
<div
className="circle mx-auto relative transitionFix"
- style={{width: diameter, height: diameter, overflow: 'hidden', ...this.props.style}}
+ style={{
+ width: diameter,
+ height: diameter,
+ overflow: 'hidden',
+ ...this.props.style,
+ }}
>
- <img src={icon.toDataURL()} style={{width: diameter, height: diameter, imageRendering: 'pixelated'}}/>
+ <img
+ src={icon.toDataURL()}
+ style={{
+ width: diameter,
+ height: diameter,
+ imageRendering: 'pixelated',
+ }}
+ />
</div>
);
}
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index bfa1da280..e2009ad20 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
export interface InputLabelProps {
text: string | Element | React.ReactNode;
@@ -21,7 +21,5 @@ const styles = {
};
export const InputLabel = (props: InputLabelProps) => {
- return (
- <label style={styles.label}>{props.text}</label>
- );
+ return <label style={styles.label}>{props.text}</label>;
};
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 852975ef6..8ff856a75 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,24 +1,24 @@
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
enum ButtonState {
- READY,
- LOADING,
- COMPLETE,
+ READY,
+ LOADING,
+ COMPLETE,
}
interface LifeCycleRaisedButtonProps {
isHidden?: boolean;
isDisabled?: boolean;
isPrimary?: boolean;
- labelReady: React.ReactNode|string;
- labelLoading: React.ReactNode|string;
- labelComplete: React.ReactNode|string;
+ labelReady: React.ReactNode | string;
+ labelLoading: React.ReactNode | string;
+ labelComplete: React.ReactNode | string;
onClickAsyncFn: () => Promise<boolean>;
backgroundColor?: string;
labelColor?: string;
@@ -28,8 +28,7 @@ interface LifeCycleRaisedButtonState {
buttonState: ButtonState;
}
-export class LifeCycleRaisedButton extends
- React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
+export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
isDisabled: false,
backgroundColor: colors.white,
@@ -70,7 +69,7 @@ export class LifeCycleRaisedButton extends
<RaisedButton
primary={this.props.isPrimary}
label={label}
- style={{width: '100%'}}
+ style={{ width: '100%' }}
backgroundColor={this.props.backgroundColor}
labelColor={this.props.labelColor}
onTouchTap={this.onClickAsync.bind(this)}
diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx
index 83636b5ff..aa319e9e9 100644
--- a/packages/website/ts/components/ui/loading.tsx
+++ b/packages/website/ts/components/ui/loading.tsx
@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import * as React from 'react';
-import {DefaultPlayer as Video} from 'react-html5video';
+import { DefaultPlayer as Video } from 'react-html5video';
import 'react-html5video/dist/styles.css';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
interface LoadingProps {}
@@ -12,11 +12,12 @@ interface LoadingState {}
export class Loading extends React.Component<LoadingProps, LoadingState> {
public render() {
return (
- <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{height: 500}}>
- <Paper className="mx-auto" style={{maxWidth: 400}}>
- {utils.isUserOnMobile() ?
- <img className="p1" src="/gifs/0xAnimation.gif" width="96%" /> :
- <div style={{pointerEvents: 'none'}}>
+ <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
+ <Paper className="mx-auto" style={{ maxWidth: 400 }}>
+ {utils.isUserOnMobile() ? (
+ <img className="p1" src="/gifs/0xAnimation.gif" width="96%" />
+ ) : (
+ <div style={{ pointerEvents: 'none' }}>
<Video
autoPlay={true}
loop={true}
@@ -27,8 +28,10 @@ export class Loading extends React.Component<LoadingProps, LoadingState> {
<source src="/videos/0xAnimation.mp4" type="video/mp4" />
</Video>
</div>
- }
- <div className="center pt2" style={{paddingBottom: 11}}>Connecting to the blockchain...</div>
+ )}
+ <div className="center pt2" style={{ paddingBottom: 11 }}>
+ Connecting to the blockchain...
+ </div>
</Paper>
</div>
);
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx
index 3ec993476..3482f436c 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/menu_item.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
interface MenuItemProps {
to: string;
@@ -30,7 +30,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
opacity: this.state.isHovering ? 0.5 : 1,
};
return (
- <Link to={this.props.to} style={{textDecoration: 'none', ...this.props.style}}>
+ <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
<div
onClick={this.props.onClick.bind(this)}
className={`mx-auto ${this.props.className}`}
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index 918d42a3b..ca2577b61 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,11 +1,11 @@
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import {EthereumAddress} from 'ts/components/ui/ethereum_address';
-import {Identicon} from 'ts/components/ui/identicon';
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { EthereumAddress } from 'ts/components/ui/ethereum_address';
+import { Identicon } from 'ts/components/ui/identicon';
+import { EtherscanLinkSuffixes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
const IMAGE_DIMENSION = 100;
const IDENTICON_DIAMETER = 95;
@@ -44,100 +44,94 @@ export class Party extends React.Component<PartyProps, PartyState> {
height: IMAGE_DIMENSION,
};
const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
- this.props.address, this.props.networkId, EtherscanLinkSuffixes.Address,
+ this.props.address,
+ this.props.networkId,
+ EtherscanLinkSuffixes.Address,
);
const isRegistered = this.props.isInTokenRegistry;
const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`;
const uniqueNameAndSymbolTooltipId = `${this.props.address}-${isRegistered}-uniqueTooltip`;
return (
- <div style={{overflow: 'hidden'}}>
+ <div style={{ overflow: 'hidden' }}>
<div className="pb1 center">{label}</div>
- {_.isEmpty(address) ?
- <div
- className="circle mx-auto"
- style={emptyIdenticonStyles}
- /> :
- <a
- href={etherscanLinkIfExists}
- target="_blank"
- >
- {isRegistered && !_.isUndefined(this.props.alternativeImage) ?
- <img
- style={tokenImageStyle}
- src={this.props.alternativeImage}
- /> :
- <div
- className="mx-auto"
- style={{height: identiconDiameter, width: identiconDiameter}}
- >
- <Identicon
- address={this.props.address}
- diameter={identiconDiameter}
- style={this.props.identiconStyle}
- />
- </div>
- }
- </a>
- }
- <div
- className="mx-auto center pt1"
- >
- <div style={{height: 25}}>
+ {_.isEmpty(address) ? (
+ <div className="circle mx-auto" style={emptyIdenticonStyles} />
+ ) : (
+ <a href={etherscanLinkIfExists} target="_blank">
+ {isRegistered && !_.isUndefined(this.props.alternativeImage) ? (
+ <img style={tokenImageStyle} src={this.props.alternativeImage} />
+ ) : (
+ <div className="mx-auto" style={{ height: identiconDiameter, width: identiconDiameter }}>
+ <Identicon
+ address={this.props.address}
+ diameter={identiconDiameter}
+ style={this.props.identiconStyle}
+ />
+ </div>
+ )}
+ </a>
+ )}
+ <div className="mx-auto center pt1">
+ <div style={{ height: 25 }}>
<EthereumAddress address={address} networkId={this.props.networkId} />
</div>
- {!_.isUndefined(this.props.isInTokenRegistry) &&
+ {!_.isUndefined(this.props.isInTokenRegistry) && (
<div>
<div
data-tip={true}
data-for={registeredTooltipId}
className="mx-auto"
- style={{fontSize: 13, width: 127}}
+ style={{ fontSize: 13, width: 127 }}
>
- <span style={{color: isRegistered ? colors.brightGreen : colors.red500}}>
+ <span
+ style={{
+ color: isRegistered ? colors.brightGreen : colors.red500,
+ }}
+ >
<i
className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
/>
</span>{' '}
<span>{isRegistered ? 'Registered' : 'Unregistered'} token</span>
<ReactTooltip id={registeredTooltipId}>
- {isRegistered ?
+ {isRegistered ? (
<div>
This token address was found in the token registry<br />
smart contract and is therefore believed to be a<br />
legitimate token.
- </div> :
+ </div>
+ ) : (
<div>
This token is not included in the token registry<br />
smart contract. We cannot guarantee the legitimacy<br />
of this token. Make sure to verify its address on Etherscan.
</div>
- }
+ )}
</ReactTooltip>
</div>
</div>
- }
- {!_.isUndefined(this.props.hasUniqueNameAndSymbol) && !this.props.hasUniqueNameAndSymbol &&
- <div>
- <div
- data-tip={true}
- data-for={uniqueNameAndSymbolTooltipId}
- className="mx-auto"
- style={{fontSize: 13, width: 127}}
- >
- <span style={{color: colors.red500}}>
- <i
- className="zmdi zmdi-alert-octagon"
- />
- </span>{' '}
- <span>Suspicious token</span>
- <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
- This token shares it's name, symbol or both with<br />
- a token in the 0x Token Registry but it has a different<br />
- smart contract address. This is most likely a scam token!
- </ReactTooltip>
+ )}
+ {!_.isUndefined(this.props.hasUniqueNameAndSymbol) &&
+ !this.props.hasUniqueNameAndSymbol && (
+ <div>
+ <div
+ data-tip={true}
+ data-for={uniqueNameAndSymbolTooltipId}
+ className="mx-auto"
+ style={{ fontSize: 13, width: 127 }}
+ >
+ <span style={{ color: colors.red500 }}>
+ <i className="zmdi zmdi-alert-octagon" />
+ </span>{' '}
+ <span>Suspicious token</span>
+ <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
+ This token shares it's name, symbol or both with<br />
+ a token in the 0x Token Registry but it has a different<br />
+ smart contract address. This is most likely a scam token!
+ </ReactTooltip>
+ </div>
</div>
- </div>
- }
+ )}
</div>
</div>
);
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index 979b06d66..a5e7a22ce 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,15 +1,15 @@
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
export interface RequiredLabelProps {
- label: string|React.ReactNode;
+ label: string | React.ReactNode;
}
export const RequiredLabel = (props: RequiredLabelProps) => {
return (
<span>
{props.label}
- <span style={{color: colors.red600}}>*</span>
+ <span style={{ color: colors.red600 }}>*</span>
</span>
);
};
diff --git a/packages/website/ts/components/ui/simple_loading.tsx b/packages/website/ts/components/ui/simple_loading.tsx
index fa548f996..81744196d 100644
--- a/packages/website/ts/components/ui/simple_loading.tsx
+++ b/packages/website/ts/components/ui/simple_loading.tsx
@@ -7,15 +7,10 @@ export interface SimpleLoadingProps {
export const SimpleLoading = (props: SimpleLoadingProps) => {
return (
- <div className="mx-auto pt3" style={{maxWidth: 400, height: 409}}>
- <div
- className="relative"
- style={{top: '50%', transform: 'translateY(-50%)', height: 95}}
- >
+ <div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}>
+ <div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}>
<CircularProgress />
- <div className="pt3 pb3">
- {props.message}
- </div>
+ <div className="pt3 pb3">{props.message}</div>
</div>
</div>
);
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index 2adefbda3..c41592287 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
interface SwapIconProps {
swapTokensFn: () => void;
@@ -25,15 +25,12 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
return (
<div
className="mx-auto pt4"
- style={{cursor: 'pointer', height: 50, width: 37.5}}
+ style={{ cursor: 'pointer', height: 50, width: 37.5 }}
onClick={this.props.swapTokensFn}
onMouseEnter={this._onToggleHover.bind(this, true)}
onMouseLeave={this._onToggleHover.bind(this, false)}
>
- <i
- style={swapStyles}
- className="zmdi zmdi-swap"
- />
+ <i style={swapStyles} className="zmdi zmdi-swap" />
</div>
);
}
diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx
index d3a7c9a8c..ff57a96de 100644
--- a/packages/website/ts/components/ui/token_icon.tsx
+++ b/packages/website/ts/components/ui/token_icon.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Identicon} from 'ts/components/ui/identicon';
-import {Token} from 'ts/types';
+import { Identicon } from 'ts/components/ui/identicon';
+import { Token } from 'ts/types';
interface TokenIconProps {
token: Token;
@@ -16,13 +16,11 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> {
const diameter = this.props.diameter;
return (
<div>
- {(token.isRegistered && !_.isUndefined(token.iconUrl)) ?
- <img
- style={{width: diameter, height: diameter}}
- src={token.iconUrl}
- /> :
+ {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
+ <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
+ ) : (
<Identicon address={token.address} diameter={diameter} />
- }
+ )}
</div>
);
}
diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx
index 708317be6..092954086 100644
--- a/packages/website/ts/components/visual_order.tsx
+++ b/packages/website/ts/components/visual_order.tsx
@@ -1,9 +1,9 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import * as _ from 'lodash';
import * as React from 'react';
-import {Party} from 'ts/components/ui/party';
-import {AssetToken, Token, TokenByAddress} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { Party } from 'ts/components/ui/party';
+import { AssetToken, Token, TokenByAddress } from 'ts/types';
+import { utils } from 'ts/utils/utils';
const PRECISION = 5;
@@ -45,7 +45,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt
{this._renderAmount(this.props.takerAssetToken, this.props.takerToken)}
</div>
<div className="lg-p2 md-p2 sm-p1">
- <img src="/images/trade_arrows.png" style={{width: 47}} />
+ <img src="/images/trade_arrows.png" style={{ width: 47 }} />
</div>
<div className="pt1">
{this._renderAmount(this.props.makerAssetToken, this.props.makerToken)}
@@ -68,7 +68,7 @@ export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderSt
private _renderAmount(assetToken: AssetToken, token: Token) {
const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals);
return (
- <div style={{fontSize: 13}}>
+ <div style={{ fontSize: 13 }}>
{unitAmount.toNumber().toFixed(PRECISION)} {token.symbol}
</div>
);
diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.tsx
index 5e0a59e2d..3e02a7d05 100644
--- a/packages/website/ts/containers/connect_documentation.tsx
+++ b/packages/website/ts/containers/connect_documentation.tsx
@@ -1,17 +1,14 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {connect} from 'react-redux';
-import {Dispatch} from 'redux';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {
- Documentation as DocumentationComponent,
- DocumentationAllProps,
-} from 'ts/pages/documentation/documentation';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {State} from 'ts/redux/reducer';
-import {DocsInfoConfig, WebsitePaths} from 'ts/types';
-import {constants} from 'ts/utils/constants';
-import {typeDocUtils} from 'ts/utils/typedoc_utils';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { DocsInfoConfig, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { typeDocUtils } from 'ts/utils/typedoc_utils';
/* tslint:disable:no-var-requires */
const IntroMarkdown = require('md/docs/connect/introduction');
@@ -33,21 +30,11 @@ const docsInfoConfig: DocsInfoConfig = {
websitePath: WebsitePaths.Connect,
docsJsonRoot: 'https://s3.amazonaws.com/connect-docs-jsons',
menu: {
- introduction: [
- connectDocSections.introduction,
- ],
- install: [
- connectDocSections.installation,
- ],
- httpClient: [
- connectDocSections.httpClient,
- ],
- webSocketOrderbookChannel: [
- connectDocSections.webSocketOrderbookChannel,
- ],
- types: [
- connectDocSections.types,
- ],
+ introduction: [connectDocSections.introduction],
+ install: [connectDocSections.installation],
+ httpClient: [connectDocSections.httpClient],
+ webSocketOrderbookChannel: [connectDocSections.webSocketOrderbookChannel],
+ types: [connectDocSections.types],
},
sectionNameToMarkdown: {
[connectDocSections.introduction]: IntroMarkdown,
@@ -79,10 +66,7 @@ const docsInfoConfig: DocsInfoConfig = {
},
menuSubsectionToVersionWhenIntroduced: {},
sections: connectDocSections,
- visibleConstructors: [
- connectDocSections.httpClient,
- connectDocSections.webSocketOrderbookChannel,
- ],
+ visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel],
convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils),
};
const docsInfo = new DocsInfo(docsInfoConfig);
@@ -107,5 +91,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
dispatcher: new Dispatcher(dispatch),
});
-export const Documentation: React.ComponentClass<DocumentationAllProps> =
- connect(mapStateToProps, mapDispatchToProps)(DocumentationComponent);
+export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)(
+ DocumentationComponent,
+);
diff --git a/packages/website/ts/containers/generate_order_form.tsx b/packages/website/ts/containers/generate_order_form.tsx
index a47895d94..1508b93d1 100644
--- a/packages/website/ts/containers/generate_order_form.tsx
+++ b/packages/website/ts/containers/generate_order_form.tsx
@@ -1,11 +1,11 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
-import {connect} from 'react-redux';
-import {Blockchain} from 'ts/blockchain';
-import {GenerateOrderForm as GenerateOrderFormComponent} from 'ts/components/generate_order/generate_order_form';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {State} from 'ts/redux/reducer';
+import { connect } from 'react-redux';
+import { Blockchain } from 'ts/blockchain';
+import { GenerateOrderForm as GenerateOrderFormComponent } from 'ts/components/generate_order/generate_order_form';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
import {
BlockchainErrs,
HashData,
@@ -49,5 +49,6 @@ const mapStateToProps = (state: State, ownProps: GenerateOrderFormProps): Connec
userAddress: state.userAddress,
});
-export const GenerateOrderForm: React.ComponentClass<GenerateOrderFormProps> =
- connect(mapStateToProps)(GenerateOrderFormComponent);
+export const GenerateOrderForm: React.ComponentClass<GenerateOrderFormProps> = connect(mapStateToProps)(
+ GenerateOrderFormComponent,
+);
diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.tsx
index ae983e0f5..7ceaf1cf8 100644
--- a/packages/website/ts/containers/portal.tsx
+++ b/packages/website/ts/containers/portal.tsx
@@ -1,25 +1,17 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
-import {connect} from 'react-redux';
-import {Dispatch} from 'redux';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
import {
Portal as PortalComponent,
PortalAllProps as PortalComponentAllProps,
PortalPassedProps as PortalComponentPassedProps,
} from 'ts/components/portal';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {State} from 'ts/redux/reducer';
-import {
- BlockchainErrs,
- HashData,
- Order,
- ScreenWidths,
- Side,
- TokenByAddress,
- TokenStateByAddress,
-} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { BlockchainErrs, HashData, Order, ScreenWidths, Side, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { constants } from 'ts/utils/constants';
interface ConnectedState {
blockchainErr: BlockchainErrs;
@@ -35,7 +27,7 @@ interface ConnectedState {
shouldBlockchainErrDialogBeOpen: boolean;
userAddress: string;
userSuppliedOrderCache: Order;
- flashMessage?: string|React.ReactNode;
+ flashMessage?: string | React.ReactNode;
}
interface ConnectedDispatch {
@@ -45,14 +37,14 @@ interface ConnectedDispatch {
const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): ConnectedState => {
const receiveAssetToken = state.sideToAssetToken[Side.Receive];
const depositAssetToken = state.sideToAssetToken[Side.Deposit];
- const receiveAddress = !_.isUndefined(receiveAssetToken.address) ?
- receiveAssetToken.address : constants.NULL_ADDRESS;
- const depositAddress = !_.isUndefined(depositAssetToken.address) ?
- depositAssetToken.address : constants.NULL_ADDRESS;
- const receiveAmount = !_.isUndefined(receiveAssetToken.amount) ?
- receiveAssetToken.amount : new BigNumber(0);
- const depositAmount = !_.isUndefined(depositAssetToken.amount) ?
- depositAssetToken.amount : new BigNumber(0);
+ const receiveAddress = !_.isUndefined(receiveAssetToken.address)
+ ? receiveAssetToken.address
+ : constants.NULL_ADDRESS;
+ const depositAddress = !_.isUndefined(depositAssetToken.address)
+ ? depositAssetToken.address
+ : constants.NULL_ADDRESS;
+ const receiveAmount = !_.isUndefined(receiveAssetToken.amount) ? receiveAssetToken.amount : new BigNumber(0);
+ const depositAmount = !_.isUndefined(depositAssetToken.amount) ? depositAssetToken.amount : new BigNumber(0);
const hashData = {
depositAmount,
depositTokenContractAddr: depositAddress,
@@ -88,5 +80,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
dispatcher: new Dispatcher(dispatch),
});
-export const Portal: React.ComponentClass<PortalComponentPassedProps> =
- connect(mapStateToProps, mapDispatchToProps)(PortalComponent);
+export const Portal: React.ComponentClass<PortalComponentPassedProps> = connect(mapStateToProps, mapDispatchToProps)(
+ PortalComponent,
+);
diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.tsx
index 34092748b..8be33b546 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.tsx
+++ b/packages/website/ts/containers/smart_contracts_documentation.tsx
@@ -1,16 +1,13 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {connect} from 'react-redux';
-import {Dispatch} from 'redux';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {
- Documentation as DocumentationComponent,
- DocumentationAllProps,
-} from 'ts/pages/documentation/documentation';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {State} from 'ts/redux/reducer';
-import {DocsInfoConfig, SmartContractDocSections as Sections, WebsitePaths} from 'ts/types';
-import {doxityUtils} from 'ts/utils/doxity_utils';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { DocsInfoConfig, SmartContractDocSections as Sections, WebsitePaths } from 'ts/types';
+import { doxityUtils } from 'ts/utils/doxity_utils';
/* tslint:disable:no-var-requires */
const IntroMarkdown = require('md/docs/smart_contracts/introduction');
@@ -22,15 +19,8 @@ const docsInfoConfig: DocsInfoConfig = {
websitePath: WebsitePaths.SmartContracts,
docsJsonRoot: 'https://s3.amazonaws.com/smart-contracts-docs-json',
menu: {
- introduction: [
- Sections.Introduction,
- ],
- contracts: [
- Sections.Exchange,
- Sections.TokenRegistry,
- Sections.ZRXToken,
- Sections.TokenTransferProxy,
- ],
+ introduction: [Sections.Introduction],
+ contracts: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy],
},
sectionNameToMarkdown: {
[Sections.Introduction]: IntroMarkdown,
@@ -42,12 +32,7 @@ const docsInfoConfig: DocsInfoConfig = {
TokenRegistry: Sections.TokenRegistry,
ZRXToken: Sections.ZRXToken,
},
- visibleConstructors: [
- Sections.Exchange,
- Sections.TokenRegistry,
- Sections.ZRXToken,
- Sections.TokenTransferProxy,
- ],
+ visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy],
convertToDocAgnosticFormatFn: doxityUtils.convertToDocAgnosticFormat.bind(doxityUtils),
};
const docsInfo = new DocsInfo(docsInfoConfig);
@@ -72,5 +57,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
docsInfo,
});
-export const Documentation: React.ComponentClass<DocumentationAllProps> =
- connect(mapStateToProps, mapDispatchToProps)(DocumentationComponent);
+export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)(
+ DocumentationComponent,
+);
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.tsx
index 8e40a3fbc..8ae6a7b73 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.tsx
+++ b/packages/website/ts/containers/zero_ex_js_documentation.tsx
@@ -1,17 +1,14 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {connect} from 'react-redux';
-import {Dispatch} from 'redux';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {
- Documentation as DocumentationComponent,
- DocumentationAllProps,
-} from 'ts/pages/documentation/documentation';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {State} from 'ts/redux/reducer';
-import {DocsInfoConfig, WebsitePaths} from 'ts/types';
-import {constants} from 'ts/utils/constants';
-import {typeDocUtils} from 'ts/utils/typedoc_utils';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { DocsInfoConfig, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { typeDocUtils } from 'ts/utils/typedoc_utils';
/* tslint:disable:no-var-requires */
const IntroMarkdown = require('md/docs/0xjs/introduction');
@@ -45,20 +42,10 @@ const docsInfoConfig: DocsInfoConfig = {
websitePath: WebsitePaths.ZeroExJs,
docsJsonRoot: 'https://s3.amazonaws.com/0xjs-docs-jsons',
menu: {
- introduction: [
- zeroExJsDocSections.introduction,
- ],
- install: [
- zeroExJsDocSections.installation,
- ],
- topics: [
- zeroExJsDocSections.async,
- zeroExJsDocSections.errors,
- zeroExJsDocSections.versioning,
- ],
- zeroEx: [
- zeroExJsDocSections.zeroEx,
- ],
+ introduction: [zeroExJsDocSections.introduction],
+ install: [zeroExJsDocSections.installation],
+ topics: [zeroExJsDocSections.async, zeroExJsDocSections.errors, zeroExJsDocSections.versioning],
+ zeroEx: [zeroExJsDocSections.zeroEx],
contracts: [
zeroExJsDocSections.exchange,
zeroExJsDocSections.token,
@@ -66,12 +53,8 @@ const docsInfoConfig: DocsInfoConfig = {
zeroExJsDocSections.etherToken,
zeroExJsDocSections.proxy,
],
- orderWatcher: [
- zeroExJsDocSections.orderWatcher,
- ],
- types: [
- zeroExJsDocSections.types,
- ],
+ orderWatcher: [zeroExJsDocSections.orderWatcher],
+ types: [zeroExJsDocSections.types],
},
sectionNameToMarkdown: {
[zeroExJsDocSections.introduction]: IntroMarkdown,
@@ -182,5 +165,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
dispatcher: new Dispatcher(dispatch),
});
-export const Documentation: React.ComponentClass<DocumentationAllProps> =
- connect(mapStateToProps, mapDispatchToProps)(DocumentationComponent);
+export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)(
+ DocumentationComponent,
+);
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index 3144d7eb5..383e5cbe0 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -91,7 +91,7 @@ declare interface Schema {
dependencies?: {
[name: string]: Schema | string[];
};
- 'enum'?: any[];
+ enum?: any[];
type?: string | string[];
allOf?: Schema[];
anyOf?: Schema[];
@@ -130,23 +130,25 @@ declare module 'web3-provider-engine/subproviders/subprovider' {
declare module 'web3-provider-engine/subproviders/rpc' {
import * as Web3 from 'web3';
class RpcSubprovider {
- constructor(options: {rpcUrl: string});
+ constructor(options: { rpcUrl: string });
public handleRequest(
- payload: Web3.JSONRPCRequestPayload, next: () => void, end: (err: Error|null, data?: any) => void,
+ payload: Web3.JSONRPCRequestPayload,
+ next: () => void,
+ end: (err: Error | null, data?: any) => void,
): void;
}
export = RpcSubprovider;
}
declare module 'web3-provider-engine' {
- class Web3ProviderEngine {
- public on(event: string, handler: () => void): void;
- public send(payload: any): void;
- public sendAsync(payload: any, callback: (error: any, response: any) => void): void;
- public addProvider(provider: any): void;
- public start(): void;
- public stop(): void;
- }
- export = Web3ProviderEngine;
+ class Web3ProviderEngine {
+ public on(event: string, handler: () => void): void;
+ public send(payload: any): void;
+ public sendAsync(payload: any, callback: (error: any, response: any) => void): void;
+ public addProvider(provider: any): void;
+ public start(): void;
+ public stop(): void;
+ }
+ export = Web3ProviderEngine;
}
declare interface Artifact {
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 685ce4962..eee8fcf7b 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -1,25 +1,25 @@
// Polyfills
import 'whatwg-fetch';
-import {bigNumberConfigs} from '@0xproject/utils';
-import {MuiThemeProvider} from 'material-ui/styles';
+import { bigNumberConfigs } from '@0xproject/utils';
+import { MuiThemeProvider } from 'material-ui/styles';
import * as React from 'react';
-import {render} from 'react-dom';
-import {Provider} from 'react-redux';
-import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
-import {createStore, Store as ReduxStore} from 'redux';
-import {createLazyComponent} from 'ts/lazy_component';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {tradeHistoryStorage} from 'ts/local_storage/trade_history_storage';
-import {About} from 'ts/pages/about/about';
-import {FAQ} from 'ts/pages/faq/faq';
-import {Landing} from 'ts/pages/landing/landing';
-import {NotFound} from 'ts/pages/not_found';
-import {Wiki} from 'ts/pages/wiki/wiki';
-import {reducer, State} from 'ts/redux/reducer';
-import {WebsitePaths} from 'ts/types';
-import {muiTheme} from 'ts/utils/mui_theme';
+import { createStore, Store as ReduxStore } from 'redux';
+import { createLazyComponent } from 'ts/lazy_component';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
+import { About } from 'ts/pages/about/about';
+import { FAQ } from 'ts/pages/faq/faq';
+import { Landing } from 'ts/pages/landing/landing';
+import { NotFound } from 'ts/pages/not_found';
+import { Wiki } from 'ts/pages/wiki/wiki';
+import { reducer, State } from 'ts/redux/reducer';
+import { WebsitePaths } from 'ts/types';
+import { muiTheme } from 'ts/utils/mui_theme';
injectTapEventPlugin();
bigNumberConfigs.configure();
@@ -35,24 +35,17 @@ import 'less/all.less';
// cause we only want to import the module when the user navigates to the page.
// At the same time webpack statically parses for System.import() to determine bundle chunk split points
// so each lazy import needs it's own `System.import()` declaration.
-const LazyPortal = createLazyComponent(
- 'Portal', async () => System.import<any>(/* webpackChunkName: "portal" */'ts/containers/portal'),
+const LazyPortal = createLazyComponent('Portal', async () =>
+ System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
);
-const LazyZeroExJSDocumentation = createLazyComponent(
- 'Documentation',
- async () => System.import<any>(/* webpackChunkName: "zeroExDocs" */'ts/containers/zero_ex_js_documentation'),
+const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () =>
+ System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'),
);
-const LazySmartContractsDocumentation = createLazyComponent(
- 'Documentation',
- async () => System.import<any>(
- /* webpackChunkName: "smartContractDocs" */'ts/containers/smart_contracts_documentation',
- ),
+const LazySmartContractsDocumentation = createLazyComponent('Documentation', async () =>
+ System.import<any>(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'),
);
-const LazyConnectDocumentation = createLazyComponent(
- 'Documentation',
- async () => System.import<any>(
- /* webpackChunkName: "connectDocs" */'ts/containers/connect_documentation',
- ),
+const LazyConnectDocumentation = createLazyComponent('Documentation', async () =>
+ System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
);
const store: ReduxStore<State> = createStore(reducer);
@@ -64,7 +57,7 @@ render(
<div>
<Switch>
<Route exact={true} path="/" component={Landing as any} />
- <Redirect from="/otc" to={`${WebsitePaths.Portal}`}/>
+ <Redirect from="/otc" to={`${WebsitePaths.Portal}`} />
<Route path={`${WebsitePaths.Portal}`} component={LazyPortal} />
<Route path={`${WebsitePaths.FAQ}`} component={FAQ as any} />
<Route path={`${WebsitePaths.About}`} component={About as any} />
@@ -81,6 +74,6 @@ render(
</Provider>
</MuiThemeProvider>
</div>
- </Router>,
+ </Router>,
document.getElementById('app'),
);
diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx
index fa5f0ff8f..48800c2dd 100644
--- a/packages/website/ts/lazy_component.tsx
+++ b/packages/website/ts/lazy_component.tsx
@@ -32,9 +32,9 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo
}
}
public render() {
- return _.isUndefined(this.state.component) ?
- null :
- React.createElement(this.state.component, this.props.reactComponentProps);
+ return _.isUndefined(this.state.component)
+ ? null
+ : React.createElement(this.state.component, this.props.reactComponentProps);
}
private async _loadComponentFireAndForgetAsync(props: LazyComponentProps) {
const component = await props.reactComponentPromise;
@@ -61,11 +61,6 @@ export const createLazyComponent = (componentName: string, lazyImport: () => Pro
}
return component;
})();
- return (
- <LazyComponent
- reactComponentPromise={reactComponentPromise}
- reactComponentProps={props}
- />
- );
+ return <LazyComponent reactComponentPromise={reactComponentPromise} reactComponentProps={props} />;
};
};
diff --git a/packages/website/ts/local_storage/tracked_token_storage.ts b/packages/website/ts/local_storage/tracked_token_storage.ts
index f51368289..0cc384791 100644
--- a/packages/website/ts/local_storage/tracked_token_storage.ts
+++ b/packages/website/ts/local_storage/tracked_token_storage.ts
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
-import {localStorage} from 'ts/local_storage/local_storage';
-import {Token, TrackedTokensByNetworkId} from 'ts/types';
-import {configs} from 'ts/utils/configs';
+import { localStorage } from 'ts/local_storage/local_storage';
+import { Token, TrackedTokensByNetworkId } from 'ts/types';
+import { configs } from 'ts/utils/configs';
const TRACKED_TOKENS_KEY = 'trackedTokens';
const TRACKED_TOKENS_CLEAR_KEY = 'lastClearTrackedTokensDate';
@@ -22,9 +22,9 @@ export const trackedTokenStorage = {
if (_.isUndefined(trackedTokensByNetworkId)) {
trackedTokensByNetworkId = {};
}
- const trackedTokens = !_.isUndefined(trackedTokensByNetworkId[networkId]) ?
- trackedTokensByNetworkId[networkId] :
- [];
+ const trackedTokens = !_.isUndefined(trackedTokensByNetworkId[networkId])
+ ? trackedTokensByNetworkId[networkId]
+ : [];
trackedTokens.push(token);
trackedTokensByNetworkId[networkId] = trackedTokens;
trackedTokensByUserAddress[userAddress] = trackedTokensByNetworkId;
diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx
index a54844ea7..c95506cad 100644
--- a/packages/website/ts/local_storage/trade_history_storage.tsx
+++ b/packages/website/ts/local_storage/trade_history_storage.tsx
@@ -1,10 +1,10 @@
import BigNumber from 'bignumber.js';
import ethUtil = require('ethereumjs-util');
import * as _ from 'lodash';
-import {localStorage} from 'ts/local_storage/local_storage';
-import {Fill} from 'ts/types';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { localStorage } from 'ts/local_storage/local_storage';
+import { Fill } from 'ts/types';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
const FILLS_KEY = 'fills';
const FILLS_LATEST_BLOCK = 'fillsLatestBlock';
@@ -50,7 +50,7 @@ export const tradeHistoryStorage = {
const userFillsKey = this._getUserFillsKey(userAddress, networkId);
localStorage.setItem(userFillsKey, userFillsJSONString);
},
- getUserFillsByHash(userAddress: string, networkId: number): {[fillHash: string]: Fill} {
+ getUserFillsByHash(userAddress: string, networkId: number): { [fillHash: string]: Fill } {
const userFillsKey = this._getUserFillsKey(userAddress, networkId);
const userFillsJSONString = localStorage.getItemIfExists(userFillsKey);
if (_.isEmpty(userFillsJSONString)) {
@@ -58,10 +58,10 @@ export const tradeHistoryStorage = {
}
const userFillsByHash = JSON.parse(userFillsJSONString);
_.each(userFillsByHash, (fill, hash) => {
- fill.paidMakerFee = new BigNumber(fill.paidMakerFee);
- fill.paidTakerFee = new BigNumber(fill.paidTakerFee);
- fill.filledTakerTokenAmount = new BigNumber(fill.filledTakerTokenAmount);
- fill.filledMakerTokenAmount = new BigNumber(fill.filledMakerTokenAmount);
+ fill.paidMakerFee = new BigNumber(fill.paidMakerFee);
+ fill.paidTakerFee = new BigNumber(fill.paidTakerFee);
+ fill.filledTakerTokenAmount = new BigNumber(fill.filledTakerTokenAmount);
+ fill.filledMakerTokenAmount = new BigNumber(fill.filledMakerTokenAmount);
});
return userFillsByHash;
},
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 722e819ff..3ff16f9fe 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,13 +1,13 @@
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {Profile} from 'ts/pages/about/profile';
-import {ProfileInfo, Styles} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { Profile } from 'ts/pages/about/profile';
+import { ProfileInfo, Styles } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const teamRow1: ProfileInfo[] = [
{
@@ -155,73 +155,61 @@ export class About extends React.Component<AboutProps, AboutState> {
}
public render() {
return (
- <div style={{backgroundColor: colors.lightestGrey}}>
- <DocumentTitle title="0x About Us"/>
+ <div style={{ backgroundColor: colors.lightestGrey }}>
+ <DocumentTitle title="0x About Us" />
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
- style={{backgroundColor: colors.lightestGrey}}
+ style={{ backgroundColor: colors.lightestGrey }}
/>
- <div
- id="about"
- className="mx-auto max-width-4 py4"
- style={{color: colors.grey800}}
- >
- <div
- className="mx-auto pb4 sm-px3"
- style={{maxWidth: 435}}
- >
- <div
- style={styles.header}
- >
- About us:
- </div>
+ <div id="about" className="mx-auto max-width-4 py4" style={{ color: colors.grey800 }}>
+ <div className="mx-auto pb4 sm-px3" style={{ maxWidth: 435 }}>
+ <div style={styles.header}>About us:</div>
<div
className="pt3"
- style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}}
+ style={{
+ fontSize: 17,
+ color: colors.darkestGrey,
+ lineHeight: 1.5,
+ }}
>
- Our team is a diverse and globally distributed group with backgrounds
- in engineering, research, business and design. We are passionate about
- decentralized technology and its potential to act as an equalizing force
- in the world.
+ Our team is a diverse and globally distributed group with backgrounds in engineering,
+ research, business and design. We are passionate about decentralized technology and its
+ potential to act as an equalizing force in the world.
</div>
</div>
<div className="pt3 md-px4 lg-px0">
- <div className="clearfix pb3">
- {this._renderProfiles(teamRow1)}
- </div>
- <div className="clearfix">
- {this._renderProfiles(teamRow2)}
- </div>
+ <div className="clearfix pb3">{this._renderProfiles(teamRow1)}</div>
+ <div className="clearfix">{this._renderProfiles(teamRow2)}</div>
</div>
<div className="pt3 pb2">
<div
className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
- style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}}
+ style={{
+ color: colors.grey,
+ fontSize: 24,
+ fontFamily: 'Roboto Mono',
+ }}
>
Advisors:
</div>
- <div className="clearfix">
- {this._renderProfiles(advisors)}
- </div>
+ <div className="clearfix">{this._renderProfiles(advisors)}</div>
</div>
- <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
- <div
- className="pb2"
- style={styles.weAreHiring}
- >
+ <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}>
+ <div className="pb2" style={styles.weAreHiring}>
WE'RE HIRING
</div>
<div
className="pb4 mb4"
- style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}}
+ style={{
+ fontSize: 16,
+ color: colors.darkestGrey,
+ lineHeight: 1.5,
+ letterSpacing: '0.5px',
+ }}
>
We are seeking outstanding candidates to{' '}
- <a
- href={constants.URL_ANGELLIST}
- target="_blank"
- style={{color: 'black'}}
- >
+ <a href={constants.URL_ANGELLIST} target="_blank" style={{ color: 'black' }}>
join our team
</a>
. We value passion, diversity and unique perspectives.
@@ -237,13 +225,8 @@ export class About extends React.Component<AboutProps, AboutState> {
const colSize = utils.getColSize(numIndiv);
return _.map(profiles, profile => {
return (
- <div
- key={`profile-${profile.name}`}
- >
- <Profile
- colSize={colSize}
- profileInfo={profile}
- />
+ <div key={`profile-${profile.name}`}>
+ <Profile colSize={colSize} profileInfo={profile} />
</div>
);
});
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index ef74f268a..bd2316f31 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {ProfileInfo, Styles} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { ProfileInfo, Styles } from 'ts/types';
+import { colors } from 'ts/utils/colors';
const IMAGE_DIMENSION = 149;
const styles: Styles = {
@@ -24,43 +24,30 @@ interface ProfileProps {
export function Profile(props: ProfileProps) {
return (
- <div
- className={`lg-col md-col lg-col-${props.colSize} md-col-6`}
- >
- <div
- style={{maxWidth: 300}}
- className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3"
- >
- <div
- className="circle overflow-hidden mx-auto"
- style={styles.imageContainer}
- >
- <img
- width={IMAGE_DIMENSION}
- src={props.profileInfo.image}
- />
+ <div className={`lg-col md-col lg-col-${props.colSize} md-col-6`}>
+ <div style={{ maxWidth: 300 }} className="mx-auto lg-px3 md-px3 sm-px4 sm-pb3">
+ <div className="circle overflow-hidden mx-auto" style={styles.imageContainer}>
+ <img width={IMAGE_DIMENSION} src={props.profileInfo.image} />
</div>
- <div
- className="center"
- style={{fontSize: 18, fontWeight: 'bold', paddingTop: 20}}
- >
+ <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}>
{props.profileInfo.name}
</div>
- {!_.isUndefined(props.profileInfo.title) &&
+ {!_.isUndefined(props.profileInfo.title) && (
<div
className="pt1 center"
- style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}}
+ style={{
+ fontSize: 14,
+ fontFamily: 'Roboto Mono',
+ color: colors.darkGrey,
+ }}
>
{props.profileInfo.title.toUpperCase()}
</div>
- }
- <div
- style={{minHeight: 60, lineHeight: 1.4}}
- className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center"
- >
+ )}
+ <div style={{ minHeight: 60, lineHeight: 1.4 }} className="pt1 pb2 mx-auto lg-h6 md-h6 sm-h5 sm-center">
{props.profileInfo.description}
</div>
- <div className="flex pb3 mx-auto sm-hide xs-hide" style={{width: 180, opacity: 0.5}}>
+ <div className="flex pb3 mx-auto sm-hide xs-hide" style={{ width: 180, opacity: 0.5 }}>
{renderSocialMediaIcons(props.profileInfo)}
</div>
</div>
@@ -84,13 +71,8 @@ function renderSocialMediaIcon(iconName: string, url: string) {
return (
<div key={url} className="pr1">
- <a
- href={url}
- style={{color: 'inherit'}}
- target="_blank"
- className="text-decoration-none"
- >
- <i className={`zmdi ${iconName}`} style={{...styles.socalIcon}} />
+ <a href={url} style={{ color: 'inherit' }} target="_blank" className="text-decoration-none">
+ <i className={`zmdi ${iconName}`} style={{ ...styles.socalIcon }} />
</a>
</div>
);
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 9627fdcdc..23cfd96bd 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
-import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block';
+import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
interface CommentProps {
comment: string;
@@ -15,10 +15,7 @@ const defaultProps = {
export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
return (
<div className={`${props.className} comment`}>
- <ReactMarkdown
- source={props.comment}
- renderers={{CodeBlock: MarkdownCodeBlock}}
- />
+ <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
</div>
);
};
diff --git a/packages/website/ts/pages/documentation/custom_enum.tsx b/packages/website/ts/pages/documentation/custom_enum.tsx
index 7dced9b60..8d50a2f52 100644
--- a/packages/website/ts/pages/documentation/custom_enum.tsx
+++ b/packages/website/ts/pages/documentation/custom_enum.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {CustomType} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { CustomType } from 'ts/types';
+import { utils } from 'ts/utils/utils';
const STRING_ENUM_CODE_PREFIX = ' strEnum(';
@@ -23,8 +23,9 @@ export function CustomEnum(props: CustomEnumProps) {
return (
<span>
{`{`}
- {'\t'}{enumValues}
- <br />
+ {'\t'}
+ {enumValues}
+ <br />
{`}`}
</span>
);
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
index b88b247e8..4b1ec122a 100644
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ b/packages/website/ts/pages/documentation/docs_info.ts
@@ -18,7 +18,7 @@ export class DocsInfo {
public docsJsonRoot: string;
public menu: DocsMenu;
public sections: SectionsMap;
- public sectionNameToMarkdown: {[sectionName: string]: string};
+ public sectionNameToMarkdown: { [sectionName: string]: string };
private _docsInfo: DocsInfoConfig;
constructor(config: DocsInfoConfig) {
this.displayName = config.displayName;
@@ -41,7 +41,7 @@ export class DocsInfo {
const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName];
return modulePathsIfExists;
}
- public getMenu(selectedVersion?: string): {[section: string]: string[]} {
+ public getMenu(selectedVersion?: string): { [section: string]: string[] } {
if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) {
return this._docsInfo.menu;
}
@@ -55,8 +55,7 @@ export class DocsInfo {
finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => {
const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
if (!_.isUndefined(versionIntroducedIfExists)) {
- const existsInSelectedVersion = compareVersions(selectedVersion,
- versionIntroducedIfExists) >= 0;
+ const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0;
return existsInSelectedVersion;
} else {
return true;
@@ -106,7 +105,7 @@ export class DocsInfo {
public isVisibleConstructor(sectionName: string): boolean {
return _.includes(this._docsInfo.visibleConstructors, sectionName);
}
- public convertToDocAgnosticFormat(docObj: DoxityDocObj|TypeDocNode): DocAgnosticFormat {
+ public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat {
return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this);
}
}
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 1731c19fe..2315847ad 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -3,23 +3,21 @@ import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
-import {
- scroller,
-} from 'react-scroll';
+import { scroller } from 'react-scroll';
import semverSort = require('semver-sort');
-import {TopBar} from 'ts/components/top_bar';
-import {Badge} from 'ts/components/ui/badge';
-import {Comment} from 'ts/pages/documentation/comment';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {EventDefinition} from 'ts/pages/documentation/event_definition';
-import {MethodBlock} from 'ts/pages/documentation/method_block';
-import {SourceLink} from 'ts/pages/documentation/source_link';
-import {Type} from 'ts/pages/documentation/type';
-import {TypeDefinition} from 'ts/pages/documentation/type_definition';
-import {MarkdownSection} from 'ts/pages/shared/markdown_section';
-import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
-import {SectionHeader} from 'ts/pages/shared/section_header';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { TopBar } from 'ts/components/top_bar';
+import { Badge } from 'ts/components/ui/badge';
+import { Comment } from 'ts/pages/documentation/comment';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { EventDefinition } from 'ts/pages/documentation/event_definition';
+import { MethodBlock } from 'ts/pages/documentation/method_block';
+import { SourceLink } from 'ts/pages/documentation/source_link';
+import { Type } from 'ts/pages/documentation/type';
+import { TypeDefinition } from 'ts/pages/documentation/type_definition';
+import { MarkdownSection } from 'ts/pages/shared/markdown_section';
+import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
+import { SectionHeader } from 'ts/pages/shared/section_header';
+import { Dispatcher } from 'ts/redux/dispatcher';
import {
AddressByContractName,
DocAgnosticFormat,
@@ -33,15 +31,15 @@ import {
TypeDefinitionByName,
TypescriptMethod,
} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {docUtils} from 'ts/utils/doc_utils';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { docUtils } from 'ts/utils/doc_utils';
+import { utils } from 'ts/utils/utils';
const SCROLL_TOP_ID = 'docsScrollTop';
-const networkNameToColor: {[network: string]: string} = {
+const networkNameToColor: { [network: string]: string } = {
[Networks.kovan]: colors.purple,
[Networks.ropsten]: colors.red,
[Networks.mainnet]: colors.turquois,
@@ -79,8 +77,7 @@ const styles: Styles = {
},
};
-export class Documentation extends
- React.Component<DocumentationAllProps, DocumentationState> {
+export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> {
constructor(props: DocumentationAllProps) {
super(props);
this.state = {
@@ -96,12 +93,12 @@ export class Documentation extends
this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
}
public render() {
- const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) ?
- {} :
- this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
+ const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
+ ? {}
+ : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
return (
<div>
- <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`}/>
+ <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} />
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
@@ -112,29 +109,26 @@ export class Documentation extends
shouldFullWidth={true}
docsInfo={this.props.docsInfo}
/>
- {_.isUndefined(this.state.docAgnosticFormat) ?
- <div
- className="col col-12"
- style={styles.mainContainers}
- >
+ {_.isUndefined(this.state.docAgnosticFormat) ? (
+ <div className="col col-12" style={styles.mainContainers}>
<div
className="relative sm-px2 sm-pt2 sm-m1"
- style={{height: 122, top: '50%', transform: 'translateY(-50%)'}}
+ style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
>
<div className="center pb2">
<CircularProgress size={40} thickness={5} />
</div>
- <div className="center pt2" style={{paddingBottom: 11}}>Loading documentation...</div>
+ <div className="center pt2" style={{ paddingBottom: 11 }}>
+ Loading documentation...
+ </div>
</div>
- </div> :
- <div
- className="mx-auto flex"
- style={{color: colors.grey800, height: 43}}
- >
+ </div>
+ ) : (
+ <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}>
<div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide">
<div
className="border-right absolute"
- style={{...styles.menuContainer, ...styles.mainContainers}}
+ style={{ ...styles.menuContainer, ...styles.mainContainers }}
>
<NestedSidebarMenu
selectedVersion={this.props.docsVersion}
@@ -146,11 +140,7 @@ export class Documentation extends
</div>
</div>
<div className="relative col lg-col-9 md-col-9 sm-col-12 col-12">
- <div
- id="documentation"
- style={styles.mainContainers}
- className="absolute"
- >
+ <div id="documentation" style={styles.mainContainers} className="absolute">
<div id={SCROLL_TOP_ID} />
<h1 className="md-pl2 sm-pl3">
<a href={this.props.docsInfo.packageUrl} target="_blank">
@@ -161,7 +151,7 @@ export class Documentation extends
</div>
</div>
</div>
- }
+ )}
</div>
);
}
@@ -224,136 +214,120 @@ export class Documentation extends
);
});
return (
- <div
- key={`section-${sectionName}`}
- className="py2 pr3 md-pl2 sm-pl3"
- >
+ <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
<div className="flex">
- <div style={{marginRight: 7}}>
- <SectionHeader sectionName={sectionName} />
- </div>
- {this._renderNetworkBadgesIfExists(sectionName)}
+ <div style={{ marginRight: 7 }}>
+ <SectionHeader sectionName={sectionName} />
+ </div>
+ {this._renderNetworkBadgesIfExists(sectionName)}
</div>
- {docSection.comment &&
- <Comment
- comment={docSection.comment}
- />
- }
+ {docSection.comment && <Comment comment={docSection.comment} />}
{docSection.constructors.length > 0 &&
- this.props.docsInfo.isVisibleConstructor(sectionName) &&
- <div>
- <h2 className="thin">Constructor</h2>
- {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
- </div>
- }
- {docSection.properties.length > 0 &&
+ this.props.docsInfo.isVisibleConstructor(sectionName) && (
+ <div>
+ <h2 className="thin">Constructor</h2>
+ {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
+ </div>
+ )}
+ {docSection.properties.length > 0 && (
<div>
<h2 className="thin">Properties</h2>
<div>{propertyDefs}</div>
</div>
- }
- {docSection.methods.length > 0 &&
+ )}
+ {docSection.methods.length > 0 && (
<div>
<h2 className="thin">Methods</h2>
<div>{methodDefs}</div>
</div>
- }
- {!_.isUndefined(docSection.events) && docSection.events.length > 0 &&
- <div>
- <h2 className="thin">Events</h2>
- <div>{eventDefs}</div>
- </div>
- }
- {!_.isUndefined(typeDefs) && typeDefs.length > 0 &&
- <div>
- <div>{typeDefs}</div>
- </div>
- }
+ )}
+ {!_.isUndefined(docSection.events) &&
+ docSection.events.length > 0 && (
+ <div>
+ <h2 className="thin">Events</h2>
+ <div>{eventDefs}</div>
+ </div>
+ )}
+ {!_.isUndefined(typeDefs) &&
+ typeDefs.length > 0 && (
+ <div>
+ <div>{typeDefs}</div>
+ </div>
+ )}
</div>
);
}
private _renderNetworkBadgesIfExists(sectionName: string) {
const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
- const badges = _.map(networkToAddressByContractName,
+ const badges = _.map(
+ networkToAddressByContractName,
(addressByContractName: AddressByContractName, networkName: string) => {
const contractAddress = addressByContractName[sectionName];
if (_.isUndefined(contractAddress)) {
return null;
}
const linkIfExists = utils.getEtherScanLinkIfExists(
- contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address,
+ contractAddress,
+ constants.NETWORK_ID_BY_NAME[networkName],
+ EtherscanLinkSuffixes.Address,
);
return (
<a
key={`badge-${networkName}-${sectionName}`}
href={linkIfExists}
target="_blank"
- style={{color: colors.white, textDecoration: 'none'}}
+ style={{ color: colors.white, textDecoration: 'none' }}
>
- <Badge
- title={networkName}
- backgroundColor={networkNameToColor[networkName]}
- />
+ <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
</a>
);
- });
+ },
+ );
return badges;
}
- private _renderConstructors(constructors: SolidityMethod[]|TypescriptMethod[],
- sectionName: string,
- typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
+ private _renderConstructors(
+ constructors: SolidityMethod[] | TypescriptMethod[],
+ sectionName: string,
+ typeDefinitionByName: TypeDefinitionByName,
+ ): React.ReactNode {
const constructorDefs = _.map(constructors, constructor => {
- return this._renderMethodBlocks(
- constructor, sectionName, constructor.isConstructor, typeDefinitionByName,
- );
+ return this._renderMethodBlocks(constructor, sectionName, constructor.isConstructor, typeDefinitionByName);
});
- return (
- <div>
- {constructorDefs}
- </div>
- );
+ return <div>{constructorDefs}</div>;
}
private _renderProperty(sectionName: string, property: Property): React.ReactNode {
return (
- <div
- key={`property-${property.name}-${property.type.name}`}
- className="pb3"
- >
+ <div key={`property-${property.name}-${property.type.name}`} className="pb3">
<code className="hljs">
{property.name}:
- <Type
- type={property.type}
- sectionName={sectionName}
- docsInfo={this.props.docsInfo}
- />
+ <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
</code>
- {property.source &&
+ {property.source && (
<SourceLink
version={this.props.docsVersion}
source={property.source}
baseUrl={this.props.docsInfo.packageUrl}
subPackageName={this.props.docsInfo.subPackageName}
/>
- }
- {property.comment &&
- <Comment
- comment={property.comment}
- className="py2"
- />
- }
+ )}
+ {property.comment && <Comment comment={property.comment} className="py2" />}
</div>
);
}
- private _renderMethodBlocks(method: SolidityMethod|TypescriptMethod, sectionName: string,
- isConstructor: boolean, typeDefinitionByName: TypeDefinitionByName): React.ReactNode {
+ private _renderMethodBlocks(
+ method: SolidityMethod | TypescriptMethod,
+ sectionName: string,
+ isConstructor: boolean,
+ typeDefinitionByName: TypeDefinitionByName,
+ ): React.ReactNode {
return (
<MethodBlock
- key={`method-${method.name}-${sectionName}`}
- sectionName={sectionName}
- method={method}
- typeDefinitionByName={typeDefinitionByName}
- libraryVersion={this.props.docsVersion}
- docsInfo={this.props.docsInfo}
+ key={`method-${method.name}-${sectionName}`}
+ sectionName={sectionName}
+ method={method}
+ typeDefinitionByName={typeDefinitionByName}
+ libraryVersion={this.props.docsVersion}
+ docsInfo={this.props.docsInfo}
/>
);
}
@@ -364,7 +338,11 @@ export class Documentation extends
hash = SCROLL_TOP_ID; // scroll to the top
}
- scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'});
+ scroller.scrollTo(hash, {
+ duration: 0,
+ offset: 0,
+ containerId: 'documentation',
+ });
}
private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {
const versionToFileName = await docUtils.getVersionToFileNameAsync(this.props.docsInfo.docsJsonRoot);
@@ -384,14 +362,18 @@ export class Documentation extends
const versionFileNameToFetch = versionToFileName[versionToFetch];
const versionDocObj = await docUtils.getJSONDocFileAsync(
- versionFileNameToFetch, this.props.docsInfo.docsJsonRoot,
+ versionFileNameToFetch,
+ this.props.docsInfo.docsJsonRoot,
);
const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
- this.setState({
- docAgnosticFormat,
- }, () => {
- this._scrollToHash();
- });
+ this.setState(
+ {
+ docAgnosticFormat,
+ },
+ () => {
+ this._scrollToHash();
+ },
+ );
}
}
diff --git a/packages/website/ts/pages/documentation/enum.tsx b/packages/website/ts/pages/documentation/enum.tsx
index b5fbc4bd2..7dfdee771 100644
--- a/packages/website/ts/pages/documentation/enum.tsx
+++ b/packages/website/ts/pages/documentation/enum.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {EnumValue} from 'ts/types';
+import { EnumValue } from 'ts/types';
interface EnumProps {
values: EnumValue[];
@@ -14,8 +14,8 @@ export function Enum(props: EnumProps) {
return (
<span>
{`{`}
- {values}
- <br />
+ {values}
+ <br />
{`}`}
</span>
);
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 2fef019d2..0e53e38e7 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -1,10 +1,10 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {Type} from 'ts/pages/documentation/type';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {Event, EventArg, HeaderSizes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Type } from 'ts/pages/documentation/type';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { Event, EventArg, HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface EventDefinitionProps {
event: Event;
@@ -29,7 +29,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
<div
id={`${this.props.sectionName}-${event.name}`}
className="pb2"
- style={{overflow: 'hidden', width: '100%'}}
+ style={{ overflow: 'hidden', width: '100%' }}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
@@ -39,29 +39,24 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
id={event.name}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
- <div style={{fontSize: 16}}>
+ <div style={{ fontSize: 16 }}>
<pre>
- <code className="hljs">
- {this._renderEventCode()}
- </code>
+ <code className="hljs">{this._renderEventCode()}</code>
</pre>
</div>
</div>
);
}
private _renderEventCode() {
- const indexed = <span style={{color: colors.green}}> indexed</span>;
+ const indexed = <span style={{ color: colors.green }}> indexed</span>;
const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
const type = (
- <Type
- type={eventArg.type}
- sectionName={this.props.sectionName}
- docsInfo={this.props.docsInfo}
- />
+ <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
);
return (
<span key={`eventArg-${eventArg.name}`}>
- {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {type},
+ {eventArg.name}
+ {eventArg.isIndexed ? indexed : ''}: {type},
</span>
);
});
@@ -71,9 +66,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
return (
<span>
{`{`}
- <br />
- {'\t'}{argList}
- <br />
+ <br />
+ {'\t'}
+ {argList}
+ <br />
{`}`}
</span>
);
diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx
index 1a6b562fe..16a772125 100644
--- a/packages/website/ts/pages/documentation/interface.tsx
+++ b/packages/website/ts/pages/documentation/interface.tsx
@@ -1,9 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {MethodSignature} from 'ts/pages/documentation/method_signature';
-import {Type} from 'ts/pages/documentation/type';
-import {CustomType, TypeDocTypes} from 'ts/types';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { MethodSignature } from 'ts/pages/documentation/method_signature';
+import { Type } from 'ts/pages/documentation/type';
+import { CustomType, TypeDocTypes } from 'ts/types';
interface InterfaceProps {
type: CustomType;
@@ -17,12 +17,9 @@ export function Interface(props: InterfaceProps) {
return (
<span key={`property-${property.name}-${property.type}-${type.name}`}>
{property.name}:{' '}
- {property.type.typeDocType !== TypeDocTypes.Reflection ?
- <Type
- type={property.type}
- sectionName={props.sectionName}
- docsInfo={props.docsInfo}
- /> :
+ {property.type.typeDocType !== TypeDocTypes.Reflection ? (
+ <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} />
+ ) : (
<MethodSignature
method={property.type.method}
sectionName={props.sectionName}
@@ -30,7 +27,7 @@ export function Interface(props: InterfaceProps) {
shouldUseArrowSyntax={true}
docsInfo={props.docsInfo}
/>
- },
+ )},
</span>
);
});
@@ -42,11 +39,11 @@ export function Interface(props: InterfaceProps) {
{is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
</span>
);
- properties.push((
+ properties.push(
<span key={`indexSignature-${type.name}-${is.keyType.name}`}>
[{param}]: {is.valueName},
- </span>
- ));
+ </span>,
+ );
}
const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => {
return [prev, '\n\t', curr];
@@ -54,9 +51,10 @@ export function Interface(props: InterfaceProps) {
return (
<span>
{`{`}
- <br />
- {'\t'}{propertyList}
- <br />
+ <br />
+ {'\t'}
+ {propertyList}
+ <br />
{`}`}
</span>
);
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 147bc34d6..dfde5931b 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,23 +1,16 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Comment} from 'ts/pages/documentation/comment';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {MethodSignature} from 'ts/pages/documentation/method_signature';
-import {SourceLink} from 'ts/pages/documentation/source_link';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {
- HeaderSizes,
- Parameter,
- SolidityMethod,
- Styles,
- TypeDefinitionByName,
- TypescriptMethod,
-} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {typeDocUtils} from 'ts/utils/typedoc_utils';
+import { Comment } from 'ts/pages/documentation/comment';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { MethodSignature } from 'ts/pages/documentation/method_signature';
+import { SourceLink } from 'ts/pages/documentation/source_link';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { typeDocUtils } from 'ts/utils/typedoc_utils';
interface MethodBlockProps {
- method: SolidityMethod|TypescriptMethod;
+ method: SolidityMethod | TypescriptMethod;
sectionName: string;
libraryVersion: string;
typeDefinitionByName: TypeDefinitionByName;
@@ -56,22 +49,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
return (
<div
id={`${this.props.sectionName}-${method.name}`}
- style={{overflow: 'hidden', width: '100%'}}
+ style={{ overflow: 'hidden', width: '100%' }}
className="pb4"
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
- {!method.isConstructor &&
+ {!method.isConstructor && (
<div className="flex">
- {(method as TypescriptMethod).isStatic &&
- this._renderChip('Static')
- }
- {(method as SolidityMethod).isConstant &&
- this._renderChip('Constant')
- }
- {(method as SolidityMethod).isPayable &&
- this._renderChip('Payable')
- }
+ {(method as TypescriptMethod).isStatic && this._renderChip('Static')}
+ {(method as SolidityMethod).isConstant && this._renderChip('Constant')}
+ {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
<AnchorTitle
headerSize={HeaderSizes.H3}
title={method.name}
@@ -79,7 +66,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
shouldShowAnchor={this.state.shouldShowAnchor}
/>
</div>
- }
+ )}
<code className="hljs">
<MethodSignature
method={method}
@@ -88,53 +75,38 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
docsInfo={this.props.docsInfo}
/>
</code>
- {(method as TypescriptMethod).source &&
+ {(method as TypescriptMethod).source && (
<SourceLink
version={this.props.libraryVersion}
source={(method as TypescriptMethod).source}
baseUrl={this.props.docsInfo.packageUrl}
subPackageName={this.props.docsInfo.subPackageName}
/>
- }
- {method.comment &&
- <Comment
- comment={method.comment}
- className="py2"
- />
- }
- {method.parameters && !_.isEmpty(method.parameters) &&
- <div>
- <h4
- className="pb1 thin"
- style={{borderBottom: '1px solid #e1e8ed'}}
- >
- ARGUMENTS
- </h4>
- {this._renderParameterDescriptions(method.parameters)}
- </div>
- }
- {method.returnComment &&
+ )}
+ {method.comment && <Comment comment={method.comment} className="py2" />}
+ {method.parameters &&
+ !_.isEmpty(method.parameters) && (
+ <div>
+ <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
+ ARGUMENTS
+ </h4>
+ {this._renderParameterDescriptions(method.parameters)}
+ </div>
+ )}
+ {method.returnComment && (
<div className="pt1 comment">
- <h4
- className="pb1 thin"
- style={{borderBottom: '1px solid #e1e8ed'}}
- >
+ <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
RETURNS
</h4>
- <Comment
- comment={method.returnComment}
- />
+ <Comment comment={method.returnComment} />
</div>
- }
+ )}
</div>
);
}
private _renderChip(text: string) {
return (
- <div
- className="p1 mr1"
- style={styles.chip}
- >
+ <div className="p1 mr1" style={styles.chip}>
{text}
</div>
);
@@ -146,22 +118,16 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
<div
key={`param-description-${parameter.name}`}
className="flex pb1 mb2"
- style={{borderBottom: '1px solid #f0f4f7'}}
+ style={{ borderBottom: '1px solid #f0f4f7' }}
>
<div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12">
- <div className="bold">
- {parameter.name}
- </div>
- <div className="pt1" style={{color: colors.grey, fontSize: 14}}>
+ <div className="bold">{parameter.name}</div>
+ <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}>
{isOptional && 'optional'}
</div>
</div>
<div className="col lg-col-8 md-col-8 sm-col-12 col-12">
- {parameter.comment &&
- <Comment
- comment={parameter.comment}
- />
- }
+ {parameter.comment && <Comment comment={parameter.comment} />}
</div>
</div>
);
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx
index 366d4c13e..041dcd093 100644
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ b/packages/website/ts/pages/documentation/method_signature.tsx
@@ -1,12 +1,12 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {Type} from 'ts/pages/documentation/type';
-import {Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Type } from 'ts/pages/documentation/type';
+import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
+import { constants } from 'ts/utils/constants';
interface MethodSignatureProps {
- method: TypescriptMethod|SolidityMethod;
+ method: TypescriptMethod | SolidityMethod;
sectionName: string;
shouldHideMethodName?: boolean;
shouldUseArrowSyntax?: boolean;
@@ -21,31 +21,28 @@ const defaultProps = {
export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => {
const sectionName = constants.TYPES_SECTION_NAME;
- const parameters = renderParameters(
- props.method, props.docsInfo, sectionName, props.typeDefinitionByName,
- );
+ const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => {
return [prev, ', ', curr];
});
const methodName = props.shouldHideMethodName ? '' : props.method.name;
- const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ?
- undefined :
- renderTypeParameter(
- props.method, props.docsInfo, sectionName, props.typeDefinitionByName,
- );
+ const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter)
+ ? undefined
+ : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
return (
<span>
- {props.method.callPath}{methodName}{typeParameterIfExists}({paramString})
- {props.shouldUseArrowSyntax ? ' => ' : ': '}
- {' '}
- {props.method.returnType &&
+ {props.method.callPath}
+ {methodName}
+ {typeParameterIfExists}({paramString})
+ {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
+ {props.method.returnType && (
<Type
type={props.method.returnType}
sectionName={sectionName}
typeDefinitionByName={props.typeDefinitionByName}
docsInfo={props.docsInfo}
/>
- }
+ )}
</span>
);
};
@@ -53,8 +50,10 @@ export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSi
MethodSignature.defaultProps = defaultProps;
function renderParameters(
- method: TypescriptMethod|SolidityMethod, docsInfo: DocsInfo,
- sectionName: string, typeDefinitionByName?: TypeDefinitionByName,
+ method: TypescriptMethod | SolidityMethod,
+ docsInfo: DocsInfo,
+ sectionName: string,
+ typeDefinitionByName?: TypeDefinitionByName,
) {
const parameters = method.parameters;
const params = _.map(parameters, (p: Parameter) => {
@@ -69,7 +68,8 @@ function renderParameters(
);
return (
<span key={`param-${p.type}-${p.name}`}>
- {p.name}{isOptional && '?'}: {type}
+ {p.name}
+ {isOptional && '?'}: {type}
</span>
);
});
@@ -77,19 +77,21 @@ function renderParameters(
}
function renderTypeParameter(
- method: TypescriptMethod, docsInfo: DocsInfo,
- sectionName: string, typeDefinitionByName?: TypeDefinitionByName,
+ method: TypescriptMethod,
+ docsInfo: DocsInfo,
+ sectionName: string,
+ typeDefinitionByName?: TypeDefinitionByName,
) {
const typeParameter = method.typeParameter;
const typeParam = (
<span>
{`<${typeParameter.name} extends `}
- <Type
- type={typeParameter.type}
- sectionName={sectionName}
- typeDefinitionByName={typeDefinitionByName}
- docsInfo={docsInfo}
- />
+ <Type
+ type={typeParameter.type}
+ sectionName={sectionName}
+ typeDefinitionByName={typeDefinitionByName}
+ docsInfo={docsInfo}
+ />
{`>`}
</span>
);
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 1a3b58f81..6588ee39e 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Source} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { Source } from 'ts/types';
+import { colors } from 'ts/utils/colors';
interface SourceLinkProps {
source: Source;
@@ -10,9 +10,7 @@ interface SourceLinkProps {
subPackageName: string;
}
-const packagesWithNamespace = [
- 'connect',
-];
+const packagesWithNamespace = ['connect'];
export function SourceLink(props: SourceLinkProps) {
const src = props.source;
@@ -24,13 +22,8 @@ export function SourceLink(props: SourceLinkProps) {
}
const sourceCodeUrl = `${url}/blob/${tagPrefix}%40${props.version}/packages/${pkg}/${src.fileName}#L${src.line}`;
return (
- <div className="pt2" style={{fontSize: 14}}>
- <a
- href={sourceCodeUrl}
- target="_blank"
- className="underline"
- style={{color: colors.grey}}
- >
+ <div className="pt2" style={{ fontSize: 14 }}>
+ <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}>
Source
</a>
</div>
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 6182b147a..e989e7129 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,16 +1,16 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Link as ScrollLink} from 'react-scroll';
+import { Link as ScrollLink } from 'react-scroll';
import * as ReactTooltip from 'react-tooltip';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {TypeDefinition} from 'ts/pages/documentation/type_definition';
-import {Type as TypeDef, TypeDefinitionByName, TypeDocTypes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { TypeDefinition } from 'ts/pages/documentation/type_definition';
+import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
// Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
-const typeToUrl: {[typeName: string]: string} = {
+const typeToUrl: { [typeName: string]: string } = {
Web3: constants.URL_WEB3_DOCS,
Provider: constants.URL_WEB3_PROVIDER_DOCS,
BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
@@ -18,13 +18,13 @@ const typeToUrl: {[typeName: string]: string} = {
LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT,
};
-const typePrefix: {[typeName: string]: string} = {
+const typePrefix: { [typeName: string]: string } = {
Provider: 'Web3',
DecodedLogEntryEvent: 'Web3',
LogEntryEvent: 'Web3',
};
-const typeToSection: {[typeName: string]: string} = {
+const typeToSection: { [typeName: string]: string } = {
ExchangeWrapper: 'exchange',
TokenWrapper: 'token',
TokenRegistryWrapper: 'tokenRegistry',
@@ -48,7 +48,7 @@ export function Type(props: TypeProps): any {
const isReference = type.typeDocType === TypeDocTypes.Reference;
const isArray = type.typeDocType === TypeDocTypes.Array;
let typeNameColor = 'inherit';
- let typeName: string|React.ReactNode;
+ let typeName: string | React.ReactNode;
let typeArgs: React.ReactNode[] = [];
switch (type.typeDocType) {
case TypeDocTypes.Intrinsic:
@@ -130,27 +130,29 @@ export function Type(props: TypeProps): any {
return [prev, ', ', curr];
});
- const typeNameUrlIfExists = typeToUrl[(typeName as string)];
- const typePrefixIfExists = typePrefix[(typeName as string)];
- const sectionNameIfExists = typeToSection[(typeName as string)];
+ const typeNameUrlIfExists = typeToUrl[typeName as string];
+ const typePrefixIfExists = typePrefix[typeName as string];
+ const sectionNameIfExists = typeToSection[typeName as string];
if (!_.isUndefined(typeNameUrlIfExists)) {
typeName = (
<a
href={typeNameUrlIfExists}
target="_blank"
className="text-decoration-none"
- style={{color: colors.lightBlueA700}}
+ style={{ color: colors.lightBlueA700 }}
>
- {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}{typeName}
+ {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}
+ {typeName}
</a>
);
- } else if ((isReference || isArray) &&
- (props.docsInfo.isPublicType(typeName as string) ||
- !_.isUndefined(sectionNameIfExists))) {
+ } else if (
+ (isReference || isArray) &&
+ (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists))
+ ) {
const id = Math.random().toString();
- const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists) ?
- `${props.sectionName}-${typeName}` :
- sectionNameIfExists;
+ const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists)
+ ? `${props.sectionName}-${typeName}`
+ : sectionNameIfExists;
let typeDefinition;
if (props.typeDefinitionByName) {
typeDefinition = props.typeDefinitionByName[typeName as string];
@@ -162,46 +164,49 @@ export function Type(props: TypeProps): any {
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.DOCS_CONTAINER_ID}
>
- {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ?
- <span
- onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
- style={{color: colors.lightBlueA700, cursor: 'pointer'}}
- >
- {typeName}
- </span> :
- <span
- data-tip={true}
- data-for={id}
- onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
- style={{color: colors.lightBlueA700, cursor: 'pointer', display: 'inline-block'}}
- >
- {typeName}
- <ReactTooltip
- type="light"
- effect="solid"
- id={id}
- className="typeTooltip"
+ {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? (
+ <span
+ onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
+ style={{ color: colors.lightBlueA700, cursor: 'pointer' }}
>
- <TypeDefinition
- sectionName={props.sectionName}
- customType={typeDefinition}
- shouldAddId={false}
- docsInfo={props.docsInfo}
- />
- </ReactTooltip>
- </span>
- }
+ {typeName}
+ </span>
+ ) : (
+ <span
+ data-tip={true}
+ data-for={id}
+ onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
+ style={{
+ color: colors.lightBlueA700,
+ cursor: 'pointer',
+ display: 'inline-block',
+ }}
+ >
+ {typeName}
+ <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
+ <TypeDefinition
+ sectionName={props.sectionName}
+ customType={typeDefinition}
+ shouldAddId={false}
+ docsInfo={props.docsInfo}
+ />
+ </ReactTooltip>
+ </span>
+ )}
</ScrollLink>
);
}
return (
<span>
- <span style={{color: typeNameColor}}>{typeName}</span>
- {isArray && '[]'}{!_.isEmpty(typeArgs) &&
+ <span style={{ color: typeNameColor }}>{typeName}</span>
+ {isArray && '[]'}
+ {!_.isEmpty(typeArgs) && (
<span>
- {'<'}{commaSeparatedTypeArgs}{'>'}
+ {'<'}
+ {commaSeparatedTypeArgs}
+ {'>'}
</span>
- }
+ )}
</span>
);
}
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index 25499a6d0..d46eec76c 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -1,16 +1,16 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Comment} from 'ts/pages/documentation/comment';
-import {CustomEnum} from 'ts/pages/documentation/custom_enum';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {Enum} from 'ts/pages/documentation/enum';
-import {Interface} from 'ts/pages/documentation/interface';
-import {MethodSignature} from 'ts/pages/documentation/method_signature';
-import {Type} from 'ts/pages/documentation/type';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {utils} from 'ts/utils/utils';
+import { Comment } from 'ts/pages/documentation/comment';
+import { CustomEnum } from 'ts/pages/documentation/custom_enum';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { Enum } from 'ts/pages/documentation/enum';
+import { Interface } from 'ts/pages/documentation/interface';
+import { MethodSignature } from 'ts/pages/documentation/method_signature';
+import { Type } from 'ts/pages/documentation/type';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
interface TypeDefinitionProps {
sectionName: string;
@@ -45,21 +45,13 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
case KindString.Interface:
typePrefix = 'Interface';
codeSnippet = (
- <Interface
- type={customType}
- sectionName={this.props.sectionName}
- docsInfo={this.props.docsInfo}
- />
+ <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
);
break;
case KindString.Variable:
typePrefix = 'Enum';
- codeSnippet = (
- <CustomEnum
- type={customType}
- />
- );
+ codeSnippet = <CustomEnum type={customType} />;
break;
case KindString.Enumeration:
@@ -70,28 +62,21 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
defaultValue: c.defaultValue,
};
});
- codeSnippet = (
- <Enum
- values={enumValues}
- />
- );
+ codeSnippet = <Enum values={enumValues} />;
break;
case KindString.TypeAlias:
typePrefix = 'Type Alias';
codeSnippet = (
<span>
- <span
- style={{color: colors.lightPurple}}
- >
- type
- </span> {customType.name} ={' '}
- {customType.type.typeDocType !== TypeDocTypes.Reflection ?
+ <span style={{ color: colors.lightPurple }}>type</span> {customType.name} ={' '}
+ {customType.type.typeDocType !== TypeDocTypes.Reflection ? (
<Type
type={customType.type}
sectionName={this.props.sectionName}
docsInfo={this.props.docsInfo}
- /> :
+ />
+ ) : (
<MethodSignature
method={customType.type.method}
sectionName={this.props.sectionName}
@@ -99,7 +84,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
shouldUseArrowSyntax={true}
docsInfo={this.props.docsInfo}
/>
- }
+ )}
</span>
);
break;
@@ -113,7 +98,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
<div
id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
className="pb2"
- style={{overflow: 'hidden', width: '100%'}}
+ style={{ overflow: 'hidden', width: '100%' }}
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
@@ -123,19 +108,12 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
- <div style={{fontSize: 16}}>
+ <div style={{ fontSize: 16 }}>
<pre>
- <code className="hljs">
- {codeSnippet}
- </code>
+ <code className="hljs">{codeSnippet}</code>
</pre>
</div>
- {customType.comment &&
- <Comment
- comment={customType.comment}
- className="py2"
- />
- }
+ {customType.comment && <Comment comment={customType.comment} className="py2" />}
</div>
);
}
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index c5afcb79f..b4b5214a2 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,13 +1,13 @@
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {Question} from 'ts/pages/faq/question';
-import {FAQQuestion, FAQSection, Styles, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { Question } from 'ts/pages/faq/question';
+import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
export interface FAQProps {
source: string;
@@ -30,14 +30,19 @@ const sections: FAQSection[] = [
prompt: 'What is 0x?',
answer: (
<div>
- At its core, 0x is an open and non-rent seeking protocol that facilitates trustless,
- low friction exchange of Ethereum-based assets. Developers can use 0x as a platform
- to build exchange applications on top of{' '}
- (<a href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`} target="blank">0x.js</a>
- {' '}is a Javascript library for interacting with the 0x protocol). For end users, 0x will be
- the infrastructure of a wide variety of user-facing applications i.e.{' '}
- <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank">0x Portal</a>,
- a decentralized application that facilitates trustless trading of Ethereum-based tokens
+ At its core, 0x is an open and non-rent seeking protocol that facilitates trustless, low
+ friction exchange of Ethereum-based assets. Developers can use 0x as a platform to build
+ exchange applications on top of (<a
+ href={`${configs.BASE_URL}${WebsitePaths.ZeroExJs}#introduction`}
+ target="blank"
+ >
+ 0x.js
+ </a>{' '}
+ is a Javascript library for interacting with the 0x protocol). For end users, 0x will be the
+ infrastructure of a wide variety of user-facing applications i.e.{' '}
+ <a href={`${configs.BASE_URL}${WebsitePaths.Portal}`} target="blank">
+ 0x Portal
+ </a>, a decentralized application that facilitates trustless trading of Ethereum-based tokens
between known counterparties.
</div>
),
@@ -47,15 +52,14 @@ const sections: FAQSection[] = [
answer: (
<div>
In the two years since the Ethereum blockchain’s genesis block, numerous decentralized
- applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange.
- Rapid iteration and a lack of best practices have left the blockchain scattered with
- proprietary and application-specific implementations. As a result, end users are
- exposed to numerous smart contracts of varying quality and security, with unique
- configuration processes and learning curves, all of which implement the same
- functionality. This approach imposes unnecessary costs on the network by fragmenting
- end users according to the particular dApp each user happens to be using, eliminating
- valuable network effects around liquidity. 0x is the solution to this problem by
- acting as modular, unopinionated building blocks that may be assembled and reconfigured.
+ applications (dApps) have created Ethereum smart contracts for peer-to-peer exchange. Rapid
+ iteration and a lack of best practices have left the blockchain scattered with proprietary and
+ application-specific implementations. As a result, end users are exposed to numerous smart
+ contracts of varying quality and security, with unique configuration processes and learning
+ curves, all of which implement the same functionality. This approach imposes unnecessary costs
+ on the network by fragmenting end users according to the particular dApp each user happens to be
+ using, eliminating valuable network effects around liquidity. 0x is the solution to this problem
+ by acting as modular, unopinionated building blocks that may be assembled and reconfigured.
</div>
),
},
@@ -64,20 +68,18 @@ const sections: FAQSection[] = [
answer: (
<div>
<ul>
+ <li>0x is a protocol for exchange, not a user-facing exchange application.</li>
<li>
- 0x is a protocol for exchange, not a user-facing exchange application.
- </li>
- <li>
- 0x is decentralized and trustless; there is no central party which can be
- hacked, run away with customer funds or be subjected to government regulations.
- Hacks of Mt. Gox, Shapeshift and Bitfinex have demonstrated that these types of
- systemic risks are palpable.
+ 0x is decentralized and trustless; there is no central party which can be hacked, run
+ away with customer funds or be subjected to government regulations. Hacks of Mt. Gox,
+ Shapeshift and Bitfinex have demonstrated that these types of systemic risks are
+ palpable.
</li>
<li>
- Rather than a proprietary system that exists to extract rent for its owners,
- 0x is public infrastructure that is funded by a globally distributed community
- of stakeholders. While the protocol is free to use, it enables for-profit
- user-facing exchange applications to be built on top of the protocol.
+ Rather than a proprietary system that exists to extract rent for its owners, 0x is
+ public infrastructure that is funded by a globally distributed community of
+ stakeholders. While the protocol is free to use, it enables for-profit user-facing
+ exchange applications to be built on top of the protocol.
</li>
</ul>
</div>
@@ -87,13 +89,12 @@ const sections: FAQSection[] = [
prompt: 'If 0x protocol is free to use, where do transaction fees come in?',
answer: (
<div>
- 0x protocol uses off-chain order books to massively reduce friction costs for
- market makers and ensure that the blockchain is only used for trade settlement.
- Hosting and maintaining an off-chain order book is a service; to incent “Relayers”
- to provide this service they must be able to charge transaction fees on trading
- activity. Relayers are free to set their transaction fees to any value they desire.
- We expect Relayers to be highly competitive and transaction fees to approach an
- efficient economic equilibrium over time.
+ 0x protocol uses off-chain order books to massively reduce friction costs for market makers and
+ ensure that the blockchain is only used for trade settlement. Hosting and maintaining an
+ off-chain order book is a service; to incent “Relayers” to provide this service they must be
+ able to charge transaction fees on trading activity. Relayers are free to set their transaction
+ fees to any value they desire. We expect Relayers to be highly competitive and transaction fees
+ to approach an efficient economic equilibrium over time.
</div>
),
},
@@ -102,25 +103,23 @@ const sections: FAQSection[] = [
answer: (
<div>
<div>
- Participants in a state channel pass cryptographically signed messages back and
- forth, accumulating intermediate state changes without publishing them to the
- canonical chain until the channel is closed. State channels are ideal for “bar tab”
- applications where numerous intermediate state changes may be accumulated off-chain
- before being settled by a final on-chain transaction (i.e. day trading, poker,
- turn-based games).
+ Participants in a state channel pass cryptographically signed messages back and forth,
+ accumulating intermediate state changes without publishing them to the canonical chain until
+ the channel is closed. State channels are ideal for “bar tab” applications where numerous
+ intermediate state changes may be accumulated off-chain before being settled by a final
+ on-chain transaction (i.e. day trading, poker, turn-based games).
</div>
<ul>
<li>
- While state channels drastically reduce the number of on-chain transactions
- for specific use cases, numerous on-chain transactions and a security deposit
- are required to open and safely close a state channel making them less efficient
- than 0x for executing one-time trades.
+ While state channels drastically reduce the number of on-chain transactions for specific
+ use cases, numerous on-chain transactions and a security deposit are required to open
+ and safely close a state channel making them less efficient than 0x for executing
+ one-time trades.
</li>
<li>
- State channels are isolated from the Ethereum blockchain meaning that
- they cannot interact with smart contracts. 0x is designed to be integrated
- directly into smart contracts so trades can be executed programmatically
- in a single line of Solidity code.
+ State channels are isolated from the Ethereum blockchain meaning that they cannot
+ interact with smart contracts. 0x is designed to be integrated directly into smart
+ contracts so trades can be executed programmatically in a single line of Solidity code.
</li>
</ul>
</div>
@@ -130,16 +129,20 @@ const sections: FAQSection[] = [
prompt: 'What types of digital assets are supported by 0x?',
answer: (
<div>
- 0x supports all Ethereum-based assets that adhere to the ERC20 token standard.
- There are many ERC20 tokens, worth a combined $2.2B, and more tokens are created
- each month. We believe that, by 2020, thousands of assets will be tokenized and
- moved onto the Ethereum blockchain including traditional securities such as equities,
- bonds and derivatives, fiat currencies and scarce digital goods such as video game
- items. In the future, cross-blockchain solutions such as{' '}
- <a href="https://cosmos.network/" target="_blank">Cosmos</a> and{' '}
- <a href="http://polkadot.io/" target="_blank">Polkadot</a> will allow cryptocurrencies
- to freely move between blockchains and, naturally, currencies such as Bitcoin will
- end up being represented as ERC20 tokens on the Ethereum blockchain.
+ 0x supports all Ethereum-based assets that adhere to the ERC20 token standard. There are many
+ ERC20 tokens, worth a combined $2.2B, and more tokens are created each month. We believe that,
+ by 2020, thousands of assets will be tokenized and moved onto the Ethereum blockchain including
+ traditional securities such as equities, bonds and derivatives, fiat currencies and scarce
+ digital goods such as video game items. In the future, cross-blockchain solutions such as{' '}
+ <a href="https://cosmos.network/" target="_blank">
+ Cosmos
+ </a>{' '}
+ and{' '}
+ <a href="http://polkadot.io/" target="_blank">
+ Polkadot
+ </a>{' '}
+ will allow cryptocurrencies to freely move between blockchains and, naturally, currencies such
+ as Bitcoin will end up being represented as ERC20 tokens on the Ethereum blockchain.
</div>
),
},
@@ -147,23 +150,19 @@ const sections: FAQSection[] = [
prompt: '0x is open source: what prevents someone from forking the protocol?',
answer: (
<div>
- Ethereum and Bitcoin are both open source protocols. Each protocol has been forked,
- but the resulting clone networks have seen little adoption (as measured by transaction
- count or market cap). This is because users have little to no incentive to switch
- over to a clone network if the original has initial network effects and a talented
- developer team behind it.
- An exception is in the case that a protocol includes a controversial feature such as
- a method of rent extraction or a monetary policy that favors one group of users over
- another (Zcash developer subsidy - for better or worse - resulted in Zclassic).
- Perceived inequality can provide a strong enough incentive that users will fork the
- original protocol’s codebase and spin up a new network that eliminates the controversial
- feature. In the case of 0x, there is no rent extraction and no users are given
- special permissions.
-
- 0x protocol is upgradable. Cutting-edge technical capabilities can be integrated
- into 0x via decentralized governance (see section below), eliminating incentives
- to fork off of the original protocol and sacrifice the network effects surrounding
- liquidity that result from the shared protocol and settlement layer.
+ Ethereum and Bitcoin are both open source protocols. Each protocol has been forked, but the
+ resulting clone networks have seen little adoption (as measured by transaction count or market
+ cap). This is because users have little to no incentive to switch over to a clone network if the
+ original has initial network effects and a talented developer team behind it. An exception is in
+ the case that a protocol includes a controversial feature such as a method of rent extraction or
+ a monetary policy that favors one group of users over another (Zcash developer subsidy - for
+ better or worse - resulted in Zclassic). Perceived inequality can provide a strong enough
+ incentive that users will fork the original protocol’s codebase and spin up a new network that
+ eliminates the controversial feature. In the case of 0x, there is no rent extraction and no
+ users are given special permissions. 0x protocol is upgradable. Cutting-edge technical
+ capabilities can be integrated into 0x via decentralized governance (see section below),
+ eliminating incentives to fork off of the original protocol and sacrifice the network effects
+ surrounding liquidity that result from the shared protocol and settlement layer.
</div>
),
},
@@ -180,26 +179,25 @@ const sections: FAQSection[] = [
0x protocol token (ZRX) is utilized in two ways: 1) to solve the{' '}
<a href="https://en.wikipedia.org/wiki/Coordination_game" target="_blank">
coordination problem
- </a> and drive network effects around liquidity, creating a feedback loop
- where early adopters of the protocol benefit from wider adoption and 2) to
- be used for decentralized governance over 0x protocol's update mechanism.
- In more detail:
+ </a>{' '}
+ and drive network effects around liquidity, creating a feedback loop where early adopters of
+ the protocol benefit from wider adoption and 2) to be used for decentralized governance over
+ 0x protocol's update mechanism. In more detail:
</div>
<ul>
<li>
- ZRX tokens are used by Makers and Takers (market participants that generate
- and consume orders, respectively) to pay transaction fees to Relayers
- (entities that host and maintain public order books).
+ ZRX tokens are used by Makers and Takers (market participants that generate and consume
+ orders, respectively) to pay transaction fees to Relayers (entities that host and
+ maintain public order books).
</li>
<li>
- ZRX tokens are used for decentralized governance over 0x protocol’s update
- mechanism which allows its underlying smart contracts to be replaced and
- improved over time. An update mechanism is needed because 0x is built upon
- Ethereum’s rapidly evolving technology stack, decentralized governance is
- needed because 0x protocol’s smart contracts will have access to user funds
- and numerous dApps will need to plug into 0x smart contracts. Decentralized
- governance ensures that this update process is secure and minimizes disruption
- to the network.
+ ZRX tokens are used for decentralized governance over 0x protocol’s update mechanism
+ which allows its underlying smart contracts to be replaced and improved over time. An
+ update mechanism is needed because 0x is built upon Ethereum’s rapidly evolving
+ technology stack, decentralized governance is needed because 0x protocol’s smart
+ contracts will have access to user funds and numerous dApps will need to plug into 0x
+ smart contracts. Decentralized governance ensures that this update process is secure and
+ minimizes disruption to the network.
</li>
</ul>
</div>
@@ -209,9 +207,9 @@ const sections: FAQSection[] = [
prompt: 'Why must transaction fees be denominated in 0x token (ZRX) rather than ETH?',
answer: (
<div>
- 0x protocol’s decentralized update mechanism is analogous to proof-of-stake.
- To maximize the alignment of stakeholder and end user incentives, the staked
- asset must provide utility within the protocol.
+ 0x protocol’s decentralized update mechanism is analogous to proof-of-stake. To maximize the
+ alignment of stakeholder and end user incentives, the staked asset must provide utility within
+ the protocol.
</div>
),
},
@@ -219,10 +217,10 @@ const sections: FAQSection[] = [
prompt: 'How will decentralized governance work?',
answer: (
<div>
- Decentralized governance is an ongoing focus of research; it will involve token
- voting with ZRX. Ultimately the solution will maximize security while also maximizing
- the protocol’s ability to absorb new innovations. Until the governance structure is
- formalized and encoded within 0x DAO, a multi-sig will be used as a placeholder.
+ Decentralized governance is an ongoing focus of research; it will involve token voting with ZRX.
+ Ultimately the solution will maximize security while also maximizing the protocol’s ability to
+ absorb new innovations. Until the governance structure is formalized and encoded within 0x DAO,
+ a multi-sig will be used as a placeholder.
</div>
),
},
@@ -233,27 +231,19 @@ const sections: FAQSection[] = [
questions: [
{
prompt: 'What is the total supply of ZRX tokens?',
- answer: (
- <div>
- 1,000,000,000 ZRX. Fixed supply.
- </div>
- ),
+ answer: <div>1,000,000,000 ZRX. Fixed supply.</div>,
},
{
prompt: 'When is the Token Launch? will there be a pre-sale?',
- answer: (
- <div>
- The token launch will be on August 15th, 2017. There will not be a pre-sale.
- </div>
- ),
+ answer: <div>The token launch will be on August 15th, 2017. There will not be a pre-sale.</div>,
},
{
prompt: 'What will the token launch proceeds be used for?',
answer: (
<div>
- 100% of the proceeds raised in the token launch will be used to fund the development
- of free and open source software, tools and infrastructure that support the protocol
- and surrounding ecosystem. Check out our{' '}
+ 100% of the proceeds raised in the token launch will be used to fund the development of free and
+ open source software, tools and infrastructure that support the protocol and surrounding
+ ecosystem. Check out our{' '}
<a
href="https://docs.google.com/document/d/1_RVa-_bkU92fWRsC8eNy4vYjcTt-WC8GtqyyjbTd-oY"
target="_blank"
@@ -267,66 +257,50 @@ const sections: FAQSection[] = [
prompt: 'What will be the initial distribution of ZRX tokens?',
answer: (
<div>
- <div className="center" style={{width: '100%'}}>
- <img
- style={{width: 350}}
- src="/images/zrx_pie_chart.png"
- />
+ <div className="center" style={{ width: '100%' }}>
+ <img style={{ width: 350 }} src="/images/zrx_pie_chart.png" />
</div>
<div className="py1">
- <div className="bold pb1">
- Token Launch (50%)
- </div>
+ <div className="bold pb1">Token Launch (50%)</div>
<div>
- ZRX is inherently a governance token that plays a critical role in the
- process of upgrading 0x protocol. We are fully committed to formulating
- a functional and theoretically sound governance model and we plan to dedicate
- significant resources to R&D.
+ ZRX is inherently a governance token that plays a critical role in the process of
+ upgrading 0x protocol. We are fully committed to formulating a functional and
+ theoretically sound governance model and we plan to dedicate significant resources to
+ R&D.
</div>
</div>
<div className="py1">
- <div className="bold pb1">
- Retained by 0x (15%)
- </div>
+ <div className="bold pb1">Retained by 0x (15%)</div>
<div>
- The 0x core development team will be able to sustain itself for approximately
- five years using funds raised through the token launch. If 0x protocol
- proves to be as foundational a technology as we believe it to be, the
- retained ZRX tokens will allow the 0x core development team to sustain
- operations beyond the first 5 years.
+ The 0x core development team will be able to sustain itself for approximately five years
+ using funds raised through the token launch. If 0x protocol proves to be as foundational
+ a technology as we believe it to be, the retained ZRX tokens will allow the 0x core
+ development team to sustain operations beyond the first 5 years.
</div>
</div>
<div className="py1">
- <div className="bold pb1">
- Developer Fund (15%)
- </div>
+ <div className="bold pb1">Developer Fund (15%)</div>
<div>
- The Developer Fund will be used to make targeted capital injections
- into high potential projects and teams that are attempting to grow
- the 0x ecosystem, strategic partnerships, hackathon prizes and community
- development activities.
+ The Developer Fund will be used to make targeted capital injections into high potential
+ projects and teams that are attempting to grow the 0x ecosystem, strategic partnerships,
+ hackathon prizes and community development activities.
</div>
</div>
<div className="py1">
- <div className="bold pb1">
- Founding Team (10%)
- </div>
+ <div className="bold pb1">Founding Team (10%)</div>
<div>
- The founding team’s allocation of ZRX will vest over a traditional 4
- year vesting schedule with a one year cliff. We believe this should
- be standard practice for any team that is committed to making their
- project a long term success.
+ The founding team’s allocation of ZRX will vest over a traditional 4 year vesting
+ schedule with a one year cliff. We believe this should be standard practice for any team
+ that is committed to making their project a long term success.
</div>
</div>
<div className="py1">
- <div className="bold pb1">
- Early Backers & Advisors (10%)
- </div>
+ <div className="bold pb1">Early Backers & Advisors (10%)</div>
<div>
- Our backers and advisors have provided capital, resources and guidance
- that have allowed us to fill out our team, setup a robust legal entity
- and build a fully functional product before launching a token. As a result,
- we have a proven track record and can offer a token that holds genuine utility.
+ Our backers and advisors have provided capital, resources and guidance that have allowed
+ us to fill out our team, setup a robust legal entity and build a fully functional
+ product before launching a token. As a result, we have a proven track record and can
+ offer a token that holds genuine utility.
</div>
</div>
</div>
@@ -336,47 +310,39 @@ const sections: FAQSection[] = [
prompt: 'Can I mine ZRX tokens?',
answer: (
<div>
- No, the total supply of ZRX tokens is fixed and there is no continuous issuance
- model. Users that facilitate trading over 0x protocol by operating a Relayer
- earn transaction fees denominated in ZRX; as more trading activity is generated,
- more transaction fees are earned.
+ No, the total supply of ZRX tokens is fixed and there is no continuous issuance model. Users
+ that facilitate trading over 0x protocol by operating a Relayer earn transaction fees
+ denominated in ZRX; as more trading activity is generated, more transaction fees are earned.
</div>
),
},
{
prompt: 'Will there be a lockup period for ZRX tokens sold in the token launch?',
- answer: (
- <div>
- No, ZRX tokens sold in the token launch will immediately be liquid.
- </div>
- ),
+ answer: <div>No, ZRX tokens sold in the token launch will immediately be liquid.</div>,
},
{
prompt: 'Will there be a lockup period for tokens allocated to the founding team?',
answer: (
<div>
- Yes. ZRX tokens allocated to founders, advisors and staff members will be released
- over a 4 year vesting schedule with a 25% cliff upon completion of the initial
- token launch and 25% released each subsequent year in monthly installments. Staff
- members hired after the token launch will have a 4 year vesting schedule with a
- one year cliff.
+ Yes. ZRX tokens allocated to founders, advisors and staff members will be released over a 4 year
+ vesting schedule with a 25% cliff upon completion of the initial token launch and 25% released
+ each subsequent year in monthly installments. Staff members hired after the token launch will
+ have a 4 year vesting schedule with a one year cliff.
</div>
),
},
{
prompt: 'Which cryptocurrencies will be accepted in the token launch?',
- answer: (
- <div>ETH.</div>
- ),
+ answer: <div>ETH.</div>,
},
{
prompt: 'When will 0x be live?',
answer: (
<div>
- An alpha version of 0x has been live on our private test network since January
- 2017. Version 1.0 of 0x protocol will be deployed to the canonical Ethereum
- blockchain after a round of security audits and prior to the public token launch.
- 0x will be using the 0x protocol during our token launch.
+ An alpha version of 0x has been live on our private test network since January 2017. Version 1.0
+ of 0x protocol will be deployed to the canonical Ethereum blockchain after a round of security
+ audits and prior to the public token launch. 0x will be using the 0x protocol during our token
+ launch.
</div>
),
},
@@ -401,19 +367,17 @@ const sections: FAQSection[] = [
questions: [
{
prompt: 'Where is 0x based?',
- answer: (
- <div>
- 0x was founded in SF and is driven by a diverse group of contributors.
- </div>
- ),
+ answer: <div>0x was founded in SF and is driven by a diverse group of contributors.</div>,
},
{
prompt: 'How can I get involved?',
answer: (
<div>
- Join our <a href={constants.URL_ZEROEX_CHAT} target="_blank">Rocket.chat</a>!
- As an open source project, 0x will rely on a worldwide community of passionate
- developers to contribute proposals, ideas and code.
+ Join our{' '}
+ <a href={constants.URL_ZEROEX_CHAT} target="_blank">
+ Rocket.chat
+ </a>! As an open source project, 0x will rely on a worldwide community of passionate developers
+ to contribute proposals, ideas and code.
</div>
),
},
@@ -421,20 +385,15 @@ const sections: FAQSection[] = [
prompt: 'Why the name 0x?',
answer: (
<div>
- 0x is the prefix for hexadecimal numeric constants including Ethereum addresses.
- In a more abstract context, as the first open protocol for exchange 0x represents
- the beginning of the end for the exchange industry’s rent seeking oligopoly:
- zero exchange.
+ 0x is the prefix for hexadecimal numeric constants including Ethereum addresses. In a more
+ abstract context, as the first open protocol for exchange 0x represents the beginning of the end
+ for the exchange industry’s rent seeking oligopoly: zero exchange.
</div>
),
},
{
prompt: 'How do you pronounce 0x?',
- answer: (
- <div>
- We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.
- </div>
- ),
+ answer: <div>We pronounce 0x as “zero-ex,” but you are free to pronounce it however you please.</div>,
},
],
},
@@ -447,20 +406,13 @@ export class FAQ extends React.Component<FAQProps, FAQState> {
public render() {
return (
<div>
- <DocumentTitle title="0x FAQ"/>
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- />
- <div
- id="faq"
- className="mx-auto max-width-4 pt4"
- style={{color: colors.grey800}}
- >
- <h1 className="center" style={{...styles.thin}}>0x FAQ</h1>
- <div className="sm-px2 md-px2 lg-px0 pb4">
- {this._renderSections()}
- </div>
+ <DocumentTitle title="0x FAQ" />
+ <TopBar blockchainIsLoaded={false} location={this.props.location} />
+ <div id="faq" className="mx-auto max-width-4 pt4" style={{ color: colors.grey800 }}>
+ <h1 className="center" style={{ ...styles.thin }}>
+ 0x FAQ
+ </h1>
+ <div className="sm-px2 md-px2 lg-px0 pb4">{this._renderSections()}</div>
</div>
<Footer />
</div>
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 54ae1a592..988c04bc9 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
-import {Card, CardHeader, CardText} from 'material-ui/Card';
+import { Card, CardHeader, CardText } from 'material-ui/Card';
import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
export interface QuestionProps {
prompt: string;
@@ -22,24 +22,22 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
}
public render() {
return (
- <div
- className="py1"
- >
+ <div className="py1">
<Card
initiallyExpanded={this.props.shouldDisplayExpanded}
onExpandChange={this._onExchangeChange.bind(this)}
>
<CardHeader
title={this.props.prompt}
- style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
- titleStyle={{color: colors.darkerGrey}}
+ style={{
+ borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none',
+ }}
+ titleStyle={{ color: colors.darkerGrey }}
actAsExpander={true}
showExpandableButton={true}
/>
<CardText expandable={true}>
- <div style={{lineHeight: 1.4}}>
- {this.props.answer}
- </div>
+ <div style={{ lineHeight: 1.4 }}>{this.props.answer}</div>
</CardText>
</Card>
</div>
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 1e97ae240..ca76497df 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -2,13 +2,13 @@ import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
-import {Link} from 'react-router-dom';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {ScreenWidths, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { ScreenWidths, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
interface BoxContent {
title: string;
@@ -39,22 +39,25 @@ const THROTTLE_TIMEOUT = 100;
const boxContents: BoxContent[] = [
{
title: 'Trustless exchange',
- description: 'Built on Ethereum\'s distributed network with no centralized \
+ description:
+ "Built on Ethereum's distributed network with no centralized \
point of failure and no down time, each trade is settled atomically \
- and without counterparty risk.',
+ and without counterparty risk.",
imageUrl: '/images/landing/distributed_network.png',
classNames: '',
},
{
title: 'Shared liquidity',
- description: 'By sharing a standard API, relayers can easily aggregate liquidity pools, \
+ description:
+ 'By sharing a standard API, relayers can easily aggregate liquidity pools, \
creating network effects around liquidity that compound as more relayers come online.',
imageUrl: '/images/landing/liquidity.png',
classNames: 'mx-auto',
},
{
title: 'Open source',
- description: '0x is open source, permissionless and free to use. Trade directly with a known \
+ description:
+ '0x is open source, permissionless and free to use. Trade directly with a known \
counterparty for free or pay a relayer some ZRX tokens to access their liquidity \
pool.',
imageUrl: '/images/landing/open_source.png',
@@ -155,13 +158,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
public render() {
return (
- <div id="landing" className="clearfix" style={{color: colors.grey500}}>
- <DocumentTitle title="0x Protocol"/>
+ <div id="landing" className="clearfix" style={{ color: colors.grey500 }}>
+ <DocumentTitle title="0x Protocol" />
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
isNightVersion={true}
- style={{backgroundColor: colors.heroGrey, position: 'relative'}}
+ style={{ backgroundColor: colors.heroGrey, position: 'relative' }}
/>
{this._renderHero()}
{this._renderProjects()}
@@ -188,46 +191,43 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: '33px',
height: 38,
};
- const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
+ const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
return (
- <div
- className="clearfix py4"
- style={{backgroundColor: colors.heroGrey}}
- >
- <div
- className="mx-auto max-width-4 clearfix"
- >
+ <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="mx-auto max-width-4 clearfix">
<div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-my4 md-my4 sm-mt2 sm-mb4 clearfix">
<div className="col lg-col-5 md-col-5 col-12 sm-center">
- <img
- src="/images/landing/hero_chip_image.png"
- height={isSmallScreen ? 300 : 395}
- />
+ <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} />
</div>
- <div
- className={left}
- style={{color: colors.white}}
- >
- <div style={{paddingLeft: isSmallScreen ? 0 : 12}}>
+ <div className={left} style={{ color: colors.white }}>
+ <div style={{ paddingLeft: isSmallScreen ? 0 : 12 }}>
<div
className="sm-pb2"
- style={{fontFamily: 'Roboto Mono', fontSize: isSmallScreen ? 26 : 34}}
+ style={{
+ fontFamily: 'Roboto Mono',
+ fontSize: isSmallScreen ? 26 : 34,
+ }}
>
Powering decentralized exchange
</div>
<div
className="pt2 h5 sm-mx-auto"
- style={{maxWidth: 446, fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300}}
+ style={{
+ maxWidth: 446,
+ fontFamily: 'Roboto Mono',
+ lineHeight: 1.7,
+ fontWeight: 300,
+ }}
>
- 0x is an open, permissionless protocol allowing for ERC20 tokens to
- be traded on the Ethereum blockchain.
+ 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on the
+ Ethereum blockchain.
</div>
- <div className="pt3 clearfix sm-mx-auto" style={{maxWidth: 342}}>
+ <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 342 }}>
<div className="lg-pr2 md-pr2 col col-6 sm-center">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
<RaisedButton
- style={{borderRadius: 6, minWidth: 157.36}}
- buttonStyle={{borderRadius: 6}}
+ style={{ borderRadius: 6, minWidth: 157.36 }}
+ buttonStyle={{ borderRadius: 6 }}
labelStyle={buttonLabelStyle}
label="Build on 0x"
onClick={_.noop}
@@ -241,7 +241,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
className="text-decoration-none"
>
<RaisedButton
- style={{borderRadius: 6, minWidth: 150}}
+ style={{ borderRadius: 6, minWidth: 150 }}
buttonStyle={lightButtonStyle}
labelColor="white"
backgroundColor={colors.heroGrey}
@@ -263,18 +263,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
const projectList = _.map(projects, (project: Project, i: number) => {
- const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2));
+ const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2;
return (
- <div
- key={`project-${project.logoFileName}`}
- className={`col col-${colWidth} center`}
- >
+ <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
<div>
- <a
- href={project.projectUrl}
- target="_blank"
- className="text-decoration-none"
- >
+ <a href={project.projectUrl} target="_blank" className="text-decoration-none">
<img
src={`/images/landing/project_logos/${project.logoFileName}`}
height={isSmallScreen ? 60 : 92}
@@ -292,29 +285,26 @@ export class Landing extends React.Component<LandingProps, LandingState> {
letterSpacing: 3,
};
return (
- <div
- className="clearfix py4"
- style={{backgroundColor: colors.projectsGrey}}
- >
+ <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}>
<div className="mx-auto max-width-4 clearfix sm-px3">
- <div
- className="h4 pb3 md-pl3 sm-pl2"
- style={titleStyle}
- >
+ <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}>
Projects building on 0x
</div>
- <div className="clearfix">
- {projectList}
- </div>
+ <div className="clearfix">{projectList}</div>
<div
className="pt3 mx-auto center"
- style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
+ style={{
+ color: colors.landingLinkGrey,
+ fontFamily: 'Roboto Mono',
+ maxWidth: 300,
+ fontSize: 14,
+ }}
>
view the{' '}
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
className="text-decoration-none underline"
- style={{color: colors.landingLinkGrey}}
+ style={{ color: colors.landingLinkGrey }}
>
full list
</Link>
@@ -326,52 +316,41 @@ export class Landing extends React.Component<LandingProps, LandingState> {
private _renderTokenizationSection() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
- <div
- className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2"
- style={{backgroundColor: colors.grey100}}
- >
+ <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}>
<div className="mx-auto max-width-4 py4 clearfix">
- {isSmallScreen &&
- this._renderTokenCloud()
- }
+ {isSmallScreen && this._renderTokenCloud()}
<div className="col lg-col-6 md-col-6 col-12">
- <div className="mx-auto" style={{maxWidth: 385, paddingTop: 7}}>
- <div
- className="lg-h1 md-h1 sm-h2 sm-center sm-pt3"
- style={{fontFamily: 'Roboto Mono'}}
- >
+ <div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}>
+ <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
The world's value is becoming tokenized
</div>
<div
className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h5 sm-center"
- style={{fontFamily: 'Roboto Mono', lineHeight: 1.7}}
+ style={{ fontFamily: 'Roboto Mono', lineHeight: 1.7 }}
>
- {isSmallScreen ?
+ {isSmallScreen ? (
<span>
The Ethereum blockchain is an open, borderless financial system that represents
a wide variety of assets as cryptographic tokens. In the future, most digital
assets and goods will be tokenized.
- </span> :
+ </span>
+ ) : (
<div>
<div>
- The Ethereum blockchain is an open, borderless
- financial system that represents
+ The Ethereum blockchain is an open, borderless financial system that
+ represents
</div>
<div>
- a wide variety of assets as cryptographic tokens.
- In the future, most digital assets and goods will be tokenized.
+ a wide variety of assets as cryptographic tokens. In the future, most
+ digital assets and goods will be tokenized.
</div>
</div>
- }
- </div>
- <div className="flex pt1 sm-px3">
- {this._renderAssetTypes()}
+ )}
</div>
+ <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div>
</div>
</div>
- {!isSmallScreen &&
- this._renderTokenCloud()
- }
+ {!isSmallScreen && this._renderTokenCloud()}
</div>
</div>
);
@@ -379,81 +358,84 @@ export class Landing extends React.Component<LandingProps, LandingState> {
private _renderProtocolSection() {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
- <div
- className="clearfix lg-py4 md-py4 sm-pt4"
- style={{backgroundColor: colors.heroGrey}}
- >
+ <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
<div className="col lg-col-6 md-col-6 col-12 sm-center">
- <img
- src="/images/landing/relayer_diagram.png"
- height={isSmallScreen ? 326 : 426}
- />
+ <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} />
</div>
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
- style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
+ style={{
+ color: colors.beigeWhite,
+ paddingTop: 8,
+ maxWidth: isSmallScreen ? 'none' : 445,
+ }}
>
- <div
- className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
- style={{fontFamily: 'Roboto Mono'}}
- >
- <div>
- Off-chain order relay
- </div>
- <div>
- On-chain settlement
- </div>
+ <div className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" style={{ fontFamily: 'Roboto Mono' }}>
+ <div>Off-chain order relay</div>
+ <div>On-chain settlement</div>
</div>
<div
className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto"
- style={{fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300, maxWidth: 445}}
+ style={{
+ fontFamily: 'Roboto Mono',
+ lineHeight: 1.7,
+ fontWeight: 300,
+ maxWidth: 445,
+ }}
>
- In 0x protocol, orders are transported off-chain, massively reducing gas
- costs and eliminating blockchain bloat. Relayers help broadcast orders and
- collect a fee each time they facilitate a trade. Anyone can build a relayer.
+ In 0x protocol, orders are transported off-chain, massively reducing gas costs and
+ eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time
+ they facilitate a trade. Anyone can build a relayer.
</div>
<div
className="pt3 sm-mx-auto sm-px3"
- style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}}
+ style={{
+ color: colors.landingLinkGrey,
+ maxWidth: isSmallScreen ? 412 : 'none',
+ }}
>
- <div className="flex" style={{fontSize: 18}}>
+ <div className="flex" style={{ fontSize: 18 }}>
<div
className="lg-h4 md-h4 sm-h5"
- style={{letterSpacing: isSmallScreen ? 1 : 3, fontFamily: 'Roboto Mono'}}
+ style={{
+ letterSpacing: isSmallScreen ? 1 : 3,
+ fontFamily: 'Roboto Mono',
+ }}
>
RELAYERS BUILDING ON 0X
</div>
- <div className="h5" style={{marginLeft: isSmallScreen ? 26 : 49}}>
+ <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}>
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
className="text-decoration-none underline"
- style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}}
+ style={{
+ color: colors.landingLinkGrey,
+ fontFamily: 'Roboto Mono',
+ }}
>
view all
</Link>
</div>
</div>
- <div className="lg-flex md-flex sm-clearfix pt3" style={{opacity: 0.4}}>
+ <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}>
<div className="col col-4 sm-center">
- <img
- src="/images/landing/ethfinex.png"
- style={{height: isSmallScreen ? 85 : 107}}
- />
+ <img
+ src="/images/landing/ethfinex.png"
+ style={{ height: isSmallScreen ? 85 : 107 }}
+ />
</div>
- <div
- className="col col-4 center"
- >
- <img
- src="/images/landing/radar_relay.png"
- style={{height: isSmallScreen ? 85 : 107}}
- />
+ <div className="col col-4 center">
+ <img
+ src="/images/landing/radar_relay.png"
+ style={{ height: isSmallScreen ? 85 : 107 }}
+ />
</div>
- <div className="col col-4 sm-center" style={{textAlign: 'right'}}>
- <img
- src="/images/landing/paradex.png"
- style={{height: isSmallScreen ? 85 : 107}}
- />
+ <div className="col col-4 sm-center" style={{ textAlign: 'right' }}>
+ <img
+ src="/images/landing/paradex.png"
+ style={{ height: isSmallScreen ? 85 : 107 }}
+ />
</div>
</div>
</div>
@@ -478,58 +460,45 @@ export class Landing extends React.Component<LandingProps, LandingState> {
maxWidth: isSmallScreen ? 375 : 441,
};
return (
- <div
- className="clearfix lg-pt4 md-pt4"
- style={{backgroundColor: colors.heroGrey}}
- >
+ <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}>
<div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
- {isSmallScreen &&
- this._renderBlockChipImage()
- }
+ {isSmallScreen && this._renderBlockChipImage()}
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
- style={{color: colors.beigeWhite}}
+ style={{ color: colors.beigeWhite }}
>
<div
className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
- style={{fontFamily: 'Roboto Mono'}}
+ style={{ fontFamily: 'Roboto Mono' }}
>
A building block for dApps
</div>
- <div
- className="pb3 pt2 sm-mx-auto sm-center"
- style={descriptionStyle}
- >
+ <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}>
0x protocol is a pluggable building block for dApps that require exchange functionality.
Join the many developers that are already using 0x in their web applications and smart
contracts.
</div>
- <div
- className="sm-mx-auto sm-center"
- style={callToActionStyle}
- >
+ <div className="sm-mx-auto sm-center" style={callToActionStyle}>
Learn how in our{' '}
<Link
to={WebsitePaths.ZeroExJs}
className="text-decoration-none underline"
- style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
+ style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
>
0x.js
- </Link>
- {' '}and{' '}
+ </Link>{' '}
+ and{' '}
<Link
to={WebsitePaths.SmartContracts}
className="text-decoration-none underline"
- style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
+ style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
>
smart contract
- </Link>
- {' '}docs
+ </Link>{' '}
+ docs
</div>
</div>
- {!isSmallScreen &&
- this._renderBlockChipImage()
- }
+ {!isSmallScreen && this._renderBlockChipImage()}
</div>
</div>
);
@@ -538,10 +507,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 sm-center">
- <img
- src="/images/landing/0x_chips.png"
- height={isSmallScreen ? 240 : 368}
- />
+ <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} />
</div>
);
}
@@ -549,10 +515,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 center">
- <img
- src="/images/landing/tokenized_world.png"
- height={isSmallScreen ? 280 : 364.5}
- />
+ <img src="/images/landing/tokenized_world.png" height={isSmallScreen ? 280 : 364.5} />
</div>
);
}
@@ -566,7 +529,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
{
title: 'Traditional assets',
imageUrl: '/images/landing/stocks.png',
- style: {paddingLeft: isSmallScreen ? 41 : 56, paddingRight: isSmallScreen ? 41 : 56},
+ style: {
+ paddingLeft: isSmallScreen ? 41 : 56,
+ paddingRight: isSmallScreen ? 41 : 56,
+ },
},
{
title: 'Digital goods',
@@ -576,18 +542,18 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const assets = _.map(assetTypes, (assetType: AssetType) => {
const style = _.isUndefined(assetType.style) ? {} : assetType.style;
return (
- <div
- key={`asset-${assetType.title}`}
- className="center"
- style={{opacity: 0.8, ...style}}
- >
+ <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}>
<div>
- <img
- src={assetType.imageUrl}
- height="80"
- />
+ <img src={assetType.imageUrl} height="80" />
</div>
- <div style={{fontFamily: 'Roboto Mono', fontSize: 13.5, fontWeight: 400, opacity: 0.75}}>
+ <div
+ style={{
+ fontFamily: 'Roboto Mono',
+ fontSize: 13.5,
+ fontWeight: 400,
+ opacity: 0.75,
+ }}
+ >
{assetType.title}
</div>
</div>
@@ -606,43 +572,24 @@ export class Landing extends React.Component<LandingProps, LandingState> {
};
const boxes = _.map(boxContents, (boxContent: BoxContent) => {
return (
- <div
- key={`box-${boxContent.title}`}
- className="col lg-col-4 md-col-4 col-12 sm-pb4"
- >
- <div
- className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`}
- style={boxStyle}
- >
+ <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4">
+ <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}>
<div>
- <img src={boxContent.imageUrl} style={{height: 210}} />
+ <img src={boxContent.imageUrl} style={{ height: 210 }} />
</div>
- <div
- className="h3"
- style={{color: 'black', fontFamily: 'Roboto Mono'}}
- >
+ <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
{boxContent.title}
</div>
- <div
- className="pt2 pb2"
- style={{fontFamily: 'Roboto Mono', fontSize: 14}}
- >
+ <div className="pt2 pb2" style={{ fontFamily: 'Roboto Mono', fontSize: 14 }}>
{boxContent.description}
</div>
</div>
</div>
);
-
});
return (
- <div
- className="clearfix"
- style={{backgroundColor: colors.heroGrey}}
- >
- <div
- className="mx-auto py4 sm-mt2 clearfix"
- style={{maxWidth: '60em'}}
- >
+ <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="mx-auto py4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
{boxes}
</div>
</div>
@@ -655,7 +602,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
{
imageUrl: '/images/landing/governance_icon.png',
type: 'Decentralized governance',
- description: 'Decentralized organizations use tokens to represent ownership and \
+ description:
+ 'Decentralized organizations use tokens to represent ownership and \
guide their governance logic. 0x allows decentralized organizations \
to seamlessly and safely trade ownership for startup capital.',
projectIconUrls: ['/images/landing/aragon.png'],
@@ -664,7 +612,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
{
imageUrl: '/images/landing/prediction_market_icon.png',
type: 'Prediction markets',
- description: 'Decentralized prediction market platforms generate sets of tokens that \
+ description:
+ 'Decentralized prediction market platforms generate sets of tokens that \
represent a financial stake in the outcomes of real-world events. 0x allows \
these tokens to be instantly tradable.',
projectIconUrls: ['/images/landing/augur.png'],
@@ -673,7 +622,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
{
imageUrl: '/images/landing/stable_tokens_icon.png',
type: 'Stable tokens',
- description: 'Novel economic constructs such as stable coins require efficient, liquid \
+ description:
+ 'Novel economic constructs such as stable coins require efficient, liquid \
markets to succeed. 0x will facilitate the underlying economic mechanisms \
that allow these tokens to remain stable.',
projectIconUrls: ['/images/landing/maker.png'],
@@ -682,22 +632,28 @@ export class Landing extends React.Component<LandingProps, LandingState> {
{
imageUrl: '/images/landing/loans_icon.png',
type: 'Decentralized loans',
- description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \
+ description:
+ 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \
0x enables an ecosystem of lenders to self-organize and efficiently determine \
market prices for all outstanding loans.',
projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'],
classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6',
- style: {width: 291, float: 'right', marginTop: !isSmallScreen ? 38 : 0},
+ style: {
+ width: 291,
+ float: 'right',
+ marginTop: !isSmallScreen ? 38 : 0,
+ },
},
{
imageUrl: '/images/landing/fund_management_icon.png',
type: 'Fund management',
- description: 'Decentralized fund management limits fund managers to investing in pre-agreed \
+ description:
+ 'Decentralized fund management limits fund managers to investing in pre-agreed \
upon asset classes. Embedding 0x into fund management smart contracts enables \
them to enforce these security constraints.',
projectIconUrls: ['/images/landing/melonport.png'],
classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
- style: {width: 291, marginTop: !isSmallScreen ? 38 : 0},
+ style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
},
];
@@ -722,22 +678,21 @@ export class Landing extends React.Component<LandingProps, LandingState> {
key={`useCase-${useCase.type}`}
className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`}
>
- <div
- className="relative p2 pb2 sm-mx-auto"
- style={useCaseBoxStyle}
- >
- <div
- className="absolute center"
- style={{top: -35, width: 'calc(100% - 32px)'}}
- >
- <img src={useCase.imageUrl} style={{height: 50}} />
+ <div className="relative p2 pb2 sm-mx-auto" style={useCaseBoxStyle}>
+ <div className="absolute center" style={{ top: -35, width: 'calc(100% - 32px)' }}>
+ <img src={useCase.imageUrl} style={{ height: 50 }} />
</div>
<div className="pt2 center" style={typeStyle}>
{useCase.type}
</div>
<div
className="pt2"
- style={{lineHeight: 1.5, fontSize: 14, overflow: 'hidden', height: 104}}
+ style={{
+ lineHeight: 1.5,
+ fontSize: 14,
+ overflow: 'hidden',
+ height: 104,
+ }}
>
{useCase.description}
</div>
@@ -746,14 +701,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
});
return (
- <div
- className="clearfix pb4 lg-pt2 md-pt2 sm-pt4"
- style={{backgroundColor: colors.heroGrey}}
- >
- <div
- className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
- style={{maxWidth: '67em'}}
- >
+ <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}>
{cases}
</div>
</div>
@@ -772,26 +721,26 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: '33px',
height: 49,
};
- const callToActionClassNames = 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \
+ const callToActionClassNames =
+ 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \
lg-right-align md-right-align sm-center sm-px3 h4';
return (
- <div
- className="clearfix pb4"
- style={{backgroundColor: colors.heroGrey}}
- >
- <div
- className="mx-auto max-width-4 pb4 mb3 clearfix"
- >
+ <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}>
+ <div className="mx-auto max-width-4 pb4 mb3 clearfix">
<div
className={callToActionClassNames}
- style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}}
+ style={{
+ fontFamily: 'Roboto Mono',
+ color: colors.white,
+ lineHeight: isSmallScreen ? 1.7 : 3,
+ }}
>
Get started on building the decentralized future
</div>
<div className="col lg-col-4 md-col-4 col-12 sm-center sm-pt2">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
<RaisedButton
- style={{borderRadius: 6, minWidth: 150}}
+ style={{ borderRadius: 6, minWidth: 150 }}
buttonStyle={lightButtonStyle}
labelColor={colors.white}
backgroundColor={colors.heroGrey}
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index bdf9ad688..ff277c377 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -1,8 +1,8 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {Footer} from 'ts/components/footer';
-import {TopBar} from 'ts/components/top_bar';
-import {Styles} from 'ts/types';
+import { Footer } from 'ts/components/footer';
+import { TopBar } from 'ts/components/top_bar';
+import { Styles } from 'ts/types';
export interface NotFoundProps {
location: Location;
@@ -20,15 +20,12 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
public render() {
return (
<div>
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- />
+ <TopBar blockchainIsLoaded={false} location={this.props.location} />
<div className="mx-auto max-width-4 py4">
<div className="center py4">
<div className="py4">
<div className="py4">
- <h1 style={{...styles.thin}}>404 Not Found</h1>
+ <h1 style={{ ...styles.thin }}>404 Not Found</h1>
<div className="py1">
<div className="py3">
Hm... looks like we couldn't find what you are looking for.
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
index 0c1e8f4b7..db5be1f59 100644
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ b/packages/website/ts/pages/shared/anchor_title.tsx
@@ -1,16 +1,16 @@
import * as React from 'react';
-import {Link as ScrollLink} from 'react-scroll';
-import {HeaderSizes, Styles} from 'ts/types';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Link as ScrollLink } from 'react-scroll';
+import { HeaderSizes, Styles } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
-const headerSizeToScrollOffset: {[headerSize: string]: number} = {
+const headerSizeToScrollOffset: { [headerSize: string]: number } = {
h2: -20,
h3: 0,
};
interface AnchorTitleProps {
- title: string|React.ReactNode;
+ title: string | React.ReactNode;
id: string;
headerSize: HeaderSizes;
shouldShowAnchor: boolean;
@@ -62,11 +62,8 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
opacity = this.state.isHovering ? 0.6 : 1;
}
return (
- <div className="relative flex" style={{...styles[this.props.headerSize], ...styles.headers}}>
- <div
- className="inline-block"
- style={{paddingRight: 4}}
- >
+ <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}>
+ <div className="inline-block" style={{ paddingRight: 4 }}>
{this.props.title}
</div>
<ScrollLink
@@ -78,7 +75,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt
<i
className="zmdi zmdi-link"
onClick={utils.setUrlHash.bind(utils, this.props.id)}
- style={{...styles.anchor, opacity}}
+ style={{ ...styles.anchor, opacity }}
onMouseOver={this._setHoverState.bind(this, true)}
onMouseOut={this._setHoverState.bind(this, false)}
/>
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index aded15f0c..be96fda16 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -17,12 +17,8 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
}
public render() {
return (
- <span style={{fontSize: 16}}>
- <HighLight
- className={this.props.language || 'javascript'}
- >
- {this.props.literal}
- </HighLight>
+ <span style={{ fontSize: 16 }}>
+ <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
</span>
);
}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index e81920fc3..5487dc8cc 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import * as ReactMarkdown from 'react-markdown';
-import {Element as ScrollElement} from 'react-scroll';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {MarkdownCodeBlock} from 'ts/pages/shared/markdown_code_block';
-import {HeaderSizes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { Element as ScrollElement } from 'react-scroll';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
+import { HeaderSizes } from 'ts/types';
+import { utils } from 'ts/utils/utils';
interface MarkdownSectionProps {
sectionName: string;
@@ -41,7 +41,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
<ScrollElement name={id}>
<div className="clearfix">
<div className="col lg-col-8 md-col-8 sm-col-12">
- <span style={{textTransform: 'capitalize'}}>
+ <span style={{ textTransform: 'capitalize' }}>
<AnchorTitle
headerSize={this.props.headerSize}
title={sectionName}
@@ -51,20 +51,17 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
</span>
</div>
<div className="col col-4 sm-hide xs-hide py2 right-align">
- {!_.isUndefined(this.props.githubLink) &&
+ {!_.isUndefined(this.props.githubLink) && (
<RaisedButton
href={this.props.githubLink}
target="_blank"
label="Edit on Github"
- icon={<i className="zmdi zmdi-github" style={{fontSize: 23}} />}
+ icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
/>
- }
+ )}
</div>
</div>
- <ReactMarkdown
- source={this.props.markdownContent}
- renderers={{CodeBlock: MarkdownCodeBlock}}
- />
+ <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
</ScrollElement>
</div>
);
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 6dc194010..849c33504 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,15 +1,15 @@
import * as _ from 'lodash';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import {Link as ScrollLink} from 'react-scroll';
-import {VersionDropDown} from 'ts/pages/shared/version_drop_down';
-import {MenuSubsectionsBySection, Styles} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Link as ScrollLink } from 'react-scroll';
+import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
+import { MenuSubsectionsBySection, Styles } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
interface NestedSidebarMenuProps {
- topLevelMenu: {[topLevel: string]: string[]};
+ topLevelMenu: { [topLevel: string]: string[] };
menuSubsectionsBySection: MenuSubsectionsBySection;
shouldDisplaySectionHeaders?: boolean;
onMenuItemClick?: () => void;
@@ -44,20 +44,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
if (this.props.shouldDisplaySectionHeaders) {
const id = utils.getIdFromName(sectionName);
return (
- <div
- key={`section-${sectionName}`}
- className="py1"
- >
+ <div key={`section-${sectionName}`} className="py1">
<ScrollLink
to={id}
offset={-20}
duration={constants.DOCS_SCROLL_DURATION_MS}
containerId={constants.DOCS_CONTAINER_ID}
>
- <div
- style={{color: colors.grey, cursor: 'pointer'}}
- className="pb1"
- >
+ <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1">
{finalSectionName.toUpperCase()}
</div>
</ScrollLink>
@@ -65,34 +59,29 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
</div>
);
} else {
- return (
- <div key={`section-${sectionName}`} >
- {this._renderMenuItems(menuItems)}
- </div>
- );
+ return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
}
});
return (
<div>
{!_.isUndefined(this.props.versions) &&
- !_.isUndefined(this.props.selectedVersion) &&
- !_.isUndefined(this.props.docPath) &&
- <VersionDropDown
- selectedVersion={this.props.selectedVersion}
- versions={this.props.versions}
- docPath={this.props.docPath}
- />
- }
+ !_.isUndefined(this.props.selectedVersion) &&
+ !_.isUndefined(this.props.docPath) && (
+ <VersionDropDown
+ selectedVersion={this.props.selectedVersion}
+ versions={this.props.versions}
+ docPath={this.props.docPath}
+ />
+ )}
{navigation}
</div>
);
}
private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
- const menuItemStyles = this.props.shouldDisplaySectionHeaders ?
- styles.menuItemWithHeaders :
- styles.menuItemWithoutHeaders;
- const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ?
- styles.menuItemInnerDivWithHeaders : {};
+ const menuItemStyles = this.props.shouldDisplaySectionHeaders
+ ? styles.menuItemWithHeaders
+ : styles.menuItemWithoutHeaders;
+ const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
const menuItems = _.map(menuItemNames, menuItemName => {
const id = utils.getIdFromName(menuItemName);
return (
@@ -109,9 +98,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
style={menuItemStyles}
innerDivStyle={menuItemInnerDivStyles}
>
- <span style={{textTransform: 'capitalize'}}>
- {menuItemName}
- </span>
+ <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
</MenuItem>
</ScrollLink>
{this._renderMenuItemSubsections(menuItemName)}
@@ -128,30 +115,34 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
}
private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
return (
- <ul style={{margin: 0, listStyleType: 'none', paddingLeft: 0}} key={menuItemName}>
- {_.map(entityNames, entityName => {
- const name = `${menuItemName}-${entityName}`;
- const id = utils.getIdFromName(name);
- return (
- <li key={`menuItem-${entityName}`}>
- <ScrollLink
- to={id}
- offset={0}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- onTouchTap={this._onMenuItemClick.bind(this, name)}
- >
- <MenuItem
+ <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}>
+ {_.map(entityNames, entityName => {
+ const name = `${menuItemName}-${entityName}`;
+ const id = utils.getIdFromName(name);
+ return (
+ <li key={`menuItem-${entityName}`}>
+ <ScrollLink
+ to={id}
+ offset={0}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.DOCS_CONTAINER_ID}
onTouchTap={this._onMenuItemClick.bind(this, name)}
- style={{minHeight: 35}}
- innerDivStyle={{paddingLeft: 36, fontSize: 14, lineHeight: '35px'}}
>
- {entityName}
- </MenuItem>
- </ScrollLink>
- </li>
- );
- })}
+ <MenuItem
+ onTouchTap={this._onMenuItemClick.bind(this, name)}
+ style={{ minHeight: 35 }}
+ innerDivStyle={{
+ paddingLeft: 36,
+ fontSize: 14,
+ lineHeight: '35px',
+ }}
+ >
+ {entityName}
+ </MenuItem>
+ </ScrollLink>
+ </li>
+ );
+ })}
</ul>
);
}
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index 5ea9fc681..a5f5f52cf 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
-import {Element as ScrollElement} from 'react-scroll';
-import {AnchorTitle} from 'ts/pages/shared/anchor_title';
-import {HeaderSizes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { Element as ScrollElement } from 'react-scroll';
+import { AnchorTitle } from 'ts/pages/shared/anchor_title';
+import { HeaderSizes } from 'ts/types';
+import { utils } from 'ts/utils/utils';
interface SectionHeaderProps {
sectionName: string;
@@ -34,7 +34,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
<ScrollElement name={id}>
<AnchorTitle
headerSize={this.props.headerSize}
- title={<span style={{textTransform: 'capitalize'}}>{sectionName}</span>}
+ title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index 8d3322d72..b922e1048 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -14,7 +14,7 @@ interface VersionDropDownState {}
export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
public render() {
return (
- <div className="mx-auto" style={{width: 120}}>
+ <div className="mx-auto" style={{ width: 120 }}>
<DropDownMenu
maxHeight={300}
value={this.props.selectedVersion}
@@ -27,13 +27,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
}
private _renderDropDownItems() {
const items = _.map(this.props.versions, version => {
- return (
- <MenuItem
- key={version}
- value={version}
- primaryText={`v${version}`}
- />
- );
+ return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
});
return items;
}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 72da94a20..d065614ba 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -2,18 +2,16 @@ import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
-import {
- scroller,
-} from 'react-scroll';
-import {TopBar} from 'ts/components/top_bar';
-import {MarkdownSection} from 'ts/pages/shared/markdown_section';
-import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
-import {SectionHeader} from 'ts/pages/shared/section_header';
-import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { scroller } from 'react-scroll';
+import { TopBar } from 'ts/components/top_bar';
+import { MarkdownSection } from 'ts/pages/shared/markdown_section';
+import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
+import { SectionHeader } from 'ts/pages/shared/section_header';
+import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
@@ -62,40 +60,37 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
}
public render() {
const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
- ? {}
- : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+ ? {}
+ : this._getMenuSubsectionsBySection(this.state.articlesBySection);
return (
<div>
- <DocumentTitle title="0x Protocol Wiki"/>
+ <DocumentTitle title="0x Protocol Wiki" />
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
menuSubsectionsBySection={menuSubsectionsBySection}
shouldFullWidth={true}
/>
- {_.isUndefined(this.state.articlesBySection) ?
- <div
- className="col col-12"
- style={styles.mainContainers}
- >
+ {_.isUndefined(this.state.articlesBySection) ? (
+ <div className="col col-12" style={styles.mainContainers}>
<div
className="relative sm-px2 sm-pt2 sm-m1"
- style={{height: 122, top: '50%', transform: 'translateY(-50%)'}}
+ style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
>
<div className="center pb2">
<CircularProgress size={40} thickness={5} />
</div>
- <div className="center pt2" style={{paddingBottom: 11}}>Loading wiki...</div>
+ <div className="center pt2" style={{ paddingBottom: 11 }}>
+ Loading wiki...
+ </div>
</div>
- </div> :
- <div
- className="mx-auto flex"
- style={{color: colors.grey800, height: 43}}
- >
+ </div>
+ ) : (
+ <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}>
<div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide">
<div
className="border-right absolute pt2"
- style={{...styles.menuContainer, ...styles.mainContainers}}
+ style={{ ...styles.menuContainer, ...styles.mainContainers }}
>
<NestedSidebarMenu
topLevelMenu={menuSubsectionsBySection}
@@ -105,24 +100,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
</div>
</div>
<div className="relative col lg-col-9 md-col-9 sm-col-12 col-12">
- <div
- id="documentation"
- style={styles.mainContainers}
- className="absolute"
- >
+ <div id="documentation" style={styles.mainContainers} className="absolute">
<div id="0xProtocolWiki" />
<h1 className="md-pl2 sm-pl3">
<a href={constants.URL_GITHUB_WIKI} target="_blank">
0x Protocol Wiki
</a>
</h1>
- <div id="wiki">
- {this._renderWikiArticles()}
- </div>
+ <div id="wiki">{this._renderWikiArticles()}</div>
</div>
</div>
</div>
- }
+ )}
</div>
);
}
@@ -143,12 +132,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
headerSize={HeaderSizes.H2}
githubLink={githubLink}
/>
- <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}>
+ <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}>
See a way to make this article better?{' '}
- <a
- href={githubLink}
- target="_blank"
- >
+ <a href={githubLink} target="_blank">
Edit here →
</a>
</div>
@@ -156,10 +142,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
);
});
return (
- <div
- key={`section-${sectionName}`}
- className="py2 pr3 md-pl2 sm-pl3"
- >
+ <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
<SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} />
{renderedArticles}
</div>
@@ -172,7 +155,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
hash = '0xProtocolWiki'; // scroll to the top
}
- scroller.scrollTo(hash, {duration: 0, offset: 0, containerId: 'documentation'});
+ scroller.scrollTo(hash, {
+ duration: 0,
+ offset: 0,
+ containerId: 'documentation',
+ });
}
private async _fetchArticlesBySectionAsync(): Promise<void> {
const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
@@ -192,15 +179,18 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
return;
}
const articlesBySection = await response.json();
- this.setState({
- articlesBySection,
- }, () => {
- this._scrollToHash();
- });
+ this.setState(
+ {
+ articlesBySection,
+ },
+ () => {
+ this._scrollToHash();
+ },
+ );
}
private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
const sectionNames = _.keys(articlesBySection);
- const menuSubsectionsBySection: {[section: string]: string[]} = {};
+ const menuSubsectionsBySection: { [section: string]: string[] } = {};
for (const sectionName of sectionNames) {
const articles = articlesBySection[sectionName];
const articleNames = _.map(articles, article => article.title);
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index 0723fae30..184ef0a05 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -1,6 +1,6 @@
import BigNumber from 'bignumber.js';
-import {Dispatch} from 'redux';
-import {State} from 'ts/redux/reducer';
+import { Dispatch } from 'redux';
+import { State } from 'ts/redux/reducer';
import {
ActionTypes,
AssetToken,
@@ -98,44 +98,44 @@ export class Dispatcher {
}
public encounteredBlockchainError(err: BlockchainErrs) {
this._dispatch({
- data: err,
- type: ActionTypes.BlockchainErrEncountered,
- });
+ data: err,
+ type: ActionTypes.BlockchainErrEncountered,
+ });
}
public updateBlockchainIsLoaded(isLoaded: boolean) {
this._dispatch({
- data: isLoaded,
- type: ActionTypes.UpdateBlockchainIsLoaded,
- });
+ data: isLoaded,
+ type: ActionTypes.UpdateBlockchainIsLoaded,
+ });
}
public addTokenToTokenByAddress(token: Token) {
this._dispatch({
- data: token,
- type: ActionTypes.AddTokenToTokenByAddress,
- });
+ data: token,
+ type: ActionTypes.AddTokenToTokenByAddress,
+ });
}
public removeTokenToTokenByAddress(token: Token) {
this._dispatch({
- data: token,
- type: ActionTypes.RemoveTokenFromTokenByAddress,
- });
+ data: token,
+ type: ActionTypes.RemoveTokenFromTokenByAddress,
+ });
}
public clearTokenByAddress() {
this._dispatch({
type: ActionTypes.ClearTokenByAddress,
- });
+ });
}
public updateTokenByAddress(tokens: Token[]) {
this._dispatch({
- data: tokens,
- type: ActionTypes.UpdateTokenByAddress,
- });
+ data: tokens,
+ type: ActionTypes.UpdateTokenByAddress,
+ });
}
public updateTokenStateByAddress(tokenStateByAddress: TokenStateByAddress) {
this._dispatch({
- data: tokenStateByAddress,
- type: ActionTypes.UpdateTokenStateByAddress,
- });
+ data: tokenStateByAddress,
+ type: ActionTypes.UpdateTokenStateByAddress,
+ });
}
public removeFromTokenStateByAddress(tokenAddress: string) {
this._dispatch({
@@ -146,8 +146,8 @@ export class Dispatcher {
public replaceTokenAllowanceByAddress(address: string, allowance: BigNumber) {
this._dispatch({
data: {
- address,
- allowance,
+ address,
+ allowance,
},
type: ActionTypes.ReplaceTokenAllowanceByAddress,
});
@@ -172,21 +172,21 @@ export class Dispatcher {
}
public updateSignatureData(signatureData: SignatureData) {
this._dispatch({
- data: signatureData,
- type: ActionTypes.UpdateOrderSignatureData,
- });
+ data: signatureData,
+ type: ActionTypes.UpdateOrderSignatureData,
+ });
}
public updateUserEtherBalance(balance: BigNumber) {
this._dispatch({
- data: balance,
- type: ActionTypes.UpdateUserEtherBalance,
- });
+ data: balance,
+ type: ActionTypes.UpdateUserEtherBalance,
+ });
}
public updateNetworkId(networkId: number) {
this._dispatch({
- data: networkId,
- type: ActionTypes.UpdateNetworkId,
- });
+ data: networkId,
+ type: ActionTypes.UpdateNetworkId,
+ });
}
public updateOrderFillAmount(amount: BigNumber) {
this._dispatch({
@@ -210,7 +210,7 @@ export class Dispatcher {
}
// Shared
- public showFlashMessage(msg: string|React.ReactNode) {
+ public showFlashMessage(msg: string | React.ReactNode) {
this._dispatch({
data: msg,
type: ActionTypes.ShowFlashMessage,
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index ccf87ae18..cc7d57a3a 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -1,4 +1,4 @@
-import {ZeroEx} from '0x.js';
+import { ZeroEx } from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import {
@@ -15,7 +15,7 @@ import {
TokenState,
TokenStateByAddress,
} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
// Instead of defaulting the docs version to an empty string, we pre-populate it with
// a valid version value. This does not need to be updated however, since onLoad, it
@@ -48,7 +48,7 @@ export interface State {
availableDocVersions: string[];
// Shared
- flashMessage: string|React.ReactNode;
+ flashMessage: string | React.ReactNode;
providerType: ProviderType;
injectedProviderName: string;
}
diff --git a/packages/website/ts/schemas/order_schema.ts b/packages/website/ts/schemas/order_schema.ts
index 61b93d273..bfbf9eb8b 100644
--- a/packages/website/ts/schemas/order_schema.ts
+++ b/packages/website/ts/schemas/order_schema.ts
@@ -1,24 +1,15 @@
export const orderSchema = {
id: '/Order',
properties: {
- maker: {$ref: '/OrderTaker'},
- taker: {$ref: '/OrderTaker'},
- salt: {type: 'string'},
- signature: {$ref: '/SignatureData'},
- expiration: {type: 'string'},
- feeRecipient: {type: 'string'},
- exchangeContract: {type: 'string'},
- networkId: {type: 'number'},
+ maker: { $ref: '/OrderTaker' },
+ taker: { $ref: '/OrderTaker' },
+ salt: { type: 'string' },
+ signature: { $ref: '/SignatureData' },
+ expiration: { type: 'string' },
+ feeRecipient: { type: 'string' },
+ exchangeContract: { type: 'string' },
+ networkId: { type: 'number' },
},
- required: [
- 'maker',
- 'taker',
- 'salt',
- 'signature',
- 'expiration',
- 'feeRecipient',
- 'exchangeContract',
- 'networkId',
- ],
+ required: ['maker', 'taker', 'salt', 'signature', 'expiration', 'feeRecipient', 'exchangeContract', 'networkId'],
type: 'object',
};
diff --git a/packages/website/ts/schemas/order_taker_schema.ts b/packages/website/ts/schemas/order_taker_schema.ts
index 6b484a60d..c784c29c5 100644
--- a/packages/website/ts/schemas/order_taker_schema.ts
+++ b/packages/website/ts/schemas/order_taker_schema.ts
@@ -1,10 +1,10 @@
export const orderTakerSchema = {
id: '/OrderTaker',
properties: {
- address: {type: 'string'},
- token: {$ref: '/Token'},
- amount: {type: 'string'},
- feeAmount: {type: 'string'},
+ address: { type: 'string' },
+ token: { $ref: '/Token' },
+ amount: { type: 'string' },
+ feeAmount: { type: 'string' },
},
required: ['address', 'token', 'amount', 'feeAmount'],
type: 'object',
diff --git a/packages/website/ts/schemas/signature_data_schema.ts b/packages/website/ts/schemas/signature_data_schema.ts
index d208cc438..8d3f15926 100644
--- a/packages/website/ts/schemas/signature_data_schema.ts
+++ b/packages/website/ts/schemas/signature_data_schema.ts
@@ -1,10 +1,10 @@
export const signatureDataSchema = {
id: '/SignatureData',
properties: {
- hash: {type: 'string'},
- r: {type: 'string'},
- s: {type: 'string'},
- v: {type: 'number'},
+ hash: { type: 'string' },
+ r: { type: 'string' },
+ s: { type: 'string' },
+ v: { type: 'number' },
},
required: ['hash', 'r', 's', 'v'],
type: 'object',
diff --git a/packages/website/ts/schemas/token_schema.ts b/packages/website/ts/schemas/token_schema.ts
index c15f57429..92b53a463 100644
--- a/packages/website/ts/schemas/token_schema.ts
+++ b/packages/website/ts/schemas/token_schema.ts
@@ -1,10 +1,10 @@
export const tokenSchema = {
id: '/Token',
properties: {
- name: {type: 'string'},
- symbol: {type: 'string'},
- decimals: {type: 'number'},
- address: {type: 'string'},
+ name: { type: 'string' },
+ symbol: { type: 'string' },
+ decimals: { type: 'number' },
+ address: { type: 'string' },
},
required: ['name', 'symbol', 'decimals', 'address'],
type: 'object',
diff --git a/packages/website/ts/schemas/validator.ts b/packages/website/ts/schemas/validator.ts
index 832b093e5..5177501c6 100644
--- a/packages/website/ts/schemas/validator.ts
+++ b/packages/website/ts/schemas/validator.ts
@@ -1,8 +1,8 @@
-import {Schema as JSONSchema, Validator} from 'jsonschema';
-import {orderSchema} from 'ts/schemas/order_schema';
-import {orderTakerSchema} from 'ts/schemas/order_taker_schema';
-import {signatureDataSchema} from 'ts/schemas/signature_data_schema';
-import {tokenSchema} from 'ts/schemas/token_schema';
+import { Schema as JSONSchema, Validator } from 'jsonschema';
+import { orderSchema } from 'ts/schemas/order_schema';
+import { orderTakerSchema } from 'ts/schemas/order_taker_schema';
+import { signatureDataSchema } from 'ts/schemas/signature_data_schema';
+import { tokenSchema } from 'ts/schemas/token_schema';
export class SchemaValidator {
private _validator: Validator;
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index e4b05367f..86b6f5f90 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -221,9 +221,9 @@ export interface ContractEvent {
export type InputErrMsg = React.ReactNode | string | undefined;
export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void;
export enum ScreenWidths {
- Sm = 'SM',
- Md = 'MD',
- Lg = 'LG',
+ Sm = 'SM',
+ Md = 'MD',
+ Lg = 'LG',
}
export enum AlertTypes {
@@ -232,8 +232,8 @@ export enum AlertTypes {
}
export enum EtherscanLinkSuffixes {
- Address = 'address',
- Tx = 'tx',
+ Address = 'address',
+ Tx = 'tx',
}
export enum BlockchainErrs {
@@ -243,23 +243,23 @@ export enum BlockchainErrs {
}
export enum BlockchainCallErrs {
- ContractDoesNotExist = 'CONTRACT_DOES_NOT_EXIST',
- UserHasNoAssociatedAddresses = 'USER_HAS_NO_ASSOCIATED_ADDRESSES',
- UnhandledError = 'UNHANDLED_ERROR',
- TokenAddressIsInvalid = 'TOKEN_ADDRESS_IS_INVALID',
+ ContractDoesNotExist = 'CONTRACT_DOES_NOT_EXIST',
+ UserHasNoAssociatedAddresses = 'USER_HAS_NO_ASSOCIATED_ADDRESSES',
+ UnhandledError = 'UNHANDLED_ERROR',
+ TokenAddressIsInvalid = 'TOKEN_ADDRESS_IS_INVALID',
}
// Exception: We don't make the values uppercase because these KindString's need to
// match up those returned by TypeDoc
export enum KindString {
- Constructor = 'Constructor',
- Property = 'Property',
- Method = 'Method',
- Interface = 'Interface',
- TypeAlias = 'Type alias',
- Variable = 'Variable',
- Function = 'Function',
- Enumeration = 'Enumeration',
+ Constructor = 'Constructor',
+ Property = 'Property',
+ Method = 'Method',
+ Interface = 'Interface',
+ TypeAlias = 'Type alias',
+ Variable = 'Variable',
+ Function = 'Function',
+ Enumeration = 'Enumeration',
}
export interface EnumValue {
@@ -336,8 +336,8 @@ export interface DocAgnosticFormat {
export interface DocSection {
comment: string;
- constructors: Array<TypescriptMethod|SolidityMethod>;
- methods: Array<TypescriptMethod|SolidityMethod>;
+ constructors: Array<TypescriptMethod | SolidityMethod>;
+ methods: Array<TypescriptMethod | SolidityMethod>;
properties: Property[];
types: CustomType[];
events?: Event[];
@@ -364,7 +364,7 @@ export interface Property {
export interface BaseMethod {
isConstructor: boolean;
name: string;
- returnComment?: string|undefined;
+ returnComment?: string | undefined;
callPath: string;
parameters: Parameter[];
returnType: Type;
@@ -457,8 +457,8 @@ export interface MenuSubsectionsBySection {
}
export enum ProviderType {
- Injected = 'INJECTED',
- Ledger = 'LEDGER',
+ Injected = 'INJECTED',
+ Ledger = 'LEDGER',
}
export interface Fact {
@@ -479,8 +479,11 @@ interface LedgerCommunication {
close_async: () => Promise<void>;
}
export interface LedgerEthConnection {
- getAddress_async: (derivationPath: string, askForDeviceConfirmation: boolean,
- shouldGetChainCode: boolean) => Promise<LedgerGetAddressResult>;
+ getAddress_async: (
+ derivationPath: string,
+ askForDeviceConfirmation: boolean,
+ shouldGetChainCode: boolean,
+ ) => Promise<LedgerGetAddressResult>;
signPersonalMessage_async: (derivationPath: string, messageHex: string) => Promise<LedgerSignResult>;
signTransaction_async: (derivationPath: string, txHex: string) => Promise<LedgerSignResult>;
comm: LedgerCommunication;
@@ -636,19 +639,19 @@ export interface SectionsMap {
}
export interface DocsInfoConfig {
- displayName: string;
- packageUrl: string;
- websitePath: string;
- docsJsonRoot: string;
- menu: DocsMenu;
- sections: SectionsMap;
- sectionNameToMarkdown: {[sectionName: string]: string};
- visibleConstructors: string[];
- convertToDocAgnosticFormatFn: (docObj: DoxityDocObj|TypeDocNode, docsInfo?: any) => DocAgnosticFormat;
- subPackageName?: string;
- publicTypes?: string[];
- sectionNameToModulePath?: {[sectionName: string]: string[]};
- menuSubsectionToVersionWhenIntroduced?: {[sectionName: string]: string};
+ displayName: string;
+ packageUrl: string;
+ websitePath: string;
+ docsJsonRoot: string;
+ menu: DocsMenu;
+ sections: SectionsMap;
+ sectionNameToMarkdown: { [sectionName: string]: string };
+ visibleConstructors: string[];
+ convertToDocAgnosticFormatFn: (docObj: DoxityDocObj | TypeDocNode, docsInfo?: any) => DocAgnosticFormat;
+ subPackageName?: string;
+ publicTypes?: string[];
+ sectionNameToModulePath?: { [sectionName: string]: string[] };
+ menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string };
}
export interface TimestampMsRange {
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
index c65a3a622..58ce667e3 100644
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/website/ts/utils/colors.ts
@@ -1,4 +1,4 @@
-import {colors as materialUiColors} from 'material-ui/styles';
+import { colors as materialUiColors } from 'material-ui/styles';
export const colors = {
...materialUiColors,
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 4a05799b8..52b400d57 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -9,11 +9,10 @@ import {
} from 'ts/types';
const BASE_URL = window.location.origin;
-const isDevelopment = _.includes([
- 'https://0xproject.localhost:3572',
- 'https://localhost:3572',
- 'https://127.0.0.1',
- ], BASE_URL);
+const isDevelopment = _.includes(
+ ['https://0xproject.localhost:3572', 'https://localhost:3572', 'https://127.0.0.1'],
+ BASE_URL,
+);
const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
export const configs = {
@@ -50,46 +49,46 @@ export const configs = {
DOMAIN_PRODUCTION: '0xproject.com',
ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION,
ICON_URL_BY_SYMBOL: {
- 'REP': '/images/token_icons/augur.png',
- 'DGD': '/images/token_icons/digixdao.png',
- 'WETH': '/images/token_icons/ether_erc20.png',
- 'MLN': '/images/token_icons/melon.png',
- 'GNT': '/images/token_icons/golem.png',
- 'MKR': '/images/token_icons/makerdao.png',
- 'ZRX': '/images/token_icons/zero_ex.png',
- 'ANT': '/images/token_icons/aragon.png',
- 'BNT': '/images/token_icons/bancor.png',
- 'BAT': '/images/token_icons/basicattentiontoken.png',
- 'CVC': '/images/token_icons/civic.png',
- 'EOS': '/images/token_icons/eos.png',
- 'FUN': '/images/token_icons/funfair.png',
- 'GNO': '/images/token_icons/gnosis.png',
- 'ICN': '/images/token_icons/iconomi.png',
- 'OMG': '/images/token_icons/omisego.png',
- 'SNT': '/images/token_icons/status.png',
- 'STORJ': '/images/token_icons/storjcoinx.png',
- 'PAY': '/images/token_icons/tenx.png',
- 'QTUM': '/images/token_icons/qtum.png',
- 'DNT': '/images/token_icons/district0x.png',
- 'SNGLS': '/images/token_icons/singularity.png',
- 'EDG': '/images/token_icons/edgeless.png',
+ REP: '/images/token_icons/augur.png',
+ DGD: '/images/token_icons/digixdao.png',
+ WETH: '/images/token_icons/ether_erc20.png',
+ MLN: '/images/token_icons/melon.png',
+ GNT: '/images/token_icons/golem.png',
+ MKR: '/images/token_icons/makerdao.png',
+ ZRX: '/images/token_icons/zero_ex.png',
+ ANT: '/images/token_icons/aragon.png',
+ BNT: '/images/token_icons/bancor.png',
+ BAT: '/images/token_icons/basicattentiontoken.png',
+ CVC: '/images/token_icons/civic.png',
+ EOS: '/images/token_icons/eos.png',
+ FUN: '/images/token_icons/funfair.png',
+ GNO: '/images/token_icons/gnosis.png',
+ ICN: '/images/token_icons/iconomi.png',
+ OMG: '/images/token_icons/omisego.png',
+ SNT: '/images/token_icons/status.png',
+ STORJ: '/images/token_icons/storjcoinx.png',
+ PAY: '/images/token_icons/tenx.png',
+ QTUM: '/images/token_icons/qtum.png',
+ DNT: '/images/token_icons/district0x.png',
+ SNGLS: '/images/token_icons/singularity.png',
+ EDG: '/images/token_icons/edgeless.png',
'1ST': '/images/token_icons/firstblood.jpg',
- 'WINGS': '/images/token_icons/wings.png',
- 'BQX': '/images/token_icons/bitquence.png',
- 'LUN': '/images/token_icons/lunyr.png',
- 'RLC': '/images/token_icons/iexec.png',
- 'MCO': '/images/token_icons/monaco.png',
- 'ADT': '/images/token_icons/adtoken.png',
- 'CFI': '/images/token_icons/cofound-it.png',
- 'ROL': '/images/token_icons/etheroll.png',
- 'WGNT': '/images/token_icons/golem.png',
- 'MTL': '/images/token_icons/metal.png',
- 'NMR': '/images/token_icons/numeraire.png',
- 'SAN': '/images/token_icons/santiment.png',
- 'TAAS': '/images/token_icons/taas.png',
- 'TKN': '/images/token_icons/tokencard.png',
- 'TRST': '/images/token_icons/trust.png',
- } as {[symbol: string]: string},
+ WINGS: '/images/token_icons/wings.png',
+ BQX: '/images/token_icons/bitquence.png',
+ LUN: '/images/token_icons/lunyr.png',
+ RLC: '/images/token_icons/iexec.png',
+ MCO: '/images/token_icons/monaco.png',
+ ADT: '/images/token_icons/adtoken.png',
+ CFI: '/images/token_icons/cofound-it.png',
+ ROL: '/images/token_icons/etheroll.png',
+ WGNT: '/images/token_icons/golem.png',
+ MTL: '/images/token_icons/metal.png',
+ NMR: '/images/token_icons/numeraire.png',
+ SAN: '/images/token_icons/santiment.png',
+ TAAS: '/images/token_icons/taas.png',
+ TKN: '/images/token_icons/tokencard.png',
+ TRST: '/images/token_icons/trust.png',
+ } as { [symbol: string]: string },
IS_MAINNET_ENABLED: true,
LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
@@ -98,7 +97,7 @@ export const configs = {
NEW_WRAPPED_ETHERS: {
1: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
42: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
- } as {[networkId: string]: string},
+ } as { [networkId: string]: string },
OUTDATED_WRAPPED_ETHERS: [
{
42: {
@@ -119,12 +118,8 @@ export const configs = {
] as OutdatedWrappedEtherByNetworkId[],
// The order matters. We first try first node and only then fall back to others.
PUBLIC_NODE_URLS_BY_NETWORK_ID: {
- [1]: [
- `https://mainnet.infura.io/${INFURA_API_KEY}`,
- ],
- [42]: [
- `https://kovan.infura.io/${INFURA_API_KEY}`,
- ],
+ [1]: [`https://mainnet.infura.io/${INFURA_API_KEY}`],
+ [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`],
} as PublicNodeUrlsByNetworkId,
SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
SYMBOLS_OF_MINTABLE_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index facaf5dd6..073745ef6 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -1,7 +1,5 @@
import BigNumber from 'bignumber.js';
-import {
- Networks,
-} from 'ts/types';
+import { Networks } from 'ts/types';
export const constants = {
DECIMAL_PLACES_ETH: 18,
@@ -12,7 +10,7 @@ export const constants = {
1: 4145578,
42: 3117574,
50: 0,
- } as {[networkId: number]: number},
+ } as { [networkId: number]: number },
HOME_SCROLL_DURATION_MS: 500,
HTTP_NO_CONTENT_STATUS_CODE: 204,
LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER: 'didAcceptPortalDisclaimer',
@@ -28,13 +26,13 @@ export const constants = {
3: Networks.ropsten,
4: Networks.rinkeby,
42: Networks.kovan,
- } as {[symbol: number]: string},
+ } as { [symbol: number]: string },
NETWORK_ID_BY_NAME: {
[Networks.mainnet]: 1,
[Networks.ropsten]: 3,
[Networks.rinkeby]: 4,
[Networks.kovan]: 42,
- } as {[networkName: string]: number},
+ } as { [networkName: string]: number },
NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
PROVIDER_NAME_LEDGER: 'Ledger',
PROVIDER_NAME_METAMASK: 'Metamask',
diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts
index ea210a3fa..0bc670d76 100644
--- a/packages/website/ts/utils/doc_utils.ts
+++ b/packages/website/ts/utils/doc_utils.ts
@@ -1,12 +1,11 @@
import findVersions = require('find-versions');
import * as _ from 'lodash';
-import {DoxityDocObj, S3FileObject, TypeDocNode, VersionToFileName} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { DoxityDocObj, S3FileObject, TypeDocNode, VersionToFileName } from 'ts/types';
+import { utils } from 'ts/utils/utils';
import convert = require('xml-js');
export const docUtils = {
- async getVersionToFileNameAsync(s3DocJsonRoot: string):
- Promise<VersionToFileName> {
+ async getVersionToFileNameAsync(s3DocJsonRoot: string): Promise<VersionToFileName> {
const versionFileNames = await this.getVersionFileNamesAsync(s3DocJsonRoot);
const versionToFileName: VersionToFileName = {};
_.each(versionFileNames, fileName => {
@@ -28,16 +27,16 @@ export const docUtils = {
compact: true,
});
const responseObj = JSON.parse(responseJSONString);
- const fileObjs: S3FileObject[] = (_.isArray(responseObj.ListBucketResult.Contents)) ?
- responseObj.ListBucketResult.Contents as S3FileObject[] :
- [responseObj.ListBucketResult.Contents];
+ const fileObjs: S3FileObject[] = _.isArray(responseObj.ListBucketResult.Contents)
+ ? (responseObj.ListBucketResult.Contents as S3FileObject[])
+ : [responseObj.ListBucketResult.Contents];
const versionFileNames = _.map(fileObjs, fileObj => {
return fileObj.Key._text;
});
return versionFileNames;
},
- async getJSONDocFileAsync(fileName: string, s3DocJsonRoot: string): Promise<TypeDocNode|DoxityDocObj> {
+ async getJSONDocFileAsync(fileName: string, s3DocJsonRoot: string): Promise<TypeDocNode | DoxityDocObj> {
const endpoint = `${s3DocJsonRoot}/${fileName}`;
const response = await fetch(endpoint);
if (response.status !== 200) {
diff --git a/packages/website/ts/utils/doxity_utils.ts b/packages/website/ts/utils/doxity_utils.ts
index 26e555b16..5f1d02132 100644
--- a/packages/website/ts/utils/doxity_utils.ts
+++ b/packages/website/ts/utils/doxity_utils.ts
@@ -36,41 +36,46 @@ export const doxityUtils = {
constructors.push(constructor);
}
- const doxityMethods: DoxityAbiDoc[] = _.filter<DoxityAbiDoc>
- (doxityContractObj.abiDocs, (abiDoc: DoxityAbiDoc) => {
- return this._isMethod(abiDoc);
- });
- const methods: SolidityMethod[] = _.map<DoxityAbiDoc, SolidityMethod>(doxityMethods,
+ const doxityMethods: DoxityAbiDoc[] = _.filter<DoxityAbiDoc>(
+ doxityContractObj.abiDocs,
+ (abiDoc: DoxityAbiDoc) => {
+ return this._isMethod(abiDoc);
+ },
+ );
+ const methods: SolidityMethod[] = _.map<DoxityAbiDoc, SolidityMethod>(
+ doxityMethods,
(doxityMethod: DoxityAbiDoc) => {
- // We assume that none of our functions returns more then a single value
- const outputIfExists = !_.isUndefined(doxityMethod.outputs) ?
- doxityMethod.outputs[0] :
- undefined;
- const returnTypeIfExists = !_.isUndefined(outputIfExists) ?
- this._convertType(outputIfExists.type) :
- undefined;
- // For ZRXToken, we want to convert it to zrxToken, rather then simply zRXToken
- const callPath = contractName !== 'ZRXToken' ?
- `${contractName[0].toLowerCase()}${contractName.slice(1)}.` :
- `${contractName.slice(0, 3).toLowerCase()}${contractName.slice(3)}.`;
- const method = {
- isConstructor: false,
- isConstant: doxityMethod.constant,
- isPayable: doxityMethod.payable,
- name: doxityMethod.name,
- comment: doxityMethod.details,
- returnComment: doxityMethod.return,
- callPath,
- parameters: this._convertParameters(doxityMethod.inputs),
- returnType: returnTypeIfExists,
- };
- return method;
- });
+ // We assume that none of our functions returns more then a single value
+ const outputIfExists = !_.isUndefined(doxityMethod.outputs) ? doxityMethod.outputs[0] : undefined;
+ const returnTypeIfExists = !_.isUndefined(outputIfExists)
+ ? this._convertType(outputIfExists.type)
+ : undefined;
+ // For ZRXToken, we want to convert it to zrxToken, rather then simply zRXToken
+ const callPath =
+ contractName !== 'ZRXToken'
+ ? `${contractName[0].toLowerCase()}${contractName.slice(1)}.`
+ : `${contractName.slice(0, 3).toLowerCase()}${contractName.slice(3)}.`;
+ const method = {
+ isConstructor: false,
+ isConstant: doxityMethod.constant,
+ isPayable: doxityMethod.payable,
+ name: doxityMethod.name,
+ comment: doxityMethod.details,
+ returnComment: doxityMethod.return,
+ callPath,
+ parameters: this._convertParameters(doxityMethod.inputs),
+ returnType: returnTypeIfExists,
+ };
+ return method;
+ },
+ );
- const doxityProperties: DoxityAbiDoc[] = _.filter<DoxityAbiDoc>
- (doxityContractObj.abiDocs, (abiDoc: DoxityAbiDoc) => {
- return this._isProperty(abiDoc);
- });
+ const doxityProperties: DoxityAbiDoc[] = _.filter<DoxityAbiDoc>(
+ doxityContractObj.abiDocs,
+ (abiDoc: DoxityAbiDoc) => {
+ return this._isProperty(abiDoc);
+ },
+ );
const properties = _.map<DoxityAbiDoc, Property>(doxityProperties, (doxityProperty: DoxityAbiDoc) => {
// We assume that none of our functions return more then a single return value
let typeName = doxityProperty.outputs[0].type;
@@ -87,7 +92,8 @@ export const doxityUtils = {
});
const doxityEvents = _.filter(
- doxityContractObj.abiDocs, (abiDoc: DoxityAbiDoc) => abiDoc.type === AbiTypes.Event,
+ doxityContractObj.abiDocs,
+ (abiDoc: DoxityAbiDoc) => abiDoc.type === AbiTypes.Event,
);
const events = _.map(doxityEvents, doxityEvent => {
const event = {
diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts
index 67be117e0..0bd247c5b 100644
--- a/packages/website/ts/utils/error_reporter.ts
+++ b/packages/website/ts/utils/error_reporter.ts
@@ -1,7 +1,7 @@
-import {Environments} from 'ts/types';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Environments } from 'ts/types';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
// Suggested way to include Rollbar with Webpack
// https://github.com/rollbar/rollbar.js/tree/master/examples/webpack
@@ -23,7 +23,7 @@ const rollbarConfig = {
'TypeError: Failed to fetch',
'Exchange has not been deployed to detected network (network/artifact mismatch)',
// Source: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/7VU0_VvC7mE
- 'undefined is not an object (evaluating \'__gCrWeb.autofill.extractForms\')',
+ "undefined is not an object (evaluating '__gCrWeb.autofill.extractForms')",
// Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging
'SecurityError (DOM Exception 18)',
],
diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts
index 60c58f595..d73e80606 100644
--- a/packages/website/ts/utils/mui_theme.ts
+++ b/packages/website/ts/utils/mui_theme.ts
@@ -1,5 +1,5 @@
-import {getMuiTheme} from 'material-ui/styles';
-import {colors} from 'ts/utils/colors';
+import { getMuiTheme } from 'material-ui/styles';
+import { colors } from 'ts/utils/colors';
export const muiTheme = getMuiTheme({
appBar: {
diff --git a/packages/website/ts/utils/typedoc_utils.ts b/packages/website/ts/utils/typedoc_utils.ts
index ed8834a87..11ec8da58 100644
--- a/packages/website/ts/utils/typedoc_utils.ts
+++ b/packages/website/ts/utils/typedoc_utils.ts
@@ -1,5 +1,5 @@
import * as _ from 'lodash';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
import {
CustomType,
CustomTypeChild,
@@ -16,15 +16,17 @@ import {
TypeParameter,
TypescriptMethod,
} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
export const typeDocUtils = {
isType(entity: TypeDocNode): boolean {
- return entity.kindString === KindString.Interface ||
- entity.kindString === KindString.Function ||
- entity.kindString === KindString.TypeAlias ||
- entity.kindString === KindString.Variable ||
- entity.kindString === KindString.Enumeration;
+ return (
+ entity.kindString === KindString.Interface ||
+ entity.kindString === KindString.Function ||
+ entity.kindString === KindString.TypeAlias ||
+ entity.kindString === KindString.Variable ||
+ entity.kindString === KindString.Enumeration
+ );
},
isMethod(entity: TypeDocNode): boolean {
return entity.kindString === KindString.Method;
@@ -38,8 +40,10 @@ export const typeDocUtils = {
isPrivateOrProtectedProperty(propertyName: string): boolean {
return _.startsWith(propertyName, '_');
},
- getModuleDefinitionBySectionNameIfExists(versionDocObj: TypeDocNode, modulePaths: string[]):
- TypeDocNode|undefined {
+ getModuleDefinitionBySectionNameIfExists(
+ versionDocObj: TypeDocNode,
+ modulePaths: string[],
+ ): TypeDocNode | undefined {
const modules = versionDocObj.children;
for (const mod of modules) {
if (_.includes(modulePaths, mod.name)) {
@@ -59,7 +63,8 @@ export const typeDocUtils = {
return; // no-op
}
const packageDefinitionIfExists = typeDocUtils.getModuleDefinitionBySectionNameIfExists(
- typeDocJson, modulePathsIfExists,
+ typeDocJson,
+ modulePathsIfExists,
);
if (_.isUndefined(packageDefinitionIfExists)) {
return; // no-op
@@ -99,7 +104,11 @@ export const typeDocUtils = {
case KindString.Constructor:
isConstructor = true;
const constructor = typeDocUtils._convertMethod(
- entity, isConstructor, docsInfo.sections, sectionName, docsInfo.subPackageName,
+ entity,
+ isConstructor,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
);
docSection.constructors.push(constructor);
break;
@@ -108,7 +117,11 @@ export const typeDocUtils = {
if (entity.flags.isPublic) {
isConstructor = false;
const method = typeDocUtils._convertMethod(
- entity, isConstructor, docsInfo.sections, sectionName, docsInfo.subPackageName,
+ entity,
+ isConstructor,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
);
docSection.methods.push(method);
}
@@ -117,7 +130,11 @@ export const typeDocUtils = {
case KindString.Property:
if (!typeDocUtils.isPrivateOrProtectedProperty(entity.name)) {
const property = typeDocUtils._convertProperty(
- entity, docsInfo.sections, sectionName, docsInfo.subPackageName);
+ entity,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
+ );
docSection.properties.push(property);
}
break;
@@ -129,7 +146,11 @@ export const typeDocUtils = {
case KindString.TypeAlias:
if (docsInfo.isPublicType(entity.name)) {
const customType = typeDocUtils._convertCustomType(
- entity, docsInfo.sections, sectionName, docsInfo.subPackageName);
+ entity,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
+ );
docSection.types.push(customType);
}
break;
@@ -140,35 +161,40 @@ export const typeDocUtils = {
});
return docSection;
},
- _convertCustomType(entity: TypeDocNode, sections: SectionsMap, sectionName: string,
- subPackageName: string): CustomType {
- const typeIfExists = !_.isUndefined(entity.type) ?
- typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName) :
- undefined;
+ _convertCustomType(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): CustomType {
+ const typeIfExists = !_.isUndefined(entity.type)
+ ? typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName)
+ : undefined;
const isConstructor = false;
- const methodIfExists = !_.isUndefined(entity.declaration) ?
- typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName) :
- undefined;
- const indexSignatureIfExists = !_.isUndefined(entity.indexSignature) ?
- typeDocUtils._convertIndexSignature(entity.indexSignature[0], sections, sectionName, subPackageName) :
- undefined;
- const commentIfExists = !_.isUndefined(entity.comment) && !_.isUndefined(entity.comment.shortText) ?
- entity.comment.shortText :
- undefined;
+ const methodIfExists = !_.isUndefined(entity.declaration)
+ ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName)
+ : undefined;
+ const indexSignatureIfExists = !_.isUndefined(entity.indexSignature)
+ ? typeDocUtils._convertIndexSignature(entity.indexSignature[0], sections, sectionName, subPackageName)
+ : undefined;
+ const commentIfExists =
+ !_.isUndefined(entity.comment) && !_.isUndefined(entity.comment.shortText)
+ ? entity.comment.shortText
+ : undefined;
- const childrenIfExist = !_.isUndefined(entity.children) ?
- _.map(entity.children, (child: TypeDocNode) => {
- const childTypeIfExists = !_.isUndefined(child.type) ?
- typeDocUtils._convertType(child.type, sections, sectionName, subPackageName) :
- undefined;
- const c: CustomTypeChild = {
- name: child.name,
- type: childTypeIfExists,
- defaultValue: child.defaultValue,
- };
- return c;
- }) :
- undefined;
+ const childrenIfExist = !_.isUndefined(entity.children)
+ ? _.map(entity.children, (child: TypeDocNode) => {
+ const childTypeIfExists = !_.isUndefined(child.type)
+ ? typeDocUtils._convertType(child.type, sections, sectionName, subPackageName)
+ : undefined;
+ const c: CustomTypeChild = {
+ name: child.name,
+ type: childTypeIfExists,
+ defaultValue: child.defaultValue,
+ };
+ return c;
+ })
+ : undefined;
const customType = {
name: entity.name,
@@ -182,8 +208,12 @@ export const typeDocUtils = {
};
return customType;
},
- _convertIndexSignature(entity: TypeDocNode, sections: SectionsMap, sectionName: string,
- subPackageName: string): IndexSignature {
+ _convertIndexSignature(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): IndexSignature {
const key = entity.parameters[0];
const indexSignature = {
keyName: key.name,
@@ -192,8 +222,12 @@ export const typeDocUtils = {
};
return indexSignature;
},
- _convertProperty(entity: TypeDocNode, sections: SectionsMap, sectionName: string,
- subPackageName: string): Property {
+ _convertProperty(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): Property {
const source = entity.sources[0];
const commentIfExists = !_.isUndefined(entity.comment) ? entity.comment.shortText : undefined;
const property = {
@@ -208,7 +242,11 @@ export const typeDocUtils = {
return property;
},
_convertMethod(
- entity: TypeDocNode, isConstructor: boolean, sections: SectionsMap, sectionName: string, subPackageName: string,
+ entity: TypeDocNode,
+ isConstructor: boolean,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
): TypescriptMethod {
const signature = entity.signatures[0];
const source = entity.sources[0];
@@ -222,9 +260,10 @@ export const typeDocUtils = {
callPath = '';
} else if (subPackageName === '0x.js') {
const topLevelInterface = isStatic ? 'ZeroEx.' : 'zeroEx.';
- callPath = (!_.isUndefined(sections.zeroEx) && sectionName !== sections.zeroEx) ?
- `${topLevelInterface}${sectionName}.` :
- topLevelInterface;
+ callPath =
+ !_.isUndefined(sections.zeroEx) && sectionName !== sections.zeroEx
+ ? `${topLevelInterface}${sectionName}.`
+ : topLevelInterface;
} else {
callPath = `${sectionName}.`;
}
@@ -233,10 +272,9 @@ export const typeDocUtils = {
return typeDocUtils._convertParameter(param, sections, sectionName, subPackageName);
});
const returnType = typeDocUtils._convertType(signature.type, sections, sectionName, subPackageName);
- const typeParameter = _.isUndefined(signature.typeParameter) ?
- undefined :
- typeDocUtils._convertTypeParameter(
- signature.typeParameter[0], sections, sectionName, subPackageName);
+ const typeParameter = _.isUndefined(signature.typeParameter)
+ ? undefined
+ : typeDocUtils._convertTypeParameter(signature.typeParameter[0], sections, sectionName, subPackageName);
const method = {
isConstructor,
@@ -255,8 +293,12 @@ export const typeDocUtils = {
};
return method;
},
- _convertTypeParameter(entity: TypeDocNode, sections: SectionsMap, sectionName: string,
- subPackageName: string): TypeParameter {
+ _convertTypeParameter(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): TypeParameter {
const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName);
const parameter = {
name: entity.name,
@@ -264,8 +306,12 @@ export const typeDocUtils = {
};
return parameter;
},
- _convertParameter(entity: TypeDocNode, sections: SectionsMap, sectionName: string,
- subPackageName: string): Parameter {
+ _convertParameter(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): Parameter {
let comment = '<No comment>';
if (entity.comment && entity.comment.shortText) {
comment = entity.comment.shortText;
@@ -273,9 +319,7 @@ export const typeDocUtils = {
comment = entity.comment.text;
}
- const isOptional = !_.isUndefined(entity.flags.isOptional) ?
- entity.flags.isOptional :
- false;
+ const isOptional = !_.isUndefined(entity.flags.isOptional) ? entity.flags.isOptional : false;
const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName);
@@ -296,16 +340,16 @@ export const typeDocUtils = {
});
const isConstructor = false;
- const methodIfExists = !_.isUndefined(entity.declaration) ?
- typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName) :
- undefined;
+ const methodIfExists = !_.isUndefined(entity.declaration)
+ ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName)
+ : undefined;
- const elementTypeIfExists = !_.isUndefined(entity.elementType) ?
- {
- name: entity.elementType.name,
- typeDocType: entity.elementType.type,
- } :
- undefined;
+ const elementTypeIfExists = !_.isUndefined(entity.elementType)
+ ? {
+ name: entity.elementType.name,
+ typeDocType: entity.elementType.type,
+ }
+ : undefined;
const type = {
name: entity.name,
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 36cc8f77b..1148ef1bb 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -1,4 +1,4 @@
-import {ExchangeContractErrs, ZeroExError} from '0x.js';
+import { ExchangeContractErrs, ZeroExError } from '0x.js';
import BigNumber from 'bignumber.js';
import deepEqual = require('deep-equal');
import isMobile = require('is-mobile');
@@ -15,8 +15,8 @@ import {
Token,
TokenByAddress,
} from 'ts/types';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
import * as u2f from 'ts/vendor/u2f_api';
const LG_MIN_EM = 64;
@@ -58,10 +58,20 @@ export const utils = {
const formattedDate: string = m.format('h:MMa MMMM D YYYY');
return formattedDate;
},
- generateOrder(networkId: number, exchangeContract: string, sideToAssetToken: SideToAssetToken,
- orderExpiryTimestamp: BigNumber, orderTakerAddress: string, orderMakerAddress: string,
- makerFee: BigNumber, takerFee: BigNumber, feeRecipient: string,
- signatureData: SignatureData, tokenByAddress: TokenByAddress, orderSalt: BigNumber): Order {
+ generateOrder(
+ networkId: number,
+ exchangeContract: string,
+ sideToAssetToken: SideToAssetToken,
+ orderExpiryTimestamp: BigNumber,
+ orderTakerAddress: string,
+ orderMakerAddress: string,
+ makerFee: BigNumber,
+ takerFee: BigNumber,
+ feeRecipient: string,
+ signatureData: SignatureData,
+ tokenByAddress: TokenByAddress,
+ orderSalt: BigNumber,
+ ): Order {
const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address];
const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address];
const order = {
@@ -104,7 +114,7 @@ export const utils = {
async sleepAsync(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
},
- deepEqual(actual: any, expected: any, opts?: {strict: boolean}) {
+ deepEqual(actual: any, expected: any, opts?: { strict: boolean }) {
return deepEqual(actual, expected, opts);
},
getColSize(items: number) {
@@ -148,7 +158,7 @@ export const utils = {
window.location.hash = anchorId;
},
async isU2FSupportedAsync(): Promise<boolean> {
- const w = (window as any);
+ const w = window as any;
return new Promise((resolve: (isSupported: boolean) => void) => {
if (w.u2f && !w.u2f.getApiVersion) {
// u2f object was found (Firefox with extension)
@@ -176,9 +186,10 @@ export const utils = {
const metamaskDenialErrMsg = 'User denied message';
const paritySignerDenialErrMsg = 'Request has been rejected';
const ledgerDenialErrMsg = 'Invalid status 6985';
- const isUserDeniedErrMsg = _.includes(errMsg, metamaskDenialErrMsg) ||
- _.includes(errMsg, paritySignerDenialErrMsg) ||
- _.includes(errMsg, ledgerDenialErrMsg);
+ const isUserDeniedErrMsg =
+ _.includes(errMsg, metamaskDenialErrMsg) ||
+ _.includes(errMsg, paritySignerDenialErrMsg) ||
+ _.includes(errMsg, ledgerDenialErrMsg);
return isUserDeniedErrMsg;
},
getCurrentEnvironment() {
@@ -206,14 +217,18 @@ export const utils = {
return true; // Since it's registered, it is the canonical token
}
const registeredTokens = _.filter(tokens, t => t.isRegistered);
- const tokenWithSameNameIfExists = _.find(registeredTokens, {name: token.name});
+ const tokenWithSameNameIfExists = _.find(registeredTokens, {
+ name: token.name,
+ });
const isUniqueName = _.isUndefined(tokenWithSameNameIfExists);
- const tokenWithSameSymbolIfExists = _.find(registeredTokens, {name: token.symbol});
+ const tokenWithSameSymbolIfExists = _.find(registeredTokens, {
+ name: token.symbol,
+ });
const isUniqueSymbol = _.isUndefined(tokenWithSameSymbolIfExists);
return isUniqueName && isUniqueSymbol;
},
- zeroExErrToHumanReadableErrMsg(error: ZeroExError|ExchangeContractErrs, takerAddress: string): string {
- const ZeroExErrorToHumanReadableError: {[error: string]: string} = {
+ zeroExErrToHumanReadableErrMsg(error: ZeroExError | ExchangeContractErrs, takerAddress: string): string {
+ const ZeroExErrorToHumanReadableError: { [error: string]: string } = {
[ZeroExError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist',
[ZeroExError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist',
[ZeroExError.TokenTransferProxyContractDoesNotExist]: 'TokenTransferProxy contract does not exist',
@@ -228,37 +243,37 @@ export const utils = {
[ZeroExError.OutOfGas]: 'Transaction ran out of gas',
[ZeroExError.NoNetworkId]: 'No network id detected',
};
- const exchangeContractErrorToHumanReadableError: {[error: string]: string} = {
+ const exchangeContractErrorToHumanReadableError: {
+ [error: string]: string;
+ } = {
[ExchangeContractErrs.OrderFillExpired]: 'This order has expired',
[ExchangeContractErrs.OrderCancelExpired]: 'This order has expired',
- [ExchangeContractErrs.OrderCancelAmountZero]: 'Order cancel amount can\'t be 0',
+ [ExchangeContractErrs.OrderCancelAmountZero]: "Order cancel amount can't be 0",
[ExchangeContractErrs.OrderAlreadyCancelledOrFilled]:
- 'This order has already been completely filled or cancelled',
- [ExchangeContractErrs.OrderFillAmountZero]: 'Order fill amount can\'t be 0',
+ 'This order has already been completely filled or cancelled',
+ [ExchangeContractErrs.OrderFillAmountZero]: "Order fill amount can't be 0",
[ExchangeContractErrs.OrderRemainingFillAmountZero]:
- 'This order has already been completely filled or cancelled',
+ 'This order has already been completely filled or cancelled',
[ExchangeContractErrs.OrderFillRoundingError]: 'Rounding error will occur when filling this order',
[ExchangeContractErrs.InsufficientTakerBalance]:
- 'Taker no longer has a sufficient balance to complete this order',
+ 'Taker no longer has a sufficient balance to complete this order',
[ExchangeContractErrs.InsufficientTakerAllowance]:
- 'Taker no longer has a sufficient allowance to complete this order',
+ 'Taker no longer has a sufficient allowance to complete this order',
[ExchangeContractErrs.InsufficientMakerBalance]:
- 'Maker no longer has a sufficient balance to complete this order',
+ 'Maker no longer has a sufficient balance to complete this order',
[ExchangeContractErrs.InsufficientMakerAllowance]:
- 'Maker no longer has a sufficient allowance to complete this order',
+ 'Maker no longer has a sufficient allowance to complete this order',
[ExchangeContractErrs.InsufficientTakerFeeBalance]: 'Taker no longer has a sufficient balance to pay fees',
[ExchangeContractErrs.InsufficientTakerFeeAllowance]:
- 'Taker no longer has a sufficient allowance to pay fees',
+ 'Taker no longer has a sufficient allowance to pay fees',
[ExchangeContractErrs.InsufficientMakerFeeBalance]: 'Maker no longer has a sufficient balance to pay fees',
[ExchangeContractErrs.InsufficientMakerFeeAllowance]:
- 'Maker no longer has a sufficient allowance to pay fees',
- [ExchangeContractErrs.TransactionSenderIsNotFillOrderTaker]:
- `This order can only be filled by ${takerAddress}`,
- [ExchangeContractErrs.InsufficientRemainingFillAmount]:
- 'Insufficient remaining fill amount',
+ 'Maker no longer has a sufficient allowance to pay fees',
+ [ExchangeContractErrs.TransactionSenderIsNotFillOrderTaker]: `This order can only be filled by ${takerAddress}`,
+ [ExchangeContractErrs.InsufficientRemainingFillAmount]: 'Insufficient remaining fill amount',
};
- const humanReadableErrorMsg = exchangeContractErrorToHumanReadableError[error] ||
- ZeroExErrorToHumanReadableError[error];
+ const humanReadableErrorMsg =
+ exchangeContractErrorToHumanReadableError[error] || ZeroExErrorToHumanReadableError[error];
return humanReadableErrorMsg;
},
};
diff --git a/packages/website/ts/web3_wrapper.ts b/packages/website/ts/web3_wrapper.ts
index 0dd24fde1..232f12138 100644
--- a/packages/website/ts/web3_wrapper.ts
+++ b/packages/website/ts/web3_wrapper.ts
@@ -1,7 +1,7 @@
-import {intervalUtils, promisify} from '@0xproject/utils';
+import { intervalUtils, promisify } from '@0xproject/utils';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { Dispatcher } from 'ts/redux/dispatcher';
import * as Web3 from 'web3';
export class Web3Wrapper {
@@ -12,8 +12,12 @@ export class Web3Wrapper {
private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
private _prevUserEtherBalanceInEth: BigNumber;
private _prevUserAddress: string;
- constructor(dispatcher: Dispatcher, provider: Web3.Provider, networkIdIfExists: number,
- shouldPollUserAddress: boolean) {
+ constructor(
+ dispatcher: Dispatcher,
+ provider: Web3.Provider,
+ networkIdIfExists: number,
+ shouldPollUserAddress: boolean,
+ ) {
this._dispatcher = dispatcher;
this._prevNetworkId = networkIdIfExists;
this._shouldPollUserAddress = shouldPollUserAddress;
@@ -36,7 +40,7 @@ export class Web3Wrapper {
if (_.isEmpty(addresses)) {
return '';
}
- return (addresses)[0];
+ return addresses[0];
}
public async getNodeVersionAsync(): Promise<string> {
const nodeVersion = await promisify<string>(this._web3.version.getNode)();
@@ -71,7 +75,7 @@ export class Web3Wrapper {
return signData;
}
public async getBlockTimestampAsync(blockHash: string): Promise<number> {
- const {timestamp} = await promisify<Web3.BlockWithoutTransactionData>(this._web3.eth.getBlock)(blockHash);
+ const { timestamp } = await promisify<Web3.BlockWithoutTransactionData>(this._web3.eth.getBlock)(blockHash);
return timestamp;
}
public destroy() {