# 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](https://www.typescriptlang.org/)
- [React](https://reactjs.org/)
- [TailwindCSS](https://tailwindcss.com/) for styling
- [DaisyUI](https://daisyui.com/) for more UI components on top of Tailwind
- [Wagmi-sh](https://github.com/wagmi-sh/wagmi-sh) for Web3 functionalities
- [Zustand](https://github.com/pmndrs/zustand) for global state management
- [React-Query](https://react-query.tanstack.com/) 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](EXTERNAL_PROVIDERS.md)



## Getting Started

### Prerequisites

- Node.js
- Yarn

### Installation

Install Yarn packages at the root folder

```sh
yarn
```

### Development

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

```sh
cd ../nextjs
yarn dev
```

### Building
The build command must be run from the root folder as this is a lerna monorepo.
```sh
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.