You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/network/guides/flare-for-react-developers.mdx
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
slug: flare-for-react-developers
3
3
title: Flare for React Devs
4
4
authors: [fassko]
5
-
description: Learn how to interact with Flare using React and wagmi.
5
+
description: Learn how to interact with Flare using React and Wagmi.
6
6
tags: [react, wagmi, javascript, quickstart]
7
7
keywords:
8
8
[
@@ -18,14 +18,14 @@ keywords:
18
18
sidebar_position: 3
19
19
---
20
20
21
-
This guide is for React developers who want to interact with Flare using [wagmi](https://wagmi.sh/) and the [`@flarenetwork/flare-wagmi-periphery-package`](https://www.npmjs.com/package/@flarenetwork/flare-wagmi-periphery-package).
21
+
This guide is for React developers who want to interact with Flare using [Wagmi](https://wagmi.sh/) and the [`@flarenetwork/flare-wagmi-periphery-package`](https://www.npmjs.com/package/@flarenetwork/flare-wagmi-periphery-package).
22
22
23
23
The package provides two ways to read and write Flare contracts:
24
24
25
-
-**Generic hooks:** use wagmi's [`useReadContract`](https://wagmi.sh/react/hooks/useReadContract) with typed ABIs imported from the Flare Wagmi Periphery package.
25
+
-**Generic hooks:** use Wagmi's [`useReadContract`](https://wagmi.sh/react/hooks/useReadContract) with typed ABIs imported from the Flare Wagmi Periphery package.
26
26
-**Contract-specific hooks:** use auto-generated hooks like `useReadIFlareContractRegistry` that already know the ABI.
27
27
28
-
In this guide, you will set up a React project, configure wagmi for Flare, and query the [`WNat`](/network/solidity-reference/IWNat) contract address from the [`FlareContractRegistry`](/network/solidity-reference/IFlareContractRegistry) using both approaches.
28
+
In this guide, you will set up a React project, configure Wagmi for Flare, and query the [`WNat`](/network/solidity-reference/IWNat) contract address from the [`FlareContractRegistry`](/network/solidity-reference/IFlareContractRegistry) using both approaches.
Install the wagmi, viem, TanStack Query, and the [Flare wagmi periphery package](https://www.npmjs.com/package/@flarenetwork/flare-wagmi-periphery-package):
44
+
Install the Wagmi, Viem, TanStack Query, and the [Flare Wagmi periphery package](https://www.npmjs.com/package/@flarenetwork/flare-wagmi-periphery-package):
Create a `wagmi.config.ts` file in the `src` directory to define the wagmi configuration with Flare networks:
52
+
Create a `wagmi.config.ts` file in the `src` directory to define the Wagmi configuration with Flare networks:
53
53
54
54
```typescript title="wagmi.config.ts"
55
55
import { createConfig, http } from"wagmi";
@@ -95,7 +95,7 @@ The example below queries the [`FlareContractRegistry`](/network/solidity-refere
95
95
96
96
It demonstrates both approaches to query the contract data:
97
97
98
-
-**Generic hooks:** use wagmi's [`useReadContract`](https://wagmi.sh/react/hooks/useReadContract) with typed ABIs imported from the Flare Wagmi Periphery package.
98
+
-**Generic hooks:** use Wagmi's [`useReadContract`](https://wagmi.sh/react/hooks/useReadContract) with typed ABIs imported from the Flare Wagmi Periphery package.
99
99
-**Contract-specific hooks:** use auto-generated hooks like `useReadIFlareContractRegistry` that already know the ABI.
0 commit comments