From 8c9e2c8febc9773c15313a2fa800688bfda458c7 Mon Sep 17 00:00:00 2001 From: Ludovic Levalleux Date: Fri, 20 Oct 2023 16:57:22 +0100 Subject: [PATCH] improve documentation --- docs/boson-environments.md | 77 +++++++++++++++++++++++++++++---- docs/redemption-widget.md | 71 +++++++++++++++++++++++++----- public/scripts/boson-widgets.js | 8 +++- 3 files changed, 134 insertions(+), 22 deletions(-) diff --git a/docs/boson-environments.md b/docs/boson-environments.md index 19612e7..c54aa27 100644 --- a/docs/boson-environments.md +++ b/docs/boson-environments.md @@ -15,14 +15,73 @@ In addition, it's possible to deploy your own environment on your local machine. Each environment (except ***local***) is currently deployed on several configurations, corresponding to different blockchains. +The dApps (Marketplace and Dispute Resolution Center) and widgets are able to switch between configurations of the same environment. + The following table recaps all configurations, per environment -| environment | configuration | blockchain | subgraph | -| ----------- | ------------- | ---------- | -------- | -| local | local-31337-0 | local (testnet) | http://localhost:8000/subgraphs/name/boson/corecomponents/graphql -| testing | testing-80001-0 | Polygon Mumbai (testnet) | https://api.thegraph.com/subgraphs/name/bosonprotocol/mumbai-testing -| testing | testing-5-0 | Ethereum Goerli (testnet) | https://api.thegraph.com/subgraphs/name/bosonprotocol/goerli-testing -| staging | staging-80001-0 | Polygon Mumbai (testnet) | https://api.thegraph.com/subgraphs/name/bosonprotocol/mumbai-staging -| staging | staging-5-0 | Polygon Mumbai (testnet) | https://api.thegraph.com/subgraphs/name/bosonprotocol/goerli-staging -| production | production-137-0 | Polygon | https://api.thegraph.com/subgraphs/name/bosonprotocol/polygon -| production | production-1-0 | Ethereum Mainnet | https://api.thegraph.com/subgraphs/name/bosonprotocol/ethereum + + + + + + +
Environment
production + + + + +
ConfigurationBlockchainSubgraph
production-137-0 Polygonhttps://api.thegraph.com/subgraphs/name/bosonprotocol/polygon
production-1-0 Ethereum Mainnethttps://api.thegraph.com/subgraphs/name/bosonprotocol/ethereum
+ + + + +
dApps
Marketplacehttps://bosonapp.io
Dispute Resolution Centerhttps://disputes.bosonprotocol.io
+ + + +
Widgets
Redemptionhttps://widgets.bosonprotocol.io/#/redeem
Financehttps://widgets.bosonprotocol.io/#/finance
+
staging + + + + +
ConfigurationBlockchainSubgraph
staging-80001-0 Polygon Mumbai (testnet)https://api.thegraph.com/subgraphs/name/bosonprotocol/mumbai-staging
staging-5-0 Ethereum Goerli (testnet)https://api.thegraph.com/subgraphs/name/bosonprotocol/goerli-staging
+ + + + +
dApps
Marketplacehttps://interface-staging.on.fleek.co
Dispute Resolution Centerhttps://drcenter-staging.on.fleek.co/
+ + + +
Widgets
Redemptionhttps://widgets-staging.on.fleek.co/#/redeem
Financehttps://widgets-staging.on.fleek.co/#/finance
+
testing + + + + +
ConfigurationBlockchainSubgraph
testing-80001-0Polygon Mumbai (testnet)https://api.thegraph.com/subgraphs/name/bosonprotocol/mumbai-testing
testing-5-0 Ethereum Goerli (testnet)https://api.thegraph.com/subgraphs/name/bosonprotocol/goerli-testing
+ + + + +
dApps
Marketplacehttps://interface-test.on.fleek.co
Dispute Resolution Centerhttps://drcenter-test.on.fleek.co/
+ + + +
Widgets
Redemptionhttps://widgets-test.on.fleek.co/#/redeem
Financehttps://widgets-test.on.fleek.co/#/finance
+
local + + + +
ConfigurationBlockchainSubgraph
local-31337-0 local (testnet)http://localhost:8000/subgraphs/name/boson/corecomponents/graphql
+ + + + +
dApps
Marketplacehttp://localhost:3333
Dispute Resolution Centerhttp://localhost:3333
+ + + +
Widgets
Redemptionhttp://localhost:3000/#/redeem
Financehttp://localhost:3000/#/finance
+
diff --git a/docs/redemption-widget.md b/docs/redemption-widget.md index 0e27f5b..f8e7856 100644 --- a/docs/redemption-widget.md +++ b/docs/redemption-widget.md @@ -6,7 +6,7 @@ ## Redeeming rNFTs using the Boson Widget -With the release of the Boson Redemption Widget Sellers can now offer redemption of their rNFTs on their own domains. +With the release of the Boson Redemption Widget, Sellers can now offer redemption of their rNFTs on their own domains. Sellers can chose to sell their rNFTs everywhere in the metaverse, in game, on NFT marketplaces, or from the Boson dApp whilst bringing users back to their own domain to redeem their NFTs. @@ -24,9 +24,11 @@ To integrate the Boson Redemption Widget, all a seller needs to do is: 2. The Seller then needs to create a button with the fragment identifier *id="boson-redeem"*. When clicked, the redeem modal will popup on the Seller's website. ``` - + ``` +The ```data-config-id``` parameter specifies the Boson Configuration addressed by the widget (here ***production-137-0*** is the production configuration deployed on the Polygon blockchain). See [Boson Environment](./boson-environments.md) to get more details. + ![Redemption Widget Items View](./assets/redemption-widget/redemption_widget_2.png) ## Using the Boson Redemption Button @@ -44,35 +46,82 @@ As a seller you can also chose to use the Boson branded "Redeem" Button on your 2. Add the below class name to the "boson-redeem" button: ``` - + ``` ![Boson Redeem Button](./assets/redemption-widget/redeem.png) -### Redeeming a specific rNFT +### Redeeming specific rNFTs -The Boson Widget's default behaviour is to show a buyer all of their redeemable vouchers, the widget be configured to direct a buyer to a given rNFT for redemption, this enables different user flows. This the way that the Widget is used on [the Boson dApp](https://bosonapp.io/). +#### A specific rNFT -A Seller can specify which exchange is going to be redeemed by the widget, by: +The Boson Widget's default behaviour is to show a buyer all of their redeemable vouchers. However, the widget can be configured to direct a buyer to a given rNFT for redemption, this enables different user flows. This the way that the Widget is used on [the Boson dApp](https://bosonapp.io/). - 1. add a *data-exchange-id* tag to the "boson-redeem" button, specifying the exchangeId of a given exchange: +A Seller can specify which exchange is going to be redeemed by the widget, by adding a *data-exchange-id* tag to the "boson-redeem" button, specifying the exchangeId of a given exchange: ``` - + ``` You can find an example HTML file which embeds the widgets on the the widgets subdomain : https://widgets.bosonprotocol.io/example.html -### Advanced redemption flows +#### rNFTs for a specific seller + +The Boson Widget's default behaviour is to show a buyer all of their redeemable vouchers. However, the widget can be configured to show only the rNFTs emitted by a specific Boson Seller Account (typically the seller account the redemption site is referring to). + +To add a sellerId filter to the redemption widget, add a *data-seller-id* tag to the "boson-redeem" button, specifying the sellerId of the Boson Seller account you're addressing to: +``` + +``` + +### Integrating the Redemption Widget as an iFrame + +Instead of using the Redeem Button as shown above, the redemption widget can be embedded in any web page using an iFrame HTML element. + +For instance: ``````. + +In which case the page: +- does not need to include any specific line (like the ```