diff options
Diffstat (limited to 'packages/website/ts')
142 files changed, 4082 insertions, 2917 deletions
diff --git a/packages/website/ts/artifacts/Exchange.json b/packages/website/ts/artifacts/Exchange.json deleted file mode 100644 index af8db7360..000000000 --- a/packages/website/ts/artifacts/Exchange.json +++ /dev/null @@ -1,610 +0,0 @@ -{ - "contract_name": "Exchange", - "abi": [ - { - "constant": true, - "inputs": [ - { - "name": "numerator", - "type": "uint256" - }, - { - "name": "denominator", - "type": "uint256" - }, - { - "name": "target", - "type": "uint256" - } - ], - "name": "isRoundingError", - "outputs": [ - { - "name": "", - "type": "bool" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "", - "type": "bytes32" - } - ], - "name": "filled", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "", - "type": "bytes32" - } - ], - "name": "cancelled", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "fillTakerTokenAmount", - "type": "uint256" - }, - { - "name": "shouldThrowOnInsufficientBalanceOrAllowance", - "type": "bool" - }, - { - "name": "v", - "type": "uint8[]" - }, - { - "name": "r", - "type": "bytes32[]" - }, - { - "name": "s", - "type": "bytes32[]" - } - ], - "name": "fillOrdersUpTo", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - }, - { - "name": "cancelTakerTokenAmount", - "type": "uint256" - } - ], - "name": "cancelOrder", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "ZRX_TOKEN_CONTRACT", - "outputs": [ - { - "name": "", - "type": "address" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "fillTakerTokenAmounts", - "type": "uint256[]" - }, - { - "name": "v", - "type": "uint8[]" - }, - { - "name": "r", - "type": "bytes32[]" - }, - { - "name": "s", - "type": "bytes32[]" - } - ], - "name": "batchFillOrKillOrders", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - }, - { - "name": "fillTakerTokenAmount", - "type": "uint256" - }, - { - "name": "v", - "type": "uint8" - }, - { - "name": "r", - "type": "bytes32" - }, - { - "name": "s", - "type": "bytes32" - } - ], - "name": "fillOrKillOrder", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "getUnavailableTakerTokenAmount", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "signer", - "type": "address" - }, - { - "name": "hash", - "type": "bytes32" - }, - { - "name": "v", - "type": "uint8" - }, - { - "name": "r", - "type": "bytes32" - }, - { - "name": "s", - "type": "bytes32" - } - ], - "name": "isValidSignature", - "outputs": [ - { - "name": "", - "type": "bool" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "numerator", - "type": "uint256" - }, - { - "name": "denominator", - "type": "uint256" - }, - { - "name": "target", - "type": "uint256" - } - ], - "name": "getPartialAmount", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "TOKEN_TRANSFER_PROXY_CONTRACT", - "outputs": [ - { - "name": "", - "type": "address" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "fillTakerTokenAmounts", - "type": "uint256[]" - }, - { - "name": "shouldThrowOnInsufficientBalanceOrAllowance", - "type": "bool" - }, - { - "name": "v", - "type": "uint8[]" - }, - { - "name": "r", - "type": "bytes32[]" - }, - { - "name": "s", - "type": "bytes32[]" - } - ], - "name": "batchFillOrders", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "cancelTakerTokenAmounts", - "type": "uint256[]" - } - ], - "name": "batchCancelOrders", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - }, - { - "name": "fillTakerTokenAmount", - "type": "uint256" - }, - { - "name": "shouldThrowOnInsufficientBalanceOrAllowance", - "type": "bool" - }, - { - "name": "v", - "type": "uint8" - }, - { - "name": "r", - "type": "bytes32" - }, - { - "name": "s", - "type": "bytes32" - } - ], - "name": "fillOrder", - "outputs": [ - { - "name": "filledTakerTokenAmount", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - } - ], - "name": "getOrderHash", - "outputs": [ - { - "name": "", - "type": "bytes32" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "EXTERNAL_QUERY_GAS_LIMIT", - "outputs": [ - { - "name": "", - "type": "uint16" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "VERSION", - "outputs": [ - { - "name": "", - "type": "string" - } - ], - "payable": false, - "type": "function" - }, - { - "inputs": [ - { - "name": "_zrxToken", - "type": "address" - }, - { - "name": "_tokenTransferProxy", - "type": "address" - } - ], - "payable": false, - "type": "constructor" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "name": "maker", - "type": "address" - }, - { - "indexed": false, - "name": "taker", - "type": "address" - }, - { - "indexed": true, - "name": "feeRecipient", - "type": "address" - }, - { - "indexed": false, - "name": "makerToken", - "type": "address" - }, - { - "indexed": false, - "name": "takerToken", - "type": "address" - }, - { - "indexed": false, - "name": "filledMakerTokenAmount", - "type": "uint256" - }, - { - "indexed": false, - "name": "filledTakerTokenAmount", - "type": "uint256" - }, - { - "indexed": false, - "name": "paidMakerFee", - "type": "uint256" - }, - { - "indexed": false, - "name": "paidTakerFee", - "type": "uint256" - }, - { - "indexed": true, - "name": "tokens", - "type": "bytes32" - }, - { - "indexed": false, - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "LogFill", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "name": "maker", - "type": "address" - }, - { - "indexed": true, - "name": "feeRecipient", - "type": "address" - }, - { - "indexed": false, - "name": "makerToken", - "type": "address" - }, - { - "indexed": false, - "name": "takerToken", - "type": "address" - }, - { - "indexed": false, - "name": "cancelledMakerTokenAmount", - "type": "uint256" - }, - { - "indexed": false, - "name": "cancelledTakerTokenAmount", - "type": "uint256" - }, - { - "indexed": true, - "name": "tokens", - "type": "bytes32" - }, - { - "indexed": false, - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "LogCancel", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "name": "errorId", - "type": "uint8" - }, - { - "indexed": true, - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "LogError", - "type": "event" - } - ], - "networks": { - "1": { - "address": "0x12459c951127e0c374ff9105dda097662a027093" - }, - "3": { - "address": "0x479cc461fecd078f766ecc58533d6f69580cf3ac" - }, - "4": { - "address": "0x1d16ef40fac01cec8adac2ac49427b9384192c05" - }, - "42": { - "address": "0x90fe2af704b34e0224bf2299c838e04d4dcf1364" - }, - "50": { - "address": "0x48bacb9266a570d521063ef5dd96e61686dbe788" - } - } -} diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 45994be5f..b43c41739 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -2,34 +2,27 @@ import { BlockRange, ContractWrappers, DecodedLogEvent, - ExchangeContractEventArgs, + ExchangeCancelEventArgs, + ExchangeEventArgs, ExchangeEvents, + ExchangeFillEventArgs, IndexedFilterValues, - LogCancelContractEventArgs, - LogFillContractEventArgs, - Token as ZeroExToken, -} from '@0xproject/contract-wrappers'; -import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils'; -import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +} from '@0x/contract-wrappers'; +import { assetDataUtils, orderHashUtils, signatureUtils } from '@0x/order-utils'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import { ledgerEthereumBrowserClientFactoryAsync, LedgerSubprovider, + MetamaskSubprovider, RedundantSubprovider, RPCSubprovider, SignerSubprovider, Web3ProviderEngine, -} from '@0xproject/subproviders'; -import { - BlockParam, - ECSignature, - LogWithDecodedArgs, - Order, - Provider, - SignedOrder, - TransactionReceiptWithDecodedLogs, -} from '@0xproject/types'; -import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +} from '@0x/subproviders'; +import { SignedOrder, Token as ZeroExToken } from '@0x/types'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; +import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types'; import * as _ from 'lodash'; import * as moment from 'moment'; import * as React from 'react'; @@ -45,10 +38,9 @@ import { BlockchainErrs, ContractInstance, Fill, + InjectedProvider, InjectedProviderObservable, InjectedProviderUpdate, - InjectedWeb3, - Order as PortalOrder, Providers, ProviderType, Side, @@ -60,14 +52,13 @@ import { backendClient } from 'ts/utils/backend_client'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { fakeTokenRegistry } from 'ts/utils/fake_token_registry'; +import { tokenAddressOverrides } from 'ts/utils/token_address_overrides'; import { utils } from 'ts/utils/utils'; import FilterSubprovider = require('web3-provider-engine/subproviders/filters'); import * as MintableArtifacts from '../contracts/Mintable.json'; -// HACK: remove this hard-coded abi and use @0xproject/contract-wrappers -import * as Exchange from './artifacts/Exchange.json'; - const BLOCK_NUMBER_BACK_TRACK = 50; const GWEI_IN_WEI = 1000000000; @@ -75,7 +66,7 @@ const providerToName: { [provider: string]: string } = { [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK, [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER, [Providers.Mist]: constants.PROVIDER_NAME_MIST, - [Providers.Toshi]: constants.PROVIDER_NAME_TOSHI, + [Providers.CoinbaseWallet]: constants.PROVIDER_NAME_COINBASE_WALLET, [Providers.Cipher]: constants.PROVIDER_NAME_CIPHER, }; @@ -92,6 +83,7 @@ export class Blockchain { private _ledgerSubprovider: LedgerSubprovider; private _defaultGasPrice: BigNumber; private _watchGasPriceIntervalId: NodeJS.Timer; + private _injectedProviderIfExists?: InjectedProvider; private static _getNameGivenProvider(provider: Provider): string { const providerType = utils.getProviderType(provider); const providerNameIfExists = providerToName[providerType]; @@ -100,48 +92,12 @@ export class Blockchain { } return providerNameIfExists; } - private static _getInjectedWeb3(): InjectedWeb3 { - const injectedWeb3IfExists = (window as any).web3; - // Our core assumptions about the injected web3 object is that it has the following - // properties and methods. - if ( - _.isUndefined(injectedWeb3IfExists) || - _.isUndefined(injectedWeb3IfExists.version) || - _.isUndefined(injectedWeb3IfExists.version.getNetwork) || - _.isUndefined(injectedWeb3IfExists.currentProvider) - ) { - return undefined; - } - return injectedWeb3IfExists; - } - private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise<number | undefined> { - // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in - // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot - // retrieve it from within the web3Wrapper constructor. This is and should remain the only - // call to a web3 instance outside of web3Wrapper in the entire dapp. - // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing - // Ethereum node, this call will throw. We need to handle this case gracefully - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - let networkIdIfExists: number; - if (!_.isUndefined(injectedWeb3IfExists)) { - try { - networkIdIfExists = _.parseInt( - await promisify<string>( - injectedWeb3IfExists.version.getNetwork.bind(injectedWeb3IfExists.version), - )(), - ); - } catch (err) { - // Ignore error and proceed with networkId undefined - } - } - return networkIdIfExists; - } private static async _getProviderAsync( - injectedWeb3: InjectedWeb3, - networkIdIfExists: number, + injectedProviderIfExists?: InjectedProvider, + networkIdIfExists?: number, shouldUserLedgerProvider: boolean = false, ): Promise<[Provider, LedgerSubprovider | undefined]> { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3); + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); const isNetworkIdAvailable = !_.isUndefined(networkIdIfExists); const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists]; const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId); @@ -165,11 +121,17 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, ledgerSubprovider]; - } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) { + } else if (doesInjectedProviderExist && isPublicNodeAvailableForNetworkId) { // We catch all requests involving a users account and send it to the injectedWeb3 // instance. All other requests go to the public hosted node. const provider = new Web3ProviderEngine(); - provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider)); + const providerName = this._getNameGivenProvider(injectedProviderIfExists); + // Wrap Metamask in a compatability wrapper MetamaskSubprovider (to handle inconsistencies) + const signerSubprovider = + providerName === constants.PROVIDER_NAME_METAMASK + ? new MetamaskSubprovider(injectedProviderIfExists) + : new SignerSubprovider(injectedProviderIfExists); + provider.addProvider(signerSubprovider); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { return new RPCSubprovider(publicNodeUrl); @@ -177,9 +139,9 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, undefined]; - } else if (doesInjectedWeb3Exist) { + } else if (doesInjectedProviderExist) { // Since no public node for this network, all requests go to injectedWeb3 instance - return [injectedWeb3.currentProvider, undefined]; + return [injectedProviderIfExists, undefined]; } else { // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node // We do this so that users can still browse the 0x Portal DApp even if they do not have web3 @@ -230,9 +192,16 @@ export class Blockchain { } } public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> { - utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); - const tokenIfExists = await this._contractWrappers.tokenRegistry.getTokenIfExistsAsync(tokenAddress); - return !_.isUndefined(tokenIfExists); + const tokens = fakeTokenRegistry[this.networkId]; + const tokenIfExists = _.find(tokens, { address: tokenAddress }); + + // HACK: Override token addresses on testnets + const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId]; + let isTokenAddressInOverrides = false; + if (!_.isUndefined(tokenSymbolToAddressOverrides)) { + isTokenAddressInOverrides = _.values(tokenSymbolToAddressOverrides).includes(tokenAddress); + } + return !_.isUndefined(tokenIfExists) || isTokenAddressInOverrides; } public getLedgerDerivationPathIfExists(): string { if (_.isUndefined(this._ledgerSubprovider)) { @@ -257,7 +226,7 @@ export class Blockchain { const shouldUserLedgerProvider = false; this._dispatcher.updateBlockchainIsLoaded(false); // We don't want to be out of sync with the network the injected provider declares. - const networkId = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkId = await this._getInjectedProviderNetworkIdIfExistsAsync(); await this._resetOrInitializeAsync(networkId, shouldPollUserAddress, shouldUserLedgerProvider); } public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> { @@ -266,7 +235,7 @@ export class Blockchain { utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); this._showFlashMessageIfLedger(); - const txHash = await this._contractWrappers.token.setProxyAllowanceAsync( + const txHash = await this._contractWrappers.erc20Token.setProxyAllowanceAsync( token.address, this._userAddressIfExists, amountInBaseUnits, @@ -307,7 +276,7 @@ export class Blockchain { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); this._showFlashMessageIfLedger(); - const txHash = await this._contractWrappers.token.transferAsync( + const txHash = await this._contractWrappers.erc20Token.transferAsync( token.address, this._userAddressIfExists, toAddress, @@ -332,70 +301,45 @@ export class Blockchain { }), ); } - public portalOrderToZeroExOrder(portalOrder: PortalOrder): SignedOrder { - const exchangeContractAddress = this.getExchangeContractAddressIfExists(); - const zeroExSignedOrder = { - exchangeContractAddress, - maker: portalOrder.signedOrder.maker, - taker: portalOrder.signedOrder.taker, - makerTokenAddress: portalOrder.signedOrder.makerTokenAddress, - takerTokenAddress: portalOrder.signedOrder.takerTokenAddress, - makerTokenAmount: new BigNumber(portalOrder.signedOrder.makerTokenAmount), - takerTokenAmount: new BigNumber(portalOrder.signedOrder.takerTokenAmount), - makerFee: new BigNumber(portalOrder.signedOrder.makerFee), - takerFee: new BigNumber(portalOrder.signedOrder.takerFee), - expirationUnixTimestampSec: new BigNumber(portalOrder.signedOrder.expirationUnixTimestampSec), - feeRecipient: portalOrder.signedOrder.feeRecipient, - ecSignature: portalOrder.signedOrder.ecSignature, - salt: new BigNumber(portalOrder.signedOrder.salt), - }; - return zeroExSignedOrder; - } public async fillOrderAsync(signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber): Promise<BigNumber> { utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); - - const shouldThrowOnInsufficientBalanceOrAllowance = true; - this._showFlashMessageIfLedger(); const txHash = await this._contractWrappers.exchange.fillOrderAsync( signedOrder, fillTakerTokenAmount, - shouldThrowOnInsufficientBalanceOrAllowance, this._userAddressIfExists, { gasPrice: this._defaultGasPrice, }, ); const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); - const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any; - this._contractWrappers.exchange.throwLogErrorsAsErrors(logs); - const logFill = _.find(logs, { event: 'LogFill' }); - const args = (logFill.args as any) as LogFillContractEventArgs; - const filledTakerTokenAmount = args.filledTakerTokenAmount; - return filledTakerTokenAmount; - } - public async cancelOrderAsync(signedOrder: SignedOrder, cancelTakerTokenAmount: BigNumber): Promise<BigNumber> { + const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any; + const logFill = _.find(logs, { event: ExchangeEvents.Fill }); + const args = (logFill.args as any) as ExchangeFillEventArgs; + const takerAssetFilledAmount = args.takerAssetFilledAmount; + return takerAssetFilledAmount; + } + public async cancelOrderAsync(signedOrder: SignedOrder): Promise<string> { this._showFlashMessageIfLedger(); - const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, { + const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, { gasPrice: this._defaultGasPrice, }); const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); - const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any; - this._contractWrappers.exchange.throwLogErrorsAsErrors(logs); - const logCancel = _.find(logs, { event: ExchangeEvents.LogCancel }); - const args = (logCancel.args as any) as LogCancelContractEventArgs; - const cancelledTakerTokenAmount = args.cancelledTakerTokenAmount; - return cancelledTakerTokenAmount; + const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any; + const logCancel = _.find(logs, { event: ExchangeEvents.Cancel }); + const args = (logCancel.args as any) as ExchangeCancelEventArgs; + const cancelledOrderHash = args.orderHash; + return cancelledOrderHash; } public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> { - utils.assert(isValidOrderHash(orderHash), 'Must be valid orderHash'); + utils.assert(orderHashUtils.isValidOrderHash(orderHash), 'Must be valid orderHash'); utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); - const unavailableTakerAmount = await this._contractWrappers.exchange.getUnavailableTakerAmountAsync(orderHash); + const unavailableTakerAmount = await this._contractWrappers.exchange.getFilledTakerAssetAmountAsync(orderHash); return unavailableTakerAmount; } public getExchangeContractAddressIfExists(): string | undefined { - return this._contractWrappers.exchange.getContractAddress(); + return this._contractWrappers.exchange.address; } public async validateFillOrderThrowIfInvalidAsync( signedOrder: SignedOrder, @@ -408,16 +352,19 @@ export class Blockchain { takerAddress, ); } - public async validateCancelOrderThrowIfInvalidAsync( - order: Order, - cancelTakerTokenAmount: BigNumber, - ): Promise<void> { - await this._contractWrappers.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount); - } public isValidAddress(address: string): boolean { const lowercaseAddress = address.toLowerCase(); return Web3Wrapper.isAddress(lowercaseAddress); } + public async isValidSignatureAsync(data: string, signature: string, signerAddress: string): Promise<boolean> { + const result = await signatureUtils.isValidSignatureAsync( + this._contractWrappers.getProvider(), + data, + signature, + signerAddress, + ); + return result; + } public async pollTokenBalanceAsync(token: Token): Promise<BigNumber> { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); @@ -446,7 +393,7 @@ export class Blockchain { return newTokenBalancePromise; } - public async signOrderHashAsync(orderHash: string): Promise<ECSignature> { + public async signOrderHashAsync(orderHash: string): Promise<string> { utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); const makerAddress = this._userAddressIfExists; // If makerAddress is undefined, this means they have a web3 instance injected into their browser @@ -454,20 +401,11 @@ export class Blockchain { if (_.isUndefined(makerAddress)) { throw new Error('Tried to send a sign request but user has no associated addresses'); } - this._showFlashMessageIfLedger(); - const nodeVersion = await this._web3Wrapper.getNodeVersionAsync(); - const isParityNode = utils.isParityNode(nodeVersion); - const isTestRpc = utils.isTestRpc(nodeVersion); - const isLedgerSigner = !_.isUndefined(this._ledgerSubprovider); - let shouldAddPersonalMessagePrefix = true; - if ((isParityNode && !isLedgerSigner) || isTestRpc || isLedgerSigner) { - shouldAddPersonalMessagePrefix = false; - } const provider = this._contractWrappers.getProvider(); - const ecSignature = await signOrderHashAsync(provider, orderHash, makerAddress, shouldAddPersonalMessagePrefix); - this._dispatcher.updateECSignature(ecSignature); - return ecSignature; + const ecSignatureString = await signatureUtils.ecSignHashAsync(provider, orderHash, makerAddress); + this._dispatcher.updateSignature(ecSignatureString); + return ecSignatureString; } public async mintTestTokensAsync(token: Token): Promise<void> { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); @@ -540,8 +478,8 @@ export class Blockchain { let allowance = new BigNumber(0); if (this._doesUserAddressExist()) { [balance, allowance] = await Promise.all([ - this._contractWrappers.token.getBalanceAsync(tokenAddress, ownerAddressIfExists), - this._contractWrappers.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists), + this._contractWrappers.erc20Token.getBalanceAsync(tokenAddress, ownerAddressIfExists), + this._contractWrappers.erc20Token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists), ]); } return [balance, allowance]; @@ -638,6 +576,45 @@ export class Blockchain { this._dispatcher.updateBlockchainIsLoaded(true); } + private async _getInjectedProviderIfExistsAsync(): Promise<InjectedProvider | undefined> { + if (!_.isUndefined(this._injectedProviderIfExists)) { + return this._injectedProviderIfExists; + } + let injectedProviderIfExists = (window as any).ethereum; + if (!_.isUndefined(injectedProviderIfExists)) { + if (!_.isUndefined(injectedProviderIfExists.enable)) { + try { + await injectedProviderIfExists.enable(); + } catch (err) { + errorReporter.report(err); + } + } + } else { + const injectedWeb3IfExists = (window as any).web3; + if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) { + injectedProviderIfExists = injectedWeb3IfExists.currentProvider; + } else { + return undefined; + } + } + this._injectedProviderIfExists = injectedProviderIfExists; + return injectedProviderIfExists; + } + private async _getInjectedProviderNetworkIdIfExistsAsync(): Promise<number | undefined> { + // If the user has an injectedWeb3 instance that is disconnected from a backing + // Ethereum node, this call will throw. We need to handle this case gracefully + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + let networkIdIfExists: number; + if (!_.isUndefined(injectedProviderIfExists)) { + try { + const injectedWeb3Wrapper = new Web3Wrapper(injectedProviderIfExists); + networkIdIfExists = await injectedWeb3Wrapper.getNetworkIdAsync(); + } catch (err) { + // Ignore error and proceed with networkId undefined + } + } + return networkIdIfExists; + } private async _showEtherScanLinkAndAwaitTransactionMinedAsync( txHash: string, ): Promise<TransactionReceiptWithDecodedLogs> { @@ -653,8 +630,7 @@ export class Blockchain { ); const provider = this._contractWrappers.getProvider(); const web3Wrapper = new Web3Wrapper(provider); - // HACK: remove this hard-coded abi and use @0xproject/contract-wrappers - const exchangeAbi = _.get(Exchange, 'abi', []); + const exchangeAbi = this._contractWrappers.exchange.abi; web3Wrapper.abiDecoder.addABI(exchangeAbi); const receipt = await web3Wrapper.awaitTransactionSuccessAsync(txHash); return receipt; @@ -699,9 +675,9 @@ export class Blockchain { // Start a subscription for new logs this._contractWrappers.exchange.subscribe( - ExchangeEvents.LogFill, + ExchangeEvents.Fill, indexFilterValues, - async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => { + async (err: Error, decodedLogEvent: DecodedLogEvent<ExchangeFillEventArgs>) => { if (err) { // Note: it's not entirely clear from the documentation which // errors will be thrown by `watch`. For now, let's log the error @@ -732,8 +708,8 @@ export class Blockchain { fromBlock, toBlock: 'latest' as BlockParam, }; - const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<LogFillContractEventArgs>( - ExchangeEvents.LogFill, + const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<ExchangeFillEventArgs>( + ExchangeEvents.Fill, blockRange, indexFilterValues, ); @@ -746,28 +722,28 @@ export class Blockchain { tradeHistoryStorage.addFillToUser(this._userAddressIfExists, this.networkId, fill); } } - private async _convertDecodedLogToFillAsync( - decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>, - ): Promise<Fill> { + private async _convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<ExchangeFillEventArgs>): Promise<Fill> { const args = decodedLog.args; const blockTimestamp = await this._web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash); + const makerToken = assetDataUtils.decodeERC20AssetData(args.makerAssetData).tokenAddress; + const takerToken = assetDataUtils.decodeERC20AssetData(args.takerAssetData).tokenAddress; const fill = { - filledTakerTokenAmount: args.filledTakerTokenAmount, - filledMakerTokenAmount: args.filledMakerTokenAmount, + filledTakerTokenAmount: args.takerAssetFilledAmount, + filledMakerTokenAmount: args.makerAssetFilledAmount, logIndex: decodedLog.logIndex, - maker: args.maker, + maker: args.makerAddress, orderHash: args.orderHash, - taker: args.taker, - makerToken: args.makerToken, - takerToken: args.takerToken, - paidMakerFee: args.paidMakerFee, - paidTakerFee: args.paidTakerFee, + taker: args.takerAddress, + makerToken, + takerToken, + paidMakerFee: args.makerFeePaid, + paidTakerFee: args.takerFeePaid, transactionHash: decodedLog.transactionHash, blockTimestamp, }; return fill; } - private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>): boolean { + private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<ExchangeFillEventArgs>): boolean { const args = decodedLog.args; const isUserMakerOrTaker = args.maker === this._userAddressIfExists || args.taker === this._userAddressIfExists; return isUserMakerOrTaker; @@ -796,8 +772,21 @@ export class Blockchain { if (this.networkId === constants.NETWORK_ID_MAINNET) { tokenRegistryTokens = await backendClient.getTokenInfosAsync(); } else { - utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); - tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync(); + tokenRegistryTokens = fakeTokenRegistry[this.networkId]; + const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId]; + if (!_.isUndefined(tokenAddressOverrides)) { + // HACK: Override token addresses on testnets + tokenRegistryTokens = _.map(tokenRegistryTokens, (token: ZeroExToken) => { + const overrideIfExists = tokenSymbolToAddressOverrides[token.symbol]; + if (!_.isUndefined(overrideIfExists)) { + return { + ...token, + address: overrideIfExists, + }; + } + return token; + }); + } } const tokenByAddress: TokenByAddress = {}; _.each(tokenRegistryTokens, (t: ZeroExToken) => { @@ -819,17 +808,17 @@ export class Blockchain { } private async _onPageLoadInitFireAndForgetAsync(): Promise<void> { await utils.onPageLoadPromise; // wait for page to load - const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkIdIfExists = await this._getInjectedProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { - const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore; + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + if (!_.isUndefined(injectedProviderIfExists)) { + const injectedProviderObservable = injectedProviderIfExists.publicConfigStore; if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) { this._injectedProviderObservable = injectedProviderObservable; this._injectedProviderObservable.subscribe(this._injectedProviderUpdateHandler); } } - this._updateProviderName(injectedWeb3IfExists); + this._updateProviderName(injectedProviderIfExists); const shouldPollUserAddress = true; const shouldUseLedgerProvider = false; this._startWatchingGasPrice(); @@ -866,21 +855,24 @@ export class Blockchain { } this._dispatcher.updateUserWeiBalance(undefined); this.networkId = networkId; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); const [provider, ledgerSubproviderIfExists] = await Blockchain._getProviderAsync( - injectedWeb3IfExists, + injectedProviderIfExists, networkId, shouldUserLedgerProvider, ); + this._web3Wrapper = new Web3Wrapper(provider); + this.networkId = await this._web3Wrapper.getNetworkIdAsync(); if (!_.isUndefined(this._contractWrappers)) { - this._contractWrappers.setProvider(provider, networkId); - } else { - this._contractWrappers = new ContractWrappers(provider, { networkId }); + this._contractWrappers.unsubscribeAll(); } + const contractWrappersConfig = { + networkId, + }; + this._contractWrappers = new ContractWrappers(provider, contractWrappersConfig); if (!_.isUndefined(this._blockchainWatcher)) { this._blockchainWatcher.destroy(); } - this._web3Wrapper = new Web3Wrapper(provider); this._blockchainWatcher = new BlockchainWatcher(this._dispatcher, this._web3Wrapper, shouldPollUserAddress); if (shouldUserLedgerProvider && !_.isUndefined(ledgerSubproviderIfExists)) { delete this._userAddressIfExists; @@ -892,7 +884,7 @@ export class Blockchain { const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync(); this._userAddressIfExists = userAddresses[0]; this._dispatcher.updateUserAddress(this._userAddressIfExists); - if (!_.isUndefined(injectedWeb3IfExists)) { + if (!_.isUndefined(injectedProviderIfExists)) { this._dispatcher.updateProviderType(ProviderType.Injected); } await this.fetchTokenInformationAsync(); @@ -901,10 +893,10 @@ export class Blockchain { this._dispatcher.updateNetworkId(networkId); await this._rehydrateStoreWithContractEventsAsync(); } - private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists); - const providerName = doesInjectedWeb3Exist - ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider) + private _updateProviderName(injectedProviderIfExists?: InjectedProvider): void { + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); + const providerName = doesInjectedProviderExist + ? Blockchain._getNameGivenProvider(injectedProviderIfExists) : constants.PROVIDER_NAME_PUBLIC; this._dispatcher.updateInjectedProviderName(providerName); } diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts index 39ed8b08b..835932dcd 100644 --- a/packages/website/ts/blockchain_watcher.ts +++ b/packages/website/ts/blockchain_watcher.ts @@ -1,5 +1,5 @@ -import { BigNumber, intervalUtils, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index c8e10303f..a0114d898 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,4 +1,4 @@ -import { colors, Networks } from '@0xproject/react-shared'; +import { colors, Networks } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -22,7 +22,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp key="blockchainErrOk" label="Ok" primary={true} - onTouchTap={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} + onClick={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} />, ]; 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 5f4bf8519..9b9421f1a 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -54,8 +54,8 @@ export class EthWethConversionDialog extends React.Component< } public render(): React.ReactNode { const convertDialogActions = [ - <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, - <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />, + <FlatButton key="cancel" label="Cancel" onClick={this._onCancel.bind(this)} />, + <FlatButton key="convert" label="Convert" primary={true} onClick={this._onConvertClick.bind(this)} />, ]; const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; return !_.isUndefined(this.props.etherBalanceInWei) ? ( diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index d2f373d67..a9f591150 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -1,6 +1,6 @@ -import { colors, constants as sharedConstants } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, constants as sharedConstants } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -64,7 +64,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } public render(): React.ReactNode { const dialogActions = [ - <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />, + <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />, ]; const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address'; diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index 41a17fe96..326df2a8c 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -13,7 +13,7 @@ export const PortalDisclaimerDialog = (props: PortalDisclaimerDialogProps) => { <Dialog title="0x Portal Disclaimer" titleStyle={{ fontWeight: 100 }} - actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]} + actions={[<FlatButton key="portalAgree" label="I Agree" onClick={props.onToggleDialog} />]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index c1179dbd0..5f6927cef 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -38,13 +38,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState } public render(): React.ReactNode { const transferDialogActions = [ - <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, + <FlatButton key="cancelTransfer" label="Cancel" onClick={this._onCancel.bind(this)} />, <FlatButton key="sendTransfer" disabled={this._hasErrors()} label="Send" primary={true} - onTouchTap={this._onSendClick.bind(this)} + onClick={this._onSendClick.bind(this)} />, ]; return ( 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 3751ce06f..c8d5af6b6 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -43,12 +43,12 @@ export class TrackTokenConfirmationDialog extends React.Component< <FlatButton key="trackNo" label="No" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)} />, <FlatButton key="trackYes" label="Yes" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)} />, ]} open={this.props.isOpen} 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 3ebab03ef..bbec1d649 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -14,7 +14,7 @@ export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => { <Dialog title="U2F Not Supported" titleStyle={{ fontWeight: 100 }} - actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog} />]} + actions={[<FlatButton key="u2fNo" label="Ok" onClick={props.onToggleDialog} />]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx index 78b270c1e..cf2c4dda5 100644 --- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx +++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx @@ -14,7 +14,7 @@ export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDial title="Dedicated Wrapped Ether Section" titleStyle={{ fontWeight: 100 }} actions={[ - <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />, + <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onClick={props.onToggleDialog} />, ]} open={props.isOpen} onRequestClose={props.onToggleDialog} diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx new file mode 100644 index 000000000..2840d5960 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -0,0 +1,20 @@ +import { Link } from '@0x/react-shared'; +import * as React from 'react'; +import { WebsitePaths } from 'ts/types'; + +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => { + return ( + <Link to={WebsitePaths.Docs}> + <img src="/images/docs_logo.svg" height={props.height} /> + </Link> + ); +}; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx new file mode 100644 index 000000000..2054d0860 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -0,0 +1,108 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import Drawer from 'material-ui/Drawer'; +import * as React from 'react'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, ScreenWidths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsTopBarProps { + location: Location; + screenWidth: ScreenWidths; + translate: Translate; + sidebar?: React.ReactNode; +} + +interface DocsTopBarState { + isDrawerOpen: boolean; +} + +export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { + constructor(props: DocsTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + return ( + <Container height={80}> + <Container + className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start" + width="100%" + > + <Container className="sm-hide xs-hide"> + <Container className="flex items-center justify-between right" width="300px"> + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} + </Container> + </Container> + <Container className="lg-hide md-hide"> + <Container paddingTop="6px"> + <DocsLogo height={30} /> + </Container> + </Container> + <Container className="md-hide lg-hide absolute" right="18px" top="12px"> + <i + className="zmdi zmdi-menu" + style={{ + color: colors.grey700, + fontSize: 30, + cursor: 'pointer', + }} + onClick={this._onMenuButtonClick.bind(this)} + /> + </Container> + </Container> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} /> + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} + </Container> + ); + } + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Container className="flex items-center" paddingLeft="4px"> + <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Text> + </Container> + </Link> + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + <Drawer + open={this.state.isDrawerOpen} + docked={false} + openSecondary={true} + onRequestChange={this._onMenuButtonClick.bind(this)} + > + <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}> + {this.props.sidebar} + </Container> + </Drawer> + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx new file mode 100644 index 000000000..caabaf874 --- /dev/null +++ b/packages/website/ts/components/documentation/overview_content.tsx @@ -0,0 +1,134 @@ +import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; +import { Element as ScrollElement } from 'react-scroll'; +import { TutorialButton } from 'ts/components/documentation/tutorial_button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, Package, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface OverviewContentProps { + translate: Translate; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; +} + +export interface OverviewContentState {} + +export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> { + public render(): React.ReactNode { + return ( + <Container> + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} + <Container paddingTop="12px"> + {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} + <Container marginTop="36px"> + {_.map(this.props.tutorials, tutorialInfo => ( + <ScrollElement + name={sharedUtils.getIdFromName( + this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + )} + key={`tutorial-${tutorialInfo.link.title}`} + > + <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} /> + </ScrollElement> + ))} + </Container> + </Container> + <Container marginTop="32px" paddingBottom="100px"> + {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + <Container paddingTop="12px"> + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + )} + <Container marginTop="36px"> + {_.map(this.props.categoryToPackages, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + </Container> + </Container> + </Container> + </Container> + ); + } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( + <Container key={`category-${category}`}> + <Text fontSize="18px">{category}</Text> + <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> + </Container> + ); + } + private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.link.title); + return ( + <ScrollElement name={id} key={`package-${pkg.link.title}`}> + <Container className="pb2"> + <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> + <Container className="clearfix mt2 pt1"> + <Container className="md-col lg-col md-col-4 lg-col-4"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {pkg.link.title} + </Text> + </Link> + </Container> + <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> + <Text fontColor={colors.grey700}> + <ReactMarkdown + source={pkg.description} + renderers={{ + link: MarkdownLinkBlock, + paragraph: 'span', + }} + /> + </Text> + </Container> + <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> + <Container position="absolute" right="0px"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Container className="flex"> + <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> + <Container paddingTop="1px" paddingLeft="6px"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 18, color: colors.lightLinkBlue }} + /> + </Container> + </Container> + </Link> + </Container> + </Container> + </Container> + </Container> + </ScrollElement> + ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + <Container paddingTop="30px"> + <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold"> + {text} + </Text> + </Container> + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono"> + {text} + </Text> + ); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx new file mode 100644 index 000000000..fece2704b --- /dev/null +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { ScreenWidths } from 'ts/types'; + +export interface SidebarHeaderProps { + screenWidth: ScreenWidths; + title: string; + docsVersion?: string; + availableDocVersions?: string[]; + onVersionSelected?: () => void; +} + +export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ + screenWidth, + title, + docsVersion, + availableDocVersions, + onVersionSelected, +}) => { + return ( + <Container> + <Container className="flex justify-bottom"> + <Container className="left pl1" width="150px"> + <Text + fontColor={colors.lightLinkBlue} + fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} + fontWeight="bold" + > + {title} + </Text> + </Container> + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( + <div className="right" style={{ alignSelf: 'flex-end' }}> + <VersionDropDown + selectedVersion={docsVersion} + versions={availableDocVersions} + onVersionSelected={onVersionSelected} + /> + </div> + )} + </Container> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop="20px" + marginBottom="27px" + /> + </Container> + ); +}; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx new file mode 100644 index 000000000..b747ef598 --- /dev/null +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -0,0 +1,59 @@ +import { colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +import { styled } from 'ts/style/theme'; + +export interface TutorialButtonProps { + className?: string; + translate: Translate; + tutorialInfo: TutorialInfo; +} + +const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => ( + <Container className={className}> + <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}> + <div className="flex relative"> + <div className="col col-1 flex items-center sm-pr3"> + <img src={tutorialInfo.iconUrl} height={40} /> + </div> + <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor={colors.grey750} fontSize="16"> + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="col col-1 flex items-center justify-end"> + <div className="right"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> + </div> + </div> + </div> + </Link> + </Container> +); + +export const TutorialButton = styled(PlainTutorialButton)` + border-radius: 4px; + border: 1px solid ${colors.grey325}; + background-color: ${colors.white}; + &:hover { + border: 1px solid ${colors.lightLinkBlue}; + background-color: ${colors.lightestBlue}; + } + padding: 20px; + margin-bottom: 15px; +`; + +TutorialButton.defaultProps = {}; + +TutorialButton.displayName = 'TutorialButton'; diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx new file mode 100644 index 000000000..a1c8b0547 --- /dev/null +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -0,0 +1,80 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { styled } from 'ts/style/theme'; + +interface ActiveNodeProps { + className?: string; + selectedVersion: string; +} + +const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => ( + <Container className={className}> + <Container className="flex justify-center"> + <Text fontColor={colors.grey700} fontSize="12px"> + v {selectedVersion} + </Text> + <Container paddingLeft="6px"> + <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} /> + </Container> + </Container> + </Container> +); + +const ActiveNode = styled(PlainActiveNode)` + cursor: pointer; + border: 2px solid ${colors.beigeWhite}; + border-radius: 4px; + padding: 4px 6px 4px 8px; +`; + +interface VersionDropDownProps { + selectedVersion: string; + versions: string[]; + onVersionSelected: (semver: string) => void; +} + +interface VersionDropDownState {} + +export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { + public render(): React.ReactNode { + const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />; + return ( + <DropDown + activateEvent={DropdownMouseEvent.Click} + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'middle', vertical: 'top' }} + popoverStyle={{ borderRadius: 4 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const items = _.map(this.props.versions, version => { + const isSelected = version === this.props.selectedVersion; + return ( + <Container key={`dropdown-items-${version}`}> + <Button + borderRadius="0px" + padding="0.8em 0em" + width="100%" + isDisabled={isSelected} + onClick={this._onClick.bind(this, version)} + > + v {version} + </Button> + </Container> + ); + }); + const dropdownMenu = <Container width="88px">{items}</Container>; + return dropdownMenu; + } + private _onClick(selectedVersion: string): void { + this.props.onVersionSelected(selectedVersion); + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..6e85c1499 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,162 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { DropDown } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const gettingStartedKeyToLinkInfo1: ALink[] = [ + { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, +]; +const gettingStartedKeyToLinkInfo2: ALink[] = [ + { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + title: Key.UseNetworkedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; +const popularDocsToLinkInfos: ALink[] = [ + { + title: Key.ZeroExJs, + to: WebsitePaths.ZeroExJs, + }, + { + title: Key.Connect, + to: WebsitePaths.Connect, + }, + { + title: Key.SmartContract, + to: WebsitePaths.SmartContracts, + }, +]; +const usefulLinksToLinkInfo: ALink[] = [ + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Github, + to: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, + }, + { + title: Key.Whitepaper, + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, + }, +]; + +interface DevelopersDropDownProps { + location: Location; + translate: Translate; + menuItemStyles: React.CSSProperties; + menuIconStyle: React.CSSProperties; +} + +interface DevelopersDropDownState {} + +export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> { + public render(): React.ReactNode { + const activeNode = ( + <Container className="flex relative" paddingRight="10"> + <Text fontColor={this.props.menuIconStyle.color}> + {this.props.translate.get(Key.Developers, Deco.Cap)} + </Text> + </Container> + ); + return ( + <DropDown + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + style={this.props.menuItemStyles} + popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const sectionPadding = '28px'; + const dropdownMenu = ( + <Container> + <Container className="flex" padding={sectionPadding}> + <Container paddingRight="45px"> + {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} + </Container> + <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> + </Container> + <Container width="100%" height="1px" backgroundColor={colors.grey300} /> + <Container className="flex" padding={sectionPadding}> + <Container paddingRight="62px"> + <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container> + </Container> + <Container> + <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container> + </Container> + </Container> + <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}> + <Container + padding="0.9rem" + backgroundColor={colors.lightBgGrey} + borderBottomLeftRadius={4} + borderBottomRightRadius={4} + > + <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center"> + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + </Text> + </Container> + </Link> + </Container> + ); + return dropdownMenu; + } + private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { + const numLinks = links.length; + let i = 0; + const renderLinks = _.map(links, (link: ALink) => { + const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); + const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; + let to = link.to; + if (isWikiLink && isOnWiki) { + to = `${link.to.split('#')[1]}`; + } + i++; + const isLast = i === numLinks; + const linkText = this.props.translate.get(link.title as Key, Deco.Cap); + return ( + <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}> + <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}> + <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}> + {linkText} + </Text> + </Link> + </Container> + ); + }); + return ( + <Container> + <Container height="33px"> + {!_.isEmpty(title) && ( + <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> + {title.toUpperCase()} + </Text> + )} + </Container> + {renderLinks} + </Container> + ); + } +} diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx index 2fd2785d1..df2d72edc 100644 --- a/packages/website/ts/components/dropdowns/network_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants } from '@0xproject/react-shared'; +import { constants as sharedConstants } from '@0x/react-shared'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index b0091a1c1..536ba924b 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -1,5 +1,5 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 0b282b2a1..2af4252bd 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -1,6 +1,6 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 7da2e0870..3d0203573 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,15 +1,13 @@ -import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; -import { Order as ZeroExOrder } from '@0xproject/types'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as accounting from 'accounting'; import * as _ from 'lodash'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import Divider from 'material-ui/Divider'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog'; import { FillOrderJSON } from 'ts/components/fill_order_json'; @@ -22,10 +20,10 @@ import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; -import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types'; +import { AlertTypes, BlockchainErrs, PortalOrder, Token, TokenByAddress, WebsitePaths } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; -import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { orderParser } from 'ts/utils/order_parser'; import { utils } from 'ts/utils/utils'; interface FillOrderProps { @@ -36,7 +34,7 @@ interface FillOrderProps { networkId: number; userAddress: string; tokenByAddress: TokenByAddress; - initialOrder: Order; + initialOrder: PortalOrder; dispatcher: Dispatcher; lastForceTokenStateRefetch: number; isFullWidth?: boolean; @@ -49,7 +47,7 @@ interface FillOrderState { globalErrMsg: string; orderJSON: string; orderJSONErrMsg: string; - parsedOrder: Order; + parsedOrder: PortalOrder; didFillOrderSucceed: boolean; didCancelOrderSucceed: boolean; unavailableTakerAmount: BigNumber; @@ -191,26 +189,31 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { ); } private _renderVisualOrder(): React.ReactNode { - const takerTokenAddress = this.state.parsedOrder.signedOrder.takerTokenAddress; + const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData) + .tokenAddress; const takerToken = this.props.tokenByAddress[takerTokenAddress]; - const orderTakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.takerTokenAmount); - const orderMakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.makerTokenAmount); + const orderTakerAmount = this.state.parsedOrder.signedOrder.takerAssetAmount; + const orderMakerAmount = this.state.parsedOrder.signedOrder.makerAssetAmount; const takerAssetToken = { amount: orderTakerAmount.minus(this.state.unavailableTakerAmount), symbol: takerToken.symbol, }; const fillToken = this.props.tokenByAddress[takerTokenAddress]; - const makerTokenAddress = this.state.parsedOrder.signedOrder.makerTokenAddress; + const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData) + .tokenAddress; const makerToken = this.props.tokenByAddress[makerTokenAddress]; const makerAssetToken = { - amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount), + amount: orderMakerAmount + .times(takerAssetToken.amount) + .div(orderTakerAmount) + .floor(), symbol: makerToken.symbol, }; const fillAssetToken = { amount: this.props.orderFillAmount, symbol: takerToken.symbol, }; - const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.signedOrder.expirationUnixTimestampSec); + const parsedOrderExpiration = this.state.parsedOrder.signedOrder.expirationTimeSeconds; let orderReceiveAmount = 0; if (!_.isUndefined(this.props.orderFillAmount)) { @@ -222,7 +225,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { } const isUserMaker = !_.isUndefined(this.state.parsedOrder) && - this.state.parsedOrder.signedOrder.maker === this.props.userAddress; + this.state.parsedOrder.signedOrder.makerAddress === this.props.userAddress; const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration); return ( <div className="pt3 pb1"> @@ -233,11 +236,11 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { Maker: </div> <div className="col col-2 pr1"> - <Identicon address={this.state.parsedOrder.signedOrder.maker} diameter={23} /> + <Identicon address={this.state.parsedOrder.signedOrder.makerAddress} diameter={23} /> </div> <div className="col col-6"> <EthereumAddress - address={this.state.parsedOrder.signedOrder.maker} + address={this.state.parsedOrder.signedOrder.makerAddress} networkId={this.props.networkId} /> </div> @@ -323,7 +326,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return ( <div> Order successfully filled. See the trade details in your{' '} - <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}> + <Link to={`${WebsitePaths.Portal}/trades`} fontColor={colors.white}> trade history </Link> </div> @@ -367,17 +370,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { if (!_.isEmpty(this.state.orderJSONErrMsg)) { return; } - - const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.makerTokenAddress]; - const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.takerTokenAddress]; - + const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData) + .tokenAddress; + const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData) + .tokenAddress; + const makerTokenIfExists = this.props.tokenByAddress[makerTokenAddress]; + const takerTokenIfExists = this.props.tokenByAddress[takerTokenAddress]; const tokensToTrack: Token[] = []; const isUnseenMakerToken = _.isUndefined(makerTokenIfExists); const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && utils.isTokenTracked(makerTokenIfExists); if (isUnseenMakerToken) { tokensToTrack.push({ ...this.state.parsedOrder.metadata.makerToken, - address: this.state.parsedOrder.signedOrder.makerTokenAddress, + address: makerTokenAddress, iconUrl: undefined, trackedTimestamp: undefined, isRegistered: false, @@ -390,7 +395,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { if (isUnseenTakerToken) { tokensToTrack.push({ ...this.state.parsedOrder.metadata.takerToken, - address: this.state.parsedOrder.signedOrder.takerTokenAddress, + address: takerTokenAddress, iconUrl: undefined, trackedTimestamp: undefined, isRegistered: false, @@ -411,10 +416,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { } private async _validateFillOrderFireAndForgetAsync(orderJSON: string): Promise<void> { let orderJSONErrMsg = ''; - let parsedOrder: Order; + let parsedOrder: PortalOrder; let orderHash: string; try { - const order = JSON.parse(orderJSON); + const order = orderParser.parseJsonString(orderJSON); const validationResult = validator.validate(order, portalOrderSchema); if (validationResult.errors.length > 0) { orderJSONErrMsg = 'Submitted order JSON is not a valid order'; @@ -422,36 +427,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } parsedOrder = order; - - const makerAmount = new BigNumber(parsedOrder.signedOrder.makerTokenAmount); - const takerAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount); - const expiration = new BigNumber(parsedOrder.signedOrder.expirationUnixTimestampSec); - const salt = new BigNumber(parsedOrder.signedOrder.salt); - const parsedMakerFee = new BigNumber(parsedOrder.signedOrder.makerFee); - const parsedTakerFee = new BigNumber(parsedOrder.signedOrder.takerFee); - - const zeroExOrder: ZeroExOrder = { - exchangeContractAddress: parsedOrder.signedOrder.exchangeContractAddress, - expirationUnixTimestampSec: expiration, - feeRecipient: parsedOrder.signedOrder.feeRecipient, - maker: parsedOrder.signedOrder.maker, - makerFee: parsedMakerFee, - makerTokenAddress: parsedOrder.signedOrder.makerTokenAddress, - makerTokenAmount: makerAmount, - salt, - taker: _.isEmpty(parsedOrder.signedOrder.taker) - ? constants.NULL_ADDRESS - : parsedOrder.signedOrder.taker, - takerFee: parsedTakerFee, - takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress, - takerTokenAmount: takerAmount, - }; - orderHash = getOrderHashHex(zeroExOrder); - + const signedOrder = parsedOrder.signedOrder; + orderHash = orderHashUtils.getOrderHashHex(signedOrder); const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists(); - const signature = parsedOrder.signedOrder.ecSignature; - const isSignatureValid = isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker); - if (exchangeContractAddr !== parsedOrder.signedOrder.exchangeContractAddress) { + const signature = signedOrder.signature; + const isSignatureValid = await this.props.blockchain.isValidSignatureAsync( + orderHash, + signature, + signedOrder.makerAddress, + ); + if (exchangeContractAddr !== signedOrder.exchangeAddress) { orderJSONErrMsg = 'This order was made on another network or using a deprecated Exchange contract'; parsedOrder = undefined; } else if (!isSignatureValid) { @@ -484,11 +469,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this.props.dispatcher.updateUserSuppliedOrderCache(undefined); } else { unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash); + const makerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.makerAssetData) + .tokenAddress; + const takerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.takerAssetData) + .tokenAddress; const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync( - parsedOrder.signedOrder.makerTokenAddress, + makerTokenAddress, ); const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync( - parsedOrder.signedOrder.takerTokenAddress, + takerTokenAddress, ); this.setState({ isMakerTokenAddressInRegistry, @@ -537,7 +526,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { globalErrMsg = 'You must specify a fill amount'; } - const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder); + const signedOrder = parsedOrder.signedOrder; if (_.isEmpty(globalErrMsg)) { try { await this.props.blockchain.validateFillOrderThrowIfInvalidAsync( @@ -546,7 +535,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this.props.userAddress, ); } catch (err) { - globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker); + globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.takerAddress); } } if (!_.isEmpty(globalErrMsg)) { @@ -611,18 +600,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } let globalErrMsg = ''; - - const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount); - - const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder); - const orderHash = getOrderHashHex(signedOrder); - const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash); - const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount); - try { - await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount); - } catch (err) { - globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker); - } + const signedOrder = parsedOrder.signedOrder; + const takerTokenAmount = signedOrder.takerAssetAmount; if (!_.isEmpty(globalErrMsg)) { this.setState({ isCancelling: false, @@ -631,7 +610,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } try { - await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount); + await this.props.blockchain.cancelOrderAsync(signedOrder); this.setState({ isCancelling: false, didCancelOrderSucceed: true, diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx index 90eedbb18..41413eac2 100644 --- a/packages/website/ts/components/fill_order_json.tsx +++ b/packages/website/ts/components/fill_order_json.tsx @@ -1,5 +1,5 @@ -import { generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { BigNumber } from '@0xproject/utils'; +import { generatePseudoRandomSalt } from '@0x/order-utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; @@ -33,11 +33,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder }, }; const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec(); - const hintECSignature = { - r: '0xf01103f759e2289a28593eaf22e5820032...', - s: '937862111edcba395f8a9e0cc1b2c5e12320...', - v: 27, - }; + const hintECSignature = '0x012761a3ed31b43c8780e905a260a35faefcc527be7516aa11c0256729b5b351bc33'; const hintSalt = generatePseudoRandomSalt(); const feeRecipient = constants.NULL_ADDRESS; const hintOrder = utils.generateOrder( diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index 45c492221..430abd013 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -18,12 +18,12 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => { <FlatButton key="fillWarningCancel" label="Cancel" - onTouchTap={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda + onClick={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda />, <FlatButton key="fillWarningContinue" label="Fill Order" - onTouchTap={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda + onClick={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda />, ]} open={props.isOpen} diff --git a/packages/website/ts/components/flash_messages/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx index f76e05fe1..b895126dc 100644 --- a/packages/website/ts/components/flash_messages/asset_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx @@ -1,6 +1,6 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx index 2a6d2a64b..b1d909baa 100644 --- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx +++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 6dcb5a0e9..dfedcba55 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,31 +1,17 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; + import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface MenuItemsBySection { - [sectionName: string]: FooterMenuItem[]; -} - -interface FooterMenuItem { - title: string; - path?: string; - isExternal?: boolean; -} - const ICON_DIMENSION = 16; -const linkStyle = { - color: colors.white, - cursor: 'pointer', -}; - const languageToMenuTitle = { [Language.English]: 'English', [Language.Russian]: 'Русский', @@ -51,76 +37,74 @@ export class Footer extends React.Component<FooterProps, FooterState> { }; } public render(): React.ReactNode { - const menuItemsBySection: MenuItemsBySection = { + const sectionNameToLinks: ObjectMap<ALink[]> = { [Key.Documentation]: [ { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, + { title: '0x.js', - path: WebsitePaths.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, { title: this.props.translate.get(Key.SmartContracts, Deco.Cap), - path: WebsitePaths.SmartContracts, + to: WebsitePaths.SmartContracts, }, { title: this.props.translate.get(Key.Connect, Deco.Cap), - path: WebsitePaths.Connect, + to: WebsitePaths.Connect, }, { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), - path: WebsitePaths.Whitepaper, - isExternal: true, + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), - path: WebsitePaths.Wiki, - }, - { - title: this.props.translate.get(Key.Faq, Deco.Cap), - path: WebsitePaths.FAQ, + to: WebsitePaths.Wiki, }, ], [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - isExternal: true, - path: constants.URL_ZEROEX_CHAT, + to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - isExternal: true, - path: constants.URL_BLOG, + to: constants.URL_BLOG, + shouldOpenInNewTab: true, }, { title: 'Twitter', - isExternal: true, - path: constants.URL_TWITTER, + to: constants.URL_TWITTER, + shouldOpenInNewTab: true, }, { title: 'Reddit', - isExternal: true, - path: constants.URL_REDDIT, + to: constants.URL_REDDIT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - isExternal: true, - path: constants.URL_DISCOURSE_FORUM, + to: constants.URL_DISCOURSE_FORUM, + shouldOpenInNewTab: true, }, ], [Key.Organization]: [ { title: this.props.translate.get(Key.About, Deco.Cap), - isExternal: false, - path: WebsitePaths.About, + to: WebsitePaths.About, }, { title: this.props.translate.get(Key.Careers, Deco.Cap), - isExternal: false, - path: WebsitePaths.Careers, + to: WebsitePaths.Careers, }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - isExternal: true, - path: 'mailto:team@0xproject.com', + to: 'mailto:team@0xproject.com', + shouldOpenInNewTab: true, }, ], }; @@ -160,19 +144,19 @@ export class Footer extends React.Component<FooterProps, FooterState> { <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Documentation)} - {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Community)} - {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Organization)} - {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))} </div> </div> </div> @@ -187,7 +171,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _renderMenuItem(item: FooterMenuItem): React.ReactNode { + private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', @@ -195,30 +179,26 @@ export class Footer extends React.Component<FooterProps, FooterState> { Reddit: 'reddit.png', [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', }; - const iconIfExists = titleToIcon[item.title]; + const iconIfExists = titleToIcon[link.title]; return ( - <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> - {item.isExternal ? ( - <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}> + <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> + <Link + to={link.to} + shouldOpenInNewTab={link.shouldOpenInNewTab} + fontColor={colors.white} + className="text-decoration-none" + > + <div> {!_.isUndefined(iconIfExists) ? ( <div className="inline-block"> <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div> - <div className="table-cell">{item.title}</div> + <div className="table-cell">{link.title}</div> </div> ) : ( - item.title + link.title )} - </a> - ) : ( - <Link to={item.path} style={linkStyle} className="text-decoration-none"> - <div> - {!_.isUndefined(iconIfExists) && ( - <div className="pr1">{this._renderIcon(iconIfExists)}</div> - )} - {item.title} - </div> - </Link> - )} + </div> + </Link> </div> ); } diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 761db7517..f5560cfa7 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 2dca3483f..98aad6c62 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -73,12 +73,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt <FlatButton key="noTracking" label="No" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)} />, <FlatButton key="yesTrack" label="Yes" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)} />, ], }, 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 72efab033..8afbee977 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,7 +1,7 @@ -import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; -import { ECSignature, Order as ZeroExOrder } from '@0xproject/types'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0x/order-utils'; +import { colors } from '@0x/react-shared'; +import { Order as ZeroExOrder } from '@0x/types'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; @@ -20,7 +20,16 @@ import { SwapIcon } from 'ts/components/ui/swap_icon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; -import { AlertTypes, BlockchainErrs, HashData, Order, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types'; +import { + AlertTypes, + BlockchainErrs, + HashData, + PortalOrder, + Side, + SideToAssetToken, + Token, + TokenByAddress, +} from 'ts/types'; import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; @@ -41,7 +50,7 @@ interface GenerateOrderFormProps { orderExpiryTimestamp: BigNumber; networkId: number; userAddress: string; - orderECSignature: ECSignature; + orderSignature: string; orderTakerAddress: string; orderSalt: BigNumber; sideToAssetToken: SideToAssetToken; @@ -212,7 +221,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G <OrderJSON exchangeContractIfExists={exchangeContractIfExists} orderExpiryTimestamp={this.props.orderExpiryTimestamp} - orderECSignature={this.props.orderECSignature} + orderSignature={this.props.orderSignature} orderTakerAddress={this.props.orderTakerAddress} orderMakerAddress={this.props.userAddress} orderSalt={this.props.orderSalt} @@ -294,12 +303,12 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G return false; } } - private async _signTransactionAsync(): Promise<Order | undefined> { + private async _signTransactionAsync(): Promise<PortalOrder | undefined> { this.setState({ signingState: SigningState.SIGNING, }); - const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists(); - if (_.isUndefined(exchangeContractAddr)) { + const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); + if (_.isUndefined(exchangeAddress)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); this.setState({ signingState: SigningState.UNSIGNED, @@ -308,28 +317,31 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } const hashData = this.props.hashData; + const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr); + const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr); const zeroExOrder: ZeroExOrder = { - exchangeContractAddress: exchangeContractAddr, - expirationUnixTimestampSec: hashData.orderExpiryTimestamp, - feeRecipient: hashData.feeRecipientAddress, - maker: hashData.orderMakerAddress, + senderAddress: constants.NULL_ADDRESS, + exchangeAddress, + expirationTimeSeconds: hashData.orderExpiryTimestamp, + feeRecipientAddress: hashData.feeRecipientAddress, + makerAddress: hashData.orderMakerAddress, makerFee: hashData.makerFee, - makerTokenAddress: hashData.depositTokenContractAddr, - makerTokenAmount: hashData.depositAmount, + makerAssetData, + makerAssetAmount: hashData.depositAmount, salt: hashData.orderSalt, - taker: hashData.orderTakerAddress, + takerAddress: hashData.orderTakerAddress, takerFee: hashData.takerFee, - takerTokenAddress: hashData.receiveTokenContractAddr, - takerTokenAmount: hashData.receiveAmount, + takerAssetData, + takerAssetAmount: hashData.receiveAmount, }; - const orderHash = getOrderHashHex(zeroExOrder); + const orderHash = orderHashUtils.getOrderHashHex(zeroExOrder); let globalErrMsg = ''; let order; try { - const ecSignature = await this.props.blockchain.signOrderHashAsync(orderHash); + const signature = await this.props.blockchain.signOrderHashAsync(orderHash); order = utils.generateOrder( - exchangeContractAddr, + exchangeAddress, this.props.sideToAssetToken, hashData.orderExpiryTimestamp, this.props.orderTakerAddress, @@ -337,7 +349,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G hashData.makerFee, hashData.takerFee, hashData.feeRecipientAddress, - ecSignature, + signature, this.props.tokenByAddress, hashData.orderSalt, ); 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 3d7eda84c..b8cd88b18 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as moment from 'moment'; diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index 39ec72f8a..1a71f8081 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { addressUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { addressUtils } from '@0x/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 39d2e3030..fd7d3b174 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index eb01e3ea6..83f263842 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index 3a7905442..6799e54bf 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index 5417ce715..3e43c1c07 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import DatePicker from 'material-ui/DatePicker'; import TimePicker from 'material-ui/TimePicker'; diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 8d9cdfc0b..73b6615d4 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -1,9 +1,10 @@ -import { getOrderHashHex } from '@0xproject/order-utils'; -import { Styles } from '@0xproject/react-shared'; -import { Order } from '@0xproject/types'; +import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; +import { Styles } from '@0x/react-shared'; +import { Order } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); + import { Blockchain } from 'ts/blockchain'; import { FakeTextField } from 'ts/components/ui/fake_text_field'; import { HashData } from 'ts/types'; @@ -42,23 +43,26 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> { ); } private _generateMessageHashHex(): string { - const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists(); + const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); const hashData = this.props.hashData; + const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr); + const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr); const order: Order = { - exchangeContractAddress, - expirationUnixTimestampSec: hashData.orderExpiryTimestamp, - feeRecipient: hashData.feeRecipientAddress, - maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress, + senderAddress: constants.NULL_ADDRESS, + exchangeAddress, + expirationTimeSeconds: hashData.orderExpiryTimestamp, + feeRecipientAddress: hashData.feeRecipientAddress, + makerAddress: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress, makerFee: hashData.makerFee, - makerTokenAddress: hashData.depositTokenContractAddr, - makerTokenAmount: hashData.depositAmount, + makerAssetData, + makerAssetAmount: hashData.depositAmount, salt: hashData.orderSalt, - taker: hashData.orderTakerAddress, + takerAddress: hashData.orderTakerAddress, takerFee: hashData.takerFee, - takerTokenAddress: hashData.receiveTokenContractAddr, - takerTokenAmount: hashData.receiveAmount, + takerAssetData, + takerAssetAmount: hashData.receiveAmount, }; - const orderHash = getOrderHashHex(order); + const orderHash = orderHashUtils.getOrderHashHex(order); return orderHash; } } diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 93ef516cf..fded3a9dd 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,9 +1,8 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; @@ -111,8 +110,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok <span> Insufficient allowance.{' '} <Link - to={`${WebsitePaths.Portal}/balances`} - style={{ cursor: 'pointer', color: colors.darkestGrey }} + to={`${WebsitePaths.Portal}/account`} + textDecoration="underline" + fontColor={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 0bd36781e..c3c2d8b37 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Paper from 'material-ui/Paper'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..db7d55261 --- /dev/null +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,92 @@ +import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Text } from 'ts/components/ui/text'; + +export interface NestedSidebarMenuProps { + sectionNameToLinks: ObjectMap<ALink[]>; + sidebarHeader?: React.ReactNode; + shouldReformatMenuItemNames?: boolean; +} + +export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { + const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => { + const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName); + const menuItems = _.map(links, (link, i) => { + const menuItemTitle = props.shouldReformatMenuItemNames + ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title)) + : link.title; + const finalLink = { + ...link, + title: menuItemTitle, + }; + return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />; + }); + // tslint:disable-next-line:no-unused-variable + return ( + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> + <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1"> + {finalSectionName.toUpperCase()} + </Text> + {menuItems} + </div> + ); + }); + return ( + <div> + {props.sidebarHeader} + <div>{navigation}</div> + </div> + ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { + constructor(props: MenuItemProps) { + super(props); + const isActive = window.location.hash.slice(1) === props.link.to; + this.state = { + isActive, + }; + } + public render(): React.ReactNode { + const isActive = this.state.isActive; + return ( + <Link + to={this.props.link.to} + shouldOpenInNewTab={this.props.link.shouldOpenInNewTab} + onActivityChanged={this._onActivityChanged.bind(this)} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100} + fontSize="14px" + textAlign="left" + > + <Text + fontWeight={isActive ? 'bold' : 'normal'} + fontColor={isActive ? colors.white : colors.grey800} + > + {this.props.link.title} + </Text> + </Button> + </Link> + ); + } + private _onActivityChanged(isActive: boolean): void { + this.setState({ + isActive, + }); + } +} diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index ca71fcd50..1d21e5a85 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx index d618c8318..173ba9a97 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; @@ -12,7 +12,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet const followupText = isOnMobile ? `Please revisit this site in your mobile dApp browser to continue!` : `Please refresh the page once you've done this to continue!`; - const downloadText = isOnMobile ? 'Get the Toshi Wallet' : 'Get the MetaMask extension'; + const downloadText = isOnMobile ? 'Get Coinbase Wallet' : 'Get the MetaMask extension'; return ( <div className="flex items-center flex-column"> <Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text> @@ -21,7 +21,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet height="50px" width="50px" borderRadius="22%" - src={isOnMobile ? '/images/toshi_logo.jpg' : '/images/metamask_icon.png'} + src={isOnMobile ? '/images/coinbase_wallet_logo.png' : '/images/metamask_icon.png'} /> <Container marginLeft="10px"> <a href={downloadLink} target="_blank"> diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index e1b0f304b..384bf7154 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as _ from 'lodash'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 522687758..6adcec0b1 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { RouteComponentProps, withRouter } from 'react-router'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import { Blockchain } from 'ts/blockchain'; import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index e4332de75..37eef867b 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index cf06f10c8..f33681835 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -1,5 +1,4 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils'; +import { BigNumber, fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; @@ -14,7 +13,7 @@ import { utils } from 'ts/utils/utils'; interface OrderJSONProps { exchangeContractIfExists: string; orderExpiryTimestamp: BigNumber; - orderECSignature: ECSignature; + orderSignature: string; orderTakerAddress: string; orderMakerAddress: string; orderSalt: BigNumber; @@ -48,7 +47,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { this.props.orderMakerFee, this.props.orderTakerFee, this.props.orderFeeRecipient, - this.props.orderECSignature, + this.props.orderSignature, this.props.tokenByAddress, this.props.orderSalt, ); @@ -169,7 +168,7 @@ You can see and fill it here: ${this.state.shareLink}`); this.props.orderMakerFee, this.props.orderTakerFee, this.props.orderFeeRecipient, - this.props.orderECSignature, + this.props.orderSignature, this.props.tokenByAddress, this.props.orderSalt, ); diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index ca35abc2b..bea69bb95 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,5 @@ -import { Styles } from '@0xproject/react-shared'; +import { Link, Styles } from '@0x/react-shared'; import * as React from 'react'; -import { Link } from 'react-router-dom'; - import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; @@ -27,7 +25,7 @@ const styles: Styles = { export const BackButton = (props: BackButtonProps) => { return ( <div style={{ height: 65, paddingTop: 25 }}> - <Link to={props.to} style={{ textDecoration: 'none' }}> + <Link to={props.to}> <Island className="flex right" style={styles.backButton}> <div style={{ marginLeft: 12 }}> <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} /> diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index a6707e86c..7280a6102 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; @@ -39,7 +39,7 @@ export interface DrawerMenuProps { } export const DrawerMenu = (props: DrawerMenuProps) => { const relayerItemEntry = { - to: `${WebsitePaths.Portal}`, + to: WebsitePaths.Portal, labelText: 'Relayer ecosystem', iconName: 'zmdi-portable-wifi', }; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 39dab77f5..d59101686 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,7 +1,7 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { MenuItem } from 'ts/components/ui/menu_item'; +import { CustomMenuItem } from 'ts/components/ui/custom_menu_item'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; @@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { {_.map(props.menuItemEntries, entry => { const isSelected = entry.to === props.selectedPath; return ( - <MenuItem key={entry.to} to={entry.to}> + <CustomMenuItem key={entry.to} to={entry.to}> <MenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={isSelected} theme={props.theme} /> - </MenuItem> + </CustomMenuItem> ); })} </div> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ff11880e3..94ab63ac6 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,9 +1,9 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -18,7 +18,7 @@ import { Loading } from 'ts/components/portal/loading'; import { Menu, MenuTheme } from 'ts/components/portal/menu'; import { Section } from 'ts/components/portal/section'; import { TextHeader } from 'ts/components/portal/text_header'; -import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; +import { RelayerIndex, RelayerIndexCellStyle } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; @@ -39,7 +39,7 @@ import { BlockchainErrs, HashData, ItemByAddress, - Order, + PortalOrder, ProviderType, ScreenWidths, Token, @@ -71,7 +71,7 @@ export interface PortalProps { userEtherBalanceInWei?: BigNumber; userAddress: string; shouldBlockchainErrDialogBeOpen: boolean; - userSuppliedOrderCache: Order; + userSuppliedOrderCache: PortalOrder; location: Location; flashMessage?: string | React.ReactNode; lastForceTokenStateRefetch: number; @@ -114,11 +114,11 @@ const DOCUMENT_DESCRIPTION = 'Learn about and trade on 0x Relayers'; export class Portal extends React.Component<PortalProps, PortalState> { private _blockchain: Blockchain; - private readonly _sharedOrderIfExists: Order; + private readonly _sharedOrderIfExists: PortalOrder; private readonly _throttledScreenWidthUpdate: () => void; constructor(props: PortalProps) { super(props); - this._sharedOrderIfExists = orderParser.parse(window.location.search); + this._sharedOrderIfExists = orderParser.parseQueryString(window.location.search); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER); const hasAcceptedDisclaimer = @@ -210,12 +210,16 @@ export class Portal extends React.Component<PortalProps, PortalState> { isLoaded: false, }; } - this.setState({ - trackedTokenStateByAddress, - }); - // Fetch the actual balance/allowance. - // tslint:disable-next-line:no-floating-promises - this._fetchBalancesAndAllowancesAsync(newTokenAddresses); + this.setState( + { + trackedTokenStateByAddress, + }, + () => { + // Fetch the actual balance/allowance. + // tslint:disable-next-line:no-floating-promises + this._fetchBalancesAndAllowancesAsync(newTokenAddresses); + }, + ); } } public render(): React.ReactNode { @@ -317,7 +321,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { }; return ( <Section - header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />} + header={<BackButton to={WebsitePaths.Portal} labelText="back to Relayers" />} body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />} /> ); @@ -389,9 +393,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { </Container> ); return !shouldStartOnboarding ? ( - <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}> - {startOnboarding} - </Link> + <Link to={`${WebsitePaths.Portal}/account`}>{startOnboarding}</Link> ) : ( startOnboarding ); @@ -541,17 +543,22 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private _renderRelayerIndexSection(): React.ReactNode { const isMobile = utils.isMobileWidth(this.props.screenWidth); + // TODO(bmillman): revert RelayerIndex cellStyle to Expanded once data pipeline is tracking v2 volume return ( <Section header={!isMobile && <TextHeader labelText="0x Relayers" />} body={ - <Container className="flex flex-column items-center"> + <Container className="flex flex-column"> {isMobile && ( <Container marginTop="20px" marginBottom="20px"> {this._renderStartOnboarding()} </Container> )} - <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} /> + <RelayerIndex + networkId={this.props.networkId} + screenWidth={this.props.screenWidth} + cellStyle={RelayerIndexCellStyle.Minimized} + /> </Container> } /> @@ -641,6 +648,9 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]): Promise<void> { + if (_.isEmpty(tokenAddresses)) { + return; + } const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; const balancesAndAllowances = await Promise.all( diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx index 853da3a29..b6045b832 100644 --- a/packages/website/ts/components/portal/text_header.tsx +++ b/packages/website/ts/components/portal/text_header.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 193dd237a..7f1b4ebb4 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import { GridTile as PlainGridTile } from 'material-ui/GridList'; import * as React from 'react'; @@ -14,9 +14,15 @@ import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; import { utils } from 'ts/utils/utils'; +export enum RelayerGridTileStyle { + Expanded = 0, + Minimized, +} + export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; networkId: number; + style: RelayerGridTileStyle; } const styles: Styles = { @@ -30,10 +36,14 @@ const styles: Styles = { height: '100%', boxSizing: 'border-box', }, - header: { + expandedHeader: { height: '50%', width: '100%', }, + minimizedHeader: { + height: '100%', + width: '100%', + }, body: { height: '50%', width: '100%', @@ -75,10 +85,12 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) ? props.relayerInfo.primaryColor : FALLBACK_PRIMARY_COLOR; + const isExpanded = props.style === RelayerGridTileStyle.Expanded; + const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader; return ( <Island style={styles.root} Component={GridTile}> <div style={styles.innerDiv} onClick={onClick}> - <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}> + <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}> <Image className="mx-auto" src={props.relayerInfo.logoImgUrl} @@ -86,21 +98,23 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( height={RELAYER_ICON_HEIGHT} /> </div> - <div style={styles.body}> - <div className="pb1" style={styles.relayerNameLabel}> - {props.relayerInfo.name} - </div> - <Section titleText="Weekly Trade Volume"> - {!_.isUndefined(weeklyTxnVolume) && ( - <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> - )} - </Section> - <Container marginTop="10px"> - <Section titleText="Top Tokens"> - {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} + {isExpanded && ( + <div style={styles.body}> + <div className="pb1" style={styles.relayerNameLabel}> + {props.relayerInfo.name} + </div> + <Section titleText="Weekly Trade Volume"> + {!_.isUndefined(weeklyTxnVolume) && ( + <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> + )} </Section> - </Container> - </div> + <Container marginTop="10px"> + <Section titleText="Top Tokens"> + {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} + </Section> + </Container> + </div> + )} </div> </Island> ); diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 4aea1bbbb..e88c20d7e 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; -import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile'; import { Retry } from 'ts/components/ui/retry'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +export enum RelayerIndexCellStyle { + Expanded = 0, + Minimized, +} + export interface RelayerIndexProps { networkId: number; screenWidth: ScreenWidths; + cellStyle: RelayerIndexCellStyle; } interface RelayerIndexState { @@ -18,7 +24,8 @@ interface RelayerIndexState { error?: Error; } -const CELL_HEIGHT = 290; +const CELL_HEIGHT_EXPANDED = 290; +const CELL_HEIGHT_MINIMIZED = 225; const NUMBER_OF_COLUMNS_LARGE = 3; const NUMBER_OF_COLUMNS_MEDIUM = 2; const NUMBER_OF_COLUMNS_SMALL = 2; @@ -56,16 +63,28 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde </div> ); } else { - const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth); + const numberOfRelayers = this.state.relayerInfos.length; + const numberOfColumns = Math.min( + numberOfRelayers, + this._numberOfColumnsForScreenWidth(this.props.screenWidth), + ); + const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded; + const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED; + const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized; return ( <GridList - cellHeight={CELL_HEIGHT} + cellHeight={cellHeight} cols={numberOfColumns} padding={GRID_PADDING} style={{ marginTop: -10, marginBottom: 0 }} > {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( - <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} /> + <RelayerGridTile + key={index} + relayerInfo={relayerInfo} + networkId={this.props.networkId} + style={gridTileStyle} + /> ))} </GridList> ); diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index f3787bd27..558d99855 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index 107983dee..27438e5d5 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -1,4 +1,4 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx deleted file mode 100644 index a14ab54f5..000000000 --- a/packages/website/ts/components/sidebar_header.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as React from 'react'; - -interface SidebarHeaderProps { - title: string; - iconUrl: string; -} - -interface SidebarHeaderState {} - -export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> { - public render(): React.ReactNode { - return ( - <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> - <div className="flex" style={{ fontSize: 25 }}> - <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div> - <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> - docs - </div> - </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> - | - </div> - <div className="flex"> - <div> - <img src={this.props.iconUrl} width="22" /> - </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> - {this.props.title} - </div> - </div> - </div> - ); - } -} diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 969ef32ff..9ba2bad84 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -4,9 +4,9 @@ import { Networks, Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; -import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +} from '@0x/react-shared'; +import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; @@ -165,7 +165,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala key="errorOkBtn" label="Ok" primary={true} - onTouchTap={this._onErrorDialogToggle.bind(this, false)} + onClick={this._onErrorDialogToggle.bind(this, false)} />, ]; const isTestNetwork = utils.isTestNetwork(this.props.networkId); @@ -337,14 +337,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala const isMintable = (_.includes(configs.SYMBOLS_OF_MINTABLE_KOVAN_TOKENS, token.symbol) && this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan]) || - (_.includes(configs.SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS, token.symbol) && - _.includes( - [ - sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby], - sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten], - ], - this.props.networkId, - )); + (_.includes(configs.SYMBOLS_OF_MINTABLE_ROPSTEN_TOKENS, token.symbol) && + this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten]); return ( <TableRow key={token.address} style={{ height: TOKEN_TABLE_ROW_HEIGHT }}> <TableRowColumn colSpan={tokenColSpan}> @@ -392,14 +386,6 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} /> )} - {token.symbol === ZRX_TOKEN_SYMBOL && ( - <LifeCycleRaisedButton - labelReady="Request" - labelLoading="Sending..." - labelComplete="Sent!" - onClickAsyncFn={this._faucetRequestAsync.bind(this, false)} - /> - )} </TableRowColumn> )} {this.props.screenWidth !== ScreenWidths.Sm && ( diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 806eaeea5..c88c29b8e 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 646d3fc94..d5967cd1d 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,19 +1,18 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; -import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; +import { DocsInfo } from '@0x/react-docs'; +import { ALink, colors, Link, Styles } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; -import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; +import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -35,8 +34,7 @@ export interface TopBarProps { translate: Translate; docsVersion?: string; availableDocVersions?: string[]; - menu?: DocsMenu; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks?: ObjectMap<ALink[]>; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -109,109 +107,17 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { ? 'flex mx-auto items-center max-width-4' : 'flex mx-auto items-center'; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - const developerSectionMenuItems = [ - <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" /> - </Link>, - <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SmartContract, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-standard-relayer-api" - target="_blank" - className="text-decoration-none" - href={constants.URL_STANDARD_RELAYER_API_GITHUB} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)} - /> - </a>, - <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-whitePaper" - target="_blank" - className="text-decoration-none" - href={`${WebsitePaths.Whitepaper}`} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)} - /> - </a>, - <a - key="subMenuItem-github" - target="_blank" - className="text-decoration-none" - href={constants.URL_GITHUB_ORG} - > - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" /> - </a>, - ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${ - isExpandedDisplayType ? '4' : '5' + isExpandedDisplayType ? '4' : '6' } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, color: isNightVersion ? 'white' : 'black', cursor: 'pointer', }; - const activeNode = ( - <div className="flex relative" style={{ color: menuIconStyle.color }}> - <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> - <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}> - <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} /> - </div> - </div> - ); - const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>; return ( <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} @@ -224,49 +130,45 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { paddingLeft={this.props.paddingLeft} paddingRight={this.props.paddingRight} > - <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> + <Link to={WebsitePaths.Home}> <img src={logoUrl} height="30" /> </Link> <div className="flex-auto" /> {!this._isViewingPortal() && ( <div className={menuClasses}> <div className="flex items-center justify-between"> - <DropDown - activeNode={activeNode} - popoverContent={popoverContent} - anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'middle', vertical: 'top' }} - style={styles.menuItem} + <DevelopersDropDown + location={this.props.location} + menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }} + translate={this.props.translate} + menuIconStyle={menuIconStyle} /> <TopBarMenuItem - title={this.props.translate.get(Key.Wiki, Deco.Cap)} - path={`${WebsitePaths.Wiki}`} + title={this.props.translate.get(Key.Blog, Deco.Cap)} + path={constants.URL_BLOG} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={false} + shouldOpenInNewTab={true} /> <TopBarMenuItem - title={this.props.translate.get(Key.Blog, Deco.Cap)} - path={constants.URL_BLOG} + title={this.props.translate.get(Key.About, Deco.Cap)} + path={WebsitePaths.About} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={true} /> <TopBarMenuItem - title={this.props.translate.get(Key.About, Deco.Cap)} - path={`${WebsitePaths.About}`} + title={this.props.translate.get(Key.Careers, Deco.Cap)} + path={WebsitePaths.Careers} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={false} /> <TopBarMenuItem title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} - path={`${WebsitePaths.Portal}`} + path={WebsitePaths.Portal} isPrimary={true} style={styles.menuItem} className={`${isExpandedDisplayType && 'md-hide'}`} isNightVersion={isNightVersion} - isExternal={false} /> </div> </div> @@ -323,104 +225,36 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { onRequestChange={this._onMenuButtonClick.bind(this)} > <div className="clearfix"> - {this._renderDocsMenu()} - {this._renderWiki()} <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> {this.props.translate.get(Key.Website, Deco.Cap)} </div> - <Link to={WebsitePaths.Home} className="text-decoration-none"> + <Link to={WebsitePaths.Home}> <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> </Link> - <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> - <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem> + <Link to={WebsitePaths.Docs}> + <MenuItem className="py2">{this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> </Link> - {!this._isViewing0xjsDocs() && ( - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem className="py2">0x.js {this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> - </Link> - )} - {!this._isViewingConnectDocs() && ( - <Link to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.Connect, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSmartContractsDocs() && ( - <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingWeb3WrapperDocs() && ( - <Link to={WebsitePaths.Web3Wrapper} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.Web3Wrapper, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSolCompilerDocs() && ( - <Link to={WebsitePaths.SolCompiler} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.SolCompiler, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingJsonSchemasDocs() && ( - <Link to={WebsitePaths.JSONSchemas} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.JsonSchemas, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSolCovDocs() && ( - <Link to={WebsitePaths.SolCov} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.SolCov, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSubprovidersDocs() && ( - <Link to={WebsitePaths.Subproviders} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.Subproviders, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingEthereumTypesDocs() && ( - <Link to={WebsitePaths.EthereumTypes} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.EthereumTypes, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} {!this._isViewingPortal() && ( - <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> + <Link to={WebsitePaths.Portal}> <MenuItem className="py2"> {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} </MenuItem> </Link> )} - <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> + <Link to={WebsitePaths.Whitepaper} shouldOpenInNewTab={true}> <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem> - </a> - <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> + </Link> + <Link to={WebsitePaths.About}> <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem> </Link> - <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> + <Link to={WebsitePaths.Careers}> + <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem> + </Link> + <Link to={constants.URL_BLOG} shouldOpenInNewTab={true}> <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem> - </a> - <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> - <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> + </Link> + <Link to={WebsitePaths.FAQ}> + <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}> {this.props.translate.get(Key.Faq, Deco.Cap)} </MenuItem> </Link> @@ -428,52 +262,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </Drawer> ); } - private _renderDocsMenu(): React.ReactNode { - if ( - (!this._isViewing0xjsDocs() && - !this._isViewingSmartContractsDocs() && - !this._isViewingWeb3WrapperDocs() && - !this._isViewingSolCompilerDocs() && - !this._isViewingJsonSchemasDocs() && - !this._isViewingSolCovDocs() && - !this._isViewingSubprovidersDocs() && - !this._isViewingConnectDocs()) || - _.isUndefined(this.props.menu) - ) { - return undefined; - } - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - topLevelMenu={this.props.menu} - menuSubsectionsBySection={this.props.menuSubsectionsBySection} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - ); - } - private _renderWiki(): React.ReactNode { - if (!this._isViewingWiki()) { - return undefined; - } - - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - topLevelMenu={this.props.menuSubsectionsBySection} - menuSubsectionsBySection={this.props.menuSubsectionsBySection} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> - </div> - ); - } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, @@ -482,62 +270,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { private _isViewingPortal(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } - private _isViewingDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Docs); - } private _isViewingFAQ(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } - private _isViewing0xjsDocs(): boolean { - return ( - _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs) || - _.includes(this.props.location.pathname, WebsiteLegacyPaths.ZeroExJs) - ); - } - private _isViewingConnectDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Connect); - } - private _isViewingSmartContractsDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); - } - private _isViewingWeb3WrapperDocs(): boolean { - return ( - _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper) || - _.includes(this.props.location.pathname, WebsiteLegacyPaths.Web3Wrapper) - ); - } - private _isViewingSolCompilerDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.SolCompiler); - } - private _isViewingJsonSchemasDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas); - } - private _isViewingSolCovDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.SolCov); - } - private _isViewingSubprovidersDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Subproviders); - } - private _isViewingEthereumTypesDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.EthereumTypes); - } - private _isViewingWiki(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Wiki); - } private _shouldDisplayBottomBar(): boolean { - return ( - this._isViewingWiki() || - this._isViewingFAQ() || - this._isViewingDocs() || - this._isViewing0xjsDocs() || - this._isViewingSmartContractsDocs() || - this._isViewingWeb3WrapperDocs() || - this._isViewingSolCompilerDocs() || - this._isViewingJsonSchemasDocs() || - this._isViewingSolCovDocs() || - this._isViewingSubprovidersDocs() || - this._isViewingConnectDocs() || - this._isViewingPortal() - ); + return this._isViewingFAQ() || this._isViewingPortal(); } } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index 25fab2868..9f15cffbb 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,7 +1,6 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { CallToAction } from 'ts/components/ui/button'; @@ -13,7 +12,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - isExternal: boolean; + shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -26,6 +25,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM isPrimary: false, style: DEFAULT_STYLE, className: '', + shouldOpenInNewTab: false, isNightVersion: false, }; public render(): React.ReactNode { @@ -38,20 +38,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM ); return ( <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}> - {this.props.isExternal ? ( - <a - className="text-decoration-none" - style={{ color: linkColor }} - target="_blank" - href={this.props.path} - > - {itemContent} - </a> - ) : ( - <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}> - {itemContent} - </Link> - )} + <Link to={this.props.path} shouldOpenInNewTab={this.props.shouldOpenInNewTab} fontColor={linkColor}> + {itemContent} + </Link> </div> ); } diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx index 294fb8590..e701686b0 100644 --- a/packages/website/ts/components/track_token_confirmation.tsx +++ b/packages/website/ts/components/track_token_confirmation.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; 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 321a8b0e1..667027dce 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -1,6 +1,6 @@ -import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, EtherscanLinkSuffixes } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as moment from 'moment'; diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index b571d8c1c..32e0f1be8 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { AlertTypes } from 'ts/types'; diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index 93d6b0ebb..fc754421a 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Spinner } from 'ts/components/ui/spinner'; diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx index 9e5a256b6..a1a8ff89b 100644 --- a/packages/website/ts/components/ui/balance.tsx +++ b/packages/website/ts/components/ui/balance.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 2952c8859..92f927843 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { darken, saturate } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -10,11 +10,13 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( @@ -29,11 +31,12 @@ export const Button = styled(PlainButton)` color: ${props => props.fontColor}; transition: background-color, opacity 0.5s ease; padding: ${props => props.padding}; - border-radius: 6px; + border-radius: ${props => props.borderRadius}; font-weight: 500; outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; + text-align: ${props => props.textAlign}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { @@ -52,11 +55,13 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; @@ -96,4 +101,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ CallToAction.defaultProps = { type: 'dark', fontSize: '14px', + padding: '0.9em 1.6em', }; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index f2ae68b70..ece077563 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,7 +15,11 @@ export interface ContainerProps { paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; + background?: string; borderRadius?: StringOrNum; + borderBottomLeftRadius?: StringOrNum; + borderBottomRightRadius?: StringOrNum; + borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index 0330d1843..59e398cb6 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx index 0cb4b387c..87ce32126 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -1,24 +1,23 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; -interface MenuItemProps { +interface CustomMenuItemProps { to: string; - style?: React.CSSProperties; onClick?: () => void; className?: string; } -interface MenuItemState { +interface CustomMenuItemState { isHovering: boolean; } -export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { - public static defaultProps: Partial<MenuItemProps> = { +export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> { + public static defaultProps: Partial<CustomMenuItemProps> = { onClick: _.noop.bind(_), className: '', }; - public constructor(props: MenuItemProps) { + public constructor(props: CustomMenuItemProps) { super(props); this.state = { isHovering: false, @@ -30,7 +29,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { opacity: this.state.isHovering ? 0.5 : 1, }; return ( - <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}> + <Link to={this.props.to}> <div onClick={this.props.onClick.bind(this)} className={`mx-auto ${this.props.className}`} diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..4138b3fe5 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import Popover from 'material-ui/Popover'; import * as React from 'react'; import { MaterialUIPosition } from 'ts/types'; @@ -21,6 +22,7 @@ export interface DropDownProps { zDepth?: number; activateEvent?: DropdownMouseEvent; closeEvent?: DropdownMouseEvent; + popoverStyle?: React.CSSProperties; } interface DropDownState { @@ -34,6 +36,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { zDepth: 1, activateEvent: DropdownMouseEvent.Hover, closeEvent: DropdownMouseEvent.Hover, + popoverStyle: {}, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -73,10 +76,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { anchorEl={this.state.anchorEl} anchorOrigin={this.props.anchorOrigin} targetOrigin={this.props.targetOrigin} - onRequestClose={this._closePopover.bind(this)} + onRequestClose={ + this.props.closeEvent === DropdownMouseEvent.Click + ? this._closePopover.bind(this) + : _.noop.bind(_) + } useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} + style={this.props.popoverStyle} > <div onMouseEnter={this._onHover.bind(this)} @@ -92,7 +100,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void { if (this.props.activateEvent === DropdownMouseEvent.Click) { this.setState({ - isDropDownOpen: true, + isDropDownOpen: !this.state.isDropDownOpen, anchorEl: event.currentTarget, }); } diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx index f449a8e75..71d98af56 100644 --- a/packages/website/ts/components/ui/ethereum_address.tsx +++ b/packages/website/ts/components/ui/ethereum_address.tsx @@ -1,4 +1,4 @@ -import { EtherscanLinkSuffixes } from '@0xproject/react-shared'; +import { EtherscanLinkSuffixes } from '@0x/react-shared'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 0beb69123..57ab91ba2 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx index ac3c30fec..7c3a482a4 100644 --- a/packages/website/ts/components/ui/fake_text_field.tsx +++ b/packages/website/ts/components/ui/fake_text_field.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; import { InputLabel } from 'ts/components/ui/input_label'; diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx index 13cd239da..9f469ec69 100644 --- a/packages/website/ts/components/ui/icon_button.tsx +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e01a71a53..e5f4f6c70 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 8eda45a5d..e7afb5a17 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as React from 'react'; export interface InputLabelProps { diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 380fbc77d..a8daf4102 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { errorUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { errorUtils } from '@0x/utils'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -71,7 +71,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton style={{ width: '100%' }} backgroundColor={this.props.backgroundColor} labelColor={this.props.labelColor} - onTouchTap={this.onClickAsync.bind(this)} + onClick={this.onClickAsync.bind(this)} disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY} /> ); diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index a25550475..6c0572437 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index db0a4188d..c97b1e700 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index 0f96586ec..5080462fa 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; export interface RequiredLabelProps { diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 8a9349c6d..45ee752e3 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< GoToAccountManagementSimpleMenuItemProps > = ({ onClick }) => { return ( - <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}> + <Link to={`${WebsitePaths.Portal}/account`}> <SimpleMenuItem displayText="Manage Account..." onClick={onClick} /> </Link> ); diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx index e8670cc3e..dc73e74e3 100644 --- a/packages/website/ts/components/ui/spinner.tsx +++ b/packages/website/ts/components/ui/spinner.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index f1d1ae7d4..406da8fe1 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; interface SwapIconProps { diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 734483564..c13e21913 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -19,7 +19,10 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; hoverColor?: string; + letterSpacing?: string | number; noWrap?: boolean; + textAlign?: string; + display?: string; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( @@ -33,6 +36,8 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-align: ${props => props.textAlign}; + letter-spacing: ${props => props.letterSpacing}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; @@ -41,6 +46,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx new file mode 100644 index 000000000..6d38580b9 --- /dev/null +++ b/packages/website/ts/components/ui/typed_text.tsx @@ -0,0 +1,75 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import Typist from 'react-typist'; + +import { Text, TextProps } from 'ts/components/ui/text'; + +import 'react-typist/dist/Typist.css'; + +export interface TypedTextProps extends TextProps { + textList: string[]; + shouldRepeat?: boolean; + wordDelayMs?: number; + avgKeystrokeDelayMs?: number; + stdKeystrokeDelay?: number; +} + +export interface TypedTextState { + cycleCount: number; +} + +export class TypedText extends React.Component<TypedTextProps, TypedTextState> { + public static defaultProps = { + shouldRepeat: false, + avgKeystrokeDelayMs: 90, + wordDelayMs: 1000, + }; + public state = { + cycleCount: 0, + }; + public render(): React.ReactNode { + const { + textList, + shouldRepeat, + wordDelayMs, + avgKeystrokeDelayMs, + stdKeystrokeDelay, + // tslint:disable-next-line + ...textProps + } = this.props; + const { cycleCount } = this.state; + if (_.isEmpty(textList)) { + return null; + } + const typistChildren: React.ReactNode[] = []; + _.forEach(textList, text => { + typistChildren.push( + <Text key={`text-${text}-${cycleCount}`} {...textProps}> + {text} + </Text>, + ); + if (wordDelayMs) { + typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />); + } + typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />); + }); + return ( + <Typist + avgTypingDelay={avgKeystrokeDelayMs} + stdTypingDelay={stdKeystrokeDelay} + className="inline" + key={`typist-key-${cycleCount}`} + onTypingDone={this._onTypingDone.bind(this)} + > + {typistChildren} + </Typist> + ); + } + private _onTypingDone(): void { + if (this.props.shouldRepeat) { + this.setState({ + cycleCount: this.state.cycleCount + 1, + }); + } + } +} diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx index a8d18006e..d723757d2 100644 --- a/packages/website/ts/components/visual_order.tsx +++ b/packages/website/ts/components/visual_order.tsx @@ -1,4 +1,4 @@ -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 26359d0d2..3795f0eaa 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -13,7 +13,7 @@ import { AccountState, ProviderType } from 'ts/types'; import { utils } from 'ts/utils/utils'; const METAMASK_IMG_SRC = '/images/metamask_icon.png'; -const TOSHI_IMG_SRC = '/images/toshi_logo.jpg'; +const COINBASE_WALLET_IMG_SRC = '/images/coinbase_wallet_logo.png'; export interface BodyOverlayProps { dispatcher: Dispatcher; @@ -116,8 +116,8 @@ const UseDifferentWallet = (props: UseDifferentWallet) => { const GetWalletCallToAction = () => { const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile(); - const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC; - const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet'; + const imageUrl = isOnMobile ? COINBASE_WALLET_IMG_SRC : METAMASK_IMG_SRC; + const text = isOnMobile ? 'Get Coinbase Wallet' : 'Get MetaMask Wallet'; return ( <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}> <Island diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 6abaa840b..326cd3cfa 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,5 +1,5 @@ -import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; -import { BigNumber, errorUtils } from '@0xproject/utils'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; +import { BigNumber, errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 54ace7ae2..7de3afbf8 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -1,6 +1,6 @@ -import { Styles } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Styles } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts new file mode 100644 index 000000000..c93b9332d --- /dev/null +++ b/packages/website/ts/containers/asset_buyer_documentation.ts @@ -0,0 +1,71 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/asset_buyer/introduction'); +const InstallationMarkdown = require('md/docs/asset_buyer/installation'); +const UsageMarkdown = require('md/docs/asset_buyer/usage'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', + usage: 'usage', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.AssetBuyer, + packageName: '@0x/asset-buyer', + type: SupportedDocJson.TypeDoc, + displayName: 'AssetBuyer', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + introduction: [markdownSections.introduction], + install: [markdownSections.installation], + usage: [markdownSections.usage], + }, + sectionNameToMarkdownByVersion: { + '0.0.1': { + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, + [markdownSections.usage]: UsageMarkdown, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index abf419347..0f11e0809 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -1,82 +1,49 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/connect/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/connect/1.0.0/installation'); +const IntroMarkdown1 = require('md/docs/connect/1/introduction'); +const IntroMarkdown2 = require('md/docs/connect/2/introduction'); +const InstallationMarkdown1 = require('md/docs/connect/1/installation'); +const InstallationMarkdown3 = require('md/docs/connect/3/installation'); /* tslint:enable:no-var-requires */ -const connectDocSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', - httpClient: 'httpClient', - webSocketOrderbookChannel: 'webSocketOrderbookChannel', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Connect, + packageName: '@0x/connect', type: SupportedDocJson.TypeDoc, displayName: '0x Connect', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [connectDocSections.introduction], - install: [connectDocSections.installation], - httpClient: [connectDocSections.httpClient], - webSocketOrderbookChannel: [connectDocSections.webSocketOrderbookChannel], - types: [connectDocSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [connectDocSections.introduction]: IntroMarkdownV1, - [connectDocSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, - }, - sectionNameToModulePath: { - [connectDocSections.httpClient]: ['"src/http_client"'], - [connectDocSections.webSocketOrderbookChannel]: ['"src/ws_orderbook_channel"'], - [connectDocSections.types]: ['"src/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: connectDocSections, - visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel], - typeConfigs: { - typeNameToExternalLink: { - Provider: constants.URL_WEB3_PROVIDER_DOCS, - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '2.0.0-rc.1': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown1, + }, + '3.0.2': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown3, }, - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Client', - 'FeesRequest', - 'FeesResponse', - 'OrderbookChannel', - 'OrderbookChannelHandler', - 'OrderbookChannelSubscriptionOpts', - 'OrderbookRequest', - 'OrderbookResponse', - 'OrdersRequest', - 'OrdersRequestOpts', - 'PagedRequestOpts', - 'TokenPairsItem', - 'TokenPairsRequest', - 'TokenPairsRequestOpts', - 'TokenTradeInfo', - 'WebSocketOrderbookChannelConfig', - 'Order', - 'SignedOrder', - 'ECSignature', - ], }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -85,6 +52,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -96,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts new file mode 100644 index 000000000..4c05605e3 --- /dev/null +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -0,0 +1,71 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown1 = require('md/docs/contract_wrappers/1/introduction'); +const InstallMarkdownV1 = require('md/docs/contract_wrappers/1/installation'); +const InstallMarkdownV2 = require('md/docs/contract_wrappers/2/installation'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.ContractWrappers, + packageName: '@0x/contract-wrappers', + type: SupportedDocJson.TypeDoc, + displayName: 'Contract Wrappers', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], + }, + sectionNameToMarkdownByVersion: { + '0.0.1': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallMarkdownV1, + }, + '3.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallMarkdownV2, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + docsInfo, + translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts new file mode 100644 index 000000000..e0ca439a6 --- /dev/null +++ b/packages/website/ts/containers/docs_home.ts @@ -0,0 +1,31 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocsHome as DocsHomeComponent, DocsHomeProps } from 'ts/pages/documentation/docs_home'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocsHomeProps): ConnectedState => ({ + translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)( + DocsHomeComponent, +); diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 0be8dd3bc..9d1df1d1f 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -1,12 +1,11 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -14,7 +13,7 @@ const IntroMarkdown = require('md/docs/ethereum_types/introduction'); const InstallationMarkdown = require('md/docs/ethereum_types/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', types: docConstants.TYPES_SECTION_NAME, @@ -22,78 +21,20 @@ const docSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.EthereumTypes, + packageName: 'ethereum-types', type: SupportedDocJson.TypeDoc, displayName: 'Ethereum Types', packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/ethereum-types', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdown, - [docSections.installation]: InstallationMarkdown, - }, - }, - sectionNameToModulePath: { - [docSections.types]: ['"index"'], - }, - visibleConstructors: [], - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Provider', - 'JSONRPCErrorCallback', - 'Provider', - 'ContractAbi', - 'AbiDefinition', - 'FunctionAbi', - 'ConstructorStateMutability', - 'StateMutability', - 'MethodAbi', - 'ConstructorAbi', - 'FallbackAbi', - 'EventParameter', - 'EventAbi', - 'DataItem', - 'OpCode', - // 'StructLog', // TODO: This type breaks the docs so we don't render it for now - 'TransactionTrace', - 'Unit', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'BlockWithoutTransactionData', - 'BlockWithTransactionData', - 'Transaction', - 'TxData', - 'CallData', - 'FilterObject', - 'LogTopic', - 'DecodedLogEntry', - 'DecodedLogEntryEvent', - 'LogEntryEvent', - 'LogEntry', - 'TxDataPayable', - 'TransactionReceipt', - 'AbiType', - 'ContractEventArg', - 'DecodedLogArgs', - 'LogWithDecodedArgs', - 'RawLog', - 'BlockParamLiteral', - 'BlockParam', - 'RawLogEntry', - 'SolidityTypes', - 'TransactionReceiptWithDecodedLogs', - ], - typeNameToExternalLink: { - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -102,6 +43,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -113,6 +55,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 92296dbab..98b2831ce 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -1,5 +1,4 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { connect } from 'react-redux'; import { Blockchain } from 'ts/blockchain'; @@ -20,7 +19,7 @@ interface ConnectedState { blockchainErr: BlockchainErrs; blockchainIsLoaded: boolean; orderExpiryTimestamp: BigNumber; - orderECSignature: ECSignature; + orderSignature: string; userAddress: string; orderTakerAddress: string; orderSalt: BigNumber; @@ -34,7 +33,7 @@ const mapStateToProps = (state: State, _ownProps: GenerateOrderFormProps): Conne blockchainErr: state.blockchainErr, blockchainIsLoaded: state.blockchainIsLoaded, orderExpiryTimestamp: state.orderExpiryTimestamp, - orderECSignature: state.orderECSignature, + orderSignature: state.orderSignature, orderTakerAddress: state.orderTakerAddress, orderSalt: state.orderSalt, networkId: state.networkId, diff --git a/packages/website/ts/containers/inputs/eth_amount_input.ts b/packages/website/ts/containers/inputs/eth_amount_input.ts index 9ef903b55..45d3ddebd 100644 --- a/packages/website/ts/containers/inputs/eth_amount_input.ts +++ b/packages/website/ts/containers/inputs/eth_amount_input.ts @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as React from 'react'; import { connect } from 'react-redux'; import { State } from 'ts/redux/reducer'; diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index 523777114..9c4bb8e26 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -1,63 +1,69 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/json_schemas/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/json_schemas/1.0.0/installation'); -const UsageMarkdownV1 = require('md/docs/json_schemas/1.0.0/usage'); -const SchemasMarkdownV1 = require('md/docs/json_schemas/1.0.0/schemas'); +const IntroMarkdown1 = require('md/docs/json_schemas/1/introduction'); +const IntroMarkdown3 = require('md/docs/json_schemas/3/introduction'); +const InstallationMarkdown1 = require('md/docs/json_schemas/1/installation'); +const InstallationMarkdown3 = require('md/docs/json_schemas/3/installation'); +const usageMarkdown1 = require('md/docs/json_schemas/1/usage'); +const usageMarkdown3 = require('md/docs/json_schemas/3/usage'); +const SchemasMarkdown1 = require('md/docs/json_schemas/1/schemas'); +const SchemasMarkdown2 = require('md/docs/json_schemas/2/schemas'); +const SchemasMarkdown3 = require('md/docs/json_schemas/3/schemas'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - schemaValidator: 'schemaValidator', schemas: 'schemas', }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.JSONSchemas, + packageName: '@0x/json-schemas', type: SupportedDocJson.TypeDoc, displayName: 'JSON Schemas', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - schemaValidator: [docSections.schemaValidator], - schemas: [docSections.schemas], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], + schemas: [markdownSections.schemas], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.schemas]: SchemasMarkdownV1, - [docSections.usage]: UsageMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.schemas]: SchemasMarkdown1, + [markdownSections.usage]: usageMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.schemaValidator]: ['"json-schemas/src/schema_validator"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [docSections.schemaValidator], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [], - typeNameToExternalLink: { - Schema: - 'https://github.com/tdegrunt/jsonschema/blob/5c2edd4baba149964aec0f23c87ad12c25a50dfb/lib/index.d.ts#L49', + '1.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.schemas]: SchemasMarkdown2, + [markdownSections.usage]: usageMarkdown1, + }, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown3, + [markdownSections.installation]: InstallationMarkdown3, + [markdownSections.schemas]: SchemasMarkdown2, + [markdownSections.usage]: usageMarkdown3, + }, + '2.0.1': { + [markdownSections.introduction]: IntroMarkdown3, + [markdownSections.installation]: InstallationMarkdown3, + [markdownSections.schemas]: SchemasMarkdown3, + [markdownSections.usage]: usageMarkdown3, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -66,6 +72,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -77,6 +84,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index c6570f514..f1d794988 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -1,74 +1,45 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/order_utils/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/order_utils/1.0.0/installation'); +const IntroMarkdown1 = require('md/docs/order_utils/1/introduction'); +const InstallationMarkdown1 = require('md/docs/order_utils/1/installation'); +const IntroMarkdown2 = require('md/docs/order_utils/2/introduction'); +const InstallationMarkdown2 = require('md/docs/order_utils/2/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', - usage: 'usage', - types: 'types', }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.OrderUtils, + packageName: '@0x/order-utils', type: SupportedDocJson.TypeDoc, displayName: 'Order utils', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.usage]: [ - '"order-utils/src/order_hash"', - '"order-utils/src/signature_utils"', - '"order-utils/src/order_factory"', - '"order-utils/src/salt"', - '"order-utils/src/assert"', - '"order-utils/src/constants"', - ], - [docSections.types]: ['"order-utils/src/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'OrderError', - 'Order', - 'SignedOrder', - 'ECSignature', - 'Provider', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'JSONRPCErrorCallback', - ], - typeNameToExternalLink: { - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -77,6 +48,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -88,6 +60,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts new file mode 100644 index 000000000..ac92e6a22 --- /dev/null +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -0,0 +1,72 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown1 = require('md/docs/order_watcher/1/introduction'); +const InstallationMarkdown1 = require('md/docs/order_watcher/1/installation'); +const IntroMarkdown2 = require('md/docs/order_watcher/2/introduction'); +const InstallationMarkdown2 = require('md/docs/order_watcher/2/installation'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.OrderWatcher, + packageName: '@0x/order-watcher', + type: SupportedDocJson.TypeDoc, + displayName: 'OrderWatcher', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], + }, + sectionNameToMarkdownByVersion: { + '0.0.1': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + }, + '2.2.0': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 6747cdf4e..5661e0a97 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; @@ -6,7 +6,7 @@ import { Dispatch } from 'redux'; import { Portal as PortalComponent, PortalProps as PortalComponentProps } from 'ts/components/portal/portal'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types'; +import { BlockchainErrs, HashData, PortalOrder, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -25,7 +25,7 @@ interface ConnectedState { screenWidth: ScreenWidths; shouldBlockchainErrDialogBeOpen: boolean; userAddress: string; - userSuppliedOrderCache: Order; + userSuppliedOrderCache: PortalOrder; flashMessage?: string | React.ReactNode; translate: Translate; isPortalOnboardingShowing: boolean; diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index a813205b1..66473733c 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index b0a712477..57c98fa3b 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -1,65 +1,92 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import { Networks } from '@0xproject/react-shared'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { Networks } from '@0x/react-shared'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, SmartContractDocSections as Sections } from 'ts/types'; +import { DocPackages, ScreenWidths, SmartContractDocSections as Sections } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/smart_contracts/1.0.0/introduction'); +const IntroMarkdown1 = require('md/docs/smart_contracts/1/introduction'); +const IntroMarkdown2 = require('md/docs/smart_contracts/2/introduction'); /* tslint:enable:no-var-requires */ const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SmartContracts, - type: SupportedDocJson.Doxity, + packageName: 'contracts', + type: SupportedDocJson.SolDoc, displayName: '0x Smart Contracts', packageUrl: 'https://github.com/0xProject/contracts', - menu: { + markdownMenu: { introduction: [Sections.Introduction], - contracts: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [Sections.Introduction]: IntroMarkdownV1, + [Sections.Introduction]: IntroMarkdown1, + }, + '2.0.0': { + [Sections.Introduction]: IntroMarkdown2, }, }, - sections: { + markdownSections: { Introduction: Sections.Introduction, - Exchange: Sections.Exchange, - TokenTransferProxy: Sections.TokenTransferProxy, - TokenRegistry: Sections.TokenRegistry, - ZRXToken: Sections.ZRXToken, }, - visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], contractsByVersionByNetworkId: { '1.0.0': { [Networks.Mainnet]: { - [Sections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093', - [Sections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4', - [Sections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498', - [Sections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c', + Exchange_v1: '0x12459c951127e0c374ff9105dda097662a027093', + TokenTransferProxy_v1: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4', + TokenRegistry: '0x926a74c5c36adf004c87399e65f75628b0f98d2c', }, [Networks.Ropsten]: { - [Sections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac', - [Sections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', - [Sections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', - [Sections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed', + Exchange_v1: '0x479cc461fecd078f766ecc58533d6f69580cf3ac', + TokenTransferProxy_v1: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + TokenRegistry: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed', }, [Networks.Kovan]: { - [Sections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364', - [Sections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4', - [Sections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', - [Sections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f', + Exchange_v1: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364', + TokenTransferProxy_v1: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4', + TokenRegistry: '0xf18e504561f4347bea557f3d4558f559dddbae7f', }, [Networks.Rinkeby]: { - [Sections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', - [Sections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', - [Sections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8', - [Sections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + Exchange_v1: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', + TokenTransferProxy_v1: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + TokenRegistry: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + }, + }, + '2.0.0': { + [Networks.Mainnet]: { + AssetProxyOwner: '0x17992e4ffb22730138e4b62aaa6367fa9d3699a6', + ERC20Proxy: '0x2240dab907db71e64d3e0dba4800c83b5c502d4e', + ERC721Proxy: '0x208e41fb445f1bb1b6780d58356e81405f3e6127', + Exchange: '0x4f833a24e1f95d70f028921e27040ca56e09ab0b', + Forwarder: '0x7afc2d5107af94c462a194d2c21b5bdd238709d6', + OrderValidator: '0x9463e518dea6810309563c81d5266c1b1d149138', + WETH9: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', + ZRXToken: '0xe41d2489571d322189246dafa5ebde1f4699f498', + }, + [Networks.Ropsten]: { + AssetProxyOwner: '0xf5fa5b5fed2727a0e44ac67f6772e97977aa358b', + ERC20Proxy: '0xb1408f4c245a23c31b98d2c626777d4c0d766caa', + ERC721Proxy: '0xe654aac058bfbf9f83fcaee7793311dd82f6ddb4', + Exchange: '0x4530c0483a1633c7a1c97d2c53721caff2caaaaf', + Forwarder: '0x3983e204b12b3c02fb0638caf2cd406a62e0ead3', + OrderValidator: '0x90431a90516ab49af23a0530e04e8c7836e7122f', + WETH9: '0xc778417e063141139fce010982780140aa0cd5ab', + ZRXToken: '0xff67881f8d12f372d91baae9752eb3631ff0ed00', + }, + [Networks.Kovan]: { + AssetProxyOwner: '0x2c824d2882baa668e0d5202b1e7f2922278703f8', + ERC20Proxy: '0xf1ec01d6236d3cd881a0bf0130ea25fe4234003e', + ERC721Proxy: '0x2a9127c745688a165106c11cd4d647d2220af821', + Exchange: '0x35dd2932454449b14cee11a94d3674a936d5d7b2', + Forwarder: '0xd85e2fa7e7e252b27b01bf0d65c946959d2f45b8', + OrderValidator: '0xb389da3d204b412df2f75c6afb3d0a7ce0bc283d', + WETH9: '0xd0a1e359811322d97991e03f863a0c30c2cf029c', + ZRXToken: '0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa', }, }, }, @@ -70,6 +97,7 @@ interface ConnectedState { docsVersion: string; availableDocVersions: string[]; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -81,6 +109,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index b289c8f34..f3a793e80 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -1,60 +1,49 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/sol-compiler/introduction'); -const InstallationMarkdownV1 = require('md/docs/sol-compiler/installation'); -const UsageMarkdown = require('md/docs/sol-compiler/usage'); +const IntroMarkdown1 = require('md/docs/sol-compiler/1/introduction'); +const InstallationMarkdown1 = require('md/docs/sol-compiler/1/installation'); +const InstallationMarkdown2 = require('md/docs/sol-compiler/2/installation'); +const UsageMarkdown1 = require('md/docs/sol-compiler/1/usage'); +const UsageMarkdown2 = require('md/docs/sol-compiler/2/usage'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - compiler: 'compiler', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SolCompiler, + packageName: '@0x/sol-compiler', type: SupportedDocJson.TypeDoc, displayName: 'Solidity Compiler', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - compiler: [docSections.compiler], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.usage]: UsageMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.usage]: UsageMarkdown1, + }, + '1.1.8': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown2, + [markdownSections.usage]: UsageMarkdown2, }, }, - sectionNameToModulePath: { - [docSections.compiler]: ['"sol-compiler/src/compiler"'], - [docSections.types]: ['"sol-compiler/src/utils/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [docSections.compiler], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: ['CompilerOptions'], - typeNameToExternalLink: {}, - typeNameToPrefix: {}, - }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -63,6 +52,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -74,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index d78c450ed..8944ec70a 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -1,89 +1,50 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/sol_cov/introduction'); -const InstallationMarkdownV1 = require('md/docs/sol_cov/installation'); -const UsageMarkdown = require('md/docs/sol_cov/usage'); +const IntroMarkdown1 = require('md/docs/sol_cov/1/introduction'); +const InstallationMarkdown1 = require('md/docs/sol_cov/1/installation'); +const UsageMarkdown1 = require('md/docs/sol_cov/1/usage'); +const IntroMarkdown2 = require('md/docs/sol_cov/2/introduction'); +const InstallationMarkdown2 = require('md/docs/sol_cov/2/installation'); +const UsageMarkdown2 = require('md/docs/sol_cov/2/usage'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - coverageSubprovider: 'coverageSubprovider', - abstractArtifactAdapter: 'abstractArtifactAdapter', - solCompilerArtifactAdapter: 'solCompilerArtifactAdapter', - truffleArtifactAdapter: 'truffleArtifactAdapter', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SolCov, + packageName: '@0x/sol-cov', type: SupportedDocJson.TypeDoc, displayName: 'Sol-cov', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - 'coverage-subprovider': [docSections.coverageSubprovider], - 'abstract-artifact-adapter': [docSections.abstractArtifactAdapter], - 'sol-compiler-artifact-adapter': [docSections.solCompilerArtifactAdapter], - 'truffle-artifact-adapter': [docSections.truffleArtifactAdapter], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.usage]: UsageMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.usage]: UsageMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.coverageSubprovider]: ['"sol-cov/src/coverage_subprovider"'], - [docSections.abstractArtifactAdapter]: ['"sol-cov/src/artifact_adapters/abstract_artifact_adapter"'], - [docSections.solCompilerArtifactAdapter]: ['"sol-cov/src/artifact_adapters/sol_compiler_artifact_adapter"'], - [docSections.truffleArtifactAdapter]: ['"sol-cov/src/artifact_adapters/truffle_artifact_adapter"'], - [docSections.types]: ['"subproviders/src/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [ - docSections.coverageSubprovider, - docSections.abstractArtifactAdapter, - docSections.solCompilerArtifactAdapter, - docSections.truffleArtifactAdapter, - ], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'JSONRPCRequestPayload', - 'NextCallback', - 'ErrorCallback', - 'AbstractArtifactAdapter', - 'CoverageSubprovider', - 'TruffleArtifactAdapter', - 'SolCompilerArtifactAdapter', - 'ContractData', - ], - typeNameToExternalLink: {}, - typeNameToPrefix: {}, - typeNameToDocSection: { - AbstractArtifactAdapter: docSections.abstractArtifactAdapter, - CoverageSubprovider: docSections.coverageSubprovider, - TruffleArtifactAdapter: docSections.truffleArtifactAdapter, - SolCompilerArtifactAdapter: docSections.solCompilerArtifactAdapter, + '2.1.8': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, + [markdownSections.usage]: UsageMarkdown2, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -92,6 +53,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -103,6 +65,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 0e9150d7b..0e421777b 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -1,124 +1,48 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/subproviders/introduction'); -const InstallationMarkdownV1 = require('md/docs/subproviders/installation'); -const LedgerNodeHidMarkdown = require('md/docs/subproviders/ledger_node_hid'); +const IntroMarkdown1 = require('md/docs/subproviders/1/introduction'); +const InstallationMarkdown1 = require('md/docs/subproviders/1/installation'); +const InstallationMarkdown2 = require('md/docs/subproviders/2/installation'); +const LedgerNodeHidMarkdown1 = require('md/docs/subproviders/1/ledger_node_hid'); /* tslint:enable:no-var-requires */ const docSections = { introduction: 'introduction', installation: 'installation', - subprovider: 'subprovider', - ledgerSubprovider: 'ledgerSubprovider', ledgerNodeHid: 'ledger-node-hid-issue', - factoryMethods: 'factory-methods', - emptyWalletSubprovider: 'emptyWalletSubprovider', - fakeGasEstimateSubprovider: 'fakeGasEstimateSubprovider', - injectedWeb3Subprovider: 'injectedWeb3Subprovider', - signerSubprovider: 'signerSubprovider', - redundantRPCSubprovider: 'redundantRPCSubprovider', - ganacheSubprovider: 'ganacheSubprovider', - nonceTrackerSubprovider: 'nonceTrackerSubprovider', - privateKeyWalletSubprovider: 'privateKeyWalletSubprovider', - mnemonicWalletSubprovider: 'mnemonicWalletSubprovider', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Subproviders, + packageName: '@0x/subproviders', type: SupportedDocJson.TypeDoc, displayName: 'Subproviders', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - subprovider: [docSections.subprovider], - ['ledger-subprovider']: [docSections.ledgerSubprovider], - ['ledger-node-hid-issue']: [docSections.ledgerNodeHid], - ['private-key-wallet-subprovider']: [docSections.privateKeyWalletSubprovider], - ['mnemonic-wallet-subprovider']: [docSections.mnemonicWalletSubprovider], - ['factory-methods']: [docSections.factoryMethods], - ['emptyWallet-subprovider']: [docSections.emptyWalletSubprovider], - ['fakeGasEstimate-subprovider']: [docSections.fakeGasEstimateSubprovider], - ['injectedWeb3-subprovider']: [docSections.injectedWeb3Subprovider], - ['signer-subprovider']: [docSections.signerSubprovider], - ['redundantRPC-subprovider']: [docSections.redundantRPCSubprovider], - ['ganache-subprovider']: [docSections.ganacheSubprovider], - ['nonceTracker-subprovider']: [docSections.nonceTrackerSubprovider], - types: [docSections.types], + markdownMenu: { + 'getting-started': [docSections.introduction, docSections.installation, docSections.ledgerNodeHid], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown, + [docSections.introduction]: IntroMarkdown1, + [docSections.installation]: InstallationMarkdown1, + [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.subprovider]: ['"subproviders/src/subproviders/subprovider"'], - [docSections.ledgerSubprovider]: ['"subproviders/src/subproviders/ledger"'], - [docSections.privateKeyWalletSubprovider]: ['"subproviders/src/subproviders/private_key_wallet"'], - [docSections.mnemonicWalletSubprovider]: ['"subproviders/src/subproviders/mnemonic_wallet"'], - [docSections.factoryMethods]: ['"subproviders/src/index"'], - [docSections.emptyWalletSubprovider]: ['"subproviders/src/subproviders/empty_wallet_subprovider"'], - [docSections.fakeGasEstimateSubprovider]: ['"subproviders/src/subproviders/fake_gas_estimate_subprovider"'], - [docSections.injectedWeb3Subprovider]: ['"subproviders/src/subproviders/injected_web3"'], - [docSections.signerSubprovider]: ['"subproviders/src/subproviders/signer"'], - [docSections.redundantRPCSubprovider]: ['"subproviders/src/subproviders/redundant_rpc"'], - [docSections.ganacheSubprovider]: ['"subproviders/src/subproviders/ganache"'], - [docSections.nonceTrackerSubprovider]: ['"subproviders/src/subproviders/nonce_tracker"'], - [docSections.types]: ['"sol-compiler/src/utils/types"', '"types/src/index"', '"subproviders/src/types"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [ - docSections.subprovider, - docSections.ledgerSubprovider, - docSections.privateKeyWalletSubprovider, - docSections.mnemonicWalletSubprovider, - docSections.emptyWalletSubprovider, - docSections.fakeGasEstimateSubprovider, - docSections.injectedWeb3Subprovider, - docSections.redundantRPCSubprovider, - docSections.ganacheSubprovider, - docSections.nonceTrackerSubprovider, - ], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Callback', - 'NextCallback', - 'ErrorCallback', - 'ECSignature', - 'JSONRPCRequestPayloadWithMethod', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'AccountFetchingConfigs', - 'LedgerEthereumClientFactoryAsync', - 'PartialTxParams', - 'LedgerEthereumClient', - 'LedgerSubproviderConfigs', - 'MnemonicWalletSubproviderConfigs', - 'OnNextCompleted', - 'Provider', - ], - typeNameToExternalLink: { - Web3: constants.URL_WEB3_DOCS, - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '2.1.0': { + [docSections.introduction]: IntroMarkdown1, + [docSections.installation]: InstallationMarkdown2, + [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown1, }, - typeNameToPrefix: {}, }, + markdownSections: docSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -127,6 +51,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -138,6 +63,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 8d98d9476..9c8c34621 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -1,98 +1,44 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/web3_wrapper/introduction'); -const InstallationMarkdownV1 = require('md/docs/web3_wrapper/installation'); +const IntroMarkdown1 = require('md/docs/web3_wrapper/1/introduction'); +const InstallationMarkdown1 = require('md/docs/web3_wrapper/1/installation'); +const InstallationMarkdown2 = require('md/docs/web3_wrapper/2/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', - web3Wrapper: 'web3Wrapper', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Web3Wrapper, + packageName: '@0x/web3-wrapper', type: SupportedDocJson.TypeDoc, displayName: 'Web3Wrapper', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - web3Wrapper: [docSections.web3Wrapper], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.web3Wrapper]: ['"web3-wrapper/src/web3_wrapper"'], - [docSections.types]: ['"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [docSections.web3Wrapper], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'TxData', - 'TransactionReceipt', - 'RawLogEntry', - 'ContractAbi', - 'BlockParam', - 'FilterObject', - 'LogEntry', - 'BlockWithoutTransactionData', - 'CallData', - 'LogEntryEvent', - 'Provider', - 'AbiDefinition', - 'LogTopic', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'BlockParamLiteral', - 'FunctionAbi', - 'EventAbi', - 'JSONRPCErrorCallback', - 'MethodAbi', - 'ConstructorAbi', - 'FallbackAbi', - 'EventParameter', - 'DataItem', - 'StateMutability', - 'Function', - 'Fallback', - 'Constructor', - 'Event', - 'ConstructorStateMutability', - 'TransactionReceiptWithDecodedLogs', - 'DecodedLogArgs', - 'LogWithDecodedArgs', - 'ContractEventArg', - ], - typeNameToExternalLink: { - Web3: constants.URL_WEB3_DOCS, - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, - }, - typeNameToPrefix: {}, - typeNameToDocSection: { - Web3Wrapper: docSections.web3Wrapper, + '3.1.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown2, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -101,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -112,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 357f8bbf4..069b0ae54 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -4,10 +4,12 @@ import { Dispatch } from 'redux'; import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -16,6 +18,7 @@ interface ConnectedDispatch { const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 6be54595d..e0ea6e275 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -1,240 +1,76 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/0xjs/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/0xjs/1.0.0/installation'); -const AsyncMarkdownV1 = require('md/docs/0xjs/1.0.0/async'); -const ErrorsMarkdownV1 = require('md/docs/0xjs/1.0.0/errors'); -const versioningMarkdownV1 = require('md/docs/0xjs/1.0.0/versioning'); +const IntroMarkdownV0 = require('md/docs/0xjs/0.0.1/introduction'); +const InstallationMarkdownV0 = require('md/docs/0xjs/0.0.1/installation'); +const AsyncMarkdownV0 = require('md/docs/0xjs/0.0.1/async'); +const ErrorsMarkdownV0 = require('md/docs/0xjs/0.0.1/errors'); +const versioningMarkdownV0 = require('md/docs/0xjs/0.0.1/versioning'); + +const IntroMarkdown1 = require('md/docs/0xjs/1.0.1/introduction'); +const InstallationMarkdown1 = require('md/docs/0xjs/1.0.1/installation'); +const AsyncMarkdownV1 = require('md/docs/0xjs/1.0.1/async'); +const ErrorsMarkdownV1 = ErrorsMarkdownV0; +const versioningMarkdownV1 = require('md/docs/0xjs/1.0.1/versioning'); -const IntroMarkdownV2 = require('md/docs/0xjs/2.0.0/introduction'); -const versioningMarkdownV2 = require('md/docs/0xjs/2.0.0/versioning'); /* tslint:enable:no-var-requires */ -const zeroExJsDocSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', testrpc: 'testrpc', async: 'async', errors: 'errors', versioning: 'versioning', - zeroEx: 'zeroEx', - exchange: 'exchange', - token: 'token', - tokenRegistry: 'tokenRegistry', - etherToken: 'etherToken', - proxy: 'proxy', - orderWatcher: 'orderWatcher', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.ZeroExJs, + packageName: '0x.js', type: SupportedDocJson.TypeDoc, displayName: '0x.js', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [zeroExJsDocSections.introduction], - install: [zeroExJsDocSections.installation], - topics: [zeroExJsDocSections.async, zeroExJsDocSections.errors, zeroExJsDocSections.versioning], - zeroEx: [zeroExJsDocSections.zeroEx], - contracts: [ - zeroExJsDocSections.exchange, - zeroExJsDocSections.token, - zeroExJsDocSections.tokenRegistry, - zeroExJsDocSections.etherToken, - zeroExJsDocSections.proxy, + markdownMenu: { + 'getting-started': [ + markdownSections.introduction, + markdownSections.installation, + markdownSections.async, + markdownSections.errors, + markdownSections.versioning, ], - orderWatcher: [zeroExJsDocSections.orderWatcher], - types: [zeroExJsDocSections.types], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [zeroExJsDocSections.introduction]: IntroMarkdownV1, - [zeroExJsDocSections.installation]: InstallationMarkdownV1, - [zeroExJsDocSections.async]: AsyncMarkdownV1, - [zeroExJsDocSections.errors]: ErrorsMarkdownV1, - [zeroExJsDocSections.versioning]: versioningMarkdownV1, - }, - '1.0.0-rc.1': { - [zeroExJsDocSections.introduction]: IntroMarkdownV2, - [zeroExJsDocSections.versioning]: versioningMarkdownV2, - // These are the same as for V1 - [zeroExJsDocSections.installation]: InstallationMarkdownV1, - [zeroExJsDocSections.async]: AsyncMarkdownV1, - [zeroExJsDocSections.errors]: ErrorsMarkdownV1, + [markdownSections.introduction]: IntroMarkdownV0, + [markdownSections.installation]: InstallationMarkdownV0, + [markdownSections.versioning]: versioningMarkdownV0, + [markdownSections.async]: AsyncMarkdownV0, + [markdownSections.errors]: ErrorsMarkdownV0, }, - }, - sectionNameToModulePath: { - [zeroExJsDocSections.zeroEx]: ['"0x.js/src/0x"', '"src/0x"'], - [zeroExJsDocSections.exchange]: [ - '"0x.js/src/contract_wrappers/exchange_wrapper"', - '"src/contract_wrappers/exchange_wrapper"', - '"contract-wrappers/src/contract_wrappers/exchange_wrapper"', - ], - [zeroExJsDocSections.tokenRegistry]: [ - '"0x.js/src/contract_wrappers/token_registry_wrapper"', - '"src/contract_wrappers/token_registry_wrapper"', - '"contract-wrappers/src/contract_wrappers/token_registry_wrapper"', - ], - [zeroExJsDocSections.token]: [ - '"0x.js/src/contract_wrappers/token_wrapper"', - '"src/contract_wrappers/token_wrapper"', - '"contract-wrappers/src/contract_wrappers/token_wrapper"', - ], - [zeroExJsDocSections.etherToken]: [ - '"0x.js/src/contract_wrappers/ether_token_wrapper"', - '"src/contract_wrappers/ether_token_wrapper"', - '"contract-wrappers/src/contract_wrappers/ether_token_wrapper"', - ], - [zeroExJsDocSections.proxy]: [ - '"0x.js/src/contract_wrappers/proxy_wrapper"', - '"0x.js/src/contract_wrappers/token_transfer_proxy_wrapper"', - '"contract-wrappers/src/contract_wrappers/token_transfer_proxy_wrapper"', - ], - [zeroExJsDocSections.orderWatcher]: [ - '"0x.js/src/order_watcher/order_state_watcher"', - '"src/order_watcher/order_state_watcher"', - '"order-watcher/src/order_watcher/order_watcher"', - ], - [zeroExJsDocSections.types]: [ - '"0x.js/src/types"', - '"src/types"', - '"types/src/index"', - '"contract-wrappers/src/types"', - '"0x.js/src/contract_wrappers/generated/ether_token"', - '"0x.js/src/contract_wrappers/generated/token"', - '"0x.js/src/contract_wrappers/generated/exchange"', - '"0x.js/src/generated_contract_wrappers/ether_token"', - '"0x.js/src/generated_contract_wrappers/token"', - '"0x.js/src/generated_contract_wrappers/exchange"', - ], - }, - menuSubsectionToVersionWhenIntroduced: { - [zeroExJsDocSections.etherToken]: '0.7.1', - [zeroExJsDocSections.proxy]: '0.8.0', - [zeroExJsDocSections.orderWatcher]: '0.27.1', - }, - sections: zeroExJsDocSections, - visibleConstructors: [zeroExJsDocSections.zeroEx], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( Make sure to only - // ADD types here, DO NOT REMOVE types since they might still be needed for older supported versions - publicTypes: [ - 'Order', - 'SignedOrder', - 'ECSignature', - 'ContractWrappersError', - 'EventCallback', - 'EventCallbackAsync', - 'EventCallbackSync', - 'ExchangeContractErrs', - 'ContractEvent', - 'Token', - 'Provider', - 'ExchangeEvents', - 'IndexedFilterValues', - 'SubscriptionOpts', - 'BlockRange', - 'BlockParam', - 'OrderFillOrKillRequest', - 'OrderCancellationRequest', - 'OrderFillRequest', - 'ContractEventEmitter', - 'Web3Provider', - 'ContractEventArgs', - 'LogCancelArgs', - 'LogFillArgs', - 'LogErrorContractEventArgs', - 'LogFillContractEventArgs', - 'LogCancelContractEventArgs', - 'EtherTokenContractEventArgs', - 'WithdrawalContractEventArgs', - 'DepositContractEventArgs', - 'TokenEvents', - 'ExchangeContractEventArgs', - 'TransferContractEventArgs', - 'ApprovalContractEventArgs', - 'TokenContractEventArgs', - 'ZeroExConfig', - 'TransactionReceipt', - 'TransactionReceiptWithDecodedLogs', - 'LogWithDecodedArgs', - 'EtherTokenEvents', - 'BlockParamLiteral', - 'DecodedLogArgs', - 'MethodOpts', - 'ValidateOrderFillableOpts', - 'OrderTransactionOpts', - 'TransactionOpts', - 'ContractEventArg', - 'LogEvent', - 'DecodedLogEvent', - 'EventWatcherCallback', - 'OnOrderStateChangeCallback', - 'OrderStateValid', - 'OrderStateInvalid', - 'OrderState', - 'OrderStateWatcherConfig', - 'OrderWatcherConfig', - 'FilterObject', - 'OrderRelevantState', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'JSONRPCErrorCallback', - 'LogEntryEvent', - 'LogEntry', - 'ERC20AssetData', - 'ERC721AssetData', - 'AssetProxyId', - 'WETH9Events', - 'WETH9WithdrawalEventArgs', - 'WETH9ApprovalEventArgs', - 'WETH9EventArgs', - 'WETH9DepositEventArgs', - 'WETH9TransferEventArgs', - 'ERC20TokenTransferEventArgs', - 'ERC20TokenApprovalEventArgs', - 'ERC20TokenEvents', - 'ERC20TokenEventArgs', - 'ERC721TokenApprovalEventArgs', - 'ERC721TokenApprovalForAllEventArgs', - 'ERC721TokenTransferEventArgs', - 'ERC721TokenEvents', - 'ExchangeCancelUpToEventArgs', - 'ExchangeAssetProxyRegisteredEventArgs', - 'ExchangeFillEventArgs', - 'ExchangeCancelEventArgs', - 'ExchangeEventArgs', - 'ContractWrappersConfig', - 'MessagePrefixType', - 'MessagePrefixOpts', - 'OrderInfo', - ], - typeNameToPrefix: {}, - typeNameToExternalLink: { - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '1.0.1': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.versioning]: versioningMarkdownV1, + [markdownSections.async]: AsyncMarkdownV1, + [markdownSections.errors]: ErrorsMarkdownV1, }, - typeNameToDocSection: { - ExchangeWrapper: 'exchange', - TokenWrapper: 'token', - TokenRegistryWrapper: 'tokenRegistry', - EtherTokenWrapper: 'etherToken', - ProxyWrapper: 'proxy', - TokenTransferProxyWrapper: 'proxy', - OrderStateWatcher: 'orderWatcher', + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.versioning]: versioningMarkdownV1, + [markdownSections.async]: AsyncMarkdownV1, + [markdownSections.errors]: ErrorsMarkdownV1, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -243,6 +79,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -254,6 +91,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 719c2708a..eb8892aea 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -10,6 +10,7 @@ declare module '*.json' { export default json; /* tslint:enable */ } +declare module 'web3-provider-engine/subproviders/filters'; // This will be defined by default in TS 2.4 // Source: https://github.com/Microsoft/TypeScript/issues/12364 diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index c6d10452f..21157e427 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; -import * as injectTapEventPlugin from 'react-tap-event-plugin'; import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; +import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; @@ -17,8 +17,6 @@ import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage'; import { store } from 'ts/redux/store'; import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { muiTheme } from 'ts/utils/mui_theme'; -// Polyfills -injectTapEventPlugin(); // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries tradeHistoryStorage.clearIfRequired(); @@ -29,41 +27,50 @@ import 'less/all.less'; // 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 -// so each lazy import needs it's own `System.import()` declaration. +// At the same time webpack statically parses for import() to determine bundle chunk split points +// so each lazy import needs it's own `import()` declaration. const LazyPortal = createLazyComponent('Portal', async () => - System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'), + import(/* webpackChunkName: "portal" */ 'ts/containers/portal'), ); const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), + import(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), +); +const LazyContractWrappersDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'), +); +const LazyOrderWatcherDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'), ); const LazySmartContractsDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'), + import(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'), ); const LazyConnectDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), + import(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), ); const LazyWeb3WrapperDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'), + import(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'), ); const LazySolCompilerDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'), + import(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'), ); const LazyJSONSchemasDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), + import(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), ); const LazySolCovDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), + import(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), ); const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), + import(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), ); const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), + import(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), ); const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'), + import(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'), +); +const LazyAssetBuyerDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "assetBuyerDocs" */ 'ts/containers/asset_buyer_documentation'), ); const DOCUMENT_TITLE = '0x: The Protocol for Trading Tokens'; @@ -90,6 +97,14 @@ render( component={LazyZeroExJSDocumentation} /> <Route + path={`${WebsitePaths.ContractWrappers}/:version?`} + component={LazyContractWrappersDocumentation} + /> + <Route + path={`${WebsitePaths.OrderWatcher}/:version?`} + component={LazyOrderWatcherDocumentation} + /> + <Route path={`${WebsitePaths.Connect}/:version?`} component={LazyConnectDocumentation} /> @@ -122,7 +137,11 @@ render( path={`${WebsitePaths.EthereumTypes}/:version?`} component={LazyEthereumTypesDocumentation} /> - + <Route + path={`${WebsitePaths.AssetBuyer}/:version?`} + component={LazyAssetBuyerDocumentation} + /> + <Route path={WebsitePaths.Docs} component={DocsHome as any} /> {/* Legacy endpoints */} <Route path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`} @@ -137,7 +156,6 @@ render( component={LazySolCompilerDocumentation} /> <Route path={WebsiteLegacyPaths.Jobs} component={Jobs as any} /> - <Route path={`${WebsitePaths.Docs}`} component={LazyZeroExJSDocumentation} /> <Route component={NotFound as any} /> </Switch> </div> diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx index dce06ed8d..9d3b9944a 100644 --- a/packages/website/ts/lazy_component.tsx +++ b/packages/website/ts/lazy_component.tsx @@ -49,7 +49,7 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo * @param componentName name of exported component * @param lazyImport lambda returning module promise * we pass a lambda because we only want to require a module if it's used - * @example `const LazyPortal = createLazyComponent('Portal', () => System.import<any>('ts/containers/portal'));`` + * @example `const LazyPortal = createLazyComponent('Portal', () => import<any>('ts/containers/portal'));`` */ export const createLazyComponent = (componentName: string, lazyImport: () => Promise<any>) => { return (props: any) => { diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx index a9b042820..91818b035 100644 --- a/packages/website/ts/local_storage/trade_history_storage.tsx +++ b/packages/website/ts/local_storage/trade_history_storage.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import ethUtil = require('ethereumjs-util'); import * as _ from 'lodash'; import { localStorage } from 'ts/local_storage/local_storage'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 519e4be5e..dfe8926b0 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,8 +1,7 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; @@ -194,7 +193,7 @@ const teamRow6: ProfileInfo[] = [ const teamRow7: ProfileInfo[] = [ { name: 'Clay Robbins', - title: 'Business Development Lead', + title: 'Ecosystem Development Lead', description: `Growth & Business Development. Previously product and partnerships at Square. Economics at Dartmouth College.`, image: 'images/team/clay.png', linkedIn: 'https://www.linkedin.com/in/robbinsclay/', @@ -206,9 +205,52 @@ const teamRow7: ProfileInfo[] = [ image: 'images/team/matt.jpg', linkedIn: 'https://www.linkedin.com/in/mattytay/', }, + { + name: 'Eugene Aumson', + title: 'Engineer', + description: `Developer Experience. Previously senior software engineer in foreign exchange applications at Bloomberg LP.`, + image: 'images/team/gene.jpg', + linkedIn: 'https://www.linkedin.com/in/aumson/', + github: 'https://github.com/feuGeneA', + }, ]; -const advisors: ProfileInfo[] = [ +const teamRow8: ProfileInfo[] = [ + { + name: 'Weijie Wu', + title: 'Research Fellow', + description: `Researching decentralized governance. Previously Researcher at Huawei and Assistant Professor at Shanghai Jiao Tong University. PhD in Computer Science at The Chinese University of Hong Kong.`, + image: 'images/team/weijie.png', + linkedIn: 'https://www.linkedin.com/in/weijiewu/', + }, + { + name: 'Rahul Singireddy', + title: 'Relayer Success Manager', + description: `Previously community at Zeppelin, growth at Dharma, and cryptocurrency contributor at Forbes. Symbolic Systems at Stanford.`, + image: 'images/team/rahul.png', + linkedIn: 'https://www.linkedin.com/in/rahul-singireddy-3037908a/', + }, + { + name: 'Jason Somensatto', + title: 'Strategic Legal Counsel', + description: `Legal. Previously head of blockchain and crypto practice at Orrick. JD from George Washington University and undergrad at UVA.`, + image: 'images/team/jason.png', + linkedIn: 'https://www.linkedin.com/in/jasonsomensatto/', + }, +]; + +const teamRow9: ProfileInfo[] = [ + { + name: 'Steve Klebanoff', + title: 'Senior Engineer', + description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`, + image: 'images/team/steve.png', + linkedIn: 'https://www.linkedin.com/in/steveklebanoff/', + github: 'https://github.com/steveklebanoff', + }, +]; + +const advisors1: ProfileInfo[] = [ { name: 'Fred Ehrsam', description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.', @@ -232,6 +274,9 @@ const advisors: ProfileInfo[] = [ github: 'https://github.com/joeykrug', angellist: 'https://angel.co/joeykrug', }, +]; + +const advisors2: ProfileInfo[] = [ { name: 'Linda Xie', description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.', @@ -240,6 +285,14 @@ const advisors: ProfileInfo[] = [ medium: 'https://medium.com/@linda.xie', twitter: 'https://twitter.com/ljxie', }, + { + name: 'David Sacks', + description: 'General Partner at Craft Ventures. Original COO of PayPal. Founder of Yammer.', + image: '/images/advisors/david.png', + linkedIn: 'https://www.linkedin.com/in/davidoliversacks/', + medium: 'https://medium.com/@davidsacks', + twitter: 'https://twitter.com/DavidSacks', + }, ]; export interface AboutProps { @@ -304,6 +357,8 @@ export class About extends React.Component<AboutProps, AboutState> { <div className="clearfix">{this._renderProfiles(teamRow5)}</div> <div className="clearfix">{this._renderProfiles(teamRow6)}</div> <div className="clearfix">{this._renderProfiles(teamRow7)}</div> + <div className="clearfix">{this._renderProfiles(teamRow8)}</div> + <div className="clearfix">{this._renderProfiles(teamRow9)}</div> </div> <div className="pt3 pb2"> <div @@ -316,7 +371,8 @@ export class About extends React.Component<AboutProps, AboutState> { > Advisors: </div> - <div className="clearfix">{this._renderProfiles(advisors)}</div> + <div className="clearfix">{this._renderProfiles(advisors1)}</div> + <div className="clearfix">{this._renderProfiles(advisors2)}</div> </div> <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}> <div className="pb2" style={styles.weAreHiring}> @@ -332,7 +388,7 @@ export class About extends React.Component<AboutProps, AboutState> { }} > We are seeking outstanding candidates to{' '} - <Link to={WebsitePaths.Careers} style={{ color: 'black' }}> + <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black"> join our team </Link> . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index bcbeb0272..2361c6418 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx new file mode 100644 index 000000000..361dbc86e --- /dev/null +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -0,0 +1,202 @@ +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; +import { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { media } from 'ts/style/media'; +import { styled } from 'ts/style/theme'; +import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const browserType = utils.getBrowserType(); +let SCROLLBAR_WIDTH; +switch (browserType) { + case BrowserType.Firefox: + // HACK: Firefox doesn't allow styling of their scrollbar's. + // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox + const os = utils.getOperatingSystem(); + SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15; + break; + + case BrowserType.Edge: + // Edge's scrollbar is placed outside of the div content and doesn't + // need to be accounted for + SCROLLBAR_WIDTH = 0; + break; + + default: + SCROLLBAR_WIDTH = 4; +} +const SIDEBAR_PADDING = 22; + +export interface DevelopersPageProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; + mainContent: React.ReactNode; + sidebar: React.ReactNode; +} + +export interface DevelopersPageState { + isSidebarScrolling: boolean; +} + +const isUserOnMobile = sharedUtils.isUserOnMobile(); + +const scrollableContainerStyles = ` + position: absolute; + top: ${TOP_BAR_HEIGHT}px; + left: 0px; + bottom: 0px; + right: 0px; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + /* Required for hide/show onHover of scrollbar on Microsoft Edge */ + -ms-overflow-style: -ms-autohiding-scrollbar; +`; + +interface SidebarContainerProps { + className?: string; +} + +const SidebarContainer = + styled.div < + SidebarContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 27px; + padding-left: ${SIDEBAR_PADDING}px; + padding-right: ${SIDEBAR_PADDING}px; + overflow: hidden; + &:hover { + overflow: auto; + padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px; + } +`; + +interface MainContentContainerProps { + className?: string; +} + +const MainContentContainer = + styled.div < + MainContentContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 0px; + padding-left: 50px; + padding-right: 50px; + overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; + &:hover { + padding-right: ${50 - SCROLLBAR_WIDTH}px; + overflow: auto; + } + ${media.small` + padding-left: 20px; + padding-right: 20px; + &:hover { + padding-right: ${20 - SCROLLBAR_WIDTH}px; + overflow: auto; + } + `} +`; + +export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> { + private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; + constructor(props: DevelopersPageProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); + this.state = { + isSidebarScrolling: false, + }; + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); + } + public render(): React.ReactNode { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 20 : 50; + return ( + <Container + className="flex items-center overflow-hidden" + width="100%" + background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${ + colors.white + } 50%, ${colors.white} 100%)`} + > + <DocumentTitle title="0x Docs" /> + <Container className="flex mx-auto" height="100vh"> + <Container + className="sm-hide xs-hide relative" + width={234} + paddingLeft={22} + paddingRight={22} + paddingTop={0} + backgroundColor={colors.grey100} + > + <Container + borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} + > + <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px"> + <DocsLogo height={36} /> + </Container> + </Container> + <SidebarContainer onWheel={this._throttledSidebarScrolling}> + <Container paddingBottom="100px"> + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + </Container> + </SidebarContainer> + </Container> + <Container + className="relative" + width={isSmallScreen ? '100vw' : 786} + paddingBottom="100px" + backgroundColor={colors.white} + > + <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}> + <DocsTopBar + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + sidebar={this.props.sidebar} + /> + </Container> + <MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}> + {this.props.mainContent} + </MainContentContainer> + </Container> + </Container> + </Container> + ); + } + private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { + this.setState({ + isSidebarScrolling: true, + }); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 8159bbd49..28bf2dba1 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,39 +1,44 @@ -import { DocAgnosticFormat, DocsInfo, Documentation } from '@0xproject/react-docs'; +import { + DocAgnosticFormat, + DocReference, + DocsInfo, + GeneratedDocJson, + SupportedDocJson, + TypeDocUtils, +} from '@0x/react-docs'; import findVersions = require('find-versions'); import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); import semverSort = require('semver-sort'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const isDevelopmentOrStaging = utils.isDevelopment() || utils.isStaging(); -const DEFAULT_ICON = 'docs.png'; const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4'; -const idToIcon: { [id: string]: string } = { - [DocPackages.ZeroExJs]: 'zeroExJs.png', - [DocPackages.Connect]: 'connect.png', - [DocPackages.SmartContracts]: 'contracts.png', -}; - const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.ZeroExJs]: '0x.js', [DocPackages.Connect]: 'connect', [DocPackages.SmartContracts]: 'contracts', [DocPackages.Web3Wrapper]: 'web3-wrapper', + [DocPackages.ContractWrappers]: 'contract-wrappers', [DocPackages.SolCompiler]: 'sol-compiler', [DocPackages.JSONSchemas]: 'json-schemas', [DocPackages.SolCov]: 'sol-cov', [DocPackages.Subproviders]: 'subproviders', [DocPackages.OrderUtils]: 'order-utils', + [DocPackages.OrderWatcher]: 'order-watcher', [DocPackages.EthereumTypes]: 'ethereum-types', + [DocPackages.AssetBuyer]: 'asset-buyer', }; export interface DocPageProps { @@ -43,6 +48,7 @@ export interface DocPageProps { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface DocPageState { @@ -70,38 +76,58 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); - const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; - const iconUrl = `/images/doc_icons/${iconFileName}`; + const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); + const mainContent = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <DocReference + selectedVersion={this.props.docsVersion} + availableVersions={this.props.availableDocVersions} + docsInfo={this.props.docsInfo} + docAgnosticFormat={this.state.docAgnosticFormat} + sourceUrl={sourceUrl} + /> + ); + const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div /> + ) : ( + <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { return ( - <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - docsVersion={this.props.docsVersion} - availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.getMenu(this.props.docsVersion)} - menuSubsectionsBySection={menuSubsectionsBySection} - docsInfo={this.props.docsInfo} - translate={this.props.translate} - onVersionSelected={this._onVersionSelected.bind(this)} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - /> - <Documentation - selectedVersion={this.props.docsVersion} - availableVersions={this.props.availableDocVersions} - docsInfo={this.props.docsInfo} - docAgnosticFormat={this.state.docAgnosticFormat} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - sourceUrl={sourceUrl} - topBarHeight={60} - onVersionSelected={this._onVersionSelected.bind(this)} - /> - </div> + <SidebarHeader + screenWidth={this.props.screenWidth} + title={this.props.docsInfo.displayName} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + onVersionSelected={this._onVersionSelected.bind(this)} + /> + ); + } + private _renderLoading(): React.ReactNode { + return ( + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading documentation... + </Container> + </Container> ); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { @@ -126,7 +152,22 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { const versionFilePathToFetch = versionToFilePath[versionToFetch]; const versionDocObj = await docUtils.getJSONDocFileAsync(versionFilePathToFetch, docBucketRoot); - const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj); + let docAgnosticFormat; + if (this.props.docsInfo.type === SupportedDocJson.TypeDoc) { + docAgnosticFormat = new TypeDocUtils( + versionDocObj as GeneratedDocJson, + this.props.docsInfo, + ).convertToDocAgnosticFormat(); + } else if (this.props.docsInfo.type === SupportedDocJson.SolDoc) { + // documenting solidity. + docAgnosticFormat = versionDocObj as DocAgnosticFormat; + // HACK: need to modify docsInfo like convertToDocAgnosticFormat() would do + this.props.docsInfo.markdownMenu.Contracts = []; + _.each(docAgnosticFormat, (_docObj, sectionName) => { + this.props.docsInfo.sections[sectionName] = sectionName; + this.props.docsInfo.markdownMenu.Contracts.push(sectionName); + }); + } if (!this._isUnmounted) { this.setState({ @@ -140,7 +181,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { let tagPrefix = pkg; const packagesWithNamespace = ['connect']; if (_.includes(packagesWithNamespace, pkg)) { - tagPrefix = `@0xproject/${pkg}`; + tagPrefix = `@0x/${pkg}`; } // HACK: The following three lines exist for backward compatibility reasons // Before exporting types from other packages as part of the 0x.js interface, diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx new file mode 100644 index 000000000..bbbee2d2d --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -0,0 +1,385 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; +import { Button } from 'ts/components/ui/button'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const TUTORIALS: TutorialInfo[] = [ + { + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: Key.DevelopOnEthereumDescription, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + }, + { + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: Key.BuildARelayerDescription, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + }, + { + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: Key.OrderBasicsDescription, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + }, + { + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: Key.UseNetworkedLiquidityDescription, + link: { + title: Key.UseNetworkedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, + }, +]; + +const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { + [Categories.ZeroExProtocol]: [ + { + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, + }, + { + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', + link: { + title: '@0x/connect', + to: WebsitePaths.Connect, + }, + }, + { + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', + link: { + title: '@0x/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, + }, + { + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + link: { + title: '@0x/json-schemas', + to: WebsitePaths.JSONSchemas, + }, + }, + { + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + link: { + title: '@0x/order-utils', + to: WebsitePaths.OrderUtils, + }, + }, + { + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + link: { + title: '@0x/order-watcher', + to: WebsitePaths.OrderWatcher, + }, + }, + { + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + link: { + title: '@0x/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Convenience package for buying assets represented on the Ethereum blockchain using 0x. In its simplest form, the package helps in the usage of the [0x forwarder contract](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md), which allows users to execute [Wrapped Ether](https://weth.io/) based 0x orders without having to set allowances, wrap Ether or own ZRX, meaning they can buy tokens with Ether alone. Given some liquidity (0x signed orders), it helps estimate the Ether cost of buying a certain asset (giving a range) and then buying that asset.', + link: { + title: '@0x/asset-buyer', + to: WebsitePaths.AssetBuyer, + }, + }, + ], + [Categories.Ethereum]: [ + { + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, + }, + { + description: + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + link: { + title: '@0x/sol-compiler', + to: WebsitePaths.SolCompiler, + }, + }, + { + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + link: { + title: '@0x/sol-cov', + to: WebsitePaths.SolCov, + }, + }, + { + description: + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + link: { + title: '@0x/subproviders', + to: WebsitePaths.Subproviders, + }, + }, + { + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + link: { + title: '@0x/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, + }, + ], + [Categories.CommunityMaintained]: [ + { + description: + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + }, + }, + { + description: + "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A node.js SDK for trading on the DDEX relayer', + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users", + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdEX Widget', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdEX Java SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdEX Python SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + }, + }, + { + description: 'An open-source API-only Relayer written in Go', + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + }, + }, + { + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + }, + }, + ], +}; + +export interface DocsHomeProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; + dispatcher: Dispatcher; +} + +export interface DocsHomeState {} + +export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap<ALink[]> = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.link, + ), + }; + const mainContent = ( + <OverviewContent + translate={this.props.translate} + tutorials={TUTORIALS} + categoryToPackages={CATEGORY_TO_PACKAGES} + /> + ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + shouldReformatMenuItemNames={false} + /> + ); + return ( + <DevelopersPage + mainContent={mainContent} + sidebar={sidebar} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + return menuItems; + } +} diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index c9295d806..10d91bae8 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index f80985257..413ffb6ce 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; diff --git a/packages/website/ts/pages/fullscreen_message.tsx b/packages/website/ts/pages/fullscreen_message.tsx index 6fcf7b32c..675f27a01 100644 --- a/packages/website/ts/pages/fullscreen_message.tsx +++ b/packages/website/ts/pages/fullscreen_message.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; export interface FullscreenMessageProps { diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index cc4b1f04b..728e17f9e 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,4 +1,4 @@ -import { colors, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index ec8afbd93..e869cd455 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 2a51ee3c0..c56ed4ebe 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,13 +1,15 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Text } from 'ts/components/ui/text'; +import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -19,11 +21,7 @@ interface BoxContent { description: string; imageUrl: string; classNames: string; -} -interface AssetType { - title: string; - imageUrl: string; - style?: React.CSSProperties; + maxWidth: number; } interface UseCase { imageUrl: string; @@ -31,7 +29,6 @@ interface UseCase { description: string; classNames: string; style?: React.CSSProperties; - projectIconUrls: string[]; } interface Project { logoFileName: string; @@ -39,74 +36,24 @@ interface Project { } const THROTTLE_TIMEOUT = 100; -const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018'; -const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; - -const relayersAndDappProjects: Project[] = [ - { - logoFileName: 'ercdex.png', - projectUrl: constants.PROJECT_URL_ERC_DEX, - }, - { - logoFileName: 'radar_relay.png', - projectUrl: constants.PROJECT_URL_RADAR_RELAY, - }, - { - logoFileName: 'paradex.png', - projectUrl: constants.PROJECT_URL_PARADEX, - }, - { - logoFileName: 'the_ocean.png', - projectUrl: constants.PROJECT_URL_0CEAN, - }, - { - logoFileName: 'dydx.png', - projectUrl: constants.PROJECT_URL_DYDX, - }, - { - logoFileName: 'ethfinex.png', - projectUrl: constants.PROJECT_URL_ETHFINEX, - }, - { - logoFileName: 'melonport.png', - projectUrl: constants.PROJECT_URL_MELONPORT, - }, - { - logoFileName: 'maker.png', - projectUrl: constants.PROJECT_URL_MAKER, - }, - { - logoFileName: 'dharma.png', - projectUrl: constants.PROJECT_URL_DHARMA, - }, - { - logoFileName: 'lendroid.png', - projectUrl: constants.PROJECT_URL_LENDROID, - }, - { - logoFileName: 'district0x.png', - projectUrl: constants.PROJECT_URL_DISTRICT_0X, - }, - { - logoFileName: 'aragon.png', - projectUrl: constants.PROJECT_URL_ARAGON, - }, - { - logoFileName: 'blocknet.png', - projectUrl: constants.PROJECT_URL_BLOCKNET, - }, - { - logoFileName: 'imtoken.png', - projectUrl: constants.PROJECT_URL_IMTOKEN, - }, - { - logoFileName: 'augur.png', - projectUrl: constants.PROJECT_URL_AUGUR, - }, - { - logoFileName: 'anx.png', - projectUrl: constants.PROJECT_URL_OPEN_ANX, - }, +const WHATS_NEW_TITLE = '0x Protocol v2 is Live!'; +const WHATS_NEW_URL = 'https://blog.0xproject.com/0x-protocol-v2-0-is-live-183aac180149'; +const TITLE_STYLE: React.CSSProperties = { + fontFamily: 'Roboto Mono', + color: colors.grey, + fontWeight: 300, + letterSpacing: 3, +}; +const ROTATING_LIST = [ + 'tokens', + 'game items', + 'digital art', + 'futures', + 'stocks', + 'derivatives', + 'loans', + 'cats', + 'everything', ]; const relayerProjects: Project[] = [ @@ -199,21 +146,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { /> {this._renderHero()} {this._renderProjects( - relayersAndDappProjects, - this.props.translate.get(Key.ProjectsHeader, Deco.Upper), - colors.projectsGrey, - false, - )} - {this._renderTokenizationSection()} - {this._renderProtocolSection()} - {this._renderProjects( relayerProjects, this.props.translate.get(Key.RelayersHeader, Deco.Upper), - colors.heroGrey, + colors.projectsGrey, true, )} {this._renderInfoBoxes()} - {this._renderBuildingBlocksSection()} + {this._renderTokenizationSection()} {this._renderUseCases()} {this._renderCallToAction()} <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> @@ -222,15 +161,18 @@ export class Landing extends React.Component<LandingProps, LandingState> { } private _renderHero(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const flexClassName = isSmallScreen + ? 'flex items-center flex-column justify-center' + : 'flex items-center justify-center'; return ( <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 clearfix"> {this._renderWhatsNew()} - <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4 clearfix"> - <div className="col lg-col-5 md-col-5 col-12 sm-center"> - <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} /> - </div> + <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}> + <Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px"> + <Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" /> + </Container> <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}> <div className="inline-block lg-align-middle md-align-middle sm-align-top" @@ -239,37 +181,46 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: '36px', }} > - <div + <Text className="sm-pb2" - style={{ - fontFamily: 'Roboto Mono', - fontSize: isSmallScreen ? 26 : 34, - }} + fontFamily="Roboto" + display="inline-block" + fontColor={colors.grey300} + fontWeight={500} + lineHeight="1.3em" + fontSize={isSmallScreen ? '28px' : '36px'} > {this.props.translate.get(Key.TopHeader, Deco.Cap)} - </div> - <div - className="pt2 h5 sm-mx-auto" - style={{ - maxWidth: 446, - fontFamily: 'Roboto Mono', - lineHeight: 1.7, - fontWeight: 300, - }} + {this.props.translate.getLanguage() === Language.English && ( + <React.Fragment> + {' '} + for{' '} + <TypedText + fontFamily="Roboto" + display="inline-block" + fontColor={colors.white} + fontWeight={700} + lineHeight="1.3em" + fontSize={isSmallScreen ? '28px' : '36px'} + textList={ROTATING_LIST} + shouldRepeat={true} + /> + </React.Fragment> + )} + </Text> + <Container + className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - {this.props.translate.get(Key.TopTagline)} - </div> - <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px"> - <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2"> - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <CallToAction width="175px" type="light"> + <Container paddingRight="20px"> + <Link to={WebsitePaths.Docs}> + <CallToAction type="light"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> </Link> - </div> - <div className="lg-col lg-col-6 sm-center sm-col sm-col-12"> - <Link to={WebsitePaths.Portal} className="text-decoration-none"> - <CallToAction width="175px"> + </Container> + <div> + <Link to={WebsitePaths.Portal}> + <CallToAction> {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} </CallToAction> </Link> @@ -287,19 +238,24 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="sm-center sm-px1"> <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none"> - <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}> - <div - className="mr1 px1" - style={{ - backgroundColor: colors.white, - borderRadius: 3, - color: colors.heroGrey, - height: 23, - }} + <div className="flex items-center sm-pl0 md-pl2 lg-pl0"> + <Container + paddingTop="3px" + paddingLeft="8px" + paddingBottom="3px" + paddingRight="8px" + backgroundColor={colors.white} + borderRadius={6} > - New - </div> - <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div> + <Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}> + New + </Text> + </Container> + <Container marginLeft="12px"> + <Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}> + {WHATS_NEW_TITLE} + </Text> + </Container> </div> </a> </div> @@ -344,16 +300,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); }); - const titleStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - color: colors.grey, - fontWeight: 300, - letterSpacing: 3, - }; return ( <div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}> <div className="mx-auto max-width-4 clearfix sm-px3"> - <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}> + <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}> {title} </div> <div className="clearfix">{projectList}</div> @@ -367,11 +317,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { }} > {this.props.translate.get(Key.FullListPrompt)}{' '} - <Link - to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} - className="text-decoration-none underline" - style={{ color: colors.landingLinkGrey }} - > + <Link to={WebsitePaths.Portal} textDecoration="underline" fontColor={colors.landingLinkGrey}> {this.props.translate.get(Key.FullListLink)} </Link> </div> @@ -402,7 +348,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { > {this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)} </div> - <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div> + <div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div> </div> </div> {!isSmallScreen && this._renderTokenCloud()} @@ -410,116 +356,6 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderProtocolSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 pt4 clearfix"> - <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} /> - </div> - <div - className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto" - style={{ - color: colors.beigeWhite, - maxWidth: isSmallScreen ? 'none' : 445, - height: 430, - lineHeight: '430px', - }} - > - <div - className="inline-block lg-align-middle md-align-middle sm-align-top" - style={{ lineHeight: '43px' }} - > - <div - className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" - style={{ fontFamily: 'Roboto Mono' }} - > - <div>{this.props.translate.get(Key.OffChainOrderRelay, Deco.Cap)}</div> - <div> {this.props.translate.get(Key.OonChainSettlement, Deco.Cap)}</div> - </div> - <div - className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto" - style={{ - fontFamily: 'Roboto Mono', - lineHeight: 1.7, - fontWeight: 300, - maxWidth: 445, - }} - > - {this.props.translate.get(Key.OffChainOnChainDescription, Deco.Cap)} - </div> - </div> - </div> - </div> - </div> - ); - } - private _renderBuildingBlocksSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const descriptionStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - lineHeight: isSmallScreen ? 1.5 : 2, - fontWeight: 300, - fontSize: 15, - maxWidth: isSmallScreen ? 375 : 'none', - }; - const callToActionStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - fontSize: 15, - fontWeight: 300, - maxWidth: isSmallScreen ? 375 : 441, - }; - return ( - <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> - {isSmallScreen && this._renderBlockChipImage()} - <div - className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3" - style={{ color: colors.beigeWhite }} - > - <div - className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center" - style={{ fontFamily: 'Roboto Mono' }} - > - {this.props.translate.get(Key.BuildingBlockSectionHeader, Deco.Cap)} - </div> - <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}> - {this.props.translate.get(Key.BuildingBlockSectionDescription, Deco.Cap)} - </div> - <div className="sm-mx-auto sm-center" style={callToActionStyle}> - {this.props.translate.get(Key.DevToolsPrompt, Deco.Cap)}{' '} - <Link - to={WebsitePaths.ZeroExJs} - className="text-decoration-none underline" - style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} - > - 0x.js - </Link>{' '} - {this.props.translate.get(Key.And)}{' '} - <Link - to={WebsitePaths.SmartContracts} - className="text-decoration-none underline" - style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} - > - {this.props.translate.get(Key.SmartContract)} - </Link>{' '} - {this.props.translate.get(Key.Docs)} - </div> - </div> - {!isSmallScreen && this._renderBlockChipImage()} - </div> - </div> - ); - } - private _renderBlockChipImage(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} /> - </div> - ); - } private _renderTokenCloud(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( @@ -528,48 +364,16 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderAssetTypes(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const assetTypes: AssetType[] = [ - { - title: this.props.translate.get(Key.Currency, Deco.Cap), - imageUrl: '/images/landing/currency.png', - }, - { - title: this.props.translate.get(Key.TraditionalAssets, Deco.Cap), - imageUrl: '/images/landing/stocks.png', - style: { - paddingLeft: isSmallScreen ? 41 : 56, - paddingRight: isSmallScreen ? 41 : 56, - }, - }, - { - title: this.props.translate.get(Key.DigitalGoods, Deco.Cap), - imageUrl: '/images/landing/digital_goods.png', - }, - ]; - const assets = _.map(assetTypes, (assetType: AssetType) => { - const style = _.isUndefined(assetType.style) ? {} : assetType.style; - return ( - <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}> - <div> - <img src={assetType.imageUrl} height="80" /> - </div> - <div - style={{ - fontFamily: 'Roboto Mono', - fontSize: 13.5, - fontWeight: 400, - color: colors.darkestGrey, - lineHeight: 1.4, - }} - > - {assetType.title} - </div> - </div> - ); - }); - return assets; + private _renderMissionAndValuesButton(): React.ReactNode { + return ( + <a + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} + target="_blank" + className="inline-block text-decoration-none" + > + <CallToAction>{this.props.translate.get(Key.OurMissionAndValues, Deco.CapWords)}</CallToAction> + </a> + ); } private _renderInfoBoxes(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; @@ -586,27 +390,34 @@ export class Landing extends React.Component<LandingProps, LandingState> { description: this.props.translate.get(Key.BenefitOneDescription, Deco.Cap), imageUrl: '/images/landing/distributed_network.png', classNames: '', + maxWidth: 160, }, { title: this.props.translate.get(Key.BenefitTwoTitle, Deco.Cap), description: this.props.translate.get(Key.BenefitTwoDescription, Deco.Cap), imageUrl: '/images/landing/liquidity.png', classNames: 'mx-auto', + maxWidth: 160, }, { title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap), description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap), - imageUrl: '/images/landing/open_source.png', + imageUrl: '/images/landing/exchange_everywhere.png', classNames: 'right', + maxWidth: 130, }, ]; const boxes = _.map(boxContents, (boxContent: BoxContent) => { return ( <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4"> <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}> - <div> - <img src={boxContent.imageUrl} style={{ height: 210 }} /> - </div> + <Container className="flex items-center" height="210px"> + <img + className="mx-auto" + src={boxContent.imageUrl} + style={{ height: 'auto', maxWidth: boxContent.maxWidth }} + /> + </Container> <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}> {boxContent.title} </div> @@ -617,15 +428,9 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); }); - const titleStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - color: colors.grey, - fontWeight: 300, - letterSpacing: 3, - }; return ( <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}> - <div className="center pb3 pt4" style={titleStyle}> + <div className="center pb3 pt4" style={TITLE_STYLE}> {this.props.translate.get(Key.BenefitsHeader, Deco.Upper)} </div> <div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}> @@ -634,53 +439,92 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderUseCases(): React.ReactNode { + private _getUseCases(): UseCase[] { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - - const useCases: UseCase[] = [ - { - imageUrl: '/images/landing/governance_icon.png', - type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper), - description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap), - projectIconUrls: ['/images/landing/aragon.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/prediction_market_icon.png', - type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), - description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), - projectIconUrls: ['/images/landing/augur.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/stable_tokens_icon.png', - type: this.props.translate.get(Key.StableTokens, Deco.Upper), - description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), - projectIconUrls: ['/images/landing/maker.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/loans_icon.png', - type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), - description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), - projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'], - classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', - style: { - width: 291, - float: 'right', - marginTop: !isSmallScreen ? 38 : 0, + const isEnglish = this.props.translate.getLanguage() === Language.English; + if (isEnglish) { + return [ + { + imageUrl: '/images/landing/governance_icon.png', + type: this.props.translate.get(Key.GamingAndCollectables, Deco.Upper), + description: this.props.translate.get(Key.GamingAndCollectablesDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', }, - }, - { - imageUrl: '/images/landing/fund_management_icon.png', - type: this.props.translate.get(Key.FundManagement, Deco.Upper), - description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap), - projectIconUrls: ['/images/landing/melonport.png'], - classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', - style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, - }, - ]; - + { + imageUrl: '/images/landing/prediction_market_icon.png', + type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), + description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/fund_management_icon.png', + type: this.props.translate.get(Key.OrderBooks, Deco.Upper), + description: this.props.translate.get(Key.OrderBooksDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/loans_icon.png', + type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), + classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, + }, + { + imageUrl: '/images/landing/stable_tokens_icon.png', + type: this.props.translate.get(Key.StableTokens, Deco.Upper), + description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), + classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, + }, + ]; + } else { + return [ + { + imageUrl: '/images/landing/governance_icon.png', + type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/prediction_market_icon.png', + type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), + description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/stable_tokens_icon.png', + type: this.props.translate.get(Key.StableTokens, Deco.Upper), + description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/loans_icon.png', + type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), + classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, + }, + { + imageUrl: '/images/landing/fund_management_icon.png', + type: this.props.translate.get(Key.FundManagement, Deco.Upper), + description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap), + classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, + }, + ]; + } + } + private _renderUseCases(): React.ReactNode { + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const useCases = this._getUseCases(); const cases = _.map(useCases, (useCase: UseCase) => { const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style; const useCaseBoxStyle = { @@ -715,7 +559,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: 1.5, fontSize: 14, overflow: 'hidden', - height: 104, + height: 124, }} > {useCase.description} @@ -725,7 +569,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); }); return ( - <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> + <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> + <div className="center h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}> + {this.props.translate.get(Key.UseCasesHeader, Deco.Upper)} + </div> <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}> {cases} </div> @@ -751,7 +598,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)} </div> <div className="sm-center sm-pt2 lg-table-cell md-table-cell"> - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <Link to={WebsitePaths.Docs}> <CallToAction fontSize="15px"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..c1802b1f8 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,27 +1,28 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + Link, MarkdownSection, - NestedSidebarMenu, - Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; +} from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection } from 'ts/types'; +import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -29,6 +30,7 @@ export interface WikiProps { location: Location; dispatcher: Dispatcher; translate: Translate; + screenWidth: ScreenWidths; } interface WikiState { @@ -36,24 +38,6 @@ interface WikiState { isHoveringSidebar: boolean; } -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflow: 'hidden', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - backgroundColor: colors.gray40, - }, -}; - export class Wiki extends React.Component<WikiProps, WikiState> { private _wikiBackoffTimeoutId: number; private _isUnmounted: boolean; @@ -65,9 +49,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { isHoveringSidebar: false, }; } - public componentDidMount(): void { - window.addEventListener('hashchange', this._onHashChanged.bind(this), false); - } public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchArticlesBySectionAsync(); @@ -75,92 +56,79 @@ export class Wiki extends React.Component<WikiProps, WikiState> { public componentWillUnmount(): void { this._isUnmounted = true; clearTimeout(this._wikiBackoffTimeoutId); - window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); - const mainContainersStyle: React.CSSProperties = { - ...styles.mainContainers, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }; - const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="/images/doc_icons/wiki.png" />; - return ( - <div> - <DocumentTitle title="0x Protocol Wiki" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - menuSubsectionsBySection={menuSubsectionsBySection} - translate={this.props.translate} - sidebarHeader={sidebarHeader} - /> - {_.isUndefined(this.state.articlesBySection) ? ( - <div className="col col-12" style={mainContainersStyle}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading wiki... - </div> - </div> - </div> - ) : ( - <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> - <div - className="mx-auto max-width-4 flex" - style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} - > - <div - className="relative lg-pl0 md-pl1 sm-hide xs-hide" - style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }} - > - <div - className="absolute" - style={{ - ...styles.menuContainer, - ...mainContainersStyle, - height: 'calc(100vh - 76px)', - }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} - > - <NestedSidebarMenu - topLevelMenu={menuSubsectionsBySection} - menuSubsectionsBySection={menuSubsectionsBySection} - sidebarHeader={sidebarHeader} - /> - </div> - </div> - <div - className="relative" - style={{ - width: '100%', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - backgroundColor: 'white', - }} - > - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - style={{ ...mainContainersStyle, overflow: 'auto' }} - className="absolute" - > - <div id={sharedConstants.SCROLL_TOP_ID} /> - <div id="wiki" style={{ paddingRight: 2 }}> - {this._renderWikiArticles()} - </div> - </div> - </div> - </div> - </div> - )} + : this._getSectionNameToLinks(this.state.articlesBySection); + + const mainContent = _.isUndefined(this.state.articlesBySection) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <div id="wiki" style={{ paddingRight: 2 }}> + {this._renderWikiArticles()} </div> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = _.isUndefined(this.state.articlesBySection) ? ( + <div /> + ) : ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return ( + <Container> + <SidebarHeader screenWidth={this.props.screenWidth} title={wikiTitle} /> + {menuItems} + </Container> + ); + } + private _renderLoading(): React.ReactNode { + return ( + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading wiki... + </Container> + </Container> + ); } private _renderWikiArticles(): React.ReactNode { const sectionNames = _.keys(this.state.articlesBySection); @@ -179,22 +147,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}> - <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}> - See a way to improve this article? - </div> - <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2"> - <RaisedButton href={githubLink} target="_blank" label="Edit on Github" /> - </div> - </div> </div> ); }); - return ( - <div key={`section-${sectionName}`} className="py2 md-px1 sm-px0"> - {renderedArticles} - </div> - ); + return <div key={`section-${sectionName}`}>{renderedArticles}</div>; } private async _fetchArticlesBySectionAsync(): Promise<void> { try { @@ -223,28 +179,19 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap<ALink[]> { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap<ALink[]> = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; - } - private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); - } - private _onHashChanged(_event: any): void { - const hash = window.location.hash.slice(1); - sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); + return sectionNameToLinks; } } diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts index db008d319..e85afd3b1 100644 --- a/packages/website/ts/redux/dispatcher.ts +++ b/packages/website/ts/redux/dispatcher.ts @@ -1,5 +1,4 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import { Dispatch } from 'redux'; import { State } from 'ts/redux/reducer'; import { @@ -7,7 +6,7 @@ import { AssetToken, BlockchainErrs, Language, - Order, + PortalOrder, ProviderType, ScreenWidths, Side, @@ -50,7 +49,7 @@ export class Dispatcher { type: ActionTypes.UpdateOrderSalt, }); } - public updateUserSuppliedOrderCache(order: Order): void { + public updateUserSuppliedOrderCache(order: PortalOrder): void { this._dispatch({ data: order, type: ActionTypes.UpdateUserSuppliedOrderCache, @@ -149,10 +148,10 @@ export class Dispatcher { type: ActionTypes.ForceTokenStateRefetch, }); } - public updateECSignature(ecSignature: ECSignature): void { + public updateSignature(signature: string): void { this._dispatch({ - data: ecSignature, - type: ActionTypes.UpdateOrderECSignature, + data: signature, + type: ActionTypes.UpdateOrderSignature, }); } public updateUserWeiBalance(balance?: BigNumber): void { diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index caddabcf0..51c77ba47 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -1,19 +1,19 @@ -import { constants, generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { generatePseudoRandomSalt } from '@0x/order-utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as moment from 'moment'; import { Action, ActionTypes, BlockchainErrs, - Order, + PortalOrder, ProviderType, ScreenWidths, Side, SideToAssetToken, TokenByAddress, } from 'ts/types'; +import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -30,7 +30,7 @@ export interface State { orderExpiryTimestamp: BigNumber; orderFillAmount: BigNumber; orderTakerAddress: string; - orderECSignature: ECSignature; + orderSignature: string; orderSalt: BigNumber; nodeVersion: string; screenWidth: ScreenWidths; @@ -44,7 +44,7 @@ export interface State { isPortalOnboardingShowing: boolean; hasPortalOnboardingBeenClosed: boolean; // Note: cache of supplied orderJSON in fill order step. Do not use for anything else. - userSuppliedOrderCache: Order; + userSuppliedOrderCache: PortalOrder; // Docs docsVersion: string; @@ -64,11 +64,7 @@ export const INITIAL_STATE: State = { networkId: undefined, orderExpiryTimestamp: utils.initialOrderExpiryUnixTimestampSec(), orderFillAmount: undefined, - orderECSignature: { - r: '', - s: '', - v: 27, - }, + orderSignature: '', orderTakerAddress: constants.NULL_ADDRESS, orderSalt: generatePseudoRandomSalt(), nodeVersion: undefined, @@ -89,7 +85,6 @@ export const INITIAL_STATE: State = { // Docs docsVersion: DEFAULT_DOCS_VERSION, availableDocVersions: [DEFAULT_DOCS_VERSION], - // Shared flashMessage: undefined, providerType: ProviderType.Injected, @@ -206,10 +201,10 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { lastForceTokenStateRefetch: moment().unix(), }; - case ActionTypes.UpdateOrderECSignature: { + case ActionTypes.UpdateOrderSignature: { return { ...state, - orderECSignature: action.data, + orderSignature: action.data, }; } diff --git a/packages/website/ts/schemas/portal_order_schema.ts b/packages/website/ts/schemas/portal_order_schema.ts index ea8aeabc6..15e61f5e4 100644 --- a/packages/website/ts/schemas/portal_order_schema.ts +++ b/packages/website/ts/schemas/portal_order_schema.ts @@ -1,7 +1,7 @@ export const portalOrderSchema = { id: '/PortalOrder', properties: { - signedOrder: { $ref: '/SignedOrder' }, + signedOrder: { $ref: '/signedOrderSchema' }, metadata: { $ref: '/OrderMetadata' }, }, required: ['signedOrder', 'metadata'], diff --git a/packages/website/ts/schemas/validator.ts b/packages/website/ts/schemas/validator.ts index 3fd013002..128d943e1 100644 --- a/packages/website/ts/schemas/validator.ts +++ b/packages/website/ts/schemas/validator.ts @@ -1,4 +1,4 @@ -import { SchemaValidator } from '@0xproject/json-schemas'; +import { SchemaValidator } from '@0x/json-schemas'; import { orderMetadataSchema } from 'ts/schemas/metadata_schema'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { portalTokenMetadataSchema } from 'ts/schemas/portal_token_metadata'; diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 349845a09..0620bae0f 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -1,4 +1,4 @@ -import { colors as sharedColors } from '@0xproject/react-shared'; +import { colors as sharedColors } from '@0x/react-shared'; const appColors = { walletBoxShadow: 'rgba(0, 0, 0, 0.05)', diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index e1b5be39a..ce4b50a58 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,5 +1,6 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { ALink } from '@0x/react-shared'; +import { ObjectMap, SignedOrder } from '@0x/types'; +import { BigNumber } from '@0x/utils'; import { Provider } from 'ethereum-types'; import * as React from 'react'; @@ -56,28 +57,12 @@ export interface OrderToken { decimals: number; } -export interface SignedOrder { - maker: string; - taker: string; - makerTokenAddress: string; - takerTokenAddress: string; - makerFee: string; - takerFee: string; - makerTokenAmount: string; - takerTokenAmount: string; - expirationUnixTimestampSec: string; - feeRecipient: string; - salt: string; - ecSignature: ECSignature; - exchangeContractAddress: string; -} - export interface OrderMetadata { makerToken: OrderToken; takerToken: OrderToken; } -export interface Order { +export interface PortalOrder { signedOrder: SignedOrder; metadata: OrderMetadata; } @@ -120,7 +105,7 @@ export enum ActionTypes { UpdateChosenAssetTokenAddress = 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS', UpdateOrderTakerAddress = 'UPDATE_ORDER_TAKER_ADDRESS', UpdateOrderSalt = 'UPDATE_ORDER_SALT', - UpdateOrderECSignature = 'UPDATE_ORDER_EC_SIGNATURE', + UpdateOrderSignature = 'UPDATE_ORDER_SIGNATURE', UpdateTokenByAddress = 'UPDATE_TOKEN_BY_ADDRESS', RemoveTokenFromTokenByAddress = 'REMOVE_TOKEN_FROM_TOKEN_BY_ADDRESS', ForceTokenStateRefetch = 'FORCE_TOKEN_STATE_REFETCH', @@ -371,12 +356,15 @@ export enum WebsitePaths { SmartContracts = '/docs/contracts', Connect = '/docs/connect', Web3Wrapper = '/docs/web3-wrapper', + ContractWrappers = '/docs/contract-wrappers', + OrderWatcher = '/docs/order-watcher', SolCompiler = '/docs/sol-compiler', JSONSchemas = '/docs/json-schemas', SolCov = '/docs/sol-cov', Subproviders = '/docs/subproviders', OrderUtils = '/docs/order-utils', EthereumTypes = '/docs/ethereum-types', + AssetBuyer = '/docs/asset-buyer', Careers = '/careers', } @@ -391,6 +379,9 @@ export enum DocPackages { Subproviders = 'SUBPROVIDERS', OrderUtils = 'ORDER_UTILS', EthereumTypes = 'ETHEREUM_TYPES', + ContractWrappers = 'CONTRACT_WRAPPERS', + OrderWatcher = 'ORDER_WATCHER', + AssetBuyer = 'ASSET_BUYER', } export enum Key { @@ -407,10 +398,11 @@ export enum Key { TraditionalAssets = 'TRADITIONAL_ASSETS', DigitalGoods = 'DIGITAL_GOODS', OffChainOrderRelay = 'OFFCHAIN_ORDER_RELAY', - OonChainSettlement = 'OONCHAIN_SETTLEMENT', + OnChainSettlement = 'ONCHAIN_SETTLEMENT', OffChainOnChainDescription = 'OFFCHAIN_ONCHAIN_DESCRIPTION', RelayersHeader = 'RELAYERS_HEADER', BenefitsHeader = 'BENEFITS_HEADER', + UseCasesHeader = 'USE_CASES_HEADER', BenefitOneTitle = 'BENEFIT_ONE_TITLE', BenefitOneDescription = 'BENEFIT_ONE_DESCRIPTION', BenefitTwoTitle = 'BENEFIT_TWO_TITLE', @@ -432,6 +424,10 @@ export enum Key { DecentralizedLoansDescription = 'DECENTRALIZED_LOANS_DESCRIPTION', FundManagement = 'FUND_MANAGEMENT', FundManagementDescription = 'FUND_MANAGEMENT_DESCRIPTION', + GamingAndCollectables = 'GAMING_AND_COLLECTABLES', + GamingAndCollectablesDescription = 'GAMING_AND_COLLECTABLES_DESCRIPTION', + OrderBooks = 'ORDER_BOOKS', + OrderBooksDescription = 'ORDER_BOOKS_DESCRIPTION', FinalCallToAction = 'FINAL_CALL_TO_ACTION', Documentation = 'DOCUMENTATION', Community = 'COMMUNITY', @@ -444,6 +440,10 @@ export enum Key { SolCov = 'SOL_COV', EthereumTypes = 'ETHEREUM_TYPES', Subproviders = 'SUBPROVIDERS', + ZeroExJs = '0X_JS', + ContractWrappers = 'CONTRACT_WRAPPERS', + OrderWatcher = 'ORDER_WATCHER', + AssetBuyer = 'ASSET_BUYER', Blog = 'BLOG', Forum = 'FORUM', Connect = 'CONNECT', @@ -461,6 +461,24 @@ export enum Key { Home = 'HOME', RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', + OurMissionAndValues = 'OUR_MISSION_AND_VALUES', + BuildARelayer = 'BUILD_A_RELAYER', + BuildARelayerDescription = 'BUILD_A_RELAYER_DESCRIPTION', + DevelopOnEthereum = 'DEVELOP_ON_ETHEREUM', + DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', + OrderBasics = 'ORDER_BASICS', + OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', + UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', + UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', + ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', + Sandbox = 'SANDBOX', + Github = 'GITHUB', + LiveChat = 'LIVE_CHAT', + LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + LibrariesAndToolsDescription = 'LIBRARIES_AND_TOOLS_DESCRIPTION', + More = 'MORE', + StartBuildOn0x = 'START_BUILDING_ON_0X', + StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION', } export enum SmartContractDocSections { @@ -494,7 +512,7 @@ export enum Providers { Parity = 'PARITY', Metamask = 'METAMASK', Mist = 'MIST', - Toshi = 'TOSHI', + CoinbaseWallet = 'COINBASE_WALLET', Cipher = 'CIPHER', } @@ -522,10 +540,6 @@ export interface OutdatedWrappedEtherByNetworkId { export type ItemByAddress<T> = ObjectMap<T>; -export interface ObjectMap<T> { - [key: string]: T; -} - export type TokenStateByAddress = ItemByAddress<TokenState>; export interface TokenState { @@ -576,6 +590,8 @@ export enum BrowserType { Chrome = 'Chrome', Firefox = 'Firefox', Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', Other = 'Other', } @@ -600,11 +616,20 @@ export interface InjectedProvider extends Provider { publicConfigStore?: InjectedProviderObservable; } -// Minimal expected interface for an injected web3 object -export interface InjectedWeb3 { - currentProvider: InjectedProvider; - version: { - getNetwork(cd: (err: Error, networkId: string) => void): void; - }; +export interface TutorialInfo { + iconUrl: string; + description: string; + link: ALink; +} + +export enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} + +export interface Package { + description: string; + link: ALink; } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index e5a1ddfa4..e990b4fc7 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,5 +1,7 @@ +import { assetDataUtils } from '@0x/order-utils'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; -import { ObjectMap, Order } from 'ts/types'; +import { PortalOrder } from 'ts/types'; import { utils } from 'ts/utils/utils'; export interface HeapAnalytics { @@ -53,12 +55,16 @@ export class Analytics { } // tslint:enable:no-floating-promises // Custom methods - public trackOrderEvent(eventName: string, order: Order): void { + public trackOrderEvent(eventName: string, order: PortalOrder): void { + const takerTokenAmount = order.signedOrder.takerAssetAmount.toString(); + const makerTokenAmount = order.signedOrder.makerAssetAmount.toString(); + const takerToken = assetDataUtils.decodeERC20AssetData(order.signedOrder.takerAssetData).tokenAddress; + const makerToken = assetDataUtils.decodeERC20AssetData(order.signedOrder.makerAssetData).tokenAddress; const orderLoggingData = { - takerTokenAmount: order.signedOrder.takerTokenAmount, - makeTokenAmount: order.signedOrder.makerTokenAmount, - takerToken: order.metadata.takerToken.symbol, - makerToken: order.metadata.makerToken.symbol, + takerTokenAmount, + makerTokenAmount, + takerToken, + makerToken, }; this.track(eventName, orderLoggingData); } diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index a1c64f9cb..7b74eccfb 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -18,7 +18,7 @@ export const configs = { DOMAIN_PRODUCTION: '0xproject.com', GOOGLE_ANALYTICS_ID: 'UA-98720122-1', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', - LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5', + LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-9-7', OUTDATED_WRAPPED_ETHERS: [ { 42: { @@ -44,27 +44,6 @@ export const configs = { [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`], [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`], } as PublicNodeUrlsByNetworkId, - SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'], - SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [ - 'TKN0', - 'TKN1', - 'TKN2', - 'TKN3', - 'TKN4', - 'TKN5', - 'TKN6', - 'TKN7', - 'TKN8', - 'TKN9', - 'TKN10', - 'TKN11', - 'TKN12', - 'TKN13', - 'TKN14', - 'TKN15', - 'TKN16', - 'TKN17', - 'TKN18', - 'TKN19', - ], + SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['ZRX', 'MKR', 'MLN', 'GNT', 'DGD', 'REP'], + SYMBOLS_OF_MINTABLE_ROPSTEN_TOKENS: ['ZRX', 'MKR', 'MLN', 'GNT', 'DGD', 'REP'], }; diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 005d17823..0a8a86c50 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -1,4 +1,9 @@ -import { BigNumber } from '@0xproject/utils'; +import { ALink } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Key, WebsitePaths } from 'ts/types'; + +const URL_FORUM = 'https://forum.0xproject.com'; +const URL_ZEROEX_CHAT = 'https://chat.0xproject.com'; export const constants = { DECIMAL_PLACES_ETH: 18, @@ -24,13 +29,14 @@ export const constants = { NETWORK_ID_MAINNET: 1, NETWORK_ID_KOVAN: 42, NETWORK_ID_TESTRPC: 50, + NETWORK_ID_ROPSTEN: 3, NULL_ADDRESS: '0x0000000000000000000000000000000000000000', PROVIDER_NAME_LEDGER: 'Ledger', PROVIDER_NAME_METAMASK: 'MetaMask', PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer', PROVIDER_NAME_MIST: 'Mist', PROVIDER_NAME_CIPHER: 'Cipher Browser', - PROVIDER_NAME_TOSHI: 'Toshi', + PROVIDER_NAME_COINBASE_WALLET: 'Coinbase Wallet', PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: '32c39bfa4bb6440faedc1612a9c13d28', @@ -73,20 +79,22 @@ export const constants = { URL_TESTNET_FAUCET: 'https://faucet.0xproject.com', URL_GITHUB_ORG: 'https://github.com/0xProject', URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', + URL_FORUM, URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', - URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8', - URL_TOSHI_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en_US', + URL_COINBASE_WALLET_IOS_APP_STORE: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8', + URL_COINBASE_WALLET_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en', URL_METAMASK_HOMEPAGE: 'https://metamask.io/', URL_METAMASK_OPERA_STORE: 'https://addons.opera.com/en/extensions/details/metamask/', 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_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_TWITTER: 'https://twitter.com/0xproject', URL_WETH_IO: 'https://weth.io/', - URL_ZEROEX_CHAT: 'https://chat.0xproject.com', + URL_ZEROEX_CHAT, 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', @@ -94,4 +102,24 @@ export const constants = { URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', + DEVELOPER_TOPBAR_LINKS: [ + { + title: Key.Home, + to: WebsitePaths.Home, + }, + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Forum, + to: URL_FORUM, + shouldOpenInNewTab: true, + }, + { + title: Key.LiveChat, + to: URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, + }, + ] as ALink[], }; diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts index b9084bba7..e0b883ace 100644 --- a/packages/website/ts/utils/doc_utils.ts +++ b/packages/website/ts/utils/doc_utils.ts @@ -1,5 +1,5 @@ -import { DoxityDocObj, TypeDocNode } from '@0xproject/react-docs'; -import { fetchAsync, logUtils } from '@0xproject/utils'; +import { DocAgnosticFormat, GeneratedDocJson } from '@0x/react-docs'; +import { fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import { S3FileObject, VersionToFilePath } from 'ts/types'; import convert = require('xml-js'); @@ -70,7 +70,7 @@ export const docUtils = { }); return versionFilePaths; }, - async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise<TypeDocNode | DoxityDocObj> { + async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise<GeneratedDocJson | DocAgnosticFormat> { const endpoint = `${s3DocJsonRoot}/${filePath}`; const response = await fetchAsync(endpoint); if (response.status !== 200) { diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index 6008fffed..6fc1216c3 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -1,4 +1,5 @@ -import { logUtils } from '@0xproject/utils'; +import { logUtils } from '@0x/utils'; +import Rollbar = require('rollbar'); import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -36,8 +37,8 @@ const rollbarConfig = { 'SecurityError (DOM Exception 18)', ], }; -import Rollbar = require('../../public/js/rollbar.umd.min.js'); -const rollbar = Rollbar.init(rollbarConfig); + +const rollbar = new Rollbar(rollbarConfig); export const errorReporter = { report(err: Error): void { diff --git a/packages/website/ts/utils/fake_token_registry.ts b/packages/website/ts/utils/fake_token_registry.ts new file mode 100644 index 000000000..607dd2553 --- /dev/null +++ b/packages/website/ts/utils/fake_token_registry.ts @@ -0,0 +1,879 @@ +export interface FakeTokenRegistryEntry { + address: string; + name: string; + symbol: string; + decimals: number; +} + +export const fakeTokenRegistry: { [networkId: string]: FakeTokenRegistryEntry[] } = { + '1': [ + { + address: '0xe41d2489571d322189246dafa5ebde1f4699f498', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0x4156d3342d5c385a87d264f90653733592000581', + name: 'Salt', + symbol: 'SALT', + decimals: 8, + }, + { + address: '0x05f4a42e251f2d52b8ed15e9fedaacfcef1fad27', + name: 'Zilliqa', + symbol: 'ZIL', + decimals: 12, + }, + { + address: '0xe0b7927c4af23765cb51314a0e0521a9645f0e2a', + name: 'Digix DAO Token', + symbol: 'DGD', + decimals: 9, + }, + { + address: '0xfa05a73ffe78ef8f1a739473e462c54bae6567d9', + name: 'Lunyr', + symbol: 'LUN', + decimals: 18, + }, + { + address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', + name: 'Wrapped Ether', + symbol: 'WETH', + decimals: 18, + }, + { + address: '0xbeb9ef514a379b997e0798fdcc901ee474b6d9a1', + name: 'Melon Token', + symbol: 'MLN', + decimals: 18, + }, + { + address: '0x9a642d6b3368ddc662ca244badf32cda716005bc', + name: 'Qtum', + symbol: 'QTUM', + decimals: 18, + }, + { + address: '0xd26114cd6ee289accf82350c8d8487fedb8a0c07', + name: 'OmiseGO', + symbol: 'OMG', + decimals: 18, + }, + { + address: '0xb97048628db6b661d4c2aa833e95dbe1a905b280', + name: 'TenXPay', + symbol: 'PAY', + decimals: 18, + }, + { + address: '0x86fa049857e0209aa7d9e616f7eb3b3b78ecfdb0', + name: 'Eos', + symbol: 'EOS', + decimals: 18, + }, + { + address: '0x888666ca69e0f178ded6d75b5726cee99a87d698', + name: 'Iconomi', + symbol: 'ICN', + decimals: 18, + }, + { + address: '0x744d70fdbe2ba4cf95131626614a1763df805b9e', + name: 'StatusNetwork', + symbol: 'SNT', + decimals: 18, + }, + { + address: '0x6810e776880c02933d47db1b9fc05908e5386b96', + name: 'Gnosis', + symbol: 'GNO', + decimals: 18, + }, + { + address: '0x0d8775f648430679a709e98d2b0cb6250d2887ef', + name: 'Basic Attention Token', + symbol: 'BAT', + decimals: 18, + }, + { + address: '0xb64ef51c888972c908cfacf59b47c1afbc0ab8ac', + name: 'Storj', + symbol: 'STORJ', + decimals: 8, + }, + { + address: '0x1f573d6fb3f13d689ff844b4ce37794d79a7ff1c', + name: 'Bancor', + symbol: 'BNT', + decimals: 18, + }, + { + address: '0x960b236a07cf122663c4303350609a66a7b288c0', + name: 'Aragon', + symbol: 'ANT', + decimals: 18, + }, + { + address: '0x0abdace70d3790235af448c88547603b945604ea', + name: 'district0x', + symbol: 'DNT', + decimals: 18, + }, + { + address: '0xaec2e87e0a235266d9c5adc9deb4b2e29b54d009', + name: 'SingularDTV', + symbol: 'SNGLS', + decimals: 0, + }, + { + address: '0x419d0d8bdd9af5e606ae2232ed285aff190e711b', + name: 'FunFair', + symbol: 'FUN', + decimals: 8, + }, + { + address: '0xaf30d2a7e90d7dc361c8c4585e9bb7d2f6f15bc7', + name: 'FirstBlood', + symbol: '1ST', + decimals: 18, + }, + { + address: '0x08711d3b02c8758f2fb3ab4e80228418a7f8e39c', + name: 'Edgeless', + symbol: 'EDG', + decimals: 0, + }, + { + address: '0x9992ec3cf6a55b00978cddf2b27bc6882d88d1ec', + name: 'Polymath', + symbol: 'POLY', + decimals: 18, + }, + { + address: '0x607f4c5bb672230e8672085532f7e901544a7375', + name: 'iExec', + symbol: 'RLC', + decimals: 9, + }, + { + address: '0x667088b212ce3d06a1b553a7221e1fd19000d9af', + name: 'Wings', + symbol: 'WINGS', + decimals: 18, + }, + { + address: '0x41e5560054824ea6b0732e656e3ad64e20e94e45', + name: 'Civic', + symbol: 'CVC', + decimals: 8, + }, + { + address: '0xb63b606ac810a52cca15e44bb630fd42d8d1d83d', + name: 'Monaco', + symbol: 'MCO', + decimals: 8, + }, + { + address: '0xf433089366899d83a9f26a773d59ec7ecf30355e', + name: 'Metal', + symbol: 'MTL', + decimals: 8, + }, + { + address: '0x12fef5e57bf45873cd9b62e9dbd7bfb99e32d73e', + name: 'Cofoundit', + symbol: 'CFI', + decimals: 18, + }, + { + address: '0xaaaf91d9b90df800df4f55c205fd6989c977e73a', + name: 'Monolith TKN', + symbol: 'TKN', + decimals: 8, + }, + { + address: '0xe7775a6e9bcf904eb39da2b68c5efb4f9360e08c', + name: 'Token-as-a-Service', + symbol: 'TAAS', + decimals: 6, + }, + { + address: '0x2e071d2966aa7d8decb1005885ba1977d6038a65', + name: 'DICE', + symbol: 'ROL', + decimals: 16, + }, + { + address: '0xcb94be6f13a1182e4a4b6140cb7bf2025d28e41b', + name: 'Trustcoin', + symbol: 'TRST', + decimals: 6, + }, + { + address: '0x1776e1f26f98b1a5df9cd347953a26dd3cb46671', + name: 'Numeraire', + symbol: 'NMR', + decimals: 18, + }, + { + address: '0x7c5a0ce9267ed19b22f8cae653f198e3e8daf098', + name: 'Santiment Network Token', + symbol: 'SAN', + decimals: 18, + }, + { + address: '0xdd974d5c2e2928dea5f71b9825b8b646686bd200', + name: 'Kyber Network Crystal', + symbol: 'KNC', + decimals: 18, + }, + { + address: '0xb7cb1c96db6b22b0d3d9536e0108d062bd488f74', + name: 'Walton', + symbol: 'WTC', + decimals: 18, + }, + { + address: '0xd0d6d6c5fe4a677d343cc433536bb717bae167dd', + name: 'adToken', + symbol: 'ADT', + decimals: 9, + }, + { + address: '0x42d6622dece394b54999fbd73d108123806f6a18', + name: 'SpankChain', + symbol: 'SPANK', + decimals: 18, + }, + { + address: '0x701c244b988a513c945973defa05de933b23fe1d', + name: 'openANX', + symbol: 'OAX', + decimals: 18, + }, + { + address: '0x514910771af9ca656af840dff83e8264ecf986ca', + name: 'ChainLink', + symbol: 'LINK', + decimals: 18, + }, + { + address: '0x8f8221afbb33998d8584a2b05749ba73c37a938a', + name: 'Request Network', + symbol: 'REQ', + decimals: 18, + }, + { + address: '0x27054b13b1b798b345b591a4d22e6562d47ea75a', + name: 'AirSwap', + symbol: 'AST', + decimals: 4, + }, + { + address: '0xf0ee6b27b759c9893ce4f094b49ad28fd15a23e4', + name: 'Enigma', + symbol: 'ENG', + decimals: 8, + }, + { + address: '0x818fc6c2ec5986bc6e2cbf00939d90556ab12ce5', + name: 'Kin', + symbol: 'KIN', + decimals: 18, + }, + { + address: '0x27dce1ec4d3f72c3e457cc50354f1f975ddef488', + name: 'AirToken', + symbol: 'AIR', + decimals: 8, + }, + { + address: '0x12480e24eb5bec1a9d4369cab6a80cad3c0a377a', + name: 'Substratum', + symbol: 'SUB', + decimals: 2, + }, + { + address: '0x0e8d6b471e332f140e7d9dbb99e5e3822f728da6', + name: 'ABYSS', + symbol: 'ABYSS', + decimals: 18, + }, + { + address: '0x4ceda7906a5ed2179785cd3a40a69ee8bc99c466', + name: 'AION', + symbol: 'AION', + decimals: 8, + }, + { + address: '0xd8912c10681d8b21fd3742244f44658dba12264e', + name: 'Pluton', + symbol: 'PLU', + decimals: 18, + }, + { + address: '0x1a7a8bd9106f2b8d977e08582dc7d24c723ab0db', + name: 'AppCoins', + symbol: 'APPC', + decimals: 18, + }, + { + address: '0xba5f11b16b155792cf3b2e6880e8706859a8aeb6', + name: 'Aeron', + symbol: 'ARN', + decimals: 8, + }, + { + address: '0xfec0cf7fe078a500abf15f1284958f22049c2c7e', + name: 'Maecenas ART Token', + symbol: 'ART', + decimals: 18, + }, + { + address: '0x0f5d2fb29fb7d3cfee444a200298f468908cc942', + name: 'Decentraland', + symbol: 'MANA', + decimals: 18, + }, + { + address: '0x1c4481750daa5ff521a2a7490d9981ed46465dbd', + name: 'BlockMason Credit Protocol Token', + symbol: 'BCPT', + decimals: 18, + }, + { + address: '0x55296f69f40ea6d20e478533c15a6b08b654e758', + name: 'XY Oracle', + symbol: 'XYO', + decimals: 18, + }, + { + address: '0xd7732e3783b0047aa251928960063f863ad022d8', + name: 'BrahmaOS', + symbol: 'BRM', + decimals: 18, + }, + { + address: '0x7d4b8cce0591c9044a22ee543533b72e976e36c3', + name: 'Change Coin', + symbol: 'CAG', + decimals: 18, + }, + { + address: '0x1d462414fe14cf489c7a21cac78509f4bf8cd7c0', + name: 'CanYaCoin', + symbol: 'CAN', + decimals: 6, + }, + { + address: '0x1234567461d3f8db7496581774bd869c83d51c93', + name: 'BitClave', + symbol: 'CAT', + decimals: 18, + }, + { + address: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', + name: 'Dai Stablecoin v1.0', + symbol: 'DAI', + decimals: 18, + }, + { + address: '0x0cf0ee63788a0849fe5297f3407f701e122cc023', + name: 'Streamr DATAcoin', + symbol: 'DATA', + decimals: 18, + }, + { + address: '0x151202c9c18e495656f372281f493eb7698961d5', + name: 'DEBITUM', + symbol: 'DEB', + decimals: 18, + }, + { + address: '0xba2184520a1cc49a6159c57e61e1844e085615b6', + name: 'HelloGold Token', + symbol: 'HGT', + decimals: 8, + }, + { + address: '0x13f11c9905a08ca76e3e853be63d4f0944326c72', + name: 'Divi Exchange Token', + symbol: 'DIVX', + decimals: 18, + }, + { + address: '0x5b26c5d0772e5bbac8b3182ae9a13f9bb2d03765', + name: 'EDU Token', + symbol: 'EDU', + decimals: 8, + }, + { + address: '0xd49ff13661451313ca1553fd6954bd1d9b6e02b9', + name: 'ElectrifyAsia', + symbol: 'ELEC', + decimals: 18, + }, + { + address: '0x95daaab98046846bf4b2853e23cba236fa394a31', + name: 'EtheremonToken', + symbol: 'EMONT', + decimals: 8, + }, + { + address: '0x5bc7e5f0ab8b2e10d2d0a3f21739fce62459aef3', + name: 'Hut34 Entropy Token', + symbol: 'ENTR', + decimals: 18, + }, + { + address: '0x923108a439c4e8c2315c4f6521e5ce95b44e9b4c', + name: 'Devery.io', + symbol: 'EVE', + decimals: 18, + }, + { + address: '0xf8e386eda857484f5a12e4b5daa9984e06e73705', + name: 'Indorse Token', + symbol: 'IND', + decimals: 18, + }, + { + address: '0x4f4f0db4de903b88f2b1a2847971e231d54f8fd3', + name: 'Geens Platform Token', + symbol: 'GEE', + decimals: 8, + }, + { + address: '0x543ff227f64aa17ea132bf9886cab5db55dcaddf', + name: 'DAOstack', + symbol: 'GEN', + decimals: 18, + }, + { + address: '0x8a854288a5976036a725879164ca3e91d30c6a1b', + name: 'Guaranteed Entrance Token', + symbol: 'GET', + decimals: 18, + }, + { + address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2', + name: 'Maker', + symbol: 'MKR', + decimals: 18, + }, + { + address: '0x9af839687f6c94542ac5ece2e317daae355493a1', + name: 'Hydro Protocol Token', + symbol: 'HOT', + decimals: 18, + }, + { + address: '0x0d262e5dc4a06a0f1c90ce79c7a60c09dfc884e4', + name: 'JET8 Token', + symbol: 'J8T', + decimals: 8, + }, + { + address: '0x8727c112c712c4a03371ac87a74dd6ab104af768', + name: 'Jetcoin Institute Token', + symbol: 'JET', + decimals: 18, + }, + { + address: '0xa4e8c3ec456107ea67d3075bf9e3df3a75823db0', + name: 'Loom Network Token', + symbol: 'LOOM', + decimals: 18, + }, + { + address: '0x957c30ab0426e0c93cd8241e2c60392d08c6ac8e', + name: 'Modum Token', + symbol: 'MOD', + decimals: 0, + }, + { + address: '0x2ef27bf41236bd859a95209e17a43fbd26851f92', + name: 'MORPH', + symbol: 'MORPH', + decimals: 4, + }, + { + address: '0x263c618480dbe35c300d8d5ecda19bbb986acaed', + name: 'MOT', + symbol: 'MOT', + decimals: 18, + }, + { + address: '0xffe02ee4c69edf1b340fcad64fbd6b37a7b9e265', + name: 'NANJCOIN', + symbol: 'NANJ', + decimals: 8, + }, + { + address: '0xc15a399c4ea7815fe36857c9e290ee452a5d6b21', + name: 'BoatPilot Token', + symbol: 'NAVI', + decimals: 18, + }, + { + address: '0x9e46a38f5daabe8683e10793b06749eef7d733d1', + name: 'PolySwarm Nectar', + symbol: 'NCT', + decimals: 18, + }, + { + address: '0xa54ddc7b3cce7fc8b1e3fa0256d0db80d2c10970', + name: 'NEVERDIE Coin', + symbol: 'NDC', + decimals: 18, + }, + { + address: '0xb62132e35a6c13ee1ee0f84dc5d40bad8d815206', + name: 'Nexo', + symbol: 'NEXO', + decimals: 18, + }, + { + address: '0x0235fe624e044a05eed7a43e16e3083bc8a4287a', + name: 'Original Crypto Coin', + symbol: 'OCC', + decimals: 18, + }, + { + address: '0xb5dbc6d3cf380079df3b27135664b6bcf45d1869', + name: 'Omix', + symbol: 'OMX', + decimals: 8, + }, + { + address: '0xfedae5642668f8636a11987ff386bfd215f942ee', + name: 'PolicyPal Network Token', + symbol: 'PAL', + decimals: 18, + }, + { + address: '0x2604fa406be957e542beb89e6754fcde6815e83f', + name: 'Playkey Token', + symbol: 'PKT', + decimals: 18, + }, + { + address: '0xe477292f1b3268687a29376116b0ed27a9c76170', + name: 'Herocoin', + symbol: 'PLAY', + decimals: 18, + }, + { + address: '0x1985365e9f78359a9b6ad760e32412f4a445e862', + name: 'Augur', + symbol: 'REP', + decimals: 18, + }, + { + address: '0x408e41876cccdc0f92210600ef50372656052a38', + name: 'Republic Protocol', + symbol: 'REN', + decimals: 18, + }, + { + address: '0xd0929d411954c47438dc1d871dd6081f5c5e149c', + name: 'Refereum', + symbol: 'RFR', + decimals: 4, + }, + { + address: '0x3d1ba9be9f66b8ee101911bc36d3fb562eac2244', + name: 'Rivetz', + symbol: 'RVT', + decimals: 18, + }, + { + address: '0x6888a16ea9792c15a4dcf2f6c623d055c8ede792', + name: 'Spectiv Signal Token', + symbol: 'SIG', + decimals: 18, + }, + { + address: '0x20f7a3ddf244dc9299975b4da1c39f8d5d75f05a', + name: 'Sapien Network Token', + symbol: 'SPN', + decimals: 6, + }, + { + address: '0xbbff862d906e348e9946bfb2132ecb157da3d4b4', + name: 'Sharder', + symbol: 'SS', + decimals: 18, + }, + { + address: '0x12b306fa98f4cbb8d4457fdff3a0a0a56f07ccdf', + name: 'Spectre.ai D-Token', + symbol: 'SXDT', + decimals: 18, + }, + { + address: '0xff3519eeeea3e76f1f699ccce5e23ee0bdda41ac', + name: 'Blockchain Capital', + symbol: 'BCAP', + decimals: 0, + }, + { + address: '0xced1a8529125d1bd06b54a7b01210df357d00885', + name: 'Too Real Badge', + symbol: 'TRL', + decimals: 0, + }, + { + address: '0xc86d054809623432210c107af2e3f619dcfbf652', + name: 'SENTINEL PROTOCOL', + symbol: 'UPP', + decimals: 18, + }, + { + address: '0x27f610bf36eca0939093343ac28b1534a721dbb4', + name: 'Wand Token', + symbol: 'WAND', + decimals: 18, + }, + { + address: '0x056017c55ae7ae32d12aef7c679df83a85ca75ff', + name: 'WyvernToken', + symbol: 'WYV', + decimals: 18, + }, + { + address: '0x5ca9a71b1d01849c0a95490cc00559717fcf0d1d', + name: 'Aeternity', + symbol: 'AE', + decimals: 18, + }, + { + address: '0xbc86727e770de68b1060c91f6bb6945c73e10388', + name: 'Ink Protocol', + symbol: 'XNK', + decimals: 18, + }, + { + address: '0x0f513ffb4926ff82d7f60a05069047aca295c413', + name: 'CrowdstartCoin', + symbol: 'XSC', + decimals: 18, + }, + { + address: '0xb9e7f8568e08d5659f5d29c4997173d84cdf2607', + name: 'Swarm City Token', + symbol: 'SWT', + decimals: 18, + }, + { + address: '0x6531f133e6deebe7f2dce5a0441aa7ef330b4e53', + name: 'Chronobank TIME', + symbol: 'TIME', + decimals: 8, + }, + { + address: '0xf230b790e05390fc8295f4d3f60332c93bed42e2', + name: 'Tronix', + symbol: 'TRX', + decimals: 6, + }, + { + address: '0x5c543e7ae0a1104f78406c340e9c64fd9fce5170', + name: 'vSlice', + symbol: 'VSL', + decimals: 0, + }, + { + address: '0x4df812f6064def1e5e029f1ca858777cc98d2d81', + name: 'Xaurum', + symbol: 'XAUR', + decimals: 8, + }, + ], + '42': [ + { + address: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0x323b5d4c32345ced77393b3530b1eed0f346429d', + name: 'Melon Token', + symbol: 'MLN', + decimals: 18, + }, + { + address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba', + name: 'Maker DAO', + symbol: 'MKR', + decimals: 18, + }, + { + address: '0xeee3870657e4716670f185df08652dd848fe8f7e', + name: 'Digix DAO Token', + symbol: 'DGD', + decimals: 18, + }, + { + address: '0xb18845c260f680d5b9d84649638813e342e4f8c9', + name: 'Augur Reputation Token', + symbol: 'REP', + decimals: 18, + }, + { + address: '0xef7fff64389b814a946f3e92105513705ca6b990', + name: 'Golem Network Token', + symbol: 'GNT', + decimals: 18, + }, + { + address: '0xd0a1e359811322d97991e03f863a0c30c2cf029c', + name: 'Wrapped Ether', + symbol: 'WETH', + decimals: 18, + }, + ], + '3': [ + { + address: '0xdf18648f5b4357d6cc1e27f7699af4f77ff44558', + name: 'token0', + symbol: 'TKN0', + decimals: 0, + }, + { + address: '0xd7cdcde4302a60c4d74a11eee21fbf455f476021', + name: 'token1', + symbol: 'TKN1', + decimals: 1, + }, + { + address: '0xf080f68c2113d40ff6a8528863f431908680900a', + name: 'token2', + symbol: 'TKN2', + decimals: 2, + }, + { + address: '0xe982b5c62434c98e27d15fed40447dda6b75c4eb', + name: 'token3', + symbol: 'TKN3', + decimals: 3, + }, + { + address: '0x2427d136751c1ca70480d3b2091261d639090a50', + name: 'token4', + symbol: 'TKN4', + decimals: 4, + }, + { + address: '0x7d3eca8ec55bb32bd0056edb9485b07a53d3fbfd', + name: 'token5', + symbol: 'TKN5', + decimals: 5, + }, + { + address: '0xff3c22e0a9014e9b4b1cf7a54bf39ab3107f6123', + name: 'token6', + symbol: 'TKN6', + decimals: 6, + }, + { + address: '0xdec283d9e188397c841ab59d9d9160fd47bc56f8', + name: 'token7', + symbol: 'TKN7', + decimals: 7, + }, + { + address: '0xedf5fd2f60d8fefbfa8011f2769b39657c54c3fd', + name: 'token8', + symbol: 'TKN8', + decimals: 8, + }, + { + address: '0xcd59fe7fa1a1a0ff536966a599b631d9cd5f2914', + name: 'token9', + symbol: 'TKN9', + decimals: 9, + }, + { + address: '0xaece1ee1813d56a5897f19ad50164565203b459f', + name: 'token10', + symbol: 'TKN10', + decimals: 10, + }, + { + address: '0xaab3f0619e529b1f1823be291daa7fcd38a15927', + name: 'token11', + symbol: 'TKN11', + decimals: 11, + }, + { + address: '0x2c46ad0b19cb1c1f3e51ae90d80654a227b08d30', + name: 'token12', + symbol: 'TKN12', + decimals: 12, + }, + { + address: '0x68977f3286a503f2b3930506f1b3a17dafbd9524', + name: 'token13', + symbol: 'TKN13', + decimals: 13, + }, + { + address: '0xe5c400b9ee56b823c6193a662041389624609db6', + name: 'token14', + symbol: 'TKN14', + decimals: 14, + }, + { + address: '0xf16ea9b23ddbeb6b16d253edf6b595da4009bb8b', + name: 'token16', + symbol: 'TKN16', + decimals: 16, + }, + { + address: '0x739a83860971e900c4bbbb92be6cfb9d459ef94a', + name: 'token15', + symbol: 'TKN15', + decimals: 15, + }, + { + address: '0x5eba21470cf683fe91b594afe7106039e38f3312', + name: 'token17', + symbol: 'TKN17', + decimals: 17, + }, + { + address: '0xc0ddd5df448907bb3f50350f3fe7a1da3fb2a2ee', + name: 'token18', + symbol: 'TKN18', + decimals: 18, + }, + { + address: '0x30fa25e53f8031014166fbd5e4bbeac0cd25df74', + name: 'token19', + symbol: 'TKN19', + decimals: 19, + }, + { + address: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0xc778417e063141139fce010982780140aa0cd5ab', + name: 'Ether Token', + symbol: 'WETH', + decimals: 18, + }, + { + address: '0x14823db576c11e4a54ca9e01ca0b28b18d3d1187', + name: 'b0x Protocol Token', + symbol: 'B0X', + decimals: 18, + }, + ], +}; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index e9a88b6b3..9afc5904d 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -1,4 +1,4 @@ -import { fetchAsync, logUtils } from '@0xproject/utils'; +import { fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as queryString from 'query-string'; diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts index f677b4625..3f32254de 100644 --- a/packages/website/ts/utils/mui_theme.ts +++ b/packages/website/ts/utils/mui_theme.ts @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { getMuiTheme } from 'material-ui/styles'; export const muiTheme = getMuiTheme({ diff --git a/packages/website/ts/utils/order_parser.ts b/packages/website/ts/utils/order_parser.ts index be08da80e..8938fbc53 100644 --- a/packages/website/ts/utils/order_parser.ts +++ b/packages/website/ts/utils/order_parser.ts @@ -1,12 +1,13 @@ -import { logUtils } from '@0xproject/utils'; +import { orderParsingUtils } from '@0x/order-utils'; +import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; -import { Order } from 'ts/types'; +import { PortalOrder } from 'ts/types'; export const orderParser = { - parse(queryString: string): Order | undefined { + parseQueryString(queryString: string): PortalOrder | undefined { if (queryString.length === 0) { return undefined; } @@ -28,6 +29,22 @@ export const orderParser = { logUtils.log(`Invalid shared order: ${validationResult.errors}`); return undefined; } - return order; + const signedOrder = _.get(order, 'signedOrder'); + const convertedSignedOrder = orderParsingUtils.convertOrderStringFieldsToBigNumber(signedOrder); + const result = { + ...order, + signedOrder: convertedSignedOrder, + }; + return result; + }, + parseJsonString(orderJson: string): PortalOrder { + const order = JSON.parse(orderJson); + const signedOrder = _.get(order, 'signedOrder'); + const convertedSignedOrder = orderParsingUtils.convertOrderStringFieldsToBigNumber(signedOrder); + const result = { + ...order, + signedOrder: convertedSignedOrder, + }; + return result; }, }; diff --git a/packages/website/ts/utils/token_address_overrides.ts b/packages/website/ts/utils/token_address_overrides.ts new file mode 100644 index 000000000..5e7275964 --- /dev/null +++ b/packages/website/ts/utils/token_address_overrides.ts @@ -0,0 +1,24 @@ +import { ObjectMap } from '@0x/types'; +import { constants } from 'ts/utils/constants'; + +// Map of networkId -> tokenSymbol -> tokenAddress +export type TokenOverrides = ObjectMap<ObjectMap<string>>; + +export const tokenAddressOverrides: TokenOverrides = { + [constants.NETWORK_ID_KOVAN]: { + ZRX: '0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa', + REP: '0x8cb3971b8eb709c14616bd556ff6683019e90d9c', + DGD: '0xa4f468c9c692eb6b4b8b06270dae7a2cfeedcde9', + GNT: '0x31fb614e223706f15d0d3c5f4b08bdf0d5c78623', + MKR: '0x7b6b10caa9e8e9552ba72638ea5b47c25afea1f3', + MLN: '0x17e394d1df6ce29d042195ea38411a98ff3ead94', + }, + [constants.NETWORK_ID_ROPSTEN]: { + ZRX: '0xff67881f8d12f372d91baae9752eb3631ff0ed00', + REP: '0xb0b443fe0e8a04c4c85e8fda9c5c1ccc057d6653', + DGD: '0xc4895a5aafa2708d6bc1294e20ec839aad156b1d', + GNT: '0x7f8acc55a359ca4517c30510566ac35b800f7cac', + MKR: '0x06732516acd125b6e83c127752ed5f027e1b276e', + MLN: '0x823ebe83d39115536274a8617e00a1ff3544fd63', + }, +}; diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts index 1ee1a59c5..5595e6e0f 100644 --- a/packages/website/ts/utils/translate.ts +++ b/packages/website/ts/utils/translate.ts @@ -80,7 +80,12 @@ export class Translate { case Deco.CapWords: const words = text.split(' '); - const capitalizedWords = _.map(words, w => this._capitalize(w)); + const capitalizedWords = _.map(words, (w: string, i: number) => { + if (w.length === 1) { + return w; + } + return this._capitalize(w); + }); text = capitalizedWords.join(' '); break; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 39bbd404c..87aa48018 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,22 +1,23 @@ -import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers'; -import { OrderError } from '@0xproject/order-utils'; -import { constants as sharedConstants, Networks } from '@0xproject/react-shared'; -import { ECSignature, Provider } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { ContractWrappersError } from '@0x/contract-wrappers'; +import { assetDataUtils, OrderError } from '@0x/order-utils'; +import { constants as sharedConstants, Networks } from '@0x/react-shared'; +import { ExchangeContractErrs } from '@0x/types'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as bowser from 'bowser'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; import * as moment from 'moment'; import * as numeral from 'numeral'; +import { Provider } from 'ethereum-types'; import { AccountState, BlockchainCallErrs, BrowserType, Environments, OperatingSystemType, - Order, + PortalOrder, Providers, ProviderType, ScreenWidths, @@ -64,35 +65,36 @@ export const utils = { return formattedDate; }, generateOrder( - exchangeContractAddress: string, + exchangeAddress: string, sideToAssetToken: SideToAssetToken, - expirationUnixTimestampSec: BigNumber, + expirationTimeSeconds: BigNumber, orderTakerAddress: string, orderMakerAddress: string, makerFee: BigNumber, takerFee: BigNumber, - feeRecipient: string, - ecSignature: ECSignature, + feeRecipientAddress: string, + signature: string, tokenByAddress: TokenByAddress, orderSalt: BigNumber, - ): Order { + ): PortalOrder { const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address]; const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address]; const order = { signedOrder: { - maker: orderMakerAddress, - taker: orderTakerAddress, - makerFee: makerFee.toString(), - takerFee: takerFee.toString(), - makerTokenAmount: sideToAssetToken[Side.Deposit].amount.toString(), - takerTokenAmount: sideToAssetToken[Side.Receive].amount.toString(), - makerTokenAddress: makerToken.address, - takerTokenAddress: takerToken.address, - expirationUnixTimestampSec: expirationUnixTimestampSec.toString(), - feeRecipient, - salt: orderSalt.toString(), - ecSignature, - exchangeContractAddress, + senderAddress: constants.NULL_ADDRESS, + makerAddress: orderMakerAddress, + takerAddress: orderTakerAddress, + makerFee, + takerFee, + makerAssetAmount: sideToAssetToken[Side.Deposit].amount, + takerAssetAmount: sideToAssetToken[Side.Receive].amount, + makerAssetData: assetDataUtils.encodeERC20AssetData(makerToken.address), + takerAssetData: assetDataUtils.encodeERC20AssetData(takerToken.address), + expirationTimeSeconds, + feeRecipientAddress, + salt: orderSalt, + signature, + exchangeAddress, }, metadata: { makerToken: { @@ -229,13 +231,6 @@ export const utils = { }, zeroExErrToHumanReadableErrMsg(error: ContractWrappersError | ExchangeContractErrs, takerAddress: string): string { const ContractWrappersErrorToHumanReadableError: { [error: string]: string } = { - [ContractWrappersError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist', - [ContractWrappersError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist', - [ContractWrappersError.TokenTransferProxyContractDoesNotExist]: - 'TokenTransferProxy contract does not exist', - [ContractWrappersError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist', - [ContractWrappersError.TokenContractDoesNotExist]: 'Token contract does not exist', - [ContractWrappersError.ZRXContractDoesNotExist]: 'ZRX contract does not exist', [BlockchainCallErrs.UserHasNoAssociatedAddresses]: 'User has no addresses available', [OrderError.InvalidSignature]: 'Order signature is not valid', [ContractWrappersError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network', @@ -247,12 +242,9 @@ export const utils = { } = { [ExchangeContractErrs.OrderFillExpired]: 'This order has expired', [ExchangeContractErrs.OrderCancelExpired]: 'This order has expired', - [ExchangeContractErrs.OrderCancelAmountZero]: "Order cancel amount can't be 0", - [ExchangeContractErrs.OrderAlreadyCancelledOrFilled]: - 'This order has already been completely filled or cancelled', + [ExchangeContractErrs.OrderCancelled]: 'This order has been cancelled', [ExchangeContractErrs.OrderFillAmountZero]: "Order fill amount can't be 0", - [ExchangeContractErrs.OrderRemainingFillAmountZero]: - 'This order has already been completely filled or cancelled', + [ExchangeContractErrs.OrderRemainingFillAmountZero]: 'This order has already been completely filled', [ExchangeContractErrs.OrderFillRoundingError]: 'Rounding error will occur when filling this order. Please try filling a different amount.', [ExchangeContractErrs.InsufficientTakerBalance]: @@ -324,7 +316,7 @@ export const utils = { } else if ((provider as any).isMetaMask) { parsedProviderName = Providers.Metamask; } else if (!_.isUndefined(_.get(window, 'SOFA'))) { - parsedProviderName = Providers.Toshi; + parsedProviderName = Providers.CoinbaseWallet; } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { parsedProviderName = Providers.Cipher; } @@ -421,6 +413,10 @@ export const utils = { return BrowserType.Firefox; } else if (bowser.opera) { return BrowserType.Opera; + } else if (bowser.msedge) { + return BrowserType.Edge; + } else if (bowser.safari) { + return BrowserType.Safari; } else { return BrowserType.Other; } @@ -454,14 +450,14 @@ export const utils = { if (isOnMobile) { switch (operatingSystem) { case OperatingSystemType.Android: - downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE; + downloadLink = constants.URL_COINBASE_WALLET_ANDROID_APP_STORE; break; case OperatingSystemType.iOS: - downloadLink = constants.URL_TOSHI_IOS_APP_STORE; + downloadLink = constants.URL_COINBASE_WALLET_IOS_APP_STORE; break; default: - // Toshi is only supported on these mobile OSes - just default to iOS - downloadLink = constants.URL_TOSHI_IOS_APP_STORE; + // Coinbase wallet is only supported on these mobile OSes - just default to iOS + downloadLink = constants.URL_COINBASE_WALLET_IOS_APP_STORE; } } else { switch (browserType) { |