Circle's EURC Integration Guide

This guide will help you integrate EURC cross-chain transfers into your application using Squid's widget, API, or SDK in as little as 20 minutes. You'll learn how to enable seamless cross-chain transfers to EURC on Base, Ethereum, and Avalanche. While this guide focuses on EURC, it extends to all tokens listed on Squid.

Supported EURC Contract Addresses

Base: 0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42

Ethereum: 0x1abaea1f7c830bd89acc67ec4af516284b1bc33c

Avalanche: 0xc891eb4cbdeff6e073e859e987815ed1505c2acd

Integration Options

Squid makes it easy to integrate EURC into your app using the Squid widget. Out of the box, you can allow users to bridge any asset from over 80+ supported chains into EURC on the chain of your choice. There are three ways you can integrate Squid:

1. Widget

   1. This is as simple as an iframe or your can natively integrate it into your app using React, NextJS or Vite.

2. API (language-agnostic)

   1. RESTful endpoints for any programming language

   2. Supporting cross-chain swaps into custom application flows.

3. SDK (for JavaScript/TypeScript applications)

   1. Supporting cross-chain swaps into custom application flows.

   2. Full programmatic control for custom integration

Helpful Resources

Here is a short list of resources that will help you on your journey to integrate EURC into your application with Squid.

• In order to utilize Squid, you must first request an integrator ID(API Key) which will be sent to your email.

• Squids full documentation is at https://docs.squidrouter.com/

• Squid also has convenient ready-to-run API and SDK Github repository.

• Explore Squid’s Widget Studio to customize it to your application’s style: https://studio.squidrouter.com/

Widget Installation Options

1. iFrame Integration (Universal Method)

The simplest way to integrate EURC acquisition into any application is using Squid's iFrame implementation. This method works with any framework or platform and requires minimal setup.

<iframe
  title="squid_widget"
  width="430"
  height="684"
  src="<https://studio.squidrouter.com/iframe?config=>{
    'integratorId': '<your-integrator-id>',
    'defaultTokensPerChain': [
      {
        'address': '0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42',
        'chainId': '8453'
      }
      // Add other EURC tokens as needed
    ]
  }"
></iframe>

To customize the iFrame implementation:

1. Visit the Squid Widget Studio

2. Configure your preferences

3. Click "Get iFrame" to receive your custom configuration

4. Copy the generated iFrame code into your application

You can find the full iframe documentation here.

2. React Integration

For React applications, import and implement the Squid Widget:

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

function App() {
  return (
    <div className="App">
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "<https://apiplus.squidrouter.com>",
          // Configure EURC as default token for supported chains
          defaultTokensPerChain: [
            {
              address: "0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42",
              chainId: "8453", // Base
            },
            {
              address: "0x1abaea1f7c830bd89acc67ec4af516284b1bc33c",
              chainId: "1", // Ethereum
            },
            {
              address: "0xc891eb4cbdeff6e073e859e987815ed1505c2acd",
              chainId: "43114", // Avalanche
            }
          ],
          // Set initial assets
          initialAssets: {
            from: {
              address: "0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42",
              chainId: "8453", // Base
            },
            to: {
              address: "0x1abaea1f7c830bd89acc67ec4af516284b1bc33c",
              chainId: "1", // Ethereum
            }
          }
        }}
      />
    </div>
  );
}

You can find the full React documentation here.

3. NextJS Integration

Add the following to your next.config.js:

const nextConfig = {
  transpilePackages: ["@0xsquid/widget", "@0xsquid/react-hooks"]
}

module.exports = nextConfig

Then implement the widget similar to the React example above.

You can find the full NextJS documentation here.

4. Vite Integration

Update your vite.config.ts to include:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { nodePolyfills } from "vite-plugin-node-polyfills"

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills()
  ]
})

You can find the full Vite documentation here.

Customization

Theme Customization

Use the Squid Widget Studio to customize the appearance:

config={{
  theme: {
    borderRadius: {
      "button-lg-primary": "3.75rem",
      container: "1.875rem",
      input: "9999px"
    },
    color: {
      "primary-500": "#YOUR_BRAND_COLOR",
      "secondary-500": "#YOUR_SECONDARY_COLOR"
    }
  },
  themeType: "dark" // or "light"
}}

You can find the full customization documentation here.

API Integration

This documentation details how to request a route, execute a transaction, and check the status of the transaction. You can find the full API integration documentation here.

Route Generation

const getRoute = async (params) => {
  const response = await axios.post(
    "<https://apiplus.squidrouter.com/v2/route>",
    {
      fromAddress: "0x...", // Your wallet address
      fromChain: "8453", // Base
      fromToken: "0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42", // EURC on Base
      fromAmount: "1000000000000000000", // Amount in wei
      toChain: "1", // Ethereum
      toToken: "0x1abaea1f7c830bd89acc67ec4af516284b1bc33c", // EURC on Ethereum
      toAddress: "0x...", // Recipient address
      slippage: 1,
    },
    {
      headers: {
        "x-integrator-id": "<your-integrator-id>",
        "Content-Type": "application/json",
      },
    }
  );
  return { data: response.data, requestId: response.headers["x-request-id"] };
};

Transaction Execution

const executeCrossChainTransfer = async (route) => {
  const tx = await signer.sendTransaction({
    to: route.transactionRequest.target,
    data: route.transactionRequest.data,
    value: route.transactionRequest.value,
    gasPrice: await provider.getGasPrice(),
    gasLimit: route.transactionRequest.gasLimit,
  });
  return await tx.wait();
};

Transaction Status Check

const getStatus = async (params) => {
  const response = await axios.get(
    "<https://apiplus.squidrouter.com/v2/status>",
    {
      params: {
        transactionId: params.transactionId,
        requestId: params.requestId,
        fromChainId: params.fromChainId,
        toChainId: params.toChainId,
      },
      headers: {
        "x-integrator-id": "<your-integrator-id>",
      },
    }
  );
  return response.data;
};

SDK Integration

This documentation details how to request a route, execute a transaction, and check the status of the transaction. You can find the full SDK integration documentation here.

Installing the SDK

npm install --save @0xsquid/[email protected] # or higher

Basic EURC Integration Example

import { Squid } from "@0xsquid/sdk";
import { ethers } from "ethers";

// Initialize Squid SDK
const squid = new Squid({
  baseUrl: "<https://apiplus.squidrouter.com>",
  integratorId: "<your-integrator-id>",
});
await squid.init();

// EURC cross-chain transfer parameters
const params = {
  fromAddress: signer.address,
  fromChain: "8453", // Base
  fromToken: "0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42", // EURC on Base
  fromAmount: ethers.utils.parseUnits("10", 18).toString(),
  toChain: "1", // Ethereum
  toToken: "0x1abaea1f7c830bd89acc67ec4af516284b1bc33c", // EURC on Ethereum
  toAddress: signer.address,
  enableBoost: true,
};

// Get route and execute transfer
const { route, requestId } = await squid.getRoute(params);
await approveSpending(route.transactionRequest.target, params.fromToken, params.fromAmount);
const tx = await squid.executeRoute({ signer, route });

Monitoring Transaction Status

const getStatusParams = {
  transactionId: tx.hash,
  requestId: requestId,
  integratorId: "<your-integrator-id>",
  fromChainId: "8453",
  toChainId: "1",
};

let status = await squid.getStatus(getStatusParams);
console.log(`Route status: ${status.squidTransactionStatus}`);