|
1 | | -# Listening to Events |
| 1 | +import { |
| 2 | + Tabs, |
| 3 | + TabsList, |
| 4 | + TabsTrigger, |
| 5 | + TabsContent, |
| 6 | +} from "@doc"; |
| 7 | +import { |
| 8 | + ReactIcon, |
| 9 | + TypeScriptIcon, |
| 10 | + EngineIcon, |
| 11 | +} from "@/icons"; |
2 | 12 |
|
3 | | -The recommended way to listen to contract events is to use the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. This is type-safe based on the Solidity event signature you define. You can get your desired contract event signature from the solidity code directly. |
| 13 | +# Contract Events |
4 | 14 |
|
5 | | -```ts |
6 | | -import { getContractEvents, prepareEvent } from "thirdweb"; |
| 15 | +Query and listen to contract events for any deployed contract on any EVM chain. |
7 | 16 |
|
8 | | -const myEvent = prepareEvent({ |
9 | | - signature: "event Transfer(address indexed from, address indexed to, uint256 value)", |
10 | | -}); |
| 17 | +<Tabs defaultValue="http"> |
| 18 | + <TabsList> |
| 19 | + <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0"> |
| 20 | + <EngineIcon className="w-4 h-4 mr-2" /> |
| 21 | + HTTP |
| 22 | + </TabsTrigger> |
| 23 | + <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0"> |
| 24 | + <TypeScriptIcon className="w-4 h-4 mr-2" /> |
| 25 | + TypeScript |
| 26 | + </TabsTrigger> |
| 27 | + <TabsTrigger value="react" className="flex items-center gap-2 [&>p]:mb-0"> |
| 28 | + <ReactIcon className="w-4 h-4 mr-2" /> |
| 29 | + React |
| 30 | + </TabsTrigger> |
| 31 | + </TabsList> |
11 | 32 |
|
12 | | -const events = await getContractEvents({ |
13 | | - contract: myContract, |
14 | | - events: [myEvent], |
15 | | -}); |
16 | | -``` |
| 33 | + <TabsContent value="http"> |
| 34 | + ### Get Contract Events |
17 | 35 |
|
18 | | -### Using standard event definitions |
| 36 | + You can fetch contract events using the [contract events API](https://api.thirdweb.com/reference#tag/contracts/get/v1/contracts/{address}/events). |
19 | 37 |
|
20 | | -You can also use the standard event definitions from the SDK to define the events you want to listen to. |
| 38 | + ```http |
| 39 | + GET /v1/contracts/{address}/events?chainId=<chain_id>&decode=true |
| 40 | + Host: api.thirdweb.com |
| 41 | + x-secret-key: <project-secret-key> |
| 42 | + ``` |
21 | 43 |
|
22 | | -```ts |
23 | | -import { getContractEvents } from "thirdweb"; |
24 | | -import { transferEvent } from "thirdweb/extensions/erc20"; |
| 44 | + Authentication requires either `x-secret-key` (backend) or `x-client-id` (frontend) to be set in the request headers. |
25 | 45 |
|
26 | | -const events = await getContractEvents({ |
27 | | - contract: myContract, |
28 | | - events: [transferEvent()], |
29 | | -}); |
30 | | -``` |
| 46 | + #### Parameters |
| 47 | + |
| 48 | + - `address` - The contract address |
| 49 | + - `chainId` - The chain ID where the contract is deployed |
| 50 | + - `decode` - Whether to decode the event data (optional, defaults to false) |
| 51 | + |
| 52 | + #### Response |
| 53 | + |
| 54 | + The API returns a list of events that have been emitted by the specified contract, including event details and decoded function calls when `decode=true` is specified. |
| 55 | + |
| 56 | + </TabsContent> |
| 57 | + |
| 58 | + <TabsContent value="typescript"> |
| 59 | + ### Get Contract Events |
| 60 | + |
| 61 | + You can listen to contract events using the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. |
| 62 | + |
| 63 | + ```ts |
| 64 | + import { getContractEvents, prepareEvent } from "thirdweb"; |
| 65 | + |
| 66 | + const myEvent = prepareEvent({ |
| 67 | + signature: "event Transfer(address indexed from, address indexed to, uint256 value)", |
| 68 | + }); |
| 69 | + |
| 70 | + const events = await getContractEvents({ |
| 71 | + contract: myContract, |
| 72 | + events: [myEvent], |
| 73 | + }); |
| 74 | + ``` |
| 75 | + |
| 76 | + ### Using standard event definitions |
| 77 | + |
| 78 | + You can also use the standard event definitions from the SDK to define the events you want to listen to. |
31 | 79 |
|
32 | | -### Generating all read functions and events for a deployed contract |
| 80 | + ```ts |
| 81 | + import { getContractEvents } from "thirdweb"; |
| 82 | + import { transferEvent } from "thirdweb/extensions/erc20"; |
| 83 | + |
| 84 | + const events = await getContractEvents({ |
| 85 | + contract: myContract, |
| 86 | + events: [transferEvent()], |
| 87 | + }); |
| 88 | + ``` |
| 89 | + |
| 90 | + ### Generating all read functions and events for a deployed contract |
33 | 91 |
|
34 | 92 | Using the CLI, you can generate optimized functions for all the possible calls to a contract. This saves you time and precomputes all the necessary encoding. |
35 | 93 |
|
36 | 94 | ```shell |
37 | 95 | npx thirdweb generate <contractId>/<contractAddress> |
38 | 96 | ``` |
39 | 97 |
|
40 | | -Read more on how to [generate extension functions using the CLI](/contracts/generate). |
| 98 | +Read more on how to [generate extension functions using the CLI](/contracts/generate). |
| 99 | + |
| 100 | + </TabsContent> |
| 101 | + |
| 102 | + <TabsContent value="react"> |
| 103 | + ### Listen to Events |
| 104 | + |
| 105 | + You can listen to contract events using the [`useContractEvents`](/references/typescript/v5/useContractEvents) hook. This hook will automatically poll for new events and update the component state. |
| 106 | + |
| 107 | + ```jsx |
| 108 | + import { useContractEvents } from "thirdweb/react"; |
| 109 | + import { prepareEvent } from "thirdweb"; |
| 110 | + |
| 111 | + const myEvent = prepareEvent({ |
| 112 | + signature: "event Transfer(address indexed from, address indexed to, uint256 value)", |
| 113 | + }); |
| 114 | + |
| 115 | + function YourComponent() { |
| 116 | + const { data: contractEvents } = useContractEvents({ |
| 117 | + contract, |
| 118 | + events: [myEvent], |
| 119 | + }); |
| 120 | + |
| 121 | + return ( |
| 122 | + <div> |
| 123 | + {contractEvents?.map((event, index) => ( |
| 124 | + <div key={index}> |
| 125 | + Event: {event.eventName} |
| 126 | + </div> |
| 127 | + ))} |
| 128 | + </div> |
| 129 | + ); |
| 130 | + } |
| 131 | + ``` |
| 132 | +
|
| 133 | + ### Using standard event definitions |
| 134 | +
|
| 135 | + You can also use the standard event definitions from the SDK. |
| 136 | +
|
| 137 | + ```jsx |
| 138 | + import { useContractEvents } from "thirdweb/react"; |
| 139 | + import { transferEvent } from "thirdweb/extensions/erc20"; |
| 140 | + |
| 141 | + function YourComponent() { |
| 142 | + const { data: contractEvents } = useContractEvents({ |
| 143 | + contract, |
| 144 | + events: [transferEvent()], |
| 145 | + }); |
| 146 | + |
| 147 | + return ( |
| 148 | + <div> |
| 149 | + {contractEvents?.map((event, index) => ( |
| 150 | + <div key={index}> |
| 151 | + Transfer from {event.args.from} to {event.args.to} |
| 152 | + </div> |
| 153 | + ))} |
| 154 | + </div> |
| 155 | + ); |
| 156 | + } |
| 157 | + ``` |
| 158 | +
|
| 159 | + </TabsContent> |
| 160 | +
|
| 161 | +</Tabs> |
0 commit comments