diff options
Diffstat (limited to 'packages/website/ts')
57 files changed, 743 insertions, 1379 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..c420bbf3a 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -1,15 +1,15 @@ +import { ZeroEx } from '0x.js'; 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 { assetDataUtils, orderHashUtils, signatureUtils, SignerType } from '@0xproject/order-utils'; import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; import { ledgerEthereumBrowserClientFactoryAsync, @@ -19,21 +19,16 @@ import { SignerSubprovider, Web3ProviderEngine, } from '@0xproject/subproviders'; -import { - BlockParam, - ECSignature, - LogWithDecodedArgs, - Order, - Provider, - SignedOrder, - TransactionReceiptWithDecodedLogs, -} from '@0xproject/types'; +import { SignedOrder, Token as ZeroExToken } from '@0xproject/types'; import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types'; import * as _ from 'lodash'; import * as moment from 'moment'; import * as React from 'react'; import contract = require('truffle-contract'); +import { tokenAddressOverrides } from 'ts/utils/token_address_overrides'; + import { BlockchainWatcher } from 'ts/blockchain_watcher'; import { AssetSendCompleted } from 'ts/components/flash_messages/asset_send_completed'; import { TransactionSubmitted } from 'ts/components/flash_messages/transaction_submitted'; @@ -48,7 +43,6 @@ import { InjectedProviderObservable, InjectedProviderUpdate, InjectedWeb3, - Order as PortalOrder, Providers, ProviderType, Side, @@ -65,9 +59,6 @@ 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, }; @@ -83,6 +74,7 @@ export class Blockchain { public networkId: number; public nodeVersion: string; private _contractWrappers: ContractWrappers; + private _zeroEx: ZeroEx; private readonly _dispatcher: Dispatcher; private _web3Wrapper?: Web3Wrapper; private _blockchainWatcher?: BlockchainWatcher; @@ -230,9 +222,15 @@ 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); + utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(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)) { @@ -266,7 +264,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 +305,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,66 +330,41 @@ 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 { @@ -408,16 +381,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 +422,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 +430,25 @@ 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 isLedgerSigner = !_.isUndefined(this._ledgerSubprovider); + const injectedProvider = Blockchain._getInjectedWeb3().currentProvider; + const isMetaMaskSigner = utils.getProviderType(injectedProvider) === Providers.Metamask; + let signerType = SignerType.Default; + if (isLedgerSigner) { + signerType = SignerType.Ledger; + } else if (isMetaMaskSigner) { + signerType = SignerType.Metamask; + } + const ecSignatureString = await signatureUtils.ecSignOrderHashAsync( + provider, + orderHash, + makerAddress, + signerType, + ); + this._dispatcher.updateSignature(ecSignatureString); + return ecSignatureString; } public async mintTestTokensAsync(token: Token): Promise<void> { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); @@ -540,8 +521,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]; @@ -653,8 +634,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 +679,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 +712,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 +726,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 +776,22 @@ 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(); + utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); + tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync(); + 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) => { @@ -877,6 +871,11 @@ export class Blockchain { } else { this._contractWrappers = new ContractWrappers(provider, { networkId }); } + if (!_.isUndefined(this._zeroEx)) { + this._zeroEx.setProvider(provider, networkId); + } else { + this._zeroEx = new ZeroEx(provider, { networkId }); + } if (!_.isUndefined(this._blockchainWatcher)) { this._blockchainWatcher.destroy(); } diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index c8e10303f..18c060991 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -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..f2cfb279a 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -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..fbc6c868b 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -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..ef295762b 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -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..2754b153f 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -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..afbb30b82 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -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/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 7da2e0870..3c3155349 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,6 +1,5 @@ -import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils'; +import { assetDataUtils, orderHashUtils } 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 * as accounting from 'accounting'; @@ -22,10 +21,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 +35,7 @@ interface FillOrderProps { networkId: number; userAddress: string; tokenByAddress: TokenByAddress; - initialOrder: Order; + initialOrder: PortalOrder; dispatcher: Dispatcher; lastForceTokenStateRefetch: number; isFullWidth?: boolean; @@ -49,7 +48,7 @@ interface FillOrderState { globalErrMsg: string; orderJSON: string; orderJSONErrMsg: string; - parsedOrder: Order; + parsedOrder: PortalOrder; didFillOrderSucceed: boolean; didCancelOrderSucceed: boolean; unavailableTakerAmount: BigNumber; @@ -191,16 +190,18 @@ 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), @@ -210,7 +211,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { 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 +223,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 +234,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> @@ -367,17 +368,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 +393,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 +414,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 +425,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 +467,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 +524,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 +533,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 +598,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 +608,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..1ecc426bd 100644 --- a/packages/website/ts/components/fill_order_json.tsx +++ b/packages/website/ts/components/fill_order_json.tsx @@ -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..4821aaabe 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -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/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..ec153c005 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,6 +1,6 @@ -import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils'; +import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0xproject/order-utils'; import { colors } from '@0xproject/react-shared'; -import { ECSignature, Order as ZeroExOrder } from '@0xproject/types'; +import { Order as ZeroExOrder } from '@0xproject/types'; import { BigNumber, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; @@ -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/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 8d9cdfc0b..5125ec4de 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 { assetDataUtils, orderHashUtils } from '@0xproject/order-utils'; import { Styles } from '@0xproject/react-shared'; import { Order } from '@0xproject/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..db093fb68 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -111,7 +111,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok <span> Insufficient allowance.{' '} <Link - to={`${WebsitePaths.Portal}/balances`} + to={`${WebsitePaths.Portal}/account`} style={{ cursor: 'pointer', color: colors.darkestGrey }} > Set allowance 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..1035d4ad9 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -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/order_json.tsx b/packages/website/ts/components/order_json.tsx index cf06f10c8..a2a53a523 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -1,4 +1,3 @@ -import { ECSignature } from '@0xproject/types'; import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; @@ -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/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ff11880e3..b42954f60 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -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 = @@ -545,7 +545,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { <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()} diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 4aea1bbbb..91dbeb27a 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -56,7 +56,11 @@ 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), + ); return ( <GridList cellHeight={CELL_HEIGHT} diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 969ef32ff..5965ad9bd 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -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/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 8f1137b44..c2d753e31 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -132,7 +132,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { 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, @@ -185,6 +185,13 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { isExternal={false} /> <TopBarMenuItem + 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}`} isPrimary={true} @@ -289,11 +296,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem> </Link> + <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none"> + <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem> + </Link> <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> <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)}> + <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}> {this.props.translate.get(Key.Faq, Deco.Cap)} </MenuItem> </Link> diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 2952c8859..75ba7bcff 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -96,4 +96,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/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 380fbc77d..0bb99b9d8 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -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/text.tsx b/packages/website/ts/components/ui/text.tsx index 734483564..cd8f290e3 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -20,6 +20,7 @@ export interface TextProps { onClick?: (event: React.MouseEvent<HTMLElement>) => void; hoverColor?: string; noWrap?: boolean; + display?: string; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( @@ -41,6 +42,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/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/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index 90137243c..a728abe2c 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index fd8599192..1e1735846 100644 --- a/packages/website/ts/containers/contract_wrappers_documentation.ts +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; @@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index e0bf9a83e..2b6d6e64d 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 92296dbab..bc9d6f524 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -1,4 +1,3 @@ -import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; import { connect } from 'react-redux'; @@ -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/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index 47ac35268..b54c30a1e 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index 2fa2a9d61..59a018847 100644 --- a/packages/website/ts/containers/order_watcher_documentation.ts +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 6747cdf4e..4d7ff2f55 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -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/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index 4f4479c83..8d69afe71 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -11,29 +11,28 @@ import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ const IntroMarkdownV1 = require('md/docs/smart_contracts/1.0.0/introduction'); +const IntroMarkdownV2 = require('md/docs/smart_contracts/2.0.0/introduction'); /* tslint:enable:no-var-requires */ const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SmartContracts, packageName: 'contracts', - type: SupportedDocJson.Doxity, + type: SupportedDocJson.SolDoc, displayName: '0x Smart Contracts', packageUrl: 'https://github.com/0xProject/contracts', markdownMenu: { introduction: [Sections.Introduction], - contracts: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], }, sectionNameToMarkdownByVersion: { '0.0.1': { [Sections.Introduction]: IntroMarkdownV1, }, + '2.0.0': { + [Sections.Introduction]: IntroMarkdownV2, + }, }, markdownSections: { Introduction: Sections.Introduction, - Exchange: Sections.Exchange, - TokenTransferProxy: Sections.TokenTransferProxy, - TokenRegistry: Sections.TokenRegistry, - ZRXToken: Sections.ZRXToken, }, contractsByVersionByNetworkId: { '1.0.0': { diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index 7cde68e5c..20f26ed1d 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index a457cbc1e..27efd641e 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 43f06b4ed..28b2e9508 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; @@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 13924fde8..dc9d23304 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; @@ -6,7 +6,6 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 367d3e064..2a3afd86c 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -1,4 +1,4 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; @@ -6,18 +6,21 @@ import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentatio import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; 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 IntroMarkdownV1 = require('md/docs/0xjs/1.0.1/introduction'); +const InstallationMarkdownV1 = 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 markdownSections = { @@ -42,17 +45,16 @@ const docsInfoConfig: DocsInfoConfig = { }, sectionNameToMarkdownByVersion: { '0.0.1': { + [markdownSections.introduction]: IntroMarkdownV0, + [markdownSections.installation]: InstallationMarkdownV0, + [markdownSections.versioning]: versioningMarkdownV0, + [markdownSections.async]: AsyncMarkdownV0, + [markdownSections.errors]: ErrorsMarkdownV0, + }, + '1.0.1': { [markdownSections.introduction]: IntroMarkdownV1, [markdownSections.installation]: InstallationMarkdownV1, - [markdownSections.async]: AsyncMarkdownV1, - [markdownSections.errors]: ErrorsMarkdownV1, [markdownSections.versioning]: versioningMarkdownV1, - }, - '1.0.0-rc.1': { - [markdownSections.introduction]: IntroMarkdownV2, - [markdownSections.versioning]: versioningMarkdownV2, - // These are the same as for V1 - [markdownSections.installation]: InstallationMarkdownV1, [markdownSections.async]: AsyncMarkdownV1, [markdownSections.errors]: ErrorsMarkdownV1, }, 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 e81b1bf07..c476f2358 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -3,7 +3,6 @@ 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'; @@ -18,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(); diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 519e4be5e..e097578bc 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -194,7 +194,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 +206,34 @@ 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 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/', + }, ]; -const advisors: ProfileInfo[] = [ +const advisors1: ProfileInfo[] = [ { name: 'Fred Ehrsam', description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.', @@ -232,6 +257,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 +268,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 +340,7 @@ 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> <div className="pt3 pb2"> <div @@ -316,7 +353,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}> diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 9c144b93f..6f029b6a2 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,4 +1,11 @@ -import { DocAgnosticFormat, DocsInfo, Documentation } from '@0xproject/react-docs'; +import { + DocAgnosticFormat, + DocsInfo, + Documentation, + GeneratedDocJson, + SupportedDocJson, + TypeDocUtils, +} from '@0xproject/react-docs'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import * as React from 'react'; @@ -128,7 +135,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.menu.Contracts = []; + _.each(docAgnosticFormat, (docObj, contractName) => { + this.props.docsInfo.sections[contractName] = contractName; + this.props.docsInfo.menu.Contracts.push(contractName); + }); + } if (!this._isUnmounted) { this.setState({ diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 78f5fc3c1..388e83d51 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -8,6 +8,9 @@ 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 +22,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 +30,6 @@ interface UseCase { description: string; classNames: string; style?: React.CSSProperties; - projectIconUrls: string[]; } interface Project { logoFileName: string; @@ -39,74 +37,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 +147,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 +162,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 +182,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"> + <Container paddingRight="20px"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <CallToAction width="175px" type="light"> + <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"> + </Container> + <div> <Link to={WebsitePaths.Portal} className="text-decoration-none"> - <CallToAction width="175px"> + <CallToAction> {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} </CallToAction> </Link> @@ -287,19 +239,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 +301,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> @@ -368,7 +319,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`} + to={WebsitePaths.Portal} className="text-decoration-none underline" style={{ color: colors.landingLinkGrey }} > @@ -402,7 +353,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 +361,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.OnChainSettlement, 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 +369,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 +395,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 +433,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 +444,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 +564,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: 1.5, fontSize: 14, overflow: 'hidden', - height: 104, + height: 124, }} > {useCase.description} @@ -725,7 +574,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> diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts index db008d319..c418cab3f 100644 --- a/packages/website/ts/redux/dispatcher.ts +++ b/packages/website/ts/redux/dispatcher.ts @@ -1,4 +1,3 @@ -import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Dispatch } from 'redux'; import { State } from 'ts/redux/reducer'; @@ -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 1bc4611e0..f54801639 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -1,5 +1,4 @@ import { generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { ECSignature } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; import * as moment from 'moment'; @@ -7,7 +6,7 @@ import { Action, ActionTypes, BlockchainErrs, - Order, + PortalOrder, ProviderType, ScreenWidths, Side, @@ -31,7 +30,7 @@ export interface State { orderExpiryTimestamp: BigNumber; orderFillAmount: BigNumber; orderTakerAddress: string; - orderECSignature: ECSignature; + orderSignature: string; orderSalt: BigNumber; nodeVersion: string; screenWidth: ScreenWidths; @@ -45,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; @@ -65,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, @@ -90,7 +85,6 @@ export const INITIAL_STATE: State = { // Docs docsVersion: DEFAULT_DOCS_VERSION, availableDocVersions: [DEFAULT_DOCS_VERSION], - // Shared flashMessage: undefined, providerType: ProviderType.Injected, @@ -207,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/types.ts b/packages/website/ts/types.ts index a1325d9bc..eeb0efaea 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,4 +1,4 @@ -import { ECSignature } from '@0xproject/types'; +import { ObjectMap, SignedOrder } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Provider } from 'ethereum-types'; import * as React from 'react'; @@ -56,28 +56,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 +104,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', @@ -415,6 +399,7 @@ export enum Key { 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', @@ -436,6 +421,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', @@ -482,6 +471,7 @@ export enum Key { LiveChat = 'LIVE_CHAT', LibrariesAndTools = 'LIBRARIES_AND_TOOLS', More = 'MORE', + OurMissionAndValues = 'OUR_MISSION_AND_VALUES', } export enum SmartContractDocSections { @@ -515,7 +505,7 @@ export enum Providers { Parity = 'PARITY', Metamask = 'METAMASK', Mist = 'MIST', - Toshi = 'TOSHI', + CoinbaseWallet = 'COINBASE_WALLET', Cipher = 'CIPHER', } @@ -543,10 +533,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 { diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index e5a1ddfa4..3aae317b0 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,5 +1,7 @@ +import { assetDataUtils } from '@0xproject/order-utils'; +import { ObjectMap } from '@0xproject/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 24d4101f4..0809fb438 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -24,13 +24,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', @@ -76,8 +77,8 @@ export const constants = { URL_FORUM: 'https://forum.0xproject.com', 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', diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts index e313648bd..0e1d9ea6e 100644 --- a/packages/website/ts/utils/doc_utils.ts +++ b/packages/website/ts/utils/doc_utils.ts @@ -1,4 +1,4 @@ -import { DoxityDocObj, GeneratedDocJson } from '@0xproject/react-docs'; +import { DocAgnosticFormat, GeneratedDocJson } from '@0xproject/react-docs'; import { fetchAsync, logUtils } from '@0xproject/utils'; import * as _ from 'lodash'; import { S3FileObject, VersionToFilePath } from 'ts/types'; @@ -70,7 +70,7 @@ export const docUtils = { }); return versionFilePaths; }, - async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise<GeneratedDocJson | 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/order_parser.ts b/packages/website/ts/utils/order_parser.ts index be08da80e..816200e3b 100644 --- a/packages/website/ts/utils/order_parser.ts +++ b/packages/website/ts/utils/order_parser.ts @@ -1,12 +1,13 @@ +import { orderParsingUtils } from '@0xproject/order-utils'; import { logUtils } from '@0xproject/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..e7e916273 --- /dev/null +++ b/packages/website/ts/utils/token_address_overrides.ts @@ -0,0 +1,24 @@ +import { ObjectMap } from '@0xproject/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/utils.ts b/packages/website/ts/utils/utils.ts index 39bbd404c..d083e0ffc 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,7 +1,7 @@ -import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers'; -import { OrderError } from '@0xproject/order-utils'; +import { ContractWrappersError } from '@0xproject/contract-wrappers'; +import { assetDataUtils, OrderError } from '@0xproject/order-utils'; import { constants as sharedConstants, Networks } from '@0xproject/react-shared'; -import { ECSignature, Provider } from '@0xproject/types'; +import { ExchangeContractErrs } from '@0xproject/types'; import { BigNumber } from '@0xproject/utils'; import { Web3Wrapper } from '@0xproject/web3-wrapper'; import * as bowser from 'bowser'; @@ -10,13 +10,14 @@ 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: { @@ -231,10 +233,10 @@ export const utils = { 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.ERC20ProxyContractDoesNotExist]: 'ERC20 proxy contract des not exist', + [ContractWrappersError.ERC721ProxyContractDoesNotExist]: 'ERC721 proxy contract des not exist', + [ContractWrappersError.ERC20TokenContractDoesNotExist]: 'ERC20 token contract does not exist', + [ContractWrappersError.ERC721TokenContractDoesNotExist]: 'ERC721 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', @@ -247,12 +249,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 +323,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; } @@ -454,14 +453,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) { |