Boilerplate in typescript with : Next / Next-Auth / Siwe / Web3modal / useDapp / next-i18n / reactMUI

Overview

Boilerplate Next web3 with TS

example: https://next-web3-boilerplate-nine.vercel.app

  • Next
  • Next-auth
  • Siwe (Sign in with eth)
  • web3modal (modal for multi wallet)
  • useDapp (main lib for contract interaction)
  • reactMUI (use for design)
  • next-i18next (internationalization in public/locales and next-i18next.config.js)
  • Vite (for dev and build better than webpack <3)
  • Sass
  • Custom theme in styles/theme
  • Basic reset in styles/globals.scss

use yarn (not tested with npm, must work)

fill .env and change config/blockchain.config.ts to connect to another network

font imported in pages/_document.tsx :

  • Roboto
  • Poppins
  • Orbitron

useWeb3modal() hook return :

account -> metamask address isValidChain -> if chainid is same as your choosen chain in .env and config connectWallet -> function to connect metamask wallet disconnectWallet -> function to disconnect from siwe signInWithEth -> function to connect with siwe switchNetwork -> function add/switch network

if you want to export more it use useEthers()

Launch project

  • yarn i
  • yarn dev

(BTW eslint and linter not done feel free to add the one you want to use with eslint and your own rules)

You might also like...
Palo-mern-boilerplate - A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly. Commands: npm install # install b

Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping
Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping

Solana Boilerplate Lightweight boilerplate for Solana dapps. Allows quick buildi

hopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate

Shopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate, but moved it to Typescript, and more modularized, so you can use any frontend framework you want. I left it comes by default, with React.

A boilerplate for using Next.js with Shopify, TypeScript, and react-query 🔥

next-shopify-ts The objective of this boilerplate is to set up everything the developer will need (in terms of configuration) to start a next + shopif

Boilerplate developed using Next.Js, Typescript, Styled Components, Jest and React Testing Library

How to start the project This project was started with Next.js Install the dependencies To install all dependencies run yarn install or yarn at the ro

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js, React, Material Design and Typescript

dApp Starter Kit is flexible production grade Web3 boilerplate with Next.js 12, React.js, Material-UI, Typescript and web3-react (beta).

Next Generation Boilerplate for React/Typescript, built on top of Vite ⚡️

Eruption 🌋 Next Generation Boilerplate for React/Typescript, built on top of Vite ⚡️ It's fast! Even the tests are fast, thanks to Vite with Vitest ⚡

Next Generation Boilerplate for React/Typescript, built on top of Vite ⚡️

Eruption 🌋 Next Generation Boilerplate for React/Typescript, built on top of Vite ⚡️ It's fast! Even the tests are fast, thanks to Vite with Vitest ⚡

Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript
Boilerplate and Starter for Next JS 12+, Tailwind CSS 3 and TypeScript

🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS.

Comments
  • No RPC Url available for chainId

    No RPC Url available for chainId

    I just went to https://next-web3-boilerplate-nine.vercel.app

    Clicked on the button & got this in console :

    940-f40191caf500eeb2.js:74 Uncaught (in promise) Error: No RPC Url available for chainId: 137
        at Ue.updateRpcUrl (940-f40191caf500eeb2.js:74:164814)
        at Ue.initialize (940-f40191caf500eeb2.js:74:165197)
        at new Ue (940-f40191caf500eeb2.js:74:162128)
        at 0a6e12db-0b2355fff7ee292f.js:1:236341
        at 0a6e12db-0b2355fff7ee292f.js:1:4843
        at Object.next (0a6e12db-0b2355fff7ee292f.js:1:4948)
        at 0a6e12db-0b2355fff7ee292f.js:1:3885
        at new Promise (<anonymous>)
        at Module.l (0a6e12db-0b2355fff7ee292f.js:1:3630)
        at 0a6e12db-0b2355fff7ee292f.js:1:235968
    

    Any ideas ?

    good first issue 
    opened by Shuunen 3
Simple Ether Wallet DApp with React, Typescript, useDApp, Chakra UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Moinul Moin 3 Feb 9, 2022
Web3 frontend template with React & ethers & web3modal & TypeScript.

⚡️ Web3 frontend template with React & Vite & TypeScript.

CoolSnow 3 Aug 19, 2022
Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

John Desrosiers 5 Feb 2, 2022
NestJS boilerplate. Auth, TypeORM, Postgres, Docker. React, Webpack, Monorepo

NestJS boilerplate. Auth, TypeORM, Postgres, Docker. React, Webpack, Monorepo

Ali Hassan 2 Sep 30, 2022
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo » My L

Matheus Alvarenga de Oliveira 48 Jun 29, 2022
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Salah Eddine Lalami 198 Sep 14, 2022
Starter project for firebase web with React, Chakra UI and auth pages added

Firebase React Chakra UI Starter A starter project for Firebase web. Installation Clone the repository git clone [email protected]:stephenbaidu/firebase-

Stephen Baidu 7 Jul 29, 2022
Kontenbase: create backend API, auth, and storage in less than 1 minute without coding

No Code Backend API, Fast and Easy! Kontenbase allows you to easily create backe

Kontenbase 90 Sep 20, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

React Avançado 25 Sep 28, 2022
A simple Ethereum prediction market boilerplate build on top of Moralis Web3 SDK + Ethereum Boilerplate + Chainlink + OpenZeppelin. Happy BUIIDL!

ethereum-prediction-market-boilerplate This Project is a fork of Ethereum Boilerplate and demostrates how you can build your own Ethereum Prediction M

Ethereum Boilerplates 36 Sep 14, 2022