Squid Dev Documentation
Ask or search…

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