diff options
Diffstat (limited to 'packages/website/ts')
60 files changed, 75 insertions, 594 deletions
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 278e2bbf5..7353a8767 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 } 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 { 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..5836fec0e 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 } 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'; 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/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index c2cdf6751..698b30815 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 } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; @@ -17,7 +18,6 @@ import { TokenByAddress, TokenState, } 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'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 51e44134c..d7eecbcd3 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 } 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'; 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..e14991993 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 } 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'; 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/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/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/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index e321b247b..9065ba2d8 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -1,5 +1,5 @@ import { ZeroEx } from '0x.js'; -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import DharmaLoanFrame from 'dharma-loan-frame'; import * as _ from 'lodash'; @@ -34,7 +34,6 @@ import { 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'; 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..6373d4900 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 } 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 { diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index df6110de3..58b699b77 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +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'; @@ -13,10 +13,8 @@ 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, WebsitePaths } from 'ts/types'; -import { colors } from 'ts/utils/colors'; +import { Deco, DocsMenu, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; 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..3bab29691 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 } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; @@ -8,7 +9,6 @@ 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'; 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/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/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 3b17bd0fa..e7fc51070 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,8 +1,8 @@ +import { colors } 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 { 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..e120523fd 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,10 +1,10 @@ +import { colors } 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; 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/globals.d.ts b/packages/website/ts/globals.d.ts index 19237db14..d43ab0f58 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'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 65dcdfa7b..7f1e0bf80 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo } 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/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index 6d9d10272..4361da103 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,8 +1,7 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; -import { colors } from 'ts/utils/colors'; 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 index 5f177e97e..b8902679a 100644 --- a/packages/website/ts/pages/documentation/comment.tsx +++ b/packages/website/ts/pages/documentation/comment.tsx @@ -1,7 +1,7 @@ +import { MarkdownCodeBlock } from '@0xproject/react-shared'; 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; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 2c8f1c103..b3b58c0c8 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,3 +1,4 @@ +import { MenuSubsectionsBySection } from '@0xproject/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import * as React from 'react'; @@ -7,7 +8,7 @@ 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 { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments } from 'ts/types'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts index 31e151fe8..09fb7a2bc 100644 --- a/packages/website/ts/pages/documentation/docs_info.ts +++ b/packages/website/ts/pages/documentation/docs_info.ts @@ -1,3 +1,4 @@ +import { MenuSubsectionsBySection } from '@0xproject/react-shared'; import compareVersions = require('compare-versions'); import * as _ from 'lodash'; import { @@ -6,7 +7,6 @@ import { DocsInfoConfig, DocsMenu, DoxityDocObj, - MenuSubsectionsBySection, SectionsMap, SupportedDocJson, TypeDocNode, diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 88331d1a7..3229bbd93 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -1,4 +1,13 @@ -import { Styles } from '@0xproject/react-shared'; +import { + colors, + constants as sharedConstants, + MarkdownSection, + MenuSubsectionsBySection, + NestedSidebarMenu, + SectionHeader, + Styles, + utils as sharedUtils, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; @@ -11,16 +20,12 @@ 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, @@ -28,8 +33,6 @@ import { TypeDefinitionByName, TypescriptMethod, } from 'ts/types'; -import { colors } from 'ts/utils/colors'; -import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -77,7 +80,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta 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); + sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); } } public render() { @@ -117,11 +120,11 @@ export class Documentation extends React.Component<DocumentationProps, Documenta style={{ backgroundColor: colors.white }} > <div - id={configs.SCROLL_CONTAINER_ID} + id={sharedConstants.SCROLL_CONTAINER_ID} style={styles.mainContainers} className="absolute px1" > - <div id={configs.SCROLL_TOP_ID} /> + <div id={sharedConstants.SCROLL_TOP_ID} /> {this._renderDocumentation()} </div> </div> diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index aead27d78..06d8a3d79 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,10 +1,9 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; 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 { Event, EventArg } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface EventDefinitionProps { event: Event; diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index a1f0b38ab..a52ab55c3 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -1,4 +1,4 @@ -import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared'; +import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Comment } from 'ts/pages/documentation/comment'; @@ -6,7 +6,6 @@ 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 { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { typeDocUtils } from 'ts/utils/typedoc_utils'; interface MethodBlockProps { diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx index 31f80aba3..d39ad14c4 100644 --- a/packages/website/ts/pages/documentation/source_link.tsx +++ b/packages/website/ts/pages/documentation/source_link.tsx @@ -1,7 +1,7 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Source } from 'ts/types'; -import { colors } from 'ts/utils/colors'; interface SourceLinkProps { source: Source; diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index 2fec4c95f..2c90a0567 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; @@ -6,7 +6,6 @@ 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'; diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index dd83d120d..60f307c68 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -1,4 +1,4 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; +import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Comment } from 'ts/pages/documentation/comment'; @@ -9,7 +9,6 @@ import { Interface } from 'ts/pages/documentation/interface'; import { MethodSignature } from 'ts/pages/documentation/method_signature'; import { Type } from 'ts/pages/documentation/type'; import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types'; -import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface TypeDefinitionProps { diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index 70d116622..1be3c3565 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; @@ -7,7 +7,6 @@ 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, 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/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/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 b1f68c915..000000000 --- a/packages/website/ts/pages/shared/markdown_link_block.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { utils as sharedUtils } from '@0xproject/react-shared'; -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); - sharedUtils.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 d03b30f4b..000000000 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; -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 { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; -import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block'; -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 abbd34c98..000000000 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared'; -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 } from 'ts/types'; -import { colors } from 'ts/utils/colors'; -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); - sharedUtils.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 3f661a1e5..000000000 --- a/packages/website/ts/pages/shared/section_header.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared'; -import * as React from 'react'; -import { Element as ScrollElement } from 'react-scroll'; -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 b22ce5826..f338ed9c2 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,4 +1,13 @@ -import { HeaderSizes, Styles } from '@0xproject/react-shared'; +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'; @@ -6,12 +15,8 @@ import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { scroller } from 'react-scroll'; 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, 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'; @@ -136,11 +141,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> @@ -215,7 +220,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); }, ); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index c1b23ce1e..3b0866d70 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -447,10 +447,6 @@ export interface S3FileObject { }; } -export interface MenuSubsectionsBySection { - [section: string]: string[]; -} - export enum ProviderType { Injected = 'INJECTED', Ledger = 'LEDGER', 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..7e9ba69de 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -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/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/utils.ts b/packages/website/ts/utils/utils.ts index a1e11c85a..872b44eeb 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -4,7 +4,6 @@ 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, @@ -199,10 +198,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; @@ -288,24 +283,6 @@ export const utils = { ); 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 |