Pandasia UI

This is the UI for the Pandasia backend, the backend is in three parts:

1. A Go server that stores validator's P-Chain addresses as leafs in a merkle tree. The full trees are quite large and therefore cannot be stored directly on the Avax Network, they are instead stored in a SQLite database that the Go server accesses.
2. A pandasia.sol contract deployed to the Avalanche Network that contains only the merkle root(s) of the trees in the SQLite DB.
3. A Supabase database for authorization to create airdrops as well as add and withdraw funds from airdrops.

More information and the code for the Go server and pandasia.sol can be found at the pandasia repository.

Quick Summary:
Pandasia is an attempt to give airdrops to validators by connecting their P-Chain address (used to deploy validator nodes) to their C-Chain address. The merkle trees allow us to verify validators on the Avax network, and can deposit airdrop rewards to their respective wallet.

Important Libraries Used

Next JS

Project built using NextJS, we use src/ folder format instead of next 13's app/ router method. Easier to make Supabase work and server side rendering is kinda confusing since we use the window.ethereum object client side because of how connected wallet clients inject window.ethereum onto the window object.

Supabase

Supabase is our backend connection for airdrop info. Supabase is a postgreSQL wrapper, includes some nice auth client automatically.

Wagmi and Rainbowkit

Rainbowkit is the wallet connection black box of the website, it makes it easy to connect your wallet and gives a nice UI, at the expense of dark magic making it happen. Wagmi is the React hook libary that Rainbowkit uses, so it must be included as a dependency. Wagmi uses Tanstack Query under the hood.

Viem

Viem is a way to make direct calls to the blockchain, it uses native bigint from ES2020. It also allows for finer grained control of calls. This is our preferred method for calling contracts whenever possible.

Axios

Axios is a nice way to make HTTP requests.

Tailwind

Only tailwind for styling, no React CSS library solutions.

Lottie

Lottie is an animation library, takes json.

Getting Started

To run the development server:

yarn dev