​
1. Update Dependency (latest or ^3.0.0)

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:

  yarn add @tanstack/react-query graz react react-dom viem wagmi

​
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:

  <Widget
    theme='{
        "backgroundColor": "#191A1C",
        "textColor": "#E6EAE9",
        "borderColor": "#363B3F",
        "brandColor": "#FF4FFF",
        "highlightColor": "#1F2022"
    }'
  />

After:

<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:

theme = {
  brandColor: string;
  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:

<Widget
  apiURL="..."
  defaultRoute={{
    amountIn: 1,
    srcChainID: "osmosis-1",
    srcAssetDenom: "uosmo",
    destChainID: "cosmoshub-4",
    destAssetDenom: "uatom",
  }}
/>

After:

<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.

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.

Web ComponentFAQ