1inch Community Swap Interface

This project implements a swap interface and SDK based on the 1inch Fusion protocol. The goal is to make the token exchange process more transparent, secure, and user-friendly. The project also allows embedding the swap form directly into other applications, greatly improving the user experience.

You can view the latest version here

Table of Contents

1. Project Structure
   • Core
   • Integration Layer
   • Models
   • SDK
   • UI Components
   • Widgets
   • Applications
2. Development Preparation
   • Requirements
   • API Setup
3. Running Dapp for Development
4. Running Embedded for Development
5. Important Note

Project Structure

The project is built with the Lit library for HTML rendering and follows a modular architecture, allowing for flexible and scalable development. It uses pnpm workspaces for monorepo management (defined in pnpm-workspace.yaml). The main modules are located in the libs directory:

Core

Handles tasks unrelated to business logic. Simplifies development and organizes internal processes.

Integration Layer

Responsible for integrating widgets into different environments. Supports both monolithic applications and embedded widgets.

Models

Contains pure models without business logic. Solves the problem of weak coupling between modules through interfaces.

SDK

The main business logic module. Simplifies interaction with Web3 and encapsulates Fusion Swap logic.

UI Components

Reusable UI components without business logic.

Widgets

Main module implementing complex widgets like swap forms, wallet connection, etc. Displays business logic through UI.

Applications

Located in the apps folder:

• dapp: a monolithic app combining widgets. Renders widgets based on the user's device.
• electron-dapp: an Electron wrapper around the regular dapp.

Development Preparation

Requirements

• Node.js: version 23+
• pnpm: version 10+ (with workspaces support)

API Setup

The project uses the API from 1inch Dev Portal. To start development, get your API token at 1inch Dev Portal, then create a .env file:

cp env.example .env

Add your token to the following variable:

ONE_INCH_DEV_PORTAL_TOKEN=your_token

This is enough for development mode — no proxy is required.

The proxy is only required for production, as the Dev Portal's CORS policy does not allow direct interaction with the API.

A ready-to-use nginx-based proxy template is located in the /proxy directory.

To run the proxy:

docker build -t one-inch-proxy ./proxy
docker run -d -p 8080:80 -e TOKEN="{{your_token}}" one-inch-proxy

After launching the proxy, specify its address in .env:

ONE_INCH_DEV_PORTAL_HOST=http://localhost:8080

If you plan to use WalletConnect for wallet integration, specify your project ID:

WALLET_CONNECT_PROJECT_ID=your_project_id

Running Dapp for Development

1. Clone the repository:

   git clone [email protected]:1inch-community/interface.git

2. Navigate to the project directory:

   cd interface

3. Install dependencies:

   pnpm install

4. Verify module builds:

   After installation, postinstall should build all modules. Ensure that libs/*/dist contains compiled files. If not, run:

   pnpm run build:libs:all

5. Start the dev server:

   pnpm run serve:dapp

6. Open in your browser:

   http://localhost:4200/

7. (Optional) Enable watch mode for libraries:

   pnpm run watch:lib:all

Running Embedded for Development

To run an embedded example, navigate to the corresponding folder inside examples and follow the instructions provided in its README.md.

Each example may have its own setup and dependencies, so be sure to follow the specific documentation.