# Configuration Types

This document outlines the configuration types available for the Squid Widget v2.0. For an implementation example, refer to the Full Configuration Example.

### Core Configuration Types

```typescript
export interface SquidConfig {
  integratorId: string;
  apiUrl?: string;
  theme?: Theme;
  themeType?: 'dark' | 'light';
  initialAssets?: {
    from: TokenData;
    to: TokenData;
  };
  defaultTokensPerChain?: TokenData[];
  priceImpactWarnings?: {
    warning: number;
    critical: number;
  };
  availableChains?: {
    source?: ChainId[];
    destination?: ChainId[];
  };
  loadPreviousStateFromLocalStorage?: boolean;
  slippage?: SlippageOption;
  hideAnimations?: boolean;
  preferDex?: DexName[] | string[];
  collectFees?: {
    integratorAddress: string;
    fee: number; // Basis points (e.g., 50 = 0.05%)
  };
  degenMode?: boolean;
}

export type ChainId = number | string;

export type SlippageOption = 0.5 | 1 | 1.5 | 3;

export type TokenData = {
  address: string;
  chainId: ChainId;
};

export type DexName = string; // Specific DEX names to be listed here
```

### Theme Configuration

```typescript
export interface Theme {
  borderRadius?: {
    "button-lg-primary"?: string;
    "button-lg-secondary"?: string;
    "button-lg-tertiary"?: string;
    "button-md-primary"?: string;
    "button-md-secondary"?: string;
    "button-md-tertiary"?: string;
    "container"?: string;
    "input"?: string;
    "menu-sm"?: string;
    "menu-lg"?: string;
    "modal"?: string;
  };
  fontSize?: {
    "caption"?: string;
    "body-small"?: string;
    "body-medium"?: string;
    "body-large"?: string;
    "heading-small"?: string;
    "heading-medium"?: string;
    "heading-large"?: string;
  };
  fontWeight?: {
    "caption"?: string;
    "body-small"?: string;
    "body-medium"?: string;
    "body-large"?: string;
    "heading-small"?: string;
    "heading-medium"?: string;
    "heading-large"?: string;
  };
  fontFamily?: {
    "squid-main"?: string;
  };
  boxShadow?: {
    "container"?: string;
  };
  color?: {
    "grey-100"?: ColorType;
    "grey-200"?: ColorType;
    "grey-300"?: ColorType;
    "grey-400"?: ColorType;
    "grey-500"?: ColorType;
    "grey-600"?: ColorType;
    "grey-700"?: ColorType;
    "grey-800"?: ColorType;
    "grey-900"?: ColorType;
    "royal-300"?: ColorType;
    "royal-400"?: ColorType;
    "royal-500"?: ColorType;
    "royal-700"?: ColorType;
    "status-positive"?: ColorType;
    "status-negative"?: ColorType;
    "status-partial"?: ColorType;
    "highlight-700"?: ColorType;
    "animation-bg"?: ColorType;
    "animation-text"?: ColorType;
    "button-lg-primary-bg"?: ColorType;
    "button-lg-primary-text"?: ColorType;
    "button-lg-secondary-bg"?: ColorType;
    "button-lg-secondary-text"?: ColorType;
    "button-lg-tertiary-bg"?: ColorType;
    "button-lg-tertiary-text"?: ColorType;
    "button-md-primary-bg"?: ColorType;
    "button-md-primary-text"?: ColorType;
    "button-md-secondary-bg"?: ColorType;
    "button-md-secondary-text"?: ColorType;
    "button-md-tertiary-bg"?: ColorType;
    "button-md-tertiary-text"?: ColorType;
    "input-bg"?: ColorType;
    "input-placeholder"?: ColorType;
    "input-text"?: ColorType;
    "input-selection"?: ColorType;
    "menu-bg"?: ColorType;
    "menu-text"?: ColorType;
    "menu-backdrop"?: ColorType;
    "modal-backdrop"?: ColorType;
  };
}

export type ColorType = string; // The color format must be of type #FFFFFF
```

### Important Notes

1. The `apiUrl` is now [`https://v2.api.squidrouter.com`](https://v2.api.squidrouter.com) by default.
2. `initialFromChainId` and `initialToChainId` have been replaced by `initialAssets`.
3. `defaultTokens` has been renamed to `defaultTokensPerChain`.
4. `favTokens` has been removed and is no longer supported.
5. Several properties have been removed in v2.0, including `companyName`, `titles`, `enableExpress`, `mainLogoUrl`, and others. Refer to the migration guide for a full list of removed properties.
6. A new `degenMode` property has been added.

### Deprecated or Removed Types

The following types and properties are no longer used in Squid Widget v2.0:

* `ConfigTheme` (replaced by `Theme`)
* `enableExpress`
* `enableGetGasOnDestination`
* `mainLogoUrl`
* `titles`
* `internalSameChainSwapAllowed`
* `advanced.shareOnTwitter`
* `advanced.disableTradeLimit`
* `favTokens`
* `comingSoonChainIds`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/widget-integration/add-a-widget/widget/customization-guide/configuration-types.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.