# Bridge SDK

This [repository](https://github.com/Entangle-Protocol/uts-bridge-frontend-sdk) provides everything you need to integrate the Web3 Bridge into your frontend application. The bridge supports multiple chains and tokens, offering seamless interoperability for Universal Token Standard (UTS).

{% hint style="info" %}
Refer to this [repository](https://github.com/Entangle-Protocol/bridge-example) for an example bridge project.
{% endhint %}

## Setup

After cloning the [repository](https://github.com/Entangle-Protocol/uts-bridge-frontend-sdk) using SSH or HTTPS and opening it locally, following the below guide to complete setup.

{% stepper %}
{% step %}

### Dependencies

install the necessary dependencies by running:

```
npm i
```

{% endstep %}

{% step %}

### Blockchain Providers

You can configure your blockchain providers like so:

1. Navigate to `/blockchain/EVM/provider.ts`.
2. Set up your wagmi configuration and provide your project ID (Learn more here:[ Wagmi Connect Wallet Guide](https://wagmi.sh/react/guides/connect-wallet)):

```typescript
const projectId = 'your project id';
```

3. Update the **transports** variable to use your custom RPC endpoints for different chains. By default, they are set to public RPCs, which may not be reliable:

```
export const transports = {
  [mainnet.id]: http('https://ethereum-rpc.publicnode.com'),
  [mantle.id]: http('https://mantle-rpc.publicnode.com'),
  [bsc.id]: http('https://bsc-rpc.publicnode.com'),
  ...
};
```

{% endstep %}

{% step %}

### Environment Variables

In `/core/Coin/CoinRepository/CoinRepository.ts`, ensure you provide the required environment variables:

```
NEXT_PUBLIC_COINGECKO_API_KEY=your API KEY
NEXT_PUBLIC_BASE_MESSAGES_URL=your GraphQL endpoint
```

* `NEXT_PUBLIC_COINGECKO_API_KEY`: Used to fetch USD prices for native currencies, essential for calculating bridge fees.
* `NEXT_PUBLIC_BASE_MESSAGES_URL`: GraphQL endpoint for tracking the history of bridge operations.
  {% endstep %}
  {% endstepper %}

## Using the Bridge

1. Navigate to `/constants/tokens.ts`:
   1. Add UTS tokens or connectors you want to bridge.
   2. Follow the `TokenOption` type to ensure compatibility.
2. The bridge SDK supports 10 default chains, compatible with UTS:
   1. **Ethereum**, **Mantle**, **BSC**, **Base**, **Arbitrum**, **Avalanche**, **Optimism**, **Polygon**, **CoreDAO**, and **XLayer**.
   2. These chains are defined in `SelectNetworkModal.tsx` and filtered based on tokens in the `TOKENS` file.

## How to Add a New Chain

To integrate a new chain, follow these steps:

1. Add the network to `Web3Manager` (e.g., `EVMManager` for EVM chains).
2. Add the network configuration to `tokens.ts`.

## File Structure

* `.husky` – Git hooks for the repository.
* `.next` – Next.js build folder.
* `api` – GraphQL API calls.
* `app` – Next.js app router directory for pages.
* `blockchain` – Blockchain logic, including providers, hooks, and ABIs.
* `containers` – Reusable container components.
* `core` – Redux layers (actively uses RTK; transitioning to RTK-query).
* `helpers` – Utility functions and helpers.
* `hooks` – Common application hooks.
* `lib` – Third-party libraries used in the project.
* `providers` – React contexts and providers.
* `public` – Public assets folder.
* `scripts` – Service scripts (e.g., Cosmos blockchain interactions).
* `ui–components` – Reusable components that are used in the whole app (like tabs and tables).
* `utils` – Common utilities.

## Contributing

{% hint style="info" %}
For questions or support, please reach out via the issues section or contact the repository maintainers.
{% endhint %}

Contributions are welcome! If you’d like to contribute, please follow the [repository](https://github.com/Entangle-Protocol/uts-bridge-frontend-sdk) guidelines and submit a pull request.


---

# 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.entangle.fi/universal-token-standard/developer-guides/bridge-sdk.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.