mirshko / next-web3-boilerplate Goto Github PK

Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.

JavaScript 0.84% TypeScript 97.01% CSS 2.15%

ethersjs nextjs nextjs-boilerplate web3 web3-react typescript react ethereum-dapp typechain ethers

next-web3-boilerplate's Introduction

⚠️ Notice

This template is no longer under active maintenance, it's out-of-date with the state of the ethereum ecosystem. Some reccomendations for replacing this would be to use the Next.js + TypeScript + ConnectKit example from Family, using wagmi directly or web3modal.

This is a default Next.js project bootstrapped with create-next-app, customized as the default boilerplate for new Web3 projects.

Features

Separate packages from ethers.js for improved tree-shaking, often only ethers Contracts
Hooks-first approach to fetching and caching data from Contracts and memoization for performance with SWR
web3-react for ease of connecting to Web3 providers with a solid API
Auto-generates types for the contract ABIs in the /contracts folder via TypeChain

Auto Contract Type Generation

Note: After adding in your new contract ABIs (in JSON format) to the /contracts folder, run yarn compile-contract-types to generate the types.

You can import these types when declaring a new Contract hook. The types generated show the function params and return types of your functions, among other helpful types.

import MY_CONTRACT_ABI from "../contracts/MY_CONTRACT.json";
import type { MY_CONTRACT } from "../contracts/types";
import useContract from "./useContract";

export default function useMyContract() {
  return useContract<MY_CONTRACT>(CONTRACT_ADDRESS, MY_CONTRACT_ABI);
}

Previous Art

NoahZinsmeister/hypertext

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

next-web3-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

unipeer bullish-af userevolution aymericr sbauch mateodaza oktalize a-leut binxnce apolonsoft ivanmolto crisog kryptonquest livethelifetv ac-ch sambacha jordanoverbye vaughan189 therobertc foxundermoon j-palomino mwogates craigjson journeyworker idle-net jacastro dendisuhubdy gaslimitreached adithep solllve samhannan47 bunsdev conanbatt bizmedia ricardoglez luvitale ptrrdrck cowry-capital nath1as chain-cpu yehia67 relaxxpls crosschain-software eduardowaof 12nguyenduc dev-resources gaboesquivel arvesolland kanerep eskimm developer-profile ricp serhhan slavingia srini-nathan yentzu-wang dr-data bugkerb ykatyhoney stvnshpd lwandsyj ygorgasparin dospore johncastorina smart-window vinaysingh8866 sekmet dukeofdolma c4i9 phil-ociraptor degatchi cryptobrainz psytweak bighands22 saremeskandary rajansagarwal prim3us3r rookiegogogo flyingchian masonkuo teeramedtang smisomazibuko chukwukaeze wuttichai1053 noctishsu el-yun zanknaf emblemcompany sunday2146 automatedtradingcompany andy-li dev0x56 iam-dev xmyway unayung nguyenthuongvo ekdldksp123 rafzk jnebab ahsenriaz

next-web3-boilerplate's Issues

library.getSigner(account) is not a function

Inside the useContract hook, I'm getting an issue where library.getSigner is not a function.

I'm wondering if there was an update in the API for web3-react or something

Where do you define tokenAddress?

I am having an issue making this work, where is tokenAddress supposed to be defined?

useEagerConnect does not work on SSR

Hi!

I'm not sure if I'm completely missing the point here, but it seems that useEagerConnect() does not currently work on Next.js or any prerendered site since the window.ethereumproperty cannot be accessed server-side.

I've tried both creating my own project from scratch and also cloned this one to confirm it.

I'm also getting the following console output:

MetaMask: 'ethereum.send(...)' is deprecated and may be removed in the future. Please use 'ethereum.sendAsync(...)' or 'ethereum.request(...)' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193

I'm quite new to SSR so I might be doing some stuff the wrong way.

error thrown points at isLoading on Account.js

Hey my friend! First of all thank you for providing this useful boilerplate!!! :D

I just have an issue, whenever I render the component I get this error in the console:

Which indicates there's a problem with this line of code:

So.. What do you suggest me to do? For now the only way to get rid of the error is to remove the prop isLoading. Is this a bad solution? Would love to hear some feedback.

Thanks again and have an amazing day!!

On yarn dev: Warning: useLayoutEffect does nothing on the server

Thanks for the awesome project! Found this warning when running yarn dev

yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Triggered by this line in Account.tsx

  useLayoutEffect(() => {
    onboarding.current = new MetaMaskOnboarding();
  }, [])

Support Redux (or any state management) Out-of-the-Box?

Hey there,
Thanks for the repo. Was wondering if you plan to support State Management out-of-the-box, it seems important for Metamask to be always connected throughout DApps like the one I'm creating. The could be a yarn command which builds it. Or a cookiecutter template.