Blockchain components
A loosely related set of components for blockchain functionality on Shopify storefronts.
These packages are built to help you integrate blockchain functionality on your Shopify storefront. While you are not required to use all of them at the same time, the idea is that when used together the result is a seamless Web3 experience for your customers.
Usage
This repository is managed as a monorepo. Each package has its own README.md and documentation describing usage.
Package Index
| Package | Description | NPM |
|---|---|---|
| @shopify/blockchain-components | Shared packages for blockchain components |  |
| @shopify/connect-wallet | Crypto wallet connection library for Shopify storefronts |  |
| @shopify/gate-context-client | Gate unlocking context client for Shopify storefronts |  |
| @shopify/tokengate | Tokengating component for Shopify storefronts |  |
Run a command
All workspaces
Run commands across all workspaces. This uses turbo run <command>.
| Command | Description |
|---|---|
yarn build |
Builds all workspaces (./apps, ./examples, ./packages) in order of their dependencies. |
yarn build:packages |
Builds all packages located in the ./packages directory in order of their dependencies. |
yarn changeset |
Adds a new changelog entry |
yarn dev |
Builds all packages located in the ./packages directory without regard to any dependencies between the packages and rebuilds when package files are changed. Also runs the ./apps/playground project for local development purposes. Does not generate declaration files (.d.ts). |
yarn dev:packages |
Builds all packages located in the ./packages directory without regard to any dependencies between the packages and rebuilds when package files are changed. Does not generate declaration files (.d.ts). |
yarn example |
Runs the script in ./examples/scripts which opens a prompt asking which example you want to run. After selecting an example, the packages within ./packages are built and the example you selected is started. |
yarn example:[example] |
Starts the development server for the example you provided. Options: cra | custom-theme | nextjs | remix | vite |
yarn lint |
Runs eslint against all packages in workspaces that contain a lint script to ensure they comply with the rules provided in our eslint configuration. |
yarn typecheck |
Builds all packages located in ./packages directory in order of their dependencies and runs type validation. |
Want to contribute?
Check out our Contributing Guide
Questions?
For Shopifolk, you can reach out to us in Slack in #blockchain-components channel. For external inquiries, we welcome bug reports, enhancements, and feature requests via GitHub issues.
License
MIT © Shopify, see LICENSE.md for details.
