Squid Widget

Squid Widget is a cross-chain swap widget built with TypeScript & React. It is designed to be embedded into websites, providing an easy and convenient way to perform cross-chain swaps directly from the partner's website.

Tech Stack

• TypeScript
• React
• TailwindCSS for styling
• DaisyUI for more UI components on top of Tailwind
• Wagmi-sh for Web3 functionalities
• Zustand for global state management
• React-Query for managing asynchronous data
• GitHub Build Action to build & deploy to npm

Project Structure

├── src
│   ├── widget
│   │   ├── assets
│   │   ├── components
│   │   ├── connectors
│   │   ├── contracts
│   │   ├── core
│   │   ├── hooks
│   │   ├── services
│   │   ├── store
│   │   ├── views
│   └── index.tsx
├───index.ts
└───compiled-tailwind.css

External providers (Gnosis / Ledger)

For more informations about external providers, click here

Getting Started

Prerequisites

• Node.js
• Yarn

Installation

Install Yarn packages at the root folder

yarn

Development

The development server must be started from the nextjs package, which embeds the widget.

cd ../nextjs
yarn dev

Building

The build command must be run from the root folder as this is a lerna monorepo.

cd ../..
yarn build

Please note that TailwindCSS has to be built manually as it's embedded in the build. Therefore, sometimes you may have to run yarn build.