https://github.com/dominant-strategies/quai-next-dapp

A boilerplate dApp built on top of Quai Network using NextJs and Chakra-UI
https://github.com/dominant-strategies/quai-next-dapp

Last synced: 3 months ago
JSON representation

A boilerplate dApp built on top of Quai Network using NextJs and Chakra-UI

• Host: GitHub
• URL: https://github.com/dominant-strategies/quai-next-dapp
• Owner: dominant-strategies
• Created: 2024-02-02T20:24:21.000Z (almost 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-02T14:42:21.000Z (10 months ago)
• Last Synced: 2024-04-02T15:54:38.558Z (10 months ago)
• Language: TypeScript
• Homepage: https://quai-next-dapp.vercel.app
• Size: 862 KB
• Stars: 3
• Watchers: 0
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# quai-next-dapp

`quai-next-dapp` is a boilerplate dApp built on top of Quai Network using the [NextJS framework](https://next.js) in tandem with [shadcn](https://ui.shadcn.com). The live version of this site is hosted at [quai-next-dapp.vercel.app](https://quai-next-dapp.vercel.app/).

## Features

- Using [Pelagus Wallet](https://pelaguswallet.io) in your application

- Handling accounts and data from all shards

- Fetching transaction data, tokens, and NFTs from [Quaiscan](https://quaiscan.io)

- Using the [quais SDK](https://npmjs.com/package/quais) to interact with Quai Network

## Demo

![quai-next-dapp](./public/SiteDemo.gif)

## Getting Started

Clone the repository and install the dependencies:

```bash

git clone https://github.com/dominant-strategies/quai-next-dapp.git

cd quai-next-dapp

npm install

```

Run the development server:

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the page.

## Components

### Pelagus Connection

Pelagus connection is achieved via the [`quais.BrowserProvider()`](https://docs.qu.ai/sdk/content/classes/BrowserProvider#browserprovider) method. The logic for connecting to Pelagus is located in the [`lib/useGetAccounts.ts`](./lib/useGetAccounts.ts) and [`requestAcccounts.ts`](./lib/requestAccounts.ts) files.

- The logic in `useGetAccounts` always runs on page load and attempts to get the user's accounts if connected. It also initiates a listener for the `accountsChanged` event.

- The logic in `requestAccounts` is only used in response to a direct user action. It prompts the user to connect their wallet and returns the accounts if successful.

### Data Fetching

`quai-next-dapp` fetches transaction data, tokens, and NFTs from the [Quaiscan API](https://quaiscan.io). The logic for fetching data is located in the [`lib/api/requests.ts`](./lib/api/requests.ts) and the [`pages/api/`](./pages/api) directory. NextJS API routes are used to fetch data server-side and return it to the client.

- The logic in `requests.ts` is used to fetch and transform data from NextJS API routes.

- The logic in the `pages/api/` directory is used to fetch data from the Quaiscan API and return it to the client.

### Design

`quai-next-dapp` uses [shadcn](https://ui.shadcn.com) for styling and layout.