Library mode (direct import) and config overhaul

[aadam-10]

Tl;dr

• Integrators can change the color scheme dynamically using React props
• The wormhole-connect-loader is going bye-bye
• Connect will be importable by third party apps as a regular React component without relying on unpkg.com
• Using unpkg.com will still be an option for people who prefer to just copy & paste HTML tags

Description and context

This ticket represents a large change to the code base. There are two main goals behind it:

1. Make it possible to change the Connect config dynamically at runtime (for example, swap between two custom color schemes)
2. Make it possible to import the Connect widget into a React app, bundle it, and host it directly (not using unpkg.com)
3. Get rid of unpkg.com as a central point of failure for Connect

Neither of these is possible today due to how Connect is published and how it reads its config from the DOM.

Implementation Details

The first goal, dynamic config, requires a change to how Connect gets its custom config.. The original Connect code expected the config to be a stringified JSON object in the config attribute on the wormhole-connect element. This gets parsed when the config.ts file is first evaluated by the browser, and is static from then on.

<div
  id="wormhole-connect"
  config="{"walletConnectProjectId":"e5ef8b58d14ead228f38db4eb5c7148b","env":"mainnet","rpcs":{"wormchain":"...`
></div>

This makes it impossible to use Connect as a component in a React app, because it expects a specific DOM node to exist before React even starts running.

We are moving to the config & theme being passed as props to the top level component:

<WormholeConnect
  theme={myCustomTheme}
  config={myCustomConfig}
/>

The theme is no longer a part of the config, it's a separate prop altogether. The component no longer expects these to be hard-coded into the DOM.

For now, we will still disallow updates to the config during runtime because this can cause lots of weird, broken behavior. For example, switching from testnet to mainnet mid-transfer causes Connect to get very confused.

This first change enables the second change: allowing apps to import Connect itself as a component from NPM. Importing Connect this way will no longer load the "loader" which merely injects unpkg.com tags into your HTML. It will actually import the Connect component itself.

wormhole-connect-loader, which exists for the sole purpose of exporting a React component which simply injects two HTML tags loading Connect from unpkg.com, is being taken out back.

We will still support the HTML copy-pasta approach of integrating Connect for people not using React.

Code Base Implications

Config imports

The main disruptive aspect of this change is how we use config. Before this change, the config was exported by src/config/index.ts as dozens of all-caps consts like:

export const ROUTES = config && config.routes ? config.routes : Object.values(Route);

Instead, we will export a single object called config and the code base will import that, and refer to config.routes as opposed to just ROUTES.

Duplicate React

Today, any website which uses React and also uses Connect is making their users load React twice (since it's in the Connect bundle). That sucks! This ticket will eliminate that problem.

[jmrossy]

@aadam-10 @artursapek I came to create an issue requesting this but happened to stumble on this existing one. +1 for this feature. In order to accommodate my DApp's CSP header, the WormholeConnect must be bundled and served from my app's codebase like a regular react lib.

It would also be great if the widget could somehow share a wallet connection with the parent app, but I realize that's complex.

Any estimate on when this would be available?

[artursapek]

@jmrossy it's still in beta, but you can try it now: 0.3.0-beta.5-development