> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cosmos.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Migration Guide

## @skip-go/widget v3.9.0

### Prop name changes

**Before:**

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  <Widget
    getEVMSigner={}
    getSVMSigner={}
  />
```

**After:**

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<Widget
getEvmSigner={}
getSvmSigner={}
/>
```

## @skip-go/widget v3.0.0

### 1. Update Dependency (`^3.0.0`)

<CodeGroup>
  ```shell NPM theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  npm install @skip-go/widget@latest
  ```

  ```shell Yarn theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  yarn add @skip-go/widget@latest
  ```
</CodeGroup>

<Info>
  If you're using `yarn` (or another package manager that doesn't install peer dependencies by default)
  you may need to install these peer dependencies as well:

  ```bash theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
    yarn add @tanstack/react-query graz react react-dom viem wagmi
  ```
</Info>

### 2. `theme` Prop Changes

#### More Customization Options

You can pass either `light`, `dark`, or a custom theme object with granular
control over the widget's appearance.

**Before:**

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  <Widget
    theme='{
        "backgroundColor": "#191A1C",
        "textColor": "#E6EAE9",
        "borderColor": "#363B3F",
        "brandColor": "#FF4FFF",
        "highlightColor": "#1F2022"
    }'
  />
```

**After:**

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<Widget
theme="light" // or "dark"
// Note: you can pass a "brandColor" in addition to the selected "light" or "dark" theme
brandColor: "#FF4FFF"
// Or provide a custom theme object
theme={{
  brandColor: "#FF4FFF",
  primary: {
    background: {
      normal: "#191A1C",
      transparent: "rgba(25, 26, 28, 0.5)",
    },
    text: {
      normal: "#E6EAE9",
      lowContrast: "#B0B3B5",
      ultraLowContrast: "#7C7F81",
    },
    ghostButtonHover: "#1F2022",
  },
  // Define other theme properties as needed
}}
/>
```

The custom theme object has the following structure:

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
theme = {
  brandColor: string;
  borderRadius: number;
  primary: {
    background: {
      normal: string;
      transparent: string;
    };
    text: {
      normal: string;
      lowContrast: string;
      ultraLowContrast: string;
    };
    ghostButtonHover: string;
  };
  secondary: {
    background: {
      normal: string;
      transparent: string;
      hover: string;
    };
  };
  success: {
    text: string;
  };
  warning: {
    background: string;
    text: string;
  };
  error: {
    background: string;
    text: string;
  };
};
```

### 3. Prop Spelling Changes

#### `chainID` Renamed to `chainId`

#### `apiURL` Renamed to `apiUrl`

Update all instances of `chainID` to `chainId`, notably in the `defaultRoute` prop.

**Before:**

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<Widget
  apiURL="..."
  defaultRoute={{
    amountIn: 1,
    srcChainID: "osmosis-1",
    srcAssetDenom: "uosmo",
    destChainID: "cosmoshub-4",
    destAssetDenom: "uatom",
  }}
/>
```

**After:**

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<Widget
  apiUrl="..."
  defaultRoute={{
    amountIn: 1,
    srcChainId: "osmosis-1",
    srcAssetDenom: "uosmo",
    destChainId: "cosmoshub-4",
    destAssetDenom: "uatom",
  }}
/>
```

### 4. Temporarily Disabled Features

The following props will be reintroduced in future versions of `Widget`.

#### a. `connectedWallet` Prop

The connectedWallet prop, which allowed passing a custom wallet provider, isn't currently supported.

#### b. `CallbackStore` Callback Props

The `onWalletConnected`, `onWalletDisconnected`, `onTransactionBroadcasted`, `onTransactionComplete`, and `onTransactionFailed` callback props aren't currently supported.

### 5. Removed Features

#### a. `persistWidgetState`

This prop is no longer supported, as the `Widget` persists state by default.

#### b. `toasterProps`

The `toasterProps` prop has been removed because the `Widget` no longer generates notifications.

#### c. `makeDestinationWallets`

The `makeDestinationWallets` prop has been removed. The `Widget` now automatically generates destination wallets from connected wallets or manual user entry.

<Info>
  By implementing these changes, you can successfully migrate your application from Widget V1 to Widget V2. For further assistance, refer to the official documentation or reach out to the [support team](https://discord.com/channels/669268347736686612/1365254948782342175).
</Info>