> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cosmos.network/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

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

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

# 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](../api-reference/prod/fungible/get-v2fungibleassets) endpoint. Setting this triggers a route request on render.

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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.

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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](../advanced-swapping/allow_unsafe-preventing-handling-bad-execution).
* `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](../advanced-transfer/go-fast).
* `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](../advanced-swapping/smart-swap-options).

### `batchSignTxs`

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

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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

<Note>
  **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.
</Note>

### `filter`

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

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  filter?: {
    source?: Record<string, string[] | undefined>;
    destination?: Record<string, string[] | undefined>;
  };
```

Example:

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
{
  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

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  filterOut?: {
    source?: Record<string, string[] | undefined>;
    destination?: Record<string, string[] | undefined>;
  };
```

Example:

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
{
  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.

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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](https://discord.com/invite/interchain).

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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](https://discord.com/invite/interchain).

### `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

```tsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
  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.

<Info>
  Total basisPointsFee must be consistent across chains. Addresses must be valid for respective chains.
</Info>

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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.

```ts theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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](https://github.com/skip-mev/skip-go/tree/staging/examples/nextjs/src/app/injected/page.tsx).

`WalletClient` comes from the [`viem` package](https://viem.sh/docs/clients/wallet). `Adapter` comes from the [`@solana/wallet-adapter-base` package](https://solana.com/developers/cookbook/wallets/connect-wallet-react). And `OfflineSigner` comes from the [`@cosmjs` package](https://github.com/cosmos/cosmjs).

* **Type:** `Record<ChainId, Address>`

**Example:**

```typescript theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
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:**

```jsx theme={"theme":{"light":"github-light-high-contrast","dark":"github-dark-high-contrast"}}
<Widget
  connectedAddresses={connectedAddresses}
  getCosmosSigner={getCosmosSigner}
  getEvmSigner={getEvmSigner}
  getSvmSigner={getSvmSigner}
/>
```