This is a Typescript project with the following dependencies and logic already implemented: RainbowKit + wagmi + Next.js +Rainbowkit + TailwindCSS.
Inside of the utils folder, there is a file connectContract which has the logic for you to allow your frontend to communicate with your smart contract, and execute those functions from the front end.
In your Nextjs pages that trigger your smart contract calls, import this at the top:
import connectContract from "../utils/connectContract";
Then when you want to call those functions:
const myContract = connectContract();
const txn = await rsvpContract.youtFunction()
First, install dependencies:
npm installRun the server:
npm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
To learn more about this stack, take a look at the following resources:
- RainbowKit Documentation - Learn how to customize your wallet connection flow.
- wagmi Documentation - Learn how to interact with Ethereum.
- Next.js Documentation - Learn how to build a Next.js application.
You can check out the RainbowKit GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.