Skip to content

Commit a375a93

Browse files
andysim3dandysim3d
committed
docs: add flashblocks support doc
1 parent ac88279 commit a375a93

File tree

3 files changed

+190
-1
lines changed

3 files changed

+190
-1
lines changed

‎docs-site‎

‎docs/pages/transactions/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: 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: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: Using flashblocks for pre-confirmation
3+
description: A quick guide to use flashblocks for pre-confirmation transactions
4+
slug: 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+
<Tip>
27+
In the below example, we use `ModularAccountV2` as the underlying Smart Contract type, which is our default and recommended account. To learn more about all the account options, check out our guide [on choosing a smart account](/wallets/smart-contracts/choosing-a-smart-account).
28+
</Tip>
29+
30+
```tsx twoslash
31+
import React from "react";
32+
import {
33+
type UseSendUserOperationResult,
34+
useSendUserOperation,
35+
useSmartAccountClient,
36+
} from "@account-kit/react";
37+
38+
export default function MyOpSenderComponent() {
39+
const { client } = useSmartAccountClient({});
40+
41+
const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
42+
client,
43+
// optional parameter that will wait for the transaction to be mined before returning
44+
waitForTxn: true,
45+
waitForTxnTag: "pending",
46+
onSuccess: ({ hash, request }) => {
47+
// [optional] Do something with the hash and request
48+
},
49+
onError: (error) => {
50+
// [optional] Do something with the error
51+
},
52+
});
53+
54+
return (
55+
<div>
56+
<button
57+
onClick={() =>
58+
sendUserOperation({
59+
uo: {
60+
target: "0xTARGET_ADDRESS",
61+
data: "0x",
62+
value: 0n,
63+
},
64+
})
65+
}
66+
disabled={isSendingUserOperation}
67+
>
68+
{isSendingUserOperation ? "Sending..." : "Send UO"}
69+
</button>
70+
</div>
71+
);
72+
}
73+
```
74+
75+
</Tab>
76+
<Tab title="Wallet SDK">
77+
## Wallet SDK
78+
79+
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.
80+
81+
```ts twoslash
82+
// Send a user operation as always
83+
const { hash } = await client.sendUserOperation(...);
84+
85+
// Wait for user operation with "pending" tag.
86+
// This is how you get userOperation pre-confirmation
87+
await client.waitForUserOperationTransaction({hash, tag: "pending"});
88+
89+
// Or, get user operation receipt with "pending" tag.
90+
let receipt = await client.getUserOperationReceipt(hash, "pending");
91+
92+
// There is a new field "status" in the receipt struct, it indicates if a userOperation receipt is mined or pre-confirmed
93+
// receipt: {
94+
// userOpHash: '...',
95+
// ...
96+
// status: 'preconfirmed' | 'mined'
97+
//}
98+
```
99+
100+
</Tab>
101+
<Tab title="Wallet API">
102+
## Wallet API
103+
104+
New statuses - `Preconfirmed`, `Preconfirmed Onchain Failure`, and `Preconfirmed Partial Onchain Failure` - have been introduced to indicate the UserOperation status when calling wallet_getCallsStatus.
105+
106+
</Tab>
107+
</Tabs>

0 commit comments

Comments
 (0)