diff options
Diffstat (limited to 'packages/website')
230 files changed, 5292 insertions, 3052 deletions
diff --git a/packages/website/README.md b/packages/website/README.md index 7115a3b5c..d82d045a6 100644 --- a/packages/website/README.md +++ b/packages/website/README.md @@ -14,7 +14,7 @@ Please read our [contribution guidelines](../../CONTRIBUTING.md) before getting ## Local Dev Setup -Requires Node version 6.9.5 or higher. +Requires Node version 6.9.5 or higher Add the following to your `/etc/hosts` file: @@ -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/0xjs/1.0.0/async.md b/packages/website/md/docs/0xjs/0.0.1/async.md index 8abaef331..8abaef331 100644 --- a/packages/website/md/docs/0xjs/1.0.0/async.md +++ b/packages/website/md/docs/0xjs/0.0.1/async.md diff --git a/packages/website/md/docs/0xjs/1.0.0/errors.md b/packages/website/md/docs/0xjs/0.0.1/errors.md index e97973ccf..e97973ccf 100644 --- a/packages/website/md/docs/0xjs/1.0.0/errors.md +++ b/packages/website/md/docs/0xjs/0.0.1/errors.md diff --git a/packages/website/md/docs/0xjs/1.0.0/installation.md b/packages/website/md/docs/0xjs/0.0.1/installation.md index ac0a47699..ac0a47699 100644 --- a/packages/website/md/docs/0xjs/1.0.0/installation.md +++ b/packages/website/md/docs/0xjs/0.0.1/installation.md diff --git a/packages/website/md/docs/0xjs/1.0.0/introduction.md b/packages/website/md/docs/0xjs/0.0.1/introduction.md index 008376d33..008376d33 100644 --- a/packages/website/md/docs/0xjs/1.0.0/introduction.md +++ b/packages/website/md/docs/0xjs/0.0.1/introduction.md diff --git a/packages/website/md/docs/0xjs/1.0.0/versioning.md b/packages/website/md/docs/0xjs/0.0.1/versioning.md index 6bcaa5b4d..6bcaa5b4d 100644 --- a/packages/website/md/docs/0xjs/1.0.0/versioning.md +++ b/packages/website/md/docs/0xjs/0.0.1/versioning.md diff --git a/packages/website/md/docs/0xjs/1.0.1/async.md b/packages/website/md/docs/0xjs/1.0.1/async.md new file mode 100644 index 000000000..bd5ae9d8a --- /dev/null +++ b/packages/website/md/docs/0xjs/1.0.1/async.md @@ -0,0 +1,31 @@ +0x packages are promise-based libraries. This means that whenever an asynchronous call is required, the library method will return a native Javascript promise. You can therefore choose between using `promise` or `async/await` syntax when calling our async methods. + +_Async/await syntax (recommended):_ + +```javascript +try { + const signature = await signatureUtils.ecSignOrderHashAsync( + providerEngine, + orderHashHex, + maker, + SignerType.Default, + ); +} catch (error) { + console.log('Caught error: ', error); +} +``` + +_Promise syntax:_ + +```javascript +signatureUtils + .ecSignOrderHashAsync(providerEngine, orderHashHex, maker, SignerType.Default) + .then(function(signature) { + console.log(signature); + }) + .catch(function(error) { + console.log('Caught error: ', error); + }); +``` + +As is the convention with promise-based libraries, if an error occurs, it is thrown. It is the callers responsibility to catch thrown errors and to handle them appropriately. diff --git a/packages/website/md/docs/0xjs/1.0.1/installation.md b/packages/website/md/docs/0xjs/1.0.1/installation.md new file mode 100644 index 000000000..74c902afd --- /dev/null +++ b/packages/website/md/docs/0xjs/1.0.1/installation.md @@ -0,0 +1,40 @@ +0x.js ships as both a [UMD](https://github.com/umdjs/umd) module and a [CommonJS](https://en.wikipedia.org/wiki/CommonJS) package. + +#### CommonJS _(recommended)_: + +**Install** + +```bash +npm install 0x.js --save +``` + +**Import** + +```javascript +import { + assetDataUtils, + BigNumber, + ContractWrappers, + generatePseudoRandomSalt, + Order, + orderHashUtils, + signatureUtils, + SignerType, +} from '0x.js'; +``` + +#### UMD: + +**Install** + +Download the UMD module from our [releases page](https://github.com/0xProject/0x-monorepo/releases) and add it to your project. + +**Import** + +```html +<script type="text/javascript" src="0x.js"></script> +``` + +### Wiki + +Check out our [wiki](https://0xproject.com/wiki) for articles on how to get 0x.js setup with Ganache, Infura and more! diff --git a/packages/website/md/docs/0xjs/1.0.1/introduction.md b/packages/website/md/docs/0xjs/1.0.1/introduction.md new file mode 100644 index 000000000..4d5d314d3 --- /dev/null +++ b/packages/website/md/docs/0xjs/1.0.1/introduction.md @@ -0,0 +1 @@ +Welcome to the [0x.js](https://github.com/0xProject/0x-monorepo/tree/development/packages/0x.js) documentation! 0x.js is a Javascript library for interacting with the 0x protocol. With it, you can easily make calls to the 0x smart contracts as well as any token adhering to the token standards supported by the protocol (currently ERC20 & ERC721). Functionality includes generating, signing, filling and cancelling orders, verifying an orders signature, setting or checking a users ERC20/ERC721 token balance/allowance and much more. diff --git a/packages/website/md/docs/0xjs/2.0.0/versioning.md b/packages/website/md/docs/0xjs/1.0.1/versioning.md index 7f2b6fee9..6bae835d3 100644 --- a/packages/website/md/docs/0xjs/2.0.0/versioning.md +++ b/packages/website/md/docs/0xjs/1.0.1/versioning.md @@ -1 +1 @@ -Since v1.0.0, this package adheres to the [Semantic Versioning 2.0.0](http://semver.org/) specification. The library's public interface includes all the methods, properties and types included in the documentation. We will publish with a major version bump for any breaking change to the public interface, use a minor version bump when introducing new features in a backwards-compatible way, and patch versions when introducing backwards-compatible bug fixes. Because of this, we recommend you import `0x.js` with a caret `^2.0.0` to take advantage of non-breaking bug fixes. +Since v1.0.0, this package adheres to the [Semantic Versioning 2.0.0](http://semver.org/) specification. The library's public interface includes all the methods, properties and types included in the documentation. We will publish with a major version bump for any breaking change to the public interface, use a minor version bump when introducing new features in a backwards-compatible way, and patch versions when introducing backwards-compatible bug fixes. Because of this, we recommend you import `0x.js` with a caret `^1.0.0` to take advantage of non-breaking bug fixes. diff --git a/packages/website/md/docs/0xjs/2.0.0/async.md b/packages/website/md/docs/0xjs/2.0.0/async.md new file mode 100644 index 000000000..c84eebf94 --- /dev/null +++ b/packages/website/md/docs/0xjs/2.0.0/async.md @@ -0,0 +1,26 @@ +0x.js is a promise-based library. This means that whenever an asynchronous call is required, the library method will return a native Javascript promise. You can therefore choose between using `promise` or `async/await` syntax when calling our async methods. + +_Async/await syntax (recommended):_ + +```javascript +try { + var availableAddresses = await web3Wrapper.getAvailableAddressesAsync(); +} catch (error) { + console.log('Caught error: ', error); +} +``` + +_Promise syntax:_ + +```javascript +web3Wrapper + .getAvailableAddressesAsync() + .then(function(availableAddresses) { + console.log(availableAddresses); + }) + .catch(function(error) { + console.log('Caught error: ', error); + }); +``` + +As is the convention with promise-based libraries, if an error occurs, it is thrown. It is the callers responsibility to catch thrown errors and to handle them appropriately. diff --git a/packages/website/md/docs/0xjs/2.0.0/installation.md b/packages/website/md/docs/0xjs/2.0.0/installation.md new file mode 100644 index 000000000..aaac263d0 --- /dev/null +++ b/packages/website/md/docs/0xjs/2.0.0/installation.md @@ -0,0 +1,38 @@ +0x.js ships as both a [UMD](https://github.com/umdjs/umd) module and a [CommonJS](https://en.wikipedia.org/wiki/CommonJS) package. + +#### CommonJS _(recommended)_: + +**Install** + +```bash +npm install 0x.js --save +``` + +**Import** + +```javascript +import { + assetDataUtils, + BigNumber, + ContractWrappers, + generatePseudoRandomSalt, + orderHashUtils, + signatureUtils, +} from '0x.js'; +``` + +#### UMD: + +**Install** + +Download the UMD module from our [releases page](https://github.com/0xProject/0x-monorepo/releases) and add it to your project. + +**Import** + +```html +<script type="text/javascript" src="0x.js"></script> +``` + +### Wiki + +Check out our [wiki](https://0xproject.com/wiki) for articles on how to get 0x.js setup with TestRPC, Infura and more! diff --git a/packages/website/md/docs/0xjs/2.0.0/introduction.md b/packages/website/md/docs/0xjs/2.0.0/introduction.md deleted file mode 100644 index b98aeef38..000000000 --- a/packages/website/md/docs/0xjs/2.0.0/introduction.md +++ /dev/null @@ -1,3 +0,0 @@ -<b>**NOTE:** Release candidate versions are meant to work with V2 of 0x protocol. To interact with V1, select a 0.X version.</b> - -Welcome to the [0x.js](https://github.com/0xProject/0x-monorepo) documentation! 0x.js is a Javascript library for interacting with the 0x protocol. With it, you can easily make calls to the 0x smart contracts as well as any token adhering to the token standards supported by the protocol (currently ERC20 & ERC721). Functionality includes generating, signing, filling and cancelling orders, verifying an orders signature, setting or checking a users ERC20/ERC721 token balance/allowance and much more. diff --git a/packages/website/md/docs/asset_buyer/installation.md b/packages/website/md/docs/asset_buyer/installation.md new file mode 100644 index 000000000..3c0c95068 --- /dev/null +++ b/packages/website/md/docs/asset_buyer/installation.md @@ -0,0 +1,17 @@ +#### Install + +```bash +yarn add @0x/asset-buyer +``` + +#### Import + +```javascript +import { AssetBuyer } from '@0x/asset-buyer'; +``` + +or + +```javascript +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 new file mode 100644 index 000000000..a59539ac6 --- /dev/null +++ b/packages/website/md/docs/asset_buyer/introduction.md @@ -0,0 +1 @@ +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/asset_buyer/usage.md b/packages/website/md/docs/asset_buyer/usage.md new file mode 100644 index 000000000..209c15062 --- /dev/null +++ b/packages/website/md/docs/asset_buyer/usage.md @@ -0,0 +1,39 @@ +#### Construction + +Connecting to a standard relayer API compliant url: + +```typescript +const provider = web3.currentProvider; +const apiUrl = 'https://api.relayer.com/v2'; +const assetBuyer = AssetBuyer.getAssetBuyerForStandardRelayerAPIUrl(provider, apiUrl); +``` + +Providing your own orders: + +```typescript +const provider = web3.currentProvider; +const orders = []; // get these from your own API, a relayer, a friend, from anywhere +const assetBuyer = AssetBuyer.getAssetBuyerForProvidedOrders(provider, orders); +``` + +#### Get a quote + +A [BuyQuote](#types-BuyQuote) object contains enough information to display buy information to an end user + +```typescript +const erc20TokenAddress = '0x5fa3c....'; +const amountToBuy = new BigNumber(50000000000000000000); +const buyQuote = await assetBuyer.getBuyQuoteForERC20TokenAddressAsync(erc20TokenAddress, amountToBuy); +const quoteInfo = buyQuote.worstCaseQuoteInfo; +console.log(quoteInfo.ethAmount); // the total amount the user needs to pay to buy the desired amount (including ZRX fees) +console.log(quoteInfo.feeAmount); // a portion of the total ethAmount above that was used to buy affiliate fees +console.log(quoteInfo.ethPerAssetPrice); // the rate that this quote provides (e.g. 0.0035ETH / REP) +``` + +#### Perform a buy + +Pass the [BuyQuote](#types-BuyQuote) object from above back to the assetBuyer in order to initiate the buy transaction + +```typescript +const txHash = await assetBuyer.executeBuyQuoteAsync(buyQuote); // the hash of the transaction submitted to the Ethereum network +``` 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/introduction.md b/packages/website/md/docs/connect/2/introduction.md new file mode 100644 index 000000000..8e251b327 --- /dev/null +++ b/packages/website/md/docs/connect/2/introduction.md @@ -0,0 +1 @@ +Welcome to the [0x Connect](https://github.com/0xProject/0x-monorepo/tree/development/packages/connect) documentation! 0x Connect is a Javascript library that makes it easy to interact with relayers that conform to the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api). Functionality includes getting supported asset pairs from a relayer, getting orders filtered by different attributes, getting individual orders specified by order hash, getting orderbooks for specific asset pairs, getting fee information, and submitting orders. 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/1/installation.md b/packages/website/md/docs/contract_wrappers/1/installation.md new file mode 100644 index 000000000..d5c7fbdba --- /dev/null +++ b/packages/website/md/docs/contract_wrappers/1/installation.md @@ -0,0 +1,11 @@ +**Install** + +```bash +npm install @0xproject/contract-wrappers --save +``` + +**Import** + +```javascript +import { ContractWrappers } from '@0xproject/contract-wrappers'; +``` diff --git a/packages/website/md/docs/contract_wrappers/1/introduction.md b/packages/website/md/docs/contract_wrappers/1/introduction.md new file mode 100644 index 000000000..ccc81b373 --- /dev/null +++ b/packages/website/md/docs/contract_wrappers/1/introduction.md @@ -0,0 +1 @@ +Welcome to the [Contract-wrappers](https://github.com/0xProject/0x-monorepo/tree/development/packages/contract-wrappers) documentation! Contract-wrappers is a library for interacting with the Ethereum smart contracts that make up the 0x protocol. With it, you can easily send transactions and make calls to the 0x smart contracts as well as any token adhering to the token standards supported by the protocol (currently ERC20 & ERC721). 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/introduction.md b/packages/website/md/docs/json_schemas/1.0.0/introduction.md deleted file mode 100644 index cc777b1a8..000000000 --- a/packages/website/md/docs/json_schemas/1.0.0/introduction.md +++ /dev/null @@ -1,5 +0,0 @@ -<b>**NOTE:** Release candidate versions are meant to work with V2 of 0x protocol. To interact with V1, select a 0.X version.</b> - -Welcome to the [@0xproject/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 copy-paste 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/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/introduction.md b/packages/website/md/docs/json_schemas/1/introduction.md new file mode 100644 index 000000000..5b2e90387 --- /dev/null +++ b/packages/website/md/docs/json_schemas/1/introduction.md @@ -0,0 +1,3 @@ +Welcome to the [@0xproject/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...). All the schema files are currently TypeScript that require evaluation in order to be recognized as valid JSON. 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/schemas.md b/packages/website/md/docs/json_schemas/2/schemas.md new file mode 100644 index 000000000..8ea6c8e85 --- /dev/null +++ b/packages/website/md/docs/json_schemas/2/schemas.md @@ -0,0 +1,40 @@ +Basic Schemas + +* [Address type](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/address_schema.json) +* [Number type](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/number_schema.json) +* [Hex type](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/hex_schema.json) +* [JS number](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/js_number.json) + +0x Protocol Schemas + +* [Order](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/order_schema.json) +* [SignedOrder](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/signed_order_schema.json) +* [OrderHash](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/order_hash_schema.json) +* [ECSignature](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/ec_signature_schema.json) + +0x.js Schemas + +* [BlockParam](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/block_param_schema.json) +* [BlockRange](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/block_range_schema.json) +* [IndexFilter Values](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/index_filter_values_schema.json) +* [OrderFillRequests](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/order_fill_requests_schema.json) +* [OrderCancellationRequests](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/order_cancel_schema.json) +* [OrderFillOrKillRequests](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/order_fill_or_kill_requests_schema.json) +* [SignedOrders](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/signed_orders_schema.json) +* [Token](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/token_schema.json) +* [TxData](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/tx_data_schema.json) + +Standard Relayer API Schemas + +* [Paginated collection](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/paginated_collection_schema.json) +* [Error response](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_error_response_schema.json) +* [Order config payload](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_order_config_payload_schema.json) +* [Order config response](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_order_config_response_schema.json) +* [Orders channel subscribe payload](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_orders_channel_subscribe_payload_schema.json) +* [Orders channel subscribe](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_orders_channel_subscribe_schema.json) +* [Orders channel update](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_orders_channel_update_response_schema.json) +* [Orderbook response](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_orderbook_response_schema.json) +* [Asset pairs](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_asset_data_pairs_schema.json) +* [Trade info](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_asset_data_trade_info_schema.json) +* [Asset pairs response](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_asset_data_pairs_response_schema.json) +* [Fee recipients response](https://github.com/0xProject/0x-monorepo/blob/5ec4b27200297708298deca97603849a37b2f66a/packages/json-schemas/schemas/relayer_api_fee_recipients_response_schema.json) 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/schemas.md b/packages/website/md/docs/json_schemas/3/schemas.md new file mode 100644 index 000000000..99aff7b5a --- /dev/null +++ b/packages/website/md/docs/json_schemas/3/schemas.md @@ -0,0 +1,41 @@ +Basic Schemas + +* [Address type](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/address_schema.json) +* [Number type](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/number_schema.json) +* [Whole number type](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/whole_number_schema.json) +* [Hex type](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/hex_schema.json) +* [JS number](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/js_number.json) + +0x Protocol Schemas + +* [Order](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/order_schema.json) +* [SignedOrder](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/signed_order_schema.json) +* [OrderHash](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/order_hash_schema.json) +* [ECSignature](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/ec_signature_schema.json) + +0x.js Schemas + +* [BlockParam](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/block_param_schema.json) +* [BlockRange](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/block_range_schema.json) +* [IndexFilter Values](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/index_filter_values_schema.json) +* [OrderFillRequests](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/order_fill_requests_schema.json) +* [OrderCancellationRequests](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/order_cancel_schema.json) +* [OrderFillOrKillRequests](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/order_fill_or_kill_requests_schema.json) +* [SignedOrders](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/signed_orders_schema.json) +* [Token](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/token_schema.json) +* [TxData](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/tx_data_schema.json) + +Standard Relayer API Schemas + +* [Paginated collection](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/paginated_collection_schema.json) +* [Error response](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_error_response_schema.json) +* [Order config payload](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_order_config_payload_schema.json) +* [Order config response](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_order_config_response_schema.json) +* [Orders channel subscribe payload](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_orders_channel_subscribe_payload_schema.json) +* [Orders channel subscribe](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_orders_channel_subscribe_schema.json) +* [Orders channel update](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_orders_channel_update_response_schema.json) +* [Orderbook response](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_orderbook_response_schema.json) +* [Asset pairs](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_asset_data_pairs_schema.json) +* [Trade info](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_asset_data_trade_info_schema.json) +* [Asset pairs response](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_asset_data_pairs_response_schema.json) +* [Fee recipients response](https://github.com/0xProject/0x-monorepo/blob/528ae4376e5e605dac9666f2a5917803e942a1f9/packages/json-schemas/schemas/relayer_api_fee_recipients_response_schema.json) 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/1/installation.md b/packages/website/md/docs/order_watcher/1/installation.md new file mode 100644 index 000000000..4b28f583d --- /dev/null +++ b/packages/website/md/docs/order_watcher/1/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0xproject/order-watcher +``` + +**Import** + +```javascript +import { OrderWatcher } from '@0xproject/order-watcher'; +``` + +or + +```javascript +var OrderWatcher = require('@0xproject/order-utils').OrderWatcher; +``` diff --git a/packages/website/md/docs/order_watcher/1/introduction.md b/packages/website/md/docs/order_watcher/1/introduction.md new file mode 100644 index 000000000..f922d922f --- /dev/null +++ b/packages/website/md/docs/order_watcher/1/introduction.md @@ -0,0 +1 @@ +Welcome to the [@0xproject/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/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.0.0/introduction.md deleted file mode 100644 index 566a573b6..000000000 --- a/packages/website/md/docs/smart_contracts/1.0.0/introduction.md +++ /dev/null @@ -1,8 +0,0 @@ -Welcome to the [0x smart contracts](https://github.com/0xProject/contracts) documentation! This documentation is intended for dApp developers who want to integrate 0x exchange functionality directly into their own smart contracts. - -### Helpful wiki articles: - -* [Overview of 0x protocol architecture](https://0xproject.com/wiki#Architecture) -* [0x smart contract interactions](https://0xproject.com/wiki#Contract-Interactions) -* [Deployed smart contract addresses](https://0xproject.com/wiki#Deployed-Addresses) -* [0x protocol message format](https://0xproject.com/wiki#Message-Format) diff --git a/packages/website/md/docs/smart_contracts/1/introduction.md b/packages/website/md/docs/smart_contracts/1/introduction.md new file mode 100644 index 000000000..79a8f00fd --- /dev/null +++ b/packages/website/md/docs/smart_contracts/1/introduction.md @@ -0,0 +1 @@ +Welcome to the [0x smart contracts](https://github.com/0xProject/0x-monorepo/tree/development/packages/contracts) documentation! This documentation is intended for dApp developers who want to integrate 0x exchange functionality directly into their own smart contracts. diff --git a/packages/website/md/docs/smart_contracts/2/introduction.md b/packages/website/md/docs/smart_contracts/2/introduction.md new file mode 100644 index 000000000..4aa31db3d --- /dev/null +++ b/packages/website/md/docs/smart_contracts/2/introduction.md @@ -0,0 +1,6 @@ +Welcome to the [0x smart contracts](https://github.com/0xProject/0x-monorepo/tree/development/packages/contracts) documentation! This documentation is intended for dApp developers who want to integrate 0x exchange functionality directly into their own smart contracts. + +### Helpful wiki articles: + +* [Deployed smart contract addresses](https://0xproject.com/wiki#Deployed-Addresses) +* [0x Protocol Specification](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.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 2784a0462..efb97d309 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,16 +1,17 @@ { - "name": "@0xproject/website", - "version": "0.0.44", + "name": "@0x/website", + "version": "0.0.55", "engines": { "node": ">=6.12" }, "private": true, "description": "Website and 0x portal dapp", "scripts": { - "build": "NODE_ENV=production node --max_old_space_size=8192 ../../node_modules/.bin/webpack", + "build": "node --max_old_space_size=8192 ../../node_modules/.bin/webpack --mode production", + "build:dev": "../../node_modules/.bin/webpack --mode development", "clean": "shx rm -f public/bundle*", - "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'", - "watch_without_deps": "webpack-dev-server --content-base public --https", + "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'", + "dev": "webpack-dev-server --mode development --content-base public --https", "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers", "deploy_live": "DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js" @@ -18,43 +19,45 @@ "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { - "@0xproject/contract-wrappers": "^0.0.5", - "@0xproject/order-utils": "^0.0.9", - "@0xproject/react-docs": "^1.0.5", - "@0xproject/react-shared": "^0.2.3", - "@0xproject/subproviders": "^1.0.5", - "@0xproject/types": "^0.8.1", - "@0xproject/typescript-typings": "^0.4.3", - "@0xproject/utils": "^1.0.5", - "@0xproject/web3-wrapper": "^1.2.0", + "@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.1.1", "ethereumjs-util": "^5.1.1", "find-versions": "^2.0.0", "jsonschema": "^1.2.0", "less": "^2.7.2", "lodash": "^4.17.5", - "material-ui": "^0.17.1", + "material-ui": "^0.20.0", "moment": "2.21.0", "numeral": "^2.0.6", "polished": "^1.9.2", "query-string": "^6.0.0", - "react": "15.6.1", - "react-copy-to-clipboard": "^4.2.3", + "react": "^16.4.2", + "react-copy-to-clipboard": "^5.0.0", "react-document-title": "^2.0.3", - "react-dom": "15.6.1", + "react-dom": "^16.4.2", "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": "^1.5.2", - "react-tap-event-plugin": "^2.0.1", + "react-scroll": "0xproject/react-scroll#pr-330-and-replace-state", "react-tooltip": "^3.2.7", + "react-typist": "^2.0.4", "redux": "^3.6.0", "redux-devtools-extension": "^2.13.2", + "rollbar": "^2.4.7", "semver-sort": "0.0.4", "styled-components": "^3.3.0", "thenby": "^1.2.3", @@ -69,39 +72,35 @@ "@types/find-versions": "^2.0.0", "@types/jsonschema": "^1.1.1", "@types/lodash": "4.14.104", - "@types/material-ui": "0.18.0", - "@types/node": "^8.0.53", + "@types/material-ui": "^0.20.0", + "@types/node": "*", "@types/numeral": "^0.0.22", "@types/query-string": "^5.1.0", - "@types/react": "16.3.13", + "@types/react": "^16.4.2", "@types/react-copy-to-clipboard": "^4.2.0", - "@types/react-dom": "^16.0.3", + "@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": "0.0.31", + "@types/react-scroll": "1.5.3", "@types/react-tap-event-plugin": "0.0.30", "@types/redux": "^3.6.0", - "awesome-typescript-loader": "^3.1.3", - "copy-webpack-plugin": "^4.0.1", - "copyfiles": "^2.0.0", + "@types/web3-provider-engine": "^14.0.0", + "awesome-typescript-loader": "^5.2.1", "css-loader": "0.23.x", - "exports-loader": "0.6.x", - "imports-loader": "0.6.x", - "json-loader": "^0.5.4", - "less-loader": "^2.2.3", + "less-loader": "^4.1.0", "make-promises-safe": "^1.1.0", "raw-loader": "^0.5.1", - "rollbar-sourcemap-webpack-plugin": "^2.3.0", + "rollbar-sourcemap-webpack-plugin": "^2.4.0", "shx": "^0.2.2", - "source-map-loader": "^0.1.6", - "style-loader": "0.13.x", + "source-map-loader": "^0.2.4", + "style-loader": "0.23.x", + "terser-webpack-plugin": "^1.1.0", "tslint": "5.11.0", "tslint-config-0xproject": "^0.0.2", "typescript": "3.0.1", - "uglifyjs-webpack-plugin": "^1.2.5", - "webpack": "^3.1.0", - "webpack-dev-middleware": "^1.10.0", - "webpack-dev-server": "^2.5.0" + "uglifyjs-webpack-plugin": "^2.0.1", + "webpack": "^4.20.2", + "webpack-cli": "3.1.2", + "webpack-dev-server": "^3.1.9" } } 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/advisors/david.png b/packages/website/public/images/advisors/david.png Binary files differnew file mode 100644 index 000000000..0f87d8935 --- /dev/null +++ b/packages/website/public/images/advisors/david.png diff --git a/packages/website/public/images/coinbase_wallet_logo.png b/packages/website/public/images/coinbase_wallet_logo.png Binary files differnew file mode 100644 index 000000000..04c1b7290 --- /dev/null +++ b/packages/website/public/images/coinbase_wallet_logo.png 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/public/images/landing/0x_homepage.svg b/packages/website/public/images/landing/0x_homepage.svg new file mode 100644 index 000000000..d2ccef8f4 --- /dev/null +++ b/packages/website/public/images/landing/0x_homepage.svg @@ -0,0 +1,341 @@ +<svg width="410" height="254" viewBox="0 0 410 254" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M409.979 122.524C410.195 134.531 408.758 137.636 404.251 140.251L210.864 252.464C207.334 254.512 202.985 254.512 199.455 252.464L6.06657 140.251C1.55911 137.635 -1.2295 135.189 0.536218 121.797L409.979 122.524Z" fill="#D0CAFF"/> +<path d="M178.097 125.679L87.1703 178.372" stroke="#C4AED9" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M181.659 127.746L90.732 180.439" stroke="#C4AED9" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M185.338 129.88L94.41 182.573" stroke="#C4AED9" stroke-width="1.32046" stroke-linecap="round"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M199.455 245.823L6.06657 133.61C-1.53963 129.196 -1.53963 118.163 6.06657 113.749L199.453 1.53604C202.984 -0.512014 207.333 -0.512014 210.863 1.53604L404.251 113.75C411.858 118.163 411.858 129.197 404.251 133.611L210.864 245.823C207.334 247.871 202.985 247.871 199.455 245.823Z" fill="#F0EEFF"/> +<path d="M79.7358 107.066L133.382 75.8612C136.304 73.965 139.326 73.974 141.767 75.4102L186.939 101.973" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M82.4662 108.801L134.79 78.5156C136.798 77.3507 139.273 77.3583 141.274 78.5356L184.001 103.681" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M85.1381 110.605L134.534 82.5144C136.541 81.3495 139.017 81.3571 141.017 82.5348L180.403 105.714" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M330.5 124L270.289 160.234C267.367 162.131 264.345 162.121 261.903 160.685L226.643 140.288" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M325.5 123.5L268.881 157.58C266.873 158.745 264.398 158.737 262.397 157.56L229.58 138.58" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M322.5 122L269.137 153.581C267.129 154.746 264.654 154.739 262.653 153.561L233.178 136.547" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M323.711 121.778C316.096 117.482 316.096 110.517 323.711 106.222C331.327 101.926 343.673 101.926 351.289 106.222C358.904 110.517 358.904 117.482 351.289 121.778C343.673 126.074 331.327 126.074 323.711 121.778Z" stroke="#DBDBFF" stroke-width="2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M52.7112 125.924C45.0963 121.824 45.0963 115.176 52.7112 111.075C60.3266 106.975 72.6734 106.975 80.2888 111.075C87.9038 115.176 87.9038 121.824 80.2888 125.924C72.6734 130.025 60.3266 130.025 52.7112 125.924Z" stroke="#DBDBFF" stroke-width="2"/> +<g opacity="0.372566"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M171.171 194.759L170.656 194.461C170.619 194.439 170.596 194.399 170.596 194.357V192.616C170.596 192.524 170.695 192.466 170.775 192.513L171.29 192.811C171.327 192.833 171.35 192.872 171.35 192.915V194.655C171.35 194.748 171.251 194.805 171.171 194.759Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M172.622 195.59L172.107 195.291C172.07 195.269 172.047 195.23 172.047 195.187V193.447C172.047 193.354 172.146 193.297 172.226 193.343L172.741 193.642C172.778 193.663 172.801 193.703 172.801 193.745V195.486C172.801 195.578 172.702 195.635 172.622 195.59Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M174.073 196.42L173.558 196.122C173.521 196.1 173.499 196.06 173.499 196.018V194.277C173.499 194.185 173.598 194.127 173.677 194.174L174.192 194.472C174.23 194.494 174.252 194.533 174.252 194.576V196.316C174.252 196.409 174.153 196.466 174.073 196.42Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M175.525 197.251L175.009 196.952C174.973 196.93 174.95 196.891 174.95 196.848V195.108C174.95 195.015 175.049 194.958 175.128 195.004L175.644 195.303C175.681 195.324 175.703 195.364 175.703 195.406V197.147C175.703 197.239 175.604 197.296 175.525 197.251Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M176.976 198.081L176.46 197.783C176.424 197.761 176.401 197.721 176.401 197.679V195.938C176.401 195.846 176.5 195.789 176.579 195.835L177.095 196.133C177.132 196.155 177.154 196.194 177.154 196.237V197.978C177.154 198.07 177.055 198.127 176.976 198.081Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M178.427 198.912L177.912 198.613C177.875 198.591 177.852 198.552 177.852 198.509V196.769C177.852 196.676 177.951 196.619 178.031 196.665L178.546 196.964C178.583 196.985 178.606 197.025 178.606 197.067V198.808C178.606 198.9 178.506 198.958 178.427 198.912Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M179.878 199.742L179.363 199.444C179.326 199.422 179.303 199.382 179.303 199.34V197.599C179.303 197.507 179.402 197.45 179.482 197.496L179.997 197.794C180.034 197.816 180.057 197.855 180.057 197.898V199.639C180.057 199.731 179.958 199.788 179.878 199.742Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M181.33 200.652L180.814 200.353C180.777 200.332 180.754 200.293 180.754 200.25V198.509C180.754 198.417 180.854 198.359 180.933 198.406L181.449 198.704C181.485 198.725 181.508 198.765 181.508 198.808V200.548C181.508 200.64 181.409 200.698 181.33 200.652Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M182.781 201.443L182.265 201.144C182.228 201.123 182.205 201.083 182.205 201.041V199.3C182.205 199.208 182.305 199.15 182.384 199.196L182.9 199.495C182.936 199.517 182.959 199.556 182.959 199.599V201.339C182.959 201.432 182.86 201.489 182.781 201.443Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M184.232 202.313L183.716 202.014C183.679 201.993 183.657 201.954 183.657 201.911V200.17C183.657 200.078 183.756 200.02 183.836 200.067L184.351 200.365C184.388 200.387 184.41 200.426 184.41 200.469V202.209C184.41 202.302 184.311 202.359 184.232 202.313Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M185.683 203.144L185.168 202.845C185.131 202.824 185.108 202.784 185.108 202.741V201.001C185.108 200.909 185.207 200.851 185.287 200.897L185.802 201.196C185.839 201.217 185.862 201.256 185.862 201.299V203.04C185.862 203.132 185.763 203.19 185.683 203.144Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M202.343 194.776L202.869 194.471C202.907 194.449 202.93 194.409 202.93 194.365V192.588C202.93 192.494 202.829 192.435 202.748 192.482L202.221 192.786C202.184 192.808 202.161 192.849 202.161 192.893V194.67C202.161 194.764 202.262 194.823 202.343 194.776Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M200.861 195.624L201.387 195.319C201.425 195.297 201.448 195.257 201.448 195.214V193.436C201.448 193.342 201.347 193.283 201.266 193.33L200.74 193.635C200.702 193.656 200.679 193.697 200.679 193.741V195.518C200.679 195.612 200.78 195.671 200.861 195.624Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M199.379 196.472L199.905 196.167C199.943 196.145 199.966 196.105 199.966 196.062V194.284C199.966 194.19 199.865 194.131 199.784 194.178L199.257 194.483C199.22 194.505 199.197 194.545 199.197 194.589V196.366C199.197 196.461 199.298 196.519 199.379 196.472Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M197.897 197.32L198.423 197.015C198.461 196.993 198.484 196.953 198.484 196.91V195.132C198.484 195.038 198.383 194.979 198.302 195.026L197.775 195.331C197.738 195.353 197.715 195.393 197.715 195.437V197.214C197.715 197.309 197.816 197.367 197.897 197.32Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M196.415 198.168L196.941 197.863C196.979 197.841 197.002 197.801 197.002 197.758V195.98C197.002 195.886 196.901 195.827 196.82 195.874L196.294 196.179C196.256 196.201 196.233 196.242 196.233 196.285V198.062C196.233 198.157 196.334 198.215 196.415 198.168Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M194.933 199.017L195.459 198.711C195.497 198.69 195.52 198.649 195.52 198.606V196.828C195.52 196.735 195.419 196.676 195.338 196.722L194.811 197.027C194.774 197.049 194.751 197.09 194.751 197.133V198.91C194.751 199.005 194.852 199.063 194.933 199.017Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M193.451 199.865L193.977 199.56C194.015 199.538 194.038 199.498 194.038 199.454V197.676C194.038 197.583 193.937 197.524 193.856 197.571L193.329 197.876C193.292 197.897 193.269 197.938 193.269 197.982V199.758C193.269 199.853 193.37 199.912 193.451 199.865Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M191.969 200.794L192.495 200.489C192.533 200.467 192.556 200.427 192.556 200.383V198.605C192.556 198.512 192.455 198.453 192.374 198.5L191.848 198.805C191.81 198.827 191.787 198.867 191.787 198.91V200.688C191.787 200.782 191.888 200.841 191.969 200.794Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M190.487 201.601L191.013 201.296C191.051 201.274 191.074 201.234 191.074 201.191V199.413C191.074 199.319 190.973 199.26 190.892 199.307L190.366 199.612C190.328 199.634 190.305 199.674 190.305 199.718V201.496C190.305 201.59 190.406 201.649 190.487 201.601Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M189.005 202.49L189.531 202.185C189.569 202.163 189.592 202.123 189.592 202.08V200.302C189.592 200.208 189.491 200.149 189.41 200.196L188.883 200.501C188.846 200.523 188.823 200.563 188.823 200.607V202.384C188.823 202.478 188.924 202.537 189.005 202.49Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M187.523 203.338L188.049 203.033C188.087 203.011 188.11 202.971 188.11 202.928V201.15C188.11 201.056 188.009 200.998 187.928 201.044L187.402 201.349C187.364 201.371 187.341 201.411 187.341 201.455V203.232C187.341 203.327 187.442 203.386 187.523 203.338Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M169.65 190.038L169.661 192.12C169.591 192.497 169.745 192.91 170.122 193.129L186.297 202.514C186.592 202.686 186.956 202.686 187.251 202.514L203.426 193.129C203.803 192.911 203.957 192.497 203.887 192.12L203.897 190.038" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M186.297 200.143L170.122 190.757C169.485 190.389 169.485 189.466 170.122 189.097L186.297 179.711C186.592 179.54 186.956 179.54 187.251 179.711L203.426 189.097C204.062 189.466 204.062 190.389 203.426 190.757L187.251 200.143C186.956 200.314 186.592 200.314 186.297 200.143Z" fill="#A59EF7"/> +</g> +<path fill-rule="evenodd" clip-rule="evenodd" d="M98.8553 102.466C96.2624 102.466 94.1604 100.354 94.1604 97.7481C94.1604 95.1427 96.2624 93.0301 98.8553 93.0301C101.448 93.0301 103.55 95.1427 103.55 97.7481C103.55 100.354 101.448 102.466 98.8553 102.466Z" fill="#92F6D2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M117.665 88.5403C117.665 91.1457 115.563 93.2582 112.97 93.2582C110.377 93.2582 108.275 91.1457 108.275 88.5403C108.275 85.9345 110.377 83.8219 112.97 83.8219C115.563 83.8219 117.665 85.9345 117.665 88.5403Z" fill="#92F6D2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M131.779 80.8495C131.779 83.4553 129.677 85.5679 127.085 85.5679C124.492 85.5679 122.39 83.4553 122.39 80.8495C122.39 78.2436 124.492 76.1315 127.085 76.1315C129.677 76.1315 131.779 78.2436 131.779 80.8495Z" fill="#92F6D2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M141.021 82.3654C138.429 82.3654 136.326 80.2528 136.326 77.647C136.326 75.0416 138.429 72.9291 141.021 72.9291C143.614 72.9291 145.716 75.0416 145.716 77.647C145.716 80.2528 143.614 82.3654 141.021 82.3654Z" fill="#92F6D2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M159.481 85.568C159.481 88.1734 157.379 90.2859 154.786 90.2859C152.194 90.2859 150.092 88.1734 150.092 85.568C150.092 82.9622 152.194 80.8496 154.786 80.8496C157.379 80.8496 159.481 82.9622 159.481 85.568Z" fill="#92F6D2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M171.279 95.0541C171.279 97.6595 169.177 99.7721 166.585 99.7721C163.992 99.7721 161.89 97.6595 161.89 95.0541C161.89 92.4483 163.992 90.3357 166.585 90.3357C169.177 90.3357 171.279 92.4483 171.279 95.0541Z" fill="#92F6D2"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M244.927 140.363C244.927 142.969 242.825 145.082 240.232 145.082C237.639 145.082 235.537 142.969 235.537 140.363C235.537 137.758 237.639 135.645 240.232 135.645C242.825 135.645 244.927 137.758 244.927 140.363Z" fill="#8CB6FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M258.321 149.423C258.321 152.029 256.219 154.141 253.626 154.141C251.033 154.141 248.931 152.029 248.931 149.423C248.931 146.817 251.033 144.705 253.626 144.705C256.219 144.705 258.321 146.817 258.321 149.423Z" fill="#8CB6FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M267.921 161.512C265.328 161.512 263.226 159.399 263.226 156.793C263.226 154.188 265.328 152.075 267.921 152.075C270.514 152.075 272.616 154.188 272.616 156.793C272.616 159.399 270.514 161.512 267.921 161.512Z" fill="#8CB6FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M288.178 149.398C288.178 152.004 286.076 154.116 283.483 154.116C280.891 154.116 278.789 152.004 278.789 149.398C278.789 146.792 280.891 144.68 283.483 144.68C286.076 144.68 288.178 146.792 288.178 149.398Z" fill="#8CB6FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M302.505 141.805C302.505 144.411 300.403 146.523 297.811 146.523C295.218 146.523 293.116 144.411 293.116 141.805C293.116 139.199 295.218 137.087 297.811 137.087C300.403 137.087 302.505 139.199 302.505 141.805Z" fill="#8CB6FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M315.374 133.208C315.374 135.813 313.272 137.926 310.679 137.926C308.086 137.926 305.984 135.813 305.984 133.208C305.984 130.602 308.086 128.489 310.679 128.489C313.272 128.489 315.374 130.602 315.374 133.208Z" fill="#8CB6FF"/> +<path d="M177.154 130.896L89.638 182.735" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M180.715 132.963L93.2464 184.097" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path d="M184.394 135.097L96.4554 185.742" stroke="#DBDBFF" stroke-width="1.32046" stroke-linecap="round"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M157.606 126.233L156.096 125.357C155.988 125.295 155.922 125.178 155.922 125.053V119.944C155.922 119.674 156.212 119.505 156.445 119.64L157.956 120.516C158.064 120.579 158.13 120.695 158.13 120.821V125.929C158.13 126.2 157.839 126.368 157.606 126.233Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M161.866 128.671L160.355 127.795C160.247 127.732 160.181 127.616 160.181 127.491V122.382C160.181 122.112 160.472 121.943 160.705 122.078L162.215 122.954C162.323 123.017 162.389 123.133 162.389 123.258V128.367C162.389 128.637 162.099 128.806 161.866 128.671Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M166.125 131.109L164.615 130.232C164.507 130.17 164.44 130.054 164.44 129.929V124.819C164.44 124.549 164.731 124.38 164.964 124.516L166.474 125.392C166.582 125.455 166.649 125.57 166.649 125.696V130.805C166.649 131.075 166.358 131.244 166.125 131.109Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M170.384 133.546L168.874 132.67C168.766 132.608 168.699 132.491 168.699 132.366V127.257C168.699 126.987 168.991 126.818 169.223 126.953L170.733 127.829C170.841 127.892 170.908 128.008 170.908 128.133V133.242C170.908 133.513 170.617 133.681 170.384 133.546Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M174.644 135.984L173.133 135.107C173.025 135.045 172.959 134.929 172.959 134.804V129.695C172.959 129.425 173.249 129.255 173.483 129.391L174.993 130.267C175.101 130.33 175.167 130.445 175.167 130.571V135.68C175.167 135.95 174.876 136.119 174.644 135.984Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M178.903 138.422L177.393 137.545C177.285 137.483 177.218 137.366 177.218 137.242V132.132C177.218 131.862 177.509 131.693 177.742 131.828L179.252 132.704C179.36 132.767 179.427 132.883 179.427 133.008V138.118C179.427 138.388 179.136 138.556 178.903 138.422Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M183.162 140.859L181.652 139.983C181.544 139.92 181.477 139.804 181.477 139.679V134.57C181.477 134.3 181.768 134.13 182.001 134.266L183.511 135.142C183.619 135.205 183.686 135.321 183.686 135.446V140.555C183.686 140.826 183.395 140.994 183.162 140.859Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M187.422 143.53L185.911 142.653C185.803 142.591 185.737 142.475 185.737 142.35V137.24C185.737 136.97 186.028 136.801 186.261 136.936L187.771 137.812C187.879 137.876 187.945 137.991 187.945 138.117V143.226C187.945 143.496 187.654 143.665 187.422 143.53Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M191.681 145.851L190.171 144.974C190.063 144.912 189.996 144.796 189.996 144.671V139.562C189.996 139.292 190.287 139.122 190.52 139.258L192.03 140.134C192.138 140.197 192.205 140.312 192.205 140.438V145.547C192.205 145.817 191.913 145.986 191.681 145.851Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M195.94 148.405L194.43 147.528C194.322 147.466 194.255 147.35 194.255 147.225V142.116C194.255 141.846 194.546 141.676 194.779 141.812L196.289 142.688C196.398 142.751 196.464 142.866 196.464 142.992V148.101C196.464 148.371 196.173 148.54 195.94 148.405Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M200.199 150.843L198.689 149.966C198.581 149.904 198.515 149.788 198.515 149.663V144.553C198.515 144.283 198.805 144.114 199.038 144.249L200.549 145.125C200.657 145.188 200.723 145.304 200.723 145.43V150.539C200.723 150.809 200.432 150.978 200.199 150.843Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M249.098 126.283L250.641 125.388C250.751 125.324 250.819 125.206 250.819 125.078V119.86C250.819 119.584 250.522 119.412 250.284 119.55L248.742 120.445C248.632 120.509 248.564 120.627 248.564 120.755V125.973C248.564 126.249 248.861 126.421 249.098 126.283Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M244.749 128.773L246.291 127.877C246.401 127.813 246.469 127.695 246.469 127.567V122.349C246.469 122.073 246.172 121.901 245.934 122.039L244.392 122.934C244.282 122.998 244.214 123.116 244.214 123.244V128.462C244.214 128.738 244.511 128.91 244.749 128.773Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M240.399 131.262L241.941 130.367C242.052 130.303 242.12 130.185 242.12 130.057V124.839C242.12 124.563 241.822 124.391 241.585 124.528L240.043 125.423C239.932 125.488 239.864 125.606 239.864 125.734V130.952C239.864 131.227 240.162 131.4 240.399 131.262Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M236.049 133.751L237.592 132.856C237.702 132.792 237.77 132.674 237.77 132.546V127.328C237.77 127.052 237.473 126.88 237.235 127.018L235.693 127.913C235.583 127.977 235.515 128.095 235.515 128.223V133.441C235.515 133.717 235.812 133.889 236.049 133.751Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M231.7 136.24L233.242 135.345C233.353 135.282 233.42 135.163 233.42 135.035V129.818C233.42 129.541 233.123 129.369 232.885 129.507L231.343 130.402C231.233 130.466 231.165 130.584 231.165 130.713V135.93C231.165 136.206 231.462 136.378 231.7 136.24Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M227.35 138.73L228.892 137.835C229.003 137.771 229.071 137.653 229.071 137.525V132.307C229.071 132.031 228.773 131.858 228.536 131.996L226.994 132.891C226.883 132.956 226.815 133.074 226.815 133.202V138.42C226.815 138.695 227.113 138.868 227.35 138.73Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M223 141.219L224.543 140.324C224.653 140.26 224.721 140.142 224.721 140.014V134.796C224.721 134.52 224.424 134.348 224.186 134.486L222.644 135.381C222.534 135.445 222.466 135.563 222.466 135.691V140.909C222.466 141.185 222.763 141.357 223 141.219Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M218.651 143.946L220.193 143.051C220.304 142.988 220.371 142.869 220.371 142.741V137.523C220.371 137.247 220.074 137.075 219.836 137.213L218.294 138.107C218.184 138.172 218.116 138.29 218.116 138.419V143.636C218.116 143.912 218.413 144.084 218.651 143.946Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M214.301 146.316L215.843 145.421C215.954 145.358 216.022 145.239 216.022 145.111V139.894C216.022 139.618 215.724 139.446 215.487 139.584L213.945 140.478C213.834 140.542 213.766 140.661 213.766 140.789V146.006C213.766 146.282 214.064 146.454 214.301 146.316Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M209.951 148.925L211.494 148.03C211.604 147.966 211.672 147.847 211.672 147.719V142.502C211.672 142.226 211.375 142.054 211.137 142.192L209.595 143.086C209.485 143.15 209.417 143.269 209.417 143.397V148.614C209.417 148.89 209.714 149.063 209.951 148.925Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M205.602 151.414L207.144 150.519C207.255 150.456 207.322 150.337 207.322 150.209V144.991C207.322 144.716 207.025 144.543 206.787 144.681L205.245 145.575C205.135 145.64 205.067 145.758 205.067 145.886V151.104C205.067 151.38 205.364 151.552 205.602 151.414Z" fill="#6D6475"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M153.145 112.376L153.176 118.488C152.971 119.595 153.422 120.808 154.529 121.45L202.003 148.997C202.87 149.5 203.937 149.5 204.804 148.997L252.278 121.45C253.384 120.808 253.834 119.595 253.63 118.488L253.661 112.376" fill="#454545"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M202.003 141.196L154.529 113.649C152.661 112.566 152.661 109.857 154.529 108.774L202.003 81.2263C202.869 80.724 203.937 80.724 204.803 81.2263L252.277 108.774C254.145 109.857 254.145 112.566 252.277 113.649L204.804 141.196C203.937 141.699 202.869 141.699 202.003 141.196Z" fill="#545454"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M175.567 115.451C176.655 117.855 178.687 120.153 181.699 122.145C185.86 124.897 191.256 126.654 196.991 127.388C199.842 127.753 202.776 127.865 205.685 127.718C206.117 126.191 206.527 124.595 206.902 122.944C207.004 122.499 207.098 122.046 207.194 121.595C203.77 122.037 200.182 121.902 196.884 121.206L196.817 117.242L175.567 115.451Z" fill="white"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M195.709 95.2149C191.624 95.8524 187.723 97.0234 184.334 98.748C179.587 101.165 176.557 104.299 175.295 107.631C174.67 109.279 174.479 110.975 174.729 112.656C177.361 112.907 180.112 113.146 182.96 113.364C183.724 113.423 184.504 113.478 185.281 113.534C184.522 111.549 184.756 109.47 185.953 107.559L192.84 107.513L195.709 95.2149Z" fill="white"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M230.792 106.981C229.705 104.573 227.673 102.272 224.657 100.277C220.492 97.5232 215.09 95.7649 209.349 95.0321C206.508 94.6693 203.586 94.5587 200.688 94.7034C200.256 96.2311 199.844 97.8272 199.468 99.4797C199.366 99.9231 199.271 100.376 199.175 100.826C202.597 100.386 206.182 100.522 209.476 101.217L209.48 101.218L209.558 104.945L230.792 106.981Z" fill="white"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M210.774 127.184C214.812 126.542 218.668 125.381 222.022 123.674C226.764 121.26 229.793 118.129 231.057 114.802C231.686 113.147 231.878 111.444 231.626 109.757C228.994 109.506 226.244 109.268 223.397 109.051C222.632 108.992 221.851 108.936 221.073 108.881C221.837 110.871 221.602 112.957 220.398 114.873L220.371 114.912L213.699 114.981L210.774 127.184Z" fill="white"/> +<g opacity="0.372566"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M183.395 216.512L182.537 216.014C182.475 215.978 182.437 215.912 182.437 215.842V212.937C182.437 212.784 182.603 212.687 182.735 212.764L183.593 213.262C183.655 213.298 183.693 213.364 183.693 213.435V216.34C183.693 216.493 183.527 216.589 183.395 216.512Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M185.816 217.898L184.958 217.399C184.896 217.364 184.858 217.298 184.858 217.227V214.323C184.858 214.169 185.024 214.073 185.156 214.15L186.014 214.648C186.076 214.683 186.114 214.75 186.114 214.821V217.725C186.114 217.879 185.948 217.974 185.816 217.898Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M188.237 219.284L187.379 218.785C187.317 218.75 187.279 218.684 187.279 218.613V215.709C187.279 215.555 187.445 215.459 187.577 215.536L188.435 216.034C188.497 216.069 188.535 216.135 188.535 216.207V219.111C188.535 219.264 188.369 219.36 188.237 219.284Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M190.658 220.669L189.8 220.171C189.738 220.135 189.7 220.069 189.7 219.998V217.094C189.7 216.94 189.866 216.844 189.998 216.921L190.856 217.419C190.918 217.455 190.956 217.521 190.956 217.592V220.496C190.956 220.65 190.79 220.746 190.658 220.669Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M193.079 222.054L192.221 221.556C192.159 221.521 192.121 221.455 192.121 221.384V218.48C192.121 218.326 192.287 218.23 192.419 218.307L193.277 218.805C193.339 218.84 193.377 218.906 193.377 218.978V221.882C193.377 222.035 193.211 222.131 193.079 222.054Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M195.5 223.44L194.642 222.942C194.58 222.906 194.542 222.84 194.542 222.769V219.865C194.542 219.711 194.708 219.615 194.84 219.692L195.698 220.19C195.76 220.226 195.798 220.292 195.798 220.363V223.268C195.798 223.421 195.632 223.517 195.5 223.44Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M197.921 224.826L197.063 224.327C197.001 224.292 196.963 224.226 196.963 224.155V221.251C196.963 221.097 197.129 221.001 197.261 221.078L198.119 221.576C198.181 221.611 198.219 221.677 198.219 221.749V224.653C198.219 224.807 198.053 224.902 197.921 224.826Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M200.342 226.343L199.484 225.846C199.422 225.81 199.385 225.744 199.385 225.673V222.769C199.385 222.615 199.55 222.519 199.682 222.596L200.541 223.094C200.602 223.13 200.64 223.195 200.64 223.267V226.171C200.64 226.324 200.474 226.42 200.342 226.343Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M202.763 227.663L201.905 227.165C201.843 227.129 201.806 227.063 201.806 226.992V224.088C201.806 223.934 201.971 223.839 202.103 223.915L202.962 224.413C203.023 224.449 203.061 224.515 203.061 224.586V227.49C203.061 227.644 202.895 227.74 202.763 227.663Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M205.184 229.115L204.326 228.616C204.264 228.581 204.227 228.515 204.227 228.444V225.54C204.227 225.386 204.392 225.29 204.524 225.367L205.383 225.865C205.444 225.9 205.482 225.966 205.482 226.038V228.942C205.482 229.095 205.316 229.191 205.184 229.115Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M207.605 230.5L206.747 230.002C206.685 229.967 206.648 229.901 206.648 229.83V226.926C206.648 226.772 206.813 226.676 206.945 226.752L207.804 227.251C207.865 227.286 207.903 227.352 207.903 227.424V230.328C207.903 230.481 207.738 230.577 207.605 230.5Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M235.4 216.54L236.277 216.032C236.339 215.995 236.378 215.928 236.378 215.855V212.889C236.378 212.733 236.209 212.635 236.074 212.713L235.197 213.222C235.134 213.258 235.096 213.325 235.096 213.398V216.364C235.096 216.521 235.265 216.619 235.4 216.54Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M232.927 217.955L233.804 217.447C233.867 217.41 233.906 217.343 233.906 217.27V214.305C233.906 214.148 233.737 214.05 233.601 214.128L232.725 214.637C232.662 214.673 232.624 214.74 232.624 214.813V217.779C232.624 217.936 232.792 218.034 232.927 217.955Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M230.455 219.37L231.332 218.862C231.395 218.825 231.433 218.758 231.433 218.685V215.719C231.433 215.562 231.264 215.464 231.129 215.543L230.253 216.052C230.19 216.088 230.151 216.155 230.151 216.228V219.194C230.151 219.351 230.32 219.449 230.455 219.37Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M227.983 220.785L228.859 220.277C228.922 220.24 228.961 220.173 228.961 220.1V217.134C228.961 216.977 228.792 216.879 228.657 216.958L227.78 217.467C227.717 217.503 227.678 217.57 227.678 217.643V220.609C227.678 220.765 227.848 220.863 227.983 220.785Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M225.51 222.2L226.387 221.692C226.45 221.655 226.489 221.588 226.489 221.515V218.549C226.489 218.392 226.319 218.295 226.184 218.373L225.308 218.882C225.245 218.918 225.206 218.985 225.206 219.058V222.024C225.206 222.18 225.375 222.278 225.51 222.2Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M223.038 223.615L223.915 223.107C223.977 223.07 224.016 223.003 224.016 222.93V219.964C224.016 219.808 223.847 219.71 223.712 219.788L222.835 220.297C222.772 220.333 222.734 220.4 222.734 220.473V223.439C222.734 223.595 222.903 223.693 223.038 223.615Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M220.565 225.03L221.442 224.522C221.505 224.485 221.544 224.418 221.544 224.345V221.379C221.544 221.222 221.375 221.124 221.239 221.203L220.363 221.712C220.3 221.748 220.262 221.815 220.262 221.888V224.854C220.262 225.011 220.43 225.109 220.565 225.03Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M218.093 226.58L218.97 226.072C219.033 226.035 219.071 225.968 219.071 225.895V222.929C219.071 222.773 218.902 222.675 218.767 222.753L217.891 223.262C217.828 223.298 217.789 223.365 217.789 223.438V226.404C217.789 226.561 217.958 226.658 218.093 226.58Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M215.621 227.928L216.498 227.419C216.56 227.382 216.599 227.315 216.599 227.242V224.277C216.599 224.12 216.43 224.022 216.295 224.1L215.418 224.609C215.355 224.646 215.317 224.713 215.317 224.786V227.751C215.317 227.908 215.486 228.006 215.621 227.928Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M213.148 229.41L214.025 228.902C214.088 228.865 214.127 228.798 214.127 228.725V225.759C214.127 225.602 213.958 225.504 213.822 225.583L212.946 226.092C212.883 226.128 212.844 226.195 212.844 226.268V229.234C212.844 229.391 213.013 229.489 213.148 229.41Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M210.676 230.825L211.552 230.317C211.615 230.28 211.654 230.213 211.654 230.14V227.174C211.654 227.017 211.485 226.919 211.35 226.998L210.473 227.507C210.411 227.543 210.372 227.61 210.372 227.683V230.649C210.372 230.805 210.541 230.903 210.676 230.825Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M180.859 208.635L180.877 212.11C180.76 212.739 181.017 213.428 181.646 213.793L208.63 229.452C209.123 229.737 209.73 229.737 210.222 229.452L237.207 213.793C237.836 213.429 238.092 212.739 237.975 212.11L237.993 208.635" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M208.63 225.495L181.646 209.837C180.584 209.221 180.584 207.682 181.646 207.065L208.63 191.408C209.123 191.122 209.73 191.122 210.222 191.408L237.207 207.065C238.268 207.682 238.268 209.221 237.207 209.837L210.222 225.495C209.73 225.781 209.123 225.781 208.63 225.495Z" fill="#A59EF7"/> +</g> +<g opacity="0.327785"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M203.593 62.7101L202.489 62.0689C202.41 62.0228 202.361 61.9378 202.361 61.8468V58.1075C202.361 57.9094 202.574 57.7857 202.744 57.8848L203.848 58.5259C203.927 58.5721 203.976 58.657 203.976 58.7487V62.4879C203.976 62.6855 203.763 62.8085 203.593 62.7101Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M206.707 64.4942L205.603 63.8524C205.524 63.8069 205.475 63.722 205.475 63.6303V59.8916C205.475 59.6935 205.688 59.5698 205.858 59.6689L206.963 60.31C207.042 60.3556 207.09 60.4411 207.09 60.5328V64.2721C207.09 64.4696 206.878 64.5926 206.707 64.4942Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M209.822 66.2782L208.718 65.6365C208.638 65.5909 208.59 65.506 208.59 65.4143V61.6757C208.59 61.4775 208.803 61.3539 208.973 61.4529L210.077 62.0941C210.156 62.1396 210.205 62.2245 210.205 62.3168V66.0555C210.205 66.253 209.992 66.3767 209.822 66.2782Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M212.937 68.0617L211.833 67.4205C211.753 67.375 211.705 67.2901 211.705 67.1984V63.4591C211.705 63.261 211.918 63.1379 212.088 63.2364L213.192 63.8781C213.271 63.9237 213.32 64.0086 213.32 64.1009V67.8395C213.32 68.0371 213.107 68.1607 212.937 68.0617Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M216.052 69.8457L214.947 69.2046C214.868 69.1584 214.819 69.0735 214.819 68.9824V65.2431C214.819 65.045 215.032 64.922 215.202 65.0204L216.307 65.6616C216.386 65.7077 216.435 65.7926 216.435 65.8849V69.6236C216.435 69.8211 216.222 69.9448 216.052 69.8457Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M219.166 71.6298L218.062 70.9886C217.983 70.9425 217.934 70.8576 217.934 70.7659V67.0272C217.934 66.8291 218.147 66.7054 218.317 66.8045L219.421 67.4456C219.5 67.4918 219.549 67.5767 219.549 67.6684V71.4076C219.549 71.6052 219.336 71.7282 219.166 71.6298Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M222.281 73.4138L221.177 72.772C221.097 72.7265 221.049 72.6416 221.049 72.5499V68.8112C221.049 68.6131 221.262 68.4894 221.432 68.5885L222.536 69.2297C222.615 69.2752 222.664 69.3601 222.664 69.4524V73.1917C222.664 73.3892 222.451 73.5123 222.281 73.4138Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M225.396 75.3679L224.292 74.7268C224.212 74.6806 224.164 74.5957 224.164 74.5047V70.7654C224.164 70.5672 224.377 70.4442 224.547 70.5426L225.651 71.1838C225.73 71.2299 225.779 71.3149 225.779 71.4071V75.1458C225.779 75.3433 225.566 75.467 225.396 75.3679Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M228.51 77.0667L227.406 76.4255C227.327 76.3794 227.278 76.2945 227.278 76.2034V72.4641C227.278 72.266 227.491 72.1429 227.661 72.2414L228.766 72.8825C228.844 72.9287 228.893 73.0136 228.893 73.1053V76.8446C228.893 77.0421 228.681 77.1658 228.51 77.0667Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M231.625 78.9361L230.52 78.2943C230.441 78.2488 230.393 78.1639 230.393 78.0722V74.3335C230.393 74.1354 230.605 74.0117 230.776 74.1108L231.88 74.7519C231.959 74.7975 232.008 74.8824 232.008 74.9747V78.7134C232.008 78.9109 231.795 79.0346 231.625 78.9361Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M234.74 80.7195L233.635 80.0784C233.556 80.0328 233.508 79.9479 233.508 79.8562V76.1176C233.508 75.9195 233.72 75.7958 233.891 75.8942L234.995 76.536C235.074 76.5815 235.123 76.6664 235.123 76.7587V80.4974C235.123 80.6949 234.91 80.8186 234.74 80.7195Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M270.498 62.7461L271.626 62.0914C271.707 62.0441 271.756 61.9579 271.756 61.8638V58.0457C271.756 57.8439 271.539 57.7178 271.365 57.8187L270.237 58.474C270.157 58.5208 270.107 58.6069 270.107 58.701V62.5191C270.107 62.7209 270.324 62.847 270.498 62.7461Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M267.317 64.5681L268.445 63.9134C268.526 63.866 268.576 63.7799 268.576 63.6857V59.8677C268.576 59.6659 268.358 59.5397 268.184 59.6406L267.057 60.2959C266.976 60.3421 266.926 60.4289 266.926 60.523V64.341C266.926 64.5429 267.143 64.669 267.317 64.5681Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M264.136 66.39L265.265 65.7353C265.345 65.6879 265.395 65.6018 265.395 65.5076V61.689C265.395 61.4871 265.178 61.361 265.003 61.4619L263.876 62.1172C263.795 62.164 263.746 62.2501 263.746 62.3443V66.1629C263.746 66.3647 263.963 66.4909 264.136 66.39Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M260.956 68.2113L262.083 67.5572C262.165 67.5098 262.214 67.4231 262.214 67.3296V63.5109C262.214 63.3091 261.996 63.1829 261.823 63.2839L260.695 63.9392C260.614 63.9859 260.564 64.0721 260.564 64.1662V67.9843C260.564 68.1861 260.782 68.3122 260.956 68.2113Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M257.775 70.0332L258.902 69.3785C258.983 69.3311 259.033 69.245 259.033 69.1508V65.3328C259.033 65.131 258.816 65.0048 258.642 65.1057L257.514 65.7611C257.434 65.8078 257.383 65.894 257.383 65.9881V69.8061C257.383 70.008 257.601 70.1341 257.775 70.0332Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M254.594 71.8551L255.722 71.2004C255.803 71.153 255.852 71.0669 255.852 70.9727V67.1547C255.852 66.9529 255.635 66.8267 255.461 66.9277L254.333 67.583C254.253 67.6297 254.203 67.7159 254.203 67.81V71.6281C254.203 71.8299 254.42 71.956 254.594 71.8551Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M251.413 73.6771L252.541 73.0224C252.622 72.975 252.672 72.8888 252.672 72.7947V68.976C252.672 68.7742 252.455 68.6481 252.28 68.749L251.153 69.4043C251.072 69.4511 251.022 69.5372 251.022 69.6313V73.45C251.022 73.6518 251.24 73.778 251.413 73.6771Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M248.233 75.6726L249.361 75.0179C249.441 74.9705 249.491 74.8844 249.491 74.7902V70.9722C249.491 70.7704 249.274 70.6442 249.099 70.7451L247.972 71.4004C247.891 71.4472 247.842 71.5333 247.842 71.6275V75.4455C247.842 75.6474 248.059 75.7735 248.233 75.6726Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M245.052 77.4074L246.18 76.7527C246.261 76.7053 246.31 76.6192 246.31 76.525V72.707C246.31 72.5052 246.093 72.379 245.919 72.4799L244.791 73.1353C244.711 73.182 244.661 73.2682 244.661 73.3623V77.1803C244.661 77.3822 244.878 77.5083 245.052 77.4074Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M241.871 79.3164L242.999 78.6617C243.08 78.6144 243.129 78.5282 243.129 78.4341V74.6154C243.129 74.4136 242.912 74.2874 242.738 74.3884L241.61 75.0437C241.53 75.0904 241.48 75.1766 241.48 75.2707V79.0894C241.48 79.2912 241.697 79.4173 241.871 79.3164Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M238.69 81.1378L239.818 80.4837C239.899 80.4363 239.949 80.3495 239.949 80.256V76.4374C239.949 76.2355 239.731 76.1094 239.557 76.2103L238.43 76.8656C238.349 76.9124 238.299 76.9985 238.299 77.0927V80.9107C238.299 81.1125 238.517 81.2387 238.69 81.1378Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M200.331 52.5682L200.353 57.0421C200.203 57.8519 200.533 58.7392 201.342 59.2093L236.058 79.3695C236.692 79.7369 237.473 79.7369 238.107 79.3695L272.823 59.2093C273.632 58.7398 273.961 57.8519 273.811 57.0421L273.835 52.5682" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M236.058 74.2755L201.342 54.1153C199.977 53.3227 199.977 51.3408 201.342 50.547L236.058 30.388C236.692 30.0201 237.473 30.0201 238.107 30.388L272.823 50.547C274.188 51.3408 274.188 53.3227 272.823 54.1153L238.107 74.2755C237.473 74.6435 236.692 74.6435 236.058 74.2755Z" fill="#A59EF7"/> +</g> +<g opacity="0.120697"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M81.1767 162.008L80.746 161.754C80.7152 161.736 80.6961 161.702 80.6961 161.666V160.186C80.6961 160.107 80.7792 160.058 80.8455 160.098L81.2762 160.351C81.3072 160.37 81.3261 160.403 81.3261 160.44V161.92C81.3261 161.998 81.243 162.047 81.1767 162.008Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M82.3781 162.714L81.9474 162.46C81.9166 162.442 81.8975 162.408 81.8975 162.372V160.892C81.8975 160.814 81.9806 160.765 82.0469 160.804L82.4776 161.058C82.5084 161.076 82.5275 161.11 82.5275 161.146V162.626C82.5275 162.704 82.4444 162.753 82.3781 162.714Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M83.5795 163.42L83.1488 163.166C83.1178 163.148 83.0989 163.114 83.0989 163.078V161.598C83.0989 161.52 83.182 161.471 83.2483 161.51L83.679 161.764C83.7098 161.782 83.7288 161.815 83.7288 161.852V163.332C83.7288 163.41 83.6458 163.459 83.5795 163.42Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M84.7808 164.126L84.3502 163.872C84.3191 163.854 84.3003 163.821 84.3003 163.784V162.304C84.3003 162.226 84.3833 162.177 84.4497 162.216L84.8803 162.47C84.9111 162.488 84.9302 162.522 84.9302 162.558V164.038C84.9302 164.116 84.8472 164.165 84.7808 164.126Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M85.9823 164.832L85.5516 164.578C85.5205 164.56 85.5017 164.527 85.5017 164.49V163.01C85.5017 162.932 85.5847 162.883 85.6511 162.922L86.0817 163.176C86.1125 163.194 86.1316 163.228 86.1316 163.264V164.744C86.1316 164.822 86.0486 164.871 85.9823 164.832Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M87.1837 165.538L86.753 165.285C86.7219 165.266 86.7031 165.233 86.7031 165.196V163.717C86.7031 163.638 86.7861 163.589 86.8525 163.628L87.2832 163.882C87.3139 163.9 87.333 163.934 87.333 163.97V165.45C87.333 165.529 87.25 165.577 87.1837 165.538Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M88.385 166.245L87.9543 165.991C87.9233 165.972 87.9045 165.939 87.9045 165.903V164.423C87.9045 164.344 87.9875 164.295 88.0538 164.335L88.4845 164.588C88.5153 164.606 88.5344 164.64 88.5344 164.676V166.157C88.5344 166.235 88.4514 166.284 88.385 166.245Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M89.5864 167.018L89.1557 166.764C89.1247 166.746 89.1059 166.712 89.1059 166.676V165.196C89.1059 165.118 89.1889 165.069 89.2552 165.108L89.6859 165.362C89.7167 165.38 89.7358 165.414 89.7358 165.45V166.93C89.7358 167.008 89.6528 167.057 89.5864 167.018Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M90.7878 167.69L90.3571 167.437C90.3261 167.418 90.3073 167.385 90.3073 167.349V165.869C90.3073 165.79 90.39 165.742 90.4566 165.78L90.8873 166.034C90.9181 166.053 90.9372 166.086 90.9372 166.122V167.603C90.9372 167.681 90.8541 167.73 90.7878 167.69Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M91.9892 168.43L91.5583 168.176C91.5275 168.158 91.5086 168.125 91.5086 168.089V166.609C91.5086 166.53 91.5914 166.481 91.658 166.52L92.0887 166.774C92.1195 166.792 92.1386 166.826 92.1386 166.862V168.342C92.1386 168.42 92.0555 168.469 91.9892 168.43Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M93.1906 169.136L92.7596 168.883C92.7289 168.865 92.71 168.831 92.71 168.795V167.315C92.71 167.236 92.7928 167.187 92.8594 167.226L93.2901 167.48C93.3209 167.498 93.3399 167.532 93.3399 167.569V169.048C93.3399 169.127 93.2569 169.176 93.1906 169.136Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M106.978 162.022L107.413 161.763C107.444 161.744 107.463 161.71 107.463 161.673V160.161C107.463 160.081 107.379 160.032 107.312 160.071L106.877 160.331C106.846 160.349 106.827 160.383 106.827 160.421V161.932C106.827 162.012 106.911 162.062 106.978 162.022Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M105.751 162.743L106.186 162.484C106.217 162.465 106.236 162.431 106.236 162.394V160.883C106.236 160.803 106.152 160.753 106.085 160.793L105.65 161.052C105.619 161.07 105.6 161.105 105.6 161.142V162.653C105.6 162.733 105.684 162.783 105.751 162.743Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M104.524 163.464L104.959 163.205C104.99 163.186 105.009 163.152 105.009 163.115V161.603C105.009 161.524 104.926 161.474 104.858 161.514L104.423 161.773C104.392 161.791 104.373 161.826 104.373 161.863V163.374C104.373 163.454 104.457 163.504 104.524 163.464Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M103.297 164.185L103.732 163.926C103.763 163.908 103.782 163.873 103.782 163.836V162.325C103.782 162.245 103.698 162.195 103.631 162.235L103.197 162.494C103.165 162.513 103.146 162.547 103.146 162.584V164.095C103.146 164.175 103.23 164.225 103.297 164.185Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M102.07 164.906L102.505 164.647C102.536 164.628 102.556 164.594 102.556 164.557V163.046C102.556 162.966 102.472 162.916 102.405 162.956L101.97 163.215C101.939 163.234 101.919 163.268 101.919 163.305V164.817C101.919 164.896 102.003 164.946 102.07 164.906Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M100.843 165.628L101.278 165.368C101.31 165.35 101.329 165.316 101.329 165.278V163.767C101.329 163.687 101.245 163.637 101.178 163.677L100.743 163.937C100.712 163.955 100.693 163.989 100.693 164.026V165.538C100.693 165.618 100.776 165.668 100.843 165.628Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M99.6164 166.349L100.052 166.09C100.083 166.071 100.102 166.037 100.102 165.999V164.488C100.102 164.408 100.018 164.358 99.9508 164.398L99.5159 164.657C99.4848 164.676 99.4657 164.71 99.4657 164.747V166.259C99.4657 166.339 99.5494 166.389 99.6164 166.349Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M98.3896 167.139L98.8247 166.879C98.8559 166.861 98.875 166.827 98.875 166.789V165.278C98.875 165.198 98.7912 165.148 98.724 165.188L98.2891 165.448C98.2579 165.466 98.2388 165.5 98.2388 165.537V167.049C98.2388 167.129 98.3226 167.179 98.3896 167.139Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M97.1627 167.825L97.5979 167.566C97.629 167.547 97.6481 167.513 97.6481 167.476V165.965C97.6481 165.885 97.5644 165.835 97.4971 165.875L97.0622 166.134C97.0311 166.153 97.012 166.187 97.012 166.224V167.735C97.012 167.815 97.0957 167.865 97.1627 167.825Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M95.9359 168.581L96.371 168.322C96.4021 168.303 96.4213 168.269 96.4213 168.232V166.72C96.4213 166.64 96.3375 166.59 96.2702 166.63L95.8353 166.89C95.8042 166.908 95.7849 166.942 95.7849 166.98V168.491C95.7849 168.571 95.8689 168.621 95.9359 168.581Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M94.709 169.302L95.1439 169.043C95.1751 169.024 95.1944 168.99 95.1944 168.953V167.441C95.1944 167.361 95.1104 167.312 95.0434 167.352L94.6085 167.611C94.5774 167.629 94.558 167.664 94.558 167.701V169.212C94.558 169.292 94.642 169.342 94.709 169.302Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M79.9131 157.993L79.9218 159.764C79.864 160.085 79.9912 160.436 80.3034 160.622L93.6939 168.602C93.9383 168.747 94.2394 168.747 94.4839 168.602L107.874 160.622C108.186 160.436 108.314 160.085 108.256 159.764L108.265 157.993" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M93.6938 166.586L80.3033 158.606C79.7767 158.292 79.7767 157.507 80.3033 157.193L93.6938 149.214C93.9383 149.068 94.2394 149.068 94.4839 149.214L107.874 157.193C108.401 157.507 108.401 158.292 107.874 158.606L94.4839 166.586C94.2396 166.731 93.9383 166.731 93.6938 166.586Z" fill="#A59EF7"/> +</g> +<g opacity="0.120697"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M100.479 150.186L100.048 149.932C100.018 149.914 99.9986 149.88 99.9986 149.844V148.364C99.9986 148.286 100.082 148.237 100.148 148.276L100.579 148.53C100.61 148.548 100.629 148.582 100.629 148.618V150.098C100.629 150.176 100.545 150.225 100.479 150.186Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M101.681 150.892L101.25 150.638C101.219 150.62 101.2 150.587 101.2 150.55V149.07C101.2 148.992 101.283 148.943 101.349 148.982L101.78 149.236C101.811 149.254 101.83 149.288 101.83 149.324V150.804C101.83 150.882 101.747 150.931 101.681 150.892Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M102.882 151.598L102.451 151.344C102.42 151.326 102.401 151.293 102.401 151.256V149.777C102.401 149.698 102.484 149.649 102.551 149.688L102.981 149.942C103.012 149.96 103.031 149.994 103.031 150.03V151.51C103.031 151.588 102.948 151.637 102.882 151.598Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M104.083 152.304L103.653 152.051C103.622 152.033 103.603 151.999 103.603 151.963V150.482C103.603 150.404 103.686 150.355 103.752 150.394L104.183 150.648C104.214 150.666 104.233 150.7 104.233 150.737V152.216C104.233 152.295 104.15 152.344 104.083 152.304Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M105.285 153.011L104.854 152.757C104.823 152.738 104.804 152.705 104.804 152.669V151.189C104.804 151.11 104.887 151.062 104.954 151.101L105.384 151.354C105.415 151.373 105.434 151.406 105.434 151.443V152.923C105.434 153.001 105.351 153.05 105.285 153.011Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M106.486 153.717L106.055 153.463C106.024 153.445 106.006 153.411 106.006 153.375V151.895C106.006 151.816 106.089 151.767 106.155 151.807L106.586 152.06C106.616 152.079 106.635 152.112 106.635 152.149V153.629C106.635 153.707 106.552 153.756 106.486 153.717Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M107.687 154.423L107.257 154.169C107.226 154.151 107.207 154.117 107.207 154.081V152.601C107.207 152.523 107.29 152.474 107.356 152.513L107.787 152.767C107.818 152.785 107.837 152.818 107.837 152.855V154.335C107.837 154.413 107.754 154.462 107.687 154.423Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M108.889 155.196L108.458 154.943C108.427 154.924 108.408 154.891 108.408 154.855V153.375C108.408 153.296 108.491 153.247 108.558 153.286L108.988 153.54C109.019 153.558 109.038 153.592 109.038 153.629V155.108C109.038 155.187 108.955 155.236 108.889 155.196Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M110.09 155.869L109.66 155.615C109.629 155.597 109.61 155.563 109.61 155.527V154.047C109.61 153.969 109.693 153.92 109.759 153.959L110.19 154.213C110.221 154.231 110.24 154.264 110.24 154.301V155.781C110.24 155.859 110.157 155.908 110.09 155.869Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M111.292 156.609L110.861 156.355C110.83 156.337 110.811 156.303 110.811 156.267V154.787C110.811 154.709 110.894 154.66 110.96 154.699L111.391 154.953C111.422 154.971 111.441 155.004 111.441 155.041V156.521C111.441 156.599 111.358 156.648 111.292 156.609Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M112.493 157.315L112.062 157.061C112.031 157.043 112.012 157.009 112.012 156.973V155.493C112.012 155.415 112.095 155.366 112.162 155.405L112.593 155.659C112.623 155.677 112.642 155.71 112.642 155.747V157.227C112.642 157.305 112.559 157.354 112.493 157.315Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M126.28 150.2L126.715 149.941C126.746 149.922 126.766 149.888 126.766 149.851V148.34C126.766 148.26 126.682 148.21 126.614 148.25L126.18 148.509C126.148 148.528 126.129 148.562 126.129 148.599V150.11C126.129 150.19 126.213 150.24 126.28 150.2Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M125.053 150.921L125.488 150.662C125.52 150.644 125.539 150.609 125.539 150.572V149.061C125.539 148.981 125.455 148.931 125.388 148.971L124.953 149.23C124.922 149.249 124.902 149.283 124.902 149.32V150.832C124.902 150.911 124.986 150.961 125.053 150.921Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M123.826 151.643L124.262 151.383C124.293 151.365 124.312 151.331 124.312 151.293V149.782C124.312 149.702 124.228 149.652 124.161 149.692L123.726 149.951C123.695 149.97 123.676 150.004 123.676 150.041V151.553C123.676 151.633 123.759 151.683 123.826 151.643Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M122.6 152.364L123.034 152.105C123.066 152.086 123.085 152.052 123.085 152.015V150.503C123.085 150.423 123.001 150.373 122.934 150.413L122.499 150.673C122.468 150.691 122.449 150.725 122.449 150.762V152.274C122.449 152.354 122.533 152.404 122.6 152.364Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M121.373 153.085L121.808 152.826C121.839 152.807 121.858 152.773 121.858 152.735V151.224C121.858 151.144 121.774 151.094 121.707 151.134L121.272 151.394C121.241 151.412 121.222 151.446 121.222 151.484V152.995C121.222 153.075 121.306 153.125 121.373 153.085Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M120.146 153.806L120.581 153.547C120.612 153.528 120.631 153.494 120.631 153.457V151.945C120.631 151.865 120.547 151.816 120.48 151.855L120.045 152.115C120.014 152.133 119.995 152.167 119.995 152.205V153.716C119.995 153.796 120.079 153.846 120.146 153.806Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M118.919 154.527L119.354 154.268C119.385 154.249 119.404 154.215 119.404 154.178V152.666C119.404 152.586 119.321 152.536 119.253 152.576L118.818 152.836C118.787 152.854 118.768 152.888 118.768 152.926V154.437C118.768 154.517 118.852 154.567 118.919 154.527Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M117.692 155.317L118.127 155.058C118.158 155.039 118.177 155.005 118.177 154.968V153.456C118.177 153.377 118.094 153.327 118.026 153.367L117.592 153.626C117.56 153.644 117.541 153.679 117.541 153.716V155.227C117.541 155.307 117.625 155.357 117.692 155.317Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M116.465 156.004L116.9 155.745C116.931 155.726 116.951 155.692 116.951 155.654V154.143C116.951 154.063 116.867 154.013 116.8 154.053L116.365 154.313C116.334 154.331 116.314 154.365 116.314 154.403V155.914C116.314 155.994 116.398 156.044 116.465 156.004Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M115.238 156.759L115.673 156.5C115.705 156.481 115.724 156.447 115.724 156.41V154.899C115.724 154.819 115.64 154.769 115.573 154.809L115.138 155.068C115.107 155.087 115.087 155.121 115.087 155.158V156.669C115.087 156.749 115.171 156.799 115.238 156.759Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M114.011 157.48L114.446 157.221C114.478 157.203 114.497 157.168 114.497 157.131V155.62C114.497 155.54 114.413 155.49 114.346 155.53L113.911 155.789C113.88 155.808 113.86 155.842 113.86 155.879V157.39C113.86 157.47 113.944 157.52 114.011 157.48Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M99.2155 146.172L99.2243 147.942C99.1665 148.263 99.2936 148.614 99.6058 148.8L112.996 156.78C113.241 156.926 113.542 156.926 113.786 156.78L127.177 148.8C127.489 148.614 127.616 148.263 127.558 147.942L127.567 146.172" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M112.996 154.764L99.6058 146.784C99.0791 146.47 99.0791 145.686 99.6058 145.371L112.996 137.392C113.241 137.246 113.542 137.246 113.786 137.392L127.177 145.371C127.703 145.686 127.703 146.47 127.177 146.784L113.786 154.764C113.542 154.91 113.241 154.91 112.996 154.764Z" fill="#A59EF7"/> +</g> +<g opacity="0.120697"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M269.912 70.6586L269.481 70.4048C269.45 70.3865 269.431 70.3529 269.431 70.3169V68.8367C269.431 68.7583 269.514 68.7093 269.581 68.7486L270.011 69.0024C270.042 69.0206 270.061 69.0542 270.061 69.0905V70.5707C270.061 70.6488 269.978 70.6975 269.912 70.6586Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M271.113 71.3648L270.683 71.1108C270.652 71.0927 270.633 71.0591 270.633 71.0228V69.5429C270.633 69.4645 270.716 69.4156 270.782 69.4548L271.213 69.7086C271.243 69.7266 271.263 69.7604 271.263 69.7967V71.2769C271.263 71.355 271.18 71.4038 271.113 71.3648Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M272.315 72.071L271.884 71.8169C271.853 71.7989 271.834 71.7653 271.834 71.729V70.2491C271.834 70.1707 271.917 70.1217 271.983 70.161L272.414 70.4147C272.445 70.4328 272.464 70.4664 272.464 70.5029V71.9828C272.464 72.061 272.381 72.1099 272.315 72.071Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M273.516 72.7769L273.085 72.5231C273.054 72.5051 273.035 72.4715 273.035 72.4352V70.9551C273.035 70.8766 273.118 70.8279 273.185 70.8669L273.616 71.1209C273.646 71.1389 273.665 71.1726 273.665 71.2091V72.689C273.665 72.7672 273.582 72.8161 273.516 72.7769Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M274.717 73.4831L274.287 73.2293C274.256 73.211 274.237 73.1774 274.237 73.1414V71.6613C274.237 71.5828 274.32 71.5341 274.386 71.5731L274.817 71.8269C274.848 71.8451 274.867 71.8788 274.867 71.9153V73.3952C274.867 73.4734 274.784 73.5223 274.717 73.4831Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M275.919 74.1893L275.488 73.9355C275.457 73.9172 275.438 73.8836 275.438 73.8473V72.3674C275.438 72.289 275.521 72.2401 275.588 72.2793L276.018 72.5331C276.049 72.5513 276.068 72.5849 276.068 72.6212V74.1014C276.068 74.1795 275.985 74.2283 275.919 74.1893Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M277.12 74.8955L276.689 74.6414C276.658 74.6234 276.64 74.5898 276.64 74.5535V73.0736C276.64 72.9952 276.723 72.9462 276.789 72.9855L277.22 73.2393C277.25 73.2573 277.27 73.2909 277.27 73.3274V74.8076C277.27 74.8857 277.186 74.9344 277.12 74.8955Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M278.322 75.669L277.891 75.4152C277.86 75.3969 277.841 75.3633 277.841 75.3273V73.8471C277.841 73.7687 277.924 73.72 277.99 73.759L278.421 74.0128C278.452 74.031 278.471 74.0646 278.471 74.1012V75.5811C278.471 75.6592 278.388 75.7082 278.322 75.669Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M279.523 76.3414L279.092 76.0876C279.061 76.0693 279.042 76.0357 279.042 75.9997V74.5196C279.042 74.4411 279.125 74.3924 279.192 74.4314L279.622 74.6852C279.653 74.7034 279.672 74.7371 279.672 74.7733V76.2535C279.672 76.3317 279.589 76.3806 279.523 76.3414Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M280.724 77.0814L280.293 76.8273C280.263 76.8093 280.244 76.7757 280.244 76.7394V75.2595C280.244 75.1811 280.327 75.1322 280.393 75.1714L280.824 75.4252C280.855 75.4432 280.874 75.4768 280.874 75.5133V76.9932C280.874 77.0714 280.791 77.1204 280.724 77.0814Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M281.926 77.7873L281.495 77.5335C281.464 77.5155 281.445 77.4819 281.445 77.4456V75.9657C281.445 75.8873 281.528 75.8383 281.595 75.8773L282.025 76.1313C282.056 76.1494 282.075 76.183 282.075 76.2195V77.6994C282.075 77.7776 281.992 77.8265 281.926 77.7873Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M295.713 70.6729L296.148 70.4137C296.179 70.3949 296.198 70.3608 296.198 70.3236V68.8123C296.198 68.7324 296.114 68.6825 296.047 68.7224L295.612 68.9818C295.581 69.0003 295.562 69.0344 295.562 69.0717V70.583C295.562 70.6629 295.646 70.7128 295.713 70.6729Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M294.486 71.394L294.921 71.1349C294.952 71.1161 294.971 71.082 294.971 71.0448V69.5335C294.971 69.4536 294.888 69.4036 294.82 69.4436L294.385 69.703C294.354 69.7212 294.335 69.7556 294.335 69.7929V71.3042C294.335 71.3841 294.419 71.434 294.486 71.394Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M293.259 72.1152L293.694 71.856C293.725 71.8373 293.744 71.8032 293.744 71.7659V70.2544C293.744 70.1745 293.661 70.1246 293.593 70.1645L293.159 70.4239C293.127 70.4424 293.108 70.4765 293.108 70.5138V72.0253C293.108 72.1052 293.192 72.1551 293.259 72.1152Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M292.032 72.8362L292.467 72.5772C292.499 72.5585 292.518 72.5241 292.518 72.4871V70.9756C292.518 70.8957 292.434 70.8458 292.367 70.8857L291.932 71.1451C291.901 71.1636 291.881 71.1977 291.881 71.235V72.7463C291.881 72.8262 291.965 72.8761 292.032 72.8362Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M290.805 73.5573L291.24 73.2982C291.271 73.2794 291.291 73.2453 291.291 73.2081V71.6967C291.291 71.6169 291.207 71.5669 291.14 71.6069L290.705 71.8663C290.674 71.8848 290.654 71.9189 290.654 71.9561V73.4674C290.654 73.5473 290.738 73.5973 290.805 73.5573Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M289.578 74.2785L290.014 74.0193C290.045 74.0006 290.064 73.9665 290.064 73.9292V72.4179C290.064 72.338 289.98 72.2881 289.913 72.328L289.478 72.5874C289.447 72.6059 289.428 72.64 289.428 72.6773V74.1886C289.428 74.2685 289.511 74.3184 289.578 74.2785Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M288.352 74.9997L288.787 74.7405C288.818 74.7218 288.837 74.6877 288.837 74.6504V73.1389C288.837 73.059 288.753 73.009 288.686 73.049L288.251 73.3084C288.22 73.3269 288.201 73.361 288.201 73.3982V74.9098C288.201 74.9897 288.285 75.0396 288.352 74.9997Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M287.125 75.7896L287.56 75.5304C287.591 75.5117 287.61 75.4776 287.61 75.4403V73.929C287.61 73.8491 287.526 73.7992 287.459 73.8391L287.024 74.0985C286.993 74.117 286.974 74.1511 286.974 74.1884V75.6997C286.974 75.7796 287.058 75.8295 287.125 75.7896Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M285.898 76.4763L286.333 76.2171C286.364 76.1984 286.383 76.1643 286.383 76.127V74.6157C286.383 74.5358 286.3 74.4859 286.232 74.5258L285.797 74.7852C285.766 74.8037 285.747 74.8378 285.747 74.8751V76.3864C285.747 76.4663 285.831 76.5162 285.898 76.4763Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M284.671 77.2319L285.106 76.9728C285.137 76.954 285.156 76.9199 285.156 76.8827V75.3711C285.156 75.2912 285.073 75.2413 285.005 75.2812L284.57 75.5406C284.539 75.5591 284.52 75.5932 284.52 75.6305V77.1421C284.52 77.2219 284.604 77.2719 284.671 77.2319Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M283.444 77.9529L283.879 77.694C283.91 77.6752 283.93 77.6409 283.93 77.6038V76.0923C283.93 76.0124 283.846 75.9625 283.779 76.0024L283.344 76.2618C283.313 76.2803 283.293 76.3144 283.293 76.3517V77.863C283.293 77.9429 283.377 77.9928 283.444 77.9529Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M268.648 66.6441L268.657 68.415C268.599 68.7355 268.726 69.0868 269.039 69.2728L282.429 77.2529C282.673 77.3983 282.975 77.3983 283.219 77.2529L296.61 69.2728C296.921 69.087 297.049 68.7355 296.991 68.415L297 66.6441" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M282.429 75.2366L269.038 67.2565C268.512 66.9428 268.512 66.1582 269.038 65.844L282.429 57.8644C282.673 57.7188 282.974 57.7188 283.219 57.8644L296.609 65.844C297.136 66.1582 297.136 66.9428 296.609 67.2565L283.219 75.2366C282.975 75.3822 282.673 75.3822 282.429 75.2366Z" fill="#A59EF7"/> +</g> +<g opacity="0.327785"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M182.898 33.788L182.147 33.3494C182.093 33.3176 182.06 33.2598 182.06 33.1975V30.6391C182.06 30.5041 182.205 30.4195 182.32 30.4867L183.071 30.9253C183.125 30.957 183.158 31.0149 183.158 31.0784V33.6362C183.158 33.7712 183.013 33.8552 182.898 33.788Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M185.015 35.0087L184.264 34.57C184.21 34.5383 184.177 34.4798 184.177 34.4176V31.8592C184.177 31.7248 184.322 31.6395 184.438 31.7073L185.188 32.146C185.242 32.1777 185.275 32.2356 185.275 32.2984V34.8562C185.275 34.9919 185.13 35.0759 185.015 35.0087Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M187.132 36.2287L186.381 35.7901C186.327 35.759 186.295 35.7005 186.295 35.6383V33.0798C186.295 32.9448 186.439 32.8602 186.555 32.9274L187.306 33.3667C187.359 33.3978 187.392 33.4563 187.392 33.5191V36.0769C187.392 36.2119 187.247 36.2966 187.132 36.2287Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M189.249 37.4495L188.498 37.0108C188.445 36.9791 188.411 36.9212 188.411 36.8584V34.2999C188.411 34.1656 188.557 34.0809 188.672 34.1481L189.423 34.5868C189.477 34.6185 189.509 34.6764 189.509 34.7398V37.297C189.509 37.4327 189.365 37.5167 189.249 37.4495Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M191.366 38.6695L190.616 38.2309C190.562 38.1998 190.529 38.1413 190.529 38.0791V35.5206C190.529 35.3856 190.674 35.301 190.789 35.3688L191.54 35.8075C191.594 35.8386 191.627 35.8971 191.627 35.9599V38.5177C191.627 38.6534 191.482 38.7374 191.366 38.6695Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M193.484 39.8902L192.733 39.4516C192.679 39.4198 192.646 39.362 192.646 39.2998V36.7413C192.646 36.6063 192.791 36.5217 192.906 36.5889L193.657 37.0275C193.711 37.0593 193.744 37.1171 193.744 37.1806V39.7384C193.744 39.8734 193.599 39.9574 193.484 39.8902Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M195.601 41.1109L194.85 40.6722C194.796 40.6405 194.763 40.582 194.763 40.5198V37.9614C194.763 37.827 194.908 37.7423 195.024 37.8095L195.774 38.2482C195.828 38.2799 195.861 38.3378 195.861 38.4006V40.9585C195.861 41.0941 195.717 41.1781 195.601 41.1109Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M197.718 42.4477L196.967 42.009C196.913 41.9773 196.881 41.9194 196.881 41.8572V39.2988C196.881 39.1637 197.025 39.0791 197.141 39.1463L197.892 39.585C197.945 39.6167 197.979 39.6752 197.979 39.738V42.2959C197.979 42.4309 197.834 42.5155 197.718 42.4477Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M199.835 43.61L199.084 43.1713C199.031 43.1396 198.998 43.0817 198.998 43.0189V40.4605C198.998 40.3261 199.143 40.2414 199.258 40.3086L200.009 40.7473C200.063 40.779 200.095 40.8369 200.095 40.9003V43.4576C200.095 43.5932 199.951 43.6772 199.835 43.61Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M201.953 44.8884L201.202 44.4498C201.148 44.4187 201.115 44.3602 201.115 44.2979V41.7395C201.115 41.6045 201.26 41.5199 201.375 41.5877L202.126 42.0263C202.18 42.0574 202.213 42.1159 202.213 42.1788V44.7366C202.213 44.8722 202.068 44.9562 201.953 44.8884Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M204.07 46.1091L203.319 45.6704C203.265 45.6387 203.233 45.5808 203.233 45.518V42.9602C203.233 42.8252 203.377 42.7405 203.493 42.8077L204.243 43.2464C204.297 43.2781 204.33 43.336 204.33 43.3994V45.9573C204.33 46.0923 204.185 46.1763 204.07 46.1091Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M228.377 33.8129L229.143 33.3643C229.198 33.3332 229.232 33.2735 229.232 33.2094V30.5968C229.232 30.4587 229.084 30.3728 228.966 30.4419L228.199 30.8898C228.144 30.9222 228.111 30.9807 228.111 31.0454V33.6574C228.111 33.7955 228.259 33.8813 228.377 33.8129Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M226.215 35.0591L226.981 34.6112C227.036 34.5794 227.07 34.5197 227.07 34.4556V31.8437C227.07 31.7049 226.922 31.619 226.803 31.6881L226.037 32.1361C225.982 32.1684 225.949 32.2275 225.949 32.2916V34.9036C225.949 35.0423 226.097 35.1282 226.215 35.0591Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M224.052 36.3053L224.819 35.8574C224.873 35.8256 224.908 35.7665 224.908 35.7018V33.0899C224.908 32.9511 224.76 32.8652 224.642 32.9343L223.875 33.3829C223.821 33.4146 223.786 33.4737 223.786 33.5378V36.1498C223.786 36.2885 223.934 36.3744 224.052 36.3053Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M221.89 37.5515L222.657 37.1035C222.711 37.0718 222.746 37.0127 222.746 36.948V34.336C222.746 34.1979 222.598 34.112 222.48 34.1805L221.713 34.6291C221.658 34.6608 221.624 34.7199 221.624 34.784V37.3966C221.624 37.5347 221.772 37.6206 221.89 37.5515Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M219.728 38.7983L220.495 38.3497C220.549 38.3186 220.583 38.2589 220.583 38.1948V35.5822C220.583 35.4441 220.436 35.3582 220.318 35.4273L219.551 35.8753C219.496 35.9076 219.462 35.9661 219.462 36.0308V38.6428C219.462 38.7809 219.61 38.8668 219.728 38.7983Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M217.566 40.0446L218.333 39.596C218.388 39.5649 218.421 39.5051 218.421 39.4411V36.8285C218.421 36.6903 218.273 36.6045 218.155 36.6735L217.389 37.1215C217.334 37.1539 217.3 37.2124 217.3 37.2771V39.889C217.3 40.0272 217.448 40.1136 217.566 40.0446Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M215.404 41.2908L216.171 40.8428C216.225 40.8111 216.259 40.7513 216.259 40.6873V38.0753C216.259 37.9365 216.111 37.8507 215.993 37.9197L215.226 38.3677C215.172 38.4001 215.138 38.4592 215.138 38.5233V41.1352C215.138 41.274 215.286 41.3598 215.404 41.2908Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M213.242 42.656L214.008 42.2081C214.063 42.1763 214.097 42.1172 214.097 42.0525V39.4406C214.097 39.3024 213.949 39.2159 213.831 39.285L213.064 39.7336C213.009 39.7653 212.975 39.8245 212.975 39.8885V42.5011C212.975 42.6392 213.124 42.7251 213.242 42.656Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M211.08 43.8433L211.846 43.3947C211.901 43.363 211.935 43.3039 211.935 43.2392V40.6272C211.935 40.4891 211.787 40.4032 211.668 40.4717L210.902 40.9203C210.847 40.9526 210.813 41.0111 210.813 41.0758V43.6878C210.813 43.8259 210.962 43.9118 211.08 43.8433Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M208.917 45.1491L209.684 44.7005C209.738 44.6694 209.773 44.6097 209.773 44.5456V41.933C209.773 41.7949 209.625 41.709 209.507 41.7781L208.74 42.2261C208.686 42.2584 208.651 42.3169 208.651 42.3816V44.9936C208.651 45.1317 208.799 45.2176 208.917 45.1491Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M206.755 46.3953L207.522 45.9473C207.576 45.9156 207.611 45.8559 207.611 45.7918V43.1798C207.611 43.0411 207.463 42.9552 207.345 43.0243L206.578 43.4722C206.523 43.5046 206.489 43.5631 206.489 43.6278V46.2397C206.489 46.3785 206.637 46.4644 206.755 46.3953Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M180.68 26.8497L180.695 29.9103C180.593 30.4646 180.818 31.0713 181.368 31.3936L204.966 45.1851C205.397 45.437 205.928 45.437 206.359 45.1851L229.957 31.3936C230.507 31.0719 230.731 30.4646 230.629 29.9103L230.645 26.8497" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M204.966 41.7003L181.368 27.9082C180.439 27.3656 180.439 26.0092 181.368 25.4673L204.966 11.6752C205.397 11.4238 205.927 11.4238 206.358 11.6752L229.957 25.4673C230.885 26.0099 230.885 27.3656 229.957 27.9082L206.358 41.7003C205.927 41.9517 205.397 41.9517 204.966 41.7003Z" fill="#A59EF7"/> +</g> +<g opacity="0.327785"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M169.36 52.459L168.834 52.1463C168.797 52.1237 168.774 52.0822 168.774 52.0375V50.215C168.774 50.1181 168.875 50.0584 168.956 50.1062L169.482 50.4188C169.52 50.4415 169.543 50.4824 169.543 50.5277V52.3501C169.543 52.4464 169.442 52.5068 169.36 52.459Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M170.842 53.3282L170.316 53.0156C170.278 52.9936 170.255 52.952 170.255 52.9074V51.0849C170.255 50.988 170.357 50.9283 170.437 50.9761L170.963 51.2887C171.001 51.3108 171.024 51.3523 171.024 51.3976V53.22C171.024 53.3163 170.923 53.3767 170.842 53.3282Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M172.323 54.1982L171.797 53.8855C171.76 53.8635 171.737 53.822 171.737 53.7773V51.9542C171.737 51.8573 171.838 51.7976 171.919 51.846L172.445 52.1586C172.483 52.1807 172.505 52.2222 172.505 52.2669V54.09C172.505 54.1862 172.405 54.2466 172.323 54.1982Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M173.805 55.0681L173.279 54.7554C173.241 54.7334 173.218 54.6912 173.218 54.6472V52.8241C173.218 52.7272 173.319 52.6675 173.4 52.7159L173.926 53.0286C173.964 53.0506 173.987 53.0915 173.987 53.1368V54.9599C173.987 55.0555 173.885 55.1159 173.805 55.0681Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M175.286 55.938L174.76 55.6254C174.723 55.6027 174.699 55.5612 174.699 55.5165V53.6941C174.699 53.5972 174.801 53.5374 174.882 53.5852L175.408 53.8979C175.446 53.9205 175.469 53.9614 175.469 54.0067V55.8292C175.469 55.9254 175.367 55.9858 175.286 55.938Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M176.768 56.8079L176.241 56.4953C176.204 56.4726 176.181 56.4311 176.181 56.3864V54.564C176.181 54.4671 176.282 54.4073 176.363 54.4551L176.889 54.7678C176.926 54.7904 176.95 54.8313 176.95 54.8766V56.6991C176.95 56.7953 176.848 56.8557 176.768 56.8079Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M178.249 57.6772L177.723 57.3645C177.685 57.3425 177.662 57.301 177.662 57.2563V55.4332C177.662 55.337 177.764 55.2772 177.844 55.325L178.37 55.6377C178.408 55.6597 178.432 55.7012 178.432 55.7459V57.569C178.432 57.6653 178.33 57.7256 178.249 57.6772Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M179.73 58.6301L179.204 58.3174C179.166 58.2954 179.144 58.2539 179.144 58.2092V56.3868C179.144 56.2899 179.245 56.2301 179.326 56.2779L179.852 56.5906C179.889 56.6126 179.912 56.6541 179.912 56.6994V58.5219C179.912 58.6181 179.811 58.6785 179.73 58.6301Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M181.212 59.4588L180.686 59.1461C180.648 59.1235 180.625 59.082 180.625 59.0373V57.2148C180.625 57.1179 180.726 57.0582 180.807 57.106L181.333 57.4187C181.371 57.4413 181.394 57.4822 181.394 57.5275V59.35C181.394 59.4462 181.293 59.5066 181.212 59.4588Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M182.693 60.3699L182.167 60.0573C182.129 60.0352 182.107 59.9931 182.107 59.9491V58.1259C182.107 58.0291 182.207 57.9693 182.289 58.0177L182.815 58.3304C182.852 58.3524 182.875 58.3933 182.875 58.4386V60.2617C182.875 60.3573 182.774 60.4177 182.693 60.3699Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M184.174 61.2398L183.648 60.9272C183.611 60.9045 183.588 60.863 183.588 60.8183V58.9959C183.588 58.899 183.689 58.8392 183.77 58.887L184.296 59.1997C184.334 59.2223 184.357 59.2632 184.357 59.3085V61.131C184.357 61.2272 184.256 61.2876 184.174 61.2398Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M201.181 52.4761L201.718 52.1572C201.757 52.1339 201.78 52.0924 201.78 52.0459V50.1844C201.78 50.0862 201.677 50.0252 201.594 50.0743L201.057 50.3926C201.018 50.4165 200.995 50.458 200.995 50.504V52.3654C200.995 52.4636 201.099 52.5252 201.181 52.4761Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M199.668 53.3645L200.205 53.0449C200.244 53.0223 200.268 52.9807 200.268 52.9342V51.0727C200.268 50.9746 200.164 50.9129 200.081 50.9626L199.544 51.2809C199.506 51.3042 199.482 51.3464 199.482 51.3923V53.2538C199.482 53.3519 199.586 53.4136 199.668 53.3645Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M198.155 54.2528L198.693 53.9332C198.731 53.9106 198.755 53.8684 198.755 53.8225V51.9611C198.755 51.8623 198.652 51.8013 198.569 51.8503L198.031 52.1693C197.993 52.1926 197.969 52.2347 197.969 52.28V54.1421C197.969 54.2402 198.073 54.3019 198.155 54.2528Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M196.643 55.1412L197.18 54.8217C197.218 54.799 197.242 54.7569 197.242 54.7109V52.8488C197.242 52.7507 197.139 52.6897 197.056 52.7387L196.519 53.0577C196.48 53.081 196.456 53.1231 196.456 53.1684V55.0305C196.456 55.1286 196.56 55.1903 196.643 55.1412Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M195.13 56.0296L195.667 55.71C195.705 55.6873 195.729 55.6452 195.729 55.5993V53.7372C195.729 53.639 195.626 53.578 195.543 53.6271L195.006 53.946C194.967 53.9693 194.943 54.0114 194.943 54.0567V55.9182C194.943 56.017 195.047 56.0786 195.13 56.0296Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M193.617 56.9179L194.154 56.5983C194.193 56.5757 194.216 56.5335 194.216 56.487V54.6255C194.216 54.5274 194.113 54.4663 194.03 54.5154L193.493 54.8344C193.454 54.8576 193.431 54.8998 193.431 54.9451V56.8066C193.431 56.9047 193.534 56.967 193.617 56.9179Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M192.104 57.8056L192.641 57.4867C192.68 57.4634 192.704 57.4219 192.704 57.3753V55.5138C192.704 55.4157 192.6 55.3547 192.517 55.4037L191.98 55.7221C191.942 55.746 191.918 55.7875 191.918 55.8334V57.6949C191.918 57.793 192.022 57.8547 192.104 57.8056Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M190.591 58.7787L191.128 58.4598C191.167 58.4365 191.191 58.395 191.191 58.3485V56.487C191.191 56.3888 191.087 56.3272 191.004 56.3769L190.467 56.6952C190.429 56.7191 190.405 56.7606 190.405 56.8066V58.668C190.405 58.7662 190.509 58.8278 190.591 58.7787Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M189.078 59.6247L189.616 59.3051C189.654 59.2825 189.678 59.2403 189.678 59.1944V57.3329C189.678 57.2341 189.575 57.1731 189.492 57.2222L188.954 57.5411C188.916 57.5644 188.892 57.6066 188.892 57.6519V59.514C188.892 59.6121 188.996 59.6737 189.078 59.6247Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M187.566 60.5554L188.103 60.2358C188.141 60.2132 188.165 60.171 188.165 60.1251V58.2636C188.165 58.1649 188.062 58.1039 187.979 58.1529L187.442 58.4719C187.403 58.4952 187.379 58.5373 187.379 58.5826V60.4447C187.379 60.5428 187.483 60.6045 187.566 60.5554Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M186.053 61.4438L186.59 61.1242C186.628 61.1015 186.652 61.0594 186.652 61.0135V59.1514C186.652 59.0532 186.549 58.9922 186.466 59.0413L185.929 59.3602C185.89 59.3835 185.866 59.4256 185.866 59.4709V61.333C185.866 61.4312 185.97 61.4928 186.053 61.4438Z" fill="#8C87C4"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M167.808 47.5141L167.819 49.6951C167.747 50.0902 167.904 50.5224 168.289 50.7514L184.801 60.5809C185.102 60.7608 185.474 60.7608 185.775 60.5809L202.286 50.752C202.671 50.523 202.828 50.0902 202.757 49.6951L202.768 47.5141" fill="#8B81E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M184.801 58.0974L168.289 48.2686C167.64 47.8817 167.64 46.9154 168.289 46.5285L184.801 36.6996C185.102 36.5203 185.473 36.5203 185.775 36.6996L202.287 46.5285C202.936 46.9154 202.936 47.8823 202.287 48.2686L185.775 58.0974C185.474 58.2767 185.102 58.2767 184.801 58.0974Z" fill="#A59EF7"/> +</g> +<path fill-rule="evenodd" clip-rule="evenodd" d="M189.659 43.6672L204.642 52.5638V18.6826L189.659 43.6672Z" fill="#6659FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M204.672 18.6826V52.5638L219.649 43.6672L204.672 18.6826Z" fill="#5135E6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M189.659 46.6247L204.861 68.4196L204.642 55.5213L189.659 46.6247Z" fill="#6659FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M204.672 54.7454L204.917 67.4584L219.482 45.55L204.672 54.7454Z" fill="#4259DB"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M350.888 120.595C343.56 124.699 331.678 124.699 324.349 120.595C317.02 116.492 317.02 109.838 324.349 105.734C331.677 101.631 343.56 101.631 350.888 105.735C358.217 109.838 358.217 116.492 350.888 120.595Z" fill="#7F95EF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M318.852 112.846H356.385V109.662H318.852V112.846Z" fill="#838DB7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M350.888 117.411C343.56 121.515 331.678 121.515 324.349 117.411C317.02 113.307 317.02 106.654 324.349 102.55C331.677 98.4465 343.56 98.4465 350.888 102.55C358.217 106.654 358.217 113.307 350.888 117.411Z" fill="#93A8FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M326.211 115.967C319.911 112.485 319.911 106.839 326.211 103.358C332.511 99.8757 342.726 99.8757 349.026 103.358C355.326 106.84 355.326 112.485 349.026 115.967C342.726 119.449 332.511 119.449 326.211 115.967Z" fill="#9ABFFF"/> +<g opacity="0.370867"> +<g opacity="0.653363"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M342.161 110.157C342.497 110.398 342.355 110.571 342.298 110.734C341.315 113.539 336.078 115.549 331.129 115.025C328.909 114.79 327.621 114.016 327.452 112.816C327.266 111.493 328.324 110.596 330.572 110.173C331.906 109.922 333.285 109.901 334.667 109.943C337.204 110.021 339.711 110.353 342.161 110.157Z" fill="#4562DF"/> +</g> +<g opacity="0.653363"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M331.818 108.942C332.063 106.358 336.216 104.162 340.869 104.029C341.632 104.007 342.397 104.01 343.152 104.108C345.409 104.4 346.637 105.208 346.723 106.465C346.805 107.672 345.734 108.521 343.592 108.934C342.419 109.16 341.201 109.235 339.972 109.201C337.284 109.128 334.63 108.791 331.818 108.942Z" fill="#4562DF"/> +</g> +</g> +<path fill-rule="evenodd" clip-rule="evenodd" d="M350.888 116.296C343.56 120.4 331.678 120.4 324.349 116.296C317.02 112.193 317.02 105.539 324.349 101.436C331.677 97.332 343.56 97.332 350.888 101.436C358.217 105.539 358.217 112.193 350.888 116.296Z" fill="#7F95EF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M318.852 108.548H356.385V105.363H318.852V108.548Z" fill="#838DB7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M350.888 113.112C343.56 117.216 331.678 117.216 324.349 113.112C317.02 109.008 317.02 102.355 324.349 98.2514C331.677 94.1478 343.56 94.1478 350.888 98.2515C358.217 102.355 358.217 109.009 350.888 113.112Z" fill="#93A8FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M326.211 111.668C319.911 108.186 319.911 102.541 326.211 99.0588C332.511 95.5769 342.726 95.5769 349.026 99.0588C355.326 102.541 355.326 108.186 349.026 111.668C342.726 115.15 332.511 115.15 326.211 111.668Z" fill="#9ABFFF"/> +<g opacity="0.370867"> +<g opacity="0.653363"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M342.161 105.859C342.497 106.1 342.355 106.272 342.298 106.435C341.315 109.24 336.078 111.251 331.129 110.726C328.909 110.491 327.621 109.717 327.452 108.517C327.266 107.194 328.324 106.297 330.572 105.874C331.906 105.624 333.285 105.603 334.667 105.644C337.204 105.722 339.711 106.054 342.161 105.859Z" fill="#4562DF"/> +</g> +<g opacity="0.653363"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M331.818 104.643C332.063 102.059 336.216 99.8633 340.869 99.7298C341.632 99.7079 342.397 99.7109 343.152 99.8089C345.409 100.102 346.637 100.909 346.723 102.166C346.805 103.373 345.734 104.222 343.592 104.635C342.419 104.861 341.201 104.936 339.972 104.903C337.284 104.829 334.63 104.492 331.818 104.643Z" fill="#4562DF"/> +</g> +</g> +<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5817 124.894C72.253 128.998 60.3709 128.998 53.0422 124.894C45.7135 120.79 45.7134 114.137 53.0421 110.033C60.3708 105.93 72.2529 105.93 79.5816 110.033C86.9103 114.137 86.9104 120.79 79.5817 124.894Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M47.5456 117.145H85.0782V113.961H47.5456V117.145Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M53.0422 121.71C45.7135 117.606 45.7134 110.953 53.0421 106.849C60.3708 102.745 72.2529 102.745 79.5816 106.849C86.9103 110.953 86.9104 117.606 79.5817 121.71C72.253 125.813 60.3709 125.813 53.0422 121.71Z" fill="#86F7D1"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M54.9046 120.265C48.6045 116.784 48.6044 111.138 54.9046 107.656C61.2046 104.174 71.4191 104.174 77.7192 107.656C84.0193 111.138 84.0194 116.784 77.7193 120.266C71.4192 123.747 61.2047 123.747 54.9046 120.265Z" fill="#95FFDA"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M78.1519 112.724C78.1579 112.71 78.1629 112.697 78.1681 112.684C78.1741 112.687 78.1793 112.69 78.1852 112.692L78.2281 112.712L78.1519 112.724ZM75.2505 115.293C74.8038 115.693 74.3155 116.07 73.7899 116.421C73.5585 116.576 73.3192 116.726 73.0736 116.871C71.4102 116.816 70.5534 116.576 70.1138 116.331C69.5898 116.039 69.6552 115.742 69.6552 115.742C69.6552 115.702 69.6552 115.662 69.6711 115.622C69.6711 115.622 69.6791 115.586 69.7054 115.531C69.7421 115.454 69.8139 115.34 69.9495 115.225C70.1816 115.027 70.6037 114.83 71.3568 114.828H71.3703C71.5698 114.824 71.7692 114.842 71.9367 114.886C72.7345 115.083 72.216 115.45 72.216 115.45C72.2758 115.446 72.3364 115.44 72.3978 115.433C73.3567 115.315 74.4376 114.814 74.2502 113.976C74.2079 113.785 74.0682 113.615 73.8744 113.464C73.3862 113.083 72.5533 112.83 72.0795 112.708C71.8632 112.653 71.7213 112.625 71.7213 112.625C71.7452 112.557 71.7532 112.504 71.7532 112.464C71.7532 112.456 71.7532 112.449 71.7515 112.442C71.7476 112.377 71.7213 112.352 71.7213 112.352C66.7753 110.986 62.9222 111.281 62.9222 111.281L63.8795 111.718C63.8755 111.718 63.8723 111.718 63.8684 111.718C63.7758 111.715 63.6761 111.715 63.5844 111.715C62.2306 111.737 60.9685 111.926 59.8908 112.241C57.7728 112.857 56.3649 113.954 56.3649 115.207C56.3649 115.265 56.3687 115.322 56.3752 115.376C56.3464 115.351 56.3186 115.326 56.2898 115.3C56.1422 115.169 56.0042 115.039 55.875 114.911C54.8969 113.945 54.4 113.097 54.1861 112.662C59.0388 110.884 64.9445 109.989 65.7701 109.872C66.0015 109.905 66.6285 109.999 67.5188 110.155C68.5295 110.333 69.8785 110.592 71.3719 110.935C73.2681 111.372 75.3956 111.944 77.3542 112.66C77.11 113.151 76.5037 114.17 75.2505 115.293ZM67.8363 112.25C69.1517 112.246 70.3396 112.388 71.2092 112.628C71.1812 112.624 70.7249 112.558 70.2615 112.53C70.0221 112.643 69.8147 112.691 69.7509 112.705C69.7429 112.709 69.7349 112.712 69.7349 112.712C68.3389 112.578 67.8363 112.25 67.8363 112.25ZM78.3792 112.23C73.4834 110.339 67.3313 109.373 66.1507 109.199L65.7677 109.145L65.3928 109.198C64.2081 109.373 58.0481 110.34 53.1515 112.233L52.9074 112.327L52.9672 112.482C53.0685 112.733 53.6549 114.058 55.291 115.528C56.3425 116.47 57.6284 117.296 59.1131 117.985C60.9223 118.822 63.0339 119.442 65.3929 119.83L65.7758 119.892L66.0246 119.847L66.1571 119.826C68.5016 119.441 70.6133 118.82 72.4345 117.982C73.9111 117.301 75.197 116.474 76.2572 115.524C77.903 114.049 78.5212 112.682 78.5842 112.468H78.585L78.644 112.316L78.3792 112.23Z" fill="#6CF0D1"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.9765 112.492L78.644 112.548C78.6703 112.485 78.6928 112.425 78.7153 112.369C78.7416 112.382 78.7636 112.392 78.7899 112.405L78.9765 112.492Z" fill="#000CA5"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.7893 112.405C78.7631 112.392 78.7411 112.382 78.7148 112.369C78.6923 112.425 78.6698 112.485 78.644 112.548L78.9759 112.492L78.7893 112.405Z" fill="#000CA5"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5817 120.595C72.253 124.699 60.3709 124.699 53.0422 120.595C45.7135 116.492 45.7134 109.838 53.0421 105.734C60.3708 101.631 72.2529 101.631 79.5816 105.735C86.9103 109.838 86.9104 116.492 79.5817 120.595Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M47.5456 112.846H85.0782V109.662H47.5456V112.846Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M53.0422 117.411C45.7135 113.307 45.7134 106.654 53.0421 102.55C60.3708 98.4465 72.2529 98.4465 79.5816 102.55C86.9103 106.654 86.9104 113.307 79.5817 117.411C72.253 121.515 60.3709 121.515 53.0422 117.411Z" fill="#86F7D1"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M54.9046 115.967C48.6045 112.485 48.6044 106.839 54.9046 103.358C61.2046 99.8757 71.4191 99.8757 77.7192 103.358C84.0193 106.84 84.0194 112.485 77.7193 115.967C71.4192 119.449 61.2047 119.449 54.9046 115.967Z" fill="#95FFDA"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M78.1519 108.426C78.1579 108.412 78.1629 108.398 78.1681 108.386C78.1741 108.388 78.1793 108.391 78.1852 108.394L78.2281 108.413L78.1519 108.426ZM75.2505 110.994C74.8038 111.395 74.3155 111.771 73.7899 112.122C73.5585 112.277 73.3192 112.427 73.0736 112.572C71.4102 112.517 70.5534 112.277 70.1138 112.032C69.5898 111.741 69.6552 111.443 69.6552 111.443C69.6552 111.403 69.6552 111.363 69.6711 111.323C69.6711 111.323 69.6791 111.288 69.7054 111.232C69.7421 111.155 69.8139 111.041 69.9495 110.926C70.1816 110.729 70.6037 110.532 71.3568 110.529H71.3703C71.5698 110.525 71.7692 110.544 71.9367 110.587C72.7345 110.784 72.216 111.152 72.216 111.152C72.2758 111.147 72.3364 111.142 72.3978 111.134C73.3567 111.016 74.4376 110.516 74.2502 109.677C74.2079 109.487 74.0682 109.316 73.8744 109.165C73.3862 108.784 72.5533 108.531 72.0795 108.41C71.8632 108.354 71.7213 108.326 71.7213 108.326C71.7452 108.258 71.7532 108.205 71.7532 108.165C71.7532 108.157 71.7532 108.15 71.7515 108.143C71.7476 108.078 71.7213 108.053 71.7213 108.053C66.7753 106.688 62.9222 106.983 62.9222 106.983L63.8795 107.42C63.8755 107.42 63.8723 107.419 63.8684 107.419C63.7758 107.416 63.6761 107.416 63.5844 107.416C62.2306 107.438 60.9685 107.627 59.8908 107.942C57.7728 108.558 56.3649 109.656 56.3649 110.908C56.3649 110.966 56.3687 111.023 56.3752 111.077C56.3464 111.052 56.3186 111.027 56.2898 111.002C56.1422 110.87 56.0042 110.74 55.875 110.612C54.8969 109.646 54.4 108.798 54.1861 108.363C59.0388 106.586 64.9445 105.691 65.7701 105.573C66.0015 105.606 66.6285 105.7 67.5188 105.856C68.5295 106.034 69.8785 106.293 71.3719 106.637C73.2681 107.073 75.3956 107.645 77.3542 108.361C77.11 108.852 76.5037 109.871 75.2505 110.994ZM67.8363 107.951C69.1517 107.948 70.3396 108.09 71.2092 108.329C71.1812 108.325 70.7249 108.26 70.2615 108.232C70.0221 108.344 69.8147 108.392 69.7509 108.406C69.7429 108.41 69.7349 108.414 69.7349 108.414C68.3389 108.279 67.8363 107.951 67.8363 107.951ZM78.3792 107.931C73.4834 106.04 67.3313 105.074 66.1507 104.9L65.7677 104.846L65.3928 104.899C64.2081 105.074 58.0481 106.041 53.1515 107.935L52.9074 108.029L52.9672 108.183C53.0685 108.434 53.6549 109.759 55.291 111.229C56.3425 112.171 57.6284 112.997 59.1131 113.686C60.9223 114.523 63.0339 115.144 65.3929 115.531L65.7758 115.593L66.0246 115.548L66.1571 115.527C68.5016 115.142 70.6133 114.522 72.4345 113.683C73.9111 113.002 75.197 112.175 76.2572 111.225C77.903 109.75 78.5212 108.383 78.5842 108.17H78.585L78.644 108.017L78.3792 107.931Z" fill="#6CF0D1"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.9765 108.193L78.644 108.249C78.6703 108.186 78.6928 108.126 78.7153 108.07C78.7416 108.083 78.7636 108.093 78.7899 108.107L78.9765 108.193Z" fill="#000CA5"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.7893 108.107C78.7631 108.094 78.7411 108.083 78.7148 108.07C78.6923 108.126 78.6698 108.186 78.644 108.249L78.9759 108.193L78.7893 108.107Z" fill="#000CA5"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5817 116.296C72.253 120.4 60.3709 120.4 53.0422 116.296C45.7135 112.193 45.7134 105.539 53.0421 101.436C60.3708 97.332 72.2529 97.332 79.5816 101.436C86.9103 105.539 86.9104 112.193 79.5817 116.296Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M47.5456 108.548H85.0782V105.363H47.5456V108.548Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M53.0422 113.112C45.7135 109.008 45.7134 102.355 53.0421 98.2514C60.3708 94.1478 72.2529 94.1478 79.5816 98.2515C86.9103 102.355 86.9104 109.009 79.5817 113.112C72.253 117.216 60.3709 117.216 53.0422 113.112Z" fill="#86F7D1"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M54.9046 111.668C48.6045 108.186 48.6044 102.541 54.9046 99.0588C61.2046 95.5769 71.4191 95.5769 77.7192 99.0588C84.0193 102.541 84.0194 108.186 77.7193 111.668C71.4192 115.15 61.2047 115.15 54.9046 111.668Z" fill="#95FFDA"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M78.1519 104.127C78.1579 104.113 78.1629 104.099 78.1681 104.087C78.1741 104.09 78.1793 104.092 78.1852 104.095L78.2281 104.114L78.1519 104.127ZM75.2505 106.696C74.8038 107.096 74.3155 107.472 73.7899 107.824C73.5585 107.978 73.3192 108.128 73.0736 108.273C71.4102 108.218 70.5534 107.978 70.1138 107.733C69.5898 107.442 69.6552 107.144 69.6552 107.144C69.6552 107.104 69.6552 107.064 69.6711 107.024C69.6711 107.024 69.6791 106.989 69.7054 106.933C69.7421 106.857 69.8139 106.742 69.9495 106.627C70.1816 106.43 70.6037 106.233 71.3568 106.23H71.3703C71.5698 106.227 71.7692 106.245 71.9367 106.289C72.7345 106.485 72.216 106.853 72.216 106.853C72.2758 106.849 72.3364 106.843 72.3978 106.835C73.3567 106.717 74.4376 106.217 74.2502 105.378C74.2079 105.188 74.0682 105.017 73.8744 104.867C73.3862 104.485 72.5533 104.232 72.0795 104.111C71.8632 104.055 71.7213 104.027 71.7213 104.027C71.7452 103.959 71.7532 103.907 71.7532 103.866C71.7532 103.858 71.7532 103.851 71.7515 103.844C71.7476 103.779 71.7213 103.754 71.7213 103.754C66.7753 102.389 62.9222 102.684 62.9222 102.684L63.8795 103.121C63.8755 103.121 63.8723 103.12 63.8684 103.12C63.7758 103.117 63.6761 103.117 63.5844 103.117C62.2306 103.139 60.9685 103.329 59.8908 103.643C57.7728 104.26 56.3649 105.357 56.3649 106.609C56.3649 106.668 56.3687 106.724 56.3752 106.779C56.3464 106.754 56.3186 106.728 56.2898 106.703C56.1422 106.572 56.0042 106.441 55.875 106.313C54.8969 105.348 54.4 104.5 54.1861 104.065C59.0388 102.287 64.9445 101.392 65.7701 101.275C66.0015 101.307 66.6285 101.401 67.5188 101.558C68.5295 101.735 69.8785 101.994 71.3719 102.338C73.2681 102.774 75.3956 103.347 77.3542 104.062C77.11 104.553 76.5037 105.573 75.2505 106.696ZM67.8363 103.652C69.1517 103.649 70.3396 103.791 71.2092 104.031C71.1812 104.027 70.7249 103.961 70.2615 103.933C70.0221 104.046 69.8147 104.093 69.7509 104.108C69.7429 104.111 69.7349 104.115 69.7349 104.115C68.3389 103.98 67.8363 103.652 67.8363 103.652ZM78.3792 103.632C73.4834 101.741 67.3313 100.775 66.1507 100.601L65.7677 100.547L65.3928 100.601C64.2081 100.775 58.0481 101.742 53.1515 103.636L52.9074 103.73L52.9672 103.884C53.0685 104.135 53.6549 105.46 55.291 106.93C56.3425 107.872 57.6284 108.699 59.1131 109.388C60.9223 110.224 63.0339 110.845 65.3929 111.232L65.7758 111.294L66.0246 111.25L66.1571 111.229C68.5016 110.843 70.6133 110.223 72.4345 109.384C73.9111 108.703 75.197 107.876 76.2572 106.927C77.903 105.451 78.5212 104.084 78.5842 103.871H78.585L78.644 103.718L78.3792 103.632Z" fill="#6CF0D1"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.9765 103.894L78.644 103.95C78.6703 103.887 78.6928 103.827 78.7153 103.771C78.7416 103.784 78.7636 103.794 78.7899 103.808L78.9765 103.894Z" fill="#000CA5"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.7893 103.808C78.7631 103.795 78.7411 103.784 78.7148 103.771C78.6923 103.827 78.6698 103.887 78.644 103.951L78.9759 103.894L78.7893 103.808Z" fill="#000CA5"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5817 111.998C72.253 116.101 60.3709 116.101 53.0422 111.998C45.7135 107.894 45.7134 101.241 53.0421 97.1369C60.3708 93.0333 72.2529 93.0333 79.5816 97.137C86.9103 101.241 86.9104 107.894 79.5817 111.998Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M47.5456 104.249H85.0782V101.065H47.5456V104.249Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M53.0422 108.813C45.7135 104.71 45.7134 98.0563 53.0421 93.9526C60.3708 89.849 72.2529 89.849 79.5816 93.9527C86.9103 98.0564 86.9104 104.71 79.5817 108.813C72.253 112.917 60.3709 112.917 53.0422 108.813Z" fill="#86F7D1"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M54.9046 107.369C48.6045 103.887 48.6044 98.2419 54.9046 94.7601C61.2046 91.2781 71.4191 91.2781 77.7192 94.7601C84.0193 98.242 84.0194 103.887 77.7193 107.369C71.4192 110.851 61.2047 110.851 54.9046 107.369Z" fill="#95FFDA"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M78.1519 99.828C78.1579 99.814 78.1629 99.8006 78.1681 99.788C78.1741 99.7909 78.1793 99.7933 78.1852 99.7962L78.2281 99.8156L78.1519 99.828ZM75.2505 102.397C74.8038 102.797 74.3155 103.174 73.7899 103.525C73.5585 103.68 73.3192 103.829 73.0736 103.974C71.4102 103.92 70.5534 103.679 70.1138 103.434C69.5898 103.143 69.6552 102.845 69.6552 102.845C69.6552 102.805 69.6552 102.765 69.6711 102.725C69.6711 102.725 69.6791 102.69 69.7054 102.634C69.7421 102.558 69.8139 102.443 69.9495 102.328C70.1816 102.131 70.6037 101.934 71.3568 101.932H71.3703C71.5698 101.928 71.7692 101.946 71.9367 101.99C72.7345 102.186 72.216 102.554 72.216 102.554C72.2758 102.55 72.3364 102.544 72.3978 102.536C73.3567 102.419 74.4376 101.918 74.2502 101.08C74.2079 100.889 74.0682 100.719 73.8744 100.568C73.3862 100.187 72.5533 99.9333 72.0795 99.812C71.8632 99.7567 71.7213 99.7287 71.7213 99.7287C71.7452 99.6605 71.7532 99.6078 71.7532 99.5673C71.7532 99.5597 71.7532 99.5524 71.7515 99.5455C71.7476 99.4806 71.7213 99.4555 71.7213 99.4555C66.7753 98.0901 62.9222 98.3851 62.9222 98.3851L63.8795 98.822C63.8755 98.822 63.8723 98.8216 63.8684 98.8216C63.7758 98.8183 63.6761 98.8183 63.5844 98.8183C62.2306 98.8405 60.9685 99.0299 59.8908 99.3442C57.7728 99.9609 56.3649 101.058 56.3649 102.31C56.3649 102.369 56.3687 102.425 56.3752 102.48C56.3464 102.455 56.3186 102.43 56.2898 102.404C56.1422 102.273 56.0042 102.142 55.875 102.015C54.8969 101.049 54.4 100.201 54.1861 99.7658C59.0388 97.9881 64.9445 97.0932 65.7701 96.9759C66.0015 97.0086 66.6285 97.1023 67.5188 97.2588C68.5295 97.4365 69.8785 97.6953 71.3719 98.0391C73.2681 98.4754 75.3956 99.0478 77.3542 99.7635C77.11 100.254 76.5037 101.274 75.2505 102.397ZM67.8363 99.3536C69.1517 99.35 70.3396 99.4919 71.2092 99.7319C71.1812 99.7279 70.7249 99.662 70.2615 99.634C70.0221 99.7469 69.8147 99.7942 69.7509 99.8087C69.7429 99.8125 69.7349 99.8161 69.7349 99.8161C68.3389 99.6813 67.8363 99.3536 67.8363 99.3536ZM78.3792 99.3332C73.4834 97.4423 67.3313 96.4767 66.1507 96.3026L65.7677 96.2484L65.3928 96.3019C64.2081 96.4767 58.0481 97.4434 53.1515 99.3371L52.9074 99.4312L52.9672 99.5855C53.0685 99.8364 53.6549 101.161 55.291 102.631C56.3425 103.573 57.6284 104.4 59.1131 105.089C60.9223 105.926 63.0339 106.546 65.3929 106.933L65.7758 106.995L66.0246 106.951L66.1571 106.93C68.5016 106.545 70.6133 105.924 72.4345 105.085C73.9111 104.404 75.197 103.577 76.2572 102.628C77.903 101.153 78.5212 99.7855 78.5842 99.572H78.585L78.644 99.4196L78.3792 99.3332Z" fill="#6CF0D1"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.9765 99.5955L78.644 99.6514C78.6703 99.5885 78.6928 99.5284 78.7153 99.4725C78.7416 99.4854 78.7636 99.4956 78.7899 99.509L78.9765 99.5955Z" fill="#000CA5"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.7893 99.509C78.7631 99.4961 78.7411 99.4854 78.7148 99.4725C78.6923 99.5284 78.6698 99.5885 78.644 99.6519L78.9759 99.5955L78.7893 99.509Z" fill="#000CA5"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M79.5817 107.699C72.253 111.803 60.3709 111.803 53.0422 107.699C45.7135 103.595 45.7134 96.9418 53.0421 92.8381C60.3708 88.7345 72.2529 88.7345 79.5816 92.8382C86.9103 96.9419 86.9104 103.595 79.5817 107.699Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M47.5456 99.9501H85.0782V96.7658H47.5456V99.9501Z" fill="#61C9A7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M53.0422 104.515C45.7135 100.411 45.7134 93.7575 53.0421 89.6539C60.3708 85.5502 72.2529 85.5502 79.5816 89.6539C86.9103 93.7576 86.9104 100.411 79.5817 104.515C72.253 108.618 60.3709 108.618 53.0422 104.515Z" fill="#86F7D1"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M54.9046 103.07C48.6045 99.5884 48.6044 93.9431 54.9046 90.4613C61.2046 86.9794 71.4191 86.9794 77.7192 90.4613C84.0193 93.9432 84.0194 99.5885 77.7193 103.07C71.4192 106.552 61.2047 106.552 54.9046 103.07Z" fill="#95FFDA"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M78.1519 95.5293C78.1579 95.5152 78.1629 95.5018 78.1681 95.4892C78.1741 95.4921 78.1793 95.4945 78.1852 95.4974L78.2281 95.5168L78.1519 95.5293ZM75.2505 98.0981C74.8038 98.4983 74.3155 98.8747 73.7899 99.2261C73.5585 99.3809 73.3192 99.5305 73.0736 99.6755C71.4102 99.6208 70.5534 99.3805 70.1138 99.1355C69.5898 98.8442 69.6552 98.5467 69.6552 98.5467C69.6552 98.5067 69.6552 98.4665 69.6711 98.4266C69.6711 98.4266 69.6791 98.3912 69.7054 98.3355C69.7421 98.259 69.8139 98.1444 69.9495 98.0297C70.1816 97.8323 70.6037 97.6353 71.3568 97.6327H71.3703C71.5698 97.6291 71.7692 97.6473 71.9367 97.6911C72.7345 97.8876 72.216 98.2554 72.216 98.2554C72.2758 98.251 72.3364 98.2452 72.3978 98.2376C73.3567 98.1199 74.4376 97.6193 74.2502 96.7808C74.2079 96.5903 74.0682 96.4199 73.8744 96.2691C73.3862 95.8879 72.5533 95.6345 72.0795 95.5132C71.8632 95.4579 71.7213 95.4299 71.7213 95.4299C71.7452 95.3618 71.7532 95.309 71.7532 95.2685C71.7532 95.2609 71.7532 95.2536 71.7515 95.2467C71.7476 95.1818 71.7213 95.1567 71.7213 95.1567C66.7753 93.7913 62.9222 94.0863 62.9222 94.0863L63.8795 94.5232C63.8755 94.5232 63.8723 94.5228 63.8684 94.5228C63.7758 94.5195 63.6761 94.5195 63.5844 94.5195C62.2306 94.5417 60.9685 94.7311 59.8908 95.0454C57.7728 95.6622 56.3649 96.7592 56.3649 98.0115C56.3649 98.07 56.3687 98.1264 56.3752 98.1811C56.3464 98.1561 56.3186 98.1309 56.2898 98.1053C56.1422 97.974 56.0042 97.8435 55.875 97.7158C54.8969 96.7501 54.4 95.9021 54.1861 95.467C59.0388 93.6893 64.9445 92.7944 65.7701 92.6771C66.0015 92.7099 66.6285 92.8035 67.5188 92.9601C68.5295 93.1377 69.8785 93.3965 71.3719 93.7403C73.2681 94.1766 75.3956 94.749 77.3542 95.4648C77.11 95.9556 76.5037 96.9751 75.2505 98.0981ZM67.8363 95.0548C69.1517 95.0512 70.3396 95.1932 71.2092 95.4331C71.1812 95.4292 70.7249 95.3632 70.2615 95.3352C70.0221 95.4481 69.8147 95.4954 69.7509 95.51C69.7429 95.5137 69.7349 95.5173 69.7349 95.5173C68.3389 95.3825 67.8363 95.0548 67.8363 95.0548ZM78.3792 95.0344C73.4834 93.1435 67.3313 92.1779 66.1507 92.0039L65.7677 91.9496L65.3928 92.0031C64.2081 92.1779 58.0481 93.1446 53.1515 95.0383L52.9074 95.1324L52.9672 95.2867C53.0685 95.5376 53.6549 96.8626 55.291 98.3326C56.3425 99.2745 57.6284 100.101 59.1131 100.79C60.9223 101.627 63.0339 102.247 65.3929 102.635L65.7758 102.697L66.0246 102.652L66.1571 102.631C68.5016 102.246 70.6133 101.625 72.4345 100.786C73.9111 100.106 75.197 99.2786 76.2572 98.329C77.903 96.8539 78.5212 95.4867 78.5842 95.2732H78.585L78.644 95.1208L78.3792 95.0344Z" fill="#6CF0D1"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.9765 95.2967L78.644 95.3526C78.6703 95.2898 78.6928 95.2296 78.7153 95.1737C78.7416 95.1866 78.7636 95.1968 78.7899 95.2102L78.9765 95.2967Z" fill="#000CA5"/> +<path opacity="0.175894" fill-rule="evenodd" clip-rule="evenodd" d="M78.7893 95.2102C78.7631 95.1973 78.7411 95.1866 78.7148 95.1737C78.6923 95.2296 78.6698 95.2898 78.644 95.3532L78.9759 95.2967L78.7893 95.2102Z" fill="#000CA5"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M350.888 111.998C343.56 116.101 331.678 116.101 324.349 111.998C317.02 107.894 317.02 101.241 324.349 97.1369C331.677 93.0333 343.56 93.0333 350.888 97.137C358.217 101.241 358.217 107.894 350.888 111.998Z" fill="#7F95EF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M318.852 104.249H356.385V101.065H318.852V104.249Z" fill="#838DB7"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M350.888 108.813C343.56 112.917 331.678 112.917 324.349 108.813C317.02 104.71 317.02 98.0563 324.349 93.9526C331.677 89.849 343.56 89.849 350.888 93.9527C358.217 98.0564 358.217 104.71 350.888 108.813Z" fill="#93A8FF"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M326.211 107.369C319.911 103.887 319.911 98.2419 326.211 94.7601C332.511 91.2781 342.726 91.2781 349.026 94.7601C355.326 98.242 355.326 103.887 349.026 107.369C342.726 110.851 332.511 110.851 326.211 107.369Z" fill="#9ABFFF"/> +<g opacity="0.370867"> +<g opacity="0.653363"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M342.161 101.56C342.497 101.801 342.355 101.973 342.298 102.137C341.315 104.941 336.078 106.952 331.129 106.428C328.909 106.192 327.621 105.418 327.452 104.219C327.266 102.896 328.324 101.998 330.572 101.576C331.906 101.325 333.285 101.304 334.667 101.346C337.204 101.423 339.711 101.755 342.161 101.56Z" fill="#4562DF"/> +</g> +<g opacity="0.653363"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M331.818 100.345C332.063 97.7602 336.216 95.5645 340.869 95.4311C341.632 95.4091 342.397 95.4121 343.152 95.5101C345.409 95.8029 346.637 96.6105 346.723 97.8673C346.805 99.0741 345.734 99.9235 343.592 100.336C342.419 100.562 341.201 100.637 339.972 100.604C337.284 100.53 334.63 100.194 331.818 100.345Z" fill="#4562DF"/> +</g> +</g> +</svg> diff --git a/packages/website/public/images/landing/exchange_everywhere.png b/packages/website/public/images/landing/exchange_everywhere.png Binary files differnew file mode 100644 index 000000000..e63093929 --- /dev/null +++ b/packages/website/public/images/landing/exchange_everywhere.png diff --git a/packages/website/public/images/team/gene.jpg b/packages/website/public/images/team/gene.jpg Binary files differnew file mode 100644 index 000000000..1d4222118 --- /dev/null +++ b/packages/website/public/images/team/gene.jpg diff --git a/packages/website/public/images/team/jason.png b/packages/website/public/images/team/jason.png Binary files differnew file mode 100644 index 000000000..a39522252 --- /dev/null +++ b/packages/website/public/images/team/jason.png diff --git a/packages/website/public/images/team/rahul.png b/packages/website/public/images/team/rahul.png Binary files differnew file mode 100644 index 000000000..b63cc12b1 --- /dev/null +++ b/packages/website/public/images/team/rahul.png diff --git a/packages/website/public/images/team/steve.png b/packages/website/public/images/team/steve.png Binary files differnew file mode 100644 index 000000000..751583fba --- /dev/null +++ b/packages/website/public/images/team/steve.png diff --git a/packages/website/public/images/team/weijie.png b/packages/website/public/images/team/weijie.png Binary files differnew file mode 100644 index 000000000..69fd51794 --- /dev/null +++ b/packages/website/public/images/team/weijie.png diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 3e9f21370..95b9bda62 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -13,7 +13,7 @@ "TRADITIONAL_ASSETS": "传统资产", "DIGITAL_GOODS": "数字商品", "OFFCHAIN_ORDER_RELAY": "链下订单中继", - "OONCHAIN_SETTLEMENT": "链上最终结算", + "ONCHAIN_SETTLEMENT": "链上最终结算", "OFFCHAIN_ONCHAIN_DESCRIPTION": "在 0x 协议中，所有订单都通过链下传输，大幅削减了损耗成本，能够有效避免区块链膨胀。任何人都可以构建中继方，由中继方广播订单，每促成一笔交易，就可以收取一笔交易费。", "RELAYERS_HEADER": "基于 0X 协议构建的中继方", @@ -61,6 +61,9 @@ "SOL_COV": "Solidity Coverage", "ETHEREUM_TYPES": "Ethereum Types", "SUBPROVIDERS": "Subproviders", + "CONTRACT_WRAPPERS": "Contract Wrappers", + "ORDER_WATCHER": "OrderWatcher", + "0x.js": "0x.js", "BLOG": "博客", "FORUM": "论坛", "CONNECT": "0x 连接", @@ -75,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 d94dbb29e..465bd49b4 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -9,25 +9,26 @@ "FULL_LIST_LINK": "full list", "TOKENIZED_SECTION_HEADER": "the world's value is becoming tokenized", "TOKENIZED_SECTION_DESCRIPTION": - "the Ethereum blockchain is an open, borderless financial system that represents a wide variety of assets as cryptographic tokens. In the future, most digital assets and goods will be tokenized.", + "0x is the critical infrastructure layer in the emerging financial stack built on a foundation of Ethereum token standards. Developers needing exchange functionality for ERC 20 tokens, ERC 721 tokens, or any new asset type can easily integrate the 0x protocol into their application.", "CURRENCY": "currency", "TRADITIONAL_ASSETS": "traditional assets", "DIGITAL_GOODS": "digital goods", "OFFCHAIN_ORDER_RELAY": "off-chain order relay", - "OONCHAIN_SETTLEMENT": "on-chain settlement", + "ONCHAIN_SETTLEMENT": "on-chain settlement", "OFFCHAIN_ONCHAIN_DESCRIPTION": "in 0x protocol, orders are transported off-chain, massively reducing gas costs and eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time they facilitate a trade. Anyone can build a relayer.", "RELAYERS_HEADER": "relayers building on 0x", "BENEFITS_HEADER": "benefits of 0x", - "BENEFIT_ONE_TITLE": "trustless exchange", + "USE_CASES_HEADER": "use cases of 0x", + "BENEFIT_ONE_TITLE": "any asset", "BENEFIT_ONE_DESCRIPTION": - "built on Ethereum's distributed network with no centralized point of failure and no down time, each trade is settled atomically and without counterparty risk.", - "BENEFIT_TWO_TITLE": "shared liquidity", + "the 0x protocol facilitates the exchange of a growing number of Ethereum-based tokens including currencies, game items, and many more digital assets.", + "BENEFIT_TWO_TITLE": "networked liquidity", "BENEFIT_TWO_DESCRIPTION": "by sharing a standard API, relayers can easily aggregate liquidity pools, creating network effects around liquidity that compound as more relayers come online.", - "BENEFIT_THREE_TITLE": "open source", + "BENEFIT_THREE_TITLE": "exchange everywhere", "BENEFIT_THREE_DESCRIPTION": - "0x is open source, permissionless and free to use. Trade directly with a known counterparty for free or pay a relayer some ZRX tokens to access their liquidity pool.", + "0x allows trade functionality to fade into the background, enabling developers to focus on building while 0x handles the exchange.", "BUILDING_BLOCK_SECTION_HEADER": "a building block for dApps", "BUILDING_BLOCK_SECTION_DESCRIPTION": "0x protocol is a pluggable building block for dApps that require exchange functionality. Join the many developers that are already using 0x in their web applications and smart contracts.", @@ -43,10 +44,10 @@ "decentralized prediction market platforms generate sets of tokens that represent a financial stake in the outcomes of real-world events. 0x allows these tokens to be instantly tradable.", "STABLE_TOKENS": "stable tokens", "STABLE_TOKENS_DESCRIPTION": - "Novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.", + "novel economic constructs such as stable coins require efficient, liquid markets to succeed. 0x will facilitate the underlying economic mechanisms that allow these tokens to remain stable.", "DECENTRALIZED_LOANS": "decentralized loans", "DECENTRALIZED_LOANS_DESCRIPTION": - "Efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.", + "efficient lending requires liquid markets where investors can buy and re-sell loans. 0x enables an ecosystem of lenders to self-organize and efficiently determine market prices for all outstanding loans.", "FUND_MANAGEMENT": "fund management", "FUND_MANAGEMENT_DESCRIPTION": "Decentralized fund management limits fund managers to investing in pre-agreed upon asset classes. Embedding 0x into fund management smart contracts enables them to enforce these security constraints.", @@ -62,6 +63,9 @@ "SOL_COV": "Solidity Coverage", "ETHEREUM_TYPES": "Ethereum Types", "SUBPROVIDERS": "Subproviders", + "CONTRACT_WRAPPERS": "Contract Wrappers", + "ORDER_WATCHER": "OrderWatcher", + "0X_JS": "0x.js", "BLOG": "blog", "FORUM": "forum", "CONNECT": "0x Connect", @@ -69,6 +73,7 @@ "WIKI": "wiki", "WEB3_WRAPPER": "Web3Wrapper", "ORDER_UTILS": "Order Utils", + "ASSET_BUYER": "AssetBuyer", "FAQ": "FAQ", "SMART_CONTRACTS": "0x smart contracts", "STANDARD_RELAYER_API": "standard relayer API", @@ -77,5 +82,31 @@ "DEVELOPERS": "developers", "HOME": "home", "ROCKETCHAT": "rocket.chat", - "TRADE_CALL_TO_ACTION": "trade on 0x" + "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.", + "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 c38de6677..5485e5583 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -13,7 +13,7 @@ "TRADITIONAL_ASSETS": "전통적 자산", "DIGITAL_GOODS": "디지털 상품", "OFFCHAIN_ORDER_RELAY": "오프체인 주문 릴레이", - "OONCHAIN_SETTLEMENT": "온체인 정산", + "ONCHAIN_SETTLEMENT": "온체인 정산", "OFFCHAIN_ONCHAIN_DESCRIPTION": "0x 프로토콜에서 주문은 오프체인으로 전달되므로, 가스 비용이 대폭 줄고 블록체인이 불필요하게 커지지 않습니다. Relayer는 주문을 브로드캐스팅할 수 있게 해 주고, 주문에서 거래가 진행될 때마다 수수료를 받을 수 있습니다. 누구든지 Relayer를 생성할 수 있습니다.", "RELAYERS_HEADER": "0x 기반 Relayer", @@ -61,6 +61,9 @@ "SOL_COV": "Solidity Coverage", "ETHEREUM_TYPES": "Ethereum Types", "SUBPROVIDERS": "Subproviders", + "CONTRACT_WRAPPERS": "Contract Wrappers", + "ORDER_WATCHER": "OrderWatcher", + "0X_JS": "0x.js", "BLOG": "블로그", "FORUM": "포럼", "CONNECT": "0x Connect", @@ -75,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 a7e06d646..a2e2a8cef 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -13,7 +13,7 @@ "TRADITIONAL_ASSETS": "Традиционные активы", "DIGITAL_GOODS": "Цифровые товары", "OFFCHAIN_ORDER_RELAY": "Офчейн-ордер", - "OONCHAIN_SETTLEMENT": "Ончейн-транзакция", + "ONCHAIN_SETTLEMENT": "Ончейн-транзакция", "OFFCHAIN_ONCHAIN_DESCRIPTION": "При использовании протокола 0x ордера проводятся вне блокчейна, что сокращает расходы на газ (топливо) и предотвращает раздувание блокчейна. Релейеры помогают провести ордера и берут комиссию каждый раз, когда способствуют торгам. Любой может создать релейера.", "RELAYERS_HEADER": "РЕЛЕЙЕРЫ, РАЗРАБОТАННЫЕ НА 0X", @@ -61,6 +61,9 @@ "SOL_COV": "Solidity Coverage", "ETHEREUM_TYPES": "Ethereum Types", "SUBPROVIDERS": "Subproviders", + "CONTRACT_WRAPPERS": "Contract Wrappers", + "ORDER_WATCHER": "OrderWatcher", + "0X_JS": "0x.js", "BLOG": "Блог", "FORUM": "Форум", "CONNECT": "0x Connect", @@ -75,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 5a8920f61..acbc59c3d 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -14,7 +14,7 @@ "TRADITIONAL_ASSETS": "activos tradicionales", "DIGITAL_GOODS": "bienes digitales", "OFFCHAIN_ORDER_RELAY": "orden retransmisión fuera de cadena", - "OONCHAIN_SETTLEMENT": "liquidación en cadena", + "ONCHAIN_SETTLEMENT": "liquidación en cadena", "OFFCHAIN_ONCHAIN_DESCRIPTION": "en el protocolo 0x, las órdenes se transportan fuera de la cadena, lo que reduce enormemente los costos de combustible y elimina el sobredimensionamiento de la cadena de bloques. Los transmisores ayudan a emitir órdenes y a cobrar un cargo cada vez que facilitan un intercambio. Cualquier persona puede crear un transmisor.", "RELAYERS_HEADER": "transmisores creados en 0x", @@ -62,6 +62,9 @@ "SOL_COV": "Solidity Coverage", "ETHEREUM_TYPES": "Ethereum Types", "SUBPROVIDERS": "Subproviders", + "CONTRACT_WRAPPERS": "Contract Wrappers", + "ORDER_WATCHER": "OrderWatcher", + "0X_JS": "0x.js", "BLOG": "blog", "FORUM": "foro", "CONNECT": "0x Connect", @@ -76,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/artifacts/Exchange.json b/packages/website/ts/artifacts/Exchange.json deleted file mode 100644 index af8db7360..000000000 --- a/packages/website/ts/artifacts/Exchange.json +++ /dev/null @@ -1,610 +0,0 @@ -{ - "contract_name": "Exchange", - "abi": [ - { - "constant": true, - "inputs": [ - { - "name": "numerator", - "type": "uint256" - }, - { - "name": "denominator", - "type": "uint256" - }, - { - "name": "target", - "type": "uint256" - } - ], - "name": "isRoundingError", - "outputs": [ - { - "name": "", - "type": "bool" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "", - "type": "bytes32" - } - ], - "name": "filled", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "", - "type": "bytes32" - } - ], - "name": "cancelled", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "fillTakerTokenAmount", - "type": "uint256" - }, - { - "name": "shouldThrowOnInsufficientBalanceOrAllowance", - "type": "bool" - }, - { - "name": "v", - "type": "uint8[]" - }, - { - "name": "r", - "type": "bytes32[]" - }, - { - "name": "s", - "type": "bytes32[]" - } - ], - "name": "fillOrdersUpTo", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - }, - { - "name": "cancelTakerTokenAmount", - "type": "uint256" - } - ], - "name": "cancelOrder", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "ZRX_TOKEN_CONTRACT", - "outputs": [ - { - "name": "", - "type": "address" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "fillTakerTokenAmounts", - "type": "uint256[]" - }, - { - "name": "v", - "type": "uint8[]" - }, - { - "name": "r", - "type": "bytes32[]" - }, - { - "name": "s", - "type": "bytes32[]" - } - ], - "name": "batchFillOrKillOrders", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - }, - { - "name": "fillTakerTokenAmount", - "type": "uint256" - }, - { - "name": "v", - "type": "uint8" - }, - { - "name": "r", - "type": "bytes32" - }, - { - "name": "s", - "type": "bytes32" - } - ], - "name": "fillOrKillOrder", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "getUnavailableTakerTokenAmount", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "signer", - "type": "address" - }, - { - "name": "hash", - "type": "bytes32" - }, - { - "name": "v", - "type": "uint8" - }, - { - "name": "r", - "type": "bytes32" - }, - { - "name": "s", - "type": "bytes32" - } - ], - "name": "isValidSignature", - "outputs": [ - { - "name": "", - "type": "bool" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "numerator", - "type": "uint256" - }, - { - "name": "denominator", - "type": "uint256" - }, - { - "name": "target", - "type": "uint256" - } - ], - "name": "getPartialAmount", - "outputs": [ - { - "name": "", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "TOKEN_TRANSFER_PROXY_CONTRACT", - "outputs": [ - { - "name": "", - "type": "address" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "fillTakerTokenAmounts", - "type": "uint256[]" - }, - { - "name": "shouldThrowOnInsufficientBalanceOrAllowance", - "type": "bool" - }, - { - "name": "v", - "type": "uint8[]" - }, - { - "name": "r", - "type": "bytes32[]" - }, - { - "name": "s", - "type": "bytes32[]" - } - ], - "name": "batchFillOrders", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5][]" - }, - { - "name": "orderValues", - "type": "uint256[6][]" - }, - { - "name": "cancelTakerTokenAmounts", - "type": "uint256[]" - } - ], - "name": "batchCancelOrders", - "outputs": [], - "payable": false, - "type": "function" - }, - { - "constant": false, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - }, - { - "name": "fillTakerTokenAmount", - "type": "uint256" - }, - { - "name": "shouldThrowOnInsufficientBalanceOrAllowance", - "type": "bool" - }, - { - "name": "v", - "type": "uint8" - }, - { - "name": "r", - "type": "bytes32" - }, - { - "name": "s", - "type": "bytes32" - } - ], - "name": "fillOrder", - "outputs": [ - { - "name": "filledTakerTokenAmount", - "type": "uint256" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [ - { - "name": "orderAddresses", - "type": "address[5]" - }, - { - "name": "orderValues", - "type": "uint256[6]" - } - ], - "name": "getOrderHash", - "outputs": [ - { - "name": "", - "type": "bytes32" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "EXTERNAL_QUERY_GAS_LIMIT", - "outputs": [ - { - "name": "", - "type": "uint16" - } - ], - "payable": false, - "type": "function" - }, - { - "constant": true, - "inputs": [], - "name": "VERSION", - "outputs": [ - { - "name": "", - "type": "string" - } - ], - "payable": false, - "type": "function" - }, - { - "inputs": [ - { - "name": "_zrxToken", - "type": "address" - }, - { - "name": "_tokenTransferProxy", - "type": "address" - } - ], - "payable": false, - "type": "constructor" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "name": "maker", - "type": "address" - }, - { - "indexed": false, - "name": "taker", - "type": "address" - }, - { - "indexed": true, - "name": "feeRecipient", - "type": "address" - }, - { - "indexed": false, - "name": "makerToken", - "type": "address" - }, - { - "indexed": false, - "name": "takerToken", - "type": "address" - }, - { - "indexed": false, - "name": "filledMakerTokenAmount", - "type": "uint256" - }, - { - "indexed": false, - "name": "filledTakerTokenAmount", - "type": "uint256" - }, - { - "indexed": false, - "name": "paidMakerFee", - "type": "uint256" - }, - { - "indexed": false, - "name": "paidTakerFee", - "type": "uint256" - }, - { - "indexed": true, - "name": "tokens", - "type": "bytes32" - }, - { - "indexed": false, - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "LogFill", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "name": "maker", - "type": "address" - }, - { - "indexed": true, - "name": "feeRecipient", - "type": "address" - }, - { - "indexed": false, - "name": "makerToken", - "type": "address" - }, - { - "indexed": false, - "name": "takerToken", - "type": "address" - }, - { - "indexed": false, - "name": "cancelledMakerTokenAmount", - "type": "uint256" - }, - { - "indexed": false, - "name": "cancelledTakerTokenAmount", - "type": "uint256" - }, - { - "indexed": true, - "name": "tokens", - "type": "bytes32" - }, - { - "indexed": false, - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "LogCancel", - "type": "event" - }, - { - "anonymous": false, - "inputs": [ - { - "indexed": true, - "name": "errorId", - "type": "uint8" - }, - { - "indexed": true, - "name": "orderHash", - "type": "bytes32" - } - ], - "name": "LogError", - "type": "event" - } - ], - "networks": { - "1": { - "address": "0x12459c951127e0c374ff9105dda097662a027093" - }, - "3": { - "address": "0x479cc461fecd078f766ecc58533d6f69580cf3ac" - }, - "4": { - "address": "0x1d16ef40fac01cec8adac2ac49427b9384192c05" - }, - "42": { - "address": "0x90fe2af704b34e0224bf2299c838e04d4dcf1364" - }, - "50": { - "address": "0x48bacb9266a570d521063ef5dd96e61686dbe788" - } - } -} diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 45994be5f..b43c41739 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -2,34 +2,27 @@ import { BlockRange, ContractWrappers, DecodedLogEvent, - ExchangeContractEventArgs, + ExchangeCancelEventArgs, + ExchangeEventArgs, ExchangeEvents, + ExchangeFillEventArgs, IndexedFilterValues, - LogCancelContractEventArgs, - LogFillContractEventArgs, - Token as ZeroExToken, -} from '@0xproject/contract-wrappers'; -import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils'; -import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +} from '@0x/contract-wrappers'; +import { assetDataUtils, orderHashUtils, signatureUtils } from '@0x/order-utils'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import { ledgerEthereumBrowserClientFactoryAsync, LedgerSubprovider, + MetamaskSubprovider, RedundantSubprovider, RPCSubprovider, SignerSubprovider, Web3ProviderEngine, -} from '@0xproject/subproviders'; -import { - BlockParam, - ECSignature, - LogWithDecodedArgs, - Order, - Provider, - SignedOrder, - TransactionReceiptWithDecodedLogs, -} from '@0xproject/types'; -import { BigNumber, intervalUtils, logUtils, promisify } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +} from '@0x/subproviders'; +import { SignedOrder, Token as ZeroExToken } from '@0x/types'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; +import { BlockParam, LogWithDecodedArgs, Provider, TransactionReceiptWithDecodedLogs } from 'ethereum-types'; import * as _ from 'lodash'; import * as moment from 'moment'; import * as React from 'react'; @@ -45,10 +38,9 @@ import { BlockchainErrs, ContractInstance, Fill, + InjectedProvider, InjectedProviderObservable, InjectedProviderUpdate, - InjectedWeb3, - Order as PortalOrder, Providers, ProviderType, Side, @@ -60,14 +52,13 @@ import { backendClient } from 'ts/utils/backend_client'; import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { fakeTokenRegistry } from 'ts/utils/fake_token_registry'; +import { tokenAddressOverrides } from 'ts/utils/token_address_overrides'; import { utils } from 'ts/utils/utils'; import FilterSubprovider = require('web3-provider-engine/subproviders/filters'); import * as MintableArtifacts from '../contracts/Mintable.json'; -// HACK: remove this hard-coded abi and use @0xproject/contract-wrappers -import * as Exchange from './artifacts/Exchange.json'; - const BLOCK_NUMBER_BACK_TRACK = 50; const GWEI_IN_WEI = 1000000000; @@ -75,7 +66,7 @@ const providerToName: { [provider: string]: string } = { [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK, [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER, [Providers.Mist]: constants.PROVIDER_NAME_MIST, - [Providers.Toshi]: constants.PROVIDER_NAME_TOSHI, + [Providers.CoinbaseWallet]: constants.PROVIDER_NAME_COINBASE_WALLET, [Providers.Cipher]: constants.PROVIDER_NAME_CIPHER, }; @@ -92,6 +83,7 @@ export class Blockchain { private _ledgerSubprovider: LedgerSubprovider; private _defaultGasPrice: BigNumber; private _watchGasPriceIntervalId: NodeJS.Timer; + private _injectedProviderIfExists?: InjectedProvider; private static _getNameGivenProvider(provider: Provider): string { const providerType = utils.getProviderType(provider); const providerNameIfExists = providerToName[providerType]; @@ -100,48 +92,12 @@ export class Blockchain { } return providerNameIfExists; } - private static _getInjectedWeb3(): InjectedWeb3 { - const injectedWeb3IfExists = (window as any).web3; - // Our core assumptions about the injected web3 object is that it has the following - // properties and methods. - if ( - _.isUndefined(injectedWeb3IfExists) || - _.isUndefined(injectedWeb3IfExists.version) || - _.isUndefined(injectedWeb3IfExists.version.getNetwork) || - _.isUndefined(injectedWeb3IfExists.currentProvider) - ) { - return undefined; - } - return injectedWeb3IfExists; - } - private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise<number | undefined> { - // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in - // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot - // retrieve it from within the web3Wrapper constructor. This is and should remain the only - // call to a web3 instance outside of web3Wrapper in the entire dapp. - // In addition, if the user has an injectedWeb3 instance that is disconnected from a backing - // Ethereum node, this call will throw. We need to handle this case gracefully - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - let networkIdIfExists: number; - if (!_.isUndefined(injectedWeb3IfExists)) { - try { - networkIdIfExists = _.parseInt( - await promisify<string>( - injectedWeb3IfExists.version.getNetwork.bind(injectedWeb3IfExists.version), - )(), - ); - } catch (err) { - // Ignore error and proceed with networkId undefined - } - } - return networkIdIfExists; - } private static async _getProviderAsync( - injectedWeb3: InjectedWeb3, - networkIdIfExists: number, + injectedProviderIfExists?: InjectedProvider, + networkIdIfExists?: number, shouldUserLedgerProvider: boolean = false, ): Promise<[Provider, LedgerSubprovider | undefined]> { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3); + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); const isNetworkIdAvailable = !_.isUndefined(networkIdIfExists); const publicNodeUrlsIfExistsForNetworkId = configs.PUBLIC_NODE_URLS_BY_NETWORK_ID[networkIdIfExists]; const isPublicNodeAvailableForNetworkId = !_.isUndefined(publicNodeUrlsIfExistsForNetworkId); @@ -165,11 +121,17 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, ledgerSubprovider]; - } else if (doesInjectedWeb3Exist && isPublicNodeAvailableForNetworkId) { + } else if (doesInjectedProviderExist && isPublicNodeAvailableForNetworkId) { // We catch all requests involving a users account and send it to the injectedWeb3 // instance. All other requests go to the public hosted node. const provider = new Web3ProviderEngine(); - provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider)); + const providerName = this._getNameGivenProvider(injectedProviderIfExists); + // Wrap Metamask in a compatability wrapper MetamaskSubprovider (to handle inconsistencies) + const signerSubprovider = + providerName === constants.PROVIDER_NAME_METAMASK + ? new MetamaskSubprovider(injectedProviderIfExists) + : new SignerSubprovider(injectedProviderIfExists); + provider.addProvider(signerSubprovider); provider.addProvider(new FilterSubprovider()); const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => { return new RPCSubprovider(publicNodeUrl); @@ -177,9 +139,9 @@ export class Blockchain { provider.addProvider(new RedundantSubprovider(rpcSubproviders)); provider.start(); return [provider, undefined]; - } else if (doesInjectedWeb3Exist) { + } else if (doesInjectedProviderExist) { // Since no public node for this network, all requests go to injectedWeb3 instance - return [injectedWeb3.currentProvider, undefined]; + return [injectedProviderIfExists, undefined]; } else { // If no injectedWeb3 instance, all requests fallback to our public hosted mainnet/testnet node // We do this so that users can still browse the 0x Portal DApp even if they do not have web3 @@ -230,9 +192,16 @@ export class Blockchain { } } public async isAddressInTokenRegistryAsync(tokenAddress: string): Promise<boolean> { - utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); - const tokenIfExists = await this._contractWrappers.tokenRegistry.getTokenIfExistsAsync(tokenAddress); - return !_.isUndefined(tokenIfExists); + const tokens = fakeTokenRegistry[this.networkId]; + const tokenIfExists = _.find(tokens, { address: tokenAddress }); + + // HACK: Override token addresses on testnets + const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId]; + let isTokenAddressInOverrides = false; + if (!_.isUndefined(tokenSymbolToAddressOverrides)) { + isTokenAddressInOverrides = _.values(tokenSymbolToAddressOverrides).includes(tokenAddress); + } + return !_.isUndefined(tokenIfExists) || isTokenAddressInOverrides; } public getLedgerDerivationPathIfExists(): string { if (_.isUndefined(this._ledgerSubprovider)) { @@ -257,7 +226,7 @@ export class Blockchain { const shouldUserLedgerProvider = false; this._dispatcher.updateBlockchainIsLoaded(false); // We don't want to be out of sync with the network the injected provider declares. - const networkId = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkId = await this._getInjectedProviderNetworkIdIfExistsAsync(); await this._resetOrInitializeAsync(networkId, shouldPollUserAddress, shouldUserLedgerProvider); } public async setProxyAllowanceAsync(token: Token, amountInBaseUnits: BigNumber): Promise<void> { @@ -266,7 +235,7 @@ export class Blockchain { utils.assert(!_.isUndefined(this._contractWrappers), 'Contract Wrappers must be instantiated.'); this._showFlashMessageIfLedger(); - const txHash = await this._contractWrappers.token.setProxyAllowanceAsync( + const txHash = await this._contractWrappers.erc20Token.setProxyAllowanceAsync( token.address, this._userAddressIfExists, amountInBaseUnits, @@ -307,7 +276,7 @@ export class Blockchain { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); this._showFlashMessageIfLedger(); - const txHash = await this._contractWrappers.token.transferAsync( + const txHash = await this._contractWrappers.erc20Token.transferAsync( token.address, this._userAddressIfExists, toAddress, @@ -332,70 +301,45 @@ export class Blockchain { }), ); } - public portalOrderToZeroExOrder(portalOrder: PortalOrder): SignedOrder { - const exchangeContractAddress = this.getExchangeContractAddressIfExists(); - const zeroExSignedOrder = { - exchangeContractAddress, - maker: portalOrder.signedOrder.maker, - taker: portalOrder.signedOrder.taker, - makerTokenAddress: portalOrder.signedOrder.makerTokenAddress, - takerTokenAddress: portalOrder.signedOrder.takerTokenAddress, - makerTokenAmount: new BigNumber(portalOrder.signedOrder.makerTokenAmount), - takerTokenAmount: new BigNumber(portalOrder.signedOrder.takerTokenAmount), - makerFee: new BigNumber(portalOrder.signedOrder.makerFee), - takerFee: new BigNumber(portalOrder.signedOrder.takerFee), - expirationUnixTimestampSec: new BigNumber(portalOrder.signedOrder.expirationUnixTimestampSec), - feeRecipient: portalOrder.signedOrder.feeRecipient, - ecSignature: portalOrder.signedOrder.ecSignature, - salt: new BigNumber(portalOrder.signedOrder.salt), - }; - return zeroExSignedOrder; - } public async fillOrderAsync(signedOrder: SignedOrder, fillTakerTokenAmount: BigNumber): Promise<BigNumber> { utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); - - const shouldThrowOnInsufficientBalanceOrAllowance = true; - this._showFlashMessageIfLedger(); const txHash = await this._contractWrappers.exchange.fillOrderAsync( signedOrder, fillTakerTokenAmount, - shouldThrowOnInsufficientBalanceOrAllowance, this._userAddressIfExists, { gasPrice: this._defaultGasPrice, }, ); const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); - const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any; - this._contractWrappers.exchange.throwLogErrorsAsErrors(logs); - const logFill = _.find(logs, { event: 'LogFill' }); - const args = (logFill.args as any) as LogFillContractEventArgs; - const filledTakerTokenAmount = args.filledTakerTokenAmount; - return filledTakerTokenAmount; - } - public async cancelOrderAsync(signedOrder: SignedOrder, cancelTakerTokenAmount: BigNumber): Promise<BigNumber> { + const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any; + const logFill = _.find(logs, { event: ExchangeEvents.Fill }); + const args = (logFill.args as any) as ExchangeFillEventArgs; + const takerAssetFilledAmount = args.takerAssetFilledAmount; + return takerAssetFilledAmount; + } + public async cancelOrderAsync(signedOrder: SignedOrder): Promise<string> { this._showFlashMessageIfLedger(); - const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, cancelTakerTokenAmount, { + const txHash = await this._contractWrappers.exchange.cancelOrderAsync(signedOrder, { gasPrice: this._defaultGasPrice, }); const receipt = await this._showEtherScanLinkAndAwaitTransactionMinedAsync(txHash); - const logs: Array<LogWithDecodedArgs<ExchangeContractEventArgs>> = receipt.logs as any; - this._contractWrappers.exchange.throwLogErrorsAsErrors(logs); - const logCancel = _.find(logs, { event: ExchangeEvents.LogCancel }); - const args = (logCancel.args as any) as LogCancelContractEventArgs; - const cancelledTakerTokenAmount = args.cancelledTakerTokenAmount; - return cancelledTakerTokenAmount; + const logs: Array<LogWithDecodedArgs<ExchangeEventArgs>> = receipt.logs as any; + const logCancel = _.find(logs, { event: ExchangeEvents.Cancel }); + const args = (logCancel.args as any) as ExchangeCancelEventArgs; + const cancelledOrderHash = args.orderHash; + return cancelledOrderHash; } public async getUnavailableTakerAmountAsync(orderHash: string): Promise<BigNumber> { - utils.assert(isValidOrderHash(orderHash), 'Must be valid orderHash'); + utils.assert(orderHashUtils.isValidOrderHash(orderHash), 'Must be valid orderHash'); utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); - const unavailableTakerAmount = await this._contractWrappers.exchange.getUnavailableTakerAmountAsync(orderHash); + const unavailableTakerAmount = await this._contractWrappers.exchange.getFilledTakerAssetAmountAsync(orderHash); return unavailableTakerAmount; } public getExchangeContractAddressIfExists(): string | undefined { - return this._contractWrappers.exchange.getContractAddress(); + return this._contractWrappers.exchange.address; } public async validateFillOrderThrowIfInvalidAsync( signedOrder: SignedOrder, @@ -408,16 +352,19 @@ export class Blockchain { takerAddress, ); } - public async validateCancelOrderThrowIfInvalidAsync( - order: Order, - cancelTakerTokenAmount: BigNumber, - ): Promise<void> { - await this._contractWrappers.exchange.validateCancelOrderThrowIfInvalidAsync(order, cancelTakerTokenAmount); - } public isValidAddress(address: string): boolean { const lowercaseAddress = address.toLowerCase(); return Web3Wrapper.isAddress(lowercaseAddress); } + public async isValidSignatureAsync(data: string, signature: string, signerAddress: string): Promise<boolean> { + const result = await signatureUtils.isValidSignatureAsync( + this._contractWrappers.getProvider(), + data, + signature, + signerAddress, + ); + return result; + } public async pollTokenBalanceAsync(token: Token): Promise<BigNumber> { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); @@ -446,7 +393,7 @@ export class Blockchain { return newTokenBalancePromise; } - public async signOrderHashAsync(orderHash: string): Promise<ECSignature> { + public async signOrderHashAsync(orderHash: string): Promise<string> { utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); const makerAddress = this._userAddressIfExists; // If makerAddress is undefined, this means they have a web3 instance injected into their browser @@ -454,20 +401,11 @@ export class Blockchain { if (_.isUndefined(makerAddress)) { throw new Error('Tried to send a sign request but user has no associated addresses'); } - this._showFlashMessageIfLedger(); - const nodeVersion = await this._web3Wrapper.getNodeVersionAsync(); - const isParityNode = utils.isParityNode(nodeVersion); - const isTestRpc = utils.isTestRpc(nodeVersion); - const isLedgerSigner = !_.isUndefined(this._ledgerSubprovider); - let shouldAddPersonalMessagePrefix = true; - if ((isParityNode && !isLedgerSigner) || isTestRpc || isLedgerSigner) { - shouldAddPersonalMessagePrefix = false; - } const provider = this._contractWrappers.getProvider(); - const ecSignature = await signOrderHashAsync(provider, orderHash, makerAddress, shouldAddPersonalMessagePrefix); - this._dispatcher.updateECSignature(ecSignature); - return ecSignature; + const ecSignatureString = await signatureUtils.ecSignHashAsync(provider, orderHash, makerAddress); + this._dispatcher.updateSignature(ecSignatureString); + return ecSignatureString; } public async mintTestTokensAsync(token: Token): Promise<void> { utils.assert(this._doesUserAddressExist(), BlockchainCallErrs.UserHasNoAssociatedAddresses); @@ -540,8 +478,8 @@ export class Blockchain { let allowance = new BigNumber(0); if (this._doesUserAddressExist()) { [balance, allowance] = await Promise.all([ - this._contractWrappers.token.getBalanceAsync(tokenAddress, ownerAddressIfExists), - this._contractWrappers.token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists), + this._contractWrappers.erc20Token.getBalanceAsync(tokenAddress, ownerAddressIfExists), + this._contractWrappers.erc20Token.getProxyAllowanceAsync(tokenAddress, ownerAddressIfExists), ]); } return [balance, allowance]; @@ -638,6 +576,45 @@ export class Blockchain { this._dispatcher.updateBlockchainIsLoaded(true); } + private async _getInjectedProviderIfExistsAsync(): Promise<InjectedProvider | undefined> { + if (!_.isUndefined(this._injectedProviderIfExists)) { + return this._injectedProviderIfExists; + } + let injectedProviderIfExists = (window as any).ethereum; + if (!_.isUndefined(injectedProviderIfExists)) { + if (!_.isUndefined(injectedProviderIfExists.enable)) { + try { + await injectedProviderIfExists.enable(); + } catch (err) { + errorReporter.report(err); + } + } + } else { + const injectedWeb3IfExists = (window as any).web3; + if (!_.isUndefined(injectedWeb3IfExists.currentProvider)) { + injectedProviderIfExists = injectedWeb3IfExists.currentProvider; + } else { + return undefined; + } + } + this._injectedProviderIfExists = injectedProviderIfExists; + return injectedProviderIfExists; + } + private async _getInjectedProviderNetworkIdIfExistsAsync(): Promise<number | undefined> { + // If the user has an injectedWeb3 instance that is disconnected from a backing + // Ethereum node, this call will throw. We need to handle this case gracefully + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + let networkIdIfExists: number; + if (!_.isUndefined(injectedProviderIfExists)) { + try { + const injectedWeb3Wrapper = new Web3Wrapper(injectedProviderIfExists); + networkIdIfExists = await injectedWeb3Wrapper.getNetworkIdAsync(); + } catch (err) { + // Ignore error and proceed with networkId undefined + } + } + return networkIdIfExists; + } private async _showEtherScanLinkAndAwaitTransactionMinedAsync( txHash: string, ): Promise<TransactionReceiptWithDecodedLogs> { @@ -653,8 +630,7 @@ export class Blockchain { ); const provider = this._contractWrappers.getProvider(); const web3Wrapper = new Web3Wrapper(provider); - // HACK: remove this hard-coded abi and use @0xproject/contract-wrappers - const exchangeAbi = _.get(Exchange, 'abi', []); + const exchangeAbi = this._contractWrappers.exchange.abi; web3Wrapper.abiDecoder.addABI(exchangeAbi); const receipt = await web3Wrapper.awaitTransactionSuccessAsync(txHash); return receipt; @@ -699,9 +675,9 @@ export class Blockchain { // Start a subscription for new logs this._contractWrappers.exchange.subscribe( - ExchangeEvents.LogFill, + ExchangeEvents.Fill, indexFilterValues, - async (err: Error, decodedLogEvent: DecodedLogEvent<LogFillContractEventArgs>) => { + async (err: Error, decodedLogEvent: DecodedLogEvent<ExchangeFillEventArgs>) => { if (err) { // Note: it's not entirely clear from the documentation which // errors will be thrown by `watch`. For now, let's log the error @@ -732,8 +708,8 @@ export class Blockchain { fromBlock, toBlock: 'latest' as BlockParam, }; - const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<LogFillContractEventArgs>( - ExchangeEvents.LogFill, + const decodedLogs = await this._contractWrappers.exchange.getLogsAsync<ExchangeFillEventArgs>( + ExchangeEvents.Fill, blockRange, indexFilterValues, ); @@ -746,28 +722,28 @@ export class Blockchain { tradeHistoryStorage.addFillToUser(this._userAddressIfExists, this.networkId, fill); } } - private async _convertDecodedLogToFillAsync( - decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>, - ): Promise<Fill> { + private async _convertDecodedLogToFillAsync(decodedLog: LogWithDecodedArgs<ExchangeFillEventArgs>): Promise<Fill> { const args = decodedLog.args; const blockTimestamp = await this._web3Wrapper.getBlockTimestampAsync(decodedLog.blockHash); + const makerToken = assetDataUtils.decodeERC20AssetData(args.makerAssetData).tokenAddress; + const takerToken = assetDataUtils.decodeERC20AssetData(args.takerAssetData).tokenAddress; const fill = { - filledTakerTokenAmount: args.filledTakerTokenAmount, - filledMakerTokenAmount: args.filledMakerTokenAmount, + filledTakerTokenAmount: args.takerAssetFilledAmount, + filledMakerTokenAmount: args.makerAssetFilledAmount, logIndex: decodedLog.logIndex, - maker: args.maker, + maker: args.makerAddress, orderHash: args.orderHash, - taker: args.taker, - makerToken: args.makerToken, - takerToken: args.takerToken, - paidMakerFee: args.paidMakerFee, - paidTakerFee: args.paidTakerFee, + taker: args.takerAddress, + makerToken, + takerToken, + paidMakerFee: args.makerFeePaid, + paidTakerFee: args.takerFeePaid, transactionHash: decodedLog.transactionHash, blockTimestamp, }; return fill; } - private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<LogFillContractEventArgs>): boolean { + private _doesLogEventInvolveUser(decodedLog: LogWithDecodedArgs<ExchangeFillEventArgs>): boolean { const args = decodedLog.args; const isUserMakerOrTaker = args.maker === this._userAddressIfExists || args.taker === this._userAddressIfExists; return isUserMakerOrTaker; @@ -796,8 +772,21 @@ export class Blockchain { if (this.networkId === constants.NETWORK_ID_MAINNET) { tokenRegistryTokens = await backendClient.getTokenInfosAsync(); } else { - utils.assert(!_.isUndefined(this._contractWrappers), 'ContractWrappers must be instantiated.'); - tokenRegistryTokens = await this._contractWrappers.tokenRegistry.getTokensAsync(); + tokenRegistryTokens = fakeTokenRegistry[this.networkId]; + const tokenSymbolToAddressOverrides = tokenAddressOverrides[this.networkId]; + if (!_.isUndefined(tokenAddressOverrides)) { + // HACK: Override token addresses on testnets + tokenRegistryTokens = _.map(tokenRegistryTokens, (token: ZeroExToken) => { + const overrideIfExists = tokenSymbolToAddressOverrides[token.symbol]; + if (!_.isUndefined(overrideIfExists)) { + return { + ...token, + address: overrideIfExists, + }; + } + return token; + }); + } } const tokenByAddress: TokenByAddress = {}; _.each(tokenRegistryTokens, (t: ZeroExToken) => { @@ -819,17 +808,17 @@ export class Blockchain { } private async _onPageLoadInitFireAndForgetAsync(): Promise<void> { await utils.onPageLoadPromise; // wait for page to load - const networkIdIfExists = await Blockchain._getInjectedWeb3ProviderNetworkIdIfExistsAsync(); + const networkIdIfExists = await this._getInjectedProviderNetworkIdIfExistsAsync(); this.networkId = !_.isUndefined(networkIdIfExists) ? networkIdIfExists : constants.NETWORK_ID_MAINNET; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); - if (!_.isUndefined(injectedWeb3IfExists) && !_.isUndefined(injectedWeb3IfExists.currentProvider)) { - const injectedProviderObservable = injectedWeb3IfExists.currentProvider.publicConfigStore; + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); + if (!_.isUndefined(injectedProviderIfExists)) { + const injectedProviderObservable = injectedProviderIfExists.publicConfigStore; if (!_.isUndefined(injectedProviderObservable) && _.isUndefined(this._injectedProviderObservable)) { this._injectedProviderObservable = injectedProviderObservable; this._injectedProviderObservable.subscribe(this._injectedProviderUpdateHandler); } } - this._updateProviderName(injectedWeb3IfExists); + this._updateProviderName(injectedProviderIfExists); const shouldPollUserAddress = true; const shouldUseLedgerProvider = false; this._startWatchingGasPrice(); @@ -866,21 +855,24 @@ export class Blockchain { } this._dispatcher.updateUserWeiBalance(undefined); this.networkId = networkId; - const injectedWeb3IfExists = Blockchain._getInjectedWeb3(); + const injectedProviderIfExists = await this._getInjectedProviderIfExistsAsync(); const [provider, ledgerSubproviderIfExists] = await Blockchain._getProviderAsync( - injectedWeb3IfExists, + injectedProviderIfExists, networkId, shouldUserLedgerProvider, ); + this._web3Wrapper = new Web3Wrapper(provider); + this.networkId = await this._web3Wrapper.getNetworkIdAsync(); if (!_.isUndefined(this._contractWrappers)) { - this._contractWrappers.setProvider(provider, networkId); - } else { - this._contractWrappers = new ContractWrappers(provider, { networkId }); + this._contractWrappers.unsubscribeAll(); } + const contractWrappersConfig = { + networkId, + }; + this._contractWrappers = new ContractWrappers(provider, contractWrappersConfig); if (!_.isUndefined(this._blockchainWatcher)) { this._blockchainWatcher.destroy(); } - this._web3Wrapper = new Web3Wrapper(provider); this._blockchainWatcher = new BlockchainWatcher(this._dispatcher, this._web3Wrapper, shouldPollUserAddress); if (shouldUserLedgerProvider && !_.isUndefined(ledgerSubproviderIfExists)) { delete this._userAddressIfExists; @@ -892,7 +884,7 @@ export class Blockchain { const userAddresses = await this._web3Wrapper.getAvailableAddressesAsync(); this._userAddressIfExists = userAddresses[0]; this._dispatcher.updateUserAddress(this._userAddressIfExists); - if (!_.isUndefined(injectedWeb3IfExists)) { + if (!_.isUndefined(injectedProviderIfExists)) { this._dispatcher.updateProviderType(ProviderType.Injected); } await this.fetchTokenInformationAsync(); @@ -901,10 +893,10 @@ export class Blockchain { this._dispatcher.updateNetworkId(networkId); await this._rehydrateStoreWithContractEventsAsync(); } - private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void { - const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists); - const providerName = doesInjectedWeb3Exist - ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider) + private _updateProviderName(injectedProviderIfExists?: InjectedProvider): void { + const doesInjectedProviderExist = !_.isUndefined(injectedProviderIfExists); + const providerName = doesInjectedProviderExist + ? Blockchain._getNameGivenProvider(injectedProviderIfExists) : constants.PROVIDER_NAME_PUBLIC; this._dispatcher.updateInjectedProviderName(providerName); } diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts index 39ed8b08b..835932dcd 100644 --- a/packages/website/ts/blockchain_watcher.ts +++ b/packages/website/ts/blockchain_watcher.ts @@ -1,5 +1,5 @@ -import { BigNumber, intervalUtils, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber, intervalUtils, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx index c8e10303f..a0114d898 100644 --- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx +++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx @@ -1,4 +1,4 @@ -import { colors, Networks } from '@0xproject/react-shared'; +import { colors, Networks } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -22,7 +22,7 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp key="blockchainErrOk" label="Ok" primary={true} - onTouchTap={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} + onClick={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)} />, ]; diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index 5f4bf8519..9b9421f1a 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -54,8 +54,8 @@ export class EthWethConversionDialog extends React.Component< } public render(): React.ReactNode { const convertDialogActions = [ - <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, - <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />, + <FlatButton key="cancel" label="Cancel" onClick={this._onCancel.bind(this)} />, + <FlatButton key="convert" label="Convert" primary={true} onClick={this._onConvertClick.bind(this)} />, ]; const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; return !_.isUndefined(this.props.etherBalanceInWei) ? ( diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx index d2f373d67..a9f591150 100644 --- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx +++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx @@ -1,6 +1,6 @@ -import { colors, constants as sharedConstants } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, constants as sharedConstants } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -64,7 +64,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps, } public render(): React.ReactNode { const dialogActions = [ - <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />, + <FlatButton key="ledgerConnectCancel" label="Cancel" onClick={this._onClose.bind(this)} />, ]; const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address'; diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx index 41a17fe96..326df2a8c 100644 --- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx +++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -13,7 +13,7 @@ export const PortalDisclaimerDialog = (props: PortalDisclaimerDialogProps) => { <Dialog title="0x Portal Disclaimer" titleStyle={{ fontWeight: 100 }} - actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]} + actions={[<FlatButton key="portalAgree" label="I Agree" onClick={props.onToggleDialog} />]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx index c1179dbd0..5f6927cef 100644 --- a/packages/website/ts/components/dialogs/send_dialog.tsx +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; @@ -38,13 +38,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState } public render(): React.ReactNode { const transferDialogActions = [ - <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, + <FlatButton key="cancelTransfer" label="Cancel" onClick={this._onCancel.bind(this)} />, <FlatButton key="sendTransfer" disabled={this._hasErrors()} label="Send" primary={true} - onTouchTap={this._onSendClick.bind(this)} + onClick={this._onSendClick.bind(this)} />, ]; return ( diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx index 3751ce06f..c8d5af6b6 100644 --- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx +++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx @@ -43,12 +43,12 @@ export class TrackTokenConfirmationDialog extends React.Component< <FlatButton key="trackNo" label="No" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)} />, <FlatButton key="trackYes" label="Yes" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)} />, ]} open={this.props.isOpen} diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx index 3ebab03ef..bbec1d649 100644 --- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx +++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -14,7 +14,7 @@ export const U2fNotSupportedDialog = (props: U2fNotSupportedDialogProps) => { <Dialog title="U2F Not Supported" titleStyle={{ fontWeight: 100 }} - actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog} />]} + actions={[<FlatButton key="u2fNo" label="Ok" onClick={props.onToggleDialog} />]} open={props.isOpen} onRequestClose={props.onToggleDialog} autoScrollBodyContent={true} diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx index 78b270c1e..cf2c4dda5 100644 --- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx +++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx @@ -14,7 +14,7 @@ export const WrappedEthSectionNoticeDialog = (props: WrappedEthSectionNoticeDial title="Dedicated Wrapped Ether Section" titleStyle={{ fontWeight: 100 }} actions={[ - <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />, + <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onClick={props.onToggleDialog} />, ]} open={props.isOpen} onRequestClose={props.onToggleDialog} diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx new file mode 100644 index 000000000..2840d5960 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_logo.tsx @@ -0,0 +1,20 @@ +import { Link } from '@0x/react-shared'; +import * as React from 'react'; +import { WebsitePaths } from 'ts/types'; + +export interface DocsLogoProps { + height: number; + containerStyle?: React.CSSProperties; +} + +export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => { + return ( + <Link to={WebsitePaths.Docs}> + <img src="/images/docs_logo.svg" height={props.height} /> + </Link> + ); +}; + +DocsLogo.defaultProps = { + containerStyle: {}, +}; diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx new file mode 100644 index 000000000..2054d0860 --- /dev/null +++ b/packages/website/ts/components/documentation/docs_top_bar.tsx @@ -0,0 +1,108 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import Drawer from 'material-ui/Drawer'; +import * as React from 'react'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, ScreenWidths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +export interface DocsTopBarProps { + location: Location; + screenWidth: ScreenWidths; + translate: Translate; + sidebar?: React.ReactNode; +} + +interface DocsTopBarState { + isDrawerOpen: boolean; +} + +export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> { + constructor(props: DocsTopBarProps) { + super(props); + this.state = { + isDrawerOpen: false, + }; + } + public componentWillReceiveProps(nextProps: DocsTopBarProps): void { + if (nextProps.location.pathname !== this.props.location.pathname) { + this.setState({ + isDrawerOpen: false, + }); + } + } + public render(): React.ReactNode { + return ( + <Container height={80}> + <Container + className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start" + width="100%" + > + <Container className="sm-hide xs-hide"> + <Container className="flex items-center justify-between right" width="300px"> + {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)} + </Container> + </Container> + <Container className="lg-hide md-hide"> + <Container paddingTop="6px"> + <DocsLogo height={30} /> + </Container> + </Container> + <Container className="md-hide lg-hide absolute" right="18px" top="12px"> + <i + className="zmdi zmdi-menu" + style={{ + color: colors.grey700, + fontSize: 30, + cursor: 'pointer', + }} + onClick={this._onMenuButtonClick.bind(this)} + /> + </Container> + </Container> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} /> + {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()} + </Container> + ); + } + private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode { + const menuItems = _.map(menuItemLinks, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Container className="flex items-center" paddingLeft="4px"> + <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Text> + </Container> + </Link> + ); + }); + return menuItems; + } + private _renderDrawer(): React.ReactNode { + return ( + <Drawer + open={this.state.isDrawerOpen} + docked={false} + openSecondary={true} + onRequestChange={this._onMenuButtonClick.bind(this)} + > + <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}> + {this.props.sidebar} + </Container> + </Drawer> + ); + } + private _onMenuButtonClick(): void { + this.setState({ + isDrawerOpen: !this.state.isDrawerOpen, + }); + } +} diff --git a/packages/website/ts/components/documentation/overview_content.tsx b/packages/website/ts/components/documentation/overview_content.tsx new file mode 100644 index 000000000..caabaf874 --- /dev/null +++ b/packages/website/ts/components/documentation/overview_content.tsx @@ -0,0 +1,134 @@ +import { colors, Link, MarkdownLinkBlock, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import * as ReactMarkdown from 'react-markdown'; +import { Element as ScrollElement } from 'react-scroll'; +import { TutorialButton } from 'ts/components/documentation/tutorial_button'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, Package, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +export interface OverviewContentProps { + translate: Translate; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; +} + +export interface OverviewContentState {} + +export class OverviewContent extends React.Component<OverviewContentProps, OverviewContentState> { + public render(): React.ReactNode { + return ( + <Container> + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} + <Container paddingTop="12px"> + {this._renderSectionDescription(this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap))} + <Container marginTop="36px"> + {_.map(this.props.tutorials, tutorialInfo => ( + <ScrollElement + name={sharedUtils.getIdFromName( + this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + )} + key={`tutorial-${tutorialInfo.link.title}`} + > + <TutorialButton translate={this.props.translate} tutorialInfo={tutorialInfo} /> + </ScrollElement> + ))} + </Container> + </Container> + <Container marginTop="32px" paddingBottom="100px"> + {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + <Container paddingTop="12px"> + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + )} + <Container marginTop="36px"> + {_.map(this.props.categoryToPackages, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + </Container> + </Container> + </Container> + </Container> + ); + } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( + <Container key={`category-${category}`}> + <Text fontSize="18px">{category}</Text> + <Container>{_.map(pkgs, pkg => this._renderPackage(pkg))}</Container> + </Container> + ); + } + private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.link.title); + return ( + <ScrollElement name={id} key={`package-${pkg.link.title}`}> + <Container className="pb2"> + <Container width="100%" height="1px" backgroundColor={colors.grey300} marginTop="11px" /> + <Container className="clearfix mt2 pt1"> + <Container className="md-col lg-col md-col-4 lg-col-4"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {pkg.link.title} + </Text> + </Link> + </Container> + <Container className="md-col lg-col md-col-6 lg-col-6 sm-py2"> + <Text fontColor={colors.grey700}> + <ReactMarkdown + source={pkg.description} + renderers={{ + link: MarkdownLinkBlock, + paragraph: 'span', + }} + /> + </Text> + </Container> + <Container className="md-col lg-col md-col-2 lg-col-2 sm-pb2 relative"> + <Container position="absolute" right="0px"> + <Link + to={pkg.link.to} + fontColor={colors.lightLinkBlue} + shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} + > + <Container className="flex"> + <Container>{this.props.translate.get(Key.More, Deco.Cap)}</Container> + <Container paddingTop="1px" paddingLeft="6px"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 18, color: colors.lightLinkBlue }} + /> + </Container> + </Container> + </Link> + </Container> + </Container> + </Container> + </Container> + </ScrollElement> + ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + <Container paddingTop="30px"> + <Text fontColor={colors.projectsGrey} fontSize="30px" fontWeight="bold"> + {text} + </Text> + </Container> + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + <Text fontColor={colors.linkSectionGrey} fontSize="16px" fontFamily="Roboto Mono"> + {text} + </Text> + ); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx new file mode 100644 index 000000000..fece2704b --- /dev/null +++ b/packages/website/ts/components/documentation/sidebar_header.tsx @@ -0,0 +1,57 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { ScreenWidths } from 'ts/types'; + +export interface SidebarHeaderProps { + screenWidth: ScreenWidths; + title: string; + docsVersion?: string; + availableDocVersions?: string[]; + onVersionSelected?: () => void; +} + +export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({ + screenWidth, + title, + docsVersion, + availableDocVersions, + onVersionSelected, +}) => { + return ( + <Container> + <Container className="flex justify-bottom"> + <Container className="left pl1" width="150px"> + <Text + fontColor={colors.lightLinkBlue} + fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'} + fontWeight="bold" + > + {title} + </Text> + </Container> + {!_.isUndefined(docsVersion) && + !_.isUndefined(availableDocVersions) && + !_.isUndefined(onVersionSelected) && ( + <div className="right" style={{ alignSelf: 'flex-end' }}> + <VersionDropDown + selectedVersion={docsVersion} + versions={availableDocVersions} + onVersionSelected={onVersionSelected} + /> + </div> + )} + </Container> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop="20px" + marginBottom="27px" + /> + </Container> + ); +}; diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx new file mode 100644 index 000000000..b747ef598 --- /dev/null +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -0,0 +1,59 @@ +import { colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +import { styled } from 'ts/style/theme'; + +export interface TutorialButtonProps { + className?: string; + translate: Translate; + tutorialInfo: TutorialInfo; +} + +const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => ( + <Container className={className}> + <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}> + <div className="flex relative"> + <div className="col col-1 flex items-center sm-pr3"> + <img src={tutorialInfo.iconUrl} height={40} /> + </div> + <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor={colors.grey750} fontSize="16"> + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="col col-1 flex items-center justify-end"> + <div className="right"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> + </div> + </div> + </div> + </Link> + </Container> +); + +export const TutorialButton = styled(PlainTutorialButton)` + border-radius: 4px; + border: 1px solid ${colors.grey325}; + background-color: ${colors.white}; + &:hover { + border: 1px solid ${colors.lightLinkBlue}; + background-color: ${colors.lightestBlue}; + } + padding: 20px; + margin-bottom: 15px; +`; + +TutorialButton.defaultProps = {}; + +TutorialButton.displayName = 'TutorialButton'; diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx new file mode 100644 index 000000000..a1c8b0547 --- /dev/null +++ b/packages/website/ts/components/documentation/version_drop_down.tsx @@ -0,0 +1,80 @@ +import { colors } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { styled } from 'ts/style/theme'; + +interface ActiveNodeProps { + className?: string; + selectedVersion: string; +} + +const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => ( + <Container className={className}> + <Container className="flex justify-center"> + <Text fontColor={colors.grey700} fontSize="12px"> + v {selectedVersion} + </Text> + <Container paddingLeft="6px"> + <i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} /> + </Container> + </Container> + </Container> +); + +const ActiveNode = styled(PlainActiveNode)` + cursor: pointer; + border: 2px solid ${colors.beigeWhite}; + border-radius: 4px; + padding: 4px 6px 4px 8px; +`; + +interface VersionDropDownProps { + selectedVersion: string; + versions: string[]; + onVersionSelected: (semver: string) => void; +} + +interface VersionDropDownState {} + +export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> { + public render(): React.ReactNode { + const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />; + return ( + <DropDown + activateEvent={DropdownMouseEvent.Click} + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'middle', vertical: 'top' }} + popoverStyle={{ borderRadius: 4 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const items = _.map(this.props.versions, version => { + const isSelected = version === this.props.selectedVersion; + return ( + <Container key={`dropdown-items-${version}`}> + <Button + borderRadius="0px" + padding="0.8em 0em" + width="100%" + isDisabled={isSelected} + onClick={this._onClick.bind(this, version)} + > + v {version} + </Button> + </Container> + ); + }); + const dropdownMenu = <Container width="88px">{items}</Container>; + return dropdownMenu; + } + private _onClick(selectedVersion: string): void { + this.props.onVersionSelected(selectedVersion); + } +} diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..6e85c1499 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,162 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { DropDown } from 'ts/components/ui/drop_down'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const gettingStartedKeyToLinkInfo1: ALink[] = [ + { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, +]; +const gettingStartedKeyToLinkInfo2: ALink[] = [ + { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + title: Key.UseNetworkedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; +const popularDocsToLinkInfos: ALink[] = [ + { + title: Key.ZeroExJs, + to: WebsitePaths.ZeroExJs, + }, + { + title: Key.Connect, + to: WebsitePaths.Connect, + }, + { + title: Key.SmartContract, + to: WebsitePaths.SmartContracts, + }, +]; +const usefulLinksToLinkInfo: ALink[] = [ + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Github, + to: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, + }, + { + title: Key.Whitepaper, + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, + }, +]; + +interface DevelopersDropDownProps { + location: Location; + translate: Translate; + menuItemStyles: React.CSSProperties; + menuIconStyle: React.CSSProperties; +} + +interface DevelopersDropDownState {} + +export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> { + public render(): React.ReactNode { + const activeNode = ( + <Container className="flex relative" paddingRight="10"> + <Text fontColor={this.props.menuIconStyle.color}> + {this.props.translate.get(Key.Developers, Deco.Cap)} + </Text> + </Container> + ); + return ( + <DropDown + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + style={this.props.menuItemStyles} + popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const sectionPadding = '28px'; + const dropdownMenu = ( + <Container> + <Container className="flex" padding={sectionPadding}> + <Container paddingRight="45px"> + {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} + </Container> + <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container> + </Container> + <Container width="100%" height="1px" backgroundColor={colors.grey300} /> + <Container className="flex" padding={sectionPadding}> + <Container paddingRight="62px"> + <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container> + </Container> + <Container> + <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container> + </Container> + </Container> + <Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}> + <Container + padding="0.9rem" + backgroundColor={colors.lightBgGrey} + borderBottomLeftRadius={4} + borderBottomRightRadius={4} + > + <Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center"> + {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} + </Text> + </Container> + </Link> + </Container> + ); + return dropdownMenu; + } + private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { + const numLinks = links.length; + let i = 0; + const renderLinks = _.map(links, (link: ALink) => { + const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); + const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; + let to = link.to; + if (isWikiLink && isOnWiki) { + to = `${link.to.split('#')[1]}`; + } + i++; + const isLast = i === numLinks; + const linkText = this.props.translate.get(link.title as Key, Deco.Cap); + return ( + <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}> + <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}> + <Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}> + {linkText} + </Text> + </Link> + </Container> + ); + }); + return ( + <Container> + <Container height="33px"> + {!_.isEmpty(title) && ( + <Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}> + {title.toUpperCase()} + </Text> + )} + </Container> + {renderLinks} + </Container> + ); + } +} diff --git a/packages/website/ts/components/dropdowns/network_drop_down.tsx b/packages/website/ts/components/dropdowns/network_drop_down.tsx index 2fd2785d1..df2d72edc 100644 --- a/packages/website/ts/components/dropdowns/network_drop_down.tsx +++ b/packages/website/ts/components/dropdowns/network_drop_down.tsx @@ -1,4 +1,4 @@ -import { constants as sharedConstants } from '@0xproject/react-shared'; +import { constants as sharedConstants } from '@0x/react-shared'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx index b0091a1c1..536ba924b 100644 --- a/packages/website/ts/components/eth_weth_conversion_button.tsx +++ b/packages/website/ts/components/eth_weth_conversion_button.tsx @@ -1,5 +1,5 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 0b282b2a1..2af4252bd 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -1,6 +1,6 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx index 7da2e0870..3d0203573 100644 --- a/packages/website/ts/components/fill_order.tsx +++ b/packages/website/ts/components/fill_order.tsx @@ -1,15 +1,13 @@ -import { getOrderHashHex, isValidSignature } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; -import { Order as ZeroExOrder } from '@0xproject/types'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as accounting from 'accounting'; import * as _ from 'lodash'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import Divider from 'material-ui/Divider'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog'; import { FillOrderJSON } from 'ts/components/fill_order_json'; @@ -22,10 +20,10 @@ import { VisualOrder } from 'ts/components/visual_order'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; -import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types'; +import { AlertTypes, BlockchainErrs, PortalOrder, Token, TokenByAddress, WebsitePaths } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; -import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; +import { orderParser } from 'ts/utils/order_parser'; import { utils } from 'ts/utils/utils'; interface FillOrderProps { @@ -36,7 +34,7 @@ interface FillOrderProps { networkId: number; userAddress: string; tokenByAddress: TokenByAddress; - initialOrder: Order; + initialOrder: PortalOrder; dispatcher: Dispatcher; lastForceTokenStateRefetch: number; isFullWidth?: boolean; @@ -49,7 +47,7 @@ interface FillOrderState { globalErrMsg: string; orderJSON: string; orderJSONErrMsg: string; - parsedOrder: Order; + parsedOrder: PortalOrder; didFillOrderSucceed: boolean; didCancelOrderSucceed: boolean; unavailableTakerAmount: BigNumber; @@ -191,26 +189,31 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { ); } private _renderVisualOrder(): React.ReactNode { - const takerTokenAddress = this.state.parsedOrder.signedOrder.takerTokenAddress; + const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData) + .tokenAddress; const takerToken = this.props.tokenByAddress[takerTokenAddress]; - const orderTakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.takerTokenAmount); - const orderMakerAmount = new BigNumber(this.state.parsedOrder.signedOrder.makerTokenAmount); + const orderTakerAmount = this.state.parsedOrder.signedOrder.takerAssetAmount; + const orderMakerAmount = this.state.parsedOrder.signedOrder.makerAssetAmount; const takerAssetToken = { amount: orderTakerAmount.minus(this.state.unavailableTakerAmount), symbol: takerToken.symbol, }; const fillToken = this.props.tokenByAddress[takerTokenAddress]; - const makerTokenAddress = this.state.parsedOrder.signedOrder.makerTokenAddress; + const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData) + .tokenAddress; const makerToken = this.props.tokenByAddress[makerTokenAddress]; const makerAssetToken = { - amount: orderMakerAmount.times(takerAssetToken.amount).div(orderTakerAmount), + amount: orderMakerAmount + .times(takerAssetToken.amount) + .div(orderTakerAmount) + .floor(), symbol: makerToken.symbol, }; const fillAssetToken = { amount: this.props.orderFillAmount, symbol: takerToken.symbol, }; - const parsedOrderExpiration = new BigNumber(this.state.parsedOrder.signedOrder.expirationUnixTimestampSec); + const parsedOrderExpiration = this.state.parsedOrder.signedOrder.expirationTimeSeconds; let orderReceiveAmount = 0; if (!_.isUndefined(this.props.orderFillAmount)) { @@ -222,7 +225,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { } const isUserMaker = !_.isUndefined(this.state.parsedOrder) && - this.state.parsedOrder.signedOrder.maker === this.props.userAddress; + this.state.parsedOrder.signedOrder.makerAddress === this.props.userAddress; const expiryDate = utils.convertToReadableDateTimeFromUnixTimestamp(parsedOrderExpiration); return ( <div className="pt3 pb1"> @@ -233,11 +236,11 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { Maker: </div> <div className="col col-2 pr1"> - <Identicon address={this.state.parsedOrder.signedOrder.maker} diameter={23} /> + <Identicon address={this.state.parsedOrder.signedOrder.makerAddress} diameter={23} /> </div> <div className="col col-6"> <EthereumAddress - address={this.state.parsedOrder.signedOrder.maker} + address={this.state.parsedOrder.signedOrder.makerAddress} networkId={this.props.networkId} /> </div> @@ -323,7 +326,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return ( <div> Order successfully filled. See the trade details in your{' '} - <Link to={`${WebsitePaths.Portal}/trades`} style={{ color: colors.white }}> + <Link to={`${WebsitePaths.Portal}/trades`} fontColor={colors.white}> trade history </Link> </div> @@ -367,17 +370,19 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { if (!_.isEmpty(this.state.orderJSONErrMsg)) { return; } - - const makerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.makerTokenAddress]; - const takerTokenIfExists = this.props.tokenByAddress[this.state.parsedOrder.signedOrder.takerTokenAddress]; - + const makerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.makerAssetData) + .tokenAddress; + const takerTokenAddress = assetDataUtils.decodeERC20AssetData(this.state.parsedOrder.signedOrder.takerAssetData) + .tokenAddress; + const makerTokenIfExists = this.props.tokenByAddress[makerTokenAddress]; + const takerTokenIfExists = this.props.tokenByAddress[takerTokenAddress]; const tokensToTrack: Token[] = []; const isUnseenMakerToken = _.isUndefined(makerTokenIfExists); const isMakerTokenTracked = !_.isUndefined(makerTokenIfExists) && utils.isTokenTracked(makerTokenIfExists); if (isUnseenMakerToken) { tokensToTrack.push({ ...this.state.parsedOrder.metadata.makerToken, - address: this.state.parsedOrder.signedOrder.makerTokenAddress, + address: makerTokenAddress, iconUrl: undefined, trackedTimestamp: undefined, isRegistered: false, @@ -390,7 +395,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { if (isUnseenTakerToken) { tokensToTrack.push({ ...this.state.parsedOrder.metadata.takerToken, - address: this.state.parsedOrder.signedOrder.takerTokenAddress, + address: takerTokenAddress, iconUrl: undefined, trackedTimestamp: undefined, isRegistered: false, @@ -411,10 +416,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { } private async _validateFillOrderFireAndForgetAsync(orderJSON: string): Promise<void> { let orderJSONErrMsg = ''; - let parsedOrder: Order; + let parsedOrder: PortalOrder; let orderHash: string; try { - const order = JSON.parse(orderJSON); + const order = orderParser.parseJsonString(orderJSON); const validationResult = validator.validate(order, portalOrderSchema); if (validationResult.errors.length > 0) { orderJSONErrMsg = 'Submitted order JSON is not a valid order'; @@ -422,36 +427,16 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } parsedOrder = order; - - const makerAmount = new BigNumber(parsedOrder.signedOrder.makerTokenAmount); - const takerAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount); - const expiration = new BigNumber(parsedOrder.signedOrder.expirationUnixTimestampSec); - const salt = new BigNumber(parsedOrder.signedOrder.salt); - const parsedMakerFee = new BigNumber(parsedOrder.signedOrder.makerFee); - const parsedTakerFee = new BigNumber(parsedOrder.signedOrder.takerFee); - - const zeroExOrder: ZeroExOrder = { - exchangeContractAddress: parsedOrder.signedOrder.exchangeContractAddress, - expirationUnixTimestampSec: expiration, - feeRecipient: parsedOrder.signedOrder.feeRecipient, - maker: parsedOrder.signedOrder.maker, - makerFee: parsedMakerFee, - makerTokenAddress: parsedOrder.signedOrder.makerTokenAddress, - makerTokenAmount: makerAmount, - salt, - taker: _.isEmpty(parsedOrder.signedOrder.taker) - ? constants.NULL_ADDRESS - : parsedOrder.signedOrder.taker, - takerFee: parsedTakerFee, - takerTokenAddress: parsedOrder.signedOrder.takerTokenAddress, - takerTokenAmount: takerAmount, - }; - orderHash = getOrderHashHex(zeroExOrder); - + const signedOrder = parsedOrder.signedOrder; + orderHash = orderHashUtils.getOrderHashHex(signedOrder); const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists(); - const signature = parsedOrder.signedOrder.ecSignature; - const isSignatureValid = isValidSignature(orderHash, signature, parsedOrder.signedOrder.maker); - if (exchangeContractAddr !== parsedOrder.signedOrder.exchangeContractAddress) { + const signature = signedOrder.signature; + const isSignatureValid = await this.props.blockchain.isValidSignatureAsync( + orderHash, + signature, + signedOrder.makerAddress, + ); + if (exchangeContractAddr !== signedOrder.exchangeAddress) { orderJSONErrMsg = 'This order was made on another network or using a deprecated Exchange contract'; parsedOrder = undefined; } else if (!isSignatureValid) { @@ -484,11 +469,15 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this.props.dispatcher.updateUserSuppliedOrderCache(undefined); } else { unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash); + const makerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.makerAssetData) + .tokenAddress; + const takerTokenAddress = assetDataUtils.decodeERC20AssetData(parsedOrder.signedOrder.takerAssetData) + .tokenAddress; const isMakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync( - parsedOrder.signedOrder.makerTokenAddress, + makerTokenAddress, ); const isTakerTokenAddressInRegistry = await this.props.blockchain.isAddressInTokenRegistryAsync( - parsedOrder.signedOrder.takerTokenAddress, + takerTokenAddress, ); this.setState({ isMakerTokenAddressInRegistry, @@ -537,7 +526,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { globalErrMsg = 'You must specify a fill amount'; } - const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder); + const signedOrder = parsedOrder.signedOrder; if (_.isEmpty(globalErrMsg)) { try { await this.props.blockchain.validateFillOrderThrowIfInvalidAsync( @@ -546,7 +535,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { this.props.userAddress, ); } catch (err) { - globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker); + globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.takerAddress); } } if (!_.isEmpty(globalErrMsg)) { @@ -611,18 +600,8 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } let globalErrMsg = ''; - - const takerTokenAmount = new BigNumber(parsedOrder.signedOrder.takerTokenAmount); - - const signedOrder = this.props.blockchain.portalOrderToZeroExOrder(parsedOrder); - const orderHash = getOrderHashHex(signedOrder); - const unavailableTakerAmount = await this.props.blockchain.getUnavailableTakerAmountAsync(orderHash); - const availableTakerTokenAmount = takerTokenAmount.minus(unavailableTakerAmount); - try { - await this.props.blockchain.validateCancelOrderThrowIfInvalidAsync(signedOrder, availableTakerTokenAmount); - } catch (err) { - globalErrMsg = utils.zeroExErrToHumanReadableErrMsg(err.message, parsedOrder.signedOrder.taker); - } + const signedOrder = parsedOrder.signedOrder; + const takerTokenAmount = signedOrder.takerAssetAmount; if (!_.isEmpty(globalErrMsg)) { this.setState({ isCancelling: false, @@ -631,7 +610,7 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> { return; } try { - await this.props.blockchain.cancelOrderAsync(signedOrder, availableTakerTokenAmount); + await this.props.blockchain.cancelOrderAsync(signedOrder); this.setState({ isCancelling: false, didCancelOrderSucceed: true, diff --git a/packages/website/ts/components/fill_order_json.tsx b/packages/website/ts/components/fill_order_json.tsx index 90eedbb18..41413eac2 100644 --- a/packages/website/ts/components/fill_order_json.tsx +++ b/packages/website/ts/components/fill_order_json.tsx @@ -1,5 +1,5 @@ -import { generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { BigNumber } from '@0xproject/utils'; +import { generatePseudoRandomSalt } from '@0x/order-utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; @@ -33,11 +33,7 @@ export class FillOrderJSON extends React.Component<FillOrderJSONProps, FillOrder }, }; const hintOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec(); - const hintECSignature = { - r: '0xf01103f759e2289a28593eaf22e5820032...', - s: '937862111edcba395f8a9e0cc1b2c5e12320...', - v: 27, - }; + const hintECSignature = '0x012761a3ed31b43c8780e905a260a35faefcc527be7516aa11c0256729b5b351bc33'; const hintSalt = generatePseudoRandomSalt(); const feeRecipient = constants.NULL_ADDRESS; const hintOrder = utils.generateOrder( diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx index 45c492221..430abd013 100644 --- a/packages/website/ts/components/fill_warning_dialog.tsx +++ b/packages/website/ts/components/fill_warning_dialog.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; @@ -18,12 +18,12 @@ export const FillWarningDialog = (props: FillWarningDialogProps) => { <FlatButton key="fillWarningCancel" label="Cancel" - onTouchTap={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda + onClick={() => props.onToggleDialog(didCancel)} // tslint:disable-line:jsx-no-lambda />, <FlatButton key="fillWarningContinue" label="Fill Order" - onTouchTap={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda + onClick={() => props.onToggleDialog(!didCancel)} // tslint:disable-line:jsx-no-lambda />, ]} open={props.isOpen} diff --git a/packages/website/ts/components/flash_messages/asset_send_completed.tsx b/packages/website/ts/components/flash_messages/asset_send_completed.tsx index f76e05fe1..b895126dc 100644 --- a/packages/website/ts/components/flash_messages/asset_send_completed.tsx +++ b/packages/website/ts/components/flash_messages/asset_send_completed.tsx @@ -1,6 +1,6 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx index 2a6d2a64b..b1d909baa 100644 --- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx +++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 6dcb5a0e9..dfedcba55 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -1,31 +1,17 @@ -import { colors } from '@0xproject/react-shared'; +import { ALink, colors, Link } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; + import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; -interface MenuItemsBySection { - [sectionName: string]: FooterMenuItem[]; -} - -interface FooterMenuItem { - title: string; - path?: string; - isExternal?: boolean; -} - const ICON_DIMENSION = 16; -const linkStyle = { - color: colors.white, - cursor: 'pointer', -}; - const languageToMenuTitle = { [Language.English]: 'English', [Language.Russian]: 'Русский', @@ -51,76 +37,74 @@ export class Footer extends React.Component<FooterProps, FooterState> { }; } public render(): React.ReactNode { - const menuItemsBySection: MenuItemsBySection = { + const sectionNameToLinks: ObjectMap<ALink[]> = { [Key.Documentation]: [ { + title: 'Developer Home', + to: WebsitePaths.Docs, + }, + { title: '0x.js', - path: WebsitePaths.ZeroExJs, + to: WebsitePaths.ZeroExJs, }, { title: this.props.translate.get(Key.SmartContracts, Deco.Cap), - path: WebsitePaths.SmartContracts, + to: WebsitePaths.SmartContracts, }, { title: this.props.translate.get(Key.Connect, Deco.Cap), - path: WebsitePaths.Connect, + to: WebsitePaths.Connect, }, { title: this.props.translate.get(Key.Whitepaper, Deco.Cap), - path: WebsitePaths.Whitepaper, - isExternal: true, + to: WebsitePaths.Whitepaper, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Wiki, Deco.Cap), - path: WebsitePaths.Wiki, - }, - { - title: this.props.translate.get(Key.Faq, Deco.Cap), - path: WebsitePaths.FAQ, + to: WebsitePaths.Wiki, }, ], [Key.Community]: [ { title: this.props.translate.get(Key.RocketChat, Deco.Cap), - isExternal: true, - path: constants.URL_ZEROEX_CHAT, + to: constants.URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Blog, Deco.Cap), - isExternal: true, - path: constants.URL_BLOG, + to: constants.URL_BLOG, + shouldOpenInNewTab: true, }, { title: 'Twitter', - isExternal: true, - path: constants.URL_TWITTER, + to: constants.URL_TWITTER, + shouldOpenInNewTab: true, }, { title: 'Reddit', - isExternal: true, - path: constants.URL_REDDIT, + to: constants.URL_REDDIT, + shouldOpenInNewTab: true, }, { title: this.props.translate.get(Key.Forum, Deco.Cap), - isExternal: true, - path: constants.URL_DISCOURSE_FORUM, + to: constants.URL_DISCOURSE_FORUM, + shouldOpenInNewTab: true, }, ], [Key.Organization]: [ { title: this.props.translate.get(Key.About, Deco.Cap), - isExternal: false, - path: WebsitePaths.About, + to: WebsitePaths.About, }, { title: this.props.translate.get(Key.Careers, Deco.Cap), - isExternal: false, - path: WebsitePaths.Careers, + to: WebsitePaths.Careers, }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - isExternal: true, - path: 'mailto:team@0xproject.com', + to: 'mailto:team@0xproject.com', + shouldOpenInNewTab: true, }, ], }; @@ -160,19 +144,19 @@ export class Footer extends React.Component<FooterProps, FooterState> { <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Documentation)} - {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Community)} - {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))} </div> </div> <div className="col lg-col-4 md-col-4 col-12"> <div className="lg-right md-right sm-center"> {this._renderHeader(Key.Organization)} - {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))} + {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))} </div> </div> </div> @@ -187,7 +171,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { </div> ); } - private _renderMenuItem(item: FooterMenuItem): React.ReactNode { + private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', @@ -195,30 +179,26 @@ export class Footer extends React.Component<FooterProps, FooterState> { Reddit: 'reddit.png', [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png', }; - const iconIfExists = titleToIcon[item.title]; + const iconIfExists = titleToIcon[link.title]; return ( - <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> - {item.isExternal ? ( - <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}> + <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}> + <Link + to={link.to} + shouldOpenInNewTab={link.shouldOpenInNewTab} + fontColor={colors.white} + className="text-decoration-none" + > + <div> {!_.isUndefined(iconIfExists) ? ( <div className="inline-block"> <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div> - <div className="table-cell">{item.title}</div> + <div className="table-cell">{link.title}</div> </div> ) : ( - item.title + link.title )} - </a> - ) : ( - <Link to={item.path} style={linkStyle} className="text-decoration-none"> - <div> - {!_.isUndefined(iconIfExists) && ( - <div className="pr1">{this._renderIcon(iconIfExists)}</div> - )} - {item.title} - </div> - </Link> - )} + </div> + </Link> </div> ); } diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx index 761db7517..f5560cfa7 100644 --- a/packages/website/ts/components/forms/subscribe_form.tsx +++ b/packages/website/ts/components/forms/subscribe_form.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 2dca3483f..98aad6c62 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -73,12 +73,12 @@ export class AssetPicker extends React.Component<AssetPickerProps, AssetPickerSt <FlatButton key="noTracking" label="No" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, false)} />, <FlatButton key="yesTrack" label="Yes" - onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)} + onClick={this._onTrackConfirmationRespondedAsync.bind(this, true)} />, ], }, diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx index 72efab033..8afbee977 100644 --- a/packages/website/ts/components/generate_order/generate_order_form.tsx +++ b/packages/website/ts/components/generate_order/generate_order_form.tsx @@ -1,7 +1,7 @@ -import { generatePseudoRandomSalt, getOrderHashHex } from '@0xproject/order-utils'; -import { colors } from '@0xproject/react-shared'; -import { ECSignature, Order as ZeroExOrder } from '@0xproject/types'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { assetDataUtils, generatePseudoRandomSalt, orderHashUtils } from '@0x/order-utils'; +import { colors } from '@0x/react-shared'; +import { Order as ZeroExOrder } from '@0x/types'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; @@ -20,7 +20,16 @@ import { SwapIcon } from 'ts/components/ui/swap_icon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; -import { AlertTypes, BlockchainErrs, HashData, Order, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types'; +import { + AlertTypes, + BlockchainErrs, + HashData, + PortalOrder, + Side, + SideToAssetToken, + Token, + TokenByAddress, +} from 'ts/types'; import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { errorReporter } from 'ts/utils/error_reporter'; @@ -41,7 +50,7 @@ interface GenerateOrderFormProps { orderExpiryTimestamp: BigNumber; networkId: number; userAddress: string; - orderECSignature: ECSignature; + orderSignature: string; orderTakerAddress: string; orderSalt: BigNumber; sideToAssetToken: SideToAssetToken; @@ -212,7 +221,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G <OrderJSON exchangeContractIfExists={exchangeContractIfExists} orderExpiryTimestamp={this.props.orderExpiryTimestamp} - orderECSignature={this.props.orderECSignature} + orderSignature={this.props.orderSignature} orderTakerAddress={this.props.orderTakerAddress} orderMakerAddress={this.props.userAddress} orderSalt={this.props.orderSalt} @@ -294,12 +303,12 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G return false; } } - private async _signTransactionAsync(): Promise<Order | undefined> { + private async _signTransactionAsync(): Promise<PortalOrder | undefined> { this.setState({ signingState: SigningState.SIGNING, }); - const exchangeContractAddr = this.props.blockchain.getExchangeContractAddressIfExists(); - if (_.isUndefined(exchangeContractAddr)) { + const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); + if (_.isUndefined(exchangeAddress)) { this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true); this.setState({ signingState: SigningState.UNSIGNED, @@ -308,28 +317,31 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G } const hashData = this.props.hashData; + const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr); + const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr); const zeroExOrder: ZeroExOrder = { - exchangeContractAddress: exchangeContractAddr, - expirationUnixTimestampSec: hashData.orderExpiryTimestamp, - feeRecipient: hashData.feeRecipientAddress, - maker: hashData.orderMakerAddress, + senderAddress: constants.NULL_ADDRESS, + exchangeAddress, + expirationTimeSeconds: hashData.orderExpiryTimestamp, + feeRecipientAddress: hashData.feeRecipientAddress, + makerAddress: hashData.orderMakerAddress, makerFee: hashData.makerFee, - makerTokenAddress: hashData.depositTokenContractAddr, - makerTokenAmount: hashData.depositAmount, + makerAssetData, + makerAssetAmount: hashData.depositAmount, salt: hashData.orderSalt, - taker: hashData.orderTakerAddress, + takerAddress: hashData.orderTakerAddress, takerFee: hashData.takerFee, - takerTokenAddress: hashData.receiveTokenContractAddr, - takerTokenAmount: hashData.receiveAmount, + takerAssetData, + takerAssetAmount: hashData.receiveAmount, }; - const orderHash = getOrderHashHex(zeroExOrder); + const orderHash = orderHashUtils.getOrderHashHex(zeroExOrder); let globalErrMsg = ''; let order; try { - const ecSignature = await this.props.blockchain.signOrderHashAsync(orderHash); + const signature = await this.props.blockchain.signOrderHashAsync(orderHash); order = utils.generateOrder( - exchangeContractAddr, + exchangeAddress, this.props.sideToAssetToken, hashData.orderExpiryTimestamp, this.props.orderTakerAddress, @@ -337,7 +349,7 @@ export class GenerateOrderForm extends React.Component<GenerateOrderFormProps, G hashData.makerFee, hashData.takerFee, hashData.feeRecipientAddress, - ecSignature, + signature, this.props.tokenByAddress, hashData.orderSalt, ); diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx index 3d7eda84c..b8cd88b18 100644 --- a/packages/website/ts/components/generate_order/new_token_form.tsx +++ b/packages/website/ts/components/generate_order/new_token_form.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as moment from 'moment'; diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx index 39ec72f8a..1a71f8081 100644 --- a/packages/website/ts/components/inputs/address_input.tsx +++ b/packages/website/ts/components/inputs/address_input.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { addressUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { addressUtils } from '@0x/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index 39d2e3030..fd7d3b174 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx index eb01e3ea6..83f263842 100644 --- a/packages/website/ts/components/inputs/balance_bounded_input.tsx +++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import TextField from 'material-ui/TextField'; import * as React from 'react'; diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx index 3a7905442..6799e54bf 100644 --- a/packages/website/ts/components/inputs/eth_amount_input.tsx +++ b/packages/website/ts/components/inputs/eth_amount_input.tsx @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index 5417ce715..3e43c1c07 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import DatePicker from 'material-ui/DatePicker'; import TimePicker from 'material-ui/TimePicker'; diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx index 8d9cdfc0b..73b6615d4 100644 --- a/packages/website/ts/components/inputs/hash_input.tsx +++ b/packages/website/ts/components/inputs/hash_input.tsx @@ -1,9 +1,10 @@ -import { getOrderHashHex } from '@0xproject/order-utils'; -import { Styles } from '@0xproject/react-shared'; -import { Order } from '@0xproject/types'; +import { assetDataUtils, orderHashUtils } from '@0x/order-utils'; +import { Styles } from '@0x/react-shared'; +import { Order } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); + import { Blockchain } from 'ts/blockchain'; import { FakeTextField } from 'ts/components/ui/fake_text_field'; import { HashData } from 'ts/types'; @@ -42,23 +43,26 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> { ); } private _generateMessageHashHex(): string { - const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists(); + const exchangeAddress = this.props.blockchain.getExchangeContractAddressIfExists(); const hashData = this.props.hashData; + const makerAssetData = assetDataUtils.encodeERC20AssetData(hashData.depositTokenContractAddr); + const takerAssetData = assetDataUtils.encodeERC20AssetData(hashData.receiveTokenContractAddr); const order: Order = { - exchangeContractAddress, - expirationUnixTimestampSec: hashData.orderExpiryTimestamp, - feeRecipient: hashData.feeRecipientAddress, - maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress, + senderAddress: constants.NULL_ADDRESS, + exchangeAddress, + expirationTimeSeconds: hashData.orderExpiryTimestamp, + feeRecipientAddress: hashData.feeRecipientAddress, + makerAddress: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress, makerFee: hashData.makerFee, - makerTokenAddress: hashData.depositTokenContractAddr, - makerTokenAmount: hashData.depositAmount, + makerAssetData, + makerAssetAmount: hashData.depositAmount, salt: hashData.orderSalt, - taker: hashData.orderTakerAddress, + takerAddress: hashData.orderTakerAddress, takerFee: hashData.takerFee, - takerTokenAddress: hashData.receiveTokenContractAddr, - takerTokenAmount: hashData.receiveAmount, + takerAssetData, + takerAssetAmount: hashData.receiveAmount, }; - const orderHash = getOrderHashHex(order); + const orderHash = orderHashUtils.getOrderHashHex(order); return orderHash; } } diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index 93ef516cf..fded3a9dd 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,9 +1,8 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; @@ -111,8 +110,9 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok <span> Insufficient allowance.{' '} <Link - to={`${WebsitePaths.Portal}/balances`} - style={{ cursor: 'pointer', color: colors.darkestGrey }} + to={`${WebsitePaths.Portal}/account`} + textDecoration="underline" + fontColor={colors.darkestGrey} > Set allowance </Link> diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx index 0bd36781e..c3c2d8b37 100644 --- a/packages/website/ts/components/inputs/token_input.tsx +++ b/packages/website/ts/components/inputs/token_input.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import Paper from 'material-ui/Paper'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx new file mode 100644 index 000000000..db7d55261 --- /dev/null +++ b/packages/website/ts/components/nested_sidebar_menu.tsx @@ -0,0 +1,92 @@ +import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Button } from 'ts/components/ui/button'; +import { Text } from 'ts/components/ui/text'; + +export interface NestedSidebarMenuProps { + sectionNameToLinks: ObjectMap<ALink[]>; + sidebarHeader?: React.ReactNode; + shouldReformatMenuItemNames?: boolean; +} + +export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => { + const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => { + const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName); + const menuItems = _.map(links, (link, i) => { + const menuItemTitle = props.shouldReformatMenuItemNames + ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title)) + : link.title; + const finalLink = { + ...link, + title: menuItemTitle, + }; + return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />; + }); + // tslint:disable-next-line:no-unused-variable + return ( + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> + <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1"> + {finalSectionName.toUpperCase()} + </Text> + {menuItems} + </div> + ); + }); + return ( + <div> + {props.sidebarHeader} + <div>{navigation}</div> + </div> + ); +}; + +export interface MenuItemProps { + link: ALink; +} + +export interface MenuItemState { + isActive: boolean; +} + +export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { + constructor(props: MenuItemProps) { + super(props); + const isActive = window.location.hash.slice(1) === props.link.to; + this.state = { + isActive, + }; + } + public render(): React.ReactNode { + const isActive = this.state.isActive; + return ( + <Link + to={this.props.link.to} + shouldOpenInNewTab={this.props.link.shouldOpenInNewTab} + onActivityChanged={this._onActivityChanged.bind(this)} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100} + fontSize="14px" + textAlign="left" + > + <Text + fontWeight={isActive ? 'bold' : 'normal'} + fontColor={isActive ? colors.white : colors.grey800} + > + {this.props.link.title} + </Text> + </Button> + </Link> + ); + } + private _onActivityChanged(isActive: boolean): void { + this.setState({ + isActive, + }); + } +} diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index ca71fcd50..1d21e5a85 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx index d618c8318..173ba9a97 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; @@ -12,7 +12,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet const followupText = isOnMobile ? `Please revisit this site in your mobile dApp browser to continue!` : `Please refresh the page once you've done this to continue!`; - const downloadText = isOnMobile ? 'Get the Toshi Wallet' : 'Get the MetaMask extension'; + const downloadText = isOnMobile ? 'Get Coinbase Wallet' : 'Get the MetaMask extension'; return ( <div className="flex items-center flex-column"> <Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text> @@ -21,7 +21,7 @@ export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWallet height="50px" width="50px" borderRadius="22%" - src={isOnMobile ? '/images/toshi_logo.jpg' : '/images/metamask_icon.png'} + src={isOnMobile ? '/images/coinbase_wallet_logo.png' : '/images/metamask_icon.png'} /> <Container marginLeft="10px"> <a href={downloadLink} target="_blank"> diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index e1b0f304b..384bf7154 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as _ from 'lodash'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 522687758..6adcec0b1 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { RouteComponentProps, withRouter } from 'react-router'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import { Blockchain } from 'ts/blockchain'; import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step'; diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index e4332de75..37eef867b 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; diff --git a/packages/website/ts/components/order_json.tsx b/packages/website/ts/components/order_json.tsx index cf06f10c8..f33681835 100644 --- a/packages/website/ts/components/order_json.tsx +++ b/packages/website/ts/components/order_json.tsx @@ -1,5 +1,4 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber, fetchAsync, logUtils } from '@0xproject/utils'; +import { BigNumber, fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import TextField from 'material-ui/TextField'; @@ -14,7 +13,7 @@ import { utils } from 'ts/utils/utils'; interface OrderJSONProps { exchangeContractIfExists: string; orderExpiryTimestamp: BigNumber; - orderECSignature: ECSignature; + orderSignature: string; orderTakerAddress: string; orderMakerAddress: string; orderSalt: BigNumber; @@ -48,7 +47,7 @@ export class OrderJSON extends React.Component<OrderJSONProps, OrderJSONState> { this.props.orderMakerFee, this.props.orderTakerFee, this.props.orderFeeRecipient, - this.props.orderECSignature, + this.props.orderSignature, this.props.tokenByAddress, this.props.orderSalt, ); @@ -169,7 +168,7 @@ You can see and fill it here: ${this.state.shareLink}`); this.props.orderMakerFee, this.props.orderTakerFee, this.props.orderFeeRecipient, - this.props.orderECSignature, + this.props.orderSignature, this.props.tokenByAddress, this.props.orderSalt, ); diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index ca35abc2b..bea69bb95 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -1,7 +1,5 @@ -import { Styles } from '@0xproject/react-shared'; +import { Link, Styles } from '@0x/react-shared'; import * as React from 'react'; -import { Link } from 'react-router-dom'; - import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; @@ -27,7 +25,7 @@ const styles: Styles = { export const BackButton = (props: BackButtonProps) => { return ( <div style={{ height: 65, paddingTop: 25 }}> - <Link to={props.to} style={{ textDecoration: 'none' }}> + <Link to={props.to}> <Island className="flex right" style={styles.backButton}> <div style={{ marginLeft: 12 }}> <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} /> diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index a6707e86c..7280a6102 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; @@ -39,7 +39,7 @@ export interface DrawerMenuProps { } export const DrawerMenu = (props: DrawerMenuProps) => { const relayerItemEntry = { - to: `${WebsitePaths.Portal}`, + to: WebsitePaths.Portal, labelText: 'Relayer ecosystem', iconName: 'zmdi-portable-wifi', }; diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx index 39dab77f5..d59101686 100644 --- a/packages/website/ts/components/portal/menu.tsx +++ b/packages/website/ts/components/portal/menu.tsx @@ -1,7 +1,7 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { MenuItem } from 'ts/components/ui/menu_item'; +import { CustomMenuItem } from 'ts/components/ui/custom_menu_item'; import { colors } from 'ts/style/colors'; import { WebsitePaths } from 'ts/types'; @@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => { {_.map(props.menuItemEntries, entry => { const isSelected = entry.to === props.selectedPath; return ( - <MenuItem key={entry.to} to={entry.to}> + <CustomMenuItem key={entry.to} to={entry.to}> <MenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={isSelected} theme={props.theme} /> - </MenuItem> + </CustomMenuItem> ); })} </div> diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ff11880e3..94ab63ac6 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,9 +1,9 @@ -import { colors } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; +import { colors, Link } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -18,7 +18,7 @@ import { Loading } from 'ts/components/portal/loading'; import { Menu, MenuTheme } from 'ts/components/portal/menu'; import { Section } from 'ts/components/portal/section'; import { TextHeader } from 'ts/components/portal/text_header'; -import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; +import { RelayerIndex, RelayerIndexCellStyle } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; @@ -39,7 +39,7 @@ import { BlockchainErrs, HashData, ItemByAddress, - Order, + PortalOrder, ProviderType, ScreenWidths, Token, @@ -71,7 +71,7 @@ export interface PortalProps { userEtherBalanceInWei?: BigNumber; userAddress: string; shouldBlockchainErrDialogBeOpen: boolean; - userSuppliedOrderCache: Order; + userSuppliedOrderCache: PortalOrder; location: Location; flashMessage?: string | React.ReactNode; lastForceTokenStateRefetch: number; @@ -114,11 +114,11 @@ const DOCUMENT_DESCRIPTION = 'Learn about and trade on 0x Relayers'; export class Portal extends React.Component<PortalProps, PortalState> { private _blockchain: Blockchain; - private readonly _sharedOrderIfExists: Order; + private readonly _sharedOrderIfExists: PortalOrder; private readonly _throttledScreenWidthUpdate: () => void; constructor(props: PortalProps) { super(props); - this._sharedOrderIfExists = orderParser.parse(window.location.search); + this._sharedOrderIfExists = orderParser.parseQueryString(window.location.search); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER); const hasAcceptedDisclaimer = @@ -210,12 +210,16 @@ export class Portal extends React.Component<PortalProps, PortalState> { isLoaded: false, }; } - this.setState({ - trackedTokenStateByAddress, - }); - // Fetch the actual balance/allowance. - // tslint:disable-next-line:no-floating-promises - this._fetchBalancesAndAllowancesAsync(newTokenAddresses); + this.setState( + { + trackedTokenStateByAddress, + }, + () => { + // Fetch the actual balance/allowance. + // tslint:disable-next-line:no-floating-promises + this._fetchBalancesAndAllowancesAsync(newTokenAddresses); + }, + ); } } public render(): React.ReactNode { @@ -317,7 +321,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { }; return ( <Section - header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />} + header={<BackButton to={WebsitePaths.Portal} labelText="back to Relayers" />} body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />} /> ); @@ -389,9 +393,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { </Container> ); return !shouldStartOnboarding ? ( - <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}> - {startOnboarding} - </Link> + <Link to={`${WebsitePaths.Portal}/account`}>{startOnboarding}</Link> ) : ( startOnboarding ); @@ -541,17 +543,22 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private _renderRelayerIndexSection(): React.ReactNode { const isMobile = utils.isMobileWidth(this.props.screenWidth); + // TODO(bmillman): revert RelayerIndex cellStyle to Expanded once data pipeline is tracking v2 volume return ( <Section header={!isMobile && <TextHeader labelText="0x Relayers" />} body={ - <Container className="flex flex-column items-center"> + <Container className="flex flex-column"> {isMobile && ( <Container marginTop="20px" marginBottom="20px"> {this._renderStartOnboarding()} </Container> )} - <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} /> + <RelayerIndex + networkId={this.props.networkId} + screenWidth={this.props.screenWidth} + cellStyle={RelayerIndexCellStyle.Minimized} + /> </Container> } /> @@ -641,6 +648,9 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private async _fetchBalancesAndAllowancesAsync(tokenAddresses: string[]): Promise<void> { + if (_.isEmpty(tokenAddresses)) { + return; + } const trackedTokenStateByAddress = this.state.trackedTokenStateByAddress; const userAddressIfExists = _.isEmpty(this.props.userAddress) ? undefined : this.props.userAddress; const balancesAndAllowances = await Promise.all( diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx index 853da3a29..b6045b832 100644 --- a/packages/website/ts/components/portal/text_header.tsx +++ b/packages/website/ts/components/portal/text_header.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 193dd237a..7f1b4ebb4 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import { GridTile as PlainGridTile } from 'material-ui/GridList'; import * as React from 'react'; @@ -14,9 +14,15 @@ import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; import { utils } from 'ts/utils/utils'; +export enum RelayerGridTileStyle { + Expanded = 0, + Minimized, +} + export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; networkId: number; + style: RelayerGridTileStyle; } const styles: Styles = { @@ -30,10 +36,14 @@ const styles: Styles = { height: '100%', boxSizing: 'border-box', }, - header: { + expandedHeader: { height: '50%', width: '100%', }, + minimizedHeader: { + height: '100%', + width: '100%', + }, body: { height: '50%', width: '100%', @@ -75,10 +85,12 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) ? props.relayerInfo.primaryColor : FALLBACK_PRIMARY_COLOR; + const isExpanded = props.style === RelayerGridTileStyle.Expanded; + const headerStyle = isExpanded ? styles.expandedHeader : styles.minimizedHeader; return ( <Island style={styles.root} Component={GridTile}> <div style={styles.innerDiv} onClick={onClick}> - <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}> + <div className="flex items-center" style={{ ...headerStyle, backgroundColor: headerBackgroundColor }}> <Image className="mx-auto" src={props.relayerInfo.logoImgUrl} @@ -86,21 +98,23 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( height={RELAYER_ICON_HEIGHT} /> </div> - <div style={styles.body}> - <div className="pb1" style={styles.relayerNameLabel}> - {props.relayerInfo.name} - </div> - <Section titleText="Weekly Trade Volume"> - {!_.isUndefined(weeklyTxnVolume) && ( - <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> - )} - </Section> - <Container marginTop="10px"> - <Section titleText="Top Tokens"> - {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} + {isExpanded && ( + <div style={styles.body}> + <div className="pb1" style={styles.relayerNameLabel}> + {props.relayerInfo.name} + </div> + <Section titleText="Weekly Trade Volume"> + {!_.isUndefined(weeklyTxnVolume) && ( + <div style={styles.weeklyTradeVolumeLabel}>{props.relayerInfo.weeklyTxnVolume}</div> + )} </Section> - </Container> - </div> + <Container marginTop="10px"> + <Section titleText="Top Tokens"> + {!_.isEmpty(topTokens) && <TopTokens tokens={topTokens} networkId={props.networkId} />} + </Section> + </Container> + </div> + )} </div> </Island> ); diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 4aea1bbbb..e88c20d7e 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -3,14 +3,20 @@ import CircularProgress from 'material-ui/CircularProgress'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; -import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { RelayerGridTile, RelayerGridTileStyle } from 'ts/components/relayer_index/relayer_grid_tile'; import { Retry } from 'ts/components/ui/retry'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +export enum RelayerIndexCellStyle { + Expanded = 0, + Minimized, +} + export interface RelayerIndexProps { networkId: number; screenWidth: ScreenWidths; + cellStyle: RelayerIndexCellStyle; } interface RelayerIndexState { @@ -18,7 +24,8 @@ interface RelayerIndexState { error?: Error; } -const CELL_HEIGHT = 290; +const CELL_HEIGHT_EXPANDED = 290; +const CELL_HEIGHT_MINIMIZED = 225; const NUMBER_OF_COLUMNS_LARGE = 3; const NUMBER_OF_COLUMNS_MEDIUM = 2; const NUMBER_OF_COLUMNS_SMALL = 2; @@ -56,16 +63,28 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde </div> ); } else { - const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth); + const numberOfRelayers = this.state.relayerInfos.length; + const numberOfColumns = Math.min( + numberOfRelayers, + this._numberOfColumnsForScreenWidth(this.props.screenWidth), + ); + const isExpanded = this.props.cellStyle === RelayerIndexCellStyle.Expanded; + const cellHeight = isExpanded ? CELL_HEIGHT_EXPANDED : CELL_HEIGHT_MINIMIZED; + const gridTileStyle = isExpanded ? RelayerGridTileStyle.Expanded : RelayerGridTileStyle.Minimized; return ( <GridList - cellHeight={CELL_HEIGHT} + cellHeight={cellHeight} cols={numberOfColumns} padding={GRID_PADDING} style={{ marginTop: -10, marginBottom: 0 }} > {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( - <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} /> + <RelayerGridTile + key={index} + relayerInfo={relayerInfo} + networkId={this.props.networkId} + style={gridTileStyle} + /> ))} </GridList> ); diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index f3787bd27..558d99855 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/send_button.tsx b/packages/website/ts/components/send_button.tsx index 107983dee..27438e5d5 100644 --- a/packages/website/ts/components/send_button.tsx +++ b/packages/website/ts/components/send_button.tsx @@ -1,4 +1,4 @@ -import { BigNumber, logUtils } from '@0xproject/utils'; +import { BigNumber, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx deleted file mode 100644 index a14ab54f5..000000000 --- a/packages/website/ts/components/sidebar_header.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as React from 'react'; - -interface SidebarHeaderProps { - title: string; - iconUrl: string; -} - -interface SidebarHeaderState {} - -export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> { - public render(): React.ReactNode { - return ( - <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> - <div className="flex" style={{ fontSize: 25 }}> - <div style={{ fontWeight: 'bold', fontFamily: 'Roboto Mono' }}>0x</div> - <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> - docs - </div> - </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> - | - </div> - <div className="flex"> - <div> - <img src={this.props.iconUrl} width="22" /> - </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> - {this.props.title} - </div> - </div> - </div> - ); - } -} diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx index 969ef32ff..9ba2bad84 100644 --- a/packages/website/ts/components/token_balances.tsx +++ b/packages/website/ts/components/token_balances.tsx @@ -4,9 +4,9 @@ import { Networks, Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; -import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +} from '@0x/react-shared'; +import { BigNumber, errorUtils, fetchAsync, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Dialog from 'material-ui/Dialog'; import Divider from 'material-ui/Divider'; @@ -165,7 +165,7 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala key="errorOkBtn" label="Ok" primary={true} - onTouchTap={this._onErrorDialogToggle.bind(this, false)} + onClick={this._onErrorDialogToggle.bind(this, false)} />, ]; const isTestNetwork = utils.isTestNetwork(this.props.networkId); @@ -337,14 +337,8 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala const isMintable = (_.includes(configs.SYMBOLS_OF_MINTABLE_KOVAN_TOKENS, token.symbol) && this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Kovan]) || - (_.includes(configs.SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS, token.symbol) && - _.includes( - [ - sharedConstants.NETWORK_ID_BY_NAME[Networks.Rinkeby], - sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten], - ], - this.props.networkId, - )); + (_.includes(configs.SYMBOLS_OF_MINTABLE_ROPSTEN_TOKENS, token.symbol) && + this.props.networkId === sharedConstants.NETWORK_ID_BY_NAME[Networks.Ropsten]); return ( <TableRow key={token.address} style={{ height: TOKEN_TABLE_ROW_HEIGHT }}> <TableRowColumn colSpan={tokenColSpan}> @@ -392,14 +386,6 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala onClickAsyncFn={this._onMintTestTokensAsync.bind(this, token)} /> )} - {token.symbol === ZRX_TOKEN_SYMBOL && ( - <LifeCycleRaisedButton - labelReady="Request" - labelLoading="Sending..." - labelComplete="Sent!" - onClickAsyncFn={this._faucetRequestAsync.bind(this, false)} - /> - )} </TableRowColumn> )} {this.props.screenWidth !== ScreenWidths.Sm && ( diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 806eaeea5..c88c29b8e 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 646d3fc94..d5967cd1d 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -1,19 +1,18 @@ -import { DocsInfo, DocsMenu } from '@0xproject/react-docs'; -import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared'; +import { DocsInfo } from '@0x/react-docs'; +import { ALink, colors, Link, Styles } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import Drawer from 'material-ui/Drawer'; -import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; +import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down'; import { DrawerMenu } from 'ts/components/portal/drawer_menu'; import { ProviderDisplay } from 'ts/components/top_bar/provider_display'; import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item'; import { Container } from 'ts/components/ui/container'; -import { DropDown } from 'ts/components/ui/drop_down'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; +import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -35,8 +34,7 @@ export interface TopBarProps { translate: Translate; docsVersion?: string; availableDocVersions?: string[]; - menu?: DocsMenu; - menuSubsectionsBySection?: MenuSubsectionsBySection; + sectionNameToLinks?: ObjectMap<ALink[]>; displayType?: TopBarDisplayType; docsInfo?: DocsInfo; style?: React.CSSProperties; @@ -109,109 +107,17 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { ? 'flex mx-auto items-center max-width-4' : 'flex mx-auto items-center'; const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT; - const developerSectionMenuItems = [ - <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" /> - </Link>, - <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SmartContract, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Connect, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-standard-relayer-api" - target="_blank" - className="text-decoration-none" - href={constants.URL_STANDARD_RELAYER_API_GITHUB} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.StandardRelayerApi, Deco.CapWords)} - /> - </a>, - <Link key="subMenuItem-jsonSchema" to={WebsitePaths.JSONSchemas} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.JsonSchemas, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-subproviders" to={WebsitePaths.Subproviders} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Subproviders, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-web3Wrapper" to={WebsitePaths.Web3Wrapper} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.SolCov, Deco.CapWords)} - /> - </Link>, - <Link key="subMenuItem-ethereum-types" to={WebsitePaths.EthereumTypes} className="text-decoration-none"> - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)} - /> - </Link>, - <a - key="subMenuItem-whitePaper" - target="_blank" - className="text-decoration-none" - href={`${WebsitePaths.Whitepaper}`} - > - <MenuItem - style={{ fontSize: styles.menuItem.fontSize }} - primaryText={this.props.translate.get(Key.Whitepaper, Deco.CapWords)} - /> - </a>, - <a - key="subMenuItem-github" - target="_blank" - className="text-decoration-none" - href={constants.URL_GITHUB_ORG} - > - <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" /> - </a>, - ]; const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {}; const fullWidthClasses = isExpandedDisplayType ? 'pr4' : ''; const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png'; const menuClasses = `col col-${ - isExpandedDisplayType ? '4' : '5' + isExpandedDisplayType ? '4' : '6' } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`; const menuIconStyle = { fontSize: 25, color: isNightVersion ? 'white' : 'black', cursor: 'pointer', }; - const activeNode = ( - <div className="flex relative" style={{ color: menuIconStyle.color }}> - <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> - <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}> - <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} /> - </div> - </div> - ); - const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>; return ( <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} @@ -224,49 +130,45 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { paddingLeft={this.props.paddingLeft} paddingRight={this.props.paddingRight} > - <Link to={`${WebsitePaths.Home}`} className="text-decoration-none"> + <Link to={WebsitePaths.Home}> <img src={logoUrl} height="30" /> </Link> <div className="flex-auto" /> {!this._isViewingPortal() && ( <div className={menuClasses}> <div className="flex items-center justify-between"> - <DropDown - activeNode={activeNode} - popoverContent={popoverContent} - anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }} - targetOrigin={{ horizontal: 'middle', vertical: 'top' }} - style={styles.menuItem} + <DevelopersDropDown + location={this.props.location} + menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }} + translate={this.props.translate} + menuIconStyle={menuIconStyle} /> <TopBarMenuItem - title={this.props.translate.get(Key.Wiki, Deco.Cap)} - path={`${WebsitePaths.Wiki}`} + title={this.props.translate.get(Key.Blog, Deco.Cap)} + path={constants.URL_BLOG} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={false} + shouldOpenInNewTab={true} /> <TopBarMenuItem - title={this.props.translate.get(Key.Blog, Deco.Cap)} - path={constants.URL_BLOG} + title={this.props.translate.get(Key.About, Deco.Cap)} + path={WebsitePaths.About} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={true} /> <TopBarMenuItem - title={this.props.translate.get(Key.About, Deco.Cap)} - path={`${WebsitePaths.About}`} + title={this.props.translate.get(Key.Careers, Deco.Cap)} + path={WebsitePaths.Careers} style={styles.menuItem} isNightVersion={isNightVersion} - isExternal={false} /> <TopBarMenuItem title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} - path={`${WebsitePaths.Portal}`} + path={WebsitePaths.Portal} isPrimary={true} style={styles.menuItem} className={`${isExpandedDisplayType && 'md-hide'}`} isNightVersion={isNightVersion} - isExternal={false} /> </div> </div> @@ -323,104 +225,36 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { onRequestChange={this._onMenuButtonClick.bind(this)} > <div className="clearfix"> - {this._renderDocsMenu()} - {this._renderWiki()} <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> {this.props.translate.get(Key.Website, Deco.Cap)} </div> - <Link to={WebsitePaths.Home} className="text-decoration-none"> + <Link to={WebsitePaths.Home}> <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem> </Link> - <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> - <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem> + <Link to={WebsitePaths.Docs}> + <MenuItem className="py2">{this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> </Link> - {!this._isViewing0xjsDocs() && ( - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem className="py2">0x.js {this.props.translate.get(Key.Docs, Deco.Cap)}</MenuItem> - </Link> - )} - {!this._isViewingConnectDocs() && ( - <Link to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.Connect, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSmartContractsDocs() && ( - <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.SmartContract, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingWeb3WrapperDocs() && ( - <Link to={WebsitePaths.Web3Wrapper} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.Web3Wrapper, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSolCompilerDocs() && ( - <Link to={WebsitePaths.SolCompiler} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.SolCompiler, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingJsonSchemasDocs() && ( - <Link to={WebsitePaths.JSONSchemas} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.JsonSchemas, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSolCovDocs() && ( - <Link to={WebsitePaths.SolCov} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.SolCov, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingSubprovidersDocs() && ( - <Link to={WebsitePaths.Subproviders} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.Subproviders, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} - {!this._isViewingEthereumTypesDocs() && ( - <Link to={WebsitePaths.EthereumTypes} className="text-decoration-none"> - <MenuItem className="py2"> - {this.props.translate.get(Key.EthereumTypes, Deco.Cap)}{' '} - {this.props.translate.get(Key.Docs, Deco.Cap)} - </MenuItem> - </Link> - )} {!this._isViewingPortal() && ( - <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> + <Link to={WebsitePaths.Portal}> <MenuItem className="py2"> {this.props.translate.get(Key.PortalDApp, Deco.CapWords)} </MenuItem> </Link> )} - <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> + <Link to={WebsitePaths.Whitepaper} shouldOpenInNewTab={true}> <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem> - </a> - <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> + </Link> + <Link to={WebsitePaths.About}> <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem> </Link> - <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> + <Link to={WebsitePaths.Careers}> + <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem> + </Link> + <Link to={constants.URL_BLOG} shouldOpenInNewTab={true}> <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem> - </a> - <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> - <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> + </Link> + <Link to={WebsitePaths.FAQ}> + <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}> {this.props.translate.get(Key.Faq, Deco.Cap)} </MenuItem> </Link> @@ -428,52 +262,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </Drawer> ); } - private _renderDocsMenu(): React.ReactNode { - if ( - (!this._isViewing0xjsDocs() && - !this._isViewingSmartContractsDocs() && - !this._isViewingWeb3WrapperDocs() && - !this._isViewingSolCompilerDocs() && - !this._isViewingJsonSchemasDocs() && - !this._isViewingSolCovDocs() && - !this._isViewingSubprovidersDocs() && - !this._isViewingConnectDocs()) || - _.isUndefined(this.props.menu) - ) { - return undefined; - } - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - topLevelMenu={this.props.menu} - menuSubsectionsBySection={this.props.menuSubsectionsBySection} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - onVersionSelected={this.props.onVersionSelected} - /> - </div> - ); - } - private _renderWiki(): React.ReactNode { - if (!this._isViewingWiki()) { - return undefined; - } - - return ( - <div className="lg-hide md-hide"> - <NestedSidebarMenu - topLevelMenu={this.props.menuSubsectionsBySection} - menuSubsectionsBySection={this.props.menuSubsectionsBySection} - sidebarHeader={this.props.sidebarHeader} - shouldDisplaySectionHeaders={false} - onMenuItemClick={this._onMenuButtonClick.bind(this)} - /> - </div> - ); - } private _onMenuButtonClick(): void { this.setState({ isDrawerOpen: !this.state.isDrawerOpen, @@ -482,62 +270,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { private _isViewingPortal(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.Portal); } - private _isViewingDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Docs); - } private _isViewingFAQ(): boolean { return _.includes(this.props.location.pathname, WebsitePaths.FAQ); } - private _isViewing0xjsDocs(): boolean { - return ( - _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs) || - _.includes(this.props.location.pathname, WebsiteLegacyPaths.ZeroExJs) - ); - } - private _isViewingConnectDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Connect); - } - private _isViewingSmartContractsDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts); - } - private _isViewingWeb3WrapperDocs(): boolean { - return ( - _.includes(this.props.location.pathname, WebsitePaths.Web3Wrapper) || - _.includes(this.props.location.pathname, WebsiteLegacyPaths.Web3Wrapper) - ); - } - private _isViewingSolCompilerDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.SolCompiler); - } - private _isViewingJsonSchemasDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas); - } - private _isViewingSolCovDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.SolCov); - } - private _isViewingSubprovidersDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Subproviders); - } - private _isViewingEthereumTypesDocs(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.EthereumTypes); - } - private _isViewingWiki(): boolean { - return _.includes(this.props.location.pathname, WebsitePaths.Wiki); - } private _shouldDisplayBottomBar(): boolean { - return ( - this._isViewingWiki() || - this._isViewingFAQ() || - this._isViewingDocs() || - this._isViewing0xjsDocs() || - this._isViewingSmartContractsDocs() || - this._isViewingWeb3WrapperDocs() || - this._isViewingSolCompilerDocs() || - this._isViewingJsonSchemasDocs() || - this._isViewingSolCovDocs() || - this._isViewingSubprovidersDocs() || - this._isViewingConnectDocs() || - this._isViewingPortal() - ); + return this._isViewingFAQ() || this._isViewingPortal(); } } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx index 25fab2868..9f15cffbb 100644 --- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -1,7 +1,6 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; import { CallToAction } from 'ts/components/ui/button'; @@ -13,7 +12,7 @@ interface TopBarMenuItemProps { title: string; path?: string; isPrimary?: boolean; - isExternal: boolean; + shouldOpenInNewTab?: boolean; style?: React.CSSProperties; className?: string; isNightVersion?: boolean; @@ -26,6 +25,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM isPrimary: false, style: DEFAULT_STYLE, className: '', + shouldOpenInNewTab: false, isNightVersion: false, }; public render(): React.ReactNode { @@ -38,20 +38,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM ); return ( <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}> - {this.props.isExternal ? ( - <a - className="text-decoration-none" - style={{ color: linkColor }} - target="_blank" - href={this.props.path} - > - {itemContent} - </a> - ) : ( - <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}> - {itemContent} - </Link> - )} + <Link to={this.props.path} shouldOpenInNewTab={this.props.shouldOpenInNewTab} fontColor={linkColor}> + {itemContent} + </Link> </div> ); } diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx index 294fb8590..e701686b0 100644 --- a/packages/website/ts/components/track_token_confirmation.tsx +++ b/packages/website/ts/components/track_token_confirmation.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx index 321a8b0e1..667027dce 100644 --- a/packages/website/ts/components/trade_history/trade_history_item.tsx +++ b/packages/website/ts/components/trade_history/trade_history_item.tsx @@ -1,6 +1,6 @@ -import { colors, EtherscanLinkSuffixes } from '@0xproject/react-shared'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { colors, EtherscanLinkSuffixes } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import Paper from 'material-ui/Paper'; import * as moment from 'moment'; diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index b571d8c1c..32e0f1be8 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { AlertTypes } from 'ts/types'; diff --git a/packages/website/ts/components/ui/allowance_state_view.tsx b/packages/website/ts/components/ui/allowance_state_view.tsx index 93d6b0ebb..fc754421a 100644 --- a/packages/website/ts/components/ui/allowance_state_view.tsx +++ b/packages/website/ts/components/ui/allowance_state_view.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Spinner } from 'ts/components/ui/spinner'; diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx index 9e5a256b6..a1a8ff89b 100644 --- a/packages/website/ts/components/ui/balance.tsx +++ b/packages/website/ts/components/ui/balance.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 2952c8859..92f927843 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { darken, saturate } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -10,11 +10,13 @@ export interface ButtonProps { fontFamily?: string; backgroundColor?: string; borderColor?: string; + borderRadius?: string; width?: string; padding?: string; type?: string; isDisabled?: boolean; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + textAlign?: string; } const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( @@ -29,11 +31,12 @@ export const Button = styled(PlainButton)` color: ${props => props.fontColor}; transition: background-color, opacity 0.5s ease; padding: ${props => props.padding}; - border-radius: 6px; + border-radius: ${props => props.borderRadius}; font-weight: 500; outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; + text-align: ${props => props.textAlign}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { @@ -52,11 +55,13 @@ export const Button = styled(PlainButton)` Button.defaultProps = { fontSize: '12px', + borderRadius: '6px', backgroundColor: colors.white, width: 'auto', fontFamily: 'Roboto', isDisabled: false, padding: '0.8em 2.2em', + textAlign: 'center', }; Button.displayName = 'Button'; @@ -96,4 +101,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ CallToAction.defaultProps = { type: 'dark', fontSize: '14px', + padding: '0.9em 1.6em', }; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index f2ae68b70..ece077563 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,7 +15,11 @@ export interface ContainerProps { paddingRight?: StringOrNum; paddingLeft?: StringOrNum; backgroundColor?: string; + background?: string; borderRadius?: StringOrNum; + borderBottomLeftRadius?: StringOrNum; + borderBottomRightRadius?: StringOrNum; + borderBottom?: StringOrNum; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index 0330d1843..59e398cb6 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx index 0cb4b387c..87ce32126 100644 --- a/packages/website/ts/components/ui/menu_item.tsx +++ b/packages/website/ts/components/ui/custom_menu_item.tsx @@ -1,24 +1,23 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link } from 'react-router-dom'; -interface MenuItemProps { +interface CustomMenuItemProps { to: string; - style?: React.CSSProperties; onClick?: () => void; className?: string; } -interface MenuItemState { +interface CustomMenuItemState { isHovering: boolean; } -export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { - public static defaultProps: Partial<MenuItemProps> = { +export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> { + public static defaultProps: Partial<CustomMenuItemProps> = { onClick: _.noop.bind(_), className: '', }; - public constructor(props: MenuItemProps) { + public constructor(props: CustomMenuItemProps) { super(props); this.state = { isHovering: false, @@ -30,7 +29,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> { opacity: this.state.isHovering ? 0.5 : 1, }; return ( - <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}> + <Link to={this.props.to}> <div onClick={this.props.onClick.bind(this)} className={`mx-auto ${this.props.className}`} diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 4d5caef08..4138b3fe5 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import Popover from 'material-ui/Popover'; import * as React from 'react'; import { MaterialUIPosition } from 'ts/types'; @@ -21,6 +22,7 @@ export interface DropDownProps { zDepth?: number; activateEvent?: DropdownMouseEvent; closeEvent?: DropdownMouseEvent; + popoverStyle?: React.CSSProperties; } interface DropDownState { @@ -34,6 +36,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { zDepth: 1, activateEvent: DropdownMouseEvent.Hover, closeEvent: DropdownMouseEvent.Hover, + popoverStyle: {}, }; private _isHovering: boolean; private _popoverCloseCheckIntervalId: number; @@ -73,10 +76,15 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { anchorEl={this.state.anchorEl} anchorOrigin={this.props.anchorOrigin} targetOrigin={this.props.targetOrigin} - onRequestClose={this._closePopover.bind(this)} + onRequestClose={ + this.props.closeEvent === DropdownMouseEvent.Click + ? this._closePopover.bind(this) + : _.noop.bind(_) + } useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click} animated={false} zDepth={this.props.zDepth} + style={this.props.popoverStyle} > <div onMouseEnter={this._onHover.bind(this)} @@ -92,7 +100,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void { if (this.props.activateEvent === DropdownMouseEvent.Click) { this.setState({ - isDropDownOpen: true, + isDropDownOpen: !this.state.isDropDownOpen, anchorEl: event.currentTarget, }); } diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx index f449a8e75..71d98af56 100644 --- a/packages/website/ts/components/ui/ethereum_address.tsx +++ b/packages/website/ts/components/ui/ethereum_address.tsx @@ -1,4 +1,4 @@ -import { EtherscanLinkSuffixes } from '@0xproject/react-shared'; +import { EtherscanLinkSuffixes } from '@0x/react-shared'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import { EtherScanIcon } from 'ts/components/ui/etherscan_icon'; diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 0beb69123..57ab91ba2 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx index ac3c30fec..7c3a482a4 100644 --- a/packages/website/ts/components/ui/fake_text_field.tsx +++ b/packages/website/ts/components/ui/fake_text_field.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; import { InputLabel } from 'ts/components/ui/input_label'; diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx index 13cd239da..9f469ec69 100644 --- a/packages/website/ts/components/ui/icon_button.tsx +++ b/packages/website/ts/components/ui/icon_button.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx index e01a71a53..e5f4f6c70 100644 --- a/packages/website/ts/components/ui/input.tsx +++ b/packages/website/ts/components/ui/input.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 8eda45a5d..e7afb5a17 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as React from 'react'; export interface InputLabelProps { diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 380fbc77d..a8daf4102 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -1,5 +1,5 @@ -import { colors } from '@0xproject/react-shared'; -import { errorUtils } from '@0xproject/utils'; +import { colors } from '@0x/react-shared'; +import { errorUtils } from '@0x/utils'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -71,7 +71,7 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButton style={{ width: '100%' }} backgroundColor={this.props.backgroundColor} labelColor={this.props.labelColor} - onTouchTap={this.onClickAsync.bind(this)} + onClick={this.onClickAsync.bind(this)} disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY} /> ); diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index a25550475..6c0572437 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,4 +1,4 @@ -import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx index db0a4188d..c97b1e700 100644 --- a/packages/website/ts/components/ui/pointer.tsx +++ b/packages/website/ts/components/ui/pointer.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index 0f96586ec..5080462fa 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; export interface RequiredLabelProps { diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx index 8a9349c6d..45ee752e3 100644 --- a/packages/website/ts/components/ui/simple_menu.tsx +++ b/packages/website/ts/components/ui/simple_menu.tsx @@ -1,7 +1,7 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; -import { Link } from 'react-router-dom'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent< GoToAccountManagementSimpleMenuItemProps > = ({ onClick }) => { return ( - <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}> + <Link to={`${WebsitePaths.Portal}/account`}> <SimpleMenuItem displayText="Manage Account..." onClick={onClick} /> </Link> ); diff --git a/packages/website/ts/components/ui/spinner.tsx b/packages/website/ts/components/ui/spinner.tsx index e8670cc3e..dc73e74e3 100644 --- a/packages/website/ts/components/ui/spinner.tsx +++ b/packages/website/ts/components/ui/spinner.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; import { styled } from 'ts/style/theme'; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index f1d1ae7d4..406da8fe1 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; interface SwapIconProps { diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 734483564..c13e21913 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { darken } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -19,7 +19,10 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; hoverColor?: string; + letterSpacing?: string | number; noWrap?: boolean; + textAlign?: string; + display?: string; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( @@ -33,6 +36,8 @@ export const Text = styled(PlainText)` font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; font-size: ${props => props.fontSize}; + text-align: ${props => props.textAlign}; + letter-spacing: ${props => props.letterSpacing}; text-decoration-line: ${props => props.textDecorationLine}; ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; @@ -41,6 +46,7 @@ export const Text = styled(PlainText)` ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; ${props => (props.noWrap ? 'white-space: nowrap' : '')}; + ${props => (props.display ? `display: ${props.display}` : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx new file mode 100644 index 000000000..6d38580b9 --- /dev/null +++ b/packages/website/ts/components/ui/typed_text.tsx @@ -0,0 +1,75 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import Typist from 'react-typist'; + +import { Text, TextProps } from 'ts/components/ui/text'; + +import 'react-typist/dist/Typist.css'; + +export interface TypedTextProps extends TextProps { + textList: string[]; + shouldRepeat?: boolean; + wordDelayMs?: number; + avgKeystrokeDelayMs?: number; + stdKeystrokeDelay?: number; +} + +export interface TypedTextState { + cycleCount: number; +} + +export class TypedText extends React.Component<TypedTextProps, TypedTextState> { + public static defaultProps = { + shouldRepeat: false, + avgKeystrokeDelayMs: 90, + wordDelayMs: 1000, + }; + public state = { + cycleCount: 0, + }; + public render(): React.ReactNode { + const { + textList, + shouldRepeat, + wordDelayMs, + avgKeystrokeDelayMs, + stdKeystrokeDelay, + // tslint:disable-next-line + ...textProps + } = this.props; + const { cycleCount } = this.state; + if (_.isEmpty(textList)) { + return null; + } + const typistChildren: React.ReactNode[] = []; + _.forEach(textList, text => { + typistChildren.push( + <Text key={`text-${text}-${cycleCount}`} {...textProps}> + {text} + </Text>, + ); + if (wordDelayMs) { + typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />); + } + typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />); + }); + return ( + <Typist + avgTypingDelay={avgKeystrokeDelayMs} + stdTypingDelay={stdKeystrokeDelay} + className="inline" + key={`typist-key-${cycleCount}`} + onTypingDone={this._onTypingDone.bind(this)} + > + {typistChildren} + </Typist> + ); + } + private _onTypingDone(): void { + if (this.props.shouldRepeat) { + this.setState({ + cycleCount: this.state.cycleCount + 1, + }); + } + } +} diff --git a/packages/website/ts/components/visual_order.tsx b/packages/website/ts/components/visual_order.tsx index a8d18006e..d723757d2 100644 --- a/packages/website/ts/components/visual_order.tsx +++ b/packages/website/ts/components/visual_order.tsx @@ -1,4 +1,4 @@ -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import * as React from 'react'; import { Party } from 'ts/components/ui/party'; diff --git a/packages/website/ts/components/wallet/body_overlay.tsx b/packages/website/ts/components/wallet/body_overlay.tsx index 26359d0d2..3795f0eaa 100644 --- a/packages/website/ts/components/wallet/body_overlay.tsx +++ b/packages/website/ts/components/wallet/body_overlay.tsx @@ -13,7 +13,7 @@ import { AccountState, ProviderType } from 'ts/types'; import { utils } from 'ts/utils/utils'; const METAMASK_IMG_SRC = '/images/metamask_icon.png'; -const TOSHI_IMG_SRC = '/images/toshi_logo.jpg'; +const COINBASE_WALLET_IMG_SRC = '/images/coinbase_wallet_logo.png'; export interface BodyOverlayProps { dispatcher: Dispatcher; @@ -116,8 +116,8 @@ const UseDifferentWallet = (props: UseDifferentWallet) => { const GetWalletCallToAction = () => { const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile(); - const imageUrl = isOnMobile ? TOSHI_IMG_SRC : METAMASK_IMG_SRC; - const text = isOnMobile ? 'Get Toshi Wallet' : 'Get MetaMask Wallet'; + const imageUrl = isOnMobile ? COINBASE_WALLET_IMG_SRC : METAMASK_IMG_SRC; + const text = isOnMobile ? 'Get Coinbase Wallet' : 'Get MetaMask Wallet'; return ( <a href={downloadLink} target="_blank" style={{ textDecoration: 'none' }}> <Island diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 6abaa840b..326cd3cfa 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -1,5 +1,5 @@ -import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared'; -import { BigNumber, errorUtils } from '@0xproject/utils'; +import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0x/react-shared'; +import { BigNumber, errorUtils } from '@0x/utils'; import * as _ from 'lodash'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx index 54ace7ae2..7de3afbf8 100644 --- a/packages/website/ts/components/wallet/wrap_ether_item.tsx +++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx @@ -1,6 +1,6 @@ -import { Styles } from '@0xproject/react-shared'; -import { BigNumber, logUtils } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { Styles } from '@0x/react-shared'; +import { BigNumber, logUtils } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as _ from 'lodash'; import FlatButton from 'material-ui/FlatButton'; import * as React from 'react'; diff --git a/packages/website/ts/containers/asset_buyer_documentation.ts b/packages/website/ts/containers/asset_buyer_documentation.ts new file mode 100644 index 000000000..c93b9332d --- /dev/null +++ b/packages/website/ts/containers/asset_buyer_documentation.ts @@ -0,0 +1,71 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown = require('md/docs/asset_buyer/introduction'); +const InstallationMarkdown = require('md/docs/asset_buyer/installation'); +const UsageMarkdown = require('md/docs/asset_buyer/usage'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', + usage: 'usage', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.AssetBuyer, + packageName: '@0x/asset-buyer', + type: SupportedDocJson.TypeDoc, + displayName: 'AssetBuyer', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + introduction: [markdownSections.introduction], + install: [markdownSections.installation], + usage: [markdownSections.usage], + }, + sectionNameToMarkdownByVersion: { + '0.0.1': { + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, + [markdownSections.usage]: UsageMarkdown, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/connect_documentation.ts b/packages/website/ts/containers/connect_documentation.ts index abf419347..0f11e0809 100644 --- a/packages/website/ts/containers/connect_documentation.ts +++ b/packages/website/ts/containers/connect_documentation.ts @@ -1,82 +1,49 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/connect/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/connect/1.0.0/installation'); +const IntroMarkdown1 = require('md/docs/connect/1/introduction'); +const IntroMarkdown2 = require('md/docs/connect/2/introduction'); +const InstallationMarkdown1 = require('md/docs/connect/1/installation'); +const InstallationMarkdown3 = require('md/docs/connect/3/installation'); /* tslint:enable:no-var-requires */ -const connectDocSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', - httpClient: 'httpClient', - webSocketOrderbookChannel: 'webSocketOrderbookChannel', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Connect, + packageName: '@0x/connect', type: SupportedDocJson.TypeDoc, displayName: '0x Connect', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [connectDocSections.introduction], - install: [connectDocSections.installation], - httpClient: [connectDocSections.httpClient], - webSocketOrderbookChannel: [connectDocSections.webSocketOrderbookChannel], - types: [connectDocSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [connectDocSections.introduction]: IntroMarkdownV1, - [connectDocSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, - }, - sectionNameToModulePath: { - [connectDocSections.httpClient]: ['"src/http_client"'], - [connectDocSections.webSocketOrderbookChannel]: ['"src/ws_orderbook_channel"'], - [connectDocSections.types]: ['"src/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: connectDocSections, - visibleConstructors: [connectDocSections.httpClient, connectDocSections.webSocketOrderbookChannel], - typeConfigs: { - typeNameToExternalLink: { - Provider: constants.URL_WEB3_PROVIDER_DOCS, - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '2.0.0-rc.1': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown1, + }, + '3.0.2': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown3, }, - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Client', - 'FeesRequest', - 'FeesResponse', - 'OrderbookChannel', - 'OrderbookChannelHandler', - 'OrderbookChannelSubscriptionOpts', - 'OrderbookRequest', - 'OrderbookResponse', - 'OrdersRequest', - 'OrdersRequestOpts', - 'PagedRequestOpts', - 'TokenPairsItem', - 'TokenPairsRequest', - 'TokenPairsRequestOpts', - 'TokenTradeInfo', - 'WebSocketOrderbookChannelConfig', - 'Order', - 'SignedOrder', - 'ECSignature', - ], }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -85,6 +52,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -96,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/contract_wrappers_documentation.ts b/packages/website/ts/containers/contract_wrappers_documentation.ts new file mode 100644 index 000000000..4c05605e3 --- /dev/null +++ b/packages/website/ts/containers/contract_wrappers_documentation.ts @@ -0,0 +1,71 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown1 = require('md/docs/contract_wrappers/1/introduction'); +const InstallMarkdownV1 = require('md/docs/contract_wrappers/1/installation'); +const InstallMarkdownV2 = require('md/docs/contract_wrappers/2/installation'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.ContractWrappers, + packageName: '@0x/contract-wrappers', + type: SupportedDocJson.TypeDoc, + displayName: 'Contract Wrappers', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], + }, + sectionNameToMarkdownByVersion: { + '0.0.1': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallMarkdownV1, + }, + '3.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallMarkdownV2, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + docsInfo, + translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts new file mode 100644 index 000000000..e0ca439a6 --- /dev/null +++ b/packages/website/ts/containers/docs_home.ts @@ -0,0 +1,31 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocsHome as DocsHomeComponent, DocsHomeProps } from 'ts/pages/documentation/docs_home'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocsHomeProps): ConnectedState => ({ + translate: state.translate, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const DocsHome: React.ComponentClass<DocsHomeProps> = connect(mapStateToProps, mapDispatchToProps)( + DocsHomeComponent, +); diff --git a/packages/website/ts/containers/ethereum_types_documentation.ts b/packages/website/ts/containers/ethereum_types_documentation.ts index 0be8dd3bc..9d1df1d1f 100644 --- a/packages/website/ts/containers/ethereum_types_documentation.ts +++ b/packages/website/ts/containers/ethereum_types_documentation.ts @@ -1,12 +1,11 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ @@ -14,7 +13,7 @@ const IntroMarkdown = require('md/docs/ethereum_types/introduction'); const InstallationMarkdown = require('md/docs/ethereum_types/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', types: docConstants.TYPES_SECTION_NAME, @@ -22,78 +21,20 @@ const docSections = { const docsInfoConfig: DocsInfoConfig = { id: DocPackages.EthereumTypes, + packageName: 'ethereum-types', type: SupportedDocJson.TypeDoc, displayName: 'Ethereum Types', packageUrl: 'https://github.com/0xProject/0x-monorepo/packages/ethereum-types', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdown, - [docSections.installation]: InstallationMarkdown, - }, - }, - sectionNameToModulePath: { - [docSections.types]: ['"index"'], - }, - visibleConstructors: [], - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Provider', - 'JSONRPCErrorCallback', - 'Provider', - 'ContractAbi', - 'AbiDefinition', - 'FunctionAbi', - 'ConstructorStateMutability', - 'StateMutability', - 'MethodAbi', - 'ConstructorAbi', - 'FallbackAbi', - 'EventParameter', - 'EventAbi', - 'DataItem', - 'OpCode', - // 'StructLog', // TODO: This type breaks the docs so we don't render it for now - 'TransactionTrace', - 'Unit', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'BlockWithoutTransactionData', - 'BlockWithTransactionData', - 'Transaction', - 'TxData', - 'CallData', - 'FilterObject', - 'LogTopic', - 'DecodedLogEntry', - 'DecodedLogEntryEvent', - 'LogEntryEvent', - 'LogEntry', - 'TxDataPayable', - 'TransactionReceipt', - 'AbiType', - 'ContractEventArg', - 'DecodedLogArgs', - 'LogWithDecodedArgs', - 'RawLog', - 'BlockParamLiteral', - 'BlockParam', - 'RawLogEntry', - 'SolidityTypes', - 'TransactionReceiptWithDecodedLogs', - ], - typeNameToExternalLink: { - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + [markdownSections.introduction]: IntroMarkdown, + [markdownSections.installation]: InstallationMarkdown, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -102,6 +43,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -113,6 +55,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/generate_order_form.ts b/packages/website/ts/containers/generate_order_form.ts index 92296dbab..98b2831ce 100644 --- a/packages/website/ts/containers/generate_order_form.ts +++ b/packages/website/ts/containers/generate_order_form.ts @@ -1,5 +1,4 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { connect } from 'react-redux'; import { Blockchain } from 'ts/blockchain'; @@ -20,7 +19,7 @@ interface ConnectedState { blockchainErr: BlockchainErrs; blockchainIsLoaded: boolean; orderExpiryTimestamp: BigNumber; - orderECSignature: ECSignature; + orderSignature: string; userAddress: string; orderTakerAddress: string; orderSalt: BigNumber; @@ -34,7 +33,7 @@ const mapStateToProps = (state: State, _ownProps: GenerateOrderFormProps): Conne blockchainErr: state.blockchainErr, blockchainIsLoaded: state.blockchainIsLoaded, orderExpiryTimestamp: state.orderExpiryTimestamp, - orderECSignature: state.orderECSignature, + orderSignature: state.orderSignature, orderTakerAddress: state.orderTakerAddress, orderSalt: state.orderSalt, networkId: state.networkId, diff --git a/packages/website/ts/containers/inputs/eth_amount_input.ts b/packages/website/ts/containers/inputs/eth_amount_input.ts index 9ef903b55..45d3ddebd 100644 --- a/packages/website/ts/containers/inputs/eth_amount_input.ts +++ b/packages/website/ts/containers/inputs/eth_amount_input.ts @@ -1,5 +1,5 @@ -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as React from 'react'; import { connect } from 'react-redux'; import { State } from 'ts/redux/reducer'; diff --git a/packages/website/ts/containers/json_schemas_documentation.ts b/packages/website/ts/containers/json_schemas_documentation.ts index 523777114..9c4bb8e26 100644 --- a/packages/website/ts/containers/json_schemas_documentation.ts +++ b/packages/website/ts/containers/json_schemas_documentation.ts @@ -1,63 +1,69 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/json_schemas/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/json_schemas/1.0.0/installation'); -const UsageMarkdownV1 = require('md/docs/json_schemas/1.0.0/usage'); -const SchemasMarkdownV1 = require('md/docs/json_schemas/1.0.0/schemas'); +const IntroMarkdown1 = require('md/docs/json_schemas/1/introduction'); +const IntroMarkdown3 = require('md/docs/json_schemas/3/introduction'); +const InstallationMarkdown1 = require('md/docs/json_schemas/1/installation'); +const InstallationMarkdown3 = require('md/docs/json_schemas/3/installation'); +const usageMarkdown1 = require('md/docs/json_schemas/1/usage'); +const usageMarkdown3 = require('md/docs/json_schemas/3/usage'); +const SchemasMarkdown1 = require('md/docs/json_schemas/1/schemas'); +const SchemasMarkdown2 = require('md/docs/json_schemas/2/schemas'); +const SchemasMarkdown3 = require('md/docs/json_schemas/3/schemas'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - schemaValidator: 'schemaValidator', schemas: 'schemas', }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.JSONSchemas, + packageName: '@0x/json-schemas', type: SupportedDocJson.TypeDoc, displayName: 'JSON Schemas', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - schemaValidator: [docSections.schemaValidator], - schemas: [docSections.schemas], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], + schemas: [markdownSections.schemas], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.schemas]: SchemasMarkdownV1, - [docSections.usage]: UsageMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.schemas]: SchemasMarkdown1, + [markdownSections.usage]: usageMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.schemaValidator]: ['"json-schemas/src/schema_validator"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [docSections.schemaValidator], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [], - typeNameToExternalLink: { - Schema: - 'https://github.com/tdegrunt/jsonschema/blob/5c2edd4baba149964aec0f23c87ad12c25a50dfb/lib/index.d.ts#L49', + '1.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.schemas]: SchemasMarkdown2, + [markdownSections.usage]: usageMarkdown1, + }, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown3, + [markdownSections.installation]: InstallationMarkdown3, + [markdownSections.schemas]: SchemasMarkdown2, + [markdownSections.usage]: usageMarkdown3, + }, + '2.0.1': { + [markdownSections.introduction]: IntroMarkdown3, + [markdownSections.installation]: InstallationMarkdown3, + [markdownSections.schemas]: SchemasMarkdown3, + [markdownSections.usage]: usageMarkdown3, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -66,6 +72,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -77,6 +84,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts index c6570f514..f1d794988 100644 --- a/packages/website/ts/containers/order_utils_documentation.ts +++ b/packages/website/ts/containers/order_utils_documentation.ts @@ -1,74 +1,45 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/order_utils/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/order_utils/1.0.0/installation'); +const IntroMarkdown1 = require('md/docs/order_utils/1/introduction'); +const InstallationMarkdown1 = require('md/docs/order_utils/1/installation'); +const IntroMarkdown2 = require('md/docs/order_utils/2/introduction'); +const InstallationMarkdown2 = require('md/docs/order_utils/2/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', - usage: 'usage', - types: 'types', }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.OrderUtils, + packageName: '@0x/order-utils', type: SupportedDocJson.TypeDoc, displayName: 'Order utils', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.usage]: [ - '"order-utils/src/order_hash"', - '"order-utils/src/signature_utils"', - '"order-utils/src/order_factory"', - '"order-utils/src/salt"', - '"order-utils/src/assert"', - '"order-utils/src/constants"', - ], - [docSections.types]: ['"order-utils/src/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'OrderError', - 'Order', - 'SignedOrder', - 'ECSignature', - 'Provider', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'JSONRPCErrorCallback', - ], - typeNameToExternalLink: { - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -77,6 +48,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -88,6 +60,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/order_watcher_documentation.ts b/packages/website/ts/containers/order_watcher_documentation.ts new file mode 100644 index 000000000..ac92e6a22 --- /dev/null +++ b/packages/website/ts/containers/order_watcher_documentation.ts @@ -0,0 +1,72 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { DocPackages, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +/* tslint:disable:no-var-requires */ +const IntroMarkdown1 = require('md/docs/order_watcher/1/introduction'); +const InstallationMarkdown1 = require('md/docs/order_watcher/1/installation'); +const IntroMarkdown2 = require('md/docs/order_watcher/2/introduction'); +const InstallationMarkdown2 = require('md/docs/order_watcher/2/installation'); +/* tslint:enable:no-var-requires */ + +const markdownSections = { + introduction: 'introduction', + installation: 'installation', +}; + +const docsInfoConfig: DocsInfoConfig = { + id: DocPackages.OrderWatcher, + packageName: '@0x/order-watcher', + type: SupportedDocJson.TypeDoc, + displayName: 'OrderWatcher', + packageUrl: 'https://github.com/0xProject/0x-monorepo', + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], + }, + sectionNameToMarkdownByVersion: { + '0.0.1': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + }, + '2.2.0': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, + }, + }, + markdownSections, +}; +const docsInfo = new DocsInfo(docsInfoConfig); + +interface ConnectedState { + docsVersion: string; + availableDocVersions: string[]; + docsInfo: DocsInfo; + translate: Translate; + screenWidth: ScreenWidths; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, + screenWidth: state.screenWidth, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)( + DocPageComponent, +); diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts index 6747cdf4e..5661e0a97 100644 --- a/packages/website/ts/containers/portal.ts +++ b/packages/website/ts/containers/portal.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; @@ -6,7 +6,7 @@ import { Dispatch } from 'redux'; import { Portal as PortalComponent, PortalProps as PortalComponentProps } from 'ts/components/portal/portal'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types'; +import { BlockchainErrs, HashData, PortalOrder, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -25,7 +25,7 @@ interface ConnectedState { screenWidth: ScreenWidths; shouldBlockchainErrDialogBeOpen: boolean; userAddress: string; - userSuppliedOrderCache: Order; + userSuppliedOrderCache: PortalOrder; flashMessage?: string | React.ReactNode; translate: Translate; isPortalOnboardingShowing: boolean; diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index a813205b1..66473733c 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; diff --git a/packages/website/ts/containers/smart_contracts_documentation.ts b/packages/website/ts/containers/smart_contracts_documentation.ts index b0a712477..57c98fa3b 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.ts +++ b/packages/website/ts/containers/smart_contracts_documentation.ts @@ -1,65 +1,92 @@ -import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; -import { Networks } from '@0xproject/react-shared'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; +import { Networks } from '@0x/react-shared'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages, SmartContractDocSections as Sections } from 'ts/types'; +import { DocPackages, ScreenWidths, SmartContractDocSections as Sections } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/smart_contracts/1.0.0/introduction'); +const IntroMarkdown1 = require('md/docs/smart_contracts/1/introduction'); +const IntroMarkdown2 = require('md/docs/smart_contracts/2/introduction'); /* tslint:enable:no-var-requires */ const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SmartContracts, - type: SupportedDocJson.Doxity, + packageName: 'contracts', + type: SupportedDocJson.SolDoc, displayName: '0x Smart Contracts', packageUrl: 'https://github.com/0xProject/contracts', - menu: { + markdownMenu: { introduction: [Sections.Introduction], - contracts: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [Sections.Introduction]: IntroMarkdownV1, + [Sections.Introduction]: IntroMarkdown1, + }, + '2.0.0': { + [Sections.Introduction]: IntroMarkdown2, }, }, - sections: { + markdownSections: { Introduction: Sections.Introduction, - Exchange: Sections.Exchange, - TokenTransferProxy: Sections.TokenTransferProxy, - TokenRegistry: Sections.TokenRegistry, - ZRXToken: Sections.ZRXToken, }, - visibleConstructors: [Sections.Exchange, Sections.TokenRegistry, Sections.ZRXToken, Sections.TokenTransferProxy], contractsByVersionByNetworkId: { '1.0.0': { [Networks.Mainnet]: { - [Sections.Exchange]: '0x12459c951127e0c374ff9105dda097662a027093', - [Sections.TokenTransferProxy]: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4', - [Sections.ZRXToken]: '0xe41d2489571d322189246dafa5ebde1f4699f498', - [Sections.TokenRegistry]: '0x926a74c5c36adf004c87399e65f75628b0f98d2c', + Exchange_v1: '0x12459c951127e0c374ff9105dda097662a027093', + TokenTransferProxy_v1: '0x8da0d80f5007ef1e431dd2127178d224e32c2ef4', + TokenRegistry: '0x926a74c5c36adf004c87399e65f75628b0f98d2c', }, [Networks.Ropsten]: { - [Sections.Exchange]: '0x479cc461fecd078f766ecc58533d6f69580cf3ac', - [Sections.TokenTransferProxy]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', - [Sections.ZRXToken]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', - [Sections.TokenRegistry]: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed', + Exchange_v1: '0x479cc461fecd078f766ecc58533d6f69580cf3ac', + TokenTransferProxy_v1: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + TokenRegistry: '0x6b1a50f0bb5a7995444bd3877b22dc89c62843ed', }, [Networks.Kovan]: { - [Sections.Exchange]: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364', - [Sections.TokenTransferProxy]: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4', - [Sections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', - [Sections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f', + Exchange_v1: '0x90fe2af704b34e0224bf2299c838e04d4dcf1364', + TokenTransferProxy_v1: '0x087Eed4Bc1ee3DE49BeFbd66C662B434B15d49d4', + TokenRegistry: '0xf18e504561f4347bea557f3d4558f559dddbae7f', }, [Networks.Rinkeby]: { - [Sections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', - [Sections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', - [Sections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8', - [Sections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + Exchange_v1: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', + TokenTransferProxy_v1: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + TokenRegistry: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + }, + }, + '2.0.0': { + [Networks.Mainnet]: { + AssetProxyOwner: '0x17992e4ffb22730138e4b62aaa6367fa9d3699a6', + ERC20Proxy: '0x2240dab907db71e64d3e0dba4800c83b5c502d4e', + ERC721Proxy: '0x208e41fb445f1bb1b6780d58356e81405f3e6127', + Exchange: '0x4f833a24e1f95d70f028921e27040ca56e09ab0b', + Forwarder: '0x7afc2d5107af94c462a194d2c21b5bdd238709d6', + OrderValidator: '0x9463e518dea6810309563c81d5266c1b1d149138', + WETH9: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', + ZRXToken: '0xe41d2489571d322189246dafa5ebde1f4699f498', + }, + [Networks.Ropsten]: { + AssetProxyOwner: '0xf5fa5b5fed2727a0e44ac67f6772e97977aa358b', + ERC20Proxy: '0xb1408f4c245a23c31b98d2c626777d4c0d766caa', + ERC721Proxy: '0xe654aac058bfbf9f83fcaee7793311dd82f6ddb4', + Exchange: '0x4530c0483a1633c7a1c97d2c53721caff2caaaaf', + Forwarder: '0x3983e204b12b3c02fb0638caf2cd406a62e0ead3', + OrderValidator: '0x90431a90516ab49af23a0530e04e8c7836e7122f', + WETH9: '0xc778417e063141139fce010982780140aa0cd5ab', + ZRXToken: '0xff67881f8d12f372d91baae9752eb3631ff0ed00', + }, + [Networks.Kovan]: { + AssetProxyOwner: '0x2c824d2882baa668e0d5202b1e7f2922278703f8', + ERC20Proxy: '0xf1ec01d6236d3cd881a0bf0130ea25fe4234003e', + ERC721Proxy: '0x2a9127c745688a165106c11cd4d647d2220af821', + Exchange: '0x35dd2932454449b14cee11a94d3674a936d5d7b2', + Forwarder: '0xd85e2fa7e7e252b27b01bf0d65c946959d2f45b8', + OrderValidator: '0xb389da3d204b412df2f75c6afb3d0a7ce0bc283d', + WETH9: '0xd0a1e359811322d97991e03f863a0c30c2cf029c', + ZRXToken: '0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa', }, }, }, @@ -70,6 +97,7 @@ interface ConnectedState { docsVersion: string; availableDocVersions: string[]; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -81,6 +109,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState docsVersion: state.docsVersion, availableDocVersions: state.availableDocVersions, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_compiler_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts index b289c8f34..f3a793e80 100644 --- a/packages/website/ts/containers/sol_compiler_documentation.ts +++ b/packages/website/ts/containers/sol_compiler_documentation.ts @@ -1,60 +1,49 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/sol-compiler/introduction'); -const InstallationMarkdownV1 = require('md/docs/sol-compiler/installation'); -const UsageMarkdown = require('md/docs/sol-compiler/usage'); +const IntroMarkdown1 = require('md/docs/sol-compiler/1/introduction'); +const InstallationMarkdown1 = require('md/docs/sol-compiler/1/installation'); +const InstallationMarkdown2 = require('md/docs/sol-compiler/2/installation'); +const UsageMarkdown1 = require('md/docs/sol-compiler/1/usage'); +const UsageMarkdown2 = require('md/docs/sol-compiler/2/usage'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - compiler: 'compiler', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SolCompiler, + packageName: '@0x/sol-compiler', type: SupportedDocJson.TypeDoc, displayName: 'Solidity Compiler', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - compiler: [docSections.compiler], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.usage]: UsageMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.usage]: UsageMarkdown1, + }, + '1.1.8': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown2, + [markdownSections.usage]: UsageMarkdown2, }, }, - sectionNameToModulePath: { - [docSections.compiler]: ['"sol-compiler/src/compiler"'], - [docSections.types]: ['"sol-compiler/src/utils/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [docSections.compiler], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: ['CompilerOptions'], - typeNameToExternalLink: {}, - typeNameToPrefix: {}, - }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -63,6 +52,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -74,6 +64,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/sol_cov_documentation.ts b/packages/website/ts/containers/sol_cov_documentation.ts index d78c450ed..8944ec70a 100644 --- a/packages/website/ts/containers/sol_cov_documentation.ts +++ b/packages/website/ts/containers/sol_cov_documentation.ts @@ -1,89 +1,50 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/sol_cov/introduction'); -const InstallationMarkdownV1 = require('md/docs/sol_cov/installation'); -const UsageMarkdown = require('md/docs/sol_cov/usage'); +const IntroMarkdown1 = require('md/docs/sol_cov/1/introduction'); +const InstallationMarkdown1 = require('md/docs/sol_cov/1/installation'); +const UsageMarkdown1 = require('md/docs/sol_cov/1/usage'); +const IntroMarkdown2 = require('md/docs/sol_cov/2/introduction'); +const InstallationMarkdown2 = require('md/docs/sol_cov/2/installation'); +const UsageMarkdown2 = require('md/docs/sol_cov/2/usage'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', usage: 'usage', - coverageSubprovider: 'coverageSubprovider', - abstractArtifactAdapter: 'abstractArtifactAdapter', - solCompilerArtifactAdapter: 'solCompilerArtifactAdapter', - truffleArtifactAdapter: 'truffleArtifactAdapter', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.SolCov, + packageName: '@0x/sol-cov', type: SupportedDocJson.TypeDoc, displayName: 'Sol-cov', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - usage: [docSections.usage], - 'coverage-subprovider': [docSections.coverageSubprovider], - 'abstract-artifact-adapter': [docSections.abstractArtifactAdapter], - 'sol-compiler-artifact-adapter': [docSections.solCompilerArtifactAdapter], - 'truffle-artifact-adapter': [docSections.truffleArtifactAdapter], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation, markdownSections.usage], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.usage]: UsageMarkdown, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.usage]: UsageMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.coverageSubprovider]: ['"sol-cov/src/coverage_subprovider"'], - [docSections.abstractArtifactAdapter]: ['"sol-cov/src/artifact_adapters/abstract_artifact_adapter"'], - [docSections.solCompilerArtifactAdapter]: ['"sol-cov/src/artifact_adapters/sol_compiler_artifact_adapter"'], - [docSections.truffleArtifactAdapter]: ['"sol-cov/src/artifact_adapters/truffle_artifact_adapter"'], - [docSections.types]: ['"subproviders/src/types"', '"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [ - docSections.coverageSubprovider, - docSections.abstractArtifactAdapter, - docSections.solCompilerArtifactAdapter, - docSections.truffleArtifactAdapter, - ], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'JSONRPCRequestPayload', - 'NextCallback', - 'ErrorCallback', - 'AbstractArtifactAdapter', - 'CoverageSubprovider', - 'TruffleArtifactAdapter', - 'SolCompilerArtifactAdapter', - 'ContractData', - ], - typeNameToExternalLink: {}, - typeNameToPrefix: {}, - typeNameToDocSection: { - AbstractArtifactAdapter: docSections.abstractArtifactAdapter, - CoverageSubprovider: docSections.coverageSubprovider, - TruffleArtifactAdapter: docSections.truffleArtifactAdapter, - SolCompilerArtifactAdapter: docSections.solCompilerArtifactAdapter, + '2.1.8': { + [markdownSections.introduction]: IntroMarkdown2, + [markdownSections.installation]: InstallationMarkdown2, + [markdownSections.usage]: UsageMarkdown2, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -92,6 +53,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -103,6 +65,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts index 0e9150d7b..0e421777b 100644 --- a/packages/website/ts/containers/subproviders_documentation.ts +++ b/packages/website/ts/containers/subproviders_documentation.ts @@ -1,124 +1,48 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/subproviders/introduction'); -const InstallationMarkdownV1 = require('md/docs/subproviders/installation'); -const LedgerNodeHidMarkdown = require('md/docs/subproviders/ledger_node_hid'); +const IntroMarkdown1 = require('md/docs/subproviders/1/introduction'); +const InstallationMarkdown1 = require('md/docs/subproviders/1/installation'); +const InstallationMarkdown2 = require('md/docs/subproviders/2/installation'); +const LedgerNodeHidMarkdown1 = require('md/docs/subproviders/1/ledger_node_hid'); /* tslint:enable:no-var-requires */ const docSections = { introduction: 'introduction', installation: 'installation', - subprovider: 'subprovider', - ledgerSubprovider: 'ledgerSubprovider', ledgerNodeHid: 'ledger-node-hid-issue', - factoryMethods: 'factory-methods', - emptyWalletSubprovider: 'emptyWalletSubprovider', - fakeGasEstimateSubprovider: 'fakeGasEstimateSubprovider', - injectedWeb3Subprovider: 'injectedWeb3Subprovider', - signerSubprovider: 'signerSubprovider', - redundantRPCSubprovider: 'redundantRPCSubprovider', - ganacheSubprovider: 'ganacheSubprovider', - nonceTrackerSubprovider: 'nonceTrackerSubprovider', - privateKeyWalletSubprovider: 'privateKeyWalletSubprovider', - mnemonicWalletSubprovider: 'mnemonicWalletSubprovider', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Subproviders, + packageName: '@0x/subproviders', type: SupportedDocJson.TypeDoc, displayName: 'Subproviders', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - subprovider: [docSections.subprovider], - ['ledger-subprovider']: [docSections.ledgerSubprovider], - ['ledger-node-hid-issue']: [docSections.ledgerNodeHid], - ['private-key-wallet-subprovider']: [docSections.privateKeyWalletSubprovider], - ['mnemonic-wallet-subprovider']: [docSections.mnemonicWalletSubprovider], - ['factory-methods']: [docSections.factoryMethods], - ['emptyWallet-subprovider']: [docSections.emptyWalletSubprovider], - ['fakeGasEstimate-subprovider']: [docSections.fakeGasEstimateSubprovider], - ['injectedWeb3-subprovider']: [docSections.injectedWeb3Subprovider], - ['signer-subprovider']: [docSections.signerSubprovider], - ['redundantRPC-subprovider']: [docSections.redundantRPCSubprovider], - ['ganache-subprovider']: [docSections.ganacheSubprovider], - ['nonceTracker-subprovider']: [docSections.nonceTrackerSubprovider], - types: [docSections.types], + markdownMenu: { + 'getting-started': [docSections.introduction, docSections.installation, docSections.ledgerNodeHid], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, - [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown, + [docSections.introduction]: IntroMarkdown1, + [docSections.installation]: InstallationMarkdown1, + [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.subprovider]: ['"subproviders/src/subproviders/subprovider"'], - [docSections.ledgerSubprovider]: ['"subproviders/src/subproviders/ledger"'], - [docSections.privateKeyWalletSubprovider]: ['"subproviders/src/subproviders/private_key_wallet"'], - [docSections.mnemonicWalletSubprovider]: ['"subproviders/src/subproviders/mnemonic_wallet"'], - [docSections.factoryMethods]: ['"subproviders/src/index"'], - [docSections.emptyWalletSubprovider]: ['"subproviders/src/subproviders/empty_wallet_subprovider"'], - [docSections.fakeGasEstimateSubprovider]: ['"subproviders/src/subproviders/fake_gas_estimate_subprovider"'], - [docSections.injectedWeb3Subprovider]: ['"subproviders/src/subproviders/injected_web3"'], - [docSections.signerSubprovider]: ['"subproviders/src/subproviders/signer"'], - [docSections.redundantRPCSubprovider]: ['"subproviders/src/subproviders/redundant_rpc"'], - [docSections.ganacheSubprovider]: ['"subproviders/src/subproviders/ganache"'], - [docSections.nonceTrackerSubprovider]: ['"subproviders/src/subproviders/nonce_tracker"'], - [docSections.types]: ['"sol-compiler/src/utils/types"', '"types/src/index"', '"subproviders/src/types"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [ - docSections.subprovider, - docSections.ledgerSubprovider, - docSections.privateKeyWalletSubprovider, - docSections.mnemonicWalletSubprovider, - docSections.emptyWalletSubprovider, - docSections.fakeGasEstimateSubprovider, - docSections.injectedWeb3Subprovider, - docSections.redundantRPCSubprovider, - docSections.ganacheSubprovider, - docSections.nonceTrackerSubprovider, - ], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'Callback', - 'NextCallback', - 'ErrorCallback', - 'ECSignature', - 'JSONRPCRequestPayloadWithMethod', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'AccountFetchingConfigs', - 'LedgerEthereumClientFactoryAsync', - 'PartialTxParams', - 'LedgerEthereumClient', - 'LedgerSubproviderConfigs', - 'MnemonicWalletSubproviderConfigs', - 'OnNextCompleted', - 'Provider', - ], - typeNameToExternalLink: { - Web3: constants.URL_WEB3_DOCS, - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '2.1.0': { + [docSections.introduction]: IntroMarkdown1, + [docSections.installation]: InstallationMarkdown2, + [docSections.ledgerNodeHid]: LedgerNodeHidMarkdown1, }, - typeNameToPrefix: {}, }, + markdownSections: docSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -127,6 +51,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -138,6 +63,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/web3_wrapper_documentation.ts b/packages/website/ts/containers/web3_wrapper_documentation.ts index 8d98d9476..9c8c34621 100644 --- a/packages/website/ts/containers/web3_wrapper_documentation.ts +++ b/packages/website/ts/containers/web3_wrapper_documentation.ts @@ -1,98 +1,44 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/web3_wrapper/introduction'); -const InstallationMarkdownV1 = require('md/docs/web3_wrapper/installation'); +const IntroMarkdown1 = require('md/docs/web3_wrapper/1/introduction'); +const InstallationMarkdown1 = require('md/docs/web3_wrapper/1/installation'); +const InstallationMarkdown2 = require('md/docs/web3_wrapper/2/installation'); /* tslint:enable:no-var-requires */ -const docSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', - web3Wrapper: 'web3Wrapper', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Web3Wrapper, + packageName: '@0x/web3-wrapper', type: SupportedDocJson.TypeDoc, displayName: 'Web3Wrapper', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [docSections.introduction], - install: [docSections.installation], - web3Wrapper: [docSections.web3Wrapper], - types: [docSections.types], + markdownMenu: { + 'getting-started': [markdownSections.introduction, markdownSections.installation], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [docSections.introduction]: IntroMarkdownV1, - [docSections.installation]: InstallationMarkdownV1, + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, }, - }, - sectionNameToModulePath: { - [docSections.web3Wrapper]: ['"web3-wrapper/src/web3_wrapper"'], - [docSections.types]: ['"types/src/index"'], - }, - menuSubsectionToVersionWhenIntroduced: {}, - sections: docSections, - visibleConstructors: [docSections.web3Wrapper], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( - publicTypes: [ - 'TxData', - 'TransactionReceipt', - 'RawLogEntry', - 'ContractAbi', - 'BlockParam', - 'FilterObject', - 'LogEntry', - 'BlockWithoutTransactionData', - 'CallData', - 'LogEntryEvent', - 'Provider', - 'AbiDefinition', - 'LogTopic', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'BlockParamLiteral', - 'FunctionAbi', - 'EventAbi', - 'JSONRPCErrorCallback', - 'MethodAbi', - 'ConstructorAbi', - 'FallbackAbi', - 'EventParameter', - 'DataItem', - 'StateMutability', - 'Function', - 'Fallback', - 'Constructor', - 'Event', - 'ConstructorStateMutability', - 'TransactionReceiptWithDecodedLogs', - 'DecodedLogArgs', - 'LogWithDecodedArgs', - 'ContractEventArg', - ], - typeNameToExternalLink: { - Web3: constants.URL_WEB3_DOCS, - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, - }, - typeNameToPrefix: {}, - typeNameToDocSection: { - Web3Wrapper: docSections.web3Wrapper, + '3.1.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown2, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -101,6 +47,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -112,6 +59,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, translate: state.translate, docsInfo, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/wiki.ts b/packages/website/ts/containers/wiki.ts index 357f8bbf4..069b0ae54 100644 --- a/packages/website/ts/containers/wiki.ts +++ b/packages/website/ts/containers/wiki.ts @@ -4,10 +4,12 @@ import { Dispatch } from 'redux'; import { Wiki as WikiComponent, WikiProps } from 'ts/pages/wiki/wiki'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; interface ConnectedState { translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -16,6 +18,7 @@ interface ConnectedDispatch { const mapStateToProps = (state: State, _ownProps: WikiProps): ConnectedState => ({ translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts index 6be54595d..e0ea6e275 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.ts +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -1,240 +1,76 @@ -import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs'; +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0x/react-docs'; import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocPackages } from 'ts/types'; -import { constants } from 'ts/utils/constants'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; /* tslint:disable:no-var-requires */ -const IntroMarkdownV1 = require('md/docs/0xjs/1.0.0/introduction'); -const InstallationMarkdownV1 = require('md/docs/0xjs/1.0.0/installation'); -const AsyncMarkdownV1 = require('md/docs/0xjs/1.0.0/async'); -const ErrorsMarkdownV1 = require('md/docs/0xjs/1.0.0/errors'); -const versioningMarkdownV1 = require('md/docs/0xjs/1.0.0/versioning'); +const IntroMarkdownV0 = require('md/docs/0xjs/0.0.1/introduction'); +const InstallationMarkdownV0 = require('md/docs/0xjs/0.0.1/installation'); +const AsyncMarkdownV0 = require('md/docs/0xjs/0.0.1/async'); +const ErrorsMarkdownV0 = require('md/docs/0xjs/0.0.1/errors'); +const versioningMarkdownV0 = require('md/docs/0xjs/0.0.1/versioning'); + +const IntroMarkdown1 = require('md/docs/0xjs/1.0.1/introduction'); +const InstallationMarkdown1 = require('md/docs/0xjs/1.0.1/installation'); +const AsyncMarkdownV1 = require('md/docs/0xjs/1.0.1/async'); +const ErrorsMarkdownV1 = ErrorsMarkdownV0; +const versioningMarkdownV1 = require('md/docs/0xjs/1.0.1/versioning'); -const IntroMarkdownV2 = require('md/docs/0xjs/2.0.0/introduction'); -const versioningMarkdownV2 = require('md/docs/0xjs/2.0.0/versioning'); /* tslint:enable:no-var-requires */ -const zeroExJsDocSections = { +const markdownSections = { introduction: 'introduction', installation: 'installation', testrpc: 'testrpc', async: 'async', errors: 'errors', versioning: 'versioning', - zeroEx: 'zeroEx', - exchange: 'exchange', - token: 'token', - tokenRegistry: 'tokenRegistry', - etherToken: 'etherToken', - proxy: 'proxy', - orderWatcher: 'orderWatcher', - types: docConstants.TYPES_SECTION_NAME, }; const docsInfoConfig: DocsInfoConfig = { id: DocPackages.ZeroExJs, + packageName: '0x.js', type: SupportedDocJson.TypeDoc, displayName: '0x.js', packageUrl: 'https://github.com/0xProject/0x-monorepo', - menu: { - introduction: [zeroExJsDocSections.introduction], - install: [zeroExJsDocSections.installation], - topics: [zeroExJsDocSections.async, zeroExJsDocSections.errors, zeroExJsDocSections.versioning], - zeroEx: [zeroExJsDocSections.zeroEx], - contracts: [ - zeroExJsDocSections.exchange, - zeroExJsDocSections.token, - zeroExJsDocSections.tokenRegistry, - zeroExJsDocSections.etherToken, - zeroExJsDocSections.proxy, + markdownMenu: { + 'getting-started': [ + markdownSections.introduction, + markdownSections.installation, + markdownSections.async, + markdownSections.errors, + markdownSections.versioning, ], - orderWatcher: [zeroExJsDocSections.orderWatcher], - types: [zeroExJsDocSections.types], }, sectionNameToMarkdownByVersion: { '0.0.1': { - [zeroExJsDocSections.introduction]: IntroMarkdownV1, - [zeroExJsDocSections.installation]: InstallationMarkdownV1, - [zeroExJsDocSections.async]: AsyncMarkdownV1, - [zeroExJsDocSections.errors]: ErrorsMarkdownV1, - [zeroExJsDocSections.versioning]: versioningMarkdownV1, - }, - '1.0.0-rc.1': { - [zeroExJsDocSections.introduction]: IntroMarkdownV2, - [zeroExJsDocSections.versioning]: versioningMarkdownV2, - // These are the same as for V1 - [zeroExJsDocSections.installation]: InstallationMarkdownV1, - [zeroExJsDocSections.async]: AsyncMarkdownV1, - [zeroExJsDocSections.errors]: ErrorsMarkdownV1, + [markdownSections.introduction]: IntroMarkdownV0, + [markdownSections.installation]: InstallationMarkdownV0, + [markdownSections.versioning]: versioningMarkdownV0, + [markdownSections.async]: AsyncMarkdownV0, + [markdownSections.errors]: ErrorsMarkdownV0, }, - }, - sectionNameToModulePath: { - [zeroExJsDocSections.zeroEx]: ['"0x.js/src/0x"', '"src/0x"'], - [zeroExJsDocSections.exchange]: [ - '"0x.js/src/contract_wrappers/exchange_wrapper"', - '"src/contract_wrappers/exchange_wrapper"', - '"contract-wrappers/src/contract_wrappers/exchange_wrapper"', - ], - [zeroExJsDocSections.tokenRegistry]: [ - '"0x.js/src/contract_wrappers/token_registry_wrapper"', - '"src/contract_wrappers/token_registry_wrapper"', - '"contract-wrappers/src/contract_wrappers/token_registry_wrapper"', - ], - [zeroExJsDocSections.token]: [ - '"0x.js/src/contract_wrappers/token_wrapper"', - '"src/contract_wrappers/token_wrapper"', - '"contract-wrappers/src/contract_wrappers/token_wrapper"', - ], - [zeroExJsDocSections.etherToken]: [ - '"0x.js/src/contract_wrappers/ether_token_wrapper"', - '"src/contract_wrappers/ether_token_wrapper"', - '"contract-wrappers/src/contract_wrappers/ether_token_wrapper"', - ], - [zeroExJsDocSections.proxy]: [ - '"0x.js/src/contract_wrappers/proxy_wrapper"', - '"0x.js/src/contract_wrappers/token_transfer_proxy_wrapper"', - '"contract-wrappers/src/contract_wrappers/token_transfer_proxy_wrapper"', - ], - [zeroExJsDocSections.orderWatcher]: [ - '"0x.js/src/order_watcher/order_state_watcher"', - '"src/order_watcher/order_state_watcher"', - '"order-watcher/src/order_watcher/order_watcher"', - ], - [zeroExJsDocSections.types]: [ - '"0x.js/src/types"', - '"src/types"', - '"types/src/index"', - '"contract-wrappers/src/types"', - '"0x.js/src/contract_wrappers/generated/ether_token"', - '"0x.js/src/contract_wrappers/generated/token"', - '"0x.js/src/contract_wrappers/generated/exchange"', - '"0x.js/src/generated_contract_wrappers/ether_token"', - '"0x.js/src/generated_contract_wrappers/token"', - '"0x.js/src/generated_contract_wrappers/exchange"', - ], - }, - menuSubsectionToVersionWhenIntroduced: { - [zeroExJsDocSections.etherToken]: '0.7.1', - [zeroExJsDocSections.proxy]: '0.8.0', - [zeroExJsDocSections.orderWatcher]: '0.27.1', - }, - sections: zeroExJsDocSections, - visibleConstructors: [zeroExJsDocSections.zeroEx], - typeConfigs: { - // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is - // currently no way to extract the re-exported types from index.ts via TypeDoc :( Make sure to only - // ADD types here, DO NOT REMOVE types since they might still be needed for older supported versions - publicTypes: [ - 'Order', - 'SignedOrder', - 'ECSignature', - 'ContractWrappersError', - 'EventCallback', - 'EventCallbackAsync', - 'EventCallbackSync', - 'ExchangeContractErrs', - 'ContractEvent', - 'Token', - 'Provider', - 'ExchangeEvents', - 'IndexedFilterValues', - 'SubscriptionOpts', - 'BlockRange', - 'BlockParam', - 'OrderFillOrKillRequest', - 'OrderCancellationRequest', - 'OrderFillRequest', - 'ContractEventEmitter', - 'Web3Provider', - 'ContractEventArgs', - 'LogCancelArgs', - 'LogFillArgs', - 'LogErrorContractEventArgs', - 'LogFillContractEventArgs', - 'LogCancelContractEventArgs', - 'EtherTokenContractEventArgs', - 'WithdrawalContractEventArgs', - 'DepositContractEventArgs', - 'TokenEvents', - 'ExchangeContractEventArgs', - 'TransferContractEventArgs', - 'ApprovalContractEventArgs', - 'TokenContractEventArgs', - 'ZeroExConfig', - 'TransactionReceipt', - 'TransactionReceiptWithDecodedLogs', - 'LogWithDecodedArgs', - 'EtherTokenEvents', - 'BlockParamLiteral', - 'DecodedLogArgs', - 'MethodOpts', - 'ValidateOrderFillableOpts', - 'OrderTransactionOpts', - 'TransactionOpts', - 'ContractEventArg', - 'LogEvent', - 'DecodedLogEvent', - 'EventWatcherCallback', - 'OnOrderStateChangeCallback', - 'OrderStateValid', - 'OrderStateInvalid', - 'OrderState', - 'OrderStateWatcherConfig', - 'OrderWatcherConfig', - 'FilterObject', - 'OrderRelevantState', - 'JSONRPCRequestPayload', - 'JSONRPCResponsePayload', - 'JSONRPCErrorCallback', - 'LogEntryEvent', - 'LogEntry', - 'ERC20AssetData', - 'ERC721AssetData', - 'AssetProxyId', - 'WETH9Events', - 'WETH9WithdrawalEventArgs', - 'WETH9ApprovalEventArgs', - 'WETH9EventArgs', - 'WETH9DepositEventArgs', - 'WETH9TransferEventArgs', - 'ERC20TokenTransferEventArgs', - 'ERC20TokenApprovalEventArgs', - 'ERC20TokenEvents', - 'ERC20TokenEventArgs', - 'ERC721TokenApprovalEventArgs', - 'ERC721TokenApprovalForAllEventArgs', - 'ERC721TokenTransferEventArgs', - 'ERC721TokenEvents', - 'ExchangeCancelUpToEventArgs', - 'ExchangeAssetProxyRegisteredEventArgs', - 'ExchangeFillEventArgs', - 'ExchangeCancelEventArgs', - 'ExchangeEventArgs', - 'ContractWrappersConfig', - 'MessagePrefixType', - 'MessagePrefixOpts', - 'OrderInfo', - ], - typeNameToPrefix: {}, - typeNameToExternalLink: { - BigNumber: constants.URL_BIGNUMBERJS_GITHUB, + '1.0.1': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.versioning]: versioningMarkdownV1, + [markdownSections.async]: AsyncMarkdownV1, + [markdownSections.errors]: ErrorsMarkdownV1, }, - typeNameToDocSection: { - ExchangeWrapper: 'exchange', - TokenWrapper: 'token', - TokenRegistryWrapper: 'tokenRegistry', - EtherTokenWrapper: 'etherToken', - ProxyWrapper: 'proxy', - TokenTransferProxyWrapper: 'proxy', - OrderStateWatcher: 'orderWatcher', + '2.0.0': { + [markdownSections.introduction]: IntroMarkdown1, + [markdownSections.installation]: InstallationMarkdown1, + [markdownSections.versioning]: versioningMarkdownV1, + [markdownSections.async]: AsyncMarkdownV1, + [markdownSections.errors]: ErrorsMarkdownV1, }, }, + markdownSections, }; const docsInfo = new DocsInfo(docsInfoConfig); @@ -243,6 +79,7 @@ interface ConnectedState { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -254,6 +91,7 @@ const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState availableDocVersions: state.availableDocVersions, docsInfo, translate: state.translate, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts index 719c2708a..eb8892aea 100644 --- a/packages/website/ts/globals.d.ts +++ b/packages/website/ts/globals.d.ts @@ -10,6 +10,7 @@ declare module '*.json' { export default json; /* tslint:enable */ } +declare module 'web3-provider-engine/subproviders/filters'; // This will be defined by default in TS 2.4 // Source: https://github.com/Microsoft/TypeScript/issues/12364 diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index c6d10452f..21157e427 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; -import * as injectTapEventPlugin from 'react-tap-event-plugin'; import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; +import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; @@ -17,8 +17,6 @@ import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage'; import { store } from 'ts/redux/store'; import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types'; import { muiTheme } from 'ts/utils/mui_theme'; -// Polyfills -injectTapEventPlugin(); // Check if we've introduced an update that requires us to clear the tradeHistory local storage entries tradeHistoryStorage.clearIfRequired(); @@ -29,41 +27,50 @@ import 'less/all.less'; // We pass modulePromise returning lambda instead of module promise, // cause we only want to import the module when the user navigates to the page. -// At the same time webpack statically parses for System.import() to determine bundle chunk split points -// so each lazy import needs it's own `System.import()` declaration. +// At the same time webpack statically parses for import() to determine bundle chunk split points +// so each lazy import needs it's own `import()` declaration. const LazyPortal = createLazyComponent('Portal', async () => - System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'), + import(/* webpackChunkName: "portal" */ 'ts/containers/portal'), ); const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), + import(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'), +); +const LazyContractWrappersDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "contractWrapperDocs" */ 'ts/containers/contract_wrappers_documentation'), +); +const LazyOrderWatcherDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "orderWatcherDocs" */ 'ts/containers/order_watcher_documentation'), ); const LazySmartContractsDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'), + import(/* webpackChunkName: "smartContractDocs" */ 'ts/containers/smart_contracts_documentation'), ); const LazyConnectDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), + import(/* webpackChunkName: "connectDocs" */ 'ts/containers/connect_documentation'), ); const LazyWeb3WrapperDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'), + import(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'), ); const LazySolCompilerDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'), + import(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'), ); const LazyJSONSchemasDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), + import(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'), ); const LazySolCovDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), + import(/* webpackChunkName: "solCovDocs" */ 'ts/containers/sol_cov_documentation'), ); const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), + import(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'), ); const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), + import(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'), ); const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', async () => - System.import<any>(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'), + import(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'), +); +const LazyAssetBuyerDocumentation = createLazyComponent('Documentation', async () => + import(/* webpackChunkName: "assetBuyerDocs" */ 'ts/containers/asset_buyer_documentation'), ); const DOCUMENT_TITLE = '0x: The Protocol for Trading Tokens'; @@ -90,6 +97,14 @@ render( component={LazyZeroExJSDocumentation} /> <Route + path={`${WebsitePaths.ContractWrappers}/:version?`} + component={LazyContractWrappersDocumentation} + /> + <Route + path={`${WebsitePaths.OrderWatcher}/:version?`} + component={LazyOrderWatcherDocumentation} + /> + <Route path={`${WebsitePaths.Connect}/:version?`} component={LazyConnectDocumentation} /> @@ -122,7 +137,11 @@ render( path={`${WebsitePaths.EthereumTypes}/:version?`} component={LazyEthereumTypesDocumentation} /> - + <Route + path={`${WebsitePaths.AssetBuyer}/:version?`} + component={LazyAssetBuyerDocumentation} + /> + <Route path={WebsitePaths.Docs} component={DocsHome as any} /> {/* Legacy endpoints */} <Route path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`} @@ -137,7 +156,6 @@ render( component={LazySolCompilerDocumentation} /> <Route path={WebsiteLegacyPaths.Jobs} component={Jobs as any} /> - <Route path={`${WebsitePaths.Docs}`} component={LazyZeroExJSDocumentation} /> <Route component={NotFound as any} /> </Switch> </div> diff --git a/packages/website/ts/lazy_component.tsx b/packages/website/ts/lazy_component.tsx index dce06ed8d..9d3b9944a 100644 --- a/packages/website/ts/lazy_component.tsx +++ b/packages/website/ts/lazy_component.tsx @@ -49,7 +49,7 @@ export class LazyComponent extends React.Component<LazyComponentProps, LazyCompo * @param componentName name of exported component * @param lazyImport lambda returning module promise * we pass a lambda because we only want to require a module if it's used - * @example `const LazyPortal = createLazyComponent('Portal', () => System.import<any>('ts/containers/portal'));`` + * @example `const LazyPortal = createLazyComponent('Portal', () => import<any>('ts/containers/portal'));`` */ export const createLazyComponent = (componentName: string, lazyImport: () => Promise<any>) => { return (props: any) => { diff --git a/packages/website/ts/local_storage/trade_history_storage.tsx b/packages/website/ts/local_storage/trade_history_storage.tsx index a9b042820..91818b035 100644 --- a/packages/website/ts/local_storage/trade_history_storage.tsx +++ b/packages/website/ts/local_storage/trade_history_storage.tsx @@ -1,4 +1,4 @@ -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import ethUtil = require('ethereumjs-util'); import * as _ from 'lodash'; import { localStorage } from 'ts/local_storage/local_storage'; diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 519e4be5e..dfe8926b0 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,8 +1,7 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { Profile } from 'ts/pages/about/profile'; @@ -194,7 +193,7 @@ const teamRow6: ProfileInfo[] = [ const teamRow7: ProfileInfo[] = [ { name: 'Clay Robbins', - title: 'Business Development Lead', + title: 'Ecosystem Development Lead', description: `Growth & Business Development. Previously product and partnerships at Square. Economics at Dartmouth College.`, image: 'images/team/clay.png', linkedIn: 'https://www.linkedin.com/in/robbinsclay/', @@ -206,9 +205,52 @@ const teamRow7: ProfileInfo[] = [ image: 'images/team/matt.jpg', linkedIn: 'https://www.linkedin.com/in/mattytay/', }, + { + name: 'Eugene Aumson', + title: 'Engineer', + description: `Developer Experience. Previously senior software engineer in foreign exchange applications at Bloomberg LP.`, + image: 'images/team/gene.jpg', + linkedIn: 'https://www.linkedin.com/in/aumson/', + github: 'https://github.com/feuGeneA', + }, ]; -const advisors: ProfileInfo[] = [ +const teamRow8: ProfileInfo[] = [ + { + name: 'Weijie Wu', + title: 'Research Fellow', + description: `Researching decentralized governance. Previously Researcher at Huawei and Assistant Professor at Shanghai Jiao Tong University. PhD in Computer Science at The Chinese University of Hong Kong.`, + image: 'images/team/weijie.png', + linkedIn: 'https://www.linkedin.com/in/weijiewu/', + }, + { + name: 'Rahul Singireddy', + title: 'Relayer Success Manager', + description: `Previously community at Zeppelin, growth at Dharma, and cryptocurrency contributor at Forbes. Symbolic Systems at Stanford.`, + image: 'images/team/rahul.png', + linkedIn: 'https://www.linkedin.com/in/rahul-singireddy-3037908a/', + }, + { + name: 'Jason Somensatto', + title: 'Strategic Legal Counsel', + description: `Legal. Previously head of blockchain and crypto practice at Orrick. JD from George Washington University and undergrad at UVA.`, + image: 'images/team/jason.png', + linkedIn: 'https://www.linkedin.com/in/jasonsomensatto/', + }, +]; + +const teamRow9: ProfileInfo[] = [ + { + name: 'Steve Klebanoff', + title: 'Senior Engineer', + description: ` Full-stack engineer. Previously Staff Software Engineer at AppFolio. Computer Science & Cognitive Psychology at Northeastern University.`, + image: 'images/team/steve.png', + linkedIn: 'https://www.linkedin.com/in/steveklebanoff/', + github: 'https://github.com/steveklebanoff', + }, +]; + +const advisors1: ProfileInfo[] = [ { name: 'Fred Ehrsam', description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.', @@ -232,6 +274,9 @@ const advisors: ProfileInfo[] = [ github: 'https://github.com/joeykrug', angellist: 'https://angel.co/joeykrug', }, +]; + +const advisors2: ProfileInfo[] = [ { name: 'Linda Xie', description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.', @@ -240,6 +285,14 @@ const advisors: ProfileInfo[] = [ medium: 'https://medium.com/@linda.xie', twitter: 'https://twitter.com/ljxie', }, + { + name: 'David Sacks', + description: 'General Partner at Craft Ventures. Original COO of PayPal. Founder of Yammer.', + image: '/images/advisors/david.png', + linkedIn: 'https://www.linkedin.com/in/davidoliversacks/', + medium: 'https://medium.com/@davidsacks', + twitter: 'https://twitter.com/DavidSacks', + }, ]; export interface AboutProps { @@ -304,6 +357,8 @@ export class About extends React.Component<AboutProps, AboutState> { <div className="clearfix">{this._renderProfiles(teamRow5)}</div> <div className="clearfix">{this._renderProfiles(teamRow6)}</div> <div className="clearfix">{this._renderProfiles(teamRow7)}</div> + <div className="clearfix">{this._renderProfiles(teamRow8)}</div> + <div className="clearfix">{this._renderProfiles(teamRow9)}</div> </div> <div className="pt3 pb2"> <div @@ -316,7 +371,8 @@ export class About extends React.Component<AboutProps, AboutState> { > Advisors: </div> - <div className="clearfix">{this._renderProfiles(advisors)}</div> + <div className="clearfix">{this._renderProfiles(advisors1)}</div> + <div className="clearfix">{this._renderProfiles(advisors2)}</div> </div> <div className="mx-auto py4 sm-px3" style={{ maxWidth: 308 }}> <div className="pb2" style={styles.weAreHiring}> @@ -332,7 +388,7 @@ export class About extends React.Component<AboutProps, AboutState> { }} > We are seeking outstanding candidates to{' '} - <Link to={WebsitePaths.Careers} style={{ color: 'black' }}> + <Link to={WebsitePaths.Careers} textDecoration="underline" fontColor="black"> join our team </Link> . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index bcbeb0272..2361c6418 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx new file mode 100644 index 000000000..361dbc86e --- /dev/null +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -0,0 +1,202 @@ +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; +import { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { media } from 'ts/style/media'; +import { styled } from 'ts/style/theme'; +import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const browserType = utils.getBrowserType(); +let SCROLLBAR_WIDTH; +switch (browserType) { + case BrowserType.Firefox: + // HACK: Firefox doesn't allow styling of their scrollbar's. + // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox + const os = utils.getOperatingSystem(); + SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15; + break; + + case BrowserType.Edge: + // Edge's scrollbar is placed outside of the div content and doesn't + // need to be accounted for + SCROLLBAR_WIDTH = 0; + break; + + default: + SCROLLBAR_WIDTH = 4; +} +const SIDEBAR_PADDING = 22; + +export interface DevelopersPageProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; + mainContent: React.ReactNode; + sidebar: React.ReactNode; +} + +export interface DevelopersPageState { + isSidebarScrolling: boolean; +} + +const isUserOnMobile = sharedUtils.isUserOnMobile(); + +const scrollableContainerStyles = ` + position: absolute; + top: ${TOP_BAR_HEIGHT}px; + left: 0px; + bottom: 0px; + right: 0px; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + /* Required for hide/show onHover of scrollbar on Microsoft Edge */ + -ms-overflow-style: -ms-autohiding-scrollbar; +`; + +interface SidebarContainerProps { + className?: string; +} + +const SidebarContainer = + styled.div < + SidebarContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 27px; + padding-left: ${SIDEBAR_PADDING}px; + padding-right: ${SIDEBAR_PADDING}px; + overflow: hidden; + &:hover { + overflow: auto; + padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px; + } +`; + +interface MainContentContainerProps { + className?: string; +} + +const MainContentContainer = + styled.div < + MainContentContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 0px; + padding-left: 50px; + padding-right: 50px; + overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; + &:hover { + padding-right: ${50 - SCROLLBAR_WIDTH}px; + overflow: auto; + } + ${media.small` + padding-left: 20px; + padding-right: 20px; + &:hover { + padding-right: ${20 - SCROLLBAR_WIDTH}px; + overflow: auto; + } + `} +`; + +export class DevelopersPage extends React.Component<DevelopersPageProps, DevelopersPageState> { + private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; + constructor(props: DevelopersPageProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); + this.state = { + isSidebarScrolling: false, + }; + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); + } + public render(): React.ReactNode { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 20 : 50; + return ( + <Container + className="flex items-center overflow-hidden" + width="100%" + background={`linear-gradient(to right, ${colors.grey100} 0%, ${colors.grey100} 50%, ${ + colors.white + } 50%, ${colors.white} 100%)`} + > + <DocumentTitle title="0x Docs" /> + <Container className="flex mx-auto" height="100vh"> + <Container + className="sm-hide xs-hide relative" + width={234} + paddingLeft={22} + paddingRight={22} + paddingTop={0} + backgroundColor={colors.grey100} + > + <Container + borderBottom={this.state.isSidebarScrolling ? `1px solid ${colors.grey300}` : 'none'} + > + <Container paddingTop="30px" paddingLeft="10px" paddingBottom="8px"> + <DocsLogo height={36} /> + </Container> + </Container> + <SidebarContainer onWheel={this._throttledSidebarScrolling}> + <Container paddingBottom="100px"> + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + </Container> + </SidebarContainer> + </Container> + <Container + className="relative" + width={isSmallScreen ? '100vw' : 786} + paddingBottom="100px" + backgroundColor={colors.white} + > + <Container paddingLeft={mainContentPadding} paddingRight={mainContentPadding}> + <DocsTopBar + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + sidebar={this.props.sidebar} + /> + </Container> + <MainContentContainer id={sharedConstants.SCROLL_CONTAINER_ID}> + {this.props.mainContent} + </MainContentContainer> + </Container> + </Container> + </Container> + ); + } + private _onSidebarScroll(_event: React.FormEvent<HTMLInputElement>): void { + this.setState({ + isSidebarScrolling: true, + }); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 8159bbd49..28bf2dba1 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,39 +1,44 @@ -import { DocAgnosticFormat, DocsInfo, Documentation } from '@0xproject/react-docs'; +import { + DocAgnosticFormat, + DocReference, + DocsInfo, + GeneratedDocJson, + SupportedDocJson, + TypeDocUtils, +} from '@0x/react-docs'; import findVersions = require('find-versions'); import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); import semverSort = require('semver-sort'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const isDevelopmentOrStaging = utils.isDevelopment() || utils.isStaging(); -const DEFAULT_ICON = 'docs.png'; const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4'; -const idToIcon: { [id: string]: string } = { - [DocPackages.ZeroExJs]: 'zeroExJs.png', - [DocPackages.Connect]: 'connect.png', - [DocPackages.SmartContracts]: 'contracts.png', -}; - const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.ZeroExJs]: '0x.js', [DocPackages.Connect]: 'connect', [DocPackages.SmartContracts]: 'contracts', [DocPackages.Web3Wrapper]: 'web3-wrapper', + [DocPackages.ContractWrappers]: 'contract-wrappers', [DocPackages.SolCompiler]: 'sol-compiler', [DocPackages.JSONSchemas]: 'json-schemas', [DocPackages.SolCov]: 'sol-cov', [DocPackages.Subproviders]: 'subproviders', [DocPackages.OrderUtils]: 'order-utils', + [DocPackages.OrderWatcher]: 'order-watcher', [DocPackages.EthereumTypes]: 'ethereum-types', + [DocPackages.AssetBuyer]: 'asset-buyer', }; export interface DocPageProps { @@ -43,6 +48,7 @@ export interface DocPageProps { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface DocPageState { @@ -70,38 +76,58 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); - const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; - const iconUrl = `/images/doc_icons/${iconFileName}`; + const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); + const mainContent = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <DocReference + selectedVersion={this.props.docsVersion} + availableVersions={this.props.availableDocVersions} + docsInfo={this.props.docsInfo} + docAgnosticFormat={this.state.docAgnosticFormat} + sourceUrl={sourceUrl} + /> + ); + const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? ( + <div /> + ) : ( + <NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { return ( - <div> - <DocumentTitle title={`${this.props.docsInfo.displayName} Documentation`} /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - docsVersion={this.props.docsVersion} - availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.getMenu(this.props.docsVersion)} - menuSubsectionsBySection={menuSubsectionsBySection} - docsInfo={this.props.docsInfo} - translate={this.props.translate} - onVersionSelected={this._onVersionSelected.bind(this)} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - /> - <Documentation - selectedVersion={this.props.docsVersion} - availableVersions={this.props.availableDocVersions} - docsInfo={this.props.docsInfo} - docAgnosticFormat={this.state.docAgnosticFormat} - sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} iconUrl={iconUrl} />} - sourceUrl={sourceUrl} - topBarHeight={60} - onVersionSelected={this._onVersionSelected.bind(this)} - /> - </div> + <SidebarHeader + screenWidth={this.props.screenWidth} + title={this.props.docsInfo.displayName} + docsVersion={this.props.docsVersion} + availableDocVersions={this.props.availableDocVersions} + onVersionSelected={this._onVersionSelected.bind(this)} + /> + ); + } + private _renderLoading(): React.ReactNode { + return ( + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading documentation... + </Container> + </Container> ); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> { @@ -126,7 +152,22 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { const versionFilePathToFetch = versionToFilePath[versionToFetch]; const versionDocObj = await docUtils.getJSONDocFileAsync(versionFilePathToFetch, docBucketRoot); - const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj); + let docAgnosticFormat; + if (this.props.docsInfo.type === SupportedDocJson.TypeDoc) { + docAgnosticFormat = new TypeDocUtils( + versionDocObj as GeneratedDocJson, + this.props.docsInfo, + ).convertToDocAgnosticFormat(); + } else if (this.props.docsInfo.type === SupportedDocJson.SolDoc) { + // documenting solidity. + docAgnosticFormat = versionDocObj as DocAgnosticFormat; + // HACK: need to modify docsInfo like convertToDocAgnosticFormat() would do + this.props.docsInfo.markdownMenu.Contracts = []; + _.each(docAgnosticFormat, (_docObj, sectionName) => { + this.props.docsInfo.sections[sectionName] = sectionName; + this.props.docsInfo.markdownMenu.Contracts.push(sectionName); + }); + } if (!this._isUnmounted) { this.setState({ @@ -140,7 +181,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> { let tagPrefix = pkg; const packagesWithNamespace = ['connect']; if (_.includes(packagesWithNamespace, pkg)) { - tagPrefix = `@0xproject/${pkg}`; + tagPrefix = `@0x/${pkg}`; } // HACK: The following three lines exist for backward compatibility reasons // Before exporting types from other packages as part of the 0x.js interface, diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx new file mode 100644 index 000000000..bbbee2d2d --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -0,0 +1,385 @@ +import { ALink, colors, Link } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; +import { Button } from 'ts/components/ui/button'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +const TUTORIALS: TutorialInfo[] = [ + { + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: Key.DevelopOnEthereumDescription, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + }, + { + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: Key.BuildARelayerDescription, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + }, + { + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: Key.OrderBasicsDescription, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + }, + { + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: Key.UseNetworkedLiquidityDescription, + link: { + title: Key.UseNetworkedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, + }, +]; + +const CATEGORY_TO_PACKAGES: ObjectMap<Package[]> = { + [Categories.ZeroExProtocol]: [ + { + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, + }, + { + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', + link: { + title: '@0x/connect', + to: WebsitePaths.Connect, + }, + }, + { + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', + link: { + title: '@0x/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, + }, + { + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + link: { + title: '@0x/json-schemas', + to: WebsitePaths.JSONSchemas, + }, + }, + { + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + link: { + title: '@0x/order-utils', + to: WebsitePaths.OrderUtils, + }, + }, + { + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + link: { + title: '@0x/order-watcher', + to: WebsitePaths.OrderWatcher, + }, + }, + { + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + link: { + title: '@0x/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Convenience package for buying assets represented on the Ethereum blockchain using 0x. In its simplest form, the package helps in the usage of the [0x forwarder contract](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md), which allows users to execute [Wrapped Ether](https://weth.io/) based 0x orders without having to set allowances, wrap Ether or own ZRX, meaning they can buy tokens with Ether alone. Given some liquidity (0x signed orders), it helps estimate the Ether cost of buying a certain asset (giving a range) and then buying that asset.', + link: { + title: '@0x/asset-buyer', + to: WebsitePaths.AssetBuyer, + }, + }, + ], + [Categories.Ethereum]: [ + { + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, + }, + { + description: + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + link: { + title: '@0x/sol-compiler', + to: WebsitePaths.SolCompiler, + }, + }, + { + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + link: { + title: '@0x/sol-cov', + to: WebsitePaths.SolCov, + }, + }, + { + description: + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + link: { + title: '@0x/subproviders', + to: WebsitePaths.Subproviders, + }, + }, + { + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + link: { + title: '@0x/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, + }, + ], + [Categories.CommunityMaintained]: [ + { + description: + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + }, + }, + { + description: + "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A node.js SDK for trading on the DDEX relayer', + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users", + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdEX Widget', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdEX Java SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdEX Python SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + }, + }, + { + description: 'An open-source API-only Relayer written in Go', + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + }, + }, + { + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + }, + }, + ], +}; + +export interface DocsHomeProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap<Package[]>; + dispatcher: Dispatcher; +} + +export interface DocsHomeState {} + +export class DocsHome extends React.Component<DocsHomeProps, DocsHomeState> { + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap<ALink[]> = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.link, + ), + }; + const mainContent = ( + <OverviewContent + translate={this.props.translate} + tutorials={TUTORIALS} + categoryToPackages={CATEGORY_TO_PACKAGES} + /> + ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + shouldReformatMenuItemNames={false} + /> + ); + return ( + <DevelopersPage + mainContent={mainContent} + sidebar={sidebar} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + return menuItems; + } +} diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index c9295d806..10d91bae8 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index f80985257..413ffb6ce 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; diff --git a/packages/website/ts/pages/fullscreen_message.tsx b/packages/website/ts/pages/fullscreen_message.tsx index 6fcf7b32c..675f27a01 100644 --- a/packages/website/ts/pages/fullscreen_message.tsx +++ b/packages/website/ts/pages/fullscreen_message.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; export interface FullscreenMessageProps { diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index cc4b1f04b..728e17f9e 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,4 +1,4 @@ -import { colors, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index ec8afbd93..e869cd455 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 2a51ee3c0..c56ed4ebe 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,13 +1,15 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Text } from 'ts/components/ui/text'; +import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -19,11 +21,7 @@ interface BoxContent { description: string; imageUrl: string; classNames: string; -} -interface AssetType { - title: string; - imageUrl: string; - style?: React.CSSProperties; + maxWidth: number; } interface UseCase { imageUrl: string; @@ -31,7 +29,6 @@ interface UseCase { description: string; classNames: string; style?: React.CSSProperties; - projectIconUrls: string[]; } interface Project { logoFileName: string; @@ -39,74 +36,24 @@ interface Project { } const THROTTLE_TIMEOUT = 100; -const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018'; -const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; - -const relayersAndDappProjects: Project[] = [ - { - logoFileName: 'ercdex.png', - projectUrl: constants.PROJECT_URL_ERC_DEX, - }, - { - logoFileName: 'radar_relay.png', - projectUrl: constants.PROJECT_URL_RADAR_RELAY, - }, - { - logoFileName: 'paradex.png', - projectUrl: constants.PROJECT_URL_PARADEX, - }, - { - logoFileName: 'the_ocean.png', - projectUrl: constants.PROJECT_URL_0CEAN, - }, - { - logoFileName: 'dydx.png', - projectUrl: constants.PROJECT_URL_DYDX, - }, - { - logoFileName: 'ethfinex.png', - projectUrl: constants.PROJECT_URL_ETHFINEX, - }, - { - logoFileName: 'melonport.png', - projectUrl: constants.PROJECT_URL_MELONPORT, - }, - { - logoFileName: 'maker.png', - projectUrl: constants.PROJECT_URL_MAKER, - }, - { - logoFileName: 'dharma.png', - projectUrl: constants.PROJECT_URL_DHARMA, - }, - { - logoFileName: 'lendroid.png', - projectUrl: constants.PROJECT_URL_LENDROID, - }, - { - logoFileName: 'district0x.png', - projectUrl: constants.PROJECT_URL_DISTRICT_0X, - }, - { - logoFileName: 'aragon.png', - projectUrl: constants.PROJECT_URL_ARAGON, - }, - { - logoFileName: 'blocknet.png', - projectUrl: constants.PROJECT_URL_BLOCKNET, - }, - { - logoFileName: 'imtoken.png', - projectUrl: constants.PROJECT_URL_IMTOKEN, - }, - { - logoFileName: 'augur.png', - projectUrl: constants.PROJECT_URL_AUGUR, - }, - { - logoFileName: 'anx.png', - projectUrl: constants.PROJECT_URL_OPEN_ANX, - }, +const WHATS_NEW_TITLE = '0x Protocol v2 is Live!'; +const WHATS_NEW_URL = 'https://blog.0xproject.com/0x-protocol-v2-0-is-live-183aac180149'; +const TITLE_STYLE: React.CSSProperties = { + fontFamily: 'Roboto Mono', + color: colors.grey, + fontWeight: 300, + letterSpacing: 3, +}; +const ROTATING_LIST = [ + 'tokens', + 'game items', + 'digital art', + 'futures', + 'stocks', + 'derivatives', + 'loans', + 'cats', + 'everything', ]; const relayerProjects: Project[] = [ @@ -199,21 +146,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { /> {this._renderHero()} {this._renderProjects( - relayersAndDappProjects, - this.props.translate.get(Key.ProjectsHeader, Deco.Upper), - colors.projectsGrey, - false, - )} - {this._renderTokenizationSection()} - {this._renderProtocolSection()} - {this._renderProjects( relayerProjects, this.props.translate.get(Key.RelayersHeader, Deco.Upper), - colors.heroGrey, + colors.projectsGrey, true, )} {this._renderInfoBoxes()} - {this._renderBuildingBlocksSection()} + {this._renderTokenizationSection()} {this._renderUseCases()} {this._renderCallToAction()} <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> @@ -222,15 +161,18 @@ export class Landing extends React.Component<LandingProps, LandingState> { } private _renderHero(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const flexClassName = isSmallScreen + ? 'flex items-center flex-column justify-center' + : 'flex items-center justify-center'; return ( <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 clearfix"> {this._renderWhatsNew()} - <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4 clearfix"> - <div className="col lg-col-5 md-col-5 col-12 sm-center"> - <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} /> - </div> + <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}> + <Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px"> + <Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" /> + </Container> <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}> <div className="inline-block lg-align-middle md-align-middle sm-align-top" @@ -239,37 +181,46 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: '36px', }} > - <div + <Text className="sm-pb2" - style={{ - fontFamily: 'Roboto Mono', - fontSize: isSmallScreen ? 26 : 34, - }} + fontFamily="Roboto" + display="inline-block" + fontColor={colors.grey300} + fontWeight={500} + lineHeight="1.3em" + fontSize={isSmallScreen ? '28px' : '36px'} > {this.props.translate.get(Key.TopHeader, Deco.Cap)} - </div> - <div - className="pt2 h5 sm-mx-auto" - style={{ - maxWidth: 446, - fontFamily: 'Roboto Mono', - lineHeight: 1.7, - fontWeight: 300, - }} + {this.props.translate.getLanguage() === Language.English && ( + <React.Fragment> + {' '} + for{' '} + <TypedText + fontFamily="Roboto" + display="inline-block" + fontColor={colors.white} + fontWeight={700} + lineHeight="1.3em" + fontSize={isSmallScreen ? '28px' : '36px'} + textList={ROTATING_LIST} + shouldRepeat={true} + /> + </React.Fragment> + )} + </Text> + <Container + className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - {this.props.translate.get(Key.TopTagline)} - </div> - <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px"> - <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2"> - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <CallToAction width="175px" type="light"> + <Container paddingRight="20px"> + <Link to={WebsitePaths.Docs}> + <CallToAction type="light"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> </Link> - </div> - <div className="lg-col lg-col-6 sm-center sm-col sm-col-12"> - <Link to={WebsitePaths.Portal} className="text-decoration-none"> - <CallToAction width="175px"> + </Container> + <div> + <Link to={WebsitePaths.Portal}> + <CallToAction> {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} </CallToAction> </Link> @@ -287,19 +238,24 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="sm-center sm-px1"> <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none"> - <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}> - <div - className="mr1 px1" - style={{ - backgroundColor: colors.white, - borderRadius: 3, - color: colors.heroGrey, - height: 23, - }} + <div className="flex items-center sm-pl0 md-pl2 lg-pl0"> + <Container + paddingTop="3px" + paddingLeft="8px" + paddingBottom="3px" + paddingRight="8px" + backgroundColor={colors.white} + borderRadius={6} > - New - </div> - <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div> + <Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}> + New + </Text> + </Container> + <Container marginLeft="12px"> + <Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}> + {WHATS_NEW_TITLE} + </Text> + </Container> </div> </a> </div> @@ -344,16 +300,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); }); - const titleStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - color: colors.grey, - fontWeight: 300, - letterSpacing: 3, - }; return ( <div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}> <div className="mx-auto max-width-4 clearfix sm-px3"> - <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}> + <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}> {title} </div> <div className="clearfix">{projectList}</div> @@ -367,11 +317,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { }} > {this.props.translate.get(Key.FullListPrompt)}{' '} - <Link - to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} - className="text-decoration-none underline" - style={{ color: colors.landingLinkGrey }} - > + <Link to={WebsitePaths.Portal} textDecoration="underline" fontColor={colors.landingLinkGrey}> {this.props.translate.get(Key.FullListLink)} </Link> </div> @@ -402,7 +348,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { > {this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)} </div> - <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div> + <div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div> </div> </div> {!isSmallScreen && this._renderTokenCloud()} @@ -410,116 +356,6 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderProtocolSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 pt4 clearfix"> - <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} /> - </div> - <div - className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto" - style={{ - color: colors.beigeWhite, - maxWidth: isSmallScreen ? 'none' : 445, - height: 430, - lineHeight: '430px', - }} - > - <div - className="inline-block lg-align-middle md-align-middle sm-align-top" - style={{ lineHeight: '43px' }} - > - <div - className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" - style={{ fontFamily: 'Roboto Mono' }} - > - <div>{this.props.translate.get(Key.OffChainOrderRelay, Deco.Cap)}</div> - <div> {this.props.translate.get(Key.OonChainSettlement, Deco.Cap)}</div> - </div> - <div - className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto" - style={{ - fontFamily: 'Roboto Mono', - lineHeight: 1.7, - fontWeight: 300, - maxWidth: 445, - }} - > - {this.props.translate.get(Key.OffChainOnChainDescription, Deco.Cap)} - </div> - </div> - </div> - </div> - </div> - ); - } - private _renderBuildingBlocksSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const descriptionStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - lineHeight: isSmallScreen ? 1.5 : 2, - fontWeight: 300, - fontSize: 15, - maxWidth: isSmallScreen ? 375 : 'none', - }; - const callToActionStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - fontSize: 15, - fontWeight: 300, - maxWidth: isSmallScreen ? 375 : 441, - }; - return ( - <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> - {isSmallScreen && this._renderBlockChipImage()} - <div - className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3" - style={{ color: colors.beigeWhite }} - > - <div - className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center" - style={{ fontFamily: 'Roboto Mono' }} - > - {this.props.translate.get(Key.BuildingBlockSectionHeader, Deco.Cap)} - </div> - <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}> - {this.props.translate.get(Key.BuildingBlockSectionDescription, Deco.Cap)} - </div> - <div className="sm-mx-auto sm-center" style={callToActionStyle}> - {this.props.translate.get(Key.DevToolsPrompt, Deco.Cap)}{' '} - <Link - to={WebsitePaths.ZeroExJs} - className="text-decoration-none underline" - style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} - > - 0x.js - </Link>{' '} - {this.props.translate.get(Key.And)}{' '} - <Link - to={WebsitePaths.SmartContracts} - className="text-decoration-none underline" - style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} - > - {this.props.translate.get(Key.SmartContract)} - </Link>{' '} - {this.props.translate.get(Key.Docs)} - </div> - </div> - {!isSmallScreen && this._renderBlockChipImage()} - </div> - </div> - ); - } - private _renderBlockChipImage(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} /> - </div> - ); - } private _renderTokenCloud(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( @@ -528,48 +364,16 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderAssetTypes(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const assetTypes: AssetType[] = [ - { - title: this.props.translate.get(Key.Currency, Deco.Cap), - imageUrl: '/images/landing/currency.png', - }, - { - title: this.props.translate.get(Key.TraditionalAssets, Deco.Cap), - imageUrl: '/images/landing/stocks.png', - style: { - paddingLeft: isSmallScreen ? 41 : 56, - paddingRight: isSmallScreen ? 41 : 56, - }, - }, - { - title: this.props.translate.get(Key.DigitalGoods, Deco.Cap), - imageUrl: '/images/landing/digital_goods.png', - }, - ]; - const assets = _.map(assetTypes, (assetType: AssetType) => { - const style = _.isUndefined(assetType.style) ? {} : assetType.style; - return ( - <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}> - <div> - <img src={assetType.imageUrl} height="80" /> - </div> - <div - style={{ - fontFamily: 'Roboto Mono', - fontSize: 13.5, - fontWeight: 400, - color: colors.darkestGrey, - lineHeight: 1.4, - }} - > - {assetType.title} - </div> - </div> - ); - }); - return assets; + private _renderMissionAndValuesButton(): React.ReactNode { + return ( + <a + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} + target="_blank" + className="inline-block text-decoration-none" + > + <CallToAction>{this.props.translate.get(Key.OurMissionAndValues, Deco.CapWords)}</CallToAction> + </a> + ); } private _renderInfoBoxes(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; @@ -586,27 +390,34 @@ export class Landing extends React.Component<LandingProps, LandingState> { description: this.props.translate.get(Key.BenefitOneDescription, Deco.Cap), imageUrl: '/images/landing/distributed_network.png', classNames: '', + maxWidth: 160, }, { title: this.props.translate.get(Key.BenefitTwoTitle, Deco.Cap), description: this.props.translate.get(Key.BenefitTwoDescription, Deco.Cap), imageUrl: '/images/landing/liquidity.png', classNames: 'mx-auto', + maxWidth: 160, }, { title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap), description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap), - imageUrl: '/images/landing/open_source.png', + imageUrl: '/images/landing/exchange_everywhere.png', classNames: 'right', + maxWidth: 130, }, ]; const boxes = _.map(boxContents, (boxContent: BoxContent) => { return ( <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4"> <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}> - <div> - <img src={boxContent.imageUrl} style={{ height: 210 }} /> - </div> + <Container className="flex items-center" height="210px"> + <img + className="mx-auto" + src={boxContent.imageUrl} + style={{ height: 'auto', maxWidth: boxContent.maxWidth }} + /> + </Container> <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}> {boxContent.title} </div> @@ -617,15 +428,9 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); }); - const titleStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - color: colors.grey, - fontWeight: 300, - letterSpacing: 3, - }; return ( <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}> - <div className="center pb3 pt4" style={titleStyle}> + <div className="center pb3 pt4" style={TITLE_STYLE}> {this.props.translate.get(Key.BenefitsHeader, Deco.Upper)} </div> <div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}> @@ -634,53 +439,92 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderUseCases(): React.ReactNode { + private _getUseCases(): UseCase[] { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - - const useCases: UseCase[] = [ - { - imageUrl: '/images/landing/governance_icon.png', - type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper), - description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap), - projectIconUrls: ['/images/landing/aragon.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/prediction_market_icon.png', - type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), - description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), - projectIconUrls: ['/images/landing/augur.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/stable_tokens_icon.png', - type: this.props.translate.get(Key.StableTokens, Deco.Upper), - description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), - projectIconUrls: ['/images/landing/maker.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/loans_icon.png', - type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), - description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), - projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'], - classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', - style: { - width: 291, - float: 'right', - marginTop: !isSmallScreen ? 38 : 0, + const isEnglish = this.props.translate.getLanguage() === Language.English; + if (isEnglish) { + return [ + { + imageUrl: '/images/landing/governance_icon.png', + type: this.props.translate.get(Key.GamingAndCollectables, Deco.Upper), + description: this.props.translate.get(Key.GamingAndCollectablesDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', }, - }, - { - imageUrl: '/images/landing/fund_management_icon.png', - type: this.props.translate.get(Key.FundManagement, Deco.Upper), - description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap), - projectIconUrls: ['/images/landing/melonport.png'], - classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', - style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, - }, - ]; - + { + imageUrl: '/images/landing/prediction_market_icon.png', + type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), + description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/fund_management_icon.png', + type: this.props.translate.get(Key.OrderBooks, Deco.Upper), + description: this.props.translate.get(Key.OrderBooksDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/loans_icon.png', + type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), + classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, + }, + { + imageUrl: '/images/landing/stable_tokens_icon.png', + type: this.props.translate.get(Key.StableTokens, Deco.Upper), + description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), + classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, + }, + ]; + } else { + return [ + { + imageUrl: '/images/landing/governance_icon.png', + type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/prediction_market_icon.png', + type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), + description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/stable_tokens_icon.png', + type: this.props.translate.get(Key.StableTokens, Deco.Upper), + description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/loans_icon.png', + type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), + classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, + }, + { + imageUrl: '/images/landing/fund_management_icon.png', + type: this.props.translate.get(Key.FundManagement, Deco.Upper), + description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap), + classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, + }, + ]; + } + } + private _renderUseCases(): React.ReactNode { + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const useCases = this._getUseCases(); const cases = _.map(useCases, (useCase: UseCase) => { const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style; const useCaseBoxStyle = { @@ -715,7 +559,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: 1.5, fontSize: 14, overflow: 'hidden', - height: 104, + height: 124, }} > {useCase.description} @@ -725,7 +569,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); }); return ( - <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> + <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> + <div className="center h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}> + {this.props.translate.get(Key.UseCasesHeader, Deco.Upper)} + </div> <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}> {cases} </div> @@ -751,7 +598,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)} </div> <div className="sm-center sm-pt2 lg-table-cell md-table-cell"> - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <Link to={WebsitePaths.Docs}> <CallToAction fontSize="15px"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..c1802b1f8 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,27 +1,28 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + Link, MarkdownSection, - NestedSidebarMenu, - Styles, utils as sharedUtils, -} from '@0xproject/react-shared'; +} from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { NestedSidebarMenu } from 'ts/components/nested_sidebar_menu'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection } from 'ts/types'; +import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -29,6 +30,7 @@ export interface WikiProps { location: Location; dispatcher: Dispatcher; translate: Translate; + screenWidth: ScreenWidths; } interface WikiState { @@ -36,24 +38,6 @@ interface WikiState { isHoveringSidebar: boolean; } -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflow: 'hidden', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - backgroundColor: colors.gray40, - }, -}; - export class Wiki extends React.Component<WikiProps, WikiState> { private _wikiBackoffTimeoutId: number; private _isUnmounted: boolean; @@ -65,9 +49,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { isHoveringSidebar: false, }; } - public componentDidMount(): void { - window.addEventListener('hashchange', this._onHashChanged.bind(this), false); - } public componentWillMount(): void { // tslint:disable-next-line:no-floating-promises this._fetchArticlesBySectionAsync(); @@ -75,92 +56,79 @@ export class Wiki extends React.Component<WikiProps, WikiState> { public componentWillUnmount(): void { this._isUnmounted = true; clearTimeout(this._wikiBackoffTimeoutId); - window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); - const mainContainersStyle: React.CSSProperties = { - ...styles.mainContainers, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }; - const sidebarHeader = <SidebarHeader title="Wiki" iconUrl="/images/doc_icons/wiki.png" />; - return ( - <div> - <DocumentTitle title="0x Protocol Wiki" /> - <TopBar - blockchainIsLoaded={false} - location={this.props.location} - menuSubsectionsBySection={menuSubsectionsBySection} - translate={this.props.translate} - sidebarHeader={sidebarHeader} - /> - {_.isUndefined(this.state.articlesBySection) ? ( - <div className="col col-12" style={mainContainersStyle}> - <div - className="relative sm-px2 sm-pt2 sm-m1" - style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} - > - <div className="center pb2"> - <CircularProgress size={40} thickness={5} /> - </div> - <div className="center pt2" style={{ paddingBottom: 11 }}> - Loading wiki... - </div> - </div> - </div> - ) : ( - <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> - <div - className="mx-auto max-width-4 flex" - style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} - > - <div - className="relative lg-pl0 md-pl1 sm-hide xs-hide" - style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }} - > - <div - className="absolute" - style={{ - ...styles.menuContainer, - ...mainContainersStyle, - height: 'calc(100vh - 76px)', - }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} - > - <NestedSidebarMenu - topLevelMenu={menuSubsectionsBySection} - menuSubsectionsBySection={menuSubsectionsBySection} - sidebarHeader={sidebarHeader} - /> - </div> - </div> - <div - className="relative" - style={{ - width: '100%', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - backgroundColor: 'white', - }} - > - <div - id={sharedConstants.SCROLL_CONTAINER_ID} - style={{ ...mainContainersStyle, overflow: 'auto' }} - className="absolute" - > - <div id={sharedConstants.SCROLL_TOP_ID} /> - <div id="wiki" style={{ paddingRight: 2 }}> - {this._renderWikiArticles()} - </div> - </div> - </div> - </div> - </div> - )} + : this._getSectionNameToLinks(this.state.articlesBySection); + + const mainContent = _.isUndefined(this.state.articlesBySection) ? ( + <div className="flex justify-center">{this._renderLoading()}</div> + ) : ( + <div id="wiki" style={{ paddingRight: 2 }}> + {this._renderWikiArticles()} </div> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const sidebar = _.isUndefined(this.state.articlesBySection) ? ( + <div /> + ) : ( + <NestedSidebarMenu + sidebarHeader={isSmallScreen ? this._renderSidebarHeader() : undefined} + sectionNameToLinks={sectionNameToLinks} + /> + ); + return ( + <DevelopersPage + sidebar={sidebar} + mainContent={mainContent} + location={this.props.location} + screenWidth={this.props.screenWidth} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + ); + } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + <Link + key={`menu-item-${menuItemInfo.title}`} + to={menuItemInfo.to} + shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab} + > + <Button + borderRadius="4px" + padding="0.4em 0.375em" + width="100%" + fontColor={colors.grey800} + fontSize="14px" + textAlign="left" + > + {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)} + </Button> + </Link> + ); + }); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return ( + <Container> + <SidebarHeader screenWidth={this.props.screenWidth} title={wikiTitle} /> + {menuItems} + </Container> + ); + } + private _renderLoading(): React.ReactNode { + return ( + <Container className="pt4"> + <Container className="center pb2"> + <CircularProgress size={40} thickness={5} /> + </Container> + <Container className="center pt2" paddingBottom="11px"> + Loading wiki... + </Container> + </Container> + ); } private _renderWikiArticles(): React.ReactNode { const sectionNames = _.keys(this.state.articlesBySection); @@ -179,22 +147,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}> - <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}> - See a way to improve this article? - </div> - <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2"> - <RaisedButton href={githubLink} target="_blank" label="Edit on Github" /> - </div> - </div> </div> ); }); - return ( - <div key={`section-${sectionName}`} className="py2 md-px1 sm-px0"> - {renderedArticles} - </div> - ); + return <div key={`section-${sectionName}`}>{renderedArticles}</div>; } private async _fetchArticlesBySectionAsync(): Promise<void> { try { @@ -223,28 +179,19 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap<ALink[]> { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap<ALink[]> = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; - } - private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); - } - private _onHashChanged(_event: any): void { - const hash = window.location.hash.slice(1); - sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); + return sectionNameToLinks; } } diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts index db008d319..e85afd3b1 100644 --- a/packages/website/ts/redux/dispatcher.ts +++ b/packages/website/ts/redux/dispatcher.ts @@ -1,5 +1,4 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { BigNumber } from '@0x/utils'; import { Dispatch } from 'redux'; import { State } from 'ts/redux/reducer'; import { @@ -7,7 +6,7 @@ import { AssetToken, BlockchainErrs, Language, - Order, + PortalOrder, ProviderType, ScreenWidths, Side, @@ -50,7 +49,7 @@ export class Dispatcher { type: ActionTypes.UpdateOrderSalt, }); } - public updateUserSuppliedOrderCache(order: Order): void { + public updateUserSuppliedOrderCache(order: PortalOrder): void { this._dispatch({ data: order, type: ActionTypes.UpdateUserSuppliedOrderCache, @@ -149,10 +148,10 @@ export class Dispatcher { type: ActionTypes.ForceTokenStateRefetch, }); } - public updateECSignature(ecSignature: ECSignature): void { + public updateSignature(signature: string): void { this._dispatch({ - data: ecSignature, - type: ActionTypes.UpdateOrderECSignature, + data: signature, + type: ActionTypes.UpdateOrderSignature, }); } public updateUserWeiBalance(balance?: BigNumber): void { diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index caddabcf0..51c77ba47 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -1,19 +1,19 @@ -import { constants, generatePseudoRandomSalt } from '@0xproject/order-utils'; -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { generatePseudoRandomSalt } from '@0x/order-utils'; +import { BigNumber } from '@0x/utils'; import * as _ from 'lodash'; import * as moment from 'moment'; import { Action, ActionTypes, BlockchainErrs, - Order, + PortalOrder, ProviderType, ScreenWidths, Side, SideToAssetToken, TokenByAddress, } from 'ts/types'; +import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -30,7 +30,7 @@ export interface State { orderExpiryTimestamp: BigNumber; orderFillAmount: BigNumber; orderTakerAddress: string; - orderECSignature: ECSignature; + orderSignature: string; orderSalt: BigNumber; nodeVersion: string; screenWidth: ScreenWidths; @@ -44,7 +44,7 @@ export interface State { isPortalOnboardingShowing: boolean; hasPortalOnboardingBeenClosed: boolean; // Note: cache of supplied orderJSON in fill order step. Do not use for anything else. - userSuppliedOrderCache: Order; + userSuppliedOrderCache: PortalOrder; // Docs docsVersion: string; @@ -64,11 +64,7 @@ export const INITIAL_STATE: State = { networkId: undefined, orderExpiryTimestamp: utils.initialOrderExpiryUnixTimestampSec(), orderFillAmount: undefined, - orderECSignature: { - r: '', - s: '', - v: 27, - }, + orderSignature: '', orderTakerAddress: constants.NULL_ADDRESS, orderSalt: generatePseudoRandomSalt(), nodeVersion: undefined, @@ -89,7 +85,6 @@ export const INITIAL_STATE: State = { // Docs docsVersion: DEFAULT_DOCS_VERSION, availableDocVersions: [DEFAULT_DOCS_VERSION], - // Shared flashMessage: undefined, providerType: ProviderType.Injected, @@ -206,10 +201,10 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { lastForceTokenStateRefetch: moment().unix(), }; - case ActionTypes.UpdateOrderECSignature: { + case ActionTypes.UpdateOrderSignature: { return { ...state, - orderECSignature: action.data, + orderSignature: action.data, }; } diff --git a/packages/website/ts/schemas/portal_order_schema.ts b/packages/website/ts/schemas/portal_order_schema.ts index ea8aeabc6..15e61f5e4 100644 --- a/packages/website/ts/schemas/portal_order_schema.ts +++ b/packages/website/ts/schemas/portal_order_schema.ts @@ -1,7 +1,7 @@ export const portalOrderSchema = { id: '/PortalOrder', properties: { - signedOrder: { $ref: '/SignedOrder' }, + signedOrder: { $ref: '/signedOrderSchema' }, metadata: { $ref: '/OrderMetadata' }, }, required: ['signedOrder', 'metadata'], diff --git a/packages/website/ts/schemas/validator.ts b/packages/website/ts/schemas/validator.ts index 3fd013002..128d943e1 100644 --- a/packages/website/ts/schemas/validator.ts +++ b/packages/website/ts/schemas/validator.ts @@ -1,4 +1,4 @@ -import { SchemaValidator } from '@0xproject/json-schemas'; +import { SchemaValidator } from '@0x/json-schemas'; import { orderMetadataSchema } from 'ts/schemas/metadata_schema'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { portalTokenMetadataSchema } from 'ts/schemas/portal_token_metadata'; diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index 349845a09..0620bae0f 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -1,4 +1,4 @@ -import { colors as sharedColors } from '@0xproject/react-shared'; +import { colors as sharedColors } from '@0x/react-shared'; const appColors = { walletBoxShadow: 'rgba(0, 0, 0, 0.05)', diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index e1b5be39a..ce4b50a58 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -1,5 +1,6 @@ -import { ECSignature } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; +import { ALink } from '@0x/react-shared'; +import { ObjectMap, SignedOrder } from '@0x/types'; +import { BigNumber } from '@0x/utils'; import { Provider } from 'ethereum-types'; import * as React from 'react'; @@ -56,28 +57,12 @@ export interface OrderToken { decimals: number; } -export interface SignedOrder { - maker: string; - taker: string; - makerTokenAddress: string; - takerTokenAddress: string; - makerFee: string; - takerFee: string; - makerTokenAmount: string; - takerTokenAmount: string; - expirationUnixTimestampSec: string; - feeRecipient: string; - salt: string; - ecSignature: ECSignature; - exchangeContractAddress: string; -} - export interface OrderMetadata { makerToken: OrderToken; takerToken: OrderToken; } -export interface Order { +export interface PortalOrder { signedOrder: SignedOrder; metadata: OrderMetadata; } @@ -120,7 +105,7 @@ export enum ActionTypes { UpdateChosenAssetTokenAddress = 'UPDATE_CHOSEN_ASSET_TOKEN_ADDRESS', UpdateOrderTakerAddress = 'UPDATE_ORDER_TAKER_ADDRESS', UpdateOrderSalt = 'UPDATE_ORDER_SALT', - UpdateOrderECSignature = 'UPDATE_ORDER_EC_SIGNATURE', + UpdateOrderSignature = 'UPDATE_ORDER_SIGNATURE', UpdateTokenByAddress = 'UPDATE_TOKEN_BY_ADDRESS', RemoveTokenFromTokenByAddress = 'REMOVE_TOKEN_FROM_TOKEN_BY_ADDRESS', ForceTokenStateRefetch = 'FORCE_TOKEN_STATE_REFETCH', @@ -371,12 +356,15 @@ export enum WebsitePaths { SmartContracts = '/docs/contracts', Connect = '/docs/connect', Web3Wrapper = '/docs/web3-wrapper', + ContractWrappers = '/docs/contract-wrappers', + OrderWatcher = '/docs/order-watcher', SolCompiler = '/docs/sol-compiler', JSONSchemas = '/docs/json-schemas', SolCov = '/docs/sol-cov', Subproviders = '/docs/subproviders', OrderUtils = '/docs/order-utils', EthereumTypes = '/docs/ethereum-types', + AssetBuyer = '/docs/asset-buyer', Careers = '/careers', } @@ -391,6 +379,9 @@ export enum DocPackages { Subproviders = 'SUBPROVIDERS', OrderUtils = 'ORDER_UTILS', EthereumTypes = 'ETHEREUM_TYPES', + ContractWrappers = 'CONTRACT_WRAPPERS', + OrderWatcher = 'ORDER_WATCHER', + AssetBuyer = 'ASSET_BUYER', } export enum Key { @@ -407,10 +398,11 @@ export enum Key { TraditionalAssets = 'TRADITIONAL_ASSETS', DigitalGoods = 'DIGITAL_GOODS', OffChainOrderRelay = 'OFFCHAIN_ORDER_RELAY', - OonChainSettlement = 'OONCHAIN_SETTLEMENT', + OnChainSettlement = 'ONCHAIN_SETTLEMENT', OffChainOnChainDescription = 'OFFCHAIN_ONCHAIN_DESCRIPTION', RelayersHeader = 'RELAYERS_HEADER', BenefitsHeader = 'BENEFITS_HEADER', + UseCasesHeader = 'USE_CASES_HEADER', BenefitOneTitle = 'BENEFIT_ONE_TITLE', BenefitOneDescription = 'BENEFIT_ONE_DESCRIPTION', BenefitTwoTitle = 'BENEFIT_TWO_TITLE', @@ -432,6 +424,10 @@ export enum Key { DecentralizedLoansDescription = 'DECENTRALIZED_LOANS_DESCRIPTION', FundManagement = 'FUND_MANAGEMENT', FundManagementDescription = 'FUND_MANAGEMENT_DESCRIPTION', + GamingAndCollectables = 'GAMING_AND_COLLECTABLES', + GamingAndCollectablesDescription = 'GAMING_AND_COLLECTABLES_DESCRIPTION', + OrderBooks = 'ORDER_BOOKS', + OrderBooksDescription = 'ORDER_BOOKS_DESCRIPTION', FinalCallToAction = 'FINAL_CALL_TO_ACTION', Documentation = 'DOCUMENTATION', Community = 'COMMUNITY', @@ -444,6 +440,10 @@ export enum Key { SolCov = 'SOL_COV', EthereumTypes = 'ETHEREUM_TYPES', Subproviders = 'SUBPROVIDERS', + ZeroExJs = '0X_JS', + ContractWrappers = 'CONTRACT_WRAPPERS', + OrderWatcher = 'ORDER_WATCHER', + AssetBuyer = 'ASSET_BUYER', Blog = 'BLOG', Forum = 'FORUM', Connect = 'CONNECT', @@ -461,6 +461,24 @@ export enum Key { Home = 'HOME', RocketChat = 'ROCKETCHAT', TradeCallToAction = 'TRADE_CALL_TO_ACTION', + OurMissionAndValues = 'OUR_MISSION_AND_VALUES', + BuildARelayer = 'BUILD_A_RELAYER', + BuildARelayerDescription = 'BUILD_A_RELAYER_DESCRIPTION', + DevelopOnEthereum = 'DEVELOP_ON_ETHEREUM', + DevelopOnEthereumDescription = 'DEVELOP_ON_ETHEREUM_DESCRIPTION', + OrderBasics = 'ORDER_BASICS', + OrderBasicsDescription = 'ORDER_BASICS_DESCRIPTION', + UseNetworkedLiquidity = 'USE_NETWORKED_LIQUIDITY', + UseNetworkedLiquidityDescription = 'USE_NETWORKED_LIQUIDITY_DESCRIPTION', + ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION', + Sandbox = 'SANDBOX', + Github = 'GITHUB', + LiveChat = 'LIVE_CHAT', + LibrariesAndTools = 'LIBRARIES_AND_TOOLS', + LibrariesAndToolsDescription = 'LIBRARIES_AND_TOOLS_DESCRIPTION', + More = 'MORE', + StartBuildOn0x = 'START_BUILDING_ON_0X', + StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION', } export enum SmartContractDocSections { @@ -494,7 +512,7 @@ export enum Providers { Parity = 'PARITY', Metamask = 'METAMASK', Mist = 'MIST', - Toshi = 'TOSHI', + CoinbaseWallet = 'COINBASE_WALLET', Cipher = 'CIPHER', } @@ -522,10 +540,6 @@ export interface OutdatedWrappedEtherByNetworkId { export type ItemByAddress<T> = ObjectMap<T>; -export interface ObjectMap<T> { - [key: string]: T; -} - export type TokenStateByAddress = ItemByAddress<TokenState>; export interface TokenState { @@ -576,6 +590,8 @@ export enum BrowserType { Chrome = 'Chrome', Firefox = 'Firefox', Opera = 'Opera', + Safari = 'Safari', + Edge = 'Edge', Other = 'Other', } @@ -600,11 +616,20 @@ export interface InjectedProvider extends Provider { publicConfigStore?: InjectedProviderObservable; } -// Minimal expected interface for an injected web3 object -export interface InjectedWeb3 { - currentProvider: InjectedProvider; - version: { - getNetwork(cd: (err: Error, networkId: string) => void): void; - }; +export interface TutorialInfo { + iconUrl: string; + description: string; + link: ALink; +} + +export enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} + +export interface Package { + description: string; + link: ALink; } // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts index e5a1ddfa4..e990b4fc7 100644 --- a/packages/website/ts/utils/analytics.ts +++ b/packages/website/ts/utils/analytics.ts @@ -1,5 +1,7 @@ +import { assetDataUtils } from '@0x/order-utils'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; -import { ObjectMap, Order } from 'ts/types'; +import { PortalOrder } from 'ts/types'; import { utils } from 'ts/utils/utils'; export interface HeapAnalytics { @@ -53,12 +55,16 @@ export class Analytics { } // tslint:enable:no-floating-promises // Custom methods - public trackOrderEvent(eventName: string, order: Order): void { + public trackOrderEvent(eventName: string, order: PortalOrder): void { + const takerTokenAmount = order.signedOrder.takerAssetAmount.toString(); + const makerTokenAmount = order.signedOrder.makerAssetAmount.toString(); + const takerToken = assetDataUtils.decodeERC20AssetData(order.signedOrder.takerAssetData).tokenAddress; + const makerToken = assetDataUtils.decodeERC20AssetData(order.signedOrder.makerAssetData).tokenAddress; const orderLoggingData = { - takerTokenAmount: order.signedOrder.takerTokenAmount, - makeTokenAmount: order.signedOrder.makerTokenAmount, - takerToken: order.metadata.takerToken.symbol, - makerToken: order.metadata.makerToken.symbol, + takerTokenAmount, + makerTokenAmount, + takerToken, + makerToken, }; this.track(eventName, orderLoggingData); } diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index a1c64f9cb..7b74eccfb 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -18,7 +18,7 @@ export const configs = { DOMAIN_PRODUCTION: '0xproject.com', GOOGLE_ANALYTICS_ID: 'UA-98720122-1', LAST_LOCAL_STORAGE_FILL_CLEARANCE_DATE: '2017-11-22', - LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-7-5', + LAST_LOCAL_STORAGE_TRACKED_TOKEN_CLEARANCE_DATE: '2018-9-7', OUTDATED_WRAPPED_ETHERS: [ { 42: { @@ -44,27 +44,6 @@ export const configs = { [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`], [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`], } as PublicNodeUrlsByNetworkId, - SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'], - SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [ - 'TKN0', - 'TKN1', - 'TKN2', - 'TKN3', - 'TKN4', - 'TKN5', - 'TKN6', - 'TKN7', - 'TKN8', - 'TKN9', - 'TKN10', - 'TKN11', - 'TKN12', - 'TKN13', - 'TKN14', - 'TKN15', - 'TKN16', - 'TKN17', - 'TKN18', - 'TKN19', - ], + SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['ZRX', 'MKR', 'MLN', 'GNT', 'DGD', 'REP'], + SYMBOLS_OF_MINTABLE_ROPSTEN_TOKENS: ['ZRX', 'MKR', 'MLN', 'GNT', 'DGD', 'REP'], }; diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 005d17823..0a8a86c50 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -1,4 +1,9 @@ -import { BigNumber } from '@0xproject/utils'; +import { ALink } from '@0x/react-shared'; +import { BigNumber } from '@0x/utils'; +import { Key, WebsitePaths } from 'ts/types'; + +const URL_FORUM = 'https://forum.0xproject.com'; +const URL_ZEROEX_CHAT = 'https://chat.0xproject.com'; export const constants = { DECIMAL_PLACES_ETH: 18, @@ -24,13 +29,14 @@ export const constants = { NETWORK_ID_MAINNET: 1, NETWORK_ID_KOVAN: 42, NETWORK_ID_TESTRPC: 50, + NETWORK_ID_ROPSTEN: 3, NULL_ADDRESS: '0x0000000000000000000000000000000000000000', PROVIDER_NAME_LEDGER: 'Ledger', PROVIDER_NAME_METAMASK: 'MetaMask', PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer', PROVIDER_NAME_MIST: 'Mist', PROVIDER_NAME_CIPHER: 'Cipher Browser', - PROVIDER_NAME_TOSHI: 'Toshi', + PROVIDER_NAME_COINBASE_WALLET: 'Coinbase Wallet', PROVIDER_NAME_GENERIC: 'Injected Web3', PROVIDER_NAME_PUBLIC: '0x Public', ROLLBAR_ACCESS_TOKEN: '32c39bfa4bb6440faedc1612a9c13d28', @@ -73,20 +79,22 @@ export const constants = { URL_TESTNET_FAUCET: 'https://faucet.0xproject.com', URL_GITHUB_ORG: 'https://github.com/0xProject', URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki', + URL_FORUM, URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn', URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/', - URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8', - URL_TOSHI_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en_US', + URL_COINBASE_WALLET_IOS_APP_STORE: 'https://itunes.apple.com/us/app/coinbase-wallet/id1278383455?mt=8', + URL_COINBASE_WALLET_ANDROID_APP_STORE: 'https://play.google.com/store/apps/details?id=org.toshi&hl=en', URL_METAMASK_HOMEPAGE: 'https://metamask.io/', URL_METAMASK_OPERA_STORE: 'https://addons.opera.com/en/extensions/details/metamask/', URL_MIST_DOWNLOAD: 'https://github.com/ethereum/mist/releases', URL_PARITY_CHROME_STORE: 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/himekenlppkgeaoeddcliojfddemadig', URL_REDDIT: 'https://reddit.com/r/0xproject', + URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_TWITTER: 'https://twitter.com/0xproject', URL_WETH_IO: 'https://weth.io/', - URL_ZEROEX_CHAT: 'https://chat.0xproject.com', + URL_ZEROEX_CHAT, URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API', URL_WEB3_DECODED_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123', @@ -94,4 +102,24 @@ export const constants = { URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', + DEVELOPER_TOPBAR_LINKS: [ + { + title: Key.Home, + to: WebsitePaths.Home, + }, + { + title: Key.Wiki, + to: WebsitePaths.Wiki, + }, + { + title: Key.Forum, + to: URL_FORUM, + shouldOpenInNewTab: true, + }, + { + title: Key.LiveChat, + to: URL_ZEROEX_CHAT, + shouldOpenInNewTab: true, + }, + ] as ALink[], }; diff --git a/packages/website/ts/utils/doc_utils.ts b/packages/website/ts/utils/doc_utils.ts index b9084bba7..e0b883ace 100644 --- a/packages/website/ts/utils/doc_utils.ts +++ b/packages/website/ts/utils/doc_utils.ts @@ -1,5 +1,5 @@ -import { DoxityDocObj, TypeDocNode } from '@0xproject/react-docs'; -import { fetchAsync, logUtils } from '@0xproject/utils'; +import { DocAgnosticFormat, GeneratedDocJson } from '@0x/react-docs'; +import { fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import { S3FileObject, VersionToFilePath } from 'ts/types'; import convert = require('xml-js'); @@ -70,7 +70,7 @@ export const docUtils = { }); return versionFilePaths; }, - async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise<TypeDocNode | DoxityDocObj> { + async getJSONDocFileAsync(filePath: string, s3DocJsonRoot: string): Promise<GeneratedDocJson | DocAgnosticFormat> { const endpoint = `${s3DocJsonRoot}/${filePath}`; const response = await fetchAsync(endpoint); if (response.status !== 200) { diff --git a/packages/website/ts/utils/error_reporter.ts b/packages/website/ts/utils/error_reporter.ts index 6008fffed..6fc1216c3 100644 --- a/packages/website/ts/utils/error_reporter.ts +++ b/packages/website/ts/utils/error_reporter.ts @@ -1,4 +1,5 @@ -import { logUtils } from '@0xproject/utils'; +import { logUtils } from '@0x/utils'; +import Rollbar = require('rollbar'); import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -36,8 +37,8 @@ const rollbarConfig = { 'SecurityError (DOM Exception 18)', ], }; -import Rollbar = require('../../public/js/rollbar.umd.min.js'); -const rollbar = Rollbar.init(rollbarConfig); + +const rollbar = new Rollbar(rollbarConfig); export const errorReporter = { report(err: Error): void { diff --git a/packages/website/ts/utils/fake_token_registry.ts b/packages/website/ts/utils/fake_token_registry.ts new file mode 100644 index 000000000..607dd2553 --- /dev/null +++ b/packages/website/ts/utils/fake_token_registry.ts @@ -0,0 +1,879 @@ +export interface FakeTokenRegistryEntry { + address: string; + name: string; + symbol: string; + decimals: number; +} + +export const fakeTokenRegistry: { [networkId: string]: FakeTokenRegistryEntry[] } = { + '1': [ + { + address: '0xe41d2489571d322189246dafa5ebde1f4699f498', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0x4156d3342d5c385a87d264f90653733592000581', + name: 'Salt', + symbol: 'SALT', + decimals: 8, + }, + { + address: '0x05f4a42e251f2d52b8ed15e9fedaacfcef1fad27', + name: 'Zilliqa', + symbol: 'ZIL', + decimals: 12, + }, + { + address: '0xe0b7927c4af23765cb51314a0e0521a9645f0e2a', + name: 'Digix DAO Token', + symbol: 'DGD', + decimals: 9, + }, + { + address: '0xfa05a73ffe78ef8f1a739473e462c54bae6567d9', + name: 'Lunyr', + symbol: 'LUN', + decimals: 18, + }, + { + address: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', + name: 'Wrapped Ether', + symbol: 'WETH', + decimals: 18, + }, + { + address: '0xbeb9ef514a379b997e0798fdcc901ee474b6d9a1', + name: 'Melon Token', + symbol: 'MLN', + decimals: 18, + }, + { + address: '0x9a642d6b3368ddc662ca244badf32cda716005bc', + name: 'Qtum', + symbol: 'QTUM', + decimals: 18, + }, + { + address: '0xd26114cd6ee289accf82350c8d8487fedb8a0c07', + name: 'OmiseGO', + symbol: 'OMG', + decimals: 18, + }, + { + address: '0xb97048628db6b661d4c2aa833e95dbe1a905b280', + name: 'TenXPay', + symbol: 'PAY', + decimals: 18, + }, + { + address: '0x86fa049857e0209aa7d9e616f7eb3b3b78ecfdb0', + name: 'Eos', + symbol: 'EOS', + decimals: 18, + }, + { + address: '0x888666ca69e0f178ded6d75b5726cee99a87d698', + name: 'Iconomi', + symbol: 'ICN', + decimals: 18, + }, + { + address: '0x744d70fdbe2ba4cf95131626614a1763df805b9e', + name: 'StatusNetwork', + symbol: 'SNT', + decimals: 18, + }, + { + address: '0x6810e776880c02933d47db1b9fc05908e5386b96', + name: 'Gnosis', + symbol: 'GNO', + decimals: 18, + }, + { + address: '0x0d8775f648430679a709e98d2b0cb6250d2887ef', + name: 'Basic Attention Token', + symbol: 'BAT', + decimals: 18, + }, + { + address: '0xb64ef51c888972c908cfacf59b47c1afbc0ab8ac', + name: 'Storj', + symbol: 'STORJ', + decimals: 8, + }, + { + address: '0x1f573d6fb3f13d689ff844b4ce37794d79a7ff1c', + name: 'Bancor', + symbol: 'BNT', + decimals: 18, + }, + { + address: '0x960b236a07cf122663c4303350609a66a7b288c0', + name: 'Aragon', + symbol: 'ANT', + decimals: 18, + }, + { + address: '0x0abdace70d3790235af448c88547603b945604ea', + name: 'district0x', + symbol: 'DNT', + decimals: 18, + }, + { + address: '0xaec2e87e0a235266d9c5adc9deb4b2e29b54d009', + name: 'SingularDTV', + symbol: 'SNGLS', + decimals: 0, + }, + { + address: '0x419d0d8bdd9af5e606ae2232ed285aff190e711b', + name: 'FunFair', + symbol: 'FUN', + decimals: 8, + }, + { + address: '0xaf30d2a7e90d7dc361c8c4585e9bb7d2f6f15bc7', + name: 'FirstBlood', + symbol: '1ST', + decimals: 18, + }, + { + address: '0x08711d3b02c8758f2fb3ab4e80228418a7f8e39c', + name: 'Edgeless', + symbol: 'EDG', + decimals: 0, + }, + { + address: '0x9992ec3cf6a55b00978cddf2b27bc6882d88d1ec', + name: 'Polymath', + symbol: 'POLY', + decimals: 18, + }, + { + address: '0x607f4c5bb672230e8672085532f7e901544a7375', + name: 'iExec', + symbol: 'RLC', + decimals: 9, + }, + { + address: '0x667088b212ce3d06a1b553a7221e1fd19000d9af', + name: 'Wings', + symbol: 'WINGS', + decimals: 18, + }, + { + address: '0x41e5560054824ea6b0732e656e3ad64e20e94e45', + name: 'Civic', + symbol: 'CVC', + decimals: 8, + }, + { + address: '0xb63b606ac810a52cca15e44bb630fd42d8d1d83d', + name: 'Monaco', + symbol: 'MCO', + decimals: 8, + }, + { + address: '0xf433089366899d83a9f26a773d59ec7ecf30355e', + name: 'Metal', + symbol: 'MTL', + decimals: 8, + }, + { + address: '0x12fef5e57bf45873cd9b62e9dbd7bfb99e32d73e', + name: 'Cofoundit', + symbol: 'CFI', + decimals: 18, + }, + { + address: '0xaaaf91d9b90df800df4f55c205fd6989c977e73a', + name: 'Monolith TKN', + symbol: 'TKN', + decimals: 8, + }, + { + address: '0xe7775a6e9bcf904eb39da2b68c5efb4f9360e08c', + name: 'Token-as-a-Service', + symbol: 'TAAS', + decimals: 6, + }, + { + address: '0x2e071d2966aa7d8decb1005885ba1977d6038a65', + name: 'DICE', + symbol: 'ROL', + decimals: 16, + }, + { + address: '0xcb94be6f13a1182e4a4b6140cb7bf2025d28e41b', + name: 'Trustcoin', + symbol: 'TRST', + decimals: 6, + }, + { + address: '0x1776e1f26f98b1a5df9cd347953a26dd3cb46671', + name: 'Numeraire', + symbol: 'NMR', + decimals: 18, + }, + { + address: '0x7c5a0ce9267ed19b22f8cae653f198e3e8daf098', + name: 'Santiment Network Token', + symbol: 'SAN', + decimals: 18, + }, + { + address: '0xdd974d5c2e2928dea5f71b9825b8b646686bd200', + name: 'Kyber Network Crystal', + symbol: 'KNC', + decimals: 18, + }, + { + address: '0xb7cb1c96db6b22b0d3d9536e0108d062bd488f74', + name: 'Walton', + symbol: 'WTC', + decimals: 18, + }, + { + address: '0xd0d6d6c5fe4a677d343cc433536bb717bae167dd', + name: 'adToken', + symbol: 'ADT', + decimals: 9, + }, + { + address: '0x42d6622dece394b54999fbd73d108123806f6a18', + name: 'SpankChain', + symbol: 'SPANK', + decimals: 18, + }, + { + address: '0x701c244b988a513c945973defa05de933b23fe1d', + name: 'openANX', + symbol: 'OAX', + decimals: 18, + }, + { + address: '0x514910771af9ca656af840dff83e8264ecf986ca', + name: 'ChainLink', + symbol: 'LINK', + decimals: 18, + }, + { + address: '0x8f8221afbb33998d8584a2b05749ba73c37a938a', + name: 'Request Network', + symbol: 'REQ', + decimals: 18, + }, + { + address: '0x27054b13b1b798b345b591a4d22e6562d47ea75a', + name: 'AirSwap', + symbol: 'AST', + decimals: 4, + }, + { + address: '0xf0ee6b27b759c9893ce4f094b49ad28fd15a23e4', + name: 'Enigma', + symbol: 'ENG', + decimals: 8, + }, + { + address: '0x818fc6c2ec5986bc6e2cbf00939d90556ab12ce5', + name: 'Kin', + symbol: 'KIN', + decimals: 18, + }, + { + address: '0x27dce1ec4d3f72c3e457cc50354f1f975ddef488', + name: 'AirToken', + symbol: 'AIR', + decimals: 8, + }, + { + address: '0x12480e24eb5bec1a9d4369cab6a80cad3c0a377a', + name: 'Substratum', + symbol: 'SUB', + decimals: 2, + }, + { + address: '0x0e8d6b471e332f140e7d9dbb99e5e3822f728da6', + name: 'ABYSS', + symbol: 'ABYSS', + decimals: 18, + }, + { + address: '0x4ceda7906a5ed2179785cd3a40a69ee8bc99c466', + name: 'AION', + symbol: 'AION', + decimals: 8, + }, + { + address: '0xd8912c10681d8b21fd3742244f44658dba12264e', + name: 'Pluton', + symbol: 'PLU', + decimals: 18, + }, + { + address: '0x1a7a8bd9106f2b8d977e08582dc7d24c723ab0db', + name: 'AppCoins', + symbol: 'APPC', + decimals: 18, + }, + { + address: '0xba5f11b16b155792cf3b2e6880e8706859a8aeb6', + name: 'Aeron', + symbol: 'ARN', + decimals: 8, + }, + { + address: '0xfec0cf7fe078a500abf15f1284958f22049c2c7e', + name: 'Maecenas ART Token', + symbol: 'ART', + decimals: 18, + }, + { + address: '0x0f5d2fb29fb7d3cfee444a200298f468908cc942', + name: 'Decentraland', + symbol: 'MANA', + decimals: 18, + }, + { + address: '0x1c4481750daa5ff521a2a7490d9981ed46465dbd', + name: 'BlockMason Credit Protocol Token', + symbol: 'BCPT', + decimals: 18, + }, + { + address: '0x55296f69f40ea6d20e478533c15a6b08b654e758', + name: 'XY Oracle', + symbol: 'XYO', + decimals: 18, + }, + { + address: '0xd7732e3783b0047aa251928960063f863ad022d8', + name: 'BrahmaOS', + symbol: 'BRM', + decimals: 18, + }, + { + address: '0x7d4b8cce0591c9044a22ee543533b72e976e36c3', + name: 'Change Coin', + symbol: 'CAG', + decimals: 18, + }, + { + address: '0x1d462414fe14cf489c7a21cac78509f4bf8cd7c0', + name: 'CanYaCoin', + symbol: 'CAN', + decimals: 6, + }, + { + address: '0x1234567461d3f8db7496581774bd869c83d51c93', + name: 'BitClave', + symbol: 'CAT', + decimals: 18, + }, + { + address: '0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359', + name: 'Dai Stablecoin v1.0', + symbol: 'DAI', + decimals: 18, + }, + { + address: '0x0cf0ee63788a0849fe5297f3407f701e122cc023', + name: 'Streamr DATAcoin', + symbol: 'DATA', + decimals: 18, + }, + { + address: '0x151202c9c18e495656f372281f493eb7698961d5', + name: 'DEBITUM', + symbol: 'DEB', + decimals: 18, + }, + { + address: '0xba2184520a1cc49a6159c57e61e1844e085615b6', + name: 'HelloGold Token', + symbol: 'HGT', + decimals: 8, + }, + { + address: '0x13f11c9905a08ca76e3e853be63d4f0944326c72', + name: 'Divi Exchange Token', + symbol: 'DIVX', + decimals: 18, + }, + { + address: '0x5b26c5d0772e5bbac8b3182ae9a13f9bb2d03765', + name: 'EDU Token', + symbol: 'EDU', + decimals: 8, + }, + { + address: '0xd49ff13661451313ca1553fd6954bd1d9b6e02b9', + name: 'ElectrifyAsia', + symbol: 'ELEC', + decimals: 18, + }, + { + address: '0x95daaab98046846bf4b2853e23cba236fa394a31', + name: 'EtheremonToken', + symbol: 'EMONT', + decimals: 8, + }, + { + address: '0x5bc7e5f0ab8b2e10d2d0a3f21739fce62459aef3', + name: 'Hut34 Entropy Token', + symbol: 'ENTR', + decimals: 18, + }, + { + address: '0x923108a439c4e8c2315c4f6521e5ce95b44e9b4c', + name: 'Devery.io', + symbol: 'EVE', + decimals: 18, + }, + { + address: '0xf8e386eda857484f5a12e4b5daa9984e06e73705', + name: 'Indorse Token', + symbol: 'IND', + decimals: 18, + }, + { + address: '0x4f4f0db4de903b88f2b1a2847971e231d54f8fd3', + name: 'Geens Platform Token', + symbol: 'GEE', + decimals: 8, + }, + { + address: '0x543ff227f64aa17ea132bf9886cab5db55dcaddf', + name: 'DAOstack', + symbol: 'GEN', + decimals: 18, + }, + { + address: '0x8a854288a5976036a725879164ca3e91d30c6a1b', + name: 'Guaranteed Entrance Token', + symbol: 'GET', + decimals: 18, + }, + { + address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2', + name: 'Maker', + symbol: 'MKR', + decimals: 18, + }, + { + address: '0x9af839687f6c94542ac5ece2e317daae355493a1', + name: 'Hydro Protocol Token', + symbol: 'HOT', + decimals: 18, + }, + { + address: '0x0d262e5dc4a06a0f1c90ce79c7a60c09dfc884e4', + name: 'JET8 Token', + symbol: 'J8T', + decimals: 8, + }, + { + address: '0x8727c112c712c4a03371ac87a74dd6ab104af768', + name: 'Jetcoin Institute Token', + symbol: 'JET', + decimals: 18, + }, + { + address: '0xa4e8c3ec456107ea67d3075bf9e3df3a75823db0', + name: 'Loom Network Token', + symbol: 'LOOM', + decimals: 18, + }, + { + address: '0x957c30ab0426e0c93cd8241e2c60392d08c6ac8e', + name: 'Modum Token', + symbol: 'MOD', + decimals: 0, + }, + { + address: '0x2ef27bf41236bd859a95209e17a43fbd26851f92', + name: 'MORPH', + symbol: 'MORPH', + decimals: 4, + }, + { + address: '0x263c618480dbe35c300d8d5ecda19bbb986acaed', + name: 'MOT', + symbol: 'MOT', + decimals: 18, + }, + { + address: '0xffe02ee4c69edf1b340fcad64fbd6b37a7b9e265', + name: 'NANJCOIN', + symbol: 'NANJ', + decimals: 8, + }, + { + address: '0xc15a399c4ea7815fe36857c9e290ee452a5d6b21', + name: 'BoatPilot Token', + symbol: 'NAVI', + decimals: 18, + }, + { + address: '0x9e46a38f5daabe8683e10793b06749eef7d733d1', + name: 'PolySwarm Nectar', + symbol: 'NCT', + decimals: 18, + }, + { + address: '0xa54ddc7b3cce7fc8b1e3fa0256d0db80d2c10970', + name: 'NEVERDIE Coin', + symbol: 'NDC', + decimals: 18, + }, + { + address: '0xb62132e35a6c13ee1ee0f84dc5d40bad8d815206', + name: 'Nexo', + symbol: 'NEXO', + decimals: 18, + }, + { + address: '0x0235fe624e044a05eed7a43e16e3083bc8a4287a', + name: 'Original Crypto Coin', + symbol: 'OCC', + decimals: 18, + }, + { + address: '0xb5dbc6d3cf380079df3b27135664b6bcf45d1869', + name: 'Omix', + symbol: 'OMX', + decimals: 8, + }, + { + address: '0xfedae5642668f8636a11987ff386bfd215f942ee', + name: 'PolicyPal Network Token', + symbol: 'PAL', + decimals: 18, + }, + { + address: '0x2604fa406be957e542beb89e6754fcde6815e83f', + name: 'Playkey Token', + symbol: 'PKT', + decimals: 18, + }, + { + address: '0xe477292f1b3268687a29376116b0ed27a9c76170', + name: 'Herocoin', + symbol: 'PLAY', + decimals: 18, + }, + { + address: '0x1985365e9f78359a9b6ad760e32412f4a445e862', + name: 'Augur', + symbol: 'REP', + decimals: 18, + }, + { + address: '0x408e41876cccdc0f92210600ef50372656052a38', + name: 'Republic Protocol', + symbol: 'REN', + decimals: 18, + }, + { + address: '0xd0929d411954c47438dc1d871dd6081f5c5e149c', + name: 'Refereum', + symbol: 'RFR', + decimals: 4, + }, + { + address: '0x3d1ba9be9f66b8ee101911bc36d3fb562eac2244', + name: 'Rivetz', + symbol: 'RVT', + decimals: 18, + }, + { + address: '0x6888a16ea9792c15a4dcf2f6c623d055c8ede792', + name: 'Spectiv Signal Token', + symbol: 'SIG', + decimals: 18, + }, + { + address: '0x20f7a3ddf244dc9299975b4da1c39f8d5d75f05a', + name: 'Sapien Network Token', + symbol: 'SPN', + decimals: 6, + }, + { + address: '0xbbff862d906e348e9946bfb2132ecb157da3d4b4', + name: 'Sharder', + symbol: 'SS', + decimals: 18, + }, + { + address: '0x12b306fa98f4cbb8d4457fdff3a0a0a56f07ccdf', + name: 'Spectre.ai D-Token', + symbol: 'SXDT', + decimals: 18, + }, + { + address: '0xff3519eeeea3e76f1f699ccce5e23ee0bdda41ac', + name: 'Blockchain Capital', + symbol: 'BCAP', + decimals: 0, + }, + { + address: '0xced1a8529125d1bd06b54a7b01210df357d00885', + name: 'Too Real Badge', + symbol: 'TRL', + decimals: 0, + }, + { + address: '0xc86d054809623432210c107af2e3f619dcfbf652', + name: 'SENTINEL PROTOCOL', + symbol: 'UPP', + decimals: 18, + }, + { + address: '0x27f610bf36eca0939093343ac28b1534a721dbb4', + name: 'Wand Token', + symbol: 'WAND', + decimals: 18, + }, + { + address: '0x056017c55ae7ae32d12aef7c679df83a85ca75ff', + name: 'WyvernToken', + symbol: 'WYV', + decimals: 18, + }, + { + address: '0x5ca9a71b1d01849c0a95490cc00559717fcf0d1d', + name: 'Aeternity', + symbol: 'AE', + decimals: 18, + }, + { + address: '0xbc86727e770de68b1060c91f6bb6945c73e10388', + name: 'Ink Protocol', + symbol: 'XNK', + decimals: 18, + }, + { + address: '0x0f513ffb4926ff82d7f60a05069047aca295c413', + name: 'CrowdstartCoin', + symbol: 'XSC', + decimals: 18, + }, + { + address: '0xb9e7f8568e08d5659f5d29c4997173d84cdf2607', + name: 'Swarm City Token', + symbol: 'SWT', + decimals: 18, + }, + { + address: '0x6531f133e6deebe7f2dce5a0441aa7ef330b4e53', + name: 'Chronobank TIME', + symbol: 'TIME', + decimals: 8, + }, + { + address: '0xf230b790e05390fc8295f4d3f60332c93bed42e2', + name: 'Tronix', + symbol: 'TRX', + decimals: 6, + }, + { + address: '0x5c543e7ae0a1104f78406c340e9c64fd9fce5170', + name: 'vSlice', + symbol: 'VSL', + decimals: 0, + }, + { + address: '0x4df812f6064def1e5e029f1ca858777cc98d2d81', + name: 'Xaurum', + symbol: 'XAUR', + decimals: 8, + }, + ], + '42': [ + { + address: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0x323b5d4c32345ced77393b3530b1eed0f346429d', + name: 'Melon Token', + symbol: 'MLN', + decimals: 18, + }, + { + address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba', + name: 'Maker DAO', + symbol: 'MKR', + decimals: 18, + }, + { + address: '0xeee3870657e4716670f185df08652dd848fe8f7e', + name: 'Digix DAO Token', + symbol: 'DGD', + decimals: 18, + }, + { + address: '0xb18845c260f680d5b9d84649638813e342e4f8c9', + name: 'Augur Reputation Token', + symbol: 'REP', + decimals: 18, + }, + { + address: '0xef7fff64389b814a946f3e92105513705ca6b990', + name: 'Golem Network Token', + symbol: 'GNT', + decimals: 18, + }, + { + address: '0xd0a1e359811322d97991e03f863a0c30c2cf029c', + name: 'Wrapped Ether', + symbol: 'WETH', + decimals: 18, + }, + ], + '3': [ + { + address: '0xdf18648f5b4357d6cc1e27f7699af4f77ff44558', + name: 'token0', + symbol: 'TKN0', + decimals: 0, + }, + { + address: '0xd7cdcde4302a60c4d74a11eee21fbf455f476021', + name: 'token1', + symbol: 'TKN1', + decimals: 1, + }, + { + address: '0xf080f68c2113d40ff6a8528863f431908680900a', + name: 'token2', + symbol: 'TKN2', + decimals: 2, + }, + { + address: '0xe982b5c62434c98e27d15fed40447dda6b75c4eb', + name: 'token3', + symbol: 'TKN3', + decimals: 3, + }, + { + address: '0x2427d136751c1ca70480d3b2091261d639090a50', + name: 'token4', + symbol: 'TKN4', + decimals: 4, + }, + { + address: '0x7d3eca8ec55bb32bd0056edb9485b07a53d3fbfd', + name: 'token5', + symbol: 'TKN5', + decimals: 5, + }, + { + address: '0xff3c22e0a9014e9b4b1cf7a54bf39ab3107f6123', + name: 'token6', + symbol: 'TKN6', + decimals: 6, + }, + { + address: '0xdec283d9e188397c841ab59d9d9160fd47bc56f8', + name: 'token7', + symbol: 'TKN7', + decimals: 7, + }, + { + address: '0xedf5fd2f60d8fefbfa8011f2769b39657c54c3fd', + name: 'token8', + symbol: 'TKN8', + decimals: 8, + }, + { + address: '0xcd59fe7fa1a1a0ff536966a599b631d9cd5f2914', + name: 'token9', + symbol: 'TKN9', + decimals: 9, + }, + { + address: '0xaece1ee1813d56a5897f19ad50164565203b459f', + name: 'token10', + symbol: 'TKN10', + decimals: 10, + }, + { + address: '0xaab3f0619e529b1f1823be291daa7fcd38a15927', + name: 'token11', + symbol: 'TKN11', + decimals: 11, + }, + { + address: '0x2c46ad0b19cb1c1f3e51ae90d80654a227b08d30', + name: 'token12', + symbol: 'TKN12', + decimals: 12, + }, + { + address: '0x68977f3286a503f2b3930506f1b3a17dafbd9524', + name: 'token13', + symbol: 'TKN13', + decimals: 13, + }, + { + address: '0xe5c400b9ee56b823c6193a662041389624609db6', + name: 'token14', + symbol: 'TKN14', + decimals: 14, + }, + { + address: '0xf16ea9b23ddbeb6b16d253edf6b595da4009bb8b', + name: 'token16', + symbol: 'TKN16', + decimals: 16, + }, + { + address: '0x739a83860971e900c4bbbb92be6cfb9d459ef94a', + name: 'token15', + symbol: 'TKN15', + decimals: 15, + }, + { + address: '0x5eba21470cf683fe91b594afe7106039e38f3312', + name: 'token17', + symbol: 'TKN17', + decimals: 17, + }, + { + address: '0xc0ddd5df448907bb3f50350f3fe7a1da3fb2a2ee', + name: 'token18', + symbol: 'TKN18', + decimals: 18, + }, + { + address: '0x30fa25e53f8031014166fbd5e4bbeac0cd25df74', + name: 'token19', + symbol: 'TKN19', + decimals: 19, + }, + { + address: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + name: '0x Protocol Token', + symbol: 'ZRX', + decimals: 18, + }, + { + address: '0xc778417e063141139fce010982780140aa0cd5ab', + name: 'Ether Token', + symbol: 'WETH', + decimals: 18, + }, + { + address: '0x14823db576c11e4a54ca9e01ca0b28b18d3d1187', + name: 'b0x Protocol Token', + symbol: 'B0X', + decimals: 18, + }, + ], +}; // tslint:disable:max-file-line-count diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts index e9a88b6b3..9afc5904d 100644 --- a/packages/website/ts/utils/fetch_utils.ts +++ b/packages/website/ts/utils/fetch_utils.ts @@ -1,4 +1,4 @@ -import { fetchAsync, logUtils } from '@0xproject/utils'; +import { fetchAsync, logUtils } from '@0x/utils'; import * as _ from 'lodash'; import * as queryString from 'query-string'; diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts index f677b4625..3f32254de 100644 --- a/packages/website/ts/utils/mui_theme.ts +++ b/packages/website/ts/utils/mui_theme.ts @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { getMuiTheme } from 'material-ui/styles'; export const muiTheme = getMuiTheme({ diff --git a/packages/website/ts/utils/order_parser.ts b/packages/website/ts/utils/order_parser.ts index be08da80e..8938fbc53 100644 --- a/packages/website/ts/utils/order_parser.ts +++ b/packages/website/ts/utils/order_parser.ts @@ -1,12 +1,13 @@ -import { logUtils } from '@0xproject/utils'; +import { orderParsingUtils } from '@0x/order-utils'; +import { logUtils } from '@0x/utils'; import * as _ from 'lodash'; import { portalOrderSchema } from 'ts/schemas/portal_order_schema'; import { validator } from 'ts/schemas/validator'; -import { Order } from 'ts/types'; +import { PortalOrder } from 'ts/types'; export const orderParser = { - parse(queryString: string): Order | undefined { + parseQueryString(queryString: string): PortalOrder | undefined { if (queryString.length === 0) { return undefined; } @@ -28,6 +29,22 @@ export const orderParser = { logUtils.log(`Invalid shared order: ${validationResult.errors}`); return undefined; } - return order; + const signedOrder = _.get(order, 'signedOrder'); + const convertedSignedOrder = orderParsingUtils.convertOrderStringFieldsToBigNumber(signedOrder); + const result = { + ...order, + signedOrder: convertedSignedOrder, + }; + return result; + }, + parseJsonString(orderJson: string): PortalOrder { + const order = JSON.parse(orderJson); + const signedOrder = _.get(order, 'signedOrder'); + const convertedSignedOrder = orderParsingUtils.convertOrderStringFieldsToBigNumber(signedOrder); + const result = { + ...order, + signedOrder: convertedSignedOrder, + }; + return result; }, }; diff --git a/packages/website/ts/utils/token_address_overrides.ts b/packages/website/ts/utils/token_address_overrides.ts new file mode 100644 index 000000000..5e7275964 --- /dev/null +++ b/packages/website/ts/utils/token_address_overrides.ts @@ -0,0 +1,24 @@ +import { ObjectMap } from '@0x/types'; +import { constants } from 'ts/utils/constants'; + +// Map of networkId -> tokenSymbol -> tokenAddress +export type TokenOverrides = ObjectMap<ObjectMap<string>>; + +export const tokenAddressOverrides: TokenOverrides = { + [constants.NETWORK_ID_KOVAN]: { + ZRX: '0x2002d3812f58e35f0ea1ffbf80a75a38c32175fa', + REP: '0x8cb3971b8eb709c14616bd556ff6683019e90d9c', + DGD: '0xa4f468c9c692eb6b4b8b06270dae7a2cfeedcde9', + GNT: '0x31fb614e223706f15d0d3c5f4b08bdf0d5c78623', + MKR: '0x7b6b10caa9e8e9552ba72638ea5b47c25afea1f3', + MLN: '0x17e394d1df6ce29d042195ea38411a98ff3ead94', + }, + [constants.NETWORK_ID_ROPSTEN]: { + ZRX: '0xff67881f8d12f372d91baae9752eb3631ff0ed00', + REP: '0xb0b443fe0e8a04c4c85e8fda9c5c1ccc057d6653', + DGD: '0xc4895a5aafa2708d6bc1294e20ec839aad156b1d', + GNT: '0x7f8acc55a359ca4517c30510566ac35b800f7cac', + MKR: '0x06732516acd125b6e83c127752ed5f027e1b276e', + MLN: '0x823ebe83d39115536274a8617e00a1ff3544fd63', + }, +}; diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts index 1ee1a59c5..5595e6e0f 100644 --- a/packages/website/ts/utils/translate.ts +++ b/packages/website/ts/utils/translate.ts @@ -80,7 +80,12 @@ export class Translate { case Deco.CapWords: const words = text.split(' '); - const capitalizedWords = _.map(words, w => this._capitalize(w)); + const capitalizedWords = _.map(words, (w: string, i: number) => { + if (w.length === 1) { + return w; + } + return this._capitalize(w); + }); text = capitalizedWords.join(' '); break; diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 39bbd404c..87aa48018 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -1,22 +1,23 @@ -import { ContractWrappersError, ExchangeContractErrs } from '@0xproject/contract-wrappers'; -import { OrderError } from '@0xproject/order-utils'; -import { constants as sharedConstants, Networks } from '@0xproject/react-shared'; -import { ECSignature, Provider } from '@0xproject/types'; -import { BigNumber } from '@0xproject/utils'; -import { Web3Wrapper } from '@0xproject/web3-wrapper'; +import { ContractWrappersError } from '@0x/contract-wrappers'; +import { assetDataUtils, OrderError } from '@0x/order-utils'; +import { constants as sharedConstants, Networks } from '@0x/react-shared'; +import { ExchangeContractErrs } from '@0x/types'; +import { BigNumber } from '@0x/utils'; +import { Web3Wrapper } from '@0x/web3-wrapper'; import * as bowser from 'bowser'; import deepEqual = require('deep-equal'); import * as _ from 'lodash'; import * as moment from 'moment'; import * as numeral from 'numeral'; +import { Provider } from 'ethereum-types'; import { AccountState, BlockchainCallErrs, BrowserType, Environments, OperatingSystemType, - Order, + PortalOrder, Providers, ProviderType, ScreenWidths, @@ -64,35 +65,36 @@ export const utils = { return formattedDate; }, generateOrder( - exchangeContractAddress: string, + exchangeAddress: string, sideToAssetToken: SideToAssetToken, - expirationUnixTimestampSec: BigNumber, + expirationTimeSeconds: BigNumber, orderTakerAddress: string, orderMakerAddress: string, makerFee: BigNumber, takerFee: BigNumber, - feeRecipient: string, - ecSignature: ECSignature, + feeRecipientAddress: string, + signature: string, tokenByAddress: TokenByAddress, orderSalt: BigNumber, - ): Order { + ): PortalOrder { const makerToken = tokenByAddress[sideToAssetToken[Side.Deposit].address]; const takerToken = tokenByAddress[sideToAssetToken[Side.Receive].address]; const order = { signedOrder: { - maker: orderMakerAddress, - taker: orderTakerAddress, - makerFee: makerFee.toString(), - takerFee: takerFee.toString(), - makerTokenAmount: sideToAssetToken[Side.Deposit].amount.toString(), - takerTokenAmount: sideToAssetToken[Side.Receive].amount.toString(), - makerTokenAddress: makerToken.address, - takerTokenAddress: takerToken.address, - expirationUnixTimestampSec: expirationUnixTimestampSec.toString(), - feeRecipient, - salt: orderSalt.toString(), - ecSignature, - exchangeContractAddress, + senderAddress: constants.NULL_ADDRESS, + makerAddress: orderMakerAddress, + takerAddress: orderTakerAddress, + makerFee, + takerFee, + makerAssetAmount: sideToAssetToken[Side.Deposit].amount, + takerAssetAmount: sideToAssetToken[Side.Receive].amount, + makerAssetData: assetDataUtils.encodeERC20AssetData(makerToken.address), + takerAssetData: assetDataUtils.encodeERC20AssetData(takerToken.address), + expirationTimeSeconds, + feeRecipientAddress, + salt: orderSalt, + signature, + exchangeAddress, }, metadata: { makerToken: { @@ -229,13 +231,6 @@ export const utils = { }, zeroExErrToHumanReadableErrMsg(error: ContractWrappersError | ExchangeContractErrs, takerAddress: string): string { const ContractWrappersErrorToHumanReadableError: { [error: string]: string } = { - [ContractWrappersError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist', - [ContractWrappersError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist', - [ContractWrappersError.TokenTransferProxyContractDoesNotExist]: - 'TokenTransferProxy contract does not exist', - [ContractWrappersError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist', - [ContractWrappersError.TokenContractDoesNotExist]: 'Token contract does not exist', - [ContractWrappersError.ZRXContractDoesNotExist]: 'ZRX contract does not exist', [BlockchainCallErrs.UserHasNoAssociatedAddresses]: 'User has no addresses available', [OrderError.InvalidSignature]: 'Order signature is not valid', [ContractWrappersError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network', @@ -247,12 +242,9 @@ export const utils = { } = { [ExchangeContractErrs.OrderFillExpired]: 'This order has expired', [ExchangeContractErrs.OrderCancelExpired]: 'This order has expired', - [ExchangeContractErrs.OrderCancelAmountZero]: "Order cancel amount can't be 0", - [ExchangeContractErrs.OrderAlreadyCancelledOrFilled]: - 'This order has already been completely filled or cancelled', + [ExchangeContractErrs.OrderCancelled]: 'This order has been cancelled', [ExchangeContractErrs.OrderFillAmountZero]: "Order fill amount can't be 0", - [ExchangeContractErrs.OrderRemainingFillAmountZero]: - 'This order has already been completely filled or cancelled', + [ExchangeContractErrs.OrderRemainingFillAmountZero]: 'This order has already been completely filled', [ExchangeContractErrs.OrderFillRoundingError]: 'Rounding error will occur when filling this order. Please try filling a different amount.', [ExchangeContractErrs.InsufficientTakerBalance]: @@ -324,7 +316,7 @@ export const utils = { } else if ((provider as any).isMetaMask) { parsedProviderName = Providers.Metamask; } else if (!_.isUndefined(_.get(window, 'SOFA'))) { - parsedProviderName = Providers.Toshi; + parsedProviderName = Providers.CoinbaseWallet; } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) { parsedProviderName = Providers.Cipher; } @@ -421,6 +413,10 @@ export const utils = { return BrowserType.Firefox; } else if (bowser.opera) { return BrowserType.Opera; + } else if (bowser.msedge) { + return BrowserType.Edge; + } else if (bowser.safari) { + return BrowserType.Safari; } else { return BrowserType.Other; } @@ -454,14 +450,14 @@ export const utils = { if (isOnMobile) { switch (operatingSystem) { case OperatingSystemType.Android: - downloadLink = constants.URL_TOSHI_ANDROID_APP_STORE; + downloadLink = constants.URL_COINBASE_WALLET_ANDROID_APP_STORE; break; case OperatingSystemType.iOS: - downloadLink = constants.URL_TOSHI_IOS_APP_STORE; + downloadLink = constants.URL_COINBASE_WALLET_IOS_APP_STORE; break; default: - // Toshi is only supported on these mobile OSes - just default to iOS - downloadLink = constants.URL_TOSHI_IOS_APP_STORE; + // Coinbase wallet is only supported on these mobile OSes - just default to iOS + downloadLink = constants.URL_COINBASE_WALLET_IOS_APP_STORE; } } else { switch (browserType) { diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 34171b51e..6421cd459 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -8,7 +8,12 @@ "allowJs": true, "strictNullChecks": false, "noImplicitThis": false, + // tsconfig.json at the monorepo root contains some options required for + // project references which do not work for website. We override those + // options here. "declaration": false, + "declarationMap": false, + "composite": false, "paths": { "*": ["node_modules/@types/*", "*"] } 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, diff --git a/packages/website/webpack.config.js b/packages/website/webpack.config.js index 8653196a6..ec265be93 100644 --- a/packages/website/webpack.config.js +++ b/packages/website/webpack.config.js @@ -1,6 +1,6 @@ const path = require('path'); const webpack = require('webpack'); -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +const TerserPlugin = require('terser-webpack-plugin'); const RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin'); const childProcess = require('child_process'); @@ -9,44 +9,7 @@ const GIT_SHA = childProcess .toString() .trim(); -const generatePlugins = () => { - let plugins = []; - if (process.env.NODE_ENV === 'production') { - plugins = plugins.concat([ - // Since we do not use moment's locale feature, we exclude them from the bundle. - // This reduces the bundle size by 0.4MB. - new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), - new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify(process.env.NODE_ENV), - GIT_SHA: JSON.stringify(GIT_SHA), - }, - }), - // TODO: Revert to webpack bundled version with webpack v4. - // The v3 series bundled version does not support ES6 and - // fails to build. - new UglifyJsPlugin({ - sourceMap: true, - uglifyOptions: { - mangle: { - reserved: ['BigNumber'], - }, - }, - }), - ]); - if (process.env.DEPLOY_ROLLBAR_SOURCEMAPS === 'true') { - plugins = plugins.concat([ - new RollbarSourceMapPlugin({ - accessToken: '32c39bfa4bb6440faedc1612a9c13d28', - version: GIT_SHA, - publicPath: 'https://0xproject.com/', - }), - ]); - } - } - return plugins; -}; -module.exports = { +const config = { entry: ['./ts/index.tsx'], output: { path: path.join(__dirname, '/public'), @@ -92,10 +55,18 @@ module.exports = { test: /\.css$/, loaders: ['style-loader', 'css-loader'], }, - { - test: /\.json$/, - loader: 'json-loader', - }, + ], + }, + optimization: { + minimizer: [ + new TerserPlugin({ + sourceMap: true, + terserOptions: { + mangle: { + reserved: ['BigNumber'], + }, + }, + }), ], }, devServer: { @@ -115,5 +86,39 @@ module.exports = { }, disableHostCheck: true, }, - plugins: generatePlugins(), +}; + +module.exports = (_env, argv) => { + let plugins = []; + if (argv.mode === 'development') { + config.mode = 'development'; + } else { + config.mode = 'production'; + plugins = plugins.concat([ + // Since we do not use moment's locale feature, we exclude them from the bundle. + // This reduces the bundle size by 0.4MB. + new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify(process.env.NODE_ENV), + GIT_SHA: JSON.stringify(GIT_SHA), + }, + }), + ]); + if (process.env.DEPLOY_ROLLBAR_SOURCEMAPS === 'true') { + plugins = plugins.concat([ + new RollbarSourceMapPlugin({ + accessToken: '32c39bfa4bb6440faedc1612a9c13d28', + version: GIT_SHA, + publicPath: 'https://0xproject.com/', + }), + ]); + } + } + console.log('i ｢atl｣: Mode: ', config.mode); + + config.plugins = plugins; + console.log('i ｢atl｣: Plugin Count: ', config.plugins.length); + + return config; }; |
