diff --git a/.github/workflows/on-push-to-main.yml b/.github/workflows/on-push-to-main.yml index 7a3d52ea..f420af5f 100644 --- a/.github/workflows/on-push-to-main.yml +++ b/.github/workflows/on-push-to-main.yml @@ -88,6 +88,8 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Build + env: + NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }} run: npx turbo build --cache-dir=".cache" - name: Create .npmrc diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml index 7998df07..a9b1d7d4 100644 --- a/.github/workflows/verify.yml +++ b/.github/workflows/verify.yml @@ -21,6 +21,8 @@ jobs: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Build + env: + NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }} run: npx turbo build --cache-dir=".cache" test: diff --git a/examples/next/.gitignore b/examples/next/.gitignore new file mode 100644 index 00000000..a21acbe1 --- /dev/null +++ b/examples/next/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/next/LICENSE.md b/examples/next/LICENSE.md new file mode 100644 index 00000000..8f6ffde6 --- /dev/null +++ b/examples/next/LICENSE.md @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) <2023-2024> Pedrojok01 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/examples/next/README.md b/examples/next/README.md new file mode 100644 index 00000000..f786462f --- /dev/null +++ b/examples/next/README.md @@ -0,0 +1,153 @@ +
+ + +

+ +

Next Web3 Boilerplate

