​
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'];
  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: 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.

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

​
callbacks

Event handling functions.

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

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

onTransactionBroadcasted?: (params: {
  txHash: string;
  chainId: string;
  explorerLink?: string;
}) => void;
onTransactionComplete?: (params: {
  txHash: string;
  chainId: string;
  explorerLink?: string;
}) => void;
onTransactionFailed?: (params: { error: Error }) => 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}
/>
Getting StartedWeb Component