├── .env.example ├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── components └── layout │ ├── Card.tsx │ ├── CustomButton.tsx │ ├── HeadingComponent.tsx │ ├── Navbar.tsx │ ├── SEO.tsx │ └── index.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── api │ └── siwe │ │ ├── logout.ts │ │ ├── me.ts │ │ ├── nonce.ts │ │ └── verify.ts ├── examples │ ├── ens.tsx │ ├── index.tsx │ ├── mint-nft.tsx │ ├── send-erc20.tsx │ ├── send-ether.tsx │ ├── sign.tsx │ └── siwe.tsx └── index.tsx ├── postcss.config.js ├── providers └── Web3.tsx ├── public ├── boilr3.svg ├── favicon │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ └── site.webmanifest ├── icons │ ├── ens.png │ ├── erc20.png │ ├── ether.png │ ├── nft.png │ ├── sign.png │ └── siwe.png └── og.png ├── styles └── globals.css ├── tailwind.config.js ├── tsconfig.json ├── types └── iron-session │ └── index.d.ts └── utils └── config.ts /.env.example: -------------------------------------------------------------------------------- 1 | # Note - WalletConnect v2 2 | # Every dApp that relies on WalletConnect now needs to obtain a projectId from WalletConnect Cloud. 3 | # This is absolutely free and only takes a few minutes. 4 | # https://cloud.walletconnect.com/ 5 | NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=PUT_YOUR_PROJECT_ID_HERE -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | 37 | # env 38 | .env 39 | .env.local 40 | 41 | # lock files 42 | package-lock.json 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Vedant Chainani 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Welcome to the [boilr3](https://github.com/Envoy-VC/boilr3), a comprehensive starting point for building decentralized applications using [Next.js](https://nextjs.org/), [RainbowKit](https://www.rainbowkit.com/) wallet authentication, [Tailwind CSS](https://tailwindcss.com/) styling, and [WAGMI](https://wagmi.sh/) React Hooks for Ethereum. 2 | 3 | --- 4 | 5 | ## Getting Started 6 | 7 | To use this template, follow these steps: 8 | 9 | 1. Clone the repository: 10 | ```bash 11 | git clone https://github.com/Envoy-VC/boilr3.git 12 | ``` 13 | 2. Change to the project directory: 14 | ```bash 15 | cd boilr3 16 | ``` 17 | 3. Install the dependencies: 18 | 19 | ```bash 20 | npm install 21 | ``` 22 | 23 | 4. Start the development server: 24 | ```bash 25 | npm run dev 26 | # or 27 | yarn dev 28 | # or 29 | pnpm dev 30 | ``` 31 | 32 | Now you can open your browser and navigate to [http://localhost:3000](http://localhost:3000) to see the boilerplate in action. 33 | 34 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 35 | 36 | --- 37 | 38 | ## Features 39 | 40 | - **Next.js Integration** - This boilerplate is built on top of Next.js, a popular React-based framework for building server-side rendered applications. With Next.js, you can easily create dynamic, SEO-friendly pages and leverage powerful features like automatic code splitting and serverless functions to optimize your app's performance. 41 | 42 | - **Secure Wallet Authentication** - Authenticate users securely with RainbowKit, a powerful and easy-to-use wallet authentication library for Ethereum-based dApps. With RainbowKit, you can easily integrate wallet authentication into your app, without having to worry about the complexities of managing private keys or user accounts. RainbowKit supports a wide range of wallets, including MetaMask, WalletConnect, and more. 43 | 44 | - **Tailwind CSS Styling** - Effortlessly style your decentralized application with Tailwind CSS, a utility-first CSS framework. Tailwind CSS makes it easy to create beautiful, responsive UIs without writing custom CSS, allowing you to focus on building your app's functionality. 45 | 46 | - **WAGMI React Hooks for Ethereum** - WAGMI is a set of React Hooks designed to simplify Ethereum development. With WAGMI, you can easily interact with Ethereum smart contracts, manage user accounts, and handle transactions, all within your React components. 47 | 48 | --- 49 | 50 | ## Contributing 51 | 52 | We welcome contributions to improve and expand this boilerplate. To contribute, please submit a pull request with your proposed changes, and we'll review it as soon as possible. 53 | 54 | --- 55 | 56 | ## License 57 | 58 | This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more information. 59 | 60 | --- 61 | -------------------------------------------------------------------------------- /components/layout/Card.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import Link from 'next/link'; 3 | 4 | interface Props { 5 | icon: string; 6 | title: string; 7 | description: string; 8 | href: string; 9 | } 10 | 11 | const Card = (props: Props) => { 12 | return ( 13 |
14 | {`${props.title} 20 | 21 |

22 | {props.title} 23 |

24 | 25 |

{props.description}

26 |
27 | ); 28 | }; 29 | 30 | export default Card; 31 | -------------------------------------------------------------------------------- /components/layout/CustomButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Inter } from 'next/font/google'; 3 | 4 | const inter = Inter({ subsets: ['latin'] }); 5 | 6 | type btnType = 'blue' | 'red' | 'grey'; 7 | 8 | interface Props { 9 | text: string; 10 | type: btnType; 11 | className?: string; 12 | submit?: boolean; 13 | disabled?: boolean; 14 | handleClick: () => any; 15 | } 16 | 17 | const CustomButton = (props: Props) => { 18 | return ( 19 | 35 | ); 36 | }; 37 | 38 | export default CustomButton; 39 | -------------------------------------------------------------------------------- /components/layout/HeadingComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Inter } from 'next/font/google'; 3 | const inter = Inter({ subsets: ['latin'] }); 4 | 5 | interface Props { 6 | title: string; 7 | description: string; 8 | } 9 | 10 | const HeadingComponent = (props: Props) => { 11 | return ( 12 |
13 |

14 | {props.title} 15 |

16 |
17 | {props.description} 18 |
19 |
20 | ); 21 | }; 22 | 23 | export default HeadingComponent; 24 | -------------------------------------------------------------------------------- /components/layout/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import { ConnectButton } from '@rainbow-me/rainbowkit'; 3 | import Link from 'next/link'; 4 | 5 | const Navbar = () => { 6 | return ( 7 | 35 | ); 36 | }; 37 | 38 | export default Navbar; 39 | -------------------------------------------------------------------------------- /components/layout/SEO.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | SITE_DESCRIPTION, 4 | SITE_NAME, 5 | SITE_URL, 6 | SOCIAL_TWITTER, 7 | } from '@/utils/config'; 8 | import { DefaultSeo } from 'next-seo'; 9 | 10 | const SEO = () => { 11 | const origin = 12 | typeof window !== 'undefined' && window.location.origin 13 | ? window.location.origin 14 | : SITE_URL; 15 | 16 | return ( 17 | 41 | ); 42 | }; 43 | 44 | export default SEO; 45 | -------------------------------------------------------------------------------- /components/layout/index.ts: -------------------------------------------------------------------------------- 1 | import SEO from './SEO'; 2 | import Navbar from './Navbar'; 3 | import HeadingComponent from './HeadingComponent'; 4 | import CustomButton from './CustomButton'; 5 | 6 | export { SEO, Navbar, HeadingComponent, CustomButton }; 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "boilr3", 3 | "version": "0.1.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@rainbow-me/rainbowkit": "^1.3.2", 13 | "@types/node": "20.10.6", 14 | "@types/react": "18.2.46", 15 | "@types/react-dom": "18.2.18", 16 | "autoprefixer": "10.4.16", 17 | "eslint": "8.56.0", 18 | "eslint-config-next": "14.0.4", 19 | "ethers": "^6.9.1", 20 | "iron-session": "^6.3.1", 21 | "next": "14.0.4", 22 | "next-seo": "^6.4.0", 23 | "postcss": "8.4.32", 24 | "react": "18.2.0", 25 | "react-dom": "18.2.0", 26 | "react-hot-toast": "^2.4.1", 27 | "siwe": "^2.1.4", 28 | "tailwindcss": "3.4.0", 29 | "typescript": "5.3.3", 30 | "use-debounce": "^10.0.0", 31 | "wagmi": "^1.4.12" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import type { AppProps } from 'next/app'; 2 | import Web3Provider from '@/providers/Web3'; 3 | import { SEO } from '@/components/layout'; 4 | 5 | import '@/styles/globals.css'; 6 | 7 | export default function App({ Component, pageProps }: AppProps) { 8 | return ( 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document'; 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | {/* Character Set */} 8 | 9 | 10 | {/* Favicon */} 11 | 16 | 22 | 28 | 29 | 30 | {/* Robots Search Indexing */} 31 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /pages/api/siwe/logout.ts: -------------------------------------------------------------------------------- 1 | import { withIronSessionApiRoute } from 'iron-session/next'; 2 | import { NextApiRequest, NextApiResponse } from 'next'; 3 | import { ironOptions } from '@/utils/config'; 4 | 5 | const handler = async (req: NextApiRequest, res: NextApiResponse) => { 6 | const { method } = req; 7 | switch (method) { 8 | case 'GET': 9 | req.session.destroy(); 10 | res.send({ ok: true }); 11 | break; 12 | default: 13 | res.setHeader('Allow', ['GET']); 14 | res.status(405).end(`Method ${method} Not Allowed`); 15 | } 16 | }; 17 | 18 | export default withIronSessionApiRoute(handler, ironOptions); 19 | -------------------------------------------------------------------------------- /pages/api/siwe/me.ts: -------------------------------------------------------------------------------- 1 | import { withIronSessionApiRoute } from 'iron-session/next'; 2 | import { NextApiRequest, NextApiResponse } from 'next'; 3 | import { ironOptions } from '@/utils/config'; 4 | 5 | const handler = async (req: NextApiRequest, res: NextApiResponse) => { 6 | const { method } = req; 7 | switch (method) { 8 | case 'GET': 9 | res.send({ address: req.session.siwe?.address }); 10 | break; 11 | default: 12 | res.setHeader('Allow', ['GET']); 13 | res.status(405).end(`Method ${method} Not Allowed`); 14 | } 15 | }; 16 | 17 | export default withIronSessionApiRoute(handler, ironOptions); 18 | -------------------------------------------------------------------------------- /pages/api/siwe/nonce.ts: -------------------------------------------------------------------------------- 1 | import { withIronSessionApiRoute } from 'iron-session/next'; 2 | import { NextApiRequest, NextApiResponse } from 'next'; 3 | import { generateNonce } from 'siwe'; 4 | import { ironOptions } from '@/utils/config'; 5 | 6 | const handler = async (req: NextApiRequest, res: NextApiResponse) => { 7 | const { method } = req; 8 | switch (method) { 9 | case 'GET': 10 | req.session.nonce = generateNonce(); 11 | await req.session.save(); 12 | res.setHeader('Content-Type', 'text/plain'); 13 | res.send(req.session.nonce); 14 | break; 15 | default: 16 | res.setHeader('Allow', ['GET']); 17 | res.status(405).end(`Method ${method} Not Allowed`); 18 | } 19 | }; 20 | 21 | export default withIronSessionApiRoute(handler, ironOptions); 22 | -------------------------------------------------------------------------------- /pages/api/siwe/verify.ts: -------------------------------------------------------------------------------- 1 | import { withIronSessionApiRoute } from 'iron-session/next'; 2 | import { NextApiRequest, NextApiResponse } from 'next'; 3 | import { SiweMessage } from 'siwe'; 4 | import { ironOptions } from '@/utils/config'; 5 | 6 | const handler = async (req: NextApiRequest, res: NextApiResponse) => { 7 | const { method } = req; 8 | switch (method) { 9 | case 'POST': 10 | try { 11 | const { message, signature } = req.body; 12 | const siweMessage = new SiweMessage(message); 13 | const fields = await siweMessage.validate(signature); 14 | 15 | if (fields.nonce !== req.session.nonce) 16 | return res.status(422).json({ message: 'Invalid nonce.' }); 17 | 18 | req.session.siwe = fields; 19 | await req.session.save(); 20 | res.json({ ok: true }); 21 | } catch (_error) { 22 | res.json({ ok: false }); 23 | } 24 | break; 25 | default: 26 | res.setHeader('Allow', ['POST']); 27 | res.status(405).end(`Method ${method} Not Allowed`); 28 | } 29 | }; 30 | 31 | export default withIronSessionApiRoute(handler, ironOptions); 32 | -------------------------------------------------------------------------------- /pages/examples/ens.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { NextSeo } from 'next-seo'; 3 | import { fetchEnsAddress, fetchEnsName } from '@wagmi/core'; 4 | import { Toaster, toast } from 'react-hot-toast'; 5 | import { Navbar, HeadingComponent, CustomButton } from '@/components/layout'; 6 | import { Inter } from 'next/font/google'; 7 | 8 | const inter = Inter({ subsets: ['latin'] }); 9 | 10 | const ENS = () => { 11 | const [status, setStatus] = useState<'idle' | 'fetching'>('idle'); 12 | const [input, setInput] = useState(''); 13 | const [resolved, setResolved] = useState(''); 14 | 15 | async function submit() { 16 | try { 17 | setStatus('fetching'); 18 | if (input.endsWith('.eth')) { 19 | let resolvedENS = await fetchEnsAddress({ 20 | name: input, 21 | }); 22 | setResolved(String(resolvedENS)); 23 | } else { 24 | let resolvedAddress = await fetchEnsName({ 25 | address: input as `0x{string}`, 26 | }); 27 | setResolved(String(resolvedAddress)); 28 | } 29 | } catch (error) { 30 | console.log(error); 31 | } finally { 32 | setStatus('idle'); 33 | } 34 | } 35 | 36 | return ( 37 |
38 | 39 | 40 | 41 |
42 | 46 |
47 | setInput(e.target.value)} 52 | className={`w-full max-w-sm bg-[#202020] mt-12 rounded-xl border-2 border-gray-600 p-2 ps-4 text-white outline-none ${inter.className}`} 53 | /> 54 | 60 | {resolved && ( 61 |
64 | Resolved ENS/Address: {resolved} 65 |
66 | )} 67 |
68 |
69 |
70 | ); 71 | }; 72 | 73 | export default ENS; 74 | -------------------------------------------------------------------------------- /pages/examples/index.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unescaped-entities */ 2 | import React from 'react'; 3 | import { NextSeo } from 'next-seo'; 4 | import { Navbar } from '@/components/layout'; 5 | import { Inter } from 'next/font/google'; 6 | const inter = Inter({ subsets: ['latin'] }); 7 | 8 | import Card from '@/components/layout/Card'; 9 | 10 | const examples = [ 11 | { 12 | title: 'Sign and Verify Message', 13 | description: 14 | 'Sign in with your Ethereum account to securely verify your identity and access exclusive blockchain-based features.', 15 | href: '/examples/sign', 16 | icon: '/icons/sign.png', 17 | }, 18 | { 19 | title: 'Sign-in with Ethereum', 20 | description: 21 | 'Experience the power of secure communication with Sign-In with Ethereum (SIWE), an EIP-4361 authentication standard that creates user sessions based on wallet connections and more!', 22 | href: '/examples/siwe', 23 | icon: '/icons/siwe.png', 24 | }, 25 | { 26 | title: 'Fetch ENS Names', 27 | description: 28 | 'Fetch Ethereum Name Service names to Ethereum addresses using a decentralized domain name system that maps human-readable names to addresses.', 29 | href: '/examples/ens', 30 | icon: '/icons/ens.png', 31 | }, 32 | { 33 | title: 'Send Ether', 34 | description: 35 | 'Send ether to another Ethereum address with a basic transaction.', 36 | href: '/examples/send-ether', 37 | icon: '/icons/ether.png', 38 | }, 39 | { 40 | title: 'Send ERC20', 41 | description: 42 | ' ERC20 is a standard for fungible tokens on the Ethereum network. The example includes a tutorial on how to interact with a deployed ERC20 token contract.', 43 | href: '/examples/send-erc20', 44 | icon: '/icons/erc20.png', 45 | }, 46 | { 47 | title: 'Mint NFT', 48 | description: 49 | 'NFTs are unique digital assets that can represent things like artwork, collectibles, and other unique items.', 50 | href: '/examples/mint-nft', 51 | icon: '/icons/nft.png', 52 | }, 53 | ]; 54 | 55 | const Examples = () => { 56 | return ( 57 |
58 | 59 | 60 |
61 |

62 | Examples 63 |

64 |
65 | Get started by exploring examples to quickstart your dapp development. 66 | All the Examples can be found under the{' '} 67 | 68 | pages/examples 69 | {' '} 70 | directory under the main repo. And don't forget, contributions are 71 | always welcome! Make a pull request to share your own awesome 72 | creations with the community. 73 |
74 |
75 | {examples.map((example, index) => ( 76 | 77 | ))} 78 |
79 |
80 |
81 | ); 82 | }; 83 | 84 | export default Examples; 85 | -------------------------------------------------------------------------------- /pages/examples/mint-nft.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useAccount, 3 | useContractWrite, 4 | usePrepareContractWrite, 5 | useWaitForTransaction, 6 | useNetwork, 7 | } from 'wagmi'; 8 | import { polygonMumbai } from 'wagmi/chains'; 9 | import { parseEther } from 'viem'; 10 | import { NFT_CONTRACT_ADDRESS } from '@/utils/config'; 11 | 12 | import { NextSeo } from 'next-seo'; 13 | import { Toaster, toast } from 'react-hot-toast'; 14 | 15 | import { Inter } from 'next/font/google'; 16 | import { Navbar, HeadingComponent } from '@/components/layout'; 17 | 18 | const inter = Inter({ subsets: ['latin'] }); 19 | 20 | function MintNFT() { 21 | const { chain } = useNetwork(); 22 | const { address } = useAccount(); 23 | 24 | const { config } = usePrepareContractWrite({ 25 | // BOILR3 NFT CONTRACT EXAMPLE 26 | // https://testnets.opensea.io/collection/boilr3 27 | address: NFT_CONTRACT_ADDRESS, 28 | chainId: polygonMumbai.id, 29 | abi: [ 30 | { 31 | inputs: [{ internalType: 'address', name: 'to', type: 'address' }], 32 | name: 'safeMint', 33 | stateMutability: 'nonpayable', 34 | type: 'function', 35 | outputs: [], 36 | }, 37 | ], 38 | functionName: 'safeMint', 39 | args: [address ? address : '0x0'], 40 | }); 41 | 42 | const contractWrite = useContractWrite({ 43 | ...config, 44 | onError() { 45 | toast.error('User denied transaction'); 46 | }, 47 | }); 48 | 49 | const waitForTransaction = useWaitForTransaction({ 50 | hash: contractWrite.data?.hash, 51 | }); 52 | 53 | return ( 54 |
55 |
{ 58 | e.preventDefault(); 59 | contractWrite.writeAsync?.(); 60 | }} 61 | > 62 | 73 | 74 | {waitForTransaction.isSuccess && ( 75 |
78 | Successfully Minted NFT 79 |
80 | View Transaction on{' '} 81 | 87 | Etherscan 88 | 89 |
90 |
91 | )} 92 | {waitForTransaction.isError && waitForTransaction.isIdle && ( 93 |
96 | Error Minting NFT 97 |
{waitForTransaction.error?.message}
98 |
99 | )} 100 |
101 |
102 | ); 103 | } 104 | 105 | export default function MintNFTExample() { 106 | const { isConnected } = useAccount(); 107 | return ( 108 |
109 | 110 | 111 | 112 |
113 | 117 | {isConnected ? ( 118 | 119 | ) : ( 120 |
123 | Connect Wallet to Mint NFT 124 |
125 | )} 126 |
127 |
128 | ); 129 | } 130 | -------------------------------------------------------------------------------- /pages/examples/send-erc20.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { NextSeo } from 'next-seo'; 3 | import { Toaster, toast } from 'react-hot-toast'; 4 | import { useDebounce } from 'use-debounce'; 5 | import { 6 | useNetwork, 7 | useAccount, 8 | useBalance, 9 | useContractWrite, 10 | usePrepareContractWrite, 11 | useWaitForTransaction, 12 | erc20ABI, 13 | } from 'wagmi'; 14 | 15 | import { Navbar, HeadingComponent } from '@/components/layout'; 16 | import { Inter } from 'next/font/google'; 17 | import { parseEther } from 'viem'; 18 | 19 | const inter = Inter({ subsets: ['latin'] }); 20 | 21 | function SendTransaction() { 22 | const [tokenContract, setTokenContract] = useState(''); 23 | const debouncedTokenContract = useDebounce(tokenContract, 500); 24 | 25 | const [to, setTo] = useState(''); 26 | const debouncedTo = useDebounce(to, 500); 27 | 28 | const [amount, setAmount] = useState(''); 29 | const debouncedAmount = useDebounce(amount, 500); 30 | 31 | const { chain } = useNetwork(); 32 | const { address } = useAccount(); 33 | const balance = useBalance({ 34 | address, 35 | token: debouncedTokenContract[0] as `0x{string}`, 36 | }); 37 | 38 | const prepareContractWrite = usePrepareContractWrite({ 39 | address: debouncedTokenContract[0] as `0x{string}`, 40 | abi: erc20ABI, 41 | chainId: chain?.id, 42 | functionName: 'transfer', 43 | args: [ 44 | (debouncedTo[0] as `0x{string}`) ?? '0x0', 45 | debouncedAmount[0] 46 | ? parseEther(debouncedAmount[0] as `${number}`) 47 | : parseEther('0'), 48 | ], 49 | }); 50 | const contractWrite = useContractWrite({ 51 | ...prepareContractWrite.config, 52 | onError() { 53 | toast.error('User denied transaction'); 54 | }, 55 | }); 56 | const waitForTransaction = useWaitForTransaction({ 57 | hash: contractWrite.data?.hash, 58 | onSettled() { 59 | balance.refetch(); 60 | }, 61 | }); 62 | 63 | return ( 64 |
65 |
{ 68 | e.preventDefault(); 69 | contractWrite.writeAsync?.(); 70 | }} 71 | > 72 | setTokenContract(e.target.value)} 78 | className={`w-full max-w-lg bg-[#202020] mt-12 rounded-xl border-2 border-gray-600 p-2 ps-4 text-white outline-none ${inter.className}`} 79 | /> 80 | setTo(e.target.value)} 86 | className={`w-full max-w-lg bg-[#202020] mt-6 rounded-xl border-2 border-gray-600 p-2 ps-4 text-white outline-none ${inter.className}`} 87 | /> 88 | setAmount(e.target.value)} 94 | className={`w-full max-w-[200px] bg-[#202020] mt-6 rounded-xl border-2 border-gray-600 p-2 ps-4 text-white outline-none ${inter.className}`} 95 | /> 96 | 112 | 113 |
116 | Your balance: {balance.data?.formatted} {balance.data?.symbol} 117 |
118 | {waitForTransaction.isSuccess && ( 119 |
122 | Successfully sent {amount} {balance.data?.symbol} to {to} 123 |
124 | View Transaction on{' '} 125 | 131 | Etherscan 132 | 133 |
134 |
135 | )} 136 | {waitForTransaction.isError && waitForTransaction.isIdle && ( 137 |
140 | Error sending {amount} {balance.data?.symbol} to {to} 141 |
{waitForTransaction.error?.message}
142 |
143 | )} 144 |
145 |
146 | ); 147 | } 148 | 149 | const ERC20Example = () => { 150 | const { isConnected } = useAccount(); 151 | return ( 152 |
153 | 154 | 155 | 156 |
157 | 161 | {isConnected ? ( 162 | 163 | ) : ( 164 |
167 | Connect Wallet to Transfer Tokens 168 |
169 | )} 170 |
171 |
172 | ); 173 | }; 174 | 175 | export default ERC20Example; 176 | -------------------------------------------------------------------------------- /pages/examples/send-ether.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { NextSeo } from 'next-seo'; 3 | import { Toaster, toast } from 'react-hot-toast'; 4 | import { useDebounce } from 'use-debounce'; 5 | import { 6 | useAccount, 7 | useBalance, 8 | useNetwork, 9 | usePrepareSendTransaction, 10 | useSendTransaction, 11 | useWaitForTransaction, 12 | } from 'wagmi'; 13 | import { parseEther } from 'viem'; 14 | 15 | import { Navbar, HeadingComponent } from '@/components/layout'; 16 | import { Inter } from 'next/font/google'; 17 | 18 | const inter = Inter({ subsets: ['latin'] }); 19 | 20 | function SendTransaction() { 21 | const [to, setTo] = useState(''); 22 | const [debouncedTo] = useDebounce(to, 500); 23 | 24 | const [amount, setAmount] = useState(''); 25 | const [debouncedAmount] = useDebounce(amount, 500); 26 | 27 | const { chain } = useNetwork(); 28 | const { address } = useAccount(); 29 | 30 | const balance = useBalance({ 31 | address, 32 | }); 33 | 34 | const sendTransaction = useSendTransaction({ 35 | account: address, 36 | to: debouncedTo, 37 | value: debouncedAmount 38 | ? parseEther(debouncedAmount as `${number}`) 39 | : undefined, 40 | onError() { 41 | toast.error('User Rejected Transaction'); 42 | }, 43 | }); 44 | 45 | const { isLoading, isSuccess, refetch } = useWaitForTransaction({ 46 | hash: sendTransaction.data?.hash, 47 | }); 48 | 49 | return ( 50 |
51 |
{ 54 | e.preventDefault(); 55 | sendTransaction.sendTransactionAsync(); 56 | }} 57 | > 58 | setTo(e.target.value)} 64 | className={`w-full max-w-lg bg-[#202020] mt-12 rounded-xl border-2 border-gray-600 p-2 ps-4 text-white outline-none ${inter.className}`} 65 | /> 66 | setAmount(e.target.value)} 72 | className={`w-full max-w-[200px] bg-[#202020] mt-6 rounded-xl border-2 border-gray-600 p-2 ps-4 text-white outline-none ${inter.className}`} 73 | /> 74 |
75 | Your balance: {balance.data?.formatted} {balance.data?.symbol} 76 |
77 | 93 |
94 | 95 | {isSuccess && ( 96 |
99 | Successfully sent {amount} ether to {to} 100 |
101 | View Transaction on{' '} 102 | 108 | Etherscan 109 | 110 |
111 |
112 | )} 113 |
114 | ); 115 | } 116 | 117 | const SendEtherExample = () => { 118 | return ( 119 |
120 | 121 | 122 | 123 |
124 | 128 | 129 |
130 |
131 | ); 132 | }; 133 | 134 | export default SendEtherExample; 135 | -------------------------------------------------------------------------------- /pages/examples/sign.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from 'react'; 2 | import { NextSeo } from 'next-seo'; 3 | import { useAccount, useSignMessage } from 'wagmi'; 4 | import { recoverMessageAddress } from 'viem'; 5 | import toast, { Toaster } from 'react-hot-toast'; 6 | 7 | import { Navbar, HeadingComponent, CustomButton } from '@/components/layout'; 8 | import { Inter } from 'next/font/google'; 9 | 10 | const inter = Inter({ subsets: ['latin'] }); 11 | 12 | const Sign = () => { 13 | const { address } = useAccount(); 14 | const recoveredAddress = React.useRef(''); 15 | 16 | const [message, setMessage] = useState( 17 | `Sign in with your Ethereum account and let's HODL our way to web3 glory! 🎉 Remember, WAGMI! 🤝` 18 | ); 19 | 20 | const { data, error, isLoading, signMessageAsync, variables } = 21 | useSignMessage({ 22 | message, 23 | async onSuccess(data, variables) { 24 | const res = await recoverMessageAddress({ 25 | message: variables?.message, 26 | signature: data, 27 | }); 28 | recoveredAddress.current = res; 29 | if (recoveredAddress.current === address) { 30 | toast.success('Message verified successfully!'); 31 | } 32 | }, 33 | onError(error) { 34 | toast.error(error.message); 35 | }, 36 | }); 37 | 38 | const handleSubmit = async () => { 39 | signMessageAsync(); 40 | }; 41 | 42 | return ( 43 |
44 | 45 | 46 | 47 |
48 | 52 |
53 |