diff options
Diffstat (limited to 'packages/website')
192 files changed, 3324 insertions, 946 deletions
diff --git a/packages/website/README.md b/packages/website/README.md index 2edc17cd9..d82d045a6 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -33,13 +33,13 @@ yarn install To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory: ```bash -PKG=@0xproject/website yarn build +PKG=@0x/website yarn build ``` ### Run dev server ```bash -PKG=@0xproject/website yarn watch +PKG=@0x/website yarn watch ``` Visit [0xproject.localhost:3572](http://0xproject.localhost:3572) in your browser. diff --git a/packages/website/less/all.less b/packages/website/less/all.less index c62db0d20..3747e4860 100644 --- a/packages/website/less/all.less +++ b/packages/website/less/all.less @@ -34,17 +34,7 @@ a { } } -#documentation { - p { - line-height: 1.5; - } - - .comment { - p { - margin: 0px; - } - } - +#scroll_container { .typeTooltip { border: 1px solid lightgray; opacity: 1; @@ -83,6 +73,7 @@ a { code { border: 1px solid #e3eefe; + border-radius: 4px; font-family: 'Roboto Mono'; background-color: #f2f6ff !important; // lightBlue } diff --git a/packages/website/md/docs/asset_buyer/installation.md b/packages/website/md/docs/asset_buyer/installation.md index 483ee2b65..76affaa09 100644 --- a/packages/website/md/docs/asset_buyer/installation.md +++ b/packages/website/md/docs/asset_buyer/installation.md @@ -1,17 +1,17 @@ **Install** ```bash -yarn add @0xproject/asset-buyer +yarn add @0x/asset-buyer ``` **Import** ```javascript -import { AssetBuyer } from '@0xproject/asset-buyer'; +import { AssetBuyer } from '@0x/asset-buyer'; ``` or ```javascript -var AssetBuyer = require('@0xproject/asset-buyer').AssetBuyer; +var AssetBuyer = require('@0x/asset-buyer').AssetBuyer; ``` diff --git a/packages/website/md/docs/asset_buyer/introduction.md b/packages/website/md/docs/asset_buyer/introduction.md index a40d20cc9..a59539ac6 100644 --- a/packages/website/md/docs/asset_buyer/introduction.md +++ b/packages/website/md/docs/asset_buyer/introduction.md @@ -1 +1 @@ -Welcome to the [@0xproject/asset-buyer](https://github.com/0xProject/0x-monorepo/tree/development/packages/asset-buyer) documentation! AssetBuyer is a library that provides an easy way to buy any asset with ETH in one click, leveraging 0x liquidity and the [Forwarder contract](https://0xproject.com/docs/contracts#Forwarder). +Welcome to the [asset-buyer](https://github.com/0xProject/0x-monorepo/tree/development/packages/asset-buyer) documentation! AssetBuyer is a library that provides an easy way to buy any asset with ETH in one click, leveraging 0x liquidity and the [Forwarder contract](https://0xproject.com/docs/contracts#Forwarder). diff --git a/packages/website/md/docs/connect/1.0.0/installation.md b/packages/website/md/docs/connect/1/installation.md index 950bf92ca..950bf92ca 100644 --- a/packages/website/md/docs/connect/1.0.0/installation.md +++ b/packages/website/md/docs/connect/1/installation.md diff --git a/packages/website/md/docs/connect/1.0.0/introduction.md b/packages/website/md/docs/connect/1/introduction.md index 4e3039442..4e3039442 100644 --- a/packages/website/md/docs/connect/1.0.0/introduction.md +++ b/packages/website/md/docs/connect/1/introduction.md diff --git a/packages/website/md/docs/connect/2.0.0/introduction.md b/packages/website/md/docs/connect/2/introduction.md index 8e251b327..8e251b327 100644 --- a/packages/website/md/docs/connect/2.0.0/introduction.md +++ b/packages/website/md/docs/connect/2/introduction.md diff --git a/packages/website/md/docs/connect/3/installation.md b/packages/website/md/docs/connect/3/installation.md new file mode 100644 index 000000000..6797d9633 --- /dev/null +++ b/packages/website/md/docs/connect/3/installation.md @@ -0,0 +1,15 @@ +**Install** + +```bash +npm install @0x/connect --save +``` + +**Import** + +```javascript +import { HttpClient } from '@0x/connect'; +``` + +### Wiki + +Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial) for information on how to integrate relayers into your application. diff --git a/packages/website/md/docs/contract_wrappers/installation.md b/packages/website/md/docs/contract_wrappers/1/installation.md index d5c7fbdba..d5c7fbdba 100644 --- a/packages/website/md/docs/contract_wrappers/installation.md +++ b/packages/website/md/docs/contract_wrappers/1/installation.md diff --git a/packages/website/md/docs/contract_wrappers/introduction.md b/packages/website/md/docs/contract_wrappers/1/introduction.md index ccc81b373..ccc81b373 100644 --- a/packages/website/md/docs/contract_wrappers/introduction.md +++ b/packages/website/md/docs/contract_wrappers/1/introduction.md diff --git a/packages/website/md/docs/contract_wrappers/2/installation.md b/packages/website/md/docs/contract_wrappers/2/installation.md new file mode 100644 index 000000000..50610550a --- /dev/null +++ b/packages/website/md/docs/contract_wrappers/2/installation.md @@ -0,0 +1,11 @@ +**Install** + +```bash +npm install @0x/contract-wrappers --save +``` + +**Import** + +```javascript +import { ContractWrappers } from '@0x/contract-wrappers'; +``` diff --git a/packages/website/md/docs/json_schemas/1.0.0/installation.md b/packages/website/md/docs/json_schemas/1/installation.md index 50a37bae1..50a37bae1 100644 --- a/packages/website/md/docs/json_schemas/1.0.0/installation.md +++ b/packages/website/md/docs/json_schemas/1/installation.md diff --git a/packages/website/md/docs/json_schemas/1.0.0/introduction.md b/packages/website/md/docs/json_schemas/1/introduction.md index 5b2e90387..5b2e90387 100644 --- a/packages/website/md/docs/json_schemas/1.0.0/introduction.md +++ b/packages/website/md/docs/json_schemas/1/introduction.md diff --git a/packages/website/md/docs/json_schemas/1.0.0/schemas.md b/packages/website/md/docs/json_schemas/1/schemas.md index fcf5d8df6..fcf5d8df6 100644 --- a/packages/website/md/docs/json_schemas/1.0.0/schemas.md +++ b/packages/website/md/docs/json_schemas/1/schemas.md diff --git a/packages/website/md/docs/json_schemas/1.0.0/usage.md b/packages/website/md/docs/json_schemas/1/usage.md index 68b801153..68b801153 100644 --- a/packages/website/md/docs/json_schemas/1.0.0/usage.md +++ b/packages/website/md/docs/json_schemas/1/usage.md diff --git a/packages/website/md/docs/json_schemas/2.0.0/schemas.md b/packages/website/md/docs/json_schemas/2/schemas.md index ec7cf6f15..ec7cf6f15 100644 --- a/packages/website/md/docs/json_schemas/2.0.0/schemas.md +++ b/packages/website/md/docs/json_schemas/2/schemas.md diff --git a/packages/website/md/docs/json_schemas/3/installation.md b/packages/website/md/docs/json_schemas/3/installation.md new file mode 100644 index 000000000..a99886113 --- /dev/null +++ b/packages/website/md/docs/json_schemas/3/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0x/json-schemas +``` + +**Import** + +```javascript +import { schemas } from '@0x/json-schemas'; +``` + +or + +```javascript +var schemas = require('@0x/json-schemas').schemas; +``` diff --git a/packages/website/md/docs/json_schemas/3/introduction.md b/packages/website/md/docs/json_schemas/3/introduction.md new file mode 100644 index 000000000..0039d014a --- /dev/null +++ b/packages/website/md/docs/json_schemas/3/introduction.md @@ -0,0 +1,3 @@ +Welcome to the [json-schemas](https://github.com/0xProject/0x-monorepo/tree/development/packages/json-schemas) documentation! This package provides JSON schemas for validating 0x Protocol & Standard Relayer API data structures. It provides both the raw JSON schemas and a schema validator class to interact with them from a JS project. + +If you are not using a Javascript-based language for your project, you can use a Javascript environment to render the JSON schemas within this package and use them together with a [JSON Schema](http://json-schema.org/) implementation in your [language of choice](http://json-schema.org/implementations.html) (e.g Python, Haskell, Go, C, C++, Rust, Ruby, Scala, etc...). diff --git a/packages/website/md/docs/json_schemas/3/usage.md b/packages/website/md/docs/json_schemas/3/usage.md new file mode 100644 index 000000000..2b72eeaad --- /dev/null +++ b/packages/website/md/docs/json_schemas/3/usage.md @@ -0,0 +1,14 @@ +The following example shows you how to validate a 0x order using the `@0x/json-schemas` package. + +```javascript +import {SchemaValidator, ValidatorResult, schemas} from '@0x/json-schemas'; + +const {orderSchema} = schemas; +const validator = new SchemaValidator(); + +const order = { + ... +}; +const validatorResult: ValidatorResult = validator.validate(order, orderSchema); // Contains all errors +const isValid: boolean = validator.isValid(order, orderSchema); // Only returns boolean +``` diff --git a/packages/website/md/docs/order_utils/1.0.0/installation.md b/packages/website/md/docs/order_utils/1/installation.md index 68a7cf960..68a7cf960 100644 --- a/packages/website/md/docs/order_utils/1.0.0/installation.md +++ b/packages/website/md/docs/order_utils/1/installation.md diff --git a/packages/website/md/docs/order_utils/1.0.0/introduction.md b/packages/website/md/docs/order_utils/1/introduction.md index d5f3f2925..d5f3f2925 100644 --- a/packages/website/md/docs/order_utils/1.0.0/introduction.md +++ b/packages/website/md/docs/order_utils/1/introduction.md diff --git a/packages/website/md/docs/order_utils/2/installation.md b/packages/website/md/docs/order_utils/2/installation.md new file mode 100644 index 000000000..d4bac6a53 --- /dev/null +++ b/packages/website/md/docs/order_utils/2/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0x/order-utils +``` + +**Import** + +```javascript +import { createSignedOrderAsync } from '@0x/order-utils'; +``` + +or + +```javascript +var createSignedOrderAsync = require('@0x/order-utils').createSignedOrderAsync; +``` diff --git a/packages/website/md/docs/order_utils/2/introduction.md b/packages/website/md/docs/order_utils/2/introduction.md new file mode 100644 index 000000000..567896603 --- /dev/null +++ b/packages/website/md/docs/order_utils/2/introduction.md @@ -0,0 +1 @@ +Welcome to the [order-utils](https://github.com/0xProject/0x-monorepo/tree/development/packages/order-utils) documentation! Order utils is a set of utils around creating, signing, validating 0x orders. diff --git a/packages/website/md/docs/order_watcher/installation.md b/packages/website/md/docs/order_watcher/1/installation.md index 4b28f583d..4b28f583d 100644 --- a/packages/website/md/docs/order_watcher/installation.md +++ b/packages/website/md/docs/order_watcher/1/installation.md diff --git a/packages/website/md/docs/order_watcher/introduction.md b/packages/website/md/docs/order_watcher/1/introduction.md index f922d922f..f922d922f 100644 --- a/packages/website/md/docs/order_watcher/introduction.md +++ b/packages/website/md/docs/order_watcher/1/introduction.md diff --git a/packages/website/md/docs/order_watcher/2/installation.md b/packages/website/md/docs/order_watcher/2/installation.md new file mode 100644 index 000000000..883eb40e5 --- /dev/null +++ b/packages/website/md/docs/order_watcher/2/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0x/order-watcher +``` + +**Import** + +```javascript +import { OrderWatcher } from '@0x/order-watcher'; +``` + +or + +```javascript +var OrderWatcher = require('@0x/order-utils').OrderWatcher; +``` diff --git a/packages/website/md/docs/order_watcher/2/introduction.md b/packages/website/md/docs/order_watcher/2/introduction.md new file mode 100644 index 000000000..b2d574053 --- /dev/null +++ b/packages/website/md/docs/order_watcher/2/introduction.md @@ -0,0 +1 @@ +Welcome to the [order-watcher](https://github.com/0xProject/0x-monorepo/tree/development/packages/order-watcher) documentation! OrderWatcher is a daemon that efficiently watches a set of orders, emitting events whenever the validity of an order changes. It can be used by relayers to prune an orderbook, or by traders to keep orders fetched from a Relayer up-to-date. diff --git a/packages/website/md/docs/smart_contracts/1.0.0/introduction.md b/packages/website/md/docs/smart_contracts/1/introduction.md index 79a8f00fd..79a8f00fd 100644 --- a/packages/website/md/docs/smart_contracts/1.0.0/introduction.md +++ b/packages/website/md/docs/smart_contracts/1/introduction.md diff --git a/packages/website/md/docs/smart_contracts/2.0.0/introduction.md b/packages/website/md/docs/smart_contracts/2/introduction.md index 4aa31db3d..4aa31db3d 100644 --- a/packages/website/md/docs/smart_contracts/2.0.0/introduction.md +++ b/packages/website/md/docs/smart_contracts/2/introduction.md diff --git a/packages/website/md/docs/sol-compiler/installation.md b/packages/website/md/docs/sol-compiler/1/installation.md index 9c8561d9b..9c8561d9b 100644 --- a/packages/website/md/docs/sol-compiler/installation.md +++ b/packages/website/md/docs/sol-compiler/1/installation.md diff --git a/packages/website/md/docs/sol-compiler/introduction.md b/packages/website/md/docs/sol-compiler/1/introduction.md index fcd80f47b..fcd80f47b 100644 --- a/packages/website/md/docs/sol-compiler/introduction.md +++ b/packages/website/md/docs/sol-compiler/1/introduction.md diff --git a/packages/website/md/docs/sol-compiler/usage.md b/packages/website/md/docs/sol-compiler/1/usage.md index 79c9b32ba..79c9b32ba 100644 --- a/packages/website/md/docs/sol-compiler/usage.md +++ b/packages/website/md/docs/sol-compiler/1/usage.md diff --git a/packages/website/md/docs/sol-compiler/2/installation.md b/packages/website/md/docs/sol-compiler/2/installation.md new file mode 100644 index 000000000..7e7b690fe --- /dev/null +++ b/packages/website/md/docs/sol-compiler/2/installation.md @@ -0,0 +1,23 @@ +#### CLI Installation + +```bash +yarn global add @0x/sol-compiler +``` + +#### API Installation + +```bash +yarn add @0x/sol-compiler +``` + +**Import** + +```typescript +import { Compiler } from '@0x/sol-compiler'; +``` + +or + +```javascript +var Compiler = require('@0x/sol-compiler').Compiler; +``` diff --git a/packages/website/md/docs/sol-compiler/2/usage.md b/packages/website/md/docs/sol-compiler/2/usage.md new file mode 100644 index 000000000..68e5a988f --- /dev/null +++ b/packages/website/md/docs/sol-compiler/2/usage.md @@ -0,0 +1,24 @@ +#### CLI Usage + +```bash +$ sol-compiler +Options: + --version Show version number [boolean] + --contracts-dir path of contracts directory to compile [string] + --artifacts-dir path to write contracts artifacts to [string] + --contracts comma separated list of contracts to compile + [string] [default: "*"] + --help Show help [boolean] +``` + +#### API Usage + +```typescript +import { Compiler } from '@0x/sol-compiler'; + +const compiler = new Compiler(); + +(async () => { + await compiler.compileAllAsync(); +})().catch(console.log); +``` diff --git a/packages/website/md/docs/sol_cov/installation.md b/packages/website/md/docs/sol_cov/1/installation.md index b9ce25a5f..b9ce25a5f 100644 --- a/packages/website/md/docs/sol_cov/installation.md +++ b/packages/website/md/docs/sol_cov/1/installation.md diff --git a/packages/website/md/docs/sol_cov/introduction.md b/packages/website/md/docs/sol_cov/1/introduction.md index 7064a3554..7064a3554 100644 --- a/packages/website/md/docs/sol_cov/introduction.md +++ b/packages/website/md/docs/sol_cov/1/introduction.md diff --git a/packages/website/md/docs/sol_cov/usage.md b/packages/website/md/docs/sol_cov/1/usage.md index c747005fb..c747005fb 100644 --- a/packages/website/md/docs/sol_cov/usage.md +++ b/packages/website/md/docs/sol_cov/1/usage.md diff --git a/packages/website/md/docs/sol_cov/2/installation.md b/packages/website/md/docs/sol_cov/2/installation.md new file mode 100644 index 000000000..1d4557cf5 --- /dev/null +++ b/packages/website/md/docs/sol_cov/2/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0x/sol-cov +``` + +**Import** + +```javascript +import { CoverageSubprovider } from '@0x/sol-cov'; +``` + +or + +```javascript +var CoverageSubprovider = require('@0x/sol-cov').CoverageSubprovider; +``` diff --git a/packages/website/md/docs/sol_cov/2/introduction.md b/packages/website/md/docs/sol_cov/2/introduction.md new file mode 100644 index 000000000..ac3256845 --- /dev/null +++ b/packages/website/md/docs/sol_cov/2/introduction.md @@ -0,0 +1 @@ +Welcome to the [sol-cov](https://github.com/0xProject/0x-monorepo/tree/development/packages/sol-cov) documentation! Sol-cov is a Solidity coverage tool for your smart contract tests. diff --git a/packages/website/md/docs/sol_cov/2/usage.md b/packages/website/md/docs/sol_cov/2/usage.md new file mode 100644 index 000000000..d1c76474b --- /dev/null +++ b/packages/website/md/docs/sol_cov/2/usage.md @@ -0,0 +1,62 @@ +Sol-cov uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with ProviderEngine, please read the [Web3 Provider explained](https://0xproject.com/wiki#Web3-Provider-Explained) wiki article. + +The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot. + +Coverage subprovider needs some info about your contracts (`srcMap`, `bytecode`). It gets that info from your project's artifacts. Some frameworks have their own artifact format. Some artifact formats don't actually contain all the neccessary data. + +In order to use `CoverageSubprovider` with your favorite framework you need to pass an `artifactsAdapter` to it. + +### Sol-compiler + +If you are generating your artifacts with [@0x/sol-compiler](https://0xproject.com/docs/sol-compiler) you can use the `SolCompilerArtifactsAdapter` we've implemented for you. + +```typescript +import { SolCompilerArtifactsAdapter } from '@0x/sol-cov'; +const artifactsPath = 'src/artifacts'; +const contractsPath = 'src/contracts'; +const artifactsAdapter = new SolCompilerArtifactsAdapter(artifactsPath, contractsPath); +``` + +### Truffle + +If your project is using [Truffle](https://truffleframework.com/), we've written a `TruffleArtifactsAdapter`for you. + +```typescript +import { TruffleArtifactAdapter } from '@0x/sol-cov'; +const contractsPath = 'src/contracts'; +const artifactAdapter = new TruffleArtifactAdapter(contractsDir); +``` + +Because truffle artifacts don't have all the data we need - we actually will recompile your contracts under the hood. That's why you don't need to pass an `artifactsPath`. + +### Other framework/toolset + +You'll need to write your own artifacts adapter. It should extend `AbstractArtifactsAdapter`. +Look at the code of the two adapters above for examples. + +### Usage + +```typescript +import { CoverageSubprovider } from '@0x/sol-cov'; +import ProviderEngine = require('web3-provider-engine'); + +const provider = new ProviderEngine(); + +const artifactsPath = 'src/artifacts'; +const contractsPath = 'src/contracts'; +const networkId = 50; +// Some calls might not have `from` address specified. Nevertheless - transactions need to be submitted from an address with at least some funds. defaultFromAddress is the address that will be used to submit those calls as transactions from. +const defaultFromAddress = '0x5409ed021d9299bf6814279a6a1411a7e866a631'; +const isVerbose = true; +const coverageSubprovider = new CoverageSubprovider(artifactsAdapter, defaultFromAddress, isVerbose); + +provider.addProvider(coverageSubprovider); +``` + +After your test suite is complete (e.g in the Mocha global `after` hook), you'll need to call: + +```typescript +await coverageSubprovider.writeCoverageAsync(); +``` + +This will create a `coverage.json` file in a `coverage` directory. This file has an [Istanbul format](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md) - so you can use it with any of the existing Istanbul reporters. diff --git a/packages/website/md/docs/subproviders/installation.md b/packages/website/md/docs/subproviders/1/installation.md index a049ff0ec..a049ff0ec 100644 --- a/packages/website/md/docs/subproviders/installation.md +++ b/packages/website/md/docs/subproviders/1/installation.md diff --git a/packages/website/md/docs/subproviders/introduction.md b/packages/website/md/docs/subproviders/1/introduction.md index 835201064..835201064 100644 --- a/packages/website/md/docs/subproviders/introduction.md +++ b/packages/website/md/docs/subproviders/1/introduction.md diff --git a/packages/website/md/docs/subproviders/ledger_node_hid.md b/packages/website/md/docs/subproviders/1/ledger_node_hid.md index 3089817af..3089817af 100644 --- a/packages/website/md/docs/subproviders/ledger_node_hid.md +++ b/packages/website/md/docs/subproviders/1/ledger_node_hid.md diff --git a/packages/website/md/docs/subproviders/2/installation.md b/packages/website/md/docs/subproviders/2/installation.md new file mode 100644 index 000000000..025dd0dee --- /dev/null +++ b/packages/website/md/docs/subproviders/2/installation.md @@ -0,0 +1,15 @@ +```bash +npm install @0x/subproviders --save +``` + +**Import** + +```typescript +import { LedgerSubprovider } from '@0x/subproviders'; +``` + +or + +```javascript +var LedgerSubprovider = require('@0x/subproviders').LedgerSubprovider; +``` diff --git a/packages/website/md/docs/web3_wrapper/installation.md b/packages/website/md/docs/web3_wrapper/1/installation.md index 92794d9b0..92794d9b0 100644 --- a/packages/website/md/docs/web3_wrapper/installation.md +++ b/packages/website/md/docs/web3_wrapper/1/installation.md diff --git a/packages/website/md/docs/web3_wrapper/introduction.md b/packages/website/md/docs/web3_wrapper/1/introduction.md index 17bd316f1..17bd316f1 100644 --- a/packages/website/md/docs/web3_wrapper/introduction.md +++ b/packages/website/md/docs/web3_wrapper/1/introduction.md diff --git a/packages/website/md/docs/web3_wrapper/2/installation.md b/packages/website/md/docs/web3_wrapper/2/installation.md new file mode 100644 index 000000000..14c4f066c --- /dev/null +++ b/packages/website/md/docs/web3_wrapper/2/installation.md @@ -0,0 +1,25 @@ +**Install** + +```bash +npm install @0x/web3-wrapper --save +``` + +**Import** + +```javascript +import { Web3Wrapper } from '@0x/web3-wrapper'; +``` + +or + +```javascript +var Web3Wrapper = require('@0x/web3-wrapper').Web3Wrapper; +``` + +If your project is in [TypeScript](https://www.typescriptlang.org/), add the following to your `tsconfig.json`: + +``` +"include": [ + "./node_modules/web3-typescript-typings/index.d.ts", +] +``` diff --git a/packages/website/package.json b/packages/website/package.json index efab95c80..771b1b908 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { - "name": "@0xproject/website", - "version": "0.0.54", + "name": "@0x/website", + "version": "0.0.55", "engines": { "node": ">=6.12" }, @@ -19,23 +19,22 @@ "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { - "0x.js": "^0.38.6", - "@0xproject/contract-wrappers": "^2.0.2", - "@0xproject/json-schemas": "^1.0.7", - "@0xproject/order-utils": "^1.0.7", - "@0xproject/react-docs": "^1.0.13", - "@0xproject/react-shared": "^1.0.15", - "@0xproject/subproviders": "^2.0.7", - "@0xproject/types": "^1.1.4", - "@0xproject/typescript-typings": "^3.0.2", - "@0xproject/utils": "^2.0.2", - "@0xproject/web3-wrapper": "^3.0.3", + "@0x/contract-wrappers": "^3.0.0", + "@0x/json-schemas": "^2.0.0", + "@0x/order-utils": "^2.0.0", + "@0x/react-docs": "^1.0.14", + "@0x/react-shared": "^1.0.17", + "@0x/subproviders": "^2.1.0", + "@0x/types": "^1.2.0", + "@0x/typescript-typings": "^3.0.3", + "@0x/utils": "^2.0.3", + "@0x/web3-wrapper": "^3.1.0", "accounting": "^0.4.1", "basscss": "^8.0.3", "blockies": "^0.0.2", "bowser": "^1.9.3", "deep-equal": "^1.0.1", - "ethereum-types": "^1.0.11", + "ethereum-types": "^1.1.1", "ethereumjs-util": "^5.1.1", "find-versions": "^2.0.0", "jsonschema": "^1.2.0", @@ -53,8 +52,7 @@ "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", - "react-router-dom": "^4.1.1", - "react-scroll": "0xproject/react-scroll#similar-to-pr-330", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "react-tooltip": "^3.2.7", "react-typist": "^2.0.4", "redux": "^3.6.0", @@ -83,7 +81,6 @@ "@types/react-dom": "^16.0.7", "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", - "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", diff --git a/packages/website/public/css/basscss_responsive_custom.css b/packages/website/public/css/basscss_responsive_custom.css index 5f8bd9117..92a681cb1 100644 --- a/packages/website/public/css/basscss_responsive_custom.css +++ b/packages/website/public/css/basscss_responsive_custom.css @@ -26,6 +26,10 @@ .sm-right { float: right; } + .sm-justify-end { + ms-flex-pack: end; + justify-content: flex-end; + } } @media (min-width: 52em) { @@ -54,6 +58,10 @@ .md-right { float: right; } + .md-justify-end { + ms-flex-pack: end; + justify-content: flex-end; + } } @media (min-width: 64em) { @@ -82,4 +90,8 @@ .lg-right { float: right; } + .lg-justify-end { + ms-flex-pack: end; + justify-content: flex-end; + } } diff --git a/packages/website/public/images/developers/tutorials/0x_order_basics.svg b/packages/website/public/images/developers/tutorials/0x_order_basics.svg new file mode 100644 index 000000000..57b04dfa5 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/0x_order_basics.svg @@ -0,0 +1 @@ +<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><defs><style>.cls-1{fill:#3289f1;}.cls-2{fill:#fff;}</style></defs><title>Artboard 1</title><path class="cls-1" d="M62.64,26.77a0,0,0,0,0,0,0A2.44,2.44,0,0,0,62,25.28L48.2,11.43a2.38,2.38,0,0,0-1.53-.71H35.45a16.12,16.12,0,0,1,.44,3.5H45v9.26a5,5,0,0,0,5,5h9.15V65.41A2.16,2.16,0,0,1,57,67.57H21.8a2.16,2.16,0,0,1-2.15-2.16V31.46H19a16.81,16.81,0,0,1-2.86-.24V65.41a5.67,5.67,0,0,0,5.65,5.66H57a5.67,5.67,0,0,0,5.66-5.66V27A1.48,1.48,0,0,0,62.64,26.77ZM50,25a1.49,1.49,0,0,1-1.49-1.49V16.71L56.69,25Z"/><path class="cls-1" d="M48,11.23a1.75,1.75,0,0,0-1.34-.51,2.38,2.38,0,0,1,1.53.71ZM62.14,25.47,62,25.28a2.44,2.44,0,0,1,.69,1.46A1.71,1.71,0,0,0,62.14,25.47Z"/><path class="cls-2" d="M17.26,12.83V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Z"/><path class="cls-2" d="M17.26,12.83V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Z"/><path class="cls-1" d="M32.65,14.21a13.47,13.47,0,0,0-.55-3.5,13.66,13.66,0,1,0-16,17.23,13.47,13.47,0,0,0,2.86.3c.22,0,.43,0,.64,0a13.67,13.67,0,0,0,13-13.64C32.66,14.46,32.66,14.33,32.65,14.21Zm-13,10.51-.64,0a9.94,9.94,0,0,1-2.86-.41A10.15,10.15,0,1,1,28.39,10.71a9.92,9.92,0,0,1,.76,3.5c0,.12,0,.25,0,.37A10.17,10.17,0,0,1,19.65,24.72Z"/><path class="cls-1" d="M25,12.83v3.5H20.76v4.22h-3.5V16.33H13v-3.5h4.22V13a1.33,1.33,0,0,1,.14-.19h-.14V8.61h3.5v4.22Z"/><path class="cls-1" d="M17.4,12.83a1.33,1.33,0,0,0-.14.19v-.19Z"/><path class="cls-1" d="M17.4,12.83a1.33,1.33,0,0,0-.14.19v-.19Z"/><rect class="cls-1" x="27.4" y="35.38" width="22" height="3.5"/><rect class="cls-1" x="27.4" y="55.38" width="22" height="3.5"/><rect class="cls-1" x="27.4" y="45.38" width="16" height="3.5"/></svg>
\ No newline at end of file diff --git a/packages/website/public/images/developers/tutorials/build_a_relayer.svg b/packages/website/public/images/developers/tutorials/build_a_relayer.svg new file mode 100644 index 000000000..afda40d88 --- /dev/null +++ b/packages/website/public/images/developers/tutorials/build_a_relayer.svg @@ -0,0 +1,3 @@ +<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M70.0766 46.9825C70.3778 45.294 70.4782 43.6054 70.4782 41.8174C70.4782 30.8913 64.9564 20.8591 55.72 14.8993C54.8164 14.3034 53.712 14.6013 53.1096 15.4953C52.5073 16.3892 52.8085 17.4819 53.6116 18.0778C61.8441 23.3423 66.6631 32.2819 66.6631 41.9168C66.6631 43.208 66.5627 44.4993 66.362 45.7906C65.7596 45.6913 65.0568 45.592 64.4544 45.592C58.1295 45.592 52.9089 50.6577 52.9089 57.0148C52.9089 63.3718 58.0291 68.4376 64.4544 68.4376C70.8798 68.4376 76 63.3718 76 57.0148C76 52.6443 73.5905 48.9691 70.0766 46.9825ZM64.4544 64.6631C60.1374 64.6631 56.7239 61.1866 56.7239 57.0148C56.7239 52.7436 60.2378 49.3664 64.4544 49.3664C68.7715 49.3664 72.1849 52.843 72.1849 57.0148C72.2853 61.1866 68.7715 64.6631 64.4544 64.6631ZM50.3989 67.5436C46.4835 69.4309 42.2668 70.3248 37.9498 70.3248C31.5244 70.3248 25.2999 68.2389 20.2801 64.2658C21.9868 62.2792 23.0912 59.6966 23.0912 56.8161C23.0912 50.5584 17.9709 45.3933 11.5456 45.3933C5.22061 45.3933 6.1277e-06 50.4591 6.1277e-06 56.8161C6.1277e-06 63.1731 5.12022 68.2389 11.5456 68.2389C13.6539 68.2389 15.5614 67.6429 17.2682 66.6497C23.0912 71.4174 30.3197 74 37.8494 74C42.7688 74 47.4875 72.9074 51.9049 70.8215C52.8085 70.4242 53.21 69.2322 52.8085 68.3383C52.5073 67.5436 51.3025 67.1463 50.3989 67.5436ZM3.81505 56.9154C3.81505 52.6443 7.32894 49.2671 11.5456 49.2671C15.7622 49.2671 19.2761 52.7436 19.2761 56.9154C19.2761 61.1866 15.7622 64.5638 11.5456 64.5638C7.32894 64.5638 3.81505 61.1866 3.81505 56.9154ZM7.42933 42.5128C7.42933 42.5128 7.52972 42.5128 7.42933 42.5128C8.53369 42.5128 9.33685 41.7181 9.33685 40.7248C9.63804 31.0899 14.8586 22.349 23.1915 17.3826C24.3963 16.6873 25.6011 16.0913 26.8058 15.5946C28.5126 19.7664 32.6288 22.8456 37.5482 22.8456C43.8732 22.8456 49.0938 17.7799 49.0938 11.4228C49.0938 5.06578 43.9736 1.21251e-05 37.5482 1.21251e-05C31.2233 1.21251e-05 26.0026 5.06578 26.0026 11.4228C26.0026 11.6215 26.0026 11.7208 26.0026 11.9195C24.3963 12.6148 22.79 13.3101 21.1836 14.3034C11.7464 19.9651 5.92339 29.7987 5.5218 40.7248C5.6222 41.6188 6.42536 42.5128 7.42933 42.5128ZM37.5482 3.67516C41.8653 3.67516 45.2787 7.15168 45.2787 11.3235C45.2787 15.5946 41.7649 18.9718 37.5482 18.9718C33.2312 18.9718 29.8177 15.4953 29.8177 11.3235C29.8177 7.15168 33.3316 3.67516 37.5482 3.67516Z" fill="#3289F1"/> +</svg> diff --git a/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg new file mode 100644 index 000000000..960616bfe --- /dev/null +++ b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg @@ -0,0 +1,6 @@ +<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M72 36.63C72 35.1978 71.4436 33.8243 70.4532 32.8116C69.4628 31.7989 68.1195 31.23 66.7188 31.23H65.6626V23.76C65.6626 21.8504 64.9207 20.0191 63.6002 18.6688C62.2796 17.3186 60.4886 16.56 58.621 16.56H37.7604V1.8C37.7604 1.32261 37.5749 0.864774 37.2448 0.527208C36.9146 0.189643 36.4669 0 36 0C35.5331 0 35.0854 0.189643 34.7552 0.527208C34.4251 0.864774 34.2396 1.32261 34.2396 1.8V16.56H13.379C11.5114 16.56 9.72038 17.3186 8.39983 18.6688C7.07929 20.0191 6.33741 21.8504 6.33741 23.76V31.23H5.28117C3.88052 31.23 2.53723 31.7989 1.54682 32.8116C0.556407 33.8243 3.35768e-07 35.1978 3.35768e-07 36.63V47.25C3.35768e-07 48.6822 0.556407 50.0557 1.54682 51.0684C2.53723 52.0811 3.88052 52.65 5.28117 52.65H6.33741V64.8C6.33741 66.7096 7.07929 68.5409 8.39983 69.8912C9.72038 71.2414 11.5114 72 13.379 72H58.621C60.4886 72 62.2796 71.2414 63.6002 69.8912C64.9207 68.5409 65.6626 66.7096 65.6626 64.8V52.65H66.7188C68.1195 52.65 69.4628 52.0811 70.4532 51.0684C71.4436 50.0557 72 48.6822 72 47.25V36.63ZM68.4792 47.25C68.4792 47.7274 68.2937 48.1852 67.9636 48.5228C67.6335 48.8604 67.1857 49.05 66.7188 49.05H63.9022C63.4353 49.05 62.9876 49.2396 62.6574 49.5772C62.3273 49.9148 62.1418 50.3726 62.1418 50.85V64.8C62.1418 65.7548 61.7709 66.6705 61.1106 67.3456C60.4503 68.0207 59.5548 68.4 58.621 68.4H13.379C12.4452 68.4 11.5497 68.0207 10.8894 67.3456C10.2291 66.6705 9.85819 65.7548 9.85819 64.8V50.85C9.85819 50.3726 9.67272 49.9148 9.34258 49.5772C9.01245 49.2396 8.56468 49.05 8.0978 49.05H5.28117C4.81429 49.05 4.36653 48.8604 4.03639 48.5228C3.70625 48.1852 3.52078 47.7274 3.52078 47.25V36.63C3.52078 36.1526 3.70625 35.6948 4.03639 35.3572C4.36653 35.0196 4.81429 34.83 5.28117 34.83H8.0978C8.56468 34.83 9.01245 34.6404 9.34258 34.3028C9.67272 33.9652 9.85819 33.5074 9.85819 33.03V23.76C9.85819 22.8052 10.2291 21.8895 10.8894 21.2144C11.5497 20.5393 12.4452 20.16 13.379 20.16H58.621C59.5548 20.16 60.4503 20.5393 61.1106 21.2144C61.7709 21.8895 62.1418 22.8052 62.1418 23.76V33.03C62.1418 33.5074 62.3273 33.9652 62.6574 34.3028C62.9876 34.6404 63.4353 34.83 63.9022 34.83H66.7188C67.1857 34.83 67.6335 35.0196 67.9636 35.3572C68.2937 35.6948 68.4792 36.1526 68.4792 36.63V47.25Z" fill="#3289F1"/> +<path d="M32.2998 38.5204C32.2998 36.9718 31.8507 35.458 31.0092 34.1703C30.1678 32.8827 28.9718 31.8791 27.5726 31.2865C26.1733 30.6938 24.6336 30.5388 23.1481 30.8409C21.6627 31.143 20.2982 31.8887 19.2273 32.9838C18.1563 34.0788 17.427 35.474 17.1315 36.9929C16.836 38.5117 16.9877 40.0861 17.5673 41.5168C18.1469 42.9476 19.1284 44.1705 20.3877 45.0308C21.647 45.8912 23.1275 46.3504 24.6421 46.3504C26.673 46.3504 28.6208 45.5255 30.0569 44.0571C31.493 42.5887 32.2998 40.5971 32.2998 38.5204ZM24.6421 42.7504C24.0988 42.7504 23.5609 42.641 23.0589 42.4284C22.557 42.2159 22.101 41.9043 21.7168 41.5115C21.3327 41.1187 21.028 40.6524 20.8201 40.1392C20.6122 39.626 20.5052 39.0759 20.5052 38.5204C20.5052 37.3986 20.941 36.3226 21.7168 35.5294C22.4927 34.7361 23.5449 34.2904 24.6421 34.2904C25.7393 34.2904 26.7915 34.7361 27.5673 35.5294C28.3431 36.3226 28.779 37.3986 28.779 38.5204C28.779 39.6423 28.3431 40.7182 27.5673 41.5115C26.7915 42.3048 25.7393 42.7504 24.6421 42.7504Z" fill="#3289F1"/> +<path d="M47.3533 30.6001C45.8177 30.5823 44.3116 31.0316 43.0263 31.8909C41.741 32.7503 40.7345 33.9809 40.1347 35.4264C39.5349 36.8719 39.3689 38.4671 39.6578 40.0093C39.9466 41.5515 40.6773 42.9711 41.757 44.0878C42.8367 45.2045 44.2166 45.9678 45.7215 46.2807C47.2264 46.5937 48.7882 46.4422 50.2087 45.8455C51.6292 45.2487 52.8442 44.2338 53.6992 42.9294C54.5543 41.6251 55.0109 40.0904 55.011 38.5201C55.0226 37.4843 54.8331 36.4565 54.4535 35.4961C54.0739 34.5357 53.5117 33.6618 52.7994 32.9252C52.0872 32.1886 51.2391 31.6037 50.3042 31.2046C49.3694 30.8055 48.3664 30.6001 47.3533 30.6001ZM47.3533 42.7501C46.2561 42.7501 45.2039 42.3045 44.428 41.5112C43.6522 40.7179 43.2164 39.642 43.2164 38.5201C43.2164 37.9646 43.3234 37.4146 43.5313 36.9014C43.7392 36.3882 44.0439 35.9218 44.428 35.5291C44.8122 35.1363 45.2682 34.8247 45.7701 34.6121C46.2721 34.3995 46.81 34.2901 47.3533 34.2901C47.8965 34.2901 48.4345 34.3995 48.9364 34.6121C49.4383 34.8247 49.8944 35.1363 50.2785 35.5291C50.6627 35.9218 50.9674 36.3882 51.1753 36.9014C51.3832 37.4146 51.4902 37.9646 51.4902 38.5201C51.4902 39.642 51.0543 40.7179 50.2785 41.5112C49.5027 42.3045 48.4505 42.7501 47.3533 42.7501Z" fill="#3289F1"/> +<path d="M46.7424 55.7109H25.2656V59.3109H46.7424V55.7109Z" fill="#3289F1"/> +</svg> diff --git a/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg new file mode 100644 index 000000000..e2c492ecd --- /dev/null +++ b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg @@ -0,0 +1,4 @@ +<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M14.0349 38.5774C14.0366 38.5844 14.0366 38.5914 14.0383 38.5975C14.0459 38.6273 14.0595 38.6553 14.0688 38.6842C14.079 38.7148 14.085 38.7463 14.0977 38.7761C14.1003 38.7813 14.1045 38.7848 14.1062 38.7901C14.1461 38.8802 14.1979 38.9625 14.2582 39.0387C14.2752 39.0597 14.293 39.0781 14.3109 39.0973C14.3627 39.1534 14.4187 39.2041 14.4816 39.2488C14.4994 39.2619 14.5164 39.2768 14.5351 39.289C14.5436 39.2943 14.5503 39.3013 14.5588 39.3065L36.3144 52.3229C36.4876 52.4262 36.6812 52.4779 36.874 52.4779C36.9173 52.4779 36.9589 52.4656 37.0014 52.4603C37.0439 52.4656 37.0863 52.4779 37.1288 52.4779C37.3224 52.4779 37.5152 52.4262 37.6884 52.3229L59.444 39.3065C59.703 39.1516 59.8898 38.896 59.9645 38.5975C60.0384 38.299 59.9934 37.9821 59.8389 37.7178L38.0859 0.552394C37.8659 0.177746 37.4642 -0.0148298 37.0515 0.014932C36.6065 -0.0594723 36.1564 0.147984 35.9195 0.552394L14.1631 37.7187C14.1487 37.7432 14.1402 37.7703 14.1274 37.7966C14.1087 37.8351 14.0884 37.8718 14.0739 37.9121C14.0629 37.9427 14.0569 37.9751 14.0476 38.0075C14.0366 38.0478 14.0247 38.0881 14.0179 38.1292C14.0128 38.1607 14.0128 38.1931 14.0102 38.2255C14.0068 38.2684 14.0026 38.3104 14.0043 38.3542C14.0051 38.3874 14.0111 38.4198 14.0153 38.4531C14.0213 38.4942 14.0247 38.5354 14.0349 38.5774ZM38.2455 5.27838L56.1991 35.9496L38.2455 27.7826V5.27838ZM38.2455 30.2957L56.3197 38.5179L38.2455 49.3319V30.2957ZM35.759 5.27838V27.6662L17.898 35.7912L35.759 5.27838ZM35.759 30.1802V49.331L17.5744 38.4522L35.759 30.1802Z" fill="#3289F1"/> +<path d="M58.3132 42.4975L36.9993 55.5568L15.6854 42.4975C15.2327 42.2192 14.651 42.3076 14.2943 42.7076C13.9368 43.1085 13.9011 43.7125 14.2085 44.1546L35.9641 75.5182C36.1772 75.8263 36.5186 75.9996 36.8719 75.9996C36.9144 75.9996 36.9568 75.9839 36.9993 75.9786C37.0418 75.9839 37.0842 75.9996 37.1267 75.9996C37.48 75.9996 37.8205 75.8263 38.0345 75.5182L59.79 44.1546C60.0975 43.7125 60.0609 43.1085 59.7043 42.7076C59.3467 42.3076 58.7659 42.22 58.3132 42.4975ZM35.756 71.2649L19.1145 47.2743L35.756 57.4703V71.2649ZM38.2426 71.2649V57.4703L54.884 47.2743L38.2426 71.2649Z" fill="#3289F1"/> +</svg> diff --git a/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg new file mode 100644 index 000000000..c402964aa --- /dev/null +++ b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg @@ -0,0 +1,3 @@ +<svg width="70" height="74" viewBox="0 0 70 74" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M47.5152 52.7109C46.8864 53.3447 46.3452 54.0413 45.8772 54.7779L25.1416 42.092C25.69 40.7084 26.0008 39.2038 26.0008 37.6255C26.0008 36.0472 25.69 34.5426 25.1428 33.159L45.8832 20.5699C48.0132 23.9418 51.7475 26.1889 56.0002 26.1889C62.6169 26.1889 68 20.7634 68 14.0945C68 7.42558 62.6169 2 56.0002 2C49.3835 2 44.0004 7.42558 44.0004 14.0945C44.0004 15.6135 44.292 17.0625 44.8008 18.4025L24.0328 31.0086C21.8872 27.7141 18.1937 25.531 13.9998 25.531C7.3831 25.531 2 30.9566 2 37.6255C2 44.2944 7.3831 49.72 13.9998 49.72C18.1937 49.72 21.886 47.5369 24.0316 44.2424L44.796 56.9452C44.28 58.307 43.9992 59.762 43.9992 61.2629C43.9992 64.4934 45.2472 67.5315 47.514 69.8149C49.8527 72.1721 52.9259 73.3513 55.999 73.3513C59.0722 73.3513 62.1453 72.1721 64.4841 69.8149C66.7508 67.5303 67.9988 64.4934 67.9988 61.2629C67.9988 58.0325 66.7508 54.9944 64.4841 52.7109C59.8054 47.9941 52.1939 47.9941 47.5152 52.7109ZM56.0002 4.41889C61.2933 4.41889 65.6 8.7596 65.6 14.0945C65.6 19.4293 61.2933 23.7701 56.0002 23.7701C50.7071 23.7701 46.4004 19.4293 46.4004 14.0945C46.4004 8.7596 50.7059 4.41889 56.0002 4.41889ZM14.001 47.3011C8.70788 47.3011 4.40116 42.9604 4.40116 37.6255C4.40116 32.2906 8.70788 27.9499 14.001 27.9499C19.2941 27.9499 23.6008 32.2906 23.6008 37.6255C23.6008 42.9604 19.2941 47.3011 14.001 47.3011ZM62.7873 68.1048C59.0446 71.877 52.9547 71.877 49.2119 68.1048C47.3988 66.2773 46.4004 63.8463 46.4004 61.2629C46.4004 58.6795 47.3988 56.2486 49.2119 54.4211C51.0839 52.5343 53.5415 51.5922 56.0002 51.5922C58.459 51.5922 60.9165 52.5343 62.7885 54.4211C64.6017 56.2486 65.6 58.6795 65.6 61.2629C65.6 63.8463 64.6017 66.2773 62.7873 68.1048Z" fill="#3289F1" stroke="#3289F1" stroke-width="0.5"/> +</svg> diff --git a/packages/website/public/images/docs_logo.svg b/packages/website/public/images/docs_logo.svg new file mode 100644 index 000000000..e3c4b628b --- /dev/null +++ b/packages/website/public/images/docs_logo.svg @@ -0,0 +1,24 @@ +<svg width="278" height="72" viewBox="0 0 278 72" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="139" height="35.9999" fill="black" fill-opacity="0" transform="scale(2)"/> +<rect width="74.0872" height="35.9999" fill="black" fill-opacity="0" transform="scale(2)"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M115.234 33.6875L105.219 40.5522C105.477 44.3244 107.146 46.2101 110.226 46.2101C113.565 46.2101 115.234 43.9618 115.234 39.4642V33.6875ZM105.176 36.8338L115.191 29.9691C115.076 28.0041 114.607 26.5499 113.783 25.6069C112.959 24.6642 111.759 24.1924 110.183 24.1924C108.507 24.1924 107.253 24.7398 106.422 25.8345C105.591 26.9293 105.176 28.6109 105.176 30.8789V36.8338ZM120.394 38.6336C120.394 40.4934 120.16 42.1322 119.695 43.5498C119.229 44.9677 118.559 46.1546 117.686 47.1106C116.812 48.067 115.744 48.7892 114.483 49.277C113.222 49.7647 111.804 50.0089 110.228 50.0089C108.666 50.0089 107.255 49.7647 105.994 49.277C104.733 48.7892 103.662 48.067 102.781 47.1106C101.9 46.1546 101.22 44.9677 100.74 43.5498C100.259 42.1322 100.02 40.4934 100.02 38.6336V31.7491C100.02 29.8895 100.256 28.2511 100.729 26.8332C101.202 25.4156 101.879 24.2285 102.76 23.2721C103.641 22.3161 104.708 21.5941 105.962 21.1059C107.215 20.6182 108.623 20.374 110.185 20.374C111.761 20.374 113.179 20.6182 114.44 21.1059C115.701 21.5941 116.772 22.3161 117.653 23.2721C118.535 24.2285 119.212 25.4156 119.684 26.8332C120.157 28.2511 120.394 29.8895 120.394 31.7491V38.6336Z" fill="black"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M137.01 35.3006L142.385 27.7822H147.925L139.968 38.7311L148.175 50.0084H142.655L137.073 42.2232L131.511 50.0084H125.949L134.156 38.7311L126.199 27.7822H131.719L137.01 35.3006Z" fill="black"/> +<rect width="36" height="35.9999" fill="black" fill-opacity="0" transform="scale(2)"/> +<rect width="22.5701" height="11.8348" fill="black" fill-opacity="0" transform="translate(18.0508 48.3301) scale(2)"/> +<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="18" y="48" width="46" height="24"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0508 71.9997H63.191V48.3301H18.0508V71.9997Z" fill="white"/> +</mask> +<g mask="url(#mask0)"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0508 67.1184C22.6601 69.8386 27.9385 71.5522 33.6161 71.9239C41.4577 72.4369 48.8759 70.3221 55.038 66.3361C58.1021 64.354 60.8534 61.9089 63.191 59.0905C61.2524 56.3622 59.1896 53.547 57.0111 50.6788L55.2311 48.3301C52.8884 52.0707 49.5201 55.0686 45.5555 56.9441L39.4742 50.9207L18.0508 67.1184Z" fill="black"/> +</g> +<rect width="11.6916" height="22.7346" fill="black" fill-opacity="0" transform="translate(0 18.6299) scale(2)"/> +<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="18" width="24" height="47"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M0 18.6299V64.099H23.3833V18.6299L0 18.6299Z" fill="white"/> +</mask> +<g mask="url(#mask1)"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M4.72039 18.6299C2.09283 23.2496 0.437543 28.5247 0.0749777 34.193C-0.432648 42.134 1.66198 49.6455 5.60982 55.8826C7.56303 58.9691 9.97065 61.7416 12.7445 64.099C15.4422 62.1375 18.2268 60.0505 21.0641 57.847L23.3833 56.0501C19.6922 53.6805 16.7332 50.2769 14.8817 46.271L20.8743 40.0586L4.72039 18.6299Z" fill="black"/> +</g> +<path fill-rule="evenodd" clip-rule="evenodd" d="M54.0006 4.9803C49.4018 2.20541 44.1346 0.455949 38.4679 0.0772542C30.6434 -0.445638 23.2417 1.71125 17.096 5.77624C14.0546 7.78768 11.3231 10.2669 9 13.123C10.9328 15.9011 12.9892 18.7682 15.1602 21.69L16.9306 24.0783C19.2665 20.2759 22.622 17.2279 26.5714 15.3216L26.5759 15.3196L32.2882 21.07L54.0006 4.9803Z" fill="black"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M67.3574 53.7131C69.9376 49.2175 71.5681 44.0992 71.9269 38.5992C72.4342 30.8203 70.3437 23.4613 66.4027 17.3486C64.4432 14.3092 62.0259 11.58 59.2397 9.26074C56.5427 11.1839 53.7595 13.2301 50.9238 15.3915L48.6016 17.1569C52.3061 19.4848 55.2749 22.8335 57.1283 26.7755L57.1639 26.8575L51.3951 32.7948L67.3574 53.7131Z" fill="black"/> +<path d="M164.041 38.1836C164.041 34.6172 164.886 31.7526 166.576 29.5898C168.266 27.4128 170.479 26.3242 173.215 26.3242C175.936 26.3242 178.092 27.2552 179.682 29.1172V17H183.656V50H180.004L179.811 47.5078C178.221 49.4557 176.008 50.4297 173.172 50.4297C170.479 50.4297 168.281 49.3268 166.576 47.1211C164.886 44.9154 164.041 42.0365 164.041 38.4844V38.1836ZM168.016 38.6348C168.016 41.2702 168.56 43.3327 169.648 44.8223C170.737 46.3118 172.241 47.0566 174.16 47.0566C176.681 47.0566 178.521 45.9251 179.682 43.6621V32.9844C178.493 30.793 176.667 29.6973 174.203 29.6973C172.255 29.6973 170.737 30.4492 169.648 31.9531C168.56 33.457 168.016 35.6842 168.016 38.6348ZM188.791 38.1621C188.791 35.8848 189.235 33.8366 190.123 32.0176C191.025 30.1986 192.271 28.7949 193.861 27.8066C195.465 26.8184 197.292 26.3242 199.34 26.3242C202.505 26.3242 205.062 27.4199 207.01 29.6113C208.972 31.8027 209.953 34.7174 209.953 38.3555V38.6348C209.953 40.8978 209.516 42.9316 208.643 44.7363C207.783 46.5267 206.544 47.9232 204.926 48.9258C203.322 49.9284 201.474 50.4297 199.383 50.4297C196.232 50.4297 193.675 49.334 191.713 47.1426C189.765 44.9512 188.791 42.0508 188.791 38.4414V38.1621ZM192.787 38.6348C192.787 41.2129 193.382 43.2826 194.57 44.8438C195.773 46.4049 197.378 47.1855 199.383 47.1855C201.402 47.1855 203.007 46.3978 204.195 44.8223C205.384 43.2324 205.979 41.0124 205.979 38.1621C205.979 35.6126 205.37 33.5501 204.152 31.9746C202.949 30.3848 201.345 29.5898 199.34 29.5898C197.378 29.5898 195.795 30.3704 194.592 31.9316C193.389 33.4928 192.787 35.7272 192.787 38.6348ZM224.262 47.1855C225.68 47.1855 226.919 46.7559 227.979 45.8965C229.038 45.0371 229.626 43.9629 229.74 42.6738H233.5C233.428 44.0059 232.97 45.2734 232.125 46.4766C231.28 47.6797 230.148 48.6393 228.73 49.3555C227.327 50.0716 225.837 50.4297 224.262 50.4297C221.096 50.4297 218.576 49.377 216.699 47.2715C214.837 45.1517 213.906 42.2585 213.906 38.5918V37.9258C213.906 35.6628 214.322 33.6504 215.152 31.8887C215.983 30.127 217.172 28.7591 218.719 27.7852C220.28 26.8112 222.12 26.3242 224.24 26.3242C226.847 26.3242 229.01 27.1048 230.729 28.666C232.462 30.2272 233.385 32.2539 233.5 34.7461H229.74C229.626 33.2422 229.053 32.0104 228.021 31.0508C227.005 30.0768 225.744 29.5898 224.24 29.5898C222.221 29.5898 220.652 30.3203 219.535 31.7812C218.432 33.2279 217.881 35.3262 217.881 38.0762V38.8281C217.881 41.5065 218.432 43.569 219.535 45.0156C220.638 46.4622 222.214 47.1855 224.262 47.1855ZM251.504 43.834C251.504 42.7598 251.096 41.929 250.279 41.3418C249.477 40.7402 248.066 40.2246 246.047 39.7949C244.042 39.3652 242.445 38.8496 241.256 38.248C240.081 37.6465 239.208 36.9303 238.635 36.0996C238.076 35.2689 237.797 34.2806 237.797 33.1348C237.797 31.2298 238.599 29.6185 240.203 28.3008C241.822 26.9831 243.884 26.3242 246.391 26.3242C249.026 26.3242 251.16 27.0046 252.793 28.3652C254.44 29.7259 255.264 31.4661 255.264 33.5859H251.268C251.268 32.4974 250.802 31.5592 249.871 30.7715C248.954 29.9837 247.794 29.5898 246.391 29.5898C244.944 29.5898 243.812 29.9049 242.996 30.5352C242.18 31.1654 241.771 31.9889 241.771 33.0059C241.771 33.9655 242.151 34.6888 242.91 35.1758C243.669 35.6628 245.037 36.1283 247.014 36.5723C249.005 37.0163 250.616 37.5462 251.848 38.1621C253.079 38.778 253.989 39.5228 254.576 40.3965C255.178 41.2559 255.479 42.3086 255.479 43.5547C255.479 45.6315 254.648 47.3001 252.986 48.5605C251.325 49.8066 249.169 50.4297 246.52 50.4297C244.658 50.4297 243.01 50.1003 241.578 49.4414C240.146 48.7826 239.021 47.8659 238.205 46.6914C237.403 45.5026 237.002 44.2207 237.002 42.8457H240.977C241.048 44.1777 241.578 45.2376 242.566 46.0254C243.569 46.7988 244.887 47.1855 246.52 47.1855C248.023 47.1855 249.227 46.8848 250.129 46.2832C251.046 45.6673 251.504 44.8509 251.504 43.834Z" fill="#666666"/> +</svg> diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index ed1a6044a..95b9bda62 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -78,5 +78,24 @@ "WEBSITE": "网站", "DEVELOPERS": "首页", "HOME": "Rocket.chat", - "ROCKETCHAT": "开发人员" + "ROCKETCHAT": "开发人员", + "BUILD_A_RELAYER": "build a relayer", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Access the shared liquidity pool using the Standard Relayer API", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github", + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index ac8e4900a..465bd49b4 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -83,11 +83,30 @@ "HOME": "home", "ROCKETCHAT": "rocket.chat", "TRADE_CALL_TO_ACTION": "trade on 0x", + "BUILD_A_RELAYER": "build a relayer", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github", + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", "OUR_MISSION_AND_VALUES": "our mission & values", "GAMING_AND_COLLECTABLES": "gaming & collectables", "GAMING_AND_COLLECTABLES_DESCRIPTION": "artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality to give access and the ability to build marketplaces for NFT trading.", "ORDER_BOOKS": "order books", "ORDER_BOOKS_DESCRIPTION": - "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets." + "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets.", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 8892f2dee..5485e5583 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -78,5 +78,24 @@ "WEBSITE": "Website", "HOME": "홈", "ROCKETCHAT": "Rocket.chat", - "DEVELOPERS": "개발자" + "DEVELOPERS": "개발자", + "BUILD_A_RELAYER": "build a relayer", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github", + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index 41a7a990d..a2e2a8cef 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -78,5 +78,24 @@ "WEBSITE": "Веб-сайт", "DEVELOPERS": "Домашняя страница", "HOME": "Rocket.chat", - "ROCKETCHAT": "Для разработчиков" + "ROCKETCHAT": "Для разработчиков", + "BUILD_A_RELAYER": "build a relayer", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github", + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index 7780190ac..acbc59c3d 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -79,5 +79,24 @@ "WEBSITE": "website", "DEVELOPERS": "inicio", "HOME": "rocket.chat", - "ROCKETCHAT": "desarrolladores" + "ROCKETCHAT": "desarrolladores", + "BUILD_A_RELAYER": "build a relayer", + "BUILD_A_RELAYER_DESCRIPTION": "Learn how to build your own 0x relayer from scratch", + "DEVELOP_ON_ETHEREUM": "develop on Ethereum", + "DEVELOP_ON_ETHEREUM_DESCRIPTION": "Learn more about building applications ontop of Ethereum", + "ORDER_BASICS": "0x order basics", + "ORDER_BASICS_DESCRIPTION": "Tutorial on how to create, validate and fill an order using 0x", + "USE_NETWORKED_LIQUIDITY": "use networked liquidity", + "USE_NETWORKED_LIQUIDITY_DESCRIPTION": "Learn how to tap into networked liquidity using the Standard Relayer API", + "VIEW_ALL_DOCUMENTATION": "view all documentation", + "SANDBOX": "0x.js sandbox", + "GITHUB": "github", + "LIVE_CHAT": "live chat", + "LIBRARIES_AND_TOOLS": "Libraries & Tools", + "LIBRARIES_AND_TOOLS_DESCRIPTION": + "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", + "MORE": "more", + "START_BUILDING_ON_0X": "Start building on 0x", + "START_BUILDING_ON_0X_DESCRIPTION": + "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." } diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 8955bbc30..efb5aef23 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -1,4 +1,3 @@ -import { ZeroEx } from '0x.js'; import { BlockRange, ContractWrappers, @@ -8,9 +7,9 @@ import { ExchangeEvents, ExchangeFillEventArgs, IndexedFilterValues, -} from '@0xproject/contract-wrappers'; -import { assetDataUtils, orderHashUtils, signatureUtils } from '@0xproject/order-utils'; -import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +} from '@0x/contract-wrappers'; +import { assetDataUtils, orderHashUtils, signatureUtils } from '@0x/order-utils'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import { ledgerEthereumBrowserClientFactoryAsync, LedgerSubprovider, @@ -19,10 +18,10 @@ import { RPCSubprovider, SignerSubprovider, Web3ProviderEngine, -} from '@0xproject/subproviders'; -import { SignedOrder, Token as ZeroExToken } from '@0xproject/types'; -import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +} from '@0x/subproviders'; +import { SignedOrder, Token as ZeroExToken } from '@0x/types'; +import { BigNumber, intervalUtils, logUtils, promisify } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types'; import * as _ from 'lodash'; import * as moment from 'moment'; @@ -53,6 +52,7 @@ import { backendClient } from 'ts/utils/backend_client'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { fakeTokenRegistry } from 'ts/utils/fake_token_registry'; import { tokenAddressOverrides } from 'ts/utils/token_address_overrides'; import { utils } from 'ts/utils/utils'; import FilterSubprovider = require('web3-provider-engine/subproviders/filters'); @@ -74,7 +74,6 @@ 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; @@ -228,8 +227,9 @@ export class Blockchain { } } public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); - const tokenIfExists = await this._zeroEx.tokenRegistry.getTokenIfExistsAsync(tokenAddress); + const tokens = fakeTokenRegistry[this.networkId]; + const tokenIfExists = _.find(tokens, { address: tokenAddress }); + // HACK: Override token addresses on testnets const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId]; let isTokenAddressInOverrides = false; @@ -768,8 +768,7 @@ export class Blockchain { if (this.networkId === constants.NETWORK_ID_MAINNET) { tokenRegistryTokens = await backendClient.getTokenInfosAsync(); } else { - utils.assert(!_.isUndefined(this._zeroEx), 'ZeroEx must be instantiated.'); - tokenRegistryTokens = await this._zeroEx.tokenRegistry.getTokensAsync(); + tokenRegistryTokens = fakeTokenRegistry[this.networkId]; const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId]; if (!_.isUndefined(tokenAddressOverrides)) { // HACK: Override token addresses on testnets @@ -865,11 +864,6 @@ export class Blockchain { networkId, }; this._contractWrappers = new ContractWrappers(provider, contractWrappersConfig); - 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/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts index 39ed8b08b..835932dcd 100644 --- a/packages/website/ts/blockchain_watcher.ts +++ b/packages/website/ts/blockchain_watcher.ts @@ -1,5 +1,5 @@ -import { BigNumber, intervalUtils, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index 18c060991..a0114d898 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,4 +1,4 @@ -import { colors, Networks } from '@0xproject/react-shared'; +import { colors, Networks } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; 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 f2cfb279a..9b9421f1a 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index fbc6c868b..a9f591150 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -1,6 +1,6 @@ -import { colors, constants as sharedConstants } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, constants as sharedConstants } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index ef295762b..326df2a8c 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index 2754b153f..5f6927cef 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; 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 afbb30b82..bbec1d649 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx new file mode 100644 index 000000000..2840d5960 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -0,0 +1,20 @@ +import { Link } from '@0x/react-shared'; +import * as React from 'react'; +import { WebsitePaths } from 'ts/types'; + +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => { + return ( + <Link to={WebsitePaths.Docs}> + <img src="/images/docs_logo.svg" height={props.height} /> + </Link> + ); +}; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx new file mode 100644 index 000000000..2054d0860 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -0,0 +1,108 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import Drawer from 'material-ui/Drawer'; +import * as React from 'react'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, ScreenWidths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsTopBarProps { + location: Location; + screenWidth: ScreenWidths; + translate: Translate; + sidebar?: React.ReactNode; +} + +interface DocsTopBarState { + isDrawerOpen: boolean; +} + +export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { + constructor(props: DocsTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + return ( + <Container height={80}> + <Container + className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start" + width="100%" + > + <Container className="sm-hide xs-hide"> + <Container className="flex items-center justify-between right" width="300px"> + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} + </Container> + </Container> + <Container className="lg-hide md-hide"> + <Container paddingTop="6px"> + <DocsLogo height={30} /> + </Container> + </Container> + <Container className="md-hide lg-hide absolute" right="18px" top="12px"> + <i + className="zmdi zmdi-menu" + style={{ + color: colors.grey700, + fontSize: 30, + cursor: 'pointer', + }} + onClick={this._onMenuButtonClick.bind(this)} + /> + </Container> + </Container> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} /> + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} + </Container> + ); + } + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Container className="flex items-center" paddingLeft="4px"> + <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Text> + </Container> + </Link> + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + <Drawer + open={this.state.isDrawerOpen} + docked={false} + openSecondary={true} + onRequestChange={this._onMenuButtonClick.bind(this)} + > + <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}> + {this.props.sidebar} + </Container> + </Drawer> + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx new file mode 100644 index 000000000..caabaf874 --- /dev/null +++ b/packages/website/ts/components/documentation/overview_content.tsx @@ -0,0 +1,134 @@ +import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; +import { Element as ScrollElement } from 'react-scroll'; +import { TutorialButton } from 'ts/components/documentation/tutorial_button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, Package, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface OverviewContentProps { + translate: Translate; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; +} + +export interface OverviewContentState {} + +export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> { + public render(): React.ReactNode { + return ( + <Container> + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} + <Container paddingTop="12px"> + {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} + <Container marginTop="36px"> + {_.map(this.props.tutorials, tutorialInfo => ( + <ScrollElement + name={sharedUtils.getIdFromName( + this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + )} + key={`tutorial-${tutorialInfo.link.title}`} + > + <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} /> + </ScrollElement> + ))} + </Container> + </Container> + <Container marginTop="32px" paddingBottom="100px"> + {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + <Container paddingTop="12px"> + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + )} + <Container marginTop="36px"> + {_.map(this.props.categoryToPackages, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + </Container> + </Container> + </Container> + </Container> + ); + } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( + <Container key={`category-${category}`}> + <Text fontSize="18px">{category}</Text> + <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> + </Container> + ); + } + private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.link.title); + return ( + <ScrollElement name={id} key={`package-${pkg.link.title}`}> + <Container className="pb2"> + <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> + <Container className="clearfix mt2 pt1"> + <Container className="md-col lg-col md-col-4 lg-col-4"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {pkg.link.title} + </Text> + </Link> + </Container> + <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> + <Text fontColor={colors.grey700}> + <ReactMarkdown + source={pkg.description} + renderers={{ + link: MarkdownLinkBlock, + paragraph: 'span', + }} + /> + </Text> + </Container> + <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> + <Container position="absolute" right="0px"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Container className="flex"> + <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> + <Container paddingTop="1px" paddingLeft="6px"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 18, color: colors.lightLinkBlue }} + /> + </Container> + </Container> + </Link> + </Container> + </Container> + </Container> + </Container> + </ScrollElement> + ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + <Container paddingTop="30px"> + <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold"> + {text} + </Text> + </Container> + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono"> + {text} + </Text> + ); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx new file mode 100644 index 000000000..fece2704b --- /dev/null +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { ScreenWidths } from 'ts/types'; + +export interface SidebarHeaderProps { + screenWidth: ScreenWidths; + title: string; + docsVersion?: string; + availableDocVersions?: string[]; + onVersionSelected?: () => void; +} + +export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ + screenWidth, + title, + docsVersion, + availableDocVersions, + onVersionSelected, +}) => { + return ( + <Container> + <Container className="flex justify-bottom"> + <Container className="left pl1" width="150px"> + <Text + fontColor={colors.lightLinkBlue} + fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} + fontWeight="bold" + > + {title} + </Text> + </Container> + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( + <div className="right" style={{ alignSelf: 'flex-end' }}> + <VersionDropDown + selectedVersion={docsVersion} + versions={availableDocVersions} + onVersionSelected={onVersionSelected} + /> + </div> + )} + </Container> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop="20px" + marginBottom="27px" + /> + </Container> + ); +}; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx new file mode 100644 index 000000000..b747ef598 --- /dev/null +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -0,0 +1,59 @@ +import { colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +import { styled } from 'ts/style/theme'; + +export interface TutorialButtonProps { + className?: string; + translate: Translate; + tutorialInfo: TutorialInfo; +} + +const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => ( + <Container className={className}> + <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}> + <div className="flex relative"> + <div className="col col-1 flex items-center sm-pr3"> + <img src={tutorialInfo.iconUrl} height={40} /> + </div> + <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor={colors.grey750} fontSize="16"> + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="col col-1 flex items-center justify-end"> + <div className="right"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> + </div> + </div> + </div> + </Link> + </Container> +); + +export const TutorialButton = styled(PlainTutorialButton)` + border-radius: 4px; + border: 1px solid ${colors.grey325}; + background-color: ${colors.white}; + &:hover { + border: 1px solid ${colors.lightLinkBlue}; + background-color: ${colors.lightestBlue}; + } + padding: 20px; + margin-bottom: 15px; +`; + +TutorialButton.defaultProps = {}; + +TutorialButton.displayName = 'TutorialButton'; diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx new file mode 100644 index 000000000..a1c8b0547 --- /dev/null +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -0,0 +1,80 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { styled } from 'ts/style/theme'; + +interface ActiveNodeProps { + className?: string; + selectedVersion: string; +} + +const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => ( + <Container className={className}> + <Container className="flex justify-center"> + <Text fontColor={colors.grey700} fontSize="12px"> + v {selectedVersion} + </Text> + <Container paddingLeft="6px"> + <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} /> + </Container> + </Container> + </Container> +); + +const ActiveNode = styled(PlainActiveNode)` + cursor: pointer; + border: 2px solid ${colors.beigeWhite}; + border-radius: 4px; + padding: 4px 6px 4px 8px; +`; + +interface VersionDropDownProps { + selectedVersion: string; + versions: string[]; + onVersionSelected: (semver: string) => void; +} + +interface VersionDropDownState {} + +export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { + public render(): React.ReactNode { + const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />; + return ( + <DropDown + activateEvent={DropdownMouseEvent.Click} + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'middle', vertical: 'top' }} + popoverStyle={{ borderRadius: 4 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const items = _.map(this.props.versions, version => { + const isSelected = version === this.props.selectedVersion; + return ( + <Container key={`dropdown-items-${version}`}> + <Button + borderRadius="0px" + padding="0.8em 0em" + width="100%" + isDisabled={isSelected} + onClick={this._onClick.bind(this, version)} + > + v {version} + </Button> + </Container> + ); + }); + const dropdownMenu = <Container width="88px">{items}</Container>; + return dropdownMenu; + } + private _onClick(selectedVersion: string): void { + this.props.onVersionSelected(selectedVersion); + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..b279566e0 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,164 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { DropDown } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const gettingStartedKeyToLinkInfo1: ALink[] = [ + { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, +]; +const gettingStartedKeyToLinkInfo2: ALink[] = [ + { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + title: Key.UseNetworkedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; +const popularDocsToLinkInfos: ALink[] = [ + { + title: Key.ZeroExJs, + to: WebsitePaths.ZeroExJs, + }, + { + title: Key.Connect, + to: WebsitePaths.Connect, + }, + { + title: Key.SmartContract, + to: WebsitePaths.SmartContracts, + }, +]; +const usefulLinksToLinkInfo: ALink[] = [ + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Github, + to: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, + }, + { + title: Key.Whitepaper, + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, + }, +]; + +interface DevelopersDropDownProps { + location: Location; + translate: Translate; + menuItemStyles: React.CSSProperties; + menuIconStyle: React.CSSProperties; +} + +interface DevelopersDropDownState {} + +export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> { + public render(): React.ReactNode { + const activeNode = ( + <Container className="flex relative" paddingRight="10"> + <Text fontColor={this.props.menuIconStyle.color}> + {this.props.translate.get(Key.Developers, Deco.Cap)} + </Text> + </Container> + ); + return ( + <DropDown + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + style={this.props.menuItemStyles} + popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const dropdownMenu = ( + <Container> + <Container padding="1.75rem"> + {this._renderTitle('Getting started')} + <Container className="flex"> + <Container className="pr4 mr2"> + {this._renderLinkSection(gettingStartedKeyToLinkInfo1)} + </Container> + <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> + </Container> + </Container> + <Container width="100%" height="1px" backgroundColor={colors.grey300} /> + <Container className="flex" padding="1.75rem"> + <Container className="pr4 mr2"> + <Container>{this._renderTitle('Popular docs')}</Container> + <Container>{this._renderLinkSection(popularDocsToLinkInfos)}</Container> + </Container> + <Container> + <Container>{this._renderTitle('Useful links')}</Container> + <Container>{this._renderLinkSection(usefulLinksToLinkInfo)}</Container> + </Container> + </Container> + <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}> + <Container + padding="0.9rem" + backgroundColor={colors.lightBgGrey} + borderBottomLeftRadius={4} + borderBottomRightRadius={4} + > + <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center"> + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + </Text> + </Container> + </Link> + </Container> + ); + return dropdownMenu; + } + private _renderTitle(title: string): React.ReactNode { + return ( + <Container paddingBottom="12px"> + <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> + {title.toUpperCase()} + </Text> + </Container> + ); + } + private _renderLinkSection(links: ALink[]): React.ReactNode { + const numLinks = links.length; + let i = 0; + const renderLinks = _.map(links, (link: ALink) => { + const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); + const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; + let to = link.to; + if (isWikiLink && isOnWiki) { + to = `${link.to.split('#')[1]}`; + } + i++; + const isLast = i === numLinks; + const linkText = this.props.translate.get(link.title as Key, Deco.Cap); + return ( + <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}> + <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}> + <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}> + {linkText} + </Text> + </Link> + </Container> + ); + }); + return <Container>{renderLinks}</Container>; + } +} diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx index 2fd2785d1..df2d72edc 100644 --- a/packages/website/ts/components/dropdowns/network_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants } from '@0xproject/react-shared'; +import { constants as sharedConstants } from '@0x/react-shared'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index b0091a1c1..536ba924b 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -1,5 +1,5 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 0b282b2a1..2af4252bd 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -1,6 +1,6 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 3c3155349..ec73e4199 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,14 +1,13 @@ -import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as accounting from 'accounting'; import * as _ from 'lodash'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import Divider from 'material-ui/Divider'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog'; import { FillOrderJSON } from 'ts/components/fill_order_json'; @@ -324,7 +323,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return ( <div> Order successfully filled. See the trade details in your{' '} - <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}> + <Link to={`${WebsitePaths.Portal}/trades`} fontColor={colors.white}> trade history </Link> </div> diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx index 1ecc426bd..41413eac2 100644 --- a/packages/website/ts/components/fill_order_json.tsx +++ b/packages/website/ts/components/fill_order_json.tsx @@ -1,5 +1,5 @@ -import { generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { BigNumber } from '@0xproject/utils'; +import { generatePseudoRandomSalt } from '@0x/order-utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index 4821aaabe..430abd013 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/flash_messages/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx index f76e05fe1..b895126dc 100644 --- a/packages/website/ts/components/flash_messages/asset_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx @@ -1,6 +1,6 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx index 2a6d2a64b..b1d909baa 100644 --- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx +++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 6dcb5a0e9..dfedcba55 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,31 +1,17 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; + import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface MenuItemsBySection { - [sectionName: string]: FooterMenuItem[]; -} - -interface FooterMenuItem { - title: string; - path?: string; - isExternal?: boolean; -} - const ICON_DIMENSION = 16; -const linkStyle = { - color: colors.white, - cursor: 'pointer', -}; - const languageToMenuTitle = { [Language.English]: 'English', [Language.Russian]: 'Русский', @@ -51,76 +37,74 @@ export class Footer extends React.Component<FooterProps, FooterState> { }; } public render(): React.ReactNode { - const menuItemsBySection: MenuItemsBySection = { + const sectionNameToLinks: ObjectMap<ALink[]> = { [Key.Documentation]: [ { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, + { title: '0x.js', - path: WebsitePaths.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, { title: this.props.translate.get(Key.SmartContracts, Deco.Cap), - path: WebsitePaths.SmartContracts, + to: WebsitePaths.SmartContracts, }, { title: this.props.translate.get(Key.Connect, Deco.Cap), - path: WebsitePaths.Connect, + to: WebsitePaths.Connect, }, { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), - path: WebsitePaths.Whitepaper, - isExternal: true, + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), - path: WebsitePaths.Wiki, - }, - { - title: this.props.translate.get(Key.Faq, Deco.Cap), - path: WebsitePaths.FAQ, + to: WebsitePaths.Wiki, }, ], [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - isExternal: true, - path: constants.URL_ZEROEX_CHAT, + to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - isExternal: true, - path: constants.URL_BLOG, + to: constants.URL_BLOG, + shouldOpenInNewTab: true, }, { title: 'Twitter', - isExternal: true, - path: constants.URL_TWITTER, + to: constants.URL_TWITTER, + shouldOpenInNewTab: true, }, { title: 'Reddit', - isExternal: true, - path: constants.URL_REDDIT, + to: constants.URL_REDDIT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - isExternal: true, - path: constants.URL_DISCOURSE_FORUM, + to: constants.URL_DISCOURSE_FORUM, + shouldOpenInNewTab: true, }, ], [Key.Organization]: [ { title: this.props.translate.get(Key.About, Deco.Cap), - isExternal: false, - path: WebsitePaths.About, + to: WebsitePaths.About, }, { title: this.props.translate.get(Key.Careers, Deco.Cap), - isExternal: false, - path: WebsitePaths.Careers, + to: WebsitePaths.Careers, }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - isExternal: true, - path: 'mailto:team@0xproject.com', + to: 'mailto:team@0xproject.com', + shouldOpenInNewTab: true, }, ], }; @@ -160,19 +144,19 @@ export class Footer extends React.Component<FooterProps, FooterState> { <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Documentation)} - {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Community)} - {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Organization)} - {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))} </div> </div> </div> @@ -187,7 +171,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _renderMenuItem(item: FooterMenuItem): React.ReactNode { + private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', @@ -195,30 +179,26 @@ export class Footer extends React.Component<FooterProps, FooterState> { Reddit: 'reddit.png', [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', }; - const iconIfExists = titleToIcon[item.title]; + const iconIfExists = titleToIcon[link.title]; return ( - <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> - {item.isExternal ? ( - <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}> + <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> + <Link + to={link.to} + shouldOpenInNewTab={link.shouldOpenInNewTab} + fontColor={colors.white} + className="text-decoration-none" + > + <div> {!_.isUndefined(iconIfExists) ? ( <div className="inline-block"> <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div> - <div className="table-cell">{item.title}</div> + <div className="table-cell">{link.title}</div> </div> ) : ( - item.title + link.title )} - </a> - ) : ( - <Link to={item.path} style={linkStyle} className="text-decoration-none"> - <div> - {!_.isUndefined(iconIfExists) && ( - <div className="pr1">{this._renderIcon(iconIfExists)}</div> - )} - {item.title} - </div> - </Link> - )} + </div> + </Link> </div> ); } diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 761db7517..f5560cfa7 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index ec153c005..8afbee977 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,7 +1,7 @@ -import { assetDataUtils, generatePseudoRandomSalt, 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 { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0x/order-utils'; +import { colors } from '@0x/react-shared'; +import { Order as ZeroExOrder } from '@0x/types'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index 3d7eda84c..b8cd88b18 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as moment from 'moment'; diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index 39ec72f8a..1a71f8081 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { addressUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { addressUtils } from '@0x/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 39d2e3030..fd7d3b174 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index eb01e3ea6..83f263842 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index 3a7905442..6799e54bf 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index 5417ce715..3e43c1c07 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import DatePicker from 'material-ui/DatePicker'; import TimePicker from 'material-ui/TimePicker'; diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 5125ec4de..73b6615d4 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -1,6 +1,6 @@ -import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils'; -import { Styles } from '@0xproject/react-shared'; -import { Order } from '@0xproject/types'; +import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; +import { Styles } from '@0x/react-shared'; +import { Order } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index db093fb68..fded3a9dd 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,9 +1,8 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; @@ -112,7 +111,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok Insufficient allowance.{' '} <Link to={`${WebsitePaths.Portal}/account`} - style={{ cursor: 'pointer', color: colors.darkestGrey }} + textDecoration="underline" + fontColor={colors.darkestGrey} > Set allowance </Link> diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index 0bd36781e..c3c2d8b37 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Paper from 'material-ui/Paper'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index ca71fcd50..1d21e5a85 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx index 1035d4ad9..173ba9a97 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index e1b0f304b..384bf7154 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as _ from 'lodash'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 522687758..6adcec0b1 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { RouteComponentProps, withRouter } from 'react-router'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import { Blockchain } from 'ts/blockchain'; import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index e4332de75..37eef867b 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index a2a53a523..f33681835 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -1,4 +1,4 @@ -import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils'; +import { BigNumber, fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index ca35abc2b..bea69bb95 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,5 @@ -import { Styles } from '@0xproject/react-shared'; +import { Link, Styles } from '@0x/react-shared'; import * as React from 'react'; -import { Link } from 'react-router-dom'; - import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; @@ -27,7 +25,7 @@ const styles: Styles = { export const BackButton = (props: BackButtonProps) => { return ( <div style={{ height: 65, paddingTop: 25 }}> - <Link to={props.to} style={{ textDecoration: 'none' }}> + <Link to={props.to}> <Island className="flex right" style={styles.backButton}> <div style={{ marginLeft: 12 }}> <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} /> diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index a6707e86c..7280a6102 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; @@ -39,7 +39,7 @@ export interface DrawerMenuProps { } export const DrawerMenu = (props: DrawerMenuProps) => { const relayerItemEntry = { - to: `${WebsitePaths.Portal}`, + to: WebsitePaths.Portal, labelText: 'Relayer ecosystem', iconName: 'zmdi-portable-wifi', }; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 39dab77f5..d59101686 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,7 +1,7 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { MenuItem } from 'ts/components/ui/menu_item'; +import { CustomMenuItem } from 'ts/components/ui/custom_menu_item'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; @@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { {_.map(props.menuItemEntries, entry => { const isSelected = entry.to === props.selectedPath; return ( - <MenuItem key={entry.to} to={entry.to}> + <CustomMenuItem key={entry.to} to={entry.to}> <MenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={isSelected} theme={props.theme} /> - </MenuItem> + </CustomMenuItem> ); })} </div> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index b42954f60..2299881c4 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,9 +1,9 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -18,7 +18,7 @@ import { Loading } from 'ts/components/portal/loading'; import { Menu, MenuTheme } from 'ts/components/portal/menu'; import { Section } from 'ts/components/portal/section'; import { TextHeader } from 'ts/components/portal/text_header'; -import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; +import { RelayerIndex, RelayerIndexCellStyle } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; @@ -317,7 +317,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { }; return ( <Section - header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />} + header={<BackButton to={WebsitePaths.Portal} labelText="back to Relayers" />} body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />} /> ); @@ -389,9 +389,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { </Container> ); return !shouldStartOnboarding ? ( - <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}> - {startOnboarding} - </Link> + <Link to={`${WebsitePaths.Portal}/account`}>{startOnboarding}</Link> ) : ( startOnboarding ); @@ -541,6 +539,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private _renderRelayerIndexSection(): React.ReactNode { const isMobile = utils.isMobileWidth(this.props.screenWidth); + // TODO(bmillman): revert RelayerIndex cellStyle to Expanded once data pipeline is tracking v2 volume return ( <Section header={!isMobile && <TextHeader labelText="0x Relayers" />} @@ -551,7 +550,11 @@ export class Portal extends React.Component<PortalProps, PortalState> { {this._renderStartOnboarding()} </Container> )} - <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} /> + <RelayerIndex + networkId={this.props.networkId} + screenWidth={this.props.screenWidth} + cellStyle={RelayerIndexCellStyle.Minimized} + /> </Container> } /> diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx index 853da3a29..b6045b832 100644 --- a/packages/website/ts/components/portal/text_header.tsx +++ b/packages/website/ts/components/portal/text_header.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 193dd237a..7f1b4ebb4 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import { GridTile as PlainGridTile } from 'material-ui/GridList'; import * as React from 'react'; @@ -14,9 +14,15 @@ import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; import { utils } from 'ts/utils/utils'; +export enum RelayerGridTileStyle { + Expanded = 0, + Minimized, +} + export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; networkId: number; + style: RelayerGridTileStyle; } const styles: Styles = { @@ -30,10 +36,14 @@ const styles: Styles = { height: '100%', boxSizing: 'border-box', }, - header: { + expandedHeader: { height: '50%', width: '100%', }, + minimizedHeader: { + height: '100%', + width: '100%', + }, body: { height: '50%', width: '100%', @@ -75,10 +85,12 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) ? props.relayerInfo.primaryColor : FALLBACK_PRIMARY_COLOR; + const isExpanded = props.style === RelayerGridTileStyle.Expanded; + const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader; return ( <Island style={styles.root} Component={GridTile}> <div style={styles.innerDiv} onClick={onClick}> - <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}> + <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}> <Image className="mx-auto" src={props.relayerInfo.logoImgUrl} @@ -86,21 +98,23 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( height={RELAYER_ICON_HEIGHT} /> </div> - <div style={styles.body}> - <div className="pb1" style={styles.relayerNameLabel}> - {props.relayerInfo.name} - </div> - <Section titleText="Weekly Trade Volume"> - {!_.isUndefined(weeklyTxnVolume) && ( - <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> - )} - </Section> - <Container marginTop="10px"> - <Section titleText="Top Tokens"> - {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} + {isExpanded && ( + <div style={styles.body}> + <div className="pb1" style={styles.relayerNameLabel}> + {props.relayerInfo.name} + </div> + <Section titleText="Weekly Trade Volume"> + {!_.isUndefined(weeklyTxnVolume) && ( + <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> + )} </Section> - </Container> - </div> + <Container marginTop="10px"> + <Section titleText="Top Tokens"> + {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} + </Section> + </Container> + </div> + )} </div> </Island> ); diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 91dbeb27a..e88c20d7e 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; -import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile'; import { Retry } from 'ts/components/ui/retry'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +export enum RelayerIndexCellStyle { + Expanded = 0, + Minimized, +} + export interface RelayerIndexProps { networkId: number; screenWidth: ScreenWidths; + cellStyle: RelayerIndexCellStyle; } interface RelayerIndexState { @@ -18,7 +24,8 @@ interface RelayerIndexState { error?: Error; } -const CELL_HEIGHT = 290; +const CELL_HEIGHT_EXPANDED = 290; +const CELL_HEIGHT_MINIMIZED = 225; const NUMBER_OF_COLUMNS_LARGE = 3; const NUMBER_OF_COLUMNS_MEDIUM = 2; const NUMBER_OF_COLUMNS_SMALL = 2; @@ -61,15 +68,23 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde numberOfRelayers, this._numberOfColumnsForScreenWidth(this.props.screenWidth), ); + const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded; + const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED; + const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized; return ( <GridList - cellHeight={CELL_HEIGHT} + cellHeight={cellHeight} cols={numberOfColumns} padding={GRID_PADDING} style={{ marginTop: -10, marginBottom: 0 }} > {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( - <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} /> + <RelayerGridTile + key={index} + relayerInfo={relayerInfo} + networkId={this.props.networkId} + style={gridTileStyle} + /> ))} </GridList> ); diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index f3787bd27..558d99855 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index 107983dee..27438e5d5 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -1,4 +1,4 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx deleted file mode 100644 index a14ab54f5..000000000 --- a/packages/website/ts/components/sidebar_header.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as React from 'react'; - -interface SidebarHeaderProps { - title: string; - iconUrl: string; -} - -interface SidebarHeaderState {} - -export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> { - public render(): React.ReactNode { - return ( - <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> - <div className="flex" style={{ fontSize: 25 }}> - <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div> - <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> - docs - </div> - </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> - | - </div> - <div className="flex"> - <div> - <img src={this.props.iconUrl} width="22" /> - </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> - {this.props.title} - </div> - </div> - </div> - ); - } -} diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 5965ad9bd..9ba2bad84 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -4,9 +4,9 @@ import { Networks, Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; -import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +} from '@0x/react-shared'; +import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 806eaeea5..c88c29b8e 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index fe2c1fcf9..d5967cd1d 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,23 +1,16 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; -import { - colors, - constants as sharedConstants, - MenuSubsectionsBySection, - NestedSidebarMenu, - Styles, -} from '@0xproject/react-shared'; +import { DocsInfo } from '@0x/react-docs'; +import { ALink, colors, Link, Styles } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; -import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; +import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -41,8 +34,7 @@ export interface TopBarProps { translate: Translate; docsVersion?: string; availableDocVersions?: string[]; - menu?: DocsMenu; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks?: ObjectMap<ALink[]>; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -80,21 +72,6 @@ const styles: Styles = { }, }; -const DOC_WEBSITE_PATHS_TO_KEY = { - [WebsitePaths.SolCov]: Key.SolCov, - [WebsitePaths.SmartContracts]: Key.SmartContracts, - [WebsitePaths.Web3Wrapper]: Key.Web3Wrapper, - [WebsitePaths.SolCompiler]: Key.SolCompiler, - [WebsitePaths.JSONSchemas]: Key.JsonSchemas, - [WebsitePaths.Subproviders]: Key.Subproviders, - [WebsitePaths.ContractWrappers]: Key.ContractWrappers, - [WebsitePaths.Connect]: Key.Connect, - [WebsitePaths.ZeroExJs]: Key.ZeroExJs, - [WebsitePaths.OrderUtils]: Key.OrderUtils, - [WebsitePaths.OrderWatcher]: Key.OrderWatcher, - [WebsitePaths.AssetBuyer]: Key.AssetBuyer, -}; - const DEFAULT_HEIGHT = 68; const EXPANDED_HEIGHT = 75; @@ -130,117 +107,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { ? 'flex mx-auto items-center max-width-4' : 'flex mx-auto items-center'; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - const developerSectionMenuItems = [ - <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" /> - </Link>, - <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SmartContracts, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-standard-relayer-api" - target="_blank" - className="text-decoration-none" - href={constants.URL_STANDARD_RELAYER_API_GITHUB} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)} - /> - </a>, - <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)} - /> - </Link>, - <Link - key="subMenuItem-contractWrappers" - to={WebsitePaths.ContractWrappers} - className="text-decoration-none" - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.ContractWrappers, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-orderUtils" to={WebsitePaths.OrderUtils} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-orderWatcher" to={WebsitePaths.OrderWatcher} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.OrderWatcher, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-asset-buyer" to={WebsitePaths.AssetBuyer} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.AssetBuyer, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-whitePaper" - target="_blank" - className="text-decoration-none" - href={`${WebsitePaths.Whitepaper}`} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)} - /> - </a>, - <a - key="subMenuItem-github" - target="_blank" - className="text-decoration-none" - href={constants.URL_GITHUB_ORG} - > - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" /> - </a>, - ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; @@ -252,15 +118,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { color: isNightVersion ? 'white' : 'black', cursor: 'pointer', }; - const activeNode = ( - <div className="flex relative" style={{ color: menuIconStyle.color }}> - <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> - <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}> - <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} /> - </div> - </div> - ); - const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>; return ( <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} @@ -273,56 +130,45 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { paddingLeft={this.props.paddingLeft} paddingRight={this.props.paddingRight} > - <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> + <Link to={WebsitePaths.Home}> <img src={logoUrl} height="30" /> </Link> <div className="flex-auto" /> {!this._isViewingPortal() && ( <div className={menuClasses}> <div className="flex items-center justify-between"> - <DropDown - activeNode={activeNode} - popoverContent={popoverContent} - anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'middle', vertical: 'top' }} - style={styles.menuItem} - /> - <TopBarMenuItem - title={this.props.translate.get(Key.Wiki, Deco.Cap)} - path={`${WebsitePaths.Wiki}`} - style={styles.menuItem} - isNightVersion={isNightVersion} - isExternal={false} + <DevelopersDropDown + location={this.props.location} + menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }} + translate={this.props.translate} + menuIconStyle={menuIconStyle} /> <TopBarMenuItem title={this.props.translate.get(Key.Blog, Deco.Cap)} path={constants.URL_BLOG} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={true} + shouldOpenInNewTab={true} /> <TopBarMenuItem title={this.props.translate.get(Key.About, Deco.Cap)} - path={`${WebsitePaths.About}`} + path={WebsitePaths.About} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={false} /> <TopBarMenuItem title={this.props.translate.get(Key.Careers, Deco.Cap)} - path={`${WebsitePaths.Careers}`} + path={WebsitePaths.Careers} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={false} /> <TopBarMenuItem title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} - path={`${WebsitePaths.Portal}`} + path={WebsitePaths.Portal} isPrimary={true} style={styles.menuItem} className={`${isExpandedDisplayType && 'md-hide'}`} isNightVersion={isNightVersion} - isExternal={false} /> </div> </div> @@ -379,54 +225,35 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { onRequestChange={this._onMenuButtonClick.bind(this)} > <div className="clearfix"> - {this._renderDocsMenu()} - {this._renderWiki()} <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> {this.props.translate.get(Key.Website, Deco.Cap)} </div> - <Link to={WebsitePaths.Home} className="text-decoration-none"> + <Link to={WebsitePaths.Home}> <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> </Link> - <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> - <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem> + <Link to={WebsitePaths.Docs}> + <MenuItem className="py2">{this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> </Link> - {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => { - if (!this._doesUrlInclude(websitePath)) { - return ( - <Link - key={`drawer-menu-item-${websitePath}`} - to={websitePath} - className="text-decoration-none" - > - <MenuItem className="py2"> - {this.props.translate.get(key, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - ); - } - return null; - })} {!this._isViewingPortal() && ( - <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> + <Link to={WebsitePaths.Portal}> <MenuItem className="py2"> {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} </MenuItem> </Link> )} - <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> + <Link to={WebsitePaths.Whitepaper} shouldOpenInNewTab={true}> <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem> - </a> - <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> + </Link> + <Link to={WebsitePaths.About}> <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem> </Link> - <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none"> + <Link to={WebsitePaths.Careers}> <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem> </Link> - <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> + <Link to={constants.URL_BLOG} shouldOpenInNewTab={true}> <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem> - </a> - <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> + </Link> + <Link to={WebsitePaths.FAQ}> <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}> {this.props.translate.get(Key.Faq, Deco.Cap)} </MenuItem> @@ -435,49 +262,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </Drawer> ); } - private _renderDocsMenu(): React.ReactNode { - const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => { - return this._doesUrlInclude(websitePath); - }); - // HACK: We need to make sure the SCROLL_CONTAINER is loaded before rendering the Sidebar - // because the sidebar renders `react-scroll` links which depend on the scroll container already - // being rendered. - const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID); - if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) { - return undefined; - } - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - topLevelMenu={this.props.menu} - menuSubsectionsBySection={this.props.menuSubsectionsBySection} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - ); - } - private _renderWiki(): React.ReactNode { - if (!this._isViewingWiki()) { - return undefined; - } - - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - topLevelMenu={this.props.menuSubsectionsBySection} - menuSubsectionsBySection={this.props.menuSubsectionsBySection} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> - </div> - ); - } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, @@ -486,28 +270,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { private _isViewingPortal(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } - private _isViewingDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Docs); - } private _isViewingFAQ(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } - private _doesUrlInclude(aPath: string): boolean { - return _.includes(this.props.location.pathname, aPath); - } - private _isViewingWiki(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Wiki); - } private _shouldDisplayBottomBar(): boolean { - const isViewingDocsPage = _.some(DOC_WEBSITE_PATHS_TO_KEY, (_key, websitePath) => { - return this._doesUrlInclude(websitePath); - }); - return ( - isViewingDocsPage || - this._isViewingWiki() || - this._isViewingFAQ() || - this._isViewingDocs() || - this._isViewingPortal() - ); + return this._isViewingFAQ() || this._isViewingPortal(); } } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index 25fab2868..9f15cffbb 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,7 +1,6 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { CallToAction } from 'ts/components/ui/button'; @@ -13,7 +12,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - isExternal: boolean; + shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -26,6 +25,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM isPrimary: false, style: DEFAULT_STYLE, className: '', + shouldOpenInNewTab: false, isNightVersion: false, }; public render(): React.ReactNode { @@ -38,20 +38,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM ); return ( <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}> - {this.props.isExternal ? ( - <a - className="text-decoration-none" - style={{ color: linkColor }} - target="_blank" - href={this.props.path} - > - {itemContent} - </a> - ) : ( - <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}> - {itemContent} - </Link> - )} + <Link to={this.props.path} shouldOpenInNewTab={this.props.shouldOpenInNewTab} fontColor={linkColor}> + {itemContent} + </Link> </div> ); } diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx index 294fb8590..e701686b0 100644 --- a/packages/website/ts/components/track_token_confirmation.tsx +++ b/packages/website/ts/components/track_token_confirmation.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx index 321a8b0e1..667027dce 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -1,6 +1,6 @@ -import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, EtherscanLinkSuffixes } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as moment from 'moment'; diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index b571d8c1c..32e0f1be8 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { AlertTypes } from 'ts/types'; diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index 93d6b0ebb..fc754421a 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Spinner } from 'ts/components/ui/spinner'; diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx index 9e5a256b6..a1a8ff89b 100644 --- a/packages/website/ts/components/ui/balance.tsx +++ b/packages/website/ts/components/ui/balance.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 75ba7bcff..92f927843 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { darken, saturate } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -10,11 +10,13 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( @@ -29,11 +31,12 @@ export const Button = styled(PlainButton)` color: ${props => props.fontColor}; transition: background-color, opacity 0.5s ease; padding: ${props => props.padding}; - border-radius: 6px; + border-radius: ${props => props.borderRadius}; font-weight: 500; outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; + text-align: ${props => props.textAlign}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { @@ -52,11 +55,13 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index f2ae68b70..ece077563 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,7 +15,11 @@ export interface ContainerProps { paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; + background?: string; borderRadius?: StringOrNum; + borderBottomLeftRadius?: StringOrNum; + borderBottomRightRadius?: StringOrNum; + borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index 0330d1843..59e398cb6 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx index 0cb4b387c..87ce32126 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -1,24 +1,23 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; -interface MenuItemProps { +interface CustomMenuItemProps { to: string; - style?: React.CSSProperties; onClick?: () => void; className?: string; } -interface MenuItemState { +interface CustomMenuItemState { isHovering: boolean; } -export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { - public static defaultProps: Partial<MenuItemProps> = { +export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> { + public static defaultProps: Partial<CustomMenuItemProps> = { onClick: _.noop.bind(_), className: '', }; - public constructor(props: MenuItemProps) { + public constructor(props: CustomMenuItemProps) { super(props); this.state = { isHovering: false, @@ -30,7 +29,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { opacity: this.state.isHovering ? 0.5 : 1, }; return ( - <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}> + <Link to={this.props.to}> <div onClick={this.props.onClick.bind(this)} className={`mx-auto ${this.props.className}`} diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..4138b3fe5 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import Popover from 'material-ui/Popover'; import * as React from 'react'; import { MaterialUIPosition } from 'ts/types'; @@ -21,6 +22,7 @@ export interface DropDownProps { zDepth?: number; activateEvent?: DropdownMouseEvent; closeEvent?: DropdownMouseEvent; + popoverStyle?: React.CSSProperties; } interface DropDownState { @@ -34,6 +36,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { zDepth: 1, activateEvent: DropdownMouseEvent.Hover, closeEvent: DropdownMouseEvent.Hover, + popoverStyle: {}, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -73,10 +76,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { anchorEl={this.state.anchorEl} anchorOrigin={this.props.anchorOrigin} targetOrigin={this.props.targetOrigin} - onRequestClose={this._closePopover.bind(this)} + onRequestClose={ + this.props.closeEvent === DropdownMouseEvent.Click + ? this._closePopover.bind(this) + : _.noop.bind(_) + } useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} + style={this.props.popoverStyle} > <div onMouseEnter={this._onHover.bind(this)} @@ -92,7 +100,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void { if (this.props.activateEvent === DropdownMouseEvent.Click) { this.setState({ - isDropDownOpen: true, + isDropDownOpen: !this.state.isDropDownOpen, anchorEl: event.currentTarget, }); } diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx index f449a8e75..71d98af56 100644 --- a/packages/website/ts/components/ui/ethereum_address.tsx +++ b/packages/website/ts/components/ui/ethereum_address.tsx @@ -1,4 +1,4 @@ -import { EtherscanLinkSuffixes } from '@0xproject/react-shared'; +import { EtherscanLinkSuffixes } from '@0x/react-shared'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 0beb69123..57ab91ba2 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx index ac3c30fec..7c3a482a4 100644 --- a/packages/website/ts/components/ui/fake_text_field.tsx +++ b/packages/website/ts/components/ui/fake_text_field.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; import { InputLabel } from 'ts/components/ui/input_label'; diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx index 13cd239da..9f469ec69 100644 --- a/packages/website/ts/components/ui/icon_button.tsx +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e01a71a53..e5f4f6c70 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 8eda45a5d..e7afb5a17 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as React from 'react'; export interface InputLabelProps { diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 0bb99b9d8..a8daf4102 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { errorUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { errorUtils } from '@0x/utils'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index a25550475..6c0572437 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index db0a4188d..c97b1e700 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index 0f96586ec..5080462fa 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; export interface RequiredLabelProps { diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 8a9349c6d..45ee752e3 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< GoToAccountManagementSimpleMenuItemProps > = ({ onClick }) => { return ( - <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}> + <Link to={`${WebsitePaths.Portal}/account`}> <SimpleMenuItem displayText="Manage Account..." onClick={onClick} /> </Link> ); diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx index e8670cc3e..dc73e74e3 100644 --- a/packages/website/ts/components/ui/spinner.tsx +++ b/packages/website/ts/components/ui/spinner.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index f1d1ae7d4..406da8fe1 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; interface SwapIconProps { diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index cd8f290e3..c13e21913 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -19,7 +19,9 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; hoverColor?: string; + letterSpacing?: string | number; noWrap?: boolean; + textAlign?: string; display?: string; } @@ -34,6 +36,8 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-align: ${props => props.textAlign}; + letter-spacing: ${props => props.letterSpacing}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx index a8d18006e..d723757d2 100644 --- a/packages/website/ts/components/visual_order.tsx +++ b/packages/website/ts/components/visual_order.tsx @@ -1,4 +1,4 @@ -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 6abaa840b..326cd3cfa 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,5 +1,5 @@ -import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; -import { BigNumber, errorUtils } from '@0xproject/utils'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; +import { BigNumber, errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 54ace7ae2..7de3afbf8 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -1,6 +1,6 @@ -import { Styles } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Styles } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts index f794625de..c93b9332d 100644 --- a/packages/website/ts/containers/asset_buyer_documentation.ts +++ b/packages/website/ts/containers/asset_buyer_documentation.ts @@ -1,11 +1,11 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -22,7 +22,7 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.AssetBuyer, - packageName: '@0xproject/asset-buyer', + packageName: '@0x/asset-buyer', type: SupportedDocJson.TypeDoc, displayName: 'AssetBuyer', packageUrl: 'https://github.com/0xProject/0x-monorepo', @@ -47,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index a728abe2c..0f11e0809 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -1,17 +1,18 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/connect/1.0.0/introduction'); -const IntroMarkdownV2 = require('md/docs/connect/2.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/connect/1.0.0/installation'); +const IntroMarkdown1 = require('md/docs/connect/1/introduction'); +const IntroMarkdown2 = require('md/docs/connect/2/introduction'); +const InstallationMarkdown1 = require('md/docs/connect/1/installation'); +const InstallationMarkdown3 = require('md/docs/connect/3/installation'); /* tslint:enable:no-var-requires */ const markdownSections = { @@ -21,22 +22,25 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Connect, - packageName: '@0xproject/connect', + packageName: '@0x/connect', type: SupportedDocJson.TypeDoc, displayName: '0x Connect', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, '2.0.0-rc.1': { - [markdownSections.introduction]: IntroMarkdownV2, - [markdownSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown1, + }, + '3.0.2': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown3, }, }, markdownSections, @@ -48,6 +52,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -59,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts index 1e1735846..4c05605e3 100644 --- a/packages/website/ts/containers/contract_wrappers_documentation.ts +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -1,16 +1,17 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdown = require('md/docs/contract_wrappers/introduction'); -const InstallMarkdown = require('md/docs/contract_wrappers/installation'); +const IntroMarkdown1 = require('md/docs/contract_wrappers/1/introduction'); +const InstallMarkdownV1 = require('md/docs/contract_wrappers/1/installation'); +const InstallMarkdownV2 = require('md/docs/contract_wrappers/2/installation'); /* tslint:enable:no-var-requires */ const markdownSections = { @@ -20,18 +21,21 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.ContractWrappers, - packageName: '@0xproject/contract-wrappers', + packageName: '@0x/contract-wrappers', type: SupportedDocJson.TypeDoc, displayName: 'Contract Wrappers', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdown, - [markdownSections.installation]: InstallMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallMarkdownV1, + }, + '3.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallMarkdownV2, }, }, markdownSections, @@ -43,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts new file mode 100644 index 000000000..e0ca439a6 --- /dev/null +++ b/packages/website/ts/containers/docs_home.ts @@ -0,0 +1,31 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocsHome as DocsHomeComponent, DocsHomeProps } from 'ts/pages/documentation/docs_home'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocsHomeProps): ConnectedState => ({ + translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)( + DocsHomeComponent, +); diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 2b6d6e64d..9d1df1d1f 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -1,11 +1,11 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -26,9 +26,7 @@ const docsInfoConfig: DocsInfoConfig = { displayName: 'Ethereum Types', packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/ethereum-types', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - types: [markdownSections.types], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -45,6 +43,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -56,6 +55,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index bc9d6f524..98b2831ce 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { connect } from 'react-redux'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/containers/inputs/eth_amount_input.ts b/packages/website/ts/containers/inputs/eth_amount_input.ts index 9ef903b55..45d3ddebd 100644 --- a/packages/website/ts/containers/inputs/eth_amount_input.ts +++ b/packages/website/ts/containers/inputs/eth_amount_input.ts @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as React from 'react'; import { connect } from 'react-redux'; import { State } from 'ts/redux/reducer'; diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index f32a50ea9..cb5918784 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -1,54 +1,59 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/json_schemas/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/json_schemas/1.0.0/installation'); -const UsageMarkdownV1 = require('md/docs/json_schemas/1.0.0/usage'); -const SchemasMarkdownV1 = require('md/docs/json_schemas/1.0.0/schemas'); -const SchemasMarkdownV2 = require('md/docs/json_schemas/2.0.0/schemas'); +const IntroMarkdown1 = require('md/docs/json_schemas/1/introduction'); +const IntroMarkdown3 = require('md/docs/json_schemas/3/introduction'); +const InstallationMarkdown1 = require('md/docs/json_schemas/1/installation'); +const InstallationMarkdown3 = require('md/docs/json_schemas/3/installation'); +const usageMarkdown1 = require('md/docs/json_schemas/1/usage'); +const usageMarkdown3 = require('md/docs/json_schemas/3/usage'); +const SchemasMarkdownV1 = require('md/docs/json_schemas/1/schemas'); +const SchemasMarkdownV2 = require('md/docs/json_schemas/2/schemas'); /* tslint:enable:no-var-requires */ const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - schemaValidator: 'schemaValidator', schemas: 'schemas', }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.JSONSchemas, - packageName: '@0xproject/json-schemas', + packageName: '@0x/json-schemas', type: SupportedDocJson.TypeDoc, displayName: 'JSON Schemas', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - usage: [markdownSections.usage], - schemaValidator: [markdownSections.schemaValidator], + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], schemas: [markdownSections.schemas], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, [markdownSections.schemas]: SchemasMarkdownV1, - [markdownSections.usage]: UsageMarkdownV1, + [markdownSections.usage]: usageMarkdown1, }, '1.0.0': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, [markdownSections.schemas]: SchemasMarkdownV2, - [markdownSections.usage]: UsageMarkdownV1, + [markdownSections.usage]: usageMarkdown1, + }, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown3, + [markdownSections.installation]: InstallationMarkdown3, + [markdownSections.schemas]: SchemasMarkdownV2, + [markdownSections.usage]: usageMarkdown3, }, }, markdownSections, @@ -60,6 +65,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -71,6 +77,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index b54c30a1e..f1d794988 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -1,16 +1,18 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/order_utils/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/order_utils/1.0.0/installation'); +const IntroMarkdown1 = require('md/docs/order_utils/1/introduction'); +const InstallationMarkdown1 = require('md/docs/order_utils/1/installation'); +const IntroMarkdown2 = require('md/docs/order_utils/2/introduction'); +const InstallationMarkdown2 = require('md/docs/order_utils/2/installation'); /* tslint:enable:no-var-requires */ const markdownSections = { @@ -20,18 +22,21 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.OrderUtils, - packageName: '@0xproject/order-utils', + packageName: '@0x/order-utils', type: SupportedDocJson.TypeDoc, displayName: 'Order utils', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + }, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, }, }, markdownSections, @@ -43,6 +48,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +60,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts index 59a018847..ac92e6a22 100644 --- a/packages/website/ts/containers/order_watcher_documentation.ts +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -1,16 +1,18 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdown = require('md/docs/order_watcher/introduction'); -const InstallationMarkdown = require('md/docs/order_watcher/installation'); +const IntroMarkdown1 = require('md/docs/order_watcher/1/introduction'); +const InstallationMarkdown1 = require('md/docs/order_watcher/1/installation'); +const IntroMarkdown2 = require('md/docs/order_watcher/2/introduction'); +const InstallationMarkdown2 = require('md/docs/order_watcher/2/installation'); /* tslint:enable:no-var-requires */ const markdownSections = { @@ -20,18 +22,21 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.OrderWatcher, - packageName: '@0xproject/order-watcher', + packageName: '@0x/order-watcher', type: SupportedDocJson.TypeDoc, displayName: 'OrderWatcher', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdown, - [markdownSections.installation]: InstallationMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + }, + '2.2.0': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, }, }, markdownSections, @@ -43,6 +48,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +60,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 4d7ff2f55..5661e0a97 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index a813205b1..66473733c 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index 05b2a50c3..57c98fa3b 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -1,17 +1,17 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import { Networks } from '@0xproject/react-shared'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { Networks } from '@0x/react-shared'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, SmartContractDocSections as Sections } from 'ts/types'; +import { DocPackages, ScreenWidths, SmartContractDocSections as Sections } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/smart_contracts/1.0.0/introduction'); -const IntroMarkdownV2 = require('md/docs/smart_contracts/2.0.0/introduction'); +const IntroMarkdown1 = require('md/docs/smart_contracts/1/introduction'); +const IntroMarkdown2 = require('md/docs/smart_contracts/2/introduction'); /* tslint:enable:no-var-requires */ const docsInfoConfig: DocsInfoConfig = { @@ -25,10 +25,10 @@ const docsInfoConfig: DocsInfoConfig = { }, sectionNameToMarkdownByVersion: { '0.0.1': { - [Sections.Introduction]: IntroMarkdownV1, + [Sections.Introduction]: IntroMarkdown1, }, '2.0.0': { - [Sections.Introduction]: IntroMarkdownV2, + [Sections.Introduction]: IntroMarkdown2, }, }, markdownSections: { @@ -97,6 +97,7 @@ interface ConnectedState { docsVersion: string; availableDocVersions: string[]; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -108,6 +109,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index 20f26ed1d..f3a793e80 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -1,17 +1,19 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/sol-compiler/introduction'); -const InstallationMarkdownV1 = require('md/docs/sol-compiler/installation'); -const UsageMarkdown = require('md/docs/sol-compiler/usage'); +const IntroMarkdown1 = require('md/docs/sol-compiler/1/introduction'); +const InstallationMarkdown1 = require('md/docs/sol-compiler/1/installation'); +const InstallationMarkdown2 = require('md/docs/sol-compiler/2/installation'); +const UsageMarkdown1 = require('md/docs/sol-compiler/1/usage'); +const UsageMarkdown2 = require('md/docs/sol-compiler/2/usage'); /* tslint:enable:no-var-requires */ const markdownSections = { @@ -22,20 +24,23 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SolCompiler, - packageName: '@0xproject/sol-compiler', + packageName: '@0x/sol-compiler', type: SupportedDocJson.TypeDoc, displayName: 'Solidity Compiler', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - usage: [markdownSections.usage], + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, - [markdownSections.usage]: UsageMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.usage]: UsageMarkdown1, + }, + '1.1.8': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown2, + [markdownSections.usage]: UsageMarkdown2, }, }, markdownSections, @@ -47,6 +52,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index 27efd641e..8944ec70a 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -1,17 +1,20 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/sol_cov/introduction'); -const InstallationMarkdownV1 = require('md/docs/sol_cov/installation'); -const UsageMarkdown = require('md/docs/sol_cov/usage'); +const IntroMarkdown1 = require('md/docs/sol_cov/1/introduction'); +const InstallationMarkdown1 = require('md/docs/sol_cov/1/installation'); +const UsageMarkdown1 = require('md/docs/sol_cov/1/usage'); +const IntroMarkdown2 = require('md/docs/sol_cov/2/introduction'); +const InstallationMarkdown2 = require('md/docs/sol_cov/2/installation'); +const UsageMarkdown2 = require('md/docs/sol_cov/2/usage'); /* tslint:enable:no-var-requires */ const markdownSections = { @@ -22,20 +25,23 @@ const markdownSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SolCov, - packageName: '@0xproject/sol-cov', + packageName: '@0x/sol-cov', type: SupportedDocJson.TypeDoc, displayName: 'Sol-cov', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - usage: [markdownSections.usage], + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, - [markdownSections.usage]: UsageMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.usage]: UsageMarkdown1, + }, + '2.1.8': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, + [markdownSections.usage]: UsageMarkdown2, }, }, markdownSections, @@ -47,6 +53,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +65,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 28b2e9508..0e421777b 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -1,17 +1,18 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/subproviders/introduction'); -const InstallationMarkdownV1 = require('md/docs/subproviders/installation'); -const LedgerNodeHidMarkdown = require('md/docs/subproviders/ledger_node_hid'); +const IntroMarkdown1 = require('md/docs/subproviders/1/introduction'); +const InstallationMarkdown1 = require('md/docs/subproviders/1/installation'); +const InstallationMarkdown2 = require('md/docs/subproviders/2/installation'); +const LedgerNodeHidMarkdown1 = require('md/docs/subproviders/1/ledger_node_hid'); /* tslint:enable:no-var-requires */ const docSections = { @@ -22,20 +23,23 @@ const docSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Subproviders, - packageName: '@0xproject/subproviders', + packageName: '@0x/subproviders', type: SupportedDocJson.TypeDoc, displayName: 'Subproviders', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [docSections.introduction], - install: [docSections.installation], - ['ledger-node-hid-issue']: [docSections.ledgerNodeHid], + 'getting-started': [docSections.introduction, docSections.installation, docSections.ledgerNodeHid], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown, + [docSections.introduction]: IntroMarkdown1, + [docSections.installation]: InstallationMarkdown1, + [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown1, + }, + '2.1.0': { + [docSections.introduction]: IntroMarkdown1, + [docSections.installation]: InstallationMarkdown2, + [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown1, }, }, markdownSections: docSections, @@ -47,6 +51,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -58,6 +63,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index dc9d23304..9c8c34621 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -1,40 +1,44 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/web3_wrapper/introduction'); -const InstallationMarkdownV1 = require('md/docs/web3_wrapper/installation'); +const IntroMarkdown1 = require('md/docs/web3_wrapper/1/introduction'); +const InstallationMarkdown1 = require('md/docs/web3_wrapper/1/installation'); +const InstallationMarkdown2 = require('md/docs/web3_wrapper/2/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Web3Wrapper, - packageName: '@0xproject/web3-wrapper', + packageName: '@0x/web3-wrapper', type: SupportedDocJson.TypeDoc, displayName: 'Web3Wrapper', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [docSections.introduction], - install: [docSections.installation], + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + }, + '3.1.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown2, }, }, - markdownSections: docSections, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -43,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -54,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 357f8bbf4..069b0ae54 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -4,10 +4,12 @@ import { Dispatch } from 'redux'; import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -16,6 +18,7 @@ interface ConnectedDispatch { const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 2a3afd86c..e0ea6e275 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -1,11 +1,11 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -15,8 +15,8 @@ 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 IntroMarkdown1 = require('md/docs/0xjs/1.0.1/introduction'); +const InstallationMarkdown1 = require('md/docs/0xjs/1.0.1/installation'); const AsyncMarkdownV1 = require('md/docs/0xjs/1.0.1/async'); const ErrorsMarkdownV1 = ErrorsMarkdownV0; const versioningMarkdownV1 = require('md/docs/0xjs/1.0.1/versioning'); @@ -39,9 +39,13 @@ const docsInfoConfig: DocsInfoConfig = { displayName: '0x.js', packageUrl: 'https://github.com/0xProject/0x-monorepo', markdownMenu: { - introduction: [markdownSections.introduction], - install: [markdownSections.installation], - topics: [markdownSections.async, markdownSections.errors, markdownSections.versioning], + 'getting-started': [ + markdownSections.introduction, + markdownSections.installation, + markdownSections.async, + markdownSections.errors, + markdownSections.versioning, + ], }, sectionNameToMarkdownByVersion: { '0.0.1': { @@ -52,8 +56,15 @@ const docsInfoConfig: DocsInfoConfig = { [markdownSections.errors]: ErrorsMarkdownV0, }, '1.0.1': { - [markdownSections.introduction]: IntroMarkdownV1, - [markdownSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.versioning]: versioningMarkdownV1, + [markdownSections.async]: AsyncMarkdownV1, + [markdownSections.errors]: ErrorsMarkdownV1, + }, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, [markdownSections.versioning]: versioningMarkdownV1, [markdownSections.async]: AsyncMarkdownV1, [markdownSections.errors]: ErrorsMarkdownV1, @@ -68,6 +79,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -79,6 +91,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index bb218eac1..21157e427 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -5,6 +5,7 @@ import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; +import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; @@ -140,6 +141,7 @@ render( path={`${WebsitePaths.AssetBuyer}/:version?`} component={LazyAssetBuyerDocumentation} /> + <Route path={WebsitePaths.Docs} component={DocsHome as any} /> {/* Legacy endpoints */} <Route path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`} diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx index a9b042820..91818b035 100644 --- a/packages/website/ts/local_storage/trade_history_storage.tsx +++ b/packages/website/ts/local_storage/trade_history_storage.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import ethUtil = require('ethereumjs-util'); import * as _ from 'lodash'; import { localStorage } from 'ts/local_storage/local_storage'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 3ede56a71..dfe8926b0 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,8 +1,7 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; @@ -389,7 +388,7 @@ export class About extends React.Component<AboutProps, AboutState> { }} > We are seeking outstanding candidates to{' '} - <Link to={WebsitePaths.Careers} style={{ color: 'black' }}> + <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black"> join our team </Link> . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index bcbeb0272..2361c6418 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx new file mode 100644 index 000000000..30b79552f --- /dev/null +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -0,0 +1,200 @@ +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; +import { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { styled } from 'ts/style/theme'; +import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const browserType = utils.getBrowserType(); +let SCROLLBAR_WIDTH; +switch (browserType) { + case BrowserType.Firefox: + // HACK: Firefox doesn't allow styling of their scrollbar's. + // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox + const os = utils.getOperatingSystem(); + SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15; + break; + + case BrowserType.Edge: + // Edge's scrollbar is placed outside of the div content and doesn't + // need to be accounted for + SCROLLBAR_WIDTH = 0; + break; + + default: + SCROLLBAR_WIDTH = 4; +} +const SIDEBAR_PADDING = 22; + +export interface DevelopersPageProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; + mainContent: React.ReactNode; + sidebar: React.ReactNode; +} + +export interface DevelopersPageState { + isSidebarScrolling: boolean; +} + +const isUserOnMobile = sharedUtils.isUserOnMobile(); + +const scrollableContainerStyles = ` + position: absolute; + top: ${TOP_BAR_HEIGHT}px; + left: 0px; + bottom: 0px; + right: 0px; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + /* Required for hide/show onHover of scrollbar on Microsoft Edge */ + -ms-overflow-style: -ms-autohiding-scrollbar; +`; + +interface SidebarContainerProps { + className?: string; +} + +const SidebarContainer = + styled.div < + SidebarContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 27px; + padding-bottom: 100px; + padding-left: ${SIDEBAR_PADDING}px; + padding-right: ${SIDEBAR_PADDING}px; + overflow: hidden; + &:hover { + overflow: auto; + padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px; + } +`; + +interface MainContentContainerProps { + className?: string; +} + +const MainContentContainer = + styled.div < + MainContentContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 0px; + padding-left: 50px; + padding-right: 50px; + overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; + &:hover { + padding-right: ${50 - SCROLLBAR_WIDTH}px; + overflow: auto; + } + @media (max-width: 40em) { + padding-left: 20px; + padding-right: 20px; + &:hover { + padding-right: ${20 - SCROLLBAR_WIDTH}px; + overflow: auto; + } + } +`; + +export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> { + private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; + constructor(props: DevelopersPageProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); + this.state = { + isSidebarScrolling: false, + }; + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); + } + public render(): React.ReactNode { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 20 : 50; + return ( + <Container + className="flex items-center overflow-hidden" + width="100%" + background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${ + colors.white + } 50%, ${colors.white} 100%)`} + > + <DocumentTitle title="0x Docs" /> + <Container className="flex mx-auto" height="100vh"> + <Container + className="sm-hide xs-hide relative" + width={234} + paddingLeft={22} + paddingRight={22} + paddingTop={0} + backgroundColor={colors.grey100} + > + <Container + borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} + > + <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px"> + <DocsLogo height={36} /> + </Container> + </Container> + <SidebarContainer onWheel={this._throttledSidebarScrolling}> + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + </SidebarContainer> + </Container> + <Container + className="relative" + width={isSmallScreen ? '100vw' : 786} + paddingBottom="100px" + backgroundColor={colors.white} + > + <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}> + <DocsTopBar + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + sidebar={this.props.sidebar} + /> + </Container> + <MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}> + {this.props.mainContent} + </MainContentContainer> + </Container> + </Container> + </Container> + ); + } + private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { + this.setState({ + isSidebarScrolling: true, + }); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 135581fc9..7157abfc9 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,35 +1,30 @@ import { DocAgnosticFormat, + DocReference, DocsInfo, - Documentation, GeneratedDocJson, SupportedDocJson, TypeDocUtils, -} from '@0xproject/react-docs'; +} from '@0x/react-docs'; +import { NestedSidebarMenu } from '@0x/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); import semverSort = require('semver-sort'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const isDevelopmentOrStaging = utils.isDevelopment() || utils.isStaging(); -const DEFAULT_ICON = 'docs.png'; const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4'; -const idToIcon: { [id: string]: string } = { - [DocPackages.ZeroExJs]: 'zeroExJs.png', - [DocPackages.Connect]: 'connect.png', - [DocPackages.SmartContracts]: 'contracts.png', -}; - const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.ZeroExJs]: '0x.js', [DocPackages.Connect]: 'connect', @@ -53,6 +48,7 @@ export interface DocPageProps { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface DocPageState { @@ -80,38 +76,58 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); - const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; - const iconUrl = `/images/doc_icons/${iconFileName}`; + const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); + const mainContent = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <DocReference + selectedVersion={this.props.docsVersion} + availableVersions={this.props.availableDocVersions} + docsInfo={this.props.docsInfo} + docAgnosticFormat={this.state.docAgnosticFormat} + sourceUrl={sourceUrl} + /> + ); + const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div /> + ) : ( + <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + return ( + <SidebarHeader + screenWidth={this.props.screenWidth} + title={this.props.docsInfo.displayName} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + onVersionSelected={this._onVersionSelected.bind(this)} + /> + ); + } + private _renderLoading(): React.ReactNode { return ( - <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - docsVersion={this.props.docsVersion} - availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.menu} - menuSubsectionsBySection={menuSubsectionsBySection} - docsInfo={this.props.docsInfo} - translate={this.props.translate} - onVersionSelected={this._onVersionSelected.bind(this)} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - /> - <Documentation - selectedVersion={this.props.docsVersion} - availableVersions={this.props.availableDocVersions} - docsInfo={this.props.docsInfo} - docAgnosticFormat={this.state.docAgnosticFormat} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - sourceUrl={sourceUrl} - topBarHeight={60} - onVersionSelected={this._onVersionSelected.bind(this)} - /> - </div> + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading documentation... + </Container> + </Container> ); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { @@ -146,10 +162,10 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { // documenting solidity. docAgnosticFormat = versionDocObj as DocAgnosticFormat; // HACK: need to modify docsInfo like convertToDocAgnosticFormat() would do - this.props.docsInfo.menu.Contracts = []; + this.props.docsInfo.markdownMenu.Contracts = []; _.each(docAgnosticFormat, (_docObj, sectionName) => { this.props.docsInfo.sections[sectionName] = sectionName; - this.props.docsInfo.menu.Contracts.push(sectionName); + this.props.docsInfo.markdownMenu.Contracts.push(sectionName); }); } @@ -165,7 +181,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { let tagPrefix = pkg; const packagesWithNamespace = ['connect']; if (_.includes(packagesWithNamespace, pkg)) { - tagPrefix = `@0xproject/${pkg}`; + tagPrefix = `@0x/${pkg}`; } // HACK: The following three lines exist for backward compatibility reasons // Before exporting types from other packages as part of the 0x.js interface, diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx new file mode 100644 index 000000000..cf229cb3b --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -0,0 +1,384 @@ +import { ALink, colors, Link, NestedSidebarMenu } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { Button } from 'ts/components/ui/button'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const TUTORIALS: TutorialInfo[] = [ + { + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: Key.DevelopOnEthereumDescription, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + }, + { + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: Key.BuildARelayerDescription, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + }, + { + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: Key.OrderBasicsDescription, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + }, + { + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: Key.UseNetworkedLiquidityDescription, + link: { + title: Key.UseNetworkedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, + }, +]; + +const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { + [Categories.ZeroExProtocol]: [ + { + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, + }, + { + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', + link: { + title: '@0x/connect', + to: WebsitePaths.Connect, + }, + }, + { + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', + link: { + title: '@0x/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, + }, + { + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + link: { + title: '@0x/json-schemas', + to: WebsitePaths.JSONSchemas, + }, + }, + { + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + link: { + title: '@0x/order-utils', + to: WebsitePaths.OrderUtils, + }, + }, + { + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + link: { + title: '@0x/order-watcher', + to: WebsitePaths.OrderWatcher, + }, + }, + { + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + link: { + title: '@0x/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Convenience package for buying assets represented on the Ethereum blockchain using 0x. In its simplest form, the package helps in the usage of the [0x forwarder contract](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md), which allows users to execute [Wrapped Ether](https://weth.io/) based 0x orders without having to set allowances, wrap Ether or own ZRX, meaning they can buy tokens with Ether alone. Given some liquidity (0x signed orders), it helps estimate the Ether cost of buying a certain asset (giving a range) and then buying that asset.', + link: { + title: '@0x/asset-buyer', + to: WebsitePaths.AssetBuyer, + }, + }, + ], + [Categories.Ethereum]: [ + { + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, + }, + { + description: + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + link: { + title: '@0x/sol-compiler', + to: WebsitePaths.SolCompiler, + }, + }, + { + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + link: { + title: '@0x/sol-cov', + to: WebsitePaths.SolCov, + }, + }, + { + description: + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + link: { + title: '@0x/subproviders', + to: WebsitePaths.Subproviders, + }, + }, + { + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + link: { + title: '@0x/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, + }, + ], + [Categories.CommunityMaintained]: [ + { + description: + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + }, + }, + { + description: + "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A node.js SDK for trading on the DDEX relayer', + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users", + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdEX Widget', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdEX Java SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdEX Python SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + }, + }, + { + description: 'An open-source API-only Relayer written in Go', + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + }, + }, + { + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + }, + }, + ], +}; + +export interface DocsHomeProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; + dispatcher: Dispatcher; +} + +export interface DocsHomeState {} + +export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap<ALink[]> = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.link, + ), + }; + const mainContent = ( + <OverviewContent + translate={this.props.translate} + tutorials={TUTORIALS} + categoryToPackages={CATEGORY_TO_PACKAGES} + /> + ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + shouldReformatMenuItemNames={false} + /> + ); + return ( + <DevelopersPage + mainContent={mainContent} + sidebar={sidebar} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 6px" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + return menuItems; + } +} diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index c9295d806..10d91bae8 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index f80985257..413ffb6ce 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; diff --git a/packages/website/ts/pages/fullscreen_message.tsx b/packages/website/ts/pages/fullscreen_message.tsx index 6fcf7b32c..675f27a01 100644 --- a/packages/website/ts/pages/fullscreen_message.tsx +++ b/packages/website/ts/pages/fullscreen_message.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; export interface FullscreenMessageProps { diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index cc4b1f04b..728e17f9e 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,4 +1,4 @@ -import { colors, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index ec8afbd93..e869cd455 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 388e83d51..c56ed4ebe 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,8 +1,7 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; @@ -213,14 +212,14 @@ export class Landing extends React.Component<LandingProps, LandingState> { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > <Container paddingRight="20px"> - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <Link to={WebsitePaths.Docs}> <CallToAction type="light"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> </Link> </Container> <div> - <Link to={WebsitePaths.Portal} className="text-decoration-none"> + <Link to={WebsitePaths.Portal}> <CallToAction> {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} </CallToAction> @@ -318,11 +317,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { }} > {this.props.translate.get(Key.FullListPrompt)}{' '} - <Link - to={WebsitePaths.Portal} - className="text-decoration-none underline" - style={{ color: colors.landingLinkGrey }} - > + <Link to={WebsitePaths.Portal} textDecoration="underline" fontColor={colors.landingLinkGrey}> {this.props.translate.get(Key.FullListLink)} </Link> </div> @@ -603,7 +598,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)} </div> <div className="sm-center sm-pt2 lg-table-cell md-table-cell"> - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <Link to={WebsitePaths.Docs}> <CallToAction fontSize="15px"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..e62300ddf 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,27 +1,28 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + Link, MarkdownSection, NestedSidebarMenu, - Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; +} from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection } from 'ts/types'; +import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -29,6 +30,7 @@ export interface WikiProps { location: Location; dispatcher: Dispatcher; translate: Translate; + screenWidth: ScreenWidths; } interface WikiState { @@ -36,24 +38,6 @@ interface WikiState { isHoveringSidebar: boolean; } -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflow: 'hidden', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - backgroundColor: colors.gray40, - }, -}; - export class Wiki extends React.Component<WikiProps, WikiState> { private _wikiBackoffTimeoutId: number; private _isUnmounted: boolean; @@ -78,89 +62,77 @@ export class Wiki extends React.Component<WikiProps, WikiState> { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); - const mainContainersStyle: React.CSSProperties = { - ...styles.mainContainers, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }; - const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="/images/doc_icons/wiki.png" />; - return ( - <div> - <DocumentTitle title="0x Protocol Wiki" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - menuSubsectionsBySection={menuSubsectionsBySection} - translate={this.props.translate} - sidebarHeader={sidebarHeader} - /> - {_.isUndefined(this.state.articlesBySection) ? ( - <div className="col col-12" style={mainContainersStyle}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading wiki... - </div> - </div> - </div> - ) : ( - <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> - <div - className="mx-auto max-width-4 flex" - style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} - > - <div - className="relative lg-pl0 md-pl1 sm-hide xs-hide" - style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }} - > - <div - className="absolute" - style={{ - ...styles.menuContainer, - ...mainContainersStyle, - height: 'calc(100vh - 76px)', - }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} - > - <NestedSidebarMenu - topLevelMenu={menuSubsectionsBySection} - menuSubsectionsBySection={menuSubsectionsBySection} - sidebarHeader={sidebarHeader} - /> - </div> - </div> - <div - className="relative" - style={{ - width: '100%', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - backgroundColor: 'white', - }} - > - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - style={{ ...mainContainersStyle, overflow: 'auto' }} - className="absolute" - > - <div id={sharedConstants.SCROLL_TOP_ID} /> - <div id="wiki" style={{ paddingRight: 2 }}> - {this._renderWikiArticles()} - </div> - </div> - </div> - </div> - </div> - )} + : this._getSectionNameToLinks(this.state.articlesBySection); + + const mainContent = _.isUndefined(this.state.articlesBySection) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <div id="wiki" style={{ paddingRight: 2 }}> + {this._renderWikiArticles()} </div> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = _.isUndefined(this.state.articlesBySection) ? ( + <div /> + ) : ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 6px" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return ( + <Container> + <SidebarHeader screenWidth={this.props.screenWidth} title={wikiTitle} /> + {menuItems} + </Container> + ); + } + private _renderLoading(): React.ReactNode { + return ( + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading wiki... + </Container> + </Container> + ); } private _renderWikiArticles(): React.ReactNode { const sectionNames = _.keys(this.state.articlesBySection); @@ -179,22 +151,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}> - <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}> - See a way to improve this article? - </div> - <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2"> - <RaisedButton href={githubLink} target="_blank" label="Edit on Github" /> - </div> - </div> </div> ); }); - return ( - <div key={`section-${sectionName}`} className="py2 md-px1 sm-px0"> - {renderedArticles} - </div> - ); + return <div key={`section-${sectionName}`}>{renderedArticles}</div>; } private async _fetchArticlesBySectionAsync(): Promise<void> { try { @@ -223,25 +183,20 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap<ALink[]> { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap<ALink[]> = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; - } - private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); + return sectionNameToLinks; } private _onHashChanged(_event: any): void { const hash = window.location.hash.slice(1); diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts index c418cab3f..e85afd3b1 100644 --- a/packages/website/ts/redux/dispatcher.ts +++ b/packages/website/ts/redux/dispatcher.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import { Dispatch } from 'redux'; import { State } from 'ts/redux/reducer'; import { diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index f54801639..51c77ba47 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -1,5 +1,5 @@ -import { generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { BigNumber } from '@0xproject/utils'; +import { generatePseudoRandomSalt } from '@0x/order-utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as moment from 'moment'; import { diff --git a/packages/website/ts/schemas/validator.ts b/packages/website/ts/schemas/validator.ts index 3fd013002..128d943e1 100644 --- a/packages/website/ts/schemas/validator.ts +++ b/packages/website/ts/schemas/validator.ts @@ -1,4 +1,4 @@ -import { SchemaValidator } from '@0xproject/json-schemas'; +import { SchemaValidator } from '@0x/json-schemas'; import { orderMetadataSchema } from 'ts/schemas/metadata_schema'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { portalTokenMetadataSchema } from 'ts/schemas/portal_token_metadata'; diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 349845a09..0620bae0f 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -1,4 +1,4 @@ -import { colors as sharedColors } from '@0xproject/react-shared'; +import { colors as sharedColors } from '@0x/react-shared'; const appColors = { walletBoxShadow: 'rgba(0, 0, 0, 0.05)', diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 7e140c951..22bfd2cb4 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,5 +1,6 @@ -import { ObjectMap, SignedOrder } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { ALink } from '@0x/react-shared'; +import { ObjectMap, SignedOrder } from '@0x/types'; +import { BigNumber } from '@0x/utils'; import { Provider } from 'ethereum-types'; import * as React from 'react'; @@ -461,6 +462,23 @@ export enum Key { RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', OurMissionAndValues = 'OUR_MISSION_AND_VALUES', + BuildARelayer = 'BUILD_A_RELAYER', + BuildARelayerDescription = 'BUILD_A_RELAYER_DESCRIPTION', + DevelopOnEthereum = 'DEVELOP_ON_ETHEREUM', + DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', + OrderBasics = 'ORDER_BASICS', + OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', + UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', + UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', + ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', + Sandbox = 'SANDBOX', + Github = 'GITHUB', + LiveChat = 'LIVE_CHAT', + LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + LibrariesAndToolsDescription = 'LIBRARIES_AND_TOOLS_DESCRIPTION', + More = 'MORE', + StartBuildOn0x = 'START_BUILDING_ON_0X', + StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION', } export enum SmartContractDocSections { @@ -572,6 +590,8 @@ export enum BrowserType { Chrome = 'Chrome', Firefox = 'Firefox', Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', Other = 'Other', } @@ -603,4 +623,21 @@ export interface InjectedWeb3 { getNetwork(cd: (err: Error, networkId: string) => void): void; }; } + +export interface TutorialInfo { + iconUrl: string; + description: string; + link: ALink; +} + +export enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} + +export interface Package { + description: string; + link: ALink; +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index 3aae317b0..e990b4fc7 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,5 +1,5 @@ -import { assetDataUtils } from '@0xproject/order-utils'; -import { ObjectMap } from '@0xproject/types'; +import { assetDataUtils } from '@0x/order-utils'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import { PortalOrder } from 'ts/types'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 18a4d8100..0a8a86c50 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -1,4 +1,9 @@ -import { BigNumber } from '@0xproject/utils'; +import { ALink } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Key, WebsitePaths } from 'ts/types'; + +const URL_FORUM = 'https://forum.0xproject.com'; +const URL_ZEROEX_CHAT = 'https://chat.0xproject.com'; export const constants = { DECIMAL_PLACES_ETH: 18, @@ -74,6 +79,7 @@ export const constants = { URL_TESTNET_FAUCET: 'https://faucet.0xproject.com', URL_GITHUB_ORG: 'https://github.com/0xProject', URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', + URL_FORUM, URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', URL_COINBASE_WALLET_IOS_APP_STORE: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8', @@ -84,10 +90,11 @@ export const constants = { URL_PARITY_CHROME_STORE: 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig', URL_REDDIT: 'https://reddit.com/r/0xproject', + URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_TWITTER: 'https://twitter.com/0xproject', URL_WETH_IO: 'https://weth.io/', - URL_ZEROEX_CHAT: 'https://chat.0xproject.com', + URL_ZEROEX_CHAT, URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API', URL_WEB3_DECODED_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123', @@ -95,4 +102,24 @@ export const constants = { URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', + DEVELOPER_TOPBAR_LINKS: [ + { + title: Key.Home, + to: WebsitePaths.Home, + }, + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Forum, + to: URL_FORUM, + shouldOpenInNewTab: true, + }, + { + title: Key.LiveChat, + to: URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, + }, + ] as ALink[], }; diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts index 0e1d9ea6e..e0b883ace 100644 --- a/packages/website/ts/utils/doc_utils.ts +++ b/packages/website/ts/utils/doc_utils.ts @@ -1,5 +1,5 @@ -import { DocAgnosticFormat, GeneratedDocJson } from '@0xproject/react-docs'; -import { fetchAsync, logUtils } from '@0xproject/utils'; +import { DocAgnosticFormat, GeneratedDocJson } from '@0x/react-docs'; +import { fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import { S3FileObject, VersionToFilePath } from 'ts/types'; import convert = require('xml-js'); diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index bec92e829..6fc1216c3 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -1,4 +1,4 @@ -import { logUtils } from '@0xproject/utils'; +import { logUtils } from '@0x/utils'; import Rollbar = require('rollbar'); import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; diff --git a/packages/website/ts/utils/fake_token_registry.ts b/packages/website/ts/utils/fake_token_registry.ts new file mode 100644 index 000000000..607dd2553 --- /dev/null +++ b/packages/website/ts/utils/fake_token_registry.ts @@ -0,0 +1,879 @@ +export interface FakeTokenRegistryEntry { + address: string; + name: string; + symbol: string; + decimals: number; +} + +export const fakeTokenRegistry: { [networkId: string]: FakeTokenRegistryEntry[] } = { + '1': [ + { + address: '0xe41d2489571d322189246dafa5ebde1f4699f498', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0x4156d3342d5c385a87d264f90653733592000581', + name: 'Salt', + symbol: 'SALT', + decimals: 8, + }, + { + address: '0x05f4a42e251f2d52b8ed15e9fedaacfcef1fad27', + name: 'Zilliqa', + symbol: 'ZIL', + decimals: 12, + }, + { + address: '0xe0b7927c4af23765cb51314a0e0521a9645f0e2a', + name: 'Digix DAO Token', + symbol: 'DGD', + decimals: 9, + }, + { + address: '0xfa05a73ffe78ef8f1a739473e462c54bae6567d9', + name: 'Lunyr', + symbol: 'LUN', + decimals: 18, + }, + { + address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', + name: 'Wrapped Ether', + symbol: 'WETH', + decimals: 18, + }, + { + address: '0xbeb9ef514a379b997e0798fdcc901ee474b6d9a1', + name: 'Melon Token', + symbol: 'MLN', + decimals: 18, + }, + { + address: '0x9a642d6b3368ddc662ca244badf32cda716005bc', + name: 'Qtum', + symbol: 'QTUM', + decimals: 18, + }, + { + address: '0xd26114cd6ee289accf82350c8d8487fedb8a0c07', + name: 'OmiseGO', + symbol: 'OMG', + decimals: 18, + }, + { + address: '0xb97048628db6b661d4c2aa833e95dbe1a905b280', + name: 'TenXPay', + symbol: 'PAY', + decimals: 18, + }, + { + address: '0x86fa049857e0209aa7d9e616f7eb3b3b78ecfdb0', + name: 'Eos', + symbol: 'EOS', + decimals: 18, + }, + { + address: '0x888666ca69e0f178ded6d75b5726cee99a87d698', + name: 'Iconomi', + symbol: 'ICN', + decimals: 18, + }, + { + address: '0x744d70fdbe2ba4cf95131626614a1763df805b9e', + name: 'StatusNetwork', + symbol: 'SNT', + decimals: 18, + }, + { + address: '0x6810e776880c02933d47db1b9fc05908e5386b96', + name: 'Gnosis', + symbol: 'GNO', + decimals: 18, + }, + { + address: '0x0d8775f648430679a709e98d2b0cb6250d2887ef', + name: 'Basic Attention Token', + symbol: 'BAT', + decimals: 18, + }, + { + address: '0xb64ef51c888972c908cfacf59b47c1afbc0ab8ac', + name: 'Storj', + symbol: 'STORJ', + decimals: 8, + }, + { + address: '0x1f573d6fb3f13d689ff844b4ce37794d79a7ff1c', + name: 'Bancor', + symbol: 'BNT', + decimals: 18, + }, + { + address: '0x960b236a07cf122663c4303350609a66a7b288c0', + name: 'Aragon', + symbol: 'ANT', + decimals: 18, + }, + { + address: '0x0abdace70d3790235af448c88547603b945604ea', + name: 'district0x', + symbol: 'DNT', + decimals: 18, + }, + { + address: '0xaec2e87e0a235266d9c5adc9deb4b2e29b54d009', + name: 'SingularDTV', + symbol: 'SNGLS', + decimals: 0, + }, + { + address: '0x419d0d8bdd9af5e606ae2232ed285aff190e711b', + name: 'FunFair', + symbol: 'FUN', + decimals: 8, + }, + { + address: '0xaf30d2a7e90d7dc361c8c4585e9bb7d2f6f15bc7', + name: 'FirstBlood', + symbol: '1ST', + decimals: 18, + }, + { + address: '0x08711d3b02c8758f2fb3ab4e80228418a7f8e39c', + name: 'Edgeless', + symbol: 'EDG', + decimals: 0, + }, + { + address: '0x9992ec3cf6a55b00978cddf2b27bc6882d88d1ec', + name: 'Polymath', + symbol: 'POLY', + decimals: 18, + }, + { + address: '0x607f4c5bb672230e8672085532f7e901544a7375', + name: 'iExec', + symbol: 'RLC', + decimals: 9, + }, + { + address: '0x667088b212ce3d06a1b553a7221e1fd19000d9af', + name: 'Wings', + symbol: 'WINGS', + decimals: 18, + }, + { + address: '0x41e5560054824ea6b0732e656e3ad64e20e94e45', + name: 'Civic', + symbol: 'CVC', + decimals: 8, + }, + { + address: '0xb63b606ac810a52cca15e44bb630fd42d8d1d83d', + name: 'Monaco', + symbol: 'MCO', + decimals: 8, + }, + { + address: '0xf433089366899d83a9f26a773d59ec7ecf30355e', + name: 'Metal', + symbol: 'MTL', + decimals: 8, + }, + { + address: '0x12fef5e57bf45873cd9b62e9dbd7bfb99e32d73e', + name: 'Cofoundit', + symbol: 'CFI', + decimals: 18, + }, + { + address: '0xaaaf91d9b90df800df4f55c205fd6989c977e73a', + name: 'Monolith TKN', + symbol: 'TKN', + decimals: 8, + }, + { + address: '0xe7775a6e9bcf904eb39da2b68c5efb4f9360e08c', + name: 'Token-as-a-Service', + symbol: 'TAAS', + decimals: 6, + }, + { + address: '0x2e071d2966aa7d8decb1005885ba1977d6038a65', + name: 'DICE', + symbol: 'ROL', + decimals: 16, + }, + { + address: '0xcb94be6f13a1182e4a4b6140cb7bf2025d28e41b', + name: 'Trustcoin', + symbol: 'TRST', + decimals: 6, + }, + { + address: '0x1776e1f26f98b1a5df9cd347953a26dd3cb46671', + name: 'Numeraire', + symbol: 'NMR', + decimals: 18, + }, + { + address: '0x7c5a0ce9267ed19b22f8cae653f198e3e8daf098', + name: 'Santiment Network Token', + symbol: 'SAN', + decimals: 18, + }, + { + address: '0xdd974d5c2e2928dea5f71b9825b8b646686bd200', + name: 'Kyber Network Crystal', + symbol: 'KNC', + decimals: 18, + }, + { + address: '0xb7cb1c96db6b22b0d3d9536e0108d062bd488f74', + name: 'Walton', + symbol: 'WTC', + decimals: 18, + }, + { + address: '0xd0d6d6c5fe4a677d343cc433536bb717bae167dd', + name: 'adToken', + symbol: 'ADT', + decimals: 9, + }, + { + address: '0x42d6622dece394b54999fbd73d108123806f6a18', + name: 'SpankChain', + symbol: 'SPANK', + decimals: 18, + }, + { + address: '0x701c244b988a513c945973defa05de933b23fe1d', + name: 'openANX', + symbol: 'OAX', + decimals: 18, + }, + { + address: '0x514910771af9ca656af840dff83e8264ecf986ca', + name: 'ChainLink', + symbol: 'LINK', + decimals: 18, + }, + { + address: '0x8f8221afbb33998d8584a2b05749ba73c37a938a', + name: 'Request Network', + symbol: 'REQ', + decimals: 18, + }, + { + address: '0x27054b13b1b798b345b591a4d22e6562d47ea75a', + name: 'AirSwap', + symbol: 'AST', + decimals: 4, + }, + { + address: '0xf0ee6b27b759c9893ce4f094b49ad28fd15a23e4', + name: 'Enigma', + symbol: 'ENG', + decimals: 8, + }, + { + address: '0x818fc6c2ec5986bc6e2cbf00939d90556ab12ce5', + name: 'Kin', + symbol: 'KIN', + decimals: 18, + }, + { + address: '0x27dce1ec4d3f72c3e457cc50354f1f975ddef488', + name: 'AirToken', + symbol: 'AIR', + decimals: 8, + }, + { + address: '0x12480e24eb5bec1a9d4369cab6a80cad3c0a377a', + name: 'Substratum', + symbol: 'SUB', + decimals: 2, + }, + { + address: '0x0e8d6b471e332f140e7d9dbb99e5e3822f728da6', + name: 'ABYSS', + symbol: 'ABYSS', + decimals: 18, + }, + { + address: '0x4ceda7906a5ed2179785cd3a40a69ee8bc99c466', + name: 'AION', + symbol: 'AION', + decimals: 8, + }, + { + address: '0xd8912c10681d8b21fd3742244f44658dba12264e', + name: 'Pluton', + symbol: 'PLU', + decimals: 18, + }, + { + address: '0x1a7a8bd9106f2b8d977e08582dc7d24c723ab0db', + name: 'AppCoins', + symbol: 'APPC', + decimals: 18, + }, + { + address: '0xba5f11b16b155792cf3b2e6880e8706859a8aeb6', + name: 'Aeron', + symbol: 'ARN', + decimals: 8, + }, + { + address: '0xfec0cf7fe078a500abf15f1284958f22049c2c7e', + name: 'Maecenas ART Token', + symbol: 'ART', + decimals: 18, + }, + { + address: '0x0f5d2fb29fb7d3cfee444a200298f468908cc942', + name: 'Decentraland', + symbol: 'MANA', + decimals: 18, + }, + { + address: '0x1c4481750daa5ff521a2a7490d9981ed46465dbd', + name: 'BlockMason Credit Protocol Token', + symbol: 'BCPT', + decimals: 18, + }, + { + address: '0x55296f69f40ea6d20e478533c15a6b08b654e758', + name: 'XY Oracle', + symbol: 'XYO', + decimals: 18, + }, + { + address: '0xd7732e3783b0047aa251928960063f863ad022d8', + name: 'BrahmaOS', + symbol: 'BRM', + decimals: 18, + }, + { + address: '0x7d4b8cce0591c9044a22ee543533b72e976e36c3', + name: 'Change Coin', + symbol: 'CAG', + decimals: 18, + }, + { + address: '0x1d462414fe14cf489c7a21cac78509f4bf8cd7c0', + name: 'CanYaCoin', + symbol: 'CAN', + decimals: 6, + }, + { + address: '0x1234567461d3f8db7496581774bd869c83d51c93', + name: 'BitClave', + symbol: 'CAT', + decimals: 18, + }, + { + address: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', + name: 'Dai Stablecoin v1.0', + symbol: 'DAI', + decimals: 18, + }, + { + address: '0x0cf0ee63788a0849fe5297f3407f701e122cc023', + name: 'Streamr DATAcoin', + symbol: 'DATA', + decimals: 18, + }, + { + address: '0x151202c9c18e495656f372281f493eb7698961d5', + name: 'DEBITUM', + symbol: 'DEB', + decimals: 18, + }, + { + address: '0xba2184520a1cc49a6159c57e61e1844e085615b6', + name: 'HelloGold Token', + symbol: 'HGT', + decimals: 8, + }, + { + address: '0x13f11c9905a08ca76e3e853be63d4f0944326c72', + name: 'Divi Exchange Token', + symbol: 'DIVX', + decimals: 18, + }, + { + address: '0x5b26c5d0772e5bbac8b3182ae9a13f9bb2d03765', + name: 'EDU Token', + symbol: 'EDU', + decimals: 8, + }, + { + address: '0xd49ff13661451313ca1553fd6954bd1d9b6e02b9', + name: 'ElectrifyAsia', + symbol: 'ELEC', + decimals: 18, + }, + { + address: '0x95daaab98046846bf4b2853e23cba236fa394a31', + name: 'EtheremonToken', + symbol: 'EMONT', + decimals: 8, + }, + { + address: '0x5bc7e5f0ab8b2e10d2d0a3f21739fce62459aef3', + name: 'Hut34 Entropy Token', + symbol: 'ENTR', + decimals: 18, + }, + { + address: '0x923108a439c4e8c2315c4f6521e5ce95b44e9b4c', + name: 'Devery.io', + symbol: 'EVE', + decimals: 18, + }, + { + address: '0xf8e386eda857484f5a12e4b5daa9984e06e73705', + name: 'Indorse Token', + symbol: 'IND', + decimals: 18, + }, + { + address: '0x4f4f0db4de903b88f2b1a2847971e231d54f8fd3', + name: 'Geens Platform Token', + symbol: 'GEE', + decimals: 8, + }, + { + address: '0x543ff227f64aa17ea132bf9886cab5db55dcaddf', + name: 'DAOstack', + symbol: 'GEN', + decimals: 18, + }, + { + address: '0x8a854288a5976036a725879164ca3e91d30c6a1b', + name: 'Guaranteed Entrance Token', + symbol: 'GET', + decimals: 18, + }, + { + address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2', + name: 'Maker', + symbol: 'MKR', + decimals: 18, + }, + { + address: '0x9af839687f6c94542ac5ece2e317daae355493a1', + name: 'Hydro Protocol Token', + symbol: 'HOT', + decimals: 18, + }, + { + address: '0x0d262e5dc4a06a0f1c90ce79c7a60c09dfc884e4', + name: 'JET8 Token', + symbol: 'J8T', + decimals: 8, + }, + { + address: '0x8727c112c712c4a03371ac87a74dd6ab104af768', + name: 'Jetcoin Institute Token', + symbol: 'JET', + decimals: 18, + }, + { + address: '0xa4e8c3ec456107ea67d3075bf9e3df3a75823db0', + name: 'Loom Network Token', + symbol: 'LOOM', + decimals: 18, + }, + { + address: '0x957c30ab0426e0c93cd8241e2c60392d08c6ac8e', + name: 'Modum Token', + symbol: 'MOD', + decimals: 0, + }, + { + address: '0x2ef27bf41236bd859a95209e17a43fbd26851f92', + name: 'MORPH', + symbol: 'MORPH', + decimals: 4, + }, + { + address: '0x263c618480dbe35c300d8d5ecda19bbb986acaed', + name: 'MOT', + symbol: 'MOT', + decimals: 18, + }, + { + address: '0xffe02ee4c69edf1b340fcad64fbd6b37a7b9e265', + name: 'NANJCOIN', + symbol: 'NANJ', + decimals: 8, + }, + { + address: '0xc15a399c4ea7815fe36857c9e290ee452a5d6b21', + name: 'BoatPilot Token', + symbol: 'NAVI', + decimals: 18, + }, + { + address: '0x9e46a38f5daabe8683e10793b06749eef7d733d1', + name: 'PolySwarm Nectar', + symbol: 'NCT', + decimals: 18, + }, + { + address: '0xa54ddc7b3cce7fc8b1e3fa0256d0db80d2c10970', + name: 'NEVERDIE Coin', + symbol: 'NDC', + decimals: 18, + }, + { + address: '0xb62132e35a6c13ee1ee0f84dc5d40bad8d815206', + name: 'Nexo', + symbol: 'NEXO', + decimals: 18, + }, + { + address: '0x0235fe624e044a05eed7a43e16e3083bc8a4287a', + name: 'Original Crypto Coin', + symbol: 'OCC', + decimals: 18, + }, + { + address: '0xb5dbc6d3cf380079df3b27135664b6bcf45d1869', + name: 'Omix', + symbol: 'OMX', + decimals: 8, + }, + { + address: '0xfedae5642668f8636a11987ff386bfd215f942ee', + name: 'PolicyPal Network Token', + symbol: 'PAL', + decimals: 18, + }, + { + address: '0x2604fa406be957e542beb89e6754fcde6815e83f', + name: 'Playkey Token', + symbol: 'PKT', + decimals: 18, + }, + { + address: '0xe477292f1b3268687a29376116b0ed27a9c76170', + name: 'Herocoin', + symbol: 'PLAY', + decimals: 18, + }, + { + address: '0x1985365e9f78359a9b6ad760e32412f4a445e862', + name: 'Augur', + symbol: 'REP', + decimals: 18, + }, + { + address: '0x408e41876cccdc0f92210600ef50372656052a38', + name: 'Republic Protocol', + symbol: 'REN', + decimals: 18, + }, + { + address: '0xd0929d411954c47438dc1d871dd6081f5c5e149c', + name: 'Refereum', + symbol: 'RFR', + decimals: 4, + }, + { + address: '0x3d1ba9be9f66b8ee101911bc36d3fb562eac2244', + name: 'Rivetz', + symbol: 'RVT', + decimals: 18, + }, + { + address: '0x6888a16ea9792c15a4dcf2f6c623d055c8ede792', + name: 'Spectiv Signal Token', + symbol: 'SIG', + decimals: 18, + }, + { + address: '0x20f7a3ddf244dc9299975b4da1c39f8d5d75f05a', + name: 'Sapien Network Token', + symbol: 'SPN', + decimals: 6, + }, + { + address: '0xbbff862d906e348e9946bfb2132ecb157da3d4b4', + name: 'Sharder', + symbol: 'SS', + decimals: 18, + }, + { + address: '0x12b306fa98f4cbb8d4457fdff3a0a0a56f07ccdf', + name: 'Spectre.ai D-Token', + symbol: 'SXDT', + decimals: 18, + }, + { + address: '0xff3519eeeea3e76f1f699ccce5e23ee0bdda41ac', + name: 'Blockchain Capital', + symbol: 'BCAP', + decimals: 0, + }, + { + address: '0xced1a8529125d1bd06b54a7b01210df357d00885', + name: 'Too Real Badge', + symbol: 'TRL', + decimals: 0, + }, + { + address: '0xc86d054809623432210c107af2e3f619dcfbf652', + name: 'SENTINEL PROTOCOL', + symbol: 'UPP', + decimals: 18, + }, + { + address: '0x27f610bf36eca0939093343ac28b1534a721dbb4', + name: 'Wand Token', + symbol: 'WAND', + decimals: 18, + }, + { + address: '0x056017c55ae7ae32d12aef7c679df83a85ca75ff', + name: 'WyvernToken', + symbol: 'WYV', + decimals: 18, + }, + { + address: '0x5ca9a71b1d01849c0a95490cc00559717fcf0d1d', + name: 'Aeternity', + symbol: 'AE', + decimals: 18, + }, + { + address: '0xbc86727e770de68b1060c91f6bb6945c73e10388', + name: 'Ink Protocol', + symbol: 'XNK', + decimals: 18, + }, + { + address: '0x0f513ffb4926ff82d7f60a05069047aca295c413', + name: 'CrowdstartCoin', + symbol: 'XSC', + decimals: 18, + }, + { + address: '0xb9e7f8568e08d5659f5d29c4997173d84cdf2607', + name: 'Swarm City Token', + symbol: 'SWT', + decimals: 18, + }, + { + address: '0x6531f133e6deebe7f2dce5a0441aa7ef330b4e53', + name: 'Chronobank TIME', + symbol: 'TIME', + decimals: 8, + }, + { + address: '0xf230b790e05390fc8295f4d3f60332c93bed42e2', + name: 'Tronix', + symbol: 'TRX', + decimals: 6, + }, + { + address: '0x5c543e7ae0a1104f78406c340e9c64fd9fce5170', + name: 'vSlice', + symbol: 'VSL', + decimals: 0, + }, + { + address: '0x4df812f6064def1e5e029f1ca858777cc98d2d81', + name: 'Xaurum', + symbol: 'XAUR', + decimals: 8, + }, + ], + '42': [ + { + address: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0x323b5d4c32345ced77393b3530b1eed0f346429d', + name: 'Melon Token', + symbol: 'MLN', + decimals: 18, + }, + { + address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba', + name: 'Maker DAO', + symbol: 'MKR', + decimals: 18, + }, + { + address: '0xeee3870657e4716670f185df08652dd848fe8f7e', + name: 'Digix DAO Token', + symbol: 'DGD', + decimals: 18, + }, + { + address: '0xb18845c260f680d5b9d84649638813e342e4f8c9', + name: 'Augur Reputation Token', + symbol: 'REP', + decimals: 18, + }, + { + address: '0xef7fff64389b814a946f3e92105513705ca6b990', + name: 'Golem Network Token', + symbol: 'GNT', + decimals: 18, + }, + { + address: '0xd0a1e359811322d97991e03f863a0c30c2cf029c', + name: 'Wrapped Ether', + symbol: 'WETH', + decimals: 18, + }, + ], + '3': [ + { + address: '0xdf18648f5b4357d6cc1e27f7699af4f77ff44558', + name: 'token0', + symbol: 'TKN0', + decimals: 0, + }, + { + address: '0xd7cdcde4302a60c4d74a11eee21fbf455f476021', + name: 'token1', + symbol: 'TKN1', + decimals: 1, + }, + { + address: '0xf080f68c2113d40ff6a8528863f431908680900a', + name: 'token2', + symbol: 'TKN2', + decimals: 2, + }, + { + address: '0xe982b5c62434c98e27d15fed40447dda6b75c4eb', + name: 'token3', + symbol: 'TKN3', + decimals: 3, + }, + { + address: '0x2427d136751c1ca70480d3b2091261d639090a50', + name: 'token4', + symbol: 'TKN4', + decimals: 4, + }, + { + address: '0x7d3eca8ec55bb32bd0056edb9485b07a53d3fbfd', + name: 'token5', + symbol: 'TKN5', + decimals: 5, + }, + { + address: '0xff3c22e0a9014e9b4b1cf7a54bf39ab3107f6123', + name: 'token6', + symbol: 'TKN6', + decimals: 6, + }, + { + address: '0xdec283d9e188397c841ab59d9d9160fd47bc56f8', + name: 'token7', + symbol: 'TKN7', + decimals: 7, + }, + { + address: '0xedf5fd2f60d8fefbfa8011f2769b39657c54c3fd', + name: 'token8', + symbol: 'TKN8', + decimals: 8, + }, + { + address: '0xcd59fe7fa1a1a0ff536966a599b631d9cd5f2914', + name: 'token9', + symbol: 'TKN9', + decimals: 9, + }, + { + address: '0xaece1ee1813d56a5897f19ad50164565203b459f', + name: 'token10', + symbol: 'TKN10', + decimals: 10, + }, + { + address: '0xaab3f0619e529b1f1823be291daa7fcd38a15927', + name: 'token11', + symbol: 'TKN11', + decimals: 11, + }, + { + address: '0x2c46ad0b19cb1c1f3e51ae90d80654a227b08d30', + name: 'token12', + symbol: 'TKN12', + decimals: 12, + }, + { + address: '0x68977f3286a503f2b3930506f1b3a17dafbd9524', + name: 'token13', + symbol: 'TKN13', + decimals: 13, + }, + { + address: '0xe5c400b9ee56b823c6193a662041389624609db6', + name: 'token14', + symbol: 'TKN14', + decimals: 14, + }, + { + address: '0xf16ea9b23ddbeb6b16d253edf6b595da4009bb8b', + name: 'token16', + symbol: 'TKN16', + decimals: 16, + }, + { + address: '0x739a83860971e900c4bbbb92be6cfb9d459ef94a', + name: 'token15', + symbol: 'TKN15', + decimals: 15, + }, + { + address: '0x5eba21470cf683fe91b594afe7106039e38f3312', + name: 'token17', + symbol: 'TKN17', + decimals: 17, + }, + { + address: '0xc0ddd5df448907bb3f50350f3fe7a1da3fb2a2ee', + name: 'token18', + symbol: 'TKN18', + decimals: 18, + }, + { + address: '0x30fa25e53f8031014166fbd5e4bbeac0cd25df74', + name: 'token19', + symbol: 'TKN19', + decimals: 19, + }, + { + address: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0xc778417e063141139fce010982780140aa0cd5ab', + name: 'Ether Token', + symbol: 'WETH', + decimals: 18, + }, + { + address: '0x14823db576c11e4a54ca9e01ca0b28b18d3d1187', + name: 'b0x Protocol Token', + symbol: 'B0X', + decimals: 18, + }, + ], +}; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index e9a88b6b3..9afc5904d 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -1,4 +1,4 @@ -import { fetchAsync, logUtils } from '@0xproject/utils'; +import { fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as queryString from 'query-string'; diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts index f677b4625..3f32254de 100644 --- a/packages/website/ts/utils/mui_theme.ts +++ b/packages/website/ts/utils/mui_theme.ts @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { getMuiTheme } from 'material-ui/styles'; export const muiTheme = getMuiTheme({ diff --git a/packages/website/ts/utils/order_parser.ts b/packages/website/ts/utils/order_parser.ts index 816200e3b..8938fbc53 100644 --- a/packages/website/ts/utils/order_parser.ts +++ b/packages/website/ts/utils/order_parser.ts @@ -1,5 +1,5 @@ -import { orderParsingUtils } from '@0xproject/order-utils'; -import { logUtils } from '@0xproject/utils'; +import { orderParsingUtils } from '@0x/order-utils'; +import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; diff --git a/packages/website/ts/utils/token_address_overrides.ts b/packages/website/ts/utils/token_address_overrides.ts index e7e916273..5e7275964 100644 --- a/packages/website/ts/utils/token_address_overrides.ts +++ b/packages/website/ts/utils/token_address_overrides.ts @@ -1,4 +1,4 @@ -import { ObjectMap } from '@0xproject/types'; +import { ObjectMap } from '@0x/types'; import { constants } from 'ts/utils/constants'; // Map of networkId -> tokenSymbol -> tokenAddress diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts index 1ee1a59c5..5595e6e0f 100644 --- a/packages/website/ts/utils/translate.ts +++ b/packages/website/ts/utils/translate.ts @@ -80,7 +80,12 @@ export class Translate { case Deco.CapWords: const words = text.split(' '); - const capitalizedWords = _.map(words, w => this._capitalize(w)); + const capitalizedWords = _.map(words, (w: string, i: number) => { + if (w.length === 1) { + return w; + } + return this._capitalize(w); + }); text = capitalizedWords.join(' '); break; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index d1628bc52..87aa48018 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,9 +1,9 @@ -import { ContractWrappersError } from '@0xproject/contract-wrappers'; -import { assetDataUtils, OrderError } from '@0xproject/order-utils'; -import { constants as sharedConstants, Networks } from '@0xproject/react-shared'; -import { ExchangeContractErrs } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { ContractWrappersError } from '@0x/contract-wrappers'; +import { assetDataUtils, OrderError } from '@0x/order-utils'; +import { constants as sharedConstants, Networks } from '@0x/react-shared'; +import { ExchangeContractErrs } from '@0x/types'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as bowser from 'bowser'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; @@ -413,6 +413,10 @@ export const utils = { return BrowserType.Firefox; } else if (bowser.opera) { return BrowserType.Opera; + } else if (bowser.msedge) { + return BrowserType.Edge; + } else if (bowser.safari) { + return BrowserType.Safari; } else { return BrowserType.Other; } diff --git a/packages/website/tslint.json b/packages/website/tslint.json index b55ffe90f..50f5be4f6 100644 --- a/packages/website/tslint.json +++ b/packages/website/tslint.json @@ -1,5 +1,5 @@ { - "extends": ["@0xproject/tslint-config"], + "extends": ["@0x/tslint-config"], "rules": { "no-implicit-dependencies": false, "no-object-literal-type-assertion": false, |
