@skip-go/widget v3.9.0

Prop 名称变更

变更前:
  <Widget
    getEVMSigner={}
    getSVMSigner={}
  />
变更后:
<Widget
getEvmSigner={}
getSvmSigner={}
/>

@skip-go/widget v3.0.0

1. 更新依赖(^3.0.0)

npm install @skip-go/widget@latest
如果你使用的是 yarn(或其他默认不会安装 peer dependencies 的包管理器), 你可能还需要安装以下 peer dependencies:
  yarn add @tanstack/react-query graz react react-dom viem wagmi

2. theme Prop 变更

提供更多自定义选项

你可以传入 light、dark,或一个自定义主题对象,以更细粒度地控制 Widget 的外观。 变更前:
  <Widget
    theme='{ 
        "backgroundColor": "#191A1C",
        "textColor": "#E6EAE9",
        "borderColor": "#363B3F",
        "brandColor": "#FF4FFF",
        "highlightColor": "#1F2022"
    }'
  />
变更后:
<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
}}
/>
自定义主题对象具有以下结构:
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 拼写变更

chainID 重命名为 chainId

apiURL 重命名为 apiUrl

将所有 chainID 更新为 chainId,尤其是 defaultRoute prop 中的用法。 变更前:
<Widget
  apiURL="..."
  defaultRoute={{
    amountIn: 1,
    srcChainID: "osmosis-1",
    srcAssetDenom: "uosmo",
    destChainID: "cosmoshub-4",
    destAssetDenom: "uatom",
  }}
/>
变更后:
<Widget
  apiUrl="..."
  defaultRoute={{
    amountIn: 1,
    srcChainId: "osmosis-1",
    srcAssetDenom: "uosmo",
    destChainId: "cosmoshub-4",
    destAssetDenom: "uatom",
  }}
/>

4. 暂时禁用的功能

以下 props 将在未来版本的 Widget 中重新引入。

a. connectedWallet Prop

connectedWallet prop 允许传入自定义钱包提供方,但当前暂不支持。

b. CallbackStore 回调 Props

onWalletConnected、onWalletDisconnected、onTransactionBroadcasted、onTransactionComplete 和 onTransactionFailed 这些回调 props 当前暂不支持。

5. 已移除的功能

a. persistWidgetState

该 prop 已不再支持,因为 Widget 默认会持久化状态。

b. toasterProps

toasterProps prop 已被移除,因为 Widget 不再生成通知。

c. makeDestinationWallets

makeDestinationWallets prop 已被移除。Widget 现在会根据已连接钱包或用户手动输入自动生成目标钱包。
完成这些变更后,你就可以将应用从 Widget V1 成功迁移到 Widget V2。如需进一步帮助,请参阅官方文档或联系支持团队。

@skip-go/widget v3.9.0

Prop name changes

Before:
  <Widget
    getEVMSigner={}
    getSVMSigner={}
  />
After:
<Widget
getEvmSigner={}
getSvmSigner={}
/>

@skip-go/widget v3.0.0

1. Update Dependency (^3.0.0)

npm install @skip-go/widget@latest
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;
  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:
<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.