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

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

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://apiplus.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