-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New approach to CDN-hosted Connect (#2769)
* new approach to CDN-hosted Connect * fix version * switch to a better CDN * default to empty obj * update README
- Loading branch information
1 parent
2c1732e
commit 3266738
Showing
4 changed files
with
77 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters