Source link
Dive into the world of ERC-4337 Account Abstraction and level up your dApp development skills with this comprehensive tutorial. In this session, we’re converting a Web3.js application, initially built with the robust testing environment of Foundry, the versatility of Next.js, and the convenience of Wagmi and Viem, into a cutting-edge application leveraging account abstraction using StackUp, Candide and Alchemy’s Account Kit for seamless, gasless transactions.
🎓 Tutorial: Not finished yet! (later available at https://ethereum-blockchain-developer.com)
💻 Final App: https://erc4337-chatter-nextjs-app.vercel.app/
🧑🏻💻 Codesandbox DevBox: https://codesandbox.io/p/devbox/erc4337-chatter-8fc2sh
📝 GitHub: https://github.com/tomw1808/erc4337-chatter-application
Contents:
00:00:00 – Intro
00:01:56 – Where is the Code
00:03:37 – Foundry Project Initialization
00:08:15 – Create NextJS Scaffolding
00:08:48 – Install Rainbowkit, Wagmi and Viem
00:10:15 – Create a Custom Chain for Rainbowkit
00:11:41 – Adding the Chat Web3 Functionality
00:17:31 – Adding JazzIcons for Accounts
00:21:48 – More Messages through Foundry
00:29:30 – Scrollable Element
00:30:59 – Deploying to Görli
00:34:50 – ERC4330 Introduction: On Chain Wallets
00:41:08 – Looking at Stackup ERC4337
00:43:36 – Understanding UserOp InitCode and Calldata
00:48:51 – Calculating Wallet Address using Stackup
00:55:53 – Using Stackup for ERC4337 Transactions
01:02:00 – Sending a Test-Transcation using Stackup
01:08:00 – Using the Stackup PAYG Paymaster
01:10:23 – UserOp Transaction Debugged Step-By-Step
01:18:00 – SimpleWallet vs Safe Wallet
01:19:15 – Looking at Candide for ERC4337
01:20:40 – Installing Candide Safe-Branch
01:23:10 – Using Safe Wallet with Candide
01:36:00 – Testing Safe Wallet with Safe Website
01:37:05 – Getting Started with Alchemy Account Kit
01:49:30 – Final App Walkthrough
01:53:54 – Understanding ERC4337 Paymasters
01:56:41 – Outro and Summary
Key takeaways from this video:
1️⃣ Understand ERC-4337: Unpack the essentials of ERC-4337 account abstraction and why it’s a game changer for user experiences in dApps.
2️⃣ Start with Solid Foundations: Walk through the initial app development using Foundry for smart contract development, testing solidity code with unmatched speed and reliability.
3️⃣ Build with Next.js & Wagmi: Learn how to scaffold a front-end with Next.js and integrate smart contract interaction patterns with Wagmi for reactive dApp interfaces.
4️⃣ Transition to StackUp: Observe the process of adapting your application to use StackUp for bundling transactions and enabling easier UX for users.
5️⃣ Integrate Candide: Get to grips with Candide for reliable, predictable smart contract interactions to bolster your app’s robustness.
6️⃣ Deploy Gasless with Alchemy: Finalize your project by integrating Alchemy’s Account Kit, unlocking the potential for gasless transactions and onboarding users effortlessly.
Whether you’re a junior developer keen to expand your blockchain development expertise or a seasoned coder looking to stay updated on the latest trends, this video is your ticket to mastering ERC-4337 account abstraction. Follow our step-by-step guide, from initial setup to deploying a fully-functional, user-friendly dApp that takes advantage of today’s advanced Ethereum features. Hit the play button, and let’s start building the future of frictionless blockchain transactions together!
Remember to subscribe for more in-depth development guides, tips, and industry best practices.
🗣️ Leave a comment below if you have questions or share your thoughts on ERC-4337. Enjoy coding!
#ERC4337 #AccountAbstraction #GaslessTransactions #Web3Development #Ethereum #Foundry #Nextjs #Wagmi #Viem #StackUp #Candide #Alchemy #BlockchainDevelopment
date : 2024-01-22 09:40:49
views : 1715
likes : 78
rating :
found searching for foundry solidity tutorial
