Configuration Types

For an example of how to implement the following configuration types in your application, check out the Full configuration example.

All configuration types

export type ColorType // The color format must be of type #FFFFFF
export type SlippageOption = 0.5 | 1 | 1.5 | 3;
export type TokenConfig = {
  address: string;
  chainId: number | string;
};

export interface AppConfig {
  companyName?: string;
  slippage?: SlippageOption;
  style?: ConfigTheme;
  enableExpress?: boolean;
  enableGetGasOnDestination?: boolean; // If set to true, will enable getting gas on destination on widget loads.
  infiniteApproval?: boolean;
  loadPreviousStateFromLocalStorage?: boolean;
  apiUrl?: string;
  mainLogoUrl?: string; // Logo displayed in the header, if put to "", will hide the logo
  titles?: Record<Routes, string>; // Header titles
  internalSameChainSwapAllowed?: boolean; // Will display a message indicating that the swap is possible on the website
  hideAnimations?: boolean;
  preferDex?: DexName[] | string[]; // Can select a preferred dex to route transactions, will be sent to the sdk when executing route
  advanced?: {
    shareOnTwitter?: boolean;
    disableTradeLimit?: boolean; // Will probably disappear in the future, when we remove the trade limit by default
  };
  priceImpactWarnings?: {
    warning: number;
    critical: number;
  };
  favTokens?: TokenConfig[];
  comingSoonChainIds?: any[]; // number | string chain ids. If set to [], will show all chains
  initialFromChainId?: number | string; // When widget loads
  initialToChainId?: number | string; // When widget loads
  defaultTokens?: TokenConfig[]; // When chain is changed, this allow to chose the first token that will be selected
  availableChains?: {
    source?: (number | string)[];
    destination?: (number | string)[];
  }; // If set to [] or undefined, will show all chains
  collectFees?: {
    integratorAddress: string; // The EVM address of the integrator that will receive the fee
    fee: 50; // The amount in "basis points" for the fee. 50 = 0.05%. there is currently soft limit of 1% fee allowed for each tx.
  };
}


// More detail about what is inside style
export interface ConfigTheme {
  neutralContent?: ColorType; // Neutral text color
  baseContent?: ColorType; // Main text color
  base100?: ColorType; // Background for chain and token dropdowns and secondary buttons
  base200?: ColorType; // "From" section background and "Settings" section background
  base300?: ColorType; // "To" section background and main widget background on all other views
  error?: ColorType; // Errors (usually red)
  warning?: ColorType; // Warning (usually orange)
  primary?: ColorType; // Background color for primary buttons
  secondary?: ColorType; // Hover background for secondary buttons
  secondaryContent?: ColorType; // Hover content for secondary buttons
  secondaryFocus?: ColorType; // Button background color for chains and tokens dropdowns
  neutral?: ColorType; // Text with less visibility (price balance)
  success?: ColorType; // Usually green
  roundedBtn?: string; // rem or px
  roundedBox?: string; // rem or px
  roundedDropDown?: string; // rem or px
  displayDivider?: boolean; // displays a divider between the "from and "to" section
  advanced?: {
    transparentWidget?: boolean; // When "true", the widget becomes slightly transparent
  };
}