Skip to content

Commit

Permalink
New approach to CDN-hosted Connect (#2769)
Browse files Browse the repository at this point in the history
* new approach to CDN-hosted Connect

* fix version

* switch to a better CDN

* default to empty obj

* update README
  • Loading branch information
artursapek authored Oct 1, 2024
1 parent 2c1732e commit 3266738
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 51 deletions.
38 changes: 30 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,41 @@ function App() {

### Alternative: hosted version via CDN (for any website)

If you're not using React, you can still embed Connect on your website by using the hosted version. Simply copy and paste the following code into your HTML body:
If you're not using React, you can still embed Connect on your website by using the hosted version:

```html
<!-- Mounting point. Include in <body> -->
<div id="wormhole-connect"></div>
```ts
import {
wormholeConnectHosted,
} from '@wormhole-foundation/wormhole-connect';

const container = document.getElementById('connect')!;

<!-- Must appear after #wormhole-connect component -->
<script type="module" src="https://www.unpkg.com/@wormhole-foundation/[email protected]/dist/main.js" defer></script>
wormholeConnectHosted(container);
```

Note that the `#wormhole-connect` element has to be present _before_ the scripts are loaded.

You can customize and integrate Connect via our no-code solution: https://connect-in-style.wormhole.com/
You can provide `config` and `theme` parameters in a second function argument:

```ts
import {
wormholeConnectHosted,
} from '@wormhole-foundation/wormhole-connect';

const container = document.getElementById('connect')!;

wormholeConnectHosted(container, {
config: {
rpcs: {
...
}
},
theme: {
background: {
default: '#004547',
}
}
});
```

## Configuration

Expand Down
36 changes: 36 additions & 0 deletions wormhole-connect/src/hosted.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// This file exports a utility function used to add the hosted version of Connect to a webpage
import { CONNECT_VERSION } from 'config/constants';
import { WormholeConnectConfig } from 'config/types';
import { WormholeConnectPartialTheme } from 'theme';

export interface HostedParameters {
config?: WormholeConnectConfig;
theme?: WormholeConnectPartialTheme;
version?: string;
cdnBaseUrl?: string;
}

export function wormholeConnectHosted(
parentNode: HTMLElement,
params: HostedParameters = {},
) {
/* @ts-ignore */
window.__CONNECT_CONFIG = params.config;
/* @ts-ignore */
window.__CONNECT_THEME = params.theme;

const connectRoot = document.createElement('div');
connectRoot.id = 'wormhole-connect';

const version = params.version ?? CONNECT_VERSION;
const baseUrl =
params.cdnBaseUrl ??
`https://cdn.jsdelivr.net/npm/@wormhole-foundation/wormhole-connect@${version}`;

const script = document.createElement('script');
script.setAttribute('src', `${baseUrl}/dist/main.js`);
script.setAttribute('type', 'module');

parentNode.appendChild(connectRoot);
parentNode.appendChild(script);
}
7 changes: 7 additions & 0 deletions wormhole-connect/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import {
import type { WormholeConnectConfig } from './config/types';
import type { Chain } from '@wormhole-foundation/sdk';

import { wormholeConnectHosted } from './hosted';
import type { HostedParameters } from './hosted';

const {
AutomaticTokenBridgeRoute,
TokenBridgeRoute,
Expand Down Expand Up @@ -61,4 +64,8 @@ export {
MayanRouteWH,
MayanRouteMCTP,
MayanRouteSWIFT,

// Utility function for CDN-hosted version of Connect
wormholeConnectHosted,
HostedParameters,
};
47 changes: 4 additions & 43 deletions wormhole-connect/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import WormholeConnect from './WormholeConnect';
import ErrorBoundary from './components/ErrorBoundary';
import { WormholeConnectConfig } from 'config/types';
import { WormholeConnectPartialTheme } from './theme';
import { WormholeConnectEvent } from 'telemetry/types';
export * from './theme';

// This is the entry point that runs when integrators add the Connect widget
Expand All @@ -26,46 +23,10 @@ if (!container) {
);
}

let config: WormholeConnectConfig = {
eventHandler: (event: WormholeConnectEvent) => {
container.dispatchEvent(
new CustomEvent('wormholeConnectEvent', { detail: event }),
);
},
};
let theme: WormholeConnectPartialTheme | undefined = undefined;

try {
let configAttr = container.getAttribute('data-config');

if (!configAttr) {
// Legacy support. We'll stop looking for the "config" attribute in a future version
configAttr = container.getAttribute('config');
if (configAttr) {
console.warn(
`Wormhole Connect: please provide your custom config as a "data-config" attribute. ` +
`Providing it as a "config" attribute won't be supported in future versions. ` +
`\n` +
`See the README for examples: ` +
`https://www.npmjs.com/package/@wormhole-foundation/wormhole-connect`,
);
}
}

if (configAttr) {
const parsedConfig = JSON.parse(configAttr);
config = { ...config, ...parsedConfig };
}

const themeAttr = container.getAttribute('data-theme');
if (themeAttr) {
const parsedTheme = JSON.parse(themeAttr);
theme = parsedTheme;
}
} catch (e) {
console.error(`Error parsing custom config: ${e}`);
// Ignore
}
/* @ts-ignore */
const config = window.__CONNECT_CONFIG as WormholeConnectConfig;
/* @ts-ignore */
const theme = window.__CONNECT_THEME as WormholeConnectPartialTheme;

const root = ReactDOM.createRoot(container);

Expand Down

0 comments on commit 3266738

Please sign in to comment.