From aa1085c8f3866da4965c0102be27c0f5e19b3db6 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 15 Oct 2018 23:27:56 -0700 Subject: feat(website): add asset-buyer documentation --- .../website/md/docs/asset_buyer/installation.md | 17 ++++++ .../website/md/docs/asset_buyer/introduction.md | 1 + packages/website/md/docs/asset_buyer/usage.md | 39 ++++++++++++ packages/website/translations/english.json | 1 + packages/website/ts/components/top_bar/top_bar.tsx | 7 +++ .../ts/containers/asset_buyer_documentation.ts | 69 ++++++++++++++++++++++ packages/website/ts/index.tsx | 8 ++- .../website/ts/pages/documentation/doc_page.tsx | 1 + packages/website/ts/types.ts | 3 + 9 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 packages/website/md/docs/asset_buyer/installation.md create mode 100644 packages/website/md/docs/asset_buyer/introduction.md create mode 100644 packages/website/md/docs/asset_buyer/usage.md create mode 100644 packages/website/ts/containers/asset_buyer_documentation.ts 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 { primaryText={this.props.translate.get(Key.EthereumTypes, Deco.CapWords)} /> , + + + , ({ + docsVersion: state.docsVersion, + availableDocVersions: state.availableDocVersions, + translate: state.translate, + docsInfo, +}); + +const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const Documentation: React.ComponentClass = 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} /> - + {/* Legacy endpoints */}