Skip to content

dApp Store reference implementation as a webapp. This is a vanilla implementation

Notifications You must be signed in to change notification settings

merokudao/dApp-store-ref-desktop

Repository files navigation

Meroku Dapp store Reference Implementation

This project was bootstrapped with Next.js and Redux Toolkit TS template.


Authors

Available Scripts

In the project directory, you can run:

npm dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.


Config

App secrets can be adjusted via the .env file Read More about customising .env files on Next.js official docs

Next.js can be configured using next.config.js Read More


Steps to host on vercel

  • Get Wallet Connect API key from here.
  • Get Meroku API key by filling this form.
  • Go to Vercel.
  • Select Github Repository.
  • Proceed Ahead with default config.
  • Let the build run and deployment complete.
  • Go to project Settings > Environment Variables.
  • Set the following environment variables -
NEXT_PUBLIC_WC_PROJECT_ID=<YOUR WALLET CONNECT ID GOES HERE>
NEXT_PUBLIC_API_HOST=https://api.meroku.store/api/v1
API_HOST=https://api.meroku.store/api/v1
NEXTAUTH_URL=<PERMANENT URL OF YOUR VERCEL OR YOUR DOMAIN OF DEPLOYMENT GOES HERE>
NEXT_PUBLIC_HOST_PATH=<PERMANENT URL OF YOUR VERCEL OR YOUR DOMAIN OF DEPLOYMENT GOES HERE>
API_PATH=/
API_VERSION=v1
NEXTAUTH_SECRET=<ANY RANDOM SECRET WORD CAN BE USED HERE>
NEXT_PUBLIC_MEROKU_API_KEY=<YOUR MEROKU API KEY GOES HERE>
  • Go to Deployments.
  • Redploy your last build.

File Structure

  • /src/api/api => Redux Query Setup

  • /src/api/constants => API Constant Values

  • /src/app/constants => Application constants such as Site title, Menu etc

  • /src/components => UI Components

  • /src/features => Application Features

  • /src/features/dapp => Integration with the dApp registry

  • /src/models => Generic Global models

  • /src/pages => Public Pages following the Next.js convention Read More

  • /src/store => Redux Store Setup and Middleware Setup

  • /src/store/hooks => Typed Hooks for usage within the Application

  • /src/theme => Application theme public export, export all theme variable from this file

  • /src/theme/fonts => Application fonts using Next/font

  • /public => Public files and Static Assets

Styling

Tailwind CSS is used to style individual elements

The global config file is tailwind.config.js

Helpful Links

Adding new API endpoints

While adding new API endpoints it is important to call api.injectEndpoints and register the builder function with Redux Toolkit an example of this can be seen in src/features/dapp/dapp_api.ts

To know more about this visit

About

dApp Store reference implementation as a webapp. This is a vanilla implementation

Topics

Resources

Stars

Watchers

Forks