Skip to content

Commit c584a76

Browse files
committed
fix(docs): correct capitalization of "Wagmi" throughout Flare for React Developers guide
1 parent d04c71d commit c584a76

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

docs/network/guides/flare-for-react-developers.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
slug: flare-for-react-developers
33
title: Flare for React Devs
44
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.
66
tags: [react, wagmi, javascript, quickstart]
77
keywords:
88
[
@@ -18,14 +18,14 @@ keywords:
1818
sidebar_position: 3
1919
---
2020

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).
2222

2323
The package provides two ways to read and write Flare contracts:
2424

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.
2626
- **Contract-specific hooks:** use auto-generated hooks like `useReadIFlareContractRegistry` that already know the ABI.
2727

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.
2929

3030
## Prerequisites
3131

@@ -41,15 +41,15 @@ npm create vite@latest my-flare-app -- --template react-ts
4141
cd my-flare-app
4242
```
4343

44-
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):
4545

4646
```bash
4747
npm install wagmi viem @tanstack/react-query @flarenetwork/flare-wagmi-periphery-package
4848
```
4949

50-
## Configure wagmi for Flare
50+
## Configure Wagmi for Flare
5151

52-
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:
5353

5454
```typescript title="wagmi.config.ts"
5555
import { createConfig, http } from "wagmi";
@@ -95,7 +95,7 @@ The example below queries the [`FlareContractRegistry`](/network/solidity-refere
9595

9696
It demonstrates both approaches to query the contract data:
9797

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.
9999
- **Contract-specific hooks:** use auto-generated hooks like `useReadIFlareContractRegistry` that already know the ABI.
100100

101101
```typescript title="src/WNatQuery.tsx"
@@ -139,7 +139,7 @@ export function WNatQuery() {
139139

140140
<h2>Generic Hook with ABI</h2>
141141
<p>
142-
Uses wagmi's generic <code>useReadContract</code> hook with{" "}
142+
Uses Wagmi's generic <code>useReadContract</code> hook with{" "}
143143
<code>iFlareContractRegistryAbi</code> imported from the package.
144144
</p>
145145
{isLoadingGeneric && <p>Loading...</p>}
@@ -190,7 +190,7 @@ The app will query the [`FlareContractRegistry`](/network/solidity-reference/IFl
190190

191191
### Generic hooks
192192

193-
The generic approach uses the [`useReadContract`](https://wagmi.sh/react/hooks/useReadContract) hook from wagmi.
193+
The generic approach uses the [`useReadContract`](https://wagmi.sh/react/hooks/useReadContract) hook from Wagmi.
194194
You import the typed ABI (`iFlareContractRegistryAbi`) from the package and pass it as the `abi` prop.
195195
This gives you complete type safety for `functionName` and `args`.
196196

@@ -226,7 +226,7 @@ const { data } = useReadIFlareContractRegistry({
226226

227227
| | Generic hooks | Contract-specific hooks |
228228
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------- |
229-
| **Import** | `useReadContract` from wagmi + ABI from package | `useReadIFlareContractRegistry` etc. from package |
229+
| **Import** | `useReadContract` from Wagmi + ABI from package | `useReadIFlareContractRegistry` etc. from package |
230230
| **ABI prop** | Required — pass the imported ABI | Not needed — baked into the hook |
231231
| **Type safety** | Full, via ABI generic | Full, via generated hook signature |
232232
| **Best for** | Mixing contracts in one component, using ABIs with viem directly | Concise code when working with a single contract |

0 commit comments

Comments
 (0)