diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml new file mode 100644 index 000000000..f8ac85f56 --- /dev/null +++ b/.github/workflows/jekyll-gh-pages.yml @@ -0,0 +1,62 @@ +# Sample workflow for building and deploying a Jekyll site to GitHub Pages +name: Deploy Jekyll with GitHub Pages dependencies preinstalled + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + # Allows to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.ref }} + fetch-depth: 0 + - name: Setup Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: '3.3' # Not needed with a .ruby-version file + bundler-cache: true # runs 'bundle install' and caches installed gems automatically + cache-version: 0 # Increment this number if you need to re-download cached gems + - name: Setup Pages + id: pages + uses: actions/configure-pages@v5 + - name: Build Jekyll site + # Outputs to the './_site' directory by default + run: bundle install && bundle exec jekyll build -d ../_site --baseurl "${{ steps.pages.outputs.base_path }}" + working-directory: ./docs + env: + JEKYLL_ENV: production + - name: Upload artifact + # Automatically uploads an artifact from the './_site' directory by default + uses: actions/upload-pages-artifact@v4 + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index 3a65fede4..0959cf354 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,9 @@ test-results.json .vscode codecov .qodo + +_site +.sass-cache +.jekyll-cache +.jekyll-metadata +vendor diff --git a/docs/404.html b/docs/404.html new file mode 100644 index 000000000..3a16ab533 --- /dev/null +++ b/docs/404.html @@ -0,0 +1,25 @@ +--- +permalink: /404.html +layout: page +--- + + + +
+

404

+ +

