Customization Guide

To customize the widget's theme interactively, visit the Squid Widget Studio. Copy paste the config code snippet into your code via this button:

There are a number of ways to configure the widget’s behaviour, UX and design:

• : Giving the widget a name and setting the correct API.

• Default User Settings: Configure the default user settings such as slippage.

• Theme Customization: Configure the widget's visual theme.

• Configuring Content: Customize the widget's content, like titles and animations.

• Default Chains and Tokens: Select which tokens appear on load and pin favourites to the top of token lists.

Default configuration example

You can use the widget with default values like this:

import { SquidWidget } from '@0xsquid/widget';
// ...
<SquidWidget />

Full configuration example

<SquidWidget config={
  {
    companyName: "Squid",
    slippage: 1, // default slippage
    style: {
      neutralContent: "#9DA7B1",
      baseContent: "#FFFDFD",
      base100: "#434565",
      base200: "#202230",
      base300: "#161522",
      error: "#ED6A5E",
      warning: "#FFB155",
      success: "#62C555",
      primary: "#AB67CB",
      secondary: "#37394C",
      secondaryContent: "#B2BCD3",
      neutral: "#383A4C",
      roundedBtn: "24px",
      roundedBox: "20px",
      roundedDropDown: "0px",
      displayDivider: false,
      advanced: {
        transparentWidget: false,
      },
    },
    hideAnimations: true, 
    instantExec: true,
    infiniteApproval: true,
    apiUrl: "https://api.squidrouter.com",
    mainLogoUrl: "",
    titles: {
      swap: "Convert",
      settings: "Settings",
      wallets: "Wallets",
      tokens: "Tokens",
      chains: "Chains",
      history: "History",
      transaction: "Transaction",
      destination: "Destination address",
    },
    priceImpactWarnings: {
      warning: 3,
      critical: 5,
    },
    initialFromChainId: 42161, // Arbitrum
    initialToChainId: 1284, // Moonbeam
    favTokens: [
      {
        address: "0x539bdE0d7Dbd336b79148AA742883198BBF60342", // Token address for MAGIC
        chainId: 42161, // Chain ID for Arbitrum
      },
      {
        address: "0x0E358838ce72d5e61E0018a2ffaC4bEC5F4c88d2", // Token address for STELLA
        chainId: 1284, // Chain ID for Moonbeam
      },
    ],
    defaultTokens: [
      {
        address: "0xd4d42F0b6DEF4CE0383636770eF773390d85c61A", // Token address for SUSHI
        chainId: 42161, // Chain ID for Arbitrum
      },
      {
        address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", // Token address for GLMR
        chainId: 1284, // Chain ID for Moonbeam
      },
    ],
  }
}/>

All configuration types can be found at Configuration Types