{"id":13619,"date":"2024-10-14T08:44:53","date_gmt":"2024-10-14T08:44:53","guid":{"rendered":"https:\/\/mycryptomania.com\/?p=13619"},"modified":"2024-10-14T08:44:53","modified_gmt":"2024-10-14T08:44:53","slug":"streamline-dapp-access-implementing-account-abstraction-erc-4337-with-privy","status":"publish","type":"post","link":"https:\/\/mycryptomania.com\/?p=13619","title":{"rendered":"Streamline Dapp Access: Implementing Account Abstraction ERC-4337 with Privy"},"content":{"rendered":"

One of the biggest challenges in Web3 today is improving user experience. Traditionally, users are required to have a crypto wallet, manage gas fees, and sign their own transactions to interact with decentralized applications (dapps). This complex process often creates friction for users unfamiliar with blockchain. However, ERC-4337 account abstraction changes the game by making Web3 feel more like Web2. With it, users no longer need to create wallets, handle gas fees, or sign transactions\u200a\u2014\u200athese steps can be abstracted away. In this article, we\u2019ll explore how to implement account abstraction in your dapp using Privy, simplifying the Web3 experience.<\/p>\n

https:\/\/medium.com\/media\/90e6277b224370f45b09056b4ec4261b\/href<\/a><\/p>\n

Table of\u00a0Contents<\/h3>\n

\u00b7 Table of Contents<\/a>
\u00b7 Intro to Account Abstraction<\/a>
\u00b7 Introduction to Privy<\/a>
\u00b7 Hands On Demonstration<\/a>
\u2218 1- Creating the Privy App<\/a>
\u2218 2- Creating the Dapp<\/a>
\u2218 3 Test the smart account<\/a>
\u00b7 Conclusions<\/a>
\u00b7 Code Repository<\/a>
\u00b7 References<\/a><\/p>\n

Intro to Account Abstraction<\/h3>\n

The user experience for newcomers to crypto can be challenging due to several\u00a0factors:<\/p>\n

Private keys are difficult to manage<\/strong>: Users must securely handle long, complex private keys, which are easy to lose or mishandle.Every action incurs gas fees<\/strong>: Simple transactions require users to spend cryptocurrency on gas, which can be confusing and\u00a0costly.Maintaining wallet privacy is hard<\/strong>: Ensuring anonymity and privacy while using a wallet can be complex, especially for beginners.Signing every transaction<\/strong>: Every on-chain action must be signed by the user\u2019s wallet, adding another layer of complexity, as it requires users to interact with cryptographic tools that aren\u2019t always user-friendly.<\/p>\n

Account abstraction aims to solve many of the issues related to current private key and wallet management. Simply put, it offers a new approach to transaction signing.<\/p>\n

In traditional crypto transactions, you need to use your private key to sign the data and send the transaction, which is how tools like MetaMask\u00a0work:<\/p>\n

With account abstraction<\/strong>, however, you can sign transactions using alternative methods such as Google, GitHub, X (formerly Twitter), LinkedIn, Instagram, Telegram, and others, making the process more flexible and user-friendly.<\/p>\n

Additionally, account abstraction<\/strong> introduces the ability to create custom transaction rules, such\u00a0as:<\/p>\n

Requiring multiple users to sign a transaction (multi-signature transactions).Setting time-based restrictions (e.g., only allowing transactions during the\u00a0day).Implementing spending limits that prevent transactions exceeding a certain\u00a0amount.<\/p>\n

These features provide more control and flexibility over how wallets and transactions operate, creating a smoother and more secure user experience.<\/p>\n

With account abstraction<\/strong>, a new level of customization is introduced that allows others to pay for your transaction fees. Before this innovation, performing any on-chain operation required having enough gas fees in your own wallet. This typically meant buying the gas (ETH, MATIC, etc.) from an exchange and transferring it to your wallet to cover transaction costs.<\/p>\n

However, with account abstraction<\/strong>, users are no longer required to hold gas in their wallets. Instead, they can create the transaction, and a third party (like a sponsor or dApp) can cover the gas fees on their behalf. This allows for a much smoother onboarding process where the user doesn\u2019t need to worry about acquiring gas tokens, reducing friction significantly.<\/p>\n

The user doesn\u2019t even need a traditional wallet. They simply generate the transaction, and someone else\u200a\u2014\u200asuch as a service provider\u200a\u2014\u200acan pay the gas fees for them. This feature helps to simplify the user experience while making decentralized applications more accessible to a broader audience.<\/p>\n

Let\u2019s understand how account abstraction works.<\/p>\n

In a traditional user experience, the user has a wallet that allows them to manage an externally owned account (EOA). The user holds a private key, which they use to sign transactions before submitting them to a blockchain node.<\/p>\n

In the context of account abstraction defined by ERC-4337, there are five key\u00a0actors:<\/p>\n

User<\/strong>: Initiates a user operation, which functions as a meta transaction.Bundler<\/strong>: Collects, verifies, and signs user operations from various users. It bundles these operations into a single transaction, acting similarly to an Externally Owned Account (EOA) in traditional transactions. The bundled transaction is then sent to the Entry\u00a0Point.Entry Point<\/strong>: Receives the bundled transaction from the Bundler. It verifies the validity of each user operation and communicates with the Paymaster to ensure that there are sufficient funds in the Entry Point\u2019s account to cover the gas fees for the operations. Once validated, it calls the Smart Contract Account to execute the transaction.Paymaster<\/strong>: Responsible for sponsoring the gas fees associated with the user operations.Smart Contract Account<\/strong>: Executes all user operations contained in the transaction that the Entry Point has forwarded.https:\/\/blog.thirdweb.com\/account-abstraction-erc4337\/<\/a><\/p>\n

Introduction to\u00a0Privy<\/h3>\n

Implementing account abstraction in a dApp can be quite challenging due to its inherent complexity. I recently discovered Privy<\/strong>, which greatly simplifies the process of generating a smart account for our users by abstracting much of the complexity.<\/p>\n

The Privy React SDK<\/strong> is an authentication library that provides one of the easiest ways to onboard users to web3 in a React app providing:<\/p>\n

Multiple login options<\/strong>: Users can sign in via email, phone, external wallets, or popular social platforms, offering flexible login experiences.Customizable onboarding UIs<\/strong>: You can tailor the user journey, progressively introducing web3 concepts to your users at their own\u00a0pace.Self-custodial embedded wallets<\/strong>: Privy offers powerful embedded wallet solutions while maintaining self-custody, and it also includes robust connectors for external\u00a0wallets.<\/p>\n

This is an example of how a login looks with\u00a0Privy<\/strong>:<\/p>\n

Privy <\/strong>offers multiple login methods to simplify the user onboarding experience. Users can choose from various options, including:<\/p>\n

Email<\/strong>: A straightforward method for users who prefer traditional email authentication.Google<\/strong>: Quick login with an existing Google\u00a0account.X (formerly Twitter)<\/strong>: Users can sign in using their X (Twitter) account.Other Socials<\/strong>: Privy also supports a wide range of other social platforms, including Discord<\/strong>, GitHub<\/strong>, TikTok<\/strong>, LinkedIn<\/strong>, Farcaster<\/strong>, Telegram<\/strong>, and more, offering flexibility for different user preferences.<\/p>\n

This flexibility in login methods ensures users can easily connect to your dApp using the platform or method they\u2019re most comfortable with, creating a seamless web3 experience.<\/p>\n

Hands On Demonstration<\/h3>\n

This is the Dapp that we are going to build with\u00a0Privy:<\/p>\n

The code repository is available here<\/a>.<\/p>\n

1- Creating the Privy\u00a0App<\/h4>\n

To begin with let\u2019s connect to privy.io<\/a> and create our Privy\u00a0app.<\/p>\n

In the \u201cLogin Methods\u201d section, we can configure user authentication. We can allow users to log in via email, SMS, or external\u00a0wallets.<\/p>\n

We can also allow our user to log in with socials, by configuring the social of interest in the socials\u00a0panel:<\/p>\n

In the section \u201cEmbedded wallets\u201d – \u201cSmart wallets\u201d we can configure the settings related to the smart\u00a0account.<\/p>\n

In the section \u201cEnable smart wallets for your app\u201d I have chosen LightAccount but you can choose any of the options presented:<\/p>\n

In the section \u201cConfigure chain\u201d we can configure the chain, the bundler and paymaster URLs:<\/p>\n

I have chosen Base Sepolia as the blockchain, and for the bundler and paymaster URLs, I used the API key generated with Pimlico. Pimlico will sponsor the gas fees for our transactions since we\u2019re using its paymaster.<\/p>\n

2- Creating the\u00a0Dapp<\/h4>\n

Let\u2019s start by creating a new NextJS application with:<\/p>\n

npx create-next-app@latest<\/p>\n

Let\u2019s also add the library NextUI\u00a0<\/a>:<\/p>\n

npm install @nextui-org\/react framer-motion<\/p>\n

And modify the file tailwind.config.ts:<\/p>\n

import { nextui } from “@nextui-org\/react”;
import type { Config } from “tailwindcss”;<\/p>\n

const config: Config = {
content: [
“.\/pages\/**\/*.{js,ts,jsx,tsx,mdx}”,
“.\/components\/**\/*.{js,ts,jsx,tsx,mdx}”,
“.\/app\/**\/*.{js,ts,jsx,tsx,mdx}”,
“.\/node_modules\/@nextui-org\/theme\/dist\/**\/*.{js,ts,jsx,tsx}”,
],
theme: {
extend: {},
},
plugins: [nextui()],
};
export default config;<\/p>\n

Then we install the Privy\u00a0library:<\/p>\n

npm install @privy-io\/react-auth@latest<\/p>\n

In the root directory, create a new file called\u00a0.env.local. Inside this file, add your Privy app ID, which you can retrieve from the Privy dashboard:<\/p>\n

NEXT_PUBLIC_PRIVY_APP_ID=<your_privy_app_id><\/p>\n

Create a new file called providers.tsx, where we will configure Privy:<\/p>\n

export default function Providers({ children }: { children: React.ReactNode }) {
return (
<NextUIProvider>
<PrivyProvider
appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID as string}
config={{
appearance: {
theme: “light”,
accentColor: “#676FFF”,
},
embeddedWallets: {
createOnLogin: “all-users”,
},
defaultChain: baseSepolia,
supportedChains: [baseSepolia],
}}
>
<SmartWalletsProvider>
<main className=”h-full”>{children}<\/main>
<\/SmartWalletsProvider>
<\/PrivyProvider>
<\/NextUIProvider>
);
}<\/p>\n

The embeddedWallet setting refers to the wallet that Privy automatically generates for the user. This is not a smart account. For instance, when a user logs in via Google, Facebook, email, or other methods, Privy creates an embedded wallet for\u00a0them.<\/p>\n

Wrap your application inside the template.tsx file with the Providers component:<\/p>\n

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang=”en”>
<body className={`${raleway.className} antialiased`}>
<Providers>{children}<\/Providers>
<\/body>
<\/html>
);
}<\/p>\n

Let\u2019s create a very simple\u00a0page:<\/p>\n

export default function Home() {
const { ready, authenticated, logout, user } = usePrivy();
const { login } = useLogin();
const { client } = useSmartWallets();
const [isLoadingNft, setIsLoadingNft] = useState(false);
const [recipientNftAddress, setRecipientNftAddress] = useState(“”);
const [errorMessageNft, setErrorMessageNft] = useState(“”);
const [nftTx, setNftTx] = useState(“”);<\/p>\n

const mintNftTransaction = async () => {
setIsLoadingNft(true);
setNftTx(“”);
if (!client) {
console.error(“No smart account client found”);
return;
}<\/p>\n

setErrorMessageNft(“”);<\/p>\n

try {
const tx = await client.sendTransaction({
chain: baseSepolia,
to: ERC721_ADDRESS,
value: BigInt(0),
data: encodeFunctionData({
abi: erc721Abi,
functionName: “safeMint”,
args: [recipientNftAddress as `0x${string}`],
}),
});
console.log(“tx”, tx);
setNftTx(tx);
} catch (error) {
console.error(“Transaction failed:”, error);
setErrorMessageNft(“Transaction failed. Please try again.”);
}
setIsLoadingNft(false);
};<\/p>\n

const handleLogout = () => {
\/\/ Reset all input fields
setIsLoadingNft(false);
setRecipientNftAddress(“”);
setErrorMessageNft(“”);
setNftTx(“”);<\/p>\n

logout();
};<\/p>\n

return (
<div className=”min-h-screen min-w-screen”>
<div className=”grid grid-cols-1 lg:grid-cols-4 h-screen text-black”>
<div className=” col-span-2 bg-gray-50 p-12 h-full flex flex-col lg:flex-row items-center justify-center space-y-2″>
<div className=”flex flex-col justify-evenly h-full”>
<div className=”flex flex-col gap-4″>
<div className=”flex flex-col gap-2″><\/div>
<div className=”text-3xl lg:text-6xl font-black”>
Privy Tutorial
<\/div>
<div className=”text-md lg:text-lg”>Your Privy Tutorial App<\/div>
{ready && !authenticated && (
<Button
radius=”sm”
color=”secondary”
className=”w-4 text-white”
onClick={() => login()}
>
Login
<\/Button>
)}
{ready && authenticated && (
<Button
radius=”sm”
color=”danger”
className=”w-4″
onClick={handleLogout}
>
Logout
<\/Button>
)}
<\/div>
<\/div>
<\/div>
<div className=”col-span-2 bg-white h-full p-12 lg:p-48 flex flex-col lg:flex-row items-center justify-center w-full space-y-4″>
{!user && <div className=”lg:w-1\/2″><\/div>}
{user && (
<div className=”lg:flex lg:flex-row justify-center w-full”>
<div className=”flex flex-col gap-4 w-full”>
<div className=”flex flex-col gap-2 w-full”>
<div className=”flex flex-col gap-2″>
<div className=”text-base font-semibold”>Wallets<\/div>
<div className=”flex items-center”>
<Input
size=”sm”
value={user.wallet?.address}
label=”Embedded Wallet”
isReadOnly
className=”flex-grow”
\/>
<\/div>
<div className=”flex items-center”>
<Input
size=”sm”
value={client?.account.address}
label=”Smart Wallet”
isReadOnly
className=”flex-grow”
\/>
<\/div>
<Divider \/>
<div className=”flex flex-col gap-2″>
<div className=”text-base font-semibold”>Mint NFT<\/div>
<div className=”flex items-center”>
<Input
size=”sm”
value={recipientNftAddress}
onChange={(e) =>
setRecipientNftAddress(e.target.value)
}
placeholder=”Enter recipient address”
label=”Recipient Address”
\/>
<\/div>
<Button
radius=”sm”
color=”secondary”
className=”w-1\/5″
onClick={() => mintNftTransaction()}
isLoading={isLoadingNft}
isDisabled={!recipientNftAddress}
>
Mint NFT
<\/Button>
{errorMessageNft && (
<div className=”text-red-500 text-xs text-center mt-1″>
{errorMessageNft}
<\/div>
)}
{nftTx && (
<div className=”flex flex-col”>
<div className=”flex items-center”>
<Input
size=”sm”
value={nftTx}
label=”NFT Minting Transaction”
isReadOnly
className=”flex-grow”
\/>
<\/div>
<\/div>
)}
<\/div>
<\/div>
<\/div>
<\/div>
<\/div>
)}
<\/div>
<\/div>
<\/div>
);
}<\/p>\n

At the start the applications is very simple with just a Login Button to log in the user by means of\u00a0Privy:<\/p>\n

As the user has logged in the applican looks like\u00a0this:<\/p>\n

In particular in the right hand side we\u00a0have:<\/p>\n

We have different input\u00a0fields:<\/p>\n

Embedded Wallet<\/strong>: This is the wallet generated by Privy during\u00a0login.Smart Wallet<\/strong>: This refers to the smart account created using account abstraction, with gas fees sponsored by the Pimlico paymaster.<\/p>\n

Next, we have a \u201cMint NFT\u201d section, which we\u2019ll use to test the smart\u00a0account.<\/p>\n

3 Test the smart\u00a0account<\/h4>\n

In the previous panel we have a button \u201cMint NFT\u201d that sends a transaction from the smart account to an ERC 721 deployed on Base Sepolia at the address 0x515F9a95c2d21fDe738CE65f7025C3BC79c7239A:<\/p>\n

\/\/ SPDX-License-Identifier: MIT
\/\/ Compatible with OpenZeppelin Contracts ^5.0.0
pragma solidity ^0.8.26;<\/p>\n

import “@openzeppelin\/contracts\/token\/ERC721\/ERC721.sol”;
import “@openzeppelin\/contracts\/token\/ERC721\/extensions\/ERC721Enumerable.sol”;<\/p>\n

contract MyNFT is ERC721, ERC721Enumerable {
uint256 private _nextTokenId;<\/p>\n

constructor()
ERC721(“MyNFT”, “NFT”)
{}<\/p>\n

function safeMint(address to) public {
uint256 tokenId = _nextTokenId++;
_safeMint(to, tokenId);
}<\/p>\n

\/\/ The following functions are overrides required by Solidity.<\/p>\n

function _update(address to, uint256 tokenId, address auth)
internal
override(ERC721, ERC721Enumerable)
returns (address)
{
return super._update(to, tokenId, auth);
}<\/p>\n

function _increaseBalance(address account, uint128 value)
internal
override(ERC721, ERC721Enumerable)
{
super._increaseBalance(account, value);
}<\/p>\n

function supportsInterface(bytes4 interfaceId)
public
view
override(ERC721, ERC721Enumerable)
returns (bool)
{
return super.supportsInterface(interfaceId);
}
}<\/p>\n

If we add the recipient address and press the \u201cMint NFT\u201d button, it will be created an user operation from the smart account that will allow us to mint a new NFT from the ERC721 contract and the Pimlico paymaster will sponsor the gas\u00a0fees.<\/p>\n

As we press the button \u201cMint NFT\u201d a new transaction will be created and the transaction hash will be showed on the\u00a0screen:<\/p>\n

We can also check the transaction on Sepolia Basescan\u00a0here<\/a>.<\/p>\n

Conclusions<\/h3>\n

In this article, we explored how Privy enables our dapp to implement account abstraction, simplifying the complexities behind it. Privy proves to be a valuable tool for easing user onboarding and bridging the gap between Web3 and Web2 applications. Adding this library to your dapp can significantly enhance the user experience.<\/p>\n

Code Repository<\/h3>\n

https:\/\/github.com\/RosarioB\/privy_tutorial<\/a><\/p>\n

References<\/h3>\n

What is Account Abstraction? ERC-4337<\/a>A Deep Dive into ERC\u00a04337<\/a>Privy Doc<\/a><\/p>\n

Streamline Dapp Access: Implementing Account Abstraction ERC-4337 with Privy<\/a> was originally published in Coinmonks<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>","protected":false},"excerpt":{"rendered":"

One of the biggest challenges in Web3 today is improving user experience. Traditionally, users are required to have a crypto wallet, manage gas fees, and sign their own transactions to interact with decentralized applications (dapps). This complex process often creates friction for users unfamiliar with blockchain. However, ERC-4337 account abstraction changes the game by making […]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-13619","post","type-post","status-publish","format-standard","hentry","category-interesting"],"_links":{"self":[{"href":"https:\/\/mycryptomania.com\/index.php?rest_route=\/wp\/v2\/posts\/13619"}],"collection":[{"href":"https:\/\/mycryptomania.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mycryptomania.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/mycryptomania.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13619"}],"version-history":[{"count":0,"href":"https:\/\/mycryptomania.com\/index.php?rest_route=\/wp\/v2\/posts\/13619\/revisions"}],"wp:attachment":[{"href":"https:\/\/mycryptomania.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mycryptomania.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mycryptomania.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}