aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-01-30 20:21:01 +0800
committerFabio Berger <me@fabioberger.com>2018-01-30 20:21:01 +0800
commit93a5b3f457c1211676296840c285759007a55500 (patch)
treed1682b657c207f447748e08550095bafc79b6997 /packages/website/ts
parent4242176d291f54212797de9f5df80b1346724ebb (diff)
downloaddexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.tar
dexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.tar.gz
dexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.tar.bz2
dexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.tar.lz
dexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.tar.xz
dexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.tar.zst
dexon-sol-tools-93a5b3f457c1211676296840c285759007a55500.zip
Fix prettier
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/blockchain.ts1504
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx282
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx290
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx460
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx52
-rw-r--r--packages/website/ts/components/dialogs/send_dialog.tsx200
-rw-r--r--packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx160
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx70
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx46
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx208
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx674
-rw-r--r--packages/website/ts/components/fill_order.tsx1270
-rw-r--r--packages/website/ts/components/fill_order_json.tsx124
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx70
-rw-r--r--packages/website/ts/components/flash_messages/token_send_completed.tsx38
-rw-r--r--packages/website/ts/components/flash_messages/transaction_submitted.tsx30
-rw-r--r--packages/website/ts/components/footer.tsx362
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx498
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx620
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx418
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx112
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx142
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx264
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx68
-rw-r--r--packages/website/ts/components/inputs/expiration_input.tsx168
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx86
-rw-r--r--packages/website/ts/components/inputs/identicon_address_input.tsx76
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx108
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx164
-rw-r--r--packages/website/ts/components/order_json.tsx322
-rw-r--r--packages/website/ts/components/portal.tsx630
-rw-r--r--packages/website/ts/components/portal_menu.tsx122
-rw-r--r--packages/website/ts/components/send_button.tsx136
-rw-r--r--packages/website/ts/components/token_balances.tsx1066
-rw-r--r--packages/website/ts/components/top_bar.tsx634
-rw-r--r--packages/website/ts/components/top_bar_menu_item.tsx74
-rw-r--r--packages/website/ts/components/track_token_confirmation.tsx94
-rw-r--r--packages/website/ts/components/trade_history/trade_history.tsx190
-rw-r--r--packages/website/ts/components/trade_history/trade_history_item.tsx282
-rw-r--r--packages/website/ts/components/ui/alert.tsx30
-rw-r--r--packages/website/ts/components/ui/badge.tsx84
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx126
-rw-r--r--packages/website/ts/components/ui/drop_down_menu_item.tsx170
-rw-r--r--packages/website/ts/components/ui/ethereum_address.tsx38
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx52
-rw-r--r--packages/website/ts/components/ui/fake_text_field.tsx44
-rw-r--r--packages/website/ts/components/ui/flash_message.tsx52
-rw-r--r--packages/website/ts/components/ui/help_tooltip.tsx28
-rw-r--r--packages/website/ts/components/ui/identicon.tsx72
-rw-r--r--packages/website/ts/components/ui/input_label.tsx28
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx166
-rw-r--r--packages/website/ts/components/ui/loading.tsx52
-rw-r--r--packages/website/ts/components/ui/menu_item.tsx78
-rw-r--r--packages/website/ts/components/ui/party.tsx240
-rw-r--r--packages/website/ts/components/ui/required_label.tsx14
-rw-r--r--packages/website/ts/components/ui/simple_loading.tsx18
-rw-r--r--packages/website/ts/components/ui/swap_icon.tsx60
-rw-r--r--packages/website/ts/components/ui/token_icon.tsx30
-rw-r--r--packages/website/ts/components/visual_order.tsx120
-rw-r--r--packages/website/ts/containers/connect_documentation.tsx116
-rw-r--r--packages/website/ts/containers/generate_order_form.tsx64
-rw-r--r--packages/website/ts/containers/portal.tsx112
-rw-r--r--packages/website/ts/containers/smart_contracts_documentation.tsx58
-rw-r--r--packages/website/ts/containers/zero_ex_js_documentation.tsx258
-rw-r--r--packages/website/ts/globals.d.ts170
-rw-r--r--packages/website/ts/index.tsx60
-rw-r--r--packages/website/ts/lazy_component.tsx82
-rw-r--r--packages/website/ts/local_storage/local_storage.ts62
-rw-r--r--packages/website/ts/local_storage/tracked_token_storage.ts114
-rw-r--r--packages/website/ts/local_storage/trade_history_storage.tsx160
-rw-r--r--packages/website/ts/pages/about/about.tsx416
-rw-r--r--packages/website/ts/pages/about/profile.tsx116
-rw-r--r--packages/website/ts/pages/documentation/comment.tsx16
-rw-r--r--packages/website/ts/pages/documentation/custom_enum.tsx34
-rw-r--r--packages/website/ts/pages/documentation/docs_info.ts198
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx648
-rw-r--r--packages/website/ts/pages/documentation/enum.tsx26
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx132
-rw-r--r--packages/website/ts/pages/documentation/interface.tsx98
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx238
-rw-r--r--packages/website/ts/pages/documentation/method_signature.tsx148
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx38
-rw-r--r--packages/website/ts/pages/documentation/type.tsx354
-rw-r--r--packages/website/ts/pages/documentation/type_definition.tsx194
-rw-r--r--packages/website/ts/pages/faq/faq.tsx846
-rw-r--r--packages/website/ts/pages/faq/question.tsx76
-rw-r--r--packages/website/ts/pages/landing/landing.tsx1420
-rw-r--r--packages/website/ts/pages/not_found.tsx52
-rw-r--r--packages/website/ts/pages/shared/anchor_title.tsx142
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx28
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx112
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx268
-rw-r--r--packages/website/ts/pages/shared/section_header.tsx72
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx50
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx344
-rw-r--r--packages/website/ts/redux/dispatcher.ts452
-rw-r--r--packages/website/ts/redux/reducer.ts738
-rw-r--r--packages/website/ts/schemas/order_schema.ts26
-rw-r--r--packages/website/ts/schemas/order_taker_schema.ts18
-rw-r--r--packages/website/ts/schemas/signature_data_schema.ts18
-rw-r--r--packages/website/ts/schemas/token_schema.ts18
-rw-r--r--packages/website/ts/schemas/validator.ts22
-rw-r--r--packages/website/ts/types.ts782
-rw-r--r--packages/website/ts/utils/colors.ts78
-rw-r--r--packages/website/ts/utils/configs.ts230
-rw-r--r--packages/website/ts/utils/constants.ts164
-rw-r--r--packages/website/ts/utils/doc_utils.ts84
-rw-r--r--packages/website/ts/utils/doxity_utils.ts316
-rw-r--r--packages/website/ts/utils/error_reporter.ts74
-rw-r--r--packages/website/ts/utils/mui_theme.ts60
-rw-r--r--packages/website/ts/utils/typedoc_utils.ts678
-rw-r--r--packages/website/ts/utils/utils.ts522
-rw-r--r--packages/website/ts/web3_wrapper.ts288
113 files changed, 12753 insertions, 12753 deletions
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 5530701c0..711c3329d 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -1,25 +1,25 @@
import {
- BlockParam,
- BlockRange,
- DecodedLogEvent,
- ExchangeContractEventArgs,
- ExchangeEvents,
- IndexedFilterValues,
- LogCancelContractEventArgs,
- LogFillContractEventArgs,
- LogWithDecodedArgs,
- Order,
- SignedOrder,
- Token as ZeroExToken,
- TransactionReceiptWithDecodedLogs,
- ZeroEx,
+ BlockParam,
+ BlockRange,
+ DecodedLogEvent,
+ ExchangeContractEventArgs,
+ ExchangeEvents,
+ IndexedFilterValues,
+ LogCancelContractEventArgs,
+ LogFillContractEventArgs,
+ LogWithDecodedArgs,
+ Order,
+ SignedOrder,
+ Token as ZeroExToken,
+ TransactionReceiptWithDecodedLogs,
+ ZeroEx,
} from '0x.js';
import {
- InjectedWeb3Subprovider,
- ledgerEthereumBrowserClientFactoryAsync,
- LedgerSubprovider,
- LedgerWalletSubprovider,
- RedundantRPCSubprovider,
+ InjectedWeb3Subprovider,
+ ledgerEthereumBrowserClientFactoryAsync,
+ LedgerSubprovider,
+ LedgerWalletSubprovider,
+ RedundantRPCSubprovider,
} from '@0xproject/subproviders';
import { BigNumber, intervalUtils, promisify } from '@0xproject/utils';
import * as _ from 'lodash';
@@ -31,16 +31,16 @@ 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,
- ContractInstance,
- EtherscanLinkSuffixes,
- ProviderType,
- Side,
- SignatureData,
- Token,
- TokenByAddress,
- TokenStateByAddress,
+ BlockchainCallErrs,
+ BlockchainErrs,
+ ContractInstance,
+ EtherscanLinkSuffixes,
+ ProviderType,
+ Side,
+ SignatureData,
+ Token,
+ TokenByAddress,
+ TokenStateByAddress,
} from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
@@ -56,727 +56,727 @@ import * as MintableArtifacts from '../contracts/Mintable.json';
const BLOCK_NUMBER_BACK_TRACK = 50;
export class Blockchain {
- public networkId: number;
- public nodeVersion: string;
- private _zeroEx: ZeroEx;
- private _dispatcher: Dispatcher;
- private _web3Wrapper?: Web3Wrapper;
- private _exchangeAddress: string;
- private _userAddress: string;
- private _cachedProvider: Web3.Provider;
- private _ledgerSubprovider: LedgerWalletSubprovider;
- private _zrxPollIntervalId: NodeJS.Timer;
- private static async _onPageLoadAsync(): Promise<void> {
- if (document.readyState === 'complete') {
- return; // Already loaded
- }
- return new Promise<void>((resolve, reject) => {
- window.onload = () => resolve();
- });
- }
- private static _getNameGivenProvider(provider: Web3.Provider): string {
- if (!_.isUndefined((provider as any).isMetaMask)) {
- return constants.PROVIDER_NAME_METAMASK;
- }
-
- // HACK: We use the fact that Parity Signer's provider is an instance of their
- // internal `Web3FrameProvider` class.
- const isParitySigner = _.startsWith(provider.constructor.toString(), 'function Web3FrameProvider');
- if (isParitySigner) {
- return constants.PROVIDER_NAME_PARITY_SIGNER;
- }
-
- return constants.PROVIDER_NAME_GENERIC;
- }
- private static async _getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) {
- const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
- const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists];
- const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId);
-
- let provider;
- if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) {
- // We catch all requests involving a users account and send it to the injectedWeb3
- // instance. All other requests go to the public hosted node.
- provider = new ProviderEngine();
- provider.addProvider(new InjectedWeb3Subprovider(injectedWeb3));
- provider.addProvider(new FilterSubprovider());
- provider.addProvider(new RedundantRPCSubprovider(publicNodeUrlsIfExistsForNetworkId));
- provider.start();
- } else if (doesInjectedWeb3Exist) {
- // Since no public node for this network, all requests go to injectedWeb3 instance
- provider = injectedWeb3.currentProvider;
- } else {
- // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node
- // We do this so that users can still browse the 0x Portal DApp even if they do not have web3
- // 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]));
- provider.start();
- }
-
- return provider;
- }
- constructor(dispatcher: Dispatcher, isSalePage: boolean = false) {
- this._dispatcher = dispatcher;
- this._userAddress = '';
- // tslint:disable-next-line:no-floating-promises
- this._onPageLoadInitFireAndForgetAsync();
- }
- public async networkIdUpdatedFireAndForgetAsync(newNetworkId: number) {
- const isConnected = !_.isUndefined(newNetworkId);
- if (!isConnected) {
- this.networkId = newNetworkId;
- this._dispatcher.encounteredBlockchainError(BlockchainErrs.DisconnectedFromEthereumNode);
- this._dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- } else if (this.networkId !== newNetworkId) {
- this.networkId = newNetworkId;
- this._dispatcher.encounteredBlockchainError(BlockchainErrs.NoError);
- await this._fetchTokenInformationAsync();
- await this._rehydrateStoreWithContractEvents();
- }
- }
- public async userAddressUpdatedFireAndForgetAsync(newUserAddress: string) {
- if (this._userAddress !== newUserAddress) {
- this._userAddress = newUserAddress;
- await this._fetchTokenInformationAsync();
- await this._rehydrateStoreWithContractEvents();
- }
- }
- public async nodeVersionUpdatedFireAndForgetAsync(nodeVersion: string) {
- if (this.nodeVersion !== nodeVersion) {
- this.nodeVersion = nodeVersion;
- }
- }
- public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- // HACK: temporarily whitelist the new WETH token address `as if` they were
- // 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]) {
- return true;
- }
- const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
- return !_.isUndefined(tokenIfExists);
- }
- public getLedgerDerivationPathIfExists(): string {
- if (_.isUndefined(this._ledgerSubprovider)) {
- return undefined;
- }
- const path = this._ledgerSubprovider.getPath();
- return path;
- }
- public updateLedgerDerivationPathIfExists(path: string) {
- if (_.isUndefined(this._ledgerSubprovider)) {
- return; // noop
- }
- this._ledgerSubprovider.setPath(path);
- }
- public updateLedgerDerivationIndex(pathIndex: number) {
- if (_.isUndefined(this._ledgerSubprovider)) {
- return; // noop
- }
- this._ledgerSubprovider.setPathIndex(pathIndex);
- }
- public async providerTypeUpdatedFireAndForgetAsync(providerType: ProviderType) {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- // Should actually be Web3.Provider|ProviderEngine union type but it causes issues
- // later on in the logic.
- let provider;
- switch (providerType) {
- case ProviderType.Ledger: {
- const isU2FSupported = await utils.isU2FSupportedAsync();
- if (!isU2FSupported) {
- throw new Error('Cannot update providerType to LEDGER without U2F support');
- }
-
- // Cache injected provider so that we can switch the user back to it easily
- this._cachedProvider = this._web3Wrapper.getProviderObj();
-
- this._dispatcher.updateUserAddress(''); // Clear old userAddress
-
- provider = new ProviderEngine();
- const ledgerWalletConfigs = {
- networkId: this.networkId,
- ledgerEthereumClientFactoryAsync: ledgerEthereumBrowserClientFactoryAsync,
- };
- 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]));
- provider.start();
- this._web3Wrapper.destroy();
- const shouldPollUserAddress = false;
- this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
- this._zeroEx.setProvider(provider, networkId);
- await this._postInstantiationOrUpdatingProviderZeroExAsync();
- break;
- }
-
- case ProviderType.Injected: {
- if (_.isUndefined(this._cachedProvider)) {
- return; // Going from injected to injected, so we noop
- }
- provider = this._cachedProvider;
- const shouldPollUserAddress = true;
- this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
- this._zeroEx.setProvider(provider, this.networkId);
- await this._postInstantiationOrUpdatingProviderZeroExAsync();
- delete this._ledgerSubprovider;
- delete this._cachedProvider;
- break;
- }
-
- default:
- throw utils.spawnSwitchErr('providerType', providerType);
- }
-
- await this._fetchTokenInformationAsync();
- }
- public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> {
- utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TokenAddressIsInvalid);
- utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
-
- const txHash = await this._zeroEx.token.setProxyAllowanceAsync(
- 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> {
- const txHash = await this._zeroEx.token.transferAsync(
- 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 {
- const ecSignature = signatureData;
- const exchangeContractAddress = this.getExchangeContractAddressIfExists();
- const takerOrNullAddress = _.isEmpty(taker) ? constants.NULL_ADDRESS : taker;
- const signedOrder = {
- ecSignature,
- exchangeContractAddress,
- expirationUnixTimestampSec,
- feeRecipient,
- maker,
- makerFee,
- makerTokenAddress,
- makerTokenAmount,
- salt,
- taker: takerOrNullAddress,
- takerFee,
- takerTokenAddress,
- takerTokenAmount,
- };
- return signedOrder;
- }
- 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,
- );
- 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 filledTakerTokenAmount = args.filledTakerTokenAmount;
- return filledTakerTokenAmount;
- }
- 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 cancelledTakerTokenAmount = args.cancelledTakerTokenAmount;
- return cancelledTakerTokenAmount;
- }
- public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> {
- utils.assert(ZeroEx.isValidOrderHash(orderHash), 'Must be valid orderHash');
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- const unavailableTakerAmount = await this._zeroEx.exchange.getUnavailableTakerAmountAsync(orderHash);
- return unavailableTakerAmount;
- }
- public getExchangeContractAddressIfExists() {
- return this._exchangeAddress;
- }
- public async validateFillOrderThrowIfInvalidAsync(
- signedOrder: SignedOrder,
- fillTakerTokenAmount: BigNumber,
- takerAddress: string,
- ): Promise<void> {
- await this._zeroEx.exchange.validateFillOrderThrowIfInvalidAsync(
- signedOrder,
- fillTakerTokenAmount,
- takerAddress,
- );
- }
- public async validateCancelOrderThrowIfInvalidAsync(
- order: Order,
- cancelTakerTokenAmount: BigNumber,
- ): Promise<void> {
- await this._zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
- }
- public isValidAddress(address: string): boolean {
- const lowercaseAddress = address.toLowerCase();
- return this._web3Wrapper.isAddress(lowercaseAddress);
- }
- public async pollTokenBalanceAsync(token: Token) {
- utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-
- const [currBalance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
-
- this._zrxPollIntervalId = intervalUtils.setAsyncExcludingInterval(
- async () => {
- const [balance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
- if (!balance.eq(currBalance)) {
- this._dispatcher.replaceTokenBalanceByAddress(token.address, balance);
- intervalUtils.clearAsyncExcludingInterval(this._zrxPollIntervalId);
- delete this._zrxPollIntervalId;
- }
- },
- 5000,
- (err: Error) => {
- utils.consoleLog(`Polling tokenBalance failed: ${err}`);
- intervalUtils.clearAsyncExcludingInterval(this._zrxPollIntervalId);
- delete this._zrxPollIntervalId;
- },
- );
- }
- public async signOrderHashAsync(orderHash: string): Promise<SignatureData> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- const makerAddress = this._userAddress;
- // If makerAddress is undefined, this means they have a web3 instance injected into their browser
- // but no account addresses associated with it.
- if (_.isUndefined(makerAddress)) {
- throw new Error('Tried to send a sign request but user has no associated addresses');
- }
- const ecSignature = await this._zeroEx.signOrderHashAsync(orderHash, makerAddress);
- const signatureData = _.extend({}, ecSignature, {
- hash: orderHash,
- });
- this._dispatcher.updateSignatureData(signatureData);
- return signatureData;
- }
- public async mintTestTokensAsync(token: Token) {
- utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-
- const mintableContract = await this._instantiateContractIfExistsAsync(MintableArtifacts, token.address);
- await mintableContract.mint(constants.MINT_AMOUNT, {
- from: this._userAddress,
- });
- const balanceDelta = constants.MINT_AMOUNT;
- this._dispatcher.updateTokenBalanceByAddress(token.address, balanceDelta);
- }
- public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
- const balance = await this._web3Wrapper.getBalanceInEthAsync(owner);
- return balance;
- }
- public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-
- const txHash = await this._zeroEx.etherToken.depositAsync(etherTokenAddress, amount, this._userAddress);
- await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
- }
- public async convertWrappedEthTokensToEthAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-
- const txHash = await this._zeroEx.etherToken.withdrawAsync(etherTokenAddress, amount, this._userAddress);
- await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
- }
- public async doesContractExistAtAddressAsync(address: string) {
- const doesContractExist = await this._web3Wrapper.doesContractExistAtAddressAsync(address);
- return doesContractExist;
- }
- public async getCurrentUserTokenBalanceAndAllowanceAsync(tokenAddress: string): Promise<BigNumber[]> {
- const tokenBalanceAndAllowance = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, tokenAddress);
- return tokenBalanceAndAllowance;
- }
- public async getTokenBalanceAndAllowanceAsync(ownerAddress: string, tokenAddress: string): Promise<BigNumber[]> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
-
- if (_.isEmpty(ownerAddress)) {
- const zero = new BigNumber(0);
- return [zero, zero];
- }
- let balance = new BigNumber(0);
- let allowance = new BigNumber(0);
- if (this._doesUserAddressExist()) {
- balance = await this._zeroEx.token.getBalanceAsync(tokenAddress, ownerAddress);
- allowance = await this._zeroEx.token.getProxyAllowanceAsync(tokenAddress, ownerAddress);
- }
- return [balance, allowance];
- }
- public async updateTokenBalancesAndAllowancesAsync(tokens: Token[]) {
- const tokenStateByAddress: TokenStateByAddress = {};
- for (const token of tokens) {
- let balance = new BigNumber(0);
- let allowance = new BigNumber(0);
- if (this._doesUserAddressExist()) {
- [balance, allowance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
- }
- const tokenState = {
- balance,
- allowance,
- };
- tokenStateByAddress[token.address] = tokenState;
- }
- this._dispatcher.updateTokenStateByAddress(tokenStateByAddress);
- }
- public async getUserAccountsAsync() {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- const userAccountsIfExists = await this._zeroEx.getAvailableAddressesAsync();
- return userAccountsIfExists;
- }
- // HACK: When a user is using a Ledger, we simply dispatch the selected userAddress, which
- // by-passes the web3Wrapper logic for updating the prevUserAddress. We therefore need to
- // manually update it. This should only be called by the LedgerConfigDialog.
- public updateWeb3WrapperPrevUserAddress(newUserAddress: string) {
- this._web3Wrapper.updatePrevUserAddress(newUserAddress);
- }
- public destroy() {
- intervalUtils.clearAsyncExcludingInterval(this._zrxPollIntervalId);
- this._web3Wrapper.destroy();
- this._stopWatchingExchangeLogFillEvents();
- }
- private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
- txHash: string,
- ): Promise<TransactionReceiptWithDecodedLogs> {
- const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
- this._dispatcher.showFlashMessage(
- React.createElement(TransactionSubmitted, {
- etherScanLinkIfExists,
- }),
- );
- const receipt = await this._zeroEx.awaitTransactionMinedAsync(txHash);
- return receipt;
- }
- private _doesUserAddressExist(): boolean {
- return this._userAddress !== '';
- }
- private async _rehydrateStoreWithContractEvents() {
- // Ensure we are only ever listening to one set of events
- this._stopWatchingExchangeLogFillEvents();
-
- if (!this._doesUserAddressExist()) {
- return; // short-circuit
- }
-
- if (!_.isUndefined(this._zeroEx)) {
- // Since we do not have an index on the `taker` address and want to show
- // transactions where an account is either the `maker` or `taker`, we loop
- // through all fill events, and filter/cache them client-side.
- const filterIndexObj = {};
- await this._startListeningForExchangeLogFillEventsAsync(filterIndexObj);
- }
- }
- private async _startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
-
- // Fetch historical logs
- await this._fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues);
-
- // Start a subscription for new logs
- this._zeroEx.exchange.subscribe(
- 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);
- } else {
- tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
- }
- }
- },
- );
- }
- private async _fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues) {
- const fromBlock = tradeHistoryStorage.getFillsLatestBlock(this._userAddress, this.networkId);
- const blockRange: BlockRange = {
- fromBlock,
- toBlock: 'latest' as BlockParam,
- };
- const decodedLogs = await this._zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>(
- ExchangeEvents.LogFill,
- blockRange,
- indexFilterValues,
- );
- for (const decodedLog of decodedLogs) {
- if (!this._doesLogEventInvolveUser(decodedLog)) {
- continue; // We aren't interested in the fill event
- }
- this._updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
- const fill = await this._convertDecodedLogToFillAsync(decodedLog);
- tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
- }
- }
- private async _convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
- const args = decodedLog.args;
- const blockTimestamp = await this._web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash);
- const fill = {
- filledTakerTokenAmount: args.filledTakerTokenAmount,
- filledMakerTokenAmount: args.filledMakerTokenAmount,
- logIndex: decodedLog.logIndex,
- maker: args.maker,
- orderHash: args.orderHash,
- taker: args.taker,
- makerToken: args.makerToken,
- takerToken: args.takerToken,
- paidMakerFee: args.paidMakerFee,
- paidTakerFee: args.paidTakerFee,
- transactionHash: decodedLog.transactionHash,
- blockTimestamp,
- };
- return fill;
- }
- private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
- const args = decodedLog.args;
- const isUserMakerOrTaker = args.maker === this._userAddress || args.taker === this._userAddress;
- return isUserMakerOrTaker;
- }
- private _updateLatestFillsBlockIfNeeded(blockNumber: number) {
- const isBlockPending = _.isNull(blockNumber);
- if (!isBlockPending) {
- // Hack: I've observed the behavior where a client won't register certain fill events
- // and lowering the cache blockNumber fixes the issue. As a quick fix for now, simply
- // set the cached blockNumber 50 below the one returned. This way, upon refreshing, a user
- // 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;
- tradeHistoryStorage.setFillsLatestBlock(this._userAddress, this.networkId, blockNumberToSet);
- }
- }
- private _stopWatchingExchangeLogFillEvents(): void {
- this._zeroEx.exchange.unsubscribeAll();
- }
- private async _getTokenRegistryTokensByAddressAsync(): Promise<TokenByAddress> {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- const tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync();
-
- const tokenByAddress: TokenByAddress = {};
- _.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => {
- // HACK: For now we have a hard-coded list of iconUrls for the dummyTokens
- // TODO: Refactor this out and pull the iconUrl directly from the TokenRegistry
- const iconUrl = configs.ICON_URL_BY_SYMBOL[t.symbol];
- // HACK: Temporarily we hijack the WETH addresses fetched from the tokenRegistry
- // so that we can take our time with actually updating it. This ensures that when
- // we deploy the new WETH page, everyone will re-fill their trackedTokens with the
- // new canonical WETH.
- // TODO: Remove this hack once we've updated the TokenRegistries
- // 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 token: Token = {
- iconUrl,
- address,
- name: t.name,
- symbol: t.symbol,
- decimals: t.decimals,
- isTracked: false,
- isRegistered: true,
- };
- tokenByAddress[token.address] = token;
- });
- return tokenByAddress;
- }
- private async _onPageLoadInitFireAndForgetAsync() {
- await Blockchain._onPageLoadAsync(); // wait for page to load
-
- // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
- // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot
- // retrieve it from within the web3Wrapper constructor. This is and should remain the only
- // call to a web3 instance outside of web3Wrapper in the entire dapp.
- // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing
- // Ethereum node, this call will throw. We need to handle this case gracefully
- const injectedWeb3 = (window as any).web3;
- let networkIdIfExists: number;
- if (!_.isUndefined(injectedWeb3)) {
- try {
- networkIdIfExists = _.parseInt(await promisify<string>(injectedWeb3.version.getNetwork)());
- } catch (err) {
- // Ignore error and proceed with networkId undefined
- }
- }
-
- 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 zeroExConfigs = {
- networkId,
- };
- this._zeroEx = new ZeroEx(provider, zeroExConfigs);
- this._updateProviderName(injectedWeb3);
- const shouldPollUserAddress = true;
- this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, networkId, shouldPollUserAddress);
- await this._postInstantiationOrUpdatingProviderZeroExAsync();
- }
- // This method should always be run after instantiating or updating the provider
- // of the ZeroEx instance.
- private async _postInstantiationOrUpdatingProviderZeroExAsync() {
- utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
- this._exchangeAddress = this._zeroEx.exchange.getContractAddress();
- }
- private _updateProviderName(injectedWeb3: Web3) {
- const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
- 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',
- );
-
- this._dispatcher.updateBlockchainIsLoaded(false);
- this._dispatcher.clearTokenByAddress();
-
- const tokenRegistryTokensByAddress = await this._getTokenRegistryTokensByAddressAsync();
-
- // HACK: We need to fetch the userAddress here because otherwise we cannot save the
- // tracked tokens in localStorage under the users address nor fetch the token
- // balances and allowances and we need to do this in order not to trigger the blockchain
- // loading dialog to show up twice. First to load the contracts, and second to load the
- // balances and allowances.
- this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
- if (!_.isEmpty(this._userAddress)) {
- this._dispatcher.updateUserAddress(this._userAddress);
- }
-
- let trackedTokensIfExists = trackedTokenStorage.getTrackedTokensIfExists(this._userAddress, this.networkId);
- const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
- if (_.isUndefined(trackedTokensIfExists)) {
- trackedTokensIfExists = _.map(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, symbol => {
- const token = _.find(tokenRegistryTokens, t => t.symbol === symbol);
- token.isTracked = true;
- return token;
- });
- _.each(trackedTokensIfExists, token => {
- trackedTokenStorage.addTrackedTokenToUser(this._userAddress, this.networkId, token);
- });
- } else {
- // Properly set all tokenRegistry tokens `isTracked` to true if they are in the existing trackedTokens array
- _.each(trackedTokensIfExists, trackedToken => {
- if (!_.isUndefined(tokenRegistryTokensByAddress[trackedToken.address])) {
- tokenRegistryTokensByAddress[trackedToken.address].isTracked = true;
- }
- });
- }
- const allTokens = _.uniq([...tokenRegistryTokens, ...trackedTokensIfExists]);
- this._dispatcher.updateTokenByAddress(allTokens);
-
- // Get balance/allowance for tracked tokens
- 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] }),
- ];
- this._dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
- this._dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
- this._dispatcher.updateBlockchainIsLoaded(true);
- }
- private async _instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
- const c = await contract(artifact);
- const providerObj = this._web3Wrapper.getProviderObj();
- c.setProvider(providerObj);
-
- const artifactNetworkConfigs = artifact.networks[this.networkId];
- let contractAddress;
- if (!_.isUndefined(address)) {
- contractAddress = address;
- } else if (!_.isUndefined(artifactNetworkConfigs)) {
- contractAddress = artifactNetworkConfigs.address;
- }
-
- if (!_.isUndefined(contractAddress)) {
- const doesContractExist = await this.doesContractExistAtAddressAsync(contractAddress);
- if (!doesContractExist) {
- utils.consoleLog(`Contract does not exist: ${artifact.contract_name} at ${contractAddress}`);
- throw new Error(BlockchainCallErrs.ContractDoesNotExist);
- }
- }
-
- try {
- const contractInstance = _.isUndefined(address) ? await c.deployed() : await c.at(address);
- return contractInstance;
- } catch (err) {
- const errMsg = `${err}`;
- utils.consoleLog(`Notice: Error encountered: ${err} ${err.stack}`);
- if (_.includes(errMsg, 'not been deployed to detected network')) {
- throw new Error(BlockchainCallErrs.ContractDoesNotExist);
- } else {
- await errorReporter.reportAsync(err);
- throw new Error(BlockchainCallErrs.UnhandledError);
- }
- }
- }
+ public networkId: number;
+ public nodeVersion: string;
+ private _zeroEx: ZeroEx;
+ private _dispatcher: Dispatcher;
+ private _web3Wrapper?: Web3Wrapper;
+ private _exchangeAddress: string;
+ private _userAddress: string;
+ private _cachedProvider: Web3.Provider;
+ private _ledgerSubprovider: LedgerWalletSubprovider;
+ private _zrxPollIntervalId: NodeJS.Timer;
+ private static async _onPageLoadAsync(): Promise<void> {
+ if (document.readyState === 'complete') {
+ return; // Already loaded
+ }
+ return new Promise<void>((resolve, reject) => {
+ window.onload = () => resolve();
+ });
+ }
+ private static _getNameGivenProvider(provider: Web3.Provider): string {
+ if (!_.isUndefined((provider as any).isMetaMask)) {
+ return constants.PROVIDER_NAME_METAMASK;
+ }
+
+ // HACK: We use the fact that Parity Signer's provider is an instance of their
+ // internal `Web3FrameProvider` class.
+ const isParitySigner = _.startsWith(provider.constructor.toString(), 'function Web3FrameProvider');
+ if (isParitySigner) {
+ return constants.PROVIDER_NAME_PARITY_SIGNER;
+ }
+
+ return constants.PROVIDER_NAME_GENERIC;
+ }
+ private static async _getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) {
+ const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
+ const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists];
+ const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId);
+
+ let provider;
+ if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) {
+ // We catch all requests involving a users account and send it to the injectedWeb3
+ // instance. All other requests go to the public hosted node.
+ provider = new ProviderEngine();
+ provider.addProvider(new InjectedWeb3Subprovider(injectedWeb3));
+ provider.addProvider(new FilterSubprovider());
+ provider.addProvider(new RedundantRPCSubprovider(publicNodeUrlsIfExistsForNetworkId));
+ provider.start();
+ } else if (doesInjectedWeb3Exist) {
+ // Since no public node for this network, all requests go to injectedWeb3 instance
+ provider = injectedWeb3.currentProvider;
+ } else {
+ // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node
+ // We do this so that users can still browse the 0x Portal DApp even if they do not have web3
+ // 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]));
+ provider.start();
+ }
+
+ return provider;
+ }
+ constructor(dispatcher: Dispatcher, isSalePage: boolean = false) {
+ this._dispatcher = dispatcher;
+ this._userAddress = '';
+ // tslint:disable-next-line:no-floating-promises
+ this._onPageLoadInitFireAndForgetAsync();
+ }
+ public async networkIdUpdatedFireAndForgetAsync(newNetworkId: number) {
+ const isConnected = !_.isUndefined(newNetworkId);
+ if (!isConnected) {
+ this.networkId = newNetworkId;
+ this._dispatcher.encounteredBlockchainError(BlockchainErrs.DisconnectedFromEthereumNode);
+ this._dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ } else if (this.networkId !== newNetworkId) {
+ this.networkId = newNetworkId;
+ this._dispatcher.encounteredBlockchainError(BlockchainErrs.NoError);
+ await this._fetchTokenInformationAsync();
+ await this._rehydrateStoreWithContractEvents();
+ }
+ }
+ public async userAddressUpdatedFireAndForgetAsync(newUserAddress: string) {
+ if (this._userAddress !== newUserAddress) {
+ this._userAddress = newUserAddress;
+ await this._fetchTokenInformationAsync();
+ await this._rehydrateStoreWithContractEvents();
+ }
+ }
+ public async nodeVersionUpdatedFireAndForgetAsync(nodeVersion: string) {
+ if (this.nodeVersion !== nodeVersion) {
+ this.nodeVersion = nodeVersion;
+ }
+ }
+ public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ // HACK: temporarily whitelist the new WETH token address `as if` they were
+ // 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]) {
+ return true;
+ }
+ const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
+ return !_.isUndefined(tokenIfExists);
+ }
+ public getLedgerDerivationPathIfExists(): string {
+ if (_.isUndefined(this._ledgerSubprovider)) {
+ return undefined;
+ }
+ const path = this._ledgerSubprovider.getPath();
+ return path;
+ }
+ public updateLedgerDerivationPathIfExists(path: string) {
+ if (_.isUndefined(this._ledgerSubprovider)) {
+ return; // noop
+ }
+ this._ledgerSubprovider.setPath(path);
+ }
+ public updateLedgerDerivationIndex(pathIndex: number) {
+ if (_.isUndefined(this._ledgerSubprovider)) {
+ return; // noop
+ }
+ this._ledgerSubprovider.setPathIndex(pathIndex);
+ }
+ public async providerTypeUpdatedFireAndForgetAsync(providerType: ProviderType) {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ // Should actually be Web3.Provider|ProviderEngine union type but it causes issues
+ // later on in the logic.
+ let provider;
+ switch (providerType) {
+ case ProviderType.Ledger: {
+ const isU2FSupported = await utils.isU2FSupportedAsync();
+ if (!isU2FSupported) {
+ throw new Error('Cannot update providerType to LEDGER without U2F support');
+ }
+
+ // Cache injected provider so that we can switch the user back to it easily
+ this._cachedProvider = this._web3Wrapper.getProviderObj();
+
+ this._dispatcher.updateUserAddress(''); // Clear old userAddress
+
+ provider = new ProviderEngine();
+ const ledgerWalletConfigs = {
+ networkId: this.networkId,
+ ledgerEthereumClientFactoryAsync: ledgerEthereumBrowserClientFactoryAsync,
+ };
+ 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]));
+ provider.start();
+ this._web3Wrapper.destroy();
+ const shouldPollUserAddress = false;
+ this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
+ this._zeroEx.setProvider(provider, networkId);
+ await this._postInstantiationOrUpdatingProviderZeroExAsync();
+ break;
+ }
+
+ case ProviderType.Injected: {
+ if (_.isUndefined(this._cachedProvider)) {
+ return; // Going from injected to injected, so we noop
+ }
+ provider = this._cachedProvider;
+ const shouldPollUserAddress = true;
+ this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, this.networkId, shouldPollUserAddress);
+ this._zeroEx.setProvider(provider, this.networkId);
+ await this._postInstantiationOrUpdatingProviderZeroExAsync();
+ delete this._ledgerSubprovider;
+ delete this._cachedProvider;
+ break;
+ }
+
+ default:
+ throw utils.spawnSwitchErr('providerType', providerType);
+ }
+
+ await this._fetchTokenInformationAsync();
+ }
+ public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> {
+ utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TokenAddressIsInvalid);
+ utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+
+ const txHash = await this._zeroEx.token.setProxyAllowanceAsync(
+ 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> {
+ const txHash = await this._zeroEx.token.transferAsync(
+ 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 {
+ const ecSignature = signatureData;
+ const exchangeContractAddress = this.getExchangeContractAddressIfExists();
+ const takerOrNullAddress = _.isEmpty(taker) ? constants.NULL_ADDRESS : taker;
+ const signedOrder = {
+ ecSignature,
+ exchangeContractAddress,
+ expirationUnixTimestampSec,
+ feeRecipient,
+ maker,
+ makerFee,
+ makerTokenAddress,
+ makerTokenAmount,
+ salt,
+ taker: takerOrNullAddress,
+ takerFee,
+ takerTokenAddress,
+ takerTokenAmount,
+ };
+ return signedOrder;
+ }
+ 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,
+ );
+ 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 filledTakerTokenAmount = args.filledTakerTokenAmount;
+ return filledTakerTokenAmount;
+ }
+ 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 cancelledTakerTokenAmount = args.cancelledTakerTokenAmount;
+ return cancelledTakerTokenAmount;
+ }
+ public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> {
+ utils.assert(ZeroEx.isValidOrderHash(orderHash), 'Must be valid orderHash');
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ const unavailableTakerAmount = await this._zeroEx.exchange.getUnavailableTakerAmountAsync(orderHash);
+ return unavailableTakerAmount;
+ }
+ public getExchangeContractAddressIfExists() {
+ return this._exchangeAddress;
+ }
+ public async validateFillOrderThrowIfInvalidAsync(
+ signedOrder: SignedOrder,
+ fillTakerTokenAmount: BigNumber,
+ takerAddress: string,
+ ): Promise<void> {
+ await this._zeroEx.exchange.validateFillOrderThrowIfInvalidAsync(
+ signedOrder,
+ fillTakerTokenAmount,
+ takerAddress,
+ );
+ }
+ public async validateCancelOrderThrowIfInvalidAsync(
+ order: Order,
+ cancelTakerTokenAmount: BigNumber,
+ ): Promise<void> {
+ await this._zeroEx.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount);
+ }
+ public isValidAddress(address: string): boolean {
+ const lowercaseAddress = address.toLowerCase();
+ return this._web3Wrapper.isAddress(lowercaseAddress);
+ }
+ public async pollTokenBalanceAsync(token: Token) {
+ utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
+
+ const [currBalance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
+
+ this._zrxPollIntervalId = intervalUtils.setAsyncExcludingInterval(
+ async () => {
+ const [balance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
+ if (!balance.eq(currBalance)) {
+ this._dispatcher.replaceTokenBalanceByAddress(token.address, balance);
+ intervalUtils.clearAsyncExcludingInterval(this._zrxPollIntervalId);
+ delete this._zrxPollIntervalId;
+ }
+ },
+ 5000,
+ (err: Error) => {
+ utils.consoleLog(`Polling tokenBalance failed: ${err}`);
+ intervalUtils.clearAsyncExcludingInterval(this._zrxPollIntervalId);
+ delete this._zrxPollIntervalId;
+ },
+ );
+ }
+ public async signOrderHashAsync(orderHash: string): Promise<SignatureData> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ const makerAddress = this._userAddress;
+ // If makerAddress is undefined, this means they have a web3 instance injected into their browser
+ // but no account addresses associated with it.
+ if (_.isUndefined(makerAddress)) {
+ throw new Error('Tried to send a sign request but user has no associated addresses');
+ }
+ const ecSignature = await this._zeroEx.signOrderHashAsync(orderHash, makerAddress);
+ const signatureData = _.extend({}, ecSignature, {
+ hash: orderHash,
+ });
+ this._dispatcher.updateSignatureData(signatureData);
+ return signatureData;
+ }
+ public async mintTestTokensAsync(token: Token) {
+ utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
+
+ const mintableContract = await this._instantiateContractIfExistsAsync(MintableArtifacts, token.address);
+ await mintableContract.mint(constants.MINT_AMOUNT, {
+ from: this._userAddress,
+ });
+ const balanceDelta = constants.MINT_AMOUNT;
+ this._dispatcher.updateTokenBalanceByAddress(token.address, balanceDelta);
+ }
+ public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
+ const balance = await this._web3Wrapper.getBalanceInEthAsync(owner);
+ return balance;
+ }
+ public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
+
+ const txHash = await this._zeroEx.etherToken.depositAsync(etherTokenAddress, amount, this._userAddress);
+ await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
+ }
+ public async convertWrappedEthTokensToEthAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
+
+ const txHash = await this._zeroEx.etherToken.withdrawAsync(etherTokenAddress, amount, this._userAddress);
+ await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
+ }
+ public async doesContractExistAtAddressAsync(address: string) {
+ const doesContractExist = await this._web3Wrapper.doesContractExistAtAddressAsync(address);
+ return doesContractExist;
+ }
+ public async getCurrentUserTokenBalanceAndAllowanceAsync(tokenAddress: string): Promise<BigNumber[]> {
+ const tokenBalanceAndAllowance = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, tokenAddress);
+ return tokenBalanceAndAllowance;
+ }
+ public async getTokenBalanceAndAllowanceAsync(ownerAddress: string, tokenAddress: string): Promise<BigNumber[]> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+
+ if (_.isEmpty(ownerAddress)) {
+ const zero = new BigNumber(0);
+ return [zero, zero];
+ }
+ let balance = new BigNumber(0);
+ let allowance = new BigNumber(0);
+ if (this._doesUserAddressExist()) {
+ balance = await this._zeroEx.token.getBalanceAsync(tokenAddress, ownerAddress);
+ allowance = await this._zeroEx.token.getProxyAllowanceAsync(tokenAddress, ownerAddress);
+ }
+ return [balance, allowance];
+ }
+ public async updateTokenBalancesAndAllowancesAsync(tokens: Token[]) {
+ const tokenStateByAddress: TokenStateByAddress = {};
+ for (const token of tokens) {
+ let balance = new BigNumber(0);
+ let allowance = new BigNumber(0);
+ if (this._doesUserAddressExist()) {
+ [balance, allowance] = await this.getTokenBalanceAndAllowanceAsync(this._userAddress, token.address);
+ }
+ const tokenState = {
+ balance,
+ allowance,
+ };
+ tokenStateByAddress[token.address] = tokenState;
+ }
+ this._dispatcher.updateTokenStateByAddress(tokenStateByAddress);
+ }
+ public async getUserAccountsAsync() {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ const userAccountsIfExists = await this._zeroEx.getAvailableAddressesAsync();
+ return userAccountsIfExists;
+ }
+ // HACK: When a user is using a Ledger, we simply dispatch the selected userAddress, which
+ // by-passes the web3Wrapper logic for updating the prevUserAddress. We therefore need to
+ // manually update it. This should only be called by the LedgerConfigDialog.
+ public updateWeb3WrapperPrevUserAddress(newUserAddress: string) {
+ this._web3Wrapper.updatePrevUserAddress(newUserAddress);
+ }
+ public destroy() {
+ intervalUtils.clearAsyncExcludingInterval(this._zrxPollIntervalId);
+ this._web3Wrapper.destroy();
+ this._stopWatchingExchangeLogFillEvents();
+ }
+ private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
+ txHash: string,
+ ): Promise<TransactionReceiptWithDecodedLogs> {
+ const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
+ this._dispatcher.showFlashMessage(
+ React.createElement(TransactionSubmitted, {
+ etherScanLinkIfExists,
+ }),
+ );
+ const receipt = await this._zeroEx.awaitTransactionMinedAsync(txHash);
+ return receipt;
+ }
+ private _doesUserAddressExist(): boolean {
+ return this._userAddress !== '';
+ }
+ private async _rehydrateStoreWithContractEvents() {
+ // Ensure we are only ever listening to one set of events
+ this._stopWatchingExchangeLogFillEvents();
+
+ if (!this._doesUserAddressExist()) {
+ return; // short-circuit
+ }
+
+ if (!_.isUndefined(this._zeroEx)) {
+ // Since we do not have an index on the `taker` address and want to show
+ // transactions where an account is either the `maker` or `taker`, we loop
+ // through all fill events, and filter/cache them client-side.
+ const filterIndexObj = {};
+ await this._startListeningForExchangeLogFillEventsAsync(filterIndexObj);
+ }
+ }
+ private async _startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
+
+ // Fetch historical logs
+ await this._fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues);
+
+ // Start a subscription for new logs
+ this._zeroEx.exchange.subscribe(
+ 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);
+ } else {
+ tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
+ }
+ }
+ },
+ );
+ }
+ private async _fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues) {
+ const fromBlock = tradeHistoryStorage.getFillsLatestBlock(this._userAddress, this.networkId);
+ const blockRange: BlockRange = {
+ fromBlock,
+ toBlock: 'latest' as BlockParam,
+ };
+ const decodedLogs = await this._zeroEx.exchange.getLogsAsync<LogFillContractEventArgs>(
+ ExchangeEvents.LogFill,
+ blockRange,
+ indexFilterValues,
+ );
+ for (const decodedLog of decodedLogs) {
+ if (!this._doesLogEventInvolveUser(decodedLog)) {
+ continue; // We aren't interested in the fill event
+ }
+ this._updateLatestFillsBlockIfNeeded(decodedLog.blockNumber);
+ const fill = await this._convertDecodedLogToFillAsync(decodedLog);
+ tradeHistoryStorage.addFillToUser(this._userAddress, this.networkId, fill);
+ }
+ }
+ private async _convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
+ const args = decodedLog.args;
+ const blockTimestamp = await this._web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash);
+ const fill = {
+ filledTakerTokenAmount: args.filledTakerTokenAmount,
+ filledMakerTokenAmount: args.filledMakerTokenAmount,
+ logIndex: decodedLog.logIndex,
+ maker: args.maker,
+ orderHash: args.orderHash,
+ taker: args.taker,
+ makerToken: args.makerToken,
+ takerToken: args.takerToken,
+ paidMakerFee: args.paidMakerFee,
+ paidTakerFee: args.paidTakerFee,
+ transactionHash: decodedLog.transactionHash,
+ blockTimestamp,
+ };
+ return fill;
+ }
+ private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>) {
+ const args = decodedLog.args;
+ const isUserMakerOrTaker = args.maker === this._userAddress || args.taker === this._userAddress;
+ return isUserMakerOrTaker;
+ }
+ private _updateLatestFillsBlockIfNeeded(blockNumber: number) {
+ const isBlockPending = _.isNull(blockNumber);
+ if (!isBlockPending) {
+ // Hack: I've observed the behavior where a client won't register certain fill events
+ // and lowering the cache blockNumber fixes the issue. As a quick fix for now, simply
+ // set the cached blockNumber 50 below the one returned. This way, upon refreshing, a user
+ // 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;
+ tradeHistoryStorage.setFillsLatestBlock(this._userAddress, this.networkId, blockNumberToSet);
+ }
+ }
+ private _stopWatchingExchangeLogFillEvents(): void {
+ this._zeroEx.exchange.unsubscribeAll();
+ }
+ private async _getTokenRegistryTokensByAddressAsync(): Promise<TokenByAddress> {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ const tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync();
+
+ const tokenByAddress: TokenByAddress = {};
+ _.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => {
+ // HACK: For now we have a hard-coded list of iconUrls for the dummyTokens
+ // TODO: Refactor this out and pull the iconUrl directly from the TokenRegistry
+ const iconUrl = configs.ICON_URL_BY_SYMBOL[t.symbol];
+ // HACK: Temporarily we hijack the WETH addresses fetched from the tokenRegistry
+ // so that we can take our time with actually updating it. This ensures that when
+ // we deploy the new WETH page, everyone will re-fill their trackedTokens with the
+ // new canonical WETH.
+ // TODO: Remove this hack once we've updated the TokenRegistries
+ // 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 token: Token = {
+ iconUrl,
+ address,
+ name: t.name,
+ symbol: t.symbol,
+ decimals: t.decimals,
+ isTracked: false,
+ isRegistered: true,
+ };
+ tokenByAddress[token.address] = token;
+ });
+ return tokenByAddress;
+ }
+ private async _onPageLoadInitFireAndForgetAsync() {
+ await Blockchain._onPageLoadAsync(); // wait for page to load
+
+ // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
+ // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot
+ // retrieve it from within the web3Wrapper constructor. This is and should remain the only
+ // call to a web3 instance outside of web3Wrapper in the entire dapp.
+ // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing
+ // Ethereum node, this call will throw. We need to handle this case gracefully
+ const injectedWeb3 = (window as any).web3;
+ let networkIdIfExists: number;
+ if (!_.isUndefined(injectedWeb3)) {
+ try {
+ networkIdIfExists = _.parseInt(await promisify<string>(injectedWeb3.version.getNetwork)());
+ } catch (err) {
+ // Ignore error and proceed with networkId undefined
+ }
+ }
+
+ 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 zeroExConfigs = {
+ networkId,
+ };
+ this._zeroEx = new ZeroEx(provider, zeroExConfigs);
+ this._updateProviderName(injectedWeb3);
+ const shouldPollUserAddress = true;
+ this._web3Wrapper = new Web3Wrapper(this._dispatcher, provider, networkId, shouldPollUserAddress);
+ await this._postInstantiationOrUpdatingProviderZeroExAsync();
+ }
+ // This method should always be run after instantiating or updating the provider
+ // of the ZeroEx instance.
+ private async _postInstantiationOrUpdatingProviderZeroExAsync() {
+ utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.');
+ this._exchangeAddress = this._zeroEx.exchange.getContractAddress();
+ }
+ private _updateProviderName(injectedWeb3: Web3) {
+ const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
+ 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',
+ );
+
+ this._dispatcher.updateBlockchainIsLoaded(false);
+ this._dispatcher.clearTokenByAddress();
+
+ const tokenRegistryTokensByAddress = await this._getTokenRegistryTokensByAddressAsync();
+
+ // HACK: We need to fetch the userAddress here because otherwise we cannot save the
+ // tracked tokens in localStorage under the users address nor fetch the token
+ // balances and allowances and we need to do this in order not to trigger the blockchain
+ // loading dialog to show up twice. First to load the contracts, and second to load the
+ // balances and allowances.
+ this._userAddress = await this._web3Wrapper.getFirstAccountIfExistsAsync();
+ if (!_.isEmpty(this._userAddress)) {
+ this._dispatcher.updateUserAddress(this._userAddress);
+ }
+
+ let trackedTokensIfExists = trackedTokenStorage.getTrackedTokensIfExists(this._userAddress, this.networkId);
+ const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
+ if (_.isUndefined(trackedTokensIfExists)) {
+ trackedTokensIfExists = _.map(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, symbol => {
+ const token = _.find(tokenRegistryTokens, t => t.symbol === symbol);
+ token.isTracked = true;
+ return token;
+ });
+ _.each(trackedTokensIfExists, token => {
+ trackedTokenStorage.addTrackedTokenToUser(this._userAddress, this.networkId, token);
+ });
+ } else {
+ // Properly set all tokenRegistry tokens `isTracked` to true if they are in the existing trackedTokens array
+ _.each(trackedTokensIfExists, trackedToken => {
+ if (!_.isUndefined(tokenRegistryTokensByAddress[trackedToken.address])) {
+ tokenRegistryTokensByAddress[trackedToken.address].isTracked = true;
+ }
+ });
+ }
+ const allTokens = _.uniq([...tokenRegistryTokens, ...trackedTokensIfExists]);
+ this._dispatcher.updateTokenByAddress(allTokens);
+
+ // Get balance/allowance for tracked tokens
+ 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] }),
+ ];
+ this._dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
+ this._dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
+ this._dispatcher.updateBlockchainIsLoaded(true);
+ }
+ private async _instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
+ const c = await contract(artifact);
+ const providerObj = this._web3Wrapper.getProviderObj();
+ c.setProvider(providerObj);
+
+ const artifactNetworkConfigs = artifact.networks[this.networkId];
+ let contractAddress;
+ if (!_.isUndefined(address)) {
+ contractAddress = address;
+ } else if (!_.isUndefined(artifactNetworkConfigs)) {
+ contractAddress = artifactNetworkConfigs.address;
+ }
+
+ if (!_.isUndefined(contractAddress)) {
+ const doesContractExist = await this.doesContractExistAtAddressAsync(contractAddress);
+ if (!doesContractExist) {
+ utils.consoleLog(`Contract does not exist: ${artifact.contract_name} at ${contractAddress}`);
+ throw new Error(BlockchainCallErrs.ContractDoesNotExist);
+ }
+ }
+
+ try {
+ const contractInstance = _.isUndefined(address) ? await c.deployed() : await c.at(address);
+ return contractInstance;
+ } catch (err) {
+ const errMsg = `${err}`;
+ utils.consoleLog(`Notice: Error encountered: ${err} ${err.stack}`);
+ if (_.includes(errMsg, 'not been deployed to detected network')) {
+ throw new Error(BlockchainCallErrs.ContractDoesNotExist);
+ } else {
+ await errorReporter.reportAsync(err);
+ throw new Error(BlockchainCallErrs.UnhandledError);
+ }
+ }
+ }
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index f555ca6b1..e0f61a29b 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -9,150 +9,150 @@ import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
interface BlockchainErrDialogProps {
- blockchain: Blockchain;
- blockchainErr: BlockchainErrs;
- isOpen: boolean;
- userAddress: string;
- toggleDialogFn: (isOpen: boolean) => void;
- networkId: number;
+ blockchain: Blockchain;
+ blockchainErr: BlockchainErrs;
+ isOpen: boolean;
+ userAddress: string;
+ toggleDialogFn: (isOpen: boolean) => void;
+ networkId: number;
}
export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProps, undefined> {
- public render() {
- const dialogActions = [
- <FlatButton
- key="blockchainErrOk"
- label="Ok"
- primary={true}
- onTouchTap={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
- />,
- ];
+ public render() {
+ const dialogActions = [
+ <FlatButton
+ key="blockchainErrOk"
+ label="Ok"
+ primary={true}
+ onTouchTap={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
+ />,
+ ];
- const hasWalletAddress = this.props.userAddress !== '';
- return (
- <Dialog
- title={this._getTitle(hasWalletAddress)}
- titleStyle={{ fontWeight: 100 }}
- actions={dialogActions}
- open={this.props.isOpen}
- contentStyle={{ width: 400 }}
- onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
- autoScrollBodyContent={true}
- >
- <div className="pt2" style={{ color: colors.grey700 }}>
- {this._renderExplanation(hasWalletAddress)}
- </div>
- </Dialog>
- );
- }
- private _getTitle(hasWalletAddress: boolean) {
- if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
- return '0x smart contracts not found';
- } else if (!hasWalletAddress) {
- return 'Enable wallet communication';
- } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
- return 'Disconnected from Ethereum network';
- } else {
- return 'Unexpected error';
- }
- }
- private _renderExplanation(hasWalletAddress: boolean) {
- if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
- return this._renderContractsNotDeployedExplanation();
- } else if (!hasWalletAddress) {
- return this._renderNoWalletFoundExplanation();
- } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
- return this._renderDisconnectedFromNode();
- } else {
- return this._renderUnexpectedErrorExplanation();
- }
- }
- private _renderDisconnectedFromNode() {
- return (
- <div>
- 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.
- </div>
- );
- }
- private _renderUnexpectedErrorExplanation() {
- 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:
- </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.
- <div className="pt1">
- <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.'}
- </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.
- </div>
- </div>
- );
- }
- private _renderContractsNotDeployedExplanation() {
- 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}).`
- : `.`}
- </div>
- <h4>Metamask</h4>
- <div>
- If you are using{' '}
- <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
- Metamask
- </a>, you can switch networks in the top left corner of the extension popover.
- </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 \
+ const hasWalletAddress = this.props.userAddress !== '';
+ return (
+ <Dialog
+ title={this._getTitle(hasWalletAddress)}
+ titleStyle={{ fontWeight: 100 }}
+ actions={dialogActions}
+ open={this.props.isOpen}
+ contentStyle={{ width: 400 }}
+ onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
+ autoScrollBodyContent={true}
+ >
+ <div className="pt2" style={{ color: colors.grey700 }}>
+ {this._renderExplanation(hasWalletAddress)}
+ </div>
+ </Dialog>
+ );
+ }
+ private _getTitle(hasWalletAddress: boolean) {
+ if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
+ return '0x smart contracts not found';
+ } else if (!hasWalletAddress) {
+ return 'Enable wallet communication';
+ } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
+ return 'Disconnected from Ethereum network';
+ } else {
+ return 'Unexpected error';
+ }
+ }
+ private _renderExplanation(hasWalletAddress: boolean) {
+ if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
+ return this._renderContractsNotDeployedExplanation();
+ } else if (!hasWalletAddress) {
+ return this._renderNoWalletFoundExplanation();
+ } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
+ return this._renderDisconnectedFromNode();
+ } else {
+ return this._renderUnexpectedErrorExplanation();
+ }
+ }
+ private _renderDisconnectedFromNode() {
+ return (
+ <div>
+ 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.
+ </div>
+ );
+ }
+ private _renderUnexpectedErrorExplanation() {
+ 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:
+ </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.
+ <div className="pt1">
+ <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.'}
+ </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.
+ </div>
+ </div>
+ );
+ }
+ private _renderContractsNotDeployedExplanation() {
+ 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}).`
+ : `.`}
+ </div>
+ <h4>Metamask</h4>
+ <div>
+ If you are using{' '}
+ <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
+ Metamask
+ </a>, you can switch networks in the top left corner of the extension popover.
+ </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.'}
- </div>
- </div>
- );
- }
+ : '`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 661cc1d8c..45ba5cc9e 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -8,156 +8,156 @@ import { Side, Token, TokenState } from 'ts/types';
import { colors } from 'ts/utils/colors';
interface EthWethConversionDialogProps {
- direction: Side;
- onComplete: (direction: Side, value: BigNumber) => void;
- onCancelled: () => void;
- isOpen: boolean;
- token: Token;
- tokenState: TokenState;
- etherBalance: BigNumber;
+ direction: Side;
+ onComplete: (direction: Side, value: BigNumber) => void;
+ onCancelled: () => void;
+ isOpen: boolean;
+ token: Token;
+ tokenState: TokenState;
+ etherBalance: BigNumber;
}
interface EthWethConversionDialogState {
- value?: BigNumber;
- shouldShowIncompleteErrs: boolean;
- hasErrors: boolean;
+ value?: BigNumber;
+ shouldShowIncompleteErrs: boolean;
+ hasErrors: boolean;
}
export class EthWethConversionDialog extends React.Component<
- EthWethConversionDialogProps,
- EthWethConversionDialogState
+ EthWethConversionDialogProps,
+ EthWethConversionDialogState
> {
- constructor() {
- super();
- this.state = {
- shouldShowIncompleteErrs: false,
- hasErrors: false,
- };
- }
- 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)} />,
- ];
- const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
- return (
- <Dialog
- title={title}
- titleStyle={{ fontWeight: 100 }}
- actions={convertDialogActions}
- contentStyle={{ width: 448 }}
- open={this.props.isOpen}
- >
- {this._renderConversionDialogBody()}
- </Dialog>
- );
- }
- 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 isWrappedVersion = this.props.direction === Side.Receive;
- return (
- <div>
- <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>
- {this._renderCurrency(!isWrappedVersion)}
- </div>
- <div className="pt2 mx-auto" style={{ width: 245 }}>
- {this.props.direction === Side.Receive ? (
- <TokenAmountInput
- token={this.props.token}
- tokenState={this.props.tokenState}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- shouldCheckBalance={true}
- shouldCheckAllowance={false}
- onChange={this._onValueChange.bind(this)}
- amount={this.state.value}
- onVisitBalancesPageClick={this.props.onCancelled}
- />
- ) : (
- <EthAmountInput
- balance={this.props.etherBalance}
- amount={this.state.value}
- onChange={this._onValueChange.bind(this)}
- shouldCheckBalance={true}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- onVisitBalancesPageClick={this.props.onCancelled}
- />
- )}
- <div className="pt1" style={{ fontSize: 12 }}>
- <div className="left">1 ETH = 1 WETH</div>
- {this.props.direction === Side.Receive && (
- <div
- className="right"
- onClick={this._onMaxClick.bind(this)}
- style={{
- color: colors.darkBlue,
- textDecoration: 'underline',
- cursor: 'pointer',
- }}
- >
- Max
- </div>
- )}
- </div>
- </div>
- </div>
- </div>
- );
- }
- private _renderCurrency(isWrappedVersion: boolean) {
- const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
- const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
- const symbol = isWrappedVersion ? 'WETH' : 'ETH';
- return (
- <div className="mx-auto pt2">
- <div className="center" style={{ color: colors.darkBlue }}>
- {name}
- </div>
- <div className="center py2">
- <img src={iconUrl} style={{ width: 60 }} />
- </div>
- <div className="center" style={{ fontSize: 12 }}>
- ({symbol})
- </div>
- </div>
- );
- }
- private _onMaxClick() {
- this.setState({
- value: this.props.tokenState.balance,
- });
- }
- private _onValueChange(isValid: boolean, amount?: BigNumber) {
- this.setState({
- value: amount,
- hasErrors: !isValid,
- });
- }
- private _onConvertClick() {
- if (this.state.hasErrors) {
- this.setState({
- shouldShowIncompleteErrs: true,
- });
- } else {
- const value = this.state.value;
- this.setState({
- value: undefined,
- });
- this.props.onComplete(this.props.direction, value);
- }
- }
- private _onCancel() {
- this.setState({
- value: undefined,
- });
- this.props.onCancelled();
- }
+ constructor() {
+ super();
+ this.state = {
+ shouldShowIncompleteErrs: false,
+ hasErrors: false,
+ };
+ }
+ 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)} />,
+ ];
+ const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
+ return (
+ <Dialog
+ title={title}
+ titleStyle={{ fontWeight: 100 }}
+ actions={convertDialogActions}
+ contentStyle={{ width: 448 }}
+ open={this.props.isOpen}
+ >
+ {this._renderConversionDialogBody()}
+ </Dialog>
+ );
+ }
+ 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 isWrappedVersion = this.props.direction === Side.Receive;
+ return (
+ <div>
+ <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>
+ {this._renderCurrency(!isWrappedVersion)}
+ </div>
+ <div className="pt2 mx-auto" style={{ width: 245 }}>
+ {this.props.direction === Side.Receive ? (
+ <TokenAmountInput
+ token={this.props.token}
+ tokenState={this.props.tokenState}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ shouldCheckBalance={true}
+ shouldCheckAllowance={false}
+ onChange={this._onValueChange.bind(this)}
+ amount={this.state.value}
+ onVisitBalancesPageClick={this.props.onCancelled}
+ />
+ ) : (
+ <EthAmountInput
+ balance={this.props.etherBalance}
+ amount={this.state.value}
+ onChange={this._onValueChange.bind(this)}
+ shouldCheckBalance={true}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ onVisitBalancesPageClick={this.props.onCancelled}
+ />
+ )}
+ <div className="pt1" style={{ fontSize: 12 }}>
+ <div className="left">1 ETH = 1 WETH</div>
+ {this.props.direction === Side.Receive && (
+ <div
+ className="right"
+ onClick={this._onMaxClick.bind(this)}
+ style={{
+ color: colors.darkBlue,
+ textDecoration: 'underline',
+ cursor: 'pointer',
+ }}
+ >
+ Max
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderCurrency(isWrappedVersion: boolean) {
+ const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
+ const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
+ const symbol = isWrappedVersion ? 'WETH' : 'ETH';
+ return (
+ <div className="mx-auto pt2">
+ <div className="center" style={{ color: colors.darkBlue }}>
+ {name}
+ </div>
+ <div className="center py2">
+ <img src={iconUrl} style={{ width: 60 }} />
+ </div>
+ <div className="center" style={{ fontSize: 12 }}>
+ ({symbol})
+ </div>
+ </div>
+ );
+ }
+ private _onMaxClick() {
+ this.setState({
+ value: this.props.tokenState.balance,
+ });
+ }
+ private _onValueChange(isValid: boolean, amount?: BigNumber) {
+ this.setState({
+ value: amount,
+ hasErrors: !isValid,
+ });
+ }
+ private _onConvertClick() {
+ if (this.state.hasErrors) {
+ this.setState({
+ shouldShowIncompleteErrs: true,
+ });
+ } else {
+ const value = this.state.value;
+ this.setState({
+ value: undefined,
+ });
+ this.props.onComplete(this.props.direction, value);
+ }
+ }
+ private _onCancel() {
+ this.setState({
+ value: undefined,
+ });
+ this.props.onCancelled();
+ }
}
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index 60db93c52..8b7760a1a 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -17,245 +17,245 @@ import { utils } from 'ts/utils/utils';
const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`;
enum LedgerSteps {
- CONNECT,
- SELECT_ADDRESS,
+ CONNECT,
+ SELECT_ADDRESS,
}
interface LedgerConfigDialogProps {
- isOpen: boolean;
- toggleDialogFn: (isOpen: boolean) => void;
- dispatcher: Dispatcher;
- blockchain: Blockchain;
- networkId: number;
+ isOpen: boolean;
+ toggleDialogFn: (isOpen: boolean) => void;
+ dispatcher: Dispatcher;
+ blockchain: Blockchain;
+ networkId: number;
}
interface LedgerConfigDialogState {
- didConnectFail: boolean;
- stepIndex: LedgerSteps;
- userAddresses: string[];
- addressBalances: BigNumber[];
- derivationPath: string;
- derivationErrMsg: string;
+ didConnectFail: boolean;
+ stepIndex: LedgerSteps;
+ userAddresses: string[];
+ addressBalances: BigNumber[];
+ derivationPath: string;
+ derivationErrMsg: string;
}
export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, LedgerConfigDialogState> {
- constructor(props: LedgerConfigDialogProps) {
- super(props);
- this.state = {
- didConnectFail: false,
- stepIndex: LedgerSteps.CONNECT,
- userAddresses: [],
- addressBalances: [],
- derivationPath: configs.DEFAULT_DERIVATION_PATH,
- derivationErrMsg: '',
- };
- }
- public render() {
- const dialogActions = [
- <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
- ];
- const dialogTitle =
- this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
- return (
- <Dialog
- title={dialogTitle}
- titleStyle={{ fontWeight: 100 }}
- actions={dialogActions}
- open={this.props.isOpen}
- onRequestClose={this._onClose.bind(this)}
- autoScrollBodyContent={true}
- 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>
- </Dialog>
- );
- }
- private _renderConnectStep() {
- return (
- <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">
- 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>
- </li>
- </ol>
- <div className="center pb3">
- <LifeCycleRaisedButton
- isPrimary={true}
- labelReady="Connect to Ledger"
- labelLoading="Connecting..."
- labelComplete="Connected!"
- onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
- />
- {this.state.didConnectFail && (
- <div className="pt2 left-align" style={{ color: colors.red200 }}>
- Failed to connect. Follow the instructions and try again.
- </div>
- )}
- </div>
- </div>
- );
- }
- private _renderSelectAddressStep() {
- return (
- <div>
- <div>
- <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>
- </Table>
- </div>
- <div className="flex pt2" style={{ height: 100 }}>
- <div className="overflow-hidden" style={{ width: 180 }}>
- <TextField
- floatingLabelFixed={true}
- 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 }}>
- <LifeCycleRaisedButton
- labelReady="Update"
- labelLoading="Updating..."
- labelComplete="Updated!"
- onClickAsyncFn={this._onFetchAddressesForDerivationPathAsync.bind(this)}
- />
- </div>
- </div>
- </div>
- );
- }
- private _renderAddressTableRows() {
- const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
- const balance = this.state.addressBalances[i];
- const addressTooltipId = `address-${userAddress}`;
- const balanceTooltipId = `balance-${userAddress}`;
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
- // We specifically prefix kovan ETH.
- // TODO: We should probably add prefixes for all networks
- const isKovanNetwork = networkName === 'Kovan';
- const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
- return (
- <TableRow key={userAddress} style={{ height: 40 }}>
- <TableRowColumn colSpan={2}>
- <div data-tip={true} data-for={addressTooltipId}>
- {userAddress}
- </div>
- <ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip>
- </TableRowColumn>
- <TableRowColumn>
- <div data-tip={true} data-for={balanceTooltipId}>
- {balanceString}
- </div>
- <ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip>
- </TableRowColumn>
- </TableRow>
- );
- });
- return rows;
- }
- private _onClose() {
- this.setState({
- didConnectFail: false,
- });
- const isOpen = false;
- this.props.toggleDialogFn(isOpen);
- }
- private _onAddressSelected(selectedRowIndexes: number[]) {
- const selectedRowIndex = selectedRowIndexes[0];
- this.props.blockchain.updateLedgerDerivationIndex(selectedRowIndex);
- const selectedAddress = this.state.userAddresses[selectedRowIndex];
- const selectAddressBalance = this.state.addressBalances[selectedRowIndex];
- this.props.dispatcher.updateUserAddress(selectedAddress);
- this.props.blockchain.updateWeb3WrapperPrevUserAddress(selectedAddress);
- this.props.dispatcher.updateUserEtherBalance(selectAddressBalance);
- this.setState({
- stepIndex: LedgerSteps.CONNECT,
- });
- const isOpen = false;
- this.props.toggleDialogFn(isOpen);
- }
- private async _onFetchAddressesForDerivationPathAsync(): Promise<boolean> {
- const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists();
- let didSucceed;
- if (currentlySetPath === this.state.derivationPath) {
- didSucceed = true;
- return didSucceed;
- }
- this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath);
- didSucceed = await this._fetchAddressesAndBalancesAsync();
- if (!didSucceed) {
- this.setState({
- derivationErrMsg: 'Failed to connect to Ledger.',
- });
- }
- return didSucceed;
- }
- private async _fetchAddressesAndBalancesAsync() {
- let userAddresses: string[];
- const addressBalances: BigNumber[] = [];
- try {
- userAddresses = await this._getUserAddressesAsync();
- for (const address of userAddresses) {
- const balance = await this.props.blockchain.getBalanceInEthAsync(address);
- addressBalances.push(balance);
- }
- } catch (err) {
- utils.consoleLog(`Ledger error: ${JSON.stringify(err)}`);
- this.setState({
- didConnectFail: true,
- });
- return false;
- }
- this.setState({
- userAddresses,
- addressBalances,
- });
- return true;
- }
- private _onDerivationPathChanged(e: any, derivationPath: string) {
- let derivationErrMsg = '';
- if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
- derivationErrMsg = 'Must be valid Ethereum path.';
- }
+ constructor(props: LedgerConfigDialogProps) {
+ super(props);
+ this.state = {
+ didConnectFail: false,
+ stepIndex: LedgerSteps.CONNECT,
+ userAddresses: [],
+ addressBalances: [],
+ derivationPath: configs.DEFAULT_DERIVATION_PATH,
+ derivationErrMsg: '',
+ };
+ }
+ public render() {
+ const dialogActions = [
+ <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
+ ];
+ const dialogTitle =
+ this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
+ return (
+ <Dialog
+ title={dialogTitle}
+ titleStyle={{ fontWeight: 100 }}
+ actions={dialogActions}
+ open={this.props.isOpen}
+ onRequestClose={this._onClose.bind(this)}
+ autoScrollBodyContent={true}
+ 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>
+ </Dialog>
+ );
+ }
+ private _renderConnectStep() {
+ return (
+ <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">
+ 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>
+ </li>
+ </ol>
+ <div className="center pb3">
+ <LifeCycleRaisedButton
+ isPrimary={true}
+ labelReady="Connect to Ledger"
+ labelLoading="Connecting..."
+ labelComplete="Connected!"
+ onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
+ />
+ {this.state.didConnectFail && (
+ <div className="pt2 left-align" style={{ color: colors.red200 }}>
+ Failed to connect. Follow the instructions and try again.
+ </div>
+ )}
+ </div>
+ </div>
+ );
+ }
+ private _renderSelectAddressStep() {
+ return (
+ <div>
+ <div>
+ <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>
+ </Table>
+ </div>
+ <div className="flex pt2" style={{ height: 100 }}>
+ <div className="overflow-hidden" style={{ width: 180 }}>
+ <TextField
+ floatingLabelFixed={true}
+ 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 }}>
+ <LifeCycleRaisedButton
+ labelReady="Update"
+ labelLoading="Updating..."
+ labelComplete="Updated!"
+ onClickAsyncFn={this._onFetchAddressesForDerivationPathAsync.bind(this)}
+ />
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderAddressTableRows() {
+ const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
+ const balance = this.state.addressBalances[i];
+ const addressTooltipId = `address-${userAddress}`;
+ const balanceTooltipId = `balance-${userAddress}`;
+ const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ // We specifically prefix kovan ETH.
+ // TODO: We should probably add prefixes for all networks
+ const isKovanNetwork = networkName === 'Kovan';
+ const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
+ return (
+ <TableRow key={userAddress} style={{ height: 40 }}>
+ <TableRowColumn colSpan={2}>
+ <div data-tip={true} data-for={addressTooltipId}>
+ {userAddress}
+ </div>
+ <ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip>
+ </TableRowColumn>
+ <TableRowColumn>
+ <div data-tip={true} data-for={balanceTooltipId}>
+ {balanceString}
+ </div>
+ <ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip>
+ </TableRowColumn>
+ </TableRow>
+ );
+ });
+ return rows;
+ }
+ private _onClose() {
+ this.setState({
+ didConnectFail: false,
+ });
+ const isOpen = false;
+ this.props.toggleDialogFn(isOpen);
+ }
+ private _onAddressSelected(selectedRowIndexes: number[]) {
+ const selectedRowIndex = selectedRowIndexes[0];
+ this.props.blockchain.updateLedgerDerivationIndex(selectedRowIndex);
+ const selectedAddress = this.state.userAddresses[selectedRowIndex];
+ const selectAddressBalance = this.state.addressBalances[selectedRowIndex];
+ this.props.dispatcher.updateUserAddress(selectedAddress);
+ this.props.blockchain.updateWeb3WrapperPrevUserAddress(selectedAddress);
+ this.props.dispatcher.updateUserEtherBalance(selectAddressBalance);
+ this.setState({
+ stepIndex: LedgerSteps.CONNECT,
+ });
+ const isOpen = false;
+ this.props.toggleDialogFn(isOpen);
+ }
+ private async _onFetchAddressesForDerivationPathAsync(): Promise<boolean> {
+ const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists();
+ let didSucceed;
+ if (currentlySetPath === this.state.derivationPath) {
+ didSucceed = true;
+ return didSucceed;
+ }
+ this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath);
+ didSucceed = await this._fetchAddressesAndBalancesAsync();
+ if (!didSucceed) {
+ this.setState({
+ derivationErrMsg: 'Failed to connect to Ledger.',
+ });
+ }
+ return didSucceed;
+ }
+ private async _fetchAddressesAndBalancesAsync() {
+ let userAddresses: string[];
+ const addressBalances: BigNumber[] = [];
+ try {
+ userAddresses = await this._getUserAddressesAsync();
+ for (const address of userAddresses) {
+ const balance = await this.props.blockchain.getBalanceInEthAsync(address);
+ addressBalances.push(balance);
+ }
+ } catch (err) {
+ utils.consoleLog(`Ledger error: ${JSON.stringify(err)}`);
+ this.setState({
+ didConnectFail: true,
+ });
+ return false;
+ }
+ this.setState({
+ userAddresses,
+ addressBalances,
+ });
+ return true;
+ }
+ private _onDerivationPathChanged(e: any, derivationPath: string) {
+ let derivationErrMsg = '';
+ if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
+ derivationErrMsg = 'Must be valid Ethereum path.';
+ }
- this.setState({
- derivationPath,
- derivationErrMsg,
- });
- }
- private async _onConnectLedgerClickAsync() {
- const didSucceed = await this._fetchAddressesAndBalancesAsync();
- if (didSucceed) {
- this.setState({
- stepIndex: LedgerSteps.SELECT_ADDRESS,
- });
- }
- return didSucceed;
- }
- private async _getUserAddressesAsync(): Promise<string[]> {
- let userAddresses: string[];
- userAddresses = await this.props.blockchain.getUserAccountsAsync();
+ this.setState({
+ derivationPath,
+ derivationErrMsg,
+ });
+ }
+ private async _onConnectLedgerClickAsync() {
+ const didSucceed = await this._fetchAddressesAndBalancesAsync();
+ if (didSucceed) {
+ this.setState({
+ stepIndex: LedgerSteps.SELECT_ADDRESS,
+ });
+ }
+ return didSucceed;
+ }
+ private async _getUserAddressesAsync(): Promise<string[]> {
+ let userAddresses: string[];
+ userAddresses = await this.props.blockchain.getUserAccountsAsync();
- if (_.isEmpty(userAddresses)) {
- throw new Error('No addresses retrieved.');
- }
- return userAddresses;
- }
+ if (_.isEmpty(userAddresses)) {
+ throw new Error('No addresses retrieved.');
+ }
+ return userAddresses;
+ }
}
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index 3ecc454a0..1c5efc978 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -4,33 +4,33 @@ import * as React from 'react';
import { colors } from 'ts/utils/colors';
interface PortalDisclaimerDialogProps {
- isOpen: boolean;
- onToggleDialog: () => void;
+ isOpen: boolean;
+ onToggleDialog: () => void;
}
export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) {
- return (
- <Dialog
- title="0x Portal Disclaimer"
- 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>
- 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>
- );
+ return (
+ <Dialog
+ title="0x Portal Disclaimer"
+ 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>
+ 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 b3dbce598..b9022cd9b 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -8,110 +8,110 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
import { Token, TokenState } from 'ts/types';
interface SendDialogProps {
- onComplete: (recipient: string, value: BigNumber) => void;
- onCancelled: () => void;
- isOpen: boolean;
- token: Token;
- tokenState: TokenState;
+ onComplete: (recipient: string, value: BigNumber) => void;
+ onCancelled: () => void;
+ isOpen: boolean;
+ token: Token;
+ tokenState: TokenState;
}
interface SendDialogState {
- value?: BigNumber;
- recipient: string;
- shouldShowIncompleteErrs: boolean;
- isAmountValid: boolean;
+ value?: BigNumber;
+ recipient: string;
+ shouldShowIncompleteErrs: boolean;
+ isAmountValid: boolean;
}
export class SendDialog extends React.Component<SendDialogProps, SendDialogState> {
- constructor() {
- super();
- this.state = {
- recipient: '',
- shouldShowIncompleteErrs: false,
- isAmountValid: false,
- };
- }
- public render() {
- const transferDialogActions = [
- <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
- <FlatButton
- key="sendTransfer"
- disabled={this._hasErrors()}
- label="Send"
- primary={true}
- onTouchTap={this._onSendClick.bind(this)}
- />,
- ];
- return (
- <Dialog
- title="I want to send"
- titleStyle={{ fontWeight: 100 }}
- actions={transferDialogActions}
- open={this.props.isOpen}
- >
- {this._renderSendDialogBody()}
- </Dialog>
- );
- }
- private _renderSendDialogBody() {
- return (
- <div className="mx-auto" style={{ maxWidth: 300 }}>
- <div style={{ height: 80 }}>
- <AddressInput
- initialAddress={this.state.recipient}
- updateAddress={this._onRecipientChange.bind(this)}
- isRequired={true}
- label={'Recipient address'}
- hintText={'Address'}
- />
- </div>
- <TokenAmountInput
- label="Amount to send"
- token={this.props.token}
- tokenState={this.props.tokenState}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- shouldCheckBalance={true}
- shouldCheckAllowance={false}
- onChange={this._onValueChange.bind(this)}
- amount={this.state.value}
- onVisitBalancesPageClick={this.props.onCancelled}
- />
- </div>
- );
- }
- private _onRecipientChange(recipient?: string) {
- this.setState({
- shouldShowIncompleteErrs: false,
- recipient,
- });
- }
- private _onValueChange(isValid: boolean, amount?: BigNumber) {
- this.setState({
- isAmountValid: isValid,
- value: amount,
- });
- }
- private _onSendClick() {
- if (this._hasErrors()) {
- this.setState({
- shouldShowIncompleteErrs: true,
- });
- } else {
- const value = this.state.value;
- this.setState({
- recipient: undefined,
- value: undefined,
- });
- this.props.onComplete(this.state.recipient, value);
- }
- }
- private _onCancel() {
- this.setState({
- value: undefined,
- });
- this.props.onCancelled();
- }
- private _hasErrors() {
- return _.isUndefined(this.state.recipient) || _.isUndefined(this.state.value) || !this.state.isAmountValid;
- }
+ constructor() {
+ super();
+ this.state = {
+ recipient: '',
+ shouldShowIncompleteErrs: false,
+ isAmountValid: false,
+ };
+ }
+ public render() {
+ const transferDialogActions = [
+ <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
+ <FlatButton
+ key="sendTransfer"
+ disabled={this._hasErrors()}
+ label="Send"
+ primary={true}
+ onTouchTap={this._onSendClick.bind(this)}
+ />,
+ ];
+ return (
+ <Dialog
+ title="I want to send"
+ titleStyle={{ fontWeight: 100 }}
+ actions={transferDialogActions}
+ open={this.props.isOpen}
+ >
+ {this._renderSendDialogBody()}
+ </Dialog>
+ );
+ }
+ private _renderSendDialogBody() {
+ return (
+ <div className="mx-auto" style={{ maxWidth: 300 }}>
+ <div style={{ height: 80 }}>
+ <AddressInput
+ initialAddress={this.state.recipient}
+ updateAddress={this._onRecipientChange.bind(this)}
+ isRequired={true}
+ label={'Recipient address'}
+ hintText={'Address'}
+ />
+ </div>
+ <TokenAmountInput
+ label="Amount to send"
+ token={this.props.token}
+ tokenState={this.props.tokenState}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ shouldCheckBalance={true}
+ shouldCheckAllowance={false}
+ onChange={this._onValueChange.bind(this)}
+ amount={this.state.value}
+ onVisitBalancesPageClick={this.props.onCancelled}
+ />
+ </div>
+ );
+ }
+ private _onRecipientChange(recipient?: string) {
+ this.setState({
+ shouldShowIncompleteErrs: false,
+ recipient,
+ });
+ }
+ private _onValueChange(isValid: boolean, amount?: BigNumber) {
+ this.setState({
+ isAmountValid: isValid,
+ value: amount,
+ });
+ }
+ private _onSendClick() {
+ if (this._hasErrors()) {
+ this.setState({
+ shouldShowIncompleteErrs: true,
+ });
+ } else {
+ const value = this.state.value;
+ this.setState({
+ recipient: undefined,
+ value: undefined,
+ });
+ this.props.onComplete(this.state.recipient, value);
+ }
+ }
+ private _onCancel() {
+ this.setState({
+ value: undefined,
+ });
+ this.props.onCancelled();
+ }
+ private _hasErrors() {
+ 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 3f29d46f8..b1804e95c 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -9,94 +9,94 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { Token, TokenByAddress } from 'ts/types';
interface TrackTokenConfirmationDialogProps {
- tokens: Token[];
- tokenByAddress: TokenByAddress;
- isOpen: boolean;
- onToggleDialog: (didConfirmTokenTracking: boolean) => void;
- dispatcher: Dispatcher;
- networkId: number;
- blockchain: Blockchain;
- userAddress: string;
+ tokens: Token[];
+ tokenByAddress: TokenByAddress;
+ isOpen: boolean;
+ onToggleDialog: (didConfirmTokenTracking: boolean) => void;
+ dispatcher: Dispatcher;
+ networkId: number;
+ blockchain: Blockchain;
+ userAddress: string;
}
interface TrackTokenConfirmationDialogState {
- isAddingTokenToTracked: boolean;
+ isAddingTokenToTracked: boolean;
}
export class TrackTokenConfirmationDialog extends React.Component<
- TrackTokenConfirmationDialogProps,
- TrackTokenConfirmationDialogState
+ TrackTokenConfirmationDialogProps,
+ TrackTokenConfirmationDialogState
> {
- constructor(props: TrackTokenConfirmationDialogProps) {
- super(props);
- this.state = {
- isAddingTokenToTracked: false,
- };
- }
- public render() {
- const tokens = this.props.tokens;
- return (
- <Dialog
- title="Tracking confirmation"
- titleStyle={{ fontWeight: 100 }}
- actions={[
- <FlatButton
- key="trackNo"
- label="No"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
- />,
- <FlatButton
- key="trackYes"
- label="Yes"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
- />,
- ]}
- open={this.props.isOpen}
- onRequestClose={this.props.onToggleDialog.bind(this, false)}
- autoScrollBodyContent={true}
- >
- <div className="pt2">
- <TrackTokenConfirmation
- tokens={tokens}
- networkId={this.props.networkId}
- tokenByAddress={this.props.tokenByAddress}
- isAddingTokenToTracked={this.state.isAddingTokenToTracked}
- />
- </div>
- </Dialog>
- );
- }
- private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
- if (!didUserAcceptTracking) {
- this.props.onToggleDialog(didUserAcceptTracking);
- return;
- }
- this.setState({
- isAddingTokenToTracked: true,
- });
- for (const token of this.props.tokens) {
- const newTokenEntry = {
- ...token,
- };
+ constructor(props: TrackTokenConfirmationDialogProps) {
+ super(props);
+ this.state = {
+ isAddingTokenToTracked: false,
+ };
+ }
+ public render() {
+ const tokens = this.props.tokens;
+ return (
+ <Dialog
+ title="Tracking confirmation"
+ titleStyle={{ fontWeight: 100 }}
+ actions={[
+ <FlatButton
+ key="trackNo"
+ label="No"
+ onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
+ />,
+ <FlatButton
+ key="trackYes"
+ label="Yes"
+ onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
+ />,
+ ]}
+ open={this.props.isOpen}
+ onRequestClose={this.props.onToggleDialog.bind(this, false)}
+ autoScrollBodyContent={true}
+ >
+ <div className="pt2">
+ <TrackTokenConfirmation
+ tokens={tokens}
+ networkId={this.props.networkId}
+ tokenByAddress={this.props.tokenByAddress}
+ isAddingTokenToTracked={this.state.isAddingTokenToTracked}
+ />
+ </div>
+ </Dialog>
+ );
+ }
+ private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
+ if (!didUserAcceptTracking) {
+ this.props.onToggleDialog(didUserAcceptTracking);
+ return;
+ }
+ this.setState({
+ isAddingTokenToTracked: true,
+ });
+ for (const token of this.props.tokens) {
+ const newTokenEntry = {
+ ...token,
+ };
- newTokenEntry.isTracked = true;
- trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
- this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
+ newTokenEntry.isTracked = true;
+ trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
+ this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
- const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
- token.address,
- );
- this.props.dispatcher.updateTokenStateByAddress({
- [token.address]: {
- balance,
- allowance,
- },
- });
- }
+ const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+ token.address,
+ );
+ this.props.dispatcher.updateTokenStateByAddress({
+ [token.address]: {
+ balance,
+ allowance,
+ },
+ });
+ }
- this.setState({
- isAddingTokenToTracked: false,
- });
- this.props.onToggleDialog(didUserAcceptTracking);
- }
+ this.setState({
+ isAddingTokenToTracked: false,
+ });
+ this.props.onToggleDialog(didUserAcceptTracking);
+ }
}
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 098e3e26d..2ea51d07b 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -5,42 +5,42 @@ import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
interface U2fNotSupportedDialogProps {
- isOpen: boolean;
- onToggleDialog: () => void;
+ isOpen: boolean;
+ onToggleDialog: () => void;
}
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)} />]}
- open={props.isOpen}
- onRequestClose={props.onToggleDialog.bind(this)}
- autoScrollBodyContent={true}
- >
- <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.
- </div>
- <div>
- <ul>
- <li className="pb1">Chrome version 38 or later</li>
- <li className="pb1">Opera version 40 of later</li>
- <li>
- Firefox with{' '}
- <a
- href={constants.URL_FIREFOX_U2F_ADDON}
- target="_blank"
- style={{ textDecoration: 'underline' }}
- >
- this extension
- </a>.
- </li>
- </ul>
- </div>
- </div>
- </Dialog>
- );
+ return (
+ <Dialog
+ title="U2F Not Supported"
+ 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>
+ 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>
+ <li className="pb1">Chrome version 38 or later</li>
+ <li className="pb1">Opera version 40 of later</li>
+ <li>
+ Firefox with{' '}
+ <a
+ href={constants.URL_FIREFOX_U2F_ADDON}
+ target="_blank"
+ style={{ textDecoration: 'underline' }}
+ >
+ this extension
+ </a>.
+ </li>
+ </ul>
+ </div>
+ </div>
+ </Dialog>
+ );
}
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 9e91ff12d..98436eb50 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
@@ -4,30 +4,30 @@ import { colors } from 'material-ui/styles';
import * as React from 'react';
interface WrappedEthSectionNoticeDialogProps {
- isOpen: boolean;
- onToggleDialog: () => void;
+ isOpen: boolean;
+ onToggleDialog: () => void;
}
export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDialogProps) {
- return (
- <Dialog
- title="Dedicated Wrapped Ether Section"
- titleStyle={{ fontWeight: 100 }}
- actions={[
- <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>
- 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>
- );
+ return (
+ <Dialog
+ title="Dedicated Wrapped Ether Section"
+ titleStyle={{ fontWeight: 100 }}
+ actions={[
+ <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>
+ 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 300e71f1f..af1b33eef 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -12,115 +12,115 @@ import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
interface EthWethConversionButtonProps {
- direction: Side;
- ethToken: Token;
- ethTokenState: TokenState;
- dispatcher: Dispatcher;
- blockchain: Blockchain;
- userEtherBalance: BigNumber;
- isOutdatedWrappedEther: boolean;
- onConversionSuccessful?: () => void;
- isDisabled?: boolean;
+ direction: Side;
+ ethToken: Token;
+ ethTokenState: TokenState;
+ dispatcher: Dispatcher;
+ blockchain: Blockchain;
+ userEtherBalance: BigNumber;
+ isOutdatedWrappedEther: boolean;
+ onConversionSuccessful?: () => void;
+ isDisabled?: boolean;
}
interface EthWethConversionButtonState {
- isEthConversionDialogVisible: boolean;
- isEthConversionHappening: boolean;
+ isEthConversionDialogVisible: boolean;
+ isEthConversionHappening: boolean;
}
export class EthWethConversionButton extends React.Component<
- EthWethConversionButtonProps,
- EthWethConversionButtonState
+ EthWethConversionButtonProps,
+ EthWethConversionButtonState
> {
- public static defaultProps: Partial<EthWethConversionButtonProps> = {
- isDisabled: false,
- onConversionSuccessful: _.noop,
- };
- public constructor(props: EthWethConversionButtonProps) {
- super(props);
- this.state = {
- isEthConversionDialogVisible: false,
- isEthConversionHappening: false,
- };
- }
- public render() {
- const labelStyle = this.state.isEthConversionHappening ? { fontSize: 10 } : {};
- let callToActionLabel;
- let inProgressLabel;
- if (this.props.direction === Side.Deposit) {
- callToActionLabel = 'Wrap';
- inProgressLabel = 'Wrapping...';
- } else {
- callToActionLabel = 'Unwrap';
- inProgressLabel = 'Unwrapping...';
- }
- return (
- <div>
- <RaisedButton
- style={{ width: '100%' }}
- labelStyle={labelStyle}
- disabled={this.props.isDisabled || this.state.isEthConversionHappening}
- label={this.state.isEthConversionHappening ? inProgressLabel : callToActionLabel}
- onClick={this._toggleConversionDialog.bind(this)}
- />
- <EthWethConversionDialog
- direction={this.props.direction}
- isOpen={this.state.isEthConversionDialogVisible}
- onComplete={this._onConversionAmountSelectedAsync.bind(this)}
- onCancelled={this._toggleConversionDialog.bind(this)}
- etherBalance={this.props.userEtherBalance}
- token={this.props.ethToken}
- tokenState={this.props.ethTokenState}
- />
- </div>
- );
- }
- private _toggleConversionDialog() {
- this.setState({
- isEthConversionDialogVisible: !this.state.isEthConversionDialogVisible,
- });
- }
- private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber) {
- this.setState({
- isEthConversionHappening: true,
- });
- this._toggleConversionDialog();
- const token = this.props.ethToken;
- const tokenState = this.props.ethTokenState;
- let balance = tokenState.balance;
- try {
- if (direction === Side.Deposit) {
- await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value);
- const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
- this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
- balance = balance.plus(value);
- } else {
- await this.props.blockchain.convertWrappedEthTokensToEthAsync(token.address, value);
- const tokenAmount = ZeroEx.toUnitAmount(value, token.decimals);
- this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`);
- balance = balance.minus(value);
- }
- if (!this.props.isOutdatedWrappedEther) {
- this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
- }
- this.props.onConversionSuccessful();
- } catch (err) {
- const errMsg = `${err}`;
- if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- } 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.';
- this.props.dispatcher.showFlashMessage(errorMsg);
- await errorReporter.reportAsync(err);
- }
- }
- this.setState({
- isEthConversionHappening: false,
- });
- }
+ public static defaultProps: Partial<EthWethConversionButtonProps> = {
+ isDisabled: false,
+ onConversionSuccessful: _.noop,
+ };
+ public constructor(props: EthWethConversionButtonProps) {
+ super(props);
+ this.state = {
+ isEthConversionDialogVisible: false,
+ isEthConversionHappening: false,
+ };
+ }
+ public render() {
+ const labelStyle = this.state.isEthConversionHappening ? { fontSize: 10 } : {};
+ let callToActionLabel;
+ let inProgressLabel;
+ if (this.props.direction === Side.Deposit) {
+ callToActionLabel = 'Wrap';
+ inProgressLabel = 'Wrapping...';
+ } else {
+ callToActionLabel = 'Unwrap';
+ inProgressLabel = 'Unwrapping...';
+ }
+ return (
+ <div>
+ <RaisedButton
+ style={{ width: '100%' }}
+ labelStyle={labelStyle}
+ disabled={this.props.isDisabled || this.state.isEthConversionHappening}
+ label={this.state.isEthConversionHappening ? inProgressLabel : callToActionLabel}
+ onClick={this._toggleConversionDialog.bind(this)}
+ />
+ <EthWethConversionDialog
+ direction={this.props.direction}
+ isOpen={this.state.isEthConversionDialogVisible}
+ onComplete={this._onConversionAmountSelectedAsync.bind(this)}
+ onCancelled={this._toggleConversionDialog.bind(this)}
+ etherBalance={this.props.userEtherBalance}
+ token={this.props.ethToken}
+ tokenState={this.props.ethTokenState}
+ />
+ </div>
+ );
+ }
+ private _toggleConversionDialog() {
+ this.setState({
+ isEthConversionDialogVisible: !this.state.isEthConversionDialogVisible,
+ });
+ }
+ private async _onConversionAmountSelectedAsync(direction: Side, value: BigNumber) {
+ this.setState({
+ isEthConversionHappening: true,
+ });
+ this._toggleConversionDialog();
+ const token = this.props.ethToken;
+ const tokenState = this.props.ethTokenState;
+ let balance = tokenState.balance;
+ try {
+ if (direction === Side.Deposit) {
+ await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value);
+ const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
+ this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
+ balance = balance.plus(value);
+ } else {
+ await this.props.blockchain.convertWrappedEthTokensToEthAsync(token.address, value);
+ const tokenAmount = ZeroEx.toUnitAmount(value, token.decimals);
+ this.props.dispatcher.showFlashMessage(`Successfully unwrapped ${tokenAmount.toString()} WETH to ETH`);
+ balance = balance.minus(value);
+ }
+ if (!this.props.isOutdatedWrappedEther) {
+ this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
+ }
+ this.props.onConversionSuccessful();
+ } catch (err) {
+ const errMsg = `${err}`;
+ if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ } 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.';
+ this.props.dispatcher.showFlashMessage(errorMsg);
+ await errorReporter.reportAsync(err);
+ }
+ }
+ this.setState({
+ isEthConversionHappening: false,
+ });
+ }
}
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index d074ec787..1593d51f0 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -10,13 +10,13 @@ import { Blockchain } from 'ts/blockchain';
import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button';
import { Dispatcher } from 'ts/redux/dispatcher';
import {
- EtherscanLinkSuffixes,
- OutdatedWrappedEtherByNetworkId,
- Side,
- Token,
- TokenByAddress,
- TokenState,
- TokenStateByAddress,
+ EtherscanLinkSuffixes,
+ OutdatedWrappedEtherByNetworkId,
+ Side,
+ Token,
+ TokenByAddress,
+ TokenState,
+ TokenStateByAddress,
} from 'ts/types';
import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
@@ -30,345 +30,345 @@ const ETHER_ICON_PATH = '/images/ether.png';
const OUTDATED_WETH_ICON_PATH = '/images/wrapped_eth_gray.png';
interface OutdatedWETHAddressToIsStateLoaded {
- [address: string]: boolean;
+ [address: string]: boolean;
}
interface OutdatedWETHStateByAddress {
- [address: string]: TokenState;
+ [address: string]: TokenState;
}
interface EthWrappersProps {
- networkId: number;
- blockchain: Blockchain;
- dispatcher: Dispatcher;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
- userAddress: string;
- userEtherBalance: BigNumber;
+ networkId: number;
+ blockchain: Blockchain;
+ dispatcher: Dispatcher;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ userAddress: string;
+ userEtherBalance: BigNumber;
}
interface EthWrappersState {
- outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded;
- outdatedWETHStateByAddress: OutdatedWETHStateByAddress;
+ outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded;
+ outdatedWETHStateByAddress: OutdatedWETHStateByAddress;
}
export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> {
- constructor(props: EthWrappersProps) {
- super(props);
- const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
- const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
- const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
- _.each(outdatedWETHAddresses, outdatedWETHAddress => {
- outdatedWETHAddressToIsStateLoaded[outdatedWETHAddress] = false;
- outdatedWETHStateByAddress[outdatedWETHAddress] = {
- balance: new BigNumber(0),
- allowance: new BigNumber(0),
- };
- });
- this.state = {
- outdatedWETHAddressToIsStateLoaded,
- outdatedWETHStateByAddress,
- };
- }
- public componentDidMount() {
- window.scrollTo(0, 0);
- // tslint:disable-next-line:no-floating-promises
- this._fetchOutdatedWETHStateAsync();
- }
- public render() {
- const tokens = _.values(this.props.tokenByAddress);
- 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,
- );
- 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="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="flex">
- <div>About Wrapped ETH</div>
- <div className="pl1">
- <i className="zmdi zmdi-open-in-new" />
- </div>
- </div>
- </a>
- </div>
- </div>
- <Divider />
- <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 }}>
- <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
- <TableRow>
- <TableHeaderColumn>ETH Token</TableHeaderColumn>
- <TableHeaderColumn>Balance</TableHeaderColumn>
- <TableHeaderColumn className="center">
- {this._renderActionColumnTitle(isBidirectional)}
- </TableHeaderColumn>
- </TableRow>
- </TableHeader>
- <TableBody displayRowCheckbox={false}>
- <TableRow key="ETH">
- <TableRowColumn className="py1">
- <div className="flex">
- <img
- style={{
- width: ICON_DIMENSION,
- height: ICON_DIMENSION,
- }}
- src={ETHER_ICON_PATH}
- />
- <div className="ml2 sm-hide xs-hide" style={{ marginTop: 12 }}>
- ETH
- </div>
- </div>
- </TableRowColumn>
- <TableRowColumn>
- {this.props.userEtherBalance.toFixed(PRECISION)} ETH
- </TableRowColumn>
- <TableRowColumn>
- <EthWethConversionButton
- isOutdatedWrappedEther={false}
- direction={Side.Deposit}
- ethToken={etherToken}
- ethTokenState={etherTokenState}
- dispatcher={this.props.dispatcher}
- blockchain={this.props.blockchain}
- userEtherBalance={this.props.userEtherBalance}
- />
- </TableRowColumn>
- </TableRow>
- <TableRow key="WETH">
- <TableRowColumn className="py1">
- {this._renderTokenLink(tokenLabel, etherscanUrl)}
- </TableRowColumn>
- <TableRowColumn>{wethBalance.toFixed(PRECISION)} WETH</TableRowColumn>
- <TableRowColumn>
- <EthWethConversionButton
- isOutdatedWrappedEther={false}
- direction={Side.Receive}
- ethToken={etherToken}
- ethTokenState={etherTokenState}
- dispatcher={this.props.dispatcher}
- blockchain={this.props.blockchain}
- userEtherBalance={this.props.userEtherBalance}
- />
- </TableRowColumn>
- </TableRow>
- </TableBody>
- </Table>
- </div>
- </div>
- <div>
- <h4>Outdated WETH</h4>
- <Divider />
- <div className="pt2" style={{ lineHeight: 1.5 }}>
- The{' '}
- <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.
- </div>
- <div>
- <Table selectable={false} style={{ backgroundColor: colors.grey50 }}>
- <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
- <TableRow>
- <TableHeaderColumn>WETH Version</TableHeaderColumn>
- <TableHeaderColumn>Balance</TableHeaderColumn>
- <TableHeaderColumn className="center">
- {this._renderActionColumnTitle(!isBidirectional)}
- </TableHeaderColumn>
- </TableRow>
- </TableHeader>
- <TableBody displayRowCheckbox={false}>
- {this._renderOutdatedWeths(etherToken, etherTokenState)}
- </TableBody>
- </Table>
- </div>
- </div>
- </div>
- );
- }
- private _renderActionColumnTitle(isBidirectional: boolean) {
- let iconClass = 'zmdi-long-arrow-right';
- let leftSymbol = 'WETH';
- let rightSymbol = 'ETH';
- if (isBidirectional) {
- iconClass = 'zmdi-swap';
- leftSymbol = 'ETH';
- rightSymbol = 'WETH';
- }
- return (
- <div className="flex mx-auto" style={{ width: 85 }}>
- <div style={{ paddingTop: 3 }}>{leftSymbol}</div>
- <div className="px1">
- <i style={{ fontSize: 18 }} className={`zmdi ${iconClass}`} />
- </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>
- );
- },
- );
- return rows;
- }
- private _renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) {
- return (
- <span>
- {_.isUndefined(etherscanUrl) ? (
- tokenLabel
- ) : (
- <a href={etherscanUrl} target="_blank" style={{ textDecoration: 'none' }}>
- {tokenLabel}
- </a>
- )}
- </span>
- );
- }
- private _renderToken(name: string, address: string, imgPath: string) {
- 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}>
- {name}
- </span>
- <ReactTooltip id={tooltipId}>{address}</ReactTooltip>
- </div>
- </div>
- );
- }
- private async _onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) {
- this.setState({
- outdatedWETHAddressToIsStateLoaded: {
- ...this.state.outdatedWETHAddressToIsStateLoaded,
- [outdatedWETHAddress]: false,
- },
- });
- const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
- this.props.userAddress,
- outdatedWETHAddress,
- );
- this.setState({
- outdatedWETHAddressToIsStateLoaded: {
- ...this.state.outdatedWETHAddressToIsStateLoaded,
- [outdatedWETHAddress]: true,
- },
- outdatedWETHStateByAddress: {
- ...this.state.outdatedWETHStateByAddress,
- [outdatedWETHAddress]: {
- balance,
- allowance,
- },
- },
- });
- }
- private async _fetchOutdatedWETHStateAsync() {
- const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
- const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
- const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
- for (const address of outdatedWETHAddresses) {
- const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
- this.props.userAddress,
- address,
- );
- outdatedWETHStateByAddress[address] = {
- balance,
- allowance,
- };
- outdatedWETHAddressToIsStateLoaded[address] = true;
- }
- this.setState({
- outdatedWETHStateByAddress,
- outdatedWETHAddressToIsStateLoaded,
- });
- }
- 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;
- }),
- );
- return outdatedWETHAddresses;
- }
+ constructor(props: EthWrappersProps) {
+ super(props);
+ const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
+ const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
+ const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
+ _.each(outdatedWETHAddresses, outdatedWETHAddress => {
+ outdatedWETHAddressToIsStateLoaded[outdatedWETHAddress] = false;
+ outdatedWETHStateByAddress[outdatedWETHAddress] = {
+ balance: new BigNumber(0),
+ allowance: new BigNumber(0),
+ };
+ });
+ this.state = {
+ outdatedWETHAddressToIsStateLoaded,
+ outdatedWETHStateByAddress,
+ };
+ }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchOutdatedWETHStateAsync();
+ }
+ public render() {
+ const tokens = _.values(this.props.tokenByAddress);
+ 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,
+ );
+ 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="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="flex">
+ <div>About Wrapped ETH</div>
+ <div className="pl1">
+ <i className="zmdi zmdi-open-in-new" />
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+ <Divider />
+ <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 }}>
+ <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+ <TableRow>
+ <TableHeaderColumn>ETH Token</TableHeaderColumn>
+ <TableHeaderColumn>Balance</TableHeaderColumn>
+ <TableHeaderColumn className="center">
+ {this._renderActionColumnTitle(isBidirectional)}
+ </TableHeaderColumn>
+ </TableRow>
+ </TableHeader>
+ <TableBody displayRowCheckbox={false}>
+ <TableRow key="ETH">
+ <TableRowColumn className="py1">
+ <div className="flex">
+ <img
+ style={{
+ width: ICON_DIMENSION,
+ height: ICON_DIMENSION,
+ }}
+ src={ETHER_ICON_PATH}
+ />
+ <div className="ml2 sm-hide xs-hide" style={{ marginTop: 12 }}>
+ ETH
+ </div>
+ </div>
+ </TableRowColumn>
+ <TableRowColumn>
+ {this.props.userEtherBalance.toFixed(PRECISION)} ETH
+ </TableRowColumn>
+ <TableRowColumn>
+ <EthWethConversionButton
+ isOutdatedWrappedEther={false}
+ direction={Side.Deposit}
+ ethToken={etherToken}
+ ethTokenState={etherTokenState}
+ dispatcher={this.props.dispatcher}
+ blockchain={this.props.blockchain}
+ userEtherBalance={this.props.userEtherBalance}
+ />
+ </TableRowColumn>
+ </TableRow>
+ <TableRow key="WETH">
+ <TableRowColumn className="py1">
+ {this._renderTokenLink(tokenLabel, etherscanUrl)}
+ </TableRowColumn>
+ <TableRowColumn>{wethBalance.toFixed(PRECISION)} WETH</TableRowColumn>
+ <TableRowColumn>
+ <EthWethConversionButton
+ isOutdatedWrappedEther={false}
+ direction={Side.Receive}
+ ethToken={etherToken}
+ ethTokenState={etherTokenState}
+ dispatcher={this.props.dispatcher}
+ blockchain={this.props.blockchain}
+ userEtherBalance={this.props.userEtherBalance}
+ />
+ </TableRowColumn>
+ </TableRow>
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ <div>
+ <h4>Outdated WETH</h4>
+ <Divider />
+ <div className="pt2" style={{ lineHeight: 1.5 }}>
+ The{' '}
+ <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.
+ </div>
+ <div>
+ <Table selectable={false} style={{ backgroundColor: colors.grey50 }}>
+ <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+ <TableRow>
+ <TableHeaderColumn>WETH Version</TableHeaderColumn>
+ <TableHeaderColumn>Balance</TableHeaderColumn>
+ <TableHeaderColumn className="center">
+ {this._renderActionColumnTitle(!isBidirectional)}
+ </TableHeaderColumn>
+ </TableRow>
+ </TableHeader>
+ <TableBody displayRowCheckbox={false}>
+ {this._renderOutdatedWeths(etherToken, etherTokenState)}
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderActionColumnTitle(isBidirectional: boolean) {
+ let iconClass = 'zmdi-long-arrow-right';
+ let leftSymbol = 'WETH';
+ let rightSymbol = 'ETH';
+ if (isBidirectional) {
+ iconClass = 'zmdi-swap';
+ leftSymbol = 'ETH';
+ rightSymbol = 'WETH';
+ }
+ return (
+ <div className="flex mx-auto" style={{ width: 85 }}>
+ <div style={{ paddingTop: 3 }}>{leftSymbol}</div>
+ <div className="px1">
+ <i style={{ fontSize: 18 }} className={`zmdi ${iconClass}`} />
+ </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>
+ );
+ },
+ );
+ return rows;
+ }
+ private _renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) {
+ return (
+ <span>
+ {_.isUndefined(etherscanUrl) ? (
+ tokenLabel
+ ) : (
+ <a href={etherscanUrl} target="_blank" style={{ textDecoration: 'none' }}>
+ {tokenLabel}
+ </a>
+ )}
+ </span>
+ );
+ }
+ private _renderToken(name: string, address: string, imgPath: string) {
+ 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}>
+ {name}
+ </span>
+ <ReactTooltip id={tooltipId}>{address}</ReactTooltip>
+ </div>
+ </div>
+ );
+ }
+ private async _onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) {
+ this.setState({
+ outdatedWETHAddressToIsStateLoaded: {
+ ...this.state.outdatedWETHAddressToIsStateLoaded,
+ [outdatedWETHAddress]: false,
+ },
+ });
+ const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
+ this.props.userAddress,
+ outdatedWETHAddress,
+ );
+ this.setState({
+ outdatedWETHAddressToIsStateLoaded: {
+ ...this.state.outdatedWETHAddressToIsStateLoaded,
+ [outdatedWETHAddress]: true,
+ },
+ outdatedWETHStateByAddress: {
+ ...this.state.outdatedWETHStateByAddress,
+ [outdatedWETHAddress]: {
+ balance,
+ allowance,
+ },
+ },
+ });
+ }
+ private async _fetchOutdatedWETHStateAsync() {
+ const outdatedWETHAddresses = this._getOutdatedWETHAddresses();
+ const outdatedWETHAddressToIsStateLoaded: OutdatedWETHAddressToIsStateLoaded = {};
+ const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {};
+ for (const address of outdatedWETHAddresses) {
+ const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync(
+ this.props.userAddress,
+ address,
+ );
+ outdatedWETHStateByAddress[address] = {
+ balance,
+ allowance,
+ };
+ outdatedWETHAddressToIsStateLoaded[address] = true;
+ }
+ this.setState({
+ outdatedWETHStateByAddress,
+ outdatedWETHAddressToIsStateLoaded,
+ });
+ }
+ 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;
+ }),
+ );
+ 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 1a150e9ee..249ee419e 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -26,665 +26,665 @@ import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
interface FillOrderProps {
- blockchain: Blockchain;
- blockchainErr: BlockchainErrs;
- orderFillAmount: BigNumber;
- isOrderInUrl: boolean;
- networkId: number;
- userAddress: string;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
- initialOrder: Order;
- dispatcher: Dispatcher;
+ blockchain: Blockchain;
+ blockchainErr: BlockchainErrs;
+ orderFillAmount: BigNumber;
+ isOrderInUrl: boolean;
+ networkId: number;
+ userAddress: string;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ initialOrder: Order;
+ dispatcher: Dispatcher;
}
interface FillOrderState {
- didOrderValidationRun: boolean;
- areAllInvolvedTokensTracked: boolean;
- globalErrMsg: string;
- orderJSON: string;
- orderJSONErrMsg: string;
- parsedOrder: Order;
- didFillOrderSucceed: boolean;
- didCancelOrderSucceed: boolean;
- unavailableTakerAmount: BigNumber;
- isMakerTokenAddressInRegistry: boolean;
- isTakerTokenAddressInRegistry: boolean;
- isFillWarningDialogOpen: boolean;
- isFilling: boolean;
- isCancelling: boolean;
- isConfirmingTokenTracking: boolean;
- tokensToTrack: Token[];
+ didOrderValidationRun: boolean;
+ areAllInvolvedTokensTracked: boolean;
+ globalErrMsg: string;
+ orderJSON: string;
+ orderJSONErrMsg: string;
+ parsedOrder: Order;
+ didFillOrderSucceed: boolean;
+ didCancelOrderSucceed: boolean;
+ unavailableTakerAmount: BigNumber;
+ isMakerTokenAddressInRegistry: boolean;
+ isTakerTokenAddressInRegistry: boolean;
+ isFillWarningDialogOpen: boolean;
+ isFilling: boolean;
+ isCancelling: boolean;
+ isConfirmingTokenTracking: boolean;
+ tokensToTrack: Token[];
}
export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
- private _validator: SchemaValidator;
- constructor(props: FillOrderProps) {
- super(props);
- this.state = {
- globalErrMsg: '',
- didOrderValidationRun: false,
- areAllInvolvedTokensTracked: false,
- didFillOrderSucceed: false,
- didCancelOrderSucceed: false,
- orderJSON: _.isUndefined(this.props.initialOrder) ? '' : JSON.stringify(this.props.initialOrder),
- orderJSONErrMsg: '',
- parsedOrder: this.props.initialOrder,
- unavailableTakerAmount: new BigNumber(0),
- isMakerTokenAddressInRegistry: false,
- isTakerTokenAddressInRegistry: false,
- isFillWarningDialogOpen: false,
- isFilling: false,
- isCancelling: false,
- isConfirmingTokenTracking: false,
- tokensToTrack: [],
- };
- this._validator = new SchemaValidator();
- }
- public componentWillMount() {
- if (!_.isEmpty(this.state.orderJSON)) {
- // tslint:disable-next-line:no-floating-promises
- this._validateFillOrderFireAndForgetAsync(this.state.orderJSON);
- }
- }
- public componentDidMount() {
- window.scrollTo(0, 0);
- }
- public render() {
- return (
- <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
- <h3>Fill an order</h3>
- <Divider />
- <div>
- {!this.props.isOrderInUrl && (
- <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}
- tokenByAddress={this.props.tokenByAddress}
- networkId={this.props.networkId}
- orderJSON={this.state.orderJSON}
- onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
- />
- {this._renderOrderJsonNotices()}
- </div>
- )}
- <div>
- {!_.isUndefined(this.state.parsedOrder) &&
- this.state.didOrderValidationRun &&
- this.state.areAllInvolvedTokensTracked &&
- this._renderVisualOrder()}
- </div>
- {this.props.isOrderInUrl && (
- <div className="pt2">
- <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}
- tokenByAddress={this.props.tokenByAddress}
- networkId={this.props.networkId}
- orderJSON={this.state.orderJSON}
- onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
- />
- </CardText>
- </Card>
- {this._renderOrderJsonNotices()}
- </div>
- )}
- </div>
- <FillWarningDialog
- isOpen={this.state.isFillWarningDialogOpen}
- onToggleDialog={this._onFillWarningClosed.bind(this)}
- />
- <TrackTokenConfirmationDialog
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- blockchain={this.props.blockchain}
- tokenByAddress={this.props.tokenByAddress}
- dispatcher={this.props.dispatcher}
- tokens={this.state.tokensToTrack}
- isOpen={this.state.isConfirmingTokenTracking}
- onToggleDialog={this._onToggleTrackConfirmDialog.bind(this)}
- />
- </div>
- );
- }
- 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) && (
- <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
- )}
- </div>
- );
- }
- private _renderVisualOrder() {
- const takerTokenAddress = this.state.parsedOrder.taker.token.address;
- const takerToken = this.props.tokenByAddress[takerTokenAddress];
- const orderTakerAmount = new BigNumber(this.state.parsedOrder.taker.amount);
- const orderMakerAmount = new BigNumber(this.state.parsedOrder.maker.amount);
- const takerAssetToken = {
- amount: orderTakerAmount.minus(this.state.unavailableTakerAmount),
- symbol: takerToken.symbol,
- };
- const fillToken = this.props.tokenByAddress[takerToken.address];
- const fillTokenState = this.props.tokenStateByAddress[takerToken.address];
- const makerTokenAddress = this.state.parsedOrder.maker.token.address;
- const makerToken = this.props.tokenByAddress[makerTokenAddress];
- const makerAssetToken = {
- amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
- symbol: makerToken.symbol,
- };
- const fillAssetToken = {
- amount: this.props.orderFillAmount,
- symbol: takerToken.symbol,
- };
- 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);
+ private _validator: SchemaValidator;
+ constructor(props: FillOrderProps) {
+ super(props);
+ this.state = {
+ globalErrMsg: '',
+ didOrderValidationRun: false,
+ areAllInvolvedTokensTracked: false,
+ didFillOrderSucceed: false,
+ didCancelOrderSucceed: false,
+ orderJSON: _.isUndefined(this.props.initialOrder) ? '' : JSON.stringify(this.props.initialOrder),
+ orderJSONErrMsg: '',
+ parsedOrder: this.props.initialOrder,
+ unavailableTakerAmount: new BigNumber(0),
+ isMakerTokenAddressInRegistry: false,
+ isTakerTokenAddressInRegistry: false,
+ isFillWarningDialogOpen: false,
+ isFilling: false,
+ isCancelling: false,
+ isConfirmingTokenTracking: false,
+ tokensToTrack: [],
+ };
+ this._validator = new SchemaValidator();
+ }
+ public componentWillMount() {
+ if (!_.isEmpty(this.state.orderJSON)) {
+ // tslint:disable-next-line:no-floating-promises
+ this._validateFillOrderFireAndForgetAsync(this.state.orderJSON);
+ }
+ }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ public render() {
+ return (
+ <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}>
+ <h3>Fill an order</h3>
+ <Divider />
+ <div>
+ {!this.props.isOrderInUrl && (
+ <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}
+ tokenByAddress={this.props.tokenByAddress}
+ networkId={this.props.networkId}
+ orderJSON={this.state.orderJSON}
+ onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
+ />
+ {this._renderOrderJsonNotices()}
+ </div>
+ )}
+ <div>
+ {!_.isUndefined(this.state.parsedOrder) &&
+ this.state.didOrderValidationRun &&
+ this.state.areAllInvolvedTokensTracked &&
+ this._renderVisualOrder()}
+ </div>
+ {this.props.isOrderInUrl && (
+ <div className="pt2">
+ <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}
+ tokenByAddress={this.props.tokenByAddress}
+ networkId={this.props.networkId}
+ orderJSON={this.state.orderJSON}
+ onFillOrderJSONChanged={this._onFillOrderJSONChanged.bind(this)}
+ />
+ </CardText>
+ </Card>
+ {this._renderOrderJsonNotices()}
+ </div>
+ )}
+ </div>
+ <FillWarningDialog
+ isOpen={this.state.isFillWarningDialogOpen}
+ onToggleDialog={this._onFillWarningClosed.bind(this)}
+ />
+ <TrackTokenConfirmationDialog
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this.props.blockchain}
+ tokenByAddress={this.props.tokenByAddress}
+ dispatcher={this.props.dispatcher}
+ tokens={this.state.tokensToTrack}
+ isOpen={this.state.isConfirmingTokenTracking}
+ onToggleDialog={this._onToggleTrackConfirmDialog.bind(this)}
+ />
+ </div>
+ );
+ }
+ 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) && (
+ <Alert type={AlertTypes.ERROR} message={this.state.orderJSONErrMsg} />
+ )}
+ </div>
+ );
+ }
+ private _renderVisualOrder() {
+ const takerTokenAddress = this.state.parsedOrder.taker.token.address;
+ const takerToken = this.props.tokenByAddress[takerTokenAddress];
+ const orderTakerAmount = new BigNumber(this.state.parsedOrder.taker.amount);
+ const orderMakerAmount = new BigNumber(this.state.parsedOrder.maker.amount);
+ const takerAssetToken = {
+ amount: orderTakerAmount.minus(this.state.unavailableTakerAmount),
+ symbol: takerToken.symbol,
+ };
+ const fillToken = this.props.tokenByAddress[takerToken.address];
+ const fillTokenState = this.props.tokenStateByAddress[takerToken.address];
+ const makerTokenAddress = this.state.parsedOrder.maker.token.address;
+ const makerToken = this.props.tokenByAddress[makerTokenAddress];
+ const makerAssetToken = {
+ amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount),
+ symbol: makerToken.symbol,
+ };
+ const fillAssetToken = {
+ amount: this.props.orderFillAmount,
+ symbol: takerToken.symbol,
+ };
+ 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);
- let orderReceiveAmount = 0;
- if (!_.isUndefined(this.props.orderFillAmount)) {
- 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 expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
- return (
- <div className="pt3 pb1">
- <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 }}>
- Maker:
- </div>
- <div className="col col-2 pr1">
- <Identicon address={this.state.parsedOrder.maker.address} diameter={23} />
- </div>
- <div className="col col-6">
- <EthereumAddress
- address={this.state.parsedOrder.maker.address}
- networkId={this.props.networkId}
- />
- </div>
- </div>
- </div>
- <div className="lg-px4 md-px4 sm-px0">
- <div className="lg-px4 md-px4 sm-px1 pt1">
- <VisualOrder
- orderTakerAddress={orderTaker}
- orderMakerAddress={this.state.parsedOrder.maker.address}
- makerAssetToken={makerAssetToken}
- takerAssetToken={takerAssetToken}
- tokenByAddress={this.props.tokenByAddress}
- makerToken={makerToken}
- takerToken={takerToken}
- networkId={this.props.networkId}
- isMakerTokenAddressInRegistry={this.state.isMakerTokenAddressInRegistry}
- isTakerTokenAddressInRegistry={this.state.isTakerTokenAddressInRegistry}
- />
- <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>
- </div>
- )}
- <div>
- {isUserMaker ? (
- <div>
- <RaisedButton
- 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>
- ) : (
- <div>
- <RaisedButton
- style={{ width: '100%' }}
- disabled={this.state.isFilling}
- label={this.state.isFilling ? 'Filling order...' : 'Fill order'}
- onClick={this._onFillOrderClick.bind(this)}
- />
- {!_.isEmpty(this.state.globalErrMsg) && (
- <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
- )}
- {this.state.didFillOrderSucceed && (
- <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} />
- )}
- </div>
- )}
- </div>
- </div>
- );
- }
- private _renderFillSuccessMsg() {
- return (
- <div>
- Order successfully filled. See the trade details in your{' '}
- <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
- trade history
- </Link>
- </div>
- );
- }
- private _renderCancelSuccessMsg() {
- return <div>Order successfully cancelled.</div>;
- }
- private _onFillOrderClick() {
- if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) {
- this.setState({
- isFillWarningDialogOpen: true,
- });
- } else {
- // tslint:disable-next-line:no-floating-promises
- this._onFillOrderClickFireAndForgetAsync();
- }
- }
- private _onFillWarningClosed(didUserCancel: boolean) {
- this.setState({
- isFillWarningDialogOpen: false,
- });
- if (!didUserCancel) {
- // tslint:disable-next-line:no-floating-promises
- this._onFillOrderClickFireAndForgetAsync();
- }
- }
- private _onFillAmountChange(isValid: boolean, amount?: BigNumber) {
- this.props.dispatcher.updateOrderFillAmount(amount);
- }
- private _onFillOrderJSONChanged(event: any) {
- const orderJSON = event.target.value;
- this.setState({
- didOrderValidationRun: _.isEmpty(orderJSON) && _.isEmpty(this.state.orderJSONErrMsg),
- didFillOrderSucceed: false,
- });
- // tslint:disable-next-line:no-floating-promises
- this._validateFillOrderFireAndForgetAsync(orderJSON);
- }
- private async _checkForUntrackedTokensAndAskToAdd() {
- if (!_.isEmpty(this.state.orderJSONErrMsg)) {
- return;
- }
+ let orderReceiveAmount = 0;
+ if (!_.isUndefined(this.props.orderFillAmount)) {
+ 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 expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration);
+ return (
+ <div className="pt3 pb1">
+ <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 }}>
+ Maker:
+ </div>
+ <div className="col col-2 pr1">
+ <Identicon address={this.state.parsedOrder.maker.address} diameter={23} />
+ </div>
+ <div className="col col-6">
+ <EthereumAddress
+ address={this.state.parsedOrder.maker.address}
+ networkId={this.props.networkId}
+ />
+ </div>
+ </div>
+ </div>
+ <div className="lg-px4 md-px4 sm-px0">
+ <div className="lg-px4 md-px4 sm-px1 pt1">
+ <VisualOrder
+ orderTakerAddress={orderTaker}
+ orderMakerAddress={this.state.parsedOrder.maker.address}
+ makerAssetToken={makerAssetToken}
+ takerAssetToken={takerAssetToken}
+ tokenByAddress={this.props.tokenByAddress}
+ makerToken={makerToken}
+ takerToken={takerToken}
+ networkId={this.props.networkId}
+ isMakerTokenAddressInRegistry={this.state.isMakerTokenAddressInRegistry}
+ isTakerTokenAddressInRegistry={this.state.isTakerTokenAddressInRegistry}
+ />
+ <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>
+ </div>
+ )}
+ <div>
+ {isUserMaker ? (
+ <div>
+ <RaisedButton
+ 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>
+ ) : (
+ <div>
+ <RaisedButton
+ style={{ width: '100%' }}
+ disabled={this.state.isFilling}
+ label={this.state.isFilling ? 'Filling order...' : 'Fill order'}
+ onClick={this._onFillOrderClick.bind(this)}
+ />
+ {!_.isEmpty(this.state.globalErrMsg) && (
+ <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
+ )}
+ {this.state.didFillOrderSucceed && (
+ <Alert type={AlertTypes.SUCCESS} message={this._renderFillSuccessMsg()} />
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+ );
+ }
+ private _renderFillSuccessMsg() {
+ return (
+ <div>
+ Order successfully filled. See the trade details in your{' '}
+ <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}>
+ trade history
+ </Link>
+ </div>
+ );
+ }
+ private _renderCancelSuccessMsg() {
+ return <div>Order successfully cancelled.</div>;
+ }
+ private _onFillOrderClick() {
+ if (!this.state.isMakerTokenAddressInRegistry || !this.state.isTakerTokenAddressInRegistry) {
+ this.setState({
+ isFillWarningDialogOpen: true,
+ });
+ } else {
+ // tslint:disable-next-line:no-floating-promises
+ this._onFillOrderClickFireAndForgetAsync();
+ }
+ }
+ private _onFillWarningClosed(didUserCancel: boolean) {
+ this.setState({
+ isFillWarningDialogOpen: false,
+ });
+ if (!didUserCancel) {
+ // tslint:disable-next-line:no-floating-promises
+ this._onFillOrderClickFireAndForgetAsync();
+ }
+ }
+ private _onFillAmountChange(isValid: boolean, amount?: BigNumber) {
+ this.props.dispatcher.updateOrderFillAmount(amount);
+ }
+ private _onFillOrderJSONChanged(event: any) {
+ const orderJSON = event.target.value;
+ this.setState({
+ didOrderValidationRun: _.isEmpty(orderJSON) && _.isEmpty(this.state.orderJSONErrMsg),
+ didFillOrderSucceed: false,
+ });
+ // tslint:disable-next-line:no-floating-promises
+ this._validateFillOrderFireAndForgetAsync(orderJSON);
+ }
+ private async _checkForUntrackedTokensAndAskToAdd() {
+ if (!_.isEmpty(this.state.orderJSONErrMsg)) {
+ return;
+ }
- const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.maker.token.address];
- const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.taker.token.address];
+ const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.maker.token.address];
+ const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.taker.token.address];
- const tokensToTrack = [];
- const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
- const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
- if (isUnseenMakerToken) {
- tokensToTrack.push({
- ...this.state.parsedOrder.maker.token,
- iconUrl: undefined,
- isTracked: false,
- isRegistered: false,
- });
- } else if (!isMakerTokenTracked) {
- tokensToTrack.push(makerTokenIfExists);
- }
- const isUnseenTakerToken = _.isUndefined(takerTokenIfExists);
- const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
- if (isUnseenTakerToken) {
- tokensToTrack.push({
- ...this.state.parsedOrder.taker.token,
- iconUrl: undefined,
- isTracked: false,
- isRegistered: false,
- });
- } else if (!isTakerTokenTracked) {
- tokensToTrack.push(takerTokenIfExists);
- }
- if (!_.isEmpty(tokensToTrack)) {
- this.setState({
- isConfirmingTokenTracking: true,
- tokensToTrack,
- });
- } else {
- this.setState({
- areAllInvolvedTokensTracked: true,
- });
- }
- }
- private async _validateFillOrderFireAndForgetAsync(orderJSON: string) {
- let orderJSONErrMsg = '';
- let parsedOrder: Order;
- try {
- const order = JSON.parse(orderJSON);
- const validationResult = this._validator.validate(order, orderSchema);
- if (validationResult.errors.length > 0) {
- orderJSONErrMsg = 'Submitted order JSON is not a valid order';
- utils.consoleLog(`Unexpected order JSON validation error: ${validationResult.errors.join(', ')}`);
- return;
- }
- parsedOrder = order;
+ const tokensToTrack = [];
+ const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
+ const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
+ if (isUnseenMakerToken) {
+ tokensToTrack.push({
+ ...this.state.parsedOrder.maker.token,
+ iconUrl: undefined,
+ isTracked: false,
+ isRegistered: false,
+ });
+ } else if (!isMakerTokenTracked) {
+ tokensToTrack.push(makerTokenIfExists);
+ }
+ const isUnseenTakerToken = _.isUndefined(takerTokenIfExists);
+ const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
+ if (isUnseenTakerToken) {
+ tokensToTrack.push({
+ ...this.state.parsedOrder.taker.token,
+ iconUrl: undefined,
+ isTracked: false,
+ isRegistered: false,
+ });
+ } else if (!isTakerTokenTracked) {
+ tokensToTrack.push(takerTokenIfExists);
+ }
+ if (!_.isEmpty(tokensToTrack)) {
+ this.setState({
+ isConfirmingTokenTracking: true,
+ tokensToTrack,
+ });
+ } else {
+ this.setState({
+ areAllInvolvedTokensTracked: true,
+ });
+ }
+ }
+ private async _validateFillOrderFireAndForgetAsync(orderJSON: string) {
+ let orderJSONErrMsg = '';
+ let parsedOrder: Order;
+ try {
+ const order = JSON.parse(orderJSON);
+ const validationResult = this._validator.validate(order, orderSchema);
+ if (validationResult.errors.length > 0) {
+ orderJSONErrMsg = 'Submitted order JSON is not a valid order';
+ utils.consoleLog(`Unexpected order JSON validation error: ${validationResult.errors.join(', ')}`);
+ return;
+ }
+ parsedOrder = order;
- const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
- const makerAmount = new BigNumber(parsedOrder.maker.amount);
- const takerAmount = new BigNumber(parsedOrder.taker.amount);
- const expiration = new BigNumber(parsedOrder.expiration);
- const salt = new BigNumber(parsedOrder.salt);
- const parsedMakerFee = new BigNumber(parsedOrder.maker.feeAmount);
- const parsedTakerFee = new BigNumber(parsedOrder.taker.feeAmount);
+ const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
+ const makerAmount = new BigNumber(parsedOrder.maker.amount);
+ const takerAmount = new BigNumber(parsedOrder.taker.amount);
+ const expiration = new BigNumber(parsedOrder.expiration);
+ const salt = new BigNumber(parsedOrder.salt);
+ const parsedMakerFee = new BigNumber(parsedOrder.maker.feeAmount);
+ const parsedTakerFee = new BigNumber(parsedOrder.taker.feeAmount);
- const zeroExOrder: ZeroExOrder = {
- exchangeContractAddress: parsedOrder.exchangeContract,
- expirationUnixTimestampSec: expiration,
- feeRecipient: parsedOrder.feeRecipient,
- maker: parsedOrder.maker.address,
- makerFee: parsedMakerFee,
- makerTokenAddress: parsedOrder.maker.token.address,
- makerTokenAmount: makerAmount,
- salt,
- taker: _.isEmpty(parsedOrder.taker.address) ? constants.NULL_ADDRESS : parsedOrder.taker.address,
- takerFee: parsedTakerFee,
- takerTokenAddress: parsedOrder.taker.token.address,
- takerTokenAmount: takerAmount,
- };
- const orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
+ const zeroExOrder: ZeroExOrder = {
+ exchangeContractAddress: parsedOrder.exchangeContract,
+ expirationUnixTimestampSec: expiration,
+ feeRecipient: parsedOrder.feeRecipient,
+ maker: parsedOrder.maker.address,
+ makerFee: parsedMakerFee,
+ makerTokenAddress: parsedOrder.maker.token.address,
+ makerTokenAmount: makerAmount,
+ salt,
+ taker: _.isEmpty(parsedOrder.taker.address) ? constants.NULL_ADDRESS : parsedOrder.taker.address,
+ takerFee: parsedTakerFee,
+ takerTokenAddress: parsedOrder.taker.token.address,
+ takerTokenAmount: takerAmount,
+ };
+ const orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
- const signature = parsedOrder.signature;
- const isValidSignature = ZeroEx.isValidSignature(signature.hash, signature, parsedOrder.maker.address);
- if (this.props.networkId !== parsedOrder.networkId) {
- orderJSONErrMsg = `This order was made on another Ethereum network
+ const signature = parsedOrder.signature;
+ const isValidSignature = ZeroEx.isValidSignature(signature.hash, signature, parsedOrder.maker.address);
+ if (this.props.networkId !== parsedOrder.networkId) {
+ orderJSONErrMsg = `This order was made on another Ethereum network
(id: ${parsedOrder.networkId}). Connect to this network to fill.`;
- parsedOrder = undefined;
- } else if (exchangeContractAddr !== parsedOrder.exchangeContract) {
- orderJSONErrMsg = 'This order was made using a deprecated 0x Exchange contract.';
- parsedOrder = undefined;
- } else if (orderHash !== signature.hash) {
- orderJSONErrMsg = 'Order hash does not match supplied plaintext values';
- parsedOrder = undefined;
- } else if (!isValidSignature) {
- orderJSONErrMsg = 'Order signature is invalid';
- parsedOrder = undefined;
- } else {
- // Update user supplied order cache so that if they navigate away from fill view
- // e.g to set a token allowance, when they come back, the fill order persists
- this.props.dispatcher.updateUserSuppliedOrderCache(parsedOrder);
- }
- } catch (err) {
- utils.consoleLog(`Validate order err: ${err}`);
- if (!_.isEmpty(orderJSON)) {
- orderJSONErrMsg = 'Submitted order JSON is not valid JSON';
- }
- this.setState({
- didOrderValidationRun: true,
- orderJSON,
- orderJSONErrMsg,
- parsedOrder,
- });
- return;
- }
+ parsedOrder = undefined;
+ } else if (exchangeContractAddr !== parsedOrder.exchangeContract) {
+ orderJSONErrMsg = 'This order was made using a deprecated 0x Exchange contract.';
+ parsedOrder = undefined;
+ } else if (orderHash !== signature.hash) {
+ orderJSONErrMsg = 'Order hash does not match supplied plaintext values';
+ parsedOrder = undefined;
+ } else if (!isValidSignature) {
+ orderJSONErrMsg = 'Order signature is invalid';
+ parsedOrder = undefined;
+ } else {
+ // Update user supplied order cache so that if they navigate away from fill view
+ // e.g to set a token allowance, when they come back, the fill order persists
+ this.props.dispatcher.updateUserSuppliedOrderCache(parsedOrder);
+ }
+ } catch (err) {
+ utils.consoleLog(`Validate order err: ${err}`);
+ if (!_.isEmpty(orderJSON)) {
+ orderJSONErrMsg = 'Submitted order JSON is not valid JSON';
+ }
+ this.setState({
+ didOrderValidationRun: true,
+ orderJSON,
+ orderJSONErrMsg,
+ parsedOrder,
+ });
+ return;
+ }
- let unavailableTakerAmount = new BigNumber(0);
- if (!_.isEmpty(orderJSONErrMsg)) {
- // Clear cache entry if user updates orderJSON to invalid entry
- this.props.dispatcher.updateUserSuppliedOrderCache(undefined);
- } else {
- const orderHash = parsedOrder.signature.hash;
- unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
- const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
- parsedOrder.maker.token.address,
- );
- const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
- parsedOrder.taker.token.address,
- );
- this.setState({
- isMakerTokenAddressInRegistry,
- isTakerTokenAddressInRegistry,
- });
- }
+ let unavailableTakerAmount = new BigNumber(0);
+ if (!_.isEmpty(orderJSONErrMsg)) {
+ // Clear cache entry if user updates orderJSON to invalid entry
+ this.props.dispatcher.updateUserSuppliedOrderCache(undefined);
+ } else {
+ const orderHash = parsedOrder.signature.hash;
+ unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
+ const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
+ parsedOrder.maker.token.address,
+ );
+ const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync(
+ parsedOrder.taker.token.address,
+ );
+ this.setState({
+ isMakerTokenAddressInRegistry,
+ isTakerTokenAddressInRegistry,
+ });
+ }
- this.setState({
- didOrderValidationRun: true,
- orderJSON,
- orderJSONErrMsg,
- parsedOrder,
- unavailableTakerAmount,
- });
+ this.setState({
+ didOrderValidationRun: true,
+ orderJSON,
+ orderJSONErrMsg,
+ parsedOrder,
+ unavailableTakerAmount,
+ });
- await this._checkForUntrackedTokensAndAskToAdd();
- }
- private async _onFillOrderClickFireAndForgetAsync(): Promise<void> {
- if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return;
- }
+ await this._checkForUntrackedTokensAndAskToAdd();
+ }
+ private async _onFillOrderClickFireAndForgetAsync(): Promise<void> {
+ if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return;
+ }
- this.setState({
- isFilling: true,
- didFillOrderSucceed: false,
- });
+ this.setState({
+ isFilling: true,
+ didFillOrderSucceed: false,
+ });
- const parsedOrder = this.state.parsedOrder;
- const takerFillAmount = this.props.orderFillAmount;
+ const parsedOrder = this.state.parsedOrder;
+ const takerFillAmount = this.props.orderFillAmount;
- if (_.isUndefined(this.props.userAddress)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- this.setState({
- isFilling: false,
- });
- return;
- }
- let globalErrMsg = '';
+ if (_.isUndefined(this.props.userAddress)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ this.setState({
+ isFilling: false,
+ });
+ return;
+ }
+ let globalErrMsg = '';
- if (_.isUndefined(takerFillAmount)) {
- globalErrMsg = 'You must specify a fill amount';
- }
+ if (_.isUndefined(takerFillAmount)) {
+ globalErrMsg = 'You must specify a fill amount';
+ }
- const signedOrder = this.props.blockchain.portalOrderToSignedOrder(
- parsedOrder.maker.address,
- parsedOrder.taker.address,
- parsedOrder.maker.token.address,
- parsedOrder.taker.token.address,
- new BigNumber(parsedOrder.maker.amount),
- new BigNumber(parsedOrder.taker.amount),
- new BigNumber(parsedOrder.maker.feeAmount),
- new BigNumber(parsedOrder.taker.feeAmount),
- new BigNumber(this.state.parsedOrder.expiration),
- parsedOrder.feeRecipient,
- parsedOrder.signature,
- new BigNumber(parsedOrder.salt),
- );
- if (_.isEmpty(globalErrMsg)) {
- try {
- await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
- signedOrder,
- takerFillAmount,
- this.props.userAddress,
- );
- } catch (err) {
- globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
- }
- }
- if (!_.isEmpty(globalErrMsg)) {
- this.setState({
- isFilling: false,
- globalErrMsg,
- });
- return;
- }
- try {
- const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
- signedOrder,
- this.props.orderFillAmount,
- );
- // After fill completes, let's update the token balances
- const makerToken = this.props.tokenByAddress[parsedOrder.maker.token.address];
- const takerToken = this.props.tokenByAddress[parsedOrder.taker.token.address];
- const tokens = [makerToken, takerToken];
- await this.props.blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
- this.setState({
- isFilling: false,
- didFillOrderSucceed: true,
- globalErrMsg: '',
- unavailableTakerAmount: this.state.unavailableTakerAmount.plus(orderFilledAmount),
- });
- return;
- } catch (err) {
- this.setState({
- isFilling: false,
- });
- const errMsg = `${err}`;
- if (_.includes(errMsg, 'User denied transaction signature')) {
- return;
- }
- globalErrMsg = 'Failed to fill order, please refresh and try again';
- utils.consoleLog(`${err}`);
- this.setState({
- globalErrMsg,
- });
- await errorReporter.reportAsync(err);
- return;
- }
- }
- private async _onCancelOrderClickFireAndForgetAsync(): Promise<void> {
- if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return;
- }
+ const signedOrder = this.props.blockchain.portalOrderToSignedOrder(
+ parsedOrder.maker.address,
+ parsedOrder.taker.address,
+ parsedOrder.maker.token.address,
+ parsedOrder.taker.token.address,
+ new BigNumber(parsedOrder.maker.amount),
+ new BigNumber(parsedOrder.taker.amount),
+ new BigNumber(parsedOrder.maker.feeAmount),
+ new BigNumber(parsedOrder.taker.feeAmount),
+ new BigNumber(this.state.parsedOrder.expiration),
+ parsedOrder.feeRecipient,
+ parsedOrder.signature,
+ new BigNumber(parsedOrder.salt),
+ );
+ if (_.isEmpty(globalErrMsg)) {
+ try {
+ await this.props.blockchain.validateFillOrderThrowIfInvalidAsync(
+ signedOrder,
+ takerFillAmount,
+ this.props.userAddress,
+ );
+ } catch (err) {
+ globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
+ }
+ }
+ if (!_.isEmpty(globalErrMsg)) {
+ this.setState({
+ isFilling: false,
+ globalErrMsg,
+ });
+ return;
+ }
+ try {
+ const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
+ signedOrder,
+ this.props.orderFillAmount,
+ );
+ // After fill completes, let's update the token balances
+ const makerToken = this.props.tokenByAddress[parsedOrder.maker.token.address];
+ const takerToken = this.props.tokenByAddress[parsedOrder.taker.token.address];
+ const tokens = [makerToken, takerToken];
+ await this.props.blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
+ this.setState({
+ isFilling: false,
+ didFillOrderSucceed: true,
+ globalErrMsg: '',
+ unavailableTakerAmount: this.state.unavailableTakerAmount.plus(orderFilledAmount),
+ });
+ return;
+ } catch (err) {
+ this.setState({
+ isFilling: false,
+ });
+ const errMsg = `${err}`;
+ if (_.includes(errMsg, 'User denied transaction signature')) {
+ return;
+ }
+ globalErrMsg = 'Failed to fill order, please refresh and try again';
+ utils.consoleLog(`${err}`);
+ this.setState({
+ globalErrMsg,
+ });
+ await errorReporter.reportAsync(err);
+ return;
+ }
+ }
+ private async _onCancelOrderClickFireAndForgetAsync(): Promise<void> {
+ if (this.props.blockchainErr !== BlockchainErrs.NoError || _.isEmpty(this.props.userAddress)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return;
+ }
- this.setState({
- isCancelling: true,
- didCancelOrderSucceed: false,
- });
+ this.setState({
+ isCancelling: true,
+ didCancelOrderSucceed: false,
+ });
- const parsedOrder = this.state.parsedOrder;
- const orderHash = parsedOrder.signature.hash;
- const takerAddress = this.props.userAddress;
+ const parsedOrder = this.state.parsedOrder;
+ const orderHash = parsedOrder.signature.hash;
+ const takerAddress = this.props.userAddress;
- if (_.isUndefined(takerAddress)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- this.setState({
- isFilling: false,
- });
- return;
- }
- let globalErrMsg = '';
+ if (_.isUndefined(takerAddress)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ this.setState({
+ isFilling: false,
+ });
+ return;
+ }
+ let globalErrMsg = '';
- const takerTokenAmount = new BigNumber(parsedOrder.taker.amount);
+ const takerTokenAmount = new BigNumber(parsedOrder.taker.amount);
- const signedOrder = this.props.blockchain.portalOrderToSignedOrder(
- parsedOrder.maker.address,
- parsedOrder.taker.address,
- parsedOrder.maker.token.address,
- parsedOrder.taker.token.address,
- new BigNumber(parsedOrder.maker.amount),
- takerTokenAmount,
- new BigNumber(parsedOrder.maker.feeAmount),
- new BigNumber(parsedOrder.taker.feeAmount),
- new BigNumber(this.state.parsedOrder.expiration),
- parsedOrder.feeRecipient,
- parsedOrder.signature,
- new BigNumber(parsedOrder.salt),
- );
- const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
- const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
- try {
- await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount);
- } catch (err) {
- globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
- }
- if (!_.isEmpty(globalErrMsg)) {
- this.setState({
- isCancelling: false,
- globalErrMsg,
- });
- return;
- }
- try {
- await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
- this.setState({
- isCancelling: false,
- didCancelOrderSucceed: true,
- globalErrMsg: '',
- unavailableTakerAmount: takerTokenAmount,
- });
- return;
- } catch (err) {
- this.setState({
- isCancelling: false,
- });
- const errMsg = `${err}`;
- if (_.includes(errMsg, 'User denied transaction signature')) {
- return;
- }
- globalErrMsg = 'Failed to cancel order, please refresh and try again';
- utils.consoleLog(`${err}`);
- this.setState({
- globalErrMsg,
- });
- await errorReporter.reportAsync(err);
- return;
- }
- }
- private _formatCurrencyAmount(amount: BigNumber, decimals: number): number {
- const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
- const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000;
- return roundedUnitAmount;
- }
- private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) {
- if (!didConfirmTokenTracking) {
- this.setState({
- orderJSON: '',
- orderJSONErrMsg: '',
- parsedOrder: undefined,
- });
- } else {
- this.setState({
- areAllInvolvedTokensTracked: true,
- });
- }
- this.setState({
- isConfirmingTokenTracking: !this.state.isConfirmingTokenTracking,
- tokensToTrack: [],
- });
- }
+ const signedOrder = this.props.blockchain.portalOrderToSignedOrder(
+ parsedOrder.maker.address,
+ parsedOrder.taker.address,
+ parsedOrder.maker.token.address,
+ parsedOrder.taker.token.address,
+ new BigNumber(parsedOrder.maker.amount),
+ takerTokenAmount,
+ new BigNumber(parsedOrder.maker.feeAmount),
+ new BigNumber(parsedOrder.taker.feeAmount),
+ new BigNumber(this.state.parsedOrder.expiration),
+ parsedOrder.feeRecipient,
+ parsedOrder.signature,
+ new BigNumber(parsedOrder.salt),
+ );
+ const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash);
+ const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount);
+ try {
+ await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount);
+ } catch (err) {
+ globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.taker.address);
+ }
+ if (!_.isEmpty(globalErrMsg)) {
+ this.setState({
+ isCancelling: false,
+ globalErrMsg,
+ });
+ return;
+ }
+ try {
+ await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
+ this.setState({
+ isCancelling: false,
+ didCancelOrderSucceed: true,
+ globalErrMsg: '',
+ unavailableTakerAmount: takerTokenAmount,
+ });
+ return;
+ } catch (err) {
+ this.setState({
+ isCancelling: false,
+ });
+ const errMsg = `${err}`;
+ if (_.includes(errMsg, 'User denied transaction signature')) {
+ return;
+ }
+ globalErrMsg = 'Failed to cancel order, please refresh and try again';
+ utils.consoleLog(`${err}`);
+ this.setState({
+ globalErrMsg,
+ });
+ await errorReporter.reportAsync(err);
+ return;
+ }
+ }
+ private _formatCurrencyAmount(amount: BigNumber, decimals: number): number {
+ const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+ const roundedUnitAmount = Math.round(unitAmount.toNumber() * 100000) / 100000;
+ return roundedUnitAmount;
+ }
+ private _onToggleTrackConfirmDialog(didConfirmTokenTracking: boolean) {
+ if (!didConfirmTokenTracking) {
+ this.setState({
+ orderJSON: '',
+ orderJSONErrMsg: '',
+ parsedOrder: undefined,
+ });
+ } else {
+ this.setState({
+ areAllInvolvedTokensTracked: true,
+ });
+ }
+ this.setState({
+ isConfirmingTokenTracking: !this.state.isConfirmingTokenTracking,
+ tokensToTrack: [],
+ });
+ }
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index f8e43481a..3446b8a39 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -10,71 +10,71 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
interface FillOrderJSONProps {
- blockchain: Blockchain;
- tokenByAddress: TokenByAddress;
- networkId: number;
- orderJSON: string;
- onFillOrderJSONChanged: (event: any) => void;
+ blockchain: Blockchain;
+ tokenByAddress: TokenByAddress;
+ networkId: number;
+ orderJSON: string;
+ onFillOrderJSONChanged: (event: any) => void;
}
interface FillOrderJSONState {}
export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrderJSONState> {
- public render() {
- const tokenAddresses = _.keys(this.props.tokenByAddress);
- const exchangeContract = this.props.blockchain.getExchangeContractAddressIfExists();
- const hintSideToAssetToken = {
- [Side.Deposit]: {
- amount: new BigNumber(35),
- address: tokenAddresses[0],
- },
- [Side.Receive]: {
- amount: new BigNumber(89),
- address: tokenAddresses[1],
- },
- };
- const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
- const hintSignatureData = {
- hash: '0xf965a9978a0381ab58f5a2408ad967c...',
- r: '0xf01103f759e2289a28593eaf22e5820032...',
- s: '937862111edcba395f8a9e0cc1b2c5e12320...',
- v: 27,
- };
- 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 hintOrderJSON = `${JSON.stringify(hintOrder, null, '\t').substring(0, 500)}...`;
- return (
- <div>
- <Paper className="p1 overflow-hidden" style={{ height: 164 }}>
- <TextField
- id="orderJSON"
- hintStyle={{ bottom: 0, top: 0 }}
- fullWidth={true}
- value={this.props.orderJSON}
- onChange={this.props.onFillOrderJSONChanged.bind(this)}
- hintText={hintOrderJSON}
- multiLine={true}
- rows={6}
- rowsMax={6}
- underlineStyle={{ display: 'none' }}
- textareaStyle={{ marginTop: 0 }}
- />
- </Paper>
- </div>
- );
- }
+ public render() {
+ const tokenAddresses = _.keys(this.props.tokenByAddress);
+ const exchangeContract = this.props.blockchain.getExchangeContractAddressIfExists();
+ const hintSideToAssetToken = {
+ [Side.Deposit]: {
+ amount: new BigNumber(35),
+ address: tokenAddresses[0],
+ },
+ [Side.Receive]: {
+ amount: new BigNumber(89),
+ address: tokenAddresses[1],
+ },
+ };
+ const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
+ const hintSignatureData = {
+ hash: '0xf965a9978a0381ab58f5a2408ad967c...',
+ r: '0xf01103f759e2289a28593eaf22e5820032...',
+ s: '937862111edcba395f8a9e0cc1b2c5e12320...',
+ v: 27,
+ };
+ 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 hintOrderJSON = `${JSON.stringify(hintOrder, null, '\t').substring(0, 500)}...`;
+ return (
+ <div>
+ <Paper className="p1 overflow-hidden" style={{ height: 164 }}>
+ <TextField
+ id="orderJSON"
+ hintStyle={{ bottom: 0, top: 0 }}
+ fullWidth={true}
+ value={this.props.orderJSON}
+ onChange={this.props.onFillOrderJSONChanged.bind(this)}
+ hintText={hintOrderJSON}
+ multiLine={true}
+ rows={6}
+ rowsMax={6}
+ 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 165d21b34..40b04723d 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -4,42 +4,42 @@ import * as React from 'react';
import { colors } from 'ts/utils/colors';
interface FillWarningDialogProps {
- isOpen: boolean;
- onToggleDialog: (didUserCancel: boolean) => void;
+ isOpen: boolean;
+ onToggleDialog: (didUserCancel: boolean) => void;
}
export function FillWarningDialog(props: FillWarningDialogProps) {
- const didCancel = true;
- return (
- <Dialog
- title="Warning"
- titleStyle={{ fontWeight: 100, color: colors.red500 }}
- actions={[
- <FlatButton
- key="fillWarningCancel"
- label="Cancel"
- onTouchTap={props.onToggleDialog.bind(this, didCancel)}
- />,
- <FlatButton
- key="fillWarningContinue"
- label="Fill Order"
- onTouchTap={props.onToggleDialog.bind(this, !didCancel)}
- />,
- ]}
- open={props.isOpen}
- onRequestClose={props.onToggleDialog.bind(this)}
- autoScrollBodyContent={true}
- modal={true}
- >
- <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">
- See this how-to guide
- </a>) before filling an order. <b>This action may result in the loss of funds</b>.
- </div>
- </div>
- </Dialog>
- );
+ const didCancel = true;
+ return (
+ <Dialog
+ title="Warning"
+ titleStyle={{ fontWeight: 100, color: colors.red500 }}
+ actions={[
+ <FlatButton
+ key="fillWarningCancel"
+ label="Cancel"
+ onTouchTap={props.onToggleDialog.bind(this, didCancel)}
+ />,
+ <FlatButton
+ key="fillWarningContinue"
+ label="Fill Order"
+ onTouchTap={props.onToggleDialog.bind(this, !didCancel)}
+ />,
+ ]}
+ open={props.isOpen}
+ onRequestClose={props.onToggleDialog.bind(this)}
+ autoScrollBodyContent={true}
+ modal={true}
+ >
+ <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">
+ See this how-to guide
+ </a>) before filling an order. <b>This action may result in the loss of funds</b>.
+ </div>
+ </div>
+ </Dialog>
+ );
}
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 18f371624..07fca1ddc 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -7,28 +7,28 @@ import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface TokenSendCompletedProps {
- etherScanLinkIfExists?: string;
- token: Token;
- toAddress: string;
- amountInBaseUnits: BigNumber;
+ etherScanLinkIfExists?: string;
+ token: Token;
+ toAddress: string;
+ amountInBaseUnits: BigNumber;
}
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 amountInUnits = ZeroEx.toUnitAmount(this.props.amountInBaseUnits, this.props.token.decimals);
- const truncatedAddress = utils.getAddressBeginAndEnd(this.props.toAddress);
- return (
- <div>
- {`Sent ${amountInUnits} ${this.props.token.symbol} to ${truncatedAddress}: `}
- {etherScanLink}
- </div>
- );
- }
+ public render() {
+ 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 (
+ <div>
+ {`Sent ${amountInUnits} ${this.props.token.symbol} to ${truncatedAddress}: `}
+ {etherScanLink}
+ </div>
+ );
+ }
}
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index 862e382dd..14464b923 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -3,24 +3,24 @@ import * as React from 'react';
import { colors } from 'ts/utils/colors';
interface TransactionSubmittedProps {
- etherScanLinkIfExists?: string;
+ etherScanLinkIfExists?: string;
}
interface TransactionSubmittedState {}
export class TransactionSubmitted extends React.Component<TransactionSubmittedProps, TransactionSubmittedState> {
- public render() {
- if (_.isUndefined(this.props.etherScanLinkIfExists)) {
- return <div>Transaction submitted to the network</div>;
- } else {
- return (
- <div>
- Transaction submitted to the network:{' '}
- <a style={{ color: colors.white }} href={`${this.props.etherScanLinkIfExists}`} target="_blank">
- Verify on Etherscan
- </a>
- </div>
- );
- }
- }
+ public render() {
+ if (_.isUndefined(this.props.etherScanLinkIfExists)) {
+ return <div>Transaction submitted to the network</div>;
+ } else {
+ return (
+ <div>
+ Transaction submitted to the network:{' '}
+ <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 a0f1a0c96..3a342591c 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -6,106 +6,106 @@ import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
interface MenuItemsBySection {
- [sectionName: string]: FooterMenuItem[];
+ [sectionName: string]: FooterMenuItem[];
}
interface FooterMenuItem {
- title: string;
- path?: string;
- isExternal?: boolean;
+ title: string;
+ path?: string;
+ isExternal?: boolean;
}
enum Sections {
- Documentation = 'Documentation',
- Community = 'Community',
- Organization = 'Organization',
+ Documentation = 'Documentation',
+ Community = 'Community',
+ Organization = 'Organization',
}
const ICON_DIMENSION = 16;
const menuItemsBySection: MenuItemsBySection = {
- Documentation: [
- {
- title: '0x.js',
- path: WebsitePaths.ZeroExJs,
- },
- {
- title: '0x Smart Contracts',
- path: WebsitePaths.SmartContracts,
- },
- {
- title: '0x Connect',
- path: WebsitePaths.Connect,
- },
- {
- title: 'Whitepaper',
- path: WebsitePaths.Whitepaper,
- isExternal: true,
- },
- {
- title: 'Wiki',
- path: WebsitePaths.Wiki,
- },
- {
- title: 'FAQ',
- path: WebsitePaths.FAQ,
- },
- ],
- Community: [
- {
- title: 'Rocket.chat',
- isExternal: true,
- path: constants.URL_ZEROEX_CHAT,
- },
- {
- title: 'Blog',
- isExternal: true,
- path: constants.URL_BLOG,
- },
- {
- title: 'Twitter',
- isExternal: true,
- path: constants.URL_TWITTER,
- },
- {
- title: 'Reddit',
- isExternal: true,
- path: constants.URL_REDDIT,
- },
- {
- title: 'Forum',
- isExternal: true,
- path: constants.URL_DISCOURSE_FORUM,
- },
- ],
- Organization: [
- {
- title: 'About',
- isExternal: false,
- path: WebsitePaths.About,
- },
- {
- title: 'Careers',
- isExternal: true,
- path: constants.URL_ANGELLIST,
- },
- {
- title: 'Contact',
- isExternal: true,
- path: 'mailto:team@0xproject.com',
- },
- ],
+ Documentation: [
+ {
+ title: '0x.js',
+ path: WebsitePaths.ZeroExJs,
+ },
+ {
+ title: '0x Smart Contracts',
+ path: WebsitePaths.SmartContracts,
+ },
+ {
+ title: '0x Connect',
+ path: WebsitePaths.Connect,
+ },
+ {
+ title: 'Whitepaper',
+ path: WebsitePaths.Whitepaper,
+ isExternal: true,
+ },
+ {
+ title: 'Wiki',
+ path: WebsitePaths.Wiki,
+ },
+ {
+ title: 'FAQ',
+ path: WebsitePaths.FAQ,
+ },
+ ],
+ Community: [
+ {
+ title: 'Rocket.chat',
+ isExternal: true,
+ path: constants.URL_ZEROEX_CHAT,
+ },
+ {
+ title: 'Blog',
+ isExternal: true,
+ path: constants.URL_BLOG,
+ },
+ {
+ title: 'Twitter',
+ isExternal: true,
+ path: constants.URL_TWITTER,
+ },
+ {
+ title: 'Reddit',
+ isExternal: true,
+ path: constants.URL_REDDIT,
+ },
+ {
+ title: 'Forum',
+ isExternal: true,
+ path: constants.URL_DISCOURSE_FORUM,
+ },
+ ],
+ Organization: [
+ {
+ title: 'About',
+ isExternal: false,
+ path: WebsitePaths.About,
+ },
+ {
+ title: 'Careers',
+ isExternal: true,
+ path: constants.URL_ANGELLIST,
+ },
+ {
+ title: 'Contact',
+ isExternal: true,
+ path: 'mailto:team@0xproject.com',
+ },
+ ],
};
const linkStyle = {
- color: colors.white,
- cursor: 'pointer',
+ color: colors.white,
+ cursor: 'pointer',
};
const titleToIcon: { [title: string]: string } = {
- 'Rocket.chat': 'rocketchat.png',
- Blog: 'medium.png',
- Twitter: 'twitter.png',
- Reddit: 'reddit.png',
- Forum: 'discourse.png',
+ 'Rocket.chat': 'rocketchat.png',
+ Blog: 'medium.png',
+ Twitter: 'twitter.png',
+ Reddit: 'reddit.png',
+ Forum: 'discourse.png',
};
export interface FooterProps {}
@@ -113,100 +113,100 @@ export interface FooterProps {}
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="col lg-col-4 md-col-4 col-12 left">
- <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,
- }}
- >
- © ZeroEx, Intl.
- </div>
- </div>
- </div>
- <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
- <div className="col lg-col-4 md-col-4 col-12">
- <div className="lg-right md-right sm-center">
- {this._renderHeader(Sections.Documentation)}
- {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))}
- </div>
- </div>
- <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
- <div className="lg-right md-right sm-center">
- {this._renderHeader(Sections.Community)}
- {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))}
- </div>
- </div>
- <div className="col lg-col-4 md-col-4 col-12">
- <div className="lg-right md-right sm-center">
- {this._renderHeader(Sections.Organization)}
- {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
- </div>
- </div>
- </div>
- </div>
- </div>
- );
- }
- private _renderIcon(fileName: string) {
- return (
- <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 className="flex">
- <div className="pr1">{this._renderIcon(iconIfExists)}</div>
- <div>{item.title}</div>
- </div>
- </div>
- ) : (
- item.title
- )}
- </a>
- ) : (
- <Link to={item.path} style={linkStyle} className="text-decoration-none">
- <div>
- {!_.isUndefined(iconIfExists) && (
- <div className="pr1">{this._renderIcon(iconIfExists)}</div>
- )}
- {item.title}
- </div>
- </Link>
- )}
- </div>
- );
- }
- private _renderHeader(title: string) {
- const headerStyle = {
- textTransform: 'uppercase',
- color: colors.grey400,
- letterSpacing: 2,
- fontFamily: 'Roboto Mono',
- fontSize: 13,
- };
- return (
- <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
- {title}
- </div>
- );
- }
+ 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="col lg-col-4 md-col-4 col-12 left">
+ <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,
+ }}
+ >
+ © ZeroEx, Intl.
+ </div>
+ </div>
+ </div>
+ <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
+ <div className="col lg-col-4 md-col-4 col-12">
+ <div className="lg-right md-right sm-center">
+ {this._renderHeader(Sections.Documentation)}
+ {_.map(menuItemsBySection[Sections.Documentation], this._renderMenuItem.bind(this))}
+ </div>
+ </div>
+ <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
+ <div className="lg-right md-right sm-center">
+ {this._renderHeader(Sections.Community)}
+ {_.map(menuItemsBySection[Sections.Community], this._renderMenuItem.bind(this))}
+ </div>
+ </div>
+ <div className="col lg-col-4 md-col-4 col-12">
+ <div className="lg-right md-right sm-center">
+ {this._renderHeader(Sections.Organization)}
+ {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderIcon(fileName: string) {
+ return (
+ <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 className="flex">
+ <div className="pr1">{this._renderIcon(iconIfExists)}</div>
+ <div>{item.title}</div>
+ </div>
+ </div>
+ ) : (
+ item.title
+ )}
+ </a>
+ ) : (
+ <Link to={item.path} style={linkStyle} className="text-decoration-none">
+ <div>
+ {!_.isUndefined(iconIfExists) && (
+ <div className="pr1">{this._renderIcon(iconIfExists)}</div>
+ )}
+ {item.title}
+ </div>
+ </Link>
+ )}
+ </div>
+ );
+ }
+ private _renderHeader(title: string) {
+ const headerStyle = {
+ textTransform: 'uppercase',
+ color: colors.grey400,
+ letterSpacing: 2,
+ fontFamily: 'Roboto Mono',
+ fontSize: 13,
+ };
+ return (
+ <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 df7d87cfd..5eed2fabf 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -13,264 +13,264 @@ import { DialogConfigs, Token, TokenByAddress, TokenState, TokenVisibility } fro
const TOKEN_ICON_DIMENSION = 100;
const TILE_DIMENSION = 146;
enum AssetViews {
- ASSET_PICKER = 'ASSET_PICKER',
- NEW_TOKEN_FORM = 'NEW_TOKEN_FORM',
- CONFIRM_TRACK_TOKEN = 'CONFIRM_TRACK_TOKEN',
+ ASSET_PICKER = 'ASSET_PICKER',
+ NEW_TOKEN_FORM = 'NEW_TOKEN_FORM',
+ CONFIRM_TRACK_TOKEN = 'CONFIRM_TRACK_TOKEN',
}
interface AssetPickerProps {
- userAddress: string;
- blockchain: Blockchain;
- dispatcher: Dispatcher;
- networkId: number;
- isOpen: boolean;
- currentTokenAddress: string;
- onTokenChosen: (tokenAddress: string) => void;
- tokenByAddress: TokenByAddress;
- tokenVisibility?: TokenVisibility;
+ userAddress: string;
+ blockchain: Blockchain;
+ dispatcher: Dispatcher;
+ networkId: number;
+ isOpen: boolean;
+ currentTokenAddress: string;
+ onTokenChosen: (tokenAddress: string) => void;
+ tokenByAddress: TokenByAddress;
+ tokenVisibility?: TokenVisibility;
}
interface AssetPickerState {
- assetView: AssetViews;
- hoveredAddress: string | undefined;
- chosenTrackTokenAddress: string;
- isAddingTokenToTracked: boolean;
+ assetView: AssetViews;
+ hoveredAddress: string | undefined;
+ chosenTrackTokenAddress: string;
+ isAddingTokenToTracked: boolean;
}
export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerState> {
- public static defaultProps: Partial<AssetPickerProps> = {
- tokenVisibility: TokenVisibility.ALL,
- };
- private _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs };
- constructor(props: AssetPickerProps) {
- super(props);
- this.state = {
- assetView: AssetViews.ASSET_PICKER,
- hoveredAddress: undefined,
- chosenTrackTokenAddress: undefined,
- isAddingTokenToTracked: false,
- };
- this._dialogConfigsByAssetView = {
- [AssetViews.ASSET_PICKER]: {
- title: 'Select token',
- isModal: false,
- actions: [],
- },
- [AssetViews.NEW_TOKEN_FORM]: {
- title: 'Add an ERC20 token',
- isModal: false,
- actions: [],
- },
- [AssetViews.CONFIRM_TRACK_TOKEN]: {
- title: 'Tracking confirmation',
- isModal: true,
- actions: [
- <FlatButton
- key="noTracking"
- label="No"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
- />,
- <FlatButton
- key="yesTrack"
- label="Yes"
- onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
- />,
- ],
- },
- };
- }
- public render() {
- const dialogConfigs: DialogConfigs = this._dialogConfigsByAssetView[this.state.assetView];
- return (
- <Dialog
- title={dialogConfigs.title}
- 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 && (
- <NewTokenForm
- blockchain={this.props.blockchain}
- onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)}
- tokenByAddress={this.props.tokenByAddress}
- />
- )}
- {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()}
- </Dialog>
- );
- }
- private _renderConfirmTrackToken() {
- const token = this.props.tokenByAddress[this.state.chosenTrackTokenAddress];
- return (
- <TrackTokenConfirmation
- tokens={[token]}
- tokenByAddress={this.props.tokenByAddress}
- networkId={this.props.networkId}
- isAddingTokenToTracked={this.state.isAddingTokenToTracked}
- />
- );
- }
- private _renderAssetPicker() {
- return (
- <div
- className="clearfix flex flex-wrap"
- style={{
- overflowY: 'auto',
- maxWidth: 720,
- maxHeight: 356,
- marginBottom: 10,
- }}
- >
- {this._renderGridTiles()}
- </div>
- );
- }
- private _renderGridTiles() {
- 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)
- ) {
- return null; // Skip
- }
- isHovered = this.state.hoveredAddress === address;
- tileStyles = {
- cursor: 'pointer',
- opacity: isHovered ? 0.6 : 1,
- };
- return (
- <div
- key={address}
- 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)}
- onMouseLeave={this._onToggleHover.bind(this, address, false)}
- >
- <div className="p1 center">
- <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
- </div>
- <div className="center">{token.name}</div>
- </div>
- );
- });
- const otherTokenKey = 'otherToken';
- isHovered = this.state.hoveredAddress === otherTokenKey;
- tileStyles = {
- cursor: 'pointer',
- opacity: isHovered ? 0.6 : 1,
- };
- if (this.props.tokenVisibility !== TokenVisibility.TRACKED) {
- gridTiles.push(
- <div
- key={otherTokenKey}
- style={{
- width: TILE_DIMENSION,
- height: TILE_DIMENSION,
- ...tileStyles,
- }}
- className="p2 mx-auto"
- onClick={this._onCustomAssetChosen.bind(this)}
- onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)}
- onMouseLeave={this._onToggleHover.bind(this, otherTokenKey, false)}
- >
- <div className="p1 center">
- <i
- style={{ fontSize: 105, paddingLeft: 1, paddingRight: 1 }}
- className="zmdi zmdi-plus-circle"
- />
- </div>
- <div className="center">Other ERC20 Token</div>
- </div>,
- );
- }
- return gridTiles;
- }
- private _onToggleHover(address: string, isHovered: boolean) {
- const hoveredAddress = isHovered ? address : undefined;
- this.setState({
- hoveredAddress,
- });
- }
- private _onCloseDialog() {
- this.setState({
- assetView: AssetViews.ASSET_PICKER,
- });
- this.props.onTokenChosen(this.props.currentTokenAddress);
- }
- private _onChooseToken(tokenAddress: string) {
- const token = this.props.tokenByAddress[tokenAddress];
- if (token.isTracked) {
- this.props.onTokenChosen(tokenAddress);
- } else {
- this.setState({
- assetView: AssetViews.CONFIRM_TRACK_TOKEN,
- chosenTrackTokenAddress: tokenAddress,
- });
- }
- }
- private _onCustomAssetChosen() {
- this.setState({
- assetView: AssetViews.NEW_TOKEN_FORM,
- });
- }
- private _onNewTokenSubmitted(newToken: Token, newTokenState: TokenState) {
- this.props.dispatcher.updateTokenStateByAddress({
- [newToken.address]: newTokenState,
- });
- trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newToken);
- this.props.dispatcher.addTokenToTokenByAddress(newToken);
- this.setState({
- assetView: AssetViews.ASSET_PICKER,
- });
- this.props.onTokenChosen(newToken.address);
- }
- private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
- if (!didUserAcceptTracking) {
- this.setState({
- isAddingTokenToTracked: false,
- assetView: AssetViews.ASSET_PICKER,
- chosenTrackTokenAddress: undefined,
- });
- this._onCloseDialog();
- return;
- }
- this.setState({
- isAddingTokenToTracked: true,
- });
- const tokenAddress = this.state.chosenTrackTokenAddress;
- const token = this.props.tokenByAddress[tokenAddress];
- const newTokenEntry = {
- ...token,
- };
+ public static defaultProps: Partial<AssetPickerProps> = {
+ tokenVisibility: TokenVisibility.ALL,
+ };
+ private _dialogConfigsByAssetView: { [assetView: string]: DialogConfigs };
+ constructor(props: AssetPickerProps) {
+ super(props);
+ this.state = {
+ assetView: AssetViews.ASSET_PICKER,
+ hoveredAddress: undefined,
+ chosenTrackTokenAddress: undefined,
+ isAddingTokenToTracked: false,
+ };
+ this._dialogConfigsByAssetView = {
+ [AssetViews.ASSET_PICKER]: {
+ title: 'Select token',
+ isModal: false,
+ actions: [],
+ },
+ [AssetViews.NEW_TOKEN_FORM]: {
+ title: 'Add an ERC20 token',
+ isModal: false,
+ actions: [],
+ },
+ [AssetViews.CONFIRM_TRACK_TOKEN]: {
+ title: 'Tracking confirmation',
+ isModal: true,
+ actions: [
+ <FlatButton
+ key="noTracking"
+ label="No"
+ onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
+ />,
+ <FlatButton
+ key="yesTrack"
+ label="Yes"
+ onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
+ />,
+ ],
+ },
+ };
+ }
+ public render() {
+ const dialogConfigs: DialogConfigs = this._dialogConfigsByAssetView[this.state.assetView];
+ return (
+ <Dialog
+ title={dialogConfigs.title}
+ 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 && (
+ <NewTokenForm
+ blockchain={this.props.blockchain}
+ onNewTokenSubmitted={this._onNewTokenSubmitted.bind(this)}
+ tokenByAddress={this.props.tokenByAddress}
+ />
+ )}
+ {this.state.assetView === AssetViews.CONFIRM_TRACK_TOKEN && this._renderConfirmTrackToken()}
+ </Dialog>
+ );
+ }
+ private _renderConfirmTrackToken() {
+ const token = this.props.tokenByAddress[this.state.chosenTrackTokenAddress];
+ return (
+ <TrackTokenConfirmation
+ tokens={[token]}
+ tokenByAddress={this.props.tokenByAddress}
+ networkId={this.props.networkId}
+ isAddingTokenToTracked={this.state.isAddingTokenToTracked}
+ />
+ );
+ }
+ private _renderAssetPicker() {
+ return (
+ <div
+ className="clearfix flex flex-wrap"
+ style={{
+ overflowY: 'auto',
+ maxWidth: 720,
+ maxHeight: 356,
+ marginBottom: 10,
+ }}
+ >
+ {this._renderGridTiles()}
+ </div>
+ );
+ }
+ private _renderGridTiles() {
+ 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)
+ ) {
+ return null; // Skip
+ }
+ isHovered = this.state.hoveredAddress === address;
+ tileStyles = {
+ cursor: 'pointer',
+ opacity: isHovered ? 0.6 : 1,
+ };
+ return (
+ <div
+ key={address}
+ 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)}
+ onMouseLeave={this._onToggleHover.bind(this, address, false)}
+ >
+ <div className="p1 center">
+ <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
+ </div>
+ <div className="center">{token.name}</div>
+ </div>
+ );
+ });
+ const otherTokenKey = 'otherToken';
+ isHovered = this.state.hoveredAddress === otherTokenKey;
+ tileStyles = {
+ cursor: 'pointer',
+ opacity: isHovered ? 0.6 : 1,
+ };
+ if (this.props.tokenVisibility !== TokenVisibility.TRACKED) {
+ gridTiles.push(
+ <div
+ key={otherTokenKey}
+ style={{
+ width: TILE_DIMENSION,
+ height: TILE_DIMENSION,
+ ...tileStyles,
+ }}
+ className="p2 mx-auto"
+ onClick={this._onCustomAssetChosen.bind(this)}
+ onMouseEnter={this._onToggleHover.bind(this, otherTokenKey, true)}
+ onMouseLeave={this._onToggleHover.bind(this, otherTokenKey, false)}
+ >
+ <div className="p1 center">
+ <i
+ style={{ fontSize: 105, paddingLeft: 1, paddingRight: 1 }}
+ className="zmdi zmdi-plus-circle"
+ />
+ </div>
+ <div className="center">Other ERC20 Token</div>
+ </div>,
+ );
+ }
+ return gridTiles;
+ }
+ private _onToggleHover(address: string, isHovered: boolean) {
+ const hoveredAddress = isHovered ? address : undefined;
+ this.setState({
+ hoveredAddress,
+ });
+ }
+ private _onCloseDialog() {
+ this.setState({
+ assetView: AssetViews.ASSET_PICKER,
+ });
+ this.props.onTokenChosen(this.props.currentTokenAddress);
+ }
+ private _onChooseToken(tokenAddress: string) {
+ const token = this.props.tokenByAddress[tokenAddress];
+ if (token.isTracked) {
+ this.props.onTokenChosen(tokenAddress);
+ } else {
+ this.setState({
+ assetView: AssetViews.CONFIRM_TRACK_TOKEN,
+ chosenTrackTokenAddress: tokenAddress,
+ });
+ }
+ }
+ private _onCustomAssetChosen() {
+ this.setState({
+ assetView: AssetViews.NEW_TOKEN_FORM,
+ });
+ }
+ private _onNewTokenSubmitted(newToken: Token, newTokenState: TokenState) {
+ this.props.dispatcher.updateTokenStateByAddress({
+ [newToken.address]: newTokenState,
+ });
+ trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newToken);
+ this.props.dispatcher.addTokenToTokenByAddress(newToken);
+ this.setState({
+ assetView: AssetViews.ASSET_PICKER,
+ });
+ this.props.onTokenChosen(newToken.address);
+ }
+ private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
+ if (!didUserAcceptTracking) {
+ this.setState({
+ isAddingTokenToTracked: false,
+ assetView: AssetViews.ASSET_PICKER,
+ chosenTrackTokenAddress: undefined,
+ });
+ this._onCloseDialog();
+ return;
+ }
+ this.setState({
+ isAddingTokenToTracked: true,
+ });
+ const tokenAddress = this.state.chosenTrackTokenAddress;
+ const token = this.props.tokenByAddress[tokenAddress];
+ const newTokenEntry = {
+ ...token,
+ };
- newTokenEntry.isTracked = true;
- trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
+ newTokenEntry.isTracked = true;
+ trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
- const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
- token.address,
- );
- this.props.dispatcher.updateTokenStateByAddress({
- [token.address]: {
- balance,
- allowance,
- },
- });
- this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
- this.setState({
- isAddingTokenToTracked: false,
- assetView: AssetViews.ASSET_PICKER,
- chosenTrackTokenAddress: undefined,
- });
- this.props.onTokenChosen(tokenAddress);
- }
+ const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+ token.address,
+ );
+ this.props.dispatcher.updateTokenStateByAddress({
+ [token.address]: {
+ balance,
+ allowance,
+ },
+ });
+ this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
+ this.setState({
+ isAddingTokenToTracked: false,
+ assetView: AssetViews.ASSET_PICKER,
+ chosenTrackTokenAddress: undefined,
+ });
+ this.props.onTokenChosen(tokenAddress);
+ }
}
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 3ae0d48a7..b10b2d609 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -19,335 +19,335 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { orderSchema } from 'ts/schemas/order_schema';
import { SchemaValidator } from 'ts/schemas/validator';
import {
- AlertTypes,
- BlockchainErrs,
- HashData,
- Side,
- SideToAssetToken,
- SignatureData,
- Token,
- TokenByAddress,
- TokenStateByAddress,
+ AlertTypes,
+ BlockchainErrs,
+ HashData,
+ Side,
+ SideToAssetToken,
+ SignatureData,
+ Token,
+ TokenByAddress,
+ TokenStateByAddress,
} from 'ts/types';
import { colors } from 'ts/utils/colors';
import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
enum SigningState {
- UNSIGNED,
- SIGNING,
- SIGNED,
+ UNSIGNED,
+ SIGNING,
+ SIGNED,
}
interface GenerateOrderFormProps {
- blockchain: Blockchain;
- blockchainErr: BlockchainErrs;
- blockchainIsLoaded: boolean;
- dispatcher: Dispatcher;
- hashData: HashData;
- orderExpiryTimestamp: BigNumber;
- networkId: number;
- userAddress: string;
- orderSignatureData: SignatureData;
- orderTakerAddress: string;
- orderSalt: BigNumber;
- sideToAssetToken: SideToAssetToken;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
+ blockchain: Blockchain;
+ blockchainErr: BlockchainErrs;
+ blockchainIsLoaded: boolean;
+ dispatcher: Dispatcher;
+ hashData: HashData;
+ orderExpiryTimestamp: BigNumber;
+ networkId: number;
+ userAddress: string;
+ orderSignatureData: SignatureData;
+ orderTakerAddress: string;
+ orderSalt: BigNumber;
+ sideToAssetToken: SideToAssetToken;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
}
interface GenerateOrderFormState {
- globalErrMsg: string;
- shouldShowIncompleteErrs: boolean;
- signingState: SigningState;
+ globalErrMsg: string;
+ shouldShowIncompleteErrs: boolean;
+ signingState: SigningState;
}
export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, GenerateOrderFormState> {
- private _validator: SchemaValidator;
- constructor(props: GenerateOrderFormProps) {
- super(props);
- this.state = {
- globalErrMsg: '',
- shouldShowIncompleteErrs: false,
- signingState: SigningState.UNSIGNED,
- };
- this._validator = new SchemaValidator();
- }
- public componentDidMount() {
- window.scrollTo(0, 0);
- }
- public render() {
- const dispatcher = this.props.dispatcher;
- const depositTokenAddress = this.props.sideToAssetToken[Side.Deposit].address;
- const depositToken = this.props.tokenByAddress[depositTokenAddress];
- const depositTokenState = this.props.tokenStateByAddress[depositTokenAddress];
- 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> \
+ private _validator: SchemaValidator;
+ constructor(props: GenerateOrderFormProps) {
+ super(props);
+ this.state = {
+ globalErrMsg: '',
+ shouldShowIncompleteErrs: false,
+ signingState: SigningState.UNSIGNED,
+ };
+ this._validator = new SchemaValidator();
+ }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ public render() {
+ const dispatcher = this.props.dispatcher;
+ const depositTokenAddress = this.props.sideToAssetToken[Side.Deposit].address;
+ const depositToken = this.props.tokenByAddress[depositTokenAddress];
+ const depositTokenState = this.props.tokenStateByAddress[depositTokenAddress];
+ 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> \
allowed to fill this order. If no taker is<br> \
specified, anyone is able to fill it.';
- const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists();
- return (
- <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="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">
- <TokenInput
- userAddress={this.props.userAddress}
- blockchain={this.props.blockchain}
- blockchainErr={this.props.blockchainErr}
- dispatcher={this.props.dispatcher}
- label="Selling"
- side={Side.Deposit}
- networkId={this.props.networkId}
- assetToken={this.props.sideToAssetToken[Side.Deposit]}
- updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
- tokenByAddress={this.props.tokenByAddress}
- />
- <TokenAmountInput
- label="Sell amount"
- token={depositToken}
- tokenState={depositTokenState}
- amount={this.props.sideToAssetToken[Side.Deposit].amount}
- onChange={this._onTokenAmountChange.bind(this, depositToken, Side.Deposit)}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- shouldCheckBalance={true}
- shouldCheckAllowance={true}
- />
- </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)} />
- </div>
- </div>
- <div className="lg-col md-col lg-col-5 md-col-5 sm-col sm-col-5 sm-pb2">
- <TokenInput
- userAddress={this.props.userAddress}
- blockchain={this.props.blockchain}
- blockchainErr={this.props.blockchainErr}
- dispatcher={this.props.dispatcher}
- label="Buying"
- side={Side.Receive}
- networkId={this.props.networkId}
- assetToken={this.props.sideToAssetToken[Side.Receive]}
- updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
- tokenByAddress={this.props.tokenByAddress}
- />
- <TokenAmountInput
- label="Receive amount"
- token={receiveToken}
- tokenState={receiveTokenState}
- amount={this.props.sideToAssetToken[Side.Receive].amount}
- onChange={this._onTokenAmountChange.bind(this, receiveToken, Side.Receive)}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- shouldCheckBalance={false}
- shouldCheckAllowance={false}
- />
- </div>
- </div>
- </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>
- <ExpirationInput
- orderExpiryTimestamp={this.props.orderExpiryTimestamp}
- updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)}
- />
- </div>
- </div>
- <div className="pt1 flex mx-auto">
- <IdenticonAddressInput
- label="Taker"
- initialAddress={this.props.orderTakerAddress}
- updateOrderAddress={this._updateOrderAddress.bind(this)}
- />
- <div className="pt3">
- <div className="pl1">
- <HelpTooltip explanation={takerExplanation} />
- </div>
- </div>
- </div>
- <div>
- <HashInput
- blockchain={this.props.blockchain}
- blockchainIsLoaded={this.props.blockchainIsLoaded}
- hashData={this.props.hashData}
- label="Order Hash"
- />
- </div>
- <div className="pt2">
- <div className="center">
- <LifeCycleRaisedButton
- labelReady="Sign hash"
- labelLoading="Signing..."
- labelComplete="Hash signed!"
- onClickAsyncFn={this._onSignClickedAsync.bind(this)}
- />
- </div>
- {this.state.globalErrMsg !== '' && (
- <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
- )}
- </div>
- </div>
- <Dialog
- title="Order JSON"
- titleStyle={{ fontWeight: 100 }}
- modal={false}
- open={this.state.signingState === SigningState.SIGNED}
- onRequestClose={this._onCloseOrderJSONDialog.bind(this)}
- >
- <OrderJSON
- exchangeContractIfExists={exchangeContractIfExists}
- orderExpiryTimestamp={this.props.orderExpiryTimestamp}
- orderSignatureData={this.props.orderSignatureData}
- orderTakerAddress={this.props.orderTakerAddress}
- orderMakerAddress={this.props.userAddress}
- orderSalt={this.props.orderSalt}
- orderMakerFee={this.props.hashData.makerFee}
- orderTakerFee={this.props.hashData.takerFee}
- orderFeeRecipient={this.props.hashData.feeRecipientAddress}
- networkId={this.props.networkId}
- sideToAssetToken={this.props.sideToAssetToken}
- tokenByAddress={this.props.tokenByAddress}
- />
- </Dialog>
- </div>
- );
- }
- private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) {
- 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
- // with a new value so that if a user signs the identical order again, the newly signed
- // orderHash will not collide with the previously generated orderHash.
- this.props.dispatcher.updateOrderSalt(ZeroEx.generatePseudoRandomSalt());
- this.setState({
- signingState: SigningState.UNSIGNED,
- });
- }
- private async _onSignClickedAsync(): Promise<boolean> {
- if (this.props.blockchainErr !== BlockchainErrs.NoError) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return false;
- }
+ const exchangeContractIfExists = this.props.blockchain.getExchangeContractAddressIfExists();
+ return (
+ <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="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">
+ <TokenInput
+ userAddress={this.props.userAddress}
+ blockchain={this.props.blockchain}
+ blockchainErr={this.props.blockchainErr}
+ dispatcher={this.props.dispatcher}
+ label="Selling"
+ side={Side.Deposit}
+ networkId={this.props.networkId}
+ assetToken={this.props.sideToAssetToken[Side.Deposit]}
+ updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
+ tokenByAddress={this.props.tokenByAddress}
+ />
+ <TokenAmountInput
+ label="Sell amount"
+ token={depositToken}
+ tokenState={depositTokenState}
+ amount={this.props.sideToAssetToken[Side.Deposit].amount}
+ onChange={this._onTokenAmountChange.bind(this, depositToken, Side.Deposit)}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ shouldCheckBalance={true}
+ shouldCheckAllowance={true}
+ />
+ </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)} />
+ </div>
+ </div>
+ <div className="lg-col md-col lg-col-5 md-col-5 sm-col sm-col-5 sm-pb2">
+ <TokenInput
+ userAddress={this.props.userAddress}
+ blockchain={this.props.blockchain}
+ blockchainErr={this.props.blockchainErr}
+ dispatcher={this.props.dispatcher}
+ label="Buying"
+ side={Side.Receive}
+ networkId={this.props.networkId}
+ assetToken={this.props.sideToAssetToken[Side.Receive]}
+ updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
+ tokenByAddress={this.props.tokenByAddress}
+ />
+ <TokenAmountInput
+ label="Receive amount"
+ token={receiveToken}
+ tokenState={receiveTokenState}
+ amount={this.props.sideToAssetToken[Side.Receive].amount}
+ onChange={this._onTokenAmountChange.bind(this, receiveToken, Side.Receive)}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ shouldCheckBalance={false}
+ shouldCheckAllowance={false}
+ />
+ </div>
+ </div>
+ </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>
+ <ExpirationInput
+ orderExpiryTimestamp={this.props.orderExpiryTimestamp}
+ updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)}
+ />
+ </div>
+ </div>
+ <div className="pt1 flex mx-auto">
+ <IdenticonAddressInput
+ label="Taker"
+ initialAddress={this.props.orderTakerAddress}
+ updateOrderAddress={this._updateOrderAddress.bind(this)}
+ />
+ <div className="pt3">
+ <div className="pl1">
+ <HelpTooltip explanation={takerExplanation} />
+ </div>
+ </div>
+ </div>
+ <div>
+ <HashInput
+ blockchain={this.props.blockchain}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ hashData={this.props.hashData}
+ label="Order Hash"
+ />
+ </div>
+ <div className="pt2">
+ <div className="center">
+ <LifeCycleRaisedButton
+ labelReady="Sign hash"
+ labelLoading="Signing..."
+ labelComplete="Hash signed!"
+ onClickAsyncFn={this._onSignClickedAsync.bind(this)}
+ />
+ </div>
+ {this.state.globalErrMsg !== '' && (
+ <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />
+ )}
+ </div>
+ </div>
+ <Dialog
+ title="Order JSON"
+ titleStyle={{ fontWeight: 100 }}
+ modal={false}
+ open={this.state.signingState === SigningState.SIGNED}
+ onRequestClose={this._onCloseOrderJSONDialog.bind(this)}
+ >
+ <OrderJSON
+ exchangeContractIfExists={exchangeContractIfExists}
+ orderExpiryTimestamp={this.props.orderExpiryTimestamp}
+ orderSignatureData={this.props.orderSignatureData}
+ orderTakerAddress={this.props.orderTakerAddress}
+ orderMakerAddress={this.props.userAddress}
+ orderSalt={this.props.orderSalt}
+ orderMakerFee={this.props.hashData.makerFee}
+ orderTakerFee={this.props.hashData.takerFee}
+ orderFeeRecipient={this.props.hashData.feeRecipientAddress}
+ networkId={this.props.networkId}
+ sideToAssetToken={this.props.sideToAssetToken}
+ tokenByAddress={this.props.tokenByAddress}
+ />
+ </Dialog>
+ </div>
+ );
+ }
+ private _onTokenAmountChange(token: Token, side: Side, isValid: boolean, amount?: BigNumber) {
+ 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
+ // with a new value so that if a user signs the identical order again, the newly signed
+ // orderHash will not collide with the previously generated orderHash.
+ this.props.dispatcher.updateOrderSalt(ZeroEx.generatePseudoRandomSalt());
+ this.setState({
+ signingState: SigningState.UNSIGNED,
+ });
+ }
+ private async _onSignClickedAsync(): Promise<boolean> {
+ if (this.props.blockchainErr !== BlockchainErrs.NoError) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return false;
+ }
- // Check if all required inputs were supplied
- const debitToken = this.props.sideToAssetToken[Side.Deposit];
- 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) &&
- this.props.userAddress !== '' &&
- debitBalance.gte(debitToken.amount) &&
- debitAllowance.gte(debitToken.amount)
- ) {
- const didSignSuccessfully = await this._signTransactionAsync();
- if (didSignSuccessfully) {
- this.setState({
- globalErrMsg: '',
- shouldShowIncompleteErrs: false,
- });
- }
- return didSignSuccessfully;
- } else {
- let globalErrMsg = 'You must fix the above errors in order to generate a valid order';
- if (this.props.userAddress === '') {
- globalErrMsg = 'You must enable wallet communication';
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- }
- this.setState({
- globalErrMsg,
- shouldShowIncompleteErrs: true,
- });
- return false;
- }
- }
- private async _signTransactionAsync(): Promise<boolean> {
- this.setState({
- signingState: SigningState.SIGNING,
- });
- const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
- if (_.isUndefined(exchangeContractAddr)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- this.setState({
- signingState: SigningState.UNSIGNED,
- });
- return false;
- }
- const hashData = this.props.hashData;
+ // Check if all required inputs were supplied
+ const debitToken = this.props.sideToAssetToken[Side.Deposit];
+ 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) &&
+ this.props.userAddress !== '' &&
+ debitBalance.gte(debitToken.amount) &&
+ debitAllowance.gte(debitToken.amount)
+ ) {
+ const didSignSuccessfully = await this._signTransactionAsync();
+ if (didSignSuccessfully) {
+ this.setState({
+ globalErrMsg: '',
+ shouldShowIncompleteErrs: false,
+ });
+ }
+ return didSignSuccessfully;
+ } else {
+ let globalErrMsg = 'You must fix the above errors in order to generate a valid order';
+ if (this.props.userAddress === '') {
+ globalErrMsg = 'You must enable wallet communication';
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ }
+ this.setState({
+ globalErrMsg,
+ shouldShowIncompleteErrs: true,
+ });
+ return false;
+ }
+ }
+ private async _signTransactionAsync(): Promise<boolean> {
+ this.setState({
+ signingState: SigningState.SIGNING,
+ });
+ const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists();
+ if (_.isUndefined(exchangeContractAddr)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ this.setState({
+ signingState: SigningState.UNSIGNED,
+ });
+ return false;
+ }
+ const hashData = this.props.hashData;
- const zeroExOrder: Order = {
- exchangeContractAddress: exchangeContractAddr,
- expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
- feeRecipient: hashData.feeRecipientAddress,
- maker: hashData.orderMakerAddress,
- makerFee: hashData.makerFee,
- makerTokenAddress: hashData.depositTokenContractAddr,
- makerTokenAmount: hashData.depositAmount,
- salt: hashData.orderSalt,
- taker: hashData.orderTakerAddress,
- takerFee: hashData.takerFee,
- takerTokenAddress: hashData.receiveTokenContractAddr,
- takerTokenAmount: hashData.receiveAmount,
- };
- const orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
+ const zeroExOrder: Order = {
+ exchangeContractAddress: exchangeContractAddr,
+ expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
+ feeRecipient: hashData.feeRecipientAddress,
+ maker: hashData.orderMakerAddress,
+ makerFee: hashData.makerFee,
+ makerTokenAddress: hashData.depositTokenContractAddr,
+ makerTokenAmount: hashData.depositAmount,
+ salt: hashData.orderSalt,
+ taker: hashData.orderTakerAddress,
+ takerFee: hashData.takerFee,
+ takerTokenAddress: hashData.receiveTokenContractAddr,
+ takerTokenAmount: hashData.receiveAmount,
+ };
+ const orderHash = ZeroEx.getOrderHashHex(zeroExOrder);
- 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 validationResult = this._validator.validate(order, orderSchema);
- if (validationResult.errors.length > 0) {
- globalErrMsg = 'Order signing failed. Please refresh and try again';
- utils.consoleLog(`Unexpected error occured: Order validation failed:
+ 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 validationResult = this._validator.validate(order, orderSchema);
+ if (validationResult.errors.length > 0) {
+ globalErrMsg = 'Order signing failed. Please refresh and try again';
+ utils.consoleLog(`Unexpected error occured: Order validation failed:
${validationResult.errors}`);
- }
- } catch (err) {
- const errMsg = `${err}`;
- if (utils.didUserDenyWeb3Request(errMsg)) {
- globalErrMsg = 'User denied sign request';
- } else {
- globalErrMsg = 'An unexpected error occured. Please try refreshing the page';
- utils.consoleLog(`Unexpected error occured: ${err}`);
- utils.consoleLog(err.stack);
- await errorReporter.reportAsync(err);
- }
- }
- this.setState({
- signingState: globalErrMsg === '' ? SigningState.SIGNED : SigningState.UNSIGNED,
- globalErrMsg,
- });
- return globalErrMsg === '';
- }
- private _updateOrderAddress(address?: string): void {
- if (!_.isUndefined(address)) {
- this.props.dispatcher.updateOrderTakerAddress(address);
- }
- }
+ }
+ } catch (err) {
+ const errMsg = `${err}`;
+ if (utils.didUserDenyWeb3Request(errMsg)) {
+ globalErrMsg = 'User denied sign request';
+ } else {
+ globalErrMsg = 'An unexpected error occured. Please try refreshing the page';
+ utils.consoleLog(`Unexpected error occured: ${err}`);
+ utils.consoleLog(err.stack);
+ await errorReporter.reportAsync(err);
+ }
+ }
+ this.setState({
+ signingState: globalErrMsg === '' ? SigningState.SIGNED : SigningState.UNSIGNED,
+ globalErrMsg,
+ });
+ return globalErrMsg === '';
+ }
+ private _updateOrderAddress(address?: string): void {
+ if (!_.isUndefined(address)) {
+ this.props.dispatcher.updateOrderTakerAddress(address);
+ }
+ }
}
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 63645be9a..d61aac92a 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -11,227 +11,227 @@ import { AlertTypes, Token, TokenByAddress, TokenState } from 'ts/types';
import { colors } from 'ts/utils/colors';
interface NewTokenFormProps {
- blockchain: Blockchain;
- tokenByAddress: TokenByAddress;
- onNewTokenSubmitted: (token: Token, tokenState: TokenState) => void;
+ blockchain: Blockchain;
+ tokenByAddress: TokenByAddress;
+ onNewTokenSubmitted: (token: Token, tokenState: TokenState) => void;
}
interface NewTokenFormState {
- globalErrMsg: string;
- name: string;
- nameErrText: string;
- symbol: string;
- symbolErrText: string;
- address: string;
- shouldShowAddressIncompleteErr: boolean;
- decimals: string;
- decimalsErrText: string;
+ globalErrMsg: string;
+ name: string;
+ nameErrText: string;
+ symbol: string;
+ symbolErrText: string;
+ address: string;
+ shouldShowAddressIncompleteErr: boolean;
+ decimals: string;
+ decimalsErrText: string;
}
export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFormState> {
- constructor(props: NewTokenFormProps) {
- super(props);
- this.state = {
- address: '',
- globalErrMsg: '',
- name: '',
- nameErrText: '',
- shouldShowAddressIncompleteErr: false,
- symbol: '',
- symbolErrText: '',
- decimals: '18',
- decimalsErrText: '',
- };
- }
- public render() {
- return (
- <div className="mx-auto pb2" style={{ width: 256 }}>
- <div>
- <TextField
- floatingLabelFixed={true}
- floatingLabelStyle={{ color: colors.grey }}
- floatingLabelText={<RequiredLabel label="Name" />}
- value={this.state.name}
- errorText={this.state.nameErrText}
- onChange={this._onTokenNameChanged.bind(this)}
- />
- </div>
- <div>
- <TextField
- floatingLabelFixed={true}
- floatingLabelStyle={{ color: colors.grey }}
- floatingLabelText={<RequiredLabel label="Symbol" />}
- value={this.state.symbol}
- errorText={this.state.symbolErrText}
- onChange={this._onTokenSymbolChanged.bind(this)}
- />
- </div>
- <div>
- <AddressInput
- isRequired={true}
- label="Contract address"
- initialAddress=""
- shouldShowIncompleteErrs={this.state.shouldShowAddressIncompleteErr}
- updateAddress={this._onTokenAddressChanged.bind(this)}
- />
- </div>
- <div>
- <TextField
- floatingLabelFixed={true}
- 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 }}>
- <LifeCycleRaisedButton
- labelReady="Add"
- labelLoading="Adding..."
- labelComplete="Added!"
- onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)}
- />
- </div>
- {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />}
- </div>
- );
- }
- private async _onAddNewTokenClickAsync() {
- // Trigger validation of name and symbol
- this._onTokenNameChanged(undefined, this.state.name);
- this._onTokenSymbolChanged(undefined, this.state.symbol);
- this._onTokenDecimalsChanged(undefined, this.state.decimals);
+ constructor(props: NewTokenFormProps) {
+ super(props);
+ this.state = {
+ address: '',
+ globalErrMsg: '',
+ name: '',
+ nameErrText: '',
+ shouldShowAddressIncompleteErr: false,
+ symbol: '',
+ symbolErrText: '',
+ decimals: '18',
+ decimalsErrText: '',
+ };
+ }
+ public render() {
+ return (
+ <div className="mx-auto pb2" style={{ width: 256 }}>
+ <div>
+ <TextField
+ floatingLabelFixed={true}
+ floatingLabelStyle={{ color: colors.grey }}
+ floatingLabelText={<RequiredLabel label="Name" />}
+ value={this.state.name}
+ errorText={this.state.nameErrText}
+ onChange={this._onTokenNameChanged.bind(this)}
+ />
+ </div>
+ <div>
+ <TextField
+ floatingLabelFixed={true}
+ floatingLabelStyle={{ color: colors.grey }}
+ floatingLabelText={<RequiredLabel label="Symbol" />}
+ value={this.state.symbol}
+ errorText={this.state.symbolErrText}
+ onChange={this._onTokenSymbolChanged.bind(this)}
+ />
+ </div>
+ <div>
+ <AddressInput
+ isRequired={true}
+ label="Contract address"
+ initialAddress=""
+ shouldShowIncompleteErrs={this.state.shouldShowAddressIncompleteErr}
+ updateAddress={this._onTokenAddressChanged.bind(this)}
+ />
+ </div>
+ <div>
+ <TextField
+ floatingLabelFixed={true}
+ 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 }}>
+ <LifeCycleRaisedButton
+ labelReady="Add"
+ labelLoading="Adding..."
+ labelComplete="Added!"
+ onClickAsyncFn={this._onAddNewTokenClickAsync.bind(this)}
+ />
+ </div>
+ {this.state.globalErrMsg !== '' && <Alert type={AlertTypes.ERROR} message={this.state.globalErrMsg} />}
+ </div>
+ );
+ }
+ private async _onAddNewTokenClickAsync() {
+ // Trigger validation of name and symbol
+ this._onTokenNameChanged(undefined, this.state.name);
+ this._onTokenSymbolChanged(undefined, this.state.symbol);
+ this._onTokenDecimalsChanged(undefined, this.state.decimals);
- const isAddressIncomplete = this.state.address === '';
- let doesContractExist = false;
- if (!isAddressIncomplete) {
- doesContractExist = await this.props.blockchain.doesContractExistAtAddressAsync(this.state.address);
- }
+ const isAddressIncomplete = this.state.address === '';
+ let doesContractExist = false;
+ if (!isAddressIncomplete) {
+ doesContractExist = await this.props.blockchain.doesContractExistAtAddressAsync(this.state.address);
+ }
- let hasBalanceAllowanceErr = false;
- let balance = new BigNumber(0);
- let allowance = new BigNumber(0);
- if (doesContractExist) {
- try {
- [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
- this.state.address,
- );
- } catch (err) {
- hasBalanceAllowanceErr = true;
- }
- }
+ let hasBalanceAllowanceErr = false;
+ let balance = new BigNumber(0);
+ let allowance = new BigNumber(0);
+ if (doesContractExist) {
+ try {
+ [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
- ) {
- globalErrMsg = 'Please fix the above issues';
- } else if (!doesContractExist) {
- globalErrMsg = 'No contract found at supplied address';
- } else if (hasBalanceAllowanceErr) {
- globalErrMsg = 'Unsuccessful call to `balanceOf` and/or `allowance` on supplied contract address';
- } else if (!isAddressIncomplete && !_.isUndefined(this.props.tokenByAddress[this.state.address])) {
- globalErrMsg = 'A token already exists with this address';
- }
+ let globalErrMsg = '';
+ 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';
+ } else if (hasBalanceAllowanceErr) {
+ globalErrMsg = 'Unsuccessful call to `balanceOf` and/or `allowance` on supplied contract address';
+ } else if (!isAddressIncomplete && !_.isUndefined(this.props.tokenByAddress[this.state.address])) {
+ globalErrMsg = 'A token already exists with this address';
+ }
- if (globalErrMsg !== '') {
- this.setState({
- globalErrMsg,
- shouldShowAddressIncompleteErr: isAddressIncomplete,
- });
- return;
- }
+ if (globalErrMsg !== '') {
+ this.setState({
+ globalErrMsg,
+ shouldShowAddressIncompleteErr: isAddressIncomplete,
+ });
+ return;
+ }
- const newToken: Token = {
- address: this.state.address,
- decimals: _.parseInt(this.state.decimals),
- iconUrl: undefined,
- name: this.state.name,
- symbol: this.state.symbol.toUpperCase(),
- isTracked: true,
- isRegistered: false,
- };
- const newTokenState: TokenState = {
- balance,
- allowance,
- };
- this.props.onNewTokenSubmitted(newToken, newTokenState);
- }
- private _onTokenNameChanged(e: any, name: string) {
- let nameErrText = '';
- const maxLength = 30;
- const tokens = _.values(this.props.tokenByAddress);
- const tokenWithNameIfExists = _.find(tokens, { name });
- const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
- if (name === '') {
- nameErrText = 'Name is required';
- } else if (!this._isValidName(name)) {
- nameErrText = 'Name should only contain letters, digits and spaces';
- } else if (name.length > maxLength) {
- nameErrText = `Max length is ${maxLength}`;
- } else if (tokenWithNameExists) {
- nameErrText = 'Token with this name already exists';
- }
+ const newToken: Token = {
+ address: this.state.address,
+ decimals: _.parseInt(this.state.decimals),
+ iconUrl: undefined,
+ name: this.state.name,
+ symbol: this.state.symbol.toUpperCase(),
+ isTracked: true,
+ isRegistered: false,
+ };
+ const newTokenState: TokenState = {
+ balance,
+ allowance,
+ };
+ this.props.onNewTokenSubmitted(newToken, newTokenState);
+ }
+ private _onTokenNameChanged(e: any, name: string) {
+ let nameErrText = '';
+ const maxLength = 30;
+ const tokens = _.values(this.props.tokenByAddress);
+ const tokenWithNameIfExists = _.find(tokens, { name });
+ const tokenWithNameExists = !_.isUndefined(tokenWithNameIfExists);
+ if (name === '') {
+ nameErrText = 'Name is required';
+ } else if (!this._isValidName(name)) {
+ nameErrText = 'Name should only contain letters, digits and spaces';
+ } else if (name.length > maxLength) {
+ nameErrText = `Max length is ${maxLength}`;
+ } else if (tokenWithNameExists) {
+ nameErrText = 'Token with this name already exists';
+ }
- this.setState({
- name,
- nameErrText,
- });
- }
- private _onTokenSymbolChanged(e: any, symbol: string) {
- let symbolErrText = '';
- const maxLength = 5;
- const tokens = _.values(this.props.tokenByAddress);
- const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol }));
- if (symbol === '') {
- symbolErrText = 'Symbol is required';
- } else if (!this._isAlphanumeric(symbol)) {
- symbolErrText = 'Can only include alphanumeric characters';
- } else if (symbol.length > maxLength) {
- symbolErrText = `Max length is ${maxLength}`;
- } else if (tokenWithSymbolExists) {
- symbolErrText = 'Token with symbol already exists';
- }
+ this.setState({
+ name,
+ nameErrText,
+ });
+ }
+ private _onTokenSymbolChanged(e: any, symbol: string) {
+ let symbolErrText = '';
+ const maxLength = 5;
+ const tokens = _.values(this.props.tokenByAddress);
+ const tokenWithSymbolExists = !_.isUndefined(_.find(tokens, { symbol }));
+ if (symbol === '') {
+ symbolErrText = 'Symbol is required';
+ } else if (!this._isAlphanumeric(symbol)) {
+ symbolErrText = 'Can only include alphanumeric characters';
+ } else if (symbol.length > maxLength) {
+ symbolErrText = `Max length is ${maxLength}`;
+ } else if (tokenWithSymbolExists) {
+ symbolErrText = 'Token with symbol already exists';
+ }
- this.setState({
- symbol,
- symbolErrText,
- });
- }
- private _onTokenDecimalsChanged(e: any, decimals: string) {
- let decimalsErrText = '';
- const maxLength = 2;
- if (decimals === '') {
- decimalsErrText = 'Decimals is required';
- } else if (!this._isInteger(decimals)) {
- decimalsErrText = 'Must be an integer';
- } else if (decimals.length > maxLength) {
- decimalsErrText = `Max length is ${maxLength}`;
- }
+ this.setState({
+ symbol,
+ symbolErrText,
+ });
+ }
+ private _onTokenDecimalsChanged(e: any, decimals: string) {
+ let decimalsErrText = '';
+ const maxLength = 2;
+ if (decimals === '') {
+ decimalsErrText = 'Decimals is required';
+ } else if (!this._isInteger(decimals)) {
+ decimalsErrText = 'Must be an integer';
+ } else if (decimals.length > maxLength) {
+ decimalsErrText = `Max length is ${maxLength}`;
+ }
- this.setState({
- decimals,
- decimalsErrText,
- });
- }
- private _onTokenAddressChanged(address?: string) {
- if (!_.isUndefined(address)) {
- this.setState({
- address,
- });
- }
- }
- private _isValidName(input: string) {
- return /^[a-z0-9 ]+$/i.test(input);
- }
- private _isInteger(input: string) {
- return /^[0-9]+$/i.test(input);
- }
- private _isAlphanumeric(input: string) {
- return /^[a-zA-Z0-9]+$/i.test(input);
- }
+ this.setState({
+ decimals,
+ decimalsErrText,
+ });
+ }
+ private _onTokenAddressChanged(address?: string) {
+ if (!_.isUndefined(address)) {
+ this.setState({
+ address,
+ });
+ }
+ }
+ private _isValidName(input: string) {
+ return /^[a-z0-9 ]+$/i.test(input);
+ }
+ private _isInteger(input: string) {
+ return /^[0-9]+$/i.test(input);
+ }
+ private _isAlphanumeric(input: string) {
+ return /^[a-zA-Z0-9]+$/i.test(input);
+ }
}
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index dd4131140..236bf9a00 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -6,66 +6,66 @@ import { RequiredLabel } from 'ts/components/ui/required_label';
import { colors } from 'ts/utils/colors';
interface AddressInputProps {
- disabled?: boolean;
- initialAddress: string;
- isRequired?: boolean;
- hintText?: string;
- shouldHideLabel?: boolean;
- label?: string;
- shouldShowIncompleteErrs?: boolean;
- updateAddress: (address?: string) => void;
+ disabled?: boolean;
+ initialAddress: string;
+ isRequired?: boolean;
+ hintText?: string;
+ shouldHideLabel?: boolean;
+ label?: string;
+ shouldShowIncompleteErrs?: boolean;
+ updateAddress: (address?: string) => void;
}
interface AddressInputState {
- address: string;
- errMsg: string;
+ address: string;
+ errMsg: string;
}
export class AddressInput extends React.Component<AddressInputProps, AddressInputState> {
- constructor(props: AddressInputProps) {
- super(props);
- this.state = {
- address: this.props.initialAddress,
- errMsg: '',
- };
- }
- public componentWillReceiveProps(nextProps: AddressInputProps) {
- 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 labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
- const hintText = this.props.hintText ? this.props.hintText : '';
- return (
- <div className="overflow-hidden">
- <TextField
- id={`address-field-${this.props.label}`}
- disabled={_.isUndefined(this.props.disabled) ? false : this.props.disabled}
- fullWidth={true}
- hintText={hintText}
- floatingLabelFixed={true}
- floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
- floatingLabelText={label}
- errorText={this.state.errMsg}
- value={this.state.address}
- onChange={this._onOrderTakerAddressUpdated.bind(this)}
- />
- </div>
- );
- }
- private _onOrderTakerAddressUpdated(e: any) {
- const address = e.target.value.toLowerCase();
- const isValidAddress = addressUtils.isAddress(address) || address === '';
- const errMsg = isValidAddress ? '' : 'Invalid ethereum address';
- this.setState({
- address,
- errMsg,
- });
- const addressIfValid = isValidAddress ? address : undefined;
- this.props.updateAddress(addressIfValid);
- }
+ constructor(props: AddressInputProps) {
+ super(props);
+ this.state = {
+ address: this.props.initialAddress,
+ errMsg: '',
+ };
+ }
+ public componentWillReceiveProps(nextProps: AddressInputProps) {
+ 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 labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
+ const hintText = this.props.hintText ? this.props.hintText : '';
+ return (
+ <div className="overflow-hidden">
+ <TextField
+ id={`address-field-${this.props.label}`}
+ disabled={_.isUndefined(this.props.disabled) ? false : this.props.disabled}
+ fullWidth={true}
+ hintText={hintText}
+ floatingLabelFixed={true}
+ floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
+ floatingLabelText={label}
+ errorText={this.state.errMsg}
+ value={this.state.address}
+ onChange={this._onOrderTakerAddressUpdated.bind(this)}
+ />
+ </div>
+ );
+ }
+ private _onOrderTakerAddressUpdated(e: any) {
+ const address = e.target.value.toLowerCase();
+ const isValidAddress = addressUtils.isAddress(address) || address === '';
+ const errMsg = isValidAddress ? '' : 'Invalid ethereum address';
+ this.setState({
+ address,
+ errMsg,
+ });
+ const addressIfValid = isValidAddress ? address : undefined;
+ this.props.updateAddress(addressIfValid);
+ }
}
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index da46db4f4..245784824 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -11,83 +11,83 @@ import { utils } from 'ts/utils/utils';
const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
interface AllowanceToggleProps {
- blockchain: Blockchain;
- dispatcher: Dispatcher;
- onErrorOccurred: (errType: BalanceErrs) => void;
- token: Token;
- tokenState: TokenState;
- userAddress: string;
+ blockchain: Blockchain;
+ dispatcher: Dispatcher;
+ onErrorOccurred: (errType: BalanceErrs) => void;
+ token: Token;
+ tokenState: TokenState;
+ userAddress: string;
}
interface AllowanceToggleState {
- isSpinnerVisible: boolean;
- prevAllowance: BigNumber;
+ isSpinnerVisible: boolean;
+ prevAllowance: BigNumber;
}
export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
- constructor(props: AllowanceToggleProps) {
- super(props);
- this.state = {
- isSpinnerVisible: false,
- prevAllowance: props.tokenState.allowance,
- };
- }
- public componentWillReceiveProps(nextProps: AllowanceToggleProps) {
- if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
- this.setState({
- isSpinnerVisible: false,
- prevAllowance: nextProps.tokenState.allowance,
- });
- }
- }
- public render() {
- return (
- <div className="flex">
- <div>
- <Toggle
- disabled={this.state.isSpinnerVisible}
- toggled={this._isAllowanceSet()}
- onToggle={this._onToggleAllowanceAsync.bind(this)}
- />
- </div>
- {this.state.isSpinnerVisible && (
- <div className="pl1" style={{ paddingTop: 3 }}>
- <i className="zmdi zmdi-spinner zmdi-hc-spin" />
- </div>
- )}
- </div>
- );
- }
- private async _onToggleAllowanceAsync(): Promise<void> {
- if (this.props.userAddress === '') {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- }
+ constructor(props: AllowanceToggleProps) {
+ super(props);
+ this.state = {
+ isSpinnerVisible: false,
+ prevAllowance: props.tokenState.allowance,
+ };
+ }
+ public componentWillReceiveProps(nextProps: AllowanceToggleProps) {
+ if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
+ this.setState({
+ isSpinnerVisible: false,
+ prevAllowance: nextProps.tokenState.allowance,
+ });
+ }
+ }
+ public render() {
+ return (
+ <div className="flex">
+ <div>
+ <Toggle
+ disabled={this.state.isSpinnerVisible}
+ toggled={this._isAllowanceSet()}
+ onToggle={this._onToggleAllowanceAsync.bind(this)}
+ />
+ </div>
+ {this.state.isSpinnerVisible && (
+ <div className="pl1" style={{ paddingTop: 3 }}>
+ <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+ </div>
+ )}
+ </div>
+ );
+ }
+ private async _onToggleAllowanceAsync(): Promise<void> {
+ if (this.props.userAddress === '') {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ }
- this.setState({
- isSpinnerVisible: true,
- });
+ this.setState({
+ isSpinnerVisible: true,
+ });
- let newAllowanceAmountInBaseUnits = new BigNumber(0);
- if (!this._isAllowanceSet()) {
- newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
- }
- try {
- await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
- } catch (err) {
- this.setState({
- isSpinnerVisible: false,
- });
- const errMsg = `${err}`;
- if (_.includes(errMsg, 'User denied transaction')) {
- return;
- }
- utils.consoleLog(`Unexpected error encountered: ${err}`);
- utils.consoleLog(err.stack);
- this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
- await errorReporter.reportAsync(err);
- }
- }
- private _isAllowanceSet() {
- return !this.props.tokenState.allowance.eq(0);
- }
+ let newAllowanceAmountInBaseUnits = new BigNumber(0);
+ if (!this._isAllowanceSet()) {
+ newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
+ }
+ try {
+ await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
+ } catch (err) {
+ this.setState({
+ isSpinnerVisible: false,
+ });
+ const errMsg = `${err}`;
+ if (_.includes(errMsg, 'User denied transaction')) {
+ return;
+ }
+ utils.consoleLog(`Unexpected error encountered: ${err}`);
+ utils.consoleLog(err.stack);
+ this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
+ await errorReporter.reportAsync(err);
+ }
+ }
+ private _isAllowanceSet() {
+ return !this.props.tokenState.allowance.eq(0);
+ }
}
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index ddc434b51..5cc91994e 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -9,143 +9,143 @@ import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface BalanceBoundedInputProps {
- label?: string;
- balance: BigNumber;
- amount?: BigNumber;
- onChange: ValidatedBigNumberCallback;
- shouldShowIncompleteErrs?: boolean;
- shouldCheckBalance: boolean;
- validate?: (amount: BigNumber) => InputErrMsg;
- onVisitBalancesPageClick?: () => void;
- shouldHideVisitBalancesLink?: boolean;
+ label?: string;
+ balance: BigNumber;
+ amount?: BigNumber;
+ onChange: ValidatedBigNumberCallback;
+ shouldShowIncompleteErrs?: boolean;
+ shouldCheckBalance: boolean;
+ validate?: (amount: BigNumber) => InputErrMsg;
+ onVisitBalancesPageClick?: () => void;
+ shouldHideVisitBalancesLink?: boolean;
}
interface BalanceBoundedInputState {
- errMsg: InputErrMsg;
- amountString: string;
+ errMsg: InputErrMsg;
+ amountString: string;
}
export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
- public static defaultProps: Partial<BalanceBoundedInputProps> = {
- shouldShowIncompleteErrs: false,
- shouldHideVisitBalancesLink: false,
- };
- constructor(props: BalanceBoundedInputProps) {
- super(props);
- const amountString = this.props.amount ? this.props.amount.toString() : '';
- this.state = {
- errMsg: this._validate(amountString, props.balance),
- amountString,
- };
- }
- public componentWillReceiveProps(nextProps: BalanceBoundedInputProps) {
- if (nextProps === this.props) {
- return;
- }
- const isCurrentAmountNumeric = utils.isNumeric(this.state.amountString);
- if (!_.isUndefined(nextProps.amount)) {
- let shouldResetState = false;
- if (!isCurrentAmountNumeric) {
- shouldResetState = true;
- } else {
- const currentAmount = new BigNumber(this.state.amountString);
- if (!currentAmount.eq(nextProps.amount) || !nextProps.balance.eq(this.props.balance)) {
- shouldResetState = true;
- }
- }
- if (shouldResetState) {
- const amountString = nextProps.amount.toString();
- this.setState({
- errMsg: this._validate(amountString, nextProps.balance),
- amountString,
- });
- }
- } else if (isCurrentAmountNumeric) {
- const amountString = '';
- this.setState({
- errMsg: this._validate(amountString, nextProps.balance),
- amountString,
- });
- }
- }
- public render() {
- let errorText = this.state.errMsg;
- if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
- errorText = 'This field is required';
- }
- let label: React.ReactNode | string = '';
- if (!_.isUndefined(this.props.label)) {
- label = <RequiredLabel label={this.props.label} />;
- }
- return (
- <TextField
- fullWidth={true}
- floatingLabelText={label}
- floatingLabelFixed={true}
- floatingLabelStyle={{ color: colors.grey, width: 206 }}
- errorText={errorText}
- value={this.state.amountString}
- hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>}
- onChange={this._onValueChange.bind(this)}
- 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);
- }
- },
- );
- }
- private _validate(amountString: string, balance: BigNumber): InputErrMsg {
- if (!utils.isNumeric(amountString)) {
- return amountString !== '' ? 'Must be a number' : '';
- }
- const amount = new BigNumber(amountString);
- if (amount.eq(0)) {
- return 'Cannot be zero';
- }
- if (this.props.shouldCheckBalance && amount.gt(balance)) {
- return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
- }
- const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
- return errMsg;
- }
- private _renderIncreaseBalanceLink() {
- if (this.props.shouldHideVisitBalancesLink) {
- return null;
- }
+ public static defaultProps: Partial<BalanceBoundedInputProps> = {
+ shouldShowIncompleteErrs: false,
+ shouldHideVisitBalancesLink: false,
+ };
+ constructor(props: BalanceBoundedInputProps) {
+ super(props);
+ const amountString = this.props.amount ? this.props.amount.toString() : '';
+ this.state = {
+ errMsg: this._validate(amountString, props.balance),
+ amountString,
+ };
+ }
+ public componentWillReceiveProps(nextProps: BalanceBoundedInputProps) {
+ if (nextProps === this.props) {
+ return;
+ }
+ const isCurrentAmountNumeric = utils.isNumeric(this.state.amountString);
+ if (!_.isUndefined(nextProps.amount)) {
+ let shouldResetState = false;
+ if (!isCurrentAmountNumeric) {
+ shouldResetState = true;
+ } else {
+ const currentAmount = new BigNumber(this.state.amountString);
+ if (!currentAmount.eq(nextProps.amount) || !nextProps.balance.eq(this.props.balance)) {
+ shouldResetState = true;
+ }
+ }
+ if (shouldResetState) {
+ const amountString = nextProps.amount.toString();
+ this.setState({
+ errMsg: this._validate(amountString, nextProps.balance),
+ amountString,
+ });
+ }
+ } else if (isCurrentAmountNumeric) {
+ const amountString = '';
+ this.setState({
+ errMsg: this._validate(amountString, nextProps.balance),
+ amountString,
+ });
+ }
+ }
+ public render() {
+ let errorText = this.state.errMsg;
+ if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
+ errorText = 'This field is required';
+ }
+ let label: React.ReactNode | string = '';
+ if (!_.isUndefined(this.props.label)) {
+ label = <RequiredLabel label={this.props.label} />;
+ }
+ return (
+ <TextField
+ fullWidth={true}
+ floatingLabelText={label}
+ floatingLabelFixed={true}
+ floatingLabelStyle={{ color: colors.grey, width: 206 }}
+ errorText={errorText}
+ value={this.state.amountString}
+ hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>}
+ onChange={this._onValueChange.bind(this)}
+ 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);
+ }
+ },
+ );
+ }
+ private _validate(amountString: string, balance: BigNumber): InputErrMsg {
+ if (!utils.isNumeric(amountString)) {
+ return amountString !== '' ? 'Must be a number' : '';
+ }
+ const amount = new BigNumber(amountString);
+ if (amount.eq(0)) {
+ return 'Cannot be zero';
+ }
+ if (this.props.shouldCheckBalance && amount.gt(balance)) {
+ return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
+ }
+ const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
+ return errMsg;
+ }
+ private _renderIncreaseBalanceLink() {
+ if (this.props.shouldHideVisitBalancesLink) {
+ return null;
+ }
- const increaseBalanceText = 'Increase balance';
- const linkStyle = {
- cursor: 'pointer',
- color: colors.darkestGrey,
- textDecoration: 'underline',
- display: 'inline',
- };
- if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
- return (
- <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
- {increaseBalanceText}
- </Link>
- );
- } else {
- return (
- <div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}>
- {increaseBalanceText}
- </div>
- );
- }
- }
+ const increaseBalanceText = 'Increase balance';
+ const linkStyle = {
+ cursor: 'pointer',
+ color: colors.darkestGrey,
+ textDecoration: 'underline',
+ display: 'inline',
+ };
+ if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
+ return (
+ <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
+ {increaseBalanceText}
+ </Link>
+ );
+ } else {
+ return (
+ <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 a66f92c8c..7f9747094 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -7,43 +7,43 @@ import { ValidatedBigNumberCallback } from 'ts/types';
import { constants } from 'ts/utils/constants';
interface EthAmountInputProps {
- label?: string;
- balance: BigNumber;
- amount?: BigNumber;
- onChange: ValidatedBigNumberCallback;
- shouldShowIncompleteErrs: boolean;
- onVisitBalancesPageClick?: () => void;
- shouldCheckBalance: boolean;
- shouldHideVisitBalancesLink?: boolean;
+ label?: string;
+ balance: BigNumber;
+ amount?: BigNumber;
+ onChange: ValidatedBigNumberCallback;
+ shouldShowIncompleteErrs: boolean;
+ onVisitBalancesPageClick?: () => void;
+ shouldCheckBalance: boolean;
+ shouldHideVisitBalancesLink?: boolean;
}
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;
- return (
- <div className="flex overflow-hidden" style={{ height: 63 }}>
- <BalanceBoundedInput
- label={this.props.label}
- balance={this.props.balance}
- amount={amount}
- onChange={this._onChange.bind(this)}
- shouldCheckBalance={this.props.shouldCheckBalance}
- shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
- onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
- shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
- />
- <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);
- this.props.onChange(isValid, baseUnitAmountIfExists);
- }
+ public render() {
+ const amount = this.props.amount
+ ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
+ : undefined;
+ return (
+ <div className="flex overflow-hidden" style={{ height: 63 }}>
+ <BalanceBoundedInput
+ label={this.props.label}
+ balance={this.props.balance}
+ amount={amount}
+ onChange={this._onChange.bind(this)}
+ shouldCheckBalance={this.props.shouldCheckBalance}
+ shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
+ onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
+ shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
+ />
+ <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);
+ 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 e473648d2..cb4ed7bd0 100644
--- a/packages/website/ts/components/inputs/expiration_input.tsx
+++ b/packages/website/ts/components/inputs/expiration_input.tsx
@@ -7,94 +7,94 @@ import * as React from 'react';
import { utils } from 'ts/utils/utils';
interface ExpirationInputProps {
- orderExpiryTimestamp: BigNumber;
- updateOrderExpiry: (unixTimestampSec: BigNumber) => void;
+ orderExpiryTimestamp: BigNumber;
+ updateOrderExpiry: (unixTimestampSec: BigNumber) => void;
}
interface ExpirationInputState {
- dateMoment: moment.Moment;
- timeMoment: moment.Moment;
+ dateMoment: moment.Moment;
+ timeMoment: moment.Moment;
}
export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> {
- private _earliestPickableMoment: moment.Moment;
- constructor(props: ExpirationInputProps) {
- super(props);
- // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates
- this._earliestPickableMoment = moment().startOf('day');
- const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
- const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
- const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
- this.state = {
- dateMoment: didUserSetExpiry ? expirationMoment : undefined,
- timeMoment: didUserSetExpiry ? expirationMoment : undefined,
- };
- }
- public render() {
- const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined;
- const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined;
- return (
- <div className="clearfix">
- <div className="col col-6 overflow-hidden pr3 flex relative">
- <DatePicker
- className="overflow-hidden"
- hintText="Date"
- mode="landscape"
- autoOk={true}
- value={date}
- onChange={this._onDateChanged.bind(this)}
- shouldDisableDate={this._shouldDisableDate.bind(this)}
- />
- <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
- <i className="zmdi zmdi-calendar" />
- </div>
- </div>
- <div className="col col-5 overflow-hidden flex relative">
- <TimePicker
- className="overflow-hidden"
- hintText="Time"
- autoOk={true}
- value={time}
- onChange={this._onTimeChanged.bind(this)}
- />
- <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>
- </div>
- );
- }
- private _shouldDisableDate(date: Date): boolean {
- return moment(date)
- .startOf('day')
- .isBefore(this._earliestPickableMoment);
- }
- private _clearDates() {
- this.setState({
- dateMoment: undefined,
- timeMoment: undefined,
- });
- const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
- this.props.updateOrderExpiry(defaultDateTime);
- }
- private _onDateChanged(e: any, date: Date) {
- const dateMoment = moment(date);
- this.setState({
- dateMoment,
- });
- const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
- this.props.updateOrderExpiry(timestamp);
- }
- private _onTimeChanged(e: any, time: Date) {
- const timeMoment = moment(time);
- this.setState({
- timeMoment,
- });
- const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
- const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
- this.props.updateOrderExpiry(timestamp);
- }
+ private _earliestPickableMoment: moment.Moment;
+ constructor(props: ExpirationInputProps) {
+ super(props);
+ // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates
+ this._earliestPickableMoment = moment().startOf('day');
+ const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
+ const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
+ const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
+ this.state = {
+ dateMoment: didUserSetExpiry ? expirationMoment : undefined,
+ timeMoment: didUserSetExpiry ? expirationMoment : undefined,
+ };
+ }
+ public render() {
+ const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined;
+ const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined;
+ return (
+ <div className="clearfix">
+ <div className="col col-6 overflow-hidden pr3 flex relative">
+ <DatePicker
+ className="overflow-hidden"
+ hintText="Date"
+ mode="landscape"
+ autoOk={true}
+ value={date}
+ onChange={this._onDateChanged.bind(this)}
+ shouldDisableDate={this._shouldDisableDate.bind(this)}
+ />
+ <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
+ <i className="zmdi zmdi-calendar" />
+ </div>
+ </div>
+ <div className="col col-5 overflow-hidden flex relative">
+ <TimePicker
+ className="overflow-hidden"
+ hintText="Time"
+ autoOk={true}
+ value={time}
+ onChange={this._onTimeChanged.bind(this)}
+ />
+ <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>
+ </div>
+ );
+ }
+ private _shouldDisableDate(date: Date): boolean {
+ return moment(date)
+ .startOf('day')
+ .isBefore(this._earliestPickableMoment);
+ }
+ private _clearDates() {
+ this.setState({
+ dateMoment: undefined,
+ timeMoment: undefined,
+ });
+ const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
+ this.props.updateOrderExpiry(defaultDateTime);
+ }
+ private _onDateChanged(e: any, date: Date) {
+ const dateMoment = moment(date);
+ this.setState({
+ dateMoment,
+ });
+ const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
+ this.props.updateOrderExpiry(timestamp);
+ }
+ private _onTimeChanged(e: any, time: Date) {
+ const timeMoment = moment(time);
+ this.setState({
+ timeMoment,
+ });
+ 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 5a3d34fe6..36d7e6140 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -8,55 +8,55 @@ import { HashData, Styles } from 'ts/types';
import { constants } from 'ts/utils/constants';
const styles: Styles = {
- textField: {
- overflow: 'hidden',
- paddingTop: 8,
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- },
+ textField: {
+ overflow: 'hidden',
+ paddingTop: 8,
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ },
};
interface HashInputProps {
- blockchain: Blockchain;
- blockchainIsLoaded: boolean;
- hashData: HashData;
- label: string;
+ blockchain: Blockchain;
+ blockchainIsLoaded: boolean;
+ hashData: HashData;
+ label: string;
}
interface HashInputState {}
export class HashInput extends React.Component<HashInputProps, HashInputState> {
- public render() {
- const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : '';
- return (
- <div>
- <FakeTextField label={this.props.label}>
- <div style={styles.textField} data-tip={true} data-for="hashTooltip">
- {msgHashHex}
- </div>
- </FakeTextField>
- <ReactTooltip id="hashTooltip">{msgHashHex}</ReactTooltip>
- </div>
- );
- }
- private _generateMessageHashHex() {
- const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
- const hashData = this.props.hashData;
- const order: Order = {
- exchangeContractAddress,
- expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
- feeRecipient: hashData.feeRecipientAddress,
- maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
- makerFee: hashData.makerFee,
- makerTokenAddress: hashData.depositTokenContractAddr,
- makerTokenAmount: hashData.depositAmount,
- salt: hashData.orderSalt,
- taker: hashData.orderTakerAddress,
- takerFee: hashData.takerFee,
- takerTokenAddress: hashData.receiveTokenContractAddr,
- takerTokenAmount: hashData.receiveAmount,
- };
- const orderHash = ZeroEx.getOrderHashHex(order);
- return orderHash;
- }
+ public render() {
+ const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : '';
+ return (
+ <div>
+ <FakeTextField label={this.props.label}>
+ <div style={styles.textField} data-tip={true} data-for="hashTooltip">
+ {msgHashHex}
+ </div>
+ </FakeTextField>
+ <ReactTooltip id="hashTooltip">{msgHashHex}</ReactTooltip>
+ </div>
+ );
+ }
+ private _generateMessageHashHex() {
+ const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
+ const hashData = this.props.hashData;
+ const order: Order = {
+ exchangeContractAddress,
+ expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
+ feeRecipient: hashData.feeRecipientAddress,
+ maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
+ makerFee: hashData.makerFee,
+ makerTokenAddress: hashData.depositTokenContractAddr,
+ makerTokenAmount: hashData.depositAmount,
+ salt: hashData.orderSalt,
+ taker: hashData.orderTakerAddress,
+ takerFee: hashData.takerFee,
+ takerTokenAddress: hashData.receiveTokenContractAddr,
+ takerTokenAmount: hashData.receiveAmount,
+ };
+ const orderHash = ZeroEx.getOrderHashHex(order);
+ return orderHash;
+ }
}
diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx
index 4cf9af64d..f14cb4e9c 100644
--- a/packages/website/ts/components/inputs/identicon_address_input.tsx
+++ b/packages/website/ts/components/inputs/identicon_address_input.tsx
@@ -6,48 +6,48 @@ import { InputLabel } from 'ts/components/ui/input_label';
import { RequiredLabel } from 'ts/components/ui/required_label';
interface IdenticonAddressInputProps {
- initialAddress: string;
- isRequired?: boolean;
- label: string;
- updateOrderAddress: (address?: string) => void;
+ initialAddress: string;
+ isRequired?: boolean;
+ label: string;
+ updateOrderAddress: (address?: string) => void;
}
interface IdenticonAddressInputState {
- address: string;
+ address: string;
}
export class IdenticonAddressInput extends React.Component<IdenticonAddressInputProps, IdenticonAddressInputState> {
- constructor(props: IdenticonAddressInputProps) {
- super(props);
- this.state = {
- address: props.initialAddress,
- };
- }
- public render() {
- const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
- return (
- <div className="relative" style={{ width: '100%' }}>
- <InputLabel text={label} />
- <div className="flex">
- <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 }}>
- <AddressInput
- hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
- shouldHideLabel={true}
- initialAddress={this.props.initialAddress}
- updateAddress={this._updateAddress.bind(this)}
- />
- </div>
- </div>
- </div>
- );
- }
- private _updateAddress(address?: string): void {
- this.setState({
- address,
- });
- this.props.updateOrderAddress(address);
- }
+ constructor(props: IdenticonAddressInputProps) {
+ super(props);
+ this.state = {
+ address: props.initialAddress,
+ };
+ }
+ public render() {
+ const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
+ return (
+ <div className="relative" style={{ width: '100%' }}>
+ <InputLabel text={label} />
+ <div className="flex">
+ <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 }}>
+ <AddressInput
+ hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
+ shouldHideLabel={true}
+ initialAddress={this.props.initialAddress}
+ updateAddress={this._updateAddress.bind(this)}
+ />
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _updateAddress(address?: string): void {
+ this.setState({
+ address,
+ });
+ this.props.updateOrderAddress(address);
+ }
}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 63966d759..0a71b2c00 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -8,63 +8,63 @@ import { InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePath
import { colors } from 'ts/utils/colors';
interface TokenAmountInputProps {
- token: Token;
- tokenState: TokenState;
- label?: string;
- amount?: BigNumber;
- shouldShowIncompleteErrs: boolean;
- shouldCheckBalance: boolean;
- shouldCheckAllowance: boolean;
- onChange: ValidatedBigNumberCallback;
- onVisitBalancesPageClick?: () => void;
+ token: Token;
+ tokenState: TokenState;
+ label?: string;
+ amount?: BigNumber;
+ shouldShowIncompleteErrs: boolean;
+ shouldCheckBalance: boolean;
+ shouldCheckAllowance: boolean;
+ onChange: ValidatedBigNumberCallback;
+ onVisitBalancesPageClick?: () => void;
}
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 hasLabel = !_.isUndefined(this.props.label);
- return (
- <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}>
- <BalanceBoundedInput
- label={this.props.label}
- amount={amount}
- balance={ZeroEx.toUnitAmount(this.props.tokenState.balance, this.props.token.decimals)}
- onChange={this._onChange.bind(this)}
- validate={this._validate.bind(this)}
- shouldCheckBalance={this.props.shouldCheckBalance}
- shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
- onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
- />
- <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
- </div>
- );
- }
- private _onChange(isValid: boolean, amount?: BigNumber) {
- let baseUnitAmount;
- if (!_.isUndefined(amount)) {
- baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals);
- }
- this.props.onChange(isValid, baseUnitAmount);
- }
- private _validate(amount: BigNumber): InputErrMsg {
- if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) {
- return (
- <span>
- Insufficient allowance.{' '}
- <Link
- to={`${WebsitePaths.Portal}/balances`}
- style={{ cursor: 'pointer', color: colors.darkestGrey }}
- >
- Set allowance
- </Link>
- </span>
- );
- } else {
- return undefined;
- }
- }
+ public render() {
+ 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 }}>
+ <BalanceBoundedInput
+ label={this.props.label}
+ amount={amount}
+ balance={ZeroEx.toUnitAmount(this.props.tokenState.balance, this.props.token.decimals)}
+ onChange={this._onChange.bind(this)}
+ validate={this._validate.bind(this)}
+ shouldCheckBalance={this.props.shouldCheckBalance}
+ shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
+ onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
+ />
+ <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
+ </div>
+ );
+ }
+ private _onChange(isValid: boolean, amount?: BigNumber) {
+ let baseUnitAmount;
+ if (!_.isUndefined(amount)) {
+ baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals);
+ }
+ this.props.onChange(isValid, baseUnitAmount);
+ }
+ private _validate(amount: BigNumber): InputErrMsg {
+ if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) {
+ return (
+ <span>
+ Insufficient allowance.{' '}
+ <Link
+ to={`${WebsitePaths.Portal}/balances`}
+ style={{ cursor: 'pointer', color: colors.darkestGrey }}
+ >
+ Set allowance
+ </Link>
+ </span>
+ );
+ } else {
+ return undefined;
+ }
+ }
}
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 5df19b28c..3aceacb22 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -12,93 +12,93 @@ import { colors } from 'ts/utils/colors';
const TOKEN_ICON_DIMENSION = 80;
interface TokenInputProps {
- blockchain: Blockchain;
- blockchainErr: BlockchainErrs;
- dispatcher: Dispatcher;
- label: string;
- side: Side;
- networkId: number;
- assetToken: AssetToken;
- updateChosenAssetToken: (side: Side, token: AssetToken) => void;
- tokenByAddress: TokenByAddress;
- userAddress: string;
+ blockchain: Blockchain;
+ blockchainErr: BlockchainErrs;
+ dispatcher: Dispatcher;
+ label: string;
+ side: Side;
+ networkId: number;
+ assetToken: AssetToken;
+ updateChosenAssetToken: (side: Side, token: AssetToken) => void;
+ tokenByAddress: TokenByAddress;
+ userAddress: string;
}
interface TokenInputState {
- isHoveringIcon: boolean;
- isPickerOpen: boolean;
- trackCandidateTokenIfExists?: Token;
+ isHoveringIcon: boolean;
+ isPickerOpen: boolean;
+ trackCandidateTokenIfExists?: Token;
}
export class TokenInput extends React.Component<TokenInputProps, TokenInputState> {
- constructor(props: TokenInputProps) {
- super(props);
- this.state = {
- isHoveringIcon: false,
- isPickerOpen: false,
- };
- }
- public render() {
- const token = this.props.tokenByAddress[this.props.assetToken.address];
- const iconStyles = {
- cursor: 'pointer',
- opacity: this.state.isHoveringIcon ? 0.5 : 1,
- };
- return (
- <div className="relative">
- <div className="pb1">
- <InputLabel text={this.props.label} />
- </div>
- <Paper
- zDepth={1}
- 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 }}>
- <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
- </div>
- <div className="py1 center" style={{ color: colors.grey }}>
- {token.name}
- </div>
- </Paper>
- <AssetPicker
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
- isOpen={this.state.isPickerOpen}
- currentTokenAddress={this.props.assetToken.address}
- onTokenChosen={this._onTokenChosen.bind(this)}
- tokenByAddress={this.props.tokenByAddress}
- />
- </div>
- );
- }
- private _onTokenChosen(tokenAddress: string) {
- const assetToken: AssetToken = {
- address: tokenAddress,
- amount: this.props.assetToken.amount,
- };
- this.props.updateChosenAssetToken(this.props.side, assetToken);
- this.setState({
- isPickerOpen: false,
- });
- }
- private _onToggleHover(isHoveringIcon: boolean) {
- this.setState({
- isHoveringIcon,
- });
- }
- private _onAssetClicked() {
- if (this.props.blockchainErr !== BlockchainErrs.NoError) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return;
- }
+ constructor(props: TokenInputProps) {
+ super(props);
+ this.state = {
+ isHoveringIcon: false,
+ isPickerOpen: false,
+ };
+ }
+ public render() {
+ const token = this.props.tokenByAddress[this.props.assetToken.address];
+ const iconStyles = {
+ cursor: 'pointer',
+ opacity: this.state.isHoveringIcon ? 0.5 : 1,
+ };
+ return (
+ <div className="relative">
+ <div className="pb1">
+ <InputLabel text={this.props.label} />
+ </div>
+ <Paper
+ zDepth={1}
+ 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 }}>
+ <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
+ </div>
+ <div className="py1 center" style={{ color: colors.grey }}>
+ {token.name}
+ </div>
+ </Paper>
+ <AssetPicker
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ isOpen={this.state.isPickerOpen}
+ currentTokenAddress={this.props.assetToken.address}
+ onTokenChosen={this._onTokenChosen.bind(this)}
+ tokenByAddress={this.props.tokenByAddress}
+ />
+ </div>
+ );
+ }
+ private _onTokenChosen(tokenAddress: string) {
+ const assetToken: AssetToken = {
+ address: tokenAddress,
+ amount: this.props.assetToken.amount,
+ };
+ this.props.updateChosenAssetToken(this.props.side, assetToken);
+ this.setState({
+ isPickerOpen: false,
+ });
+ }
+ private _onToggleHover(isHoveringIcon: boolean) {
+ this.setState({
+ isHoveringIcon,
+ });
+ }
+ private _onAssetClicked() {
+ if (this.props.blockchainErr !== BlockchainErrs.NoError) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return;
+ }
- this.setState({
- isPickerOpen: true,
- });
- }
+ this.setState({
+ isPickerOpen: true,
+ });
+ }
}
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 1b6b32a04..1640a178e 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -11,172 +11,172 @@ import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
interface OrderJSONProps {
- exchangeContractIfExists: string;
- orderExpiryTimestamp: BigNumber;
- orderSignatureData: SignatureData;
- orderTakerAddress: string;
- orderMakerAddress: string;
- orderSalt: BigNumber;
- orderMakerFee: BigNumber;
- orderTakerFee: BigNumber;
- orderFeeRecipient: string;
- networkId: number;
- sideToAssetToken: SideToAssetToken;
- tokenByAddress: TokenByAddress;
+ exchangeContractIfExists: string;
+ orderExpiryTimestamp: BigNumber;
+ orderSignatureData: SignatureData;
+ orderTakerAddress: string;
+ orderMakerAddress: string;
+ orderSalt: BigNumber;
+ orderMakerFee: BigNumber;
+ orderTakerFee: BigNumber;
+ orderFeeRecipient: string;
+ networkId: number;
+ sideToAssetToken: SideToAssetToken;
+ tokenByAddress: TokenByAddress;
}
interface OrderJSONState {
- shareLink: string;
+ shareLink: string;
}
export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> {
- constructor(props: OrderJSONProps) {
- super(props);
- this.state = {
- shareLink: '',
- };
- // tslint:disable-next-line:no-floating-promises
- 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 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.
- </div>
- <div className="pb2 flex">
- <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 }}
- value={JSON.stringify(order, null, '\t')}
- multiLine={true}
- rows={2}
- rowsMax={8}
- underlineStyle={{ display: 'none' }}
- />
- </Paper>
- <div className="pt3 pb2 center">
- <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>
- </div>
- <div className="mx-auto pt1 flex" style={{ width: 91 }}>
- <div>
- <i
- style={{ cursor: 'pointer', fontSize: 29 }}
- onClick={this._shareViaFacebook.bind(this)}
- className="zmdi zmdi-facebook-box"
- />
- </div>
- <div className="pl1" style={{ position: 'relative', width: 28 }}>
- <i
- 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 }}
- onClick={this._shareViaTwitterAsync.bind(this)}
- className="zmdi zmdi-twitter-box"
- />
- </div>
- </div>
- </div>
- </div>
- );
- }
- private async _shareViaTwitterAsync() {
- const tweetText = encodeURIComponent(`Fill my order using the 0x protocol: ${this.state.shareLink}`);
- 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,
- );
- }
- private async _shareViaEmailAsync() {
- const encodedSubject = encodeURIComponent("Let's trade using the 0x protocol");
- const encodedBody = encodeURIComponent(`I generated an order with the 0x protocol.
+ constructor(props: OrderJSONProps) {
+ super(props);
+ this.state = {
+ shareLink: '',
+ };
+ // tslint:disable-next-line:no-floating-promises
+ 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 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.
+ </div>
+ <div className="pb2 flex">
+ <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 }}
+ value={JSON.stringify(order, null, '\t')}
+ multiLine={true}
+ rows={2}
+ rowsMax={8}
+ underlineStyle={{ display: 'none' }}
+ />
+ </Paper>
+ <div className="pt3 pb2 center">
+ <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>
+ </div>
+ <div className="mx-auto pt1 flex" style={{ width: 91 }}>
+ <div>
+ <i
+ style={{ cursor: 'pointer', fontSize: 29 }}
+ onClick={this._shareViaFacebook.bind(this)}
+ className="zmdi zmdi-facebook-box"
+ />
+ </div>
+ <div className="pl1" style={{ position: 'relative', width: 28 }}>
+ <i
+ 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 }}
+ onClick={this._shareViaTwitterAsync.bind(this)}
+ className="zmdi zmdi-twitter-box"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private async _shareViaTwitterAsync() {
+ const tweetText = encodeURIComponent(`Fill my order using the 0x protocol: ${this.state.shareLink}`);
+ 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,
+ );
+ }
+ private async _shareViaEmailAsync() {
+ 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}`;
- window.open(mailToLink, '_blank');
- }
- private async _setShareLinkAsync() {
- const shareLink = await this._generateShareLinkAsync();
- this.setState({
- 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 response = await fetch(bitlyRequestUrl);
- const responseBody = await response.text();
- const bodyObj = JSON.parse(responseBody);
- if (response.status !== 200 || bodyObj.status_code !== 200) {
- // TODO: Show error message in UI
- utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`);
- await errorReporter.reportAsync(new Error(`Bitly returned non-200: ${JSON.stringify(response)}`));
- return '';
- }
- 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 orderJSONString = JSON.stringify(order);
- const orderUrl = `${configs.BASE_URL}${WebsitePaths.Portal}/fill?order=${orderJSONString}`;
- return orderUrl;
- }
+ const mailToLink = `mailto:mail@example.org?subject=${encodedSubject}&body=${encodedBody}`;
+ window.open(mailToLink, '_blank');
+ }
+ private async _setShareLinkAsync() {
+ const shareLink = await this._generateShareLinkAsync();
+ this.setState({
+ 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 response = await fetch(bitlyRequestUrl);
+ const responseBody = await response.text();
+ const bodyObj = JSON.parse(responseBody);
+ if (response.status !== 200 || bodyObj.status_code !== 200) {
+ // TODO: Show error message in UI
+ utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`);
+ await errorReporter.reportAsync(new Error(`Bitly returned non-200: ${JSON.stringify(response)}`));
+ return '';
+ }
+ 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 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 e2e28e8b6..e163a1fa2 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -23,14 +23,14 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { orderSchema } from 'ts/schemas/order_schema';
import { SchemaValidator } from 'ts/schemas/validator';
import {
- BlockchainErrs,
- HashData,
- Order,
- ScreenWidths,
- Token,
- TokenByAddress,
- TokenStateByAddress,
- WebsitePaths,
+ BlockchainErrs,
+ HashData,
+ Order,
+ ScreenWidths,
+ Token,
+ TokenByAddress,
+ TokenStateByAddress,
+ WebsitePaths,
} from 'ts/types';
import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
@@ -42,320 +42,320 @@ const THROTTLE_TIMEOUT = 100;
export interface PortalPassedProps {}
export interface PortalAllProps {
- blockchainErr: BlockchainErrs;
- blockchainIsLoaded: boolean;
- dispatcher: Dispatcher;
- hashData: HashData;
- networkId: number;
- nodeVersion: string;
- orderFillAmount: BigNumber;
- screenWidth: ScreenWidths;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
- userEtherBalance: BigNumber;
- userAddress: string;
- shouldBlockchainErrDialogBeOpen: boolean;
- userSuppliedOrderCache: Order;
- location: Location;
- flashMessage?: string | React.ReactNode;
+ blockchainErr: BlockchainErrs;
+ blockchainIsLoaded: boolean;
+ dispatcher: Dispatcher;
+ hashData: HashData;
+ networkId: number;
+ nodeVersion: string;
+ orderFillAmount: BigNumber;
+ screenWidth: ScreenWidths;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ userEtherBalance: BigNumber;
+ userAddress: string;
+ shouldBlockchainErrDialogBeOpen: boolean;
+ userSuppliedOrderCache: Order;
+ location: Location;
+ flashMessage?: string | React.ReactNode;
}
interface PortalAllState {
- prevNetworkId: number;
- prevNodeVersion: string;
- prevUserAddress: string;
- prevPathname: string;
- isDisclaimerDialogOpen: boolean;
- isWethNoticeDialogOpen: boolean;
+ prevNetworkId: number;
+ prevNodeVersion: string;
+ prevUserAddress: string;
+ prevPathname: string;
+ isDisclaimerDialogOpen: boolean;
+ isWethNoticeDialogOpen: boolean;
}
export class Portal extends React.Component<PortalAllProps, PortalAllState> {
- private _blockchain: Blockchain;
- private _sharedOrderIfExists: Order;
- private _throttledScreenWidthUpdate: () => void;
- public static hasAlreadyDismissedWethNotice() {
- const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE);
- const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) && !_.isEmpty(didDismissWethNotice);
- return hasAlreadyDismissedWethNotice;
- }
- constructor(props: PortalAllProps) {
- super(props);
- this._sharedOrderIfExists = this._getSharedOrderIfExists();
- this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+ private _blockchain: Blockchain;
+ private _sharedOrderIfExists: Order;
+ private _throttledScreenWidthUpdate: () => void;
+ public static hasAlreadyDismissedWethNotice() {
+ const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE);
+ const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) && !_.isEmpty(didDismissWethNotice);
+ return hasAlreadyDismissedWethNotice;
+ }
+ constructor(props: PortalAllProps) {
+ super(props);
+ this._sharedOrderIfExists = this._getSharedOrderIfExists();
+ this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
- const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`);
- const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+ const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`);
+ const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
- const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
- const hasAcceptedDisclaimer =
- !_.isUndefined(didAcceptPortalDisclaimer) && !_.isEmpty(didAcceptPortalDisclaimer);
- this.state = {
- prevNetworkId: this.props.networkId,
- prevNodeVersion: this.props.nodeVersion,
- prevUserAddress: this.props.userAddress,
- prevPathname: this.props.location.pathname,
- isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
- isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
- };
- }
- public componentDidMount() {
- window.addEventListener('resize', this._throttledScreenWidthUpdate);
- window.scrollTo(0, 0);
- }
- public componentWillMount() {
- this._blockchain = new Blockchain(this.props.dispatcher);
- }
- public componentWillUnmount() {
- this._blockchain.destroy();
- window.removeEventListener('resize', this._throttledScreenWidthUpdate);
- // We re-set the entire redux state when the portal is unmounted so that when it is re-rendered
- // the initialization process always occurs from the same base state. This helps avoid
- // initialization inconsistencies (i.e While the portal was unrendered, the user might have
- // become disconnected from their backing Ethereum node, changes user accounts, etc...)
- this.props.dispatcher.resetState();
- }
- public componentWillReceiveProps(nextProps: PortalAllProps) {
- if (nextProps.networkId !== this.state.prevNetworkId) {
- // tslint:disable-next-line:no-floating-promises
- this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
- this.setState({
- prevNetworkId: nextProps.networkId,
- });
- }
- if (nextProps.userAddress !== this.state.prevUserAddress) {
- // tslint:disable-next-line:no-floating-promises
- this._blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress);
- if (!_.isEmpty(nextProps.userAddress) && nextProps.blockchainIsLoaded) {
- const tokens = _.values(nextProps.tokenByAddress);
- // tslint:disable-next-line:no-floating-promises
- this._updateBalanceAndAllowanceWithLoadingScreenAsync(tokens);
- }
- this.setState({
- prevUserAddress: nextProps.userAddress,
- });
- }
- if (nextProps.nodeVersion !== this.state.prevNodeVersion) {
- // tslint:disable-next-line:no-floating-promises
- this._blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
- }
- if (nextProps.location.pathname !== this.state.prevPathname) {
- const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`);
- const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
- this.setState({
- prevPathname: nextProps.location.pathname,
- isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
- });
- }
- }
- public render() {
- const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
- this.props.dispatcher,
- );
- const portalStyle: React.CSSProperties = {
- minHeight: '100vh',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-between',
- };
- const portalMenuContainerStyle: React.CSSProperties = {
- overflow: 'hidden',
- backgroundColor: colors.darkestGrey,
- color: colors.white,
- };
- return (
- <div style={portalStyle}>
- <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%' }}>
- <Paper className="mb3 mt2">
- {!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 }} />
- </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>
- </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>
- <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 ? (
- <Switch>
- <Route
- path={`${WebsitePaths.Portal}/weth`}
- render={this._renderEthWrapper.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Portal}/fill`}
- render={this._renderFillOrder.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Portal}/balances`}
- render={this._renderTokenBalances.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Portal}/trades`}
- component={this._renderTradeHistory.bind(this)}
- />
- <Route
- path={`${WebsitePaths.Home}`}
- render={this._renderGenerateOrderForm.bind(this)}
- />
- </Switch>
- ) : (
- <Loading />
- )}
- </div>
- </div>
- </div>
- )}
- </Paper>
- <BlockchainErrDialog
- blockchain={this._blockchain}
- blockchainErr={this.props.blockchainErr}
- isOpen={this.props.shouldBlockchainErrDialogBeOpen}
- userAddress={this.props.userAddress}
- toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
- networkId={this.props.networkId}
- />
- <WrappedEthSectionNoticeDialog
- isOpen={this.state.isWethNoticeDialogOpen}
- onToggleDialog={this._onWethNoticeAccepted.bind(this)}
- />
- <PortalDisclaimerDialog
- isOpen={this.state.isDisclaimerDialogOpen}
- onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
- />
- <FlashMessage dispatcher={this.props.dispatcher} flashMessage={this.props.flashMessage} />
- </div>
- <Footer />
- </div>
- );
- }
- private _renderEthWrapper() {
- return (
- <EthWrappers
- networkId={this.props.networkId}
- blockchain={this._blockchain}
- dispatcher={this.props.dispatcher}
- tokenByAddress={this.props.tokenByAddress}
- tokenStateByAddress={this.props.tokenStateByAddress}
- userAddress={this.props.userAddress}
- userEtherBalance={this.props.userEtherBalance}
- />
- );
- }
- private _renderTradeHistory() {
- return (
- <TradeHistory
- tokenByAddress={this.props.tokenByAddress}
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- />
- );
- }
- private _renderTokenBalances() {
- return (
- <TokenBalances
- blockchain={this._blockchain}
- blockchainErr={this.props.blockchainErr}
- blockchainIsLoaded={this.props.blockchainIsLoaded}
- dispatcher={this.props.dispatcher}
- screenWidth={this.props.screenWidth}
- tokenByAddress={this.props.tokenByAddress}
- tokenStateByAddress={this.props.tokenStateByAddress}
- userAddress={this.props.userAddress}
- userEtherBalance={this.props.userEtherBalance}
- networkId={this.props.networkId}
- />
- );
- }
- private _renderFillOrder(match: any, location: Location, history: History) {
- const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache)
- ? this.props.userSuppliedOrderCache
- : this._sharedOrderIfExists;
- return (
- <FillOrder
- blockchain={this._blockchain}
- blockchainErr={this.props.blockchainErr}
- initialOrder={initialFillOrder}
- isOrderInUrl={!_.isUndefined(this._sharedOrderIfExists)}
- orderFillAmount={this.props.orderFillAmount}
- networkId={this.props.networkId}
- userAddress={this.props.userAddress}
- tokenByAddress={this.props.tokenByAddress}
- tokenStateByAddress={this.props.tokenStateByAddress}
- dispatcher={this.props.dispatcher}
- />
- );
- }
- private _renderGenerateOrderForm(match: any, location: Location, history: History) {
- return (
- <GenerateOrderForm
- blockchain={this._blockchain}
- hashData={this.props.hashData}
- dispatcher={this.props.dispatcher}
- />
- );
- }
- private _onPortalDisclaimerAccepted() {
- localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
- this.setState({
- isDisclaimerDialogOpen: false,
- });
- }
- private _onWethNoticeAccepted() {
- localStorage.setItem(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE, 'set');
- this.setState({
- isWethNoticeDialogOpen: false,
- });
- }
- private _getSharedOrderIfExists(): Order | undefined {
- const queryString = window.location.search;
- if (queryString.length === 0) {
- return undefined;
- }
- const queryParams = queryString.substring(1).split('&');
- const orderQueryParam = _.find(queryParams, queryParam => {
- const queryPair = queryParam.split('=');
- return queryPair[0] === 'order';
- });
- if (_.isUndefined(orderQueryParam)) {
- return undefined;
- }
- const orderPair = orderQueryParam.split('=');
- if (orderPair.length !== 2) {
- return undefined;
- }
+ const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
+ const hasAcceptedDisclaimer =
+ !_.isUndefined(didAcceptPortalDisclaimer) && !_.isEmpty(didAcceptPortalDisclaimer);
+ this.state = {
+ prevNetworkId: this.props.networkId,
+ prevNodeVersion: this.props.nodeVersion,
+ prevUserAddress: this.props.userAddress,
+ prevPathname: this.props.location.pathname,
+ isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
+ isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
+ };
+ }
+ public componentDidMount() {
+ window.addEventListener('resize', this._throttledScreenWidthUpdate);
+ window.scrollTo(0, 0);
+ }
+ public componentWillMount() {
+ this._blockchain = new Blockchain(this.props.dispatcher);
+ }
+ public componentWillUnmount() {
+ this._blockchain.destroy();
+ window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+ // We re-set the entire redux state when the portal is unmounted so that when it is re-rendered
+ // the initialization process always occurs from the same base state. This helps avoid
+ // initialization inconsistencies (i.e While the portal was unrendered, the user might have
+ // become disconnected from their backing Ethereum node, changes user accounts, etc...)
+ this.props.dispatcher.resetState();
+ }
+ public componentWillReceiveProps(nextProps: PortalAllProps) {
+ if (nextProps.networkId !== this.state.prevNetworkId) {
+ // tslint:disable-next-line:no-floating-promises
+ this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
+ this.setState({
+ prevNetworkId: nextProps.networkId,
+ });
+ }
+ if (nextProps.userAddress !== this.state.prevUserAddress) {
+ // tslint:disable-next-line:no-floating-promises
+ this._blockchain.userAddressUpdatedFireAndForgetAsync(nextProps.userAddress);
+ if (!_.isEmpty(nextProps.userAddress) && nextProps.blockchainIsLoaded) {
+ const tokens = _.values(nextProps.tokenByAddress);
+ // tslint:disable-next-line:no-floating-promises
+ this._updateBalanceAndAllowanceWithLoadingScreenAsync(tokens);
+ }
+ this.setState({
+ prevUserAddress: nextProps.userAddress,
+ });
+ }
+ if (nextProps.nodeVersion !== this.state.prevNodeVersion) {
+ // tslint:disable-next-line:no-floating-promises
+ this._blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
+ }
+ if (nextProps.location.pathname !== this.state.prevPathname) {
+ const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`);
+ const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+ this.setState({
+ prevPathname: nextProps.location.pathname,
+ isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
+ });
+ }
+ }
+ public render() {
+ const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
+ this.props.dispatcher,
+ );
+ const portalStyle: React.CSSProperties = {
+ minHeight: '100vh',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ };
+ const portalMenuContainerStyle: React.CSSProperties = {
+ overflow: 'hidden',
+ backgroundColor: colors.darkestGrey,
+ color: colors.white,
+ };
+ return (
+ <div style={portalStyle}>
+ <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%' }}>
+ <Paper className="mb3 mt2">
+ {!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 }} />
+ </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>
+ </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>
+ <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 ? (
+ <Switch>
+ <Route
+ path={`${WebsitePaths.Portal}/weth`}
+ render={this._renderEthWrapper.bind(this)}
+ />
+ <Route
+ path={`${WebsitePaths.Portal}/fill`}
+ render={this._renderFillOrder.bind(this)}
+ />
+ <Route
+ path={`${WebsitePaths.Portal}/balances`}
+ render={this._renderTokenBalances.bind(this)}
+ />
+ <Route
+ path={`${WebsitePaths.Portal}/trades`}
+ component={this._renderTradeHistory.bind(this)}
+ />
+ <Route
+ path={`${WebsitePaths.Home}`}
+ render={this._renderGenerateOrderForm.bind(this)}
+ />
+ </Switch>
+ ) : (
+ <Loading />
+ )}
+ </div>
+ </div>
+ </div>
+ )}
+ </Paper>
+ <BlockchainErrDialog
+ blockchain={this._blockchain}
+ blockchainErr={this.props.blockchainErr}
+ isOpen={this.props.shouldBlockchainErrDialogBeOpen}
+ userAddress={this.props.userAddress}
+ toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
+ networkId={this.props.networkId}
+ />
+ <WrappedEthSectionNoticeDialog
+ isOpen={this.state.isWethNoticeDialogOpen}
+ onToggleDialog={this._onWethNoticeAccepted.bind(this)}
+ />
+ <PortalDisclaimerDialog
+ isOpen={this.state.isDisclaimerDialogOpen}
+ onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
+ />
+ <FlashMessage dispatcher={this.props.dispatcher} flashMessage={this.props.flashMessage} />
+ </div>
+ <Footer />
+ </div>
+ );
+ }
+ private _renderEthWrapper() {
+ return (
+ <EthWrappers
+ networkId={this.props.networkId}
+ blockchain={this._blockchain}
+ dispatcher={this.props.dispatcher}
+ tokenByAddress={this.props.tokenByAddress}
+ tokenStateByAddress={this.props.tokenStateByAddress}
+ userAddress={this.props.userAddress}
+ userEtherBalance={this.props.userEtherBalance}
+ />
+ );
+ }
+ private _renderTradeHistory() {
+ return (
+ <TradeHistory
+ tokenByAddress={this.props.tokenByAddress}
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ />
+ );
+ }
+ private _renderTokenBalances() {
+ return (
+ <TokenBalances
+ blockchain={this._blockchain}
+ blockchainErr={this.props.blockchainErr}
+ blockchainIsLoaded={this.props.blockchainIsLoaded}
+ dispatcher={this.props.dispatcher}
+ screenWidth={this.props.screenWidth}
+ tokenByAddress={this.props.tokenByAddress}
+ tokenStateByAddress={this.props.tokenStateByAddress}
+ userAddress={this.props.userAddress}
+ userEtherBalance={this.props.userEtherBalance}
+ networkId={this.props.networkId}
+ />
+ );
+ }
+ private _renderFillOrder(match: any, location: Location, history: History) {
+ const initialFillOrder = !_.isUndefined(this.props.userSuppliedOrderCache)
+ ? this.props.userSuppliedOrderCache
+ : this._sharedOrderIfExists;
+ return (
+ <FillOrder
+ blockchain={this._blockchain}
+ blockchainErr={this.props.blockchainErr}
+ initialOrder={initialFillOrder}
+ isOrderInUrl={!_.isUndefined(this._sharedOrderIfExists)}
+ orderFillAmount={this.props.orderFillAmount}
+ networkId={this.props.networkId}
+ userAddress={this.props.userAddress}
+ tokenByAddress={this.props.tokenByAddress}
+ tokenStateByAddress={this.props.tokenStateByAddress}
+ dispatcher={this.props.dispatcher}
+ />
+ );
+ }
+ private _renderGenerateOrderForm(match: any, location: Location, history: History) {
+ return (
+ <GenerateOrderForm
+ blockchain={this._blockchain}
+ hashData={this.props.hashData}
+ dispatcher={this.props.dispatcher}
+ />
+ );
+ }
+ private _onPortalDisclaimerAccepted() {
+ localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
+ this.setState({
+ isDisclaimerDialogOpen: false,
+ });
+ }
+ private _onWethNoticeAccepted() {
+ localStorage.setItem(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE, 'set');
+ this.setState({
+ isWethNoticeDialogOpen: false,
+ });
+ }
+ private _getSharedOrderIfExists(): Order | undefined {
+ const queryString = window.location.search;
+ if (queryString.length === 0) {
+ return undefined;
+ }
+ const queryParams = queryString.substring(1).split('&');
+ const orderQueryParam = _.find(queryParams, queryParam => {
+ const queryPair = queryParam.split('=');
+ return queryPair[0] === 'order';
+ });
+ if (_.isUndefined(orderQueryParam)) {
+ return undefined;
+ }
+ const orderPair = orderQueryParam.split('=');
+ if (orderPair.length !== 2) {
+ return undefined;
+ }
- const validator = new SchemaValidator();
- const order = JSON.parse(decodeURIComponent(orderPair[1]));
- const validationResult = validator.validate(order, orderSchema);
- if (validationResult.errors.length > 0) {
- utils.consoleLog(`Invalid shared order: ${validationResult.errors}`);
- return undefined;
- }
- return order;
- }
- private _updateScreenWidth() {
- const newScreenWidth = utils.getScreenWidth();
- this.props.dispatcher.updateScreenWidth(newScreenWidth);
- }
- private async _updateBalanceAndAllowanceWithLoadingScreenAsync(tokens: Token[]) {
- this.props.dispatcher.updateBlockchainIsLoaded(false);
- await this._blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
- this.props.dispatcher.updateBlockchainIsLoaded(true);
- }
+ const validator = new SchemaValidator();
+ const order = JSON.parse(decodeURIComponent(orderPair[1]));
+ const validationResult = validator.validate(order, orderSchema);
+ if (validationResult.errors.length > 0) {
+ utils.consoleLog(`Invalid shared order: ${validationResult.errors}`);
+ return undefined;
+ }
+ return order;
+ }
+ private _updateScreenWidth() {
+ const newScreenWidth = utils.getScreenWidth();
+ this.props.dispatcher.updateScreenWidth(newScreenWidth);
+ }
+ private async _updateBalanceAndAllowanceWithLoadingScreenAsync(tokens: Token[]) {
+ this.props.dispatcher.updateBlockchainIsLoaded(false);
+ await this._blockchain.updateTokenBalancesAndAllowancesAsync(tokens);
+ this.props.dispatcher.updateBlockchainIsLoaded(true);
+ }
}
diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/portal_menu.tsx
index a2f9340c8..b025f527e 100644
--- a/packages/website/ts/components/portal_menu.tsx
+++ b/packages/website/ts/components/portal_menu.tsx
@@ -4,70 +4,70 @@ import { MenuItem } from 'ts/components/ui/menu_item';
import { WebsitePaths } from 'ts/types';
export interface PortalMenuProps {
- menuItemStyle: React.CSSProperties;
- onClick?: () => void;
+ menuItemStyle: React.CSSProperties;
+ onClick?: () => void;
}
interface PortalMenuState {}
export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState> {
- public static defaultProps: Partial<PortalMenuProps> = {
- onClick: _.noop,
- };
- public render() {
- return (
- <div>
- <MenuItem
- style={this.props.menuItemStyle}
- className="py2"
- to={`${WebsitePaths.Portal}`}
- onClick={this.props.onClick.bind(this)}
- >
- {this._renderMenuItemWithIcon('Generate order', 'zmdi-arrow-right-top')}
- </MenuItem>
- <MenuItem
- style={this.props.menuItemStyle}
- className="py2"
- to={`${WebsitePaths.Portal}/fill`}
- onClick={this.props.onClick.bind(this)}
- >
- {this._renderMenuItemWithIcon('Fill order', 'zmdi-arrow-left-bottom')}
- </MenuItem>
- <MenuItem
- style={this.props.menuItemStyle}
- className="py2"
- to={`${WebsitePaths.Portal}/balances`}
- onClick={this.props.onClick.bind(this)}
- >
- {this._renderMenuItemWithIcon('Balances', 'zmdi-balance-wallet')}
- </MenuItem>
- <MenuItem
- style={this.props.menuItemStyle}
- className="py2"
- to={`${WebsitePaths.Portal}/trades`}
- onClick={this.props.onClick.bind(this)}
- >
- {this._renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')}
- </MenuItem>
- <MenuItem
- style={this.props.menuItemStyle}
- className="py2"
- to={`${WebsitePaths.Portal}/weth`}
- onClick={this.props.onClick.bind(this)}
- >
- {this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
- </MenuItem>
- </div>
- );
- }
- private _renderMenuItemWithIcon(title: string, iconName: string) {
- return (
- <div className="flex" style={{ fontWeight: 100 }}>
- <div className="pr1 pl2">
- <i style={{ fontSize: 20 }} className={`zmdi ${iconName}`} />
- </div>
- <div className="pl1">{title}</div>
- </div>
- );
- }
+ public static defaultProps: Partial<PortalMenuProps> = {
+ onClick: _.noop,
+ };
+ public render() {
+ return (
+ <div>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Generate order', 'zmdi-arrow-right-top')}
+ </MenuItem>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/fill`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Fill order', 'zmdi-arrow-left-bottom')}
+ </MenuItem>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/balances`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Balances', 'zmdi-balance-wallet')}
+ </MenuItem>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/trades`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')}
+ </MenuItem>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/weth`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
+ </MenuItem>
+ </div>
+ );
+ }
+ private _renderMenuItemWithIcon(title: string, iconName: string) {
+ return (
+ <div className="flex" style={{ fontWeight: 100 }}>
+ <div className="pr1 pl2">
+ <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 f94ec346a..f97d9250b 100644
--- a/packages/website/ts/components/send_button.tsx
+++ b/packages/website/ts/components/send_button.tsx
@@ -10,78 +10,78 @@ import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
interface SendButtonProps {
- token: Token;
- tokenState: TokenState;
- dispatcher: Dispatcher;
- blockchain: Blockchain;
- onError: () => void;
+ token: Token;
+ tokenState: TokenState;
+ dispatcher: Dispatcher;
+ blockchain: Blockchain;
+ onError: () => void;
}
interface SendButtonState {
- isSendDialogVisible: boolean;
- isSending: boolean;
+ isSendDialogVisible: boolean;
+ isSending: boolean;
}
export class SendButton extends React.Component<SendButtonProps, SendButtonState> {
- public constructor(props: SendButtonProps) {
- super(props);
- this.state = {
- isSendDialogVisible: false,
- isSending: false,
- };
- }
- public render() {
- const labelStyle = this.state.isSending ? { fontSize: 10 } : {};
- return (
- <div>
- <RaisedButton
- style={{ width: '100%' }}
- labelStyle={labelStyle}
- disabled={this.state.isSending}
- label={this.state.isSending ? 'Sending...' : 'Send'}
- onClick={this._toggleSendDialog.bind(this)}
- />
- <SendDialog
- isOpen={this.state.isSendDialogVisible}
- onComplete={this._onSendAmountSelectedAsync.bind(this)}
- onCancelled={this._toggleSendDialog.bind(this)}
- token={this.props.token}
- tokenState={this.props.tokenState}
- />
- </div>
- );
- }
- private _toggleSendDialog() {
- this.setState({
- isSendDialogVisible: !this.state.isSendDialogVisible,
- });
- }
- private async _onSendAmountSelectedAsync(recipient: string, value: BigNumber) {
- this.setState({
- isSending: true,
- });
- this._toggleSendDialog();
- const token = this.props.token;
- const tokenState = this.props.tokenState;
- let balance = tokenState.balance;
- try {
- await this.props.blockchain.transferAsync(token, recipient, value);
- balance = balance.minus(value);
- this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
- } catch (err) {
- const errMsg = `${err}`;
- if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return;
- } else if (!_.includes(errMsg, 'User denied transaction')) {
- utils.consoleLog(`Unexpected error encountered: ${err}`);
- utils.consoleLog(err.stack);
- this.props.onError();
- await errorReporter.reportAsync(err);
- }
- }
- this.setState({
- isSending: false,
- });
- }
+ public constructor(props: SendButtonProps) {
+ super(props);
+ this.state = {
+ isSendDialogVisible: false,
+ isSending: false,
+ };
+ }
+ public render() {
+ const labelStyle = this.state.isSending ? { fontSize: 10 } : {};
+ return (
+ <div>
+ <RaisedButton
+ style={{ width: '100%' }}
+ labelStyle={labelStyle}
+ disabled={this.state.isSending}
+ label={this.state.isSending ? 'Sending...' : 'Send'}
+ onClick={this._toggleSendDialog.bind(this)}
+ />
+ <SendDialog
+ isOpen={this.state.isSendDialogVisible}
+ onComplete={this._onSendAmountSelectedAsync.bind(this)}
+ onCancelled={this._toggleSendDialog.bind(this)}
+ token={this.props.token}
+ tokenState={this.props.tokenState}
+ />
+ </div>
+ );
+ }
+ private _toggleSendDialog() {
+ this.setState({
+ isSendDialogVisible: !this.state.isSendDialogVisible,
+ });
+ }
+ private async _onSendAmountSelectedAsync(recipient: string, value: BigNumber) {
+ this.setState({
+ isSending: true,
+ });
+ this._toggleSendDialog();
+ const token = this.props.token;
+ const tokenState = this.props.tokenState;
+ let balance = tokenState.balance;
+ try {
+ await this.props.blockchain.transferAsync(token, recipient, value);
+ balance = balance.minus(value);
+ this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
+ } catch (err) {
+ const errMsg = `${err}`;
+ if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return;
+ } else if (!_.includes(errMsg, 'User denied transaction')) {
+ utils.consoleLog(`Unexpected error encountered: ${err}`);
+ utils.consoleLog(err.stack);
+ this.props.onError();
+ await errorReporter.reportAsync(err);
+ }
+ }
+ this.setState({
+ isSending: false,
+ });
+ }
}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 2cef413c7..480652c34 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -23,16 +23,16 @@ 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,
- BlockchainErrs,
- EtherscanLinkSuffixes,
- ScreenWidths,
- Styles,
- Token,
- TokenByAddress,
- TokenStateByAddress,
- TokenVisibility,
+ BalanceErrs,
+ BlockchainCallErrs,
+ BlockchainErrs,
+ EtherscanLinkSuffixes,
+ ScreenWidths,
+ Styles,
+ Token,
+ TokenByAddress,
+ TokenStateByAddress,
+ TokenVisibility,
} from 'ts/types';
import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
@@ -53,554 +53,554 @@ const TOKEN_COL_SPAN_LG = 2;
const TOKEN_COL_SPAN_SM = 1;
const styles: Styles = {
- bgColor: {
- backgroundColor: colors.grey50,
- },
+ bgColor: {
+ backgroundColor: colors.grey50,
+ },
};
interface TokenBalancesProps {
- blockchain: Blockchain;
- blockchainErr: BlockchainErrs;
- blockchainIsLoaded: boolean;
- dispatcher: Dispatcher;
- screenWidth: ScreenWidths;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
- userAddress: string;
- userEtherBalance: BigNumber;
- networkId: number;
+ blockchain: Blockchain;
+ blockchainErr: BlockchainErrs;
+ blockchainIsLoaded: boolean;
+ dispatcher: Dispatcher;
+ screenWidth: ScreenWidths;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ userAddress: string;
+ userEtherBalance: BigNumber;
+ networkId: number;
}
interface TokenBalancesState {
- errorType: BalanceErrs;
- isBalanceSpinnerVisible: boolean;
- isDharmaDialogVisible: boolean;
- isZRXSpinnerVisible: boolean;
- currentZrxBalance?: BigNumber;
- isTokenPickerOpen: boolean;
- isAddingToken: boolean;
+ errorType: BalanceErrs;
+ isBalanceSpinnerVisible: boolean;
+ isDharmaDialogVisible: boolean;
+ isZRXSpinnerVisible: boolean;
+ currentZrxBalance?: BigNumber;
+ isTokenPickerOpen: boolean;
+ isAddingToken: boolean;
}
export class TokenBalances extends React.Component<TokenBalancesProps, TokenBalancesState> {
- public constructor(props: TokenBalancesProps) {
- super(props);
- this.state = {
- errorType: undefined,
- isBalanceSpinnerVisible: false,
- isZRXSpinnerVisible: false,
- isDharmaDialogVisible: DharmaLoanFrame.isAuthTokenPresent(),
- isTokenPickerOpen: false,
- isAddingToken: false,
- };
- }
- public componentWillReceiveProps(nextProps: TokenBalancesProps) {
- if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
- if (this.state.isBalanceSpinnerVisible) {
- const receivedAmount = nextProps.userEtherBalance.minus(this.props.userEtherBalance);
- this.props.dispatcher.showFlashMessage(`Received ${receivedAmount.toString(10)} Kovan Ether`);
- }
- this.setState({
- isBalanceSpinnerVisible: false,
- });
- }
- const nextZrxToken = _.find(_.values(nextProps.tokenByAddress), t => t.symbol === ZRX_TOKEN_SYMBOL);
- const nextZrxTokenBalance = nextProps.tokenStateByAddress[nextZrxToken.address].balance;
- if (!_.isUndefined(this.state.currentZrxBalance) && !nextZrxTokenBalance.eq(this.state.currentZrxBalance)) {
- if (this.state.isZRXSpinnerVisible) {
- const receivedAmount = nextZrxTokenBalance.minus(this.state.currentZrxBalance);
- const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, constants.DECIMAL_PLACES_ZRX);
- this.props.dispatcher.showFlashMessage(`Received ${receiveAmountInUnits.toString(10)} Kovan ZRX`);
- }
- this.setState({
- isZRXSpinnerVisible: false,
- currentZrxBalance: undefined,
- });
- }
- }
- public componentDidMount() {
- window.scrollTo(0, 0);
- }
- public render() {
- const errorDialogActions = [
- <FlatButton
- key="errorOkBtn"
- label="Ok"
- primary={true}
- onTouchTap={this._onErrorDialogToggle.bind(this, false)}
- />,
- ];
- const dharmaDialogActions = [
- <FlatButton
- key="dharmaCloseBtn"
- label="Close"
- primary={true}
- onTouchTap={this._onDharmaDialogToggle.bind(this, false)}
- />,
- ];
- const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET;
- const dharmaButtonColumnStyle = {
- paddingLeft: 3,
- display: isTestNetwork ? 'table-cell' : 'none',
- };
- const stubColumnStyle = {
- 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 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> \
+ public constructor(props: TokenBalancesProps) {
+ super(props);
+ this.state = {
+ errorType: undefined,
+ isBalanceSpinnerVisible: false,
+ isZRXSpinnerVisible: false,
+ isDharmaDialogVisible: DharmaLoanFrame.isAuthTokenPresent(),
+ isTokenPickerOpen: false,
+ isAddingToken: false,
+ };
+ }
+ public componentWillReceiveProps(nextProps: TokenBalancesProps) {
+ if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
+ if (this.state.isBalanceSpinnerVisible) {
+ const receivedAmount = nextProps.userEtherBalance.minus(this.props.userEtherBalance);
+ this.props.dispatcher.showFlashMessage(`Received ${receivedAmount.toString(10)} Kovan Ether`);
+ }
+ this.setState({
+ isBalanceSpinnerVisible: false,
+ });
+ }
+ const nextZrxToken = _.find(_.values(nextProps.tokenByAddress), t => t.symbol === ZRX_TOKEN_SYMBOL);
+ const nextZrxTokenBalance = nextProps.tokenStateByAddress[nextZrxToken.address].balance;
+ if (!_.isUndefined(this.state.currentZrxBalance) && !nextZrxTokenBalance.eq(this.state.currentZrxBalance)) {
+ if (this.state.isZRXSpinnerVisible) {
+ const receivedAmount = nextZrxTokenBalance.minus(this.state.currentZrxBalance);
+ const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, constants.DECIMAL_PLACES_ZRX);
+ this.props.dispatcher.showFlashMessage(`Received ${receiveAmountInUnits.toString(10)} Kovan ZRX`);
+ }
+ this.setState({
+ isZRXSpinnerVisible: false,
+ currentZrxBalance: undefined,
+ });
+ }
+ }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ public render() {
+ const errorDialogActions = [
+ <FlatButton
+ key="errorOkBtn"
+ label="Ok"
+ primary={true}
+ onTouchTap={this._onErrorDialogToggle.bind(this, false)}
+ />,
+ ];
+ const dharmaDialogActions = [
+ <FlatButton
+ key="dharmaCloseBtn"
+ label="Close"
+ primary={true}
+ onTouchTap={this._onDharmaDialogToggle.bind(this, false)}
+ />,
+ ];
+ const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET;
+ const dharmaButtonColumnStyle = {
+ paddingLeft: 3,
+ display: isTestNetwork ? 'table-cell' : 'none',
+ };
+ const stubColumnStyle = {
+ 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 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> \
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.';
- return (
- <div className="lg-px4 md-px4 sm-px1 pb2">
- <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 \
+ return (
+ <div className="lg-px4 md-px4 sm-px1 pb2">
+ <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. \
+ : 'Ether must be converted to Ether Tokens in order to be tradable via 0x. \
You can convert between Ether and Ether Tokens from the "Wrap ETH" tab.'}
- </div>
- <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 }}>
- {isSmallScreen ? 'Faucet' : 'Request from faucet'}
- </TableHeaderColumn>
- )}
- {isTestNetwork && (
- <TableHeaderColumn style={dharmaButtonColumnStyle}>
- {isSmallScreen ? 'Loan' : 'Request Dharma loan'}
- <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} />
- </TableRowColumn>
- <TableRowColumn>
- {this.props.userEtherBalance.toFixed(PRECISION)} ETH
- {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 }}>
- <LifeCycleRaisedButton
- labelReady="Request"
- labelLoading="Sending..."
- labelComplete="Sent!"
- onClickAsyncFn={this._faucetRequestAsync.bind(this, true)}
- />
- </TableRowColumn>
- )}
- {isTestNetwork && (
- <TableRowColumn style={dharmaButtonColumnStyle}>
- <RaisedButton
- label="Request"
- style={{ width: '100%' }}
- onTouchTap={this._onDharmaDialogToggle.bind(this)}
- />
- </TableRowColumn>
- )}
- </TableRow>
- </TableBody>
- </Table>
- <div className="clearfix" style={{ paddingBottom: 1 }}>
- <div className="col col-10">
- <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)}>
- <ContentAdd />
- </FloatingActionButton>
- </div>
- <div className="col col-1 pt3 align-right">
- <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."}
- </div>
- <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>
- <div className="inline-block">Allowance</div>
- <HelpTooltip style={{ paddingLeft: 4 }} explanation={allowanceExplanation} />
- </TableHeaderColumn>
- <TableHeaderColumn>Action</TableHeaderColumn>
- {this.props.screenWidth !== ScreenWidths.Sm && <TableHeaderColumn>Send</TableHeaderColumn>}
- </TableRow>
- </TableHeader>
- <TableBody displayRowCheckbox={false}>{this._renderTokenTableRows()}</TableBody>
- </Table>
- <Dialog
- title="Oh oh"
- titleStyle={{ fontWeight: 100 }}
- actions={errorDialogActions}
- open={!_.isUndefined(this.state.errorType)}
- onRequestClose={this._onErrorDialogToggle.bind(this, false)}
- >
- {this._renderErrorDialogBody()}
- </Dialog>
- <Dialog
- title="Request Dharma Loan"
- titleStyle={{ fontWeight: 100, backgroundColor: colors.white }}
- bodyStyle={{ backgroundColor: colors.dharmaDarkGrey }}
- actionsContainerStyle={{ backgroundColor: colors.white }}
- autoScrollBodyContent={true}
- actions={dharmaDialogActions}
- open={this.state.isDharmaDialogVisible}
- >
- {this._renderDharmaLoanFrame()}
- </Dialog>
- <AssetPicker
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
- isOpen={this.state.isTokenPickerOpen}
- currentTokenAddress={''}
- onTokenChosen={this._onAssetTokenPicked.bind(this)}
- tokenByAddress={this.props.tokenByAddress}
- tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED}
- />
- </div>
- );
- }
- private _renderTokenTableRows() {
- if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) {
- return '';
- }
- const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
- const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
- const actionPaddingX = isSmallScreen ? 2 : 24;
- 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'),
- );
- const tableRows = _.map(
- trackedTokensStartingWithEtherToken,
- this._renderTokenRow.bind(this, tokenColSpan, actionPaddingX),
- );
- return tableRows;
- }
- 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) &&
- 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' }}>
- {this._renderTokenName(token)}
- </a>
- )}
- </TableRowColumn>
- <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>
- )}
- </TableRowColumn>
- <TableRowColumn>
- <AllowanceToggle
- blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
- token={token}
- tokenState={tokenState}
- onErrorOccurred={this._onErrorOccurred.bind(this)}
- userAddress={this.props.userAddress}
- />
- </TableRowColumn>
- <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}>
- {isMintable && (
- <LifeCycleRaisedButton
- labelReady="Mint"
- 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)}
- />
- )}
- </TableRowColumn>
- {this.props.screenWidth !== ScreenWidths.Sm && (
- <TableRowColumn
- style={{
- paddingLeft: actionPaddingX,
- paddingRight: actionPaddingX,
- }}
- >
- <SendButton
- blockchain={this.props.blockchain}
- dispatcher={this.props.dispatcher}
- token={token}
- tokenState={tokenState}
- onError={this._onSendFailed.bind(this)}
- />
- </TableRowColumn>
- )}
- </TableRow>
- );
- }
- private _onAssetTokenPicked(tokenAddress: string) {
- if (_.isEmpty(tokenAddress)) {
- this.setState({
- isTokenPickerOpen: false,
- });
- return;
- }
- const token = this.props.tokenByAddress[tokenAddress];
- const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
- if (!this.state.isAddingToken && !isDefaultTrackedToken) {
- if (token.isRegistered) {
- // Remove the token from tracked tokens
- const newToken = {
- ...token,
- isTracked: false,
- };
- this.props.dispatcher.updateTokenByAddress([newToken]);
- } else {
- this.props.dispatcher.removeTokenToTokenByAddress(token);
- }
- this.props.dispatcher.removeFromTokenStateByAddress(tokenAddress);
- trackedTokenStorage.removeTrackedToken(this.props.userAddress, this.props.networkId, tokenAddress);
- } else if (isDefaultTrackedToken) {
- this.props.dispatcher.showFlashMessage(`Cannot remove ${token.name} because it's a default token`);
- }
- this.setState({
- isTokenPickerOpen: false,
- });
- }
- private _onSendFailed() {
- this.setState({
- errorType: BalanceErrs.sendFailed,
- });
- }
- private _renderAmount(amount: BigNumber, decimals: number) {
- const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
- return unitAmount.toNumber().toFixed(PRECISION);
- }
- private _renderTokenName(token: Token) {
- const tooltipId = `tooltip-${token.address}`;
- return (
- <div className="flex">
- <TokenIcon token={token} diameter={ICON_DIMENSION} />
- <div data-tip={true} data-for={tooltipId} className="mt2 ml2 sm-hide xs-hide">
- {token.name}
- </div>
- <ReactTooltip id={tooltipId}>{token.address}</ReactTooltip>
- </div>
- );
- }
- private _renderErrorDialogBody() {
- switch (this.state.errorType) {
- 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.
- </div>
- );
+ </div>
+ <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 }}>
+ {isSmallScreen ? 'Faucet' : 'Request from faucet'}
+ </TableHeaderColumn>
+ )}
+ {isTestNetwork && (
+ <TableHeaderColumn style={dharmaButtonColumnStyle}>
+ {isSmallScreen ? 'Loan' : 'Request Dharma loan'}
+ <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} />
+ </TableRowColumn>
+ <TableRowColumn>
+ {this.props.userEtherBalance.toFixed(PRECISION)} ETH
+ {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 }}>
+ <LifeCycleRaisedButton
+ labelReady="Request"
+ labelLoading="Sending..."
+ labelComplete="Sent!"
+ onClickAsyncFn={this._faucetRequestAsync.bind(this, true)}
+ />
+ </TableRowColumn>
+ )}
+ {isTestNetwork && (
+ <TableRowColumn style={dharmaButtonColumnStyle}>
+ <RaisedButton
+ label="Request"
+ style={{ width: '100%' }}
+ onTouchTap={this._onDharmaDialogToggle.bind(this)}
+ />
+ </TableRowColumn>
+ )}
+ </TableRow>
+ </TableBody>
+ </Table>
+ <div className="clearfix" style={{ paddingBottom: 1 }}>
+ <div className="col col-10">
+ <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)}>
+ <ContentAdd />
+ </FloatingActionButton>
+ </div>
+ <div className="col col-1 pt3 align-right">
+ <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."}
+ </div>
+ <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>
+ <div className="inline-block">Allowance</div>
+ <HelpTooltip style={{ paddingLeft: 4 }} explanation={allowanceExplanation} />
+ </TableHeaderColumn>
+ <TableHeaderColumn>Action</TableHeaderColumn>
+ {this.props.screenWidth !== ScreenWidths.Sm && <TableHeaderColumn>Send</TableHeaderColumn>}
+ </TableRow>
+ </TableHeader>
+ <TableBody displayRowCheckbox={false}>{this._renderTokenTableRows()}</TableBody>
+ </Table>
+ <Dialog
+ title="Oh oh"
+ titleStyle={{ fontWeight: 100 }}
+ actions={errorDialogActions}
+ open={!_.isUndefined(this.state.errorType)}
+ onRequestClose={this._onErrorDialogToggle.bind(this, false)}
+ >
+ {this._renderErrorDialogBody()}
+ </Dialog>
+ <Dialog
+ title="Request Dharma Loan"
+ titleStyle={{ fontWeight: 100, backgroundColor: colors.white }}
+ bodyStyle={{ backgroundColor: colors.dharmaDarkGrey }}
+ actionsContainerStyle={{ backgroundColor: colors.white }}
+ autoScrollBodyContent={true}
+ actions={dharmaDialogActions}
+ open={this.state.isDharmaDialogVisible}
+ >
+ {this._renderDharmaLoanFrame()}
+ </Dialog>
+ <AssetPicker
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ isOpen={this.state.isTokenPickerOpen}
+ currentTokenAddress={''}
+ onTokenChosen={this._onAssetTokenPicked.bind(this)}
+ tokenByAddress={this.props.tokenByAddress}
+ tokenVisibility={this.state.isAddingToken ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED}
+ />
+ </div>
+ );
+ }
+ private _renderTokenTableRows() {
+ if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) {
+ return '';
+ }
+ const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
+ const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
+ const actionPaddingX = isSmallScreen ? 2 : 24;
+ 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'),
+ );
+ const tableRows = _.map(
+ trackedTokensStartingWithEtherToken,
+ this._renderTokenRow.bind(this, tokenColSpan, actionPaddingX),
+ );
+ return tableRows;
+ }
+ 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) &&
+ 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' }}>
+ {this._renderTokenName(token)}
+ </a>
+ )}
+ </TableRowColumn>
+ <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>
+ )}
+ </TableRowColumn>
+ <TableRowColumn>
+ <AllowanceToggle
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ token={token}
+ tokenState={tokenState}
+ onErrorOccurred={this._onErrorOccurred.bind(this)}
+ userAddress={this.props.userAddress}
+ />
+ </TableRowColumn>
+ <TableRowColumn style={{ paddingLeft: actionPaddingX, paddingRight: actionPaddingX }}>
+ {isMintable && (
+ <LifeCycleRaisedButton
+ labelReady="Mint"
+ 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)}
+ />
+ )}
+ </TableRowColumn>
+ {this.props.screenWidth !== ScreenWidths.Sm && (
+ <TableRowColumn
+ style={{
+ paddingLeft: actionPaddingX,
+ paddingRight: actionPaddingX,
+ }}
+ >
+ <SendButton
+ blockchain={this.props.blockchain}
+ dispatcher={this.props.dispatcher}
+ token={token}
+ tokenState={tokenState}
+ onError={this._onSendFailed.bind(this)}
+ />
+ </TableRowColumn>
+ )}
+ </TableRow>
+ );
+ }
+ private _onAssetTokenPicked(tokenAddress: string) {
+ if (_.isEmpty(tokenAddress)) {
+ this.setState({
+ isTokenPickerOpen: false,
+ });
+ return;
+ }
+ const token = this.props.tokenByAddress[tokenAddress];
+ const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
+ if (!this.state.isAddingToken && !isDefaultTrackedToken) {
+ if (token.isRegistered) {
+ // Remove the token from tracked tokens
+ const newToken = {
+ ...token,
+ isTracked: false,
+ };
+ this.props.dispatcher.updateTokenByAddress([newToken]);
+ } else {
+ this.props.dispatcher.removeTokenToTokenByAddress(token);
+ }
+ this.props.dispatcher.removeFromTokenStateByAddress(tokenAddress);
+ trackedTokenStorage.removeTrackedToken(this.props.userAddress, this.props.networkId, tokenAddress);
+ } else if (isDefaultTrackedToken) {
+ this.props.dispatcher.showFlashMessage(`Cannot remove ${token.name} because it's a default token`);
+ }
+ this.setState({
+ isTokenPickerOpen: false,
+ });
+ }
+ private _onSendFailed() {
+ this.setState({
+ errorType: BalanceErrs.sendFailed,
+ });
+ }
+ private _renderAmount(amount: BigNumber, decimals: number) {
+ const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+ return unitAmount.toNumber().toFixed(PRECISION);
+ }
+ private _renderTokenName(token: Token) {
+ const tooltipId = `tooltip-${token.address}`;
+ return (
+ <div className="flex">
+ <TokenIcon token={token} diameter={ICON_DIMENSION} />
+ <div data-tip={true} data-for={tooltipId} className="mt2 ml2 sm-hide xs-hide">
+ {token.name}
+ </div>
+ <ReactTooltip id={tooltipId}>{token.address}</ReactTooltip>
+ </div>
+ );
+ }
+ private _renderErrorDialogBody() {
+ switch (this.state.errorType) {
+ 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.
+ </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.
- </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.
+ </div>
+ );
- case BalanceErrs.faucetQueueIsFull:
- return <div>Our test Ether faucet queue is full. Please try requesting test Ether again later.</div>;
+ case BalanceErrs.faucetQueueIsFull:
+ 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>;
+ case BalanceErrs.mintingFailed:
+ 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.
- </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.
+ </div>
+ );
- case undefined:
- return null; // No error to show
+ case undefined:
+ return null; // No error to show
- default:
- throw utils.spawnSwitchErr('errorType', this.state.errorType);
- }
- }
- 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>
- );
- } else {
- return (
- <DharmaLoanFrame
- partner="0x"
- env={utils.getCurrentEnvironment()}
- screenWidth={this.props.screenWidth}
- />
- );
- }
- }
- private _onErrorOccurred(errorType: BalanceErrs) {
- this.setState({
- errorType,
- });
- }
- private async _onMintTestTokensAsync(token: Token): Promise<boolean> {
- try {
- await this.props.blockchain.mintTestTokensAsync(token);
- const amount = ZeroEx.toUnitAmount(constants.MINT_AMOUNT, token.decimals);
- this.props.dispatcher.showFlashMessage(`Successfully minted ${amount.toString(10)} ${token.symbol}`);
- return true;
- } catch (err) {
- const errMsg = `${err}`;
- if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return false;
- }
- if (_.includes(errMsg, 'User denied transaction')) {
- return false;
- }
- utils.consoleLog(`Unexpected error encountered: ${err}`);
- utils.consoleLog(err.stack);
- this.setState({
- errorType: BalanceErrs.mintingFailed,
- });
- await errorReporter.reportAsync(err);
- return false;
- }
- }
- private async _faucetRequestAsync(isEtherRequest: boolean): Promise<boolean> {
- if (this.props.userAddress === '') {
- this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
- return false;
- }
+ default:
+ throw utils.spawnSwitchErr('errorType', this.state.errorType);
+ }
+ }
+ 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>
+ );
+ } else {
+ return (
+ <DharmaLoanFrame
+ partner="0x"
+ env={utils.getCurrentEnvironment()}
+ screenWidth={this.props.screenWidth}
+ />
+ );
+ }
+ }
+ private _onErrorOccurred(errorType: BalanceErrs) {
+ this.setState({
+ errorType,
+ });
+ }
+ private async _onMintTestTokensAsync(token: Token): Promise<boolean> {
+ try {
+ await this.props.blockchain.mintTestTokensAsync(token);
+ const amount = ZeroEx.toUnitAmount(constants.MINT_AMOUNT, token.decimals);
+ this.props.dispatcher.showFlashMessage(`Successfully minted ${amount.toString(10)} ${token.symbol}`);
+ return true;
+ } catch (err) {
+ const errMsg = `${err}`;
+ if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return false;
+ }
+ if (_.includes(errMsg, 'User denied transaction')) {
+ return false;
+ }
+ utils.consoleLog(`Unexpected error encountered: ${err}`);
+ utils.consoleLog(err.stack);
+ this.setState({
+ errorType: BalanceErrs.mintingFailed,
+ });
+ await errorReporter.reportAsync(err);
+ return false;
+ }
+ }
+ private async _faucetRequestAsync(isEtherRequest: boolean): Promise<boolean> {
+ if (this.props.userAddress === '') {
+ this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+ return false;
+ }
- // If on another network other then the testnet our faucet serves test ether
- // from, we must show user an error message
- if (this.props.blockchain.networkId !== constants.NETWORK_ID_TESTNET) {
- this.setState({
- errorType: BalanceErrs.incorrectNetworkForFaucet,
- });
- return false;
- }
+ // If on another network other then the testnet our faucet serves test ether
+ // from, we must show user an error message
+ if (this.props.blockchain.networkId !== constants.NETWORK_ID_TESTNET) {
+ this.setState({
+ errorType: BalanceErrs.incorrectNetworkForFaucet,
+ });
+ return false;
+ }
- await utils.sleepAsync(ARTIFICIAL_FAUCET_REQUEST_DELAY);
+ await utils.sleepAsync(ARTIFICIAL_FAUCET_REQUEST_DELAY);
- const segment = isEtherRequest ? 'ether' : 'zrx';
- const response = await fetch(`${constants.URL_ETHER_FAUCET}/${segment}/${this.props.userAddress}`);
- 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;
- this.setState({
- errorType,
- });
- await errorReporter.reportAsync(new Error(`Faucet returned non-200: ${JSON.stringify(response)}`));
- return false;
- }
+ const segment = isEtherRequest ? 'ether' : 'zrx';
+ const response = await fetch(`${constants.URL_ETHER_FAUCET}/${segment}/${this.props.userAddress}`);
+ 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;
+ this.setState({
+ errorType,
+ });
+ await errorReporter.reportAsync(new Error(`Faucet returned non-200: ${JSON.stringify(response)}`));
+ return false;
+ }
- if (isEtherRequest) {
- this.setState({
- isBalanceSpinnerVisible: true,
- });
- } else {
- const tokens = _.values(this.props.tokenByAddress);
- const zrxToken = _.find(tokens, t => t.symbol === ZRX_TOKEN_SYMBOL);
- const zrxTokenState = this.props.tokenStateByAddress[zrxToken.address];
- this.setState({
- isZRXSpinnerVisible: true,
- currentZrxBalance: zrxTokenState.balance,
- });
- // tslint:disable-next-line:no-floating-promises
- this.props.blockchain.pollTokenBalanceAsync(zrxToken);
- }
- return true;
- }
- private _onErrorDialogToggle(isOpen: boolean) {
- this.setState({
- errorType: undefined,
- });
- }
- private _onDharmaDialogToggle() {
- this.setState({
- isDharmaDialogVisible: !this.state.isDharmaDialogVisible,
- });
- }
- private _onAddTokenClicked() {
- this.setState({
- isTokenPickerOpen: true,
- isAddingToken: true,
- });
- }
- private _onRemoveTokenClicked() {
- this.setState({
- isTokenPickerOpen: true,
- isAddingToken: false,
- });
- }
+ if (isEtherRequest) {
+ this.setState({
+ isBalanceSpinnerVisible: true,
+ });
+ } else {
+ const tokens = _.values(this.props.tokenByAddress);
+ const zrxToken = _.find(tokens, t => t.symbol === ZRX_TOKEN_SYMBOL);
+ const zrxTokenState = this.props.tokenStateByAddress[zrxToken.address];
+ this.setState({
+ isZRXSpinnerVisible: true,
+ currentZrxBalance: zrxTokenState.balance,
+ });
+ // tslint:disable-next-line:no-floating-promises
+ this.props.blockchain.pollTokenBalanceAsync(zrxToken);
+ }
+ return true;
+ }
+ private _onErrorDialogToggle(isOpen: boolean) {
+ this.setState({
+ errorType: undefined,
+ });
+ }
+ private _onDharmaDialogToggle() {
+ this.setState({
+ isDharmaDialogVisible: !this.state.isDharmaDialogVisible,
+ });
+ }
+ private _onAddTokenClicked() {
+ this.setState({
+ isTokenPickerOpen: true,
+ isAddingToken: true,
+ });
+ }
+ private _onRemoveTokenClicked() {
+ this.setState({
+ isTokenPickerOpen: true,
+ isAddingToken: false,
+ });
+ }
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 11d3e7cc2..1f111cb07 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -15,333 +15,333 @@ import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
interface TopBarProps {
- userAddress?: string;
- blockchainIsLoaded: boolean;
- location: Location;
- docsVersion?: string;
- availableDocVersions?: string[];
- menu?: DocsMenu;
- menuSubsectionsBySection?: MenuSubsectionsBySection;
- shouldFullWidth?: boolean;
- docsInfo?: DocsInfo;
- style?: React.CSSProperties;
- isNightVersion?: boolean;
+ userAddress?: string;
+ blockchainIsLoaded: boolean;
+ location: Location;
+ docsVersion?: string;
+ availableDocVersions?: string[];
+ menu?: DocsMenu;
+ menuSubsectionsBySection?: MenuSubsectionsBySection;
+ shouldFullWidth?: boolean;
+ docsInfo?: DocsInfo;
+ style?: React.CSSProperties;
+ isNightVersion?: boolean;
}
interface TopBarState {
- isDrawerOpen: boolean;
+ isDrawerOpen: boolean;
}
const styles: Styles = {
- address: {
- marginRight: 12,
- overflow: 'hidden',
- paddingTop: 4,
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap',
- width: 70,
- },
- topBar: {
- backgroundcolor: colors.white,
- height: 59,
- width: '100%',
- position: 'relative',
- top: 0,
- zIndex: 1100,
- paddingBottom: 1,
- },
- bottomBar: {
- boxShadow: 'rgba(0, 0, 0, 0.187647) 0px 1px 3px',
- },
- menuItem: {
- fontSize: 14,
- color: colors.darkestGrey,
- paddingTop: 6,
- paddingBottom: 6,
- marginTop: 17,
- cursor: 'pointer',
- fontWeight: 400,
- },
+ address: {
+ marginRight: 12,
+ overflow: 'hidden',
+ paddingTop: 4,
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ width: 70,
+ },
+ topBar: {
+ backgroundcolor: colors.white,
+ height: 59,
+ width: '100%',
+ position: 'relative',
+ top: 0,
+ zIndex: 1100,
+ paddingBottom: 1,
+ },
+ bottomBar: {
+ boxShadow: 'rgba(0, 0, 0, 0.187647) 0px 1px 3px',
+ },
+ menuItem: {
+ fontSize: 14,
+ color: colors.darkestGrey,
+ paddingTop: 6,
+ paddingBottom: 6,
+ marginTop: 17,
+ cursor: 'pointer',
+ fontWeight: 400,
+ },
};
export class TopBar extends React.Component<TopBarProps, TopBarState> {
- public static defaultProps: Partial<TopBarProps> = {
- shouldFullWidth: false,
- style: {},
- isNightVersion: false,
- };
- constructor(props: TopBarProps) {
- super(props);
- this.state = {
- isDrawerOpen: false,
- };
- }
- public render() {
- const isNightVersion = this.props.isNightVersion;
- 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>,
- <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>,
- <a
- key="subMenuItem-standard-relayer-api"
- target="_blank"
- className="text-decoration-none"
- href={constants.URL_STANDARD_RELAYER_API_GITHUB}
- >
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Standard Relayer API" />
- </a>,
- <a
- key="subMenuItem-github"
- target="_blank"
- className="text-decoration-none"
- href={constants.URL_GITHUB_ORG}
- >
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
- </a>,
- <a
- key="subMenuItem-whitePaper"
- target="_blank"
- className="text-decoration-none"
- href={`${WebsitePaths.Whitepaper}`}
- >
- <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Whitepaper" />
- </a>,
- ];
- const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
- const fullWidthClasses = isFullWidthPage ? 'pr4' : '';
- const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
- const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
- const menuIconStyle = {
- fontSize: 25,
- color: isNightVersion ? 'white' : 'black',
- cursor: 'pointer',
- paddingTop: 16,
- };
- return (
- <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 }}>
- <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}>
- <div className="flex justify-between">
- <DropDownMenuItem
- title="Developers"
- subMenuItems={developerSectionMenuItems}
- style={styles.menuItem}
- isNightVersion={isNightVersion}
- />
- <TopBarMenuItem
- title="Wiki"
- path={`${WebsitePaths.Wiki}`}
- style={styles.menuItem}
- isNightVersion={isNightVersion}
- />
- <TopBarMenuItem
- title="About"
- path={`${WebsitePaths.About}`}
- style={styles.menuItem}
- isNightVersion={isNightVersion}
- />
- <TopBarMenuItem
- title="Portal DApp"
- path={`${WebsitePaths.Portal}`}
- isPrimary={true}
- style={styles.menuItem}
- className={`${isFullWidthPage && 'md-hide'}`}
- isNightVersion={isNightVersion}
- />
- </div>
- </div>
- )}
- {this.props.blockchainIsLoaded &&
- !_.isEmpty(this.props.userAddress) && (
- <div className="col col-5 sm-hide xs-hide">{this._renderUser()}</div>
- )}
- <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)} />
- </div>
- </div>
- </div>
- {this._renderDrawer()}
- </div>
- );
- }
- private _renderDrawer() {
- return (
- <Drawer
- open={this.state.isDrawerOpen}
- docked={false}
- openSecondary={true}
- onRequestChange={this._onMenuButtonClick.bind(this)}
- >
- {this._renderPortalMenu()}
- {this._renderDocsMenu()}
- {this._renderWiki()}
- <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() && (
- <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
- <MenuItem className="py2">0x.js Docs</MenuItem>
- </Link>
- )}
- {!this._isViewingConnectDocs() && (
- <Link to={WebsitePaths.Connect} className="text-decoration-none">
- <MenuItem className="py2">0x Connect Docs</MenuItem>
- </Link>
- )}
- {!this._isViewingSmartContractsDocs() && (
- <Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
- <MenuItem className="py2">Smart Contract Docs</MenuItem>
- </Link>
- )}
- {!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}`}>
- <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}>
- <MenuItem className="py2">Blog</MenuItem>
- </a>
- <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
- <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
- FAQ
- </MenuItem>
- </Link>
- </Drawer>
- );
- }
- private _renderDocsMenu(): React.ReactNode {
- if (
- (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) ||
- _.isUndefined(this.props.menu)
- ) {
- return undefined;
- }
+ public static defaultProps: Partial<TopBarProps> = {
+ shouldFullWidth: false,
+ style: {},
+ isNightVersion: false,
+ };
+ constructor(props: TopBarProps) {
+ super(props);
+ this.state = {
+ isDrawerOpen: false,
+ };
+ }
+ public render() {
+ const isNightVersion = this.props.isNightVersion;
+ 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>,
+ <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>,
+ <a
+ key="subMenuItem-standard-relayer-api"
+ target="_blank"
+ className="text-decoration-none"
+ href={constants.URL_STANDARD_RELAYER_API_GITHUB}
+ >
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Standard Relayer API" />
+ </a>,
+ <a
+ key="subMenuItem-github"
+ target="_blank"
+ className="text-decoration-none"
+ href={constants.URL_GITHUB_ORG}
+ >
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
+ </a>,
+ <a
+ key="subMenuItem-whitePaper"
+ target="_blank"
+ className="text-decoration-none"
+ href={`${WebsitePaths.Whitepaper}`}
+ >
+ <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Whitepaper" />
+ </a>,
+ ];
+ const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
+ const fullWidthClasses = isFullWidthPage ? 'pr4' : '';
+ const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
+ const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
+ const menuIconStyle = {
+ fontSize: 25,
+ color: isNightVersion ? 'white' : 'black',
+ cursor: 'pointer',
+ paddingTop: 16,
+ };
+ return (
+ <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 }}>
+ <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}>
+ <div className="flex justify-between">
+ <DropDownMenuItem
+ title="Developers"
+ subMenuItems={developerSectionMenuItems}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ />
+ <TopBarMenuItem
+ title="Wiki"
+ path={`${WebsitePaths.Wiki}`}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ />
+ <TopBarMenuItem
+ title="About"
+ path={`${WebsitePaths.About}`}
+ style={styles.menuItem}
+ isNightVersion={isNightVersion}
+ />
+ <TopBarMenuItem
+ title="Portal DApp"
+ path={`${WebsitePaths.Portal}`}
+ isPrimary={true}
+ style={styles.menuItem}
+ className={`${isFullWidthPage && 'md-hide'}`}
+ isNightVersion={isNightVersion}
+ />
+ </div>
+ </div>
+ )}
+ {this.props.blockchainIsLoaded &&
+ !_.isEmpty(this.props.userAddress) && (
+ <div className="col col-5 sm-hide xs-hide">{this._renderUser()}</div>
+ )}
+ <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)} />
+ </div>
+ </div>
+ </div>
+ {this._renderDrawer()}
+ </div>
+ );
+ }
+ private _renderDrawer() {
+ return (
+ <Drawer
+ open={this.state.isDrawerOpen}
+ docked={false}
+ openSecondary={true}
+ onRequestChange={this._onMenuButtonClick.bind(this)}
+ >
+ {this._renderPortalMenu()}
+ {this._renderDocsMenu()}
+ {this._renderWiki()}
+ <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() && (
+ <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
+ <MenuItem className="py2">0x.js Docs</MenuItem>
+ </Link>
+ )}
+ {!this._isViewingConnectDocs() && (
+ <Link to={WebsitePaths.Connect} className="text-decoration-none">
+ <MenuItem className="py2">0x Connect Docs</MenuItem>
+ </Link>
+ )}
+ {!this._isViewingSmartContractsDocs() && (
+ <Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
+ <MenuItem className="py2">Smart Contract Docs</MenuItem>
+ </Link>
+ )}
+ {!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}`}>
+ <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}>
+ <MenuItem className="py2">Blog</MenuItem>
+ </a>
+ <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
+ <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
+ FAQ
+ </MenuItem>
+ </Link>
+ </Drawer>
+ );
+ }
+ private _renderDocsMenu(): React.ReactNode {
+ if (
+ (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) ||
+ _.isUndefined(this.props.menu)
+ ) {
+ return undefined;
+ }
- const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
- return (
- <div className="lg-hide md-hide">
- <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
- {sectionTitle}
- </div>
- <NestedSidebarMenu
- topLevelMenu={this.props.menu}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- shouldDisplaySectionHeaders={false}
- onMenuItemClick={this._onMenuButtonClick.bind(this)}
- selectedVersion={this.props.docsVersion}
- docPath={this.props.docsInfo.websitePath}
- versions={this.props.availableDocVersions}
- />
- </div>
- );
- }
- private _renderWiki(): React.ReactNode {
- if (!this._isViewingWiki()) {
- return undefined;
- }
+ const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
+ return (
+ <div className="lg-hide md-hide">
+ <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+ {sectionTitle}
+ </div>
+ <NestedSidebarMenu
+ topLevelMenu={this.props.menu}
+ menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+ shouldDisplaySectionHeaders={false}
+ onMenuItemClick={this._onMenuButtonClick.bind(this)}
+ selectedVersion={this.props.docsVersion}
+ docPath={this.props.docsInfo.websitePath}
+ versions={this.props.availableDocVersions}
+ />
+ </div>
+ );
+ }
+ private _renderWiki(): React.ReactNode {
+ if (!this._isViewingWiki()) {
+ return undefined;
+ }
- return (
- <div className="lg-hide md-hide">
- <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
- 0x Protocol Wiki
- </div>
- <NestedSidebarMenu
- topLevelMenu={this.props.menuSubsectionsBySection}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- shouldDisplaySectionHeaders={false}
- onMenuItemClick={this._onMenuButtonClick.bind(this)}
- />
- </div>
- );
- }
- private _renderPortalMenu(): React.ReactNode {
- if (!this._isViewingPortal()) {
- return undefined;
- }
+ return (
+ <div className="lg-hide md-hide">
+ <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+ 0x Protocol Wiki
+ </div>
+ <NestedSidebarMenu
+ topLevelMenu={this.props.menuSubsectionsBySection}
+ menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+ shouldDisplaySectionHeaders={false}
+ onMenuItemClick={this._onMenuButtonClick.bind(this)}
+ />
+ </div>
+ );
+ }
+ private _renderPortalMenu(): React.ReactNode {
+ if (!this._isViewingPortal()) {
+ return undefined;
+ }
- 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>
- );
- }
- private _renderUser() {
- 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">
- {!_.isEmpty(userAddress) ? userAddress : ''}
- </div>
- <ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip>
- <div>
- <Identicon address={userAddress} diameter={identiconDiameter} />
- </div>
- </div>
- );
- }
- private _onMenuButtonClick() {
- this.setState({
- isDrawerOpen: !this.state.isDrawerOpen,
- });
- }
- private _isViewingPortal() {
- return _.includes(this.props.location.pathname, WebsitePaths.Portal);
- }
- private _isViewingFAQ() {
- return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
- }
- private _isViewing0xjsDocs() {
- return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs);
- }
- private _isViewingConnectDocs() {
- return _.includes(this.props.location.pathname, WebsitePaths.Connect);
- }
- private _isViewingSmartContractsDocs() {
- return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts);
- }
- private _isViewingWiki() {
- return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
- }
- private _shouldDisplayBottomBar() {
- return (
- this._isViewingWiki() ||
- this._isViewing0xjsDocs() ||
- this._isViewingFAQ() ||
- this._isViewingSmartContractsDocs() ||
- this._isViewingConnectDocs()
- );
- }
+ 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>
+ );
+ }
+ private _renderUser() {
+ 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">
+ {!_.isEmpty(userAddress) ? userAddress : ''}
+ </div>
+ <ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip>
+ <div>
+ <Identicon address={userAddress} diameter={identiconDiameter} />
+ </div>
+ </div>
+ );
+ }
+ private _onMenuButtonClick() {
+ this.setState({
+ isDrawerOpen: !this.state.isDrawerOpen,
+ });
+ }
+ private _isViewingPortal() {
+ return _.includes(this.props.location.pathname, WebsitePaths.Portal);
+ }
+ private _isViewingFAQ() {
+ return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
+ }
+ private _isViewing0xjsDocs() {
+ return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs);
+ }
+ private _isViewingConnectDocs() {
+ return _.includes(this.props.location.pathname, WebsitePaths.Connect);
+ }
+ private _isViewingSmartContractsDocs() {
+ return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts);
+ }
+ private _isViewingWiki() {
+ return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
+ }
+ private _shouldDisplayBottomBar() {
+ 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 96ee86142..0138740ba 100644
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -4,49 +4,49 @@ import { Link } from 'react-router-dom';
import { colors } from 'ts/utils/colors';
const DEFAULT_STYLE = {
- color: colors.darkestGrey,
+ color: colors.darkestGrey,
};
interface TopBarMenuItemProps {
- title: string;
- path?: string;
- isPrimary?: boolean;
- style?: React.CSSProperties;
- className?: string;
- isNightVersion?: boolean;
+ title: string;
+ path?: string;
+ isPrimary?: boolean;
+ style?: React.CSSProperties;
+ className?: string;
+ isNightVersion?: boolean;
}
interface TopBarMenuItemState {}
export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarMenuItemState> {
- public static defaultProps: Partial<TopBarMenuItemProps> = {
- isPrimary: false,
- style: DEFAULT_STYLE,
- className: '',
- 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 menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
- const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor;
- return (
- <div
- className={`center ${this.props.className}`}
- style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
- >
- <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
- {this.props.title}
- </Link>
- </div>
- );
- }
+ public static defaultProps: Partial<TopBarMenuItemProps> = {
+ isPrimary: false,
+ style: DEFAULT_STYLE,
+ className: '',
+ 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 menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
+ const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor;
+ return (
+ <div
+ className={`center ${this.props.className}`}
+ style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
+ >
+ <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 76971aefa..1887bd11c 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -6,56 +6,56 @@ import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface TrackTokenConfirmationProps {
- tokens: Token[];
- tokenByAddress: TokenByAddress;
- networkId: number;
- isAddingTokenToTracked: boolean;
+ tokens: Token[];
+ tokenByAddress: TokenByAddress;
+ networkId: number;
+ isAddingTokenToTracked: boolean;
}
interface 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 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>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}`}
- className={`col col-${isMultipleTokens ? '6' : '12'} px2`}
- >
- <Party
- label={token.name}
- address={token.address}
- networkId={this.props.networkId}
- alternativeImage={token.iconUrl}
- isInTokenRegistry={token.isRegistered}
- hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, token)}
- />
- </div>
- ))}
- </div>
- <div>
- 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?
- </div>
- </div>
- )}
- </div>
- );
- }
+ 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 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>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}`}
+ className={`col col-${isMultipleTokens ? '6' : '12'} px2`}
+ >
+ <Party
+ label={token.name}
+ address={token.address}
+ networkId={this.props.networkId}
+ alternativeImage={token.iconUrl}
+ isInTokenRegistry={token.isRegistered}
+ hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, token)}
+ />
+ </div>
+ ))}
+ </div>
+ <div>
+ 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?
+ </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 635358627..3963135f7 100644
--- a/packages/website/ts/components/trade_history/trade_history.tsx
+++ b/packages/website/ts/components/trade_history/trade_history.tsx
@@ -10,106 +10,106 @@ import { utils } from 'ts/utils/utils';
const FILL_POLLING_INTERVAL = 1000;
interface TradeHistoryProps {
- tokenByAddress: TokenByAddress;
- userAddress: string;
- networkId: number;
+ tokenByAddress: TokenByAddress;
+ userAddress: string;
+ networkId: number;
}
interface TradeHistoryState {
- sortedFills: Fill[];
+ sortedFills: Fill[];
}
export class TradeHistory extends React.Component<TradeHistoryProps, TradeHistoryState> {
- private _fillPollingIntervalId: number;
- public constructor(props: TradeHistoryProps) {
- super(props);
- const sortedFills = this._getSortedFills();
- this.state = {
- sortedFills,
- };
- }
- public componentWillMount() {
- this._startPollingForFills();
- }
- public componentWillUnmount() {
- this._stopPollingForFills();
- }
- public componentDidMount() {
- window.scrollTo(0, 0);
- }
- public render() {
- return (
- <div className="lg-px4 md-px4 sm-px2">
- <h3>Trade history</h3>
- <Divider />
- <div className="pt2" style={{ height: 608, overflow: 'scroll' }}>
- {this._renderTrades()}
- </div>
- </div>
- );
- }
- private _renderTrades() {
- const numNonCustomFills = this._numFillsWithoutCustomERC20Tokens();
- if (numNonCustomFills === 0) {
- return this._renderEmptyNotice();
- }
+ private _fillPollingIntervalId: number;
+ public constructor(props: TradeHistoryProps) {
+ super(props);
+ const sortedFills = this._getSortedFills();
+ this.state = {
+ sortedFills,
+ };
+ }
+ public componentWillMount() {
+ this._startPollingForFills();
+ }
+ public componentWillUnmount() {
+ this._stopPollingForFills();
+ }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ public render() {
+ return (
+ <div className="lg-px4 md-px4 sm-px2">
+ <h3>Trade history</h3>
+ <Divider />
+ <div className="pt2" style={{ height: 608, overflow: 'scroll' }}>
+ {this._renderTrades()}
+ </div>
+ </div>
+ );
+ }
+ private _renderTrades() {
+ const numNonCustomFills = this._numFillsWithoutCustomERC20Tokens();
+ if (numNonCustomFills === 0) {
+ return this._renderEmptyNotice();
+ }
- return _.map(this.state.sortedFills, (fill, index) => {
- return (
- <TradeHistoryItem
- key={`${fill.orderHash}-${fill.filledTakerTokenAmount}-${index}`}
- fill={fill}
- tokenByAddress={this.props.tokenByAddress}
- userAddress={this.props.userAddress}
- networkId={this.props.networkId}
- />
- );
- });
- }
- private _renderEmptyNotice() {
- return (
- <Paper className="mt1 p2 mx-auto center" style={{ width: '80%' }}>
- No filled orders yet.
- </Paper>
- );
- }
- private _numFillsWithoutCustomERC20Tokens() {
- let numNonCustomFills = 0;
- const tokens = _.values(this.props.tokenByAddress);
- _.each(this.state.sortedFills, fill => {
- const takerToken = _.find(tokens, token => {
- return token.address === fill.takerToken;
- });
- const makerToken = _.find(tokens, token => {
- return token.address === fill.makerToken;
- });
- // For now we don't show history items for orders using custom ERC20
- // tokens the client does not know how to display.
- // TODO: Try to retrieve the name/symbol of an unknown token in order to display it
- // Be sure to remove similar logic in trade_history_item.tsx
- if (!_.isUndefined(takerToken) && !_.isUndefined(makerToken)) {
- numNonCustomFills += 1;
- }
- });
- return numNonCustomFills;
- }
- private _startPollingForFills() {
- this._fillPollingIntervalId = window.setInterval(() => {
- const sortedFills = this._getSortedFills();
- if (!utils.deepEqual(sortedFills, this.state.sortedFills)) {
- this.setState({
- sortedFills,
- });
- }
- }, FILL_POLLING_INTERVAL);
- }
- private _stopPollingForFills() {
- clearInterval(this._fillPollingIntervalId);
- }
- private _getSortedFills() {
- const fillsByHash = tradeHistoryStorage.getUserFillsByHash(this.props.userAddress, this.props.networkId);
- const fills = _.values(fillsByHash);
- const sortedFills = _.sortBy(fills, [(fill: Fill) => fill.blockTimestamp * -1]);
- return sortedFills;
- }
+ return _.map(this.state.sortedFills, (fill, index) => {
+ return (
+ <TradeHistoryItem
+ key={`${fill.orderHash}-${fill.filledTakerTokenAmount}-${index}`}
+ fill={fill}
+ tokenByAddress={this.props.tokenByAddress}
+ userAddress={this.props.userAddress}
+ networkId={this.props.networkId}
+ />
+ );
+ });
+ }
+ private _renderEmptyNotice() {
+ return (
+ <Paper className="mt1 p2 mx-auto center" style={{ width: '80%' }}>
+ No filled orders yet.
+ </Paper>
+ );
+ }
+ private _numFillsWithoutCustomERC20Tokens() {
+ let numNonCustomFills = 0;
+ const tokens = _.values(this.props.tokenByAddress);
+ _.each(this.state.sortedFills, fill => {
+ const takerToken = _.find(tokens, token => {
+ return token.address === fill.takerToken;
+ });
+ const makerToken = _.find(tokens, token => {
+ return token.address === fill.makerToken;
+ });
+ // For now we don't show history items for orders using custom ERC20
+ // tokens the client does not know how to display.
+ // TODO: Try to retrieve the name/symbol of an unknown token in order to display it
+ // Be sure to remove similar logic in trade_history_item.tsx
+ if (!_.isUndefined(takerToken) && !_.isUndefined(makerToken)) {
+ numNonCustomFills += 1;
+ }
+ });
+ return numNonCustomFills;
+ }
+ private _startPollingForFills() {
+ this._fillPollingIntervalId = window.setInterval(() => {
+ const sortedFills = this._getSortedFills();
+ if (!utils.deepEqual(sortedFills, this.state.sortedFills)) {
+ this.setState({
+ sortedFills,
+ });
+ }
+ }, FILL_POLLING_INTERVAL);
+ }
+ private _stopPollingForFills() {
+ clearInterval(this._fillPollingIntervalId);
+ }
+ private _getSortedFills() {
+ const fillsByHash = tradeHistoryStorage.getUserFillsByHash(this.props.userAddress, this.props.networkId);
+ const fills = _.values(fillsByHash);
+ const sortedFills = _.sortBy(fills, [(fill: Fill) => fill.blockTimestamp * -1]);
+ return sortedFills;
+ }
}
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 7e42e64e6..118bde3b9 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -14,157 +14,157 @@ const PRECISION = 5;
const IDENTICON_DIAMETER = 40;
interface TradeHistoryItemProps {
- fill: Fill;
- tokenByAddress: TokenByAddress;
- userAddress: string;
- networkId: number;
+ fill: Fill;
+ tokenByAddress: TokenByAddress;
+ userAddress: string;
+ networkId: number;
}
interface TradeHistoryItemState {}
export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, TradeHistoryItemState> {
- public render() {
- const fill = this.props.fill;
- const tokens = _.values(this.props.tokenByAddress);
- const takerToken = _.find(tokens, token => {
- return token.address === fill.takerToken;
- });
- const makerToken = _.find(tokens, token => {
- return token.address === fill.makerToken;
- });
- // For now we don't show history items for orders using custom ERC20
- // tokens the client does not know how to display.
- // TODO: Try to retrieve the name/symbol of an unknown token in order to display it
- // Be sure to remove similar logic in trade_history.tsx
- if (_.isUndefined(takerToken) || _.isUndefined(makerToken)) {
- return null;
- }
+ public render() {
+ const fill = this.props.fill;
+ const tokens = _.values(this.props.tokenByAddress);
+ const takerToken = _.find(tokens, token => {
+ return token.address === fill.takerToken;
+ });
+ const makerToken = _.find(tokens, token => {
+ return token.address === fill.makerToken;
+ });
+ // For now we don't show history items for orders using custom ERC20
+ // tokens the client does not know how to display.
+ // TODO: Try to retrieve the name/symbol of an unknown token in order to display it
+ // Be sure to remove similar logic in trade_history.tsx
+ if (_.isUndefined(takerToken) || _.isUndefined(makerToken)) {
+ return null;
+ }
- const amountColStyle: React.CSSProperties = {
- 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 amountColStyle: React.CSSProperties = {
+ 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 \
lg-right-align md-right-align sm-center';
- return (
- <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-6 md-col-6 lg-pl3 md-pl3"
- style={{ fontSize: 12, fontWeight: 100 }}
- >
- <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" />
- <Party
- label="Taker"
- address={fill.taker}
- identiconDiameter={IDENTICON_DIAMETER}
- networkId={this.props.networkId}
- />
- </div>
- </div>
- <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 }}>
- <EtherScanIcon
- addressOrTxHash={fill.transactionHash}
- networkId={this.props.networkId}
- etherscanLinkSuffixes={EtherscanLinkSuffixes.Tx}
- />
- </div>
- </div>
- </div>
- </Paper>
- );
- }
- private _renderAmounts(makerToken: Token, takerToken: Token) {
- const fill = this.props.fill;
- const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals);
- const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals);
- let exchangeRate = filledTakerTokenAmountInUnits.div(filledMakerTokenAmountInUnits);
- const fillMakerTokenAmount = ZeroEx.toBaseUnitAmount(filledMakerTokenAmountInUnits, makerToken.decimals);
+ return (
+ <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-6 md-col-6 lg-pl3 md-pl3"
+ style={{ fontSize: 12, fontWeight: 100 }}
+ >
+ <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" />
+ <Party
+ label="Taker"
+ address={fill.taker}
+ identiconDiameter={IDENTICON_DIAMETER}
+ networkId={this.props.networkId}
+ />
+ </div>
+ </div>
+ <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 }}>
+ <EtherScanIcon
+ addressOrTxHash={fill.transactionHash}
+ networkId={this.props.networkId}
+ etherscanLinkSuffixes={EtherscanLinkSuffixes.Tx}
+ />
+ </div>
+ </div>
+ </div>
+ </Paper>
+ );
+ }
+ private _renderAmounts(makerToken: Token, takerToken: Token) {
+ const fill = this.props.fill;
+ const filledTakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledTakerTokenAmount, takerToken.decimals);
+ const filledMakerTokenAmountInUnits = ZeroEx.toUnitAmount(fill.filledMakerTokenAmount, takerToken.decimals);
+ let exchangeRate = filledTakerTokenAmountInUnits.div(filledMakerTokenAmountInUnits);
+ const fillMakerTokenAmount = ZeroEx.toBaseUnitAmount(filledMakerTokenAmountInUnits, makerToken.decimals);
- let receiveAmount;
- let receiveToken;
- let givenAmount;
- let givenToken;
- if (this.props.userAddress === fill.maker && this.props.userAddress === fill.taker) {
- receiveAmount = new BigNumber(0);
- givenAmount = new BigNumber(0);
- receiveToken = makerToken;
- givenToken = takerToken;
- } else if (this.props.userAddress === fill.maker) {
- receiveAmount = fill.filledTakerTokenAmount;
- givenAmount = fillMakerTokenAmount;
- receiveToken = takerToken;
- givenToken = makerToken;
- exchangeRate = new BigNumber(1).div(exchangeRate);
- } else if (this.props.userAddress === fill.taker) {
- receiveAmount = fillMakerTokenAmount;
- givenAmount = fill.filledTakerTokenAmount;
- receiveToken = makerToken;
- givenToken = takerToken;
- } else {
- // This condition should never be hit
- throw new Error("Found Fill that wasn't performed by this user");
- }
+ let receiveAmount;
+ let receiveToken;
+ let givenAmount;
+ let givenToken;
+ if (this.props.userAddress === fill.maker && this.props.userAddress === fill.taker) {
+ receiveAmount = new BigNumber(0);
+ givenAmount = new BigNumber(0);
+ receiveToken = makerToken;
+ givenToken = takerToken;
+ } else if (this.props.userAddress === fill.maker) {
+ receiveAmount = fill.filledTakerTokenAmount;
+ givenAmount = fillMakerTokenAmount;
+ receiveToken = takerToken;
+ givenToken = makerToken;
+ exchangeRate = new BigNumber(1).div(exchangeRate);
+ } else if (this.props.userAddress === fill.taker) {
+ receiveAmount = fillMakerTokenAmount;
+ givenAmount = fill.filledTakerTokenAmount;
+ receiveToken = makerToken;
+ givenToken = takerToken;
+ } else {
+ // This condition should never be hit
+ throw new Error("Found Fill that wasn't performed by this user");
+ }
- return (
- <div>
- <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>
- {this._renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)}
- </div>
- <div style={{ color: colors.grey400, fontSize: 14 }}>
- {exchangeRate.toFixed(PRECISION)} {givenToken.symbol}/{receiveToken.symbol}
- </div>
- </div>
- );
- }
- private _renderDate() {
- const blockMoment = moment.unix(this.props.fill.blockTimestamp);
- if (!blockMoment.isValid()) {
- return null;
- }
+ return (
+ <div>
+ <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>
+ {this._renderAmount(givenAmount, givenToken.symbol, givenToken.decimals)}
+ </div>
+ <div style={{ color: colors.grey400, fontSize: 14 }}>
+ {exchangeRate.toFixed(PRECISION)} {givenToken.symbol}/{receiveToken.symbol}
+ </div>
+ </div>
+ );
+ }
+ private _renderDate() {
+ const blockMoment = moment.unix(this.props.fill.blockTimestamp);
+ if (!blockMoment.isValid()) {
+ return null;
+ }
- const dayOfMonth = blockMoment.format('D');
- const monthAbreviation = blockMoment.format('MMM');
- const formattedBlockDate = blockMoment.format('H:mmA - MMMM D, YYYY');
- const dateTooltipId = `${this.props.fill.transactionHash}-date`;
+ const dayOfMonth = blockMoment.format('D');
+ const monthAbreviation = blockMoment.format('MMM');
+ const formattedBlockDate = blockMoment.format('H:mmA - MMMM D, YYYY');
+ 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>
- <ReactTooltip id={dateTooltipId}>{formattedBlockDate}</ReactTooltip>
- </div>
- );
- }
- private _renderAmount(amount: BigNumber, symbol: string, decimals: number) {
- const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
- return (
- <span>
- {unitAmount.toFixed(PRECISION)} {symbol}
- </span>
- );
- }
+ 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>
+ <ReactTooltip id={dateTooltipId}>{formattedBlockDate}</ReactTooltip>
+ </div>
+ );
+ }
+ private _renderAmount(amount: BigNumber, symbol: string, decimals: number) {
+ const unitAmount = ZeroEx.toUnitAmount(amount, decimals);
+ return (
+ <span>
+ {unitAmount.toFixed(PRECISION)} {symbol}
+ </span>
+ );
+ }
}
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 54881b499..91ef8f76e 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -3,23 +3,23 @@ import { AlertTypes } from 'ts/types';
import { colors } from 'ts/utils/colors';
interface AlertProps {
- type: AlertTypes;
- message: string | React.ReactNode;
+ type: AlertTypes;
+ message: string | React.ReactNode;
}
export function Alert(props: AlertProps) {
- const isAlert = props.type === AlertTypes.ERROR;
- const errMsgStyles = {
- background: isAlert ? colors.red200 : colors.lightestGreen,
- color: colors.white,
- marginTop: 10,
- padding: 4,
- paddingLeft: 8,
- };
+ const isAlert = props.type === AlertTypes.ERROR;
+ const errMsgStyles = {
+ background: isAlert ? colors.red200 : colors.lightestGreen,
+ color: colors.white,
+ marginTop: 10,
+ padding: 4,
+ paddingLeft: 8,
+ };
- return (
- <div className="rounded center" style={errMsgStyles}>
- {props.message}
- </div>
- );
+ return (
+ <div className="rounded center" style={errMsgStyles}>
+ {props.message}
+ </div>
+ );
}
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
index 7f7ea006e..1d2d81af6 100644
--- a/packages/website/ts/components/ui/badge.tsx
+++ b/packages/website/ts/components/ui/badge.tsx
@@ -3,55 +3,55 @@ import * as React from 'react';
import { Styles } from 'ts/types';
const styles: Styles = {
- badge: {
- width: 50,
- fontSize: 11,
- height: 10,
- borderRadius: 5,
- marginTop: 25,
- lineHeight: 0.9,
- fontFamily: 'Roboto Mono',
- marginLeft: 3,
- marginRight: 3,
- },
+ badge: {
+ width: 50,
+ fontSize: 11,
+ height: 10,
+ borderRadius: 5,
+ marginTop: 25,
+ lineHeight: 0.9,
+ fontFamily: 'Roboto Mono',
+ marginLeft: 3,
+ marginRight: 3,
+ },
};
interface BadgeProps {
- title: string;
- backgroundColor: string;
+ title: string;
+ backgroundColor: string;
}
interface BadgeState {
- isHovering: boolean;
+ isHovering: boolean;
}
export class Badge extends React.Component<BadgeProps, BadgeState> {
- constructor(props: BadgeProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public render() {
- const badgeStyle = {
- ...styles.badge,
- backgroundColor: this.props.backgroundColor,
- opacity: this.state.isHovering ? 0.7 : 1,
- };
- return (
- <div
- className="p1 center"
- style={badgeStyle}
- onMouseOver={this._setHoverState.bind(this, true)}
- onMouseOut={this._setHoverState.bind(this, false)}
- >
- {this.props.title}
- </div>
- );
- }
- private _setHoverState(isHovering: boolean) {
- this.setState({
- isHovering,
- });
- }
+ constructor(props: BadgeProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public render() {
+ const badgeStyle = {
+ ...styles.badge,
+ backgroundColor: this.props.backgroundColor,
+ opacity: this.state.isHovering ? 0.7 : 1,
+ };
+ return (
+ <div
+ className="p1 center"
+ style={badgeStyle}
+ onMouseOver={this._setHoverState.bind(this, true)}
+ onMouseOut={this._setHoverState.bind(this, false)}
+ >
+ {this.props.title}
+ </div>
+ );
+ }
+ private _setHoverState(isHovering: boolean) {
+ this.setState({
+ isHovering,
+ });
+ }
}
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index df55e0922..72ab77e1f 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -6,74 +6,74 @@ import ReactTooltip = require('react-tooltip');
import { colors } from 'ts/utils/colors';
interface CopyIconProps {
- data: string;
- callToAction?: string;
+ data: string;
+ callToAction?: string;
}
interface CopyIconState {
- isHovering: boolean;
+ isHovering: boolean;
}
export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
- private _copyTooltipTimeoutId: number;
- private _copyable: HTMLInputElement;
- constructor(props: CopyIconProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public componentDidUpdate() {
- // Remove tooltip if hover away
- if (!this.state.isHovering && this._copyTooltipTimeoutId) {
- clearInterval(this._copyTooltipTimeoutId);
- this._hideTooltip();
- }
- }
- 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>}
- </div>
- </CopyToClipboard>
- <ReactTooltip id="copy">Copied!</ReactTooltip>
- </div>
- );
- }
- private _setRefToProperty(el: HTMLInputElement) {
- this._copyable = el;
- }
- private _setHoverState(isHovering: boolean) {
- this.setState({
- isHovering,
- });
- }
- private _onCopy() {
- if (this._copyTooltipTimeoutId) {
- clearInterval(this._copyTooltipTimeoutId);
- }
+ private _copyTooltipTimeoutId: number;
+ private _copyable: HTMLInputElement;
+ constructor(props: CopyIconProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public componentDidUpdate() {
+ // Remove tooltip if hover away
+ if (!this.state.isHovering && this._copyTooltipTimeoutId) {
+ clearInterval(this._copyTooltipTimeoutId);
+ this._hideTooltip();
+ }
+ }
+ 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>}
+ </div>
+ </CopyToClipboard>
+ <ReactTooltip id="copy">Copied!</ReactTooltip>
+ </div>
+ );
+ }
+ private _setRefToProperty(el: HTMLInputElement) {
+ this._copyable = el;
+ }
+ private _setHoverState(isHovering: boolean) {
+ this.setState({
+ isHovering,
+ });
+ }
+ private _onCopy() {
+ if (this._copyTooltipTimeoutId) {
+ clearInterval(this._copyTooltipTimeoutId);
+ }
- const tooltipLifespanMs = 1000;
- this._copyTooltipTimeoutId = window.setTimeout(() => {
- this._hideTooltip();
- }, tooltipLifespanMs);
- }
- private _hideTooltip() {
- ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable));
- }
+ const tooltipLifespanMs = 1000;
+ this._copyTooltipTimeoutId = window.setTimeout(() => {
+ this._hideTooltip();
+ }, tooltipLifespanMs);
+ }
+ private _hideTooltip() {
+ ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable));
+ }
}
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 a578fb4f9..64f88f318 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -6,99 +6,99 @@ import { colors } from 'ts/utils/colors';
const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
const DEFAULT_STYLE = {
- fontSize: 14,
+ fontSize: 14,
};
interface DropDownMenuItemProps {
- title: string;
- subMenuItems: React.ReactNode[];
- style?: React.CSSProperties;
- menuItemStyle?: React.CSSProperties;
- isNightVersion?: boolean;
+ title: string;
+ subMenuItems: React.ReactNode[];
+ style?: React.CSSProperties;
+ menuItemStyle?: React.CSSProperties;
+ isNightVersion?: boolean;
}
interface DropDownMenuItemState {
- isDropDownOpen: boolean;
- anchorEl?: HTMLInputElement;
+ isDropDownOpen: boolean;
+ anchorEl?: HTMLInputElement;
}
export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, DropDownMenuItemState> {
- public static defaultProps: Partial<DropDownMenuItemProps> = {
- style: DEFAULT_STYLE,
- menuItemStyle: DEFAULT_STYLE,
- isNightVersion: false,
- };
- private _isHovering: boolean;
- private _popoverCloseCheckIntervalId: number;
- constructor(props: DropDownMenuItemProps) {
- super(props);
- this.state = {
- isDropDownOpen: false,
- };
- }
- public componentDidMount() {
- this._popoverCloseCheckIntervalId = window.setInterval(() => {
- this._checkIfShouldClosePopover();
- }, CHECK_CLOSE_POPOVER_INTERVAL_MS);
- }
- public componentWillUnmount() {
- window.clearInterval(this._popoverCloseCheckIntervalId);
- }
- public render() {
- const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
- return (
- <div
- 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>
- </div>
- <Popover
- open={this.state.isDropDownOpen}
- anchorEl={this.state.anchorEl}
- 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>
- </Popover>
- </div>
- );
- }
- private _onHover(event: React.FormEvent<HTMLInputElement>) {
- this._isHovering = true;
- this._checkIfShouldOpenPopover(event);
- }
- private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
- if (this.state.isDropDownOpen) {
- return; // noop
- }
+ public static defaultProps: Partial<DropDownMenuItemProps> = {
+ style: DEFAULT_STYLE,
+ menuItemStyle: DEFAULT_STYLE,
+ isNightVersion: false,
+ };
+ private _isHovering: boolean;
+ private _popoverCloseCheckIntervalId: number;
+ constructor(props: DropDownMenuItemProps) {
+ super(props);
+ this.state = {
+ isDropDownOpen: false,
+ };
+ }
+ public componentDidMount() {
+ this._popoverCloseCheckIntervalId = window.setInterval(() => {
+ this._checkIfShouldClosePopover();
+ }, CHECK_CLOSE_POPOVER_INTERVAL_MS);
+ }
+ public componentWillUnmount() {
+ window.clearInterval(this._popoverCloseCheckIntervalId);
+ }
+ public render() {
+ const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
+ return (
+ <div
+ 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>
+ </div>
+ <Popover
+ open={this.state.isDropDownOpen}
+ anchorEl={this.state.anchorEl}
+ 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>
+ </Popover>
+ </div>
+ );
+ }
+ private _onHover(event: React.FormEvent<HTMLInputElement>) {
+ this._isHovering = true;
+ this._checkIfShouldOpenPopover(event);
+ }
+ private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
+ if (this.state.isDropDownOpen) {
+ return; // noop
+ }
- this.setState({
- isDropDownOpen: true,
- anchorEl: event.currentTarget,
- });
- }
- private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
- this._isHovering = false;
- }
- private _checkIfShouldClosePopover() {
- if (!this.state.isDropDownOpen || this._isHovering) {
- return; // noop
- }
- this._closePopover();
- }
- private _closePopover() {
- this.setState({
- isDropDownOpen: false,
- });
- }
+ this.setState({
+ isDropDownOpen: true,
+ anchorEl: event.currentTarget,
+ });
+ }
+ private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
+ this._isHovering = false;
+ }
+ private _checkIfShouldClosePopover() {
+ if (!this.state.isDropDownOpen || this._isHovering) {
+ return; // noop
+ }
+ this._closePopover();
+ }
+ private _closePopover() {
+ this.setState({
+ isDropDownOpen: false,
+ });
+ }
}
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index b75d97e39..ba51135be 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -5,26 +5,26 @@ import { EtherscanLinkSuffixes } from 'ts/types';
import { utils } from 'ts/utils/utils';
interface EthereumAddressProps {
- address: string;
- networkId: number;
+ address: string;
+ networkId: number;
}
export const EthereumAddress = (props: EthereumAddressProps) => {
- const tooltipId = `${props.address}-ethereum-address`;
- const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
- return (
- <div>
- <div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}>
- {truncatedAddress}
- </div>
- <div className="pl1 inline">
- <EtherScanIcon
- addressOrTxHash={props.address}
- networkId={props.networkId}
- etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
- />
- </div>
- <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
- </div>
- );
+ const tooltipId = `${props.address}-ethereum-address`;
+ const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
+ return (
+ <div>
+ <div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}>
+ {truncatedAddress}
+ </div>
+ <div className="pl1 inline">
+ <EtherScanIcon
+ addressOrTxHash={props.address}
+ networkId={props.networkId}
+ etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
+ />
+ </div>
+ <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
+ </div>
+ );
};
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 3b17bd0fa..5b224c3e1 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -6,36 +6,36 @@ import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface EtherScanIconProps {
- addressOrTxHash: string;
- etherscanLinkSuffixes: EtherscanLinkSuffixes;
- networkId: number;
+ addressOrTxHash: string;
+ etherscanLinkSuffixes: EtherscanLinkSuffixes;
+ networkId: number;
}
export const EtherScanIcon = (props: EtherScanIconProps) => {
- const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
- props.addressOrTxHash,
- props.networkId,
- EtherscanLinkSuffixes.Address,
- );
- const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
- return (
- <div className="inline">
- {!_.isUndefined(etherscanLinkIfExists) ? (
- <a href={etherscanLinkIfExists} target="_blank">
- {renderIcon()}
- </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>
- );
+ const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+ props.addressOrTxHash,
+ props.networkId,
+ EtherscanLinkSuffixes.Address,
+ );
+ const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
+ return (
+ <div className="inline">
+ {!_.isUndefined(etherscanLinkIfExists) ? (
+ <a href={etherscanLinkIfExists} target="_blank">
+ {renderIcon()}
+ </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 f3d9410f6..6d321bb46 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -3,32 +3,32 @@ import { InputLabel } from 'ts/components/ui/input_label';
import { Styles } from 'ts/types';
const styles: Styles = {
- hr: {
- borderBottom: '1px solid rgb(224, 224, 224)',
- borderLeft: 'none rgb(224, 224, 224)',
- borderRight: 'none rgb(224, 224, 224)',
- borderTop: 'none rgb(224, 224, 224)',
- bottom: 6,
- boxSizing: 'content-box',
- margin: 0,
- position: 'absolute',
- width: '100%',
- },
+ hr: {
+ borderBottom: '1px solid rgb(224, 224, 224)',
+ borderLeft: 'none rgb(224, 224, 224)',
+ borderRight: 'none rgb(224, 224, 224)',
+ borderTop: 'none rgb(224, 224, 224)',
+ bottom: 6,
+ boxSizing: 'content-box',
+ margin: 0,
+ position: 'absolute',
+ width: '100%',
+ },
};
interface FakeTextFieldProps {
- label?: React.ReactNode | string;
- children?: any;
+ label?: React.ReactNode | string;
+ children?: any;
}
export function FakeTextField(props: FakeTextFieldProps) {
- return (
- <div className="relative">
- {props.label !== '' && <InputLabel text={props.label} />}
- <div className="pb2" style={{ height: 23 }}>
- {props.children}
- </div>
- <hr style={styles.hr} />
- </div>
- );
+ return (
+ <div className="relative">
+ {props.label !== '' && <InputLabel text={props.label} />}
+ <div className="pb2" style={{ height: 23 }}>
+ {props.children}
+ </div>
+ <hr style={styles.hr} />
+ </div>
+ );
}
diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx
index 2cb1fc764..57a66d21f 100644
--- a/packages/website/ts/components/ui/flash_message.tsx
+++ b/packages/website/ts/components/ui/flash_message.tsx
@@ -6,35 +6,35 @@ import { Dispatcher } from 'ts/redux/dispatcher';
const SHOW_DURATION_MS = 4000;
interface FlashMessageProps {
- dispatcher: Dispatcher;
- flashMessage?: string | React.ReactNode;
- showDurationMs?: number;
- bodyStyle?: React.CSSProperties;
+ dispatcher: Dispatcher;
+ flashMessage?: string | React.ReactNode;
+ showDurationMs?: number;
+ bodyStyle?: React.CSSProperties;
}
interface FlashMessageState {}
export class FlashMessage extends React.Component<FlashMessageProps, FlashMessageState> {
- public static defaultProps: Partial<FlashMessageProps> = {
- showDurationMs: SHOW_DURATION_MS,
- bodyStyle: {},
- };
- public render() {
- if (!_.isUndefined(this.props.flashMessage)) {
- return (
- <Snackbar
- open={true}
- message={this.props.flashMessage}
- autoHideDuration={this.props.showDurationMs}
- onRequestClose={this._onClose.bind(this)}
- bodyStyle={this.props.bodyStyle}
- />
- );
- } else {
- return null;
- }
- }
- private _onClose() {
- this.props.dispatcher.hideFlashMessage();
- }
+ public static defaultProps: Partial<FlashMessageProps> = {
+ showDurationMs: SHOW_DURATION_MS,
+ bodyStyle: {},
+ };
+ public render() {
+ if (!_.isUndefined(this.props.flashMessage)) {
+ return (
+ <Snackbar
+ open={true}
+ message={this.props.flashMessage}
+ autoHideDuration={this.props.showDurationMs}
+ onRequestClose={this._onClose.bind(this)}
+ bodyStyle={this.props.bodyStyle}
+ />
+ );
+ } else {
+ return null;
+ }
+ }
+ private _onClose() {
+ this.props.dispatcher.hideFlashMessage();
+ }
}
diff --git a/packages/website/ts/components/ui/help_tooltip.tsx b/packages/website/ts/components/ui/help_tooltip.tsx
index d827eebb9..c946a70cb 100644
--- a/packages/website/ts/components/ui/help_tooltip.tsx
+++ b/packages/website/ts/components/ui/help_tooltip.tsx
@@ -2,21 +2,21 @@ import * as React from 'react';
import ReactTooltip = require('react-tooltip');
interface HelpTooltipProps {
- style?: React.CSSProperties;
- explanation: React.ReactNode;
+ style?: React.CSSProperties;
+ explanation: React.ReactNode;
}
export const HelpTooltip = (props: HelpTooltipProps) => {
- return (
- <div
- style={{ ...props.style }}
- className="inline-block"
- data-tip={props.explanation}
- data-for="helpTooltip"
- data-multiline={true}
- >
- <i style={{ fontSize: 16 }} className="zmdi zmdi-help" />
- <ReactTooltip id="helpTooltip" />
- </div>
- );
+ return (
+ <div
+ style={{ ...props.style }}
+ className="inline-block"
+ data-tip={props.explanation}
+ data-for="helpTooltip"
+ data-multiline={true}
+ >
+ <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 bad6c2a78..bad7a657d 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -4,45 +4,45 @@ import * as React from 'react';
import { constants } from 'ts/utils/constants';
interface IdenticonProps {
- address: string;
- diameter: number;
- style?: React.CSSProperties;
+ address: string;
+ diameter: number;
+ style?: React.CSSProperties;
}
interface IdenticonState {}
export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
- public static defaultProps: Partial<IdenticonProps> = {
- style: {},
- };
- public render() {
- let address = this.props.address;
- if (_.isEmpty(address)) {
- address = constants.NULL_ADDRESS;
- }
- const diameter = this.props.diameter;
- const icon = blockies({
- seed: address.toLowerCase(),
- });
- return (
- <div
- className="circle mx-auto relative transitionFix"
- style={{
- width: diameter,
- height: diameter,
- overflow: 'hidden',
- ...this.props.style,
- }}
- >
- <img
- src={icon.toDataURL()}
- style={{
- width: diameter,
- height: diameter,
- imageRendering: 'pixelated',
- }}
- />
- </div>
- );
- }
+ public static defaultProps: Partial<IdenticonProps> = {
+ style: {},
+ };
+ public render() {
+ let address = this.props.address;
+ if (_.isEmpty(address)) {
+ address = constants.NULL_ADDRESS;
+ }
+ const diameter = this.props.diameter;
+ const icon = blockies({
+ seed: address.toLowerCase(),
+ });
+ return (
+ <div
+ className="circle mx-auto relative transitionFix"
+ style={{
+ width: diameter,
+ height: diameter,
+ overflow: 'hidden',
+ ...this.props.style,
+ }}
+ >
+ <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 e2009ad20..1cbda6692 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
import { colors } from 'ts/utils/colors';
export interface InputLabelProps {
- text: string | Element | React.ReactNode;
+ text: string | Element | React.ReactNode;
}
const styles = {
- label: {
- color: colors.grey,
- fontSize: 12,
- pointerEvents: 'none',
- textAlign: 'left',
- transform: 'scale(0.75) translate(0px, -28px)',
- transformOrigin: 'left top 0px',
- transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
- userSelect: 'none',
- width: 240,
- zIndex: 1,
- },
+ label: {
+ color: colors.grey,
+ fontSize: 12,
+ pointerEvents: 'none',
+ textAlign: 'left',
+ transform: 'scale(0.75) translate(0px, -28px)',
+ transformOrigin: 'left top 0px',
+ transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
+ userSelect: 'none',
+ width: 240,
+ zIndex: 1,
+ },
};
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 8ff856a75..fd23912f1 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -7,97 +7,97 @@ 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;
- onClickAsyncFn: () => Promise<boolean>;
- backgroundColor?: string;
- labelColor?: string;
+ isHidden?: boolean;
+ isDisabled?: boolean;
+ isPrimary?: boolean;
+ labelReady: React.ReactNode | string;
+ labelLoading: React.ReactNode | string;
+ labelComplete: React.ReactNode | string;
+ onClickAsyncFn: () => Promise<boolean>;
+ backgroundColor?: string;
+ labelColor?: string;
}
interface LifeCycleRaisedButtonState {
- buttonState: ButtonState;
+ buttonState: ButtonState;
}
export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
- public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
- isDisabled: false,
- backgroundColor: colors.white,
- labelColor: colors.darkGrey,
- };
- private _buttonTimeoutId: number;
- private _didUnmount: boolean;
- constructor(props: LifeCycleRaisedButtonProps) {
- super(props);
- this.state = {
- buttonState: ButtonState.READY,
- };
- }
- public componentWillUnmount() {
- clearTimeout(this._buttonTimeoutId);
- this._didUnmount = true;
- }
- public render() {
- if (this.props.isHidden) {
- return <span />;
- }
+ public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
+ isDisabled: false,
+ backgroundColor: colors.white,
+ labelColor: colors.darkGrey,
+ };
+ private _buttonTimeoutId: number;
+ private _didUnmount: boolean;
+ constructor(props: LifeCycleRaisedButtonProps) {
+ super(props);
+ this.state = {
+ buttonState: ButtonState.READY,
+ };
+ }
+ public componentWillUnmount() {
+ clearTimeout(this._buttonTimeoutId);
+ this._didUnmount = true;
+ }
+ public render() {
+ if (this.props.isHidden) {
+ return <span />;
+ }
- let label;
- switch (this.state.buttonState) {
- case ButtonState.READY:
- label = this.props.labelReady;
- break;
- case ButtonState.LOADING:
- label = this.props.labelLoading;
- break;
- case ButtonState.COMPLETE:
- label = this.props.labelComplete;
- break;
- default:
- throw utils.spawnSwitchErr('ButtonState', this.state.buttonState);
- }
- return (
- <RaisedButton
- primary={this.props.isPrimary}
- label={label}
- style={{ width: '100%' }}
- backgroundColor={this.props.backgroundColor}
- labelColor={this.props.labelColor}
- onTouchTap={this.onClickAsync.bind(this)}
- disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
- />
- );
- }
- public async onClickAsync() {
- this.setState({
- buttonState: ButtonState.LOADING,
- });
- const didSucceed = await this.props.onClickAsyncFn();
- if (this._didUnmount) {
- return; // noop since unmount called before async callback returned.
- }
- if (didSucceed) {
- this.setState({
- buttonState: ButtonState.COMPLETE,
- });
- this._buttonTimeoutId = window.setTimeout(() => {
- this.setState({
- buttonState: ButtonState.READY,
- });
- }, COMPLETE_STATE_SHOW_LENGTH_MS);
- } else {
- this.setState({
- buttonState: ButtonState.READY,
- });
- }
- }
+ let label;
+ switch (this.state.buttonState) {
+ case ButtonState.READY:
+ label = this.props.labelReady;
+ break;
+ case ButtonState.LOADING:
+ label = this.props.labelLoading;
+ break;
+ case ButtonState.COMPLETE:
+ label = this.props.labelComplete;
+ break;
+ default:
+ throw utils.spawnSwitchErr('ButtonState', this.state.buttonState);
+ }
+ return (
+ <RaisedButton
+ primary={this.props.isPrimary}
+ label={label}
+ style={{ width: '100%' }}
+ backgroundColor={this.props.backgroundColor}
+ labelColor={this.props.labelColor}
+ onTouchTap={this.onClickAsync.bind(this)}
+ disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
+ />
+ );
+ }
+ public async onClickAsync() {
+ this.setState({
+ buttonState: ButtonState.LOADING,
+ });
+ const didSucceed = await this.props.onClickAsyncFn();
+ if (this._didUnmount) {
+ return; // noop since unmount called before async callback returned.
+ }
+ if (didSucceed) {
+ this.setState({
+ buttonState: ButtonState.COMPLETE,
+ });
+ this._buttonTimeoutId = window.setTimeout(() => {
+ this.setState({
+ buttonState: ButtonState.READY,
+ });
+ }, COMPLETE_STATE_SHOW_LENGTH_MS);
+ } else {
+ this.setState({
+ buttonState: ButtonState.READY,
+ });
+ }
+ }
}
diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx
index aa319e9e9..e9bfe3316 100644
--- a/packages/website/ts/components/ui/loading.tsx
+++ b/packages/website/ts/components/ui/loading.tsx
@@ -10,30 +10,30 @@ interface LoadingProps {}
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' }}>
- <Video
- autoPlay={true}
- loop={true}
- muted={true}
- controls={[]}
- poster="/images/loading_poster.png"
- >
- <source src="/videos/0xAnimation.mp4" type="video/mp4" />
- </Video>
- </div>
- )}
- <div className="center pt2" style={{ paddingBottom: 11 }}>
- Connecting to the blockchain...
- </div>
- </Paper>
- </div>
- );
- }
+ 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' }}>
+ <Video
+ autoPlay={true}
+ loop={true}
+ muted={true}
+ controls={[]}
+ poster="/images/loading_poster.png"
+ >
+ <source src="/videos/0xAnimation.mp4" type="video/mp4" />
+ </Video>
+ </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 3482f436c..956b5eae8 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/menu_item.tsx
@@ -3,49 +3,49 @@ import * as React from 'react';
import { Link } from 'react-router-dom';
interface MenuItemProps {
- to: string;
- style?: React.CSSProperties;
- onClick?: () => void;
- className?: string;
+ to: string;
+ style?: React.CSSProperties;
+ onClick?: () => void;
+ className?: string;
}
interface MenuItemState {
- isHovering: boolean;
+ isHovering: boolean;
}
export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
- public static defaultProps: Partial<MenuItemProps> = {
- onClick: _.noop,
- className: '',
- };
- public constructor(props: MenuItemProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public render() {
- const menuItemStyles = {
- cursor: 'pointer',
- opacity: this.state.isHovering ? 0.5 : 1,
- };
- return (
- <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
- <div
- onClick={this.props.onClick.bind(this)}
- className={`mx-auto ${this.props.className}`}
- style={menuItemStyles}
- onMouseEnter={this._onToggleHover.bind(this, true)}
- onMouseLeave={this._onToggleHover.bind(this, false)}
- >
- {this.props.children}
- </div>
- </Link>
- );
- }
- private _onToggleHover(isHovering: boolean) {
- this.setState({
- isHovering,
- });
- }
+ public static defaultProps: Partial<MenuItemProps> = {
+ onClick: _.noop,
+ className: '',
+ };
+ public constructor(props: MenuItemProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public render() {
+ const menuItemStyles = {
+ cursor: 'pointer',
+ opacity: this.state.isHovering ? 0.5 : 1,
+ };
+ return (
+ <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
+ <div
+ onClick={this.props.onClick.bind(this)}
+ className={`mx-auto ${this.props.className}`}
+ style={menuItemStyles}
+ onMouseEnter={this._onToggleHover.bind(this, true)}
+ onMouseLeave={this._onToggleHover.bind(this, false)}
+ >
+ {this.props.children}
+ </div>
+ </Link>
+ );
+ }
+ private _onToggleHover(isHovering: boolean) {
+ this.setState({
+ isHovering,
+ });
+ }
}
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index ca2577b61..ef3c7b425 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -11,129 +11,129 @@ const IMAGE_DIMENSION = 100;
const IDENTICON_DIAMETER = 95;
interface PartyProps {
- label: string;
- address: string;
- networkId: number;
- alternativeImage?: string;
- identiconDiameter?: number;
- identiconStyle?: React.CSSProperties;
- isInTokenRegistry?: boolean;
- hasUniqueNameAndSymbol?: boolean;
+ label: string;
+ address: string;
+ networkId: number;
+ alternativeImage?: string;
+ identiconDiameter?: number;
+ identiconStyle?: React.CSSProperties;
+ isInTokenRegistry?: boolean;
+ hasUniqueNameAndSymbol?: boolean;
}
interface PartyState {}
export class Party extends React.Component<PartyProps, PartyState> {
- public static defaultProps: Partial<PartyProps> = {
- identiconStyle: {},
- identiconDiameter: IDENTICON_DIAMETER,
- };
- public render() {
- const label = this.props.label;
- const address = this.props.address;
- const identiconDiameter = this.props.identiconDiameter;
- const emptyIdenticonStyles = {
- width: identiconDiameter,
- height: identiconDiameter,
- backgroundColor: 'lightgray',
- marginTop: 13,
- marginBottom: 10,
- };
- const tokenImageStyle = {
- width: IMAGE_DIMENSION,
- height: IMAGE_DIMENSION,
- };
- const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
- 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 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 }}>
- <EthereumAddress address={address} networkId={this.props.networkId} />
- </div>
- {!_.isUndefined(this.props.isInTokenRegistry) && (
- <div>
- <div
- data-tip={true}
- data-for={registeredTooltipId}
- className="mx-auto"
- style={{ fontSize: 13, width: 127 }}
- >
- <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 ? (
- <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>
- 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>
- </div>
- </div>
- )}
- </div>
- </div>
- );
- }
+ public static defaultProps: Partial<PartyProps> = {
+ identiconStyle: {},
+ identiconDiameter: IDENTICON_DIAMETER,
+ };
+ public render() {
+ const label = this.props.label;
+ const address = this.props.address;
+ const identiconDiameter = this.props.identiconDiameter;
+ const emptyIdenticonStyles = {
+ width: identiconDiameter,
+ height: identiconDiameter,
+ backgroundColor: 'lightgray',
+ marginTop: 13,
+ marginBottom: 10,
+ };
+ const tokenImageStyle = {
+ width: IMAGE_DIMENSION,
+ height: IMAGE_DIMENSION,
+ };
+ const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+ 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 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 }}>
+ <EthereumAddress address={address} networkId={this.props.networkId} />
+ </div>
+ {!_.isUndefined(this.props.isInTokenRegistry) && (
+ <div>
+ <div
+ data-tip={true}
+ data-for={registeredTooltipId}
+ className="mx-auto"
+ style={{ fontSize: 13, width: 127 }}
+ >
+ <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 ? (
+ <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>
+ 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>
+ </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 a5e7a22ce..638683427 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
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>
- );
+ return (
+ <span>
+ {props.label}
+ <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 81744196d..9f1fd5a13 100644
--- a/packages/website/ts/components/ui/simple_loading.tsx
+++ b/packages/website/ts/components/ui/simple_loading.tsx
@@ -2,16 +2,16 @@ import CircularProgress from 'material-ui/CircularProgress';
import * as React from 'react';
export interface SimpleLoadingProps {
- message: string;
+ message: string;
}
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 }}>
- <CircularProgress />
- <div className="pt3 pb3">{props.message}</div>
- </div>
- </div>
- );
+ return (
+ <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>
+ </div>
+ );
};
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index c41592287..99e3450de 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -3,40 +3,40 @@ import * as React from 'react';
import { colors } from 'ts/utils/colors';
interface SwapIconProps {
- swapTokensFn: () => void;
+ swapTokensFn: () => void;
}
interface SwapIconState {
- isHovering: boolean;
+ isHovering: boolean;
}
export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
- public constructor(props: SwapIconProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public render() {
- const swapStyles = {
- color: this.state.isHovering ? colors.amber600 : colors.amber800,
- fontSize: 50,
- };
- return (
- <div
- className="mx-auto pt4"
- 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" />
- </div>
- );
- }
- private _onToggleHover(isHovering: boolean) {
- this.setState({
- isHovering,
- });
- }
+ public constructor(props: SwapIconProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public render() {
+ const swapStyles = {
+ color: this.state.isHovering ? colors.amber600 : colors.amber800,
+ fontSize: 50,
+ };
+ return (
+ <div
+ className="mx-auto pt4"
+ 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" />
+ </div>
+ );
+ }
+ private _onToggleHover(isHovering: boolean) {
+ this.setState({
+ isHovering,
+ });
+ }
}
diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx
index ff57a96de..a729821ce 100644
--- a/packages/website/ts/components/ui/token_icon.tsx
+++ b/packages/website/ts/components/ui/token_icon.tsx
@@ -4,24 +4,24 @@ import { Identicon } from 'ts/components/ui/identicon';
import { Token } from 'ts/types';
interface TokenIconProps {
- token: Token;
- diameter: number;
+ token: Token;
+ diameter: number;
}
interface TokenIconState {}
export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> {
- public render() {
- const token = this.props.token;
- const diameter = this.props.diameter;
- return (
- <div>
- {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
- <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
- ) : (
- <Identicon address={token.address} diameter={diameter} />
- )}
- </div>
- );
- }
+ public render() {
+ const token = this.props.token;
+ const diameter = this.props.diameter;
+ return (
+ <div>
+ {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
+ <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
+ ) : (
+ <Identicon address={token.address} diameter={diameter} />
+ )}
+ </div>
+ );
+ }
}
diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx
index 092954086..a9779ac62 100644
--- a/packages/website/ts/components/visual_order.tsx
+++ b/packages/website/ts/components/visual_order.tsx
@@ -8,69 +8,69 @@ import { utils } from 'ts/utils/utils';
const PRECISION = 5;
interface VisualOrderProps {
- orderTakerAddress: string;
- orderMakerAddress: string;
- makerAssetToken: AssetToken;
- takerAssetToken: AssetToken;
- makerToken: Token;
- takerToken: Token;
- networkId: number;
- tokenByAddress: TokenByAddress;
- isMakerTokenAddressInRegistry: boolean;
- isTakerTokenAddressInRegistry: boolean;
+ orderTakerAddress: string;
+ orderMakerAddress: string;
+ makerAssetToken: AssetToken;
+ takerAssetToken: AssetToken;
+ makerToken: Token;
+ takerToken: Token;
+ networkId: number;
+ tokenByAddress: TokenByAddress;
+ isMakerTokenAddressInRegistry: boolean;
+ isTakerTokenAddressInRegistry: boolean;
}
interface VisualOrderState {}
export class VisualOrder extends React.Component<VisualOrderProps, VisualOrderState> {
- public render() {
- const allTokens = _.values(this.props.tokenByAddress);
- const makerImage = this.props.makerToken.iconUrl;
- const takerImage = this.props.takerToken.iconUrl;
- return (
- <div>
- <div className="clearfix">
- <div className="col col-5 center">
- <Party
- label="Send"
- address={this.props.takerToken.address}
- alternativeImage={takerImage}
- networkId={this.props.networkId}
- isInTokenRegistry={this.props.isTakerTokenAddressInRegistry}
- hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, this.props.takerToken)}
- />
- </div>
- <div className="col col-2 center pt1">
- <div className="pb1">
- {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 }} />
- </div>
- <div className="pt1">
- {this._renderAmount(this.props.makerAssetToken, this.props.makerToken)}
- </div>
- </div>
- <div className="col col-5 center">
- <Party
- label="Receive"
- address={this.props.makerToken.address}
- alternativeImage={makerImage}
- networkId={this.props.networkId}
- isInTokenRegistry={this.props.isMakerTokenAddressInRegistry}
- hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, this.props.makerToken)}
- />
- </div>
- </div>
- </div>
- );
- }
- private _renderAmount(assetToken: AssetToken, token: Token) {
- const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals);
- return (
- <div style={{ fontSize: 13 }}>
- {unitAmount.toNumber().toFixed(PRECISION)} {token.symbol}
- </div>
- );
- }
+ public render() {
+ const allTokens = _.values(this.props.tokenByAddress);
+ const makerImage = this.props.makerToken.iconUrl;
+ const takerImage = this.props.takerToken.iconUrl;
+ return (
+ <div>
+ <div className="clearfix">
+ <div className="col col-5 center">
+ <Party
+ label="Send"
+ address={this.props.takerToken.address}
+ alternativeImage={takerImage}
+ networkId={this.props.networkId}
+ isInTokenRegistry={this.props.isTakerTokenAddressInRegistry}
+ hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, this.props.takerToken)}
+ />
+ </div>
+ <div className="col col-2 center pt1">
+ <div className="pb1">
+ {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 }} />
+ </div>
+ <div className="pt1">
+ {this._renderAmount(this.props.makerAssetToken, this.props.makerToken)}
+ </div>
+ </div>
+ <div className="col col-5 center">
+ <Party
+ label="Receive"
+ address={this.props.makerToken.address}
+ alternativeImage={makerImage}
+ networkId={this.props.networkId}
+ isInTokenRegistry={this.props.isMakerTokenAddressInRegistry}
+ hasUniqueNameAndSymbol={utils.hasUniqueNameAndSymbol(allTokens, this.props.makerToken)}
+ />
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderAmount(assetToken: AssetToken, token: Token) {
+ const unitAmount = ZeroEx.toUnitAmount(assetToken.amount, token.decimals);
+ return (
+ <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 3e02a7d05..2f5326d57 100644
--- a/packages/website/ts/containers/connect_documentation.tsx
+++ b/packages/website/ts/containers/connect_documentation.tsx
@@ -16,81 +16,81 @@ const InstallationMarkdown = require('md/docs/connect/installation');
/* tslint:enable:no-var-requires */
const connectDocSections = {
- introduction: 'introduction',
- installation: 'installation',
- httpClient: 'httpClient',
- webSocketOrderbookChannel: 'webSocketOrderbookChannel',
- types: constants.TYPES_SECTION_NAME,
+ introduction: 'introduction',
+ installation: 'installation',
+ httpClient: 'httpClient',
+ webSocketOrderbookChannel: 'webSocketOrderbookChannel',
+ types: constants.TYPES_SECTION_NAME,
};
const docsInfoConfig: DocsInfoConfig = {
- displayName: '0x Connect',
- subPackageName: 'connect',
- packageUrl: 'https://github.com/0xProject/0x.js',
- 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],
- },
- sectionNameToMarkdown: {
- [connectDocSections.introduction]: IntroMarkdown,
- [connectDocSections.installation]: InstallationMarkdown,
- },
- // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
- // currently no way to extract the re-exported types from index.ts via TypeDoc :(
- publicTypes: [
- 'Client',
- 'FeesRequest',
- 'FeesResponse',
- 'OrderbookChannel',
- 'OrderbookChannelHandler',
- 'OrderbookChannelSubscriptionOpts',
- 'OrderbookRequest',
- 'OrderbookResponse',
- 'OrdersRequest',
- 'TokenPairsItem',
- 'TokenPairsRequest',
- 'TokenTradeInfo',
- 'Order',
- 'SignedOrder',
- 'ECSignature',
- ],
- sectionNameToModulePath: {
- [connectDocSections.httpClient]: ['"src/http_client"'],
- [connectDocSections.webSocketOrderbookChannel]: ['"src/ws_orderbook_channel"'],
- [connectDocSections.types]: ['"src/types"'],
- },
- menuSubsectionToVersionWhenIntroduced: {},
- sections: connectDocSections,
- visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel],
- convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils),
+ displayName: '0x Connect',
+ subPackageName: 'connect',
+ packageUrl: 'https://github.com/0xProject/0x.js',
+ 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],
+ },
+ sectionNameToMarkdown: {
+ [connectDocSections.introduction]: IntroMarkdown,
+ [connectDocSections.installation]: InstallationMarkdown,
+ },
+ // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
+ // currently no way to extract the re-exported types from index.ts via TypeDoc :(
+ publicTypes: [
+ 'Client',
+ 'FeesRequest',
+ 'FeesResponse',
+ 'OrderbookChannel',
+ 'OrderbookChannelHandler',
+ 'OrderbookChannelSubscriptionOpts',
+ 'OrderbookRequest',
+ 'OrderbookResponse',
+ 'OrdersRequest',
+ 'TokenPairsItem',
+ 'TokenPairsRequest',
+ 'TokenTradeInfo',
+ 'Order',
+ 'SignedOrder',
+ 'ECSignature',
+ ],
+ sectionNameToModulePath: {
+ [connectDocSections.httpClient]: ['"src/http_client"'],
+ [connectDocSections.webSocketOrderbookChannel]: ['"src/ws_orderbook_channel"'],
+ [connectDocSections.types]: ['"src/types"'],
+ },
+ menuSubsectionToVersionWhenIntroduced: {},
+ sections: connectDocSections,
+ visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel],
+ convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils),
};
const docsInfo = new DocsInfo(docsInfoConfig);
interface ConnectedState {
- docsVersion: string;
- availableDocVersions: string[];
- docsInfo: DocsInfo;
+ docsVersion: string;
+ availableDocVersions: string[];
+ docsInfo: DocsInfo;
}
interface ConnectedDispatch {
- dispatcher: Dispatcher;
+ dispatcher: Dispatcher;
}
const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({
- docsVersion: state.docsVersion,
- availableDocVersions: state.availableDocVersions,
- docsInfo,
+ docsVersion: state.docsVersion,
+ availableDocVersions: state.availableDocVersions,
+ docsInfo,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
- dispatcher: new Dispatcher(dispatch),
+ dispatcher: new Dispatcher(dispatch),
});
export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)(
- DocumentationComponent,
+ DocumentationComponent,
);
diff --git a/packages/website/ts/containers/generate_order_form.tsx b/packages/website/ts/containers/generate_order_form.tsx
index 3fd31087f..c2b781557 100644
--- a/packages/website/ts/containers/generate_order_form.tsx
+++ b/packages/website/ts/containers/generate_order_form.tsx
@@ -7,48 +7,48 @@ import { GenerateOrderForm as GenerateOrderFormComponent } from 'ts/components/g
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
import {
- BlockchainErrs,
- HashData,
- SideToAssetToken,
- SignatureData,
- TokenByAddress,
- TokenStateByAddress,
+ BlockchainErrs,
+ HashData,
+ SideToAssetToken,
+ SignatureData,
+ TokenByAddress,
+ TokenStateByAddress,
} from 'ts/types';
interface GenerateOrderFormProps {
- blockchain: Blockchain;
- hashData: HashData;
- dispatcher: Dispatcher;
+ blockchain: Blockchain;
+ hashData: HashData;
+ dispatcher: Dispatcher;
}
interface ConnectedState {
- blockchainErr: BlockchainErrs;
- blockchainIsLoaded: boolean;
- orderExpiryTimestamp: BigNumber;
- orderSignatureData: SignatureData;
- userAddress: string;
- orderTakerAddress: string;
- orderSalt: BigNumber;
- networkId: number;
- sideToAssetToken: SideToAssetToken;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
+ blockchainErr: BlockchainErrs;
+ blockchainIsLoaded: boolean;
+ orderExpiryTimestamp: BigNumber;
+ orderSignatureData: SignatureData;
+ userAddress: string;
+ orderTakerAddress: string;
+ orderSalt: BigNumber;
+ networkId: number;
+ sideToAssetToken: SideToAssetToken;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
}
const mapStateToProps = (state: State, ownProps: GenerateOrderFormProps): ConnectedState => ({
- blockchainErr: state.blockchainErr,
- blockchainIsLoaded: state.blockchainIsLoaded,
- orderExpiryTimestamp: state.orderExpiryTimestamp,
- orderSignatureData: state.orderSignatureData,
- orderTakerAddress: state.orderTakerAddress,
- orderSalt: state.orderSalt,
- networkId: state.networkId,
- sideToAssetToken: state.sideToAssetToken,
- tokenByAddress: state.tokenByAddress,
- tokenStateByAddress: state.tokenStateByAddress,
- userAddress: state.userAddress,
+ blockchainErr: state.blockchainErr,
+ blockchainIsLoaded: state.blockchainIsLoaded,
+ orderExpiryTimestamp: state.orderExpiryTimestamp,
+ orderSignatureData: state.orderSignatureData,
+ orderTakerAddress: state.orderTakerAddress,
+ orderSalt: state.orderSalt,
+ networkId: state.networkId,
+ sideToAssetToken: state.sideToAssetToken,
+ tokenByAddress: state.tokenByAddress,
+ tokenStateByAddress: state.tokenStateByAddress,
+ userAddress: state.userAddress,
});
export const GenerateOrderForm: React.ComponentClass<GenerateOrderFormProps> = connect(mapStateToProps)(
- GenerateOrderFormComponent,
+ GenerateOrderFormComponent,
);
diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.tsx
index f0247935b..bc7aa213c 100644
--- a/packages/website/ts/containers/portal.tsx
+++ b/packages/website/ts/containers/portal.tsx
@@ -10,72 +10,72 @@ import { BlockchainErrs, HashData, Order, ScreenWidths, Side, TokenByAddress, To
import { constants } from 'ts/utils/constants';
interface ConnectedState {
- blockchainErr: BlockchainErrs;
- blockchainIsLoaded: boolean;
- hashData: HashData;
- networkId: number;
- nodeVersion: string;
- orderFillAmount: BigNumber;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
- userEtherBalance: BigNumber;
- screenWidth: ScreenWidths;
- shouldBlockchainErrDialogBeOpen: boolean;
- userAddress: string;
- userSuppliedOrderCache: Order;
- flashMessage?: string | React.ReactNode;
+ blockchainErr: BlockchainErrs;
+ blockchainIsLoaded: boolean;
+ hashData: HashData;
+ networkId: number;
+ nodeVersion: string;
+ orderFillAmount: BigNumber;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ userEtherBalance: BigNumber;
+ screenWidth: ScreenWidths;
+ shouldBlockchainErrDialogBeOpen: boolean;
+ userAddress: string;
+ userSuppliedOrderCache: Order;
+ flashMessage?: string | React.ReactNode;
}
interface ConnectedDispatch {
- dispatcher: Dispatcher;
+ dispatcher: Dispatcher;
}
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 hashData = {
- depositAmount,
- depositTokenContractAddr: depositAddress,
- feeRecipientAddress: constants.NULL_ADDRESS,
- makerFee: constants.MAKER_FEE,
- orderExpiryTimestamp: state.orderExpiryTimestamp,
- orderMakerAddress: state.userAddress,
- orderTakerAddress: state.orderTakerAddress !== '' ? state.orderTakerAddress : constants.NULL_ADDRESS,
- receiveAmount,
- receiveTokenContractAddr: receiveAddress,
- takerFee: constants.TAKER_FEE,
- orderSalt: state.orderSalt,
- };
- return {
- blockchainErr: state.blockchainErr,
- blockchainIsLoaded: state.blockchainIsLoaded,
- networkId: state.networkId,
- nodeVersion: state.nodeVersion,
- orderFillAmount: state.orderFillAmount,
- hashData,
- screenWidth: state.screenWidth,
- shouldBlockchainErrDialogBeOpen: state.shouldBlockchainErrDialogBeOpen,
- tokenByAddress: state.tokenByAddress,
- tokenStateByAddress: state.tokenStateByAddress,
- userAddress: state.userAddress,
- userEtherBalance: state.userEtherBalance,
- userSuppliedOrderCache: state.userSuppliedOrderCache,
- flashMessage: state.flashMessage,
- };
+ 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 hashData = {
+ depositAmount,
+ depositTokenContractAddr: depositAddress,
+ feeRecipientAddress: constants.NULL_ADDRESS,
+ makerFee: constants.MAKER_FEE,
+ orderExpiryTimestamp: state.orderExpiryTimestamp,
+ orderMakerAddress: state.userAddress,
+ orderTakerAddress: state.orderTakerAddress !== '' ? state.orderTakerAddress : constants.NULL_ADDRESS,
+ receiveAmount,
+ receiveTokenContractAddr: receiveAddress,
+ takerFee: constants.TAKER_FEE,
+ orderSalt: state.orderSalt,
+ };
+ return {
+ blockchainErr: state.blockchainErr,
+ blockchainIsLoaded: state.blockchainIsLoaded,
+ networkId: state.networkId,
+ nodeVersion: state.nodeVersion,
+ orderFillAmount: state.orderFillAmount,
+ hashData,
+ screenWidth: state.screenWidth,
+ shouldBlockchainErrDialogBeOpen: state.shouldBlockchainErrDialogBeOpen,
+ tokenByAddress: state.tokenByAddress,
+ tokenStateByAddress: state.tokenStateByAddress,
+ userAddress: state.userAddress,
+ userEtherBalance: state.userEtherBalance,
+ userSuppliedOrderCache: state.userSuppliedOrderCache,
+ flashMessage: state.flashMessage,
+ };
};
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
- dispatcher: new Dispatcher(dispatch),
+ dispatcher: new Dispatcher(dispatch),
});
export const Portal: React.ComponentClass<PortalComponentAllProps> = connect(mapStateToProps, mapDispatchToProps)(
- PortalComponent,
+ PortalComponent,
);
diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.tsx
index 8be33b546..addfd1af9 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.tsx
+++ b/packages/website/ts/containers/smart_contracts_documentation.tsx
@@ -14,49 +14,49 @@ const IntroMarkdown = require('md/docs/smart_contracts/introduction');
/* tslint:enable:no-var-requires */
const docsInfoConfig: DocsInfoConfig = {
- displayName: '0x Smart Contracts',
- packageUrl: 'https://github.com/0xProject/contracts',
- 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],
- },
- sectionNameToMarkdown: {
- [Sections.Introduction]: IntroMarkdown,
- },
- sections: {
- Introduction: Sections.Introduction,
- Exchange: Sections.Exchange,
- TokenTransferProxy: Sections.TokenTransferProxy,
- TokenRegistry: Sections.TokenRegistry,
- ZRXToken: Sections.ZRXToken,
- },
- visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy],
- convertToDocAgnosticFormatFn: doxityUtils.convertToDocAgnosticFormat.bind(doxityUtils),
+ displayName: '0x Smart Contracts',
+ packageUrl: 'https://github.com/0xProject/contracts',
+ 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],
+ },
+ sectionNameToMarkdown: {
+ [Sections.Introduction]: IntroMarkdown,
+ },
+ sections: {
+ Introduction: Sections.Introduction,
+ Exchange: Sections.Exchange,
+ TokenTransferProxy: Sections.TokenTransferProxy,
+ TokenRegistry: Sections.TokenRegistry,
+ ZRXToken: Sections.ZRXToken,
+ },
+ visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy],
+ convertToDocAgnosticFormatFn: doxityUtils.convertToDocAgnosticFormat.bind(doxityUtils),
};
const docsInfo = new DocsInfo(docsInfoConfig);
interface ConnectedState {
- docsVersion: string;
- availableDocVersions: string[];
+ docsVersion: string;
+ availableDocVersions: string[];
}
interface ConnectedDispatch {
- dispatcher: Dispatcher;
- docsInfo: DocsInfo;
+ dispatcher: Dispatcher;
+ docsInfo: DocsInfo;
}
const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({
- docsVersion: state.docsVersion,
- availableDocVersions: state.availableDocVersions,
+ docsVersion: state.docsVersion,
+ availableDocVersions: state.availableDocVersions,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
- dispatcher: new Dispatcher(dispatch),
- docsInfo,
+ dispatcher: new Dispatcher(dispatch),
+ docsInfo,
});
export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)(
- DocumentationComponent,
+ DocumentationComponent,
);
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.tsx
index 8ae6a7b73..d416cbc12 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.tsx
+++ b/packages/website/ts/containers/zero_ex_js_documentation.tsx
@@ -19,152 +19,152 @@ const versioningMarkdown = require('md/docs/0xjs/versioning');
/* tslint:enable:no-var-requires */
const zeroExJsDocSections = {
- introduction: 'introduction',
- installation: 'installation',
- testrpc: 'testrpc',
- async: 'async',
- errors: 'errors',
- versioning: 'versioning',
- zeroEx: 'zeroEx',
- exchange: 'exchange',
- token: 'token',
- tokenRegistry: 'tokenRegistry',
- etherToken: 'etherToken',
- proxy: 'proxy',
- orderWatcher: 'orderWatcher',
- types: constants.TYPES_SECTION_NAME,
+ introduction: 'introduction',
+ installation: 'installation',
+ testrpc: 'testrpc',
+ async: 'async',
+ errors: 'errors',
+ versioning: 'versioning',
+ zeroEx: 'zeroEx',
+ exchange: 'exchange',
+ token: 'token',
+ tokenRegistry: 'tokenRegistry',
+ etherToken: 'etherToken',
+ proxy: 'proxy',
+ orderWatcher: 'orderWatcher',
+ types: constants.TYPES_SECTION_NAME,
};
const docsInfoConfig: DocsInfoConfig = {
- displayName: '0x.js',
- packageUrl: 'https://github.com/0xProject/0x.js',
- subPackageName: '0x.js',
- 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],
- contracts: [
- zeroExJsDocSections.exchange,
- zeroExJsDocSections.token,
- zeroExJsDocSections.tokenRegistry,
- zeroExJsDocSections.etherToken,
- zeroExJsDocSections.proxy,
- ],
- orderWatcher: [zeroExJsDocSections.orderWatcher],
- types: [zeroExJsDocSections.types],
- },
- sectionNameToMarkdown: {
- [zeroExJsDocSections.introduction]: IntroMarkdown,
- [zeroExJsDocSections.installation]: InstallationMarkdown,
- [zeroExJsDocSections.async]: AsyncMarkdown,
- [zeroExJsDocSections.errors]: ErrorsMarkdown,
- [zeroExJsDocSections.versioning]: versioningMarkdown,
- },
- // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
- // currently no way to extract the re-exported types from index.ts via TypeDoc :(
- publicTypes: [
- 'Order',
- 'SignedOrder',
- 'ECSignature',
- 'ZeroExError',
- 'EventCallback',
- 'EventCallbackAsync',
- 'EventCallbackSync',
- 'ExchangeContractErrs',
- 'ContractEvent',
- 'Token',
- 'ExchangeEvents',
- 'IndexedFilterValues',
- 'SubscriptionOpts',
- 'BlockRange',
- 'BlockParam',
- 'OrderFillOrKillRequest',
- 'OrderCancellationRequest',
- 'OrderFillRequest',
- 'ContractEventEmitter',
- 'Web3Provider',
- 'ContractEventArgs',
- 'LogCancelArgs',
- 'LogFillArgs',
- 'LogErrorContractEventArgs',
- 'LogFillContractEventArgs',
- 'LogCancelContractEventArgs',
- 'EtherTokenContractEventArgs',
- 'WithdrawalContractEventArgs',
- 'DepositContractEventArgs',
- 'TokenEvents',
- 'ExchangeContractEventArgs',
- 'TransferContractEventArgs',
- 'ApprovalContractEventArgs',
- 'TokenContractEventArgs',
- 'ZeroExConfig',
- 'TransactionReceiptWithDecodedLogs',
- 'LogWithDecodedArgs',
- 'EtherTokenEvents',
- 'BlockParamLiteral',
- 'DecodedLogArgs',
- 'MethodOpts',
- 'ValidateOrderFillableOpts',
- 'OrderTransactionOpts',
- 'TransactionOpts',
- 'ContractEventArg',
- 'LogEvent',
- 'LogEntry',
- 'DecodedLogEvent',
- 'EventWatcherCallback',
- 'OnOrderStateChangeCallback',
- 'OrderStateValid',
- 'OrderStateInvalid',
- 'OrderState',
- 'FilterObject',
- ],
- sectionNameToModulePath: {
- [zeroExJsDocSections.zeroEx]: ['"src/0x"'],
- [zeroExJsDocSections.exchange]: ['"src/contract_wrappers/exchange_wrapper"'],
- [zeroExJsDocSections.tokenRegistry]: ['"src/contract_wrappers/token_registry_wrapper"'],
- [zeroExJsDocSections.token]: ['"src/contract_wrappers/token_wrapper"'],
- [zeroExJsDocSections.etherToken]: ['"src/contract_wrappers/ether_token_wrapper"'],
- [zeroExJsDocSections.proxy]: [
- '"src/contract_wrappers/proxy_wrapper"',
- '"src/contract_wrappers/token_transfer_proxy_wrapper"',
- ],
- [zeroExJsDocSections.orderWatcher]: ['"src/order_watcher/order_state_watcher"'],
- [zeroExJsDocSections.types]: ['"src/types"'],
- },
- menuSubsectionToVersionWhenIntroduced: {
- [zeroExJsDocSections.etherToken]: '0.7.1',
- [zeroExJsDocSections.proxy]: '0.8.0',
- [zeroExJsDocSections.orderWatcher]: '0.27.1',
- },
- sections: zeroExJsDocSections,
- visibleConstructors: [zeroExJsDocSections.zeroEx],
- convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils),
+ displayName: '0x.js',
+ packageUrl: 'https://github.com/0xProject/0x.js',
+ subPackageName: '0x.js',
+ 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],
+ contracts: [
+ zeroExJsDocSections.exchange,
+ zeroExJsDocSections.token,
+ zeroExJsDocSections.tokenRegistry,
+ zeroExJsDocSections.etherToken,
+ zeroExJsDocSections.proxy,
+ ],
+ orderWatcher: [zeroExJsDocSections.orderWatcher],
+ types: [zeroExJsDocSections.types],
+ },
+ sectionNameToMarkdown: {
+ [zeroExJsDocSections.introduction]: IntroMarkdown,
+ [zeroExJsDocSections.installation]: InstallationMarkdown,
+ [zeroExJsDocSections.async]: AsyncMarkdown,
+ [zeroExJsDocSections.errors]: ErrorsMarkdown,
+ [zeroExJsDocSections.versioning]: versioningMarkdown,
+ },
+ // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
+ // currently no way to extract the re-exported types from index.ts via TypeDoc :(
+ publicTypes: [
+ 'Order',
+ 'SignedOrder',
+ 'ECSignature',
+ 'ZeroExError',
+ 'EventCallback',
+ 'EventCallbackAsync',
+ 'EventCallbackSync',
+ 'ExchangeContractErrs',
+ 'ContractEvent',
+ 'Token',
+ 'ExchangeEvents',
+ 'IndexedFilterValues',
+ 'SubscriptionOpts',
+ 'BlockRange',
+ 'BlockParam',
+ 'OrderFillOrKillRequest',
+ 'OrderCancellationRequest',
+ 'OrderFillRequest',
+ 'ContractEventEmitter',
+ 'Web3Provider',
+ 'ContractEventArgs',
+ 'LogCancelArgs',
+ 'LogFillArgs',
+ 'LogErrorContractEventArgs',
+ 'LogFillContractEventArgs',
+ 'LogCancelContractEventArgs',
+ 'EtherTokenContractEventArgs',
+ 'WithdrawalContractEventArgs',
+ 'DepositContractEventArgs',
+ 'TokenEvents',
+ 'ExchangeContractEventArgs',
+ 'TransferContractEventArgs',
+ 'ApprovalContractEventArgs',
+ 'TokenContractEventArgs',
+ 'ZeroExConfig',
+ 'TransactionReceiptWithDecodedLogs',
+ 'LogWithDecodedArgs',
+ 'EtherTokenEvents',
+ 'BlockParamLiteral',
+ 'DecodedLogArgs',
+ 'MethodOpts',
+ 'ValidateOrderFillableOpts',
+ 'OrderTransactionOpts',
+ 'TransactionOpts',
+ 'ContractEventArg',
+ 'LogEvent',
+ 'LogEntry',
+ 'DecodedLogEvent',
+ 'EventWatcherCallback',
+ 'OnOrderStateChangeCallback',
+ 'OrderStateValid',
+ 'OrderStateInvalid',
+ 'OrderState',
+ 'FilterObject',
+ ],
+ sectionNameToModulePath: {
+ [zeroExJsDocSections.zeroEx]: ['"src/0x"'],
+ [zeroExJsDocSections.exchange]: ['"src/contract_wrappers/exchange_wrapper"'],
+ [zeroExJsDocSections.tokenRegistry]: ['"src/contract_wrappers/token_registry_wrapper"'],
+ [zeroExJsDocSections.token]: ['"src/contract_wrappers/token_wrapper"'],
+ [zeroExJsDocSections.etherToken]: ['"src/contract_wrappers/ether_token_wrapper"'],
+ [zeroExJsDocSections.proxy]: [
+ '"src/contract_wrappers/proxy_wrapper"',
+ '"src/contract_wrappers/token_transfer_proxy_wrapper"',
+ ],
+ [zeroExJsDocSections.orderWatcher]: ['"src/order_watcher/order_state_watcher"'],
+ [zeroExJsDocSections.types]: ['"src/types"'],
+ },
+ menuSubsectionToVersionWhenIntroduced: {
+ [zeroExJsDocSections.etherToken]: '0.7.1',
+ [zeroExJsDocSections.proxy]: '0.8.0',
+ [zeroExJsDocSections.orderWatcher]: '0.27.1',
+ },
+ sections: zeroExJsDocSections,
+ visibleConstructors: [zeroExJsDocSections.zeroEx],
+ convertToDocAgnosticFormatFn: typeDocUtils.convertToDocAgnosticFormat.bind(typeDocUtils),
};
const docsInfo = new DocsInfo(docsInfoConfig);
interface ConnectedState {
- docsVersion: string;
- availableDocVersions: string[];
- docsInfo: DocsInfo;
+ docsVersion: string;
+ availableDocVersions: string[];
+ docsInfo: DocsInfo;
}
interface ConnectedDispatch {
- dispatcher: Dispatcher;
+ dispatcher: Dispatcher;
}
const mapStateToProps = (state: State, ownProps: DocumentationAllProps): ConnectedState => ({
- docsVersion: state.docsVersion,
- availableDocVersions: state.availableDocVersions,
- docsInfo,
+ docsVersion: state.docsVersion,
+ availableDocVersions: state.availableDocVersions,
+ docsInfo,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
- dispatcher: new Dispatcher(dispatch),
+ dispatcher: new Dispatcher(dispatch),
});
export const Documentation: React.ComponentClass<DocumentationAllProps> = connect(mapStateToProps, mapDispatchToProps)(
- DocumentationComponent,
+ DocumentationComponent,
);
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index 383e5cbe0..736b23d9d 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -14,10 +14,10 @@ declare module 'ledgerco';
declare module 'ethereumjs-tx';
declare module '*.json' {
- const json: any;
- /* tslint:disable */
- export default json;
- /* tslint:enable */
+ const json: any;
+ /* tslint:disable */
+ export default json;
+ /* tslint:enable */
}
// tslint:disable:max-classes-per-file
@@ -25,137 +25,137 @@ declare module '*.json' {
// find-version declarations
declare function findVersions(version: string): string[];
declare module 'find-versions' {
- export = findVersions;
+ export = findVersions;
}
// compare-version declarations
declare function compareVersions(firstVersion: string, secondVersion: string): number;
declare module 'compare-versions' {
- export = compareVersions;
+ export = compareVersions;
}
// semver-sort declarations
declare module 'semver-sort' {
- const desc: (versions: string[]) => string[];
+ const desc: (versions: string[]) => string[];
}
// xml-js declarations
declare interface XML2JSONOpts {
- compact?: boolean;
- spaces?: number;
+ compact?: boolean;
+ spaces?: number;
}
declare module 'xml-js' {
- const xml2json: (xml: string, opts: XML2JSONOpts) => string;
+ const xml2json: (xml: string, opts: XML2JSONOpts) => string;
}
// This will be defined by default in TS 2.4
// Source: https://github.com/Microsoft/TypeScript/issues/12364
interface System {
- import<T>(module: string): Promise<T>;
+ import<T>(module: string): Promise<T>;
}
declare var System: System;
// jsonschema declarations
// Source: https://github.com/tdegrunt/jsonschema/blob/master/lib/index.d.ts
declare interface Schema {
- id?: string;
- $schema?: string;
- title?: string;
- description?: string;
- multipleOf?: number;
- maximum?: number;
- exclusiveMaximum?: boolean;
- minimum?: number;
- exclusiveMinimum?: boolean;
- maxLength?: number;
- minLength?: number;
- pattern?: string;
- additionalItems?: boolean | Schema;
- items?: Schema | Schema[];
- maxItems?: number;
- minItems?: number;
- uniqueItems?: boolean;
- maxProperties?: number;
- minProperties?: number;
- required?: string[];
- additionalProperties?: boolean | Schema;
- definitions?: {
- [name: string]: Schema;
- };
- properties?: {
- [name: string]: Schema;
- };
- patternProperties?: {
- [name: string]: Schema;
- };
- dependencies?: {
- [name: string]: Schema | string[];
- };
- enum?: any[];
- type?: string | string[];
- allOf?: Schema[];
- anyOf?: Schema[];
- oneOf?: Schema[];
- not?: Schema;
- // This is the only property that's not defined in https://github.com/tdegrunt/jsonschema/blob/master/lib/index.d.ts
- // There is an open issue for that: https://github.com/tdegrunt/jsonschema/issues/194
- // There is also an opened PR: https://github.com/tdegrunt/jsonschema/pull/218/files
- // As soon as it gets merged we should be good to use types from 'jsonschema' package
- $ref?: string;
+ id?: string;
+ $schema?: string;
+ title?: string;
+ description?: string;
+ multipleOf?: number;
+ maximum?: number;
+ exclusiveMaximum?: boolean;
+ minimum?: number;
+ exclusiveMinimum?: boolean;
+ maxLength?: number;
+ minLength?: number;
+ pattern?: string;
+ additionalItems?: boolean | Schema;
+ items?: Schema | Schema[];
+ maxItems?: number;
+ minItems?: number;
+ uniqueItems?: boolean;
+ maxProperties?: number;
+ minProperties?: number;
+ required?: string[];
+ additionalProperties?: boolean | Schema;
+ definitions?: {
+ [name: string]: Schema;
+ };
+ properties?: {
+ [name: string]: Schema;
+ };
+ patternProperties?: {
+ [name: string]: Schema;
+ };
+ dependencies?: {
+ [name: string]: Schema | string[];
+ };
+ enum?: any[];
+ type?: string | string[];
+ allOf?: Schema[];
+ anyOf?: Schema[];
+ oneOf?: Schema[];
+ not?: Schema;
+ // This is the only property that's not defined in https://github.com/tdegrunt/jsonschema/blob/master/lib/index.d.ts
+ // There is an open issue for that: https://github.com/tdegrunt/jsonschema/issues/194
+ // There is also an opened PR: https://github.com/tdegrunt/jsonschema/pull/218/files
+ // As soon as it gets merged we should be good to use types from 'jsonschema' package
+ $ref?: string;
}
// blockies declarations
declare interface BlockiesIcon {
- toDataURL(): string;
+ toDataURL(): string;
}
declare interface BlockiesConfig {
- seed: string;
+ seed: string;
}
declare function blockies(config: BlockiesConfig): BlockiesIcon;
declare module 'blockies' {
- export = blockies;
+ export = blockies;
}
// is-mobile declarations
declare function isMobile(): boolean;
declare module 'is-mobile' {
- export = isMobile;
+ export = isMobile;
}
// web3-provider-engine declarations
declare class Subprovider {}
declare module 'web3-provider-engine/subproviders/subprovider' {
- export = Subprovider;
+ export = Subprovider;
}
declare module 'web3-provider-engine/subproviders/rpc' {
- import * as Web3 from 'web3';
- class RpcSubprovider {
- constructor(options: { rpcUrl: string });
- public handleRequest(
- payload: Web3.JSONRPCRequestPayload,
- next: () => void,
- end: (err: Error | null, data?: any) => void,
- ): void;
- }
- export = RpcSubprovider;
+ import * as Web3 from 'web3';
+ class RpcSubprovider {
+ constructor(options: { rpcUrl: string });
+ public handleRequest(
+ 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 {
- abi: any;
- networks: {
- [networkId: number]: {
- address: string;
- };
- };
+ abi: any;
+ networks: {
+ [networkId: number]: {
+ address: string;
+ };
+ };
}
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index ffb551561..df45c80bd 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -32,44 +32,44 @@ import 'less/all.less';
// 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'),
+ System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
);
const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () =>
- System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'),
+ 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'),
+ System.import<any>(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'),
);
const LazyConnectDocumentation = createLazyComponent('Documentation', async () =>
- System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
+ System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'),
);
const store: ReduxStore<State> = createStore(reducer);
render(
- <Router>
- <div>
- <MuiThemeProvider muiTheme={muiTheme}>
- <Provider store={store}>
- <div>
- <Switch>
- <Route exact={true} path="/" component={Landing as any} />
- <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} />
- <Route path={`${WebsitePaths.Wiki}`} component={Wiki as any} />
- <Route path={`${WebsitePaths.ZeroExJs}/:version?`} component={LazyZeroExJSDocumentation} />
- <Route path={`${WebsitePaths.Connect}/:version?`} component={LazyConnectDocumentation} />
- <Route
- path={`${WebsitePaths.SmartContracts}/:version?`}
- component={LazySmartContractsDocumentation}
- />
- <Route component={NotFound as any} />
- </Switch>
- </div>
- </Provider>
- </MuiThemeProvider>
- </div>
- </Router>,
- document.getElementById('app'),
+ <Router>
+ <div>
+ <MuiThemeProvider muiTheme={muiTheme}>
+ <Provider store={store}>
+ <div>
+ <Switch>
+ <Route exact={true} path="/" component={Landing as any} />
+ <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} />
+ <Route path={`${WebsitePaths.Wiki}`} component={Wiki as any} />
+ <Route path={`${WebsitePaths.ZeroExJs}/:version?`} component={LazyZeroExJSDocumentation} />
+ <Route path={`${WebsitePaths.Connect}/:version?`} component={LazyConnectDocumentation} />
+ <Route
+ path={`${WebsitePaths.SmartContracts}/:version?`}
+ component={LazySmartContractsDocumentation}
+ />
+ <Route component={NotFound as any} />
+ </Switch>
+ </div>
+ </Provider>
+ </MuiThemeProvider>
+ </div>
+ </Router>,
+ document.getElementById('app'),
);
diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx
index 48800c2dd..5efebb667 100644
--- a/packages/website/ts/lazy_component.tsx
+++ b/packages/website/ts/lazy_component.tsx
@@ -2,12 +2,12 @@ import * as _ from 'lodash';
import * as React from 'react';
interface LazyComponentProps {
- reactComponentPromise: Promise<React.ComponentClass<any>>;
- reactComponentProps: any;
+ reactComponentPromise: Promise<React.ComponentClass<any>>;
+ reactComponentProps: any;
}
interface LazyComponentState {
- component?: React.ComponentClass<any>;
+ component?: React.ComponentClass<any>;
}
/**
@@ -15,33 +15,33 @@ interface LazyComponentState {
* Source: https://reacttraining.com/react-router/web/guides/code-splitting
*/
export class LazyComponent extends React.Component<LazyComponentProps, LazyComponentState> {
- constructor(props: LazyComponentProps) {
- super(props);
- this.state = {
- component: undefined,
- };
- }
- public componentWillMount() {
- // tslint:disable-next-line:no-floating-promises
- this._loadComponentFireAndForgetAsync(this.props);
- }
- public componentWillReceiveProps(nextProps: LazyComponentProps) {
- if (nextProps.reactComponentPromise !== this.props.reactComponentPromise) {
- // tslint:disable-next-line:no-floating-promises
- this._loadComponentFireAndForgetAsync(nextProps);
- }
- }
- public render() {
- return _.isUndefined(this.state.component)
- ? null
- : React.createElement(this.state.component, this.props.reactComponentProps);
- }
- private async _loadComponentFireAndForgetAsync(props: LazyComponentProps) {
- const component = await props.reactComponentPromise;
- this.setState({
- component,
- });
- }
+ constructor(props: LazyComponentProps) {
+ super(props);
+ this.state = {
+ component: undefined,
+ };
+ }
+ public componentWillMount() {
+ // tslint:disable-next-line:no-floating-promises
+ this._loadComponentFireAndForgetAsync(this.props);
+ }
+ public componentWillReceiveProps(nextProps: LazyComponentProps) {
+ if (nextProps.reactComponentPromise !== this.props.reactComponentPromise) {
+ // tslint:disable-next-line:no-floating-promises
+ this._loadComponentFireAndForgetAsync(nextProps);
+ }
+ }
+ public render() {
+ return _.isUndefined(this.state.component)
+ ? null
+ : React.createElement(this.state.component, this.props.reactComponentProps);
+ }
+ private async _loadComponentFireAndForgetAsync(props: LazyComponentProps) {
+ const component = await props.reactComponentPromise;
+ this.setState({
+ component,
+ });
+ }
}
/**
@@ -52,15 +52,15 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo
* @example `const LazyPortal = createLazyComponent('Portal', () => System.import<any>('ts/containers/portal'));``
*/
export const createLazyComponent = (componentName: string, lazyImport: () => Promise<any>) => {
- return (props: any) => {
- const reactComponentPromise = (async (): Promise<React.ComponentClass<any>> => {
- const mod = await lazyImport();
- const component = mod[componentName];
- if (_.isUndefined(component)) {
- throw new Error(`Did not find exported component: ${componentName}`);
- }
- return component;
- })();
- return <LazyComponent reactComponentPromise={reactComponentPromise} reactComponentProps={props} />;
- };
+ return (props: any) => {
+ const reactComponentPromise = (async (): Promise<React.ComponentClass<any>> => {
+ const mod = await lazyImport();
+ const component = mod[componentName];
+ if (_.isUndefined(component)) {
+ throw new Error(`Did not find exported component: ${componentName}`);
+ }
+ return component;
+ })();
+ return <LazyComponent reactComponentPromise={reactComponentPromise} reactComponentProps={props} />;
+ };
};
diff --git a/packages/website/ts/local_storage/local_storage.ts b/packages/website/ts/local_storage/local_storage.ts
index d94e6877b..4e5b77a0a 100644
--- a/packages/website/ts/local_storage/local_storage.ts
+++ b/packages/website/ts/local_storage/local_storage.ts
@@ -1,35 +1,35 @@
import * as _ from 'lodash';
export const localStorage = {
- doesExist() {
- return !!window.localStorage;
- },
- getItemIfExists(key: string): string {
- if (!this.doesExist) {
- return undefined;
- }
- const item = window.localStorage.getItem(key);
- if (_.isNull(item) || item === 'undefined') {
- return '';
- }
- return item;
- },
- setItem(key: string, value: string) {
- if (!this.doesExist || _.isUndefined(value)) {
- return;
- }
- window.localStorage.setItem(key, value);
- },
- removeItem(key: string) {
- if (!this.doesExist) {
- return;
- }
- window.localStorage.removeItem(key);
- },
- getAllKeys(): string[] {
- if (!this.doesExist) {
- return [];
- }
- return _.keys(window.localStorage);
- },
+ doesExist() {
+ return !!window.localStorage;
+ },
+ getItemIfExists(key: string): string {
+ if (!this.doesExist) {
+ return undefined;
+ }
+ const item = window.localStorage.getItem(key);
+ if (_.isNull(item) || item === 'undefined') {
+ return '';
+ }
+ return item;
+ },
+ setItem(key: string, value: string) {
+ if (!this.doesExist || _.isUndefined(value)) {
+ return;
+ }
+ window.localStorage.setItem(key, value);
+ },
+ removeItem(key: string) {
+ if (!this.doesExist) {
+ return;
+ }
+ window.localStorage.removeItem(key);
+ },
+ getAllKeys(): string[] {
+ if (!this.doesExist) {
+ return [];
+ }
+ return _.keys(window.localStorage);
+ },
};
diff --git a/packages/website/ts/local_storage/tracked_token_storage.ts b/packages/website/ts/local_storage/tracked_token_storage.ts
index 7733e8436..2c62084e0 100644
--- a/packages/website/ts/local_storage/tracked_token_storage.ts
+++ b/packages/website/ts/local_storage/tracked_token_storage.ts
@@ -7,61 +7,61 @@ const TRACKED_TOKENS_KEY = 'trackedTokens';
const TRACKED_TOKENS_CLEAR_KEY = 'lastClearTrackedTokensDate';
export const trackedTokenStorage = {
- // Clear trackedTokens localStorage if we've updated the config variable in an update
- // that introduced a backward incompatible change requiring the tracked tokens to be re-set
- clearIfRequired(): void {
- const lastClearFillDate = localStorage.getItemIfExists(TRACKED_TOKENS_CLEAR_KEY);
- if (lastClearFillDate !== configs.LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE) {
- localStorage.removeItem(TRACKED_TOKENS_KEY);
- }
- localStorage.setItem(TRACKED_TOKENS_CLEAR_KEY, configs.LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE);
- },
- addTrackedTokenToUser(userAddress: string, networkId: number, token: Token): void {
- const trackedTokensByUserAddress = this.getTrackedTokensByUserAddress();
- let trackedTokensByNetworkId = trackedTokensByUserAddress[userAddress];
- if (_.isUndefined(trackedTokensByNetworkId)) {
- trackedTokensByNetworkId = {};
- }
- const trackedTokens = !_.isUndefined(trackedTokensByNetworkId[networkId])
- ? trackedTokensByNetworkId[networkId]
- : [];
- trackedTokens.push(token);
- trackedTokensByNetworkId[networkId] = trackedTokens;
- trackedTokensByUserAddress[userAddress] = trackedTokensByNetworkId;
- const trackedTokensByUserAddressJSONString = JSON.stringify(trackedTokensByUserAddress);
- localStorage.setItem(TRACKED_TOKENS_KEY, trackedTokensByUserAddressJSONString);
- },
- getTrackedTokensByUserAddress(): TrackedTokensByUserAddress {
- const trackedTokensJSONString = localStorage.getItemIfExists(TRACKED_TOKENS_KEY);
- if (_.isEmpty(trackedTokensJSONString)) {
- return {};
- }
- const trackedTokensByUserAddress = JSON.parse(trackedTokensJSONString);
- return trackedTokensByUserAddress;
- },
- getTrackedTokensIfExists(userAddress: string, networkId: number): Token[] {
- const trackedTokensJSONString = localStorage.getItemIfExists(TRACKED_TOKENS_KEY);
- if (_.isEmpty(trackedTokensJSONString)) {
- return undefined;
- }
- const trackedTokensByUserAddress = JSON.parse(trackedTokensJSONString);
- const trackedTokensByNetworkId = trackedTokensByUserAddress[userAddress];
- if (_.isUndefined(trackedTokensByNetworkId)) {
- return undefined;
- }
- const trackedTokens = trackedTokensByNetworkId[networkId];
- return trackedTokens;
- },
- removeTrackedToken(userAddress: string, networkId: number, tokenAddress: string): void {
- const trackedTokensByUserAddress = this.getTrackedTokensByUserAddress();
- const trackedTokensByNetworkId = trackedTokensByUserAddress[userAddress];
- const trackedTokens = trackedTokensByNetworkId[networkId];
- const remainingTrackedTokens = _.filter(trackedTokens, (token: Token) => {
- return token.address !== tokenAddress;
- });
- trackedTokensByNetworkId[networkId] = remainingTrackedTokens;
- trackedTokensByUserAddress[userAddress] = trackedTokensByNetworkId;
- const trackedTokensByUserAddressJSONString = JSON.stringify(trackedTokensByUserAddress);
- localStorage.setItem(TRACKED_TOKENS_KEY, trackedTokensByUserAddressJSONString);
- },
+ // Clear trackedTokens localStorage if we've updated the config variable in an update
+ // that introduced a backward incompatible change requiring the tracked tokens to be re-set
+ clearIfRequired(): void {
+ const lastClearFillDate = localStorage.getItemIfExists(TRACKED_TOKENS_CLEAR_KEY);
+ if (lastClearFillDate !== configs.LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE) {
+ localStorage.removeItem(TRACKED_TOKENS_KEY);
+ }
+ localStorage.setItem(TRACKED_TOKENS_CLEAR_KEY, configs.LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE);
+ },
+ addTrackedTokenToUser(userAddress: string, networkId: number, token: Token): void {
+ const trackedTokensByUserAddress = this.getTrackedTokensByUserAddress();
+ let trackedTokensByNetworkId = trackedTokensByUserAddress[userAddress];
+ if (_.isUndefined(trackedTokensByNetworkId)) {
+ trackedTokensByNetworkId = {};
+ }
+ const trackedTokens = !_.isUndefined(trackedTokensByNetworkId[networkId])
+ ? trackedTokensByNetworkId[networkId]
+ : [];
+ trackedTokens.push(token);
+ trackedTokensByNetworkId[networkId] = trackedTokens;
+ trackedTokensByUserAddress[userAddress] = trackedTokensByNetworkId;
+ const trackedTokensByUserAddressJSONString = JSON.stringify(trackedTokensByUserAddress);
+ localStorage.setItem(TRACKED_TOKENS_KEY, trackedTokensByUserAddressJSONString);
+ },
+ getTrackedTokensByUserAddress(): TrackedTokensByUserAddress {
+ const trackedTokensJSONString = localStorage.getItemIfExists(TRACKED_TOKENS_KEY);
+ if (_.isEmpty(trackedTokensJSONString)) {
+ return {};
+ }
+ const trackedTokensByUserAddress = JSON.parse(trackedTokensJSONString);
+ return trackedTokensByUserAddress;
+ },
+ getTrackedTokensIfExists(userAddress: string, networkId: number): Token[] {
+ const trackedTokensJSONString = localStorage.getItemIfExists(TRACKED_TOKENS_KEY);
+ if (_.isEmpty(trackedTokensJSONString)) {
+ return undefined;
+ }
+ const trackedTokensByUserAddress = JSON.parse(trackedTokensJSONString);
+ const trackedTokensByNetworkId = trackedTokensByUserAddress[userAddress];
+ if (_.isUndefined(trackedTokensByNetworkId)) {
+ return undefined;
+ }
+ const trackedTokens = trackedTokensByNetworkId[networkId];
+ return trackedTokens;
+ },
+ removeTrackedToken(userAddress: string, networkId: number, tokenAddress: string): void {
+ const trackedTokensByUserAddress = this.getTrackedTokensByUserAddress();
+ const trackedTokensByNetworkId = trackedTokensByUserAddress[userAddress];
+ const trackedTokens = trackedTokensByNetworkId[networkId];
+ const remainingTrackedTokens = _.filter(trackedTokens, (token: Token) => {
+ return token.address !== tokenAddress;
+ });
+ trackedTokensByNetworkId[networkId] = remainingTrackedTokens;
+ trackedTokensByUserAddress[userAddress] = trackedTokensByNetworkId;
+ const trackedTokensByUserAddressJSONString = JSON.stringify(trackedTokensByUserAddress);
+ localStorage.setItem(TRACKED_TOKENS_KEY, trackedTokensByUserAddressJSONString);
+ },
};
diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx
index df731236e..b20244b29 100644
--- a/packages/website/ts/local_storage/trade_history_storage.tsx
+++ b/packages/website/ts/local_storage/trade_history_storage.tsx
@@ -11,84 +11,84 @@ const FILLS_LATEST_BLOCK = 'fillsLatestBlock';
const FILL_CLEAR_KEY = 'lastClearFillDate';
export const tradeHistoryStorage = {
- // Clear all fill related localStorage if we've updated the config variable in an update
- // that introduced a backward incompatible change requiring the user to re-fetch the fills from
- // the blockchain
- clearIfRequired() {
- const lastClearFillDate = localStorage.getItemIfExists(FILL_CLEAR_KEY);
- if (lastClearFillDate !== configs.LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE) {
- const localStorageKeys = localStorage.getAllKeys();
- _.each(localStorageKeys, key => {
- if (_.startsWith(key, `${FILLS_KEY}-`) || _.startsWith(key, `${FILLS_LATEST_BLOCK}-`)) {
- localStorage.removeItem(key);
- }
- });
- }
- localStorage.setItem(FILL_CLEAR_KEY, configs.LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE);
- },
- addFillToUser(userAddress: string, networkId: number, fill: Fill) {
- const fillsByHash = this.getUserFillsByHash(userAddress, networkId);
- const fillHash = this._getFillHash(fill);
- const doesFillExist = !_.isUndefined(fillsByHash[fillHash]);
- if (doesFillExist) {
- return; // noop
- }
- fillsByHash[fillHash] = fill;
- const userFillsJSONString = JSON.stringify(fillsByHash);
- const userFillsKey = this._getUserFillsKey(userAddress, networkId);
- localStorage.setItem(userFillsKey, userFillsJSONString);
- },
- removeFillFromUser(userAddress: string, networkId: number, fill: Fill) {
- const fillsByHash = this.getUserFillsByHash(userAddress, networkId);
- const fillHash = this._getFillHash(fill);
- const doesFillExist = !_.isUndefined(fillsByHash[fillHash]);
- if (!doesFillExist) {
- return; // noop
- }
- delete fillsByHash[fillHash];
- const userFillsJSONString = JSON.stringify(fillsByHash);
- const userFillsKey = this._getUserFillsKey(userAddress, networkId);
- localStorage.setItem(userFillsKey, userFillsJSONString);
- },
- getUserFillsByHash(userAddress: string, networkId: number): { [fillHash: string]: Fill } {
- const userFillsKey = this._getUserFillsKey(userAddress, networkId);
- const userFillsJSONString = localStorage.getItemIfExists(userFillsKey);
- if (_.isEmpty(userFillsJSONString)) {
- return {};
- }
- 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);
- });
- return userFillsByHash;
- },
- getFillsLatestBlock(userAddress: string, networkId: number): number {
- const userFillsLatestBlockKey = this._getFillsLatestBlockKey(userAddress, networkId);
- const blockNumberStr = localStorage.getItemIfExists(userFillsLatestBlockKey);
- if (_.isEmpty(blockNumberStr)) {
- return constants.GENESIS_ORDER_BLOCK_BY_NETWORK_ID[networkId];
- }
- const blockNumber = _.parseInt(blockNumberStr);
- return blockNumber;
- },
- setFillsLatestBlock(userAddress: string, networkId: number, blockNumber: number) {
- const userFillsLatestBlockKey = this._getFillsLatestBlockKey(userAddress, networkId);
- localStorage.setItem(userFillsLatestBlockKey, `${blockNumber}`);
- },
- _getUserFillsKey(userAddress: string, networkId: number) {
- const userFillsKey = `${FILLS_KEY}-${userAddress}-${networkId}`;
- return userFillsKey;
- },
- _getFillsLatestBlockKey(userAddress: string, networkId: number) {
- const userFillsLatestBlockKey = `${FILLS_LATEST_BLOCK}-${userAddress}-${networkId}`;
- return userFillsLatestBlockKey;
- },
- _getFillHash(fill: Fill): string {
- const fillJSON = JSON.stringify(fill);
- const fillHash = ethUtil.sha256(fillJSON);
- return fillHash.toString('hex');
- },
+ // Clear all fill related localStorage if we've updated the config variable in an update
+ // that introduced a backward incompatible change requiring the user to re-fetch the fills from
+ // the blockchain
+ clearIfRequired() {
+ const lastClearFillDate = localStorage.getItemIfExists(FILL_CLEAR_KEY);
+ if (lastClearFillDate !== configs.LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE) {
+ const localStorageKeys = localStorage.getAllKeys();
+ _.each(localStorageKeys, key => {
+ if (_.startsWith(key, `${FILLS_KEY}-`) || _.startsWith(key, `${FILLS_LATEST_BLOCK}-`)) {
+ localStorage.removeItem(key);
+ }
+ });
+ }
+ localStorage.setItem(FILL_CLEAR_KEY, configs.LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE);
+ },
+ addFillToUser(userAddress: string, networkId: number, fill: Fill) {
+ const fillsByHash = this.getUserFillsByHash(userAddress, networkId);
+ const fillHash = this._getFillHash(fill);
+ const doesFillExist = !_.isUndefined(fillsByHash[fillHash]);
+ if (doesFillExist) {
+ return; // noop
+ }
+ fillsByHash[fillHash] = fill;
+ const userFillsJSONString = JSON.stringify(fillsByHash);
+ const userFillsKey = this._getUserFillsKey(userAddress, networkId);
+ localStorage.setItem(userFillsKey, userFillsJSONString);
+ },
+ removeFillFromUser(userAddress: string, networkId: number, fill: Fill) {
+ const fillsByHash = this.getUserFillsByHash(userAddress, networkId);
+ const fillHash = this._getFillHash(fill);
+ const doesFillExist = !_.isUndefined(fillsByHash[fillHash]);
+ if (!doesFillExist) {
+ return; // noop
+ }
+ delete fillsByHash[fillHash];
+ const userFillsJSONString = JSON.stringify(fillsByHash);
+ const userFillsKey = this._getUserFillsKey(userAddress, networkId);
+ localStorage.setItem(userFillsKey, userFillsJSONString);
+ },
+ getUserFillsByHash(userAddress: string, networkId: number): { [fillHash: string]: Fill } {
+ const userFillsKey = this._getUserFillsKey(userAddress, networkId);
+ const userFillsJSONString = localStorage.getItemIfExists(userFillsKey);
+ if (_.isEmpty(userFillsJSONString)) {
+ return {};
+ }
+ 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);
+ });
+ return userFillsByHash;
+ },
+ getFillsLatestBlock(userAddress: string, networkId: number): number {
+ const userFillsLatestBlockKey = this._getFillsLatestBlockKey(userAddress, networkId);
+ const blockNumberStr = localStorage.getItemIfExists(userFillsLatestBlockKey);
+ if (_.isEmpty(blockNumberStr)) {
+ return constants.GENESIS_ORDER_BLOCK_BY_NETWORK_ID[networkId];
+ }
+ const blockNumber = _.parseInt(blockNumberStr);
+ return blockNumber;
+ },
+ setFillsLatestBlock(userAddress: string, networkId: number, blockNumber: number) {
+ const userFillsLatestBlockKey = this._getFillsLatestBlockKey(userAddress, networkId);
+ localStorage.setItem(userFillsLatestBlockKey, `${blockNumber}`);
+ },
+ _getUserFillsKey(userAddress: string, networkId: number) {
+ const userFillsKey = `${FILLS_KEY}-${userAddress}-${networkId}`;
+ return userFillsKey;
+ },
+ _getFillsLatestBlockKey(userAddress: string, networkId: number) {
+ const userFillsLatestBlockKey = `${FILLS_LATEST_BLOCK}-${userAddress}-${networkId}`;
+ return userFillsLatestBlockKey;
+ },
+ _getFillHash(fill: Fill): string {
+ const fillJSON = JSON.stringify(fill);
+ const fillHash = ethUtil.sha256(fillJSON);
+ return fillHash.toString('hex');
+ },
};
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index c929673f5..411456427 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -10,239 +10,239 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const teamRow1: ProfileInfo[] = [
- {
- name: 'Will Warren',
- title: 'Co-founder & CEO',
- description: `Smart contract R&D. Previously applied physics at Los Alamos \
+ {
+ name: 'Will Warren',
+ title: 'Co-founder & CEO',
+ description: `Smart contract R&D. Previously applied physics at Los Alamos \
Nat Lab. Mechanical engineering at UC San Diego. PhD dropout.`,
- image: '/images/team/will.jpg',
- linkedIn: 'https://www.linkedin.com/in/will-warren-92aab62b/',
- github: 'https://github.com/willwarren89',
- medium: 'https://medium.com/@willwarren89',
- },
- {
- name: 'Amir Bandeali',
- title: 'Co-founder & CTO',
- description: `Smart contract R&D. Previously fixed income trader at DRW. \
+ image: '/images/team/will.jpg',
+ linkedIn: 'https://www.linkedin.com/in/will-warren-92aab62b/',
+ github: 'https://github.com/willwarren89',
+ medium: 'https://medium.com/@willwarren89',
+ },
+ {
+ name: 'Amir Bandeali',
+ title: 'Co-founder & CTO',
+ description: `Smart contract R&D. Previously fixed income trader at DRW. \
Finance at University of Illinois, Urbana-Champaign.`,
- image: '/images/team/amir.jpeg',
- linkedIn: 'https://www.linkedin.com/in/abandeali1/',
- github: 'https://github.com/abandeali1',
- medium: 'https://medium.com/@abandeali1',
- },
- {
- name: 'Fabio Berger',
- title: 'Senior Engineer',
- description: `Full-stack blockchain engineer. Previously software engineer \
+ image: '/images/team/amir.jpeg',
+ linkedIn: 'https://www.linkedin.com/in/abandeali1/',
+ github: 'https://github.com/abandeali1',
+ medium: 'https://medium.com/@abandeali1',
+ },
+ {
+ name: 'Fabio Berger',
+ title: 'Senior Engineer',
+ description: `Full-stack blockchain engineer. Previously software engineer \
at Airtable and founder of WealthLift. Computer science at Duke.`,
- image: '/images/team/fabio.jpg',
- linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/',
- github: 'https://github.com/fabioberger',
- medium: 'https://medium.com/@fabioberger',
- },
+ image: '/images/team/fabio.jpg',
+ linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/',
+ github: 'https://github.com/fabioberger',
+ medium: 'https://medium.com/@fabioberger',
+ },
];
const teamRow2: ProfileInfo[] = [
- {
- name: 'Alex Xu',
- title: 'Director of Operations',
- description: `Strategy and operations. Previously digital marketing at Google \
+ {
+ name: 'Alex Xu',
+ title: 'Director of Operations',
+ description: `Strategy and operations. Previously digital marketing at Google \
and vendor management at Amazon. Economics at UC San Diego.`,
- image: '/images/team/alex.jpg',
- linkedIn: 'https://www.linkedin.com/in/alex-xu/',
- github: '',
- medium: 'https://medium.com/@aqxu',
- },
- {
- name: 'Leonid Logvinov',
- title: 'Engineer',
- description: `Full-stack blockchain engineer. Previously blockchain engineer \
+ image: '/images/team/alex.jpg',
+ linkedIn: 'https://www.linkedin.com/in/alex-xu/',
+ github: '',
+ medium: 'https://medium.com/@aqxu',
+ },
+ {
+ name: 'Leonid Logvinov',
+ title: 'Engineer',
+ description: `Full-stack blockchain engineer. Previously blockchain engineer \
at Neufund. Computer science at University of Warsaw.`,
- image: '/images/team/leonid.png',
- linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/',
- github: 'https://github.com/LogvinovLeon',
- medium: 'https://medium.com/@Logvinov',
- },
- {
- name: 'Ben Burns',
- title: 'Designer',
- description: `Product, motion, and graphic designer. Previously designer \
+ image: '/images/team/leonid.png',
+ linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/',
+ github: 'https://github.com/LogvinovLeon',
+ medium: 'https://medium.com/@Logvinov',
+ },
+ {
+ name: 'Ben Burns',
+ title: 'Designer',
+ description: `Product, motion, and graphic designer. Previously designer \
at Airtable and Apple. Digital Design at University of Cincinnati.`,
- image: '/images/team/ben.jpg',
- linkedIn: 'https://www.linkedin.com/in/ben-burns-30170478/',
- github: '',
- medium: '',
- },
+ image: '/images/team/ben.jpg',
+ linkedIn: 'https://www.linkedin.com/in/ben-burns-30170478/',
+ github: '',
+ medium: '',
+ },
];
const teamRow3: ProfileInfo[] = [
- {
- name: 'Brandon Millman',
- title: 'Senior Engineer',
- description: `Full-stack engineer. Previously senior software engineer at \
+ {
+ name: 'Brandon Millman',
+ title: 'Senior Engineer',
+ description: `Full-stack engineer. Previously senior software engineer at \
Twitter. Electrical and Computer Engineering at Duke.`,
- image: '/images/team/brandon.png',
- linkedIn: 'https://www.linkedin.com/in/brandon-millman-b093a022/',
- github: 'https://github.com/BMillman19',
- medium: 'https://medium.com/@bchillman',
- },
- {
- name: 'Tom Schmidt',
- title: 'Product Manager',
- description: `Previously engineering at Apple, product management at Facebook and Instagram. Computer Science at Stanford.`,
- image: '/images/team/tom.jpg',
- linkedIn: 'https://www.linkedin.com/in/tomhschmidt/',
- github: 'https://github.com/tomhschmidt',
- medium: '',
- },
- {
- name: 'Jacob Evans',
- title: 'Blockchain Engineer',
- description: `Previously software engineer at Qantas and RSA Security.`,
- image: '/images/team/jacob.jpg',
- linkedIn: 'https://www.linkedin.com/in/dekzter/',
- github: 'https://github.com/dekz',
- medium: '',
- },
+ image: '/images/team/brandon.png',
+ linkedIn: 'https://www.linkedin.com/in/brandon-millman-b093a022/',
+ github: 'https://github.com/BMillman19',
+ medium: 'https://medium.com/@bchillman',
+ },
+ {
+ name: 'Tom Schmidt',
+ title: 'Product Manager',
+ description: `Previously engineering at Apple, product management at Facebook and Instagram. Computer Science at Stanford.`,
+ image: '/images/team/tom.jpg',
+ linkedIn: 'https://www.linkedin.com/in/tomhschmidt/',
+ github: 'https://github.com/tomhschmidt',
+ medium: '',
+ },
+ {
+ name: 'Jacob Evans',
+ title: 'Blockchain Engineer',
+ description: `Previously software engineer at Qantas and RSA Security.`,
+ image: '/images/team/jacob.jpg',
+ linkedIn: 'https://www.linkedin.com/in/dekzter/',
+ github: 'https://github.com/dekz',
+ medium: '',
+ },
];
const advisors: ProfileInfo[] = [
- {
- name: 'Fred Ehrsam',
- description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.',
- image: '/images/advisors/fred.jpg',
- linkedIn: 'https://www.linkedin.com/in/fredehrsam/',
- medium: 'https://medium.com/@FEhrsam',
- twitter: 'https://twitter.com/FEhrsam',
- },
- {
- name: 'Olaf Carlson-Wee',
- image: '/images/advisors/olaf.png',
- description: 'Founder of Polychain Capital. First hire at Coinbase. Angel investor.',
- linkedIn: 'https://www.linkedin.com/in/olafcw/',
- angellist: 'https://angel.co/olafcw',
- },
- {
- name: 'Joey Krug',
- description: `Co-CIO at Pantera Capital. Founder of Augur. Thiel 20 Under 20 Fellow.`,
- image: '/images/advisors/joey.jpg',
- linkedIn: 'https://www.linkedin.com/in/joeykrug/',
- github: 'https://github.com/joeykrug',
- angellist: 'https://angel.co/joeykrug',
- },
- {
- name: 'Linda Xie',
- description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.',
- image: '/images/advisors/linda.jpg',
- linkedIn: 'https://www.linkedin.com/in/lindaxie/',
- medium: 'https://medium.com/@linda.xie',
- twitter: 'https://twitter.com/ljxie',
- },
+ {
+ name: 'Fred Ehrsam',
+ description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.',
+ image: '/images/advisors/fred.jpg',
+ linkedIn: 'https://www.linkedin.com/in/fredehrsam/',
+ medium: 'https://medium.com/@FEhrsam',
+ twitter: 'https://twitter.com/FEhrsam',
+ },
+ {
+ name: 'Olaf Carlson-Wee',
+ image: '/images/advisors/olaf.png',
+ description: 'Founder of Polychain Capital. First hire at Coinbase. Angel investor.',
+ linkedIn: 'https://www.linkedin.com/in/olafcw/',
+ angellist: 'https://angel.co/olafcw',
+ },
+ {
+ name: 'Joey Krug',
+ description: `Co-CIO at Pantera Capital. Founder of Augur. Thiel 20 Under 20 Fellow.`,
+ image: '/images/advisors/joey.jpg',
+ linkedIn: 'https://www.linkedin.com/in/joeykrug/',
+ github: 'https://github.com/joeykrug',
+ angellist: 'https://angel.co/joeykrug',
+ },
+ {
+ name: 'Linda Xie',
+ description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.',
+ image: '/images/advisors/linda.jpg',
+ linkedIn: 'https://www.linkedin.com/in/lindaxie/',
+ medium: 'https://medium.com/@linda.xie',
+ twitter: 'https://twitter.com/ljxie',
+ },
];
export interface AboutProps {
- source: string;
- location: Location;
+ source: string;
+ location: Location;
}
interface AboutState {}
const styles: Styles = {
- header: {
- fontFamily: 'Roboto Mono',
- fontSize: 36,
- color: 'black',
- paddingTop: 110,
- },
- weAreHiring: {
- fontSize: 30,
- color: colors.darkestGrey,
- fontFamily: 'Roboto Mono',
- letterSpacing: 7.5,
- },
+ header: {
+ fontFamily: 'Roboto Mono',
+ fontSize: 36,
+ color: 'black',
+ paddingTop: 110,
+ },
+ weAreHiring: {
+ fontSize: 30,
+ color: colors.darkestGrey,
+ fontFamily: 'Roboto Mono',
+ letterSpacing: 7.5,
+ },
};
export class About extends React.Component<AboutProps, AboutState> {
- public componentDidMount() {
- window.scrollTo(0, 0);
- }
- public render() {
- return (
- <div style={{ backgroundColor: colors.lightestGrey }}>
- <DocumentTitle title="0x About Us" />
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- 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
- className="pt3"
- 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.
- </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">{this._renderProfiles(teamRow3)}</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',
- }}
- >
- 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}>
- WE'RE HIRING
- </div>
- <div
- className="pb4 mb4"
- 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' }}>
- join our team
- </a>
- . We value passion, diversity and unique perspectives.
- </div>
- </div>
- </div>
- <Footer />
- </div>
- );
- }
- private _renderProfiles(profiles: ProfileInfo[]) {
- const numIndiv = profiles.length;
- const colSize = utils.getColSize(numIndiv);
- return _.map(profiles, profile => {
- return (
- <div key={`profile-${profile.name}`}>
- <Profile colSize={colSize} profileInfo={profile} />
- </div>
- );
- });
- }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ public render() {
+ return (
+ <div style={{ backgroundColor: colors.lightestGrey }}>
+ <DocumentTitle title="0x About Us" />
+ <TopBar
+ blockchainIsLoaded={false}
+ location={this.props.location}
+ 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
+ className="pt3"
+ 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.
+ </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">{this._renderProfiles(teamRow3)}</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',
+ }}
+ >
+ 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}>
+ WE'RE HIRING
+ </div>
+ <div
+ className="pb4 mb4"
+ 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' }}>
+ join our team
+ </a>
+ . We value passion, diversity and unique perspectives.
+ </div>
+ </div>
+ </div>
+ <Footer />
+ </div>
+ );
+ }
+ private _renderProfiles(profiles: ProfileInfo[]) {
+ const numIndiv = profiles.length;
+ const colSize = utils.getColSize(numIndiv);
+ return _.map(profiles, profile => {
+ return (
+ <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 18b4e0d5a..f1830851f 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -5,75 +5,75 @@ import { colors } from 'ts/utils/colors';
const IMAGE_DIMENSION = 149;
const styles: Styles = {
- subheader: {
- textTransform: 'uppercase',
- fontSize: 32,
- margin: 0,
- },
- imageContainer: {
- width: IMAGE_DIMENSION,
- height: IMAGE_DIMENSION,
- boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px',
- },
+ subheader: {
+ textTransform: 'uppercase',
+ fontSize: 32,
+ margin: 0,
+ },
+ imageContainer: {
+ width: IMAGE_DIMENSION,
+ height: IMAGE_DIMENSION,
+ boxShadow: 'rgba(0, 0, 0, 0.19) 2px 5px 10px',
+ },
};
interface ProfileProps {
- colSize: number;
- profileInfo: ProfileInfo;
+ colSize: number;
+ profileInfo: ProfileInfo;
}
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>
- <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}>
- {props.profileInfo.name}
- </div>
- {!_.isUndefined(props.profileInfo.title) && (
- <div
- className="pt1 center"
- 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">
- {props.profileInfo.description}
- </div>
- <div className="flex pb3 mx-auto sm-hide xs-hide" style={{ width: 280, opacity: 0.5 }}>
- {renderSocialMediaIcons(props.profileInfo)}
- </div>
- </div>
- </div>
- );
+ 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>
+ <div className="center" style={{ fontSize: 18, fontWeight: 'bold', paddingTop: 20 }}>
+ {props.profileInfo.name}
+ </div>
+ {!_.isUndefined(props.profileInfo.title) && (
+ <div
+ className="pt1 center"
+ 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">
+ {props.profileInfo.description}
+ </div>
+ <div className="flex pb3 mx-auto sm-hide xs-hide" style={{ width: 280, opacity: 0.5 }}>
+ {renderSocialMediaIcons(props.profileInfo)}
+ </div>
+ </div>
+ </div>
+ );
}
function renderSocialMediaIcons(profileInfo: ProfileInfo) {
- const icons = [
- renderSocialMediaIcon('zmdi-github-box', profileInfo.github),
- renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn),
- renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter),
- ];
- return icons;
+ const icons = [
+ renderSocialMediaIcon('zmdi-github-box', profileInfo.github),
+ renderSocialMediaIcon('zmdi-linkedin-box', profileInfo.linkedIn),
+ renderSocialMediaIcon('zmdi-twitter-box', profileInfo.twitter),
+ ];
+ return icons;
}
function renderSocialMediaIcon(iconName: string, url: string) {
- if (_.isEmpty(url)) {
- return null;
- }
+ if (_.isEmpty(url)) {
+ return null;
+ }
- 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>
- </div>
- );
+ 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>
+ </div>
+ );
}
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 23cfd96bd..6be39f586 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -4,20 +4,20 @@ import * as ReactMarkdown from 'react-markdown';
import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
interface CommentProps {
- comment: string;
- className?: string;
+ comment: string;
+ className?: string;
}
const defaultProps = {
- className: '',
+ className: '',
};
export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
- return (
- <div className={`${props.className} comment`}>
- <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
- </div>
- );
+ return (
+ <div className={`${props.className} comment`}>
+ <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+ </div>
+ );
};
Comment.defaultProps = defaultProps;
diff --git a/packages/website/ts/pages/documentation/custom_enum.tsx b/packages/website/ts/pages/documentation/custom_enum.tsx
index 8d50a2f52..0006b8d7e 100644
--- a/packages/website/ts/pages/documentation/custom_enum.tsx
+++ b/packages/website/ts/pages/documentation/custom_enum.tsx
@@ -6,27 +6,27 @@ import { utils } from 'ts/utils/utils';
const STRING_ENUM_CODE_PREFIX = ' strEnum(';
interface CustomEnumProps {
- type: CustomType;
+ type: CustomType;
}
// This component renders custom string enums that was a work-around for versions of
// TypeScript <2.4.0 that did not support them natively. We keep it around to support
// older versions of 0x.js <0.9.0
export function CustomEnum(props: CustomEnumProps) {
- const type = props.type;
- if (!_.startsWith(type.defaultValue, STRING_ENUM_CODE_PREFIX)) {
- utils.consoleLog('We do not yet support `Variable` types that are not strEnums');
- return null;
- }
- // Remove the prefix and postfix, leaving only the strEnum values without quotes.
- const enumValues = type.defaultValue.slice(10, -3).replace(/'/g, '');
- return (
- <span>
- {`{`}
- {'\t'}
- {enumValues}
- <br />
- {`}`}
- </span>
- );
+ const type = props.type;
+ if (!_.startsWith(type.defaultValue, STRING_ENUM_CODE_PREFIX)) {
+ utils.consoleLog('We do not yet support `Variable` types that are not strEnums');
+ return null;
+ }
+ // Remove the prefix and postfix, leaving only the strEnum values without quotes.
+ const enumValues = type.defaultValue.slice(10, -3).replace(/'/g, '');
+ return (
+ <span>
+ {`{`}
+ {'\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 4b1ec122a..e1080f3a0 100644
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ b/packages/website/ts/pages/documentation/docs_info.ts
@@ -1,111 +1,111 @@
import compareVersions = require('compare-versions');
import * as _ from 'lodash';
import {
- DocAgnosticFormat,
- DocsInfoConfig,
- DocsMenu,
- DoxityDocObj,
- MenuSubsectionsBySection,
- SectionsMap,
- TypeDocNode,
+ DocAgnosticFormat,
+ DocsInfoConfig,
+ DocsMenu,
+ DoxityDocObj,
+ MenuSubsectionsBySection,
+ SectionsMap,
+ TypeDocNode,
} from 'ts/types';
export class DocsInfo {
- public displayName: string;
- public packageUrl: string;
- public subPackageName?: string;
- public websitePath: string;
- public docsJsonRoot: string;
- public menu: DocsMenu;
- public sections: SectionsMap;
- public sectionNameToMarkdown: { [sectionName: string]: string };
- private _docsInfo: DocsInfoConfig;
- constructor(config: DocsInfoConfig) {
- this.displayName = config.displayName;
- this.packageUrl = config.packageUrl;
- this.subPackageName = config.subPackageName;
- this.websitePath = config.websitePath;
- this.docsJsonRoot = config.docsJsonRoot;
- this.sections = config.sections;
- this.sectionNameToMarkdown = config.sectionNameToMarkdown;
- this._docsInfo = config;
- }
- public isPublicType(typeName: string): boolean {
- if (_.isUndefined(this._docsInfo.publicTypes)) {
- return false;
- }
- const isPublic = _.includes(this._docsInfo.publicTypes, typeName);
- return isPublic;
- }
- public getModulePathsIfExists(sectionName: string): string[] {
- const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName];
- return modulePathsIfExists;
- }
- public getMenu(selectedVersion?: string): { [section: string]: string[] } {
- if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) {
- return this._docsInfo.menu;
- }
+ public displayName: string;
+ public packageUrl: string;
+ public subPackageName?: string;
+ public websitePath: string;
+ public docsJsonRoot: string;
+ public menu: DocsMenu;
+ public sections: SectionsMap;
+ public sectionNameToMarkdown: { [sectionName: string]: string };
+ private _docsInfo: DocsInfoConfig;
+ constructor(config: DocsInfoConfig) {
+ this.displayName = config.displayName;
+ this.packageUrl = config.packageUrl;
+ this.subPackageName = config.subPackageName;
+ this.websitePath = config.websitePath;
+ this.docsJsonRoot = config.docsJsonRoot;
+ this.sections = config.sections;
+ this.sectionNameToMarkdown = config.sectionNameToMarkdown;
+ this._docsInfo = config;
+ }
+ public isPublicType(typeName: string): boolean {
+ if (_.isUndefined(this._docsInfo.publicTypes)) {
+ return false;
+ }
+ const isPublic = _.includes(this._docsInfo.publicTypes, typeName);
+ return isPublic;
+ }
+ public getModulePathsIfExists(sectionName: string): string[] {
+ const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName];
+ return modulePathsIfExists;
+ }
+ public getMenu(selectedVersion?: string): { [section: string]: string[] } {
+ if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) {
+ return this._docsInfo.menu;
+ }
- const finalMenu = _.cloneDeep(this._docsInfo.menu);
- if (_.isUndefined(finalMenu.contracts)) {
- return finalMenu;
- }
+ const finalMenu = _.cloneDeep(this._docsInfo.menu);
+ if (_.isUndefined(finalMenu.contracts)) {
+ return finalMenu;
+ }
- // TODO: refactor to include more sections then simply the `contracts` section
- finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => {
- const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
- if (!_.isUndefined(versionIntroducedIfExists)) {
- const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0;
- return existsInSelectedVersion;
- } else {
- return true;
- }
- });
- return finalMenu;
- }
- public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
- const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
- if (_.isUndefined(docAgnosticFormat)) {
- return menuSubsectionsBySection;
- }
+ // TODO: refactor to include more sections then simply the `contracts` section
+ finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => {
+ const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
+ if (!_.isUndefined(versionIntroducedIfExists)) {
+ const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0;
+ return existsInSelectedVersion;
+ } else {
+ return true;
+ }
+ });
+ return finalMenu;
+ }
+ public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
+ const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
+ if (_.isUndefined(docAgnosticFormat)) {
+ return menuSubsectionsBySection;
+ }
- const docSections = _.keys(this.sections);
- _.each(docSections, sectionName => {
- const docSection = docAgnosticFormat[sectionName];
- if (_.isUndefined(docSection)) {
- return; // no-op
- }
+ const docSections = _.keys(this.sections);
+ _.each(docSections, sectionName => {
+ const docSection = docAgnosticFormat[sectionName];
+ if (_.isUndefined(docSection)) {
+ return; // no-op
+ }
- if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) {
- const sortedTypesNames = _.sortBy(docSection.types, 'name');
- const typeNames = _.map(sortedTypesNames, t => t.name);
- menuSubsectionsBySection[sectionName] = typeNames;
- } else {
- let eventNames: string[] = [];
- if (!_.isUndefined(docSection.events)) {
- const sortedEventNames = _.sortBy(docSection.events, 'name');
- eventNames = _.map(sortedEventNames, m => m.name);
- }
- const sortedMethodNames = _.sortBy(docSection.methods, 'name');
- const methodNames = _.map(sortedMethodNames, m => m.name);
- menuSubsectionsBySection[sectionName] = [...methodNames, ...eventNames];
- }
- });
- return menuSubsectionsBySection;
- }
- public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat) {
- if (_.isUndefined(this.sections.types)) {
- return {};
- }
+ if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) {
+ const sortedTypesNames = _.sortBy(docSection.types, 'name');
+ const typeNames = _.map(sortedTypesNames, t => t.name);
+ menuSubsectionsBySection[sectionName] = typeNames;
+ } else {
+ let eventNames: string[] = [];
+ if (!_.isUndefined(docSection.events)) {
+ const sortedEventNames = _.sortBy(docSection.events, 'name');
+ eventNames = _.map(sortedEventNames, m => m.name);
+ }
+ const sortedMethodNames = _.sortBy(docSection.methods, 'name');
+ const methodNames = _.map(sortedMethodNames, m => m.name);
+ menuSubsectionsBySection[sectionName] = [...methodNames, ...eventNames];
+ }
+ });
+ return menuSubsectionsBySection;
+ }
+ public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat) {
+ if (_.isUndefined(this.sections.types)) {
+ return {};
+ }
- const typeDocSection = docAgnosticFormat[this.sections.types];
- const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name');
- return typeDefinitionByName;
- }
- public isVisibleConstructor(sectionName: string): boolean {
- return _.includes(this._docsInfo.visibleConstructors, sectionName);
- }
- public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat {
- return this._docsInfo.convertToDocAgnosticFormatFn(docObj, this);
- }
+ const typeDocSection = docAgnosticFormat[this.sections.types];
+ const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name');
+ return typeDefinitionByName;
+ }
+ public isVisibleConstructor(sectionName: string): boolean {
+ return _.includes(this._docsInfo.visibleConstructors, sectionName);
+ }
+ 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 2315847ad..0fc41d775 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -19,17 +19,17 @@ 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,
- DoxityDocObj,
- EtherscanLinkSuffixes,
- Event,
- Networks,
- Property,
- SolidityMethod,
- Styles,
- TypeDefinitionByName,
- TypescriptMethod,
+ AddressByContractName,
+ DocAgnosticFormat,
+ DoxityDocObj,
+ EtherscanLinkSuffixes,
+ Event,
+ Networks,
+ Property,
+ SolidityMethod,
+ Styles,
+ TypeDefinitionByName,
+ TypescriptMethod,
} from 'ts/types';
import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
@@ -40,340 +40,340 @@ import { utils } from 'ts/utils/utils';
const SCROLL_TOP_ID = 'docsScrollTop';
const networkNameToColor: { [network: string]: string } = {
- [Networks.kovan]: colors.purple,
- [Networks.ropsten]: colors.red,
- [Networks.mainnet]: colors.turquois,
+ [Networks.kovan]: colors.purple,
+ [Networks.ropsten]: colors.red,
+ [Networks.mainnet]: colors.turquois,
};
export interface DocumentationAllProps {
- source: string;
- location: Location;
- dispatcher: Dispatcher;
- docsVersion: string;
- availableDocVersions: string[];
- docsInfo: DocsInfo;
+ source: string;
+ location: Location;
+ dispatcher: Dispatcher;
+ docsVersion: string;
+ availableDocVersions: string[];
+ docsInfo: DocsInfo;
}
interface DocumentationState {
- docAgnosticFormat?: DocAgnosticFormat;
+ docAgnosticFormat?: DocAgnosticFormat;
}
const styles: Styles = {
- mainContainers: {
- position: 'absolute',
- top: 1,
- left: 0,
- bottom: 0,
- right: 0,
- overflowZ: 'hidden',
- overflowY: 'scroll',
- minHeight: 'calc(100vh - 1px)',
- WebkitOverflowScrolling: 'touch',
- },
- menuContainer: {
- borderColor: colors.grey300,
- maxWidth: 330,
- marginLeft: 20,
- },
+ mainContainers: {
+ position: 'absolute',
+ top: 1,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ overflowZ: 'hidden',
+ overflowY: 'scroll',
+ minHeight: 'calc(100vh - 1px)',
+ WebkitOverflowScrolling: 'touch',
+ },
+ menuContainer: {
+ borderColor: colors.grey300,
+ maxWidth: 330,
+ marginLeft: 20,
+ },
};
export class Documentation extends React.Component<DocumentationAllProps, DocumentationState> {
- constructor(props: DocumentationAllProps) {
- super(props);
- this.state = {
- docAgnosticFormat: undefined,
- };
- }
- public componentWillMount() {
- const pathName = this.props.location.pathname;
- const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1);
- const versions = findVersions(lastSegment);
- const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined;
- // tslint:disable-next-line:no-floating-promises
- this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
- }
- public render() {
- const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
- ? {}
- : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
- return (
- <div>
- <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} />
- <TopBar
- blockchainIsLoaded={false}
- location={this.props.location}
- docsVersion={this.props.docsVersion}
- availableDocVersions={this.props.availableDocVersions}
- menu={this.props.docsInfo.getMenu(this.props.docsVersion)}
- menuSubsectionsBySection={menuSubsectionsBySection}
- shouldFullWidth={true}
- docsInfo={this.props.docsInfo}
- />
- {_.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%)' }}
- >
- <div className="center pb2">
- <CircularProgress size={40} thickness={5} />
- </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 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 }}
- >
- <NestedSidebarMenu
- selectedVersion={this.props.docsVersion}
- versions={this.props.availableDocVersions}
- topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
- menuSubsectionsBySection={menuSubsectionsBySection}
- docPath={this.props.docsInfo.websitePath}
- />
- </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={SCROLL_TOP_ID} />
- <h1 className="md-pl2 sm-pl3">
- <a href={this.props.docsInfo.packageUrl} target="_blank">
- {this.props.docsInfo.displayName}
- </a>
- </h1>
- {this._renderDocumentation()}
- </div>
- </div>
- </div>
- )}
- </div>
- );
- }
- private _renderDocumentation(): React.ReactNode {
- const subMenus = _.values(this.props.docsInfo.getMenu());
- const orderedSectionNames = _.flatten(subMenus);
+ constructor(props: DocumentationAllProps) {
+ super(props);
+ this.state = {
+ docAgnosticFormat: undefined,
+ };
+ }
+ public componentWillMount() {
+ const pathName = this.props.location.pathname;
+ const lastSegment = pathName.substr(pathName.lastIndexOf('/') + 1);
+ const versions = findVersions(lastSegment);
+ const preferredVersionIfExists = versions.length > 0 ? versions[0] : undefined;
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists);
+ }
+ public render() {
+ const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
+ ? {}
+ : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
+ return (
+ <div>
+ <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} />
+ <TopBar
+ blockchainIsLoaded={false}
+ location={this.props.location}
+ docsVersion={this.props.docsVersion}
+ availableDocVersions={this.props.availableDocVersions}
+ menu={this.props.docsInfo.getMenu(this.props.docsVersion)}
+ menuSubsectionsBySection={menuSubsectionsBySection}
+ shouldFullWidth={true}
+ docsInfo={this.props.docsInfo}
+ />
+ {_.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%)' }}
+ >
+ <div className="center pb2">
+ <CircularProgress size={40} thickness={5} />
+ </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 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 }}
+ >
+ <NestedSidebarMenu
+ selectedVersion={this.props.docsVersion}
+ versions={this.props.availableDocVersions}
+ topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
+ menuSubsectionsBySection={menuSubsectionsBySection}
+ docPath={this.props.docsInfo.websitePath}
+ />
+ </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={SCROLL_TOP_ID} />
+ <h1 className="md-pl2 sm-pl3">
+ <a href={this.props.docsInfo.packageUrl} target="_blank">
+ {this.props.docsInfo.displayName}
+ </a>
+ </h1>
+ {this._renderDocumentation()}
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+ }
+ private _renderDocumentation(): React.ReactNode {
+ const subMenus = _.values(this.props.docsInfo.getMenu());
+ const orderedSectionNames = _.flatten(subMenus);
- const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.state.docAgnosticFormat);
- const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
+ const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.state.docAgnosticFormat);
+ const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
- return renderedSections;
- }
- private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
- const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName];
- if (!_.isUndefined(markdownFileIfExists)) {
- return (
- <MarkdownSection
- key={`markdown-section-${sectionName}`}
- sectionName={sectionName}
- markdownContent={markdownFileIfExists}
- />
- );
- }
+ return renderedSections;
+ }
+ private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
+ const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName];
+ if (!_.isUndefined(markdownFileIfExists)) {
+ return (
+ <MarkdownSection
+ key={`markdown-section-${sectionName}`}
+ sectionName={sectionName}
+ markdownContent={markdownFileIfExists}
+ />
+ );
+ }
- const docSection = this.state.docAgnosticFormat[sectionName];
- if (_.isUndefined(docSection)) {
- return null;
- }
+ const docSection = this.state.docAgnosticFormat[sectionName];
+ if (_.isUndefined(docSection)) {
+ return null;
+ }
- const sortedTypes = _.sortBy(docSection.types, 'name');
- const typeDefs = _.map(sortedTypes, customType => {
- return (
- <TypeDefinition
- sectionName={sectionName}
- key={`type-${customType.name}`}
- customType={customType}
- docsInfo={this.props.docsInfo}
- />
- );
- });
+ const sortedTypes = _.sortBy(docSection.types, 'name');
+ const typeDefs = _.map(sortedTypes, customType => {
+ return (
+ <TypeDefinition
+ sectionName={sectionName}
+ key={`type-${customType.name}`}
+ customType={customType}
+ docsInfo={this.props.docsInfo}
+ />
+ );
+ });
- const sortedProperties = _.sortBy(docSection.properties, 'name');
- const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName));
+ const sortedProperties = _.sortBy(docSection.properties, 'name');
+ const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName));
- const sortedMethods = _.sortBy(docSection.methods, 'name');
- const methodDefs = _.map(sortedMethods, method => {
- const isConstructor = false;
- return this._renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName);
- });
+ const sortedMethods = _.sortBy(docSection.methods, 'name');
+ const methodDefs = _.map(sortedMethods, method => {
+ const isConstructor = false;
+ return this._renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName);
+ });
- const sortedEvents = _.sortBy(docSection.events, 'name');
- const eventDefs = _.map(sortedEvents, (event: Event, i: number) => {
- return (
- <EventDefinition
- key={`event-${event.name}-${i}`}
- event={event}
- sectionName={sectionName}
- docsInfo={this.props.docsInfo}
- />
- );
- });
- return (
- <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>
- {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 && (
- <div>
- <h2 className="thin">Properties</h2>
- <div>{propertyDefs}</div>
- </div>
- )}
- {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>
- )}
- </div>
- );
- }
- private _renderNetworkBadgesIfExists(sectionName: string) {
- const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
- 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,
- );
- return (
- <a
- key={`badge-${networkName}-${sectionName}`}
- href={linkIfExists}
- target="_blank"
- style={{ color: colors.white, textDecoration: 'none' }}
- >
- <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
- </a>
- );
- },
- );
- return badges;
- }
- 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 <div>{constructorDefs}</div>;
- }
- private _renderProperty(sectionName: string, property: Property): React.ReactNode {
- return (
- <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} />
- </code>
- {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" />}
- </div>
- );
- }
- 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}
- />
- );
- }
- private _scrollToHash(): void {
- const hashWithPrefix = this.props.location.hash;
- let hash = hashWithPrefix.slice(1);
- if (_.isEmpty(hash)) {
- hash = SCROLL_TOP_ID; // scroll to the top
- }
+ const sortedEvents = _.sortBy(docSection.events, 'name');
+ const eventDefs = _.map(sortedEvents, (event: Event, i: number) => {
+ return (
+ <EventDefinition
+ key={`event-${event.name}-${i}`}
+ event={event}
+ sectionName={sectionName}
+ docsInfo={this.props.docsInfo}
+ />
+ );
+ });
+ return (
+ <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>
+ {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 && (
+ <div>
+ <h2 className="thin">Properties</h2>
+ <div>{propertyDefs}</div>
+ </div>
+ )}
+ {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>
+ )}
+ </div>
+ );
+ }
+ private _renderNetworkBadgesIfExists(sectionName: string) {
+ const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
+ 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,
+ );
+ return (
+ <a
+ key={`badge-${networkName}-${sectionName}`}
+ href={linkIfExists}
+ target="_blank"
+ style={{ color: colors.white, textDecoration: 'none' }}
+ >
+ <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
+ </a>
+ );
+ },
+ );
+ return badges;
+ }
+ 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 <div>{constructorDefs}</div>;
+ }
+ private _renderProperty(sectionName: string, property: Property): React.ReactNode {
+ return (
+ <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} />
+ </code>
+ {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" />}
+ </div>
+ );
+ }
+ 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}
+ />
+ );
+ }
+ private _scrollToHash(): void {
+ const hashWithPrefix = this.props.location.hash;
+ let hash = hashWithPrefix.slice(1);
+ if (_.isEmpty(hash)) {
+ hash = SCROLL_TOP_ID; // scroll to the top
+ }
- 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);
- const versions = _.keys(versionToFileName);
- this.props.dispatcher.updateAvailableDocVersions(versions);
- const sortedVersions = semverSort.desc(versions);
- const latestVersion = sortedVersions[0];
+ 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);
+ const versions = _.keys(versionToFileName);
+ this.props.dispatcher.updateAvailableDocVersions(versions);
+ const sortedVersions = semverSort.desc(versions);
+ const latestVersion = sortedVersions[0];
- let versionToFetch = latestVersion;
- if (!_.isUndefined(preferredVersionIfExists)) {
- const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists];
- if (!_.isUndefined(preferredVersionFileNameIfExists)) {
- versionToFetch = preferredVersionIfExists;
- }
- }
- this.props.dispatcher.updateCurrentDocsVersion(versionToFetch);
+ let versionToFetch = latestVersion;
+ if (!_.isUndefined(preferredVersionIfExists)) {
+ const preferredVersionFileNameIfExists = versionToFileName[preferredVersionIfExists];
+ if (!_.isUndefined(preferredVersionFileNameIfExists)) {
+ versionToFetch = preferredVersionIfExists;
+ }
+ }
+ this.props.dispatcher.updateCurrentDocsVersion(versionToFetch);
- const versionFileNameToFetch = versionToFileName[versionToFetch];
- const versionDocObj = await docUtils.getJSONDocFileAsync(
- versionFileNameToFetch,
- this.props.docsInfo.docsJsonRoot,
- );
- const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
+ const versionFileNameToFetch = versionToFileName[versionToFetch];
+ const versionDocObj = await docUtils.getJSONDocFileAsync(
+ 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 7dfdee771..cfcc7f8d7 100644
--- a/packages/website/ts/pages/documentation/enum.tsx
+++ b/packages/website/ts/pages/documentation/enum.tsx
@@ -3,20 +3,20 @@ import * as React from 'react';
import { EnumValue } from 'ts/types';
interface EnumProps {
- values: EnumValue[];
+ values: EnumValue[];
}
export function Enum(props: EnumProps) {
- const values = _.map(props.values, (value, i) => {
- const defaultValueIfAny = !_.isUndefined(value.defaultValue) ? ` = ${value.defaultValue}` : '';
- return `\n\t${value.name}${defaultValueIfAny},`;
- });
- return (
- <span>
- {`{`}
- {values}
- <br />
- {`}`}
- </span>
- );
+ const values = _.map(props.values, (value, i) => {
+ const defaultValueIfAny = !_.isUndefined(value.defaultValue) ? ` = ${value.defaultValue}` : '';
+ return `\n\t${value.name}${defaultValueIfAny},`;
+ });
+ return (
+ <span>
+ {`{`}
+ {values}
+ <br />
+ {`}`}
+ </span>
+ );
}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 0e53e38e7..9274ae512 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -7,76 +7,76 @@ import { Event, EventArg, HeaderSizes } from 'ts/types';
import { colors } from 'ts/utils/colors';
interface EventDefinitionProps {
- event: Event;
- sectionName: string;
- docsInfo: DocsInfo;
+ event: Event;
+ sectionName: string;
+ docsInfo: DocsInfo;
}
interface EventDefinitionState {
- shouldShowAnchor: boolean;
+ shouldShowAnchor: boolean;
}
export class EventDefinition extends React.Component<EventDefinitionProps, EventDefinitionState> {
- constructor(props: EventDefinitionProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const event = this.props.event;
- return (
- <div
- id={`${this.props.sectionName}-${event.name}`}
- className="pb2"
- style={{ overflow: 'hidden', width: '100%' }}
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={`Event ${event.name}`}
- id={event.name}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- <div style={{ fontSize: 16 }}>
- <pre>
- <code className="hljs">{this._renderEventCode()}</code>
- </pre>
- </div>
- </div>
- );
- }
- private _renderEventCode() {
- 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} />
- );
- return (
- <span key={`eventArg-${eventArg.name}`}>
- {eventArg.name}
- {eventArg.isIndexed ? indexed : ''}: {type},
- </span>
- );
- });
- const argList = _.reduce(eventArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '\n\t', curr];
- });
- return (
- <span>
- {`{`}
- <br />
- {'\t'}
- {argList}
- <br />
- {`}`}
- </span>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ constructor(props: EventDefinitionProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const event = this.props.event;
+ return (
+ <div
+ id={`${this.props.sectionName}-${event.name}`}
+ className="pb2"
+ style={{ overflow: 'hidden', width: '100%' }}
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <AnchorTitle
+ headerSize={HeaderSizes.H3}
+ title={`Event ${event.name}`}
+ id={event.name}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ <div style={{ fontSize: 16 }}>
+ <pre>
+ <code className="hljs">{this._renderEventCode()}</code>
+ </pre>
+ </div>
+ </div>
+ );
+ }
+ private _renderEventCode() {
+ 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} />
+ );
+ return (
+ <span key={`eventArg-${eventArg.name}`}>
+ {eventArg.name}
+ {eventArg.isIndexed ? indexed : ''}: {type},
+ </span>
+ );
+ });
+ const argList = _.reduce(eventArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
+ return [prev, '\n\t', curr];
+ });
+ return (
+ <span>
+ {`{`}
+ <br />
+ {'\t'}
+ {argList}
+ <br />
+ {`}`}
+ </span>
+ );
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
}
diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx
index 16a772125..ee07a2c50 100644
--- a/packages/website/ts/pages/documentation/interface.tsx
+++ b/packages/website/ts/pages/documentation/interface.tsx
@@ -6,56 +6,56 @@ import { Type } from 'ts/pages/documentation/type';
import { CustomType, TypeDocTypes } from 'ts/types';
interface InterfaceProps {
- type: CustomType;
- sectionName: string;
- docsInfo: DocsInfo;
+ type: CustomType;
+ sectionName: string;
+ docsInfo: DocsInfo;
}
export function Interface(props: InterfaceProps) {
- const type = props.type;
- const properties = _.map(type.children, property => {
- 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} />
- ) : (
- <MethodSignature
- method={property.type.method}
- sectionName={props.sectionName}
- shouldHideMethodName={true}
- shouldUseArrowSyntax={true}
- docsInfo={props.docsInfo}
- />
- )},
- </span>
- );
- });
- const hasIndexSignature = !_.isUndefined(type.indexSignature);
- if (hasIndexSignature) {
- const is = type.indexSignature;
- const param = (
- <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
- {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
- </span>
- );
- properties.push(
- <span key={`indexSignature-${type.name}-${is.keyType.name}`}>
- [{param}]: {is.valueName},
- </span>,
- );
- }
- const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '\n\t', curr];
- });
- return (
- <span>
- {`{`}
- <br />
- {'\t'}
- {propertyList}
- <br />
- {`}`}
- </span>
- );
+ const type = props.type;
+ const properties = _.map(type.children, property => {
+ 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} />
+ ) : (
+ <MethodSignature
+ method={property.type.method}
+ sectionName={props.sectionName}
+ shouldHideMethodName={true}
+ shouldUseArrowSyntax={true}
+ docsInfo={props.docsInfo}
+ />
+ )},
+ </span>
+ );
+ });
+ const hasIndexSignature = !_.isUndefined(type.indexSignature);
+ if (hasIndexSignature) {
+ const is = type.indexSignature;
+ const param = (
+ <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
+ {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
+ </span>
+ );
+ properties.push(
+ <span key={`indexSignature-${type.name}-${is.keyType.name}`}>
+ [{param}]: {is.valueName},
+ </span>,
+ );
+ }
+ const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => {
+ return [prev, '\n\t', curr];
+ });
+ return (
+ <span>
+ {`{`}
+ <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 dfde5931b..fb03cf5be 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -10,133 +10,133 @@ import { colors } from 'ts/utils/colors';
import { typeDocUtils } from 'ts/utils/typedoc_utils';
interface MethodBlockProps {
- method: SolidityMethod | TypescriptMethod;
- sectionName: string;
- libraryVersion: string;
- typeDefinitionByName: TypeDefinitionByName;
- docsInfo: DocsInfo;
+ method: SolidityMethod | TypescriptMethod;
+ sectionName: string;
+ libraryVersion: string;
+ typeDefinitionByName: TypeDefinitionByName;
+ docsInfo: DocsInfo;
}
interface MethodBlockState {
- shouldShowAnchor: boolean;
+ shouldShowAnchor: boolean;
}
const styles: Styles = {
- chip: {
- fontSize: 13,
- backgroundColor: colors.lightBlueA700,
- color: colors.white,
- height: 11,
- borderRadius: 14,
- marginTop: 19,
- lineHeight: 0.8,
- },
+ chip: {
+ fontSize: 13,
+ backgroundColor: colors.lightBlueA700,
+ color: colors.white,
+ height: 11,
+ borderRadius: 14,
+ marginTop: 19,
+ lineHeight: 0.8,
+ },
};
export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockState> {
- constructor(props: MethodBlockProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const method = this.props.method;
- if (typeDocUtils.isPrivateOrProtectedProperty(method.name)) {
- return null;
- }
+ constructor(props: MethodBlockProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const method = this.props.method;
+ if (typeDocUtils.isPrivateOrProtectedProperty(method.name)) {
+ return null;
+ }
- return (
- <div
- id={`${this.props.sectionName}-${method.name}`}
- style={{ overflow: 'hidden', width: '100%' }}
- className="pb4"
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- {!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')}
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={method.name}
- id={`${this.props.sectionName}-${method.name}`}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </div>
- )}
- <code className="hljs">
- <MethodSignature
- method={method}
- sectionName={this.props.sectionName}
- typeDefinitionByName={this.props.typeDefinitionByName}
- docsInfo={this.props.docsInfo}
- />
- </code>
- {(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 && (
- <div className="pt1 comment">
- <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
- RETURNS
- </h4>
- <Comment comment={method.returnComment} />
- </div>
- )}
- </div>
- );
- }
- private _renderChip(text: string) {
- return (
- <div className="p1 mr1" style={styles.chip}>
- {text}
- </div>
- );
- }
- private _renderParameterDescriptions(parameters: Parameter[]) {
- const descriptions = _.map(parameters, parameter => {
- const isOptional = parameter.isOptional;
- return (
- <div
- key={`param-description-${parameter.name}`}
- className="flex pb1 mb2"
- 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 }}>
- {isOptional && 'optional'}
- </div>
- </div>
- <div className="col lg-col-8 md-col-8 sm-col-12 col-12">
- {parameter.comment && <Comment comment={parameter.comment} />}
- </div>
- </div>
- );
- });
- return descriptions;
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ return (
+ <div
+ id={`${this.props.sectionName}-${method.name}`}
+ style={{ overflow: 'hidden', width: '100%' }}
+ className="pb4"
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ {!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')}
+ <AnchorTitle
+ headerSize={HeaderSizes.H3}
+ title={method.name}
+ id={`${this.props.sectionName}-${method.name}`}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ </div>
+ )}
+ <code className="hljs">
+ <MethodSignature
+ method={method}
+ sectionName={this.props.sectionName}
+ typeDefinitionByName={this.props.typeDefinitionByName}
+ docsInfo={this.props.docsInfo}
+ />
+ </code>
+ {(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 && (
+ <div className="pt1 comment">
+ <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
+ RETURNS
+ </h4>
+ <Comment comment={method.returnComment} />
+ </div>
+ )}
+ </div>
+ );
+ }
+ private _renderChip(text: string) {
+ return (
+ <div className="p1 mr1" style={styles.chip}>
+ {text}
+ </div>
+ );
+ }
+ private _renderParameterDescriptions(parameters: Parameter[]) {
+ const descriptions = _.map(parameters, parameter => {
+ const isOptional = parameter.isOptional;
+ return (
+ <div
+ key={`param-description-${parameter.name}`}
+ className="flex pb1 mb2"
+ 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 }}>
+ {isOptional && 'optional'}
+ </div>
+ </div>
+ <div className="col lg-col-8 md-col-8 sm-col-12 col-12">
+ {parameter.comment && <Comment comment={parameter.comment} />}
+ </div>
+ </div>
+ );
+ });
+ return descriptions;
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
}
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx
index 041dcd093..7c6bf96d2 100644
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ b/packages/website/ts/pages/documentation/method_signature.tsx
@@ -6,94 +6,94 @@ import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } fro
import { constants } from 'ts/utils/constants';
interface MethodSignatureProps {
- method: TypescriptMethod | SolidityMethod;
- sectionName: string;
- shouldHideMethodName?: boolean;
- shouldUseArrowSyntax?: boolean;
- typeDefinitionByName?: TypeDefinitionByName;
- docsInfo: DocsInfo;
+ method: TypescriptMethod | SolidityMethod;
+ sectionName: string;
+ shouldHideMethodName?: boolean;
+ shouldUseArrowSyntax?: boolean;
+ typeDefinitionByName?: TypeDefinitionByName;
+ docsInfo: DocsInfo;
}
const defaultProps = {
- shouldHideMethodName: false,
- shouldUseArrowSyntax: false,
+ shouldHideMethodName: false,
+ shouldUseArrowSyntax: false,
};
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 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);
- return (
- <span>
- {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>
- );
+ const sectionName = constants.TYPES_SECTION_NAME;
+ 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);
+ return (
+ <span>
+ {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>
+ );
};
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) => {
- const isOptional = p.isOptional;
- const type = (
- <Type
- type={p.type}
- sectionName={sectionName}
- typeDefinitionByName={typeDefinitionByName}
- docsInfo={docsInfo}
- />
- );
- return (
- <span key={`param-${p.type}-${p.name}`}>
- {p.name}
- {isOptional && '?'}: {type}
- </span>
- );
- });
- return params;
+ const parameters = method.parameters;
+ const params = _.map(parameters, (p: Parameter) => {
+ const isOptional = p.isOptional;
+ const type = (
+ <Type
+ type={p.type}
+ sectionName={sectionName}
+ typeDefinitionByName={typeDefinitionByName}
+ docsInfo={docsInfo}
+ />
+ );
+ return (
+ <span key={`param-${p.type}-${p.name}`}>
+ {p.name}
+ {isOptional && '?'}: {type}
+ </span>
+ );
+ });
+ return params;
}
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}
- />
- {`>`}
- </span>
- );
- return typeParam;
+ const typeParameter = method.typeParameter;
+ const typeParam = (
+ <span>
+ {`<${typeParameter.name} extends `}
+ <Type
+ type={typeParameter.type}
+ sectionName={sectionName}
+ typeDefinitionByName={typeDefinitionByName}
+ docsInfo={docsInfo}
+ />
+ {`>`}
+ </span>
+ );
+ return typeParam;
}
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 6588ee39e..32126b7da 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -4,28 +4,28 @@ import { Source } from 'ts/types';
import { colors } from 'ts/utils/colors';
interface SourceLinkProps {
- source: Source;
- baseUrl: string;
- version: string;
- subPackageName: string;
+ source: Source;
+ baseUrl: string;
+ version: string;
+ subPackageName: string;
}
const packagesWithNamespace = ['connect'];
export function SourceLink(props: SourceLinkProps) {
- const src = props.source;
- const url = props.baseUrl;
- const pkg = props.subPackageName;
- let tagPrefix = pkg;
- if (_.includes(packagesWithNamespace, pkg)) {
- tagPrefix = `@0xproject/${pkg}`;
- }
- 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 }}>
- Source
- </a>
- </div>
- );
+ const src = props.source;
+ const url = props.baseUrl;
+ const pkg = props.subPackageName;
+ let tagPrefix = pkg;
+ if (_.includes(packagesWithNamespace, pkg)) {
+ tagPrefix = `@0xproject/${pkg}`;
+ }
+ 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 }}>
+ Source
+ </a>
+ </div>
+ );
}
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index e989e7129..9a2696e22 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -11,202 +11,202 @@ 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 } = {
- Web3: constants.URL_WEB3_DOCS,
- Provider: constants.URL_WEB3_PROVIDER_DOCS,
- BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
- DecodedLogEntryEvent: constants.URL_WEB3_DECODED_LOG_ENTRY_EVENT,
- LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT,
+ Web3: constants.URL_WEB3_DOCS,
+ Provider: constants.URL_WEB3_PROVIDER_DOCS,
+ BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
+ DecodedLogEntryEvent: constants.URL_WEB3_DECODED_LOG_ENTRY_EVENT,
+ LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT,
};
const typePrefix: { [typeName: string]: string } = {
- Provider: 'Web3',
- DecodedLogEntryEvent: 'Web3',
- LogEntryEvent: 'Web3',
+ Provider: 'Web3',
+ DecodedLogEntryEvent: 'Web3',
+ LogEntryEvent: 'Web3',
};
const typeToSection: { [typeName: string]: string } = {
- ExchangeWrapper: 'exchange',
- TokenWrapper: 'token',
- TokenRegistryWrapper: 'tokenRegistry',
- EtherTokenWrapper: 'etherToken',
- ProxyWrapper: 'proxy',
- TokenTransferProxyWrapper: 'proxy',
- OrderStateWatcher: 'orderWatcher',
+ ExchangeWrapper: 'exchange',
+ TokenWrapper: 'token',
+ TokenRegistryWrapper: 'tokenRegistry',
+ EtherTokenWrapper: 'etherToken',
+ ProxyWrapper: 'proxy',
+ TokenTransferProxyWrapper: 'proxy',
+ OrderStateWatcher: 'orderWatcher',
};
interface TypeProps {
- type: TypeDef;
- docsInfo: DocsInfo;
- sectionName: string;
- typeDefinitionByName?: TypeDefinitionByName;
+ type: TypeDef;
+ docsInfo: DocsInfo;
+ sectionName: string;
+ typeDefinitionByName?: TypeDefinitionByName;
}
// The return type needs to be `any` here so that we can recursively define <Type /> components within
// <Type /> components (e.g when rendering the union type).
export function Type(props: TypeProps): any {
- const type = props.type;
- const isReference = type.typeDocType === TypeDocTypes.Reference;
- const isArray = type.typeDocType === TypeDocTypes.Array;
- let typeNameColor = 'inherit';
- let typeName: string | React.ReactNode;
- let typeArgs: React.ReactNode[] = [];
- switch (type.typeDocType) {
- case TypeDocTypes.Intrinsic:
- case TypeDocTypes.Unknown:
- typeName = type.name;
- typeNameColor = colors.orange;
- break;
+ const type = props.type;
+ const isReference = type.typeDocType === TypeDocTypes.Reference;
+ const isArray = type.typeDocType === TypeDocTypes.Array;
+ let typeNameColor = 'inherit';
+ let typeName: string | React.ReactNode;
+ let typeArgs: React.ReactNode[] = [];
+ switch (type.typeDocType) {
+ case TypeDocTypes.Intrinsic:
+ case TypeDocTypes.Unknown:
+ typeName = type.name;
+ typeNameColor = colors.orange;
+ break;
- case TypeDocTypes.Reference:
- typeName = type.name;
- typeArgs = _.map(type.typeArguments, (arg: TypeDef) => {
- if (arg.typeDocType === TypeDocTypes.Array) {
- const key = `type-${arg.elementType.name}-${arg.elementType.typeDocType}`;
- return (
- <span>
- <Type
- key={key}
- type={arg.elementType}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- />[]
- </span>
- );
- } else {
- const subType = (
- <Type
- key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`}
- type={arg}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- />
- );
- return subType;
- }
- });
- break;
+ case TypeDocTypes.Reference:
+ typeName = type.name;
+ typeArgs = _.map(type.typeArguments, (arg: TypeDef) => {
+ if (arg.typeDocType === TypeDocTypes.Array) {
+ const key = `type-${arg.elementType.name}-${arg.elementType.typeDocType}`;
+ return (
+ <span>
+ <Type
+ key={key}
+ type={arg.elementType}
+ sectionName={props.sectionName}
+ typeDefinitionByName={props.typeDefinitionByName}
+ docsInfo={props.docsInfo}
+ />[]
+ </span>
+ );
+ } else {
+ const subType = (
+ <Type
+ key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`}
+ type={arg}
+ sectionName={props.sectionName}
+ typeDefinitionByName={props.typeDefinitionByName}
+ docsInfo={props.docsInfo}
+ />
+ );
+ return subType;
+ }
+ });
+ break;
- case TypeDocTypes.StringLiteral:
- typeName = `'${type.value}'`;
- typeNameColor = colors.green;
- break;
+ case TypeDocTypes.StringLiteral:
+ typeName = `'${type.value}'`;
+ typeNameColor = colors.green;
+ break;
- case TypeDocTypes.Array:
- typeName = type.elementType.name;
- break;
+ case TypeDocTypes.Array:
+ typeName = type.elementType.name;
+ break;
- case TypeDocTypes.Union:
- const unionTypes = _.map(type.types, t => {
- return (
- <Type
- key={`type-${t.name}-${t.value}-${t.typeDocType}`}
- type={t}
- sectionName={props.sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- />
- );
- });
- typeName = _.reduce(unionTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '|', curr];
- });
- break;
+ case TypeDocTypes.Union:
+ const unionTypes = _.map(type.types, t => {
+ return (
+ <Type
+ key={`type-${t.name}-${t.value}-${t.typeDocType}`}
+ type={t}
+ sectionName={props.sectionName}
+ typeDefinitionByName={props.typeDefinitionByName}
+ docsInfo={props.docsInfo}
+ />
+ );
+ });
+ typeName = _.reduce(unionTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
+ return [prev, '|', curr];
+ });
+ break;
- case TypeDocTypes.TypeParameter:
- typeName = type.name;
- break;
+ case TypeDocTypes.TypeParameter:
+ typeName = type.name;
+ break;
- default:
- throw utils.spawnSwitchErr('type.typeDocType', type.typeDocType);
- }
- // HACK: Normalize BigNumber to simply BigNumber. For some reason the type
- // name is unpredictably one or the other.
- if (typeName === 'BigNumber') {
- typeName = 'BigNumber';
- }
- const commaSeparatedTypeArgs = _.reduce(typeArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, ', ', curr];
- });
+ default:
+ throw utils.spawnSwitchErr('type.typeDocType', type.typeDocType);
+ }
+ // HACK: Normalize BigNumber to simply BigNumber. For some reason the type
+ // name is unpredictably one or the other.
+ if (typeName === 'BigNumber') {
+ typeName = 'BigNumber';
+ }
+ const commaSeparatedTypeArgs = _.reduce(typeArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
+ return [prev, ', ', curr];
+ });
- 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 }}
- >
- {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}
- {typeName}
- </a>
- );
- } 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;
- let typeDefinition;
- if (props.typeDefinitionByName) {
- typeDefinition = props.typeDefinitionByName[typeName as string];
- }
- typeName = (
- <ScrollLink
- to={typeDefinitionAnchorId}
- offset={0}
- 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">
- <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>
- {'<'}
- {commaSeparatedTypeArgs}
- {'>'}
- </span>
- )}
- </span>
- );
+ 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 }}
+ >
+ {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}
+ {typeName}
+ </a>
+ );
+ } 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;
+ let typeDefinition;
+ if (props.typeDefinitionByName) {
+ typeDefinition = props.typeDefinitionByName[typeName as string];
+ }
+ typeName = (
+ <ScrollLink
+ to={typeDefinitionAnchorId}
+ offset={0}
+ 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">
+ <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>
+ {'<'}
+ {commaSeparatedTypeArgs}
+ {'>'}
+ </span>
+ )}
+ </span>
+ );
}
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index d46eec76c..356926157 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -13,113 +13,113 @@ import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface TypeDefinitionProps {
- sectionName: string;
- customType: CustomType;
- shouldAddId?: boolean;
- docsInfo: DocsInfo;
+ sectionName: string;
+ customType: CustomType;
+ shouldAddId?: boolean;
+ docsInfo: DocsInfo;
}
interface TypeDefinitionState {
- shouldShowAnchor: boolean;
+ shouldShowAnchor: boolean;
}
export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDefinitionState> {
- public static defaultProps: Partial<TypeDefinitionProps> = {
- shouldAddId: true,
- };
- constructor(props: TypeDefinitionProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const customType = this.props.customType;
- if (!this.props.docsInfo.isPublicType(customType.name)) {
- return null; // no-op
- }
+ public static defaultProps: Partial<TypeDefinitionProps> = {
+ shouldAddId: true,
+ };
+ constructor(props: TypeDefinitionProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const customType = this.props.customType;
+ if (!this.props.docsInfo.isPublicType(customType.name)) {
+ return null; // no-op
+ }
- let typePrefix: string;
- let codeSnippet: React.ReactNode;
- switch (customType.kindString) {
- case KindString.Interface:
- typePrefix = 'Interface';
- codeSnippet = (
- <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
- );
- break;
+ let typePrefix: string;
+ let codeSnippet: React.ReactNode;
+ switch (customType.kindString) {
+ case KindString.Interface:
+ typePrefix = 'Interface';
+ codeSnippet = (
+ <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
+ );
+ break;
- case KindString.Variable:
- typePrefix = 'Enum';
- codeSnippet = <CustomEnum type={customType} />;
- break;
+ case KindString.Variable:
+ typePrefix = 'Enum';
+ codeSnippet = <CustomEnum type={customType} />;
+ break;
- case KindString.Enumeration:
- typePrefix = 'Enum';
- const enumValues = _.map(customType.children, (c: CustomTypeChild) => {
- return {
- name: c.name,
- defaultValue: c.defaultValue,
- };
- });
- codeSnippet = <Enum values={enumValues} />;
- break;
+ case KindString.Enumeration:
+ typePrefix = 'Enum';
+ const enumValues = _.map(customType.children, (c: CustomTypeChild) => {
+ return {
+ name: c.name,
+ defaultValue: c.defaultValue,
+ };
+ });
+ 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 ? (
- <Type
- type={customType.type}
- sectionName={this.props.sectionName}
- docsInfo={this.props.docsInfo}
- />
- ) : (
- <MethodSignature
- method={customType.type.method}
- sectionName={this.props.sectionName}
- shouldHideMethodName={true}
- shouldUseArrowSyntax={true}
- docsInfo={this.props.docsInfo}
- />
- )}
- </span>
- );
- break;
+ case KindString.TypeAlias:
+ typePrefix = 'Type Alias';
+ codeSnippet = (
+ <span>
+ <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}
+ shouldHideMethodName={true}
+ shouldUseArrowSyntax={true}
+ docsInfo={this.props.docsInfo}
+ />
+ )}
+ </span>
+ );
+ break;
- default:
- throw utils.spawnSwitchErr('type.kindString', customType.kindString);
- }
+ default:
+ throw utils.spawnSwitchErr('type.kindString', customType.kindString);
+ }
- const typeDefinitionAnchorId = `${this.props.sectionName}-${customType.name}`;
- return (
- <div
- id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
- className="pb2"
- style={{ overflow: 'hidden', width: '100%' }}
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={`${typePrefix} ${customType.name}`}
- id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- <div style={{ fontSize: 16 }}>
- <pre>
- <code className="hljs">{codeSnippet}</code>
- </pre>
- </div>
- {customType.comment && <Comment comment={customType.comment} className="py2" />}
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ const typeDefinitionAnchorId = `${this.props.sectionName}-${customType.name}`;
+ return (
+ <div
+ id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
+ className="pb2"
+ style={{ overflow: 'hidden', width: '100%' }}
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <AnchorTitle
+ headerSize={HeaderSizes.H3}
+ title={`${typePrefix} ${customType.name}`}
+ id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ <div style={{ fontSize: 16 }}>
+ <pre>
+ <code className="hljs">{codeSnippet}</code>
+ </pre>
+ </div>
+ {customType.comment && <Comment comment={customType.comment} className="py2" />}
+ </div>
+ );
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
}
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index b4b5214a2..f437f5a8d 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -10,438 +10,438 @@ import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
export interface FAQProps {
- source: string;
- location: Location;
+ source: string;
+ location: Location;
}
interface FAQState {}
const styles: Styles = {
- thin: {
- fontWeight: 100,
- },
+ thin: {
+ fontWeight: 100,
+ },
};
const sections: FAQSection[] = [
- {
- name: '0x Protocol',
- questions: [
- {
- 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
- between known counterparties.
- </div>
- ),
- },
- {
- prompt: 'What problem does 0x solve?',
- 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.
- </div>
- ),
- },
- {
- prompt: 'How is 0x different from a centralized exchange like Poloniex or ShapeShift?',
- answer: (
- <div>
- <ul>
- <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.
- </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.
- </li>
- </ul>
- </div>
- ),
- },
- {
- 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.
- </div>
- ),
- },
- {
- prompt: 'What are the differences between 0x protocol and state channels?',
- 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).
- </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.
- </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.
- </li>
- </ul>
- </div>
- ),
- },
- {
- 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.
- </div>
- ),
- },
- {
- 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.
- </div>
- ),
- },
- ],
- },
- {
- name: '0x Token (ZRX)',
- questions: [
- {
- prompt: 'Explain how the 0x protocol token (zrx) works.',
- answer: (
- <div>
- <div>
- 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:
- </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).
- </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.
- </li>
- </ul>
- </div>
- ),
- },
- {
- 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.
- </div>
- ),
- },
- {
- 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.
- </div>
- ),
- },
- ],
- },
- {
- name: 'ZRX Token Launch and Fund Use',
- questions: [
- {
- prompt: 'What is the total supply of ZRX tokens?',
- 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>,
- },
- {
- 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{' '}
- <a
- href="https://docs.google.com/document/d/1_RVa-_bkU92fWRsC8eNy4vYjcTt-WC8GtqyyjbTd-oY"
- target="_blank"
- >
- development roadmap
- </a>.
- </div>
- ),
- },
- {
- 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>
- <div className="py1">
- <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.
- </div>
- </div>
- <div className="py1">
- <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.
- </div>
- </div>
- <div className="py1">
- <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.
- </div>
- </div>
- <div className="py1">
- <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.
- </div>
- </div>
- <div className="py1">
- <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.
- </div>
- </div>
- </div>
- ),
- },
- {
- 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.
- </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>,
- },
- {
- 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.
- </div>
- ),
- },
- {
- prompt: 'Which cryptocurrencies will be accepted in the token launch?',
- 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.
- </div>
- ),
- },
- {
- prompt: 'Where can I find a development roadmap?',
- answer: (
- <div>
- Check it out{' '}
- <a
- href="https://drive.google.com/open?id=14IP1N8mt3YdsAoqYTyruMnZswpklUs3THyS1VXx71fo"
- target="_blank"
- >
- here
- </a>.
- </div>
- ),
- },
- ],
- },
- {
- name: 'Team',
- questions: [
- {
- prompt: 'Where is 0x based?',
- 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.
- </div>
- ),
- },
- {
- 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.
- </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>,
- },
- ],
- },
+ {
+ name: '0x Protocol',
+ questions: [
+ {
+ 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
+ between known counterparties.
+ </div>
+ ),
+ },
+ {
+ prompt: 'What problem does 0x solve?',
+ 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.
+ </div>
+ ),
+ },
+ {
+ prompt: 'How is 0x different from a centralized exchange like Poloniex or ShapeShift?',
+ answer: (
+ <div>
+ <ul>
+ <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.
+ </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.
+ </li>
+ </ul>
+ </div>
+ ),
+ },
+ {
+ 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.
+ </div>
+ ),
+ },
+ {
+ prompt: 'What are the differences between 0x protocol and state channels?',
+ 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).
+ </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.
+ </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.
+ </li>
+ </ul>
+ </div>
+ ),
+ },
+ {
+ 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.
+ </div>
+ ),
+ },
+ {
+ 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.
+ </div>
+ ),
+ },
+ ],
+ },
+ {
+ name: '0x Token (ZRX)',
+ questions: [
+ {
+ prompt: 'Explain how the 0x protocol token (zrx) works.',
+ answer: (
+ <div>
+ <div>
+ 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:
+ </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).
+ </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.
+ </li>
+ </ul>
+ </div>
+ ),
+ },
+ {
+ 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.
+ </div>
+ ),
+ },
+ {
+ 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.
+ </div>
+ ),
+ },
+ ],
+ },
+ {
+ name: 'ZRX Token Launch and Fund Use',
+ questions: [
+ {
+ prompt: 'What is the total supply of ZRX tokens?',
+ 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>,
+ },
+ {
+ 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{' '}
+ <a
+ href="https://docs.google.com/document/d/1_RVa-_bkU92fWRsC8eNy4vYjcTt-WC8GtqyyjbTd-oY"
+ target="_blank"
+ >
+ development roadmap
+ </a>.
+ </div>
+ ),
+ },
+ {
+ 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>
+ <div className="py1">
+ <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.
+ </div>
+ </div>
+ <div className="py1">
+ <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.
+ </div>
+ </div>
+ <div className="py1">
+ <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.
+ </div>
+ </div>
+ <div className="py1">
+ <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.
+ </div>
+ </div>
+ <div className="py1">
+ <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.
+ </div>
+ </div>
+ </div>
+ ),
+ },
+ {
+ 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.
+ </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>,
+ },
+ {
+ 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.
+ </div>
+ ),
+ },
+ {
+ prompt: 'Which cryptocurrencies will be accepted in the token launch?',
+ 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.
+ </div>
+ ),
+ },
+ {
+ prompt: 'Where can I find a development roadmap?',
+ answer: (
+ <div>
+ Check it out{' '}
+ <a
+ href="https://drive.google.com/open?id=14IP1N8mt3YdsAoqYTyruMnZswpklUs3THyS1VXx71fo"
+ target="_blank"
+ >
+ here
+ </a>.
+ </div>
+ ),
+ },
+ ],
+ },
+ {
+ name: 'Team',
+ questions: [
+ {
+ prompt: 'Where is 0x based?',
+ 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.
+ </div>
+ ),
+ },
+ {
+ 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.
+ </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>,
+ },
+ ],
+ },
];
export class FAQ extends React.Component<FAQProps, FAQState> {
- public componentDidMount() {
- window.scrollTo(0, 0);
- }
- 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>
- </div>
- <Footer />
- </div>
- );
- }
- private _renderSections() {
- const renderedSections = _.map(sections, (section: FAQSection, i: number) => {
- const isFirstSection = i === 0;
- return (
- <div key={section.name}>
- <h3>{section.name}</h3>
- {this._renderQuestions(section.questions, isFirstSection)}
- </div>
- );
- });
- return renderedSections;
- }
- private _renderQuestions(questions: FAQQuestion[], isFirstSection: boolean) {
- const renderedQuestions = _.map(questions, (question: FAQQuestion, i: number) => {
- const isFirstQuestion = i === 0;
- return (
- <Question
- key={question.prompt}
- prompt={question.prompt}
- answer={question.answer}
- shouldDisplayExpanded={isFirstSection && isFirstQuestion}
- />
- );
- });
- return renderedQuestions;
- }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ 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>
+ </div>
+ <Footer />
+ </div>
+ );
+ }
+ private _renderSections() {
+ const renderedSections = _.map(sections, (section: FAQSection, i: number) => {
+ const isFirstSection = i === 0;
+ return (
+ <div key={section.name}>
+ <h3>{section.name}</h3>
+ {this._renderQuestions(section.questions, isFirstSection)}
+ </div>
+ );
+ });
+ return renderedSections;
+ }
+ private _renderQuestions(questions: FAQQuestion[], isFirstSection: boolean) {
+ const renderedQuestions = _.map(questions, (question: FAQQuestion, i: number) => {
+ const isFirstQuestion = i === 0;
+ return (
+ <Question
+ key={question.prompt}
+ prompt={question.prompt}
+ answer={question.answer}
+ shouldDisplayExpanded={isFirstSection && isFirstQuestion}
+ />
+ );
+ });
+ return renderedQuestions;
+ }
}
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 988c04bc9..58cf674ef 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -4,48 +4,48 @@ import * as React from 'react';
import { colors } from 'ts/utils/colors';
export interface QuestionProps {
- prompt: string;
- answer: React.ReactNode;
- shouldDisplayExpanded: boolean;
+ prompt: string;
+ answer: React.ReactNode;
+ shouldDisplayExpanded: boolean;
}
interface QuestionState {
- isExpanded: boolean;
+ isExpanded: boolean;
}
export class Question extends React.Component<QuestionProps, QuestionState> {
- constructor(props: QuestionProps) {
- super(props);
- this.state = {
- isExpanded: props.shouldDisplayExpanded,
- };
- }
- public render() {
- return (
- <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 }}
- actAsExpander={true}
- showExpandableButton={true}
- />
- <CardText expandable={true}>
- <div style={{ lineHeight: 1.4 }}>{this.props.answer}</div>
- </CardText>
- </Card>
- </div>
- );
- }
- private _onExchangeChange() {
- this.setState({
- isExpanded: !this.state.isExpanded,
- });
- }
+ constructor(props: QuestionProps) {
+ super(props);
+ this.state = {
+ isExpanded: props.shouldDisplayExpanded,
+ };
+ }
+ public render() {
+ return (
+ <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 }}
+ actAsExpander={true}
+ showExpandableButton={true}
+ />
+ <CardText expandable={true}>
+ <div style={{ lineHeight: 1.4 }}>{this.props.answer}</div>
+ </CardText>
+ </Card>
+ </div>
+ );
+ }
+ private _onExchangeChange() {
+ this.setState({
+ isExpanded: !this.state.isExpanded,
+ });
+ }
}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index ca76497df..742d94a0f 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -11,755 +11,755 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
interface BoxContent {
- title: string;
- description: string;
- imageUrl: string;
- classNames: string;
+ title: string;
+ description: string;
+ imageUrl: string;
+ classNames: string;
}
interface AssetType {
- title: string;
- imageUrl: string;
- style?: React.CSSProperties;
+ title: string;
+ imageUrl: string;
+ style?: React.CSSProperties;
}
interface UseCase {
- imageUrl: string;
- type: string;
- description: string;
- classNames: string;
- style?: React.CSSProperties;
- projectIconUrls: string[];
+ imageUrl: string;
+ type: string;
+ description: string;
+ classNames: string;
+ style?: React.CSSProperties;
+ projectIconUrls: string[];
}
interface Project {
- logoFileName: string;
- projectUrl: string;
+ logoFileName: string;
+ projectUrl: string;
}
const THROTTLE_TIMEOUT = 100;
const boxContents: BoxContent[] = [
- {
- title: 'Trustless exchange',
- description:
- "Built on Ethereum's distributed network with no centralized \
+ {
+ title: 'Trustless exchange',
+ 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.",
- imageUrl: '/images/landing/distributed_network.png',
- classNames: '',
- },
- {
- title: 'Shared liquidity',
- description:
- 'By sharing a standard API, relayers can easily aggregate liquidity pools, \
+ imageUrl: '/images/landing/distributed_network.png',
+ classNames: '',
+ },
+ {
+ title: 'Shared liquidity',
+ 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 \
+ 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 \
counterparty for free or pay a relayer some ZRX tokens to access their liquidity \
pool.',
- imageUrl: '/images/landing/open_source.png',
- classNames: 'right',
- },
+ imageUrl: '/images/landing/open_source.png',
+ classNames: 'right',
+ },
];
const projects: Project[] = [
- {
- logoFileName: 'ethfinex-top.png',
- projectUrl: constants.PROJECT_URL_ETHFINEX,
- },
- {
- logoFileName: 'radar_relay_top.png',
- projectUrl: constants.PROJECT_URL_RADAR_RELAY,
- },
- {
- logoFileName: 'paradex_top.png',
- projectUrl: constants.PROJECT_URL_PARADEX,
- },
- {
- logoFileName: 'the_ocean.png',
- projectUrl: constants.PROJECT_URL_0CEAN,
- },
- {
- logoFileName: 'dydx.png',
- projectUrl: constants.PROJECT_URL_DYDX,
- },
- {
- logoFileName: 'melonport.png',
- projectUrl: constants.PROJECT_URL_MELONPORT,
- },
- {
- logoFileName: 'maker.png',
- projectUrl: constants.PROJECT_URL_MAKER,
- },
- {
- logoFileName: 'dharma.png',
- projectUrl: constants.PROJECT_URL_DHARMA,
- },
- {
- logoFileName: 'lendroid.png',
- projectUrl: constants.PROJECT_URL_LENDROID,
- },
- {
- logoFileName: 'district0x.png',
- projectUrl: constants.PROJECT_URL_DISTRICT_0X,
- },
- {
- logoFileName: 'aragon.png',
- projectUrl: constants.PROJECT_URL_ARAGON,
- },
- {
- logoFileName: 'blocknet.png',
- projectUrl: constants.PROJECT_URL_BLOCKNET,
- },
- {
- logoFileName: 'status.png',
- projectUrl: constants.PROJECT_URL_STATUS,
- },
- {
- logoFileName: 'augur.png',
- projectUrl: constants.PROJECT_URL_AUGUR,
- },
- {
- logoFileName: 'anx.png',
- projectUrl: constants.PROJECT_URL_OPEN_ANX,
- },
- {
- logoFileName: 'auctus.png',
- projectUrl: constants.PROJECT_URL_AUCTUS,
- },
+ {
+ logoFileName: 'ethfinex-top.png',
+ projectUrl: constants.PROJECT_URL_ETHFINEX,
+ },
+ {
+ logoFileName: 'radar_relay_top.png',
+ projectUrl: constants.PROJECT_URL_RADAR_RELAY,
+ },
+ {
+ logoFileName: 'paradex_top.png',
+ projectUrl: constants.PROJECT_URL_PARADEX,
+ },
+ {
+ logoFileName: 'the_ocean.png',
+ projectUrl: constants.PROJECT_URL_0CEAN,
+ },
+ {
+ logoFileName: 'dydx.png',
+ projectUrl: constants.PROJECT_URL_DYDX,
+ },
+ {
+ logoFileName: 'melonport.png',
+ projectUrl: constants.PROJECT_URL_MELONPORT,
+ },
+ {
+ logoFileName: 'maker.png',
+ projectUrl: constants.PROJECT_URL_MAKER,
+ },
+ {
+ logoFileName: 'dharma.png',
+ projectUrl: constants.PROJECT_URL_DHARMA,
+ },
+ {
+ logoFileName: 'lendroid.png',
+ projectUrl: constants.PROJECT_URL_LENDROID,
+ },
+ {
+ logoFileName: 'district0x.png',
+ projectUrl: constants.PROJECT_URL_DISTRICT_0X,
+ },
+ {
+ logoFileName: 'aragon.png',
+ projectUrl: constants.PROJECT_URL_ARAGON,
+ },
+ {
+ logoFileName: 'blocknet.png',
+ projectUrl: constants.PROJECT_URL_BLOCKNET,
+ },
+ {
+ logoFileName: 'status.png',
+ projectUrl: constants.PROJECT_URL_STATUS,
+ },
+ {
+ logoFileName: 'augur.png',
+ projectUrl: constants.PROJECT_URL_AUGUR,
+ },
+ {
+ logoFileName: 'anx.png',
+ projectUrl: constants.PROJECT_URL_OPEN_ANX,
+ },
+ {
+ logoFileName: 'auctus.png',
+ projectUrl: constants.PROJECT_URL_AUCTUS,
+ },
];
export interface LandingProps {
- location: Location;
+ location: Location;
}
interface LandingState {
- screenWidth: ScreenWidths;
+ screenWidth: ScreenWidths;
}
export class Landing extends React.Component<LandingProps, LandingState> {
- private _throttledScreenWidthUpdate: () => void;
- constructor(props: LandingProps) {
- super(props);
- this.state = {
- screenWidth: utils.getScreenWidth(),
- };
- this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
- }
- public componentDidMount() {
- window.addEventListener('resize', this._throttledScreenWidthUpdate);
- window.scrollTo(0, 0);
- }
- public componentWillUnmount() {
- window.removeEventListener('resize', this._throttledScreenWidthUpdate);
- }
- public render() {
- return (
- <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' }}
- />
- {this._renderHero()}
- {this._renderProjects()}
- {this._renderTokenizationSection()}
- {this._renderProtocolSection()}
- {this._renderInfoBoxes()}
- {this._renderBuildingBlocksSection()}
- {this._renderUseCases()}
- {this._renderCallToAction()}
- <Footer />
- </div>
- );
- }
- private _renderHero() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const buttonLabelStyle: React.CSSProperties = {
- textTransform: 'none',
- fontSize: isSmallScreen ? 12 : 14,
- fontWeight: 400,
- };
- const lightButtonStyle: React.CSSProperties = {
- borderRadius: 6,
- border: '1px solid #D8D8D8',
- 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';
- return (
- <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} />
- </div>
- <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,
- }}
- >
- Powering decentralized exchange
- </div>
- <div
- className="pt2 h5 sm-mx-auto"
- 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.
- </div>
- <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 }}
- labelStyle={buttonLabelStyle}
- label="Build on 0x"
- onClick={_.noop}
- />
- </Link>
- </div>
- <div className="col col-6 sm-center">
- <a
- href={constants.URL_ZEROEX_CHAT}
- target="_blank"
- className="text-decoration-none"
- >
- <RaisedButton
- style={{ borderRadius: 6, minWidth: 150 }}
- buttonStyle={lightButtonStyle}
- labelColor="white"
- backgroundColor={colors.heroGrey}
- labelStyle={buttonLabelStyle}
- label="Join the community"
- onClick={_.noop}
- />
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- );
- }
- private _renderProjects() {
- 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;
- return (
- <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
- <div>
- <a href={project.projectUrl} target="_blank" className="text-decoration-none">
- <img
- src={`/images/landing/project_logos/${project.logoFileName}`}
- height={isSmallScreen ? 60 : 92}
- />
- </a>
- </div>
- </div>
- );
- });
- const titleStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- color: colors.grey,
- textTransform: 'uppercase',
- fontWeight: 300,
- letterSpacing: 3,
- };
- return (
- <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}>
- Projects building on 0x
- </div>
- <div className="clearfix">{projectList}</div>
- <div
- className="pt3 mx-auto center"
- 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 }}
- >
- full list
- </Link>
- </div>
- </div>
- </div>
- );
- }
- 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="mx-auto max-width-4 py4 clearfix">
- {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' }}>
- 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 }}
- >
- {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>
- ) : (
- <div>
- <div>
- 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.
- </div>
- </div>
- )}
- </div>
- <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div>
- </div>
- </div>
- {!isSmallScreen && this._renderTokenCloud()}
- </div>
- </div>
- );
- }
- 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="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} />
- </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,
- }}
- >
- <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,
- }}
- >
- 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',
- }}
- >
- <div className="flex" style={{ fontSize: 18 }}>
- <div
- className="lg-h4 md-h4 sm-h5"
- style={{
- letterSpacing: isSmallScreen ? 1 : 3,
- fontFamily: 'Roboto Mono',
- }}
- >
- RELAYERS BUILDING ON 0X
- </div>
- <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',
- }}
- >
- view all
- </Link>
- </div>
- </div>
- <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 }}
- />
- </div>
- <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>
- </div>
- </div>
- </div>
- </div>
- </div>
- );
- }
- private _renderBuildingBlocksSection() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const descriptionStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- lineHeight: isSmallScreen ? 1.5 : 2,
- fontWeight: 300,
- fontSize: 15,
- maxWidth: isSmallScreen ? 375 : 'none',
- };
- const callToActionStyle: React.CSSProperties = {
- fontFamily: 'Roboto Mono',
- fontSize: 15,
- fontWeight: 300,
- maxWidth: isSmallScreen ? 375 : 441,
- };
- return (
- <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()}
- <div
- className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
- 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' }}
- >
- A building block for dApps
- </div>
- <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}>
- Learn how in our{' '}
- <Link
- to={WebsitePaths.ZeroExJs}
- className="text-decoration-none underline"
- style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
- >
- 0x.js
- </Link>{' '}
- and{' '}
- <Link
- to={WebsitePaths.SmartContracts}
- className="text-decoration-none underline"
- style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
- >
- smart contract
- </Link>{' '}
- docs
- </div>
- </div>
- {!isSmallScreen && this._renderBlockChipImage()}
- </div>
- </div>
- );
- }
- private _renderBlockChipImage() {
- 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} />
- </div>
- );
- }
- private _renderTokenCloud() {
- 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} />
- </div>
- );
- }
- private _renderAssetTypes() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const assetTypes: AssetType[] = [
- {
- title: 'Currency',
- imageUrl: '/images/landing/currency.png',
- },
- {
- title: 'Traditional assets',
- imageUrl: '/images/landing/stocks.png',
- style: {
- paddingLeft: isSmallScreen ? 41 : 56,
- paddingRight: isSmallScreen ? 41 : 56,
- },
- },
- {
- title: 'Digital goods',
- imageUrl: '/images/landing/digital_goods.png',
- },
- ];
- 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>
- <img src={assetType.imageUrl} height="80" />
- </div>
- <div
- style={{
- fontFamily: 'Roboto Mono',
- fontSize: 13.5,
- fontWeight: 400,
- opacity: 0.75,
- }}
- >
- {assetType.title}
- </div>
- </div>
- );
- });
- return assets;
- }
- private _renderInfoBoxes() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const boxStyle: React.CSSProperties = {
- maxWidth: 252,
- height: 386,
- backgroundColor: colors.grey50,
- borderRadius: 5,
- padding: '10px 24px 24px',
- };
- 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>
- <img src={boxContent.imageUrl} style={{ height: 210 }} />
- </div>
- <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
- {boxContent.title}
- </div>
- <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' }}>
- {boxes}
- </div>
- </div>
- );
- }
- private _renderUseCases() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ private _throttledScreenWidthUpdate: () => void;
+ constructor(props: LandingProps) {
+ super(props);
+ this.state = {
+ screenWidth: utils.getScreenWidth(),
+ };
+ this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+ }
+ public componentDidMount() {
+ window.addEventListener('resize', this._throttledScreenWidthUpdate);
+ window.scrollTo(0, 0);
+ }
+ public componentWillUnmount() {
+ window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+ }
+ public render() {
+ return (
+ <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' }}
+ />
+ {this._renderHero()}
+ {this._renderProjects()}
+ {this._renderTokenizationSection()}
+ {this._renderProtocolSection()}
+ {this._renderInfoBoxes()}
+ {this._renderBuildingBlocksSection()}
+ {this._renderUseCases()}
+ {this._renderCallToAction()}
+ <Footer />
+ </div>
+ );
+ }
+ private _renderHero() {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const buttonLabelStyle: React.CSSProperties = {
+ textTransform: 'none',
+ fontSize: isSmallScreen ? 12 : 14,
+ fontWeight: 400,
+ };
+ const lightButtonStyle: React.CSSProperties = {
+ borderRadius: 6,
+ border: '1px solid #D8D8D8',
+ 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';
+ return (
+ <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} />
+ </div>
+ <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,
+ }}
+ >
+ Powering decentralized exchange
+ </div>
+ <div
+ className="pt2 h5 sm-mx-auto"
+ 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.
+ </div>
+ <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 }}
+ labelStyle={buttonLabelStyle}
+ label="Build on 0x"
+ onClick={_.noop}
+ />
+ </Link>
+ </div>
+ <div className="col col-6 sm-center">
+ <a
+ href={constants.URL_ZEROEX_CHAT}
+ target="_blank"
+ className="text-decoration-none"
+ >
+ <RaisedButton
+ style={{ borderRadius: 6, minWidth: 150 }}
+ buttonStyle={lightButtonStyle}
+ labelColor="white"
+ backgroundColor={colors.heroGrey}
+ labelStyle={buttonLabelStyle}
+ label="Join the community"
+ onClick={_.noop}
+ />
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderProjects() {
+ 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;
+ return (
+ <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
+ <div>
+ <a href={project.projectUrl} target="_blank" className="text-decoration-none">
+ <img
+ src={`/images/landing/project_logos/${project.logoFileName}`}
+ height={isSmallScreen ? 60 : 92}
+ />
+ </a>
+ </div>
+ </div>
+ );
+ });
+ const titleStyle: React.CSSProperties = {
+ fontFamily: 'Roboto Mono',
+ color: colors.grey,
+ textTransform: 'uppercase',
+ fontWeight: 300,
+ letterSpacing: 3,
+ };
+ return (
+ <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}>
+ Projects building on 0x
+ </div>
+ <div className="clearfix">{projectList}</div>
+ <div
+ className="pt3 mx-auto center"
+ 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 }}
+ >
+ full list
+ </Link>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ 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="mx-auto max-width-4 py4 clearfix">
+ {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' }}>
+ 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 }}
+ >
+ {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>
+ ) : (
+ <div>
+ <div>
+ 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.
+ </div>
+ </div>
+ )}
+ </div>
+ <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div>
+ </div>
+ </div>
+ {!isSmallScreen && this._renderTokenCloud()}
+ </div>
+ </div>
+ );
+ }
+ 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="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} />
+ </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,
+ }}
+ >
+ <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,
+ }}
+ >
+ 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',
+ }}
+ >
+ <div className="flex" style={{ fontSize: 18 }}>
+ <div
+ className="lg-h4 md-h4 sm-h5"
+ style={{
+ letterSpacing: isSmallScreen ? 1 : 3,
+ fontFamily: 'Roboto Mono',
+ }}
+ >
+ RELAYERS BUILDING ON 0X
+ </div>
+ <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',
+ }}
+ >
+ view all
+ </Link>
+ </div>
+ </div>
+ <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 }}
+ />
+ </div>
+ <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>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _renderBuildingBlocksSection() {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const descriptionStyle: React.CSSProperties = {
+ fontFamily: 'Roboto Mono',
+ lineHeight: isSmallScreen ? 1.5 : 2,
+ fontWeight: 300,
+ fontSize: 15,
+ maxWidth: isSmallScreen ? 375 : 'none',
+ };
+ const callToActionStyle: React.CSSProperties = {
+ fontFamily: 'Roboto Mono',
+ fontSize: 15,
+ fontWeight: 300,
+ maxWidth: isSmallScreen ? 375 : 441,
+ };
+ return (
+ <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()}
+ <div
+ className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
+ 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' }}
+ >
+ A building block for dApps
+ </div>
+ <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}>
+ Learn how in our{' '}
+ <Link
+ to={WebsitePaths.ZeroExJs}
+ className="text-decoration-none underline"
+ style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
+ >
+ 0x.js
+ </Link>{' '}
+ and{' '}
+ <Link
+ to={WebsitePaths.SmartContracts}
+ className="text-decoration-none underline"
+ style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
+ >
+ smart contract
+ </Link>{' '}
+ docs
+ </div>
+ </div>
+ {!isSmallScreen && this._renderBlockChipImage()}
+ </div>
+ </div>
+ );
+ }
+ private _renderBlockChipImage() {
+ 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} />
+ </div>
+ );
+ }
+ private _renderTokenCloud() {
+ 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} />
+ </div>
+ );
+ }
+ private _renderAssetTypes() {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const assetTypes: AssetType[] = [
+ {
+ title: 'Currency',
+ imageUrl: '/images/landing/currency.png',
+ },
+ {
+ title: 'Traditional assets',
+ imageUrl: '/images/landing/stocks.png',
+ style: {
+ paddingLeft: isSmallScreen ? 41 : 56,
+ paddingRight: isSmallScreen ? 41 : 56,
+ },
+ },
+ {
+ title: 'Digital goods',
+ imageUrl: '/images/landing/digital_goods.png',
+ },
+ ];
+ 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>
+ <img src={assetType.imageUrl} height="80" />
+ </div>
+ <div
+ style={{
+ fontFamily: 'Roboto Mono',
+ fontSize: 13.5,
+ fontWeight: 400,
+ opacity: 0.75,
+ }}
+ >
+ {assetType.title}
+ </div>
+ </div>
+ );
+ });
+ return assets;
+ }
+ private _renderInfoBoxes() {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const boxStyle: React.CSSProperties = {
+ maxWidth: 252,
+ height: 386,
+ backgroundColor: colors.grey50,
+ borderRadius: 5,
+ padding: '10px 24px 24px',
+ };
+ 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>
+ <img src={boxContent.imageUrl} style={{ height: 210 }} />
+ </div>
+ <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
+ {boxContent.title}
+ </div>
+ <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' }}>
+ {boxes}
+ </div>
+ </div>
+ );
+ }
+ private _renderUseCases() {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const useCases: UseCase[] = [
- {
- imageUrl: '/images/landing/governance_icon.png',
- type: 'Decentralized governance',
- description:
- 'Decentralized organizations use tokens to represent ownership and \
+ const useCases: UseCase[] = [
+ {
+ imageUrl: '/images/landing/governance_icon.png',
+ type: 'Decentralized governance',
+ 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'],
- classNames: 'lg-px2 md-px2',
- },
- {
- imageUrl: '/images/landing/prediction_market_icon.png',
- type: 'Prediction markets',
- description:
- 'Decentralized prediction market platforms generate sets of tokens that \
+ projectIconUrls: ['/images/landing/aragon.png'],
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/prediction_market_icon.png',
+ type: 'Prediction markets',
+ 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'],
- classNames: 'lg-px2 md-px2',
- },
- {
- imageUrl: '/images/landing/stable_tokens_icon.png',
- type: 'Stable tokens',
- description:
- 'Novel economic constructs such as stable coins require efficient, liquid \
+ projectIconUrls: ['/images/landing/augur.png'],
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/stable_tokens_icon.png',
+ type: 'Stable tokens',
+ 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'],
- classNames: 'lg-px2 md-px2',
- },
- {
- imageUrl: '/images/landing/loans_icon.png',
- type: 'Decentralized loans',
- description:
- 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \
+ projectIconUrls: ['/images/landing/maker.png'],
+ classNames: 'lg-px2 md-px2',
+ },
+ {
+ imageUrl: '/images/landing/loans_icon.png',
+ type: 'Decentralized 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,
- },
- },
- {
- imageUrl: '/images/landing/fund_management_icon.png',
- type: 'Fund management',
- description:
- 'Decentralized fund management limits fund managers to investing in pre-agreed \
+ 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,
+ },
+ },
+ {
+ imageUrl: '/images/landing/fund_management_icon.png',
+ type: 'Fund management',
+ 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 },
- },
- ];
+ projectIconUrls: ['/images/landing/melonport.png'],
+ classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6',
+ style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 },
+ },
+ ];
- const cases = _.map(useCases, (useCase: UseCase) => {
- const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
- const useCaseBoxStyle = {
- color: colors.grey,
- border: '1px solid #565656',
- borderRadius: 4,
- maxWidth: isSmallScreen ? 375 : 'none',
- ...style,
- };
- const typeStyle: React.CSSProperties = {
- color: colors.lightGrey,
- fontSize: 13,
- textTransform: 'uppercase',
- fontFamily: 'Roboto Mono',
- fontWeight: 300,
- };
- return (
- <div
- 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>
- <div className="pt2 center" style={typeStyle}>
- {useCase.type}
- </div>
- <div
- className="pt2"
- style={{
- lineHeight: 1.5,
- fontSize: 14,
- overflow: 'hidden',
- height: 104,
- }}
- >
- {useCase.description}
- </div>
- </div>
- </div>
- );
- });
- 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' }}>
- {cases}
- </div>
- </div>
- );
- }
- private _renderCallToAction() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
- const buttonLabelStyle: React.CSSProperties = {
- textTransform: 'none',
- fontSize: 15,
- fontWeight: 400,
- };
- const lightButtonStyle: React.CSSProperties = {
- borderRadius: 6,
- border: '1px solid #a0a0a0',
- lineHeight: '33px',
- height: 49,
- };
- const callToActionClassNames =
- 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \
+ const cases = _.map(useCases, (useCase: UseCase) => {
+ const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
+ const useCaseBoxStyle = {
+ color: colors.grey,
+ border: '1px solid #565656',
+ borderRadius: 4,
+ maxWidth: isSmallScreen ? 375 : 'none',
+ ...style,
+ };
+ const typeStyle: React.CSSProperties = {
+ color: colors.lightGrey,
+ fontSize: 13,
+ textTransform: 'uppercase',
+ fontFamily: 'Roboto Mono',
+ fontWeight: 300,
+ };
+ return (
+ <div
+ 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>
+ <div className="pt2 center" style={typeStyle}>
+ {useCase.type}
+ </div>
+ <div
+ className="pt2"
+ style={{
+ lineHeight: 1.5,
+ fontSize: 14,
+ overflow: 'hidden',
+ height: 104,
+ }}
+ >
+ {useCase.description}
+ </div>
+ </div>
+ </div>
+ );
+ });
+ 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' }}>
+ {cases}
+ </div>
+ </div>
+ );
+ }
+ private _renderCallToAction() {
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const buttonLabelStyle: React.CSSProperties = {
+ textTransform: 'none',
+ fontSize: 15,
+ fontWeight: 400,
+ };
+ const lightButtonStyle: React.CSSProperties = {
+ borderRadius: 6,
+ border: '1px solid #a0a0a0',
+ lineHeight: '33px',
+ height: 49,
+ };
+ 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={callToActionClassNames}
- 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 }}
- buttonStyle={lightButtonStyle}
- labelColor={colors.white}
- backgroundColor={colors.heroGrey}
- labelStyle={buttonLabelStyle}
- label="Build on 0x"
- onClick={_.noop}
- />
- </Link>
- </div>
- </div>
- </div>
- );
- }
- private _updateScreenWidth() {
- const newScreenWidth = utils.getScreenWidth();
- if (newScreenWidth !== this.state.screenWidth) {
- this.setState({
- screenWidth: newScreenWidth,
- });
- }
- }
+ return (
+ <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,
+ }}
+ >
+ 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 }}
+ buttonStyle={lightButtonStyle}
+ labelColor={colors.white}
+ backgroundColor={colors.heroGrey}
+ labelStyle={buttonLabelStyle}
+ label="Build on 0x"
+ onClick={_.noop}
+ />
+ </Link>
+ </div>
+ </div>
+ </div>
+ );
+ }
+ private _updateScreenWidth() {
+ const newScreenWidth = utils.getScreenWidth();
+ if (newScreenWidth !== this.state.screenWidth) {
+ this.setState({
+ screenWidth: newScreenWidth,
+ });
+ }
+ }
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index ff277c377..9d8d4142d 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -5,38 +5,38 @@ import { TopBar } from 'ts/components/top_bar';
import { Styles } from 'ts/types';
export interface NotFoundProps {
- location: Location;
+ location: Location;
}
interface NotFoundState {}
const styles: Styles = {
- thin: {
- fontWeight: 100,
- },
+ thin: {
+ fontWeight: 100,
+ },
};
export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
- public render() {
- return (
- <div>
- <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>
- <div className="py1">
- <div className="py3">
- Hm... looks like we couldn't find what you are looking for.
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <Footer />
- </div>
- );
- }
+ public render() {
+ return (
+ <div>
+ <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>
+ <div className="py1">
+ <div className="py3">
+ Hm... looks like we couldn't find what you are looking for.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <Footer />
+ </div>
+ );
+ }
}
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
index db5be1f59..118aa0ea5 100644
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ b/packages/website/ts/pages/shared/anchor_title.tsx
@@ -5,87 +5,87 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
const headerSizeToScrollOffset: { [headerSize: string]: number } = {
- h2: -20,
- h3: 0,
+ h2: -20,
+ h3: 0,
};
interface AnchorTitleProps {
- title: string | React.ReactNode;
- id: string;
- headerSize: HeaderSizes;
- shouldShowAnchor: boolean;
+ title: string | React.ReactNode;
+ id: string;
+ headerSize: HeaderSizes;
+ shouldShowAnchor: boolean;
}
interface AnchorTitleState {
- isHovering: boolean;
+ isHovering: boolean;
}
const styles: Styles = {
- anchor: {
- fontSize: 20,
- transform: 'rotate(45deg)',
- cursor: 'pointer',
- },
- headers: {
- WebkitMarginStart: 0,
- WebkitMarginEnd: 0,
- fontWeight: 'bold',
- display: 'block',
- },
- h1: {
- fontSize: '1.8em',
- WebkitMarginBefore: '0.83em',
- WebkitMarginAfter: '0.83em',
- },
- h2: {
- fontSize: '1.5em',
- WebkitMarginBefore: '0.83em',
- WebkitMarginAfter: '0.83em',
- },
- h3: {
- fontSize: '1.17em',
- WebkitMarginBefore: '1em',
- WebkitMarginAfter: '1em',
- },
+ anchor: {
+ fontSize: 20,
+ transform: 'rotate(45deg)',
+ cursor: 'pointer',
+ },
+ headers: {
+ WebkitMarginStart: 0,
+ WebkitMarginEnd: 0,
+ fontWeight: 'bold',
+ display: 'block',
+ },
+ h1: {
+ fontSize: '1.8em',
+ WebkitMarginBefore: '0.83em',
+ WebkitMarginAfter: '0.83em',
+ },
+ h2: {
+ fontSize: '1.5em',
+ WebkitMarginBefore: '0.83em',
+ WebkitMarginAfter: '0.83em',
+ },
+ h3: {
+ fontSize: '1.17em',
+ WebkitMarginBefore: '1em',
+ WebkitMarginAfter: '1em',
+ },
};
export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
- constructor(props: AnchorTitleProps) {
- super(props);
- this.state = {
- isHovering: false,
- };
- }
- public render() {
- let opacity = 0;
- if (this.props.shouldShowAnchor) {
- 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 }}>
- {this.props.title}
- </div>
- <ScrollLink
- to={this.props.id}
- offset={headerSizeToScrollOffset[this.props.headerSize]}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <i
- className="zmdi zmdi-link"
- onClick={utils.setUrlHash.bind(utils, this.props.id)}
- style={{ ...styles.anchor, opacity }}
- onMouseOver={this._setHoverState.bind(this, true)}
- onMouseOut={this._setHoverState.bind(this, false)}
- />
- </ScrollLink>
- </div>
- );
- }
- private _setHoverState(isHovering: boolean) {
- this.setState({
- isHovering,
- });
- }
+ constructor(props: AnchorTitleProps) {
+ super(props);
+ this.state = {
+ isHovering: false,
+ };
+ }
+ public render() {
+ let opacity = 0;
+ if (this.props.shouldShowAnchor) {
+ 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 }}>
+ {this.props.title}
+ </div>
+ <ScrollLink
+ to={this.props.id}
+ offset={headerSizeToScrollOffset[this.props.headerSize]}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.DOCS_CONTAINER_ID}
+ >
+ <i
+ className="zmdi zmdi-link"
+ onClick={utils.setUrlHash.bind(utils, this.props.id)}
+ style={{ ...styles.anchor, opacity }}
+ onMouseOver={this._setHoverState.bind(this, true)}
+ onMouseOut={this._setHoverState.bind(this, false)}
+ />
+ </ScrollLink>
+ </div>
+ );
+ }
+ private _setHoverState(isHovering: boolean) {
+ this.setState({
+ isHovering,
+ });
+ }
}
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index be96fda16..a9d95979b 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -3,23 +3,23 @@ import * as React from 'react';
import * as HighLight from 'react-highlight';
interface MarkdownCodeBlockProps {
- literal: string;
- language: string;
+ literal: string;
+ language: string;
}
interface MarkdownCodeBlockState {}
export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
- // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
- // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
- public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
- return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
- }
- public render() {
- return (
- <span style={{ fontSize: 16 }}>
- <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
- </span>
- );
- }
+ // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
+ // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
+ public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
+ return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
+ }
+ public render() {
+ return (
+ <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 5487dc8cc..c875ab736 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -9,66 +9,66 @@ import { HeaderSizes } from 'ts/types';
import { utils } from 'ts/utils/utils';
interface MarkdownSectionProps {
- sectionName: string;
- markdownContent: string;
- headerSize?: HeaderSizes;
- githubLink?: string;
+ sectionName: string;
+ markdownContent: string;
+ headerSize?: HeaderSizes;
+ githubLink?: string;
}
interface MarkdownSectionState {
- shouldShowAnchor: boolean;
+ shouldShowAnchor: boolean;
}
export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
- public static defaultProps: Partial<MarkdownSectionProps> = {
- headerSize: HeaderSizes.H3,
- };
- constructor(props: MarkdownSectionProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const sectionName = this.props.sectionName;
- const id = utils.getIdFromName(sectionName);
- return (
- <div
- className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <ScrollElement name={id}>
- <div className="clearfix">
- <div className="col lg-col-8 md-col-8 sm-col-12">
- <span style={{ textTransform: 'capitalize' }}>
- <AnchorTitle
- headerSize={this.props.headerSize}
- title={sectionName}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </span>
- </div>
- <div className="col col-4 sm-hide xs-hide py2 right-align">
- {!_.isUndefined(this.props.githubLink) && (
- <RaisedButton
- href={this.props.githubLink}
- target="_blank"
- label="Edit on Github"
- icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
- />
- )}
- </div>
- </div>
- <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
- </ScrollElement>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ public static defaultProps: Partial<MarkdownSectionProps> = {
+ headerSize: HeaderSizes.H3,
+ };
+ constructor(props: MarkdownSectionProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const sectionName = this.props.sectionName;
+ const id = utils.getIdFromName(sectionName);
+ return (
+ <div
+ className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden"
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <ScrollElement name={id}>
+ <div className="clearfix">
+ <div className="col lg-col-8 md-col-8 sm-col-12">
+ <span style={{ textTransform: 'capitalize' }}>
+ <AnchorTitle
+ headerSize={this.props.headerSize}
+ title={sectionName}
+ id={id}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ </span>
+ </div>
+ <div className="col col-4 sm-hide xs-hide py2 right-align">
+ {!_.isUndefined(this.props.githubLink) && (
+ <RaisedButton
+ href={this.props.githubLink}
+ target="_blank"
+ label="Edit on Github"
+ icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />}
+ />
+ )}
+ </div>
+ </div>
+ <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+ </ScrollElement>
+ </div>
+ );
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 849c33504..cd7ea68e6 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -9,146 +9,146 @@ import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
interface NestedSidebarMenuProps {
- topLevelMenu: { [topLevel: string]: string[] };
- menuSubsectionsBySection: MenuSubsectionsBySection;
- shouldDisplaySectionHeaders?: boolean;
- onMenuItemClick?: () => void;
- selectedVersion?: string;
- versions?: string[];
- docPath?: string;
- isSectionHeaderClickable?: boolean;
+ topLevelMenu: { [topLevel: string]: string[] };
+ menuSubsectionsBySection: MenuSubsectionsBySection;
+ shouldDisplaySectionHeaders?: boolean;
+ onMenuItemClick?: () => void;
+ selectedVersion?: string;
+ versions?: string[];
+ docPath?: string;
+ isSectionHeaderClickable?: boolean;
}
interface NestedSidebarMenuState {}
const styles: Styles = {
- menuItemWithHeaders: {
- minHeight: 0,
- },
- menuItemWithoutHeaders: {
- minHeight: 48,
- },
- menuItemInnerDivWithHeaders: {
- lineHeight: 2,
- },
+ menuItemWithHeaders: {
+ minHeight: 0,
+ },
+ menuItemWithoutHeaders: {
+ minHeight: 48,
+ },
+ menuItemInnerDivWithHeaders: {
+ lineHeight: 2,
+ },
};
export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
- public static defaultProps: Partial<NestedSidebarMenuProps> = {
- shouldDisplaySectionHeaders: true,
- onMenuItemClick: _.noop,
- };
- public render() {
- const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
- const finalSectionName = sectionName.replace(/-/g, ' ');
- if (this.props.shouldDisplaySectionHeaders) {
- const id = utils.getIdFromName(sectionName);
- return (
- <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">
- {finalSectionName.toUpperCase()}
- </div>
- </ScrollLink>
- {this._renderMenuItems(menuItems)}
- </div>
- );
- } else {
- 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}
- />
- )}
- {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 menuItems = _.map(menuItemNames, menuItemName => {
- const id = utils.getIdFromName(menuItemName);
- return (
- <div key={menuItemName}>
- <ScrollLink
- key={`menuItem-${menuItemName}`}
- to={id}
- offset={-10}
- duration={constants.DOCS_SCROLL_DURATION_MS}
- containerId={constants.DOCS_CONTAINER_ID}
- >
- <MenuItem
- onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
- style={menuItemStyles}
- innerDivStyle={menuItemInnerDivStyles}
- >
- <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
- </MenuItem>
- </ScrollLink>
- {this._renderMenuItemSubsections(menuItemName)}
- </div>
- );
- });
- return menuItems;
- }
- private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
- if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) {
- return null;
- }
- return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
- }
- 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
- onTouchTap={this._onMenuItemClick.bind(this, name)}
- style={{ minHeight: 35 }}
- innerDivStyle={{
- paddingLeft: 36,
- fontSize: 14,
- lineHeight: '35px',
- }}
- >
- {entityName}
- </MenuItem>
- </ScrollLink>
- </li>
- );
- })}
- </ul>
- );
- }
- private _onMenuItemClick(name: string): void {
- const id = utils.getIdFromName(name);
- utils.setUrlHash(id);
- this.props.onMenuItemClick();
- }
+ public static defaultProps: Partial<NestedSidebarMenuProps> = {
+ shouldDisplaySectionHeaders: true,
+ onMenuItemClick: _.noop,
+ };
+ public render() {
+ const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
+ const finalSectionName = sectionName.replace(/-/g, ' ');
+ if (this.props.shouldDisplaySectionHeaders) {
+ const id = utils.getIdFromName(sectionName);
+ return (
+ <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">
+ {finalSectionName.toUpperCase()}
+ </div>
+ </ScrollLink>
+ {this._renderMenuItems(menuItems)}
+ </div>
+ );
+ } else {
+ 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}
+ />
+ )}
+ {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 menuItems = _.map(menuItemNames, menuItemName => {
+ const id = utils.getIdFromName(menuItemName);
+ return (
+ <div key={menuItemName}>
+ <ScrollLink
+ key={`menuItem-${menuItemName}`}
+ to={id}
+ offset={-10}
+ duration={constants.DOCS_SCROLL_DURATION_MS}
+ containerId={constants.DOCS_CONTAINER_ID}
+ >
+ <MenuItem
+ onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
+ style={menuItemStyles}
+ innerDivStyle={menuItemInnerDivStyles}
+ >
+ <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
+ </MenuItem>
+ </ScrollLink>
+ {this._renderMenuItemSubsections(menuItemName)}
+ </div>
+ );
+ });
+ return menuItems;
+ }
+ private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
+ if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) {
+ return null;
+ }
+ return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
+ }
+ 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
+ onTouchTap={this._onMenuItemClick.bind(this, name)}
+ style={{ minHeight: 35 }}
+ innerDivStyle={{
+ paddingLeft: 36,
+ fontSize: 14,
+ lineHeight: '35px',
+ }}
+ >
+ {entityName}
+ </MenuItem>
+ </ScrollLink>
+ </li>
+ );
+ })}
+ </ul>
+ );
+ }
+ private _onMenuItemClick(name: string): void {
+ const id = utils.getIdFromName(name);
+ utils.setUrlHash(id);
+ this.props.onMenuItemClick();
+ }
}
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index a5f5f52cf..f9aa1a5e6 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -5,46 +5,46 @@ import { HeaderSizes } from 'ts/types';
import { utils } from 'ts/utils/utils';
interface SectionHeaderProps {
- sectionName: string;
- headerSize?: HeaderSizes;
+ sectionName: string;
+ headerSize?: HeaderSizes;
}
interface SectionHeaderState {
- shouldShowAnchor: boolean;
+ shouldShowAnchor: boolean;
}
export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
- public static defaultProps: Partial<SectionHeaderProps> = {
- headerSize: HeaderSizes.H2,
- };
- constructor(props: SectionHeaderProps) {
- super(props);
- this.state = {
- shouldShowAnchor: false,
- };
- }
- public render() {
- const sectionName = this.props.sectionName.replace(/-/g, ' ');
- const id = utils.getIdFromName(sectionName);
- return (
- <div
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <ScrollElement name={id}>
- <AnchorTitle
- headerSize={this.props.headerSize}
- title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </ScrollElement>
- </div>
- );
- }
- private _setAnchorVisibility(shouldShowAnchor: boolean) {
- this.setState({
- shouldShowAnchor,
- });
- }
+ public static defaultProps: Partial<SectionHeaderProps> = {
+ headerSize: HeaderSizes.H2,
+ };
+ constructor(props: SectionHeaderProps) {
+ super(props);
+ this.state = {
+ shouldShowAnchor: false,
+ };
+ }
+ public render() {
+ const sectionName = this.props.sectionName.replace(/-/g, ' ');
+ const id = utils.getIdFromName(sectionName);
+ return (
+ <div
+ onMouseOver={this._setAnchorVisibility.bind(this, true)}
+ onMouseOut={this._setAnchorVisibility.bind(this, false)}
+ >
+ <ScrollElement name={id}>
+ <AnchorTitle
+ headerSize={this.props.headerSize}
+ title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
+ id={id}
+ shouldShowAnchor={this.state.shouldShowAnchor}
+ />
+ </ScrollElement>
+ </div>
+ );
+ }
+ private _setAnchorVisibility(shouldShowAnchor: boolean) {
+ this.setState({
+ shouldShowAnchor,
+ });
+ }
}
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index b922e1048..a647252ba 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -4,34 +4,34 @@ import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
interface VersionDropDownProps {
- selectedVersion: string;
- versions: string[];
- docPath: string;
+ selectedVersion: string;
+ versions: string[];
+ docPath: string;
}
interface VersionDropDownState {}
export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
- public render() {
- return (
- <div className="mx-auto" style={{ width: 120 }}>
- <DropDownMenu
- maxHeight={300}
- value={this.props.selectedVersion}
- onChange={this._updateSelectedVersion.bind(this)}
- >
- {this._renderDropDownItems()}
- </DropDownMenu>
- </div>
- );
- }
- private _renderDropDownItems() {
- const items = _.map(this.props.versions, version => {
- return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
- });
- return items;
- }
- private _updateSelectedVersion(e: any, index: number, value: string) {
- window.location.href = `${this.props.docPath}/${value}${window.location.hash}`;
- }
+ public render() {
+ return (
+ <div className="mx-auto" style={{ width: 120 }}>
+ <DropDownMenu
+ maxHeight={300}
+ value={this.props.selectedVersion}
+ onChange={this._updateSelectedVersion.bind(this)}
+ >
+ {this._renderDropDownItems()}
+ </DropDownMenu>
+ </div>
+ );
+ }
+ private _renderDropDownItems() {
+ const items = _.map(this.props.versions, version => {
+ return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
+ });
+ return items;
+ }
+ private _updateSelectedVersion(e: any, index: number, value: string) {
+ window.location.href = `${this.props.docPath}/${value}${window.location.hash}`;
+ }
}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index d065614ba..dba5ed6a0 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -16,186 +16,186 @@ import { utils } from 'ts/utils/utils';
const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000;
export interface WikiProps {
- source: string;
- location: Location;
+ source: string;
+ location: Location;
}
interface WikiState {
- articlesBySection: ArticlesBySection;
+ articlesBySection: ArticlesBySection;
}
const styles: Styles = {
- mainContainers: {
- position: 'absolute',
- top: 1,
- left: 0,
- bottom: 0,
- right: 0,
- overflowZ: 'hidden',
- overflowY: 'scroll',
- minHeight: 'calc(100vh - 1px)',
- WebkitOverflowScrolling: 'touch',
- },
- menuContainer: {
- borderColor: colors.grey300,
- maxWidth: 330,
- marginLeft: 20,
- },
+ mainContainers: {
+ position: 'absolute',
+ top: 1,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ overflowZ: 'hidden',
+ overflowY: 'scroll',
+ minHeight: 'calc(100vh - 1px)',
+ WebkitOverflowScrolling: 'touch',
+ },
+ menuContainer: {
+ borderColor: colors.grey300,
+ maxWidth: 330,
+ marginLeft: 20,
+ },
};
export class Wiki extends React.Component<WikiProps, WikiState> {
- private _wikiBackoffTimeoutId: number;
- constructor(props: WikiProps) {
- super(props);
- this.state = {
- articlesBySection: undefined,
- };
- }
- public componentWillMount() {
- // tslint:disable-next-line:no-floating-promises
- this._fetchArticlesBySectionAsync();
- }
- public componentWillUnmount() {
- clearTimeout(this._wikiBackoffTimeoutId);
- }
- public render() {
- const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
- ? {}
- : this._getMenuSubsectionsBySection(this.state.articlesBySection);
- return (
- <div>
- <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}>
- <div
- className="relative sm-px2 sm-pt2 sm-m1"
- 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>
- </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 }}
- >
- <NestedSidebarMenu
- topLevelMenu={menuSubsectionsBySection}
- menuSubsectionsBySection={menuSubsectionsBySection}
- isSectionHeaderClickable={true}
- />
- </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="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>
- </div>
- </div>
- )}
- </div>
- );
- }
- private _renderWikiArticles(): React.ReactNode {
- const sectionNames = _.keys(this.state.articlesBySection);
- const sections = _.map(sectionNames, sectionName => this._renderSection(sectionName));
- return sections;
- }
- private _renderSection(sectionName: string) {
- const articles = this.state.articlesBySection[sectionName];
- const renderedArticles = _.map(articles, (article: Article) => {
- const githubLink = `${constants.URL_GITHUB_WIKI}/edit/master/${sectionName}/${article.fileName}`;
- return (
- <div key={`markdown-section-${article.title}`}>
- <MarkdownSection
- sectionName={article.title}
- markdownContent={article.content}
- headerSize={HeaderSizes.H2}
- githubLink={githubLink}
- />
- <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}>
- See a way to make this article better?{' '}
- <a href={githubLink} target="_blank">
- Edit here →
- </a>
- </div>
- </div>
- );
- });
- return (
- <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
- <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} />
- {renderedArticles}
- </div>
- );
- }
- private _scrollToHash(): void {
- const hashWithPrefix = this.props.location.hash;
- let hash = hashWithPrefix.slice(1);
- if (_.isEmpty(hash)) {
- hash = '0xProtocolWiki'; // scroll to the top
- }
+ private _wikiBackoffTimeoutId: number;
+ constructor(props: WikiProps) {
+ super(props);
+ this.state = {
+ articlesBySection: undefined,
+ };
+ }
+ public componentWillMount() {
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchArticlesBySectionAsync();
+ }
+ public componentWillUnmount() {
+ clearTimeout(this._wikiBackoffTimeoutId);
+ }
+ public render() {
+ const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
+ ? {}
+ : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+ return (
+ <div>
+ <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}>
+ <div
+ className="relative sm-px2 sm-pt2 sm-m1"
+ 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>
+ </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 }}
+ >
+ <NestedSidebarMenu
+ topLevelMenu={menuSubsectionsBySection}
+ menuSubsectionsBySection={menuSubsectionsBySection}
+ isSectionHeaderClickable={true}
+ />
+ </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="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>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+ }
+ private _renderWikiArticles(): React.ReactNode {
+ const sectionNames = _.keys(this.state.articlesBySection);
+ const sections = _.map(sectionNames, sectionName => this._renderSection(sectionName));
+ return sections;
+ }
+ private _renderSection(sectionName: string) {
+ const articles = this.state.articlesBySection[sectionName];
+ const renderedArticles = _.map(articles, (article: Article) => {
+ const githubLink = `${constants.URL_GITHUB_WIKI}/edit/master/${sectionName}/${article.fileName}`;
+ return (
+ <div key={`markdown-section-${article.title}`}>
+ <MarkdownSection
+ sectionName={article.title}
+ markdownContent={article.content}
+ headerSize={HeaderSizes.H2}
+ githubLink={githubLink}
+ />
+ <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}>
+ See a way to make this article better?{' '}
+ <a href={githubLink} target="_blank">
+ Edit here →
+ </a>
+ </div>
+ </div>
+ );
+ });
+ return (
+ <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
+ <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} />
+ {renderedArticles}
+ </div>
+ );
+ }
+ private _scrollToHash(): void {
+ const hashWithPrefix = this.props.location.hash;
+ let hash = hashWithPrefix.slice(1);
+ if (_.isEmpty(hash)) {
+ hash = '0xProtocolWiki'; // scroll to the top
+ }
- scroller.scrollTo(hash, {
- duration: 0,
- offset: 0,
- containerId: 'documentation',
- });
- }
- private async _fetchArticlesBySectionAsync(): Promise<void> {
- const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
- const response = await fetch(endpoint);
- if (response.status === constants.HTTP_NO_CONTENT_STATUS_CODE) {
- // We need to backoff and try fetching again later
- this._wikiBackoffTimeoutId = window.setTimeout(() => {
- // tslint:disable-next-line:no-floating-promises
- this._fetchArticlesBySectionAsync();
- }, WIKI_NOT_READY_BACKOUT_TIMEOUT_MS);
- return;
- }
- if (response.status !== 200) {
- // TODO: Show the user an error message when the wiki fail to load
- const errMsg = await response.text();
- utils.consoleLog(`Failed to load wiki: ${response.status} ${errMsg}`);
- return;
- }
- const articlesBySection = await response.json();
- this.setState(
- {
- articlesBySection,
- },
- () => {
- this._scrollToHash();
- },
- );
- }
- private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
- const sectionNames = _.keys(articlesBySection);
- const menuSubsectionsBySection: { [section: string]: string[] } = {};
- for (const sectionName of sectionNames) {
- const articles = articlesBySection[sectionName];
- const articleNames = _.map(articles, article => article.title);
- menuSubsectionsBySection[sectionName] = articleNames;
- }
- return menuSubsectionsBySection;
- }
+ scroller.scrollTo(hash, {
+ duration: 0,
+ offset: 0,
+ containerId: 'documentation',
+ });
+ }
+ private async _fetchArticlesBySectionAsync(): Promise<void> {
+ const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
+ const response = await fetch(endpoint);
+ if (response.status === constants.HTTP_NO_CONTENT_STATUS_CODE) {
+ // We need to backoff and try fetching again later
+ this._wikiBackoffTimeoutId = window.setTimeout(() => {
+ // tslint:disable-next-line:no-floating-promises
+ this._fetchArticlesBySectionAsync();
+ }, WIKI_NOT_READY_BACKOUT_TIMEOUT_MS);
+ return;
+ }
+ if (response.status !== 200) {
+ // TODO: Show the user an error message when the wiki fail to load
+ const errMsg = await response.text();
+ utils.consoleLog(`Failed to load wiki: ${response.status} ${errMsg}`);
+ return;
+ }
+ const articlesBySection = await response.json();
+ this.setState(
+ {
+ articlesBySection,
+ },
+ () => {
+ this._scrollToHash();
+ },
+ );
+ }
+ private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection) {
+ const sectionNames = _.keys(articlesBySection);
+ const menuSubsectionsBySection: { [section: string]: string[] } = {};
+ for (const sectionName of sectionNames) {
+ const articles = articlesBySection[sectionName];
+ const articleNames = _.map(articles, article => article.title);
+ menuSubsectionsBySection[sectionName] = articleNames;
+ }
+ return menuSubsectionsBySection;
+ }
}
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index 42989e5e1..19300e242 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -2,235 +2,235 @@ import { BigNumber } from '@0xproject/utils';
import { Dispatch } from 'redux';
import { State } from 'ts/redux/reducer';
import {
- ActionTypes,
- AssetToken,
- BlockchainErrs,
- Order,
- ProviderType,
- ScreenWidths,
- Side,
- SignatureData,
- Token,
- TokenStateByAddress,
+ ActionTypes,
+ AssetToken,
+ BlockchainErrs,
+ Order,
+ ProviderType,
+ ScreenWidths,
+ Side,
+ SignatureData,
+ Token,
+ TokenStateByAddress,
} from 'ts/types';
export class Dispatcher {
- private _dispatch: Dispatch<State>;
- constructor(dispatch: Dispatch<State>) {
- this._dispatch = dispatch;
- }
- // Portal
- public resetState() {
- this._dispatch({
- type: ActionTypes.ResetState,
- });
- }
- public updateNodeVersion(nodeVersion: string) {
- this._dispatch({
- data: nodeVersion,
- type: ActionTypes.UpdateNodeVersion,
- });
- }
- public updateScreenWidth(screenWidth: ScreenWidths) {
- this._dispatch({
- data: screenWidth,
- type: ActionTypes.UpdateScreenWidth,
- });
- }
- public swapAssetTokenSymbols() {
- this._dispatch({
- type: ActionTypes.SwapAssetTokens,
- });
- }
- public updateOrderSalt(salt: BigNumber) {
- this._dispatch({
- data: salt,
- type: ActionTypes.UpdateOrderSalt,
- });
- }
- public updateUserSuppliedOrderCache(order: Order) {
- this._dispatch({
- data: order,
- type: ActionTypes.UpdateUserSuppliedOrderCache,
- });
- }
- public updateShouldBlockchainErrDialogBeOpen(shouldBeOpen: boolean) {
- this._dispatch({
- data: shouldBeOpen,
- type: ActionTypes.UpdateShouldBlockchainErrDialogBeOpen,
- });
- }
- public updateChosenAssetToken(side: Side, token: AssetToken) {
- this._dispatch({
- data: {
- side,
- token,
- },
- type: ActionTypes.UpdateChosenAssetToken,
- });
- }
- public updateChosenAssetTokenAddress(side: Side, address: string) {
- this._dispatch({
- data: {
- address,
- side,
- },
- type: ActionTypes.UpdateChosenAssetTokenAddress,
- });
- }
- public updateOrderTakerAddress(address: string) {
- this._dispatch({
- data: address,
- type: ActionTypes.UpdateOrderTakerAddress,
- });
- }
- public updateUserAddress(address: string) {
- this._dispatch({
- data: address,
- type: ActionTypes.UpdateUserAddress,
- });
- }
- public updateOrderExpiry(unixTimestampSec: BigNumber) {
- this._dispatch({
- data: unixTimestampSec,
- type: ActionTypes.UpdateOrderExpiry,
- });
- }
- public encounteredBlockchainError(err: BlockchainErrs) {
- this._dispatch({
- data: err,
- type: ActionTypes.BlockchainErrEncountered,
- });
- }
- public updateBlockchainIsLoaded(isLoaded: boolean) {
- this._dispatch({
- data: isLoaded,
- type: ActionTypes.UpdateBlockchainIsLoaded,
- });
- }
- public addTokenToTokenByAddress(token: Token) {
- this._dispatch({
- data: token,
- type: ActionTypes.AddTokenToTokenByAddress,
- });
- }
- public removeTokenToTokenByAddress(token: Token) {
- this._dispatch({
- data: token,
- type: ActionTypes.RemoveTokenFromTokenByAddress,
- });
- }
- public clearTokenByAddress() {
- this._dispatch({
- type: ActionTypes.ClearTokenByAddress,
- });
- }
- public updateTokenByAddress(tokens: Token[]) {
- this._dispatch({
- data: tokens,
- type: ActionTypes.UpdateTokenByAddress,
- });
- }
- public updateTokenStateByAddress(tokenStateByAddress: TokenStateByAddress) {
- this._dispatch({
- data: tokenStateByAddress,
- type: ActionTypes.UpdateTokenStateByAddress,
- });
- }
- public removeFromTokenStateByAddress(tokenAddress: string) {
- this._dispatch({
- data: tokenAddress,
- type: ActionTypes.RemoveFromTokenStateByAddress,
- });
- }
- public replaceTokenAllowanceByAddress(address: string, allowance: BigNumber) {
- this._dispatch({
- data: {
- address,
- allowance,
- },
- type: ActionTypes.ReplaceTokenAllowanceByAddress,
- });
- }
- public replaceTokenBalanceByAddress(address: string, balance: BigNumber) {
- this._dispatch({
- data: {
- address,
- balance,
- },
- type: ActionTypes.ReplaceTokenBalanceByAddress,
- });
- }
- public updateTokenBalanceByAddress(address: string, balanceDelta: BigNumber) {
- this._dispatch({
- data: {
- address,
- balanceDelta,
- },
- type: ActionTypes.UpdateTokenBalanceByAddress,
- });
- }
- public updateSignatureData(signatureData: SignatureData) {
- this._dispatch({
- data: signatureData,
- type: ActionTypes.UpdateOrderSignatureData,
- });
- }
- public updateUserEtherBalance(balance: BigNumber) {
- this._dispatch({
- data: balance,
- type: ActionTypes.UpdateUserEtherBalance,
- });
- }
- public updateNetworkId(networkId: number) {
- this._dispatch({
- data: networkId,
- type: ActionTypes.UpdateNetworkId,
- });
- }
- public updateOrderFillAmount(amount: BigNumber) {
- this._dispatch({
- data: amount,
- type: ActionTypes.UpdateOrderFillAmount,
- });
- }
+ private _dispatch: Dispatch<State>;
+ constructor(dispatch: Dispatch<State>) {
+ this._dispatch = dispatch;
+ }
+ // Portal
+ public resetState() {
+ this._dispatch({
+ type: ActionTypes.ResetState,
+ });
+ }
+ public updateNodeVersion(nodeVersion: string) {
+ this._dispatch({
+ data: nodeVersion,
+ type: ActionTypes.UpdateNodeVersion,
+ });
+ }
+ public updateScreenWidth(screenWidth: ScreenWidths) {
+ this._dispatch({
+ data: screenWidth,
+ type: ActionTypes.UpdateScreenWidth,
+ });
+ }
+ public swapAssetTokenSymbols() {
+ this._dispatch({
+ type: ActionTypes.SwapAssetTokens,
+ });
+ }
+ public updateOrderSalt(salt: BigNumber) {
+ this._dispatch({
+ data: salt,
+ type: ActionTypes.UpdateOrderSalt,
+ });
+ }
+ public updateUserSuppliedOrderCache(order: Order) {
+ this._dispatch({
+ data: order,
+ type: ActionTypes.UpdateUserSuppliedOrderCache,
+ });
+ }
+ public updateShouldBlockchainErrDialogBeOpen(shouldBeOpen: boolean) {
+ this._dispatch({
+ data: shouldBeOpen,
+ type: ActionTypes.UpdateShouldBlockchainErrDialogBeOpen,
+ });
+ }
+ public updateChosenAssetToken(side: Side, token: AssetToken) {
+ this._dispatch({
+ data: {
+ side,
+ token,
+ },
+ type: ActionTypes.UpdateChosenAssetToken,
+ });
+ }
+ public updateChosenAssetTokenAddress(side: Side, address: string) {
+ this._dispatch({
+ data: {
+ address,
+ side,
+ },
+ type: ActionTypes.UpdateChosenAssetTokenAddress,
+ });
+ }
+ public updateOrderTakerAddress(address: string) {
+ this._dispatch({
+ data: address,
+ type: ActionTypes.UpdateOrderTakerAddress,
+ });
+ }
+ public updateUserAddress(address: string) {
+ this._dispatch({
+ data: address,
+ type: ActionTypes.UpdateUserAddress,
+ });
+ }
+ public updateOrderExpiry(unixTimestampSec: BigNumber) {
+ this._dispatch({
+ data: unixTimestampSec,
+ type: ActionTypes.UpdateOrderExpiry,
+ });
+ }
+ public encounteredBlockchainError(err: BlockchainErrs) {
+ this._dispatch({
+ data: err,
+ type: ActionTypes.BlockchainErrEncountered,
+ });
+ }
+ public updateBlockchainIsLoaded(isLoaded: boolean) {
+ this._dispatch({
+ data: isLoaded,
+ type: ActionTypes.UpdateBlockchainIsLoaded,
+ });
+ }
+ public addTokenToTokenByAddress(token: Token) {
+ this._dispatch({
+ data: token,
+ type: ActionTypes.AddTokenToTokenByAddress,
+ });
+ }
+ public removeTokenToTokenByAddress(token: Token) {
+ this._dispatch({
+ data: token,
+ type: ActionTypes.RemoveTokenFromTokenByAddress,
+ });
+ }
+ public clearTokenByAddress() {
+ this._dispatch({
+ type: ActionTypes.ClearTokenByAddress,
+ });
+ }
+ public updateTokenByAddress(tokens: Token[]) {
+ this._dispatch({
+ data: tokens,
+ type: ActionTypes.UpdateTokenByAddress,
+ });
+ }
+ public updateTokenStateByAddress(tokenStateByAddress: TokenStateByAddress) {
+ this._dispatch({
+ data: tokenStateByAddress,
+ type: ActionTypes.UpdateTokenStateByAddress,
+ });
+ }
+ public removeFromTokenStateByAddress(tokenAddress: string) {
+ this._dispatch({
+ data: tokenAddress,
+ type: ActionTypes.RemoveFromTokenStateByAddress,
+ });
+ }
+ public replaceTokenAllowanceByAddress(address: string, allowance: BigNumber) {
+ this._dispatch({
+ data: {
+ address,
+ allowance,
+ },
+ type: ActionTypes.ReplaceTokenAllowanceByAddress,
+ });
+ }
+ public replaceTokenBalanceByAddress(address: string, balance: BigNumber) {
+ this._dispatch({
+ data: {
+ address,
+ balance,
+ },
+ type: ActionTypes.ReplaceTokenBalanceByAddress,
+ });
+ }
+ public updateTokenBalanceByAddress(address: string, balanceDelta: BigNumber) {
+ this._dispatch({
+ data: {
+ address,
+ balanceDelta,
+ },
+ type: ActionTypes.UpdateTokenBalanceByAddress,
+ });
+ }
+ public updateSignatureData(signatureData: SignatureData) {
+ this._dispatch({
+ data: signatureData,
+ type: ActionTypes.UpdateOrderSignatureData,
+ });
+ }
+ public updateUserEtherBalance(balance: BigNumber) {
+ this._dispatch({
+ data: balance,
+ type: ActionTypes.UpdateUserEtherBalance,
+ });
+ }
+ public updateNetworkId(networkId: number) {
+ this._dispatch({
+ data: networkId,
+ type: ActionTypes.UpdateNetworkId,
+ });
+ }
+ public updateOrderFillAmount(amount: BigNumber) {
+ this._dispatch({
+ data: amount,
+ type: ActionTypes.UpdateOrderFillAmount,
+ });
+ }
- // Docs
- public updateCurrentDocsVersion(version: string) {
- this._dispatch({
- data: version,
- type: ActionTypes.UpdateLibraryVersion,
- });
- }
- public updateAvailableDocVersions(versions: string[]) {
- this._dispatch({
- data: versions,
- type: ActionTypes.UpdateAvailableLibraryVersions,
- });
- }
+ // Docs
+ public updateCurrentDocsVersion(version: string) {
+ this._dispatch({
+ data: version,
+ type: ActionTypes.UpdateLibraryVersion,
+ });
+ }
+ public updateAvailableDocVersions(versions: string[]) {
+ this._dispatch({
+ data: versions,
+ type: ActionTypes.UpdateAvailableLibraryVersions,
+ });
+ }
- // Shared
- public showFlashMessage(msg: string | React.ReactNode) {
- this._dispatch({
- data: msg,
- type: ActionTypes.ShowFlashMessage,
- });
- }
- public hideFlashMessage() {
- this._dispatch({
- type: ActionTypes.HideFlashMessage,
- });
- }
- public updateProviderType(providerType: ProviderType) {
- this._dispatch({
- type: ActionTypes.UpdateProviderType,
- data: providerType,
- });
- }
- public updateInjectedProviderName(injectedProviderName: string) {
- this._dispatch({
- type: ActionTypes.UpdateInjectedProviderName,
- data: injectedProviderName,
- });
- }
+ // Shared
+ public showFlashMessage(msg: string | React.ReactNode) {
+ this._dispatch({
+ data: msg,
+ type: ActionTypes.ShowFlashMessage,
+ });
+ }
+ public hideFlashMessage() {
+ this._dispatch({
+ type: ActionTypes.HideFlashMessage,
+ });
+ }
+ public updateProviderType(providerType: ProviderType) {
+ this._dispatch({
+ type: ActionTypes.UpdateProviderType,
+ data: providerType,
+ });
+ }
+ public updateInjectedProviderName(injectedProviderName: string) {
+ this._dispatch({
+ type: ActionTypes.UpdateInjectedProviderName,
+ data: injectedProviderName,
+ });
+ }
}
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index 06ac8b670..cc467eadd 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -2,18 +2,18 @@ import { ZeroEx } from '0x.js';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import {
- Action,
- ActionTypes,
- BlockchainErrs,
- Order,
- ProviderType,
- ScreenWidths,
- Side,
- SideToAssetToken,
- SignatureData,
- TokenByAddress,
- TokenState,
- TokenStateByAddress,
+ Action,
+ ActionTypes,
+ BlockchainErrs,
+ Order,
+ ProviderType,
+ ScreenWidths,
+ Side,
+ SideToAssetToken,
+ SignatureData,
+ TokenByAddress,
+ TokenState,
+ TokenStateByAddress,
} from 'ts/types';
import { utils } from 'ts/utils/utils';
@@ -23,367 +23,367 @@ import { utils } from 'ts/utils/utils';
const DEFAULT_DOCS_VERSION = '0.0.0';
export interface State {
- // Portal
- blockchainErr: BlockchainErrs;
- blockchainIsLoaded: boolean;
- networkId: number;
- orderExpiryTimestamp: BigNumber;
- orderFillAmount: BigNumber;
- orderTakerAddress: string;
- orderSignatureData: SignatureData;
- orderSalt: BigNumber;
- nodeVersion: string;
- screenWidth: ScreenWidths;
- shouldBlockchainErrDialogBeOpen: boolean;
- sideToAssetToken: SideToAssetToken;
- tokenByAddress: TokenByAddress;
- tokenStateByAddress: TokenStateByAddress;
- userAddress: string;
- userEtherBalance: BigNumber;
- // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
- userSuppliedOrderCache: Order;
-
- // Docs
- docsVersion: string;
- availableDocVersions: string[];
-
- // Shared
- flashMessage: string | React.ReactNode;
- providerType: ProviderType;
- injectedProviderName: string;
+ // Portal
+ blockchainErr: BlockchainErrs;
+ blockchainIsLoaded: boolean;
+ networkId: number;
+ orderExpiryTimestamp: BigNumber;
+ orderFillAmount: BigNumber;
+ orderTakerAddress: string;
+ orderSignatureData: SignatureData;
+ orderSalt: BigNumber;
+ nodeVersion: string;
+ screenWidth: ScreenWidths;
+ shouldBlockchainErrDialogBeOpen: boolean;
+ sideToAssetToken: SideToAssetToken;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ userAddress: string;
+ userEtherBalance: BigNumber;
+ // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
+ userSuppliedOrderCache: Order;
+
+ // Docs
+ docsVersion: string;
+ availableDocVersions: string[];
+
+ // Shared
+ flashMessage: string | React.ReactNode;
+ providerType: ProviderType;
+ injectedProviderName: string;
}
const INITIAL_STATE: State = {
- // Portal
- blockchainErr: BlockchainErrs.NoError,
- blockchainIsLoaded: false,
- networkId: undefined,
- orderExpiryTimestamp: utils.initialOrderExpiryUnixTimestampSec(),
- orderFillAmount: undefined,
- orderSignatureData: {
- hash: '',
- r: '',
- s: '',
- v: 27,
- },
- orderTakerAddress: '',
- orderSalt: ZeroEx.generatePseudoRandomSalt(),
- nodeVersion: undefined,
- screenWidth: utils.getScreenWidth(),
- shouldBlockchainErrDialogBeOpen: false,
- sideToAssetToken: {
- [Side.Deposit]: {},
- [Side.Receive]: {},
- },
- tokenByAddress: {},
- tokenStateByAddress: {},
- userAddress: '',
- userEtherBalance: new BigNumber(0),
- userSuppliedOrderCache: undefined,
-
- // Docs
- docsVersion: DEFAULT_DOCS_VERSION,
- availableDocVersions: [DEFAULT_DOCS_VERSION],
-
- // Shared
- flashMessage: undefined,
- providerType: ProviderType.Injected,
- injectedProviderName: '',
+ // Portal
+ blockchainErr: BlockchainErrs.NoError,
+ blockchainIsLoaded: false,
+ networkId: undefined,
+ orderExpiryTimestamp: utils.initialOrderExpiryUnixTimestampSec(),
+ orderFillAmount: undefined,
+ orderSignatureData: {
+ hash: '',
+ r: '',
+ s: '',
+ v: 27,
+ },
+ orderTakerAddress: '',
+ orderSalt: ZeroEx.generatePseudoRandomSalt(),
+ nodeVersion: undefined,
+ screenWidth: utils.getScreenWidth(),
+ shouldBlockchainErrDialogBeOpen: false,
+ sideToAssetToken: {
+ [Side.Deposit]: {},
+ [Side.Receive]: {},
+ },
+ tokenByAddress: {},
+ tokenStateByAddress: {},
+ userAddress: '',
+ userEtherBalance: new BigNumber(0),
+ userSuppliedOrderCache: undefined,
+
+ // Docs
+ docsVersion: DEFAULT_DOCS_VERSION,
+ availableDocVersions: [DEFAULT_DOCS_VERSION],
+
+ // Shared
+ flashMessage: undefined,
+ providerType: ProviderType.Injected,
+ injectedProviderName: '',
};
export function reducer(state: State = INITIAL_STATE, action: Action) {
- switch (action.type) {
- // Portal
- case ActionTypes.ResetState:
- return INITIAL_STATE;
-
- case ActionTypes.UpdateOrderSalt: {
- return {
- ...state,
- orderSalt: action.data,
- };
- }
-
- case ActionTypes.UpdateNodeVersion: {
- return {
- ...state,
- nodeVersion: action.data,
- };
- }
-
- case ActionTypes.UpdateOrderFillAmount: {
- return {
- ...state,
- orderFillAmount: action.data,
- };
- }
-
- case ActionTypes.UpdateShouldBlockchainErrDialogBeOpen: {
- return {
- ...state,
- shouldBlockchainErrDialogBeOpen: action.data,
- };
- }
-
- case ActionTypes.UpdateUserEtherBalance: {
- return {
- ...state,
- userEtherBalance: action.data,
- };
- }
-
- case ActionTypes.UpdateUserSuppliedOrderCache: {
- return {
- ...state,
- userSuppliedOrderCache: action.data,
- };
- }
-
- case ActionTypes.ClearTokenByAddress: {
- return {
- ...state,
- tokenByAddress: {},
- };
- }
-
- case ActionTypes.AddTokenToTokenByAddress: {
- const newTokenByAddress = state.tokenByAddress;
- newTokenByAddress[action.data.address] = action.data;
- return {
- ...state,
- tokenByAddress: newTokenByAddress,
- };
- }
-
- case ActionTypes.RemoveTokenFromTokenByAddress: {
- const newTokenByAddress = state.tokenByAddress;
- delete newTokenByAddress[action.data.address];
- return {
- ...state,
- tokenByAddress: newTokenByAddress,
- };
- }
-
- case ActionTypes.UpdateTokenByAddress: {
- const tokenByAddress = state.tokenByAddress;
- const tokens = action.data;
- _.each(tokens, token => {
- const updatedToken = {
- ...tokenByAddress[token.address],
- ...token,
- };
- tokenByAddress[token.address] = updatedToken;
- });
- return {
- ...state,
- tokenByAddress,
- };
- }
-
- case ActionTypes.UpdateTokenStateByAddress: {
- const tokenStateByAddress = state.tokenStateByAddress;
- const updatedTokenStateByAddress = action.data;
- _.each(updatedTokenStateByAddress, (tokenState: TokenState, address: string) => {
- const updatedTokenState = {
- ...tokenStateByAddress[address],
- ...tokenState,
- };
- tokenStateByAddress[address] = updatedTokenState;
- });
- return {
- ...state,
- tokenStateByAddress,
- };
- }
-
- case ActionTypes.RemoveFromTokenStateByAddress: {
- const tokenStateByAddress = state.tokenStateByAddress;
- const tokenAddress = action.data;
- delete tokenStateByAddress[tokenAddress];
- return {
- ...state,
- tokenStateByAddress,
- };
- }
-
- case ActionTypes.ReplaceTokenAllowanceByAddress: {
- const tokenStateByAddress = state.tokenStateByAddress;
- const allowance = action.data.allowance;
- const tokenAddress = action.data.address;
- tokenStateByAddress[tokenAddress] = {
- ...tokenStateByAddress[tokenAddress],
- allowance,
- };
- return {
- ...state,
- tokenStateByAddress,
- };
- }
-
- case ActionTypes.ReplaceTokenBalanceByAddress: {
- const tokenStateByAddress = state.tokenStateByAddress;
- const balance = action.data.balance;
- const tokenAddress = action.data.address;
- tokenStateByAddress[tokenAddress] = {
- ...tokenStateByAddress[tokenAddress],
- balance,
- };
- return {
- ...state,
- tokenStateByAddress,
- };
- }
-
- case ActionTypes.UpdateTokenBalanceByAddress: {
- const tokenStateByAddress = state.tokenStateByAddress;
- const balanceDelta = action.data.balanceDelta;
- const tokenAddress = action.data.address;
- const currBalance = tokenStateByAddress[tokenAddress].balance;
- tokenStateByAddress[tokenAddress] = {
- ...tokenStateByAddress[tokenAddress],
- balance: currBalance.plus(balanceDelta),
- };
- return {
- ...state,
- tokenStateByAddress,
- };
- }
-
- case ActionTypes.UpdateOrderSignatureData: {
- return {
- ...state,
- orderSignatureData: action.data,
- };
- }
-
- case ActionTypes.UpdateScreenWidth: {
- return {
- ...state,
- screenWidth: action.data,
- };
- }
-
- case ActionTypes.UpdateBlockchainIsLoaded: {
- return {
- ...state,
- blockchainIsLoaded: action.data,
- };
- }
-
- case ActionTypes.BlockchainErrEncountered: {
- return {
- ...state,
- blockchainErr: action.data,
- };
- }
-
- case ActionTypes.UpdateNetworkId: {
- return {
- ...state,
- networkId: action.data,
- };
- }
-
- case ActionTypes.UpdateChosenAssetToken: {
- const newSideToAssetToken = {
- ...state.sideToAssetToken,
- [action.data.side]: action.data.token,
- };
- return {
- ...state,
- sideToAssetToken: newSideToAssetToken,
- };
- }
-
- case ActionTypes.UpdateChosenAssetTokenAddress: {
- const newAssetToken = state.sideToAssetToken[action.data.side];
- newAssetToken.address = action.data.address;
- const newSideToAssetToken = {
- ...state.sideToAssetToken,
- [action.data.side]: newAssetToken,
- };
- return {
- ...state,
- sideToAssetToken: newSideToAssetToken,
- };
- }
-
- case ActionTypes.SwapAssetTokens: {
- const newSideToAssetToken = {
- [Side.Deposit]: state.sideToAssetToken[Side.Receive],
- [Side.Receive]: state.sideToAssetToken[Side.Deposit],
- };
- return {
- ...state,
- sideToAssetToken: newSideToAssetToken,
- };
- }
-
- case ActionTypes.UpdateOrderExpiry: {
- return {
- ...state,
- orderExpiryTimestamp: action.data,
- };
- }
-
- case ActionTypes.UpdateOrderTakerAddress: {
- return {
- ...state,
- orderTakerAddress: action.data,
- };
- }
-
- case ActionTypes.UpdateUserAddress: {
- return {
- ...state,
- userAddress: action.data,
- };
- }
-
- // Docs
- case ActionTypes.UpdateLibraryVersion: {
- return {
- ...state,
- docsVersion: action.data,
- };
- }
- case ActionTypes.UpdateAvailableLibraryVersions: {
- return {
- ...state,
- availableDocVersions: action.data,
- };
- }
-
- // Shared
- case ActionTypes.ShowFlashMessage: {
- return {
- ...state,
- flashMessage: action.data,
- };
- }
-
- case ActionTypes.HideFlashMessage: {
- return {
- ...state,
- flashMessage: undefined,
- };
- }
-
- case ActionTypes.UpdateProviderType: {
- return {
- ...state,
- providerType: action.data,
- };
- }
-
- case ActionTypes.UpdateInjectedProviderName: {
- return {
- ...state,
- injectedProviderName: action.data,
- };
- }
-
- default:
- return state;
- }
+ switch (action.type) {
+ // Portal
+ case ActionTypes.ResetState:
+ return INITIAL_STATE;
+
+ case ActionTypes.UpdateOrderSalt: {
+ return {
+ ...state,
+ orderSalt: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateNodeVersion: {
+ return {
+ ...state,
+ nodeVersion: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateOrderFillAmount: {
+ return {
+ ...state,
+ orderFillAmount: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateShouldBlockchainErrDialogBeOpen: {
+ return {
+ ...state,
+ shouldBlockchainErrDialogBeOpen: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateUserEtherBalance: {
+ return {
+ ...state,
+ userEtherBalance: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateUserSuppliedOrderCache: {
+ return {
+ ...state,
+ userSuppliedOrderCache: action.data,
+ };
+ }
+
+ case ActionTypes.ClearTokenByAddress: {
+ return {
+ ...state,
+ tokenByAddress: {},
+ };
+ }
+
+ case ActionTypes.AddTokenToTokenByAddress: {
+ const newTokenByAddress = state.tokenByAddress;
+ newTokenByAddress[action.data.address] = action.data;
+ return {
+ ...state,
+ tokenByAddress: newTokenByAddress,
+ };
+ }
+
+ case ActionTypes.RemoveTokenFromTokenByAddress: {
+ const newTokenByAddress = state.tokenByAddress;
+ delete newTokenByAddress[action.data.address];
+ return {
+ ...state,
+ tokenByAddress: newTokenByAddress,
+ };
+ }
+
+ case ActionTypes.UpdateTokenByAddress: {
+ const tokenByAddress = state.tokenByAddress;
+ const tokens = action.data;
+ _.each(tokens, token => {
+ const updatedToken = {
+ ...tokenByAddress[token.address],
+ ...token,
+ };
+ tokenByAddress[token.address] = updatedToken;
+ });
+ return {
+ ...state,
+ tokenByAddress,
+ };
+ }
+
+ case ActionTypes.UpdateTokenStateByAddress: {
+ const tokenStateByAddress = state.tokenStateByAddress;
+ const updatedTokenStateByAddress = action.data;
+ _.each(updatedTokenStateByAddress, (tokenState: TokenState, address: string) => {
+ const updatedTokenState = {
+ ...tokenStateByAddress[address],
+ ...tokenState,
+ };
+ tokenStateByAddress[address] = updatedTokenState;
+ });
+ return {
+ ...state,
+ tokenStateByAddress,
+ };
+ }
+
+ case ActionTypes.RemoveFromTokenStateByAddress: {
+ const tokenStateByAddress = state.tokenStateByAddress;
+ const tokenAddress = action.data;
+ delete tokenStateByAddress[tokenAddress];
+ return {
+ ...state,
+ tokenStateByAddress,
+ };
+ }
+
+ case ActionTypes.ReplaceTokenAllowanceByAddress: {
+ const tokenStateByAddress = state.tokenStateByAddress;
+ const allowance = action.data.allowance;
+ const tokenAddress = action.data.address;
+ tokenStateByAddress[tokenAddress] = {
+ ...tokenStateByAddress[tokenAddress],
+ allowance,
+ };
+ return {
+ ...state,
+ tokenStateByAddress,
+ };
+ }
+
+ case ActionTypes.ReplaceTokenBalanceByAddress: {
+ const tokenStateByAddress = state.tokenStateByAddress;
+ const balance = action.data.balance;
+ const tokenAddress = action.data.address;
+ tokenStateByAddress[tokenAddress] = {
+ ...tokenStateByAddress[tokenAddress],
+ balance,
+ };
+ return {
+ ...state,
+ tokenStateByAddress,
+ };
+ }
+
+ case ActionTypes.UpdateTokenBalanceByAddress: {
+ const tokenStateByAddress = state.tokenStateByAddress;
+ const balanceDelta = action.data.balanceDelta;
+ const tokenAddress = action.data.address;
+ const currBalance = tokenStateByAddress[tokenAddress].balance;
+ tokenStateByAddress[tokenAddress] = {
+ ...tokenStateByAddress[tokenAddress],
+ balance: currBalance.plus(balanceDelta),
+ };
+ return {
+ ...state,
+ tokenStateByAddress,
+ };
+ }
+
+ case ActionTypes.UpdateOrderSignatureData: {
+ return {
+ ...state,
+ orderSignatureData: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateScreenWidth: {
+ return {
+ ...state,
+ screenWidth: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateBlockchainIsLoaded: {
+ return {
+ ...state,
+ blockchainIsLoaded: action.data,
+ };
+ }
+
+ case ActionTypes.BlockchainErrEncountered: {
+ return {
+ ...state,
+ blockchainErr: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateNetworkId: {
+ return {
+ ...state,
+ networkId: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateChosenAssetToken: {
+ const newSideToAssetToken = {
+ ...state.sideToAssetToken,
+ [action.data.side]: action.data.token,
+ };
+ return {
+ ...state,
+ sideToAssetToken: newSideToAssetToken,
+ };
+ }
+
+ case ActionTypes.UpdateChosenAssetTokenAddress: {
+ const newAssetToken = state.sideToAssetToken[action.data.side];
+ newAssetToken.address = action.data.address;
+ const newSideToAssetToken = {
+ ...state.sideToAssetToken,
+ [action.data.side]: newAssetToken,
+ };
+ return {
+ ...state,
+ sideToAssetToken: newSideToAssetToken,
+ };
+ }
+
+ case ActionTypes.SwapAssetTokens: {
+ const newSideToAssetToken = {
+ [Side.Deposit]: state.sideToAssetToken[Side.Receive],
+ [Side.Receive]: state.sideToAssetToken[Side.Deposit],
+ };
+ return {
+ ...state,
+ sideToAssetToken: newSideToAssetToken,
+ };
+ }
+
+ case ActionTypes.UpdateOrderExpiry: {
+ return {
+ ...state,
+ orderExpiryTimestamp: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateOrderTakerAddress: {
+ return {
+ ...state,
+ orderTakerAddress: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateUserAddress: {
+ return {
+ ...state,
+ userAddress: action.data,
+ };
+ }
+
+ // Docs
+ case ActionTypes.UpdateLibraryVersion: {
+ return {
+ ...state,
+ docsVersion: action.data,
+ };
+ }
+ case ActionTypes.UpdateAvailableLibraryVersions: {
+ return {
+ ...state,
+ availableDocVersions: action.data,
+ };
+ }
+
+ // Shared
+ case ActionTypes.ShowFlashMessage: {
+ return {
+ ...state,
+ flashMessage: action.data,
+ };
+ }
+
+ case ActionTypes.HideFlashMessage: {
+ return {
+ ...state,
+ flashMessage: undefined,
+ };
+ }
+
+ case ActionTypes.UpdateProviderType: {
+ return {
+ ...state,
+ providerType: action.data,
+ };
+ }
+
+ case ActionTypes.UpdateInjectedProviderName: {
+ return {
+ ...state,
+ injectedProviderName: action.data,
+ };
+ }
+
+ default:
+ return state;
+ }
}
diff --git a/packages/website/ts/schemas/order_schema.ts b/packages/website/ts/schemas/order_schema.ts
index bfbf9eb8b..fd0bf113a 100644
--- a/packages/website/ts/schemas/order_schema.ts
+++ b/packages/website/ts/schemas/order_schema.ts
@@ -1,15 +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' },
- },
- required: ['maker', 'taker', 'salt', 'signature', 'expiration', 'feeRecipient', 'exchangeContract', 'networkId'],
- type: 'object',
+ 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' },
+ },
+ 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 c784c29c5..c84ec4a9f 100644
--- a/packages/website/ts/schemas/order_taker_schema.ts
+++ b/packages/website/ts/schemas/order_taker_schema.ts
@@ -1,11 +1,11 @@
export const orderTakerSchema = {
- id: '/OrderTaker',
- properties: {
- address: { type: 'string' },
- token: { $ref: '/Token' },
- amount: { type: 'string' },
- feeAmount: { type: 'string' },
- },
- required: ['address', 'token', 'amount', 'feeAmount'],
- type: 'object',
+ id: '/OrderTaker',
+ properties: {
+ 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 8d3f15926..8cafff9e8 100644
--- a/packages/website/ts/schemas/signature_data_schema.ts
+++ b/packages/website/ts/schemas/signature_data_schema.ts
@@ -1,11 +1,11 @@
export const signatureDataSchema = {
- id: '/SignatureData',
- properties: {
- hash: { type: 'string' },
- r: { type: 'string' },
- s: { type: 'string' },
- v: { type: 'number' },
- },
- required: ['hash', 'r', 's', 'v'],
- type: 'object',
+ id: '/SignatureData',
+ properties: {
+ 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 92b53a463..6a3bed786 100644
--- a/packages/website/ts/schemas/token_schema.ts
+++ b/packages/website/ts/schemas/token_schema.ts
@@ -1,11 +1,11 @@
export const tokenSchema = {
- id: '/Token',
- properties: {
- name: { type: 'string' },
- symbol: { type: 'string' },
- decimals: { type: 'number' },
- address: { type: 'string' },
- },
- required: ['name', 'symbol', 'decimals', 'address'],
- type: 'object',
+ id: '/Token',
+ properties: {
+ 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 5177501c6..a3aaafc98 100644
--- a/packages/website/ts/schemas/validator.ts
+++ b/packages/website/ts/schemas/validator.ts
@@ -5,15 +5,15 @@ import { signatureDataSchema } from 'ts/schemas/signature_data_schema';
import { tokenSchema } from 'ts/schemas/token_schema';
export class SchemaValidator {
- private _validator: Validator;
- constructor() {
- this._validator = new Validator();
- this._validator.addSchema(signatureDataSchema as JSONSchema, signatureDataSchema.id);
- this._validator.addSchema(tokenSchema as JSONSchema, tokenSchema.id);
- this._validator.addSchema(orderTakerSchema as JSONSchema, orderTakerSchema.id);
- this._validator.addSchema(orderSchema as JSONSchema, orderSchema.id);
- }
- public validate(instance: object, schema: Schema) {
- return this._validator.validate(instance, schema);
- }
+ private _validator: Validator;
+ constructor() {
+ this._validator = new Validator();
+ this._validator.addSchema(signatureDataSchema as JSONSchema, signatureDataSchema.id);
+ this._validator.addSchema(tokenSchema as JSONSchema, tokenSchema.id);
+ this._validator.addSchema(orderTakerSchema as JSONSchema, orderTakerSchema.id);
+ this._validator.addSchema(orderSchema as JSONSchema, orderSchema.id);
+ }
+ public validate(instance: object, schema: Schema) {
+ return this._validator.validate(instance, schema);
+ }
}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index f873f95fa..a853792cb 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -2,680 +2,680 @@ import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
export enum Side {
- Receive = 'RECEIVE',
- Deposit = 'DEPOSIT',
+ Receive = 'RECEIVE',
+ Deposit = 'DEPOSIT',
}
export interface Token {
- iconUrl?: string;
- name: string;
- address: string;
- symbol: string;
- decimals: number;
- isTracked: boolean;
- isRegistered: boolean;
+ iconUrl?: string;
+ name: string;
+ address: string;
+ symbol: string;
+ decimals: number;
+ isTracked: boolean;
+ isRegistered: boolean;
}
export interface TokenByAddress {
- [address: string]: Token;
+ [address: string]: Token;
}
export interface TokenState {
- allowance: BigNumber;
- balance: BigNumber;
+ allowance: BigNumber;
+ balance: BigNumber;
}
export interface TokenStateByAddress {
- [address: string]: TokenState;
+ [address: string]: TokenState;
}
export interface AssetToken {
- address?: string;
- amount?: BigNumber;
+ address?: string;
+ amount?: BigNumber;
}
export interface SideToAssetToken {
- [side: string]: AssetToken;
+ [side: string]: AssetToken;
}
export interface SignatureData {
- hash: string;
- r: string;
- s: string;
- v: number;
+ hash: string;
+ r: string;
+ s: string;
+ v: number;
}
export interface HashData {
- depositAmount: BigNumber;
- depositTokenContractAddr: string;
- feeRecipientAddress: string;
- makerFee: BigNumber;
- orderExpiryTimestamp: BigNumber;
- orderMakerAddress: string;
- orderTakerAddress: string;
- receiveAmount: BigNumber;
- receiveTokenContractAddr: string;
- takerFee: BigNumber;
- orderSalt: BigNumber;
+ depositAmount: BigNumber;
+ depositTokenContractAddr: string;
+ feeRecipientAddress: string;
+ makerFee: BigNumber;
+ orderExpiryTimestamp: BigNumber;
+ orderMakerAddress: string;
+ orderTakerAddress: string;
+ receiveAmount: BigNumber;
+ receiveTokenContractAddr: string;
+ takerFee: BigNumber;
+ orderSalt: BigNumber;
}
export interface OrderToken {
- name: string;
- symbol: string;
- decimals: number;
- address: string;
+ name: string;
+ symbol: string;
+ decimals: number;
+ address: string;
}
export interface OrderParty {
- address: string;
- token: OrderToken;
- amount: string;
- feeAmount: string;
+ address: string;
+ token: OrderToken;
+ amount: string;
+ feeAmount: string;
}
export interface Order {
- maker: OrderParty;
- taker: OrderParty;
- expiration: string;
- feeRecipient: string;
- salt: string;
- signature: SignatureData;
- exchangeContract: string;
- networkId: number;
+ maker: OrderParty;
+ taker: OrderParty;
+ expiration: string;
+ feeRecipient: string;
+ salt: string;
+ signature: SignatureData;
+ exchangeContract: string;
+ networkId: number;
}
export interface Fill {
- logIndex: number;
- maker: string;
- taker: string;
- makerToken: string;
- takerToken: string;
- filledMakerTokenAmount: BigNumber;
- filledTakerTokenAmount: BigNumber;
- paidMakerFee: BigNumber;
- paidTakerFee: BigNumber;
- orderHash: string;
- transactionHash: string;
- blockTimestamp: number;
+ logIndex: number;
+ maker: string;
+ taker: string;
+ makerToken: string;
+ takerToken: string;
+ filledMakerTokenAmount: BigNumber;
+ filledTakerTokenAmount: BigNumber;
+ paidMakerFee: BigNumber;
+ paidTakerFee: BigNumber;
+ orderHash: string;
+ transactionHash: string;
+ blockTimestamp: number;
}
export enum BalanceErrs {
- incorrectNetworkForFaucet,
- faucetRequestFailed,
- faucetQueueIsFull,
- mintingFailed,
- sendFailed,
- allowanceSettingFailed,
+ incorrectNetworkForFaucet,
+ faucetRequestFailed,
+ faucetQueueIsFull,
+ mintingFailed,
+ sendFailed,
+ allowanceSettingFailed,
}
export enum ActionTypes {
- // Portal
- UpdateScreenWidth = 'UPDATE_SCREEN_WIDTH',
- UpdateNodeVersion = 'UPDATE_NODE_VERSION',
- ResetState = 'RESET_STATE',
- AddTokenToTokenByAddress = 'ADD_TOKEN_TO_TOKEN_BY_ADDRESS',
- BlockchainErrEncountered = 'BLOCKCHAIN_ERR_ENCOUNTERED',
- ClearTokenByAddress = 'CLEAR_TOKEN_BY_ADDRESS',
- UpdateBlockchainIsLoaded = 'UPDATE_BLOCKCHAIN_IS_LOADED',
- UpdateNetworkId = 'UPDATE_NETWORK_ID',
- UpdateChosenAssetToken = 'UPDATE_CHOSEN_ASSET_TOKEN',
- UpdateChosenAssetTokenAddress = 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS',
- UpdateOrderTakerAddress = 'UPDATE_ORDER_TAKER_ADDRESS',
- UpdateOrderSalt = 'UPDATE_ORDER_SALT',
- UpdateOrderSignatureData = 'UPDATE_ORDER_SIGNATURE_DATA',
- UpdateTokenByAddress = 'UPDATE_TOKEN_BY_ADDRESS',
- RemoveTokenFromTokenByAddress = 'REMOVE_TOKEN_FROM_TOKEN_BY_ADDRESS',
- UpdateTokenStateByAddress = 'UPDATE_TOKEN_STATE_BY_ADDRESS',
- RemoveFromTokenStateByAddress = 'REMOVE_FROM_TOKEN_STATE_BY_ADDRESS',
- ReplaceTokenAllowanceByAddress = 'REPLACE_TOKEN_ALLOWANCE_BY_ADDRESS',
- ReplaceTokenBalanceByAddress = 'REPLACE_TOKEN_BALANCE_BY_ADDRESS',
- UpdateTokenBalanceByAddress = 'UPDATE_TOKEN_BALANCE_BY_ADDRESS',
- UpdateOrderExpiry = 'UPDATE_ORDER_EXPIRY',
- SwapAssetTokens = 'SWAP_ASSET_TOKENS',
- UpdateUserAddress = 'UPDATE_USER_ADDRESS',
- UpdateUserEtherBalance = 'UPDATE_USER_ETHER_BALANCE',
- UpdateUserSuppliedOrderCache = 'UPDATE_USER_SUPPLIED_ORDER_CACHE',
- UpdateOrderFillAmount = 'UPDATE_ORDER_FILL_AMOUNT',
- UpdateShouldBlockchainErrDialogBeOpen = 'UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN',
-
- // Docs
- UpdateLibraryVersion = 'UPDATE_LIBRARY_VERSION',
- UpdateAvailableLibraryVersions = 'UPDATE_AVAILABLE_LIBRARY_VERSIONS',
-
- // Shared
- ShowFlashMessage = 'SHOW_FLASH_MESSAGE',
- HideFlashMessage = 'HIDE_FLASH_MESSAGE',
- UpdateProviderType = 'UPDATE_PROVIDER_TYPE',
- UpdateInjectedProviderName = 'UPDATE_INJECTED_PROVIDER_NAME',
+ // Portal
+ UpdateScreenWidth = 'UPDATE_SCREEN_WIDTH',
+ UpdateNodeVersion = 'UPDATE_NODE_VERSION',
+ ResetState = 'RESET_STATE',
+ AddTokenToTokenByAddress = 'ADD_TOKEN_TO_TOKEN_BY_ADDRESS',
+ BlockchainErrEncountered = 'BLOCKCHAIN_ERR_ENCOUNTERED',
+ ClearTokenByAddress = 'CLEAR_TOKEN_BY_ADDRESS',
+ UpdateBlockchainIsLoaded = 'UPDATE_BLOCKCHAIN_IS_LOADED',
+ UpdateNetworkId = 'UPDATE_NETWORK_ID',
+ UpdateChosenAssetToken = 'UPDATE_CHOSEN_ASSET_TOKEN',
+ UpdateChosenAssetTokenAddress = 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS',
+ UpdateOrderTakerAddress = 'UPDATE_ORDER_TAKER_ADDRESS',
+ UpdateOrderSalt = 'UPDATE_ORDER_SALT',
+ UpdateOrderSignatureData = 'UPDATE_ORDER_SIGNATURE_DATA',
+ UpdateTokenByAddress = 'UPDATE_TOKEN_BY_ADDRESS',
+ RemoveTokenFromTokenByAddress = 'REMOVE_TOKEN_FROM_TOKEN_BY_ADDRESS',
+ UpdateTokenStateByAddress = 'UPDATE_TOKEN_STATE_BY_ADDRESS',
+ RemoveFromTokenStateByAddress = 'REMOVE_FROM_TOKEN_STATE_BY_ADDRESS',
+ ReplaceTokenAllowanceByAddress = 'REPLACE_TOKEN_ALLOWANCE_BY_ADDRESS',
+ ReplaceTokenBalanceByAddress = 'REPLACE_TOKEN_BALANCE_BY_ADDRESS',
+ UpdateTokenBalanceByAddress = 'UPDATE_TOKEN_BALANCE_BY_ADDRESS',
+ UpdateOrderExpiry = 'UPDATE_ORDER_EXPIRY',
+ SwapAssetTokens = 'SWAP_ASSET_TOKENS',
+ UpdateUserAddress = 'UPDATE_USER_ADDRESS',
+ UpdateUserEtherBalance = 'UPDATE_USER_ETHER_BALANCE',
+ UpdateUserSuppliedOrderCache = 'UPDATE_USER_SUPPLIED_ORDER_CACHE',
+ UpdateOrderFillAmount = 'UPDATE_ORDER_FILL_AMOUNT',
+ UpdateShouldBlockchainErrDialogBeOpen = 'UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN',
+
+ // Docs
+ UpdateLibraryVersion = 'UPDATE_LIBRARY_VERSION',
+ UpdateAvailableLibraryVersions = 'UPDATE_AVAILABLE_LIBRARY_VERSIONS',
+
+ // Shared
+ ShowFlashMessage = 'SHOW_FLASH_MESSAGE',
+ HideFlashMessage = 'HIDE_FLASH_MESSAGE',
+ UpdateProviderType = 'UPDATE_PROVIDER_TYPE',
+ UpdateInjectedProviderName = 'UPDATE_INJECTED_PROVIDER_NAME',
}
export interface Action {
- type: ActionTypes;
- data?: any;
+ type: ActionTypes;
+ data?: any;
}
export interface TrackedTokensByNetworkId {
- [networkId: number]: Token[];
+ [networkId: number]: Token[];
}
export interface TrackedTokensByUserAddress {
- [userAddress: string]: TrackedTokensByNetworkId;
+ [userAddress: string]: TrackedTokensByNetworkId;
}
export interface Styles {
- [name: string]: React.CSSProperties;
+ [name: string]: React.CSSProperties;
}
export interface ProfileInfo {
- name: string;
- title?: string;
- description: string;
- image: string;
- linkedIn?: string;
- github?: string;
- angellist?: string;
- medium?: string;
- twitter?: string;
+ name: string;
+ title?: string;
+ description: string;
+ image: string;
+ linkedIn?: string;
+ github?: string;
+ angellist?: string;
+ medium?: string;
+ twitter?: string;
}
export interface Partner {
- name: string;
- logo: string;
- url: string;
+ name: string;
+ logo: string;
+ url: string;
}
export interface Statistic {
- title: string;
- figure: string;
+ title: string;
+ figure: string;
}
export interface StatisticByKey {
- [key: string]: Statistic;
+ [key: string]: Statistic;
}
export interface ERC20MarketInfo {
- etherMarketCapUsd: number;
- numLiquidERC20Tokens: number;
- marketCapERC20TokensUsd: number;
+ etherMarketCapUsd: number;
+ numLiquidERC20Tokens: number;
+ marketCapERC20TokensUsd: number;
}
export enum ExchangeContractErrs {
- OrderFillExpired = 'ORDER_FILL_EXPIRED',
- OrderAlreadyCancelledOrFilled = 'ORDER_ALREADY_CANCELLED_OR_FILLED',
- OrderRemainingFillAmountZero = 'ORDER_REMAINING_FILL_AMOUNT_ZERO',
- OrderFillRoundingError = 'ORDER_FILL_ROUNDING_ERROR',
- FillBalanceAllowanceError = 'FILL_BALANCE_ALLOWANCE_ERROR',
- InsufficientTakerBalance = 'INSUFFICIENT_TAKER_BALANCE',
- InsufficientTakerAllowance = 'INSUFFICIENT_TAKER_ALLOWANCE',
- InsufficientMakerBalance = 'INSUFFICIENT_MAKER_BALANCE',
- InsufficientMakerAllowance = 'INSUFFICIENT_MAKER_ALLOWANCE',
- TransactionSenderIsNotFillOrderTaker = 'TRANSACTION_SENDER_IS_NOT_FILL_ORDER_TAKER',
- InsufficientRemainingFillAmount = 'INSUFFICIENT_REMAINING_FILL_AMOUNT',
+ OrderFillExpired = 'ORDER_FILL_EXPIRED',
+ OrderAlreadyCancelledOrFilled = 'ORDER_ALREADY_CANCELLED_OR_FILLED',
+ OrderRemainingFillAmountZero = 'ORDER_REMAINING_FILL_AMOUNT_ZERO',
+ OrderFillRoundingError = 'ORDER_FILL_ROUNDING_ERROR',
+ FillBalanceAllowanceError = 'FILL_BALANCE_ALLOWANCE_ERROR',
+ InsufficientTakerBalance = 'INSUFFICIENT_TAKER_BALANCE',
+ InsufficientTakerAllowance = 'INSUFFICIENT_TAKER_ALLOWANCE',
+ InsufficientMakerBalance = 'INSUFFICIENT_MAKER_BALANCE',
+ InsufficientMakerAllowance = 'INSUFFICIENT_MAKER_ALLOWANCE',
+ TransactionSenderIsNotFillOrderTaker = 'TRANSACTION_SENDER_IS_NOT_FILL_ORDER_TAKER',
+ InsufficientRemainingFillAmount = 'INSUFFICIENT_REMAINING_FILL_AMOUNT',
}
export interface ContractResponse {
- logs: ContractEvent[];
+ logs: ContractEvent[];
}
export interface ContractEvent {
- event: string;
- args: any;
+ event: string;
+ args: any;
}
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 {
- ERROR,
- SUCCESS,
+ ERROR,
+ SUCCESS,
}
export enum EtherscanLinkSuffixes {
- Address = 'address',
- Tx = 'tx',
+ Address = 'address',
+ Tx = 'tx',
}
export enum BlockchainErrs {
- AContractNotDeployedOnNetwork = 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
- DisconnectedFromEthereumNode = 'DISCONNECTED_FROM_ETHEREUM_NODE',
- NoError = 'NO_ERROR',
+ AContractNotDeployedOnNetwork = 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
+ DisconnectedFromEthereumNode = 'DISCONNECTED_FROM_ETHEREUM_NODE',
+ NoError = 'NO_ERROR',
}
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 {
- name: string;
- defaultValue?: string;
+ name: string;
+ defaultValue?: string;
}
export enum Environments {
- DEVELOPMENT,
- PRODUCTION,
+ DEVELOPMENT,
+ PRODUCTION,
}
export type ContractInstance = any; // TODO: add type definition for Contract
export interface TypeDocType {
- type: TypeDocTypes;
- value: string;
- name: string;
- types: TypeDocType[];
- typeArguments?: TypeDocType[];
- declaration: TypeDocNode;
- elementType?: TypeDocType;
+ type: TypeDocTypes;
+ value: string;
+ name: string;
+ types: TypeDocType[];
+ typeArguments?: TypeDocType[];
+ declaration: TypeDocNode;
+ elementType?: TypeDocType;
}
export interface TypeDocFlags {
- isStatic?: boolean;
- isOptional?: boolean;
- isPublic?: boolean;
+ isStatic?: boolean;
+ isOptional?: boolean;
+ isPublic?: boolean;
}
export interface TypeDocGroup {
- title: string;
- children: number[];
+ title: string;
+ children: number[];
}
export interface TypeDocNode {
- id?: number;
- name?: string;
- kind?: string;
- defaultValue?: string;
- kindString?: string;
- type?: TypeDocType;
- fileName?: string;
- line?: number;
- comment?: TypeDocNode;
- text?: string;
- shortText?: string;
- returns?: string;
- declaration: TypeDocNode;
- flags?: TypeDocFlags;
- indexSignature?: TypeDocNode[];
- signatures?: TypeDocNode[];
- parameters?: TypeDocNode[];
- typeParameter?: TypeDocNode[];
- sources?: TypeDocNode[];
- children?: TypeDocNode[];
- groups?: TypeDocGroup[];
+ id?: number;
+ name?: string;
+ kind?: string;
+ defaultValue?: string;
+ kindString?: string;
+ type?: TypeDocType;
+ fileName?: string;
+ line?: number;
+ comment?: TypeDocNode;
+ text?: string;
+ shortText?: string;
+ returns?: string;
+ declaration: TypeDocNode;
+ flags?: TypeDocFlags;
+ indexSignature?: TypeDocNode[];
+ signatures?: TypeDocNode[];
+ parameters?: TypeDocNode[];
+ typeParameter?: TypeDocNode[];
+ sources?: TypeDocNode[];
+ children?: TypeDocNode[];
+ groups?: TypeDocGroup[];
}
export enum TypeDocTypes {
- Intrinsic = 'intrinsic',
- Reference = 'reference',
- Array = 'array',
- StringLiteral = 'stringLiteral',
- Reflection = 'reflection',
- Union = 'union',
- TypeParameter = 'typeParameter',
- Unknown = 'unknown',
+ Intrinsic = 'intrinsic',
+ Reference = 'reference',
+ Array = 'array',
+ StringLiteral = 'stringLiteral',
+ Reflection = 'reflection',
+ Union = 'union',
+ TypeParameter = 'typeParameter',
+ Unknown = 'unknown',
}
export interface DocAgnosticFormat {
- [sectionName: string]: DocSection;
+ [sectionName: string]: DocSection;
}
export interface DocSection {
- comment: string;
- constructors: Array<TypescriptMethod | SolidityMethod>;
- methods: Array<TypescriptMethod | SolidityMethod>;
- properties: Property[];
- types: CustomType[];
- events?: Event[];
+ comment: string;
+ constructors: Array<TypescriptMethod | SolidityMethod>;
+ methods: Array<TypescriptMethod | SolidityMethod>;
+ properties: Property[];
+ types: CustomType[];
+ events?: Event[];
}
export interface Event {
- name: string;
- eventArgs: EventArg[];
+ name: string;
+ eventArgs: EventArg[];
}
export interface EventArg {
- isIndexed: boolean;
- name: string;
- type: Type;
+ isIndexed: boolean;
+ name: string;
+ type: Type;
}
export interface Property {
- name: string;
- type: Type;
- source?: Source;
- comment?: string;
+ name: string;
+ type: Type;
+ source?: Source;
+ comment?: string;
}
export interface BaseMethod {
- isConstructor: boolean;
- name: string;
- returnComment?: string | undefined;
- callPath: string;
- parameters: Parameter[];
- returnType: Type;
- comment?: string;
+ isConstructor: boolean;
+ name: string;
+ returnComment?: string | undefined;
+ callPath: string;
+ parameters: Parameter[];
+ returnType: Type;
+ comment?: string;
}
export interface TypescriptMethod extends BaseMethod {
- source?: Source;
- isStatic?: boolean;
- typeParameter?: TypeParameter;
+ source?: Source;
+ isStatic?: boolean;
+ typeParameter?: TypeParameter;
}
export interface SolidityMethod extends BaseMethod {
- isConstant?: boolean;
- isPayable?: boolean;
+ isConstant?: boolean;
+ isPayable?: boolean;
}
export interface Source {
- fileName: string;
- line: number;
+ fileName: string;
+ line: number;
}
export interface Parameter {
- name: string;
- comment: string;
- isOptional: boolean;
- type: Type;
+ name: string;
+ comment: string;
+ isOptional: boolean;
+ type: Type;
}
export interface TypeParameter {
- name: string;
- type: Type;
+ name: string;
+ type: Type;
}
export interface Type {
- name: string;
- typeDocType: TypeDocTypes;
- value?: string;
- typeArguments?: Type[];
- elementType?: ElementType;
- types?: Type[];
- method?: TypescriptMethod;
+ name: string;
+ typeDocType: TypeDocTypes;
+ value?: string;
+ typeArguments?: Type[];
+ elementType?: ElementType;
+ types?: Type[];
+ method?: TypescriptMethod;
}
export interface ElementType {
- name: string;
- typeDocType: TypeDocTypes;
+ name: string;
+ typeDocType: TypeDocTypes;
}
export interface IndexSignature {
- keyName: string;
- keyType: Type;
- valueName: string;
+ keyName: string;
+ keyType: Type;
+ valueName: string;
}
export interface CustomType {
- name: string;
- kindString: string;
- type?: Type;
- method?: TypescriptMethod;
- indexSignature?: IndexSignature;
- defaultValue?: string;
- comment?: string;
- children?: CustomTypeChild[];
+ name: string;
+ kindString: string;
+ type?: Type;
+ method?: TypescriptMethod;
+ indexSignature?: IndexSignature;
+ defaultValue?: string;
+ comment?: string;
+ children?: CustomTypeChild[];
}
export interface CustomTypeChild {
- name: string;
- type?: Type;
- defaultValue?: string;
+ name: string;
+ type?: Type;
+ defaultValue?: string;
}
export interface FAQQuestion {
- prompt: string;
- answer: React.ReactNode;
+ prompt: string;
+ answer: React.ReactNode;
}
export interface FAQSection {
- name: string;
- questions: FAQQuestion[];
+ name: string;
+ questions: FAQQuestion[];
}
export interface S3FileObject {
- Key: {
- _text: string;
- };
+ Key: {
+ _text: string;
+ };
}
export interface MenuSubsectionsBySection {
- [section: string]: string[];
+ [section: string]: string[];
}
export enum ProviderType {
- Injected = 'INJECTED',
- Ledger = 'LEDGER',
+ Injected = 'INJECTED',
+ Ledger = 'LEDGER',
}
export interface Fact {
- title: string;
- explanation: string;
- image: string;
+ title: string;
+ explanation: string;
+ image: string;
}
interface LedgerGetAddressResult {
- address: string;
+ address: string;
}
interface LedgerSignResult {
- v: string;
- r: string;
- s: string;
+ v: string;
+ r: string;
+ s: string;
}
interface LedgerCommunication {
- close_async: () => Promise<void>;
+ close_async: () => Promise<void>;
}
export interface LedgerEthConnection {
- 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;
+ 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;
}
export interface SignPersonalMessageParams {
- data: string;
+ data: string;
}
export interface TxParams {
- nonce: string;
- gasPrice?: number;
- gasLimit: string;
- to: string;
- value?: string;
- data?: string;
- chainId: number; // EIP 155 chainId - mainnet: 1, ropsten: 3
+ nonce: string;
+ gasPrice?: number;
+ gasLimit: string;
+ to: string;
+ value?: string;
+ data?: string;
+ chainId: number; // EIP 155 chainId - mainnet: 1, ropsten: 3
}
export interface PublicNodeUrlsByNetworkId {
- [networkId: number]: string[];
+ [networkId: number]: string[];
}
export interface JSONRPCPayload {
- params: any[];
- method: string;
+ params: any[];
+ method: string;
}
export interface BlogPost {
- image: string;
- date: string;
- title: string;
- description: string;
- url: string;
+ image: string;
+ date: string;
+ title: string;
+ description: string;
+ url: string;
}
export interface TypeDefinitionByName {
- [typeName: string]: CustomType;
+ [typeName: string]: CustomType;
}
export interface Article {
- section: string;
- title: string;
- content: string;
- fileName: string;
+ section: string;
+ title: string;
+ content: string;
+ fileName: string;
}
export interface ArticlesBySection {
- [section: string]: Article[];
+ [section: string]: Article[];
}
export interface DialogConfigs {
- title: string;
- isModal: boolean;
- actions: any[];
+ title: string;
+ isModal: boolean;
+ actions: any[];
}
export enum TokenVisibility {
- ALL = 'ALL',
- UNTRACKED = 'UNTRACKED',
- TRACKED = 'TRACKED',
+ ALL = 'ALL',
+ UNTRACKED = 'UNTRACKED',
+ TRACKED = 'TRACKED',
}
export enum HeaderSizes {
- H1 = 'h1',
- H2 = 'h2',
- H3 = 'h3',
+ H1 = 'h1',
+ H2 = 'h2',
+ H3 = 'h3',
}
export interface DoxityDocObj {
- [contractName: string]: DoxityContractObj;
+ [contractName: string]: DoxityContractObj;
}
export interface DoxityContractObj {
- title: string;
- fileName: string;
- name: string;
- abiDocs: DoxityAbiDoc[];
+ title: string;
+ fileName: string;
+ name: string;
+ abiDocs: DoxityAbiDoc[];
}
export interface DoxityAbiDoc {
- constant: boolean;
- inputs: DoxityInput[];
- name: string;
- outputs: DoxityOutput[];
- payable: boolean;
- type: string;
- details?: string;
- return?: string;
+ constant: boolean;
+ inputs: DoxityInput[];
+ name: string;
+ outputs: DoxityOutput[];
+ payable: boolean;
+ type: string;
+ details?: string;
+ return?: string;
}
export interface DoxityOutput {
- name: string;
- type: string;
+ name: string;
+ type: string;
}
export interface DoxityInput {
- name: string;
- type: string;
- description: string;
- indexed?: boolean;
+ name: string;
+ type: string;
+ description: string;
+ indexed?: boolean;
}
export interface VersionToFileName {
- [version: string]: string;
+ [version: string]: string;
}
export enum Docs {
- ZeroExJs,
- SmartContracts,
+ ZeroExJs,
+ SmartContracts,
}
export interface ContractAddresses {
- [version: string]: {
- [network: string]: AddressByContractName;
- };
+ [version: string]: {
+ [network: string]: AddressByContractName;
+ };
}
export interface AddressByContractName {
- [contractName: string]: string;
+ [contractName: string]: string;
}
export enum Networks {
- mainnet = 'Mainnet',
- kovan = 'Kovan',
- ropsten = 'Ropsten',
- rinkeby = 'Rinkeby',
+ mainnet = 'Mainnet',
+ kovan = 'Kovan',
+ ropsten = 'Ropsten',
+ rinkeby = 'Rinkeby',
}
export enum AbiTypes {
- Constructor = 'constructor',
- Function = 'function',
- Event = 'event',
+ Constructor = 'constructor',
+ Function = 'function',
+ Event = 'event',
}
export enum WebsitePaths {
- Portal = '/portal',
- Wiki = '/wiki',
- ZeroExJs = '/docs/0xjs',
- Home = '/',
- FAQ = '/faq',
- About = '/about',
- Whitepaper = '/pdfs/0x_white_paper.pdf',
- SmartContracts = '/docs/contracts',
- Connect = '/docs/connect',
+ Portal = '/portal',
+ Wiki = '/wiki',
+ ZeroExJs = '/docs/0xjs',
+ Home = '/',
+ FAQ = '/faq',
+ About = '/about',
+ Whitepaper = '/pdfs/0x_white_paper.pdf',
+ SmartContracts = '/docs/contracts',
+ Connect = '/docs/connect',
}
export interface DocsMenu {
- [sectionName: string]: string[];
+ [sectionName: string]: string[];
}
export interface SectionsMap {
- [sectionName: string]: string;
+ [sectionName: string]: string;
}
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 {
- startTimestampMs: number;
- endTimestampMs: number;
+ startTimestampMs: number;
+ endTimestampMs: number;
}
export interface OutdatedWrappedEtherByNetworkId {
- [networkId: number]: {
- address: string;
- timestampMsRange: TimestampMsRange;
- };
+ [networkId: number]: {
+ address: string;
+ timestampMsRange: TimestampMsRange;
+ };
}
export enum SmartContractDocSections {
- Introduction = 'Introduction',
- Exchange = 'Exchange',
- TokenTransferProxy = 'TokenTransferProxy',
- TokenRegistry = 'TokenRegistry',
- ZRXToken = 'ZRXToken',
+ Introduction = 'Introduction',
+ Exchange = 'Exchange',
+ TokenTransferProxy = 'TokenTransferProxy',
+ TokenRegistry = 'TokenRegistry',
+ ZRXToken = 'ZRXToken',
}
// tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
index 58ce667e3..dabc1fd54 100644
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/website/ts/utils/colors.ts
@@ -1,43 +1,43 @@
import { colors as materialUiColors } from 'material-ui/styles';
export const colors = {
- ...materialUiColors,
- grey50: '#FAFAFA',
- grey100: '#F5F5F5',
- lightestGrey: '#F0F0F0',
- greyishPink: '#E6E5E5',
- grey300: '#E0E0E0',
- beigeWhite: '#E4E4E4',
- grey400: '#BDBDBD',
- lightGrey: '#BBBBBB',
- grey500: '#9E9E9E',
- grey: '#A5A5A5',
- darkGrey: '#818181',
- landingLinkGrey: '#919191',
- grey700: '#616161',
- grey800: '#424242',
- darkerGrey: '#393939',
- heroGrey: '#404040',
- projectsGrey: '#343333',
- darkestGrey: '#272727',
- dharmaDarkGrey: '#252525',
- lightBlue: '#60A4F4',
- lightBlueA700: '#0091EA',
- darkBlue: '#4D5481',
- turquois: '#058789',
- lightPurple: '#A81CA6',
- purple: '#690596',
- red200: '#EF9A9A',
- red: '#E91751',
- red500: '#F44336',
- red600: '#E53935',
- limeGreen: '#66DE75',
- lightGreen: '#4DC55C',
- lightestGreen: '#89C774',
- brightGreen: '#00C33E',
- green400: '#66BB6A',
- green: '#4DA24B',
- amber600: '#FFB300',
- orange: '#E69D00',
- amber800: '#FF8F00',
+ ...materialUiColors,
+ grey50: '#FAFAFA',
+ grey100: '#F5F5F5',
+ lightestGrey: '#F0F0F0',
+ greyishPink: '#E6E5E5',
+ grey300: '#E0E0E0',
+ beigeWhite: '#E4E4E4',
+ grey400: '#BDBDBD',
+ lightGrey: '#BBBBBB',
+ grey500: '#9E9E9E',
+ grey: '#A5A5A5',
+ darkGrey: '#818181',
+ landingLinkGrey: '#919191',
+ grey700: '#616161',
+ grey800: '#424242',
+ darkerGrey: '#393939',
+ heroGrey: '#404040',
+ projectsGrey: '#343333',
+ darkestGrey: '#272727',
+ dharmaDarkGrey: '#252525',
+ lightBlue: '#60A4F4',
+ lightBlueA700: '#0091EA',
+ darkBlue: '#4D5481',
+ turquois: '#058789',
+ lightPurple: '#A81CA6',
+ purple: '#690596',
+ red200: '#EF9A9A',
+ red: '#E91751',
+ red500: '#F44336',
+ red600: '#E53935',
+ limeGreen: '#66DE75',
+ lightGreen: '#4DC55C',
+ lightestGreen: '#89C774',
+ brightGreen: '#00C33E',
+ green400: '#66BB6A',
+ green: '#4DA24B',
+ amber600: '#FFB300',
+ orange: '#E69D00',
+ amber800: '#FF8F00',
};
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 3d37a89ab..6327ea05a 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -1,126 +1,126 @@
import * as _ from 'lodash';
import {
- ContractAddresses,
- Environments,
- Networks,
- OutdatedWrappedEtherByNetworkId,
- PublicNodeUrlsByNetworkId,
- SmartContractDocSections,
+ ContractAddresses,
+ Environments,
+ Networks,
+ OutdatedWrappedEtherByNetworkId,
+ PublicNodeUrlsByNetworkId,
+ SmartContractDocSections,
} 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,
+ ['https://0xproject.localhost:3572', 'https://localhost:3572', 'https://127.0.0.1'],
+ BASE_URL,
);
const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
export const configs = {
- BACKEND_BASE_URL: isDevelopment ? 'https://localhost:3001' : 'https://website-api.0xproject.com',
- BASE_URL,
- BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
- CONTRACT_ADDRESS: {
- '1.0.0': {
- [Networks.mainnet]: {
- [SmartContractDocSections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093',
- [SmartContractDocSections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4',
- [SmartContractDocSections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498',
- [SmartContractDocSections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c',
- },
- [Networks.ropsten]: {
- [SmartContractDocSections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac',
- [SmartContractDocSections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6',
- [SmartContractDocSections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d',
- [SmartContractDocSections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed',
- },
- [Networks.kovan]: {
- [SmartContractDocSections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364',
- [SmartContractDocSections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4',
- [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570',
- [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f',
- },
- },
- } as ContractAddresses,
- DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
- // WARNING: ZRX & WETH MUST always be default trackedTokens
- DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],
- DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
- DOMAIN_DEVELOPMENT: '0xproject.localhost:3572',
- 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',
- '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 },
- IS_MAINNET_ENABLED: true,
- LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
- LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
- // NEW_WRAPPED_ETHERS is temporary until we remove the SHOULD_DEPRECATE_OLD_WETH_TOKEN flag
- // and add the new WETHs to the tokenRegistry
- NEW_WRAPPED_ETHERS: {
- 1: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
- 42: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
- } as { [networkId: string]: string },
- OUTDATED_WRAPPED_ETHERS: [
- {
- 42: {
- address: '0x05d090b51c40b020eab3bfcb6a2dff130df22e9c',
- timestampMsRange: {
- startTimestampMs: 1502455607000,
- endTimestampMs: 1513790926000,
- },
- },
- 1: {
- address: '0x2956356cd2a2bf3202f771f50d3d14a367b48070',
- timestampMsRange: {
- startTimestampMs: 1502455607000,
- endTimestampMs: 1513790926000,
- },
- },
- },
- ] 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}`, 'https://mainnet.0xproject.com'],
- [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0xproject.com'],
- } as PublicNodeUrlsByNetworkId,
- SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
- SYMBOLS_OF_MINTABLE_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
+ BACKEND_BASE_URL: isDevelopment ? 'https://localhost:3001' : 'https://website-api.0xproject.com',
+ BASE_URL,
+ BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
+ CONTRACT_ADDRESS: {
+ '1.0.0': {
+ [Networks.mainnet]: {
+ [SmartContractDocSections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093',
+ [SmartContractDocSections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4',
+ [SmartContractDocSections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498',
+ [SmartContractDocSections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c',
+ },
+ [Networks.ropsten]: {
+ [SmartContractDocSections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac',
+ [SmartContractDocSections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6',
+ [SmartContractDocSections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d',
+ [SmartContractDocSections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed',
+ },
+ [Networks.kovan]: {
+ [SmartContractDocSections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364',
+ [SmartContractDocSections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4',
+ [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570',
+ [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f',
+ },
+ },
+ } as ContractAddresses,
+ DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
+ // WARNING: ZRX & WETH MUST always be default trackedTokens
+ DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],
+ DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
+ DOMAIN_DEVELOPMENT: '0xproject.localhost:3572',
+ 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',
+ '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 },
+ IS_MAINNET_ENABLED: true,
+ LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
+ LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
+ // NEW_WRAPPED_ETHERS is temporary until we remove the SHOULD_DEPRECATE_OLD_WETH_TOKEN flag
+ // and add the new WETHs to the tokenRegistry
+ NEW_WRAPPED_ETHERS: {
+ 1: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+ 42: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
+ } as { [networkId: string]: string },
+ OUTDATED_WRAPPED_ETHERS: [
+ {
+ 42: {
+ address: '0x05d090b51c40b020eab3bfcb6a2dff130df22e9c',
+ timestampMsRange: {
+ startTimestampMs: 1502455607000,
+ endTimestampMs: 1513790926000,
+ },
+ },
+ 1: {
+ address: '0x2956356cd2a2bf3202f771f50d3d14a367b48070',
+ timestampMsRange: {
+ startTimestampMs: 1502455607000,
+ endTimestampMs: 1513790926000,
+ },
+ },
+ },
+ ] 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}`, 'https://mainnet.0xproject.com'],
+ [42]: [`https://kovan.infura.io/${INFURA_API_KEY}`, 'https://kovan.0xproject.com'],
+ } 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 dded82114..bb6407ec5 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -2,86 +2,86 @@ import { BigNumber } from '@0xproject/utils';
import { Networks } from 'ts/types';
export const constants = {
- DECIMAL_PLACES_ETH: 18,
- DECIMAL_PLACES_ZRX: 18,
- DOCS_SCROLL_DURATION_MS: 0,
- DOCS_CONTAINER_ID: 'documentation',
- GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
- 1: 4145578,
- 42: 3117574,
- 50: 0,
- } as { [networkId: number]: number },
- HOME_SCROLL_DURATION_MS: 500,
- HTTP_NO_CONTENT_STATUS_CODE: 204,
- LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER: 'didAcceptPortalDisclaimer',
- LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE: 'hasDismissedWethNotice',
- MAKER_FEE: new BigNumber(0),
- MAINNET_NAME: 'Main network',
- MINT_AMOUNT: new BigNumber('100000000000000000000'),
- NETWORK_ID_MAINNET: 1,
- NETWORK_ID_TESTNET: 42,
- NETWORK_ID_TESTRPC: 50,
- NETWORK_NAME_BY_ID: {
- 1: Networks.mainnet,
- 3: Networks.ropsten,
- 4: Networks.rinkeby,
- 42: Networks.kovan,
- } as { [symbol: number]: string },
- NETWORK_ID_BY_NAME: {
- [Networks.mainnet]: 1,
- [Networks.ropsten]: 3,
- [Networks.rinkeby]: 4,
- [Networks.kovan]: 42,
- } as { [networkName: string]: number },
- NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
- PROVIDER_NAME_LEDGER: 'Ledger',
- PROVIDER_NAME_METAMASK: 'Metamask',
- PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
- PROVIDER_NAME_GENERIC: 'Injected Web3',
- PROVIDER_NAME_PUBLIC: '0x Public',
- ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
- SUCCESS_STATUS: 200,
- UNAVAILABLE_STATUS: 503,
- TAKER_FEE: new BigNumber(0),
- TESTNET_NAME: 'Kovan',
- TYPES_SECTION_NAME: 'types',
- PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
- PROJECT_URL_RADAR_RELAY: 'https://radarrelay.com',
- PROJECT_URL_PARADEX: 'https://paradex.io',
- PROJECT_URL_DYDX: 'https://dydx.exchange',
- PROJECT_URL_MELONPORT: 'https://melonport.com',
- PROJECT_URL_DISTRICT_0X: 'https://district0x.io',
- PROJECT_URL_DHARMA: 'https://dharma.io',
- PROJECT_URL_LENDROID: 'https://lendroid.com',
- PROJECT_URL_MAKER: 'https://makerdao.com',
- PROJECT_URL_ARAGON: 'https://aragon.one',
- PROJECT_URL_BLOCKNET: 'https://blocknet.co',
- PROJECT_URL_0CEAN: 'http://the0cean.com',
- PROJECT_URL_STATUS: 'https://status.im',
- PROJECT_URL_AUGUR: 'https://augur.net',
- PROJECT_URL_AUCTUS: 'https://auctus.org',
- PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
- URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
- URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
- URL_BITLY_API: 'https://api-ssl.bitly.com',
- URL_BLOG: 'https://blog.0xproject.com/latest',
- URL_DISCOURSE_FORUM: 'https://forum.0xproject.com',
- URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
- URL_ETHER_FAUCET: 'https://faucet.0xproject.com',
- URL_GITHUB_ORG: 'https://github.com/0xProject',
- URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
- URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
- URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases',
- URL_PARITY_CHROME_STORE:
- 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
- URL_REDDIT: 'https://reddit.com/r/0xproject',
- URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
- URL_TWITTER: 'https://twitter.com/0xproject',
- URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
- URL_WEB3_DECODED_LOG_ENTRY_EVENT:
- 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
- URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
- URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
- URL_WETH_IO: 'https://weth.io/',
- URL_ZEROEX_CHAT: 'https://chat.0xproject.com',
+ DECIMAL_PLACES_ETH: 18,
+ DECIMAL_PLACES_ZRX: 18,
+ DOCS_SCROLL_DURATION_MS: 0,
+ DOCS_CONTAINER_ID: 'documentation',
+ GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
+ 1: 4145578,
+ 42: 3117574,
+ 50: 0,
+ } as { [networkId: number]: number },
+ HOME_SCROLL_DURATION_MS: 500,
+ HTTP_NO_CONTENT_STATUS_CODE: 204,
+ LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER: 'didAcceptPortalDisclaimer',
+ LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE: 'hasDismissedWethNotice',
+ MAKER_FEE: new BigNumber(0),
+ MAINNET_NAME: 'Main network',
+ MINT_AMOUNT: new BigNumber('100000000000000000000'),
+ NETWORK_ID_MAINNET: 1,
+ NETWORK_ID_TESTNET: 42,
+ NETWORK_ID_TESTRPC: 50,
+ NETWORK_NAME_BY_ID: {
+ 1: Networks.mainnet,
+ 3: Networks.ropsten,
+ 4: Networks.rinkeby,
+ 42: Networks.kovan,
+ } as { [symbol: number]: string },
+ NETWORK_ID_BY_NAME: {
+ [Networks.mainnet]: 1,
+ [Networks.ropsten]: 3,
+ [Networks.rinkeby]: 4,
+ [Networks.kovan]: 42,
+ } as { [networkName: string]: number },
+ NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
+ PROVIDER_NAME_LEDGER: 'Ledger',
+ PROVIDER_NAME_METAMASK: 'Metamask',
+ PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
+ PROVIDER_NAME_GENERIC: 'Injected Web3',
+ PROVIDER_NAME_PUBLIC: '0x Public',
+ ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
+ SUCCESS_STATUS: 200,
+ UNAVAILABLE_STATUS: 503,
+ TAKER_FEE: new BigNumber(0),
+ TESTNET_NAME: 'Kovan',
+ TYPES_SECTION_NAME: 'types',
+ PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
+ PROJECT_URL_RADAR_RELAY: 'https://radarrelay.com',
+ PROJECT_URL_PARADEX: 'https://paradex.io',
+ PROJECT_URL_DYDX: 'https://dydx.exchange',
+ PROJECT_URL_MELONPORT: 'https://melonport.com',
+ PROJECT_URL_DISTRICT_0X: 'https://district0x.io',
+ PROJECT_URL_DHARMA: 'https://dharma.io',
+ PROJECT_URL_LENDROID: 'https://lendroid.com',
+ PROJECT_URL_MAKER: 'https://makerdao.com',
+ PROJECT_URL_ARAGON: 'https://aragon.one',
+ PROJECT_URL_BLOCKNET: 'https://blocknet.co',
+ PROJECT_URL_0CEAN: 'http://the0cean.com',
+ PROJECT_URL_STATUS: 'https://status.im',
+ PROJECT_URL_AUGUR: 'https://augur.net',
+ PROJECT_URL_AUCTUS: 'https://auctus.org',
+ PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
+ URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
+ URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
+ URL_BITLY_API: 'https://api-ssl.bitly.com',
+ URL_BLOG: 'https://blog.0xproject.com/latest',
+ URL_DISCOURSE_FORUM: 'https://forum.0xproject.com',
+ URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
+ URL_ETHER_FAUCET: 'https://faucet.0xproject.com',
+ URL_GITHUB_ORG: 'https://github.com/0xProject',
+ URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
+ URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
+ URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases',
+ URL_PARITY_CHROME_STORE:
+ 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
+ URL_REDDIT: 'https://reddit.com/r/0xproject',
+ URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
+ URL_TWITTER: 'https://twitter.com/0xproject',
+ URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
+ URL_WEB3_DECODED_LOG_ENTRY_EVENT:
+ 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
+ URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
+ URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
+ URL_WETH_IO: 'https://weth.io/',
+ URL_ZEROEX_CHAT: 'https://chat.0xproject.com',
};
diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts
index 1f5f75ee2..18bf276b4 100644
--- a/packages/website/ts/utils/doc_utils.ts
+++ b/packages/website/ts/utils/doc_utils.ts
@@ -5,47 +5,47 @@ import { utils } from 'ts/utils/utils';
import convert = require('xml-js');
export const docUtils = {
- async getVersionToFileNameAsync(s3DocJsonRoot: string): Promise<VersionToFileName> {
- const versionFileNames = await this.getVersionFileNamesAsync(s3DocJsonRoot);
- const versionToFileName: VersionToFileName = {};
- _.each(versionFileNames, fileName => {
- const [version] = findVersions(fileName);
- versionToFileName[version] = fileName;
- });
- return versionToFileName;
- },
- async getVersionFileNamesAsync(s3DocJsonRoot: string): Promise<string[]> {
- const response = await fetch(s3DocJsonRoot);
- if (response.status !== 200) {
- // TODO: Show the user an error message when the docs fail to load
- const errMsg = await response.text();
- utils.consoleLog(`Failed to load JSON file list: ${response.status} ${errMsg}`);
- throw new Error(errMsg);
- }
- const responseXML = await response.text();
- const responseJSONString = convert.xml2json(responseXML, {
- compact: true,
- });
- const responseObj = JSON.parse(responseJSONString);
- const fileObjs: S3FileObject[] = _.isArray(responseObj.ListBucketResult.Contents)
- ? (responseObj.ListBucketResult.Contents as S3FileObject[])
- : [responseObj.ListBucketResult.Contents];
+ async getVersionToFileNameAsync(s3DocJsonRoot: string): Promise<VersionToFileName> {
+ const versionFileNames = await this.getVersionFileNamesAsync(s3DocJsonRoot);
+ const versionToFileName: VersionToFileName = {};
+ _.each(versionFileNames, fileName => {
+ const [version] = findVersions(fileName);
+ versionToFileName[version] = fileName;
+ });
+ return versionToFileName;
+ },
+ async getVersionFileNamesAsync(s3DocJsonRoot: string): Promise<string[]> {
+ const response = await fetch(s3DocJsonRoot);
+ if (response.status !== 200) {
+ // TODO: Show the user an error message when the docs fail to load
+ const errMsg = await response.text();
+ utils.consoleLog(`Failed to load JSON file list: ${response.status} ${errMsg}`);
+ throw new Error(errMsg);
+ }
+ const responseXML = await response.text();
+ const responseJSONString = convert.xml2json(responseXML, {
+ compact: true,
+ });
+ const responseObj = JSON.parse(responseJSONString);
+ 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> {
- const endpoint = `${s3DocJsonRoot}/${fileName}`;
- const response = await fetch(endpoint);
- if (response.status !== 200) {
- // TODO: Show the user an error message when the docs fail to load
- const errMsg = await response.text();
- utils.consoleLog(`Failed to load Doc JSON: ${response.status} ${errMsg}`);
- throw new Error(errMsg);
- }
- const jsonDocObj = await response.json();
- return jsonDocObj;
- },
+ const versionFileNames = _.map(fileObjs, fileObj => {
+ return fileObj.Key._text;
+ });
+ return versionFileNames;
+ },
+ async getJSONDocFileAsync(fileName: string, s3DocJsonRoot: string): Promise<TypeDocNode | DoxityDocObj> {
+ const endpoint = `${s3DocJsonRoot}/${fileName}`;
+ const response = await fetch(endpoint);
+ if (response.status !== 200) {
+ // TODO: Show the user an error message when the docs fail to load
+ const errMsg = await response.text();
+ utils.consoleLog(`Failed to load Doc JSON: ${response.status} ${errMsg}`);
+ throw new Error(errMsg);
+ }
+ const jsonDocObj = await response.json();
+ return jsonDocObj;
+ },
};
diff --git a/packages/website/ts/utils/doxity_utils.ts b/packages/website/ts/utils/doxity_utils.ts
index 5f1d02132..f26534d51 100644
--- a/packages/website/ts/utils/doxity_utils.ts
+++ b/packages/website/ts/utils/doxity_utils.ts
@@ -1,168 +1,168 @@
import * as _ from 'lodash';
import {
- AbiTypes,
- DocAgnosticFormat,
- DocSection,
- DoxityAbiDoc,
- DoxityContractObj,
- DoxityDocObj,
- DoxityInput,
- EventArg,
- Parameter,
- Property,
- SolidityMethod,
- Type,
- TypeDocTypes,
+ AbiTypes,
+ DocAgnosticFormat,
+ DocSection,
+ DoxityAbiDoc,
+ DoxityContractObj,
+ DoxityDocObj,
+ DoxityInput,
+ EventArg,
+ Parameter,
+ Property,
+ SolidityMethod,
+ Type,
+ TypeDocTypes,
} from 'ts/types';
export const doxityUtils = {
- convertToDocAgnosticFormat(doxityDocObj: DoxityDocObj): DocAgnosticFormat {
- const docAgnosticFormat: DocAgnosticFormat = {};
- _.each(doxityDocObj, (doxityContractObj: DoxityContractObj, contractName: string) => {
- const doxityConstructor = _.find(doxityContractObj.abiDocs, (abiDoc: DoxityAbiDoc) => {
- return abiDoc.type === AbiTypes.Constructor;
- });
- const constructors = [];
- if (!_.isUndefined(doxityConstructor)) {
- const constructor = {
- isConstructor: true,
- name: doxityContractObj.name,
- comment: doxityConstructor.details,
- returnComment: doxityConstructor.return,
- callPath: '',
- parameters: this._convertParameters(doxityConstructor.inputs),
- returnType: this._convertType(doxityContractObj.name),
- };
- constructors.push(constructor);
- }
+ convertToDocAgnosticFormat(doxityDocObj: DoxityDocObj): DocAgnosticFormat {
+ const docAgnosticFormat: DocAgnosticFormat = {};
+ _.each(doxityDocObj, (doxityContractObj: DoxityContractObj, contractName: string) => {
+ const doxityConstructor = _.find(doxityContractObj.abiDocs, (abiDoc: DoxityAbiDoc) => {
+ return abiDoc.type === AbiTypes.Constructor;
+ });
+ const constructors = [];
+ if (!_.isUndefined(doxityConstructor)) {
+ const constructor = {
+ isConstructor: true,
+ name: doxityContractObj.name,
+ comment: doxityConstructor.details,
+ returnComment: doxityConstructor.return,
+ callPath: '',
+ parameters: this._convertParameters(doxityConstructor.inputs),
+ returnType: this._convertType(doxityContractObj.name),
+ };
+ constructors.push(constructor);
+ }
- 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;
- },
- );
+ 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;
+ },
+ );
- 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;
- if (!_.isEmpty(doxityProperty.inputs)) {
- // Properties never have more then a single input
- typeName = `(${doxityProperty.inputs[0].type} => ${typeName})`;
- }
- const property = {
- name: doxityProperty.name,
- type: this._convertType(typeName),
- comment: doxityProperty.details,
- };
- return property;
- });
+ 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;
+ if (!_.isEmpty(doxityProperty.inputs)) {
+ // Properties never have more then a single input
+ typeName = `(${doxityProperty.inputs[0].type} => ${typeName})`;
+ }
+ const property = {
+ name: doxityProperty.name,
+ type: this._convertType(typeName),
+ comment: doxityProperty.details,
+ };
+ return property;
+ });
- const doxityEvents = _.filter(
- doxityContractObj.abiDocs,
- (abiDoc: DoxityAbiDoc) => abiDoc.type === AbiTypes.Event,
- );
- const events = _.map(doxityEvents, doxityEvent => {
- const event = {
- name: doxityEvent.name,
- eventArgs: this._convertEventArgs(doxityEvent.inputs),
- };
- return event;
- });
+ const doxityEvents = _.filter(
+ doxityContractObj.abiDocs,
+ (abiDoc: DoxityAbiDoc) => abiDoc.type === AbiTypes.Event,
+ );
+ const events = _.map(doxityEvents, doxityEvent => {
+ const event = {
+ name: doxityEvent.name,
+ eventArgs: this._convertEventArgs(doxityEvent.inputs),
+ };
+ return event;
+ });
- const docSection: DocSection = {
- comment: doxityContractObj.title,
- constructors,
- methods,
- properties,
- types: [],
- events,
- };
- docAgnosticFormat[contractName] = docSection;
- });
- return docAgnosticFormat;
- },
- _convertParameters(inputs: DoxityInput[]): Parameter[] {
- const parameters = _.map(inputs, input => {
- const parameter = {
- name: input.name,
- comment: input.description,
- isOptional: false,
- type: this._convertType(input.type),
- };
- return parameter;
- });
- return parameters;
- },
- _convertType(typeName: string): Type {
- const type = {
- name: typeName,
- typeDocType: TypeDocTypes.Intrinsic,
- };
- return type;
- },
- _isMethod(abiDoc: DoxityAbiDoc) {
- if (abiDoc.type !== AbiTypes.Function) {
- return false;
- }
- const hasInputs = !_.isEmpty(abiDoc.inputs);
- const hasNamedOutputIfExists = !hasInputs || !_.isEmpty(abiDoc.inputs[0].name);
- const isNameAllCaps = abiDoc.name === abiDoc.name.toUpperCase();
- const isMethod = hasNamedOutputIfExists && !isNameAllCaps;
- return isMethod;
- },
- _isProperty(abiDoc: DoxityAbiDoc) {
- if (abiDoc.type !== AbiTypes.Function) {
- return false;
- }
- const hasInputs = !_.isEmpty(abiDoc.inputs);
- const hasNamedOutputIfExists = !hasInputs || !_.isEmpty(abiDoc.inputs[0].name);
- const isNameAllCaps = abiDoc.name === abiDoc.name.toUpperCase();
- const isProperty = !hasNamedOutputIfExists || isNameAllCaps;
- return isProperty;
- },
- _convertEventArgs(inputs: DoxityInput[]): EventArg[] {
- const eventArgs = _.map(inputs, input => {
- const eventArg = {
- isIndexed: input.indexed,
- name: input.name,
- type: this._convertType(input.type),
- };
- return eventArg;
- });
- return eventArgs;
- },
+ const docSection: DocSection = {
+ comment: doxityContractObj.title,
+ constructors,
+ methods,
+ properties,
+ types: [],
+ events,
+ };
+ docAgnosticFormat[contractName] = docSection;
+ });
+ return docAgnosticFormat;
+ },
+ _convertParameters(inputs: DoxityInput[]): Parameter[] {
+ const parameters = _.map(inputs, input => {
+ const parameter = {
+ name: input.name,
+ comment: input.description,
+ isOptional: false,
+ type: this._convertType(input.type),
+ };
+ return parameter;
+ });
+ return parameters;
+ },
+ _convertType(typeName: string): Type {
+ const type = {
+ name: typeName,
+ typeDocType: TypeDocTypes.Intrinsic,
+ };
+ return type;
+ },
+ _isMethod(abiDoc: DoxityAbiDoc) {
+ if (abiDoc.type !== AbiTypes.Function) {
+ return false;
+ }
+ const hasInputs = !_.isEmpty(abiDoc.inputs);
+ const hasNamedOutputIfExists = !hasInputs || !_.isEmpty(abiDoc.inputs[0].name);
+ const isNameAllCaps = abiDoc.name === abiDoc.name.toUpperCase();
+ const isMethod = hasNamedOutputIfExists && !isNameAllCaps;
+ return isMethod;
+ },
+ _isProperty(abiDoc: DoxityAbiDoc) {
+ if (abiDoc.type !== AbiTypes.Function) {
+ return false;
+ }
+ const hasInputs = !_.isEmpty(abiDoc.inputs);
+ const hasNamedOutputIfExists = !hasInputs || !_.isEmpty(abiDoc.inputs[0].name);
+ const isNameAllCaps = abiDoc.name === abiDoc.name.toUpperCase();
+ const isProperty = !hasNamedOutputIfExists || isNameAllCaps;
+ return isProperty;
+ },
+ _convertEventArgs(inputs: DoxityInput[]): EventArg[] {
+ const eventArgs = _.map(inputs, input => {
+ const eventArg = {
+ isIndexed: input.indexed,
+ name: input.name,
+ type: this._convertType(input.type),
+ };
+ return eventArg;
+ });
+ return eventArgs;
+ },
};
diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts
index 0bd247c5b..08d99e405 100644
--- a/packages/website/ts/utils/error_reporter.ts
+++ b/packages/website/ts/utils/error_reporter.ts
@@ -6,47 +6,47 @@ import { utils } from 'ts/utils/utils';
// Suggested way to include Rollbar with Webpack
// https://github.com/rollbar/rollbar.js/tree/master/examples/webpack
const rollbarConfig = {
- accessToken: constants.ROLLBAR_ACCESS_TOKEN,
- captureUncaught: true,
- captureUnhandledRejections: true,
- itemsPerMinute: 10,
- maxItems: 500,
- payload: {
- environment: configs.ENVIRONMENT,
- },
- uncaughtErrorLevel: 'error',
- hostWhiteList: [configs.DOMAIN_PRODUCTION, configs.DOMAIN_STAGING],
- ignoredMessages: [
- // Errors from the third-party scripts
- 'Script error',
- // Network errors or ad-blockers
- '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')",
- // Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging
- 'SecurityError (DOM Exception 18)',
- ],
+ accessToken: constants.ROLLBAR_ACCESS_TOKEN,
+ captureUncaught: true,
+ captureUnhandledRejections: true,
+ itemsPerMinute: 10,
+ maxItems: 500,
+ payload: {
+ environment: configs.ENVIRONMENT,
+ },
+ uncaughtErrorLevel: 'error',
+ hostWhiteList: [configs.DOMAIN_PRODUCTION, configs.DOMAIN_STAGING],
+ ignoredMessages: [
+ // Errors from the third-party scripts
+ 'Script error',
+ // Network errors or ad-blockers
+ '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')",
+ // Source: http://stackoverflow.com/questions/43399818/securityerror-from-facebook-and-cross-domain-messaging
+ 'SecurityError (DOM Exception 18)',
+ ],
};
import Rollbar = require('../../public/js/rollbar.umd.nojson.min.js');
const rollbar = Rollbar.init(rollbarConfig);
export const errorReporter = {
- async reportAsync(err: Error): Promise<any> {
- if (configs.ENVIRONMENT === Environments.DEVELOPMENT) {
- return; // Let's not log development errors to rollbar
- }
+ async reportAsync(err: Error): Promise<any> {
+ if (configs.ENVIRONMENT === Environments.DEVELOPMENT) {
+ return; // Let's not log development errors to rollbar
+ }
- return new Promise((resolve, reject) => {
- rollbar.error(err, (rollbarErr: Error) => {
- if (rollbarErr) {
- utils.consoleLog(`Error reporting to rollbar, ignoring: ${rollbarErr}`);
- // We never want to reject and cause the app to throw because of rollbar
- resolve();
- } else {
- resolve();
- }
- });
- });
- },
+ return new Promise((resolve, reject) => {
+ rollbar.error(err, (rollbarErr: Error) => {
+ if (rollbarErr) {
+ utils.consoleLog(`Error reporting to rollbar, ignoring: ${rollbarErr}`);
+ // We never want to reject and cause the app to throw because of rollbar
+ resolve();
+ } else {
+ resolve();
+ }
+ });
+ });
+ },
};
diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts
index d73e80606..565d1ae4f 100644
--- a/packages/website/ts/utils/mui_theme.ts
+++ b/packages/website/ts/utils/mui_theme.ts
@@ -2,34 +2,34 @@ import { getMuiTheme } from 'material-ui/styles';
import { colors } from 'ts/utils/colors';
export const muiTheme = getMuiTheme({
- appBar: {
- height: 45,
- color: colors.white,
- textColor: colors.black,
- },
- palette: {
- pickerHeaderColor: colors.lightBlue,
- primary1Color: colors.lightBlue,
- primary2Color: colors.lightBlue,
- textColor: colors.grey700,
- },
- datePicker: {
- color: colors.grey700,
- textColor: colors.white,
- calendarTextColor: colors.white,
- selectColor: colors.darkestGrey,
- selectTextColor: colors.white,
- },
- timePicker: {
- color: colors.grey700,
- textColor: colors.white,
- accentColor: colors.white,
- headerColor: colors.darkestGrey,
- selectColor: colors.darkestGrey,
- selectTextColor: colors.darkestGrey,
- },
- toggle: {
- thumbOnColor: colors.limeGreen,
- trackOnColor: colors.lightGreen,
- },
+ appBar: {
+ height: 45,
+ color: colors.white,
+ textColor: colors.black,
+ },
+ palette: {
+ pickerHeaderColor: colors.lightBlue,
+ primary1Color: colors.lightBlue,
+ primary2Color: colors.lightBlue,
+ textColor: colors.grey700,
+ },
+ datePicker: {
+ color: colors.grey700,
+ textColor: colors.white,
+ calendarTextColor: colors.white,
+ selectColor: colors.darkestGrey,
+ selectTextColor: colors.white,
+ },
+ timePicker: {
+ color: colors.grey700,
+ textColor: colors.white,
+ accentColor: colors.white,
+ headerColor: colors.darkestGrey,
+ selectColor: colors.darkestGrey,
+ selectTextColor: colors.darkestGrey,
+ },
+ toggle: {
+ thumbOnColor: colors.limeGreen,
+ trackOnColor: colors.lightGreen,
+ },
});
diff --git a/packages/website/ts/utils/typedoc_utils.ts b/packages/website/ts/utils/typedoc_utils.ts
index 11ec8da58..b0c152891 100644
--- a/packages/website/ts/utils/typedoc_utils.ts
+++ b/packages/website/ts/utils/typedoc_utils.ts
@@ -1,365 +1,365 @@
import * as _ from 'lodash';
import { DocsInfo } from 'ts/pages/documentation/docs_info';
import {
- CustomType,
- CustomTypeChild,
- DocAgnosticFormat,
- DocSection,
- IndexSignature,
- KindString,
- Parameter,
- Property,
- SectionsMap,
- Type,
- TypeDocNode,
- TypeDocType,
- TypeParameter,
- TypescriptMethod,
+ CustomType,
+ CustomTypeChild,
+ DocAgnosticFormat,
+ DocSection,
+ IndexSignature,
+ KindString,
+ Parameter,
+ Property,
+ SectionsMap,
+ Type,
+ TypeDocNode,
+ TypeDocType,
+ TypeParameter,
+ TypescriptMethod,
} from 'ts/types';
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
- );
- },
- isMethod(entity: TypeDocNode): boolean {
- return entity.kindString === KindString.Method;
- },
- isConstructor(entity: TypeDocNode): boolean {
- return entity.kindString === KindString.Constructor;
- },
- isProperty(entity: TypeDocNode): boolean {
- return entity.kindString === KindString.Property;
- },
- isPrivateOrProtectedProperty(propertyName: string): boolean {
- return _.startsWith(propertyName, '_');
- },
- getModuleDefinitionBySectionNameIfExists(
- versionDocObj: TypeDocNode,
- modulePaths: string[],
- ): TypeDocNode | undefined {
- const modules = versionDocObj.children;
- for (const mod of modules) {
- if (_.includes(modulePaths, mod.name)) {
- const moduleWithName = mod;
- return moduleWithName;
- }
- }
- return undefined;
- },
- convertToDocAgnosticFormat(typeDocJson: TypeDocNode, docsInfo: DocsInfo): DocAgnosticFormat {
- const subMenus = _.values(docsInfo.getMenu());
- const orderedSectionNames = _.flatten(subMenus);
- const docAgnosticFormat: DocAgnosticFormat = {};
- _.each(orderedSectionNames, sectionName => {
- const modulePathsIfExists = docsInfo.getModulePathsIfExists(sectionName);
- if (_.isUndefined(modulePathsIfExists)) {
- return; // no-op
- }
- const packageDefinitionIfExists = typeDocUtils.getModuleDefinitionBySectionNameIfExists(
- typeDocJson,
- modulePathsIfExists,
- );
- if (_.isUndefined(packageDefinitionIfExists)) {
- return; // no-op
- }
+ 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
+ );
+ },
+ isMethod(entity: TypeDocNode): boolean {
+ return entity.kindString === KindString.Method;
+ },
+ isConstructor(entity: TypeDocNode): boolean {
+ return entity.kindString === KindString.Constructor;
+ },
+ isProperty(entity: TypeDocNode): boolean {
+ return entity.kindString === KindString.Property;
+ },
+ isPrivateOrProtectedProperty(propertyName: string): boolean {
+ return _.startsWith(propertyName, '_');
+ },
+ getModuleDefinitionBySectionNameIfExists(
+ versionDocObj: TypeDocNode,
+ modulePaths: string[],
+ ): TypeDocNode | undefined {
+ const modules = versionDocObj.children;
+ for (const mod of modules) {
+ if (_.includes(modulePaths, mod.name)) {
+ const moduleWithName = mod;
+ return moduleWithName;
+ }
+ }
+ return undefined;
+ },
+ convertToDocAgnosticFormat(typeDocJson: TypeDocNode, docsInfo: DocsInfo): DocAgnosticFormat {
+ const subMenus = _.values(docsInfo.getMenu());
+ const orderedSectionNames = _.flatten(subMenus);
+ const docAgnosticFormat: DocAgnosticFormat = {};
+ _.each(orderedSectionNames, sectionName => {
+ const modulePathsIfExists = docsInfo.getModulePathsIfExists(sectionName);
+ if (_.isUndefined(modulePathsIfExists)) {
+ return; // no-op
+ }
+ const packageDefinitionIfExists = typeDocUtils.getModuleDefinitionBySectionNameIfExists(
+ typeDocJson,
+ modulePathsIfExists,
+ );
+ if (_.isUndefined(packageDefinitionIfExists)) {
+ return; // no-op
+ }
- // Since the `types.ts` file is the only file that does not export a module/class but
- // instead has each type export itself, we do not need to go down two levels of nesting
- // for it.
- let entities;
- let packageComment = '';
- if (sectionName === docsInfo.sections.types) {
- entities = packageDefinitionIfExists.children;
- } else {
- entities = packageDefinitionIfExists.children[0].children;
- const commentObj = packageDefinitionIfExists.children[0].comment;
- packageComment = !_.isUndefined(commentObj) ? commentObj.shortText : packageComment;
- }
+ // Since the `types.ts` file is the only file that does not export a module/class but
+ // instead has each type export itself, we do not need to go down two levels of nesting
+ // for it.
+ let entities;
+ let packageComment = '';
+ if (sectionName === docsInfo.sections.types) {
+ entities = packageDefinitionIfExists.children;
+ } else {
+ entities = packageDefinitionIfExists.children[0].children;
+ const commentObj = packageDefinitionIfExists.children[0].comment;
+ packageComment = !_.isUndefined(commentObj) ? commentObj.shortText : packageComment;
+ }
- const docSection = typeDocUtils._convertEntitiesToDocSection(entities, docsInfo, sectionName);
- docSection.comment = packageComment;
- docAgnosticFormat[sectionName] = docSection;
- });
- return docAgnosticFormat;
- },
- _convertEntitiesToDocSection(entities: TypeDocNode[], docsInfo: DocsInfo, sectionName: string) {
- const docSection: DocSection = {
- comment: '',
- constructors: [],
- methods: [],
- properties: [],
- types: [],
- };
+ const docSection = typeDocUtils._convertEntitiesToDocSection(entities, docsInfo, sectionName);
+ docSection.comment = packageComment;
+ docAgnosticFormat[sectionName] = docSection;
+ });
+ return docAgnosticFormat;
+ },
+ _convertEntitiesToDocSection(entities: TypeDocNode[], docsInfo: DocsInfo, sectionName: string) {
+ const docSection: DocSection = {
+ comment: '',
+ constructors: [],
+ methods: [],
+ properties: [],
+ types: [],
+ };
- let isConstructor;
- _.each(entities, entity => {
- switch (entity.kindString) {
- case KindString.Constructor:
- isConstructor = true;
- const constructor = typeDocUtils._convertMethod(
- entity,
- isConstructor,
- docsInfo.sections,
- sectionName,
- docsInfo.subPackageName,
- );
- docSection.constructors.push(constructor);
- break;
+ let isConstructor;
+ _.each(entities, entity => {
+ switch (entity.kindString) {
+ case KindString.Constructor:
+ isConstructor = true;
+ const constructor = typeDocUtils._convertMethod(
+ entity,
+ isConstructor,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
+ );
+ docSection.constructors.push(constructor);
+ break;
- case KindString.Method:
- if (entity.flags.isPublic) {
- isConstructor = false;
- const method = typeDocUtils._convertMethod(
- entity,
- isConstructor,
- docsInfo.sections,
- sectionName,
- docsInfo.subPackageName,
- );
- docSection.methods.push(method);
- }
- break;
+ case KindString.Method:
+ if (entity.flags.isPublic) {
+ isConstructor = false;
+ const method = typeDocUtils._convertMethod(
+ entity,
+ isConstructor,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
+ );
+ docSection.methods.push(method);
+ }
+ break;
- case KindString.Property:
- if (!typeDocUtils.isPrivateOrProtectedProperty(entity.name)) {
- const property = typeDocUtils._convertProperty(
- entity,
- docsInfo.sections,
- sectionName,
- docsInfo.subPackageName,
- );
- docSection.properties.push(property);
- }
- break;
+ case KindString.Property:
+ if (!typeDocUtils.isPrivateOrProtectedProperty(entity.name)) {
+ const property = typeDocUtils._convertProperty(
+ entity,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
+ );
+ docSection.properties.push(property);
+ }
+ break;
- case KindString.Interface:
- case KindString.Function:
- case KindString.Variable:
- case KindString.Enumeration:
- case KindString.TypeAlias:
- if (docsInfo.isPublicType(entity.name)) {
- const customType = typeDocUtils._convertCustomType(
- entity,
- docsInfo.sections,
- sectionName,
- docsInfo.subPackageName,
- );
- docSection.types.push(customType);
- }
- break;
+ case KindString.Interface:
+ case KindString.Function:
+ case KindString.Variable:
+ case KindString.Enumeration:
+ case KindString.TypeAlias:
+ if (docsInfo.isPublicType(entity.name)) {
+ const customType = typeDocUtils._convertCustomType(
+ entity,
+ docsInfo.sections,
+ sectionName,
+ docsInfo.subPackageName,
+ );
+ docSection.types.push(customType);
+ }
+ break;
- default:
- throw utils.spawnSwitchErr('kindString', entity.kindString);
- }
- });
- 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;
- 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;
+ default:
+ throw utils.spawnSwitchErr('kindString', entity.kindString);
+ }
+ });
+ 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;
+ 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 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,
- kindString: entity.kindString,
- type: typeIfExists,
- method: methodIfExists,
- indexSignature: indexSignatureIfExists,
- defaultValue: entity.defaultValue,
- comment: commentIfExists,
- children: childrenIfExist,
- };
- return customType;
- },
- _convertIndexSignature(
- entity: TypeDocNode,
- sections: SectionsMap,
- sectionName: string,
- subPackageName: string,
- ): IndexSignature {
- const key = entity.parameters[0];
- const indexSignature = {
- keyName: key.name,
- keyType: typeDocUtils._convertType(key.type, sections, sectionName, subPackageName),
- valueName: entity.type.name,
- };
- return indexSignature;
- },
- _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 = {
- name: entity.name,
- type: typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName),
- source: {
- fileName: source.fileName,
- line: source.line,
- },
- comment: commentIfExists,
- };
- return property;
- },
- _convertMethod(
- entity: TypeDocNode,
- isConstructor: boolean,
- sections: SectionsMap,
- sectionName: string,
- subPackageName: string,
- ): TypescriptMethod {
- const signature = entity.signatures[0];
- const source = entity.sources[0];
- const hasComment = !_.isUndefined(signature.comment);
- const isStatic = _.isUndefined(entity.flags.isStatic) ? false : entity.flags.isStatic;
+ const customType = {
+ name: entity.name,
+ kindString: entity.kindString,
+ type: typeIfExists,
+ method: methodIfExists,
+ indexSignature: indexSignatureIfExists,
+ defaultValue: entity.defaultValue,
+ comment: commentIfExists,
+ children: childrenIfExist,
+ };
+ return customType;
+ },
+ _convertIndexSignature(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): IndexSignature {
+ const key = entity.parameters[0];
+ const indexSignature = {
+ keyName: key.name,
+ keyType: typeDocUtils._convertType(key.type, sections, sectionName, subPackageName),
+ valueName: entity.type.name,
+ };
+ return indexSignature;
+ },
+ _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 = {
+ name: entity.name,
+ type: typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName),
+ source: {
+ fileName: source.fileName,
+ line: source.line,
+ },
+ comment: commentIfExists,
+ };
+ return property;
+ },
+ _convertMethod(
+ entity: TypeDocNode,
+ isConstructor: boolean,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): TypescriptMethod {
+ const signature = entity.signatures[0];
+ const source = entity.sources[0];
+ const hasComment = !_.isUndefined(signature.comment);
+ const isStatic = _.isUndefined(entity.flags.isStatic) ? false : entity.flags.isStatic;
- // HACK: we use the fact that the sectionName is the same as the property name at the top-level
- // of the public interface. In the future, we shouldn't use this hack but rather get it from the JSON.
- let callPath;
- if (isConstructor || entity.name === '__type') {
- callPath = '';
- } else if (subPackageName === '0x.js') {
- const topLevelInterface = isStatic ? 'ZeroEx.' : 'zeroEx.';
- callPath =
- !_.isUndefined(sections.zeroEx) && sectionName !== sections.zeroEx
- ? `${topLevelInterface}${sectionName}.`
- : topLevelInterface;
- } else {
- callPath = `${sectionName}.`;
- }
+ // HACK: we use the fact that the sectionName is the same as the property name at the top-level
+ // of the public interface. In the future, we shouldn't use this hack but rather get it from the JSON.
+ let callPath;
+ if (isConstructor || entity.name === '__type') {
+ callPath = '';
+ } else if (subPackageName === '0x.js') {
+ const topLevelInterface = isStatic ? 'ZeroEx.' : 'zeroEx.';
+ callPath =
+ !_.isUndefined(sections.zeroEx) && sectionName !== sections.zeroEx
+ ? `${topLevelInterface}${sectionName}.`
+ : topLevelInterface;
+ } else {
+ callPath = `${sectionName}.`;
+ }
- const parameters = _.map(signature.parameters, param => {
- 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 parameters = _.map(signature.parameters, param => {
+ 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 method = {
- isConstructor,
- isStatic,
- name: signature.name,
- comment: hasComment ? signature.comment.shortText : undefined,
- returnComment: hasComment && signature.comment.returns ? signature.comment.returns : undefined,
- source: {
- fileName: source.fileName,
- line: source.line,
- },
- callPath,
- parameters,
- returnType,
- typeParameter,
- };
- return method;
- },
- _convertTypeParameter(
- entity: TypeDocNode,
- sections: SectionsMap,
- sectionName: string,
- subPackageName: string,
- ): TypeParameter {
- const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName);
- const parameter = {
- name: entity.name,
- type,
- };
- return 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;
- } else if (entity.comment && entity.comment.text) {
- comment = entity.comment.text;
- }
+ const method = {
+ isConstructor,
+ isStatic,
+ name: signature.name,
+ comment: hasComment ? signature.comment.shortText : undefined,
+ returnComment: hasComment && signature.comment.returns ? signature.comment.returns : undefined,
+ source: {
+ fileName: source.fileName,
+ line: source.line,
+ },
+ callPath,
+ parameters,
+ returnType,
+ typeParameter,
+ };
+ return method;
+ },
+ _convertTypeParameter(
+ entity: TypeDocNode,
+ sections: SectionsMap,
+ sectionName: string,
+ subPackageName: string,
+ ): TypeParameter {
+ const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName);
+ const parameter = {
+ name: entity.name,
+ type,
+ };
+ return 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;
+ } else if (entity.comment && entity.comment.text) {
+ 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);
+ const type = typeDocUtils._convertType(entity.type, sections, sectionName, subPackageName);
- const parameter = {
- name: entity.name,
- comment,
- isOptional,
- type,
- };
- return parameter;
- },
- _convertType(entity: TypeDocType, sections: SectionsMap, sectionName: string, subPackageName: string): Type {
- const typeArguments = _.map(entity.typeArguments, typeArgument => {
- return typeDocUtils._convertType(typeArgument, sections, sectionName, subPackageName);
- });
- const types = _.map(entity.types, t => {
- return typeDocUtils._convertType(t, sections, sectionName, subPackageName);
- });
+ const parameter = {
+ name: entity.name,
+ comment,
+ isOptional,
+ type,
+ };
+ return parameter;
+ },
+ _convertType(entity: TypeDocType, sections: SectionsMap, sectionName: string, subPackageName: string): Type {
+ const typeArguments = _.map(entity.typeArguments, typeArgument => {
+ return typeDocUtils._convertType(typeArgument, sections, sectionName, subPackageName);
+ });
+ const types = _.map(entity.types, t => {
+ return typeDocUtils._convertType(t, sections, sectionName, subPackageName);
+ });
- const isConstructor = false;
- const methodIfExists = !_.isUndefined(entity.declaration)
- ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, subPackageName)
- : undefined;
+ const isConstructor = false;
+ 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,
- value: entity.value,
- typeDocType: entity.type,
- typeArguments,
- elementType: elementTypeIfExists,
- types,
- method: methodIfExists,
- };
- return type;
- },
+ const type = {
+ name: entity.name,
+ value: entity.value,
+ typeDocType: entity.type,
+ typeArguments,
+ elementType: elementTypeIfExists,
+ types,
+ method: methodIfExists,
+ };
+ return type;
+ },
};
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 13a6d6ae2..ea5b689ae 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -5,15 +5,15 @@ import isMobile = require('is-mobile');
import * as _ from 'lodash';
import * as moment from 'moment';
import {
- EtherscanLinkSuffixes,
- Networks,
- Order,
- ScreenWidths,
- Side,
- SideToAssetToken,
- SignatureData,
- Token,
- TokenByAddress,
+ EtherscanLinkSuffixes,
+ Networks,
+ Order,
+ ScreenWidths,
+ Side,
+ SideToAssetToken,
+ SignatureData,
+ Token,
+ TokenByAddress,
} from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
@@ -23,257 +23,257 @@ const LG_MIN_EM = 64;
const MD_MIN_EM = 52;
export const utils = {
- assert(condition: boolean, message: string) {
- if (!condition) {
- throw new Error(message);
- }
- },
- spawnSwitchErr(name: string, value: any) {
- return new Error(`Unexpected switch value: ${value} encountered for ${name}`);
- },
- isNumeric(n: string) {
- return !isNaN(parseFloat(n)) && isFinite(Number(n));
- },
- // This default unix timestamp is used for orders where the user does not specify an expiry date.
- // It is a fixed constant so that both the redux store's INITIAL_STATE and components can check for
- // whether a user has set an expiry date or not. It is set unrealistically high so as not to collide
- // with actual values a user would select.
- initialOrderExpiryUnixTimestampSec(): BigNumber {
- const m = moment('2050-01-01');
- return new BigNumber(m.unix());
- },
- convertToUnixTimestampSeconds(date: moment.Moment, time?: moment.Moment): BigNumber {
- const finalMoment = date;
- if (!_.isUndefined(time)) {
- finalMoment.hours(time.hours());
- finalMoment.minutes(time.minutes());
- }
- return new BigNumber(finalMoment.unix());
- },
- convertToMomentFromUnixTimestamp(unixTimestampSec: BigNumber): moment.Moment {
- return moment.unix(unixTimestampSec.toNumber());
- },
- convertToReadableDateTimeFromUnixTimestamp(unixTimestampSec: BigNumber): string {
- const m = this.convertToMomentFromUnixTimestamp(unixTimestampSec);
- 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 {
- const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address];
- const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address];
- const order = {
- maker: {
- address: orderMakerAddress,
- token: {
- name: makerToken.name,
- symbol: makerToken.symbol,
- decimals: makerToken.decimals,
- address: makerToken.address,
- },
- amount: sideToAssetToken[Side.Deposit].amount.toString(),
- feeAmount: makerFee.toString(),
- },
- taker: {
- address: orderTakerAddress,
- token: {
- name: takerToken.name,
- symbol: takerToken.symbol,
- decimals: takerToken.decimals,
- address: takerToken.address,
- },
- amount: sideToAssetToken[Side.Receive].amount.toString(),
- feeAmount: takerFee.toString(),
- },
- expiration: orderExpiryTimestamp.toString(),
- feeRecipient,
- salt: orderSalt.toString(),
- signature: signatureData,
- exchangeContract,
- networkId,
- };
- return order;
- },
- consoleLog(message: string) {
- /* tslint:disable */
- console.log(message);
- /* tslint:enable */
- },
- async sleepAsync(ms: number) {
- return new Promise(resolve => setTimeout(resolve, ms));
- },
- deepEqual(actual: any, expected: any, opts?: { strict: boolean }) {
- return deepEqual(actual, expected, opts);
- },
- getColSize(items: number) {
- const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
- const colSize = bassCssGridSize / items;
- if (!_.isInteger(colSize)) {
- throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
- }
- return colSize;
- },
- getScreenWidth() {
- const documentEl = document.documentElement;
- const body = document.getElementsByTagName('body')[0];
- const widthInPx = window.innerWidth || documentEl.clientWidth || body.clientWidth;
- const bodyStyles: any = window.getComputedStyle(document.querySelector('body'));
- const widthInEm = widthInPx / parseFloat(bodyStyles['font-size']);
+ assert(condition: boolean, message: string) {
+ if (!condition) {
+ throw new Error(message);
+ }
+ },
+ spawnSwitchErr(name: string, value: any) {
+ return new Error(`Unexpected switch value: ${value} encountered for ${name}`);
+ },
+ isNumeric(n: string) {
+ return !isNaN(parseFloat(n)) && isFinite(Number(n));
+ },
+ // This default unix timestamp is used for orders where the user does not specify an expiry date.
+ // It is a fixed constant so that both the redux store's INITIAL_STATE and components can check for
+ // whether a user has set an expiry date or not. It is set unrealistically high so as not to collide
+ // with actual values a user would select.
+ initialOrderExpiryUnixTimestampSec(): BigNumber {
+ const m = moment('2050-01-01');
+ return new BigNumber(m.unix());
+ },
+ convertToUnixTimestampSeconds(date: moment.Moment, time?: moment.Moment): BigNumber {
+ const finalMoment = date;
+ if (!_.isUndefined(time)) {
+ finalMoment.hours(time.hours());
+ finalMoment.minutes(time.minutes());
+ }
+ return new BigNumber(finalMoment.unix());
+ },
+ convertToMomentFromUnixTimestamp(unixTimestampSec: BigNumber): moment.Moment {
+ return moment.unix(unixTimestampSec.toNumber());
+ },
+ convertToReadableDateTimeFromUnixTimestamp(unixTimestampSec: BigNumber): string {
+ const m = this.convertToMomentFromUnixTimestamp(unixTimestampSec);
+ 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 {
+ const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address];
+ const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address];
+ const order = {
+ maker: {
+ address: orderMakerAddress,
+ token: {
+ name: makerToken.name,
+ symbol: makerToken.symbol,
+ decimals: makerToken.decimals,
+ address: makerToken.address,
+ },
+ amount: sideToAssetToken[Side.Deposit].amount.toString(),
+ feeAmount: makerFee.toString(),
+ },
+ taker: {
+ address: orderTakerAddress,
+ token: {
+ name: takerToken.name,
+ symbol: takerToken.symbol,
+ decimals: takerToken.decimals,
+ address: takerToken.address,
+ },
+ amount: sideToAssetToken[Side.Receive].amount.toString(),
+ feeAmount: takerFee.toString(),
+ },
+ expiration: orderExpiryTimestamp.toString(),
+ feeRecipient,
+ salt: orderSalt.toString(),
+ signature: signatureData,
+ exchangeContract,
+ networkId,
+ };
+ return order;
+ },
+ consoleLog(message: string) {
+ /* tslint:disable */
+ console.log(message);
+ /* tslint:enable */
+ },
+ async sleepAsync(ms: number) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ },
+ deepEqual(actual: any, expected: any, opts?: { strict: boolean }) {
+ return deepEqual(actual, expected, opts);
+ },
+ getColSize(items: number) {
+ const bassCssGridSize = 12; // Source: http://basscss.com/#basscss-grid
+ const colSize = bassCssGridSize / items;
+ if (!_.isInteger(colSize)) {
+ throw new Error(`Number of cols must be divisible by ${bassCssGridSize}`);
+ }
+ return colSize;
+ },
+ getScreenWidth() {
+ const documentEl = document.documentElement;
+ const body = document.getElementsByTagName('body')[0];
+ const widthInPx = window.innerWidth || documentEl.clientWidth || body.clientWidth;
+ const bodyStyles: any = window.getComputedStyle(document.querySelector('body'));
+ const widthInEm = widthInPx / parseFloat(bodyStyles['font-size']);
- // This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS
- // class prefixes. Do not edit these.
- if (widthInEm > LG_MIN_EM) {
- return ScreenWidths.Lg;
- } else if (widthInEm > MD_MIN_EM) {
- return ScreenWidths.Md;
- } else {
- return ScreenWidths.Sm;
- }
- },
- isUserOnMobile(): boolean {
- const isUserOnMobile = isMobile();
- return isUserOnMobile;
- },
- getEtherScanLinkIfExists(addressOrTxHash: string, networkId: number, suffix: EtherscanLinkSuffixes): string {
- const networkName = constants.NETWORK_NAME_BY_ID[networkId];
- if (_.isUndefined(networkName)) {
- return undefined;
- }
- const etherScanPrefix = networkName === Networks.mainnet ? '' : `${networkName.toLowerCase()}.`;
- return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`;
- },
- setUrlHash(anchorId: string) {
- window.location.hash = anchorId;
- },
- async isU2FSupportedAsync(): Promise<boolean> {
- 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)
- resolve(true);
- } else {
- // u2f object was not found. Using Google polyfill
- // HACK: u2f.getApiVersion will simply not return a version if the
- // U2F call fails for any reason. Because of this, we set a hard 3sec
- // timeout to the request on our end.
- const getApiVersionTimeoutMs = 3000;
- const intervalId = setTimeout(() => {
- resolve(false);
- }, getApiVersionTimeoutMs);
- u2f.getApiVersion((version: number) => {
- clearTimeout(intervalId);
- resolve(true);
- });
- }
- });
- },
- // This checks the error message returned from an injected Web3 instance on the page
- // after a user was prompted to sign a message or send a transaction and decided to
- // reject the request.
- didUserDenyWeb3Request(errMsg: string) {
- 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);
- return isUserDeniedErrMsg;
- },
- getCurrentEnvironment() {
- switch (location.host) {
- case configs.DOMAIN_DEVELOPMENT:
- return 'development';
- case configs.DOMAIN_STAGING:
- return 'staging';
- case configs.DOMAIN_PRODUCTION:
- return 'production';
- default:
- return 'production';
- }
- },
- getIdFromName(name: string) {
- const id = name.replace(/ /g, '-');
- return id;
- },
- getAddressBeginAndEnd(address: string): string {
- const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287
- return truncatedAddress;
- },
- hasUniqueNameAndSymbol(tokens: Token[], token: Token) {
- if (token.isRegistered) {
- 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 isUniqueName = _.isUndefined(tokenWithSameNameIfExists);
- 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 } = {
- [ZeroExError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist',
- [ZeroExError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist',
- [ZeroExError.TokenTransferProxyContractDoesNotExist]: 'TokenTransferProxy contract does not exist',
- [ZeroExError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist',
- [ZeroExError.TokenContractDoesNotExist]: 'Token contract does not exist',
- [ZeroExError.ZRXContractDoesNotExist]: 'ZRX contract does not exist',
- [ZeroExError.UnhandledError]: 'Unhandled error occured',
- [ZeroExError.UserHasNoAssociatedAddress]: 'User has no addresses available',
- [ZeroExError.InvalidSignature]: 'Order signature is not valid',
- [ZeroExError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network',
- [ZeroExError.InvalidJump]: 'Invalid jump occured while executing the transaction',
- [ZeroExError.OutOfGas]: 'Transaction ran out of gas',
- [ZeroExError.NoNetworkId]: 'No network id detected',
- };
- 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.OrderAlreadyCancelledOrFilled]:
- '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',
- [ExchangeContractErrs.OrderFillRoundingError]: 'Rounding error will occur when filling this order',
- [ExchangeContractErrs.InsufficientTakerBalance]:
- 'Taker no longer has a sufficient balance to complete this order',
- [ExchangeContractErrs.InsufficientTakerAllowance]:
- 'Taker no longer has a sufficient allowance to complete this order',
- [ExchangeContractErrs.InsufficientMakerBalance]:
- 'Maker no longer has a sufficient balance to complete this order',
- [ExchangeContractErrs.InsufficientMakerAllowance]:
- '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',
- [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',
- };
- const humanReadableErrorMsg =
- exchangeContractErrorToHumanReadableError[error] || ZeroExErrorToHumanReadableError[error];
- return humanReadableErrorMsg;
- },
+ // This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS
+ // class prefixes. Do not edit these.
+ if (widthInEm > LG_MIN_EM) {
+ return ScreenWidths.Lg;
+ } else if (widthInEm > MD_MIN_EM) {
+ return ScreenWidths.Md;
+ } else {
+ return ScreenWidths.Sm;
+ }
+ },
+ isUserOnMobile(): boolean {
+ const isUserOnMobile = isMobile();
+ return isUserOnMobile;
+ },
+ getEtherScanLinkIfExists(addressOrTxHash: string, networkId: number, suffix: EtherscanLinkSuffixes): string {
+ const networkName = constants.NETWORK_NAME_BY_ID[networkId];
+ if (_.isUndefined(networkName)) {
+ return undefined;
+ }
+ const etherScanPrefix = networkName === Networks.mainnet ? '' : `${networkName.toLowerCase()}.`;
+ return `https://${etherScanPrefix}etherscan.io/${suffix}/${addressOrTxHash}`;
+ },
+ setUrlHash(anchorId: string) {
+ window.location.hash = anchorId;
+ },
+ async isU2FSupportedAsync(): Promise<boolean> {
+ 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)
+ resolve(true);
+ } else {
+ // u2f object was not found. Using Google polyfill
+ // HACK: u2f.getApiVersion will simply not return a version if the
+ // U2F call fails for any reason. Because of this, we set a hard 3sec
+ // timeout to the request on our end.
+ const getApiVersionTimeoutMs = 3000;
+ const intervalId = setTimeout(() => {
+ resolve(false);
+ }, getApiVersionTimeoutMs);
+ u2f.getApiVersion((version: number) => {
+ clearTimeout(intervalId);
+ resolve(true);
+ });
+ }
+ });
+ },
+ // This checks the error message returned from an injected Web3 instance on the page
+ // after a user was prompted to sign a message or send a transaction and decided to
+ // reject the request.
+ didUserDenyWeb3Request(errMsg: string) {
+ 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);
+ return isUserDeniedErrMsg;
+ },
+ getCurrentEnvironment() {
+ switch (location.host) {
+ case configs.DOMAIN_DEVELOPMENT:
+ return 'development';
+ case configs.DOMAIN_STAGING:
+ return 'staging';
+ case configs.DOMAIN_PRODUCTION:
+ return 'production';
+ default:
+ return 'production';
+ }
+ },
+ getIdFromName(name: string) {
+ const id = name.replace(/ /g, '-');
+ return id;
+ },
+ getAddressBeginAndEnd(address: string): string {
+ const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287
+ return truncatedAddress;
+ },
+ hasUniqueNameAndSymbol(tokens: Token[], token: Token) {
+ if (token.isRegistered) {
+ 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 isUniqueName = _.isUndefined(tokenWithSameNameIfExists);
+ 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 } = {
+ [ZeroExError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist',
+ [ZeroExError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist',
+ [ZeroExError.TokenTransferProxyContractDoesNotExist]: 'TokenTransferProxy contract does not exist',
+ [ZeroExError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist',
+ [ZeroExError.TokenContractDoesNotExist]: 'Token contract does not exist',
+ [ZeroExError.ZRXContractDoesNotExist]: 'ZRX contract does not exist',
+ [ZeroExError.UnhandledError]: 'Unhandled error occured',
+ [ZeroExError.UserHasNoAssociatedAddress]: 'User has no addresses available',
+ [ZeroExError.InvalidSignature]: 'Order signature is not valid',
+ [ZeroExError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network',
+ [ZeroExError.InvalidJump]: 'Invalid jump occured while executing the transaction',
+ [ZeroExError.OutOfGas]: 'Transaction ran out of gas',
+ [ZeroExError.NoNetworkId]: 'No network id detected',
+ };
+ 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.OrderAlreadyCancelledOrFilled]:
+ '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',
+ [ExchangeContractErrs.OrderFillRoundingError]: 'Rounding error will occur when filling this order',
+ [ExchangeContractErrs.InsufficientTakerBalance]:
+ 'Taker no longer has a sufficient balance to complete this order',
+ [ExchangeContractErrs.InsufficientTakerAllowance]:
+ 'Taker no longer has a sufficient allowance to complete this order',
+ [ExchangeContractErrs.InsufficientMakerBalance]:
+ 'Maker no longer has a sufficient balance to complete this order',
+ [ExchangeContractErrs.InsufficientMakerAllowance]:
+ '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',
+ [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',
+ };
+ 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 415df6e8b..0cd2a5cc2 100644
--- a/packages/website/ts/web3_wrapper.ts
+++ b/packages/website/ts/web3_wrapper.ts
@@ -5,154 +5,154 @@ import { utils } from 'ts/utils/utils';
import * as Web3 from 'web3';
export class Web3Wrapper {
- private _dispatcher: Dispatcher;
- private _web3: Web3;
- private _prevNetworkId: number;
- private _shouldPollUserAddress: boolean;
- private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
- private _prevUserEtherBalanceInEth: BigNumber;
- private _prevUserAddress: string;
- constructor(
- dispatcher: Dispatcher,
- provider: Web3.Provider,
- networkIdIfExists: number,
- shouldPollUserAddress: boolean,
- ) {
- this._dispatcher = dispatcher;
- this._prevNetworkId = networkIdIfExists;
- this._shouldPollUserAddress = shouldPollUserAddress;
+ private _dispatcher: Dispatcher;
+ private _web3: Web3;
+ private _prevNetworkId: number;
+ private _shouldPollUserAddress: boolean;
+ private _watchNetworkAndBalanceIntervalId: NodeJS.Timer;
+ private _prevUserEtherBalanceInEth: BigNumber;
+ private _prevUserAddress: string;
+ constructor(
+ dispatcher: Dispatcher,
+ provider: Web3.Provider,
+ networkIdIfExists: number,
+ shouldPollUserAddress: boolean,
+ ) {
+ this._dispatcher = dispatcher;
+ this._prevNetworkId = networkIdIfExists;
+ this._shouldPollUserAddress = shouldPollUserAddress;
- this._web3 = new Web3();
- this._web3.setProvider(provider);
+ this._web3 = new Web3();
+ this._web3.setProvider(provider);
- // tslint:disable-next-line:no-floating-promises
- this._startEmittingNetworkConnectionAndUserBalanceStateAsync();
- }
- public isAddress(address: string) {
- return this._web3.isAddress(address);
- }
- public async getAccountsAsync(): Promise<string[]> {
- const addresses = await promisify<string[]>(this._web3.eth.getAccounts)();
- return addresses;
- }
- public async getFirstAccountIfExistsAsync() {
- const addresses = await this.getAccountsAsync();
- if (_.isEmpty(addresses)) {
- return '';
- }
- return addresses[0];
- }
- public async getNodeVersionAsync(): Promise<string> {
- const nodeVersion = await promisify<string>(this._web3.version.getNode)();
- return nodeVersion;
- }
- public getProviderObj() {
- return this._web3.currentProvider;
- }
- public async getNetworkIdIfExists() {
- try {
- const networkId = await this._getNetworkAsync();
- return Number(networkId);
- } catch (err) {
- return undefined;
- }
- }
- public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
- const balanceInWei: BigNumber = await promisify<BigNumber>(this._web3.eth.getBalance)(owner);
- const balanceEthOldBigNumber = this._web3.fromWei(balanceInWei, 'ether');
- const balanceEth = new BigNumber(balanceEthOldBigNumber);
- return balanceEth;
- }
- public async doesContractExistAtAddressAsync(address: string): Promise<boolean> {
- const code = await promisify<string>(this._web3.eth.getCode)(address);
- // Regex matches 0x0, 0x00, 0x in order to accomodate poorly implemented clients
- const zeroHexAddressRegex = /^0[xX][0]*$/;
- const didFindCode = _.isNull(code.match(zeroHexAddressRegex));
- return didFindCode;
- }
- public async signTransactionAsync(address: string, message: string): Promise<string> {
- const signData = await promisify<string>(this._web3.eth.sign)(address, message);
- return signData;
- }
- public async getBlockTimestampAsync(blockHash: string): Promise<number> {
- const { timestamp } = await promisify<Web3.BlockWithoutTransactionData>(this._web3.eth.getBlock)(blockHash);
- return timestamp;
- }
- public destroy() {
- this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
- // HACK: stop() is only available on providerEngine instances
- const provider = this._web3.currentProvider;
- if (!_.isUndefined((provider as any).stop)) {
- (provider as any).stop();
- }
- }
- // This should only be called from the LedgerConfigDialog
- public updatePrevUserAddress(userAddress: string) {
- this._prevUserAddress = userAddress;
- }
- private async _getNetworkAsync() {
- const networkId = await promisify(this._web3.version.getNetwork)();
- return networkId;
- }
- private async _startEmittingNetworkConnectionAndUserBalanceStateAsync() {
- if (!_.isUndefined(this._watchNetworkAndBalanceIntervalId)) {
- return; // we are already emitting the state
- }
+ // tslint:disable-next-line:no-floating-promises
+ this._startEmittingNetworkConnectionAndUserBalanceStateAsync();
+ }
+ public isAddress(address: string) {
+ return this._web3.isAddress(address);
+ }
+ public async getAccountsAsync(): Promise<string[]> {
+ const addresses = await promisify<string[]>(this._web3.eth.getAccounts)();
+ return addresses;
+ }
+ public async getFirstAccountIfExistsAsync() {
+ const addresses = await this.getAccountsAsync();
+ if (_.isEmpty(addresses)) {
+ return '';
+ }
+ return addresses[0];
+ }
+ public async getNodeVersionAsync(): Promise<string> {
+ const nodeVersion = await promisify<string>(this._web3.version.getNode)();
+ return nodeVersion;
+ }
+ public getProviderObj() {
+ return this._web3.currentProvider;
+ }
+ public async getNetworkIdIfExists() {
+ try {
+ const networkId = await this._getNetworkAsync();
+ return Number(networkId);
+ } catch (err) {
+ return undefined;
+ }
+ }
+ public async getBalanceInEthAsync(owner: string): Promise<BigNumber> {
+ const balanceInWei: BigNumber = await promisify<BigNumber>(this._web3.eth.getBalance)(owner);
+ const balanceEthOldBigNumber = this._web3.fromWei(balanceInWei, 'ether');
+ const balanceEth = new BigNumber(balanceEthOldBigNumber);
+ return balanceEth;
+ }
+ public async doesContractExistAtAddressAsync(address: string): Promise<boolean> {
+ const code = await promisify<string>(this._web3.eth.getCode)(address);
+ // Regex matches 0x0, 0x00, 0x in order to accomodate poorly implemented clients
+ const zeroHexAddressRegex = /^0[xX][0]*$/;
+ const didFindCode = _.isNull(code.match(zeroHexAddressRegex));
+ return didFindCode;
+ }
+ public async signTransactionAsync(address: string, message: string): Promise<string> {
+ const signData = await promisify<string>(this._web3.eth.sign)(address, message);
+ return signData;
+ }
+ public async getBlockTimestampAsync(blockHash: string): Promise<number> {
+ const { timestamp } = await promisify<Web3.BlockWithoutTransactionData>(this._web3.eth.getBlock)(blockHash);
+ return timestamp;
+ }
+ public destroy() {
+ this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
+ // HACK: stop() is only available on providerEngine instances
+ const provider = this._web3.currentProvider;
+ if (!_.isUndefined((provider as any).stop)) {
+ (provider as any).stop();
+ }
+ }
+ // This should only be called from the LedgerConfigDialog
+ public updatePrevUserAddress(userAddress: string) {
+ this._prevUserAddress = userAddress;
+ }
+ private async _getNetworkAsync() {
+ const networkId = await promisify(this._web3.version.getNetwork)();
+ return networkId;
+ }
+ private async _startEmittingNetworkConnectionAndUserBalanceStateAsync() {
+ if (!_.isUndefined(this._watchNetworkAndBalanceIntervalId)) {
+ return; // we are already emitting the state
+ }
- let prevNodeVersion: string;
- this._prevUserEtherBalanceInEth = new BigNumber(0);
- this._dispatcher.updateNetworkId(this._prevNetworkId);
- this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(
- async () => {
- // Check for network state changes
- const currentNetworkId = await this.getNetworkIdIfExists();
- if (currentNetworkId !== this._prevNetworkId) {
- this._prevNetworkId = currentNetworkId;
- this._dispatcher.updateNetworkId(currentNetworkId);
- }
+ let prevNodeVersion: string;
+ this._prevUserEtherBalanceInEth = new BigNumber(0);
+ this._dispatcher.updateNetworkId(this._prevNetworkId);
+ this._watchNetworkAndBalanceIntervalId = intervalUtils.setAsyncExcludingInterval(
+ async () => {
+ // Check for network state changes
+ const currentNetworkId = await this.getNetworkIdIfExists();
+ if (currentNetworkId !== this._prevNetworkId) {
+ this._prevNetworkId = currentNetworkId;
+ this._dispatcher.updateNetworkId(currentNetworkId);
+ }
- // Check for node version changes
- const currentNodeVersion = await this.getNodeVersionAsync();
- if (currentNodeVersion !== prevNodeVersion) {
- prevNodeVersion = currentNodeVersion;
- this._dispatcher.updateNodeVersion(currentNodeVersion);
- }
+ // Check for node version changes
+ const currentNodeVersion = await this.getNodeVersionAsync();
+ if (currentNodeVersion !== prevNodeVersion) {
+ prevNodeVersion = currentNodeVersion;
+ this._dispatcher.updateNodeVersion(currentNodeVersion);
+ }
- if (this._shouldPollUserAddress) {
- const userAddressIfExists = await this.getFirstAccountIfExistsAsync();
- // Update makerAddress on network change
- if (this._prevUserAddress !== userAddressIfExists) {
- this._prevUserAddress = userAddressIfExists;
- this._dispatcher.updateUserAddress(userAddressIfExists);
- }
+ if (this._shouldPollUserAddress) {
+ const userAddressIfExists = await this.getFirstAccountIfExistsAsync();
+ // Update makerAddress on network change
+ if (this._prevUserAddress !== userAddressIfExists) {
+ this._prevUserAddress = userAddressIfExists;
+ this._dispatcher.updateUserAddress(userAddressIfExists);
+ }
- // Check for user ether balance changes
- if (userAddressIfExists !== '') {
- await this._updateUserEtherBalanceAsync(userAddressIfExists);
- }
- } else {
- // This logic is primarily for the Ledger, since we don't regularly poll for the address
- // we simply update the balance for the last fetched address.
- if (!_.isEmpty(this._prevUserAddress)) {
- await this._updateUserEtherBalanceAsync(this._prevUserAddress);
- }
- }
- },
- 5000,
- (err: Error) => {
- utils.consoleLog(`Watching network and balances failed: ${err}`);
- this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
- },
- );
- }
- private async _updateUserEtherBalanceAsync(userAddress: string) {
- const balance = await this.getBalanceInEthAsync(userAddress);
- if (!balance.eq(this._prevUserEtherBalanceInEth)) {
- this._prevUserEtherBalanceInEth = balance;
- this._dispatcher.updateUserEtherBalance(balance);
- }
- }
- private _stopEmittingNetworkConnectionAndUserBalanceStateAsync() {
- intervalUtils.clearAsyncExcludingInterval(this._watchNetworkAndBalanceIntervalId);
- }
+ // Check for user ether balance changes
+ if (userAddressIfExists !== '') {
+ await this._updateUserEtherBalanceAsync(userAddressIfExists);
+ }
+ } else {
+ // This logic is primarily for the Ledger, since we don't regularly poll for the address
+ // we simply update the balance for the last fetched address.
+ if (!_.isEmpty(this._prevUserAddress)) {
+ await this._updateUserEtherBalanceAsync(this._prevUserAddress);
+ }
+ }
+ },
+ 5000,
+ (err: Error) => {
+ utils.consoleLog(`Watching network and balances failed: ${err}`);
+ this._stopEmittingNetworkConnectionAndUserBalanceStateAsync();
+ },
+ );
+ }
+ private async _updateUserEtherBalanceAsync(userAddress: string) {
+ const balance = await this.getBalanceInEthAsync(userAddress);
+ if (!balance.eq(this._prevUserEtherBalanceInEth)) {
+ this._prevUserEtherBalanceInEth = balance;
+ this._dispatcher.updateUserEtherBalance(balance);
+ }
+ }
+ private _stopEmittingNetworkConnectionAndUserBalanceStateAsync() {
+ intervalUtils.clearAsyncExcludingInterval(this._watchNetworkAndBalanceIntervalId);
+ }
}