connect-widgets

Manifold Connect Widget -- MConnect

This is a client side widget that handles wallet connections. It supports Metamask/Coinbase and any browser based wallets. It also supports WalletConnect.

This relies on the @manifoldxyz/frontend-provider-core package and its EthereumProvider singleton (node connection management library). It also relies on @manifoldxyz/oauth-data-client for returning OAuth clients their data client instance.

Exports the following for each release:

• CJS/UMD script for use as an embeddable JS widget for use in any environment
• CSS file for use in any environment for some premade barebones styling

Hosted Files

All builds are served at: https://connect.manifoldxyz.dev/{VERSION}/...

All built versions are contained within subdirectories at the above domain

Contributing / Dev

Use yarn dev locally to begin testing stuff.

Then to do a full integration test do yarn build and then yarn qa. You will need to have http-server installed globally before being able to run yarn qa.

Alternatively, you can do a full integration test by running yarn build, creating a local server using VS Code's Live Server extension, and navigating to https://localhost:5500/dist/demo.html (5500 is the default port).

Project setup

Install packages

yarn

Compiles and hot-reloads for development

yarn dev

Typechecking for development

yarn typecheck:watch

Lints and typechecks

yarn lint

Lints and fixes files

yarn lint:fix

Compiles and minifies build files for production, Vue is inlined

yarn build

VSCode Notes

If you use VSCode, we have included some recommended extensions to install in order to make your experience better.

Usage

• CODEPEN Example
• GitBook Documentation

See build/demo.html and dev/serve.vue for various usage examples.

Wallet Connect

• Enable wallet connect by passing in the multi parameter. You CAN use wallet connect WITHOUT a fallbackProvider. If you do this, it means you can sign messages and send 'write' transactions, but any read operations will use any detected browser based provider. This means that if there is no browser based provider (e.g. on mobile), these read calls will fail. Add a fallbackProvider if you want these to work.

Passing in Providers

• fallbackProvider - MUST be a websocket connection URI. The fallbackProvider is used for read operations in the case where a built in browser provider is not detected (e.g. on mobile or browsers that do not have an installed wallet).

Warnings

• If you use two of these on the same page, the first one to render will decide the configurationn for EthereumProvider. The second will inherit that configuration, as EthereumProvider is a global singleton.
  • So if you initialize an EthereumProvider singleton before rendering any MConnection widget, the widget will automatically use your singleton and ignore any props that conflict with the configuration of that singleton (ie. network).
• strict=false means that the signature/token is based on the first authenticated wallet address, not the user they're changing around to within the app (like studio)
  • NOTE: You must use the retrieved token and call the auth server to determine the authenticated user:
  • https://docs.manifold.xyz/v/manifold-for-developers/data-apis/server-side-session-authentication

Styling

Example end-user stylesheets (manifold-dark and manifold-light) are included in the styles folder of the repository. These are also copied over to dist on build for usage in demo.html.

Deployment

There is a single CloudFormation stack (configuration found in infra/bin/infra.ts) which contains the S3 bucket and the CloudFront distribution. The CloudFront distribution fronts the s3 bucket, and is pointed to by connect.manifoldxyz.dev.

This stack is deployed ONCE. It should not be deployed again, as doing so would overwrite all existing hosted versions of the widget, and will reset it to only contain the files within the legacy subdirectory.

Whenever a new version is built, it is copied over to the existing stack's S3 bucket, placed in a subdirectory corresponding to the version number.

How To Release a Beta Build

Use the Github Action Stage along with any branch of your choosing to build that branch and deploy its files to https://connect.manifoldxyz.dev/beta/

You can then access them as normal, for example https://connect.manifoldxyz.dev/beta/connect.css

How To Release a Production Build

After you've Quality Assured your build using the Beta system, merge your Pull Request to main and then bump the version in our package.json accordingly.

Afterward, head to our Github Actions and select the Release [USE THIS] action. Triger the workflow manually with main branch and you should be all set!

This will publish a new Github Release to this repository with an autogenerated description/title with a corresponding tag, both named the samething as the version number in our package.json.

It will also deploy the build files to our AWS CloudFormation stack which is comprised of a CloudFront CDN in front of an AWS S3 bucket containing the files themselves. You need not worry about the DNS configuration at all, as that's preconfigured.

Once complete, your build will be avaialable at both https://connect.manifoldxyz.dev/latest/ and https://connect.manifoldxyz.dev/<VERSIONHERE>/