Customization Guide

Squid Widget Customization Guide

The Squid Widget offers extensive customization options to tailor its appearance and behavior to your needs. This guide covers how to configure the widget using both the Squid Widget Studio and manual configuration.

Using the Squid Widget Studio

For interactive customization:

1. Visit the Squid Widget Studio.

2. Adjust settings to your preferences.

3. Click the "Copy Config" button to get the configuration code.

4. Paste the copied configuration into your React component.

Configuration Options

The widget can be configured in several areas:

1. General Settings: Set the widget name and API URL.

2. User Defaults: Configure default settings like slippage.

3. Visual Theme: Customize the widget's appearance.

4. Content: Modify titles and animations.

5. Token Selection: Set default and initial tokens and chains.

Basic Configuration Example

For a basic setup with default values:

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

function App() {
  return <SquidWidget />;
}

Full Configuration Example

For a comprehensive setup with custom options:

import { SquidWidget } from "@0xsquid/widget"

function App() {
  return (
    <SquidWidget
      config={{
        integratorId: "<your-integrator-id>",
        theme: {
          borderRadius: {
            "button-lg-primary": "3.75rem",
            container: "1.875rem",
            input: "9999px"
            // ... other border radius settings
          },
          fontSize: {
            caption: "0.875rem",
            "body-medium": "1.40625rem"
            // ... other font size settings
          },
          fontWeight: {
            "body-medium": "400",
            "heading-large": "400"
            // ... other font weight settings
          },
          fontFamily: {
            "squid-main": "Geist, sans-serif"
          },
          boxShadow: {
            container:
              "0px 2px 4px 0px rgba(0, 0, 0, 0.20), 0px 5px 50px -1px rgba(0, 0, 0, 0.33)"
          },
          color: {
            "grey-100": "#FBFBFD",
            "royal-500": "#9E79D2",
            "status-positive": "#7AE870"
            // ... other color settings
          }
        },
        themeType: "dark",
        apiUrl: "https://apiplus.squidrouter.com",
        priceImpactWarnings: {
          warning: 3,
          critical: 5
        },
        initialAssets: {
          from: {
            address: "0xd4d42f0b6def4ce0383636770ef773390d85c61a", // SUSHI
            chainId: "42161" // Arbitrum
          },
          to: {
            address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", // GLMR
            chainId: "1284" // Moonbeam
          }
        }
        // ... other configuration options
      }}
    />
  )
}

Additional Configuration Options

• disabledChains: Disable specific chains.

• slippage: Set the default slippage tolerance.

• hideAnimations: Toggle widget animations.

• mainLogoUrl: Set a custom logo URL.

• priceImpactWarnings: Customize price impact limits.