aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/blockchain.ts14
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx6
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx2
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx2
-rw-r--r--packages/website/ts/components/dropdowns/network_drop_down.tsx4
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx15
-rw-r--r--packages/website/ts/components/fill_order.tsx6
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx2
-rw-r--r--packages/website/ts/components/flash_messages/token_send_completed.tsx2
-rw-r--r--packages/website/ts/components/flash_messages/transaction_submitted.tsx2
-rw-r--r--packages/website/ts/components/footer.tsx2
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx4
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx2
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx3
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/hash_input.tsx3
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx2
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx2
-rw-r--r--packages/website/ts/components/portal.tsx2
-rw-r--r--packages/website/ts/components/sidebar_header.tsx44
-rw-r--r--packages/website/ts/components/token_balances.tsx25
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx2
-rw-r--r--packages/website/ts/components/top_bar/provider_picker.tsx4
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx14
-rw-r--r--packages/website/ts/components/top_bar/top_bar_menu_item.tsx2
-rw-r--r--packages/website/ts/components/track_token_confirmation.tsx2
-rw-r--r--packages/website/ts/components/trade_history/trade_history_item.tsx4
-rw-r--r--packages/website/ts/components/ui/alert.tsx2
-rw-r--r--packages/website/ts/components/ui/badge.tsx56
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx2
-rw-r--r--packages/website/ts/components/ui/ethereum_address.tsx2
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx5
-rw-r--r--packages/website/ts/components/ui/fake_text_field.tsx2
-rw-r--r--packages/website/ts/components/ui/input_label.tsx2
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx2
-rw-r--r--packages/website/ts/components/ui/party.tsx5
-rw-r--r--packages/website/ts/components/ui/required_label.tsx2
-rw-r--r--packages/website/ts/components/ui/swap_icon.tsx2
-rw-r--r--packages/website/ts/containers/connect_documentation.ts58
-rw-r--r--packages/website/ts/containers/smart_contracts_documentation.ts12
-rw-r--r--packages/website/ts/containers/zero_ex_js_documentation.ts152
-rw-r--r--packages/website/ts/globals.d.ts13
-rw-r--r--packages/website/ts/pages/about/about.tsx4
-rw-r--r--packages/website/ts/pages/about/profile.tsx4
-rw-r--r--packages/website/ts/pages/documentation/comment.tsx23
-rw-r--r--packages/website/ts/pages/documentation/custom_enum.tsx32
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx52
-rw-r--r--packages/website/ts/pages/documentation/docs_info.ts119
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx333
-rw-r--r--packages/website/ts/pages/documentation/enum.tsx22
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx83
-rw-r--r--packages/website/ts/pages/documentation/interface.tsx61
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx148
-rw-r--r--packages/website/ts/pages/documentation/method_signature.tsx126
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx22
-rw-r--r--packages/website/ts/pages/documentation/type.tsx229
-rw-r--r--packages/website/ts/pages/documentation/type_definition.tsx127
-rw-r--r--packages/website/ts/pages/faq/faq.tsx4
-rw-r--r--packages/website/ts/pages/faq/question.tsx2
-rw-r--r--packages/website/ts/pages/landing/landing.tsx2
-rw-r--r--packages/website/ts/pages/not_found.tsx2
-rw-r--r--packages/website/ts/pages/shared/anchor_title.tsx86
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx25
-rw-r--r--packages/website/ts/pages/shared/markdown_link_block.tsx46
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx85
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx177
-rw-r--r--packages/website/ts/pages/shared/section_header.tsx63
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx45
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx33
-rw-r--r--packages/website/ts/types.ts299
-rw-r--r--packages/website/ts/utils/colors.ts48
-rw-r--r--packages/website/ts/utils/configs.ts4
-rw-r--r--packages/website/ts/utils/constants.ts23
-rw-r--r--packages/website/ts/utils/doc_utils.ts3
-rw-r--r--packages/website/ts/utils/doxity_utils.ts174
-rw-r--r--packages/website/ts/utils/mui_theme.ts2
-rw-r--r--packages/website/ts/utils/typedoc_utils.ts369
-rw-r--r--packages/website/ts/utils/utils.ts63
81 files changed, 345 insertions, 3094 deletions
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 156dc44e8..fca9504d7 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -15,6 +15,7 @@ import {
TransactionReceiptWithDecodedLogs,
ZeroEx,
} from '0x.js';
+import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
import {
InjectedWeb3Subprovider,
ledgerEthereumBrowserClientFactoryAsync,
@@ -35,7 +36,6 @@ import {
BlockchainCallErrs,
BlockchainErrs,
ContractInstance,
- EtherscanLinkSuffixes,
Order as PortalOrder,
ProviderType,
Side,
@@ -271,7 +271,11 @@ export class Blockchain {
},
);
await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
- const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
+ const etherScanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
+ txHash,
+ this.networkId,
+ EtherscanLinkSuffixes.Tx,
+ );
this._dispatcher.showFlashMessage(
React.createElement(TokenSendCompleted, {
etherScanLinkIfExists,
@@ -542,7 +546,11 @@ export class Blockchain {
private async _showEtherScanLinkAndAwaitTransactionMinedAsync(
txHash: string,
): Promise<TransactionReceiptWithDecodedLogs> {
- const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
+ const etherScanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
+ txHash,
+ this.networkId,
+ EtherscanLinkSuffixes.Tx,
+ );
this._dispatcher.showFlashMessage(
React.createElement(TransactionSubmitted, {
etherScanLinkIfExists,
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 278e2bbf5..e71a0f7d1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,10 +1,10 @@
+import { colors, Networks } from '@0xproject/react-shared';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
-import { BlockchainErrs, Networks } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { BlockchainErrs } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
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 acd4a7110..5c61f0d57 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
@@ -6,7 +7,6 @@ import { Blockchain } from 'ts/blockchain';
import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
import { Side, Token } from 'ts/types';
-import { colors } from 'ts/utils/colors';
interface EthWethConversionDialogProps {
blockchain: Blockchain;
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index bc5f05241..8a242cd33 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,3 +1,4 @@
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
@@ -11,7 +12,6 @@ import { NetworkDropDown } from 'ts/components/dropdowns/network_drop_down';
import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
@@ -82,7 +82,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
);
}
private _renderConnectStep() {
- const networkIds = _.values(constants.NETWORK_ID_BY_NAME);
+ const networkIds = _.values(sharedConstants.NETWORK_ID_BY_NAME);
return (
<div>
<div className="h4 pt3">Follow these instructions before proceeding:</div>
@@ -163,7 +163,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
const balance = this.state.addressBalances[i];
const addressTooltipId = `address-${userAddress}`;
const balanceTooltipId = `balance-${userAddress}`;
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.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';
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index 3ecc454a0..b31667121 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
interface PortalDisclaimerDialogProps {
isOpen: boolean;
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..6ac9cf917 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
interface U2fNotSupportedDialogProps {
diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx
index 28ec28ed5..b569807dd 100644
--- a/packages/website/ts/components/dropdowns/network_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx
@@ -1,8 +1,8 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
-import { constants } from 'ts/utils/constants';
interface NetworkDropDownProps {
updateSelectedNetwork: (e: any, index: number, value: number) => void;
@@ -24,7 +24,7 @@ export class NetworkDropDown extends React.Component<NetworkDropDownProps, Netwo
}
private _renderDropDownItems() {
const items = _.map(this.props.avialableNetworkIds, networkId => {
- const networkName = constants.NETWORK_NAME_BY_ID[networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[networkId];
const primaryText = (
<div className="flex">
<div className="pr1" style={{ width: 14, paddingTop: 2 }}>
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index c2cdf6751..7ac5d5c9c 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -1,4 +1,5 @@
import { ZeroEx } from '0x.js';
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Divider from 'material-ui/Divider';
@@ -9,15 +10,7 @@ import ReactTooltip = require('react-tooltip');
import { Blockchain } from 'ts/blockchain';
import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button';
import { Dispatcher } from 'ts/redux/dispatcher';
-import {
- EtherscanLinkSuffixes,
- OutdatedWrappedEtherByNetworkId,
- Side,
- Token,
- TokenByAddress,
- TokenState,
-} from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { OutdatedWrappedEtherByNetworkId, Side, Token, TokenByAddress, TokenState } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
@@ -99,7 +92,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
const etherToken = this._getEthToken();
const wethBalance = ZeroEx.toUnitAmount(this.state.ethTokenState.balance, constants.DECIMAL_PLACES_ETH);
const isBidirectional = true;
- const etherscanUrl = utils.getEtherScanLinkIfExists(
+ const etherscanUrl = sharedUtils.getEtherScanLinkIfExists(
etherToken.address,
this.props.networkId,
EtherscanLinkSuffixes.Address,
@@ -281,7 +274,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
this,
outdatedWETHIfExists.address,
);
- const etherscanUrl = utils.getEtherScanLinkIfExists(
+ const etherscanUrl = sharedUtils.getEtherScanLinkIfExists(
outdatedWETHIfExists.address,
this.props.networkId,
EtherscanLinkSuffixes.Address,
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 51e44134c..e9127288d 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,4 +1,5 @@
import { Order as ZeroExOrder, ZeroEx } from '0x.js';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as accounting from 'accounting';
import * as _ from 'lodash';
@@ -21,7 +22,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
import { validator } from 'ts/schemas/validator';
import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
@@ -537,7 +537,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
});
return;
}
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${parsedOrder.metadata.takerToken.symbol}-${networkName}`;
try {
const orderFilledAmount: BigNumber = await this.props.blockchain.fillOrderAsync(
@@ -623,7 +623,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
});
return;
}
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${parsedOrder.metadata.makerToken.symbol}-${networkName}`;
try {
await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount);
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 165d21b34..d3215a6c1 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
interface FillWarningDialogProps {
isOpen: boolean;
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..a3b056758 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -1,9 +1,9 @@
import { ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import { Token } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface TokenSendCompletedProps {
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index 862e382dd..188f1f9a6 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,6 +1,6 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
interface TransactionSubmittedProps {
etherScanLinkIfExists?: string;
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 810460cac..957ed2044 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
@@ -5,7 +6,6 @@ import * as React from 'react';
import { Link } from 'react-router-dom';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
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 a3f222784..26fa904fe 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,4 +1,5 @@
import { ECSignature, Order, ZeroEx } from '0x.js';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
@@ -20,7 +21,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
import { validator } from 'ts/schemas/validator';
import { AlertTypes, BlockchainErrs, HashData, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
@@ -253,7 +253,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
) {
const didSignSuccessfully = await this._signTransactionAsync();
if (didSignSuccessfully) {
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${this.props.tokenByAddress[debitToken.address].symbol}-${networkName}`;
ReactGA.event({
category: 'Portal',
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 f76830a49..e7f3b93c6 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
@@ -7,7 +8,6 @@ import { Alert } from 'ts/components/ui/alert';
import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
import { RequiredLabel } from 'ts/components/ui/required_label';
import { AlertTypes, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
interface NewTokenFormProps {
blockchain: Blockchain;
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index dd4131140..7ca4af968 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
+import { colors } from '@0xproject/react-shared';
import { addressUtils } from '@0xproject/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import { RequiredLabel } from 'ts/components/ui/required_label';
-import { colors } from 'ts/utils/colors';
interface AddressInputProps {
disabled?: boolean;
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index a2e75dfed..7fe303cf4 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -1,3 +1,4 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Toggle from 'material-ui/Toggle';
@@ -76,7 +77,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
if (!this._isAllowanceSet()) {
newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
}
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${this.props.token.symbol}-${networkName}`;
try {
await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 3bbc7a5f6..253b01871 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import TextField from 'material-ui/TextField';
@@ -5,7 +6,6 @@ import * as React from 'react';
import { Link } from 'react-router-dom';
import { RequiredLabel } from 'ts/components/ui/required_label';
import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface BalanceBoundedInputProps {
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 5a3d34fe6..28305637d 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,10 +1,11 @@
import { Order, ZeroEx } from '0x.js';
+import { Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import { Blockchain } from 'ts/blockchain';
import { FakeTextField } from 'ts/components/ui/fake_text_field';
-import { HashData, Styles } from 'ts/types';
+import { HashData } from 'ts/types';
import { constants } from 'ts/utils/constants';
const styles: Styles = {
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 2b167d875..53248c065 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,4 +1,5 @@
import { ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
@@ -6,7 +7,6 @@ import { Link } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
import { InputErrMsg, Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
interface TokenAmountInputProps {
userAddress: string;
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 5df19b28c..545e9a095 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
import * as React from 'react';
@@ -7,7 +8,6 @@ import { InputLabel } from 'ts/components/ui/input_label';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { Dispatcher } from 'ts/redux/dispatcher';
import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
const TOKEN_ICON_DIMENSION = 80;
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 4871997ac..d71e821c6 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
@@ -24,7 +25,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
import { validator } from 'ts/schemas/validator';
import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
new file mode 100644
index 000000000..519b23d80
--- /dev/null
+++ b/packages/website/ts/components/sidebar_header.tsx
@@ -0,0 +1,44 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+const SHOW_DURATION_MS = 4000;
+
+const titleToIcon: { [title: string]: string } = {
+ '0x.js': 'zeroExJs.png',
+ '0x Connect': 'connect.png',
+ '0x Smart Contracts': 'contracts.png',
+ Wiki: 'wiki.png',
+};
+
+interface SidebarHeaderProps {
+ title: string;
+}
+
+interface SidebarHeaderState {}
+
+export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
+ public render() {
+ return (
+ <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
+ <div className="flex" style={{ fontSize: 25 }}>
+ <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div>
+ <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
+ docs
+ </div>
+ </div>
+ <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
+ |
+ </div>
+ <div className="flex">
+ <div>
+ <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
+ </div>
+ <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
+ {this.props.title}
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 894edf0a8..7e7596fd7 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -1,4 +1,12 @@
import { ZeroEx } from '0x.js';
+import {
+ colors,
+ constants as sharedConstants,
+ EtherscanLinkSuffixes,
+ Networks,
+ Styles,
+ utils as sharedUtils,
+} from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import DharmaLoanFrame from 'dharma-loan-frame';
import * as _ from 'lodash';
@@ -26,15 +34,11 @@ import {
BalanceErrs,
BlockchainCallErrs,
BlockchainErrs,
- EtherscanLinkSuffixes,
- Networks,
ScreenWidths,
- Styles,
Token,
TokenByAddress,
TokenVisibility,
} from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
@@ -118,7 +122,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
if (nextProps.userEtherBalance !== this.props.userEtherBalance) {
if (this.state.isBalanceSpinnerVisible) {
const receivedAmount = nextProps.userEtherBalance.minus(this.props.userEtherBalance);
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
this.props.dispatcher.showFlashMessage(`Received ${receivedAmount.toString(10)} ${networkName} Ether`);
}
this.setState({
@@ -358,17 +362,20 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
}
private _renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
const tokenState = this.state.trackedTokenStateByAddress[token.address];
- const tokenLink = utils.getEtherScanLinkIfExists(
+ const tokenLink = sharedUtils.getEtherScanLinkIfExists(
token.address,
this.props.networkId,
EtherscanLinkSuffixes.Address,
);
const isMintable =
(_.includes(configs.SYMBOLS_OF_MINTABLE_KOVAN_TOKENS, token.symbol) &&
- this.props.networkId === constants.NETWORK_ID_BY_NAME[Networks.Kovan]) ||
+ this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan]) ||
(_.includes(configs.SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS, token.symbol) &&
_.includes(
- [constants.NETWORK_ID_BY_NAME[Networks.Rinkeby], constants.NETWORK_ID_BY_NAME[Networks.Ropsten]],
+ [
+ sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
+ sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten],
+ ],
this.props.networkId,
));
return (
@@ -540,7 +547,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
}
}
private _renderDharmaLoanFrame() {
- if (utils.isUserOnMobile()) {
+ if (sharedUtils.isUserOnMobile()) {
return (
<h4 style={{ textAlign: 'center' }}>
We apologize -- Dharma loan requests are not available on mobile yet. Please try again through your
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 39e7f2a8c..89c506d0e 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
@@ -7,7 +8,6 @@ import { DropDown } from 'ts/components/ui/drop_down';
import { Identicon } from 'ts/components/ui/identicon';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
index be7e57d6f..b986da873 100644
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ b/packages/website/ts/components/top_bar/provider_picker.tsx
@@ -1,10 +1,10 @@
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
import * as _ from 'lodash';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import * as React from 'react';
import { Blockchain } from 'ts/blockchain';
import { Dispatcher } from 'ts/redux/dispatcher';
import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
interface ProviderPickerProps {
@@ -56,7 +56,7 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide
return label;
}
private _renderNetwork() {
- const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
+ const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
return (
<div className="flex" style={{ marginTop: 1 }}>
<div className="relative" style={{ width: 14, paddingLeft: 14 }}>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index b2b2d2ebd..29c68524c 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,3 +1,5 @@
+import { DocsInfo, DocsMenu } from '@0xproject/react-docs';
+import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import Menu from 'material-ui/Menu';
@@ -7,15 +9,13 @@ import { Link } from 'react-router-dom';
import ReactTooltip = require('react-tooltip');
import { Blockchain } from 'ts/blockchain';
import { PortalMenu } from 'ts/components/portal_menu';
+import { SidebarHeader } from 'ts/components/sidebar_header';
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { DropDown } from 'ts/components/ui/drop_down';
import { Identicon } from 'ts/components/ui/identicon';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, Styles, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -38,6 +38,7 @@ interface TopBarProps {
docsInfo?: DocsInfo;
style?: React.CSSProperties;
isNightVersion?: boolean;
+ onVersionSelected?: (semver: string) => void;
}
interface TopBarState {
@@ -315,11 +316,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<NestedSidebarMenu
topLevelMenu={this.props.menu}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- title={this.props.docsInfo.displayName}
+ sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
selectedVersion={this.props.docsVersion}
versions={this.props.availableDocVersions}
+ onVersionSelected={this.props.onVersionSelected}
/>
</div>
);
@@ -334,7 +336,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<NestedSidebarMenu
topLevelMenu={this.props.menuSubsectionsBySection}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- title={this.props.translate.get(Key.Wiki, Deco.Cap)}
+ sidebarHeader={<SidebarHeader title="Wiki" />}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
/>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index e70381456..c0e674b17 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Link } from 'react-router-dom';
-import { colors } from 'ts/utils/colors';
const DEFAULT_STYLE = {
color: colors.darkestGrey,
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index 76971aefa..8c5ba7e6f 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,8 +1,8 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Party } from 'ts/components/ui/party';
import { Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface TrackTokenConfirmationProps {
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..6b8d7c7b5 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -1,4 +1,5 @@
import { ZeroEx } from '0x.js';
+import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
@@ -7,8 +8,7 @@ import * as React from 'react';
import * as ReactTooltip from 'react-tooltip';
import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
import { Party } from 'ts/components/ui/party';
-import { EtherscanLinkSuffixes, Fill, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { Fill, Token, TokenByAddress } from 'ts/types';
const PRECISION = 5;
const IDENTICON_DIAMETER = 40;
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 54881b499..f81939255 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,6 +1,6 @@
+import { colors } from '@0xproject/react-shared';
import * as React from 'react';
import { AlertTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
interface AlertProps {
type: AlertTypes;
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
deleted file mode 100644
index 056d741e0..000000000
--- a/packages/website/ts/components/ui/badge.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Styles } from 'ts/types';
-
-const styles: Styles = {
- badge: {
- width: 50,
- fontSize: 11,
- height: 10,
- borderRadius: 5,
- lineHeight: 0.9,
- fontFamily: 'Roboto Mono',
- marginLeft: 3,
- marginRight: 3,
- },
-};
-
-interface BadgeProps {
- title: string;
- backgroundColor: string;
-}
-
-interface BadgeState {
- 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,
- });
- }
-}
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index df55e0922..d58e50815 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import * as ReactDOM from 'react-dom';
import ReactTooltip = require('react-tooltip');
-import { colors } from 'ts/utils/colors';
interface CopyIconProps {
data: string;
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index b75d97e39..f449a8e75 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -1,7 +1,7 @@
+import { EtherscanLinkSuffixes } from '@0xproject/react-shared';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
-import { EtherscanLinkSuffixes } from 'ts/types';
import { utils } from 'ts/utils/utils';
interface EthereumAddressProps {
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 3b17bd0fa..040b84a0b 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,8 +1,7 @@
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
-import { EtherscanLinkSuffixes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
interface EtherScanIconProps {
@@ -12,7 +11,7 @@ interface EtherScanIconProps {
}
export const EtherScanIcon = (props: EtherScanIconProps) => {
- const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+ const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
props.addressOrTxHash,
props.networkId,
EtherscanLinkSuffixes.Address,
diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx
index f3d9410f6..646ae98f6 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -1,6 +1,6 @@
+import { Styles } from '@0xproject/react-shared';
import * as React from 'react';
import { InputLabel } from 'ts/components/ui/input_label';
-import { Styles } from 'ts/types';
const styles: Styles = {
hr: {
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index e2009ad20..6a3f26155 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,5 +1,5 @@
+import { colors } from '@0xproject/react-shared';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
export interface InputLabelProps {
text: string | Element | React.ReactNode;
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 8ff856a75..c85e11884 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index ca2577b61..3d94903d1 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,10 +1,9 @@
+import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import { EthereumAddress } from 'ts/components/ui/ethereum_address';
import { Identicon } from 'ts/components/ui/identicon';
-import { EtherscanLinkSuffixes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { utils } from 'ts/utils/utils';
const IMAGE_DIMENSION = 100;
@@ -43,7 +42,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
width: IMAGE_DIMENSION,
height: IMAGE_DIMENSION,
};
- const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+ const etherscanLinkIfExists = sharedUtils.getEtherScanLinkIfExists(
this.props.address,
this.props.networkId,
EtherscanLinkSuffixes.Address,
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index a5e7a22ce..0f96586ec 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,5 +1,5 @@
+import { colors } from '@0xproject/react-shared';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
export interface RequiredLabelProps {
label: string | React.ReactNode;
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index c41592287..e465a8074 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
interface SwapIconProps {
swapTokensFn: () => void;
diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts
index 6a5ba1f99..bd6821d19 100644
--- a/packages/website/ts/containers/connect_documentation.ts
+++ b/packages/website/ts/containers/connect_documentation.ts
@@ -1,12 +1,12 @@
+import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as _ from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
-import { DocPackages, DocsInfoConfig, Environments, SupportedDocJson, WebsitePaths } from 'ts/types';
+import { DocPackages, Environments, WebsitePaths } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -21,7 +21,7 @@ const connectDocSections = {
installation: 'installation',
httpClient: 'httpClient',
webSocketOrderbookChannel: 'webSocketOrderbookChannel',
- types: constants.TYPES_SECTION_NAME,
+ types: docConstants.TYPES_SECTION_NAME,
};
const docsInfoConfig: DocsInfoConfig = {
@@ -40,29 +40,6 @@ const docsInfoConfig: DocsInfoConfig = {
[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',
- 'OrdersRequestOpts',
- 'PagedRequestOpts',
- 'TokenPairsItem',
- 'TokenPairsRequest',
- 'TokenPairsRequestOpts',
- 'TokenTradeInfo',
- 'WebSocketOrderbookChannelConfig',
- 'Order',
- 'SignedOrder',
- 'ECSignature',
- ],
sectionNameToModulePath: {
[connectDocSections.httpClient]: ['"src/http_client"'],
[connectDocSections.webSocketOrderbookChannel]: ['"src/ws_orderbook_channel"'],
@@ -71,6 +48,35 @@ const docsInfoConfig: DocsInfoConfig = {
menuSubsectionToVersionWhenIntroduced: {},
sections: connectDocSections,
visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel],
+ typeConfigs: {
+ typeNameToExternalLink: {
+ Provider: constants.URL_WEB3_PROVIDER_DOCS,
+ BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
+ },
+ // 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',
+ 'OrdersRequestOpts',
+ 'PagedRequestOpts',
+ 'TokenPairsItem',
+ 'TokenPairsRequest',
+ 'TokenPairsRequestOpts',
+ 'TokenTradeInfo',
+ 'WebSocketOrderbookChannelConfig',
+ 'Order',
+ 'SignedOrder',
+ 'ECSignature',
+ ],
+ },
};
const docsInfo = new DocsInfo(docsInfoConfig);
diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts
index a839529aa..b1b2ea922 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.ts
+++ b/packages/website/ts/containers/smart_contracts_documentation.ts
@@ -1,19 +1,13 @@
+import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import { Networks } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
-import {
- DocPackages,
- DocsInfoConfig,
- Networks,
- SmartContractDocSections as Sections,
- SupportedDocJson,
- WebsitePaths,
-} from 'ts/types';
+import { DocPackages, SmartContractDocSections as Sections, WebsitePaths } from 'ts/types';
import { Translate } from 'ts/utils/translate';
/* tslint:disable:no-var-requires */
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts
index d0d697e70..21e2f780d 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.ts
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
@@ -1,12 +1,12 @@
+import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
import * as _ from 'lodash';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
import { Dispatcher } from 'ts/redux/dispatcher';
import { State } from 'ts/redux/reducer';
-import { DocPackages, DocsInfoConfig, Environments, SupportedDocJson, WebsitePaths } from 'ts/types';
+import { DocPackages, Environments, WebsitePaths } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -33,7 +33,7 @@ const zeroExJsDocSections = {
etherToken: 'etherToken',
proxy: 'proxy',
orderWatcher: 'orderWatcher',
- types: constants.TYPES_SECTION_NAME,
+ types: docConstants.TYPES_SECTION_NAME,
};
const docsInfoConfig: DocsInfoConfig = {
@@ -63,67 +63,6 @@ const docsInfoConfig: DocsInfoConfig = {
[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 :( Make sure to only
- // ADD types here, DO NOT REMOVE types since they might still be needed for older supported versions
- 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',
- 'TransactionReceipt',
- 'TransactionReceiptWithDecodedLogs',
- 'LogWithDecodedArgs',
- 'EtherTokenEvents',
- 'BlockParamLiteral',
- 'DecodedLogArgs',
- 'MethodOpts',
- 'ValidateOrderFillableOpts',
- 'OrderTransactionOpts',
- 'TransactionOpts',
- 'ContractEventArg',
- 'LogEvent',
- 'LogEntry',
- 'DecodedLogEvent',
- 'EventWatcherCallback',
- 'OnOrderStateChangeCallback',
- 'OrderStateValid',
- 'OrderStateInvalid',
- 'OrderState',
- 'OrderStateWatcherConfig',
- 'FilterObject',
- ],
sectionNameToModulePath: {
[zeroExJsDocSections.zeroEx]: ['"0x.js/src/0x"', '"src/0x"'],
[zeroExJsDocSections.exchange]: [
@@ -160,6 +99,91 @@ const docsInfoConfig: DocsInfoConfig = {
},
sections: zeroExJsDocSections,
visibleConstructors: [zeroExJsDocSections.zeroEx],
+ typeConfigs: {
+ // 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 :( Make sure to only
+ // ADD types here, DO NOT REMOVE types since they might still be needed for older supported versions
+ 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',
+ 'TransactionReceipt',
+ 'TransactionReceiptWithDecodedLogs',
+ 'LogWithDecodedArgs',
+ 'EtherTokenEvents',
+ 'BlockParamLiteral',
+ 'DecodedLogArgs',
+ 'MethodOpts',
+ 'ValidateOrderFillableOpts',
+ 'OrderTransactionOpts',
+ 'TransactionOpts',
+ 'ContractEventArg',
+ 'LogEvent',
+ 'LogEntry',
+ 'DecodedLogEvent',
+ 'EventWatcherCallback',
+ 'OnOrderStateChangeCallback',
+ 'OrderStateValid',
+ 'OrderStateInvalid',
+ 'OrderState',
+ 'OrderStateWatcherConfig',
+ 'FilterObject',
+ ],
+ typeNameToPrefix: {
+ Provider: 'Web3',
+ DecodedLogEntryEvent: 'Web3',
+ LogEntryEvent: 'Web3',
+ CallData: 'Web3',
+ },
+ typeNameToExternalLink: {
+ 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,
+ },
+ typeNameToDocSection: {
+ ExchangeWrapper: 'exchange',
+ TokenWrapper: 'token',
+ TokenRegistryWrapper: 'tokenRegistry',
+ EtherTokenWrapper: 'etherToken',
+ ProxyWrapper: 'proxy',
+ TokenTransferProxyWrapper: 'proxy',
+ OrderStateWatcher: 'orderWatcher',
+ },
+ },
};
const docsInfo = new DocsInfo(docsInfoConfig);
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index 19237db14..ef276519c 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -7,7 +7,6 @@ declare module 'whatwg-fetch';
declare module 'react-html5video';
declare module 'web3-provider-engine/subproviders/filters';
declare module 'thenby';
-declare module 'react-highlight';
declare module 'react-recaptcha';
declare module 'react-document-title';
declare module 'ethereumjs-tx';
@@ -28,12 +27,6 @@ declare module 'find-versions' {
export = findVersions;
}
-// compare-version declarations
-declare function compareVersions(firstVersion: string, secondVersion: string): number;
-declare module 'compare-versions' {
- export = compareVersions;
-}
-
// semver-sort declarations
declare module 'semver-sort' {
const desc: (versions: string[]) => string[];
@@ -116,12 +109,6 @@ declare module 'blockies' {
export = blockies;
}
-// is-mobile declarations
-declare function isMobile(): boolean;
-declare module 'is-mobile' {
- export = isMobile;
-}
-
// web3-provider-engine declarations
declare class Subprovider {}
declare module 'web3-provider-engine/subproviders/subprovider' {
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index b99dc34ab..7f1e0bf80 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,3 +1,4 @@
+import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
@@ -5,8 +6,7 @@ import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Profile } from 'ts/pages/about/profile';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProfileInfo, Styles } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { ProfileInfo } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 18b4e0d5a..4361da103 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,7 +1,7 @@
+import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
-import { ProfileInfo, Styles } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { ProfileInfo } from 'ts/types';
const IMAGE_DIMENSION = 149;
const styles: Styles = {
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
deleted file mode 100644
index 5f177e97e..000000000
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactMarkdown from 'react-markdown';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
-
-interface CommentProps {
- comment: string;
- className?: string;
-}
-
-const defaultProps = {
- className: '',
-};
-
-export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
- return (
- <div className={`${props.className} comment`}>
- <ReactMarkdown source={props.comment} renderers={{ code: 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
deleted file mode 100644
index 8d50a2f52..000000000
--- a/packages/website/ts/pages/documentation/custom_enum.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { CustomType } from 'ts/types';
-import { utils } from 'ts/utils/utils';
-
-const STRING_ENUM_CODE_PREFIX = ' strEnum(';
-
-interface CustomEnumProps {
- 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>
- );
-}
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 2c8f1c103..1281219c6 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -1,23 +1,27 @@
+import { DocAgnosticFormat, DocsInfo, Documentation, DoxityDocObj } from '@0xproject/react-docs';
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
import findVersions = require('find-versions');
import * as _ from 'lodash';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import semverSort = require('semver-sort');
+import { SidebarHeader } from 'ts/components/sidebar_header';
import { TopBar } from 'ts/components/top_bar/top_bar';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Documentation } from 'ts/pages/documentation/documentation';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments, MenuSubsectionsBySection } from 'ts/types';
+import { DocPackages, Environments } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { docUtils } from 'ts/utils/doc_utils';
import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4';
+
+const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
const docIdToS3BucketName: { [id: string]: string } = {
- [DocPackages.ZeroExJs]: '0xjs-docs-jsons',
+ [DocPackages.ZeroExJs]: isDevelopment ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons',
[DocPackages.SmartContracts]: 'smart-contracts-docs-json',
- [DocPackages.Connect]:
- configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-connect-docs-jsons' : 'connect-docs-jsons',
+ [DocPackages.Connect]: isDevelopment ? 'staging-connect-docs-jsons' : 'connect-docs-jsons',
};
const docIdToSubpackageName: { [id: string]: string } = {
@@ -77,15 +81,17 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
menuSubsectionsBySection={menuSubsectionsBySection}
docsInfo={this.props.docsInfo}
translate={this.props.translate}
+ onVersionSelected={this._onVersionSelected.bind(this)}
/>
<Documentation
- location={this.props.location}
- docsVersion={this.props.docsVersion}
- availableDocVersions={this.props.availableDocVersions}
+ selectedVersion={this.props.docsVersion}
+ availableVersions={this.props.availableDocVersions}
docsInfo={this.props.docsInfo}
docAgnosticFormat={this.state.docAgnosticFormat}
- menuSubsectionsBySection={menuSubsectionsBySection}
+ sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
sourceUrl={sourceUrl}
+ topBarHeight={60}
+ onVersionSelected={this._onVersionSelected.bind(this)}
/>
</div>
);
@@ -110,7 +116,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
const versionFileNameToFetch = versionToFileName[versionToFetch];
const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, docsJsonRoot);
- const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
+ const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj);
if (!this._isUnmounted) {
this.setState({
@@ -120,13 +126,33 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
}
private _getSourceUrl() {
const url = this.props.docsInfo.packageUrl;
- const pkg = docIdToSubpackageName[this.props.docsInfo.id];
+ let pkg = docIdToSubpackageName[this.props.docsInfo.id];
let tagPrefix = pkg;
const packagesWithNamespace = ['connect'];
if (_.includes(packagesWithNamespace, pkg)) {
tagPrefix = `@0xproject/${pkg}`;
}
- const sourceUrl = `${url}/blob/${tagPrefix}%40${this.props.docsVersion}/packages/${pkg}`;
+ // HACK: The following three lines exist for backward compatibility reasons
+ // Before exporting types from other packages as part of the 0x.js interface,
+ // all TypeDoc generated paths omitted the topLevel `0x.js` segment. Now it
+ // adds it, and for that reason, we need to make sure we don't add it twice in
+ // the source links we generate.
+ const semvers = semverSort.desc([this.props.docsVersion, ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH]);
+ const isVersionAfterTopLevelPathChange = semvers[0] !== ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH;
+ pkg = this.props.docsInfo.id === DocPackages.ZeroExJs && isVersionAfterTopLevelPathChange ? '' : `/${pkg}`;
+
+ const sourceUrl = `${url}/blob/${tagPrefix}%40${this.props.docsVersion}/packages${pkg}`;
return sourceUrl;
}
+ private _onVersionSelected(semver: string) {
+ let path = window.location.pathname;
+ const lastChar = path[path.length - 1];
+ if (_.isFinite(_.parseInt(lastChar))) {
+ const pathSections = path.split('/');
+ pathSections.pop();
+ path = pathSections.join('/');
+ }
+ const baseUrl = utils.getCurrentBaseUrl();
+ window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
+ }
}
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
deleted file mode 100644
index 31e151fe8..000000000
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import compareVersions = require('compare-versions');
-import * as _ from 'lodash';
-import {
- ContractsByVersionByNetworkId,
- DocAgnosticFormat,
- DocsInfoConfig,
- DocsMenu,
- DoxityDocObj,
- MenuSubsectionsBySection,
- SectionsMap,
- SupportedDocJson,
- TypeDocNode,
-} from 'ts/types';
-import { doxityUtils } from 'ts/utils/doxity_utils';
-import { typeDocUtils } from 'ts/utils/typedoc_utils';
-
-export class DocsInfo {
- public id: string;
- public type: SupportedDocJson;
- public displayName: string;
- public packageUrl: string;
- public menu: DocsMenu;
- public sections: SectionsMap;
- public sectionNameToMarkdown: { [sectionName: string]: string };
- public contractsByVersionByNetworkId?: ContractsByVersionByNetworkId;
- private _docsInfo: DocsInfoConfig;
- constructor(config: DocsInfoConfig) {
- this.id = config.id;
- this.type = config.type;
- this.displayName = config.displayName;
- this.packageUrl = config.packageUrl;
- this.sections = config.sections;
- this.sectionNameToMarkdown = config.sectionNameToMarkdown;
- this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
- 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;
- }
-
- // 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
- }
-
- 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 {
- if (this.type === SupportedDocJson.Doxity) {
- return doxityUtils.convertToDocAgnosticFormat(docObj as DoxityDocObj);
- } else {
- return typeDocUtils.convertToDocAgnosticFormat(docObj as TypeDocNode, this);
- }
- }
-}
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
deleted file mode 100644
index 699bef7a8..000000000
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-import * as _ from 'lodash';
-import CircularProgress from 'material-ui/CircularProgress';
-import * as React from 'react';
-import { scroller } from 'react-scroll';
-import { Badge } from 'ts/components/ui/badge';
-import { Comment } from 'ts/pages/documentation/comment';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { EventDefinition } from 'ts/pages/documentation/event_definition';
-import { MethodBlock } from 'ts/pages/documentation/method_block';
-import { SourceLink } from 'ts/pages/documentation/source_link';
-import { Type } from 'ts/pages/documentation/type';
-import { TypeDefinition } from 'ts/pages/documentation/type_definition';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
-import {
- AddressByContractName,
- DocAgnosticFormat,
- DoxityDocObj,
- EtherscanLinkSuffixes,
- Event,
- MenuSubsectionsBySection,
- Networks,
- Property,
- SolidityMethod,
- Styles,
- SupportedDocJson,
- TypeDefinitionByName,
- TypescriptMethod,
-} from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { configs } from 'ts/utils/configs';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-const TOP_BAR_HEIGHT = 60;
-
-const networkNameToColor: { [network: string]: string } = {
- [Networks.Kovan]: colors.purple,
- [Networks.Ropsten]: colors.red,
- [Networks.Mainnet]: colors.turquois,
- [Networks.Rinkeby]: colors.darkYellow,
-};
-
-export interface DocumentationProps {
- location: Location;
- docsVersion: string;
- availableDocVersions: string[];
- docsInfo: DocsInfo;
- docAgnosticFormat?: DocAgnosticFormat;
- menuSubsectionsBySection: MenuSubsectionsBySection;
- sourceUrl: string;
-}
-
-interface DocumentationState {}
-
-const styles: Styles = {
- mainContainers: {
- position: 'absolute',
- top: 1,
- left: 0,
- bottom: 0,
- right: 0,
- overflowZ: 'hidden',
- overflowY: 'scroll',
- minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
- WebkitOverflowScrolling: 'touch',
- },
- menuContainer: {
- borderColor: colors.grey300,
- maxWidth: 330,
- marginLeft: 20,
- },
-};
-
-export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
- public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
- if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
- const hash = this.props.location.hash.slice(1);
- utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
- }
- }
- public render() {
- return (
- <div>
- {_.isUndefined(this.props.docAgnosticFormat) ? (
- this._renderLoading()
- ) : (
- <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
- <div
- className="mx-auto max-width-4 flex"
- style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
- >
- <div
- className="relative sm-hide xs-hide"
- style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
- >
- <div
- className="border-right absolute"
- style={{
- ...styles.menuContainer,
- ...styles.mainContainers,
- height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
- }}
- >
- <NestedSidebarMenu
- selectedVersion={this.props.docsVersion}
- versions={this.props.availableDocVersions}
- title={this.props.docsInfo.displayName}
- topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
- menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- />
- </div>
- </div>
- <div
- className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
- style={{ backgroundColor: colors.white }}
- >
- <div
- id={configs.SCROLL_CONTAINER_ID}
- style={styles.mainContainers}
- className="absolute px1"
- >
- <div id={configs.SCROLL_TOP_ID} />
- {this._renderDocumentation()}
- </div>
- </div>
- </div>
- </div>
- )}
- </div>
- );
- }
- private _renderLoading() {
- return (
- <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>
- );
- }
- private _renderDocumentation(): React.ReactNode {
- const subMenus = _.values(this.props.docsInfo.getMenu());
- const orderedSectionNames = _.flatten(subMenus);
-
- const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.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}
- />
- );
- }
-
- const docSection = this.props.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 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 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 pb2">
- <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) {
- if (this.props.docsInfo.type !== SupportedDocJson.Doxity) {
- return null;
- }
-
- const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
- 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}
- sourceUrl={this.props.sourceUrl}
- />
- )}
- {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}
- sourceUrl={this.props.sourceUrl}
- />
- );
- }
-}
diff --git a/packages/website/ts/pages/documentation/enum.tsx b/packages/website/ts/pages/documentation/enum.tsx
deleted file mode 100644
index 7dfdee771..000000000
--- a/packages/website/ts/pages/documentation/enum.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { EnumValue } from 'ts/types';
-
-interface EnumProps {
- 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>
- );
-}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
deleted file mode 100644
index e62c9ecbd..000000000
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Type } from 'ts/pages/documentation/type';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { Event, EventArg, HeaderSizes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-
-interface EventDefinitionProps {
- event: Event;
- sectionName: string;
- docsInfo: DocsInfo;
-}
-
-interface EventDefinitionState {
- 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;
- const id = `${this.props.sectionName}-${event.name}`;
- return (
- <div
- id={id}
- 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={id}
- 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
deleted file mode 100644
index 16a772125..000000000
--- a/packages/website/ts/pages/documentation/interface.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { Type } from 'ts/pages/documentation/type';
-import { CustomType, TypeDocTypes } from 'ts/types';
-
-interface InterfaceProps {
- 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>
- );
-}
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
deleted file mode 100644
index d2c96bf8c..000000000
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Comment } from 'ts/pages/documentation/comment';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { SourceLink } from 'ts/pages/documentation/source_link';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { typeDocUtils } from 'ts/utils/typedoc_utils';
-
-interface MethodBlockProps {
- method: SolidityMethod | TypescriptMethod;
- sectionName: string;
- libraryVersion: string;
- typeDefinitionByName: TypeDefinitionByName;
- docsInfo: DocsInfo;
- sourceUrl: string;
-}
-
-interface MethodBlockState {
- shouldShowAnchor: boolean;
-}
-
-const styles: Styles = {
- chip: {
- fontSize: 13,
- backgroundColor: colors.lightBlueA700,
- color: colors.white,
- height: 11,
- borderRadius: 14,
- lineHeight: 0.9,
- },
-};
-
-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;
- }
-
- 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 pb2 pt2">
- {(method as TypescriptMethod).isStatic && this._renderChip('Static')}
- {(method as SolidityMethod).isConstant && this._renderChip('Constant')}
- {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
- <div style={{ lineHeight: 1.3 }}>
- <AnchorTitle
- headerSize={HeaderSizes.H3}
- title={method.name}
- id={`${this.props.sectionName}-${method.name}`}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </div>
- </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}
- sourceUrl={this.props.sourceUrl}
- />
- )}
- {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"
- style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
- >
- {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" style={{ paddingLeft: 5 }}>
- {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
deleted file mode 100644
index 22294e428..000000000
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Type } from 'ts/pages/documentation/type';
-import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-
-interface MethodSignatureProps {
- method: TypescriptMethod | SolidityMethod;
- sectionName: string;
- shouldHideMethodName?: boolean;
- shouldUseArrowSyntax?: boolean;
- typeDefinitionByName?: TypeDefinitionByName;
- docsInfo: DocsInfo;
-}
-
-const defaultProps = {
- 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 paramStringArray: any[] = [];
- // HACK: For now we don't put params on newlines if there are less then 2 of them.
- // Ideally we would check the character length of the resulting method signature and
- // if it exceeds the available space, put params on their own lines.
- const hasMoreThenTwoParams = parameters.length > 2;
- _.each(parameters, (param: React.ReactNode, i: number) => {
- const finalParam = hasMoreThenTwoParams ? (
- <span className="pl2" key={`param-${i}`}>
- {param}
- </span>
- ) : (
- param
- );
- paramStringArray.push(finalParam);
- const comma = hasMoreThenTwoParams ? (
- <span key={`param-comma-${i}`}>
- , <br />
- </span>
- ) : (
- ', '
- );
- paramStringArray.push(comma);
- });
- if (!hasMoreThenTwoParams) {
- paramStringArray.pop();
- }
- 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 style={{ fontSize: 15 }}>
- {props.method.callPath}
- {methodName}
- {typeParameterIfExists}({hasMoreThenTwoParams && <br />}
- {paramStringArray})
- {props.method.returnType && (
- <span>
- {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
- <Type
- type={props.method.returnType}
- sectionName={sectionName}
- typeDefinitionByName={props.typeDefinitionByName}
- docsInfo={props.docsInfo}
- />
- </span>
- )}
- </span>
- );
-};
-
-MethodSignature.defaultProps = defaultProps;
-
-function renderParameters(
- 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;
-}
-
-function renderTypeParameter(
- 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;
-}
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
deleted file mode 100644
index 31f80aba3..000000000
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Source } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-
-interface SourceLinkProps {
- source: Source;
- sourceUrl: string;
- version: string;
-}
-
-export function SourceLink(props: SourceLinkProps) {
- const src = props.source;
- const sourceCodeUrl = `${props.sourceUrl}/${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
deleted file mode 100644
index b306fa053..000000000
--- a/packages/website/ts/pages/documentation/type.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import * as ReactTooltip from 'react-tooltip';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { TypeDefinition } from 'ts/pages/documentation/type_definition';
-import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-// 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,
-};
-
-const typePrefix: { [typeName: string]: string } = {
- 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',
-};
-
-interface TypeProps {
- 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;
-
- 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.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.TypeParameter:
- typeName = type.name;
- break;
-
- case TypeDocTypes.Intersection:
- const intersectionsTypes = _.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(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
- return [prev, '&', curr];
- });
- 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];
- });
-
- 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
deleted file mode 100644
index 02bf63258..000000000
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Comment } from 'ts/pages/documentation/comment';
-import { CustomEnum } from 'ts/pages/documentation/custom_enum';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Enum } from 'ts/pages/documentation/enum';
-import { Interface } from 'ts/pages/documentation/interface';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { Type } from 'ts/pages/documentation/type';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface TypeDefinitionProps {
- sectionName: string;
- customType: CustomType;
- shouldAddId?: boolean;
- docsInfo: DocsInfo;
-}
-
-interface TypeDefinitionState {
- 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
- }
-
- 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.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;
-
- 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>
- <div style={{ maxWidth: 620 }}>
- {customType.comment && <Comment comment={customType.comment} className="py2" />}
- </div>
- </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 34175abdc..1be3c3565 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,3 +1,4 @@
+import { colors, Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
@@ -5,8 +6,7 @@ import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Question } from 'ts/pages/faq/question';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 988c04bc9..240dae910 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import { Card, CardHeader, CardText } from 'material-ui/Card';
import * as React from 'react';
-import { colors } from 'ts/utils/colors';
export interface QuestionProps {
prompt: string;
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 044f0b41f..6699e4e6f 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
@@ -7,7 +8,6 @@ import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index ad37f6242..ff25a35e9 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -1,9 +1,9 @@
+import { Styles } from '@0xproject/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import { Footer } from 'ts/components/footer';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Styles } from 'ts/types';
import { Translate } from 'ts/utils/translate';
export interface NotFoundProps {
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
deleted file mode 100644
index 0270618a0..000000000
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import { HeaderSizes, Styles } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-const headerSizeToScrollOffset: { [headerSize: string]: number } = {
- h2: -20,
- h3: 0,
-};
-
-interface AnchorTitleProps {
- title: string | React.ReactNode;
- id: string;
- headerSize: HeaderSizes;
- shouldShowAnchor: boolean;
-}
-
-interface AnchorTitleState {
- 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',
- },
- h2: {
- fontSize: '1.5em',
- fontWeight: 400,
- },
- h3: {
- fontSize: '1.17em',
- },
-};
-
-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,
- });
- }
-}
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
deleted file mode 100644
index 6dfb74554..000000000
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as HighLight from 'react-highlight';
-
-interface MarkdownCodeBlockProps {
- value: 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.value !== this.props.value || nextProps.language !== this.props.language;
- }
- public render() {
- return (
- <span style={{ fontSize: 14 }}>
- <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
- </span>
- );
- }
-}
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
deleted file mode 100644
index e4553c87f..000000000
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { configs } from 'ts/utils/configs';
-import { utils } from 'ts/utils/utils';
-
-interface MarkdownLinkBlockProps {
- href: string;
-}
-
-interface MarkdownLinkBlockState {}
-
-export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
- // Re-rendering a linkBlock causes it to remain unclickable.
- // We therefore noop re-renders on this component if it's props haven't changed.
- public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
- return nextProps.href !== this.props.href;
- }
- public render() {
- const href = this.props.href;
- const isLinkToSection = _.startsWith(href, '#');
- // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
- if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
- return (
- <a href={href} target="_blank" rel="nofollow noreferrer noopener">
- {this.props.children}
- </a>
- );
- } else if (isLinkToSection) {
- return (
- <a
- style={{ cursor: 'pointer', textDecoration: 'underline' }}
- onClick={this._onHashUrlClick.bind(this, href)}
- >
- {this.props.children}
- </a>
- );
- } else {
- return <a href={href}>{this.props.children}</a>;
- }
- }
- private _onHashUrlClick(href: string) {
- const hash = href.split('#')[1];
- utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
- utils.setUrlHash(hash);
- }
-}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
deleted file mode 100644
index 7253072d9..000000000
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as _ from 'lodash';
-import RaisedButton from 'material-ui/RaisedButton';
-import * as React from 'react';
-import * as ReactMarkdown from 'react-markdown';
-import { Element as ScrollElement } from 'react-scroll';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
-import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
-import { HeaderSizes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface MarkdownSectionProps {
- sectionName: string;
- markdownContent: string;
- headerSize?: HeaderSizes;
- githubLink?: string;
-}
-
-interface MarkdownSectionState {
- 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="md-px1 sm-px2 overflow-hidden"
- onMouseOver={this._setAnchorVisibility.bind(this, true)}
- onMouseOut={this._setAnchorVisibility.bind(this, false)}
- >
- <ScrollElement name={id}>
- <div className="clearfix pt3">
- <div className="col lg-col-8 md-col-8 sm-col-12">
- <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
- <AnchorTitle
- headerSize={this.props.headerSize}
- title={sectionName}
- id={id}
- shouldShowAnchor={this.state.shouldShowAnchor}
- />
- </span>
- </div>
- <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
- {!_.isUndefined(this.props.githubLink) && (
- <a
- href={this.props.githubLink}
- target="_blank"
- style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }}
- >
- Edit on Github
- </a>
- )}
- </div>
- </div>
- <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
- <ReactMarkdown
- source={this.props.markdownContent}
- escapeHtml={false}
- renderers={{
- code: MarkdownCodeBlock,
- link: MarkdownLinkBlock,
- }}
- />
- </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
deleted file mode 100644
index 82a40eb7e..000000000
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import * as _ from 'lodash';
-import MenuItem from 'material-ui/MenuItem';
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
-import { MenuSubsectionsBySection, Styles } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-interface NestedSidebarMenuProps {
- topLevelMenu: { [topLevel: string]: string[] };
- menuSubsectionsBySection: MenuSubsectionsBySection;
- title: string;
- shouldDisplaySectionHeaders?: boolean;
- onMenuItemClick?: () => void;
- selectedVersion?: string;
- versions?: string[];
-}
-
-interface NestedSidebarMenuState {}
-
-const styles: Styles = {
- menuItemWithHeaders: {
- minHeight: 0,
- },
- menuItemWithoutHeaders: {
- minHeight: 48,
- },
- menuItemInnerDivWithHeaders: {
- color: colors.grey800,
- fontSize: 14,
- lineHeight: 2,
- padding: 0,
- },
-};
-
-const titleToIcon: { [title: string]: string } = {
- '0x.js': 'zeroExJs.png',
- '0x Connect': 'connect.png',
- '0x Smart Contracts': 'contracts.png',
- Wiki: 'wiki.png',
-};
-
-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" style={{ color: colors.grey800 }}>
- <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
- {finalSectionName.toUpperCase()}
- </div>
- {this._renderMenuItems(menuItems)}
- </div>
- );
- } else {
- return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
- }
- });
- return (
- <div>
- {this._renderEmblem()}
- {!_.isUndefined(this.props.versions) &&
- !_.isUndefined(this.props.selectedVersion) && (
- <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} />
- )}
- <div className="pl1">{navigation}</div>
- </div>
- );
- }
- private _renderEmblem() {
- return (
- <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
- <div className="flex" style={{ fontSize: 25 }}>
- <div className="robotoMono" style={{ fontWeight: 'bold' }}>
- 0x
- </div>
- <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
- docs
- </div>
- </div>
- <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
- |
- </div>
- <div className="flex">
- <div>
- <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
- </div>
- <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
- {this.props.title}
- </div>
- </div>
- </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: 16,
- 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
deleted file mode 100644
index 52a1f30d9..000000000
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { Element as ScrollElement } from 'react-scroll';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { HeaderSizes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface SectionHeaderProps {
- sectionName: string;
- headerSize?: HeaderSizes;
-}
-
-interface SectionHeaderState {
- 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: 'uppercase',
- color: colors.grey,
- fontFamily: 'Roboto Mono',
- fontWeight: 300,
- fontSize: 27,
- }}
- >
- {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
deleted file mode 100644
index 1b4dbb375..000000000
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as _ from 'lodash';
-import DropDownMenu from 'material-ui/DropDownMenu';
-import MenuItem from 'material-ui/MenuItem';
-import * as React from 'react';
-import { utils } from 'ts/utils/utils';
-
-interface VersionDropDownProps {
- selectedVersion: string;
- versions: 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, semver: string) {
- let path = window.location.pathname;
- const lastChar = path[path.length - 1];
- if (_.isFinite(_.parseInt(lastChar))) {
- const pathSections = path.split('/');
- pathSections.pop();
- path = pathSections.join('/');
- }
- const baseUrl = utils.getCurrentBaseUrl();
- window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
- }
-}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 4bb6052a2..f6cff51e4 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,16 +1,23 @@
+import {
+ colors,
+ constants as sharedConstants,
+ HeaderSizes,
+ MarkdownSection,
+ NestedSidebarMenu,
+ SectionHeader,
+ Styles,
+ utils as sharedUtils,
+} from '@0xproject/react-shared';
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import { scroller } from 'react-scroll';
+import { SidebarHeader } from 'ts/components/sidebar_header';
import { TopBar } from 'ts/components/top_bar/top_bar';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
import { Dispatcher } from 'ts/redux/dispatcher';
-import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { Article, ArticlesBySection, WebsitePaths } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';
@@ -60,6 +67,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
isHoveringSidebar: false,
};
}
+ public componentDidMount() {
+ window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
+ }
public componentWillMount() {
// tslint:disable-next-line:no-floating-promises
this._fetchArticlesBySectionAsync();
@@ -67,6 +77,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
public componentWillUnmount() {
this._isUnmounted = true;
clearTimeout(this._wikiBackoffTimeoutId);
+ window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
}
public render() {
const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
@@ -122,7 +133,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
<NestedSidebarMenu
topLevelMenu={menuSubsectionsBySection}
menuSubsectionsBySection={menuSubsectionsBySection}
- title="Wiki"
+ sidebarHeader={<SidebarHeader title="Wiki" />}
/>
</div>
</div>
@@ -135,11 +146,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
}}
>
<div
- id={configs.SCROLL_CONTAINER_ID}
+ id={sharedConstants.SCROLL_CONTAINER_ID}
style={{ ...mainContainersStyle, overflow: 'auto' }}
className="absolute"
>
- <div id={configs.SCROLL_TOP_ID} />
+ <div id={sharedConstants.SCROLL_TOP_ID} />
<div id="wiki" style={{ paddingRight: 2 }}>
{this._renderWikiArticles()}
</div>
@@ -214,7 +225,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
async () => {
await utils.onPageLoadAsync();
const hash = this.props.location.hash.slice(1);
- utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+ sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
},
);
}
@@ -239,4 +250,8 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
isHoveringSidebar: false,
});
}
+ private _onHashChanged(event: any) {
+ const hash = window.location.hash.slice(1);
+ sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
+ }
}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 28663270e..41fbc6a86 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -156,10 +156,6 @@ export interface TrackedTokensByUserAddress {
[userAddress: string]: TrackedTokensByNetworkId;
}
-export interface Styles {
- [name: string]: React.CSSProperties;
-}
-
export interface ProfileInfo {
name: string;
title?: string;
@@ -229,11 +225,6 @@ export enum AlertTypes {
SUCCESS,
}
-export enum EtherscanLinkSuffixes {
- Address = 'address',
- Tx = 'tx',
-}
-
export enum BlockchainErrs {
AContractNotDeployedOnNetwork = 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
DisconnectedFromEthereumNode = 'DISCONNECTED_FROM_ETHEREUM_NODE',
@@ -247,24 +238,6 @@ export enum BlockchainCallErrs {
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',
-}
-
-export interface EnumValue {
- name: string;
- defaultValue?: string;
-}
-
export enum Environments {
DEVELOPMENT,
PRODUCTION,
@@ -272,170 +245,6 @@ export enum Environments {
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;
-}
-
-export interface TypeDocFlags {
- isStatic?: boolean;
- isOptional?: boolean;
- isPublic?: boolean;
-}
-
-export interface TypeDocGroup {
- 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 | TypeDocNode[]; // TypeDocNode in TypeDoc <V0.9.0, TypeDocNode[] in >V0.9.0
- 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',
- Intersection = 'intersection',
- Unknown = 'unknown',
-}
-
-export interface DocAgnosticFormat {
- [sectionName: string]: DocSection;
-}
-
-export interface DocSection {
- comment: string;
- constructors: Array<TypescriptMethod | SolidityMethod>;
- methods: Array<TypescriptMethod | SolidityMethod>;
- properties: Property[];
- types: CustomType[];
- events?: Event[];
-}
-
-export interface Event {
- name: string;
- eventArgs: EventArg[];
-}
-
-export interface EventArg {
- isIndexed: boolean;
- name: string;
- type: Type;
-}
-
-export interface Property {
- 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;
-}
-
-export interface TypescriptMethod extends BaseMethod {
- source?: Source;
- isStatic?: boolean;
- typeParameter?: TypeParameter;
-}
-
-export interface SolidityMethod extends BaseMethod {
- isConstant?: boolean;
- isPayable?: boolean;
-}
-
-export interface Source {
- fileName: string;
- line: number;
-}
-
-export interface Parameter {
- name: string;
- comment: string;
- isOptional: boolean;
- type: Type;
-}
-
-export interface TypeParameter {
- name: string;
- type: Type;
-}
-
-export interface Type {
- name: string;
- typeDocType: TypeDocTypes;
- value?: string;
- typeArguments?: Type[];
- elementType?: ElementType;
- types?: Type[];
- method?: TypescriptMethod;
-}
-
-export interface ElementType {
- name: string;
- typeDocType: TypeDocTypes;
-}
-
-export interface IndexSignature {
- 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[];
-}
-
-export interface CustomTypeChild {
- name: string;
- type?: Type;
- defaultValue?: string;
-}
-
export interface FAQQuestion {
prompt: string;
answer: React.ReactNode;
@@ -451,10 +260,6 @@ export interface S3FileObject {
};
}
-export interface MenuSubsectionsBySection {
- [section: string]: string[];
-}
-
export enum ProviderType {
Injected = 'INJECTED',
Ledger = 'LEDGER',
@@ -508,10 +313,6 @@ export interface BlogPost {
url: string;
}
-export interface TypeDefinitionByName {
- [typeName: string]: CustomType;
-}
-
export interface Article {
section: string;
title: string;
@@ -535,46 +336,6 @@ export enum TokenVisibility {
TRACKED = 'TRACKED',
}
-export enum HeaderSizes {
- H1 = 'h1',
- H2 = 'h2',
- H3 = 'h3',
-}
-
-export interface DoxityDocObj {
- [contractName: string]: DoxityContractObj;
-}
-
-export interface DoxityContractObj {
- 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;
-}
-
-export interface DoxityOutput {
- name: string;
- type: string;
-}
-
-export interface DoxityInput {
- name: string;
- type: string;
- description: string;
- indexed?: boolean;
-}
-
export interface VersionToFileName {
[version: string]: string;
}
@@ -584,29 +345,6 @@ export enum Docs {
SmartContracts,
}
-export interface ContractAddresses {
- [version: string]: {
- [network: string]: AddressByContractName;
- };
-}
-
-export interface AddressByContractName {
- [contractName: string]: string;
-}
-
-export enum Networks {
- Mainnet = 'Mainnet',
- Kovan = 'Kovan',
- Ropsten = 'Ropsten',
- Rinkeby = 'Rinkeby',
-}
-
-export enum AbiTypes {
- Constructor = 'constructor',
- Function = 'function',
- Event = 'event',
-}
-
export enum WebsitePaths {
Portal = '/portal',
Wiki = '/wiki',
@@ -619,49 +357,12 @@ export enum WebsitePaths {
Connect = '/docs/connect',
}
-export interface DocsMenu {
- [sectionName: string]: string[];
-}
-
-export interface SectionsMap {
- [sectionName: string]: string;
-}
-
export enum DocPackages {
Connect = 'CONNECT',
ZeroExJs = 'ZERO_EX_JS',
SmartContracts = 'SMART_CONTRACTS',
}
-export enum SupportedDocJson {
- Doxity = 'DOXITY',
- TypeDoc = 'TYPEDOC',
-}
-
-export interface ContractsByVersionByNetworkId {
- [version: string]: {
- [networkName: string]: {
- [contractName: string]: string;
- };
- };
-}
-
-export interface DocsInfoConfig {
- id: string;
- type: SupportedDocJson;
- displayName: string;
- packageUrl: string;
- menu: DocsMenu;
- sections: SectionsMap;
- sectionNameToMarkdown: { [sectionName: string]: string };
- visibleConstructors: string[];
- subPackageName?: string;
- publicTypes?: string[];
- sectionNameToModulePath?: { [sectionName: string]: string[] };
- menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string };
- contractsByVersionByNetworkId?: ContractsByVersionByNetworkId;
-}
-
export interface TimestampMsRange {
startTimestampMs: number;
endTimestampMs: number;
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
deleted file mode 100644
index 2eead95c7..000000000
--- a/packages/website/ts/utils/colors.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { colors as materialUiColors } from 'material-ui/styles';
-
-export const colors = {
- ...materialUiColors,
- gray40: '#F8F8F8',
- grey50: '#FAFAFA',
- grey100: '#F5F5F5',
- lightestGrey: '#F0F0F0',
- greyishPink: '#E6E5E5',
- grey300: '#E0E0E0',
- beigeWhite: '#E4E4E4',
- grey350: '#cacaca',
- grey400: '#BDBDBD',
- lightGrey: '#BBBBBB',
- grey500: '#9E9E9E',
- grey: '#A5A5A5',
- darkGrey: '#818181',
- landingLinkGrey: '#919191',
- grey700: '#616161',
- grey750: '#515151',
- grey800: '#424242',
- darkerGrey: '#393939',
- heroGrey: '#404040',
- projectsGrey: '#343333',
- darkestGrey: '#272727',
- dharmaDarkGrey: '#252525',
- lightBlue: '#60A4F4',
- lightBlueA700: '#0091EA',
- linkBlue: '#1D5CDE',
- 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',
- darkYellow: '#caca03',
-};
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 388fc8530..f33b06c0a 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -1,5 +1,5 @@
import * as _ from 'lodash';
-import { ContractAddresses, Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';
+import { Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types';
const BASE_URL = window.location.origin;
const isDevelopment = _.includes(
@@ -94,8 +94,6 @@ export const configs = {
[3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`],
[4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`],
} as PublicNodeUrlsByNetworkId,
- SCROLL_CONTAINER_ID: 'documentation',
- SCROLL_TOP_ID: 'pageScrollTop',
SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3476b7375..71fe08abe 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -1,11 +1,9 @@
+import { Networks } from '@0xproject/react-shared';
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,
@@ -23,18 +21,6 @@ export const constants = {
NETWORK_ID_MAINNET: 1,
NETWORK_ID_KOVAN: 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',
@@ -47,7 +33,6 @@ export const constants = {
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_AMADEUS: 'http://amadeusrelay.org',
PROJECT_URL_DDEX: 'https://ddex.io',
@@ -72,7 +57,6 @@ export const constants = {
PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
PROJECT_URL_IDT: 'https://kinalpha.com',
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',
@@ -87,11 +71,12 @@ export const constants = {
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_WETH_IO: 'https://weth.io/',
+ URL_ZEROEX_CHAT: 'https://chat.0xproject.com',
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',
+ URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
};
diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts
index 1f5f75ee2..0686e3e7f 100644
--- a/packages/website/ts/utils/doc_utils.ts
+++ b/packages/website/ts/utils/doc_utils.ts
@@ -1,6 +1,7 @@
+import { DoxityDocObj, TypeDocNode } from '@0xproject/react-docs';
import findVersions = require('find-versions');
import * as _ from 'lodash';
-import { DoxityDocObj, S3FileObject, TypeDocNode, VersionToFileName } from 'ts/types';
+import { S3FileObject, VersionToFileName } from 'ts/types';
import { utils } from 'ts/utils/utils';
import convert = require('xml-js');
diff --git a/packages/website/ts/utils/doxity_utils.ts b/packages/website/ts/utils/doxity_utils.ts
deleted file mode 100644
index 35ce05672..000000000
--- a/packages/website/ts/utils/doxity_utils.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import * as _ from 'lodash';
-import {
- 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);
- }
-
- const doxityMethods: DoxityAbiDoc[] = _.filter<DoxityAbiDoc>(
- doxityContractObj.abiDocs,
- (abiDoc: DoxityAbiDoc) => {
- return this._isMethod(abiDoc);
- },
- );
- const methods: SolidityMethod[] = _.map<DoxityAbiDoc, SolidityMethod>(
- doxityMethods,
- (doxityMethod: DoxityAbiDoc) => {
- const outputs = !_.isUndefined(doxityMethod.outputs) ? doxityMethod.outputs : [];
- let returnTypeIfExists: Type;
- if (outputs.length === 0) {
- // no-op. It's already undefined
- } else if (outputs.length === 1) {
- const outputsType = outputs[0].type;
- returnTypeIfExists = this._convertType(outputsType);
- } else {
- const outputsType = `[${_.map(outputs, output => output.type).join(', ')}]`;
- returnTypeIfExists = this._convertType(outputsType);
- }
- // 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 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;
- },
-};
diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts
index 32891baca..41bc2844b 100644
--- a/packages/website/ts/utils/mui_theme.ts
+++ b/packages/website/ts/utils/mui_theme.ts
@@ -1,5 +1,5 @@
+import { colors } from '@0xproject/react-shared';
import { getMuiTheme } from 'material-ui/styles';
-import { colors } from 'ts/utils/colors';
export const muiTheme = getMuiTheme({
appBar: {
diff --git a/packages/website/ts/utils/typedoc_utils.ts b/packages/website/ts/utils/typedoc_utils.ts
deleted file mode 100644
index ce7df4dbb..000000000
--- a/packages/website/ts/utils/typedoc_utils.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-import * as _ from 'lodash';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import {
- CustomType,
- CustomTypeChild,
- DocAgnosticFormat,
- DocPackages,
- 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, '_');
- },
- getModuleDefinitionsBySectionName(versionDocObj: TypeDocNode, configModulePaths: string[]): TypeDocNode[] {
- const moduleDefinitions: TypeDocNode[] = [];
- const jsonModules = versionDocObj.children;
- _.each(jsonModules, jsonMod => {
- _.each(configModulePaths, configModulePath => {
- if (_.includes(configModulePath, jsonMod.name)) {
- moduleDefinitions.push(jsonMod);
- }
- });
- });
- return moduleDefinitions;
- },
- 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 packageDefinitions = typeDocUtils.getModuleDefinitionsBySectionName(typeDocJson, modulePathsIfExists);
- let packageDefinitionWithMergedChildren;
- if (_.isEmpty(packageDefinitions)) {
- return; // no-op
- } else if (packageDefinitions.length === 1) {
- packageDefinitionWithMergedChildren = packageDefinitions[0];
- } else {
- // HACK: For now, if there are two modules to display in a single section,
- // we simply concat the children. This works for our limited use-case where
- // we want to display types stored in two files under a single section
- packageDefinitionWithMergedChildren = packageDefinitions[0];
- for (let i = 1; i < packageDefinitions.length; i++) {
- packageDefinitionWithMergedChildren.children = [
- ...packageDefinitionWithMergedChildren.children,
- ...packageDefinitions[i].children,
- ];
- }
- }
-
- // 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 = packageDefinitionWithMergedChildren.children;
- } else {
- entities = packageDefinitionWithMergedChildren.children[0].children;
- const commentObj = packageDefinitionWithMergedChildren.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: [],
- };
-
- let isConstructor;
- _.each(entities, entity => {
- switch (entity.kindString) {
- case KindString.Constructor:
- isConstructor = true;
- const constructor = typeDocUtils._convertMethod(
- entity,
- isConstructor,
- docsInfo.sections,
- sectionName,
- docsInfo.id,
- );
- docSection.constructors.push(constructor);
- break;
-
- case KindString.Method:
- if (entity.flags.isPublic) {
- isConstructor = false;
- const method = typeDocUtils._convertMethod(
- entity,
- isConstructor,
- docsInfo.sections,
- sectionName,
- docsInfo.id,
- );
- docSection.methods.push(method);
- }
- break;
-
- case KindString.Property:
- if (!typeDocUtils.isPrivateOrProtectedProperty(entity.name)) {
- const property = typeDocUtils._convertProperty(
- entity,
- docsInfo.sections,
- sectionName,
- docsInfo.id,
- );
- 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.id,
- );
- docSection.types.push(customType);
- }
- break;
-
- default:
- throw utils.spawnSwitchErr('kindString', entity.kindString);
- }
- });
- return docSection;
- },
- _convertCustomType(entity: TypeDocNode, sections: SectionsMap, sectionName: string, docId: string): CustomType {
- const typeIfExists = !_.isUndefined(entity.type)
- ? typeDocUtils._convertType(entity.type, sections, sectionName, docId)
- : undefined;
- const isConstructor = false;
- const methodIfExists = !_.isUndefined(entity.declaration)
- ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, docId)
- : undefined;
- const doesIndexSignatureExist = !_.isUndefined(entity.indexSignature);
- const isIndexSignatureArray = _.isArray(entity.indexSignature);
- // HACK: TypeDoc Versions <0.9.0 indexSignature is of type TypeDocNode[]
- // Versions >0.9.0 have it as type TypeDocNode
- const indexSignature =
- doesIndexSignatureExist && isIndexSignatureArray
- ? (entity.indexSignature as TypeDocNode[])[0]
- : (entity.indexSignature as TypeDocNode);
- const indexSignatureIfExists = doesIndexSignatureExist
- ? typeDocUtils._convertIndexSignature(indexSignature, sections, sectionName, docId)
- : 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, docId)
- : 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,
- docId: string,
- ): IndexSignature {
- const key = entity.parameters[0];
- const indexSignature = {
- keyName: key.name,
- keyType: typeDocUtils._convertType(key.type, sections, sectionName, docId),
- valueName: entity.type.name,
- };
- return indexSignature;
- },
- _convertProperty(entity: TypeDocNode, sections: SectionsMap, sectionName: string, docId: 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, docId),
- source: {
- fileName: source.fileName,
- line: source.line,
- },
- comment: commentIfExists,
- };
- return property;
- },
- _convertMethod(
- entity: TypeDocNode,
- isConstructor: boolean,
- sections: SectionsMap,
- sectionName: string,
- docId: 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 (docId === DocPackages.ZeroExJs) {
- 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, docId);
- });
- const returnType = typeDocUtils._convertType(signature.type, sections, sectionName, docId);
- const typeParameter = _.isUndefined(signature.typeParameter)
- ? undefined
- : typeDocUtils._convertTypeParameter(signature.typeParameter[0], sections, sectionName, docId);
-
- 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,
- docId: string,
- ): TypeParameter {
- const type = typeDocUtils._convertType(entity.type, sections, sectionName, docId);
- const parameter = {
- name: entity.name,
- type,
- };
- return parameter;
- },
- _convertParameter(entity: TypeDocNode, sections: SectionsMap, sectionName: string, docId: 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 type = typeDocUtils._convertType(entity.type, sections, sectionName, docId);
-
- const parameter = {
- name: entity.name,
- comment,
- isOptional,
- type,
- };
- return parameter;
- },
- _convertType(entity: TypeDocType, sections: SectionsMap, sectionName: string, docId: string): Type {
- const typeArguments = _.map(entity.typeArguments, typeArgument => {
- return typeDocUtils._convertType(typeArgument, sections, sectionName, docId);
- });
- const types = _.map(entity.types, t => {
- return typeDocUtils._convertType(t, sections, sectionName, docId);
- });
-
- const isConstructor = false;
- const methodIfExists = !_.isUndefined(entity.declaration)
- ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, docId)
- : 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;
- },
-};
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index a1e045af7..308b4bb5c 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -1,20 +1,10 @@
import { ECSignature, ExchangeContractErrs, ZeroEx, ZeroExError } from '0x.js';
+import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared';
import { BigNumber } from '@0xproject/utils';
import deepEqual = require('deep-equal');
-import isMobile = require('is-mobile');
import * as _ from 'lodash';
import * as moment from 'moment';
-import { scroller } from 'react-scroll';
-import {
- EtherscanLinkSuffixes,
- Networks,
- Order,
- ScreenWidths,
- Side,
- SideToAssetToken,
- Token,
- TokenByAddress,
-} from 'ts/types';
+import { Order, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
import { configs } from 'ts/utils/configs';
import { constants } from 'ts/utils/constants';
import * as u2f from 'ts/vendor/u2f_api';
@@ -140,21 +130,6 @@ export const utils = {
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) => {
@@ -202,10 +177,6 @@ export const utils = {
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;
@@ -283,32 +254,14 @@ export const utils = {
isTestNetwork(networkId: number): boolean {
const isTestNetwork = _.includes(
[
- constants.NETWORK_ID_BY_NAME[Networks.Kovan],
- constants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
- constants.NETWORK_ID_BY_NAME[Networks.Ropsten],
+ sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan],
+ sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby],
+ sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten],
],
networkId,
);
return isTestNetwork;
},
- getCurrentBaseUrl() {
- const port = window.location.port;
- const hasPort = !_.isUndefined(port);
- const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
- return baseUrl;
- },
- scrollToHash(hash: string, containerId: string): void {
- let finalHash = hash;
- if (_.isEmpty(hash)) {
- finalHash = configs.SCROLL_TOP_ID; // scroll to the top
- }
-
- scroller.scrollTo(finalHash, {
- duration: 0,
- offset: 0,
- containerId,
- });
- },
async onPageLoadAsync(): Promise<void> {
if (document.readyState === 'complete') {
return; // Already loaded
@@ -317,4 +270,10 @@ export const utils = {
window.onload = () => resolve();
});
},
+ getCurrentBaseUrl() {
+ const port = window.location.port;
+ const hasPort = !_.isUndefined(port);
+ const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+ return baseUrl;
+ },
};