@manifoldxyz/studio-app-sdk

Studio App SDK

Typescript client for studio apps.

Responsibilities:

• bootstrap app authentication
• handle studio <> app iframe message passing (auth, web3 calls)
• wrap studio app rest api

Releasing

• When committing, use simple conventional commit style commit messages.
• Update version in package.json. Use proper semantic versioning.
• Any commit to main will auto-release.

Local Development

• Link local changes to global npm folder

$ cd studio-app-sdk
$ npm link                                 # create a symlink for studio-app-sdk 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     # creates a symlink in ./node_modules to point to global studio-app-sdk folder

• To unlink the sdk from a project

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

Troubleshooting

"I've linked but changes to local studio-app-sdk are not being picked up in my app"

• In VSCode, reload typescript server: hit cmd+shift+P, type Restart TS Server, enter.
• Clear node_modules cache in project consuming studio-app-sdk. Open node_modules and delete .cache folder. Restart webpack/create-react-app.
• Verify the library is linked: $ ls -halt ./node_modules/@manifoldxyz/studio-app-sdk should show the directories are symlink'd to the local project directory.

Architecture

Summary

• 3rd party apps are embedded into studio client via iframe.
• Apps use the SDK directly or via the react sdk to fetch resources from either: a) the public rest api (asset, instance, audience), or b) over the iframe via postMessage (auth, web3 calls) use the sdk to communicate with

**Iframe Message Passing The iframe message passing API is used for authentication and web3 calls (jobs, ethereum rpc).

Implementation:

• manifold-studio-client and studio-app-sdk use browser standard postMessage to communicate over the iframe.
• When studio-app-sdk sends messages to the parent iframe, the event message is fired by the browser in manifold-studio-client
• The App Bridge module in studio client listens for iframe messages, parses the requests and invokes handlers.

https://excalidraw.com/#json=dp_ZR8q45kOeASUmuImeg,W8Ul4o3QdTuslfUwLc_YJQ