---
title: Wormhole Connect Migration Guides
description: Step-by-step guidance for migrating between major versions of Wormhole Connect, including configuration changes and route updates.
categories:
- Connect
- Transfer
url: https://wormhole.com/docs/products/connect/guides/upgrade/
word_count: 3270
token_estimate: 6442
---

# Wormhole Connect Migration Guides

This page collects step-by-step migration guides for major versions of Wormhole Connect. Choose the section that matches the version you are upgrading from:

- [V5 → V6](#v5-to-v6) - Default automatic routes replaced by [Executor](/docs/products/messaging/guides/executor/)-powered routes.
- [V0/V1/V2 → V3](#v0-v1-v2-to-v3) - Configuration restructure (`networks` → `chains`, capitalized chain names, route plugin system, consolidated `ui` properties).

## V5 to V6 {: #v5-to-v6 }

Wormhole Connect v6 removes the legacy "automatic" routes in favor of [Executor](/docs/products/messaging/guides/executor/)-powered replacements. **Most integrators need no code changes** - default usage and `DEFAULT_ROUTES` are wired to the new routes automatically.

The breaking change was introduced in [PR #4025](https://github.com/wormhole-foundation/wormhole-connect/pull/4025){target=\_blank}. See the full [v6 release notes](https://github.com/wormhole-foundation/wormhole-connect/releases){target=\_blank} for additional context.

### Route Replacements

| Removed | Replacement |
|---|---|
| `AutomaticCCTPRoute` | `cctpV2FastExecutorRoute()`, `cctpV2StandardExecutorRoute()` |
| `AutomaticTokenBridgeRoute`, `TokenBridgeRoute` | `executorTokenBridgeRoute()` |
| `nttAutomaticRoute` | `nttExecutorRoute` |

Route name strings (used in `filterRoutes`, telemetry):

| Old | New |
|---|---|
| `AutomaticCCTP` | `CCTPV2FastExecutorRoute`, `CCTPV2StandardExecutorRoute` |
| `AutomaticTokenBridge` | `TokenBridgeExecutorRoute` |
| `AutomaticNtt` | `NttExecutorRoute` |

**Unchanged**: `CCTPRoute`, `TBTCRoute`, `nttManualRoute`, `nttExecutorRoute`, `nttRoutes`, and all Mayan and LiFi routes.

### When You Need to Change Code

You only need changes if you:

- Import any removed route by name.
- Build a custom `routes: [...]` array using a removed route.
- Compare against old route name strings (in `filterRoutes`, telemetry handlers, etc.).

Default usage (`<WormholeConnect />` with no `routes` config) and `DEFAULT_ROUTES` are wired to the new routes automatically.

!!! tip "Note"
    The new Executor routes are **factory functions** - invoke them with `()` when adding to a `routes` array. The legacy automatic routes were class constructors passed directly.

### Update the Connect Package

Install the v6 release:

```bash
npm install @wormhole-foundation/wormhole-connect@^6.0
```

### `DEFAULT_ROUTES` Has Been Updated

The default route set used when integrators don't specify a `routes` array now uses Executor-based routes:

=== "v5.x"

    ```typescript
    DEFAULT_ROUTES = [
      AutomaticCCTPRoute,
      CCTPRoute,
      AutomaticTokenBridgeRoute,
      TokenBridgeRoute,
      TBTCRoute,
    ];
    ```

=== "v6.x"

    ```typescript
    DEFAULT_ROUTES = [
      cctpV2FastExecutorRoute(),
      cctpV2StandardExecutorRoute(),
      CCTPRoute,
      executorTokenBridgeRoute(),
      TBTCRoute,
    ];
    ```

If you rely on `DEFAULT_ROUTES` without overriding it, no code changes are required.

### Update Custom `routes` Arrays

If you pass a custom `routes` array, replace removed routes with their Executor equivalents and remember to invoke the new factory functions with `()`:

=== "v5.x"

    ```typescript
    import {
      AutomaticCCTPRoute,
      CCTPRoute,
      AutomaticTokenBridgeRoute,
    } from '@wormhole-foundation/wormhole-connect';

    const config = {
      routes: [AutomaticCCTPRoute, CCTPRoute, AutomaticTokenBridgeRoute],
    };
    ```

=== "v6.x"

    ```typescript
    import {
      cctpV2FastExecutorRoute,
      cctpV2StandardExecutorRoute,
      CCTPRoute,
      executorTokenBridgeRoute,
    } from '@wormhole-foundation/wormhole-connect';

    const config = {
      routes: [
        cctpV2FastExecutorRoute(),
        cctpV2StandardExecutorRoute(),
        CCTPRoute,
        executorTokenBridgeRoute(),
      ],
    };
    ```

### Update NTT Routes

If you use the `nttRoutes(...)` helper, no changes are needed. Otherwise, swap `nttAutomaticRoute` for `nttExecutorRoute`:

=== "v5.x"

    ```typescript
    import { nttAutomaticRoute } from '@wormhole-foundation/wormhole-connect/ntt';

    const config = {
      routes: [nttAutomaticRoute(myNttConfig)],
    };
    ```

=== "v6.x"

    ```typescript
    import { nttExecutorRoute } from '@wormhole-foundation/wormhole-connect/ntt';

    const config = {
      routes: [nttExecutorRoute({ ntt: myNttConfig })],
    };
    ```

## V0/V1/V2 to V3 {: #v0-v1-v2-to-v3 }

The Wormhole Connect feature has been updated to **version 3.0**, introducing a modernized design and improved routing for faster native-to-native token transfers. This stable release comes with several breaking changes in how to configure the application, requiring minor updates to your integration.

This guide will help you migrate to the new version in just a few simple steps. By following this migration guide, you'll learn how to:

 - Update to the latest Connect package.
 - Apply configuration changes to the `WormholeConnectConfig` object.
 - Understand new routing capabilities and plugin options.

These updates ensure better performance and a smoother integration experience.

!!! tip "Note"
    Connect versions v1.x and v2.x share the same configuration structure. This guide outlines a unified upgrade process to v3.x, regardless of whether you're using v0.x, v1.x, or v2.x.

## Update the Connect Package

To begin the migration process, update the Connect [**npm package**](https://www.npmjs.com/package/@wormhole-foundation/wormhole-connect){target=\_blank} to the latest version 3.0. Updating to the latest version provides access to the newest features and improvements, including the modernized design and enhanced routing capabilities.

Run the following command in your terminal:

```bash
npm install @wormhole-foundation/wormhole-connect@^3.0
```

This command installs the latest stable version of Wormhole Connect and prepares your environment for the new configuration changes.

## Update the `WormholeConnectConfig` Object

In version 3.0, the `config.WormholeConnectConfig` object underwent several breaking changes. Most of these changes are minor and can be applied quickly. Below is a summary of the key changes, followed by detailed examples.

### Summary of Breaking Changes

- Chain names are now capitalized. For example:`solana` → `Solana`.
- `env` renamed to `network` and is now capitalized. For example: `mainnet` → `Mainnet`.
- `networks` renamed to `chains`, with capitalized names.
- `routes` updated to use route plugins.
- `nttGroups` removed in favor of route plugin configuration.
- `tokensConfig` updated, with a new key `wrappedTokens` added.
- Many UI-related properties consolidated under a top-level `ui` key.
- `customTheme` and `mode` were removed, replaced by a top-level `theme` property.

These changes are explained in more detail below, with examples for easy reference.

### Capitalize Chain Names

In version 3.0, chain names are now consistent with the `Chain` type from the [Wormhole TypeScript SDK](https://github.com/wormhole-foundation/wormhole-sdk-ts){target=\_blank}, and must be capitalized. This affects all config properties where a chain is referenced, including `rpcs`, `rest`, `graphql`, and `chains`.

=== "v0.x"

    ```typescript
    import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      rpcs: {
        ethereum: 'INSERT_ETH_RPC_URL',
        solana: 'INSERT_SOLANA_RPC_URL',
      },
    };
    ```

=== "v1.x"

    ```typescript
    import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      rpcs: {
        Ethereum: 'INSERT_ETH_RPC_URL',
        Solana: 'INSERT_SOLANA_RPC_URL',
      },
    };
    ```

=== "v3.x"

    ```typescript
    import { type config } from '@wormhole-foundation/wormhole-connect';

    const config: config.WormholeConnectConfig = {
      rpcs: {
        Ethereum: 'INSERT_ETH_RPC_URL',
        Solana: 'INSERT_SOLANA_RPC_URL',
      },
    };
    ```

You can find the complete list of supported chain names in the [Wormhole TypeScript SDK](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts#L6-L71){target=\_blank}.

### Rename `env` to `network`

The `env` property has been renamed to `network`, with capitalized values. This change affects how you configure Testnet and Mainnet environments.

=== "v0.x"

    ```typescript
    import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      env: 'testnet',
    };
    ```

=== "v1.x"

    ```typescript
    import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      network: 'Testnet',
    };
    ```

=== "v3.x"

    ```typescript
    import { type config } from '@wormhole-foundation/wormhole-connect';

    const config: config.WormholeConnectConfig = {
      network: 'Testnet',
    };
    ```

If you don’t explicitly set the `network` value, Connect will default to `Mainnet`.

```typescript
// Defaults to Mainnet
const config: config.WormholeConnectConfig = {};
```

For more information, refer to the [network constants list](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/networks.ts){target=\_blank}.

### Rename `networks` to `chains`

The `networks` property, which allowed whitelisting chains, is now renamed `chains`, and the chain names are capitalized.

=== "v0.x"

    ```typescript
    import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      networks: ['solana', 'ethereum'],
    };
    ```
=== "v1.x"

    ```typescript
    import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      chains: ['Solana', 'Ethereum'],
    };
    ```
=== "v3.x"

    ```typescript
    import { type config } from '@wormhole-foundation/wormhole-connect';

    const config: config.WormholeConnectConfig = {
      chains: ['Solana', 'Ethereum'],
    };
    ```

### Update `routes` to Use Route Plugins

The `routes` property in Connect version 3.0 has significantly improved. Previously, `routes` was a simple array of strings. The latest version has been transformed into a flexible plugin system, allowing you to include specific routes for various protocols.

By default, if no `routes` property is set, Connect will provide routes for two core protocols:

 - [Wrapped Token Transfers (WTT)](/docs/products/token-transfers/wrapped-token-transfers/overview/){target=\_blank}
 - [CCTP](/docs/products/cctp-bridge/overview/){target=\_blank}

For most use cases, integrators require more than the default routes. The new `routes` property allows you to specify which protocols to include and exclude any routes unnecessary for your application, including both default and third-party routes.

#### Available `route` Plugins

The `@wormhole-foundation/wormhole-connect` package offers a variety of `route` plugins to give you flexibility in handling different protocols. You can choose from the following `route` exports for your integration:

???- tip "`route` Plugins"
    - **`TokenBridgeRoute`**: Manually redeemed WTT route.
    - **`AutomaticTokenBridgeRoute`**: Automatically redeemed (relayed) WTT route.
    - **`CCTPRoute`**: Manually redeemed CCTP route.
    - **`AutomaticCCTPRoute`**: Automatically redeemed (relayed) CCTP route.
    - **`DEFAULT_ROUTES`**: Array containing the four preceding routes (TokenBridgeRoute, AutomaticTokenBridgeRoute, CCTPRoute, AutomaticCCTPRoute).
    - **`nttAutomaticRoute(nttConfig)`**: Function that returns the automatically-redeemed (relayed) Native Token Transfer (NTT) route.
    - **`nttManualRoute(nttConfig)`**: Function that returns the manually-redeemed NTT route.
    - **`nttExecutorRoute(nttConfig)`**: Function that returns the Executor-powered NTT route for one-click transfers.
    - **`MayanRoute`**: Route that offers multiple Mayan protocols.
    - **`MayanRouteSWIFT`**: Route for Mayan’s Swift protocol only.
    - **`MayanRouteMCTP`**: Route for Mayan’s MCTP protocol only.
    - **`MayanRouteWH`**: Route for Mayan’s original Wormhole transfer protocol.

In addition to these routes, developers can create custom routes for their own Wormhole-based protocols. For examples, refer to the [NTT](https://github.com/wormhole-foundation/native-token-transfers/tree/main/sdk/route){target=\_blank} and the [Mayan](https://github.com/mayan-finance/wormhole-sdk-route){target=\_blank} example GitHub repositories.

For further details on the Route plugin interface, refer to the [Wormhole TypeScript SDK route code](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/connect/src/routes/route.ts){target=\_blank}.

Now that you know the available `route` plugins, let's explore some examples of configuring them.

#### Example: Offer Only CCTP Transfers

To configure Connect to offer only USDC transfers via the CCTP route, use the following configuration:

```typescript
import WormholeConnect, {
  AutomaticCCTPRoute,
  type config,
} from '@wormhole-foundation/wormhole-connect';

const config: config.WormholeConnectConfig = {
  routes: [AutomaticCCTPRoute],
};

<WormholeConnect config={config} />;
```

#### Example: Offer All Default Routes and Third-Party Plugins

In this example, Connect is configured with routes for both default protocols (WTT and CCTP), as well as third-party protocols like [Native Token Transfers (NTT)](/docs/products/token-transfers/native-token-transfers/overview/){target=\_blank} and [Mayan Swap](https://swap.mayan.finance/){target=\_blank}.

```typescript
import WormholeConnect, {
  DEFAULT_ROUTES,
  MayanRouteSWIFT,
  type config,
} from '@wormhole-foundation/wormhole-connect';
import { nttExecutorRoute } from '@wormhole-foundation/wormhole-connect/ntt';

import { myNttConfig } from './consts'; // Custom NTT configuration

const config: config.WormholeConnectConfig = {
  routes: [...DEFAULT_ROUTES, nttExecutorRoute({ ntt: myNttConfig }), MayanRouteSWIFT],
};

<WormholeConnect config={config} />;
```

This flexible plugin allows you to combine default routes (such as WTT and CCTP) with third-party protocols, offering complete control over which routes are available in your application.

### Update the `tokensConfig` Structure

In Connect version 3.0, the `tokensConfig` property has been updated to simplify the structure and improve flexibility for token handling across chains. The previous configuration has been streamlined, and a new key, `wrappedTokens,` has been introduced to handle foreign assets more effectively.

Key Changes to `tokensConfig`:

 - **Capitalized chain names**: All chain names, like `ethereum`, must now be capitalized, such as `Ethereum`, to maintain consistency with the rest of the Wormhole SDK.
 - **`wrappedTokens`**: This new key replaces `foreignAssets` and defines the wrapped token addresses on foreign chains, making it easier to manage cross-chain transfers. It consolidates the wrapped token addresses into a cleaner structure. These addresses must be specified to enable token transfers to and from the foreign chain via WTT routes.
 - **Simplified decimals**: Instead of using a map of decimal values for different chains, you now only need to provide a single decimals value for the token's native chain.

=== "v0.x"

    In the old structure, the `foreignAssets` field defined the token’s presence on other chains, and `decimals` were mapped across multiple chains.

    ```typescript
    import WormholeConnect, {
      WormholeConnectConfig,
    } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      tokensConfig: {
        WETH: {
          key: 'WETH',
          symbol: 'WETH',
          nativeChain: 'ethereum',
          icon: Icon.ETH,
          tokenId: {
            chain: 'ethereum',
            address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
          },
          coinGeckoId: 'ethereum',
          color: '#62688F',
          decimals: { Ethereum: 18, default: 8 },
          foreignAssets: {
            Solana: {
              address: '7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs',
              decimals: 8,
            },
          },
        },
      },
    };
    ```

=== "v1.x"

    In v1.0, `foreignAssets` has been replaced with `wrappedTokens`, simplifying token transfers across chains by directly mapping wrapped token addresses. The `decimals` value is now a simple number representing the token’s decimals on its native chain.

    ```typescript
    import WormholeConnect, {
      WormholeConnectConfig,
    } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      tokensConfig: {
        WETH: {
          key: 'WETH',
          symbol: 'WETH',
          nativeChain: 'Ethereum', // Chain name now capitalized
          icon: Icon.ETH,
          tokenId: {
            chain: 'Ethereum',
            address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
          },
          coinGeckoId: 'ethereum',
          color: '#62688F',
          decimals: 18, // Simplified decimals field
        },
      },
      wrappedTokens: {
        WETH: {
          Solana: '7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs',
          /* additional chains */
        },
      },
    };
    ```

=== "v3.x"

    In v3.0, `foreignAssets` has been replaced with `wrappedTokens`, simplifying token transfers across chains by directly mapping wrapped token addresses. The `decimals` value is now a simple number representing the token’s decimals on its native chain.

    ```typescript
    import WormholeConnect, {
      type config,
    } from '@wormhole-foundation/wormhole-connect';

    const config: config.WormholeConnectConfig = {
      tokensConfig: {
        WETH: {
          key: 'WETH',
          symbol: 'WETH',
          nativeChain: 'Ethereum', // Chain name now capitalized
          icon: Icon.ETH,
          tokenId: {
            chain: 'Ethereum',
            address: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
          },
          coinGeckoId: 'ethereum',
          color: '#62688F',
          decimals: 18, // Simplified decimals field
        },
      },
      wrappedTokens: {
        WETH: {
          Solana: '7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs',
          /* additional chains */
        },
      },
    };
    ```

### Update NTT Configuration

In Connect version 3.0, the `nttGroups` property, which was used to configure Native Token Transfers (NTT), has been removed. Instead, the NTT configuration is passed directly to the NTT route constructor. This update simplifies the setup and provides more flexibility for defining NTT routes.

Key changes:

 - **Removed `nttGroups`**: The `nttGroups` property has been removed from the configuration and is now passed as an argument to the `nttExecutorRoute` function.
 - **Direct NTT route configuration**: NTT routes are now defined more explicitly, allowing for a more organized structure when specifying tokens, chains, and managers.

This change simplifies the configuration process by providing a cleaner, more flexible way to handle NTT routes across different chains.

=== "v0.x"

    In the previous version, `nttGroups` defined the NTT managers and transceivers for different tokens across multiple chains.

    ```typescript
    import WormholeConnect, {
      nttRoutes,
      WormholeConnectConfig,
    } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      nttGroups: {
        Lido_wstETH: {
          nttManagers: [
            {
              chainName: 'ethereum',
              address: '0xb948a93827d68a82F6513Ad178964Da487fe2BD9',
              tokenKey: 'wstETH',
              transceivers: [
                {
                  address: '0xA1ACC1e6edaB281Febd91E3515093F1DE81F25c0',
                  type: 'wormhole',
                },
              ],
            },
            {
              chainName: 'bsc',
              address: '0x6981F5621691CBfE3DdD524dE71076b79F0A0278',
              tokenKey: 'wstETH',
              transceivers: [
                {
                  address: '0xbe3F7e06872E0dF6CD7FF35B7aa4Bb1446DC9986',
                  type: 'wormhole',
                },
              ],
            },
          ],
        },
      },
    };
    ```

=== "v1.x"

    In v1.0, `nttGroups` has been removed, and the configuration is passed to the NTT route constructor as an argument. The tokens and corresponding transceivers are now clearly defined within the `nttRoutes` configuration.

    ```typescript
    import WormholeConnect, {
      nttRoutes,
      WormholeConnectConfig,
    } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      routes: [
        ...nttRoutes({
          tokens: {
            Lido_wstETH: [
              {
                chain: 'Ethereum',
                manager: '0xb948a93827d68a82F6513Ad178964Da487fe2BD9',
                token: '0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0',
                transceiver: [
                  {
                    address: '0xA1ACC1e6edaB281Febd91E3515093F1DE81F25c0',
                    type: 'wormhole',
                  },
                ],
              },
              {
                chain: 'Bsc',
                manager: '0x6981F5621691CBfE3DdD524dE71076b79F0A0278',
                token: '0x26c5e01524d2E6280A48F2c50fF6De7e52E9611C',
                transceiver: [
                  {
                    address: '0xbe3F7e06872E0dF6CD7FF35B7aa4Bb1446DC9986',
                    type: 'wormhole',
                  },
                ],
              },
            ],
          },
        }),
        /* other routes */
      ],
    };
    ```

=== "v3.x"

    In v3.0, `nttGroups` has been removed, and the configuration is passed to the NTT route constructor as an argument. The tokens and corresponding transceivers are now clearly defined within the `nttExecutorRoute` configuration.

    ```typescript
    import WormholeConnect, {
      type config,
    } from '@wormhole-foundation/wormhole-connect';
    import { nttExecutorRoute } from '@wormhole-foundation/wormhole-connect/ntt';

    const config: config.WormholeConnectConfig = {
      routes: [
        nttExecutorRoute({
          ntt: {
            tokens: {
              Lido_wstETH: [
                {
                  chain: 'Ethereum',
                  manager: '0xb948a93827d68a82F6513Ad178964Da487fe2BD9',
                  token: '0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0',
                  transceiver: [
                    {
                      address: '0xA1ACC1e6edaB281Febd91E3515093F1DE81F25c0',
                      type: 'wormhole',
                    },
                  ],
                },
                {
                  chain: 'Bsc',
                  manager: '0x6981F5621691CBfE3DdD524dE71076b79F0A0278',
                  token: '0x26c5e01524d2E6280A48F2c50fF6De7e52E9611C',
                  transceiver: [
                    {
                      address: '0xbe3F7e06872E0dF6CD7FF35B7aa4Bb1446DC9986',
                      type: 'wormhole',
                    },
                  ],
                },
              ],
            },
          },
        }),
        /* other routes */
      ],
    };
    ```

    In this new structure, NTT routes are passed directly through the `nttExecutorRoute` function, with the `token`, `chain`, `manager` and `transceiver` clearly defined for each supported asset.

### Update UI Configuration

In Connect version 3.0, the user interface configuration has been significantly updated. Several previously scattered UI properties have now been consolidated under a new `ui` key, making the UI configuration cleaner and easier to manage.

Key UI changes:

 - **Consolidated UI properties**: Many UI-related properties moved under a new top-level ui key for better organization.
 - **Removed `customTheme` and `mode`**: These properties have been removed in favor of a new top-level prop called `theme`, which simplifies theming and allows dynamic switching between themes.

#### UI Properties

The following properties that were previously defined at the root level of the configuration are now part of the `ui` key:

 - **`explorer` → `ui.explorer`**: Specifies the explorer to use for viewing transactions.
 - **`bridgeDefaults` → `ui.defaultInputs`**: Sets default input values for the bridge, such as the source and destination chains and token.
 - **`pageHeader` → `ui.pageHeader`**: Sets the title and header for the page.
 - **`menu` → `ui.menu`**: Defines the menu items displayed in the interface.
 - **`searchTx` → `ui.searchTx`**: Configures the transaction search functionality.
 - **`partnerLogo` → `ui.partnerLogo`**: Displays a partner's logo on the interface.
 - **`walletConnectProjectId` → `ui.walletConnectProjectId`**: Integrates WalletConnect into the UI.
 - **`showHamburgerMenu` → `ui.showHamburgerMenu`**: Enables or disables the hamburger menu for navigation.

Additionally, there are two new properties under `ui`:

 - **`ui.title`**: Sets the title rendered in the top left corner of the UI. The default is "Wormhole Connect".
 - **`ui.getHelpUrl`**: URL that Connect will render when an unknown error occurs, allowing users to seek help. This can link to a Discord server or any other support channel.

```typescript
import WormholeConnect, {
  type config,
} from '@wormhole-foundation/wormhole-connect';

const config: config.WormholeConnectConfig = {
  ui: {
    title: 'My Custom Bridge Example',
    getHelpUrl: 'https://examplehelp.com/',
    menu: [
      {
        label: 'Support',
        href: 'https://examplehelp.com/support',
        target: '_blank',
        order: 1, // Order of appearance in the menu
      },
      {
        label: 'About',
        href: 'https://examplehelp.com/about',
        target: '_blank',
        order: 2,
      },
    ],
    showHamburgerMenu: false,
  },
};
```

#### UI Configuration

In the old structure, UI-related settings like `explorer` and `bridgeDefaults` were defined at the root level of the configuration. In version 3.0, these properties are now organized under the `ui` key, improving the configuration's readability and manageability.

=== "v0.x"

    ```typescript
    
    const config: WormholeConnectConfig = {
      bridgeDefaults: {
        fromNetwork: 'solana',
        toNetwork: 'ethereum',
        tokenKey: 'USDC',
        requiredNetwork: 'solana',
      },
      showHamburgerMenu: true,
    };
    ```

=== "v1.x"

    ```typescript
    const config: WormholeConnectConfig = {
      ui: {
        defaultInputs: {
          fromChain: 'Solana', // Chain names now capitalized
          toChain: 'Ethereum',
          tokenKey: 'USDC',
          requiredChain: 'Solana',
        },
        showHamburgerMenu: true,
      },
    };
    ```

=== "v3.x"

    ```typescript
    const config: config.WormholeConnectConfig = {
      ui: {
        defaultInputs: {
          fromChain: 'Solana', // Chain names now capitalized
          toChain: 'Ethereum',
          tokenKey: 'USDC',
          requiredChain: 'Solana',
        },
        showHamburgerMenu: true,
      },
    };
    ```

#### Remove `customTheme` and `mode` Properties

In version 3.0, the `customTheme` and `mode` properties, which were previously used to set themes, have been removed. They have been replaced by a new top-level prop called `theme`, which allows for more flexibility and dynamic updates to themes.

Important details:

 - The `theme` prop is not part of the `config` object and is passed separately to Connect.
 - `config` cannot be modified after Connect has mounted, but the `theme` can be updated dynamically to support changes such as switching between light and dark modes or updating color schemes.

=== "v0.x"

    ```typescript
    import WormholeConnect, {
      WormholeConnectConfig,
    } from '@wormhole-foundation/wormhole-connect';

    const config: WormholeConnectConfig = {
      customTheme: {
        primaryColor: '#4266f5',
        secondaryColor: '#ff5733',
      },
      mode: 'dark',
    };

    <WormholeConnect config={config} />;
    ```

=== "^v1.x" 

    ```typescript
    import WormholeConnect, {
      WormholeConnectTheme,
    } from '@wormhole-foundation/wormhole-connect';

    const theme: WormholeConnectTheme = {
      mode: 'dark', // Can be dynamically changed
      font: 'Arial',
      button: {
        primary: '#4266f5',
      },
    };

    <WormholeConnect config={config} theme={theme} />;
    ```

### Removed Configuration Properties

Several configuration properties have been removed in Connect version 3.0. These keys no longer have any effect, and providing values for them in the configuration will not result in any changes.

Removed config keys:

 - `cta`
 - `cctpWarning`
 - `pageSubHeader`
 - `moreTokens`
 - `moreChains`
 - `ethBridgeMaxAmount`
 - `wstETHBridgeMaxAmount`
 - `customTheme`
 - `mode`

If your current setup includes any of these properties, you can safely remove them, as they are no longer supported in v3.0.

## Use the CDN-Hosted Version of Wormhole Connect

For those using the CDN-hosted version of Wormhole Connect, the package's installation and integration have been updated. You must install the Connect package from npm and use the new `wormholeConnectHosted` utility function.

### Install and Integrate the Hosted Version

1. Install the Connect package via npm:

    ```bash
    npm install @wormhole-foundation/wormhole-connect@^3.0
    ```

2. After installing the package, you can embed Connect into your page by adding the following code:

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

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

    wormholeConnectHosted(container);
    ```

### Example: Custom Configuration for Hosted Version

The `wormholeConnectHosted` function accepts two parameters: `config` and `theme`. This allows you to customize the routes and apply a theme directly within the hosted version. Here’s an example of how you can pass a custom configuration:

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

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

wormholeConnectHosted(container, {
  config: {
    routes: [MayanRoute],
    eventHandler: (e) => {
      console.log('Connect event', e);
    },
  },
  theme: {
    background: {
      default: '#004547',
    },
  },
});
```

In this example, the `config` object defines the routes (in this case, using the Mayan route), while the `theme` object allows customization of the Connect interface (e.g., background color).