Skip to content

Updated hook names #1326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jun 20, 2025
Merged

Updated hook names #1326

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
afc167f
Updated hook names
0xLisanAlGaib Jun 17, 2025
dcdc093
Update docs/build/getting-started/fcl-quickstart.md
briandoyle81 Jun 17, 2025
9d30c83
Update docs/build/getting-started/fcl-quickstart.md
0xLisanAlGaib Jun 17, 2025
96aabb2
Addressed PR feedback: fixed imports, transaction status, and simplif…
0xLisanAlGaib Jun 19, 2025
cec9e20
Merge remote-tracking branch 'origin/0xLisanAlGaib-patch-2'
0xLisanAlGaib Jun 19, 2025
9778876
Removed styling from code and kept mimimal code to showcase functiona…
0xLisanAlGaib Jun 20, 2025
61e5cb3
Merge branch 'main' into 0xLisanAlGaib-patch-2
0xLisanAlGaib Jun 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 57 additions & 48 deletions docs/build/getting-started/fcl-quickstart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,34 +131,33 @@ This will start the [Dev Wallet] on `http://localhost:8701`, which you'll use fo
[**@onflow/kit**] provides a `FlowProvider` component that sets up the Flow Client Library configuration. In Next.js using the App Router, add or update your `src/app/layout.tsx` as follows:

```tsx
// src/app/layout.tsx
'use client';
"use client";

import { FlowProvider } from '@onflow/kit';
import flowJSON from '../../flow.json';
import { FlowProvider } from "@onflow/kit";
import flowJson from "../flow.json";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
children: React.ReactNode
}) {
return (
<html>
<body>
<FlowProvider
<FlowProvider
config={{
accessNodeUrl: 'http://localhost:8888',
flowNetwork: 'emulator',
discoveryWallet: 'https://fcl-discovery.onflow.org/emulator/authn',
}}
flowJson={flowJSON}
flowJson={flowJson}
>
{children}
</FlowProvider>
</body>
</html>
);
}
)
}
```

This configuration initializes the kit with your local emulator settings and maps contract addresses based on your `flow.json` file.
Expand All @@ -173,7 +172,7 @@ Now that we've set our provider, lets start interacting with the chain.

First, use the kit's [`useFlowQuery`] hook to read the current counter value from the blockchain.

```jsx
```tsx
import { useFlowQuery } from '@onflow/kit';

const { data, isLoading, error, refetch } = useFlowQuery({
Expand Down Expand Up @@ -207,7 +206,7 @@ This script fetches the counter value, formats it via the `NumberFormatter`, and

Next, use the kit's [`useFlowMutate`] hook to send a transaction that increments the counter.

```jsx
```tsx
import { useFlowMutate } from '@onflow/kit';

const {
Expand Down Expand Up @@ -245,10 +244,14 @@ This sends a Cadence transaction to the blockchain using the `mutate` function.

Use the kit's [`useFlowTransactionStatus`] hook to monitor and display the transaction status in real time.

```jsx
const { transactionStatus, error: txStatusError } = useFlowTransactionStatus(
txId || '',
);

```tsx
import { useFlowTransactionStatus } from '@onflow/kit';

const { transactionStatus, error: txStatusError } = useFlowTransactionStatus({
id: txId || "",
});


useEffect(() => {
if (txId && transactionStatus?.status === 3) {
Expand Down Expand Up @@ -284,9 +287,7 @@ However:

Finally, integrate the query, mutation, and transaction status hooks with authentication using `useCurrentFlowUser`. Combine all parts to build the complete page.

```jsx
// src/app/page.js

```tsx
"use client";

import { useState, useEffect } from "react";
Expand All @@ -299,7 +300,6 @@ import {

export default function Home() {
const { user, authenticate, unauthenticate } = useCurrentFlowUser();
const [lastTxId, setLastTxId] = useState<string>();

const { data, isLoading, error, refetch } = useFlowQuery({
cadence: `
Expand All @@ -323,13 +323,16 @@ export default function Home() {
error: txError,
} = useFlowMutate();

const { transactionStatus, error: txStatusError } = useFlowTransactionStatus(
txId || "",
);

const { transactionStatus, error: txStatusError } = useFlowTransactionStatus({
id: txId || "",
});


useEffect(() => {
if (txId && transactionStatus?.status === 4) {
refetch();
if (txId && transactionStatus?.status === 3) {
// Transaction is executed
refetch(); // Refresh the counter
}
}, [transactionStatus?.status, txId, refetch]);

Expand All @@ -354,47 +357,47 @@ export default function Home() {

return (
<div>
<h1>@onflow/kit App Quickstart</h1>
<h1>Flow Counter dApp</h1>

{isLoading ? (
<p>Loading count...</p>
) : error ? (
<p>Error fetching count: {error.message}</p>
<p>Error: {error.message}</p>
) : (
<div>
<h2>Count: {data as string}</h2>
<h2>{(data as string) || "0"}</h2>
<p>Current Count</p>
</div>
)}

{user.loggedIn ? (
{user?.loggedIn ? (
<div>
<p>Address: {user.addr}</p>
<button onClick={unauthenticate}>Log Out</button>
<p>Connected: {user.addr}</p>

<button onClick={handleIncrement} disabled={txPending}>
{txPending ? "Processing..." : "Increment Count"}
</button>

<button onClick={unauthenticate}>
Disconnect
</button>

<div>
Latest Transaction Status:{" "}
{transactionStatus?.statusString || "No transaction yet"}
</div>

{txError && <p>Error sending transaction: {txError.message}</p>}

{lastTxId && (
<div>
<h3>Transaction Status</h3>
{transactionStatus ? (
<p>Status: {transactionStatus.statusString}</p>
) : (
<p>Waiting for status update...</p>
)}
{txStatusError && <p>Error: {txStatusError.message}</p>}
</div>
{transactionStatus?.statusString && transactionStatus?.status && (
<p>Status: {transactionStatus.status >= 3 ? "Successful" : "Pending"}</p>
)}

{txError && (
<p>Error: {txError.message}</p>
)}

{txStatusError && (
<p>Status Error: {txStatusError.message}</p>
)}
</div>
) : (
<button onClick={authenticate}>Log In</button>
<button onClick={authenticate}>
Connect Wallet
</button>
)}
</div>
);
Expand Down Expand Up @@ -430,6 +433,12 @@ Log out, and log back in selecting the Dev Wallet instead of the Flow Wallet.

:::

:::warning

For your app to connect with contracts deployed on the emulator, you need to have completed [Step 1: Contract Interaction] and [Step 2: Local Development].

:::

Then visit [http://localhost:3000](http://localhost:3000) in your browser. You should see:

- The current counter value displayed (formatted with commas using `NumberFormatter`).
Expand Down