+ +[![Stargazers](https://img.shields.io/github/stars/Pedrojok01/Next-Web3-Boilerplate)](https://github.com/Pedrojok01/Next-Web3-Boilerplate/stargazers) +[![Forks](https://img.shields.io/github/forks/Pedrojok01/Next-Web3-Boilerplate)](https://github.com/Pedrojok01/Next-Web3-Boilerplate/issues) +[![Issues](https://img.shields.io/github/issues/Pedrojok01/Next-Web3-Boilerplate)](https://github.com/Pedrojok01/Next-Web3-Boilerplate/issues) +[![MIT License](https://img.shields.io/github/license/Pedrojok01/Next-Web3-Boilerplate)](https://github.com/Pedrojok01/Next-Web3-Boilerplate/blob/main/License) +[![LinkedIn](https://img.shields.io/badge/LinkedIn-blue?logo=Linkedin&logoColor=white)](https://www.linkedin.com/in/pierre-e/) +![Vercel](https://img.shields.io/github/deployments/Pedrojok01/Next-Web3-Boilerplate/production?label=Vercel&logo=Vercel&logoColor=white) + +

+ +![Preview](./public/img/preview.gif) + +
+ +## Table of Contents + +- [Table of Contents](#table-of-contents) +- [Update:](#update) +- [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) + - [To start the Next-Web3-Boilerplate:](#to-start-the-next-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-️) + +## Update: + +2024-02: + +- Switched to Next.js v14; +- Switched to Viem & Wagmi v2; +- Add support for `Linea`, `lineaTestnet`, `Bsc` & `bscTestnet` networks; +- Bump all dependencies to the latest versions; + +## Description + +Simple and minimalist Web3 boilerplate to boost your Dapp development. Built using the latest tech out there: [Next.js](https://nextjs.org/), [Viem](https://viem.sh/), [Wagmi](https://wagmi.sh/), [RainbowKit](https://www.rainbowkit.com/), [ChakraUI](https://chakra-ui.com/), and [Typescript](https://www.typescriptlang.org/). Eslint, Prettier, and Husky are already configured. The perfect starting point for your next web3 project. + +Try it yourself: [https://next-web3-boilerplate.com/](https://next-web3-boilerplate.com/) + +## Built With + +- [![nextjs]][nextjs-url] +- [![typescript]][typescript-url] +- [![chakraui]][chakraui-url] +- [![viem]][viem-url] +- [![wagmi]][wagmi-url] +- [![Rainbowkit]][rainbowkit-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.3.3) +- [bun](https://bun.sh/) or [pnpm](https://pnpm.io/) or [yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.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/Next-Web3-Boilerplate.git . +``` + +### Install all package dependencies by running: + +```bash +bun install +# or +pnpm install +# or +yarn install +# or +npm install +``` + +### Add your API keys in the .env file: + +Remove the `.example` from the `.env.example` file name at the root of the project and add your API keys inside. The WalletConnect project ID is now required since the v2 update. You can create one easily on the [WalletConnect dashboard](https://cloud.walletconnect.com/). + +```js +NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID = "Project ID needed for WalletConnect v2 here"; +``` + +### To start the Next-Web3-Boilerplate: + +First, run the development server: + +```bash +bun dev +# or +pnpm dev +# or +yarn dev +# or +npm run dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +## Features: + +- [x] Web3 Wallet Status (MetaMask / Rainbow / Coinbase Wallet / WalletConnect) +- [x] Chain selector +- [x] Block Number / Chain ID & Name +- [x] Wallet balance +- [x] Sign Messages & Transfer Native +- [x] Dark mode support +- [x] Hook to query user's Token Balances + +

+ +
+

Enjoy!!!

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

(back to top)

+ + + +[nextjs]: https://img.shields.io/badge/Next.js_v14.2-000000?style=for-the-badge&logo=next.js&logoColor=FFFFFF +[nextjs-url]: https://nextjs.org/ +[typescript]: https://img.shields.io/badge/typescript_v5.4.5-375BD2?style=for-the-badge&logo=typescript&logoColor=61DAFB +[typescript-url]: https://www.typescriptlang.org/ +[chakraui]: https://img.shields.io/badge/ChakraUI-purple?style=for-the-badge&logo=ChakraUI&logoColor=319795 +[chakraui-url]: https://chakra-ui.com/ +[wagmi]: https://img.shields.io/badge/Wagmi-35324a?style=for-the-badge&logo=data:image/png;base64,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 +[wagmi-url]: https://wagmi.sh/ +[Rainbowkit]: https://img.shields.io/badge/Rainbowkit-006600?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNMCAwaDEyMHYxMjBIMHoiLz48cGF0aCBmaWxsPSJ1cmwoI2IpIiBkPSJNMjAgMzhoNmMzMSAwIDU2IDI1IDU2IDU2djZoMTJjMyAwIDYtMyA2LTYgMC00MS0zMy03NC03NC03NC0zIDAtNiAzLTYgNnYxMloiLz48cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNODQgOTRoMTZjMCAzLTMgNi02IDZIODR2LTZaIi8+PHBhdGggZmlsbD0idXJsKCNkKSIgZD0iTTI2IDIwdjE2aC02VjI2YzAtMyAzLTYgNi02WiIvPjxwYXRoIGZpbGw9InVybCgjZSkiIGQ9Ik0yMCAzNmg2YzMyIDAgNTggMjYgNTggNTh2Nkg2NnYtNmMwLTIyLTE4LTQwLTQwLTQwaC02VjM2WiIvPjxwYXRoIGZpbGw9InVybCgjZikiIGQ9Ik02OCA5NGgxNnY2SDY4di02WiIvPjxwYXRoIGZpbGw9InVybCgjZykiIGQ9Ik0yMCA1MlYzNmg2djE2aC02WiIvPjxwYXRoIGZpbGw9InVybCgjaCkiIGQ9Ik0yMCA2MmMwIDMgMyA2IDYgNiAxNCAwIDI2IDEyIDI2IDI2IDAgMyAzIDYgNiA2aDEwdi02YzAtMjMtMTktNDItNDItNDJoLTZ2MTBaIi8+PHBhdGggZmlsbD0idXJsKCNpKSIgZD0iTTUyIDk0aDE2djZINThjLTMgMC02LTMtNi02WiIvPjxwYXRoIGZpbGw9InVybCgjaikiIGQ9Ik0yNiA2OGMtMyAwLTYtMy02LTZWNTJoNnYxNloiLz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9ImIiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwIC03NCA3NCAwIDI2IDk0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iLjgiIHN0b3AtY29sb3I9IiNGRjQwMDAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4NzU0QzkiLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZSIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgLTU4IDU4IDAgMjYgOTQpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIuNyIgc3RvcC1jb2xvcj0iI0ZGRjcwMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGOTkwMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSJoIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMCAtNDIgNDIgMCAyNiA5NCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9Ii42IiBzdG9wLWNvbG9yPSIjMEFGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDFEQTQwIi8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImkiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxNyAwIDAgNDUuMzMzMyA1MSA5NykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEFGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDFEQTQwIi8+PC9yYWRpYWxHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImoiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgwIC0xNyAzMjIuMzcgMCAyMyA2OSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEFGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDFEQTQwIi8+PC9yYWRpYWxHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI2MCIgeDI9IjYwIiB5MT0iMCIgeTI9IjEyMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMxNzQyOTkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDFFNTkiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjgzIiB4Mj0iMTAwIiB5MT0iOTciIHkyPSI5NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRjQwMDAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4NzU0QzkiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgeDE9IjIzIiB4Mj0iMjMiIHkxPSIyMCIgeTI9IjM3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzg3NTRDOSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGNDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJmIiB4MT0iNjgiIHgyPSI4NCIgeTE9Ijk3IiB5Mj0iOTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGNzAwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRkY5OTAxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIyMyIgeDI9IjIzIiB5MT0iNTIiIHkyPSIzNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkY3MDAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjk5MDEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=&logoColor=4FC08D +[rainbowkit-url]: https://github.com/rainbow-me/rainbowkit#readme +[viem]: https://img.shields.io/badge/Viem-ffc517?style=for-the-badge&logo=data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAeAB4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+M39iD9iH4gft8fFuz+Bvwm+JvwI8D/FDXbvTNN8D+GfjZ8Q5vh3L8R9a1RdRaLQPA14dA1iw1bXol07B0i5ubC9vZr7TrTSItSvLr7On2t+33/wQn/a9/wCCZ/w/0Xx/+1p8Rv2XfBY8Xx+ID8PfBmlfFzVde8e/Em48KPoC+JbPwV4ft/BESajPoUfijQp9Tlvb7TbG0j1K0WW8E1zbxS/kJ4H8a+Kvht418IfEXwLrd94Z8beAfFGgeNPB3iPTJPJ1Lw/4p8Laraa54f1vT5SGEV7pWrWNpfWshVgk8EbEEDFf6VX/AAVe8P8Ahf8A4Lwf8G73w6/bq+FujWVz8bPgb4ST9ottB0dDPe6D4j+H9ld+EP2tfhXCC0+oJplpY6Z4k8WaHavANQ8S/wDCC+ArqGJINWhdgD+FX9ir/gmB8WP28fDXjjXvg58df2T/AA5qXwx8B+M/it8R/Bnxc+MV38OvFvgf4V+AbqwtfFPxJ8Qwaj4QudDt/BulHU9PuLzV4NduRZWt5BPqEVmr18F/EbwbD8PvG3iLwZb+MvBXxCh8P3wsk8Z/DnVL/W/BOv8A+jwzteeHdV1PSdDvr6xVpjbmefSrMtcQTCNHiCSyfqP4Dvj+yH/wSb+JfjyNzp3xm/4KgfEOT4E+CplJh1TSP2M/2a/EGi+L/jdrlncwYnt9N+Mn7QLfDv4cFJnWHVtO+Dfj/TgrwpdpJ+QdABX9wH/Bmv8At+2PhX4t/Gz/AIJo/FLUbW78D/tA6Vq/xd+C+k62YrjS3+Jfhfw+lh8VPBcVjc+ZDdf8LA+F+nW3iKW1ljFmsPwu1KNle41krL/D/XX+AvH/AI2+Fvi/QviB8OPFWveCPG/hi7a/8PeKvDOpXWj67o148E1rJcafqNnJFcW0ktrcXFtL5bgS2880EgaKR1YA/QX/AIK2/HP4U/F79sjxh4J/ZvtI9J/ZM/Zb0q0/ZZ/ZY0W2vpNSsk+E3wp1TWYrvxbBqEjF9Sl+K3xH1fx78W7rU5UiubyXxz/pMavEFX8y6KKAP//Z +[viem-url]: https://viem.sh/ +[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/ diff --git a/examples/next/next.config.js b/examples/next/next.config.js new file mode 100644 index 00000000..a2bcac99 --- /dev/null +++ b/examples/next/next.config.js @@ -0,0 +1,11 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + webpack: (config) => { + config.resolve.fallback = { fs: false, net: false, tls: false }; + config.externals.push('pino-pretty', 'lokijs', 'encoding'); + return config; + }, +}; + +module.exports = nextConfig; diff --git a/examples/next/package.json b/examples/next/package.json new file mode 100644 index 00000000..3e230368 --- /dev/null +++ b/examples/next/package.json @@ -0,0 +1,58 @@ +{ + "name": "examples-next", + "version": "1.0.2", + "description": "Nextjs web3 boilerplate built on Viem, Wagmi, rainbowkit and Chakra UI", + "author": "Pedrojok01 ", + "license": "MIT", + "private": true, + "homepage": "https://next-web3-boilerlate.com", + "bugs": "https://github.com/Pedrojok01/Next-Web3-Boilerplate/issues", + "repository": { + "type": "git", + "url": "https://github.com/Pedrojok01/Next-Web3-Boilerplate" + }, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@boostxyz/sdk": "*", + "@chakra-ui/icons": "2.1.1", + "@chakra-ui/next-js": "2.2.0", + "@chakra-ui/react": "2.8.2", + "@emotion/react": "11.11.4", + "@emotion/styled": "11.11.5", + "@rainbow-me/rainbowkit": "2.0.5", + "@tanstack/react-query": "5.32.0", + "@vercel/analytics": "1.2.2", + "framer-motion": "11.1.7", + "next": "14.2.3", + "react": "18.3.0", + "react-dom": "18.3.0", + "react-jazzicon": "1.0.4", + "sharp": "0.33.3", + "viem": "2.9.27", + "wagmi": "2.5.22" + }, + "devDependencies": { + "@types/node": "20.12.7", + "@types/react": "18.3.0", + "@types/react-dom": "18.3.0", + "typescript": "5.4.5" + }, + "keywords": [ + "nextjs", + "wagmi", + "viem", + "web3", + "boilerplate", + "chakra-ui", + "rainbowkit", + "ethereum-dapp", + "ethereum-boilerplate", + "ethereum-dapp", + "web3-boilerplate", + "web3-dapp" + ] +} diff --git a/examples/next/public/android-chrome-192x192.png b/examples/next/public/android-chrome-192x192.png new file mode 100644 index 00000000..2a70ebf0 Binary files /dev/null and b/examples/next/public/android-chrome-192x192.png differ diff --git a/examples/next/public/android-chrome-512x512.png b/examples/next/public/android-chrome-512x512.png new file mode 100644 index 00000000..cb584c69 Binary files /dev/null and b/examples/next/public/android-chrome-512x512.png differ diff --git a/examples/next/public/apple-touch-icon.png b/examples/next/public/apple-touch-icon.png new file mode 100644 index 00000000..ac585a7e Binary files /dev/null and b/examples/next/public/apple-touch-icon.png differ diff --git a/examples/next/public/favicon-16x16.png b/examples/next/public/favicon-16x16.png new file mode 100644 index 00000000..9a2b789c Binary files /dev/null and b/examples/next/public/favicon-16x16.png differ diff --git a/examples/next/public/favicon-32x32.png b/examples/next/public/favicon-32x32.png new file mode 100644 index 00000000..3a745426 Binary files /dev/null and b/examples/next/public/favicon-32x32.png differ diff --git a/examples/next/public/favicon.ico b/examples/next/public/favicon.ico new file mode 100644 index 00000000..00f1772e Binary files /dev/null and b/examples/next/public/favicon.ico differ diff --git a/examples/next/public/img/lineaTesnet_logo.png b/examples/next/public/img/lineaTesnet_logo.png new file mode 100644 index 00000000..d9f78720 Binary files /dev/null and b/examples/next/public/img/lineaTesnet_logo.png differ diff --git a/examples/next/public/img/linea_logo.png b/examples/next/public/img/linea_logo.png new file mode 100644 index 00000000..23a9f9d1 Binary files /dev/null and b/examples/next/public/img/linea_logo.png differ diff --git a/examples/next/public/img/logo_transparent.png b/examples/next/public/img/logo_transparent.png new file mode 100644 index 00000000..0d5495fa Binary files /dev/null and b/examples/next/public/img/logo_transparent.png differ diff --git a/examples/next/public/img/preview.gif b/examples/next/public/img/preview.gif new file mode 100644 index 00000000..d2e71c43 Binary files /dev/null and b/examples/next/public/img/preview.gif differ diff --git a/examples/next/public/img/warning.svg b/examples/next/public/img/warning.svg new file mode 100644 index 00000000..c4bebcc2 --- /dev/null +++ b/examples/next/public/img/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/next/public/img/zksync_logo.svg b/examples/next/public/img/zksync_logo.svg new file mode 100644 index 00000000..81a28fc8 --- /dev/null +++ b/examples/next/public/img/zksync_logo.svg @@ -0,0 +1 @@ + diff --git a/examples/next/public/site.webmanifest b/examples/next/public/site.webmanifest new file mode 100644 index 00000000..45dc8a20 --- /dev/null +++ b/examples/next/public/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/examples/next/src/app/_app.tsx b/examples/next/src/app/_app.tsx new file mode 100644 index 00000000..0d8cd3cd --- /dev/null +++ b/examples/next/src/app/_app.tsx @@ -0,0 +1,16 @@ +'use client'; +import { Analytics } from '@vercel/analytics/react'; +import type { AppProps } from 'next/app'; + +import RootLayout from './layout'; + +function MyApp({ Component, pageProps }: AppProps) { + return ( + + + + + ); +} + +export default MyApp; diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx new file mode 100644 index 00000000..06b0bda4 --- /dev/null +++ b/examples/next/src/app/layout.tsx @@ -0,0 +1,34 @@ +import type { ReactNode } from 'react'; + +import '@/styles/globals.css'; +import type { Metadata } from 'next'; +import { Open_Sans } from 'next/font/google'; + +import '@rainbow-me/rainbowkit/styles.css'; +import { Providers } from './providers'; + +const open_sans = Open_Sans({ subsets: ['latin'] }); + +export const metadata: Metadata = { + title: 'Next-Web3-Boilerplate', + applicationName: 'Next Web3 Boilerplate', + description: 'Next.js Web3 boilerplate built on Wagmi, Viem, and Rainbow', + authors: { + name: 'Pedrojok01', + url: 'https://github.com/Pedrojok01/Next-Web3-Boilerplate', + }, + icons: 'favicon.ico', + manifest: 'site.webmanifest', +}; + +export default function RootLayout({ + children, +}: Readonly<{ children: ReactNode }>) { + return ( + + + {children} + + + ); +} diff --git a/examples/next/src/app/page.tsx b/examples/next/src/app/page.tsx new file mode 100644 index 00000000..0cb88918 --- /dev/null +++ b/examples/next/src/app/page.tsx @@ -0,0 +1,18 @@ +'use client'; +import { Box, Flex } from '@chakra-ui/react'; + +import { Footer, Header, MainPane } from '@/components'; + +export default function Home() { + return ( + +
+ + + + + +