可视化配置工具： 想在实现前先查看配置项的实际效果？试试 studio.skip.build；这是我们的交互式小部件构建器，可通过实时预览自定义主题、资源、路由等内容。

组件属性

Widget 组件接受以下 props。

`defaultRoute`

用于自定义小部件加载时显示的初始路由。可通过 Skip Go API 的 /assets 端点查询受支持的资产。设置后会在渲染时触发一次路由请求。

defaultRoute?: {
  amountIn?: number;
  amountOut?: number;
  srcChainId?: string;
  srcAssetDenom?: string;
  destChainId?: string;
  destAssetDenom?: string;
};

amountIn：精确输入金额请求的预设输入金额。
amountOut：精确输出金额请求的预设输出金额。如果两者都设置，则仅使用 amountIn。
srcChainId：源链 ID。
srcAssetDenom：源资产面额。
destChainId：目标链 ID。
destAssetDenom：目标资产面额。

`routeConfig`

用于自定义启用的路由类型。

routeConfig?: {
  experimentalFeatures?: ['hyperlane', 'cctp', 'stargate', 'eureka'];
  allowMultiTx?: boolean;
  allowUnsafe?: boolean;
  bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE' | 'GO_FAST')[];
  swapVenues?: {
    name: string;
    chainId: string;
  }[];
  goFast?: boolean;
  smartSwapOptions?: SmartSwapOptions;
  timeoutSeconds?: string; // Number of seconds for the IBC transfer timeout, defaults to 5 minutes
};

allowMultiTx：允许多交易路由。默认值：true。
allowUnsafe：允许不安全路由。默认值：false。更多信息。
bridges：将路由限制为特定桥。默认值：空（所有桥）。
swapVenues：将路由限制为特定兑换场所。默认值：空（所有场所）。
goFast：启用 Go Fast 转账。默认值：false。更多信息。
experimentalFeatures：要启用的实验性功能数组。包含 'eureka' 可启用 Eureka 资产路由。
smartSwapOptions：高级兑换功能，例如 EVM 兑换和拆分交易路由。更多信息。

`batchSignTxs`

控制多交易路由中的所有交易是应在开始时一次性签名，还是在执行过程中逐笔签名。

batchSignTxs?: boolean;

默认值： true
启用后，路由中的所有交易都会在执行开始时请求签名，随后按顺序逐笔广播。
禁用后，每笔交易都会在广播前单独签名。

batchSignTxs: true 的示例场景： 对于一条路由：Solana → Noble → Cosmos（3 笔需要签名的交易）

开始时会一次性提示为全部 3 笔交易签名
签名完成后，会按顺序广播：先 Solana，再 Noble，最后 Cosmos

EVM 交易限制： 如果某笔 EVM 交易位于路由中的第二笔或更后位置，则无法在开始时执行批量签名。在这种情况下，该 EVM 交易及其后的交易都需要在准备执行时分别签名。

`filter`

用于限制源资产和目标资产允许项的键值对，可按 chainId 或特定资产 denom 配置。

  filter?: {
    source?: Record<string, string[] | undefined>;
    destination?: Record<string, string[] | undefined>;
  };

示例：

