Skip to content

Commit b3c78c7

Browse files
albertov19albertov19
committed
added connect v0 back
1 parent dc86f09 commit b3c78c7

File tree

2 files changed

+999
-0
lines changed

2 files changed

+999
-0
lines changed

‎build/applications/connect/configuration-v0.md

+264
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
---
2+
title: Configure Your Connect Widget: v0
3+
description: Configure Wormhole Connect v0 for React or HTML, set themes, define tokens, networks, and customize RPC endpoints for optimized blockchain interactions.
4+
---
5+
6+
# Configure Your Connect Widget
7+
8+
## Introduction {: #introduction }
9+
10+
Wormhole Connect is a flexible React widget that streamlines cross-chain asset transfers and enables seamless interoperability by leveraging Wormhole's powerful infrastructure. Designed for easy integration into decentralized applications (dApps), Wormhole Connect abstracts the complexities of cross-chain communication, providing a user-friendly experience for both developers and end users.
11+
12+
This guide provides detailed instructions on configuring Wormhole Connect and highlights the many ways it can be customized to fit your specific needs, from integrating supported blockchains and tokens to tailoring the user interface.
13+
14+
!!! note
15+
For documentation on the latest version of Connect, please refer to the current [configuration documentation](/docs/build/applications/connect/configuration/){target=\_blank}. If you are looking to upgrade from Wormhole Connect v0 to v1, please refer to the [migration guide](/docs/build/applications/connect/upgrade/){target=\_blank} for detailed instructions.
16+
17+
## Get Started
18+
19+
Configure the Wormhole Connect React component by passing a `WormholeConnectConfig` object as the `config` attribute. If using the hosted version, provide `config` and `theme` as JSON-serialized strings on the mount point.
20+
21+
=== "React"
22+
23+
```ts
24+
--8<-- 'code/build/applications/connect/configuration/configure-react-v0.tsx'
25+
```
26+
27+
=== "HTML Tags"
28+
29+
```html
30+
--8<-- 'code/build/applications/connect/configuration/configure-html.html'
31+
```
32+
33+
## Examples {: #examples }
34+
35+
Below are some examples of different ways you can configure Connect. See `WormholeConnectConfig` in the below file for a full view of the supported configuration parameters.
36+
37+
??? code "View `WormholeConnectConfig`"
38+
```ts
39+
--8<-- 'code/build/applications/connect/configuration/index.ts'
40+
```
41+
42+
### Custom Networks and RPC Endpoints {: #custom-networks-and-rpc-endpoints }
43+
44+
Specify supported networks, tokens, and custom RPC endpoints. Your users may encounter rate limits using public RPC endpoints if you don't provide your own.
45+
46+
=== "Mainnet"
47+
48+
```js
49+
--8<-- 'code/build/applications/connect/configuration/custom-simple-v0.jsx'
50+
```
51+
52+
=== "Testnet"
53+
54+
```js
55+
--8<-- 'code/build/applications/connect/configuration/custom-simple-testnet-v0.tsx'
56+
```
57+
58+
!!! note
59+
For a complete list of testnet chain names that can be manually added, see the [Testnet Chains List](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/fa4ba4bc349a7caada809f209090d79a3c5962fe/tokenRegistry/src/scripts/importConnect.ts#L44-L55){target=\_blank}.
60+
61+
### Fully Customized Theme {: #fully-customized-theme }
62+
63+
Wormhole Connect offers a high level of customizability that suits and integrates with your application's design, including various options for buttons, backgrounds, popovers, fonts, and more. The following example demonstrates a variety of appearance customizations. Remember, if you prefer a visual to aid in designing your widget, you can use the [no code style interface](https://connect-in-style.wormhole.com/){target=\_blank}.
64+
65+
```jsx
66+
--8<-- 'code/build/applications/connect/configuration/custom-full.jsx'
67+
```
68+
69+
### Environment {: #environment }
70+
71+
You can configure Connect to be used in Testnet environments, too. You can toggle between Mainnet and Testnet environments by defining the `WormholeConnectConfig` as follows:
72+
73+
=== "Mainnet"
74+
75+
```ts
76+
const config: WormholeConnectConfig = {
77+
env: 'mainnet',
78+
};
79+
```
80+
81+
=== "Testnet"
82+
83+
```ts
84+
const config: WormholeConnectConfig = {
85+
env: 'testnet',
86+
};
87+
```
88+
### Custom RPC Endpoint {: #custom-rpc-endpoint }
89+
90+
You can define a custom RPC provider for your Connect widget to use. This can be especially helpful if you'd like to replace public endpoints with dedicated or private endpoints.
91+
92+
```ts
93+
const config: WormholeConnectConfig = {
94+
rpcs: {
95+
solana: 'https://rpc.ankr.com/solana/ee827255553bb0fa9e0aaeab27e988707e60ea06ae36be0658b778072e94979e',
96+
},
97+
};
98+
```
99+
100+
### Arbitrary Token {: #arbitrary-token }
101+
102+
The following section shows how to add an arbitrary token to your deployment of Connect.
103+
104+
!!! note
105+
You will need to [register](https://portalbridge.com/advanced-tools/#/register){target=\_blank} your token with the Token Bridge to get the contract addresses necessary for it to work with Connect.
106+
107+
This example configuration limits Connect to the Solana and Ethereum networks and a handful of tokens, including `BSKT`, which isn't built in by default and provided under the `tokensConfig` key.
108+
109+
See [`src/config/types.ts`](https://github.com/wormhole-foundation/wormhole-connect/blob/development/wormhole-connect/src/config/types.ts){target=\_blank} for the type definition of `TokensConfig`.
110+
111+
```json
112+
--8<-- 'code/build/applications/connect/configuration/arbitrary-token.tsx'
113+
```
114+
115+
## More Configuration Options {: #more-configuration-options }
116+
117+
### Whitelisting Tokens {: #whitelisting-tokens }
118+
119+
By default, Connect will offer its complete built-in list of assets, but you can restrict the displayed assets by defining a subset of tokens under `tokens`. The default full list is as follows:
120+
121+
| Mainnet | Testnet |
122+
|:--------------:|:----------------------------------:|
123+
| ETH | ETH, ETHsepolia |
124+
| WETH | WETH, WETHsepolia |
125+
| USDCeth | USDCeth |
126+
| WBTC | - |
127+
| USDT | - |
128+
| DAI | - |
129+
| BUSD | - |
130+
| MATIC | MATIC |
131+
| WMATIC | WMATIC |
132+
| USDCpolygon | - |
133+
| BNB | BNB |
134+
| WBNB | WBNB |
135+
| USDCbnb | - |
136+
| AVAX | AVAX |
137+
| WAVAX | WAVAX |
138+
| USDCavax | USDCavax |
139+
| FTM | FTM |
140+
| WFTM | WFTM |
141+
| CELO | CELO |
142+
| GLMR | GLMR |
143+
| WGLMR | WGLMR |
144+
| SOL | WSOL |
145+
| PYTH | - |
146+
| SUI | SUI |
147+
| USDCsol | - |
148+
| APT | APT |
149+
| ETHarbitrum | ETHarbitrum, ETHarbitrum_sepolia |
150+
| WETHarbitrum | WETHarbitrum, WETHarbitrum_sepolia |
151+
| USDCarbitrum | USDCarbitrum |
152+
| ETHoptimism | ETHoptimism, ETHoptimism_sepolia |
153+
| WETHoptimism | WETHoptimism, WETHoptimism_sepolia |
154+
| USDCoptimism | USDCoptimism |
155+
| ETHbase | ETHbase, ETHbase_sepolia |
156+
| WETHbase | WETHbase, WETHbase_sepolia |
157+
| tBTC | tBTC |
158+
| tBTCpolygon | tBTCpolygon |
159+
| tBTCoptimism | tBTCoptimism |
160+
| tBTCarbitrum | tBTCarbitrum |
161+
| tBTCbase | tBTCbase |
162+
| tBTCsol | tBTCsol |
163+
| WETHpolygon | - |
164+
| WETHbsc | - |
165+
| wstETH | wstETH |
166+
| wstETHarbitrum | - |
167+
| wstETHoptimism | - |
168+
| wstETHpolygon | - |
169+
| wstETHbase | - |
170+
171+
### Routes {: #routes }
172+
173+
By default, Connect will offer its complete built-in list of routes, but you can restrict the possible route assets by defining a subset under `routes.` By default, Connect will offer its complete built-in list:
174+
175+
| Mainnet | Testnet |
176+
|:------------:|:----------:|
177+
| bridge | bridge |
178+
| relay | relay |
179+
| cctpManual | cctpManual |
180+
| cctpRelay | cctpRelay |
181+
| nttManual | nttManual |
182+
| nttRelay | nttRelay |
183+
| ethBridge | - |
184+
| wstETHBridge | - |
185+
| usdtBridge | - |
186+
| tBTC | tBTC |
187+
188+
### Wallet Set Up {: #wallet-connect-project-id }
189+
190+
When using Wormhole Connect, your selected blockchain network determines the available wallet options.
191+
192+
- For EVM chains, wallets like MetaMask and WalletConnect are supported
193+
- For Solana, you'll see options such as Phantom, Torus, and Coin98
194+
195+
The wallet options automatically adjust based on the selected chain, providing a seamless user experience without additional configuration.
196+
197+
If you would like to offer WalletConnect as a supported wallet option, you'll need to obtain a project ID on the [WalletConnect cloud dashboard](https://cloud.walletconnect.com/){target=\_blank}.
198+
199+
### Toggle Hamburger Menu {: #toggle-hamburger-menu }
200+
201+
By setting the `showHamburgerMenu` option to **false**, you can deactivate the hamburger menu, causing the links to be positioned at the bottom.
202+
203+
#### Add Extra Menu Entry {: #add-extra-menu-entry }
204+
205+
By setting the `showHamburgerMenu` option to `false,` you can add extra links. The following properties are accessed through the `menu[]` property (e.g., `menu[].label`):
206+
207+
| Property | Description |
208+
|:--------:|:-------------------------------------------:|
209+
| `label` | Link name to show up |
210+
| `href` | Target URL or URN |
211+
| `target` | Anchor standard target, by default `_blank` |
212+
| `order` | Order where the new item should be injected |
213+
214+
#### Sample Configuration {: #sample-configuration }
215+
216+
```json
217+
--8<-- 'code/build/applications/connect/configuration/sample-configuration.json'
218+
```
219+
220+
### CoinGecko API Key {: #coingecko-api-key }
221+
222+
The CoinGecko API can be used to fetch token price data. If you have a [CoinGecko API Plan](https://apiguide.coingecko.com/getting-started/getting-started){target=\_blank}, you can include the API key in the configuration. Remember to always take steps to protect your sensitive API keys, such as defining them in `.env` files and including such files in your `.gitignore`.
223+
224+
### More Networks {: #more-networks }
225+
226+
Specify a set of extra networks to be displayed on the network selection modal, each linking to a different page, dApp, or mobile app the user will be redirected to. The following properties are accessed through the `moreNetworks` property (e.g., `moreNetworks.href`):
227+
228+
| <div style="width:15em">Property</div> | Description |
229+
|:--------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------:|
230+
| `href` | **Required**. Default value for missing network hrefs |
231+
| `target` | Default value for missing network link targets. Defaults to `_self` |
232+
| `description` | Brief description that should be displayed as a tooltip when the user hovers over a more network icon. Used as default for missing network descriptions |
233+
| `networks[].icon` | **Required**. URL data encoded icon to display |
234+
| `networks[].href` | Network href to redirect to. If present, the values `sourceChain` and `targetChain` are replaced with the currently selected chains before redirecting |
235+
| `networks[].label` | **Required**. Display text |
236+
| `networks[].name` | Unique network key. Defaults to a snake_case version of the label |
237+
| `networks[].description` | Description value. Defaults to `moreNetworks.description` |
238+
| `networks[].target` | href target value. Defaults to `moreNetworks.target` |
239+
| `networks[].showOpenInNewIcon` | Disable top right open in new icon. Defaults to **true** if target is `_blank` or **false** if target is `_self` |
240+
241+
??? code "View full configuration"
242+
```json
243+
--8<-- 'code/build/applications/connect/configuration/advanced-configuration.json'
244+
```
245+
246+
### More Tokens {: #more-tokens }
247+
248+
Show a particular entry on the select tokens modal, redirecting the user to a different page, dApp, or mobile app. The following properties are accessed through the `moreTokens` property (e.g., `moreTokens.label`):
249+
250+
| Property | Description |
251+
|:--------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------:|
252+
| `label` | **Required**. Display text |
253+
| `href` | **Required**. URL to redirect to. If present, the values `sourceChain` and `targetChain` are replaced with the currently selected chains before redirecting |
254+
| `target` | href target. Defaults to `_self` |
255+
256+
### Explorer {: #explorer }
257+
258+
Enable the explorer button to allow users to search for their transactions on a given explorer, filtering by their wallet address. The following properties are accessed through the `explorer` property (e.g., `explorer.label`):
259+
260+
| Property | Description |
261+
|:--------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
262+
| `label` | Display text. Defaults to `Transactions` |
263+
| `href` | **Required**. URL of the explorer, for instance [https://wormholescan.io/](https://wormholescan.io/){target=\_blank}. If present, the value `address` is replaced with the connected wallet address |
264+
| `target` | `href` target. Defaults to `_blank` |

0 commit comments

Comments
 (0)