@manifoldxyz/studio-app-sdk-react

Studio App SDK React

React components for Studio Apps.

Usage

gm

Development

Setup

As studio-app-sdk-react depends on studio-app-sdk, you'll need to build the sdk first before you can build the React components for the first time.

You can either build from the worskpace root with npm run build, or from the studio-app-sdk-react folder with npm run build:withsdk.

$ cd studio-app-devtools      # make sure you're in the workspace root
$ npm run build                  # build the sdk and sdk-react packages

# alternatively
$ cd packages/studio-app-sdk-react
$ npm run build:withsdk

Adding a new component

• Create your new component.
  • Add unit tests for your component in the ./src/tests folder.
  • Add a .stories.tsx file in the ./src/stories folder to demonstrate your component.
• Export types and component. Don't use default exports.
• Update index.ts with export.

Testing Locally

using Storybook

• Build the sdk and sdk-react packages.
• Run npm run storybook in the studio-app-sdk-react folder.
  • If you don't need any SDK components, you can navigate to http://localhost:6006/ (default port) and test there.
• Open up the Studio Client.
• Open the Studio App SDK React Storybook app (app id: 2549157559).

with npm link

• Link local changes to global npm folder

$ cd studio-app-devtools                    # make sure you're in the workspace root
$ npm run build                                # build the sdk and sdk-react packages
$ cd packages/studio-app-sdk-react
$ npm link                                 # create a symlink in the global folder
$ npm run dev                                  # start typescript compile on watch mode

• Open up the project you want to use the local sdk changes in:

$ cd studio-claim-app
$ npm link @manifoldxyz/studio-app-sdk-react     # creates a symlink in ./node_modules to point to global studio-app-sdk-react folder

• Do your development Note: you may need to do some of the following if your changes are not being picked up:

• Restart typescript server in VSCODE: CMD+P, type Restart TS Server, enter.
• Delete node_modules .cache: delete node_modules/.cache, restart localhost.

• If you're done with local development and want to switch back to a release.

$ cd studio-claim-app
$ npm uninstall --no-save @manifoldxyz/studio-app-sdk-react
$ npm install

Releasing

• Update version in package.json. Use proper semantic versioning.
  • Make sure your studio-app-sdk dependency is correct.
• Any commit to main will auto-release.

Changelog

Very manual work for now. Noting major changes here. Ideally, we automate this with something like changesets.

3.0.0

New content framework!

• Default to a sepolia filter instead of goerli in ContractSelectorLegacy
  • Remove of rinkeby filter

2.9.0

• Remove AudienceBlueprintSelector component (out of date, unused).
• Change interface for AssetSelector component:
  • Remove specFilter
  • Rename the following props:
    • onSelect => onChange
    • filter=> mintStatusFilter
    • asset => value (can now accept an array of asset ids)
    • assetId => defaultValue (can now accept an array of asset ids)
  • Additional props for selection/display available.

2.6.0

• Last version to support TokenSelectorLegacy. Use MultiTokenSelector instead.

2.5.0

• Add MultiTokenSelector component
• Rename TokenSelector to TokenSelectorLegacy
• Make ContractSelector, StudioContractSelector use BasePanelSelector under the hood