Configuring Content

Squid Widget: Configuring Content Guide

This guide explains how to customize various content elements of the Squid Widget, including the logo, title headings, and animations.

Changing the Logo

You can set a custom logo for your widget using the mainLogoUrl property:

<SquidWidget
  config={{
    mainLogoUrl: "https://your-domain.com/path-to-your-logo.png"
  }}
/>

Notes:

• Recommended logo dimensions are 36px x 36px.

• If this field is empty (""), the logo in the top left corner of the widget will be invisible.

• Ensure the image URL is accessible and loads quickly for the best user experience.

Customizing Title Headings

You can customize the text for various sections of the widget using the titles property:

<SquidWidget
  config={{
    titles: {
      swap: "Convert",
      settings: "Settings",
      wallets: "Wallets",
      tokens: "Tokens",
      chains: "Networks",
      history: "Transaction History",
      transaction: "Transaction Details",
      destination: "Destination Address",
    }
  }}
/>

Available title customizations:

• swap: Main action button (default: "Swap")

• settings: Settings page title

• wallets: Wallets selection page title

• tokens: Token selection page title

• chains: Chain (network) selection page title

• history: Transaction history page title

• transaction: Transaction details page title

• destination: Label for destination address input

Note: If you set any of these strings to an empty value (""), the corresponding title will be invisible.

Managing Animations

The Squid Widget includes custom Lottie animations by default. You can choose to hide these animations:

<SquidWidget
  config={{
    hideAnimations: true
  }}
/>

• Set hideAnimations to true to disable all custom animations.

• Set hideAnimations to false (default) to keep the animations enabled.

Best Practices

1. Consistency: Ensure that your custom content aligns with your brand and the overall user experience of your application.

2. Localization: Consider providing localized versions of titles if your application supports multiple languages.

3. Performance: If using a custom logo, optimize the image for web to ensure fast loading times.

4. Accessibility: When customizing text, maintain clear and descriptive labels to support all users, including those using screen readers.

Full Example

Here's an example that combines all of these content configurations:

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

function App() {
  return (
    <SquidWidget
      config={{
        mainLogoUrl: "https://your-domain.com/your-logo.png",
        titles: {
          swap: "Transfer",
          settings: "Preferences",
          wallets: "Connect Wallet",
          tokens: "Select Token",
          chains: "Choose Network",
          history: "Past Transfers",
          transaction: "Transfer Details",
          destination: "Recipient Address",
        },
        hideAnimations: false,
        // ... other configuration options
      }}
    />
  );
}

export default App;