aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/package.json1
-rw-r--r--packages/website/ts/blockchain.ts98
-rw-r--r--packages/website/ts/components/dialogs/blockchain_err_dialog.tsx34
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx31
-rw-r--r--packages/website/ts/components/dialogs/ledger_config_dialog.tsx9
-rw-r--r--packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx6
-rw-r--r--packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx4
-rw-r--r--packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx38
-rw-r--r--packages/website/ts/components/eth_weth_conversion_button.tsx10
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx125
-rw-r--r--packages/website/ts/components/fill_order.tsx45
-rw-r--r--packages/website/ts/components/fill_order_json.tsx7
-rw-r--r--packages/website/ts/components/fill_warning_dialog.tsx2
-rw-r--r--packages/website/ts/components/flash_messages/token_send_completed.tsx3
-rw-r--r--packages/website/ts/components/flash_messages/transaction_submitted.tsx3
-rw-r--r--packages/website/ts/components/footer.tsx30
-rw-r--r--packages/website/ts/components/generate_order/asset_picker.tsx4
-rw-r--r--packages/website/ts/components/generate_order/generate_order_form.tsx30
-rw-r--r--packages/website/ts/components/generate_order/new_token_form.tsx8
-rw-r--r--packages/website/ts/components/inputs/address_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/balance_bounded_input.tsx6
-rw-r--r--packages/website/ts/components/inputs/eth_amount_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/token_amount_input.tsx4
-rw-r--r--packages/website/ts/components/inputs/token_input.tsx6
-rw-r--r--packages/website/ts/components/order_json.tsx7
-rw-r--r--packages/website/ts/components/portal.tsx69
-rw-r--r--packages/website/ts/components/send_button.tsx4
-rw-r--r--packages/website/ts/components/token_balances.tsx49
-rw-r--r--packages/website/ts/components/top_bar.tsx30
-rw-r--r--packages/website/ts/components/top_bar_menu_item.tsx8
-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.tsx8
-rw-r--r--packages/website/ts/components/ui/copy_icon.tsx2
-rw-r--r--packages/website/ts/components/ui/drop_down_menu_item.tsx4
-rw-r--r--packages/website/ts/components/ui/ethereum_address.tsx2
-rw-r--r--packages/website/ts/components/ui/etherscan_icon.tsx4
-rw-r--r--packages/website/ts/components/ui/input_label.tsx4
-rw-r--r--packages/website/ts/components/ui/labeled_switcher.tsx73
-rw-r--r--packages/website/ts/components/ui/lifecycle_raised_button.tsx5
-rw-r--r--packages/website/ts/components/ui/party.tsx7
-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/portal.tsx6
-rw-r--r--packages/website/ts/containers/smart_contracts_documentation.tsx35
-rw-r--r--packages/website/ts/index.tsx49
-rw-r--r--packages/website/ts/local_storage/tracked_token_storage.ts4
-rw-r--r--packages/website/ts/local_storage/trade_history_storage.tsx4
-rw-r--r--packages/website/ts/pages/about/about.tsx28
-rw-r--r--packages/website/ts/pages/about/profile.tsx3
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx18
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx5
-rw-r--r--packages/website/ts/pages/documentation/method_block.tsx6
-rw-r--r--packages/website/ts/pages/documentation/source_link.tsx4
-rw-r--r--packages/website/ts/pages/documentation/type.tsx19
-rw-r--r--packages/website/ts/pages/documentation/type_definition.tsx11
-rw-r--r--packages/website/ts/pages/faq/faq.tsx6
-rw-r--r--packages/website/ts/pages/faq/question.tsx3
-rw-r--r--packages/website/ts/pages/landing/landing.tsx119
-rw-r--r--packages/website/ts/pages/not_found.tsx2
-rw-r--r--packages/website/ts/pages/shared/nested_sidebar_menu.tsx4
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx8
-rw-r--r--packages/website/ts/redux/dispatcher.ts73
-rw-r--r--packages/website/ts/redux/reducer.ts294
-rw-r--r--packages/website/ts/types.ts195
-rw-r--r--packages/website/ts/utils/colors.ts43
-rw-r--r--packages/website/ts/utils/configs.ts113
-rw-r--r--packages/website/ts/utils/constants.ts225
-rw-r--r--packages/website/ts/utils/error_reporter.ts2
-rw-r--r--packages/website/ts/utils/mui_theme.ts35
-rw-r--r--packages/website/ts/utils/typedoc_utils.ts4
-rw-r--r--packages/website/ts/utils/utils.ts23
73 files changed, 1113 insertions, 1030 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index a6703af7e..235ff236e 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -20,6 +20,7 @@
"dependencies": {
"0x.js": "~0.27.2",
"@0xproject/subproviders": "^0.1.0",
+ "@0xproject/utils": "^0.1.0",
"accounting": "^0.4.1",
"basscss": "^8.0.3",
"bignumber.js": "~4.1.0",
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 2a4aabeb2..481917934 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -77,21 +77,21 @@ export class Blockchain {
}
private static getNameGivenProvider(provider: Web3.Provider): string {
if (!_.isUndefined((provider as any).isMetaMask)) {
- return constants.METAMASK_PROVIDER_NAME;
+ return constants.PROVIDER_NAME_METAMASK;
}
// HACK: We use the fact that Parity Signer's provider is an instance of their
// internal `Web3FrameProvider` class.
const isParitySigner = _.startsWith(provider.constructor.toString(), 'function Web3FrameProvider');
if (isParitySigner) {
- return constants.PARITY_SIGNER_PROVIDER_NAME;
+ return constants.PROVIDER_NAME_PARITY_SIGNER;
}
- return constants.GENERIC_PROVIDER_NAME;
+ return constants.PROVIDER_NAME_GENERIC;
}
private static async getProviderAsync(injectedWeb3: Web3, networkIdIfExists: number) {
const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
- const publicNodeUrlsIfExistsForNetworkId = constants.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists];
+ const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists];
const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId);
let provider;
@@ -114,11 +114,11 @@ export class Blockchain {
// injected into their browser.
provider = new ProviderEngine();
provider.addProvider(new FilterSubprovider());
- const networkId = configs.isMainnetEnabled ?
- constants.MAINNET_NETWORK_ID :
- constants.TESTNET_NETWORK_ID;
+ const networkId = configs.IS_MAINNET_ENABLED ?
+ constants.NETWORK_ID_MAINNET :
+ constants.NETWORK_ID_TESTNET;
provider.addProvider(new RedundantRPCSubprovider(
- constants.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
+ configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
));
provider.start();
}
@@ -135,11 +135,11 @@ export class Blockchain {
const isConnected = !_.isUndefined(newNetworkId);
if (!isConnected) {
this.networkId = newNetworkId;
- this.dispatcher.encounteredBlockchainError(BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE);
+ this.dispatcher.encounteredBlockchainError(BlockchainErrs.DisconnectedFromEthereumNode);
this.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
} else if (this.networkId !== newNetworkId) {
this.networkId = newNetworkId;
- this.dispatcher.encounteredBlockchainError('');
+ this.dispatcher.encounteredBlockchainError(BlockchainErrs.NoError);
await this.fetchTokenInformationAsync();
await this.rehydrateStoreWithContractEvents();
}
@@ -158,6 +158,14 @@ export class Blockchain {
}
public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
+ // HACK: temporarily whitelist the new WETH token address `as if` they were
+ // already in the tokenRegistry.
+ // TODO: Remove this hack once we've updated the TokenRegistries
+ // Airtable task: https://airtable.com/tblFe0Q9JuKJPYbTn/viwsOG2Y97qdIeCIO/recv3VGmIorFzHBVz
+ if (configs.SHOULD_DEPRECATE_OLD_WETH_TOKEN &&
+ tokenAddress === configs.NEW_WRAPPED_ETHERS[this.networkId]) {
+ return true;
+ }
const tokenIfExists = await this.zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress);
return !_.isUndefined(tokenIfExists);
}
@@ -186,7 +194,7 @@ export class Blockchain {
// later on in the logic.
let provider;
switch (providerType) {
- case ProviderType.LEDGER: {
+ case ProviderType.Ledger: {
const isU2FSupported = await utils.isU2FSupportedAsync();
if (!isU2FSupported) {
throw new Error('Cannot update providerType to LEDGER without U2F support');
@@ -205,11 +213,11 @@ export class Blockchain {
this.ledgerSubprovider = new LedgerSubprovider(ledgerWalletConfigs);
provider.addProvider(this.ledgerSubprovider);
provider.addProvider(new FilterSubprovider());
- const networkId = configs.isMainnetEnabled ?
- constants.MAINNET_NETWORK_ID :
- constants.TESTNET_NETWORK_ID;
+ const networkId = configs.IS_MAINNET_ENABLED ?
+ constants.NETWORK_ID_MAINNET :
+ constants.NETWORK_ID_TESTNET;
provider.addProvider(new RedundantRPCSubprovider(
- constants.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
+ configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkId],
));
provider.start();
this.web3Wrapper.destroy();
@@ -220,7 +228,7 @@ export class Blockchain {
break;
}
- case ProviderType.INJECTED: {
+ case ProviderType.Injected: {
if (_.isUndefined(this.cachedProvider)) {
return; // Going from injected to injected, so we noop
}
@@ -241,8 +249,8 @@ export class Blockchain {
await this.fetchTokenInformationAsync();
}
public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> {
- utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TOKEN_ADDRESS_IS_INVALID);
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.isValidAddress(token.address), BlockchainCallErrs.TokenAddressIsInvalid);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
const txHash = await this.zeroEx.token.setProxyAllowanceAsync(
@@ -258,7 +266,7 @@ export class Blockchain {
token.address, this.userAddress, toAddress, amountInBaseUnits,
);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
- const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.tx);
+ const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
this.dispatcher.showFlashMessage(React.createElement(TokenSendCompleted, {
etherScanLinkIfExists,
token,
@@ -294,7 +302,7 @@ export class Blockchain {
}
public async fillOrderAsync(signedOrder: SignedOrder,
fillTakerTokenAmount: BigNumber): Promise<BigNumber> {
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const shouldThrowOnInsufficientBalanceOrAllowance = true;
@@ -346,7 +354,7 @@ export class Blockchain {
return this.web3Wrapper.isAddress(lowercaseAddress);
}
public async pollTokenBalanceAsync(token: Token) {
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const [currBalance] = await this.getTokenBalanceAndAllowanceAsync(this.userAddress, token.address);
@@ -375,7 +383,7 @@ export class Blockchain {
return signatureData;
}
public async mintTestTokensAsync(token: Token) {
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const mintableContract = await this.instantiateContractIfExistsAsync(MintableArtifacts, token.address);
await mintableContract.mint(constants.MINT_AMOUNT, {
@@ -390,14 +398,14 @@ export class Blockchain {
}
public async convertEthToWrappedEthTokensAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const txHash = await this.zeroEx.etherToken.depositAsync(etherTokenAddress, amount, this.userAddress);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
}
public async convertWrappedEthTokensToEthAsync(etherTokenAddress: string, amount: BigNumber): Promise<void> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
const txHash = await this.zeroEx.etherToken.withdrawAsync(etherTokenAddress, amount, this.userAddress);
await this.showEtherScanLinkAndAwaitTransactionMinedAsync(txHash);
@@ -463,7 +471,7 @@ export class Blockchain {
}
private async showEtherScanLinkAndAwaitTransactionMinedAsync(
txHash: string): Promise<TransactionReceiptWithDecodedLogs> {
- const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.tx);
+ const etherScanLinkIfExists = utils.getEtherScanLinkIfExists(txHash, this.networkId, EtherscanLinkSuffixes.Tx);
this.dispatcher.showFlashMessage(React.createElement(TransactionSubmitted, {
etherScanLinkIfExists,
}));
@@ -491,7 +499,7 @@ export class Blockchain {
}
private async startListeningForExchangeLogFillEventsAsync(indexFilterValues: IndexedFilterValues): Promise<void> {
utils.assert(!_.isUndefined(this.zeroEx), 'ZeroEx must be instantiated.');
- utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES);
+ utils.assert(this.doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses);
// Fetch historical logs
await this.fetchHistoricalExchangeLogFillEventsAsync(indexFilterValues);
@@ -591,19 +599,19 @@ export class Blockchain {
_.each(tokenRegistryTokens, (t: ZeroExToken, i: number) => {
// HACK: For now we have a hard-coded list of iconUrls for the dummyTokens
// TODO: Refactor this out and pull the iconUrl directly from the TokenRegistry
- const iconUrl = constants.iconUrlBySymbol[t.symbol];
+ const iconUrl = configs.ICON_URL_BY_SYMBOL[t.symbol];
// HACK: Temporarily we hijack the WETH addresses fetched from the tokenRegistry
// so that we can take our time with actually updating it. This ensures that when
// we deploy the new WETH page, everyone will re-fill their trackedTokens with the
// new canonical WETH.
// TODO: Remove this hack once we've updated the TokenRegistries
+ // Airtable task: https://airtable.com/tblFe0Q9JuKJPYbTn/viwsOG2Y97qdIeCIO/recv3VGmIorFzHBVz
let address = t.address;
- if (t.symbol === 'WETH') {
- if (this.networkId === 1) {
- address = '0xe495bcacaf29a0eb00fb67b86e9cd2a994dd55d8';
- } else if (this.networkId === 42) {
- address = '0x739e78d6bebbdf24105a5145fa04436589d1cbd9';
- }
+ if (configs.SHOULD_DEPRECATE_OLD_WETH_TOKEN && t.symbol === 'WETH') {
+ const newEtherTokenAddressIfExists = configs.NEW_WRAPPED_ETHERS[this.networkId];
+ if (!_.isUndefined(newEtherTokenAddressIfExists)) {
+ address = newEtherTokenAddressIfExists;
+ }
}
const token: Token = {
iconUrl,
@@ -639,9 +647,9 @@ export class Blockchain {
const provider = await Blockchain.getProviderAsync(injectedWeb3, networkIdIfExists);
const networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists :
- configs.isMainnetEnabled ?
- constants.MAINNET_NETWORK_ID :
- constants.TESTNET_NETWORK_ID;
+ configs.IS_MAINNET_ENABLED ?
+ constants.NETWORK_ID_MAINNET :
+ constants.NETWORK_ID_TESTNET;
const zeroExConfigs = {
networkId,
};
@@ -661,7 +669,7 @@ export class Blockchain {
const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
const providerName = doesInjectedWeb3Exist ?
Blockchain.getNameGivenProvider(injectedWeb3.currentProvider) :
- constants.PUBLIC_PROVIDER_NAME;
+ constants.PROVIDER_NAME_PUBLIC;
this.dispatcher.updateInjectedProviderName(providerName);
}
private async fetchTokenInformationAsync() {
@@ -686,7 +694,7 @@ export class Blockchain {
let trackedTokensIfExists = trackedTokenStorage.getTrackedTokensIfExists(this.userAddress, this.networkId);
const tokenRegistryTokens = _.values(tokenRegistryTokensByAddress);
if (_.isUndefined(trackedTokensIfExists)) {
- trackedTokensIfExists = _.map(configs.defaultTrackedTokenSymbols, symbol => {
+ trackedTokensIfExists = _.map(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, symbol => {
const token = _.find(tokenRegistryTokens, t => t.symbol === symbol);
token.isTracked = true;
return token;
@@ -709,11 +717,11 @@ export class Blockchain {
await this.updateTokenBalancesAndAllowancesAsync(trackedTokensIfExists);
const mostPopularTradingPairTokens: Token[] = [
- _.find(allTokens, {symbol: configs.defaultTrackedTokenSymbols[0]}),
- _.find(allTokens, {symbol: configs.defaultTrackedTokenSymbols[1]}),
+ _.find(allTokens, {symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[0]}),
+ _.find(allTokens, {symbol: configs.DEFAULT_TRACKED_TOKEN_SYMBOLS[1]}),
];
- this.dispatcher.updateChosenAssetTokenAddress(Side.deposit, mostPopularTradingPairTokens[0].address);
- this.dispatcher.updateChosenAssetTokenAddress(Side.receive, mostPopularTradingPairTokens[1].address);
+ this.dispatcher.updateChosenAssetTokenAddress(Side.Deposit, mostPopularTradingPairTokens[0].address);
+ this.dispatcher.updateChosenAssetTokenAddress(Side.Receive, mostPopularTradingPairTokens[1].address);
this.dispatcher.updateBlockchainIsLoaded(true);
}
private async instantiateContractIfExistsAsync(artifact: any, address?: string): Promise<ContractInstance> {
@@ -733,7 +741,7 @@ export class Blockchain {
const doesContractExist = await this.doesContractExistAtAddressAsync(contractAddress);
if (!doesContractExist) {
utils.consoleLog(`Contract does not exist: ${artifact.contract_name} at ${contractAddress}`);
- throw new Error(BlockchainCallErrs.CONTRACT_DOES_NOT_EXIST);
+ throw new Error(BlockchainCallErrs.ContractDoesNotExist);
}
}
@@ -746,10 +754,10 @@ export class Blockchain {
const errMsg = `${err}`;
utils.consoleLog(`Notice: Error encountered: ${err} ${err.stack}`);
if (_.includes(errMsg, 'not been deployed to detected network')) {
- throw new Error(BlockchainCallErrs.CONTRACT_DOES_NOT_EXIST);
+ throw new Error(BlockchainCallErrs.ContractDoesNotExist);
} else {
await errorReporter.reportAsync(err);
- throw new Error(BlockchainCallErrs.UNHANDLED_ERROR);
+ throw new Error(BlockchainCallErrs.UnhandledError);
}
}
}
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 963bd4388..9a5cd90d7 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 * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Blockchain} from 'ts/blockchain';
import {BlockchainErrs} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
@@ -46,22 +46,22 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
);
}
private getTitle(hasWalletAddress: boolean) {
- if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) {
+ if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
return '0x smart contracts not found';
} else if (!hasWalletAddress) {
return 'Enable wallet communication';
- } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) {
+ } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
return 'Disconnected from Ethereum network';
} else {
return 'Unexpected error';
}
}
private renderExplanation(hasWalletAddress: boolean) {
- if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) {
+ if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
return this.renderContractsNotDeployedExplanation();
} else if (!hasWalletAddress) {
return this.renderNoWalletFoundExplanation();
- } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) {
+ } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
return this.renderDisconnectedFromNode();
} else {
return this.renderUnexpectedErrorExplanation();
@@ -71,9 +71,9 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
return (
<div>
You were disconnected from the backing Ethereum node.
- {' '}If using <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+ {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
- </a> or <a href={constants.MIST_DOWNLOAD_URL} target="_blank">Mist</a> try refreshing
+ </a> or <a href={constants.URL_MIST_DOWNLOAD} target="_blank">Mist</a> try refreshing
{' '}the page. If using a locally hosted Ethereum node, make sure it's still running.
</div>
);
@@ -97,7 +97,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
<h4>1. Metamask chrome extension</h4>
<div>
You can install the{' '}
- <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+ <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
</a> Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
<div className="pt1">
@@ -107,11 +107,11 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
</div>
<h4>Parity Signer</h4>
<div>
- The <a href={constants.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer
+ The <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
Chrome extension</a>{' '}lets you connect to a locally running Parity node.
Make sure you have started your local Parity node with{' '}
- {configs.isMainnetEnabled && '`parity ui` or'} `parity --chain kovan ui`{' '}
- in order to connect to {configs.isMainnetEnabled ? 'mainnet or Kovan respectively.' : 'Kovan.'}
+ {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui`{' '}
+ in order to connect to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
</div>
<div className="pt2">
<span className="bold">Note:</span>
@@ -130,24 +130,24 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
{' '}currently connected to (network Id: {this.props.networkId}).
{' '}In order to use the 0x portal dApp,
{' '}please connect to the
- {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.TESTNET_NETWORK_ID})
- {configs.isMainnetEnabled ?
- ` or ${constants.MAINNET_NAME} (network Id: ${constants.MAINNET_NETWORK_ID}).` :
+ {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
+ {configs.IS_MAINNET_ENABLED ?
+ ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` :
`.`
}
</div>
<h4>Metamask</h4>
<div>
If you are using{' '}
- <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+ <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
Metamask
</a>, you can switch networks in the top left corner of the extension popover.
</div>
<h4>Parity Signer</h4>
<div>
- If using the <a href={constants.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer
+ If using the <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
Chrome extension</a>, make sure to start your local Parity node with{' '}
- {configs.isMainnetEnabled ?
+ {configs.IS_MAINNET_ENABLED ?
'`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
or Kovan respectively.' :
'`parity --chain kovan ui` in order to connect to Kovan.'
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 c8bdced9b..700255163 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -5,8 +5,7 @@ import * as React from 'react';
import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
import {Side, Token, TokenState} from 'ts/types';
-
-const DARK_BLUE = '#4D5481';
+import {colors} from 'ts/utils/colors';
interface EthWethConversionDialogProps {
direction: Side;
@@ -47,7 +46,7 @@ export class EthWethConversionDialog extends
onTouchTap={this.onConvertClick.bind(this)}
/>,
];
- const title = this.props.direction === Side.deposit ? 'Wrap ETH' : 'Unwrap WETH';
+ const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
return (
<Dialog
title={title}
@@ -61,10 +60,10 @@ export class EthWethConversionDialog extends
);
}
private renderConversionDialogBody() {
- const explanation = this.props.direction === Side.deposit ?
+ const explanation = this.props.direction === Side.Deposit ?
'Convert your Ether into a tokenized, tradable form.' :
'Convert your Wrapped Ether back into it\'s native form.';
- const isWrappedVersion = this.props.direction === Side.receive;
+ const isWrappedVersion = this.props.direction === Side.Receive;
return (
<div>
<div className="pb2">
@@ -75,7 +74,7 @@ export class EthWethConversionDialog extends
{this.renderCurrency(isWrappedVersion)}
<div style={{paddingTop: 68}}>
<i
- style={{fontSize: 28, color: DARK_BLUE}}
+ style={{fontSize: 28, color: colors.darkBlue}}
className="zmdi zmdi-arrow-right"
/>
</div>
@@ -85,7 +84,7 @@ export class EthWethConversionDialog extends
className="pt2 mx-auto"
style={{width: 245}}
>
- {this.props.direction === Side.receive ?
+ {this.props.direction === Side.Receive ?
<TokenAmountInput
token={this.props.token}
tokenState={this.props.tokenState}
@@ -109,7 +108,16 @@ export class EthWethConversionDialog extends
className="pt1"
style={{fontSize: 12}}
>
- 1 ETH = 1 WETH
+ <div className="left">1 ETH = 1 WETH</div>
+ {this.props.direction === Side.Receive &&
+ <div
+ className="right"
+ onClick={this.onMaxClick.bind(this)}
+ style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}}
+ >
+ Max
+ </div>
+ }
</div>
</div>
</div>
@@ -124,7 +132,7 @@ export class EthWethConversionDialog extends
<div className="mx-auto pt2">
<div
className="center"
- style={{color: DARK_BLUE}}
+ style={{color: colors.darkBlue}}
>
{name}
</div>
@@ -137,6 +145,11 @@ export class EthWethConversionDialog extends
</div>
);
}
+ private onMaxClick() {
+ this.setState({
+ value: this.props.tokenState.balance,
+ });
+ }
private onValueChange(isValid: boolean, amount?: BigNumber) {
this.setState({
value: amount,
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index d3c95a011..ddd1f2cf2 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -2,7 +2,6 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
import {
Table,
TableBody,
@@ -17,6 +16,8 @@ import ReactTooltip = require('react-tooltip');
import {Blockchain} from 'ts/blockchain';
import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
import {Dispatcher} from 'ts/redux/dispatcher';
+import {colors} from 'ts/utils/colors';
+import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
@@ -52,7 +53,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
stepIndex: LedgerSteps.CONNECT,
userAddresses: [],
addressBalances: [],
- derivationPath: constants.DEFAULT_DERIVATION_PATH,
+ derivationPath: configs.DEFAULT_DERIVATION_PATH,
derivationErrMsg: '',
};
}
@@ -146,7 +147,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
<div className="overflow-hidden" style={{width: 180}}>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey500}}
+ floatingLabelStyle={{color: colors.grey}}
floatingLabelText="Update path derivation (advanced)"
value={this.state.derivationPath}
errorText={this.state.derivationErrMsg}
@@ -170,7 +171,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.networkNameById[this.props.networkId];
+ const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
// We specifically prefix kovan ETH.
// TODO: We should probably add prefixes for all networks
const isKovanNetwork = networkName === 'Kovan';
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index bfff7fbb5..ffe55794f 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
interface PortalDisclaimerDialogProps {
isOpen: boolean;
@@ -17,11 +17,11 @@ export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) {
<FlatButton
key="portalAgree"
label="I Agree"
- onTouchTap={props.onToggleDialog.bind(this)}
+ onTouchTap={props.onToggleDialog}
/>,
]}
open={props.isOpen}
- onRequestClose={props.onToggleDialog.bind(this)}
+ onRequestClose={props.onToggleDialog}
autoScrollBodyContent={true}
modal={true}
>
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 2d45009d5..f17893a83 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -73,7 +73,9 @@ export class TrackTokenConfirmationDialog extends
isAddingTokenToTracked: true,
});
for (const token of this.props.tokens) {
- const newTokenEntry = _.assign({}, token);
+ const newTokenEntry = {
+ ...token,
+ };
newTokenEntry.isTracked = true;
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
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 09c32c997..ff884a94e 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 Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
interface U2fNotSupportedDialogProps {
@@ -39,7 +39,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
<li>
Firefox with{' '}
<a
- href={constants.FIREFOX_U2F_ADDON}
+ href={constants.URL_FIREFOX_U2F_ADDON}
target="_blank"
style={{textDecoration: 'underline'}}
>
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
new file mode 100644
index 000000000..3f485ce4f
--- /dev/null
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -0,0 +1,38 @@
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import {colors} from 'material-ui/styles';
+import * as React from 'react';
+
+interface WrappedEthSectionNoticeDialogProps {
+ isOpen: boolean;
+ onToggleDialog: () => void;
+}
+
+export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDialogProps) {
+ return (
+ <Dialog
+ title="Dedicated Wrapped Ether Section"
+ titleStyle={{fontWeight: 100}}
+ actions={[
+ <FlatButton
+ key="acknowledgeWrapEthSection"
+ label="Sounds good"
+ onTouchTap={props.onToggleDialog}
+ />,
+ ]}
+ open={props.isOpen}
+ onRequestClose={props.onToggleDialog}
+ autoScrollBodyContent={true}
+ modal={true}
+ >
+ <div className="pt2" style={{color: colors.grey700}}>
+ <div>
+ We have recently updated the Wrapped Ether token (WETH) used by 0x Portal.
+ Don't worry, unwrapping Ether tied to the old Wrapped Ether token can
+ be done at any time by clicking on the "Wrap ETH" section in the menu
+ to the left.
+ </div>
+ </div>
+ </Dialog>
+ );
+}
diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index c8a279de9..e802b8782 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -45,7 +45,7 @@ export class EthWethConversionButton extends
const labelStyle = this.state.isEthConversionHappening ? {fontSize: 10} : {};
let callToActionLabel;
let inProgressLabel;
- if (this.props.direction === Side.deposit) {
+ if (this.props.direction === Side.Deposit) {
callToActionLabel = 'Wrap';
inProgressLabel = 'Wrapping...';
} else {
@@ -87,9 +87,9 @@ export class EthWethConversionButton extends
const tokenState = this.props.ethTokenState;
let balance = tokenState.balance;
try {
- if (direction === Side.deposit) {
+ if (direction === Side.Deposit) {
await this.props.blockchain.convertEthToWrappedEthTokensAsync(token.address, value);
- const ethAmount = ZeroEx.toUnitAmount(value, constants.ETH_DECIMAL_PLACES);
+ const ethAmount = ZeroEx.toUnitAmount(value, constants.DECIMAL_PLACES_ETH);
this.props.dispatcher.showFlashMessage(`Successfully wrapped ${ethAmount.toString()} ETH to WETH`);
balance = balance.plus(value);
} else {
@@ -104,13 +104,13 @@ export class EthWethConversionButton extends
this.props.onConversionSuccessful();
} catch (err) {
const errMsg = '' + err;
- if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) {
+ if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
} else if (!_.includes(errMsg, 'User denied transaction')) {
utils.consoleLog(`Unexpected error encountered: ${err}`);
utils.consoleLog(err.stack);
await errorReporter.reportAsync(err);
- const errorMsg = direction === Side.deposit ?
+ const errorMsg = direction === Side.Deposit ?
'Failed to wrap your ETH. Please try again.' :
'Failed to unwrap your WETH. Please try again.';
this.props.dispatcher.showFlashMessage(errorMsg);
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index 58b73b11c..bdd4664e8 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -2,7 +2,6 @@ import {ZeroEx} from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Divider from 'material-ui/Divider';
-import {colors} from 'material-ui/styles';
import {
Table,
TableBody,
@@ -13,10 +12,12 @@ import {
} from 'material-ui/Table';
import * as moment from 'moment';
import * as React from 'react';
+import ReactTooltip = require('react-tooltip');
import {Blockchain} from 'ts/blockchain';
import {EthWethConversionButton} from 'ts/components/eth_weth_conversion_button';
import {Dispatcher} from 'ts/redux/dispatcher';
import {
+ EtherscanLinkSuffixes,
OutdatedWrappedEtherByNetworkId,
Side,
Token,
@@ -24,12 +25,13 @@ import {
TokenState,
TokenStateByAddress,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
+import {utils} from 'ts/utils/utils';
const PRECISION = 5;
const DATE_FORMAT = 'D/M/YY';
-const LIGHT_GRAY = '#A5A5A5';
const ICON_DIMENSION = 40;
const ETHER_ICON_PATH = '/images/ether.png';
const OUTDATED_WETH_ICON_PATH = '/images/wrapped_eth_gray.png';
@@ -83,8 +85,12 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
const tokens = _.values(this.props.tokenByAddress);
const etherToken = _.find(tokens, {symbol: 'WETH'});
const etherTokenState = this.props.tokenStateByAddress[etherToken.address];
- const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, 18);
+ const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, constants.DECIMAL_PLACES_ETH);
const isBidirectional = true;
+ const etherscanUrl = utils.getEtherScanLinkIfExists(
+ etherToken.address, this.props.networkId, EtherscanLinkSuffixes.Address,
+ );
+ const tokenLabel = this.renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH);
return (
<div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
<div className="relative">
@@ -92,8 +98,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<div className="absolute" style={{top: 0, right: 0}}>
<a
target="_blank"
- href="https://weth.io/"
- style={{color: LIGHT_GRAY}}
+ href={constants.URL_WETH_IO}
+ style={{color: colors.grey}}
>
<div className="flex">
<div>About Wrapped ETH</div>
@@ -131,8 +137,11 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
src={ETHER_ICON_PATH}
/>
- <div className="mt2 ml2 sm-hide xs-hide">
- Ether
+ <div
+ className="ml2 sm-hide xs-hide"
+ style={{marginTop: 12}}
+ >
+ ETH
</div>
</div>
</TableRowColumn>
@@ -142,7 +151,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<TableRowColumn>
<EthWethConversionButton
isOutdatedWrappedEther={false}
- direction={Side.deposit}
+ direction={Side.Deposit}
ethToken={etherToken}
ethTokenState={etherTokenState}
dispatcher={this.props.dispatcher}
@@ -153,15 +162,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
</TableRow>
<TableRow key="WETH">
<TableRowColumn className="py1">
- <div className="flex">
- <img
- style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
- src={constants.iconUrlBySymbol.WETH}
- />
- <div className="mt2 ml2 sm-hide xs-hide">
- Wrapped Ether
- </div>
- </div>
+ {this.renderTokenLink(tokenLabel, etherscanUrl)}
</TableRowColumn>
<TableRowColumn>
{wethBalance.toFixed(PRECISION)} WETH
@@ -169,7 +170,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<TableRowColumn>
<EthWethConversionButton
isOutdatedWrappedEther={false}
- direction={Side.receive}
+ direction={Side.Receive}
ethToken={etherToken}
ethTokenState={etherTokenState}
dispatcher={this.props.dispatcher}
@@ -242,10 +243,13 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
);
}
private renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) {
- const rows = _.map(configs.outdatedWrappedEthers,
+ const rows = _.map(configs.OUTDATED_WRAPPED_ETHERS,
(outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => {
- const outdatedWETH = outdatedWETHByNetworkId[this.props.networkId];
- const timestampMsRange = outdatedWETH.timestampMsRange;
+ const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId];
+ if (_.isUndefined(outdatedWETHIfExists)) {
+ return null; // noop
+ }
+ const timestampMsRange = outdatedWETHIfExists.timestampMsRange;
let dateRange: string;
if (!_.isUndefined(timestampMsRange)) {
const startMoment = moment(timestampMsRange.startTimestampMs);
@@ -256,26 +260,26 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
}
const outdatedEtherToken = {
...etherToken,
- address: outdatedWETH.address,
+ address: outdatedWETHIfExists.address,
};
- const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETH.address];
- const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETH.address];
+ const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETHIfExists.address];
+ const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address];
const balanceInEthIfExists = isStateLoaded ?
- ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, 18).toFixed(PRECISION) :
+ ZeroEx.toUnitAmount(
+ outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH,
+ ).toFixed(PRECISION) :
undefined;
- const onConversionSuccessful = this.onOutdatedConversionSuccessfulAsync.bind(this, outdatedWETH.address);
+ const onConversionSuccessful = this.onOutdatedConversionSuccessfulAsync.bind(
+ this, outdatedWETHIfExists.address,
+ );
+ const etherscanUrl = utils.getEtherScanLinkIfExists(
+ outdatedWETHIfExists.address, this.props.networkId, EtherscanLinkSuffixes.Address,
+ );
+ const tokenLabel = this.renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH);
return (
- <TableRow key={`weth-${outdatedWETH.address}`}>
+ <TableRow key={`weth-${outdatedWETHIfExists.address}`}>
<TableRowColumn className="py1">
- <div className="flex">
- <img
- style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
- src={OUTDATED_WETH_ICON_PATH}
- />
- <div className="mt2 ml2 sm-hide xs-hide">
- {dateRange}
- </div>
- </div>
+ {this.renderTokenLink(tokenLabel, etherscanUrl)}
</TableRowColumn>
<TableRowColumn>
{isStateLoaded ?
@@ -287,7 +291,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
<EthWethConversionButton
isDisabled={!isStateLoaded}
isOutdatedWrappedEther={true}
- direction={Side.receive}
+ direction={Side.Receive}
ethToken={outdatedEtherToken}
ethTokenState={outdatedEtherTokenState}
dispatcher={this.props.dispatcher}
@@ -301,6 +305,41 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
});
return rows;
}
+ private renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) {
+ return (
+ <span>
+ {_.isUndefined(etherscanUrl) ?
+ tokenLabel :
+ <a href={etherscanUrl} target="_blank" style={{textDecoration: 'none'}}>
+ {tokenLabel}
+ </a>
+ }
+ </span>
+ );
+ }
+ private renderToken(name: string, address: string, imgPath: string) {
+ const tooltipId = `tooltip-${address}`;
+ return (
+ <div className="flex">
+ <img
+ style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
+ src={imgPath}
+ />
+ <div
+ className="ml2 sm-hide xs-hide"
+ style={{marginTop: 12}}
+ >
+ <span
+ data-tip={true}
+ data-for={tooltipId}
+ >
+ {name}
+ </span>
+ <ReactTooltip id={tooltipId}>{address}</ReactTooltip>
+ </div>
+ </div>
+ );
+ }
private async onOutdatedConversionSuccessfulAsync(outdatedWETHAddress: string) {
this.setState({
outdatedWETHAddressToIsStateLoaded: {
@@ -345,9 +384,15 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt
});
}
private getOutdatedWETHAddresses(): string[] {
- const outdatedWETHAddresses = _.map(configs.outdatedWrappedEthers, outdatedWrappedEther => {
- return outdatedWrappedEther[this.props.networkId].address;
- });
+ const outdatedWETHAddresses = _.compact(_.map(configs.OUTDATED_WRAPPED_ETHERS,
+ outdatedWrappedEtherByNetwork => {
+ const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId];
+ if (_.isUndefined(outdatedWrappedEtherIfExists)) {
+ return undefined;
+ }
+ const address = outdatedWrappedEtherIfExists.address;
+ return address;
+ }));
return outdatedWETHAddresses;
}
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 40a9b87d6..ac826fdf6 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -28,12 +28,11 @@ import {
TokenStateByAddress,
WebsitePaths,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
import {errorReporter} from 'ts/utils/error_reporter';
import {utils} from 'ts/utils/utils';
-const CUSTOM_LIGHT_GRAY = '#BBBBBB';
-
interface FillOrderProps {
blockchain: Blockchain;
blockchainErr: BlockchainErrs;
@@ -222,7 +221,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
<div className="clearfix pb2" style={{width: '100%'}}>
<div className="inline left">Order details</div>
<div className="inline right" style={{minWidth: 208}}>
- <div className="col col-4 pl2" style={{color: '#BEBEBE'}}>
+ <div className="col col-4 pl2" style={{color: colors.grey}}>
Maker:
</div>
<div className="col col-2 pr1">
@@ -259,22 +258,20 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
</div>
</div>
{!isUserMaker &&
- <div className="clearfix mx-auto" style={{width: 315, height: 108}}>
- <div className="col col-7" style={{maxWidth: 235}}>
- <TokenAmountInput
- label="Fill amount"
- onChange={this.onFillAmountChange.bind(this)}
- shouldShowIncompleteErrs={false}
- token={fillToken}
- tokenState={fillTokenState}
- amount={fillAssetToken.amount}
- shouldCheckBalance={true}
- shouldCheckAllowance={true}
- />
- </div>
+ <div className="clearfix mx-auto relative" style={{width: 235, height: 108}}>
+ <TokenAmountInput
+ label="Fill amount"
+ onChange={this.onFillAmountChange.bind(this)}
+ shouldShowIncompleteErrs={false}
+ token={fillToken}
+ tokenState={fillTokenState}
+ amount={fillAssetToken.amount}
+ shouldCheckBalance={true}
+ shouldCheckAllowance={true}
+ />
<div
- className="col col-5 pl1"
- style={{color: CUSTOM_LIGHT_GRAY, paddingTop: 39}}
+ className="absolute sm-hide xs-hide"
+ style={{color: colors.grey400, right: -247, top: 39, width: 242}}
>
= {accounting.formatNumber(orderReceiveAmount, 6)} {makerToken.symbol}
</div>
@@ -324,7 +321,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
Order successfully filled. See the trade details in your{' '}
<Link
to={`${WebsitePaths.Portal}/trades`}
- style={{color: 'white'}}
+ style={{color: colors.white}}
>
trade history
</Link>
@@ -381,22 +378,24 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
const isUnseenMakerToken = _.isUndefined(makerTokenIfExists);
const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && makerTokenIfExists.isTracked;
if (isUnseenMakerToken) {
- tokensToTrack.push(_.assign({}, this.state.parsedOrder.maker.token, {
+ tokensToTrack.push({
+ ...this.state.parsedOrder.maker.token,
iconUrl: undefined,
isTracked: false,
isRegistered: false,
- }));
+ });
} else if (!isMakerTokenTracked) {
tokensToTrack.push(makerTokenIfExists);
}
const isUnseenTakerToken = _.isUndefined(takerTokenIfExists);
const isTakerTokenTracked = !_.isUndefined(takerTokenIfExists) && takerTokenIfExists.isTracked;
if (isUnseenTakerToken) {
- tokensToTrack.push(_.assign({}, this.state.parsedOrder.taker.token, {
+ tokensToTrack.push({
+ ...this.state.parsedOrder.taker.token,
iconUrl: undefined,
isTracked: false,
isRegistered: false,
- }));
+ });
} else if (!isTakerTokenTracked) {
tokensToTrack.push(takerTokenIfExists);
}
diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx
index f4db1f74e..4a4bdac9f 100644
--- a/packages/website/ts/components/fill_order_json.tsx
+++ b/packages/website/ts/components/fill_order_json.tsx
@@ -24,11 +24,11 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
const tokenAddresses = _.keys(this.props.tokenByAddress);
const exchangeContract = this.props.blockchain.getExchangeContractAddressIfExists();
const hintSideToAssetToken = {
- [Side.deposit]: {
+ [Side.Deposit]: {
amount: new BigNumber(35),
address: tokenAddresses[0],
},
- [Side.receive]: {
+ [Side.Receive]: {
amount: new BigNumber(89),
address: tokenAddresses[1],
},
@@ -41,9 +41,10 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder
v: 27,
};
const hintSalt = ZeroEx.generatePseudoRandomSalt();
+ const feeRecipient = constants.NULL_ADDRESS;
const hintOrder = utils.generateOrder(this.props.networkId, exchangeContract, hintSideToAssetToken,
hintOrderExpiryTimestamp, '', '', constants.MAKER_FEE,
- constants.TAKER_FEE, constants.FEE_RECIPIENT_ADDRESS,
+ constants.TAKER_FEE, feeRecipient,
hintSignatureData, this.props.tokenByAddress, hintSalt);
const hintOrderJSON = `${JSON.stringify(hintOrder, null, '\t').substring(0, 500)}...`;
return (
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 83e46cc8f..7370ee2d8 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,7 +1,7 @@
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
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 fef7520f6..26619c54f 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import * as React from 'react';
import {Token} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {utils} from 'ts/utils/utils';
interface TokenSendCompletedProps {
@@ -19,7 +20,7 @@ export class TokenSendCompleted extends React.Component<TokenSendCompletedProps,
const etherScanLink = !_.isUndefined(this.props.etherScanLinkIfExists) &&
(
<a
- style={{color: 'white'}}
+ style={{color: colors.white}}
href={`${this.props.etherScanLinkIfExists}`}
target="_blank"
>
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index cef3e2b1e..64f460e20 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,5 +1,6 @@
import * as _ from 'lodash';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
interface TransactionSubmittedProps {
etherScanLinkIfExists?: string;
@@ -16,7 +17,7 @@ export class TransactionSubmitted extends React.Component<TransactionSubmittedPr
<div>
Transaction submitted to the network:{' '}
<a
- style={{color: 'white'}}
+ style={{color: colors.white}}
href={`${this.props.etherScanLinkIfExists}`}
target="_blank"
>
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index b26523094..0f65405d9 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -4,6 +4,7 @@ import {
Link,
} from 'react-router-dom';
import {WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
interface MenuItemsBySection {
@@ -24,9 +25,6 @@ enum Sections {
}
const ICON_DIMENSION = 16;
-const CUSTOM_DARK_GRAY = '#393939';
-const CUSTOM_LIGHT_GRAY = '#CACACA';
-const CUSTOM_LIGHTEST_GRAY = '#9E9E9E';
const menuItemsBySection: MenuItemsBySection = {
Documentation: [
{
@@ -59,25 +57,25 @@ const menuItemsBySection: MenuItemsBySection = {
{
title: 'Rocket.chat',
isExternal: true,
- path: constants.ZEROEX_CHAT_URL,
+ path: constants.URL_ZEROEX_CHAT,
fileName: 'rocketchat.png',
},
{
title: 'Blog',
isExternal: true,
- path: constants.BLOG_URL,
+ path: constants.URL_BLOG,
fileName: 'medium.png',
},
{
title: 'Twitter',
isExternal: true,
- path: constants.TWITTER_URL,
+ path: constants.URL_TWITTER,
fileName: 'twitter.png',
},
{
title: 'Reddit',
isExternal: true,
- path: constants.REDDIT_URL,
+ path: constants.URL_REDDIT,
fileName: 'reddit.png',
},
],
@@ -90,7 +88,7 @@ const menuItemsBySection: MenuItemsBySection = {
{
title: 'Careers',
isExternal: true,
- path: constants.ANGELLIST_URL,
+ path: constants.URL_ANGELLIST,
},
{
title: 'Contact',
@@ -100,7 +98,7 @@ const menuItemsBySection: MenuItemsBySection = {
],
};
const linkStyle = {
- color: 'white',
+ color: colors.white,
cursor: 'pointer',
};
@@ -111,23 +109,23 @@ const titleToIcon: {[title: string]: string} = {
'Reddit': 'reddit.png',
};
-export interface FooterProps {
- location: Location;
-}
+export interface FooterProps {}
interface FooterState {}
export class Footer extends React.Component<FooterProps, FooterState> {
public render() {
return (
- <div className="relative pb4 pt2" style={{backgroundColor: CUSTOM_DARK_GRAY}}>
- <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
+ <div className="relative pb4 pt2" style={{backgroundColor: colors.darkerGrey}}>
+ <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: colors.white}}>
<div className="col lg-col-4 md-col-4 col-12 left">
<div className="sm-mx-auto" style={{width: 148}}>
<div>
<img src="/images/protocol_logo_white.png" height="30" />
</div>
- <div style={{fontSize: 11, color: CUSTOM_LIGHTEST_GRAY, paddingLeft: 37, paddingTop: 2}}>
+ <div
+ style={{fontSize: 11, color: colors.grey, paddingLeft: 37, paddingTop: 2}}
+ >
© ZeroEx, Intl.
</div>
</div>
@@ -211,7 +209,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
private renderHeader(title: string) {
const headerStyle = {
textTransform: 'uppercase',
- color: CUSTOM_LIGHT_GRAY,
+ color: colors.grey400,
letterSpacing: 2,
fontFamily: 'Roboto Mono',
fontSize: 13,
diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx
index 08b4a909e..51edd2308 100644
--- a/packages/website/ts/components/generate_order/asset_picker.tsx
+++ b/packages/website/ts/components/generate_order/asset_picker.tsx
@@ -244,7 +244,9 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt
});
const tokenAddress = this.state.chosenTrackTokenAddress;
const token = this.props.tokenByAddress[tokenAddress];
- const newTokenEntry = _.assign({}, token);
+ const newTokenEntry = {
+ ...token,
+ };
newTokenEntry.isTracked = true;
trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
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 59970b10c..5479f0f83 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -3,7 +3,6 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Dialog from 'material-ui/Dialog';
import Divider from 'material-ui/Divider';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Blockchain} from 'ts/blockchain';
import {ExpirationInput} from 'ts/components/inputs/expiration_input';
@@ -30,6 +29,7 @@ import {
TokenByAddress,
TokenStateByAddress,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {errorReporter} from 'ts/utils/error_reporter';
import {utils} from 'ts/utils/utils';
@@ -78,10 +78,10 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
}
public render() {
const dispatcher = this.props.dispatcher;
- const depositTokenAddress = this.props.sideToAssetToken[Side.deposit].address;
+ const depositTokenAddress = this.props.sideToAssetToken[Side.Deposit].address;
const depositToken = this.props.tokenByAddress[depositTokenAddress];
const depositTokenState = this.props.tokenStateByAddress[depositTokenAddress];
- const receiveTokenAddress = this.props.sideToAssetToken[Side.receive].address;
+ const receiveTokenAddress = this.props.sideToAssetToken[Side.Receive].address;
const receiveToken = this.props.tokenByAddress[receiveTokenAddress];
const receiveTokenState = this.props.tokenStateByAddress[receiveTokenAddress];
const takerExplanation = 'If a taker is specified, only they are<br> \
@@ -102,9 +102,9 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
blockchainErr={this.props.blockchainErr}
dispatcher={this.props.dispatcher}
label="Selling"
- side={Side.deposit}
+ side={Side.Deposit}
networkId={this.props.networkId}
- assetToken={this.props.sideToAssetToken[Side.deposit]}
+ assetToken={this.props.sideToAssetToken[Side.Deposit]}
updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
tokenByAddress={this.props.tokenByAddress}
/>
@@ -112,8 +112,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
label="Sell amount"
token={depositToken}
tokenState={depositTokenState}
- amount={this.props.sideToAssetToken[Side.deposit].amount}
- onChange={this.onTokenAmountChange.bind(this, depositToken, Side.deposit)}
+ amount={this.props.sideToAssetToken[Side.Deposit].amount}
+ onChange={this.onTokenAmountChange.bind(this, depositToken, Side.Deposit)}
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={true}
shouldCheckAllowance={true}
@@ -133,9 +133,9 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
blockchainErr={this.props.blockchainErr}
dispatcher={this.props.dispatcher}
label="Buying"
- side={Side.receive}
+ side={Side.Receive}
networkId={this.props.networkId}
- assetToken={this.props.sideToAssetToken[Side.receive]}
+ assetToken={this.props.sideToAssetToken[Side.Receive]}
updateChosenAssetToken={dispatcher.updateChosenAssetToken.bind(dispatcher)}
tokenByAddress={this.props.tokenByAddress}
/>
@@ -143,8 +143,8 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
label="Receive amount"
token={receiveToken}
tokenState={receiveTokenState}
- amount={this.props.sideToAssetToken[Side.receive].amount}
- onChange={this.onTokenAmountChange.bind(this, receiveToken, Side.receive)}
+ amount={this.props.sideToAssetToken[Side.Receive].amount}
+ onChange={this.onTokenAmountChange.bind(this, receiveToken, Side.Receive)}
shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
shouldCheckBalance={false}
shouldCheckAllowance={false}
@@ -154,7 +154,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
</div>
<div className="pt1 sm-pb2 lg-px4 md-px4">
<div className="lg-px3 md-px3">
- <div style={{fontSize: 12, color: colors.grey500}}>Expiration</div>
+ <div style={{fontSize: 12, color: colors.grey}}>Expiration</div>
<ExpirationInput
orderExpiryTimestamp={this.props.orderExpiryTimestamp}
updateOrderExpiry={dispatcher.updateOrderExpiry.bind(dispatcher)}
@@ -235,16 +235,16 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G
});
}
private async onSignClickedAsync(): Promise<boolean> {
- if (this.props.blockchainErr !== '') {
+ if (this.props.blockchainErr !== BlockchainErrs.NoError) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return false;
}
// Check if all required inputs were supplied
- const debitToken = this.props.sideToAssetToken[Side.deposit];
+ const debitToken = this.props.sideToAssetToken[Side.Deposit];
const debitBalance = this.props.tokenStateByAddress[debitToken.address].balance;
const debitAllowance = this.props.tokenStateByAddress[debitToken.address].allowance;
- const receiveAmount = this.props.sideToAssetToken[Side.receive].amount;
+ const receiveAmount = this.props.sideToAssetToken[Side.Receive].amount;
if (!_.isUndefined(debitToken.amount) && !_.isUndefined(receiveAmount) &&
debitToken.amount.gt(0) && receiveAmount.gt(0) &&
this.props.userAddress !== '' &&
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 1be9f5ece..6c3c01d0d 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,6 +1,5 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import {Blockchain} from 'ts/blockchain';
@@ -9,6 +8,7 @@ import {Alert} from 'ts/components/ui/alert';
import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
import {RequiredLabel} from 'ts/components/ui/required_label';
import {AlertTypes, Token, TokenByAddress, TokenState} from 'ts/types';
+import {colors} from 'ts/utils/colors';
interface NewTokenFormProps {
blockchain: Blockchain;
@@ -49,7 +49,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey500}}
+ floatingLabelStyle={{color: colors.grey}}
floatingLabelText={<RequiredLabel label="Name" />}
value={this.state.name}
errorText={this.state.nameErrText}
@@ -59,7 +59,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey500}}
+ floatingLabelStyle={{color: colors.grey}}
floatingLabelText={<RequiredLabel label="Symbol" />}
value={this.state.symbol}
errorText={this.state.symbolErrText}
@@ -78,7 +78,7 @@ export class NewTokenForm extends React.Component<NewTokenFormProps, NewTokenFor
<div>
<TextField
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey500}}
+ floatingLabelStyle={{color: colors.grey}}
floatingLabelText={<RequiredLabel label="Decimals" />}
value={this.state.decimals}
errorText={this.state.decimalsErrText}
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index bd9e24c80..a17b6e3f5 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
import {addressUtils} from '@0xproject/utils';
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
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;
@@ -50,7 +50,7 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
fullWidth={true}
hintText={hintText}
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey500, display: labelDisplay}}
+ floatingLabelStyle={{color: colors.grey, display: labelDisplay}}
floatingLabelText={label}
errorText={this.state.errMsg}
value={this.state.address}
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 7ddefc3b9..61ab34f25 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,11 +1,11 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import {Link} from 'react-router-dom';
import {RequiredLabel} from 'ts/components/ui/required_label';
import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {utils} from 'ts/utils/utils';
interface BalanceBoundedInputProps {
@@ -83,7 +83,7 @@ export class BalanceBoundedInput extends
fullWidth={true}
floatingLabelText={label}
floatingLabelFixed={true}
- floatingLabelStyle={{color: colors.grey500, width: 206}}
+ floatingLabelStyle={{color: colors.grey, width: 206}}
errorText={errorText}
value={this.state.amountString}
hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
@@ -133,7 +133,7 @@ export class BalanceBoundedInput extends
const increaseBalanceText = 'Increase balance';
const linkStyle = {
cursor: 'pointer',
- color: colors.grey900,
+ color: colors.darkestGrey,
textDecoration: 'underline',
display: 'inline',
};
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 5c5e23eef..3dcd2b4f3 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -22,7 +22,7 @@ interface EthAmountInputState {}
export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
public render() {
const amount = this.props.amount ?
- ZeroEx.toUnitAmount(this.props.amount, constants.ETH_DECIMAL_PLACES) :
+ ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH) :
undefined;
return (
<div className="flex overflow-hidden" style={{height: 63}}>
@@ -45,7 +45,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
private onChange(isValid: boolean, amount?: BigNumber) {
const baseUnitAmountIfExists = _.isUndefined(amount) ?
undefined :
- ZeroEx.toBaseUnitAmount(amount, constants.ETH_DECIMAL_PLACES);
+ ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
this.props.onChange(isValid, baseUnitAmountIfExists);
}
}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 1ae9bc85e..c9728dc5f 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,11 @@
import {ZeroEx} from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Link} from 'react-router-dom';
import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
interface TokenAmountInputProps {
token: Token;
@@ -59,7 +59,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
Insufficient allowance.{' '}
<Link
to={`${WebsitePaths.Portal}/balances`}
- style={{cursor: 'pointer', color: colors.grey900}}
+ style={{cursor: 'pointer', color: colors.darkestGrey}}
>
Set allowance
</Link>
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 67f697f05..7008da12f 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,6 +1,5 @@
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Blockchain} from 'ts/blockchain';
import {AssetPicker} from 'ts/components/generate_order/asset_picker';
@@ -8,6 +7,7 @@ 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;
@@ -62,7 +62,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
>
<TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
</div>
- <div className="py1 center" style={{color: colors.grey500}}>
+ <div className="py1 center" style={{color: colors.grey}}>
{token.name}
</div>
</Paper>
@@ -95,7 +95,7 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
});
}
private onAssetClicked() {
- if (this.props.blockchainErr !== '') {
+ if (this.props.blockchainErr !== BlockchainErrs.NoError) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return;
}
diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx
index 83f25fd5a..340e5d91f 100644
--- a/packages/website/ts/components/order_json.tsx
+++ b/packages/website/ts/components/order_json.tsx
@@ -1,6 +1,6 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-import {Paper} from 'material-ui/Paper';
+import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import * as React from 'react';
import {CopyIcon} from 'ts/components/ui/copy_icon';
@@ -137,9 +137,8 @@ You can see and fill it here: ${this.state.shareLink}`);
}
private async generateShareLinkAsync(): Promise<string> {
const longUrl = encodeURIComponent(this.getOrderUrl());
- const bitlyRequestUrl = constants.BITLY_ENDPOINT + '/v3/shorten?' +
- 'access_token=' + constants.BITLY_ACCESS_TOKEN +
- '&longUrl=' + longUrl;
+ const bitlyRequestUrl =
+ `${constants.URL_BITLY_API}/v3/shorten?access_token=${configs.BITLY_ACCESS_TOKEN}&longUrl=${longUrl}`;
const response = await fetch(bitlyRequestUrl);
const responseBody = await response.text();
const bodyObj = JSON.parse(responseBody);
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 74b1bdec6..939dae6f7 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,13 +1,13 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import {Route, Switch} from 'react-router-dom';
import {Blockchain} from 'ts/blockchain';
import {BlockchainErrDialog} from 'ts/components/dialogs/blockchain_err_dialog';
import {PortalDisclaimerDialog} from 'ts/components/dialogs/portal_disclaimer_dialog';
+import {WrappedEthSectionNoticeDialog} from 'ts/components/dialogs/wrapped_eth_section_notice_dialog';
import {EthWrappers} from 'ts/components/eth_wrappers';
import {FillOrder} from 'ts/components/fill_order';
import {Footer} from 'ts/components/footer';
@@ -32,6 +32,7 @@ import {
TokenStateByAddress,
WebsitePaths,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
@@ -63,22 +64,39 @@ interface PortalAllState {
prevNetworkId: number;
prevNodeVersion: string;
prevUserAddress: string;
- hasAcceptedDisclaimer: boolean;
+ prevPathname: string;
+ isDisclaimerDialogOpen: boolean;
+ isWethNoticeDialogOpen: boolean;
}
export class Portal extends React.Component<PortalAllProps, PortalAllState> {
private blockchain: Blockchain;
private sharedOrderIfExists: Order;
private throttledScreenWidthUpdate: () => void;
+ public static hasAlreadyDismissedWethNotice() {
+ const didDismissWethNotice = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE);
+ const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) &&
+ !_.isEmpty(didDismissWethNotice);
+ return hasAlreadyDismissedWethNotice;
+ }
constructor(props: PortalAllProps) {
super(props);
this.sharedOrderIfExists = this.getSharedOrderIfExists();
this.throttledScreenWidthUpdate = _.throttle(this.updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+
+ const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`);
+ const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+
+ const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
+ const hasAcceptedDisclaimer = !_.isUndefined(didAcceptPortalDisclaimer) &&
+ !_.isEmpty(didAcceptPortalDisclaimer);
this.state = {
prevNetworkId: this.props.networkId,
prevNodeVersion: this.props.nodeVersion,
prevUserAddress: this.props.userAddress,
- hasAcceptedDisclaimer: false,
+ prevPathname: this.props.location.pathname,
+ isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
+ isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
};
}
public componentDidMount() {
@@ -87,12 +105,6 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
}
public componentWillMount() {
this.blockchain = new Blockchain(this.props.dispatcher);
- const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY);
- const hasAcceptedDisclaimer = !_.isUndefined(didAcceptPortalDisclaimer) &&
- !_.isEmpty(didAcceptPortalDisclaimer);
- this.setState({
- hasAcceptedDisclaimer,
- });
}
public componentWillUnmount() {
this.blockchain.destroy();
@@ -128,6 +140,14 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
// tslint:disable-next-line:no-floating-promises
this.blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
}
+ if (nextProps.location.pathname !== this.state.prevPathname) {
+ const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`);
+ const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+ this.setState({
+ prevPathname: nextProps.location.pathname,
+ isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
+ });
+ }
}
public render() {
const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher
@@ -138,6 +158,11 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
flexDirection: 'column',
justifyContent: 'space-between',
};
+ const portalMenuContainerStyle: React.CSSProperties = {
+ overflow: 'hidden',
+ backgroundColor: colors.darkestGrey,
+ color: colors.white,
+ };
return (
<div style={portalStyle}>
<DocumentTitle title="0x Portal DApp"/>
@@ -146,9 +171,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
blockchainIsLoaded={this.props.blockchainIsLoaded}
location={this.props.location}
/>
- <div id="portal" className="mx-auto max-width-4 pt4" style={{width: '100%'}}>
+ <div id="portal" className="mx-auto max-width-4" style={{width: '100%'}}>
<Paper className="mb3 mt2">
- {!configs.isMainnetEnabled && this.props.networkId === constants.MAINNET_NETWORK_ID ?
+ {!configs.IS_MAINNET_ENABLED && this.props.networkId === constants.NETWORK_ID_MAINNET ?
<div className="p3 center">
<div className="h2 py2">Mainnet unavailable</div>
<div className="mx-auto pb2 pt2">
@@ -171,9 +196,9 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
<div className="mx-auto flex">
<div
className="col col-2 pr2 pt1 sm-hide xs-hide"
- style={{overflow: 'hidden', backgroundColor: 'rgb(39, 39, 39)', color: 'white'}}
+ style={portalMenuContainerStyle}
>
- <PortalMenu menuItemStyle={{color: 'white'}} />
+ <PortalMenu menuItemStyle={{color: colors.white}} />
</div>
<div className="col col-12 lg-col-10 md-col-10 sm-col sm-col-12">
<div className="py2" style={{backgroundColor: colors.grey50}}>
@@ -215,8 +240,12 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
networkId={this.props.networkId}
/>
+ <WrappedEthSectionNoticeDialog
+ isOpen={this.state.isWethNoticeDialogOpen}
+ onToggleDialog={this.onWethNoticeAccepted.bind(this)}
+ />
<PortalDisclaimerDialog
- isOpen={!this.state.hasAcceptedDisclaimer}
+ isOpen={this.state.isDisclaimerDialogOpen}
onToggleDialog={this.onPortalDisclaimerAccepted.bind(this)}
/>
<FlashMessage
@@ -224,7 +253,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
flashMessage={this.props.flashMessage}
/>
</div>
- <Footer location={this.props.location} />
+ <Footer />
</div>
);
}
@@ -295,9 +324,15 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
);
}
private onPortalDisclaimerAccepted() {
- localStorage.setItem(constants.ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY, 'set');
+ localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
+ this.setState({
+ isDisclaimerDialogOpen: false,
+ });
+ }
+ private onWethNoticeAccepted() {
+ localStorage.setItem(constants.LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE, 'set');
this.setState({
- hasAcceptedDisclaimer: true,
+ isWethNoticeDialogOpen: false,
});
}
private getSharedOrderIfExists(): Order {
diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx
index b3fd2aeba..23e61e77e 100644
--- a/packages/website/ts/components/send_button.tsx
+++ b/packages/website/ts/components/send_button.tsx
@@ -70,14 +70,14 @@ export class SendButton extends React.Component<SendButtonProps, SendButtonState
this.props.dispatcher.replaceTokenBalanceByAddress(token.address, balance);
} catch (err) {
const errMsg = `${err}`;
- if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) {
+ if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return;
} else if (!_.includes(errMsg, 'User denied transaction')) {
utils.consoleLog(`Unexpected error encountered: ${err}`);
utils.consoleLog(err.stack);
- await errorReporter.reportAsync(err);
this.props.onError();
+ await errorReporter.reportAsync(err);
}
}
this.setState({
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index db4a35062..ab4b04868 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -7,7 +7,6 @@ import Divider from 'material-ui/Divider';
import FlatButton from 'material-ui/FlatButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentRemove from 'material-ui/svg-icons/content/remove';
import {
@@ -42,6 +41,7 @@ import {
TokenStateByAddress,
TokenVisibility,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {errorReporter} from 'ts/utils/error_reporter';
@@ -115,7 +115,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
if (!_.isUndefined(this.state.currentZrxBalance) && !nextZrxTokenBalance.eq(this.state.currentZrxBalance)) {
if (this.state.isZRXSpinnerVisible) {
const receivedAmount = nextZrxTokenBalance.minus(this.state.currentZrxBalance);
- const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, 18);
+ const receiveAmountInUnits = ZeroEx.toUnitAmount(receivedAmount, constants.DECIMAL_PLACES_ZRX);
this.props.dispatcher.showFlashMessage(`Received ${receiveAmountInUnits.toString(10)} Kovan ZRX`);
}
this.setState({
@@ -144,7 +144,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
onTouchTap={this.onDharmaDialogToggle.bind(this, false)}
/>,
];
- const isTestNetwork = this.props.networkId === constants.TESTNET_NETWORK_ID;
+ const isTestNetwork = this.props.networkId === constants.NETWORK_ID_TESTNET;
const dharmaButtonColumnStyle = {
paddingLeft: 3,
display: isTestNetwork ? 'table-cell' : 'none',
@@ -156,7 +156,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
const tokenTableHeight = allTokenRowHeight < MAX_TOKEN_TABLE_HEIGHT ?
allTokenRowHeight :
MAX_TOKEN_TABLE_HEIGHT;
- const isSmallScreen = this.props.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
const dharmaLoanExplanation = 'If you need access to larger amounts of ether,<br> \
you can request a loan from the Dharma Loan<br> \
@@ -164,7 +164,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
minutes or less.';
const allowanceExplanation = '0x smart contracts require access to your<br> \
token balances in order to execute trades.<br> \
- Toggling permissions sets an allowance for the<br> \
+ Toggling sets an allowance for the<br> \
smart contract so you can start trading that token.';
return (
<div className="lg-px4 md-px4 sm-px1 pb2">
@@ -302,7 +302,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
</TableHeaderColumn>
<TableHeaderColumn style={{paddingLeft: 3}}>Balance</TableHeaderColumn>
<TableHeaderColumn>
- <div className="inline-block">{!isSmallScreen && 'Trade '}Permissions</div>
+ <div className="inline-block">Allowance</div>
<HelpTooltip
style={{paddingLeft: 4}}
explanation={allowanceExplanation}
@@ -311,7 +311,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
<TableHeaderColumn>
Action
</TableHeaderColumn>
- {this.props.screenWidth !== ScreenWidths.SM &&
+ {this.props.screenWidth !== ScreenWidths.Sm &&
<TableHeaderColumn>
Send
</TableHeaderColumn>
@@ -333,9 +333,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
</Dialog>
<Dialog
title="Request Dharma Loan"
- titleStyle={{fontWeight: 100, backgroundColor: 'rgb(250, 250, 250)'}}
- bodyStyle={{backgroundColor: 'rgb(37, 37, 37)'}}
- actionsContainerStyle={{backgroundColor: 'rgb(250, 250, 250)'}}
+ titleStyle={{fontWeight: 100, backgroundColor: colors.white}}
+ bodyStyle={{backgroundColor: colors.dharmaDarkGrey}}
+ actionsContainerStyle={{backgroundColor: colors.white}}
autoScrollBodyContent={true}
actions={dharmaDialogActions}
open={this.state.isDharmaDialogVisible}
@@ -357,10 +357,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
);
}
private renderTokenTableRows() {
- if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== '') {
+ if (!this.props.blockchainIsLoaded || this.props.blockchainErr !== BlockchainErrs.NoError) {
return '';
}
- const isSmallScreen = this.props.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm;
const tokenColSpan = isSmallScreen ? TOKEN_COL_SPAN_SM : TOKEN_COL_SPAN_LG;
const actionPaddingX = isSmallScreen ? 2 : 24;
const allTokens = _.values(this.props.tokenByAddress);
@@ -379,9 +379,9 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
private renderTokenRow(tokenColSpan: number, actionPaddingX: number, token: Token) {
const tokenState = this.props.tokenStateByAddress[token.address];
const tokenLink = utils.getEtherScanLinkIfExists(token.address, this.props.networkId,
- EtherscanLinkSuffixes.address);
- const isMintable = _.includes(configs.symbolsOfMintableTokens, token.symbol) &&
- this.props.networkId !== constants.MAINNET_NETWORK_ID;
+ EtherscanLinkSuffixes.Address);
+ const isMintable = _.includes(configs.SYMBOLS_OF_MINTABLE_TOKENS, token.symbol) &&
+ this.props.networkId !== constants.NETWORK_ID_MAINNET;
return (
<TableRow key={token.address} style={{height: TOKEN_TABLE_ROW_HEIGHT}}>
<TableRowColumn
@@ -423,7 +423,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
onClickAsyncFn={this.onMintTestTokensAsync.bind(this, token)}
/>
}
- {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.TESTNET_NETWORK_ID &&
+ {token.symbol === ZRX_TOKEN_SYMBOL && this.props.networkId === constants.NETWORK_ID_TESTNET &&
<LifeCycleRaisedButton
labelReady="Request"
labelLoading="Sending..."
@@ -432,7 +432,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
/>
}
</TableRowColumn>
- {this.props.screenWidth !== ScreenWidths.SM &&
+ {this.props.screenWidth !== ScreenWidths.Sm &&
<TableRowColumn
style={{paddingLeft: actionPaddingX, paddingRight: actionPaddingX}}
>
@@ -456,13 +456,14 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
return;
}
const token = this.props.tokenByAddress[tokenAddress];
- const isDefaultTrackedToken = _.includes(configs.defaultTrackedTokenSymbols, token.symbol);
+ const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
if (!this.state.isAddingToken && !isDefaultTrackedToken) {
if (token.isRegistered) {
// Remove the token from tracked tokens
- const newToken = _.assign({}, token, {
+ const newToken = {
+ ...token,
isTracked: false,
- });
+ };
this.props.dispatcher.updateTokenByAddress([newToken]);
} else {
this.props.dispatcher.removeTokenToTokenByAddress(token);
@@ -507,7 +508,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
return (
<div>
Our faucet can only send test Ether to addresses on the {constants.TESTNET_NAME}
- {' '}testnet (networkId {constants.TESTNET_NETWORK_ID}). Please make sure you are
+ {' '}testnet (networkId {constants.NETWORK_ID_TESTNET}). Please make sure you are
{' '}connected to the {constants.TESTNET_NAME} testnet and try requesting ether again.
</div>
);
@@ -580,7 +581,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
return true;
} catch (err) {
const errMsg = '' + err;
- if (_.includes(errMsg, BlockchainCallErrs.USER_HAS_NO_ASSOCIATED_ADDRESSES)) {
+ if (_.includes(errMsg, BlockchainCallErrs.UserHasNoAssociatedAddresses)) {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
return false;
}
@@ -604,7 +605,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
// If on another network other then the testnet our faucet serves test ether
// from, we must show user an error message
- if (this.props.blockchain.networkId !== constants.TESTNET_NETWORK_ID) {
+ if (this.props.blockchain.networkId !== constants.NETWORK_ID_TESTNET) {
this.setState({
errorType: BalanceErrs.incorrectNetworkForFaucet,
});
@@ -614,7 +615,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
await utils.sleepAsync(ARTIFICIAL_FAUCET_REQUEST_DELAY);
const segment = isEtherRequest ? 'ether' : 'zrx';
- const response = await fetch(`${constants.ETHER_FAUCET_ENDPOINT}/${segment}/${this.props.userAddress}`);
+ const response = await fetch(`${constants.URL_ETHER_FAUCET}/${segment}/${this.props.userAddress}`);
const responseBody = await response.text();
if (response.status !== constants.SUCCESS_STATUS) {
utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`);
diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 27de49620..025ed3635 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -1,7 +1,6 @@
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Link} from 'react-router-dom';
import ReactTooltip = require('react-tooltip');
@@ -12,11 +11,9 @@ import {Identicon} from 'ts/components/ui/identicon';
import {DocsInfo} from 'ts/pages/documentation/docs_info';
import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
import {DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
-const CUSTOM_DARK_GRAY = '#231F20';
-const SECTION_HEADER_COLOR = 'rgb(234, 234, 234)';
-
interface TopBarProps {
userAddress?: string;
blockchainIsLoaded: boolean;
@@ -44,16 +41,11 @@ const styles: Styles = {
whiteSpace: 'nowrap',
width: 70,
},
- addressPopover: {
- backgroundColor: colors.blueGrey500,
- color: 'white',
- padding: 3,
- },
topBar: {
- backgroundColor: 'white',
+ backgroundcolor: colors.white,
height: 59,
width: '100%',
- position: 'fixed',
+ position: 'relative',
top: 0,
zIndex: 1100,
paddingBottom: 1,
@@ -63,7 +55,7 @@ const styles: Styles = {
},
menuItem: {
fontSize: 14,
- color: CUSTOM_DARK_GRAY,
+ color: colors.darkestGrey,
paddingTop: 6,
paddingBottom: 6,
marginTop: 17,
@@ -114,7 +106,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
key="subMenuItem-standard-relayer-api"
target="_blank"
className="text-decoration-none"
- href={constants.STANDARD_RELAYER_API_GITHUB}
+ href={constants.URL_STANDARD_RELAYER_API_GITHUB}
>
<MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Standard Relayer API" />
</a>,
@@ -122,7 +114,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
key="subMenuItem-github"
target="_blank"
className="text-decoration-none"
- href={constants.GITHUB_URL}
+ href={constants.URL_GITHUB_ORG}
>
<MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="GitHub" />
</a>,
@@ -222,7 +214,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
{this.renderPortalMenu()}
{this.renderDocsMenu()}
{this.renderWiki()}
- <div className="pl1 py1 mt3" style={{backgroundColor: SECTION_HEADER_COLOR}}>Website</div>
+ <div className="pl1 py1 mt3" style={{backgroundColor: colors.lightGrey}}>Website</div>
<Link to={WebsitePaths.Home} className="text-decoration-none">
<MenuItem className="py2">Home</MenuItem>
</Link>
@@ -262,7 +254,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<a
className="text-decoration-none"
target="_blank"
- href={constants.BLOG_URL}
+ href={constants.URL_BLOG}
>
<MenuItem className="py2">Blog</MenuItem>
</a>
@@ -286,7 +278,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
return (
<div className="lg-hide md-hide">
- <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>{sectionTitle}</div>
+ <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>{sectionTitle}</div>
<NestedSidebarMenu
topLevelMenu={this.props.menu}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -306,7 +298,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return (
<div className="lg-hide md-hide">
- <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>0x Protocol Wiki</div>
+ <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>0x Protocol Wiki</div>
<NestedSidebarMenu
topLevelMenu={this.props.menuSubsectionsBySection}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
@@ -323,7 +315,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
return (
<div className="lg-hide md-hide">
- <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>Portal DApp</div>
+ <div className="pl1 py1" style={{backgroundColor: colors.lightGrey}}>Portal DApp</div>
<PortalMenu
menuItemStyle={{color: 'black'}}
onClick={this.onMenuButtonClick.bind(this)}
diff --git a/packages/website/ts/components/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar_menu_item.tsx
index 38dc91194..64cb48b2e 100644
--- a/packages/website/ts/components/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar_menu_item.tsx
@@ -1,10 +1,10 @@
import * as _ from 'lodash';
import * as React from 'react';
import {Link} from 'react-router-dom';
+import {colors} from 'ts/utils/colors';
-const CUSTOM_DARK_GRAY = '#231F20';
const DEFAULT_STYLE = {
- color: CUSTOM_DARK_GRAY,
+ color: colors.darkestGrey,
};
interface TopBarMenuItemProps {
@@ -28,7 +28,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
public render() {
const primaryStyles = this.props.isPrimary ? {
borderRadius: 4,
- border: `1px solid ${this.props.isNightVersion ? '#979797' : 'rgb(230, 229, 229)'}`,
+ border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
marginTop: 15,
paddingLeft: 9,
paddingRight: 9,
@@ -36,7 +36,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
} : {};
const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
const linkColor = _.isUndefined(menuItemColor) ?
- CUSTOM_DARK_GRAY :
+ colors.darkestGrey :
menuItemColor;
return (
<div
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index cd588f239..ff840fe8c 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,8 +1,8 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
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 4dcceadb7..d2a334df9 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -2,13 +2,13 @@ import {ZeroEx} from '0x.js';
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
import * as moment from 'moment';
import * as React from 'react';
import * as ReactTooltip from 'react-tooltip';
import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
import {Party} from 'ts/components/ui/party';
import {EtherscanLinkSuffixes, Fill, Token, TokenByAddress} from 'ts/types';
+import {colors} from 'ts/utils/colors';
const PRECISION = 5;
const IDENTICON_DIAMETER = 40;
@@ -87,7 +87,7 @@ export class TradeHistoryItem extends React.Component<TradeHistoryItemProps, Tra
<EtherScanIcon
addressOrTxHash={fill.transactionHash}
networkId={this.props.networkId}
- etherscanLinkSuffixes={EtherscanLinkSuffixes.tx}
+ etherscanLinkSuffixes={EtherscanLinkSuffixes.Tx}
/>
</div>
</div>
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 71d2388f2..bc65d0f0f 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,8 +1,6 @@
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {AlertTypes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(137, 199, 116)';
+import {colors} from 'ts/utils/colors';
interface AlertProps {
type: AlertTypes;
@@ -12,8 +10,8 @@ interface AlertProps {
export function Alert(props: AlertProps) {
const isAlert = props.type === AlertTypes.ERROR;
const errMsgStyles = {
- background: isAlert ? colors.red200 : CUSTOM_GREEN,
- color: 'white',
+ background: isAlert ? colors.red200 : colors.lightestGreen,
+ color: colors.white,
marginTop: 10,
padding: 4,
paddingLeft: 8,
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 5f8e6a060..3c50430df 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
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/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx
index 041688a9d..55347cb98 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -2,9 +2,9 @@ import * as _ from 'lodash';
import Menu from 'material-ui/Menu';
import Popover from 'material-ui/Popover';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
-const CUSTOM_LIGHT_GRAY = '#848484';
const DEFAULT_STYLE = {
fontSize: 14,
};
@@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
onMouseEnter={this.onHover.bind(this)}
onMouseLeave={this.onHoverOff.bind(this)}
>
- <Menu style={{color: CUSTOM_LIGHT_GRAY}}>
+ <Menu style={{color: colors.grey}}>
{this.props.subMenuItems}
</Menu>
</div>
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index b3bc0bc59..d56840689 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -26,7 +26,7 @@ export const EthereumAddress = (props: EthereumAddressProps) => {
<EtherScanIcon
addressOrTxHash={props.address}
networkId={props.networkId}
- etherscanLinkSuffixes={EtherscanLinkSuffixes.address}
+ etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
/>
</div>
<ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 9b4d172f1..111d5d478 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,8 +1,8 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
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 {
@@ -13,7 +13,7 @@ interface EtherScanIconProps {
export const EtherScanIcon = (props: EtherScanIconProps) => {
const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
- props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.address,
+ props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.Address,
);
const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
return (
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index 852097519..bfa1da280 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 'material-ui/styles';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
export interface InputLabelProps {
text: string | Element | React.ReactNode;
@@ -7,7 +7,7 @@ export interface InputLabelProps {
const styles = {
label: {
- color: colors.grey500,
+ color: colors.grey,
fontSize: 12,
pointerEvents: 'none',
textAlign: 'left',
diff --git a/packages/website/ts/components/ui/labeled_switcher.tsx b/packages/website/ts/components/ui/labeled_switcher.tsx
deleted file mode 100644
index 80a8fbe94..000000000
--- a/packages/website/ts/components/ui/labeled_switcher.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
-import * as React from 'react';
-
-const CUSTOM_BLUE = '#63A6F1';
-
-interface LabeledSwitcherProps {
- labelLeft: string;
- labelRight: string;
- isLeftInitiallySelected: boolean;
- onLeftLabelClickAsync: () => Promise<boolean>;
- onRightLabelClickAsync: () => Promise<boolean>;
-}
-
-interface LabeledSwitcherState {
- isLeftSelected: boolean;
-}
-
-export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> {
- constructor(props: LabeledSwitcherProps) {
- super(props);
- this.state = {
- isLeftSelected: props.isLeftInitiallySelected,
- };
- }
- public render() {
- const isLeft = true;
- return (
- <div
- className="rounded clearfix"
- >
- {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)}
- {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)}
- </div>
- );
- }
- private renderLabel(title: string, isLeft: boolean, isSelected: boolean) {
- const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`;
- const style = {
- cursor: 'pointer',
- backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200,
- color: isSelected ? 'white' : '#A5A5A5',
- boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6',
- borderTop: borderStyle,
- borderBottom: borderStyle,
- [isLeft ? 'borderLeft' : 'borderRight']: borderStyle,
- paddingTop: 12,
- paddingBottom: 12,
- };
- return (
- <div
- className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`}
- style={style}
- onClick={this.onLabelClickAsync.bind(this, isLeft)}
- >
- {title}
- </div>
- );
- }
- private async onLabelClickAsync(isLeft: boolean): Promise<void> {
- this.setState({
- isLeftSelected: isLeft,
- });
- const didSucceed = isLeft ?
- await this.props.onLeftLabelClickAsync() :
- await this.props.onRightLabelClickAsync();
- if (!didSucceed) {
- this.setState({
- isLeftSelected: !isLeft,
- });
- }
- }
-}
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 2d668fb82..08e8bc9ce 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,6 +1,7 @@
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;
@@ -31,8 +32,8 @@ export class LifeCycleRaisedButton extends
React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
isDisabled: false,
- backgroundColor: 'white',
- labelColor: 'rgb(97, 97, 97)',
+ backgroundColor: colors.white,
+ labelColor: colors.darkGrey,
};
private buttonTimeoutId: number;
private didUnmount: boolean;
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index e6b6ea9e2..918d42a3b 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,15 +1,14 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
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;
const IDENTICON_DIAMETER = 95;
-const CHECK_MARK_GREEN = 'rgb(0, 195, 62)';
interface PartyProps {
label: string;
@@ -45,7 +44,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
height: IMAGE_DIMENSION,
};
const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
- this.props.address, this.props.networkId, EtherscanLinkSuffixes.address,
+ this.props.address, this.props.networkId, EtherscanLinkSuffixes.Address,
);
const isRegistered = this.props.isInTokenRegistry;
const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`;
@@ -94,7 +93,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
className="mx-auto"
style={{fontSize: 13, width: 127}}
>
- <span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}>
+ <span style={{color: isRegistered ? colors.brightGreen : colors.red500}}>
<i
className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
/>
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index db69d7278..979b06d66 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 'material-ui/styles';
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 b5d4b0caa..124e7018c 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
+import {colors} from 'ts/utils/colors';
interface SwapIconProps {
swapTokensFn: () => void;
diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.tsx
index 7588a1535..ae983e0f5 100644
--- a/packages/website/ts/containers/portal.tsx
+++ b/packages/website/ts/containers/portal.tsx
@@ -43,8 +43,8 @@ interface ConnectedDispatch {
}
const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): ConnectedState => {
- const receiveAssetToken = state.sideToAssetToken[Side.receive];
- const depositAssetToken = state.sideToAssetToken[Side.deposit];
+ const receiveAssetToken = state.sideToAssetToken[Side.Receive];
+ const depositAssetToken = state.sideToAssetToken[Side.Deposit];
const receiveAddress = !_.isUndefined(receiveAssetToken.address) ?
receiveAssetToken.address : constants.NULL_ADDRESS;
const depositAddress = !_.isUndefined(depositAssetToken.address) ?
@@ -56,7 +56,7 @@ const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): Conne
const hashData = {
depositAmount,
depositTokenContractAddr: depositAddress,
- feeRecipientAddress: constants.FEE_RECIPIENT_ADDRESS,
+ feeRecipientAddress: constants.NULL_ADDRESS,
makerFee: constants.MAKER_FEE,
orderExpiryTimestamp: state.orderExpiryTimestamp,
orderMakerAddress: state.userAddress,
diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.tsx
index 1f82bda0f..34092748b 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.tsx
+++ b/packages/website/ts/containers/smart_contracts_documentation.tsx
@@ -9,16 +9,13 @@ import {
} from 'ts/pages/documentation/documentation';
import {Dispatcher} from 'ts/redux/dispatcher';
import {State} from 'ts/redux/reducer';
-import {DocsInfoConfig, WebsitePaths} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import {DocsInfoConfig, SmartContractDocSections as Sections, WebsitePaths} from 'ts/types';
import {doxityUtils} from 'ts/utils/doxity_utils';
/* tslint:disable:no-var-requires */
const IntroMarkdown = require('md/docs/smart_contracts/introduction');
/* tslint:enable:no-var-requires */
-const sections = constants.smartContractDocSections;
-
const docsInfoConfig: DocsInfoConfig = {
displayName: '0x Smart Contracts',
packageUrl: 'https://github.com/0xProject/contracts',
@@ -26,26 +23,30 @@ const docsInfoConfig: DocsInfoConfig = {
docsJsonRoot: 'https://s3.amazonaws.com/smart-contracts-docs-json',
menu: {
introduction: [
- sections.Introduction,
+ Sections.Introduction,
],
contracts: [
- sections.Exchange,
- sections.TokenRegistry,
- sections.ZRXToken,
- sections.EtherToken,
- sections.TokenTransferProxy,
+ Sections.Exchange,
+ Sections.TokenRegistry,
+ Sections.ZRXToken,
+ Sections.TokenTransferProxy,
],
},
sectionNameToMarkdown: {
- [sections.Introduction]: IntroMarkdown,
+ [Sections.Introduction]: IntroMarkdown,
+ },
+ sections: {
+ Introduction: Sections.Introduction,
+ Exchange: Sections.Exchange,
+ TokenTransferProxy: Sections.TokenTransferProxy,
+ TokenRegistry: Sections.TokenRegistry,
+ ZRXToken: Sections.ZRXToken,
},
- sections,
visibleConstructors: [
- sections.Exchange,
- sections.TokenRegistry,
- sections.ZRXToken,
- sections.EtherToken,
- sections.TokenTransferProxy,
+ Sections.Exchange,
+ Sections.TokenRegistry,
+ Sections.ZRXToken,
+ Sections.TokenTransferProxy,
],
convertToDocAgnosticFormatFn: doxityUtils.convertToDocAgnosticFormat.bind(doxityUtils),
};
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 71565fa4d..685ce4962 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -1,8 +1,8 @@
// Polyfills
import 'whatwg-fetch';
-import BigNumber from 'bignumber.js';
-import {colors, getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
+import {bigNumberConfigs} from '@0xproject/utils';
+import {MuiThemeProvider} from 'material-ui/styles';
import * as React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
@@ -19,59 +19,18 @@ import {NotFound} from 'ts/pages/not_found';
import {Wiki} from 'ts/pages/wiki/wiki';
import {reducer, State} from 'ts/redux/reducer';
import {WebsitePaths} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import {muiTheme} from 'ts/utils/mui_theme';
injectTapEventPlugin();
-// By default BigNumber's `toString` method converts to exponential notation if the value has
-// more then 20 digits. We want to avoid this behavior, so we set EXPONENTIAL_AT to a high number
-BigNumber.config({
- EXPONENTIAL_AT: 1000,
-});
+bigNumberConfigs.configure();
// Check if we've introduced an update that requires us to clear the tradeHistory local storage entries
tradeHistoryStorage.clearIfRequired();
trackedTokenStorage.clearIfRequired();
-const CUSTOM_GREY = 'rgb(39, 39, 39)';
-const CUSTOM_GREEN = 'rgb(102, 222, 117)';
-const CUSTOM_DARKER_GREEN = 'rgb(77, 197, 92)';
-
import 'basscss/css/basscss.css';
import 'less/all.less';
-const muiTheme = getMuiTheme({
- appBar: {
- height: 45,
- color: 'white',
- textColor: 'black',
- },
- palette: {
- pickerHeaderColor: constants.CUSTOM_BLUE,
- primary1Color: constants.CUSTOM_BLUE,
- primary2Color: constants.CUSTOM_BLUE,
- textColor: colors.grey700,
- },
- datePicker: {
- color: colors.grey700,
- textColor: 'white',
- calendarTextColor: 'white',
- selectColor: CUSTOM_GREY,
- selectTextColor: 'white',
- },
- timePicker: {
- color: colors.grey700,
- textColor: 'white',
- accentColor: 'white',
- headerColor: CUSTOM_GREY,
- selectColor: CUSTOM_GREY,
- selectTextColor: CUSTOM_GREY,
- },
- toggle: {
- thumbOnColor: CUSTOM_GREEN,
- trackOnColor: CUSTOM_DARKER_GREEN,
- },
-});
-
// We pass modulePromise returning lambda instead of module promise,
// cause we only want to import the module when the user navigates to the page.
// At the same time webpack statically parses for System.import() to determine bundle chunk split points
diff --git a/packages/website/ts/local_storage/tracked_token_storage.ts b/packages/website/ts/local_storage/tracked_token_storage.ts
index 086b06af5..f51368289 100644
--- a/packages/website/ts/local_storage/tracked_token_storage.ts
+++ b/packages/website/ts/local_storage/tracked_token_storage.ts
@@ -11,10 +11,10 @@ export const trackedTokenStorage = {
// that introduced a backward incompatible change requiring the tracked tokens to be re-set
clearIfRequired() {
const lastClearFillDate = localStorage.getItemIfExists(TRACKED_TOKENS_CLEAR_KEY);
- if (lastClearFillDate !== configs.lastLocalStorageTrackedTokenClearanceDate) {
+ if (lastClearFillDate !== configs.LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE) {
localStorage.removeItem(TRACKED_TOKENS_KEY);
}
- localStorage.setItem(TRACKED_TOKENS_CLEAR_KEY, configs.lastLocalStorageTrackedTokenClearanceDate);
+ localStorage.setItem(TRACKED_TOKENS_CLEAR_KEY, configs.LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE);
},
addTrackedTokenToUser(userAddress: string, networkId: number, token: Token) {
const trackedTokensByUserAddress = this.getTrackedTokensByUserAddress();
diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx
index 0d627e000..a54844ea7 100644
--- a/packages/website/ts/local_storage/trade_history_storage.tsx
+++ b/packages/website/ts/local_storage/trade_history_storage.tsx
@@ -16,7 +16,7 @@ export const tradeHistoryStorage = {
// the blockchain
clearIfRequired() {
const lastClearFillDate = localStorage.getItemIfExists(FILL_CLEAR_KEY);
- if (lastClearFillDate !== configs.lastLocalStorageFillClearanceDate) {
+ if (lastClearFillDate !== configs.LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE) {
const localStorageKeys = localStorage.getAllKeys();
_.each(localStorageKeys, key => {
if (_.startsWith(key, `${FILLS_KEY}-`) || _.startsWith(key, `${FILLS_LATEST_BLOCK}-`)) {
@@ -24,7 +24,7 @@ export const tradeHistoryStorage = {
}
});
}
- localStorage.setItem(FILL_CLEAR_KEY, configs.lastLocalStorageFillClearanceDate);
+ localStorage.setItem(FILL_CLEAR_KEY, configs.LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE);
},
addFillToUser(userAddress: string, networkId: number, fill: Fill) {
const fillsByHash = this.getUserFillsByHash(userAddress, networkId);
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 011bbb9d9..e9e876f45 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,18 +1,14 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import {Footer} from 'ts/components/footer';
import {TopBar} from 'ts/components/top_bar';
import {Profile} from 'ts/pages/about/profile';
import {ProfileInfo, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
-const CUSTOM_BACKGROUND_COLOR = '#F0F0F0';
-const CUSTOM_GRAY = '#4C4C4C';
-const CUSTOM_LIGHT_GRAY = '#A2A2A2';
-
const teamRow1: ProfileInfo[] = [
{
name: 'Will Warren',
@@ -145,6 +141,12 @@ const styles: Styles = {
color: 'black',
paddingTop: 110,
},
+ weAreHiring: {
+ fontSize: 30,
+ color: colors.darkestGrey,
+ fontFamily: 'Roboto Mono',
+ letterSpacing: 7.5,
+ },
};
export class About extends React.Component<AboutProps, AboutState> {
@@ -153,12 +155,12 @@ export class About extends React.Component<AboutProps, AboutState> {
}
public render() {
return (
- <div style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}>
+ <div style={{backgroundColor: colors.lightestGrey}}>
<DocumentTitle title="0x About Us"/>
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
- style={{backgroundColor: CUSTOM_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.lightestGrey}}
/>
<div
id="about"
@@ -176,7 +178,7 @@ export class About extends React.Component<AboutProps, AboutState> {
</div>
<div
className="pt3"
- style={{fontSize: 17, color: CUSTOM_GRAY, lineHeight: 1.5}}
+ style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}}
>
Our team is a diverse and globally distributed group with backgrounds
in engineering, research, business and design. We are passionate about
@@ -195,7 +197,7 @@ export class About extends React.Component<AboutProps, AboutState> {
<div className="pt3 pb2">
<div
className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
- style={{color: CUSTOM_LIGHT_GRAY, fontSize: 24, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}}
>
Advisors:
</div>
@@ -206,17 +208,17 @@ export class About extends React.Component<AboutProps, AboutState> {
<div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
<div
className="pb2"
- style={{fontSize: 30, color: CUSTOM_GRAY, fontFamily: 'Roboto Mono', letterSpacing: 7.5}}
+ style={styles.weAreHiring}
>
WE'RE HIRING
</div>
<div
className="pb4 mb4"
- style={{fontSize: 16, color: CUSTOM_GRAY, lineHeight: 1.5, letterSpacing: '0.5px'}}
+ style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}}
>
We are seeking outstanding candidates to{' '}
<a
- href={constants.ANGELLIST_URL}
+ href={constants.URL_ANGELLIST}
target="_blank"
style={{color: 'black'}}
>
@@ -226,7 +228,7 @@ export class About extends React.Component<AboutProps, AboutState> {
</div>
</div>
</div>
- <Footer location={this.props.location} />
+ <Footer />
</div>
);
}
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 86aa788b2..ef74f268a 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import * as React from 'react';
import {ProfileInfo, Styles} from 'ts/types';
+import {colors} from 'ts/utils/colors';
const IMAGE_DIMENSION = 149;
const styles: Styles = {
@@ -48,7 +49,7 @@ export function Profile(props: ProfileProps) {
{!_.isUndefined(props.profileInfo.title) &&
<div
className="pt1 center"
- style={{fontSize: 14, fontFamily: 'Roboto Mono', color: '#818181'}}
+ style={{fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey}}
>
{props.profileInfo.title.toUpperCase()}
</div>
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 0ca8ae9d3..aab14a52c 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,7 +1,6 @@
import findVersions = require('find-versions');
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import {
@@ -34,19 +33,18 @@ import {
TypeDefinitionByName,
TypescriptMethod,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
+import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {docUtils} from 'ts/utils/doc_utils';
import {utils} from 'ts/utils/utils';
const SCROLL_TOP_ID = 'docsScrollTop';
-const CUSTOM_PURPLE = '#690596';
-const CUSTOM_RED = '#e91751';
-const CUSTOM_TURQUOIS = '#058789';
const networkNameToColor: {[network: string]: string} = {
- [Networks.kovan]: CUSTOM_PURPLE,
- [Networks.ropsten]: CUSTOM_RED,
- [Networks.mainnet]: CUSTOM_TURQUOIS,
+ [Networks.kovan]: colors.purple,
+ [Networks.ropsten]: colors.red,
+ [Networks.mainnet]: colors.turquois,
};
export interface DocumentationAllProps {
@@ -273,7 +271,7 @@ export class Documentation extends
);
}
private renderNetworkBadgesIfExists(sectionName: string) {
- const networkToAddressByContractName = constants.contractAddresses[this.props.docsVersion];
+ const networkToAddressByContractName = configs.CONTRACT_ADDRESS[this.props.docsVersion];
const badges = _.map(networkToAddressByContractName,
(addressByContractName: AddressByContractName, networkName: string) => {
const contractAddress = addressByContractName[sectionName];
@@ -281,14 +279,14 @@ export class Documentation extends
return null;
}
const linkIfExists = utils.getEtherScanLinkIfExists(
- contractAddress, constants.networkIdByName[networkName], EtherscanLinkSuffixes.address,
+ contractAddress, constants.NETWORK_ID_BY_NAME[networkName], EtherscanLinkSuffixes.Address,
);
return (
<a
key={`badge-${networkName}-${sectionName}`}
href={linkIfExists}
target="_blank"
- style={{color: 'white', textDecoration: 'none'}}
+ style={{color: colors.white, textDecoration: 'none'}}
>
<Badge
title={networkName}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 3c57666e7..695debf5b 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -4,8 +4,7 @@ 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';
-
-const CUSTOM_GREEN = 'rgb(77, 162, 75)';
+import {colors} from 'ts/utils/colors';
interface EventDefinitionProps {
event: Event;
@@ -50,7 +49,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
);
}
private renderEventCode() {
- const indexed = <span style={{color: CUSTOM_GREEN}}> indexed</span>;
+ const indexed = <span style={{color: colors.green}}> indexed</span>;
const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
const type = (
<Type
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index 9505f2aa4..5163e03ac 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,5 +1,4 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Comment} from 'ts/pages/documentation/comment';
import {DocsInfo} from 'ts/pages/documentation/docs_info';
@@ -14,6 +13,7 @@ import {
TypeDefinitionByName,
TypescriptMethod,
} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {typeDocUtils} from 'ts/utils/typedoc_utils';
interface MethodBlockProps {
@@ -31,7 +31,7 @@ const styles: Styles = {
chip: {
fontSize: 13,
backgroundColor: colors.lightBlueA700,
- color: 'white',
+ color: colors.white,
height: 11,
borderRadius: 14,
marginTop: 19,
@@ -150,7 +150,7 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt
<div className="bold">
{parameter.name}
</div>
- <div className="pt1" style={{color: colors.grey500, fontSize: 14}}>
+ <div className="pt1" style={{color: colors.grey, fontSize: 14}}>
{isOptional && 'optional'}
</div>
</div>
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 9abf01706..1a3b58f81 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import {Source} from 'ts/types';
+import {colors} from 'ts/utils/colors';
interface SourceLinkProps {
source: Source;
@@ -29,7 +29,7 @@ export function SourceLink(props: SourceLinkProps) {
href={sourceCodeUrl}
target="_blank"
className="underline"
- style={{color: colors.grey500}}
+ style={{color: colors.grey}}
>
Source
</a>
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 74b146d91..0516a5c68 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,24 +1,21 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
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';
-const BUILT_IN_TYPE_COLOR = '#e69d00';
-const STRING_LITERAL_COLOR = '#4da24b';
-
// 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.WEB3_DOCS_URL,
- Provider: constants.WEB3_PROVIDER_DOCS_URL,
- BigNumber: constants.BIGNUMBERJS_GITHUB_URL,
- DecodedLogEntryEvent: constants.WEB3_DECODED_LOG_ENTRY_EVENT_URL,
- LogEntryEvent: constants.WEB3_LOG_ENTRY_EVENT_URL,
+ 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} = {
@@ -56,7 +53,7 @@ export function Type(props: TypeProps): any {
case TypeDocTypes.Intrinsic:
case TypeDocTypes.Unknown:
typeName = type.name;
- typeNameColor = BUILT_IN_TYPE_COLOR;
+ typeNameColor = colors.orange;
break;
case TypeDocTypes.Reference:
@@ -90,7 +87,7 @@ export function Type(props: TypeProps): any {
case TypeDocTypes.StringLiteral:
typeName = `'${type.value}'`;
- typeNameColor = STRING_LITERAL_COLOR;
+ typeNameColor = colors.green;
break;
case TypeDocTypes.Array:
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index edcf7bf47..09413faaf 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -9,10 +9,9 @@ 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';
-const KEYWORD_COLOR = '#a81ca6';
-
interface TypeDefinitionProps {
customType: CustomType;
shouldAddId?: boolean;
@@ -76,11 +75,15 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
);
break;
- case KindString['Type alias']:
+ case KindString.TypeAlias:
typePrefix = 'Type Alias';
codeSnippet = (
<span>
- <span style={{color: KEYWORD_COLOR}}>type</span> {customType.name} ={' '}
+ <span
+ style={{color: colors.lightPurple}}
+ >
+ type
+ </span> {customType.name} ={' '}
{customType.type.typeDocType !== TypeDocTypes.Reflection ?
<Type type={customType.type} docsInfo={this.props.docsInfo} /> :
<MethodSignature
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index b3fe21da7..296e63f1d 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,11 +1,11 @@
import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import {Footer} from 'ts/components/footer';
import {TopBar} from 'ts/components/top_bar';
import {Question} from 'ts/pages/faq/question';
import {FAQQuestion, FAQSection, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
@@ -411,7 +411,7 @@ const sections: FAQSection[] = [
prompt: 'How can I get involved?',
answer: (
<div>
- Join our <a href={constants.ZEROEX_CHAT_URL} target="_blank">Rocket.chat</a>!
+ Join our <a href={constants.URL_ZEROEX_CHAT} target="_blank">Rocket.chat</a>!
As an open source project, 0x will rely on a worldwide community of passionate
developers to contribute proposals, ideas and code.
</div>
@@ -462,7 +462,7 @@ export class FAQ extends React.Component<FAQProps, FAQState> {
{this.renderSections()}
</div>
</div>
- <Footer location={this.props.location} />
+ <Footer />
</div>
);
}
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 917863e4a..534304cc8 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,6 +1,7 @@
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;
@@ -31,7 +32,7 @@ export class Question extends React.Component<QuestionProps, QuestionState> {
<CardHeader
title={this.props.prompt}
style={{borderBottom: this.state.isExpanded ? '1px solid rgba(0, 0, 0, 0.19)' : 'none'}}
- titleStyle={{color: 'rgb(66, 66, 66)'}}
+ titleStyle={{color: colors.darkerGrey}}
actAsExpander={true}
showExpandableButton={true}
/>
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 7992c7a6c..3d9ebe099 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,12 +1,12 @@
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import {Link} from 'react-router-dom';
import {Footer} from 'ts/components/footer';
import {TopBar} from 'ts/components/top_bar';
import {ScreenWidths, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
@@ -35,11 +35,6 @@ interface Project {
}
const THROTTLE_TIMEOUT = 100;
-const CUSTOM_HERO_BACKGROUND_COLOR = '#404040';
-const CUSTOM_PROJECTS_BACKGROUND_COLOR = '#343333';
-const CUSTOM_WHITE_BACKGROUND = 'rgb(245, 245, 245)';
-const CUSTOM_WHITE_TEXT = '#E4E4E4';
-const CUSTOM_GRAY_TEXT = '#919191';
const boxContents: BoxContent[] = [
{
@@ -70,67 +65,67 @@ const boxContents: BoxContent[] = [
const projects: Project[] = [
{
logoFileName: 'ethfinex-top.png',
- projectUrl: constants.ETHFINEX_URL,
+ projectUrl: constants.PROJECT_URL_ETHFINEX,
},
{
logoFileName: 'radar_relay_top.png',
- projectUrl: constants.RADAR_RELAY_URL,
+ projectUrl: constants.PROJECT_URL_RADAR_RELAY,
},
{
logoFileName: 'paradex_top.png',
- projectUrl: constants.PARADEX_URL,
+ projectUrl: constants.PROJECT_URL_PARADEX,
},
{
logoFileName: 'the_ocean.png',
- projectUrl: constants.OCEAN_URL,
+ projectUrl: constants.PROJECT_URL_0CEAN,
},
{
logoFileName: 'dydx.png',
- projectUrl: constants.DYDX_URL,
+ projectUrl: constants.PROJECT_URL_DYDX,
},
{
logoFileName: 'melonport.png',
- projectUrl: constants.MELONPORT_URL,
+ projectUrl: constants.PROJECT_URL_MELONPORT,
},
{
logoFileName: 'maker.png',
- projectUrl: constants.MAKER_URL,
+ projectUrl: constants.PROJECT_URL_MAKER,
},
{
logoFileName: 'dharma.png',
- projectUrl: constants.DHARMA_URL,
+ projectUrl: constants.PROJECT_URL_DHARMA,
},
{
logoFileName: 'lendroid.png',
- projectUrl: constants.LENDROID_URL,
+ projectUrl: constants.PROJECT_URL_LENDROID,
},
{
logoFileName: 'district0x.png',
- projectUrl: constants.DISTRICT_0X_URL,
+ projectUrl: constants.PROJECT_URL_DISTRICT_0X,
},
{
logoFileName: 'aragon.png',
- projectUrl: constants.ARAGON_URL,
+ projectUrl: constants.PROJECT_URL_ARAGON,
},
{
logoFileName: 'blocknet.png',
- projectUrl: constants.BLOCKNET_URL,
+ projectUrl: constants.PROJECT_URL_BLOCKNET,
},
{
logoFileName: 'status.png',
- projectUrl: constants.STATUS_URL,
+ projectUrl: constants.PROJECT_URL_STATUS,
},
{
logoFileName: 'augur.png',
- projectUrl: constants.AUGUR_URL,
+ projectUrl: constants.PROJECT_URL_AUGUR,
},
{
logoFileName: 'anx.png',
- projectUrl: constants.OPEN_ANX_URL,
+ projectUrl: constants.PROJECT_URL_OPEN_ANX,
},
{
logoFileName: 'auctus.png',
- projectUrl: constants.AUCTUS_URL,
+ projectUrl: constants.PROJECT_URL_AUCTUS,
},
];
@@ -160,13 +155,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
public render() {
return (
- <div id="landing" className="clearfix" style={{color: colors.grey800}}>
+ <div id="landing" className="clearfix" style={{color: colors.grey500}}>
<DocumentTitle title="0x Protocol"/>
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
isNightVersion={true}
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR, position: 'relative'}}
+ style={{backgroundColor: colors.heroGrey, position: 'relative'}}
/>
{this.renderHero()}
{this.renderProjects()}
@@ -176,12 +171,12 @@ export class Landing extends React.Component<LandingProps, LandingState> {
{this.renderBuildingBlocksSection()}
{this.renderUseCases()}
{this.renderCallToAction()}
- <Footer location={this.props.location} />
+ <Footer />
</div>
);
}
private renderHero() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const buttonLabelStyle: React.CSSProperties = {
textTransform: 'none',
fontSize: isSmallScreen ? 12 : 14,
@@ -197,7 +192,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix py4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGrey}}
>
<div
className="mx-auto max-width-4 clearfix"
@@ -211,7 +206,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className={left}
- style={{color: 'white'}}
+ style={{color: colors.white}}
>
<div style={{paddingLeft: isSmallScreen ? 0 : 12}}>
<div
@@ -241,7 +236,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div className="col col-6 sm-center">
<a
- href={constants.ZEROEX_CHAT_URL}
+ href={constants.URL_ZEROEX_CHAT}
target="_blank"
className="text-decoration-none"
>
@@ -249,7 +244,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
style={{borderRadius: 6, minWidth: 150}}
buttonStyle={lightButtonStyle}
labelColor="white"
- backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR}
+ backgroundColor={colors.heroGrey}
labelStyle={buttonLabelStyle}
label="Join the community"
onClick={_.noop}
@@ -265,8 +260,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderProjects() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
- const isMediumScreen = this.state.screenWidth === ScreenWidths.MD;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+ const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
const projectList = _.map(projects, (project: Project, i: number) => {
const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2));
return (
@@ -291,7 +286,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
});
const titleStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
- color: '#A4A4A4',
+ color: colors.grey,
textTransform: 'uppercase',
fontWeight: 300,
letterSpacing: 3,
@@ -299,7 +294,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix py4"
- style={{backgroundColor: CUSTOM_PROJECTS_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.projectsGrey}}
>
<div className="mx-auto max-width-4 clearfix sm-px3">
<div
@@ -313,13 +308,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className="pt3 mx-auto center"
- style={{color: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
+ style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}}
>
view the{' '}
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
className="text-decoration-none underline"
- style={{color: CUSTOM_GRAY_TEXT}}
+ style={{color: colors.landingLinkGrey}}
>
full list
</Link>
@@ -329,11 +324,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderTokenizationSection() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div
className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2"
- style={{backgroundColor: CUSTOM_WHITE_BACKGROUND}}
+ style={{backgroundColor: colors.grey100}}
>
<div className="mx-auto max-width-4 py4 clearfix">
{isSmallScreen &&
@@ -382,11 +377,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderProtocolSection() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div
className="clearfix lg-py4 md-py4 sm-pt4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGrey}}
>
<div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
<div className="col lg-col-6 md-col-6 col-12 sm-center">
@@ -397,7 +392,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
- style={{color: CUSTOM_WHITE_TEXT, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
+ style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}}
>
<div
className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
@@ -420,7 +415,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div>
<div
className="pt3 sm-mx-auto sm-px3"
- style={{color: CUSTOM_GRAY_TEXT, maxWidth: isSmallScreen ? 412 : 'none'}}
+ style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}}
>
<div className="flex" style={{fontSize: 18}}>
<div
@@ -433,7 +428,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<Link
to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
className="text-decoration-none underline"
- style={{color: CUSTOM_GRAY_TEXT, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}}
>
view all
</Link>
@@ -468,7 +463,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderBuildingBlocksSection() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const descriptionStyle: React.CSSProperties = {
fontFamily: 'Roboto Mono',
lineHeight: isSmallScreen ? 1.5 : 2,
@@ -485,7 +480,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix lg-pt4 md-pt4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGrey}}
>
<div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
{isSmallScreen &&
@@ -493,7 +488,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
}
<div
className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
- style={{color: CUSTOM_WHITE_TEXT}}
+ style={{color: colors.beigeWhite}}
>
<div
className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
@@ -517,7 +512,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<Link
to={WebsitePaths.ZeroExJs}
className="text-decoration-none underline"
- style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
>
0x.js
</Link>
@@ -525,7 +520,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
<Link
to={WebsitePaths.SmartContracts}
className="text-decoration-none underline"
- style={{color: CUSTOM_WHITE_TEXT, fontFamily: 'Roboto Mono'}}
+ style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}}
>
smart contract
</Link>
@@ -540,7 +535,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderBlockChipImage() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 sm-center">
<img
@@ -551,7 +546,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderTokenCloud() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
return (
<div className="col lg-col-6 md-col-6 col-12 center">
<img
@@ -562,7 +557,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderAssetTypes() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const assetTypes: AssetType[] = [
{
title: 'Currency',
@@ -601,11 +596,11 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return assets;
}
private renderInfoBoxes() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const boxStyle: React.CSSProperties = {
maxWidth: 252,
height: 386,
- backgroundColor: '#F9F9F9',
+ backgroundColor: colors.grey50,
borderRadius: 5,
padding: '10px 24px 24px',
};
@@ -642,7 +637,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGrey}}
>
<div
className="mx-auto py4 sm-mt2 clearfix"
@@ -654,7 +649,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderUseCases() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const useCases: UseCase[] = [
{
@@ -709,14 +704,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
const cases = _.map(useCases, (useCase: UseCase) => {
const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
const useCaseBoxStyle = {
- color: '#A2A2A2',
+ color: colors.grey,
border: '1px solid #565656',
borderRadius: 4,
maxWidth: isSmallScreen ? 375 : 'none',
...style,
};
const typeStyle: React.CSSProperties = {
- color: '#EBEBEB',
+ color: colors.lightGrey,
fontSize: 13,
textTransform: 'uppercase',
fontFamily: 'Roboto Mono',
@@ -753,7 +748,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix pb4 lg-pt2 md-pt2 sm-pt4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGrey}}
>
<div
className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix"
@@ -765,7 +760,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
);
}
private renderCallToAction() {
- const isSmallScreen = this.state.screenWidth === ScreenWidths.SM;
+ const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
const buttonLabelStyle: React.CSSProperties = {
textTransform: 'none',
fontSize: 15,
@@ -782,14 +777,14 @@ export class Landing extends React.Component<LandingProps, LandingState> {
return (
<div
className="clearfix pb4"
- style={{backgroundColor: CUSTOM_HERO_BACKGROUND_COLOR}}
+ style={{backgroundColor: colors.heroGrey}}
>
<div
className="mx-auto max-width-4 pb4 mb3 clearfix"
>
<div
className={callToActionClassNames}
- style={{fontFamily: 'Roboto Mono', color: 'white', lineHeight: isSmallScreen ? 1.7 : 3}}
+ style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}}
>
Get started on building the decentralized future
</div>
@@ -799,7 +794,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
style={{borderRadius: 6, minWidth: 150}}
buttonStyle={lightButtonStyle}
labelColor={colors.white}
- backgroundColor={CUSTOM_HERO_BACKGROUND_COLOR}
+ backgroundColor={colors.heroGrey}
labelStyle={buttonLabelStyle}
label="Build on 0x"
onClick={_.noop}
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index df505792d..bdf9ad688 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -38,7 +38,7 @@ export class NotFound extends React.Component<NotFoundProps, NotFoundState> {
</div>
</div>
</div>
- <Footer location={this.props.location} />
+ <Footer />
</div>
);
}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 15ec44399..fcbfaf1cf 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -1,10 +1,10 @@
import * as _ from 'lodash';
import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
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';
@@ -55,7 +55,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
containerId={constants.DOCS_CONTAINER_ID}
>
<div
- style={{color: colors.grey500, cursor: 'pointer'}}
+ style={{color: colors.grey, cursor: 'pointer'}}
className="pb1"
>
{finalSectionName.toUpperCase()}
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 2447a24a2..af5b26631 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,6 +1,5 @@
import * as _ from 'lodash';
import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import {
@@ -11,6 +10,7 @@ import {MarkdownSection} from 'ts/pages/shared/markdown_section';
import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
import {SectionHeader} from 'ts/pages/shared/section_header';
import {Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths} from 'ts/types';
+import {colors} from 'ts/utils/colors';
import {configs} from 'ts/utils/configs';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';
@@ -112,7 +112,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
>
<div id="0xProtocolWiki" />
<h1 className="md-pl2 sm-pl3">
- <a href={constants.GITHUB_WIKI_URL} target="_blank">
+ <a href={constants.URL_GITHUB_WIKI} target="_blank">
0x Protocol Wiki
</a>
</h1>
@@ -134,7 +134,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
private renderSection(sectionName: string) {
const articles = this.state.articlesBySection[sectionName];
const renderedArticles = _.map(articles, (article: Article) => {
- const githubLink = `${constants.GITHUB_WIKI_URL}/edit/master/${sectionName}/${article.fileName}`;
+ const githubLink = `${constants.URL_GITHUB_WIKI}/edit/master/${sectionName}/${article.fileName}`;
return (
<div key={`markdown-section-${article.title}`}>
<MarkdownSection
@@ -143,7 +143,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
headerSize={HeaderSizes.H2}
githubLink={githubLink}
/>
- <div className="mb4 mt3 p3 center" style={{backgroundColor: '#f9f5ef'}}>
+ <div className="mb4 mt3 p3 center" style={{backgroundColor: colors.lightestGrey}}>
See a way to make this article better?{' '}
<a
href={githubLink}
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index cbcee6599..ad5553c58 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -5,7 +5,6 @@ import {
ActionTypes,
AssetToken,
BlockchainErrs,
- Direction,
Order,
ProviderType,
ScreenWidths,
@@ -23,48 +22,42 @@ export class Dispatcher {
// Portal
public resetState() {
this.dispatch({
- type: ActionTypes.RESET_STATE,
+ type: ActionTypes.ResetState,
});
}
public updateNodeVersion(nodeVersion: string) {
this.dispatch({
data: nodeVersion,
- type: ActionTypes.UPDATE_NODE_VERSION,
+ type: ActionTypes.UpdateNodeVersion,
});
}
public updateScreenWidth(screenWidth: ScreenWidths) {
this.dispatch({
data: screenWidth,
- type: ActionTypes.UPDATE_SCREEN_WIDTH,
+ type: ActionTypes.UpdateScreenWidth,
});
}
public swapAssetTokenSymbols() {
this.dispatch({
- type: ActionTypes.SWAP_ASSET_TOKENS,
- });
- }
- public updateGenerateOrderStep(direction: Direction) {
- this.dispatch({
- data: direction,
- type: ActionTypes.UPDATE_GENERATE_ORDER_STEP,
+ type: ActionTypes.SwapAssetTokens,
});
}
public updateOrderSalt(salt: BigNumber) {
this.dispatch({
data: salt,
- type: ActionTypes.UPDATE_ORDER_SALT,
+ type: ActionTypes.UpdateOrderSalt,
});
}
public updateUserSuppliedOrderCache(order: Order) {
this.dispatch({
data: order,
- type: ActionTypes.UPDATE_USER_SUPPLIED_ORDER_CACHE,
+ type: ActionTypes.UpdateUserSuppliedOrderCache,
});
}
public updateShouldBlockchainErrDialogBeOpen(shouldBeOpen: boolean) {
this.dispatch({
data: shouldBeOpen,
- type: ActionTypes.UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN,
+ type: ActionTypes.UpdateShouldBlockchainErrDialogBeOpen,
});
}
public updateChosenAssetToken(side: Side, token: AssetToken) {
@@ -73,7 +66,7 @@ export class Dispatcher {
side,
token,
},
- type: ActionTypes.UPDATE_CHOSEN_ASSET_TOKEN,
+ type: ActionTypes.UpdateChosenAssetToken,
});
}
public updateChosenAssetTokenAddress(side: Side, address: string) {
@@ -82,72 +75,72 @@ export class Dispatcher {
address,
side,
},
- type: ActionTypes.UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS,
+ type: ActionTypes.UpdateChosenAssetTokenAddress,
});
}
public updateOrderTakerAddress(address: string) {
this.dispatch({
data: address,
- type: ActionTypes.UPDATE_ORDER_TAKER_ADDRESS,
+ type: ActionTypes.UpdateOrderTakerAddress,
});
}
public updateUserAddress(address: string) {
this.dispatch({
data: address,
- type: ActionTypes.UPDATE_USER_ADDRESS,
+ type: ActionTypes.UpdateUserAddress,
});
}
public updateOrderExpiry(unixTimestampSec: BigNumber) {
this.dispatch({
data: unixTimestampSec,
- type: ActionTypes.UPDATE_ORDER_EXPIRY,
+ type: ActionTypes.UpdateOrderExpiry,
});
}
public encounteredBlockchainError(err: BlockchainErrs) {
this.dispatch({
data: err,
- type: ActionTypes.BLOCKCHAIN_ERR_ENCOUNTERED,
+ type: ActionTypes.BlockchainErrEncountered,
});
}
public updateBlockchainIsLoaded(isLoaded: boolean) {
this.dispatch({
data: isLoaded,
- type: ActionTypes.UPDATE_BLOCKCHAIN_IS_LOADED,
+ type: ActionTypes.UpdateBlockchainIsLoaded,
});
}
public addTokenToTokenByAddress(token: Token) {
this.dispatch({
data: token,
- type: ActionTypes.ADD_TOKEN_TO_TOKEN_BY_ADDRESS,
+ type: ActionTypes.AddTokenToTokenByAddress,
});
}
public removeTokenToTokenByAddress(token: Token) {
this.dispatch({
data: token,
- type: ActionTypes.REMOVE_TOKEN_TO_TOKEN_BY_ADDRESS,
+ type: ActionTypes.RemoveTokenFromTokenByAddress,
});
}
public clearTokenByAddress() {
this.dispatch({
- type: ActionTypes.CLEAR_TOKEN_BY_ADDRESS,
+ type: ActionTypes.ClearTokenByAddress,
});
}
public updateTokenByAddress(tokens: Token[]) {
this.dispatch({
data: tokens,
- type: ActionTypes.UPDATE_TOKEN_BY_ADDRESS,
+ type: ActionTypes.UpdateTokenByAddress,
});
}
public updateTokenStateByAddress(tokenStateByAddress: TokenStateByAddress) {
this.dispatch({
data: tokenStateByAddress,
- type: ActionTypes.UPDATE_TOKEN_STATE_BY_ADDRESS,
+ type: ActionTypes.UpdateTokenStateByAddress,
});
}
public removeFromTokenStateByAddress(tokenAddress: string) {
this.dispatch({
data: tokenAddress,
- type: ActionTypes.REMOVE_FROM_TOKEN_STATE_BY_ADDRESS,
+ type: ActionTypes.RemoveFromTokenStateByAddress,
});
}
public replaceTokenAllowanceByAddress(address: string, allowance: BigNumber) {
@@ -156,7 +149,7 @@ export class Dispatcher {
address,
allowance,
},
- type: ActionTypes.REPLACE_TOKEN_ALLOWANCE_BY_ADDRESS,
+ type: ActionTypes.ReplaceTokenAllowanceByAddress,
});
}
public replaceTokenBalanceByAddress(address: string, balance: BigNumber) {
@@ -165,7 +158,7 @@ export class Dispatcher {
address,
balance,
},
- type: ActionTypes.REPLACE_TOKEN_BALANCE_BY_ADDRESS,
+ type: ActionTypes.ReplaceTokenBalanceByAddress,
});
}
public updateTokenBalanceByAddress(address: string, balanceDelta: BigNumber) {
@@ -174,31 +167,31 @@ export class Dispatcher {
address,
balanceDelta,
},
- type: ActionTypes.UPDATE_TOKEN_BALANCE_BY_ADDRESS,
+ type: ActionTypes.UpdateTokenBalanceByAddress,
});
}
public updateSignatureData(signatureData: SignatureData) {
this.dispatch({
data: signatureData,
- type: ActionTypes.UPDATE_ORDER_SIGNATURE_DATA,
+ type: ActionTypes.UpdateOrderSignatureData,
});
}
public updateUserEtherBalance(balance: BigNumber) {
this.dispatch({
data: balance,
- type: ActionTypes.UPDATE_USER_ETHER_BALANCE,
+ type: ActionTypes.UpdateUserEtherBalance,
});
}
public updateNetworkId(networkId: number) {
this.dispatch({
data: networkId,
- type: ActionTypes.UPDATE_NETWORK_ID,
+ type: ActionTypes.UpdateNetworkId,
});
}
public updateOrderFillAmount(amount: BigNumber) {
this.dispatch({
data: amount,
- type: ActionTypes.UPDATE_ORDER_FILL_AMOUNT,
+ type: ActionTypes.UpdateOrderFillAmount,
});
}
@@ -206,13 +199,13 @@ export class Dispatcher {
public updateCurrentDocsVersion(version: string) {
this.dispatch({
data: version,
- type: ActionTypes.UPDATE_LIBRARY_VERSION,
+ type: ActionTypes.UpdateLibraryVersion,
});
}
public updateAvailableDocVersions(versions: string[]) {
this.dispatch({
data: versions,
- type: ActionTypes.UPDATE_AVAILABLE_LIBRARY_VERSIONS,
+ type: ActionTypes.UpdateAvailableLibraryVersions,
});
}
@@ -220,23 +213,23 @@ export class Dispatcher {
public showFlashMessage(msg: string|React.ReactNode) {
this.dispatch({
data: msg,
- type: ActionTypes.SHOW_FLASH_MESSAGE,
+ type: ActionTypes.ShowFlashMessage,
});
}
public hideFlashMessage() {
this.dispatch({
- type: ActionTypes.HIDE_FLASH_MESSAGE,
+ type: ActionTypes.HideFlashMessage,
});
}
public updateProviderType(providerType: ProviderType) {
this.dispatch({
- type: ActionTypes.UPDATE_PROVIDER_TYPE,
+ type: ActionTypes.UpdateProviderType,
data: providerType,
});
}
public updateInjectedProviderName(injectedProviderName: string) {
this.dispatch({
- type: ActionTypes.UPDATE_INJECTED_PROVIDER_NAME,
+ type: ActionTypes.UpdateInjectedProviderName,
data: injectedProviderName,
});
}
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index da69a9d00..ccf87ae18 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -5,8 +5,6 @@ import {
Action,
ActionTypes,
BlockchainErrs,
- Direction,
- GenerateOrderSteps,
Order,
ProviderType,
ScreenWidths,
@@ -28,7 +26,6 @@ export interface State {
// Portal
blockchainErr: BlockchainErrs;
blockchainIsLoaded: boolean;
- generateOrderStep: GenerateOrderSteps;
networkId: number;
orderExpiryTimestamp: BigNumber;
orderFillAmount: BigNumber;
@@ -58,9 +55,8 @@ export interface State {
const INITIAL_STATE: State = {
// Portal
- blockchainErr: '',
+ blockchainErr: BlockchainErrs.NoError,
blockchainIsLoaded: false,
- generateOrderStep: GenerateOrderSteps.ChooseAssets,
networkId: undefined,
orderExpiryTimestamp: utils.initialOrderExpiryUnixTimestampSec(),
orderFillAmount: undefined,
@@ -76,8 +72,8 @@ const INITIAL_STATE: State = {
screenWidth: utils.getScreenWidth(),
shouldBlockchainErrDialogBeOpen: false,
sideToAssetToken: {
- [Side.deposit]: {},
- [Side.receive]: {},
+ [Side.Deposit]: {},
+ [Side.Receive]: {},
},
tokenByAddress: {},
tokenStateByAddress: {},
@@ -91,270 +87,300 @@ const INITIAL_STATE: State = {
// Shared
flashMessage: undefined,
- providerType: ProviderType.INJECTED,
+ providerType: ProviderType.Injected,
injectedProviderName: '',
};
export function reducer(state: State = INITIAL_STATE, action: Action) {
switch (action.type) {
// Portal
- case ActionTypes.RESET_STATE:
+ case ActionTypes.ResetState:
return INITIAL_STATE;
- case ActionTypes.UPDATE_ORDER_SALT: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateOrderSalt: {
+ return {
+ ...state,
orderSalt: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_NODE_VERSION: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateNodeVersion: {
+ return {
+ ...state,
nodeVersion: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_ORDER_FILL_AMOUNT: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateOrderFillAmount: {
+ return {
+ ...state,
orderFillAmount: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateShouldBlockchainErrDialogBeOpen: {
+ return {
+ ...state,
shouldBlockchainErrDialogBeOpen: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_USER_ETHER_BALANCE: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateUserEtherBalance: {
+ return {
+ ...state,
userEtherBalance: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_USER_SUPPLIED_ORDER_CACHE: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateUserSuppliedOrderCache: {
+ return {
+ ...state,
userSuppliedOrderCache: action.data,
- });
+ };
}
- case ActionTypes.CLEAR_TOKEN_BY_ADDRESS: {
- return _.assign({}, state, {
+ case ActionTypes.ClearTokenByAddress: {
+ return {
+ ...state,
tokenByAddress: {},
- });
+ };
}
- case ActionTypes.ADD_TOKEN_TO_TOKEN_BY_ADDRESS: {
+ case ActionTypes.AddTokenToTokenByAddress: {
const newTokenByAddress = state.tokenByAddress;
newTokenByAddress[action.data.address] = action.data;
- return _.assign({}, state, {
+ return {
+ ...state,
tokenByAddress: newTokenByAddress,
- });
+ };
}
- case ActionTypes.REMOVE_TOKEN_TO_TOKEN_BY_ADDRESS: {
+ case ActionTypes.RemoveTokenFromTokenByAddress: {
const newTokenByAddress = state.tokenByAddress;
delete newTokenByAddress[action.data.address];
- return _.assign({}, state, {
+ return {
+ ...state,
tokenByAddress: newTokenByAddress,
- });
+ };
}
- case ActionTypes.UPDATE_TOKEN_BY_ADDRESS: {
+ case ActionTypes.UpdateTokenByAddress: {
const tokenByAddress = state.tokenByAddress;
const tokens = action.data;
_.each(tokens, token => {
- const updatedToken = _.assign({}, tokenByAddress[token.address], token);
+ const updatedToken = {
+ ...tokenByAddress[token.address],
+ ...token,
+ };
tokenByAddress[token.address] = updatedToken;
});
- return _.assign({}, state, {
+ return {
+ ...state,
tokenByAddress,
- });
+ };
}
- case ActionTypes.UPDATE_TOKEN_STATE_BY_ADDRESS: {
+ case ActionTypes.UpdateTokenStateByAddress: {
const tokenStateByAddress = state.tokenStateByAddress;
const updatedTokenStateByAddress = action.data;
_.each(updatedTokenStateByAddress, (tokenState: TokenState, address: string) => {
- const updatedTokenState = _.assign({}, tokenStateByAddress[address], tokenState);
+ const updatedTokenState = {
+ ...tokenStateByAddress[address],
+ ...tokenState,
+ };
tokenStateByAddress[address] = updatedTokenState;
});
- return _.assign({}, state, {
+ return {
+ ...state,
tokenStateByAddress,
- });
+ };
}
- case ActionTypes.REMOVE_FROM_TOKEN_STATE_BY_ADDRESS: {
+ case ActionTypes.RemoveFromTokenStateByAddress: {
const tokenStateByAddress = state.tokenStateByAddress;
const tokenAddress = action.data;
delete tokenStateByAddress[tokenAddress];
- return _.assign({}, state, {
+ return {
+ ...state,
tokenStateByAddress,
- });
+ };
}
- case ActionTypes.REPLACE_TOKEN_ALLOWANCE_BY_ADDRESS: {
+ case ActionTypes.ReplaceTokenAllowanceByAddress: {
const tokenStateByAddress = state.tokenStateByAddress;
const allowance = action.data.allowance;
const tokenAddress = action.data.address;
- tokenStateByAddress[tokenAddress] = _.assign({}, tokenStateByAddress[tokenAddress], {
+ tokenStateByAddress[tokenAddress] = {
+ ...tokenStateByAddress[tokenAddress],
allowance,
- });
- return _.assign({}, state, {
+ };
+ return {
+ ...state,
tokenStateByAddress,
- });
+ };
}
- case ActionTypes.REPLACE_TOKEN_BALANCE_BY_ADDRESS: {
+ case ActionTypes.ReplaceTokenBalanceByAddress: {
const tokenStateByAddress = state.tokenStateByAddress;
const balance = action.data.balance;
const tokenAddress = action.data.address;
- tokenStateByAddress[tokenAddress] = _.assign({}, tokenStateByAddress[tokenAddress], {
+ tokenStateByAddress[tokenAddress] = {
+ ...tokenStateByAddress[tokenAddress],
balance,
- });
- return _.assign({}, state, {
+ };
+ return {
+ ...state,
tokenStateByAddress,
- });
+ };
}
- case ActionTypes.UPDATE_TOKEN_BALANCE_BY_ADDRESS: {
+ case ActionTypes.UpdateTokenBalanceByAddress: {
const tokenStateByAddress = state.tokenStateByAddress;
const balanceDelta = action.data.balanceDelta;
const tokenAddress = action.data.address;
const currBalance = tokenStateByAddress[tokenAddress].balance;
- tokenStateByAddress[tokenAddress] = _.assign({}, tokenStateByAddress[tokenAddress], {
+ tokenStateByAddress[tokenAddress] = {
+ ...tokenStateByAddress[tokenAddress],
balance: currBalance.plus(balanceDelta),
- });
- return _.assign({}, state, {
+ };
+ return {
+ ...state,
tokenStateByAddress,
- });
+ };
}
- case ActionTypes.UPDATE_ORDER_SIGNATURE_DATA: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateOrderSignatureData: {
+ return {
+ ...state,
orderSignatureData: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_SCREEN_WIDTH: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateScreenWidth: {
+ return {
+ ...state,
screenWidth: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_BLOCKCHAIN_IS_LOADED: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateBlockchainIsLoaded: {
+ return {
+ ...state,
blockchainIsLoaded: action.data,
- });
+ };
}
- case ActionTypes.BLOCKCHAIN_ERR_ENCOUNTERED: {
- return _.assign({}, state, {
+ case ActionTypes.BlockchainErrEncountered: {
+ return {
+ ...state,
blockchainErr: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_NETWORK_ID: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateNetworkId: {
+ return {
+ ...state,
networkId: action.data,
- });
- }
-
- case ActionTypes.UPDATE_GENERATE_ORDER_STEP: {
- const direction = action.data;
- let nextGenerateOrderStep = state.generateOrderStep;
- if (direction === Direction.forward) {
- nextGenerateOrderStep += 1;
- } else if (state.generateOrderStep !== 0) {
- nextGenerateOrderStep -= 1;
- }
- return _.assign({}, state, {
- generateOrderStep: nextGenerateOrderStep,
- });
+ };
}
- case ActionTypes.UPDATE_CHOSEN_ASSET_TOKEN: {
- const newSideToAssetToken = _.assign({}, state.sideToAssetToken, {
+ case ActionTypes.UpdateChosenAssetToken: {
+ const newSideToAssetToken = {
+ ...state.sideToAssetToken,
[action.data.side]: action.data.token,
- });
- return _.assign({}, state, {
+ };
+ return {
+ ...state,
sideToAssetToken: newSideToAssetToken,
- });
+ };
}
- case ActionTypes.UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS: {
+ case ActionTypes.UpdateChosenAssetTokenAddress: {
const newAssetToken = state.sideToAssetToken[action.data.side];
newAssetToken.address = action.data.address;
- const newSideToAssetToken = _.assign({}, state.sideToAssetToken, {
+ const newSideToAssetToken = {
+ ...state.sideToAssetToken,
[action.data.side]: newAssetToken,
- });
- return _.assign({}, state, {
+ };
+ return {
+ ...state,
sideToAssetToken: newSideToAssetToken,
- });
+ };
}
- case ActionTypes.SWAP_ASSET_TOKENS: {
- const newSideToAssetToken = _.assign({}, state.sideToAssetToken, {
- [Side.deposit]: state.sideToAssetToken[Side.receive],
- [Side.receive]: state.sideToAssetToken[Side.deposit],
- });
- return _.assign({}, state, {
+ case ActionTypes.SwapAssetTokens: {
+ const newSideToAssetToken = {
+ [Side.Deposit]: state.sideToAssetToken[Side.Receive],
+ [Side.Receive]: state.sideToAssetToken[Side.Deposit],
+ };
+ return {
+ ...state,
sideToAssetToken: newSideToAssetToken,
- });
+ };
}
- case ActionTypes.UPDATE_ORDER_EXPIRY: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateOrderExpiry: {
+ return {
+ ...state,
orderExpiryTimestamp: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_ORDER_TAKER_ADDRESS: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateOrderTakerAddress: {
+ return {
+ ...state,
orderTakerAddress: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_USER_ADDRESS: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateUserAddress: {
+ return {
+ ...state,
userAddress: action.data,
- });
+ };
}
// Docs
- case ActionTypes.UPDATE_LIBRARY_VERSION: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateLibraryVersion: {
+ return {
+ ...state,
docsVersion: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_AVAILABLE_LIBRARY_VERSIONS: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateAvailableLibraryVersions: {
+ return {
+ ...state,
availableDocVersions: action.data,
- });
+ };
}
// Shared
- case ActionTypes.SHOW_FLASH_MESSAGE: {
- return _.assign({}, state, {
+ case ActionTypes.ShowFlashMessage: {
+ return {
+ ...state,
flashMessage: action.data,
- });
+ };
}
- case ActionTypes.HIDE_FLASH_MESSAGE: {
- return _.assign({}, state, {
+ case ActionTypes.HideFlashMessage: {
+ return {
+ ...state,
flashMessage: undefined,
- });
+ };
}
- case ActionTypes.UPDATE_PROVIDER_TYPE: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateProviderType: {
+ return {
+ ...state,
providerType: action.data,
- });
+ };
}
- case ActionTypes.UPDATE_INJECTED_PROVIDER_NAME: {
- return _.assign({}, state, {
+ case ActionTypes.UpdateInjectedProviderName: {
+ return {
+ ...state,
injectedProviderName: action.data,
- });
+ };
}
default:
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2005cf265..e4b05367f 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,41 +1,10 @@
import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
-// Utility function to create a K:V from a list of strings
-// Adapted from: https://basarat.gitbooks.io/typescript/content/docs/types/literal-types.html
-function strEnum(values: string[]): {[key: string]: string} {
- return _.reduce(values, (result, key) => {
- result[key] = key;
- return result;
- }, Object.create(null));
-}
-
-export enum GenerateOrderSteps {
- ChooseAssets,
- GrantAllowance,
- RemainingConfigs,
- SignTransaction,
- CopyAndShare,
-}
-
-export const Side = strEnum([
- 'receive',
- 'deposit',
-]);
-export type Side = keyof typeof Side;
-
-export const BlockchainErrs = strEnum([
- 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
- 'DISCONNECTED_FROM_ETHEREUM_NODE',
- 'UNHANDLED_ERROR',
-]);
-export type BlockchainErrs = keyof typeof BlockchainErrs;
-
-export const Direction = strEnum([
- 'forward',
- 'backward',
-]);
-export type Direction = keyof typeof Direction;
+export enum Side {
+ Receive = 'RECEIVE',
+ Deposit = 'DEPOSIT',
+}
export interface Token {
iconUrl?: string;
@@ -139,48 +108,46 @@ export enum BalanceErrs {
allowanceSettingFailed,
}
-export const ActionTypes = strEnum([
+export enum ActionTypes {
// Portal
- 'UPDATE_SCREEN_WIDTH',
- 'UPDATE_NODE_VERSION',
- 'RESET_STATE',
- 'ADD_TOKEN_TO_TOKEN_BY_ADDRESS',
- 'BLOCKCHAIN_ERR_ENCOUNTERED',
- 'CLEAR_TOKEN_BY_ADDRESS',
- 'UPDATE_BLOCKCHAIN_IS_LOADED',
- 'UPDATE_NETWORK_ID',
- 'UPDATE_GENERATE_ORDER_STEP',
- 'UPDATE_CHOSEN_ASSET_TOKEN',
- 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS',
- 'UPDATE_ORDER_TAKER_ADDRESS',
- 'UPDATE_ORDER_SALT',
- 'UPDATE_ORDER_SIGNATURE_DATA',
- 'UPDATE_TOKEN_BY_ADDRESS',
- 'REMOVE_TOKEN_TO_TOKEN_BY_ADDRESS',
- 'UPDATE_TOKEN_STATE_BY_ADDRESS',
- 'REMOVE_FROM_TOKEN_STATE_BY_ADDRESS',
- 'REPLACE_TOKEN_ALLOWANCE_BY_ADDRESS',
- 'REPLACE_TOKEN_BALANCE_BY_ADDRESS',
- 'UPDATE_TOKEN_BALANCE_BY_ADDRESS',
- 'UPDATE_ORDER_EXPIRY',
- 'SWAP_ASSET_TOKENS',
- 'UPDATE_USER_ADDRESS',
- 'UPDATE_USER_ETHER_BALANCE',
- 'UPDATE_USER_SUPPLIED_ORDER_CACHE',
- 'UPDATE_ORDER_FILL_AMOUNT',
- 'UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN',
+ UpdateScreenWidth = 'UPDATE_SCREEN_WIDTH',
+ UpdateNodeVersion = 'UPDATE_NODE_VERSION',
+ ResetState = 'RESET_STATE',
+ AddTokenToTokenByAddress = 'ADD_TOKEN_TO_TOKEN_BY_ADDRESS',
+ BlockchainErrEncountered = 'BLOCKCHAIN_ERR_ENCOUNTERED',
+ ClearTokenByAddress = 'CLEAR_TOKEN_BY_ADDRESS',
+ UpdateBlockchainIsLoaded = 'UPDATE_BLOCKCHAIN_IS_LOADED',
+ UpdateNetworkId = 'UPDATE_NETWORK_ID',
+ UpdateChosenAssetToken = 'UPDATE_CHOSEN_ASSET_TOKEN',
+ UpdateChosenAssetTokenAddress = 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS',
+ UpdateOrderTakerAddress = 'UPDATE_ORDER_TAKER_ADDRESS',
+ UpdateOrderSalt = 'UPDATE_ORDER_SALT',
+ UpdateOrderSignatureData = 'UPDATE_ORDER_SIGNATURE_DATA',
+ UpdateTokenByAddress = 'UPDATE_TOKEN_BY_ADDRESS',
+ RemoveTokenFromTokenByAddress = 'REMOVE_TOKEN_FROM_TOKEN_BY_ADDRESS',
+ UpdateTokenStateByAddress = 'UPDATE_TOKEN_STATE_BY_ADDRESS',
+ RemoveFromTokenStateByAddress = 'REMOVE_FROM_TOKEN_STATE_BY_ADDRESS',
+ ReplaceTokenAllowanceByAddress = 'REPLACE_TOKEN_ALLOWANCE_BY_ADDRESS',
+ ReplaceTokenBalanceByAddress = 'REPLACE_TOKEN_BALANCE_BY_ADDRESS',
+ UpdateTokenBalanceByAddress = 'UPDATE_TOKEN_BALANCE_BY_ADDRESS',
+ UpdateOrderExpiry = 'UPDATE_ORDER_EXPIRY',
+ SwapAssetTokens = 'SWAP_ASSET_TOKENS',
+ UpdateUserAddress = 'UPDATE_USER_ADDRESS',
+ UpdateUserEtherBalance = 'UPDATE_USER_ETHER_BALANCE',
+ UpdateUserSuppliedOrderCache = 'UPDATE_USER_SUPPLIED_ORDER_CACHE',
+ UpdateOrderFillAmount = 'UPDATE_ORDER_FILL_AMOUNT',
+ UpdateShouldBlockchainErrDialogBeOpen = 'UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN',
// Docs
- 'UPDATE_LIBRARY_VERSION',
- 'UPDATE_AVAILABLE_LIBRARY_VERSIONS',
+ UpdateLibraryVersion = 'UPDATE_LIBRARY_VERSION',
+ UpdateAvailableLibraryVersions = 'UPDATE_AVAILABLE_LIBRARY_VERSIONS',
// Shared
- 'SHOW_FLASH_MESSAGE',
- 'HIDE_FLASH_MESSAGE',
- 'UPDATE_PROVIDER_TYPE',
- 'UPDATE_INJECTED_PROVIDER_NAME',
-]);
-export type ActionTypes = keyof typeof ActionTypes;
+ ShowFlashMessage = 'SHOW_FLASH_MESSAGE',
+ HideFlashMessage = 'HIDE_FLASH_MESSAGE',
+ UpdateProviderType = 'UPDATE_PROVIDER_TYPE',
+ UpdateInjectedProviderName = 'UPDATE_INJECTED_PROVIDER_NAME',
+}
export interface Action {
type: ActionTypes;
@@ -253,44 +220,47 @@ export interface ContractEvent {
export type InputErrMsg = React.ReactNode | string | undefined;
export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void;
-export const ScreenWidths = strEnum([
- 'SM',
- 'MD',
- 'LG',
-]);
-export type ScreenWidths = keyof typeof ScreenWidths;
+export enum ScreenWidths {
+ Sm = 'SM',
+ Md = 'MD',
+ Lg = 'LG',
+}
export enum AlertTypes {
ERROR,
SUCCESS,
}
-export const EtherscanLinkSuffixes = strEnum([
- 'address',
- 'tx',
-]);
-export type EtherscanLinkSuffixes = keyof typeof EtherscanLinkSuffixes;
-
-export const BlockchainCallErrs = strEnum([
- 'CONTRACT_DOES_NOT_EXIST',
- 'USER_HAS_NO_ASSOCIATED_ADDRESSES',
- 'UNHANDLED_ERROR',
- 'TOKEN_ADDRESS_IS_INVALID',
- 'INVALID_SIGNATURE',
-]);
-export type BlockchainCallErrs = keyof typeof BlockchainCallErrs;
-
-export const KindString = strEnum([
- 'Constructor',
- 'Property',
- 'Method',
- 'Interface',
- 'Type alias',
- 'Variable',
- 'Function',
- 'Enumeration',
-]);
-export type KindString = keyof typeof KindString;
+export enum EtherscanLinkSuffixes {
+ Address = 'address',
+ Tx = 'tx',
+}
+
+export enum BlockchainErrs {
+ AContractNotDeployedOnNetwork = 'A_CONTRACT_NOT_DEPLOYED_ON_NETWORK',
+ DisconnectedFromEthereumNode = 'DISCONNECTED_FROM_ETHEREUM_NODE',
+ NoError = 'NO_ERROR',
+}
+
+export enum BlockchainCallErrs {
+ ContractDoesNotExist = 'CONTRACT_DOES_NOT_EXIST',
+ UserHasNoAssociatedAddresses = 'USER_HAS_NO_ASSOCIATED_ADDRESSES',
+ UnhandledError = 'UNHANDLED_ERROR',
+ TokenAddressIsInvalid = 'TOKEN_ADDRESS_IS_INVALID',
+}
+
+// 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;
@@ -486,11 +456,10 @@ export interface MenuSubsectionsBySection {
[section: string]: string[];
}
-export const ProviderType = strEnum([
- 'INJECTED',
- 'LEDGER',
-]);
-export type ProviderType = keyof typeof ProviderType;
+export enum ProviderType {
+ Injected = 'INJECTED',
+ Ledger = 'LEDGER',
+}
export interface Fact {
title: string;
@@ -694,4 +663,12 @@ export interface OutdatedWrappedEtherByNetworkId {
};
}
+export enum SmartContractDocSections {
+ Introduction = 'Introduction',
+ Exchange = 'Exchange',
+ TokenTransferProxy = 'TokenTransferProxy',
+ TokenRegistry = 'TokenRegistry',
+ ZRXToken = 'ZRXToken',
+}
+
// tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
new file mode 100644
index 000000000..c65a3a622
--- /dev/null
+++ b/packages/website/ts/utils/colors.ts
@@ -0,0 +1,43 @@
+import {colors as materialUiColors} from 'material-ui/styles';
+
+export const colors = {
+ ...materialUiColors,
+ grey50: '#FAFAFA',
+ grey100: '#F5F5F5',
+ lightestGrey: '#F0F0F0',
+ greyishPink: '#E6E5E5',
+ grey300: '#E0E0E0',
+ beigeWhite: '#E4E4E4',
+ grey400: '#BDBDBD',
+ lightGrey: '#BBBBBB',
+ grey500: '#9E9E9E',
+ grey: '#A5A5A5',
+ darkGrey: '#818181',
+ landingLinkGrey: '#919191',
+ grey700: '#616161',
+ grey800: '#424242',
+ darkerGrey: '#393939',
+ heroGrey: '#404040',
+ projectsGrey: '#343333',
+ darkestGrey: '#272727',
+ dharmaDarkGrey: '#252525',
+ lightBlue: '#60A4F4',
+ lightBlueA700: '#0091EA',
+ darkBlue: '#4D5481',
+ turquois: '#058789',
+ lightPurple: '#A81CA6',
+ purple: '#690596',
+ red200: '#EF9A9A',
+ red: '#E91751',
+ red500: '#F44336',
+ red600: '#E53935',
+ limeGreen: '#66DE75',
+ lightGreen: '#4DC55C',
+ lightestGreen: '#89C774',
+ brightGreen: '#00C33E',
+ green400: '#66BB6A',
+ green: '#4DA24B',
+ amber600: '#FFB300',
+ orange: '#E69D00',
+ amber800: '#FF8F00',
+};
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 4a08929cf..4ae40d715 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -1,25 +1,105 @@
import * as _ from 'lodash';
import {
+ ContractAddresses,
Environments,
+ Networks,
OutdatedWrappedEtherByNetworkId,
+ PublicNodeUrlsByNetworkId,
+ SmartContractDocSections,
} from 'ts/types';
const BASE_URL = window.location.origin;
-const isDevelopment = _.includes(BASE_URL, 'https://0xproject.dev:3572') ||
- _.includes(BASE_URL, 'https://localhost:3572') ||
- _.includes(BASE_URL, 'https://127.0.0.1');
+const isDevelopment = _.includes([
+ 'https://0xproject.localhost:3572',
+ 'https://localhost:3572',
+ 'https://127.0.0.1',
+ ], BASE_URL);
+const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
export const configs = {
- BASE_URL,
- ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION,
BACKEND_BASE_URL: isDevelopment ? 'https://localhost:3001' : 'https://website-api.0xproject.com',
- symbolsOfMintableTokens: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
+ BASE_URL,
+ BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
+ CONTRACT_ADDRESS: {
+ '1.0.0': {
+ [Networks.mainnet]: {
+ [SmartContractDocSections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093',
+ [SmartContractDocSections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4',
+ [SmartContractDocSections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498',
+ [SmartContractDocSections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c',
+ },
+ [Networks.ropsten]: {
+ [SmartContractDocSections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac',
+ [SmartContractDocSections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6',
+ [SmartContractDocSections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d',
+ [SmartContractDocSections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed',
+ },
+ [Networks.kovan]: {
+ [SmartContractDocSections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364',
+ [SmartContractDocSections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4',
+ [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570',
+ [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f',
+ },
+ },
+ } as ContractAddresses,
+ DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
// WARNING: ZRX & WETH MUST always be default trackedTokens
- defaultTrackedTokenSymbols: ['WETH', 'ZRX'],
- lastLocalStorageFillClearanceDate: '2017-11-22',
- lastLocalStorageTrackedTokenClearanceDate: '2017-12-13',
- isMainnetEnabled: true,
- outdatedWrappedEthers: [
+ DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'],
+ DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
+ DOMAIN_DEVELOPMENT: '0xproject.localhost:3572',
+ DOMAIN_PRODUCTION: '0xproject.com',
+ ENVIRONMENT: isDevelopment ? Environments.DEVELOPMENT : Environments.PRODUCTION,
+ ICON_URL_BY_SYMBOL: {
+ 'REP': '/images/token_icons/augur.png',
+ 'DGD': '/images/token_icons/digixdao.png',
+ 'WETH': '/images/token_icons/ether_erc20.png',
+ 'MLN': '/images/token_icons/melon.png',
+ 'GNT': '/images/token_icons/golem.png',
+ 'MKR': '/images/token_icons/makerdao.png',
+ 'ZRX': '/images/token_icons/zero_ex.png',
+ 'ANT': '/images/token_icons/aragon.png',
+ 'BNT': '/images/token_icons/bancor.png',
+ 'BAT': '/images/token_icons/basicattentiontoken.png',
+ 'CVC': '/images/token_icons/civic.png',
+ 'EOS': '/images/token_icons/eos.png',
+ 'FUN': '/images/token_icons/funfair.png',
+ 'GNO': '/images/token_icons/gnosis.png',
+ 'ICN': '/images/token_icons/iconomi.png',
+ 'OMG': '/images/token_icons/omisego.png',
+ 'SNT': '/images/token_icons/status.png',
+ 'STORJ': '/images/token_icons/storjcoinx.png',
+ 'PAY': '/images/token_icons/tenx.png',
+ 'QTUM': '/images/token_icons/qtum.png',
+ 'DNT': '/images/token_icons/district0x.png',
+ 'SNGLS': '/images/token_icons/singularity.png',
+ 'EDG': '/images/token_icons/edgeless.png',
+ '1ST': '/images/token_icons/firstblood.jpg',
+ 'WINGS': '/images/token_icons/wings.png',
+ 'BQX': '/images/token_icons/bitquence.png',
+ 'LUN': '/images/token_icons/lunyr.png',
+ 'RLC': '/images/token_icons/iexec.png',
+ 'MCO': '/images/token_icons/monaco.png',
+ 'ADT': '/images/token_icons/adtoken.png',
+ 'CFI': '/images/token_icons/cofound-it.png',
+ 'ROL': '/images/token_icons/etheroll.png',
+ 'WGNT': '/images/token_icons/golem.png',
+ 'MTL': '/images/token_icons/metal.png',
+ 'NMR': '/images/token_icons/numeraire.png',
+ 'SAN': '/images/token_icons/santiment.png',
+ 'TAAS': '/images/token_icons/taas.png',
+ 'TKN': '/images/token_icons/tokencard.png',
+ 'TRST': '/images/token_icons/trust.png',
+ } as {[symbol: string]: string},
+ IS_MAINNET_ENABLED: true,
+ LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22',
+ LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2017-12-19',
+ // NEW_WRAPPED_ETHERS is temporary until we remove the SHOULD_DEPRECATE_OLD_WETH_TOKEN flag
+ // and add the new WETHs to the tokenRegistry
+ NEW_WRAPPED_ETHERS: {
+ 1: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
+ 42: '0xd0a1e359811322d97991e03f863a0c30c2cf029c',
+ } as {[networkId: string]: string},
+ OUTDATED_WRAPPED_ETHERS: [
{
42: {
address: '0x05d090b51c40b020eab3bfcb6a2dff130df22e9c',
@@ -37,4 +117,15 @@ export const configs = {
},
},
] as OutdatedWrappedEtherByNetworkId[],
+ // The order matters. We first try first node and only then fall back to others.
+ PUBLIC_NODE_URLS_BY_NETWORK_ID: {
+ [1]: [
+ `https://mainnet.infura.io/${INFURA_API_KEY}`,
+ ],
+ [42]: [
+ `https://kovan.infura.io/${INFURA_API_KEY}`,
+ ],
+ } as PublicNodeUrlsByNetworkId,
+ SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
+ SYMBOLS_OF_MINTABLE_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
};
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index fb81dd9a9..761d00ef7 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -1,188 +1,87 @@
import BigNumber from 'bignumber.js';
import {
- ContractAddresses,
- Docs,
Networks,
- PublicNodeUrlsByNetworkId,
- WebsitePaths,
} from 'ts/types';
-const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs';
-const smartContractDocSections = {
- Introduction: 'Introduction',
- Exchange: 'Exchange',
- TokenTransferProxy: 'TokenTransferProxy',
- TokenRegistry: 'TokenRegistry',
- ZRXToken: 'ZRXToken',
- EtherToken: 'EtherToken',
-};
-
export const constants = {
- ANGELLIST_URL: 'https://angel.co/0xproject/jobs',
- STAGING_DOMAIN: 'staging-0xproject.s3-website-us-east-1.amazonaws.com',
- PRODUCTION_DOMAIN: '0xproject.com',
- DEVELOPMENT_DOMAIN: '0xproject.dev:3572',
- BIGNUMBERJS_GITHUB_URL: 'http://mikemcl.github.io/bignumber.js',
- BITLY_ACCESS_TOKEN: 'ffc4c1a31e5143848fb7c523b39f91b9b213d208',
- BITLY_ENDPOINT: 'https://api-ssl.bitly.com',
- BLOG_URL: 'https://blog.0xproject.com/latest',
- CUSTOM_BLUE: '#60a4f4',
- DEFAULT_DERIVATION_PATH: `44'/60'/0'`,
- ETHER_FAUCET_ENDPOINT: 'https://faucet.0xproject.com',
- FEE_RECIPIENT_ADDRESS: '0x0000000000000000000000000000000000000000',
- FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
- GITHUB_URL: 'https://github.com/0xProject',
- GITHUB_WIKI_URL: 'https://github.com/0xProject/wiki',
- HTTP_NO_CONTENT_STATUS_CODE: 204,
- ACCEPT_DISCLAIMER_LOCAL_STORAGE_KEY: 'didAcceptPortalDisclaimer',
- LINKEDIN_0X_URL: 'https://www.linkedin.com/company/0x',
- LEDGER_PROVIDER_NAME: 'Ledger',
- METAMASK_PROVIDER_NAME: 'Metamask',
+ DECIMAL_PLACES_ETH: 18,
+ DECIMAL_PLACES_ZRX: 18,
+ DOCS_SCROLL_DURATION_MS: 0,
+ DOCS_CONTAINER_ID: 'documentation',
GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
1: 4145578,
42: 3117574,
50: 0,
} as {[networkId: number]: number},
- PUBLIC_PROVIDER_NAME: '0x Public',
- // The order matters. We first try first node and only then fall back to others.
- PUBLIC_NODE_URLS_BY_NETWORK_ID: {
- [1]: [
- `https://mainnet.infura.io/${INFURA_API_KEY}`,
- ],
- [42]: [
- `https://kovan.infura.io/${INFURA_API_KEY}`,
- ],
- } as PublicNodeUrlsByNetworkId,
- PARITY_SIGNER_PROVIDER_NAME: 'Parity Signer',
- GENERIC_PROVIDER_NAME: 'Injected Web3',
+ HOME_SCROLL_DURATION_MS: 500,
+ HTTP_NO_CONTENT_STATUS_CODE: 204,
+ LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER: 'didAcceptPortalDisclaimer',
+ LOCAL_STORAGE_KEY_DISMISS_WETH_NOTICE: 'hasDismissedWethNotice',
MAKER_FEE: new BigNumber(0),
MAINNET_NAME: 'Main network',
- MAINNET_NETWORK_ID: 1,
- METAMASK_CHROME_STORE_URL: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
- // tslint:disable-next-line:max-line-length
- PARITY_CHROME_STORE_URL: 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
- MIST_DOWNLOAD_URL: 'https://github.com/ethereum/mist/releases',
- NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
- ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
- DOCS_SCROLL_DURATION_MS: 0,
- DOCS_CONTAINER_ID: 'documentation',
- HOME_SCROLL_DURATION_MS: 500,
- REDDIT_URL: 'https://reddit.com/r/0xproject',
- STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
- SUCCESS_STATUS: 200,
- UNAVAILABLE_STATUS: 503,
- TAKER_FEE: new BigNumber(0),
- TESTNET_NAME: 'Kovan',
- TESTNET_NETWORK_ID: 42,
- TESTRPC_NETWORK_ID: 50,
- TWITTER_URL: 'https://twitter.com/0xproject',
- ETH_DECIMAL_PLACES: 18,
MINT_AMOUNT: new BigNumber('100000000000000000000'),
- WEB3_DOCS_URL: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
- WEB3_PROVIDER_DOCS_URL: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
- WEB3_DECODED_LOG_ENTRY_EVENT_URL:
- 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
- WEB3_LOG_ENTRY_EVENT_URL: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
- ZEROEX_CHAT_URL: 'https://chat.0xproject.com',
- // Projects
- ETHFINEX_URL: 'https://www.bitfinex.com/ethfinex',
- RADAR_RELAY_URL: 'https://radarrelay.com',
- PARADEX_URL: 'https://paradex.io',
- DYDX_URL: 'https://dydx.exchange',
- MELONPORT_URL: 'https://melonport.com',
- DISTRICT_0X_URL: 'https://district0x.io',
- DHARMA_URL: 'https://dharma.io',
- LENDROID_URL: 'https://lendroid.com',
- MAKER_URL: 'https://makerdao.com',
- ARAGON_URL: 'https://aragon.one',
- BLOCKNET_URL: 'https://blocknet.co',
- OCEAN_URL: 'http://the0cean.com',
- STATUS_URL: 'https://status.im',
- AUGUR_URL: 'https://augur.net',
- AUCTUS_URL: 'https://auctus.org',
- OPEN_ANX_URL: 'https://www.openanx.org',
-
- iconUrlBySymbol: {
- 'REP': '/images/token_icons/augur.png',
- 'DGD': '/images/token_icons/digixdao.png',
- 'WETH': '/images/token_icons/ether_erc20.png',
- 'MLN': '/images/token_icons/melon.png',
- 'GNT': '/images/token_icons/golem.png',
- 'MKR': '/images/token_icons/makerdao.png',
- 'ZRX': '/images/token_icons/zero_ex.png',
- 'ANT': '/images/token_icons/aragon.png',
- 'BNT': '/images/token_icons/bancor.png',
- 'BAT': '/images/token_icons/basicattentiontoken.png',
- 'CVC': '/images/token_icons/civic.png',
- 'EOS': '/images/token_icons/eos.png',
- 'FUN': '/images/token_icons/funfair.png',
- 'GNO': '/images/token_icons/gnosis.png',
- 'ICN': '/images/token_icons/iconomi.png',
- 'OMG': '/images/token_icons/omisego.png',
- 'SNT': '/images/token_icons/status.png',
- 'STORJ': '/images/token_icons/storjcoinx.png',
- 'PAY': '/images/token_icons/tenx.png',
- 'QTUM': '/images/token_icons/qtum.png',
- 'DNT': '/images/token_icons/district0x.png',
- 'SNGLS': '/images/token_icons/singularity.png',
- 'EDG': '/images/token_icons/edgeless.png',
- '1ST': '/images/token_icons/firstblood.jpg',
- 'WINGS': '/images/token_icons/wings.png',
- 'BQX': '/images/token_icons/bitquence.png',
- 'LUN': '/images/token_icons/lunyr.png',
- 'RLC': '/images/token_icons/iexec.png',
- 'MCO': '/images/token_icons/monaco.png',
- 'ADT': '/images/token_icons/adtoken.png',
- 'CFI': '/images/token_icons/cofound-it.png',
- 'ROL': '/images/token_icons/etheroll.png',
- 'WGNT': '/images/token_icons/golem.png',
- 'MTL': '/images/token_icons/metal.png',
- 'NMR': '/images/token_icons/numeraire.png',
- 'SAN': '/images/token_icons/santiment.png',
- 'TAAS': '/images/token_icons/taas.png',
- 'TKN': '/images/token_icons/tokencard.png',
- 'TRST': '/images/token_icons/trust.png',
- } as {[symbol: string]: string},
- networkNameById: {
+ NETWORK_ID_MAINNET: 1,
+ NETWORK_ID_TESTNET: 42,
+ NETWORK_ID_TESTRPC: 50,
+ NETWORK_NAME_BY_ID: {
1: Networks.mainnet,
3: Networks.ropsten,
4: Networks.rinkeby,
42: Networks.kovan,
} as {[symbol: number]: string},
- networkIdByName: {
+ NETWORK_ID_BY_NAME: {
[Networks.mainnet]: 1,
[Networks.ropsten]: 3,
[Networks.rinkeby]: 4,
[Networks.kovan]: 42,
} as {[networkName: string]: number},
- docToPath: {
- [Docs.ZeroExJs]: WebsitePaths.ZeroExJs,
- [Docs.SmartContracts]: WebsitePaths.SmartContracts,
- },
- smartContractDocSections,
- contractAddresses: {
- '1.0.0': {
- [Networks.mainnet]: {
- [smartContractDocSections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093',
- [smartContractDocSections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4',
- [smartContractDocSections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498',
- [smartContractDocSections.EtherToken]: '0x2956356cd2a2bf3202f771f50d3d14a367b48070',
- [smartContractDocSections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c',
- },
- [Networks.ropsten]: {
- [smartContractDocSections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac',
- [smartContractDocSections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6',
- [smartContractDocSections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d',
- [smartContractDocSections.EtherToken]: '0xc00fd9820cd2898cc4c054b7bf142de637ad129a',
- [smartContractDocSections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed',
- },
- [Networks.kovan]: {
- [smartContractDocSections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364',
- [smartContractDocSections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4',
- [smartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570',
- [smartContractDocSections.EtherToken]: '0x05d090b51c40b020eab3bfcb6a2dff130df22e9c',
- [smartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f',
- },
- },
- } as ContractAddresses,
+ NULL_ADDRESS: '0x0000000000000000000000000000000000000000',
+ PROVIDER_NAME_LEDGER: 'Ledger',
+ PROVIDER_NAME_METAMASK: 'Metamask',
+ PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
+ PROVIDER_NAME_GENERIC: 'Injected Web3',
+ PROVIDER_NAME_PUBLIC: '0x Public',
+ ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
+ SUCCESS_STATUS: 200,
+ UNAVAILABLE_STATUS: 503,
+ TAKER_FEE: new BigNumber(0),
+ TESTNET_NAME: 'Kovan',
+ PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
+ PROJECT_URL_RADAR_RELAY: 'https://radarrelay.com',
+ PROJECT_URL_PARADEX: 'https://paradex.io',
+ PROJECT_URL_DYDX: 'https://dydx.exchange',
+ PROJECT_URL_MELONPORT: 'https://melonport.com',
+ PROJECT_URL_DISTRICT_0X: 'https://district0x.io',
+ PROJECT_URL_DHARMA: 'https://dharma.io',
+ PROJECT_URL_LENDROID: 'https://lendroid.com',
+ PROJECT_URL_MAKER: 'https://makerdao.com',
+ PROJECT_URL_ARAGON: 'https://aragon.one',
+ PROJECT_URL_BLOCKNET: 'https://blocknet.co',
+ PROJECT_URL_0CEAN: 'http://the0cean.com',
+ PROJECT_URL_STATUS: 'https://status.im',
+ PROJECT_URL_AUGUR: 'https://augur.net',
+ PROJECT_URL_AUCTUS: 'https://auctus.org',
+ PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
+ URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
+ URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
+ URL_BITLY_API: 'https://api-ssl.bitly.com',
+ URL_BLOG: 'https://blog.0xproject.com/latest',
+ URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/',
+ URL_ETHER_FAUCET: 'https://faucet.0xproject.com',
+ URL_GITHUB_ORG: 'https://github.com/0xProject',
+ URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
+ URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
+ URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases',
+ URL_PARITY_CHROME_STORE:
+ 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig',
+ URL_REDDIT: 'https://reddit.com/r/0xproject',
+ URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md',
+ URL_TWITTER: 'https://twitter.com/0xproject',
+ URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API',
+ URL_WEB3_DECODED_LOG_ENTRY_EVENT:
+ 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123',
+ URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127',
+ URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150',
+ URL_WETH_IO: 'https://weth.io/',
+ URL_ZEROEX_CHAT: 'https://chat.0xproject.com',
};
diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts
index 40991afbf..67be117e0 100644
--- a/packages/website/ts/utils/error_reporter.ts
+++ b/packages/website/ts/utils/error_reporter.ts
@@ -15,7 +15,7 @@ const rollbarConfig = {
environment: configs.ENVIRONMENT,
},
uncaughtErrorLevel: 'error',
- hostWhiteList: [constants.PRODUCTION_DOMAIN, constants.STAGING_DOMAIN],
+ hostWhiteList: [configs.DOMAIN_PRODUCTION, configs.DOMAIN_STAGING],
ignoredMessages: [
// Errors from the third-party scripts
'Script error',
diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts
new file mode 100644
index 000000000..60c58f595
--- /dev/null
+++ b/packages/website/ts/utils/mui_theme.ts
@@ -0,0 +1,35 @@
+import {getMuiTheme} from 'material-ui/styles';
+import {colors} from 'ts/utils/colors';
+
+export const muiTheme = getMuiTheme({
+ appBar: {
+ height: 45,
+ color: colors.white,
+ textColor: colors.black,
+ },
+ palette: {
+ pickerHeaderColor: colors.lightBlue,
+ primary1Color: colors.lightBlue,
+ primary2Color: colors.lightBlue,
+ textColor: colors.grey700,
+ },
+ datePicker: {
+ color: colors.grey700,
+ textColor: colors.white,
+ calendarTextColor: colors.white,
+ selectColor: colors.darkestGrey,
+ selectTextColor: colors.white,
+ },
+ timePicker: {
+ color: colors.grey700,
+ textColor: colors.white,
+ accentColor: colors.white,
+ headerColor: colors.darkestGrey,
+ selectColor: colors.darkestGrey,
+ selectTextColor: colors.darkestGrey,
+ },
+ toggle: {
+ thumbOnColor: colors.limeGreen,
+ trackOnColor: colors.lightGreen,
+ },
+});
diff --git a/packages/website/ts/utils/typedoc_utils.ts b/packages/website/ts/utils/typedoc_utils.ts
index 9d3b9f8d7..ed8834a87 100644
--- a/packages/website/ts/utils/typedoc_utils.ts
+++ b/packages/website/ts/utils/typedoc_utils.ts
@@ -22,7 +22,7 @@ export const typeDocUtils = {
isType(entity: TypeDocNode): boolean {
return entity.kindString === KindString.Interface ||
entity.kindString === KindString.Function ||
- entity.kindString === KindString['Type alias'] ||
+ entity.kindString === KindString.TypeAlias ||
entity.kindString === KindString.Variable ||
entity.kindString === KindString.Enumeration;
},
@@ -126,7 +126,7 @@ export const typeDocUtils = {
case KindString.Function:
case KindString.Variable:
case KindString.Enumeration:
- case KindString['Type alias']:
+ case KindString.TypeAlias:
if (docsInfo.isPublicType(entity.name)) {
const customType = typeDocUtils._convertCustomType(
entity, docsInfo.sections, sectionName, docsInfo.subPackageName);
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index abc2fb2d4..36cc8f77b 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -15,6 +15,7 @@ import {
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';
@@ -61,8 +62,8 @@ export const utils = {
orderExpiryTimestamp: BigNumber, orderTakerAddress: string, orderMakerAddress: string,
makerFee: BigNumber, takerFee: BigNumber, feeRecipient: string,
signatureData: SignatureData, tokenByAddress: TokenByAddress, orderSalt: BigNumber): Order {
- const makerToken = tokenByAddress[sideToAssetToken[Side.deposit].address];
- const takerToken = tokenByAddress[sideToAssetToken[Side.receive].address];
+ const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address];
+ const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address];
const order = {
maker: {
address: orderMakerAddress,
@@ -72,7 +73,7 @@ export const utils = {
decimals: makerToken.decimals,
address: makerToken.address,
},
- amount: sideToAssetToken[Side.deposit].amount.toString(),
+ amount: sideToAssetToken[Side.Deposit].amount.toString(),
feeAmount: makerFee.toString(),
},
taker: {
@@ -83,7 +84,7 @@ export const utils = {
decimals: takerToken.decimals,
address: takerToken.address,
},
- amount: sideToAssetToken[Side.receive].amount.toString(),
+ amount: sideToAssetToken[Side.Receive].amount.toString(),
feeAmount: takerFee.toString(),
},
expiration: orderExpiryTimestamp.toString(),
@@ -124,11 +125,11 @@ export const utils = {
// This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS
// class prefixes. Do not edit these.
if (widthInEm > LG_MIN_EM) {
- return ScreenWidths.LG;
+ return ScreenWidths.Lg;
} else if (widthInEm > MD_MIN_EM) {
- return ScreenWidths.MD;
+ return ScreenWidths.Md;
} else {
- return ScreenWidths.SM;
+ return ScreenWidths.Sm;
}
},
isUserOnMobile(): boolean {
@@ -136,7 +137,7 @@ export const utils = {
return isUserOnMobile;
},
getEtherScanLinkIfExists(addressOrTxHash: string, networkId: number, suffix: EtherscanLinkSuffixes): string {
- const networkName = constants.networkNameById[networkId];
+ const networkName = constants.NETWORK_NAME_BY_ID[networkId];
if (_.isUndefined(networkName)) {
return undefined;
}
@@ -182,11 +183,11 @@ export const utils = {
},
getCurrentEnvironment() {
switch (location.host) {
- case constants.DEVELOPMENT_DOMAIN:
+ case configs.DOMAIN_DEVELOPMENT:
return 'development';
- case constants.STAGING_DOMAIN:
+ case configs.DOMAIN_STAGING:
return 'staging';
- case constants.PRODUCTION_DOMAIN:
+ case configs.DOMAIN_PRODUCTION:
return 'production';
default:
return 'production';