Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rushi-12320/web3-boilerplat

Clean Web3 Dapp starter template using the latest stack out there: Typescript ^5, react ^18 (including react-scrits ^5), and @web3-react/core v8. Enjoy!
https://github.com/rushi-12320/web3-boilerplat

blockchain coinbase-wallet dapp polygon signtypeddata walletconnect web-react web3 web3-provider

Last synced: 22 days ago
JSON representation

Clean Web3 Dapp starter template using the latest stack out there: Typescript ^5, react ^18 (including react-scrits ^5), and @web3-react/core v8. Enjoy!

Awesome Lists containing this project

README 

        


 Web3 Boilerplate 



[![Stargazers](https://img.shields.io/github/stars/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/stargazers)

[![Forks](https://img.shields.io/github/forks/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/issues)

[![Issues](https://img.shields.io/github/issues/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/issues)

[![MIT License](https://img.shields.io/github/license/Pedrojok01/Web3-Boilerplate)](https://github.com/Pedrojok01/Web3-Boilerplate/blob/main/License)

[![LinkedIn](https://img.shields.io/badge/-LinkedIn-blue?style=flat&logo=Linkedin&logoColor=white)](https://www.linkedin.com/in/pierre-e/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/3c3b76de-6191-4ab2-b2c6-a5d824f6fe2f/deploy-status)](https://app.netlify.com/sites/web3-boilerplate/deploys)







![Preview](./src/assets/images/preview.gif)






## Update:



2024-01:



- Upgrade all dependencies (still no switch to `ethers v6`, seems more and more unlikely that `@web3-react` will switch to ethers v6 anytime soon);

- Fix Antd breaking changes;

- Replaced `Ethereum goerli` (soon to be deprecated) by `Ethereum Sepolia` & `Arbitrum Goerli` by `Arbitrum Sepolia`;

- Add `VerifySignature` contracts on Optimism Goerli, Arbitrum Sepolia, Fantom Opera, Fantom Testnet



2023-10:



- Upgrade all package dependencies (except ethers);

- Improve `useToken` hook to fetch any ERC20 token balance/allowance/decimals/symbol;

- Fix minor responsive issues;



2023-07:



- Upgrade all package dependencies;

- Add support for Wallet-Connect v2;

- Clean code & folders structure;

- Improve code readability.

- Add dark mode support

- Add support for Optimism, Arbitrum, zkSync & Fantom networks



## Table of Contents



- [Update:](#update)

- [Table of Contents](#table-of-contents)

- [Disclaimer](#disclaimer)

- [Description](#description)

- [Built With](#built-with)

- [Installation](#installation)

  - [Make sure you have the following ready:](#make-sure-you-have-the-following-ready)

  - [Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:](#once-your-config-is-ready-create-a-new-repo-open-your-favorite-code-editor-and-clone-the-repo-with-the-following-cmd)

  - [Install all package dependencies by running:](#install-all-package-dependencies-by-running)

  - [Add your API keys in the .env file:](#add-your-api-keys-in-the-env-file)

  - [start the web3-boilerplate:](#start-the-web3-boilerplate)

- [Features:](#features)

  - [⭐️ ... and don't forget to leave a star if you like it! ⭐️](#️--and-dont-forget-to-leave-a-star-if-you-like-it-️)



## Disclaimer



1. Work in progress...

2. No Typescript expert and no React expert either, so any contribution/improvement pull request is welcomed!

3. For a more "recent and high-level" web3 boilerplate built on [Next.js](https://nextjs.org/), [Wagmi](https://wagmi.sh/), [Viem](https://viem.sh/), and [ChakraUI](https://chakra-ui.com/), check out [Next-Web3-Boilerplate ](https://github.com/Pedrojok01/Next-Web3-Boilerplate)



## Description



Simple and minimalist Web3 boilerplate to boost your Dapp development. Don't waste time setting up CRA, Typescript, react-script v5 polyfill, and connecting metamask and other wallets any longer. Instead, get this web3-boilerplate and start coding right away with the latest stack available out there!



Try it yourself: [https://web3-boilerplate.netlify.app/](https://web3-boilerplate.netlify.app/)



## Built With



- [![React][react.js]][react-url]

- [![typescript]][typescript-url]

- [![AntDesign]][antdesign-url]

- [![web3react]][web3react-url]

- [![prettier]][prettier-url]

- [![ESLint]][eslint-url]



## Installation



### Make sure you have the following ready:



- [node.js](https://nodejs.org/) installed (developed on LTS v18)

- [typescript](https://www.typescriptlang.org/) installed (developed on v5.2.2)

- [yarn](https://yarnpkg.com/) installed

- [MetaMask](https://metamask.io/) (or any web3 compatible wallet) installed in your browser



### Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:



```bash

git clone https://github.com/Pedrojok01/Web3-Boilerplate.git .

```



### Install all package dependencies by running:



```bash

yarn install

```



IMPORTANT: Double-check your package.json to make sure you've installed the exact same version for all @web3-react packages. Since the version 8+ is still in beta, it may not be automatically installed.



### Add your API keys in the .env file:



Create a .env file at the root of your project and copy the content of the .env.example file into it. Then, fill in the following variables:



```js

REACT_APP_INFURA_KEY = "your API key here";

...

REACT_APP_WALLETCONNECT_PROJECT_ID = "Project id needed for WalletConnect v2";

```



### start the web3-boilerplate:



```bash

yarn start

```



## Features:



- [x] Web3 Wallet (Metamask / Wallet connect / Coinbase)

- [x] Chain selector

- [x] Wallet balance

- [x] Sign Messages & Transfer Native

- [x] Dark mode support

- [x] Hook to query user's Token Balances

- [ ] Hook to query user's NFTs









 Enjoy!!!



### ⭐️ ... and don't forget to leave a star if you like it! ⭐️






(back to top)



[react.js]: https://img.shields.io/badge/React_v18.2-20232A?style=for-the-badge&logo=react&logoColor=61DAFB

[react-url]: https://reactjs.org/

[typescript]: https://img.shields.io/badge/typescript_v5.3.3-375BD2?style=for-the-badge&logo=typescript&logoColor=61DAFB

[typescript-url]: https://www.typescriptlang.org/

[web3react]: https://img.shields.io/badge/@web3react_v8.2-006600?style=for-the-badge&logo=web3-react&logoColor=4FC08D

[web3react-url]: https://github.com/Uniswap/web3react#readme

[antdesign]: https://img.shields.io/badge/AntDesign_v5.12.5-FF0000?style=for-the-badge&logo=AntDesign&logoColor=61DAFB

[antdesign-url]: https://ant.design/

[prettier]: https://img.shields.io/badge/Prettier-360D3A?style=for-the-badge&logo=Prettier&logoColor=61DAFB

[prettier-url]: https://prettier.io/

[eslint]: https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=ESLint&logoColor=61DAFB

[eslint-url]: https://eslint.org/



project is developed by:[RushiPatel] (https://www.linkedin.com/in/rushi-patel-193079266/)