From b1495cbda64e526b4dbe4dee8ea20e275bb4e03f Mon Sep 17 00:00:00 2001
From: Tanay Pant <7481165+tanay1337@users.noreply.github.com>
Date: Mon, 11 Mar 2024 18:22:05 +0100
Subject: [PATCH] feat: add diagram to explain 4337 (#392)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: add diagram to explain 4337
* fix: update links in further reading
* Update 4337 overview diagram
* Update pages/home/4337-overview.mdx
Co-authored-by: Germán Martínez <6764315+germartinez@users.noreply.github.com>
* Update pages/home/4337-overview.mdx
Co-authored-by: Germán Martínez <6764315+germartinez@users.noreply.github.com>
---------
Co-authored-by: Tanay Pant <tanaypantprotonmail.com>
Co-authored-by: Germán Martínez <6764315+germartinez@users.noreply.github.com>
---
pages/home/4337-overview.mdx | 26 ++++++++++++++++++++++----
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/pages/home/4337-overview.mdx b/pages/home/4337-overview.mdx
index 56c83496..a9b57993 100644
--- a/pages/home/4337-overview.mdx
+++ b/pages/home/4337-overview.mdx
@@ -1,11 +1,29 @@
import { Grid } from '@mui/material'
import CustomCard from '../../components/CustomCard'
-# What is the ERC-4337?
+# What is ERC-4337?
[ERC-4337](../glossary.md#erc-4337) addresses the challenges associated with account abstraction without requiring changes to the consensus-layer protocol. It serves as a transaction relayer for smart accounts like Safe. It does so by introducing a pseudo-transaction object called a `UserOperation`, which sends a transaction on behalf of the user.
-Nodes in Ethereum can act as a Bundler, which picks up multiple UserOperations and packs them into a single transaction known as a bundle transaction. The bundle transactions are then sent to a global smart contract on Ethereum (of which there is only one) called the `EntryPoint`.
+Nodes in Ethereum can act as a Bundler, which picks up multiple `UserOperation`(s) and packs them into a single transaction known as a bundle transaction. The bundle transactions are then sent to a global smart contract on Ethereum (of which there is only one) called the `EntryPoint`.
+
+``` mermaid
+---
+title: Simplified ERC-4337 flow
+---
+flowchart TD
+ A(Dapp
+ Users kick off a ERC-4337 flow through a dapp) -->|UserOperation| B(Bundler
+ Decentralized network of relayers to propagate UserOperations)
+ B -->|Bundle Transactions| C(EntryPoint Contract
+ Contract to ensure onchain authentication)
+ C -->|Invoke UserOperation| D(Smart Account
+ Smart contract validates and executes the individual UserOperations)
+ style A stroke:#12ff80
+ style B stroke:#12ff80
+ style C stroke:#12ff80
+ style D stroke:#12ff80
+```
ERC-4337 enhances usability by introducing paymasters. This decentralized mechanism allows users to pay gas fees using ERC-20 tokens (like USDC) instead of native tokens like ETH or to seek a third party to cover their gas fees entirely.
@@ -51,5 +69,5 @@ ERC-4337 provides a bunch of benefits along with all the inherent advantages of
## Further reading
-- https://www.erc4337.io
-- https://eips.ethereum.org/EIPS/eip-4337
+- [Official documentation](https://www.erc4337.io)
+- [EIP document](https://eips.ethereum.org/EIPS/eip-4337)