Configuration

This page details your widget configuration options. Tweak it to fit your exact user experience needs!

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.