React Installation

Installing the React component

React Installation Guide for Squid Widget

This guide will help you integrate the Squid Widget into your React application. For a complete working example, check out our full React example.

Prerequisites

Ensure you have completed the steps in the Installing the Widget guide before proceeding.

Basic Integration

After installing the npm package, follow these steps to add the widget to your React app:

1. Import the SquidWidget component:

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

2. Add the widget to your component:

function App() {
  return (
    <div className="App">
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "https://apiplus.squidrouter.com",
          defaultTokensPerChain: [
            {
              address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
              chainId: "1",
            },
          ],
          initialAssets: {
            from: {
              address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
              chainId: "1",
            },
            to: {
              address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
              chainId: "42161",
            },
          },
        }}
      />
    </div>
  );
}

Make sure to replace <your-integrator-id> with the Integrator ID you received from Squid.

Customization

To customize the widget's appearance and behavior:

1. Use the Squid Widget Studio to generate a custom configuration.

2. Copy the generated config and paste it into your config prop.

For example:

<SquidWidget
  config={{
    integratorId: "<your-integrator-id>",
    apiUrl: "https://apiplus.squidrouter.com",
    theme: {
      // Your custom theme options here
    },
    themeType: "dark", // or "light"
    // Other configuration options
  }}
/>

Advanced Configuration

For more detailed configuration options, explore the Widget Studio.

Troubleshooting

If you encounter any issues:

1. Ensure you're using the latest version of the widget (^3.0.10).

2. Check that you've updated to Wagmi v2 and ethers v6 if your project uses these dependencies.

3. Review the Migration Guide if you're upgrading from an earlier version.