diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-10-16 14:27:56 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-10-17 01:00:49 +0800 |
commit | aa1085c8f3866da4965c0102be27c0f5e19b3db6 (patch) | |
tree | d3645836619952a9a9d15af8db4a1120112fb206 /packages/website | |
parent | 55be070dcfd7b9704ba24bc387bca0001f0c47f5 (diff) | |
download | dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.tar dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.tar.gz dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.tar.bz2 dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.tar.lz dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.tar.xz dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.tar.zst dexon-0x-contracts-aa1085c8f3866da4965c0102be27c0f5e19b3db6.zip |
feat(website): add asset-buyer documentation
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/md/docs/asset_buyer/installation.md | 17 | ||||
-rw-r--r-- | packages/website/md/docs/asset_buyer/introduction.md | 1 | ||||
-rw-r--r-- | packages/website/md/docs/asset_buyer/usage.md | 39 | ||||
-rw-r--r-- | packages/website/translations/english.json | 1 | ||||
-rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 7 | ||||
-rw-r--r-- | packages/website/ts/containers/asset_buyer_documentation.ts | 69 | ||||
-rw-r--r-- | packages/website/ts/index.tsx | 8 | ||||
-rw-r--r-- | packages/website/ts/pages/documentation/doc_page.tsx | 1 | ||||
-rw-r--r-- | packages/website/ts/types.ts | 3 |
9 files changed, 145 insertions, 1 deletions
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..483ee2b65 --- /dev/null +++ b/packages/website/md/docs/asset_buyer/installation.md @@ -0,0 +1,17 @@ +**Install** + +```bash +yarn add @0xproject/asset-buyer +``` + +**Import** + +```javascript +import { AssetBuyer } from '@0xproject/asset-buyer'; +``` + +or + +```javascript +var AssetBuyer = require('@0xproject/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..a40d20cc9 --- /dev/null +++ b/packages/website/md/docs/asset_buyer/introduction.md @@ -0,0 +1 @@ +Welcome to the [@0xproject/asset-buyer](https://github.com/0xProject/0x-monorepo/tree/development/packages/asset-buyer) documentation! AssetBuyer is a library that provides an easy way to buy any asset with ETH in one click, leveraging 0x liquidity and the [Forwarder contract](https://0xproject.com/docs/contracts#Forwarder). 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..93c681f40 --- /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 fees) +console.log(quoteInfo.feeAmount); // a portion of the total ethAmount above that was used to buy 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/translations/english.json b/packages/website/translations/english.json index 9ce458111..ac8e4900a 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -73,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", diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index 7cf3c6ecb..fe2c1fcf9 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -92,6 +92,7 @@ const DOC_WEBSITE_PATHS_TO_KEY = { [WebsitePaths.ZeroExJs]: Key.ZeroExJs, [WebsitePaths.OrderUtils]: Key.OrderUtils, [WebsitePaths.OrderWatcher]: Key.OrderWatcher, + [WebsitePaths.AssetBuyer]: Key.AssetBuyer, }; const DEFAULT_HEIGHT = 68; @@ -214,6 +215,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)} /> </Link>, + <Link key="subMenuItem-asset-buyer" to={WebsitePaths.AssetBuyer} className="text-decoration-none"> + <MenuItem + style={{ fontSize: styles.menuItem.fontSize }} + primaryText={this.props.translate.get(Key.AssetBuyer, Deco.CapWords)} + /> + </Link>, <a key="subMenuItem-whitePaper" target="_blank" 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..f794625de --- /dev/null +++ b/packages/website/ts/containers/asset_buyer_documentation.ts @@ -0,0 +1,69 @@ +import { DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/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 { 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: '@0xproject/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; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: DocPageProps): ConnectedState => ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, +}); + +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/index.tsx b/packages/website/ts/index.tsx index d4a79cc4f..bb218eac1 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -68,6 +68,9 @@ const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async ( const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', async () => 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'; const DOCUMENT_DESCRIPTION = 'An Open Protocol For Decentralized Exchange On The Ethereum Blockchain'; @@ -133,7 +136,10 @@ render( path={`${WebsitePaths.EthereumTypes}/:version?`} component={LazyEthereumTypesDocumentation} /> - + <Route + path={`${WebsitePaths.AssetBuyer}/:version?`} + component={LazyAssetBuyerDocumentation} + /> {/* Legacy endpoints */} <Route path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`} diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 87a806b2b..135581fc9 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -43,6 +43,7 @@ const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.OrderUtils]: 'order-utils', [DocPackages.OrderWatcher]: 'order-watcher', [DocPackages.EthereumTypes]: 'ethereum-types', + [DocPackages.AssetBuyer]: 'asset-buyer', }; export interface DocPageProps { diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 4ec45c46e..7e140c951 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -363,6 +363,7 @@ export enum WebsitePaths { Subproviders = '/docs/subproviders', OrderUtils = '/docs/order-utils', EthereumTypes = '/docs/ethereum-types', + AssetBuyer = '/docs/asset-buyer', Careers = '/careers', } @@ -379,6 +380,7 @@ export enum DocPackages { EthereumTypes = 'ETHEREUM_TYPES', ContractWrappers = 'CONTRACT_WRAPPERS', OrderWatcher = 'ORDER_WATCHER', + AssetBuyer = 'ASSET_BUYER', } export enum Key { @@ -440,6 +442,7 @@ export enum Key { ZeroExJs = '0X_JS', ContractWrappers = 'CONTRACT_WRAPPERS', OrderWatcher = 'ORDER_WATCHER', + AssetBuyer = 'ASSET_BUYER', Blog = 'BLOG', Forum = 'FORUM', Connect = 'CONNECT', |