​
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'];
  allowMultiTx?: boolean;
  allowUnsafe?: boolean;
  bridges?: ('IBC' | 'AXELAR' | 'CCTP' | 'HYPERLANE' | 'GO_FAST')[];
  swapVenues?: {
    name: string;
    chainId: string;
  }[];
  goFast?: boolean;
  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).
  • goFast: Enable Go Fast transfers. Default: false. More info.
  • 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: 200_000.
  • 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).

​
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? = {
    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;
    };
  };

​
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
    },]
  }
}

​
Coming Soon

The following props are in development and will be available soon.

​
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 Widget. 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>;
  };
};
Getting StartedWeb Component