feat: add diagram to explain 4337 (#392)

* 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 <[email protected]> * Update pages/home/4337-overview.mdx Co-authored-by: Germán Martínez <[email protected]> --------- Co-authored-by: Tanay Pant <tanaypantprotonmail.com> Co-authored-by: Germán Martínez <[email protected]>
safe-global · Mar 11, 2024 · b1495cb · b1495cb
1 parent 38b8dd8
commit b1495cb
Showing 1 changed file with 22 additions and 4 deletions.
diff --git 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)