Available Platforms
Web3 events take the mystery out of the state of your onchain interactions.
You can stop long-polling, and start listening to wallet updates in realtime.
You can stop long-polling, and start listening to wallet updates in realtime.
Listen to Web3 Events
Connect wallet to view USDC transfers
20 lines collapsed
21 export const Web3EventsWidget = () => {
13 lines collapsed
35 const subscribe = async () => {
36 try {
37 setIsLoading(true);
38 await indexer.subscribeEvents(req, {
39 onMessage: (msg: SubscribeEventsReturn) => {
40 const decoded = decodeEventLog({
41 abi: [
42 {
43 type: "event",
44 name: "Transfer",
45 inputs: [
46 { indexed: true, name: "from", type: "address" },
47 { indexed: true, name: "to", type: "address" },
48 { indexed: false, name: "value", type: "uint256" },
49 ],
50 },
51 ],
52 data: msg.log.rawLog?.data,
53 topics: msg.log.rawLog?.topics,
54 });
55 setEvents((prev) => [
56 ...prev,
57 {
58 eventData: { ...decoded, txHash: msg.log.txnHash },
59 },
60 ]);
61 },
62 onError: (err: WebrpcError) => {
63 console.error("err", err);
64 },
65 });
66 } catch (error) {
67 console.error("Failed to subscribe:", error);
68 } finally {
69 setIsLoading(false);
70 }
71 };
3 lines collapsed
75 <span>Listen to USDC transfers on Arbitrum</span>
76 <button
77 onClick={subscribe}
78 disabled={isLoading}
79 className="disabled:bg-gray-500/50 disabled:cursor-not-allowed"
80 >
81 {isLoading ? (
82 <span className="flex items-center gap-2">
83 <div className="size-4 border-2 border-white/20 border-t-white/80 rounded-full animate-spin" />
84 Listening...
85 </span>
86 ) : (
87 "Start Listening"
88 )}
89 </button>
52 lines collapsed