Page not found :(

+

The requested page could not be found.

+
diff --git a/docs/Gemfile b/docs/Gemfile new file mode 100644 index 000000000..ad8fbb6ed --- /dev/null +++ b/docs/Gemfile @@ -0,0 +1,46 @@ +source "https://rubygems.org" +# Hello! This is where you manage which Jekyll version is used to run. +# When you want to use a different version, change it below, save the +# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: +# +# bundle exec jekyll serve +# +# This will help ensure the proper Jekyll version is running. +# Happy Jekylling! +gem "jekyll", "~> 4.4.1" +# This is the default theme for new Jekyll sites. You may change this to anything you like. +gem "minima", "~> 2.5" +# If you want to use GitHub Pages, remove the "gem "jekyll"" above and +# uncomment the line below. To upgrade, run `bundle update github-pages`. +# gem "github-pages", group: :jekyll_plugins +# If you have any plugins, put them here! +group :jekyll_plugins do + gem "jekyll-feed", "~> 0.12" + +end + +# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem +# and associated library. +platforms :mingw, :x64_mingw, :mswin, :jruby do + gem "tzinfo", ">= 1", "< 3" + gem "tzinfo-data" +end + +# Performance-booster for watching directories on Windows +gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin] + +# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem +# do not have a Java counterpart. +gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby] + +# From https://github.com/just-the-docs/just-the-docs?tab=readme-ov-file#use-as-a-ruby-gem +gem "just-the-docs" + +# From https://github.com/jekyll/jekyll-sitemap +gem "jekyll-sitemap" + +# From https://github.com/jekyll/jekyll-watch +gem "jekyll-watch" + +# From https://github.com/just-the-docs/just-the-docs-template/blob/main/README.md +gem "jekyll-default-layout" diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock new file mode 100644 index 000000000..7185f1db1 --- /dev/null +++ b/docs/Gemfile.lock @@ -0,0 +1,190 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + base64 (0.3.0) + bigdecimal (3.3.1) + colorator (1.1.0) + concurrent-ruby (1.3.5) + csv (3.3.5) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + ffi (1.17.2) + ffi (1.17.2-aarch64-linux-gnu) + ffi (1.17.2-aarch64-linux-musl) + ffi (1.17.2-arm-linux-gnu) + ffi (1.17.2-arm-linux-musl) + ffi (1.17.2-arm64-darwin) + ffi (1.17.2-x86-linux-gnu) + ffi (1.17.2-x86-linux-musl) + ffi (1.17.2-x86_64-darwin) + ffi (1.17.2-x86_64-linux-gnu) + ffi (1.17.2-x86_64-linux-musl) + forwardable-extended (2.6.0) + google-protobuf (4.33.1) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-aarch64-linux-gnu) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-aarch64-linux-musl) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-arm64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-x86-linux-gnu) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-x86-linux-musl) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-x86_64-darwin) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-x86_64-linux-gnu) + bigdecimal + rake (>= 13) + google-protobuf (4.33.1-x86_64-linux-musl) + bigdecimal + rake (>= 13) + http_parser.rb (0.8.0) + i18n (1.14.7) + concurrent-ruby (~> 1.0) + jekyll (4.4.1) + addressable (~> 2.4) + base64 (~> 0.2) + colorator (~> 1.0) + csv (~> 3.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + json (~> 2.6) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (~> 0.3, >= 0.3.6) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) + safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-default-layout (0.1.5) + jekyll (>= 3.0, < 5.0) + jekyll-feed (0.17.0) + jekyll (>= 3.7, < 5.0) + jekyll-include-cache (0.2.1) + jekyll (>= 3.7, < 5.0) + jekyll-sass-converter (3.1.0) + sass-embedded (~> 1.75) + jekyll-seo-tag (2.8.0) + jekyll (>= 3.8, < 5.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-watch (2.2.1) + listen (~> 3.0) + json (2.16.0) + just-the-docs (0.10.1) + jekyll (>= 3.8.5) + jekyll-include-cache + jekyll-seo-tag (>= 2.0) + rake (>= 12.3.1) + kramdown (2.5.1) + rexml (>= 3.3.9) + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + minima (2.5.2) + jekyll (>= 3.5, < 5.0) + jekyll-feed (~> 0.9) + jekyll-seo-tag (~> 2.1) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (6.0.2) + rake (13.3.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + rexml (3.4.4) + rouge (4.6.1) + safe_yaml (1.0.5) + sass-embedded (1.94.1) + google-protobuf (~> 4.31) + rake (>= 13) + sass-embedded (1.94.1-aarch64-linux-android) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-aarch64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-aarch64-linux-musl) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-arm-linux-androideabi) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-arm-linux-gnueabihf) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-arm-linux-musleabihf) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-arm64-darwin) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-riscv64-linux-android) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-riscv64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-riscv64-linux-musl) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-x86_64-darwin) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-x86_64-linux-android) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-x86_64-linux-gnu) + google-protobuf (~> 4.31) + sass-embedded (1.94.1-x86_64-linux-musl) + google-protobuf (~> 4.31) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + unicode-display_width (2.6.0) + webrick (1.9.1) + +PLATFORMS + aarch64-linux-android + aarch64-linux-gnu + aarch64-linux-musl + arm-linux-androideabi + arm-linux-gnu + arm-linux-gnueabihf + arm-linux-musl + arm-linux-musleabihf + arm64-darwin + riscv64-linux-android + riscv64-linux-gnu + riscv64-linux-musl + ruby + x86-linux-gnu + x86-linux-musl + x86_64-darwin + x86_64-linux-android + x86_64-linux-gnu + x86_64-linux-musl + +DEPENDENCIES + http_parser.rb (~> 0.6.0) + jekyll (~> 4.4.1) + jekyll-default-layout + jekyll-feed (~> 0.12) + jekyll-sitemap + jekyll-watch + just-the-docs + minima (~> 2.5) + tzinfo (>= 1, < 3) + tzinfo-data + wdm (~> 0.1) + +BUNDLED WITH + 2.7.2 diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..53e82919b --- /dev/null +++ b/docs/README.md @@ -0,0 +1,10 @@ +--- +layout: page +title: Quick Start +permalink: /readme/ +description: Try out our decentralized marketplace +nav_order: 2 +--- + +# Quick start tutorials + diff --git a/docs/_config.yml b/docs/_config.yml new file mode 100644 index 000000000..3b2bf9d3a --- /dev/null +++ b/docs/_config.yml @@ -0,0 +1,56 @@ +# Welcome to Jekyll! +# +# This config file is meant for settings that affect your whole blog, values +# which you are expected to set up once and rarely edit after that. If you find +# yourself editing this file very often, consider using Jekyll's data files +# feature for the data you need to update frequently. +# +# For technical reasons, this file is *NOT* reloaded automatically when you use +# 'bundle exec jekyll serve'. If you change this file, please restart the server process. +# +# If you need help with YAML syntax, here are some quick references for you: +# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml +# https://learnxinyminutes.com/docs/yaml/ +# +# Site settings +# These are used to personalize your new site. If you look in the HTML files, +# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on. +# You can create any custom variable you would like, and they will be accessible +# in the templates via {{ site.myvariable }}. + +title: Boson Decentralized Marketplace +description: >- # this means to ignore newlines until "baseurl:" + Boson Protocol is building the infrastructure for + decentralized commerce, enabling trustless exchange of digital and physical goods + using smart contracts on the blockchain. +author: Boson Protocol Team +baseurl: "/interface" # the subpath of your site, e.g. /blog +url: "https://bosonprotocol.github.io/interface" +twitter_username: bosonprotocol +github_username: bosonprotocol + +# Build settings +theme: just-the-docs +plugins: + - jekyll-sitemap + - jekyll-default-layout + +# Exclude from processing. +# The following items will not be processed, by default. +# Any item listed under the `exclude:` key here will be automatically added to +# the internal "default list". +# +# Excluded items can be processed by explicitly listing the directories or +# their entries' file path in the `include:` list. +# +# exclude: +# - .sass-cache/ +# - .jekyll-cache/ +# - gemfiles/ +# - Gemfile +# - Gemfile.lock +# - node_modules/ +# - vendor/bundle/ +# - vendor/cache/ +# - vendor/gems/ +# - vendor/ruby/ diff --git a/docs/_data/menu.yml b/docs/_data/menu.yml new file mode 100644 index 000000000..4a50e62db --- /dev/null +++ b/docs/_data/menu.yml @@ -0,0 +1,48 @@ +- text: Home + url: / +- text: About + url: /about/ +- text: Quick Start + url: /readme/ + subitems: + - text: Buyer Side + url: /buyer-side/ + subitems: + - text: Purchase and redeem an rNFT + url: /buyer-side/purchase-and-redeem-an-rnft/ + - text: Seller Side + url: /seller-side/ + subitems: + - text: Boson for WooCommerce + url: /seller-side/boson-for-woocommerce/ + - text: Selling on the dApp + url: /seller-side/selling-on-the-dapp/ + subitems: + - text: Introduction + url: /seller-side/selling-on-the-dapp/introduction/ + - text: Profile Creation + url: /seller-side/selling-on-the-dapp/profile-creation/ + - text: Storefront Creation + url: /seller-side/selling-on-the-dapp/storefront-creation/ + - text: Creating a Product + url: /seller-side/selling-on-the-dapp/creating-a-product/ + - text: Token Gated Commerce + url: /seller-side/selling-on-the-dapp/token-gated-commerce/ + - text: Widgets + url: /seller-side/widgets/ + subitems: + - text: Overview + url: /seller-side/widgets/ + - text: Metaverse Toolkit + url: /seller-side/widgets/metaverse-toolkit/ + - text: The Commit Button Widget + url: /seller-side/widgets/the-commit-button-widget/ + subitems: + - text: Overview + url: /seller-side/widgets/the-commit-button-widget/overview/ + - text: Style Guide + url: /seller-side/widgets/the-commit-button-widget/commit-button-style-guide/ + - text: The Redemption Widget + url: /seller-side/widgets/the-redemption-widget/ +- text: GitHub + url: https://github.com/bosonprotocol/interface \ No newline at end of file diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html new file mode 100644 index 000000000..b042764a7 --- /dev/null +++ b/docs/_includes/nav.html @@ -0,0 +1,17 @@ +{% assign navurl = page.url | remove: 'index.html' %} + \ No newline at end of file diff --git a/docs/_layouts/-default.html b/docs/_layouts/-default.html new file mode 100644 index 000000000..2d0185027 --- /dev/null +++ b/docs/_layouts/-default.html @@ -0,0 +1,18 @@ + + + + {{ page.title }} + + + +

Navigation:

+ +{% include nav.html nav=site.data.menu %} + +
+ +

{{ page.title }}

+ +{{ content }} + + \ No newline at end of file diff --git a/docs/about.markdown b/docs/about.markdown new file mode 100644 index 000000000..eeaced46c --- /dev/null +++ b/docs/about.markdown @@ -0,0 +1,15 @@ +--- +layout: page +title: About +permalink: /about/ +nav_order: 1 +--- + +Boson Decentralized Marketplace is built upon the [Boson Protocol][boson-protocol], via [Boson Core Components][boson-core-components]. + +You can find the source code for Boson Decentralized Marketplace at GitHub: +[boson-interface][boson-interface] + +[boson-protocol]: https://github.com/bosonprotocol/boson-protocol-contracts +[boson-core-components]: https://github.com/bosonprotocol/core-components +[boson-interface]: https://github.com/bosonprotocol/interface diff --git a/docs/assets/0 (1).png b/docs/assets/0 (1).png new file mode 100644 index 000000000..fe753e1fd Binary files /dev/null and b/docs/assets/0 (1).png differ diff --git a/docs/assets/0.png b/docs/assets/0.png new file mode 100644 index 000000000..fe753e1fd Binary files /dev/null and b/docs/assets/0.png differ diff --git a/docs/assets/buyer-1commit.png b/docs/assets/buyer-1commit.png new file mode 100644 index 000000000..507a64f6c Binary files /dev/null and b/docs/assets/buyer-1commit.png differ diff --git a/docs/assets/buyer-2redeem.png b/docs/assets/buyer-2redeem.png new file mode 100644 index 000000000..809828d15 Binary files /dev/null and b/docs/assets/buyer-2redeem.png differ diff --git a/docs/assets/buyer_1.png b/docs/assets/buyer_1.png new file mode 100644 index 000000000..78b265406 Binary files /dev/null and b/docs/assets/buyer_1.png differ diff --git a/docs/assets/buyer_10.png b/docs/assets/buyer_10.png new file mode 100644 index 000000000..a1b63d517 Binary files /dev/null and b/docs/assets/buyer_10.png differ diff --git a/docs/assets/buyer_11.png b/docs/assets/buyer_11.png new file mode 100644 index 000000000..5840ec3d6 Binary files /dev/null and b/docs/assets/buyer_11.png differ diff --git a/docs/assets/buyer_2.png b/docs/assets/buyer_2.png new file mode 100644 index 000000000..00c2bc632 Binary files /dev/null and b/docs/assets/buyer_2.png differ diff --git a/docs/assets/buyer_5.png b/docs/assets/buyer_5.png new file mode 100644 index 000000000..f4efd4d7f Binary files /dev/null and b/docs/assets/buyer_5.png differ diff --git a/docs/assets/buyer_6.png b/docs/assets/buyer_6.png new file mode 100644 index 000000000..71ab036cd Binary files /dev/null and b/docs/assets/buyer_6.png differ diff --git a/docs/assets/buyer_7.png b/docs/assets/buyer_7.png new file mode 100644 index 000000000..6836af98c Binary files /dev/null and b/docs/assets/buyer_7.png differ diff --git a/docs/assets/buyer_9.png b/docs/assets/buyer_9.png new file mode 100644 index 000000000..ba06365fb Binary files /dev/null and b/docs/assets/buyer_9.png differ diff --git a/docs/assets/commit-button.png b/docs/assets/commit-button.png new file mode 100644 index 000000000..f4850af8f Binary files /dev/null and b/docs/assets/commit-button.png differ diff --git a/docs/assets/commit-widget-overall.png b/docs/assets/commit-widget-overall.png new file mode 100644 index 000000000..c19b0d642 Binary files /dev/null and b/docs/assets/commit-widget-overall.png differ diff --git a/docs/assets/dcl_kiosk.png b/docs/assets/dcl_kiosk.png new file mode 100644 index 000000000..45b7e7eec Binary files /dev/null and b/docs/assets/dcl_kiosk.png differ diff --git a/docs/assets/dcl_widget.png b/docs/assets/dcl_widget.png new file mode 100644 index 000000000..90de4f5c7 Binary files /dev/null and b/docs/assets/dcl_widget.png differ diff --git a/docs/assets/file.excalidraw.svg b/docs/assets/file.excalidraw.svg new file mode 100644 index 000000000..a91b3b28e --- /dev/null +++ b/docs/assets/file.excalidraw.svg @@ -0,0 +1,8 @@ + + + eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daVfiSFx1MDAxN/7ev4Lj+3WoqX2Zb2o7bm1rq7Rtz5nDiVx1MDAxMCRcblx1MDAwNCEuOKf/+9xcdTAwMDIlRYhAlLC8Z9LtQpaqm6p6nrvk3vjPp0JhI+q1/Y0/XG5cdTAwMWL+U8VrXHUwMDA01Y73uPGb3f/gd7pB2IJDtP+5XHUwMDFi3ncq/TPrUdTu/vH77167ja6D6CpcZm9RJWxcdTAwMGUu81x1MDAxYn7Tb0VdOPEv+FxcKPzT/+501PErkde6bvj9XHUwMDBi+ofivlxiSe78XHUwMDFhtvrdXHUwMDFhwSWn2MjhXHRB9zP0XHUwMDE2+VU4WvNcdTAwMWFdPz5id21wXWT8Z++6rMU2brPNTVYqsbjTWtBonEW9Rl+oblxi91x1MDAxZVx1MDAxZutGnfDWv1xiqlH9dVx1MDAwMJz9b13VXHTvr+stv2tvPr6PsO1Vgqhn92E83DtcdTAwMTiBP1xu8Z4n+KQ1RYxcdTAwMTnNmVx1MDAxMsNcdTAwMDO9kdNcdTAwMDZcImyHjbBjRfhcdTAwMWbx7b9YiCuvcntccpK0qsNzoo7X6ra9XHUwMDBlzEt83uPLzSmNXGYl2umv7lx1MDAwN9f1XGJcdTAwMGVcdIxcdTAwMTRmhMaHun5/tLVcdTAwMTCEXGLG+fCA7bG9X+1P+9/xXHUwMDEwd7ymv2+vaN03XHUwMDFh7ji1qi/jNHLgylx1MDAxZdhJriB3XHUwMDE1jaykyH+Kb8iZeK9ytr97XHUwMDE47l/e+Tvk3DQ+33ubnzeG5/36Lb3ZwcVcdTAwMTf7X+vbkn+PTkypXHUwMDE1bl+d8drez9FeXvv3Op3wcdZ2e1usTNpN5f15Wlx1MDAwYp9cdTAwMWZCv9yDXHUwMDE1//F2y99Pv+yUj75uXHUwMDFkbG5cdTAwMWaIXHUwMDA37yRsP5M5tHt9fFC9u3hcdTAwMTJBSWvvpHxcdTAwMWHdnH4rzqFdzb40u5f8YvtbtN+53H3cuSmqkzm0+4OdlrdPgyNcdTAwMTnWyt9cdTAwMWWf6MXz56/eXHUwMDFj2j0+PahcdTAwMWJTfqQtVfzyWP2mg7LfnkO7V8+lZlFcdTAwMGLvonT44/L03L/Ht0dPc2i3RFx1MDAxYd7dZnmzsid59WG3fFbqXFz25tDuTemhdlx1MDAxNz13a0c36vBanlx1MDAxZG2e1q5ma/flt5hcdTAwMTfu21VvwNtEXHSpmNBUXHUwMDEwXHUwMDEzU2YjaN0muaFcdTAwMTFWbmOq/+RcYjwvXHJDXHTTQIWEza5iXHUwMDFlO6ZkwtqF362zo+3qtipWjy5XXcVcdTAwMTAkOVx1MDAxNyO83r+UScSxdNl+zqpGYzTS63RFw7VcdTAwMTGKYlx1MDAxMs/ISimakqxcdTAwMWTf4uPdw4dj8bh7KKOrek39p2j+UzT/KZr3t7tGimbQf4qSYW/pXHUwMDE4Ylx1MDAxOFVcXLmm8zRcdTAwMWQzmSdWVMdQpOM7tFx1MDAxN1GDsCRcdFx05ujFXHUwMDE4g4jT5VC1XHUwMDEw6Fhgp+OBYiGUYkWJmodcdTAwMGJcdTAwMTOv4deFQV/2/IrvZz5cbudZSdDfXHUwMDA3P7aevz89l6vBVbi5xzNcdTAwMDOA61xmXHUwMDAwcKbM60RbQatcdTAwMWG0rkfv+sXn35/B67YjXHUwMDFhVu7tXHUwMDEwXHUwMDE0McJ2M4LAyiDMSKFcdTAwMTjD3Dn12mtbycdG029Vp1x1MDAwYjLZNnNcdTAwMDRcdTAwMTnIQcCpXHUwMDE1mFNipGZcbusxMVx1MDAwNKIweNZK6YvN+JhYXHKvXHUwMDFibYfNZlx1MDAxMMGQn4RBK0pcdTAwMGVtf1xmNy1r1H1vbFHBbbnHkvTSti2OLp6/nCWC3fWCh7///Vvq2UWLXHUwMDE4qbl7keSIXHUwMDFiPvVKiYzSeLhJIdxGXGLVXHUwMDE2cHErn9yfc2RSyommkunZmXSyZbRGTKqdKNi8mVRSibAwaUyqwEp3Olx1MDAxZTApTD/Xioh4TNaBSNu3/nH1uPjnwc75SXB82DverFx1MDAxN1x1MDAxYpmJVMSrc/lESoRWhlx1MDAxMamwjZLSZfEoNpiAlSNAXHUwMDA2zqWQYkxcdTAwMGUgUuVcdTAwMTApZ+tNpFx1MDAxNjBcIlx1MDAwNozdJENSXHUwMDE47HDkLKQqXHUwMDFkUlVcdE6VXHUwMDE2erlzqlx1MDAxNEwrreXslDrZKVxcXHUwMDE3SmVcdTAwMDQxxlx1MDAxMlx1MDAxMsyPUrkgSLCUuFx1MDAwN+gwJElsjb1QKiWcKTA2YiNkLTj18uakedZ5vo2O9+jR7t7W5tX3O5OdU1fDOCWISk6koTBcdTAwMGZcXFx1MDAwMV9Rv6hcdTAwMTZOqa/Uzlx1MDAxOFx1MDAxNUpY35VcdTAwMDJJKDImXGJwKjcxp1x1MDAxMr3enMpcdTAwMDVFmI1woKSIgtM23MjURoBSuYgvSDAqs8jLnVGhf6VcZtbxop7GqJPDYSvJqEZcdTAwMTLExVx1MDAxMFx1MDAxZINostDgJiRlmFx1MDAxZqdcdTAwMTLbXHUwMDAxlfGCiLuK6Vx1MDAxNXhdqJjqh76/UFRcbs3ju1hcdTAwMDd6/fl0RKKvXHUwMDE3+PBy0z8rnj2VXHUwMDFlqqabmV5lniZrZl7TXHUwMDAyU8XBasXaYMnGbcV3XHUwMDEybGbbXHUwMDE5yFVjwyzfXHUwMDBioViq92/AtVx1MDAwNY1t+ptaa4Lto0elocduRSlcdTAwMTAnalojXHUwMDAyXHQjXHUwMDFkI3ckllAkXGZb8OXOsHBcdTAwMGZMXHUwMDE4pvHsXHUwMDE0O/nJwEpSbJrRKlx1MDAxMHH89HlcdTAwMTMsLHRcdTAwMDRufTy98VxmxFx1MDAwNEskLJTx4KowhCtM5HpcdTAwMTFsUDm6+qJcdTAwMWJfguaXXdG+oUX9uXmRnWBjPbhcdTAwMDIxXHUwMDAxzlxmV5QwcCikJlxcOqcuNCigiGZcdTAwMWO+XHUwMDA01lxum3FD2q5l7diva82uRbhcdTAwMGJEU7FjN6Be5lx1MDAxMucslqxcdTAwMTbcIdpcdTAwMTG2XHUwMDA2LrcgzJ1oXHSTXG5cdTAwMTRcdTAwMDW4IDNcdTAwMTPt5EelK0q0XHUwMDA2ZmfUllx1MDAwNfed4vzCXHUwMDAzQoArXHUwMDEyr4dY7iHPXHUwMDAy+XOpTLyNRVxmXHUwMDAwYJjB13o9ztr5ckbvv5dPfjaCnV199u383LutZmZcXJXleW5ujPtcdTAwMWGEXHUwMDA1vVx0P+C7nVx1MDAxMLH4kMGrZW2VsGJcbnMwrlx1MDAwNVx1MDAxOTdoXHUwMDE5okzQmKPUelu0RSFcdTAwMTFJQ5HdOEVwr66pOr05RIxcdTAwMTOPNSNcZq5JXHUwMDAyj/mTL1x1MDAxNrDYuVGz56ZNzidZSfI1glx1MDAwM9OOmrmrT76EKUal4Hq9wrXisvh8cXpcdTAwMTk9XHUwMDExYjqlx+3rXHUwMDAzXCKzx1x1MDAxM9QqmbtYcaBcXPDlMVx1MDAxN5zRlDjpglx1MDAwMrZcdTAwMTSMWU1cclx1MDAwN30gJZZ0TI7/M/adL/muXHUwMDFh9yqGlcQqQ6bB5Jy71eReiW1EKFx1MDAxOWJQSidEmGOIgVx1MDAxMSTdXGJS3JVcdTAwMTNiXHUwMDEwXGJrx5VcdTAwMWGLNlx1MDAwMPuCueXOzjqwb/1hq1x1MDAxZZz+vC7ftFx1MDAxZYI7j5x/vn/6kZl9dTxfy2df0k+f0lx1MDAxOFx1MDAxY30gYClcdTAwMTZcdTAwMWZseFVcdTAwMDNcdTAwMDJcZl+NiTLgzUnlJPm58Vx1MDAwNmaM1GpcdTAwMTDOXe/HZZRRRFJxZDehXHUwMDAwxMpcdTAwMDHQtOYksnGa4cak21x1MDAxYSE8gcfc+Vx1MDAxNyhcdTAwMDIomGWIO0xOTV5cdTAwMWb6hV06v0doXHUwMDAyS8Q5cWY6hX6pQNp5tvZq8kqCXHKVa2bx3lx1MDAwNawqW/uCPVYuzktlfSR8SrNz7kpYvMPkWaBaXCKIXHUwMDAw5lx1MDAxNcZJQlpseFdcbky4wVIqzjhANTXpS2hLuC/Usd6Ma6FjUqFjN0mBcVkmxjVufFcmUlx1MDAxNbiFYO40qynnRoEumZlmJ1dqrFxyzVKNwFfLjWa15Ig5XHUwMDE1bE56glPV/ZJMK7VgeM1cdTAwMTJcdTAwMTNU0KtcdTAwMDfdNu5sbzXLlXrvwNv7mT2XNlNVTu6mrFx1MDAwNtfdXHUwMDAwnSlBXHLVKVx1MDAwZqxcdTAwMTZcdTAwMTTGZVx1MDAxYSxpLMBOXHUwMDA1WVx1MDAxOGFjctiqXHUwMDA0XHUwMDFlXHUwMDFisnJ8lteJVy1WNFx1MDAxOTE4YY+iU/NngUGdiFx1MDAwMSYjXHUwMDE2MKFZg1x1MDAwNCNLPfkqXGZ33zBGwDWB4cd09lx1MDAxOEH6W1xuVpo9tdGIKyG0MMlcdTAwMTdUXHUwMDEwijSYIXmWXHUwMDBmc4nAzmBmpEZ5yKbjxcPWKJKCi/xfUzGF2lgsQFx1MDAwNmqrha3oLHhcdTAwMWXkuIzs/dNrXHUwMDA2jd7ILPZcdTAwMTcsXGbgmd9o+J2Nkf2bjeDaLt6NXG7I61x1MDAxZYQ1XHUwMDFjXHUwMDA1XHUwMDE1rzE8oVx1MDAxOVSrbtV8XHUwMDA1OvOClt+ZhUU3wk5wXHUwMDFktLzG+Vx1MDAxYrLAvft7Q+WHnFx0u/K6vj1q95s5XHUwMDAz01x1MDAxMFwiJVNZvMfUqu5cdTAwMTVcdTAwMDemQkxSMFx1MDAxZKROXHUwMDAyk1x1MDAxYlx1MDAxOGqlSZ7IXHUwMDA0XHUwMDBiSkkj0qv7x5FcdJ5cbig1RufgPn5cZpjvyjV/XHUwMDE3MLfue7nhcspbKJK4TIiyXHUwMDE0WHLOiX0uPTsq00tfV1x1MDAxYZWUIZtcdTAwMDJcdTAwMDBKSPZcdTAwMWb1OLm3tlx1MDAwMU1cdTAwMTBcdTAwMTb5gZJcdTAwMTCDXHUwMDA0wGyUXHUwMDEyJqFSwMlcdTAwMDarOVTyfVxilXGWWu6o3O740H/Ba1x1MDAxNcJaLTd8TqngT+LzTaGWglQtXHUwMDE0WHs4Q3ptem3laiNcdTAwMTUzpDVcdTAwMTNcdTAwMDPj0kJ1oUjF4ONcdTAwMTj+1mvY0pAqjWSGziFO8CGkvq/+9V1I/Vx1MDAxZVx1MDAwNtW8cTqlPjyJ0zdEWlxuSinVNmSRQZ+mV+utNEqZ1IBcdTAwMTNGdfLVVXnjk3KEKVx1MDAxYnkp41x1MDAwNHRyXHQ4NnpcdTAwMWVcdTAwMGZHPobOxVm3O0+R38pcdTAwMWSfU4qNk/h8U6jlOKLSYFx1MDAwZbZghlxiUXrF10pDlGLOXHUwMDEwV9iMv18ub5BcbuhcdTAwMTjcSjMjSolR1GBqzLLN3fdV5L3P3O2HgVx1MDAwYlGYN1KnXHUwMDE0sY5ZvFx1MDAxM+RaXHUwMDBlWFx1MDAxOXhPmPFcZlZvevXQSoNcdTAwMTXcUsQkWYJC5Vx1MDAxOFx0qmbWqESB76zN0uNF76vtelx1MDAxN1RPOn4zaEWFh/C+UofFmVx1MDAxM1CnlEImgfq2VEuKXCIpsFx04f/MKE2vOFlplCrFXHUwMDExJzpcdTAwMTleXUhcdTAwMDRJIUV5XHUwMDA2nUqp4IxcdTAwMTG5bKC+ryToQyGkQv9Oc4LplEK6t1wiSEmZllx1MDAwMlIwe7HW1ElqmFx1MDAwNtL0yoSVXHUwMDA2qVx1MDAxMVxuYWxSXquce+xIXCJJyexcdTAwMTDlwnAs2NLNXrX4KG8helxmWjkhdEq11ZtcYlx1MDAxZFx1MDAxNWk5xi5cdTAwMDGnXHJneZFievL6Slx1MDAwM5TY91FcdTAwMTBw+ZRcdTAwMWNJUlhI+EiAZ6rxzFx1MDAwZmKU1JTaiN6SIfq+6oKPQfRcbkR0YTZXkE4py3lcdTAwMTOkSaGW5ZNKLmSWXHUwMDE4b3rC82rjlHGOtMZcdOdwXHUwMDAxMKVcXIz/YYRJmlx1MDAxNFx1MDAwM29qrvP/41x1MDAwNNNgujhNWur3P1xi0Vx1MDAxNDphz2tEvULHr1x1MDAwNO2gL2w+sJ1SzpGE7cxCLlx1MDAwN8aKXHUwMDEyrnSGN8Kl59euNoqlkchguWBjmIJcdTAwMTU+e1BcdFObtamWXHLf9yU+fzD+2+5cdTAwMDRcdTAwMTW/UFxyupVcdTAwMTDWZy/XYPCUMoG3g8FThMxcdTAwMDTfTy+pw1x1MDAxYl67fVx1MDAxNsEsbLwmacO0XHUwMDA31ZehjEd+4yHwXHUwMDFmtyavv08vtGAh6PeT7n99+vUvKTTffSJ9 + + + + + SellerBuyerCreate an offerVoid an offerExtend an offerCommit to an offerPremint vouchersCreate a groupCreate a twinCreate a bundleUpdate offer royalty recipientsCommit to price discovery offer \ No newline at end of file diff --git a/docs/assets/image (1).png b/docs/assets/image (1).png new file mode 100644 index 000000000..c2dcc002c Binary files /dev/null and b/docs/assets/image (1).png differ diff --git a/docs/assets/image (10).png b/docs/assets/image (10).png new file mode 100644 index 000000000..a9307b107 Binary files /dev/null and b/docs/assets/image (10).png differ diff --git a/docs/assets/image (11).png b/docs/assets/image (11).png new file mode 100644 index 000000000..415c75e63 Binary files /dev/null and b/docs/assets/image (11).png differ diff --git a/docs/assets/image (12).png b/docs/assets/image (12).png new file mode 100644 index 000000000..cb92ea8e0 Binary files /dev/null and b/docs/assets/image (12).png differ diff --git a/docs/assets/image (13).png b/docs/assets/image (13).png new file mode 100644 index 000000000..14c9150bc Binary files /dev/null and b/docs/assets/image (13).png differ diff --git a/docs/assets/image (14).png b/docs/assets/image (14).png new file mode 100644 index 000000000..608aad485 Binary files /dev/null and b/docs/assets/image (14).png differ diff --git a/docs/assets/image (2).png b/docs/assets/image (2).png new file mode 100644 index 000000000..c2dcc002c Binary files /dev/null and b/docs/assets/image (2).png differ diff --git a/docs/assets/image (3).png b/docs/assets/image (3).png new file mode 100644 index 000000000..379a5e359 Binary files /dev/null and b/docs/assets/image (3).png differ diff --git a/docs/assets/image (4).png b/docs/assets/image (4).png new file mode 100644 index 000000000..748f4aadb Binary files /dev/null and b/docs/assets/image (4).png differ diff --git a/docs/assets/image (5).png b/docs/assets/image (5).png new file mode 100644 index 000000000..a9307b107 Binary files /dev/null and b/docs/assets/image (5).png differ diff --git a/docs/assets/image (6).png b/docs/assets/image (6).png new file mode 100644 index 000000000..0084c4831 Binary files /dev/null and b/docs/assets/image (6).png differ diff --git a/docs/assets/image (7).png b/docs/assets/image (7).png new file mode 100644 index 000000000..464bf2c7a Binary files /dev/null and b/docs/assets/image (7).png differ diff --git a/docs/assets/image (8).png b/docs/assets/image (8).png new file mode 100644 index 000000000..d8588315d Binary files /dev/null and b/docs/assets/image (8).png differ diff --git a/docs/assets/image (9).png b/docs/assets/image (9).png new file mode 100644 index 000000000..b15ce42a1 Binary files /dev/null and b/docs/assets/image (9).png differ diff --git a/docs/assets/image.png b/docs/assets/image.png new file mode 100644 index 000000000..857850c63 Binary files /dev/null and b/docs/assets/image.png differ diff --git a/docs/assets/redeem.png b/docs/assets/redeem.png new file mode 100644 index 000000000..c2c1b8f78 Binary files /dev/null and b/docs/assets/redeem.png differ diff --git a/docs/assets/redemption_widget_1.png b/docs/assets/redemption_widget_1.png new file mode 100644 index 000000000..d092a6c1f Binary files /dev/null and b/docs/assets/redemption_widget_1.png differ diff --git a/docs/assets/redemption_widget_2.png b/docs/assets/redemption_widget_2.png new file mode 100644 index 000000000..738b34282 Binary files /dev/null and b/docs/assets/redemption_widget_2.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-1button.png b/docs/assets/seller-create-product/seller-create-product-1button.png new file mode 100644 index 000000000..22418d2d7 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-1button.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-2type.png b/docs/assets/seller-create-product/seller-create-product-2type.png new file mode 100644 index 000000000..184b6fbf6 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-2type.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-3info.png b/docs/assets/seller-create-product/seller-create-product-3info.png new file mode 100644 index 000000000..92ba4530c Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-3info.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-4additional.png b/docs/assets/seller-create-product/seller-create-product-4additional.png new file mode 100644 index 000000000..4cbf8d107 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-4additional.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-5images.png b/docs/assets/seller-create-product/seller-create-product-5images.png new file mode 100644 index 000000000..02bd1c2c3 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-5images.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-6coreterms.png b/docs/assets/seller-create-product/seller-create-product-6coreterms.png new file mode 100644 index 000000000..c77aba326 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-6coreterms.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-7gating-details.png b/docs/assets/seller-create-product/seller-create-product-7gating-details.png new file mode 100644 index 000000000..456471271 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-7gating-details.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-7gating-tile.png b/docs/assets/seller-create-product/seller-create-product-7gating-tile.png new file mode 100644 index 000000000..f9a4e1f24 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-7gating-tile.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-7gating.png b/docs/assets/seller-create-product/seller-create-product-7gating.png new file mode 100644 index 000000000..9f0b5fb5b Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-7gating.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-8terms-exchange.png b/docs/assets/seller-create-product/seller-create-product-8terms-exchange.png new file mode 100644 index 000000000..d637342c9 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-8terms-exchange.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-90additional.png b/docs/assets/seller-create-product/seller-create-product-90additional.png new file mode 100644 index 000000000..26bdaf639 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-90additional.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-91init-chat.png b/docs/assets/seller-create-product/seller-create-product-91init-chat.png new file mode 100644 index 000000000..ec8a4d7dc Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-91init-chat.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-92finish.png b/docs/assets/seller-create-product/seller-create-product-92finish.png new file mode 100644 index 000000000..978490743 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-92finish.png differ diff --git a/docs/assets/seller-create-product/seller-create-product-9shipping.png b/docs/assets/seller-create-product/seller-create-product-9shipping.png new file mode 100644 index 000000000..a134be217 Binary files /dev/null and b/docs/assets/seller-create-product/seller-create-product-9shipping.png differ diff --git a/docs/assets/seller-create-profile/seller-create-profile-royalties.png b/docs/assets/seller-create-profile/seller-create-profile-royalties.png new file mode 100644 index 000000000..3ab1ed803 Binary files /dev/null and b/docs/assets/seller-create-profile/seller-create-profile-royalties.png differ diff --git a/docs/assets/seller-create-profile/seller-create-profile-zconfirm.png b/docs/assets/seller-create-profile/seller-create-profile-zconfirm.png new file mode 100644 index 000000000..8f2562ab5 Binary files /dev/null and b/docs/assets/seller-create-profile/seller-create-profile-zconfirm.png differ diff --git a/docs/assets/seller-create-profile/seller-create-profile.png b/docs/assets/seller-create-profile/seller-create-profile.png new file mode 100644 index 000000000..9121c7f12 Binary files /dev/null and b/docs/assets/seller-create-profile/seller-create-profile.png differ diff --git a/docs/assets/seller-storefront/seller-storefront-1sell.png b/docs/assets/seller-storefront/seller-storefront-1sell.png new file mode 100644 index 000000000..3d40da6fc Binary files /dev/null and b/docs/assets/seller-storefront/seller-storefront-1sell.png differ diff --git a/docs/assets/seller-storefront/seller-storefront-2breadcrumb.png b/docs/assets/seller-storefront/seller-storefront-2breadcrumb.png new file mode 100644 index 000000000..3cda7baf3 Binary files /dev/null and b/docs/assets/seller-storefront/seller-storefront-2breadcrumb.png differ diff --git a/docs/assets/seller-storefront/seller-storefront-3creation.png b/docs/assets/seller-storefront/seller-storefront-3creation.png new file mode 100644 index 000000000..bbcc2f8ca Binary files /dev/null and b/docs/assets/seller-storefront/seller-storefront-3creation.png differ diff --git a/docs/assets/seller-storefront/seller-storefront-4url.png b/docs/assets/seller-storefront/seller-storefront-4url.png new file mode 100644 index 000000000..22db48b26 Binary files /dev/null and b/docs/assets/seller-storefront/seller-storefront-4url.png differ diff --git a/docs/assets/seller_list1.png b/docs/assets/seller_list1.png new file mode 100644 index 000000000..e317e65ea Binary files /dev/null and b/docs/assets/seller_list1.png differ diff --git a/docs/assets/states.jpg b/docs/assets/states.jpg new file mode 100644 index 000000000..192b83d1b Binary files /dev/null and b/docs/assets/states.jpg differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-0activate.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-0activate.png new file mode 100644 index 000000000..0a2581e81 Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-0activate.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-1connect.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-1connect.png new file mode 100644 index 000000000..d858756c3 Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-1connect.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-2wallet_select.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-2wallet_select.png new file mode 100644 index 000000000..08fd9a415 Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-2wallet_select.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-3wallet_confirm.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-3wallet_confirm.png new file mode 100644 index 000000000..f4704f729 Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-3wallet_confirm.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-4wallet_sign.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-4wallet_sign.png new file mode 100644 index 000000000..e72f7476b Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-4wallet_sign.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-5redeem_page.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-5redeem_page.png new file mode 100644 index 000000000..2251ffbf6 Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-5redeem_page.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-6shipping.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-6shipping.png new file mode 100644 index 000000000..f46e73603 Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-6shipping.png differ diff --git a/docs/assets/woo-redeem-plugin/woo-redeem-plugin-7sync.png b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-7sync.png new file mode 100644 index 000000000..ab04e1c6c Binary files /dev/null and b/docs/assets/woo-redeem-plugin/woo-redeem-plugin-7sync.png differ diff --git a/docs/buyer-side/README.md b/docs/buyer-side/README.md new file mode 100644 index 000000000..41d159fe9 --- /dev/null +++ b/docs/buyer-side/README.md @@ -0,0 +1,81 @@ +--- +layout: page +title: Buyer Side +description: Explore the new buyer's experience in Boson dApp +nav_enabled: true +redirect_from: /readme/ +parent: Quick Start +nav_order: 1 +--- + +# Buyer side + +### Commit & Redeem | Buyer Experience on bosonapp.io + +Buying products from Boson marketplaces allows you to buy physical or phygital items in an entirely Web3-native way. + +Boson Protocol's settlement layer secures the commercial exchange of on-chain value for real-world assets. You can be certain that when redeeming you will either receive the physical good or your money back. + +The Boson Protocol dApp is currently deployed to Polygon MATIC network, so you need to have enough currency tokens to purchase items on this network. It is easy to move tokens between networks, called bridging. You can learn more about bridging [on Polygon support page](https://support.polygon.technology/support/solutions/articles/82000889432-how-can-i-deposit-my-funds-from-ethereum-to-polygon-using-bridge-). + +### Searching for items + +Browse available products by clicking the Explore Products link in the navigation bar. You can search for keywords in the listing, filter by seller and sort by price or other conditions. + +![Connect](/interface/assets/buyer_1.png) + +### Step 1 - Buying an item by committing to it + +Once you have found the item you want, you can buy it by clicking on the `Commit` button. Remember this is the first step of the buyer's experience - when committing, you pay for the item by transferring the item price into escrow and in turn receive a redeemable NFT (rNFT) that can later be exchanged for the real-world item it represents. + +![Commit](/interface/assets/buyer-1commit.png) + +Next, you will see the confirmation screen and options to either view your item (and immediately redeem it if you want) or discover more items. + +Note that if the item is token-gated, you will need to unlock that gate by owning required token. Read more about token gating [here](https://docs.bosonprotocol.io/docs/quick_start/seller_side/seller_tutorial/token_gated_commerce/#buying-token-gated-products). + +#### Connecting your wallet + +If not done before, now is the time to connect your wallet to the dApp. Read the message when connecting and allow your wallet to switch to the correct Polygon network before proceeding. + +![Commit](/interface/assets/buyer_2.jpg) + +After Commit, you can now simply hold the rNFT and store it as a claim on the physical item, you can transfer it to someone else, perhaps as a gif, or you can trade your rNFT on the secondary market, such as OpenSea. + +### Step 2 - Redeeming an rNFT + +The product listing displays a redemption period during which your rNFT is valid and can be exchanged for the asset it represents. During this time you are also free to trade, sell or gift the rNFT. Note that if you do not redeem your item within this time, the seller will no longer be obliged to the exchange and you will incur buyer penalty set initially in the offer agreement. + +When you are ready to take possession of the physical (or phygital) item, go back to the dApp to redeem your rNFT. The rNFT will be burned in the process. + +![Redeem](/interface/assets/buyer-2redeem.png) + +When you click `Redeem`, you will see an overlay detailing the fair exchange policy before you can click `Next` to proceed. + +![Initialise XMTP](/interface/assets/buyer_5.png) + +> Alternatively, you can `Cancel` the purchase, which means that you will receive the refund, deducted by the potential buyer penalty set by the seller. You can also `Contact seller` directly, through the communication channel that seller prepared, e.g. via an encrypted XMTP chat session. + +You need to enter your address in order to redeem your purchase. Unlike when you buy something on a Web 2.0 commerce site, your address is not stored in a centralized database. Instead, you are sharing your details only with the seller of the item you have purchased. + +![Address confirmation](/interface/assets/buyer_6.png) + +In order to facilitate sharing your address with the seller, you need to initialize a chat session with XMTP, which is a Web3 communication tool. Click the Initialize button in the overlay and you will be prompted to sign a transaction in your wallet to indicate that you are happy to communicate via XMTP. + +![Address confirmation](/interface/assets/buyer_7.png) + +The next screen is a confirmation screen to ensure you are happy with how you have entered your address and to tell you that you have initialized your chat client. + +You will again see a warning message that your rNFT will be burned on redemption. + +![Redemption warning](/interface/assets/buyer_9.png) + +Once you are happy with all of this, confirm the transaction in your wallet and the redemption step is complete. + +Finally, you will be shown the confirmation overlay letting you know that your redemption is complete. + +![Redemption confirmed](/interface/assets/buyer_10.png) + +You will notice that the item you have purchased now no longer has the Redeem option available. If you need to contact the seller or raise a dispute, you can do so via the item page, which you will find in My Items, with a 'Redeemed' tag showing. + +![Redemption confirmed](/interface/assets/buyer_11.png) diff --git a/docs/buyer-side/purchase-and-redeem-an-rnft.md b/docs/buyer-side/purchase-and-redeem-an-rnft.md new file mode 100644 index 000000000..1234d8260 --- /dev/null +++ b/docs/buyer-side/purchase-and-redeem-an-rnft.md @@ -0,0 +1,11 @@ +--- +layout: page +title: Purchase and redeem an rNFT +description: Explore the new buyer's experience in Boson dApp +nav_enabled: true +parent: Buyer Side +nav_order: 1 +--- + +# Purchase and redeem an rNFT + diff --git a/docs/index.markdown b/docs/index.markdown new file mode 100644 index 000000000..b7f1aae69 --- /dev/null +++ b/docs/index.markdown @@ -0,0 +1,8 @@ +--- +# Feel free to add content and custom Front Matter to this file. +# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults + +layout: default +--- + +{:toc} \ No newline at end of file diff --git a/docs/seller-side/README.md b/docs/seller-side/README.md new file mode 100644 index 000000000..ae0049d28 --- /dev/null +++ b/docs/seller-side/README.md @@ -0,0 +1,12 @@ +--- +layout: page +title: Seller Side +description: Explore the new seller's experience in Boson dApp +nav_enabled: true +redirect_from: /readme/ +parent: Quick Start +nav_order: 2 +--- + +# Seller side + diff --git a/docs/seller-side/boson-for-woocommerce.md b/docs/seller-side/boson-for-woocommerce.md new file mode 100644 index 000000000..216c35e33 --- /dev/null +++ b/docs/seller-side/boson-for-woocommerce.md @@ -0,0 +1,117 @@ +--- +layout: page +title: Boson for WooCommerce +description: Boson for WooCommerce +nav_enabled: true +parent: Seller Side +nav_order: 1 +--- + +# Boson for WooCommerce + +Boson for WooCommerce enables creators and brands to sell physical products as NFTs, directly on your WooCommerce website. In just a few clicks, with our no code plug-in, you can elevate your website by enabling redemption, no matter where your Redeemable NFTs are sold. + +If you already have a WooCommerce store, you have the added advantage of syncing your Boson offers and redeemed exchanges with your existing operational flows, such as order management and fulfillment. + +How it works in 4 easy steps: + +1. Create a seller account and offers on Boson dApp (see our [tutorial](https://docs.bosonprotocol.io/docs/category/selling-on-the-dapp)) +2. Install the plugin and connect Boson seller account +3. Design and customize your redemption page +4. Manage orders and fulfillment like any other product on WooCommerce + +> Note: Using this plugin the seller doesn't need to do any blockchain transactions or pay for gas. The purpose of this plugin is to enable WooCommerce sellers to easily manage rNFT redemptions, disputes and delivery information. + +### Setting up the plugin + +To use Boson for WooCommerce, you need to have a WooCommerce website already initialized. + +#### Requirements + +* A store must using at minimum: PHP 7.3, WordPress 6.0, and WooCommerce 7.4. +* The [GMP PHP Extension](https://www.php.net/manual/en/book.gmp.php). Depending on your hosting provider they may enable it for you if not already available. +* An [SSL certificate](https://woo.com/document/ssl-and-https/). +* A Web3 Client. Currently supported are MetaMask and WalletConnect. + +#### Installing the Boson for WooCommerce plugin + +Then, install the Boson extension like so: + +* find the "Boson for WooCommerce" extension on [WooCommerce Marketplace](https://woo.com/products/) and download the .zip file, +* Go to: `WordPress Admin` > `Plugins` > `Add New` to upload the file you downloaded with `Choose File`. +* Activate the extension. + +![Activate the plugin](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-0activate.png) + +> Note: If the extension is already installed and you are trying to update it, you will be asked to confirm if you want to replace the installed version with the new one found in the uploaded .zip file. In that case, proceed. + +More information about managing plugins is available at: [https://wordpress.org/documentation/article/manage-plugins/#Installing\_Plugins](https://wordpress.org/documentation/article/manage-plugins/#Installing_Plugins) + +#### Connecting the seller account + +After activating the plugin, we need to link the account used on Boson Protocol. + +(1) Go to: `WooCommerce` > `Boson for WooCommerce`. (2) Select `Connect Account` if you already have a Boson seller profile, otherwise, click on `Create Account` to create one. + +![Connect account](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-1connect.png) + +(3) Select a Web3 Client and connect your wallet. + +![Select Web3 provider](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-2wallet_select.png) + +(4) You'll see the connected wallet address, and the plugin will check the validity of your seller account with Boson Protocol on-chain. Click `Proceed` if the displayed wallet address is as expected, or connect a different wallet and repeat the above step. + +![Confirm address](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-3wallet_confirm.png) + +(5) Clicking `Proceed` will prompt you to sign a message through your Web3 client. This message will be used to secure the integration of the Boson Redemption Widget to the particular domain of your website. + +![Sign origin](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-4wallet_sign.png) + +(6) Once your connected wallet address is identified as a registered Boson seller, the extension is ready for use! + +> Note: Signing message with the origin of your website (the URL) will protect the buyers from fraudulent seller pretending to be someone they are not. If the URL of the store will not match with your signed message of the allowed origin, the buyer will we warned and not able to proceed. Note also, that if the seller's address in Boson Protocol is changed, then the user will have to log-out from WooCommerce and log-in back to connect the new wallet. Doing so will preserve the previous data, linked products, exchanges etc. + +#### Customizing the Redemption page + +The Redemption page is where your customers will be able to redeem their rNFTs that they've purchased (the commit step) in your webstore, metaverse, NFT marketplace or anywhere else. + +This is the page that should include the block (or shortcode) offered by the extension for rendering the Boson Redemption Widget. Your customers will be able to connect their wallet and redeem their rNFTs through that page or even raise disputes for their already redeemed rNFTs. The extension offers an option to create a very basic redemption page for you by clicking the `Create Redemption Page` button, which you will be able to customize if you wish to! + +![Create redemption page](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-5redeem_page.png) + +The extension offers two blocks to render the redemption widget: + +* **Boson Button Widget**: This block renders a button that can be customized to follow the same style lines from your website. When the user clicks on the button, the redemption widget is rendered in a modal window. +* **Boson Widget**: this block embeds the redemption widget directly on the page. + +Alternatively, the extension also offers two **shortcodes** as a fallback in case your active theme doesn’t support blocks: + +```php +[boson_button text="TEXT_TO_BE_RENDERED_IN_THE_BUTTON"] +``` + +This shortcode renders the redemption button, with the default rendered text being “Redeem”. + +```php +[boson_widget] +``` + +This shortcode renders the embedded widget directly on the page. + +Once the Redemption page is created, you will also be able to find it under the "Pages" tab on the left menu of WooCommerce as well. + +#### Shipping method + +You can specify the shipping method that will be used for all Boson orders. The shipping method, regardless of its registered cost, will be attached to the order at 0 cost for the customer. Third party integration with shipping (if applicable), will be able to pick up the registered shipping method from each Boson order. + +![Shipping configuration](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-6shipping.png) + +### Synchronizing data + +Once the seller's Boson profile is linked to WooCommerce, the data will start synchronizing between Boson Protocol and Boson for WooCommerce plugin. + +The data that is synchronized includes products, buyer redemptions and any potential disputes raised. The sync task runs every 30 minutes, but can also be run manually on demand. + +![Synchronization](/interface/assets/woo-redeem-plugin/woo-redeem-plugin-7sync.png) + +> Note: If the buyer redeems an rNFT outside the WooCommerce plugin, a warning is displayed that this order should be managed elsewhere, i.e. via the Boson dApp. This is needed because the delivery information and other buyer-seller communication must have happened outsite Boson for WooCommerce plugin, so the plugin has no way of accessing that data. diff --git a/docs/seller-side/selling-on-the-dapp/README.md b/docs/seller-side/selling-on-the-dapp/README.md new file mode 100644 index 000000000..a64260f1a --- /dev/null +++ b/docs/seller-side/selling-on-the-dapp/README.md @@ -0,0 +1,11 @@ +--- +layout: page +title: Selling on the dApp +description: Learn how to sell products on the Boson dApp +hidden: true +parent: Seller Side +nav_order: 2 +--- + +# Selling on the dApp + diff --git a/docs/seller-side/selling-on-the-dapp/creating-a-product.md b/docs/seller-side/selling-on-the-dapp/creating-a-product.md new file mode 100644 index 000000000..beceb09cc --- /dev/null +++ b/docs/seller-side/selling-on-the-dapp/creating-a-product.md @@ -0,0 +1,137 @@ +--- +layout: page +title: Creating a Product +parent: Selling on the dApp +nav_order: 4 +--- + +# Creating a Product + +### The first decentralized marketplace built on Boson Protocol allows you to tokenize, trade or transfer any physical item as an NFT + +![Sell Physicals](/interface/assets/seller_list1.png) + +In this tutorial you will learn how to create a product and offer it for sale on the Boson decentralized application (dApp). + +There are two ways to sell products: directly from your profile or from your customized storefront. + +The Boson dApp has been launched on Polygon and is planned to expand to other EVM compatible networks later. + +### First step - Create Products + +By now, you should have already created a seller profile and have the wallet connected to the dApp. You don't need any MATIC in your wallet to cover transaction fees, as we are subsidizing gas through meta-transactions. You will only need to sign messages as authorization. + +To continue, click on the `Create Products` button at the top right. + +![Create Products](/interface/assets/seller-create-product/seller-create-product-1button.png) + +#### Select the product type + +You will be presented to choose the type and variants of the product. The column to the right provides explanation of various options and their meaning. + +![Product type](/interface/assets/seller-create-product/seller-create-product-2type.png) + +Click `Next` when you are ready to move on. For simplicity, we'll now assume that we selected a Physical and One item type. + +#### Product Information screen + +Describe the product to buyers using the title and description fields. + +Tell them about its unique features, or why you are selling it. The goal is to tell them why they might want to buy it. As with selling on any other marketplace, you should aim to provide clear, factual information about the product, for example, the fabric composition or - if you are listing a vintage collectible - the exact condition of the item. + +![Product description](/interface/assets/seller-create-product/seller-create-product-3info.png) + +Categories will be helpful to focus search results, so it’s best to select an existing category if appropriate. If it is truly unique, you can create your own category by filling in the "other" category field. Select a category using the dropdown menu. + +Further down on the same screen, you will see an input field for search tags, which can be used to expose most important properties and help with finding similar products. + +Attributes provide a way to organize more product details in a systematic way that buyers can easily understand. + +#### Additional information + +Optionally, you can provide additional information about the product that is commonly used in commerce, such as SKUs, product identifiers such as serial numbers, brand information and manufacturer model numbers. + +Larger-scale merchants who have multiple items for sale will find this section invaluable for entering inventory information and other identifiers for products. + +![Additional information](/interface/assets/seller-create-product/seller-create-product-4additional.png) + +Click `Next` to proceed. + +#### Product Images + +Pictures bring your product to life and improve buyer's confidence. Don’t forget to include different angles, e.g. top, bottom, front and back as well as any that highlight special features. We support the following formats: jpg, jpeg, gif, png, webp. + +You can also add an MP4 video for the extra punch! Animated gifs also work. + +When you are happy with your picture selection, click `Next`. + +![Product Images](/interface/assets/seller-create-product/seller-create-product-5images.png) + +### Core Terms of Sale + +This is where you specify the contractual details for the sale of the product, including the price in a specific currency, available quantity, validity period, the redemption period and any special conditions such as token gating. + +You can list the price in any of the supported ERC20 tokens, or in native MATIC. Note that if you choose to list in $BOSON, there will be no fees levied! Also bear in mind that transaction fees will be denominated in $MATIC as we are using the Polygon network. + +Offer validity period is the interval during which purchasing the product's rNFT is possible. When the offer period expires, buyers are no longer able to make a commitment to buy the rNFT. + +The redemption period is the time during which the buyer can trade their rNFT. Generally, the longer the redemption period, the better, as this means the buyer will be able to benefit from the option to trade it on secondary markets. However, only make this period as long as you are able to deliver the underlying product. + +![Core Terms of Sale](/interface/assets/seller-create-product/seller-create-product-6coreterms.png) + +#### Token gated offers + +Please see detailed instructions on a dedicated [token-gated offers page](https://docs.bosonprotocol.io/docs/quick_start/seller_side/seller_tutorial/token_gated_commerce). + +#### Fees + +* The protocol fee of 0.5% is only charged on happy path exchanges, meaning the rNFT was redeemed and the exchange was finalized without a dispute. If offers are priced in $BOSON tokens, no protocol fee is charged! +* Dispute Resolution Costs - Boson Protocol ensures the trust-minimized exchange of on-chain value for off-chain assets. Dispute resolvers are called upon when an exchange is escalated (when buyer and seller can’t resolve the dispute amongst themselves). For launch, there is only one dispute resolution service available. This service is free of charge. + +Click `Next` to proceed. + +### Terms of Exchange + +The exchange policy covers the contractual terms of the exchange to protect both the seller and the buyer. This includes the obligation of both parties to follow through with their commitment, and to evidence requirements in case there is a dispute. The policy also includes fair protocol terms, to make it easy for sellers to set up a fair exchange. Currently, one such policy is made available. + +If the buyer fails to redeem the item within the redemption period, they will receive the refunded payment minus the buyer cancellation penalty. This penalty is to cover inconvenience caused to the seller. + +Seller can set their own deposit requirement, which signals to potential buyers that the seller promises to deliver the product or else the buyer will additionally be compensated by this amount. + +Dispute resolver is the entity that is chosen for jumping in when the seller and buyer don't agree about the (quality of) delivery. Currently, one such dispute resolver is operating. + +The dispute period is a minimum of 30 days after redeeming the rNFT. + +![Terms of Exchange](/interface/assets/seller-create-product/seller-create-product-8terms-exchange.png) + +Click `Next` to proceed. + +#### Shipping Info + +On this screen, define the regions you are prepared to ship to, along with the expected delivery time and acceptable return period in days. + +![Shipping Info](/interface/assets/seller-create-product/seller-create-product-9shipping.png) + +You may optionally wish to add values for parcel measurements and weight, as well as a url to the redemption point (this is set by default to the Boson dApp). + +![Additional information](/interface/assets/seller-create-product/seller-create-product-90additional.png) + +### Confirm Product Details + +This is where you get the opportunity to review and confirm everything you have entered so far. + +![Initializing chat client](/interface/assets/seller-create-product/seller-create-product-91init-chat.png) + +Preview your product data and terms of sale. You can move between screens using the breadcrumb menu at the top. + +When you are satisfied with all the relevant details, you need to establish a communication channel with your buyers. To do that, please press `Initialize` button. We are using a great, proper web3 protocol for this, called [XMTP](https://xmtp.org/). + +The first time you use XMTP with a specific wallet, you will be prompted to sign a message in your wallet that will start with a message "XMTP: Create Identity". From then on, you will only need to sign "XMTP: Enable Identity" once per session. You can read more about these messages at [XMTP docs](https://xmtp.org/docs/concepts/account-signatures). Please sign these messages so that buyers can contact you. + +Remember that because this is an on-chain transaction, you will not be able to go back and edit product information later - you would have to create a new offer. + +This is it! You can preview the final page by clicking the `Preview product detail page`. To finalize the process, click `Confirm`. You will be prompted by your wallet to sign the transaction. + +Once the transaction is processed, a popup will appear notifying you of the created product. You can inspect its details or continue creating more. + +![Overview of new product](/interface/assets/seller-create-product/seller-create-product-92finish.png) diff --git a/docs/seller-side/selling-on-the-dapp/introduction.md b/docs/seller-side/selling-on-the-dapp/introduction.md new file mode 100644 index 000000000..17d15a699 --- /dev/null +++ b/docs/seller-side/selling-on-the-dapp/introduction.md @@ -0,0 +1,23 @@ +--- +layout: page +title: Introduction +parent: Selling on the dApp +nav_order: 1 +--- + +# Introduction + +### The Boson dApp + +Selling with Boson allows you to sell physical - or phygital - items in a Web3-native way that anyone can use and everyone can trust. The easiest way to get up and running quickly with Boson Protocol is using the Boson dApp. + +The dApp is a fully decentralized application which has entered Open Access phase after a successful run in a more closed beta. + +You can quickly become a seller on [Boson dApp](https://bosonapp.io/). In the following pages you can find detailed instructions for setting up your very own storefront. + +These are the steps in a nutshell: + +1. create seller profile +2. initialize communication channel (when you create your first product) +3. start selling (either product-by-product, via custom storefront dapp, or in metaverse) +4. manage sales via Seller Hub diff --git a/docs/seller-side/selling-on-the-dapp/profile-creation.md b/docs/seller-side/selling-on-the-dapp/profile-creation.md new file mode 100644 index 000000000..5051debce --- /dev/null +++ b/docs/seller-side/selling-on-the-dapp/profile-creation.md @@ -0,0 +1,48 @@ +--- +layout: page +title: Profile Creation +parent: Selling on the dApp +nav_order: 2 +--- + +# Profile Creation + +### Setting up a seller profile on bosonapp.io + +The first thing to be done for selling on the Boson marketplace dApp is creating an account - and if you have a Lens profile, you can use it, too! Simply click on `Sell on Boson` button to get started. + +![Creating a Seller profile](/interface/assets/seller-create-profile/seller-create-profile.png) + +#### What is a Lens profile and what are its benefits? + +Lens Protocol is a composable and decentralized social graph. It lets creators take ownership of their content wherever they go in the world of Web3. While Boson Protocol allows for the trustless transfer and redemption of physical goods, using Lens allows you to build your reputation and associate yourself and your storefront with your digital presence elsewhere. + +If you already have a Lens account, switch the toggle at the top right `Link Lens Profile` and you will see the Lens handle field is pre-populated with your handle. In the case when connecting your wallet does not detect an existing Lens profile, you will be prompted to create one. + +#### Fill-in the profile details + +There are only a few required field that you need to fill-in, such as the logo, cover picture and brand name. Please ensure that each image is smaller than 500kb. + +Next, fill out the description field and contact details. Some of the fields are not mandatory, but providing a narrative about your brand will help drive engagement. Unique and collectible items often have an interesting story behind them and buyers like to know about you and your brand – as well as potentially link to your social media to find out more. + +Choose your preferred communication method. It is used to coordinate dispatch and delivery with your buyers. It’s also the first point for dispute management. + +Note that XMTP is used for the initial communication of buyer's address and you are welcome to use it for all further comms as well. XMTP is a powerful web3 messaging protocol, read more about it [here](https://xmtp.org/). + +Your description and external URLs are shown on the product details page for any offer you create. Your email address is visible on your profile and on any offers you create. Buyers will contact you via this email to ask questions and resolve problems. + +You can edit your seller profile at any time by clicking on the seller icon. + +#### Setting royalties + +You can optionally specify the percentage amount for secondary royalties that you wish to collect from secondary sales into an address of your choosing. + +Note that royalties percentage cannot be changed later. + +![Setting royalties](/interface/assets/seller-create-profile/seller-create-profile-royalties.png) + +#### Confirm profile creation + +As a final step, you have an option to check all the data and finally to confirm it by clicking on `Create Seller Account`. This invokes a signature request in your wallet which you need to confirm to proceed. + +![Confirm profile](/interface/assets/seller-create-profile/seller-create-profile-zconfirm.png) diff --git a/docs/seller-side/selling-on-the-dapp/storefront-creation.md b/docs/seller-side/selling-on-the-dapp/storefront-creation.md new file mode 100644 index 000000000..3162bf995 --- /dev/null +++ b/docs/seller-side/selling-on-the-dapp/storefront-creation.md @@ -0,0 +1,56 @@ +--- +layout: page +title: Storefront Creation +parent: Selling on the dApp +nav_order: 3 +--- + +# Storefront Creation + +### Selling on bosonapp.io + +If you are going to be selling multiple items and you would like more functionality than a standard seller profile provides, you may optionally set up a storefront within the Boson marketplace dApp. + +Setting up a storefront is free, and allows you to display your own products and also those listed by other sellers or specific offers, with your own colour scheme, font and branding. + +Navigate to `Templates & Guides` in the footer of the dApp and click on `Set-up a Web3 commerce store`. + +![Quick start templates](/interface/assets/seller-storefront/seller-storefront-1sell.png) + +You will see a step-plan of actions. To proceed click on `Get started!` button. + +![Creating Store steps](/interface/assets/seller-storefront/seller-storefront-2breadcrumb.png) + +A two-column screen appears - on the left side you can customize the storefront, on the right side you can see updates in real time. + +![Create Custom Store](/interface/assets/seller-storefront/seller-storefront-3creation.png) + +First of all, name your store. The first field should contain the name that is shown in the browser tab when people navigate to your store. This can be the same as, or different from, the Title, which is the headline displayed on your storefront. + +The Description field allows you to enter subtext to explain a little more about the store. Keep it succinct so as not to clutter your landing page. + +You can choose whether you upload your logo to IPFS via the Upload button, or whether you simply link to its location elsewhere. + +The next stage is to choose your preferred colours and styles for header, footer and body content. Select the colour you would like for each, bearing in mind guidelines such as accessibility recommendations (for example, choosing text and background colour that are distinct from each other and easily legible). + +Next, select your font family from the dropdown. This is enough to create a basic storefront, but there are various other advanced options that may be useful. + +All fields in the Advanced section are optional. + +Your storefront’s navigation will default to a header bar, but you can also choose to toggle it to a sidebar. + +You may also choose to add a footer to the storefront – which can be configured here with copyright label, social media and other links – or to toggle the footer off completely, which is helpful if you want to embed the storefront in your own website. + +The curation options allow you to add offers from other sellers, or to display only a subset of your own items. This may be useful if you are a seller with multiple brands, or with partnership deals with other sellers. Offer ids can be added as a comma-separated list. + +You can also decide whether you want to enable metatransactions, where you pay your buyers’ Polygon transaction fees on their behalf to reduce friction and expense for them. In this case, you will need to sign up for an account with Biconomy and add your API key here. + +Once you hit `Create`, your very own store is ready! + +You will be presented with further options to make it friendlier. + +
+ +You will receive an IPFS link to your storefront (example, “[https://bosonprotocol.infura-ipfs.io/ipfs/QmQcbJVmZSM4MGuBZBexRUVM1TdwBX4hfWzoHJwPFhNK3E](https://bosonprotocol.infura-ipfs.io/ipfs/QmQcbJVmZSM4MGuBZBexRUVM1TdwBX4hfWzoHJwPFhNK3E)…”). We recommend that you have an ENS domain ready to hide that IPFS link behind a friendlier name. You could even create a subdomain from your current ENS (example, store.myname.eth). + +You can also leverage [ETH Limo](https://eth.limo/) for easy access (example, [https://myStore.myName.eth.limo](https://mystore.myname.eth.limo/)). Additionally, you can also create a subdomain of your existing DNS and use that to link buyers to your storefront. diff --git a/docs/seller-side/selling-on-the-dapp/token-gated-commerce.md b/docs/seller-side/selling-on-the-dapp/token-gated-commerce.md new file mode 100644 index 000000000..04faa2b15 --- /dev/null +++ b/docs/seller-side/selling-on-the-dapp/token-gated-commerce.md @@ -0,0 +1,39 @@ +--- +layout: page +title: Token Gated Commerce +description: >- + Web3 unlocks new capabilities in commerce, of which token-gating is one of the + most exciting ones. +parent: Selling on the dApp +nav_order: 5 +--- + +# Token-gated Commerce + +### Selling token-gated products + +Token gated offers are an optional feature that can make your offer exclusive to certain audience. It allows purchasing your product only to those users that hold a specific token (a "gate"). For example, you may want to unlock the gate to your product only to people who hold $BOSON or to the one person that owns a particular NFT. This is known as token gating. + +> Please note that the gating currently only supports tokens on Polygon MATIC network. + +The token you select to act as a gate can be any fungible [ERC-20 token](https://eips.ethereum.org/EIPS/eip-20), or non-fungible tokens compliant with [ERC-721](https://eips.ethereum.org/EIPS/eip-721) and [ERC-1155](https://eips.ethereum.org/EIPS/eip-1155) standards. If you are not sure which one to pick, please click on the links to read more about them. All have three required fields: + +1. **Token address**, that is the address of the token's smart contract (on Polygon MATIC) +2. **Minimum token balance**, the number of tokens that the buyer will have to have; must be greater than 0 (for ERC721 specifics see bellow) +3. **Unlocks per wallet**, how many times will the gate be unlocked for a specific buyer; must be greater than 0 + +ERC721 token type can be used in two ways. You can gate it at contract level to a **Collection balance**, where you set the minimum balance threshold; or you can get it to a **Specific token** ID, in which case you set the exact token ID from the NFT contract that the buyer must have. + +ERC1155 token type requires an exact **Token ID** to be specified, along with other required fields, as it is a more complex token contract. + +![Token gated offer](/interface/assets/seller-create-product/seller-create-product-7gating.png) + +### Buying token-gated products + +When a product is locked behind a gate, a "lock" icon is displayed over the image, making it easy to see which products are exclusive offers. + +![Token gated product](/interface/assets/seller-create-product/seller-create-product-7gating-tile.png) + +On the product detail page, more information about the gate is presented, such as the amount of tokens needed and the address of the token contract. If the buyer doesn't have the required token balance and/or ID to unlock the product, purchasing is not possible and this is actually enforced on-chain! + +![Token gated product details](/interface/assets/seller-create-product/seller-create-product-7gating-details.png) diff --git a/docs/seller-side/widgets/README.md b/docs/seller-side/widgets/README.md new file mode 100644 index 000000000..3a89c805c --- /dev/null +++ b/docs/seller-side/widgets/README.md @@ -0,0 +1,10 @@ +--- +layout: page +title: Widgets +description: See our widgets +parent: Seller Side +nav_order: 3 +--- + +# Widgets + diff --git a/docs/seller-side/widgets/metaverse-toolkit.md b/docs/seller-side/widgets/metaverse-toolkit.md new file mode 100644 index 000000000..cea2c7014 --- /dev/null +++ b/docs/seller-side/widgets/metaverse-toolkit.md @@ -0,0 +1,40 @@ +--- +layout: page +title: Metaverse Toolkit +parent: Widgets +nav_order: 2 +--- + +# Metaverse toolkit + +### Introduction + +This quick start guide will help you use the first instance of the [Boson Metaverse Toolkit](https://github.com/bosonprotocol/boson-dcl), the Boson Decentraland (DCL) Widget, to allow your customers to purchase items from within the [Decentraland Metaverse](https://decentraland.org/). + +It should be noted that the Boson DCL Widget is a client-side only widget which has no dependency on any backend built or hosted by the Boson Protocol team. The Boson DCL SDK uses metatransactions to send transaction through to Polygon, as the protocol is currently only deployed there and in order to deploy this to production as a scene builder you will need to create a [Biconomy](https://biconomy.io/) account to relay the metatransactions and you will need to provide a RPC endpoint so that the Widget can read state from Polygon. For convenience we have provided two pre-configured test environments so that you can get up and running without the need to create any third-party accounts. + +The Boson DCL SDK is an [open-source library](https://github.com/bosonprotocol/boson-dcl/blob/main/LICENSE) for putting the Commit functionality of Boson Protocol into your DCL scene. In terms of understanding what the Boson DCL SDK includes, it comprises of two parts: + +1. A Commit Widget (aka the `library`) - Scene developers can choose to instantiate an instance of the Commit Widget from any in-scene action. For example, as a scene developer you might be selling clothes, and in order to buy one, you might want a DCL avatar to walk into a changing booth, or to complete a quest, in order to be able to purchase one of your items. In short, the Commit Widget can be invoked by attaching it to any in game event. Please find below a screen of a Commit Widget, which can be found live in DCL in the [Boson Protocol land](https://play.decentraland.org/?position=-86%2C108). + +
+2. A Boson Kiosk (example 3D element) - The Boson Kiosk is an in-scene 3D model of a Kiosk that is deployed directly into a DCL scene. The Kiosk is there for people who wish to display their offers without handcrafting their own visual display. The Kiosk will either render one of the Images uploaded to a given Offer, or optionally a scene developer can provide a 3D model of an item to be displayed. There is an example [3D model of a t-shirt provided in the repo, in the scene folder](https://github.com/bosonprotocol/boson-dcl/blob/main/scene/models/OGShirt.glb). + +
+ +### Deploying your Kiosk to Decentraland + +The guide aims to help you get started selling in Decentraland. This will involve you, the Seller, creating your own custom storefront on the web, listing a product in the protocol, calling out specifically that the item MUST be redeemed back at your custom storefront, and then ultimately showing you how to place one of the Kiosks in the Metaverse using the SDK. + +From a buyer’s perspective Buyers will be committing to (purchasing) one of your redeemable NFTs from within DCL, by purchasing your offer through a Boson Kiosk, buyers can then either chose to sell their rNFT on a secondary market (any buyer’s NFT marketplace of choice) or they visit your custom storefront to redeem the item which they have committed to. + +We will help you get up and running by walking you through the following steps: + +1. You will need to start off by [creating your Seller Profile from within the dapp](https://docs.bosonprotocol.io/docs/quick_start/seller_tutorial/profile_creation). +2. Then you can [create your own Custom Storefront on the Boson dApp](https://docs.bosonprotocol.io/docs/quick_start/seller_tutorial/create_a_storefront). _Note that_ this is an optional step, you can always allow your buyers to redeem directly on the [Boson dApp](https://bosonapp.io/), +3. And then you will need to list your offer in the Boson Protocol, the easiest way to do this is [using the Boson dApp](https://docs.bosonprotocol.io/docs/quick_start/seller_tutorial/seller_list). +4. Finally, you will need to install the Boson DCL SDK and deploy it to your scene in DCL, [detailed instructions on how to do this can be found in Boson DCL SDK source repository](https://github.com/bosonprotocol/boson-dcl/blob/main/library/README.md). + +If you have any questions or feedback on how to deploy a Boson Kiosk please do ask the [Boson Protocol Discord channel](https://discord.com/invite/5dRV7fWet2) or feel free to create a [Github Issue directly in the repo](https://github.com/bosonprotocol/boson-dcl/issues/new). + +_Happy Metaverse Building!_ diff --git a/docs/seller-side/widgets/the-commit-button-widget/README.md b/docs/seller-side/widgets/the-commit-button-widget/README.md new file mode 100644 index 000000000..c3e84cf9b --- /dev/null +++ b/docs/seller-side/widgets/the-commit-button-widget/README.md @@ -0,0 +1,9 @@ +--- +layout: page +title: The Commit Button Widget +parent: Widgets +nav_order: 3 +--- + +# The Commit button Widget + diff --git a/docs/seller-side/widgets/the-commit-button-widget/commit-button-style-guide.md b/docs/seller-side/widgets/the-commit-button-widget/commit-button-style-guide.md new file mode 100644 index 000000000..58c392fa7 --- /dev/null +++ b/docs/seller-side/widgets/the-commit-button-widget/commit-button-style-guide.md @@ -0,0 +1,58 @@ +--- +layout: page +title: Style Guide +parent: The Commit Button Widget +nav_order: 2 +--- + +# Commit button style guide + +### Overview + +The Boson Commit button has some default designs but it can be customised by changing the parameters in `buttonStyle`. + +```html +
+ + +``` + +#### Layout + +Set the `buttonStyle.layout` option to determine the button layout of the text and the Boson logo: + +
ValueResult
horizontal
vertical
+ +#### Color + +Set the `buttonStyle.color` option to one of these values: + +
ValueResult
green
black
white
+ +#### Shape + +Set the `buttonStyle.shape` option to one of these values: + +
ValueResult
sharp
rounded
pill
+ +#### Size + +Set the `buttonStyle.minWidth` and `buttonStyle.minHeight`: + +
PropertyValueResult
minWidth500px
minHeight80px
+ diff --git a/docs/seller-side/widgets/the-commit-button-widget/overview.md b/docs/seller-side/widgets/the-commit-button-widget/overview.md new file mode 100644 index 000000000..74a0f3b71 --- /dev/null +++ b/docs/seller-side/widgets/the-commit-button-widget/overview.md @@ -0,0 +1,150 @@ +--- +layout: page +title: Overview +parent: The Commit Button Widget +nav_order: 1 +--- + +# Overview + +### Integrating 'Commit' functionality using the Boson Commit button + +With the Boson Commit button, sellers can allow their buyers to commit to a Boson offer on their own domains. + +
+ +Clicking on the button as shown above displays the Commit widget. + +
+ +The Commit widget allows buyers to: + +* show details about the specified product +* connect their Web3 wallet +* commit to the product (after they have connected their wallet and have enough funds) + +### How to integrate the Boson Commit button? + +To integrate the Boson Commit button, all a seller needs to do is: + +1. Add the following ` + +``` + +2. Add following code wherever you want to display the commit button: + +```html +
+ + +``` + +You can also update properties dynamically with `updateProps(updatedPropertiesObject)`: + +```html + + + +``` + +The Commit button has been created with [zoid](https://github.com/krakenjs/zoid/tree/main) so you can use their drivers to have [components in your favorite framework](https://github.com/krakenjs/zoid/blob/main/docs/api/component.md#react). + +### Commit Widget Parameters + +The following parameters configure the widget and the button. They must be passed as properties of the CommitButton call. For instance: + +```html + +``` + +
ParameterRequiredDefault ValuePurposeExample
configIdyesnonethe Boson Protocol environment the widget is linked to (see Boson Environments)"production-137-0"
sellerIdWhen offerId is not usednonespecifies the Boson Seller ID that publishes the Product being offered with the plugin."2"
productUuidWhen offerId or bundleUuid are not usednonespecifies the ProductUUID of the Product being offered with the plugin."2540b-1cf7-26e7-ddaf-4de1dcf7ebc"
bundleUuidWhen offerId or productUuid are not usednonespecifies the BundleUUID of a Phygital Offer being offered with the plugin."4d5262-28cf-d860-06f-6406bd65fa10"
offerIdWhen sellerId/productUuid or sellerId/bundleUuid are not usednonespecifies the ID of the Offer being offered with the plugin. Note: an offer ID is the low-level identification of the Boson Offer on-chain, while a Product can match several offers, like several variants (size, color, ...))."1099"
accountnonethe address of the wallet the widget should accept. When specified, the user can't connect any other wallet that the one specified. This parameter is optional and can be used if you want to prevent the user to use the Commit Widget if they don't connect with the given wallet."0x023456789abcd0213456789abcd213456789abcd"
contextno"iframe"the way the widget and the purchase overview open: "iframe" to see them in the same window or "popup" to open them in a new window."popup"
lookAndFeelno"modal"the look and feel for the widget ("regular" or "modal"). When set to "modal", allow to define a margin around the widget to be appearing like a modal popup."modal"
modalMarginno"2%"the margin to apply around the widget when lookAndFeel is set to "modal""5%"
buttonStylenononethe allowed styles of the commit button{ minWidth: "100px", minHeight: "200px", shape: "rounded", color: "white"}
buttonStyle.minWidthnononethe commit button min width"100px"
buttonStyle.minHeightnononethe commit button min height"200px"
buttonStyle.shapeno"sharp"the commit button shape: "sharp","rounded" or "pill""rounded"
buttonStyle.colorno"green"the commit button color: "green","black" or "white""white"
onGetDimensionsnononethe callback that is called with the actual dimensions of the commit button in its iframeonGetDimensions: ({offsetHeight, offsetWidth, boundingClientRect}) => console.log({offsetHeight, offsetWidth, boundingClientRect})
onClickCommitButtonnononethe callback that is called after clicking on the commit button and just after the commit widget is called to be openedonClickCommitButton: () => console.log("you clicked on the commit button!")
onClickTaglinenononethe callback that is called after clicking on the tagline and just after the purchase overview widget is called to be openedonClickTagline: () => console.log("you clicked on the tagline!")
onCloseCommitButtonnononethe callback that is called when the commit widget is closedonCloseCommitButton: () => console.log("commit button widget was closed!")
onCloseTaglinenononethe callback that is called when the purchase overview widget is closedonCloseTagline: () => console.log("purchase overview widget was closed!")
containerStyle.justifyContentnononethe commit button container justify-contentcenter
containerStyle.alignItemsnononethe commit button container align-itemsflex-end
+ +### Discover more... + +The Commit Widget is part of the React Component library from Boson Core Component you can discover on this [Storybook page](https://main--65f314a856a256708dd840ea.chromatic.com/?path=/story/widgets-commit--commit). Also, you can play around with the Commit button itself [Storybook page](https://main--65f314a856a256708dd840ea.chromatic.com/?path=/story/visual-components-buttons-commitbutton--base). + +You can find an example HTML file which embeds the commit button on the widgets subdomain: [https://widgets.bosonprotocol.io/scripts/commit-button-example.html](https://widgets.bosonprotocol.io/scripts/commit-button-example.html) diff --git a/docs/seller-side/widgets/the-redemption-widget.md b/docs/seller-side/widgets/the-redemption-widget.md new file mode 100644 index 000000000..550febad2 --- /dev/null +++ b/docs/seller-side/widgets/the-redemption-widget.md @@ -0,0 +1,70 @@ +--- +layout: page +title: The Redemption Widget +parent: Widgets +nav_order: 4 +--- + +# The Redemption Widget + +### 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. + +Sellers can choose 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. + +The Boson Redemption Widget allows Sellers to simply embed, via a few lines of code, redemption functionality of their rNFTs into an existing website. + +![Redemption Widget steps](/interface/assets/redemption_widget_1.png) + +To integrate the Boson Redemption Widget, all a seller needs to do is: + +1. Add the following ` +``` + +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. + +```html + +``` + +![Redemption Widget Items View](/interface/assets/redemption_widget_2.png) + +### Using the Boson Redemption Button + +As a seller you can also choose to use the Boson branded "Redeem" Button on your website, if you would like to do this, all you need to do is : + +1. Add the below 2 lines of code in HTML `` section: + +```html + + ... + + + +``` + +2. Add the below class name to the "boson-redeem" button: + +```html + +``` + +![Boson Redeem Button](/interface/assets/redeem.png) + +#### Redeeming a specific rNFT + +The Boson Widget's default behaviour is to show a buyer all of their redeemable vouchers, 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/). + +A Seller can specify which exchange is going to be redeemed by the widget, by: + +1. add a _data-exchange-id_ tag to the "boson-redeem" button, specifying the exchangeId of a given exchange: + +```html + +``` + +You can find an example HTML file which embeds the widgets on the widgets subdomain : [https://widgets.bosonprotocol.io/example.html](https://widgets.bosonprotocol.io/example.html)