​
Component Props

The SwapWidget 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'];
  allowMultiTx?: boolean;
  allowUnsafe?: boolean;
  bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE')[];
  swapVenues?: {
    name: string;
    chainID: string;
  }[];
  smartSwapOptions?: SmartSwapOptions;
};
  • 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).
  • smartSwapOptions: Advanced swapping features like EVM Swaps and split trade routes. More info.

​
filter

Limits source and destination chains and assets.

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

Example:

{
  source: {
    'noble-1': undefined,
  },
  destination: {
    'cosmoshub-4': ['uatom', 'ibc/2181AAB0218EAC24BC9F86BD1364FBBFA3E6E3FCC25E88E3E68C15DC6E752D86'],
    'agoric-3': ['ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9'],
    'osmosis-1': undefined,
  }
}

​
settings

Sets defaults for user-customizable settings.

settings?: {
  customGasAmount?: number; 
  slippage?: number;
};
  • customGasAmount: Gas amount for CosmosSDK chain transactions. Default: 200000.
  • slippage: Default slippage percentage (0-100) for CosmosSDK chain swaps. Default: 3.

​
onlyTestnet

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

​
toasterProps

Props for the toaster component. Refer to ToasterProps for more details. Position defaults to { position: 'top-right' }.

toasterProps?: {
  position?: ToastPosition;
  toastOptions?: DefaultToastOptions;
  reverseOrder?: boolean;
  gutter?: number;
  containerStyle?: React.CSSProperties;
  containerClassName?: string;
  children?: (toast: Toast) => JSX.Element;
};

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

​
theme

Customize widget appearance.

theme?: {
  backgroundColor: string; 
  textColor: string; 
  borderColor: string;
  brandColor: string; // color used for confirmation buttons
  highlightColor: string; // color used when hovering over buttons, and in select chain/asset dropdown
};

​
callbacks

Event handling functions.

onWalletConnected?: ({ walletName: string, chainId: string, address?: string }) => void;
onWalletDisconnected?: ({ chainType?: string }) => void;
onTransactionBroadcasted?: ({ txHash: string, chainId: string, explorerLink: string }) => void;
onTransactionComplete?: ({ txHash: string, chainId: string, explorerLink: string }) => void;
onTransactionFailed?: ({ error: string }) => void;
onValidateGasBalance?: (value: {
    chainID?: string;
    txIndex?: number;
    status: "success" | "error" | "pending" | "completed"
  }) => Promise<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.
  • onValidateGasBalance: Triggered when validating gas balance.

​
connectedWallet

Inject your own wallet provider into the SwapWidget. 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.

connectedWallet?: {
  cosmos?: {
    getAddress: (chainID: string) => Promise<string>;
    getSigner: (chainID: string) => Promise<OfflineSigner>
  };
  evm?: {
    getAddress: (chainID: string) => Promise<string>;
    getSigner: (chainID: string) => Promise<WalletClient>;
  };
  svm?: {
    getAddress: (chainID: string) => Promise<string>;
    getSigner: () => Promise<Adapter>;
  };
};

​
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: 'test', // address to receive fee
    },
    {
      basisPointsFee: '100', // 1% fee
      address: 'test2', // address to receive fee
    }]
  },
  'osmosis-1': {
    affiliates: [{
      basisPointsFee: '200', // 2% fee
      address: 'test', // address to receive fee
    },]
  }
}

​
className

String to apply custom CSS classes.

​
style

React.CSSProperties to apply custom inline styles.

Getting StartedWeb Component