{
  source: {
    // only assets on this chainId is allowed
    'noble-1': undefined,
  },
  destination: {
    // these assets on this chainId are allowed
    'cosmoshub-4': ['uatom', 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86'],
    // these assets on this chainId are allowed
    'agoric-3': ['ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9'],
    // any asset on this chainId are allowed
    'osmosis-1': undefined,
  }
}

`filterOut`

与 filter 相反。用于排除不允许的 chainId 或不允许的特定资产 denom 的键值对。

  filterOut?: {
    source?: Record<string, string[] | undefined>;
    destination?: Record<string, string[] | undefined>;
  };

示例：

{
  source: {
    // only assets on this chainId is not allowed
    'noble-1': undefined,
  },
  destination: {
    // these assets on this chainId are not allowed
    'cosmoshub-4': ['uatom', 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86'],
  }
}

`settings`

用于设置用户可自定义设置项的默认值。

settings?: {
  customGasAmount?: number;
  slippage?: number;
  useUnlimitedApproval?: boolean; // Set allowance amount to max if EVM transaction requires allowance approval
};

customGasAmount：CosmosSDK 链交易的 Gas 数量。默认值：300_000。
slippage：CosmosSDK 链兑换的默认滑点百分比（0-100）。默认值：1。

`onlyTestnet`

onlyTestnet：布尔值，仅显示测试网数据。默认值：false（仅主网数据）。

`endpointOptions`

用于覆盖默认的 Skip 代理端点。需要加入白名单，请通过这里联系。

endpointOptions?: {
    endpoints?: Record<string, EndpointOptions>;
    getRpcEndpointForChain?: (chainID: string) => Promise<string>;
    getRestEndpointForChain?: (chainID: string) => Promise<string>;
  };

`apiUrl`

用于覆盖默认的 Skip Go API 代理端点的字符串。需要加入白名单，请通过这里联系。

`brandColor`

用于自定义小部件的主高亮颜色。

`borderRadius`

控制小部件中卡片和按钮的圆角程度。

`theme`

高级小部件外观自定义选项。

  theme? = {
    brandColor: string;
    borderRadius: {
      main?: string | number;
      selectionButton?: string | number;
      ghostButton?: string | number;
      modalContainer?: string | number;
      rowItem?: string | number;
    };
    primary: {
      background: {
        normal: string;
      };
      text: {
        normal: string;
        lowContrast: string;
        ultraLowContrast: string;
      };
      ghostButtonHover: string;
    };
    secondary: {
      background: {
        normal: string;
        transparent: string;
        hover: string;
      };
    };
    success: {
      background: string;
      text: string;
    };
    warning: {
      background: string;
      text: string;
    };
    error: {
      background: string;
      text: string;
    };
  };

`chainIdsToAffiliates`

按链定义费用和接收地址。

basisPointsFee 总和在各链之间必须保持一致。地址必须对各自链有效。

chainIdsToAffiliates: {
  'noble-1': {
    affiliates: [{
      basisPointsFee: '100', // 1% fee
      address: 'noble..1', // address to receive fee
    },
    {
      basisPointsFee: '100', // 1% fee
      address: 'noble...2', // address to receive fee
    }]
  },
  'osmosis-1': {
    affiliates: [{
      basisPointsFee: '200', // 2% fee
      address: 'osmo...1', // address to receive fee
    },]
  }
}

`enableSentrySessionReplays`

在小部件上启用 Sentry session replay，以帮助排查错误。默认值：false。

`enableAmplitudeAnalytics`

为小部件启用 Amplitude analytics，以改进用户体验。默认值：false。

`disableShadowDom`

禁用 shadow dom；当某些库不支持 shadow-dom，或需要启用服务端渲染时会很有用。默认值：false。（默认启用 shadow dom 以避免样式冲突或其他问题）

`hideAssetsUnlessWalletTypeConnected`

根据已连接的钱包类型过滤资产（当前仅支持 Sei Cosmos/EVM）。新增于 v3.7.3。默认值：false。

`callbacks`

事件处理函数。

onWalletConnected?: (params: {
  walletName?: string;
  chainIdToAddressMap: Record<string, string>;
  address?: string;
}) => void;

onWalletDisconnected?: (params: {
  walletName?: string;
  chainType?: string;
}) => void;

onTransactionSignRequested?: (props: onTransactionSignRequestedProps) => void;

onTransactionBroadcasted?: (params: {
  chainId: string;
  signerAddress?: string;
  txIndex: number;
}) => void;

onTransactionComplete?: (params: {
  txHash: string;
  chainId: string;
  explorerLink?: string;
  sourceAddress: string;
  destinationAddress: string;
  sourceAssetDenom: string;
  sourceAssetChainID: string;
  destAssetDenom: string;
  destAssetChainID: string;
}) => void;

onTransactionFailed?: (params: { error: Error }) => void;

onRouteUpdated?: (props: {
  srcChainId?: string;
  srcAssetDenom?: string;
  destChainId?: string;
  destAssetDenom?: string;
  amountIn?: string;
  amountOut?: string;
  requiredChainAddresses?: string[];
}) => void;

onSourceAndDestinationSwapped?: (props: {
  srcChainId?: string;
  srcAssetDenom?: string;
  destChainId?: string;
  destAssetDenom?: string;
  amountIn?: string;
  amountOut?: string;
}) => void;

onSourceAssetUpdated?: (props: {
  chainId?: string;
  denom?: string;
}) => void;

onDestinationAssetUpdated?: (props: {
  chainId?: string;
  denom?: string;
}) => void;

onWalletConnected：在钱包连接时调用。
onWalletDisconnected：在钱包断开连接时调用。
onTransactionBroadcasted：在交易广播时调用。对于多交易路由，该回调会被调用多次。
onTransactionComplete：在交易完成时触发。
onTransactionFailed：在交易失败时触发。

`connectedAddresses` & `signers`

如果你的应用已经连接了用户的钱包（例如 EVM 网络使用 MetaMask、Solana 使用 Phantom，或 Cosmos 使用 Keplr），则你必须同时提供 connectedAddresses 和对应的 signer 函数，才能启用小部件的注入式钱包功能。实现示例见这里。 WalletClient 来自 viem package。Adapter 来自 @solana/wallet-adapter-base package。OfflineSigner 来自 @cosmjs package。

类型： Record<ChainId, Address>

示例：

const connectedAddresses: Record<string, string> = {
  "1": "0x123...abc",          // Ethereum mainnet address
  "cosmoshub-4": "cosmos1...", // Cosmos Hub address
  "solana": "3n9...xyz",       // Solana address
  // ... add more chain IDs and addresses as needed
};

签名器函数

要完整利用注入式钱包能力，必须实现以下每个签名器函数：

getCosmosSigner(): Promise<OfflineSigner> 返回一个兼容 Cosmos 的签名器。
getEvmSigner(): Promise<WalletClient> 返回一个兼容 EVM 的签名器（例如来自 viem）。
getSvmSigner(): Promise<PhantomWalletAdapter> 返回一个兼容 Solana 的签名器，例如 PhantomWalletAdapter。

注入式钱包功能完整示例：

<Widget
  connectedAddresses={connectedAddresses}
  getCosmosSigner={getCosmosSigner}
  getEvmSigner={getEvmSigner}
  getSvmSigner={getSvmSigner}
/>

Visual Configuration Tool: Want to see how your configuration options look before implementing them? Try studio.skip.build - our interactive widget builder that lets you customize themes, assets, routes, and more with a live preview.

Component Props

The Widget component accepts the following props.

`defaultRoute`

Customizes the initial route displayed on widget load. Query supported assets using the Skip Go API /assets endpoint. Setting this triggers a route request on render.

defaultRoute?: {
  amountIn?: number;
  amountOut?: number;
  srcChainId?: string;
  srcAssetDenom?: string;
  destChainId?: string;
  destAssetDenom?: string;
};

amountIn: Preset input amount for exact amount in request.
amountOut: Preset output amount for exact amount out request. If both specified, only amountIn is used.
srcChainId : Source chain ID.
srcAssetDenom: Source asset denomination.
destChainId: Destination chain ID.
destAssetDenom: Destination asset denomination.

`routeConfig`

Customizes enabled route types.

routeConfig?: {
  experimentalFeatures?: ['hyperlane', 'cctp', 'stargate', 'eureka'];
  allowMultiTx?: boolean;
  allowUnsafe?: boolean;
  bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE' | 'GO_FAST')[];
  swapVenues?: {
    name: string;
    chainId: string;
  }[];
  goFast?: boolean;
  smartSwapOptions?: SmartSwapOptions;
  timeoutSeconds?: string; // Number of seconds for the IBC transfer timeout, defaults to 5 minutes
};

allowMultiTx: Allow multi-transaction routes. Default: true.
allowUnsafe: Allow unsafe routes. Default: false. More info.
bridges: Restrict routing to specific bridges. Default: empty (all bridges).
swapVenues: Restrict routing to specific swap venues. Default: empty (all venues).
goFast: Enable Go Fast transfers. Default: false. More info.
experimentalFeatures: Array of experimental features to enable. Include 'eureka' to enable routing with Eureka assets.
smartSwapOptions: Advanced swapping features like EVM Swaps and split trade routes. More info.

`batchSignTxs`

Controls whether all transactions in a multi-transaction route should be signed upfront or individually as they are executed.

batchSignTxs?: boolean;

Default: true
When enabled, all transactions in the route will be requested for signature at the beginning of the execution. They will then be broadcast one by one in sequence.
When disabled, each transaction will be signed individually just before it is broadcast.

Example scenario with batchSignTxs: true: For a route: Solana → Noble → Cosmos (3 transactions requiring signatures)

All 3 transactions will be prompted for signature upfront
After signing, they will be broadcast sequentially: Solana first, then Noble, then Cosmos

EVM Transaction Limitation: If an EVM transaction appears as the second or later transaction in a route, batch signing cannot be performed upfront. In such cases, the EVM transaction and any subsequent transactions will need to be signed individually when they are ready to be executed.

`filter`

Key value pair of chainIds or specific asset denoms allowed on source and destination assets

  filter?: {
    source?: Record<string, string[] | undefined>;
    destination?: Record<string, string[] | undefined>;
  };

Example:

{
  source: {
    // only assets on this chainId is allowed
    'noble-1': undefined,
  },
  destination: {
    // these assets on this chainId are allowed
    'cosmoshub-4': ['uatom', 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86'],
    // these assets on this chainId are allowed
    'agoric-3': ['ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9'],
    // any asset on this chainId are allowed
    'osmosis-1': undefined,
  }
}

`filterOut`

Opposite of filter. Key value pair of chainIds not allowed or specific asset denoms not allowed

  filterOut?: {
    source?: Record<string, string[] | undefined>;
    destination?: Record<string, string[] | undefined>;
  };

Example:

{
  source: {
    // only assets on this chainId is not allowed
    'noble-1': undefined,
  },
  destination: {
    // these assets on this chainId are not allowed
    'cosmoshub-4': ['uatom', 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86'],
  }
}

`settings`

Sets defaults for user-customizable settings.

settings?: {
  customGasAmount?: number;
  slippage?: number;
  useUnlimitedApproval?: boolean; // Set allowance amount to max if EVM transaction requires allowance approval
};

customGasAmount: Gas amount for CosmosSDK chain transactions. Default: 300_000.
slippage: Default slippage percentage (0-100) for CosmosSDK chain swaps. Default: 1.

`onlyTestnet`

onlyTestnet: Boolean to show only testnet data. Default: false (mainnet data only).

`endpointOptions`

Override default Skip proxied endpoints. Whitelisting required, reach out here.

endpointOptions?: {
    endpoints?: Record<string, EndpointOptions>;
    getRpcEndpointForChain?: (chainID: string) => Promise<string>;
    getRestEndpointForChain?: (chainID: string) => Promise<string>;
  };

`apiUrl`

String to override default Skip Go API proxied endpoints. Whitelisting required, reach out here.

`brandColor`

Customizes the main highlight color of the widget

`borderRadius`

Controls the corner roundness of cards and buttons in the widget

`theme`

Advanced widget appearance customization options

  theme? = {
    brandColor: string;
    borderRadius: {
      main?: string | number;
      selectionButton?: string | number;
      ghostButton?: string | number;
      modalContainer?: string | number;
      rowItem?: string | number;
    };
    primary: {
      background: {
        normal: string;
      };
      text: {
        normal: string;
        lowContrast: string;
        ultraLowContrast: string;
      };
      ghostButtonHover: string;
    };
    secondary: {
      background: {
        normal: string;
        transparent: string;
        hover: string;
      };
    };
    success: {
      background: string;
      text: string;
    };
    warning: {
      background: string;
      text: string;
    };
    error: {
      background: string;
      text: string;
    };
  };

`chainIdsToAffiliates`

Define fees per chain and recipient addresses.

Total basisPointsFee must be consistent across chains. Addresses must be valid for respective chains.

chainIdsToAffiliates: {
  'noble-1': {
    affiliates: [{
      basisPointsFee: '100', // 1% fee
      address: 'noble..1', // address to receive fee
    },
    {
      basisPointsFee: '100', // 1% fee
      address: 'noble...2', // address to receive fee
    }]
  },
  'osmosis-1': {
    affiliates: [{
      basisPointsFee: '200', // 2% fee
      address: 'osmo...1', // address to receive fee
    },]
  }
}

`enableSentrySessionReplays`

Enables sentry session replays on the widget to help with troubleshooting errors. Default: false.

`enableAmplitudeAnalytics`

Enable Amplitude analytics for the widget to improve user experience. Default: false.

`disableShadowDom`

Disables shadow dom, useful if there are issues with libraries not supporting shadow-dom or for enabling server side rendering Default: false. (shadow dom is enabled by default to avoid styling conflicts/issues)

`hideAssetsUnlessWalletTypeConnected`

Filters assets based on connected wallet types (currently only supports Sei Cosmos/EVM). Added in v3.7.3. Default: false.

`callbacks`

Event handling functions.

onWalletConnected?: (params: {
  walletName?: string;
  chainIdToAddressMap: Record<string, string>;
  address?: string;
}) => void;

onWalletDisconnected?: (params: {
  walletName?: string;
  chainType?: string;
}) => void;

onTransactionSignRequested?: (props: onTransactionSignRequestedProps) => void;

onTransactionBroadcasted?: (params: {
  chainId: string;
  signerAddress?: string;
  txIndex: number;
}) => void;

onTransactionComplete?: (params: {
  txHash: string;
  chainId: string;
  explorerLink?: string;
  sourceAddress: string;
  destinationAddress: string;
  sourceAssetDenom: string;
  sourceAssetChainID: string;
  destAssetDenom: string;
  destAssetChainID: string;
}) => void;

onTransactionFailed?: (params: { error: Error }) => void;

onRouteUpdated?: (props: {
  srcChainId?: string;
  srcAssetDenom?: string;
  destChainId?: string;
  destAssetDenom?: string;
  amountIn?: string;
  amountOut?: string;
  requiredChainAddresses?: string[];
}) => void;

onSourceAndDestinationSwapped?: (props: {
  srcChainId?: string;
  srcAssetDenom?: string;
  destChainId?: string;
  destAssetDenom?: string;
  amountIn?: string;
  amountOut?: string;
}) => void;

onSourceAssetUpdated?: (props: {
  chainId?: string;
  denom?: string;
}) => void;

onDestinationAssetUpdated?: (props: {
  chainId?: string;
  denom?: string;
}) => void;

onWalletConnected: Called when a wallet is connected.
onWalletDisconnected: Called when a wallet is disconnected.
onTransactionBroadcasted: Called when a transaction is broadcasted. This is called multiple times for multi-transaction routes.
onTransactionComplete: Triggered when a transaction is completed.
onTransactionFailed: Triggered when a transaction fails.

`connectedAddresses` & `signers`

If your application has already connected to a user’s wallet (e.g., via MetaMask for EVM networks, Phantom for Solana, or Keplr for Cosmos), you must provide both the connectedAddresses and corresponding signer functions in order to enable the widget’s injected wallet functionality. See an implementation example here. WalletClient comes from the viem package. Adapter comes from the @solana/wallet-adapter-base package. And OfflineSigner comes from the @cosmjs package.

Type: Record<ChainId, Address>

Example:

const connectedAddresses: Record<string, string> = {
  "1": "0x123...abc",          // Ethereum mainnet address
  "cosmoshub-4": "cosmos1...", // Cosmos Hub address
  "solana": "3n9...xyz",       // Solana address
  // ... add more chain IDs and addresses as needed
};

Signer Functions

Each signer function below must be implemented to fully leverage the injected wallet capabilities:

getCosmosSigner(): Promise<OfflineSigner> Returns a Cosmos-compatible signer.
getEvmSigner(): Promise<WalletClient> Returns an EVM-compatible signer (e.g., from viem).
getSvmSigner(): Promise<PhantomWalletAdapter> Returns a Solana-compatible signer, such as a PhantomWalletAdapter.

Complete Example for injected wallet functionality:

<Widget
  connectedAddresses={connectedAddresses}
  getCosmosSigner={getCosmosSigner}
  getEvmSigner={getEvmSigner}
  getSvmSigner={getSvmSigner}
/>

​组件属性

​defaultRoute

​routeConfig

​batchSignTxs

​filter

​filterOut

​settings

​onlyTestnet

​endpointOptions

​apiUrl

​brandColor

​borderRadius

​theme

​chainIdsToAffiliates

​enableSentrySessionReplays

​enableAmplitudeAnalytics

​disableShadowDom

​hideAssetsUnlessWalletTypeConnected

​callbacks

​connectedAddresses & signers

​签名器函数

​Component Props

​defaultRoute

​routeConfig

​batchSignTxs

​filter

​filterOut

​settings

​onlyTestnet

​endpointOptions

​apiUrl

​brandColor

​borderRadius

​theme

​chainIdsToAffiliates

​enableSentrySessionReplays

​enableAmplitudeAnalytics

​disableShadowDom

​hideAssetsUnlessWalletTypeConnected

​callbacks

​connectedAddresses & signers

​Signer Functions

组件属性

`defaultRoute`

`routeConfig`

`batchSignTxs`

`filter`

`filterOut`

`settings`

`onlyTestnet`

`endpointOptions`

`apiUrl`

`brandColor`

`borderRadius`

`theme`

`chainIdsToAffiliates`

`enableSentrySessionReplays`

`enableAmplitudeAnalytics`

`disableShadowDom`

`hideAssetsUnlessWalletTypeConnected`

`callbacks`

`connectedAddresses` & `signers`

签名器函数

Component Props

`defaultRoute`

`routeConfig`

`batchSignTxs`

`filter`

`filterOut`

`settings`

`onlyTestnet`

`endpointOptions`

`apiUrl`

`brandColor`

`borderRadius`

`theme`

`chainIdsToAffiliates`

`enableSentrySessionReplays`

`enableAmplitudeAnalytics`

`disableShadowDom`

`hideAssetsUnlessWalletTypeConnected`

`callbacks`

`connectedAddresses` & `signers`

Signer Functions