# 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](https://squidrouter.typeform.com/integrator-id?typeform-source=circle)(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](https://github.com/0xsquid/examples).
* 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.

```html
<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](https://studio.squidrouter.com/)
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*](https://docs.squidrouter.com/widget-integration/add-a-widget/widget/iframe-installation)*.*

#### 2. React Integration

For React applications, import and implement the Squid Widget:

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

function App() {
  return (
    <div className="App">
      <SquidWidget
        config={{
          integratorId: "<your-integrator-id>",
          apiUrl: "<https://v2.api.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](https://docs.squidrouter.com/widget-integration/add-a-widget/widget/react-installation)*.*

#### 3. NextJS Integration

Add the following to your `next.config.js`:

```jsx
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](https://docs.squidrouter.com/widget-integration/add-a-widget/widget/nextjs-installation)*.*

#### 4. Vite Integration

Update your `vite.config.ts` to include:

```tsx
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](https://docs.squidrouter.com/widget-integration/add-a-widget/widget/vite-installation)*.*

### Customization

#### Theme Customization

Use the Squid Widget Studio to customize the appearance:

```tsx
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](https://docs.squidrouter.com/widget-integration/add-a-widget/widget/customization-guide)*.*

### 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](https://docs.squidrouter.com/api-and-sdk-integration/api).

#### Route Generation

```tsx
const getRoute = async (params) => {
  const response = await axios.post(
    "<https://v2.api.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

```tsx
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

```tsx
const getStatus = async (params) => {
  const response = await axios.get(
    "<https://v2.api.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](https://docs.squidrouter.com/api-and-sdk-integration/sdk).

#### Installing the SDK

```bash
npm install --save @0xsquid/sdk@2.8.27 # or higher
```

#### Basic EURC Integration Example

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

// Initialize Squid SDK
const squid = new Squid({
  baseUrl: "<https://v2.api.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

```tsx
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}`);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.squidrouter.com/adding-tokens/circles-eurc-integration-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.