Skip to content

Commit aa22e58

Browse files
andysim3dandysim3d
committed
docs: add flashblocks support doc
1 parent d7e16d1 commit aa22e58

File tree

3 files changed

+197
-0
lines changed

3 files changed

+197
-0
lines changed

‎docs/docs.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,8 @@ navigation:
261261
path: wallets/pages/TO-REMOVE-transactions/sponsor-gas/sponsor-gas-solana.mdx
262262
- page: Pay gas with any token
263263
path: wallets/pages/transactions/pay-gas-with-any-token/index.mdx
264+
- page: Using flashblocks for pre-confirmation
265+
path: wallets/pages/transactions/use-flashblocks.mdx
264266
- section: Using 7702
265267
contents:
266268
- page: Overview
@@ -299,6 +301,8 @@ navigation:
299301
path: wallets/pages/gas-manager-admin-api/conditional-gas-sponsorship.mdx
300302
- page: How to pay gas with any token
301303
path: wallets/pages/gas-manager-admin-api/how-to-pay-gas-with-any-token.mdx
304+
- page: How to use AA with Flashblocks
305+
path: wallets/pages/transactions/low-level-infra/use-flashblocks-with-aa.mdx
302306
- section: Third party infra
303307
contents:
304308
- page: Bundlers

‎docs/pages/low-level-infra/use-flashblocks-with-aa.mdx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: How to use AA with Flashblocks
3+
description: A quick guide to use flashblocks for pre-confirmation transactions with AA infra
4+
slug: wallets/transactions/low-level-infra/use-flashblocks-with-aa.mdx
5+
---
6+
7+
Flashblocks are a transaction pre-confirmation feature that provides near-instant transaction feedback by streaming partial block updates every 200 milliseconds. This significantly reduces the effective block time from Base’s standard 2 seconds to just 200 milliseconds, a 10x increase.
8+
9+
Flashblocks is great for developers who demand instant UX such as decentralized exchanges, onchain gaming, and other high-frequency applications.
10+
11+
Flashblocks is enabled for developers on Base Sepolia and Mainnets. When other chains support flashblocks, support will be added accordingly.
12+
13+
For General flashblocks support, please read [Flashblocks API Quickstart](https://www.alchemy.com/docs/reference/base-flashblocks-api-quickstart).
14+
15+
## Integrate with flashblocks
16+
17+
To get pre-confirmed UserOperations with flashblocks, use "pending" block tag with APIs that support flashblocks.
18+
19+
<Tabs>
20+
<Tab title="Wallet SDK">
21+
## Wallet SDK
22+
23+
Fetching a pre-confirmed UserOperation works the same way as fetching a mined UserOperation - you just need to pass a block tag to indicate that you want the pre-confirmed UO.
24+
25+
```ts twoslash
26+
27+
// Send a user operation as always
28+
const { hash } = await client.sendUserOperation(...);
29+
30+
// Wait for user operation with "pending" tag.
31+
// This is how you get userOperation pre-confirmation
32+
await client.waitForUserOperationTransaction({hash, tag: "pending"});
33+
34+
// Or, get user operation with Receipt with "pending" tag.
35+
let receipt = await client.getUserOperationReceipt(hash, "pending");
36+
37+
// There is a new field "status" in the receipt struct, it indicates if a userOperation receipt is mined or pre-confirmed
38+
// receipt: {
39+
// userOpHash: '...',
40+
// ...
41+
// status: 'preconfirmed'
42+
//}
43+
```
44+
45+
</Tab>
46+
47+
<Tab title="JsonRPC">
48+
## JsonRPC
49+
50+
`eth_getUserOperationReceipt` now accepts an additional `BlockTag` argument to specify the block from which to retrieve the UserOperation receipt.
51+
52+
```json
53+
// Add a block tag when calling eth_getUserOperationReceipt.
54+
// request
55+
{
56+
"jsonrpc": "2.0",
57+
"id": 1,
58+
"method": "eth_getUserOperationReceipt",
59+
"params": [
60+
"0x1e4503ae4fbc2c78db63ad772bdf040869aee6f7e31f38e719d41b625bdffc72",
61+
"pending"
62+
]
63+
}
64+
65+
// response
66+
{
67+
"jsonrpc": "2.0",
68+
"id": 1,
69+
"result": {
70+
"userOpHash": "0x1e4503ae4fbc2c78db63ad772bdf040869aee6f7e31f38e719d41b625bdffc72",
71+
...
72+
"status": "preconfirmed"
73+
}
74+
}
75+
```
76+
77+
</Tab>
78+
</Tabs>
79+
80+
## Caveat
81+
82+
Flashblocks only enables transaction pre-confirmation before a full block is emitted. However the onchain state won’t change until a full block is emitted. Thus, a follow up transaction can’t be submitted on the same nonce key via wallet APIs or bundler until the transaction is fully confirmed.

‎docs/pages/transactions/use-flashblocks.mdx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
title: Using flashblocks for pre-confirmation
3+
description: A quick guide to use flashblocks for pre-confirmation transactions
4+
slug: wallets/transactions/use-flashblocks.mdx
5+
---
6+
7+
Flashblocks gives developers near-instant transaction visibility, reducing perceived block time from 2 seconds to 200 milliseconds. This enables apps to deliver faster, smoother user experiences for high-frequency use cases like DEXs, onchain gaming, and real-time interactions.
8+
9+
With Flashblocks, developers can treat pending transactions as effectively confirmed within 200 ms, unlocking UX patterns that were previously impractical onchain.
10+
11+
Flashblocks is enabled for developers on Base Sepolia and Mainnets. When other chains support flashblocks, support will be added accordingly.
12+
13+
For General flashblocks support, please read [Flashblocks API Quickstart](https://www.alchemy.com/docs/reference/base-flashblocks-api-quickstart).
14+
15+
**Prerequisites**
16+
17+
- minimum Typescript version of 5
18+
19+
## Get UserOperation with pre-confirmation state
20+
21+
<Tabs>
22+
<Tab title="React">
23+
## React
24+
25+
Using React with Flashblocks is the same as [sending a UserOperation](/wallets/transactions/send/send-user-operations); the only difference is adding a waitForTxnTag: "pending" argument when using the useSendUserOperation hook.
26+
27+
<Tip>
28+
In the below example, we use `ModularAccountV2` as the underlying Smart
29+
Contract type, which is our default and recommended account. To learn more
30+
about all the account options, check out our guide [on choosing a smart
31+
account](/wallets/smart-contracts/choosing-a-smart-account).
32+
</Tip>
33+
34+
```tsx twoslash
35+
import React from "react";
36+
import {
37+
type UseSendUserOperationResult,
38+
useSendUserOperation,
39+
useSmartAccountClient,
40+
} from "@account-kit/react";
41+
42+
export default function MyOpSenderComponent() {
43+
const { client } = useSmartAccountClient({});
44+
45+
const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
46+
client,
47+
// optional parameter that will wait for the transaction to be mined before returning
48+
waitForTxn: true,
49+
waitForTxnTag: "pending",
50+
onSuccess: ({ hash, request }) => {
51+
// [optional] Do something with the hash and request
52+
},
53+
onError: (error) => {
54+
// [optional] Do something with the error
55+
},
56+
});
57+
58+
return (
59+
<div>
60+
<button
61+
onClick={() =>
62+
sendUserOperation({
63+
uo: {
64+
target: "0xTARGET_ADDRESS",
65+
data: "0x",
66+
value: 0n,
67+
},
68+
})
69+
}
70+
disabled={isSendingUserOperation}
71+
>
72+
{isSendingUserOperation ? "Sending..." : "Send UO"}
73+
</button>
74+
</div>
75+
);
76+
}
77+
```
78+
79+
</Tab>
80+
<Tab title="Wallet SDK">
81+
## Wallet SDK
82+
83+
Fetching a pre-confirmed UserOperation works the same way as fetching a mined UserOperation - you just need to pass a block tag to indicate that you want the pre-confirmed UO.
84+
85+
```ts twoslash
86+
// Send a user operation as always
87+
const { hash } = await client.sendUserOperation(...);
88+
89+
// Wait for user operation with "pending" tag.
90+
// This is how you get userOperation pre-confirmation
91+
await client.waitForUserOperationTransaction({hash, tag: "pending"});
92+
93+
// Or, get user operation receipt with "pending" tag.
94+
let receipt = await client.getUserOperationReceipt(hash, "pending");
95+
96+
// There is a new field "status" in the receipt struct, it indicates if a userOperation receipt is mined or pre-confirmed
97+
// receipt: {
98+
// userOpHash: '...',
99+
// ...
100+
// status: 'preconfirmed' | 'mined'
101+
//}
102+
```
103+
104+
</Tab>
105+
<Tab title="Wallet API">
106+
## Wallet API
107+
108+
New statuses - `Preconfirmed`, `Preconfirmed Onchain Failure`, and `Preconfirmed Partial Onchain Failure` - have been introduced to indicate the UserOperation status when calling wallet_getCallsStatus.
109+
110+
</Tab>
111+
</Tabs>

0 commit comments

Comments
 (0)