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

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

Local Development

1. 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

2. 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

3. 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