Skip to content

Commit 48ce541

Browse files
chaseflemingchasefleming
authored
Merge pull request #1355 from onflow/cf/update-main-7-8-25
Update feature branch with main
2 parents a35a02a + 5203a70 commit 48ce541

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1253
-309
lines changed

‎docs/build/getting-started/fcl-quickstart.md‎

Lines changed: 62 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -131,34 +131,33 @@ This will start the [Dev Wallet] on `http://localhost:8701`, which you'll use fo
131131
[**@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:
132132

133133
```tsx
134-
// src/app/layout.tsx
135-
'use client';
134+
"use client";
136135

137-
import { FlowProvider } from '@onflow/kit';
138-
import flowJSON from '../../flow.json';
136+
import { FlowProvider } from "@onflow/kit";
137+
import flowJson from "../flow.json";
139138

140139
export default function RootLayout({
141140
children,
142141
}: {
143-
children: React.ReactNode;
142+
children: React.ReactNode
144143
}) {
145144
return (
146145
<html>
147146
<body>
148-
<FlowProvider
147+
<FlowProvider
149148
config={{
150149
accessNodeUrl: 'http://localhost:8888',
151150
flowNetwork: 'emulator',
152151
discoveryWallet: 'https://fcl-discovery.onflow.org/emulator/authn',
153152
}}
154-
flowJson={flowJSON}
153+
flowJson={flowJson}
155154
>
156155
{children}
157156
</FlowProvider>
158157
</body>
159158
</html>
160-
);
161-
}
159+
)
160+
}
162161
```
163162

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

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

176-
```jsx
175+
```tsx
177176
import { useFlowQuery } from '@onflow/kit';
178177

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

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

210-
```jsx
209+
```tsx
211210
import { useFlowMutate } from '@onflow/kit';
212211

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

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

248-
```jsx
249-
const { transactionStatus, error: txStatusError } = useFlowTransactionStatus(
250-
txId || '',
251-
);
247+
248+
```tsx
249+
import { useFlowTransactionStatus } from '@onflow/kit';
250+
251+
const { transactionStatus, error: txStatusError } = useFlowTransactionStatus({
252+
id: txId || "",
253+
});
254+
252255

253256
useEffect(() => {
254257
if (txId && transactionStatus?.status === 3) {
@@ -282,24 +285,21 @@ However:
282285

283286
### Integrating Authentication and Building the Complete UI
284287

285-
Finally, integrate the query, mutation, and transaction status hooks with authentication using `useCurrentFlowUser`. Combine all parts to build the complete page.
286-
287-
```jsx
288-
// src/app/page.js
288+
Finally, integrate the query, mutation, and transaction status hooks with authentication using `useFlowCurrentUser`. Combine all parts to build the complete page.
289289

290+
```tsx
290291
"use client";
291292

292293
import { useState, useEffect } from "react";
293294
import {
294295
useFlowQuery,
295296
useFlowMutate,
296297
useFlowTransactionStatus,
297-
useCurrentFlowUser,
298+
useFlowCurrentUser,
298299
} from "@onflow/kit";
299300

300301
export default function Home() {
301-
const { user, authenticate, unauthenticate } = useCurrentFlowUser();
302-
const [lastTxId, setLastTxId] = useState<string>();
302+
const { user, authenticate, unauthenticate } = useFlowCurrentUser();
303303

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

326-
const { transactionStatus, error: txStatusError } = useFlowTransactionStatus(
327-
txId || "",
328-
);
326+
327+
const { transactionStatus, error: txStatusError } = useFlowTransactionStatus({
328+
id: txId || "",
329+
});
330+
329331

330332
useEffect(() => {
331-
if (txId && transactionStatus?.status === 4) {
332-
refetch();
333+
if (txId && transactionStatus?.status === 3) {
334+
// Transaction is executed
335+
refetch(); // Refresh the counter
333336
}
334337
}, [transactionStatus?.status, txId, refetch]);
335338

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

355358
return (
356359
<div>
357-
<h1>@onflow/kit App Quickstart</h1>
360+
<h1>Flow Counter dApp</h1>
358361

359362
{isLoading ? (
360363
<p>Loading count...</p>
361364
) : error ? (
362-
<p>Error fetching count: {error.message}</p>
365+
<p>Error: {error.message}</p>
363366
) : (
364367
<div>
365-
<h2>Count: {data as string}</h2>
368+
<h2>{(data as string) || "0"}</h2>
369+
<p>Current Count</p>
366370
</div>
367371
)}
368372

369-
{user.loggedIn ? (
373+
{user?.loggedIn ? (
370374
<div>
371-
<p>Address: {user.addr}</p>
372-
<button onClick={unauthenticate}>Log Out</button>
375+
<p>Connected: {user.addr}</p>
376+
373377
<button onClick={handleIncrement} disabled={txPending}>
374378
{txPending ? "Processing..." : "Increment Count"}
375379
</button>
380+
381+
<button onClick={unauthenticate}>
382+
Disconnect
383+
</button>
376384

377-
<div>
378-
Latest Transaction Status:{" "}
379-
{transactionStatus?.statusString || "No transaction yet"}
380-
</div>
381-
382-
{txError && <p>Error sending transaction: {txError.message}</p>}
383-
384-
{lastTxId && (
385-
<div>
386-
<h3>Transaction Status</h3>
387-
{transactionStatus ? (
388-
<p>Status: {transactionStatus.statusString}</p>
389-
) : (
390-
<p>Waiting for status update...</p>
391-
)}
392-
{txStatusError && <p>Error: {txStatusError.message}</p>}
393-
</div>
385+
{transactionStatus?.statusString && transactionStatus?.status && (
386+
<p>Status: {transactionStatus.status >= 3 ? "Successful" : "Pending"}</p>
387+
)}
388+
389+
{txError && (
390+
<p>Error: {txError.message}</p>
391+
)}
392+
393+
{txStatusError && (
394+
<p>Status Error: {txStatusError.message}</p>
394395
)}
395396
</div>
396397
) : (
397-
<button onClick={authenticate}>Log In</button>
398+
<button onClick={authenticate}>
399+
Connect Wallet
400+
</button>
398401
)}
399402
</div>
400403
);
@@ -406,7 +409,7 @@ In this complete page:
406409
- **Step 1** queries the counter value.
407410
- **Step 2** sends a transaction to increment the counter and stores the transaction ID.
408411
- **Step 3** subscribes to transaction status updates using the stored transaction ID and uses a `useEffect` hook to automatically refetch the updated count when the transaction is sealed (status code 4).
409-
- **Step 4** integrates authentication via `useCurrentFlowUser` and combines all the pieces into a single user interface.
412+
- **Step 4** integrates authentication via `useFlowCurrentUser` and combines all the pieces into a single user interface.
410413

411414
:::tip
412415

@@ -430,6 +433,12 @@ Log out, and log back in selecting the Dev Wallet instead of the Flow Wallet.
430433

431434
:::
432435

436+
:::warning
437+
438+
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].
439+
440+
:::
441+
433442
Then visit [http://localhost:3000](http://localhost:3000) in your browser. You should see:
434443

435444
- The current counter value displayed (formatted with commas using `NumberFormatter`).
@@ -442,7 +451,7 @@ Then visit [http://localhost:3000](http://localhost:3000) in your browser. You s
442451
By following these steps, you've built a simple Next.js dApp that interacts with a Flow smart contract using [**@onflow/kit**]. In this guide you learned how to:
443452

444453
- Wrap your application in a `FlowProvider` to configure blockchain connectivity.
445-
- Use kit hooks such as `useFlowQuery`, `useFlowMutate`, `useFlowTransactionStatus`, and `useCurrentFlowUser` to manage authentication, query on-chain data, submit transactions, and monitor their status.
454+
- Use kit hooks such as `useFlowQuery`, `useFlowMutate`, `useFlowTransactionStatus`, and `useFlowCurrentUser` to manage authentication, query on-chain data, submit transactions, and monitor their status.
446455
- Integrate with the local Flow emulator and Dev Wallet for a fully functional development setup.
447456

448457
For additional details and advanced usage, refer to the [@onflow/kit documentation] and other Flow developer resources.

‎docs/ecosystem/projects.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,5 +249,19 @@ Explore an array of exciting, grassroots initiatives, and projects that thrive w
249249
githubLink: 'https://github.com/doodles/flooks',
250250
},
251251
},
252+
{
253+
type: 'link',
254+
label: 'Stake & Eggs',
255+
href: 'https://stakeandeggs.wtf/',
256+
description:
257+
'A comprehensive Flow staking dashboard to track performance, estimate rewards, and simulate earnings.',
258+
customProps: {
259+
icon: '',
260+
author: {
261+
name: 'Chase Fleming',
262+
profileImage: 'https://avatars.githubusercontent.com/u/1666730?v=4',
263+
},
264+
},
265+
},
252266
]}
253267
/>

‎docs/evm/guides/index.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: Flow EVM Guides
3+
description: Tutorials and guides for building on Flow EVM, integrating with popular Ethereum tools, and leveraging Flow's unique features.
4+
sidebar_position: 1
5+
keywords:
6+
- Flow EVM
7+
- guides
8+
- tutorials
9+
- Ethereum
10+
- Solidity
11+
- Foundry
12+
- Hardhat
13+
- Remix
14+
- wagmi
15+
- RainbowKit
16+
- web3.js
17+
- ethers.js
18+
---
19+
20+
# EVM Guides
21+
22+
This section contains guides and tutorials for building on [Flow EVM], integrating with popular Ethereum tools, and leveraging Flow's unique features.
23+
24+
## Guides
25+
26+
- **[Integrating MetaMask]** - How to connect MetaMask to Flow EVM and interact with your dapps.
27+
- **[Using ethers.js]** - Learn to use ethers.js with Flow EVM for contract interaction and account management.
28+
- **[Using web3.js]** - Use web3.js to build and interact with Flow EVM smart contracts.
29+
- **[Using wagmi]** - Integrate wagmi for React-based EVM dapps on Flow.
30+
- **[Using RainbowKit]** - Add wallet connection and onboarding with RainbowKit in your Flow EVM dapp.
31+
- **[Using Foundry]** - Develop, test, and deploy smart contracts on Flow EVM using Foundry.
32+
- **[Using Hardhat]** - Build, test, and deploy Solidity contracts on Flow EVM with Hardhat.
33+
- **[Using Remix]** - Write, deploy, and interact with contracts on Flow EVM using the Remix IDE.
34+
35+
## More Coming Soon
36+
37+
Stay tuned - more guides and advanced tutorials are on the way!
38+
39+
[Flow EVM]: ../about.md
40+
[Integrating MetaMask]: ./integrating-metamask.mdx
41+
[Using ethers.js]: ./ethers.md
42+
[Using web3.js]: ./web3-js.md
43+
[Using wagmi]: ./wagmi.md
44+
[Using RainbowKit]: ./rainbowkit.md
45+
[Using Foundry]: ./foundry.md
46+
[Using Hardhat]: ./hardhat.md
47+
[Using Remix]: ./remix.md

‎docs/evm/quickstart.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,14 @@ export default ClickerModule;
251251

252252
Visit the [Flow Faucet] and follow the instructions to add testnet funds. Compared to other networks, the [Flow Faucet] grants a vast amount of tokens - enough gas for millions of transactions.
253253

254+
:::warning
255+
256+
EVM accounts created by the [Flow Wallet] are [Cadence-Owned Accounts], or COAs - **Not** EOAs. COAs have many advantages over EOAs, but they are generated differently, which means they don't have a key that's compatible with Hardhat.
257+
258+
Use your [MetaMask] or similar EOA account to deploy contracts on Flow EVM.
259+
260+
:::
261+
254262
### Deploy the Contract
255263

256264
Deploy the contract with:
@@ -354,3 +362,4 @@ Ready to unlock the full potential of Flow EVM? Start with our [Batched Transact
354362
[Cross-VM Apps]: ../tutorials/cross-vm-apps/introduction.md
355363
[Batched Transactions]: ../tutorials/cross-vm-apps/introduction.md
356364
[OpenZeppelin Contracts]: https://www.openzeppelin.com/contracts
365+
[Cadence-Owned Accounts]: ./accounts.md#cadence-owned-accounts

‎docs/tools/clients/fcl-js/index.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ import * as fcl from "@onflow/fcl";
7878

7979
const result = await fcl.query({
8080
cadence: `
81-
pub fun main(a: Int, b: Int, addr: Address): Int {
81+
access(all)
82+
fun main(a: Int, b: Int, addr: Address): Int {
8283
log(addr)
8384
return a + b
8485
}
@@ -98,7 +99,7 @@ import * as fcl from "@onflow/fcl";
9899
const txId = await fcl.mutate({
99100
cadence: `
100101
import Profile from 0xba1132bc08f82fe2
101-
102+
102103
transaction(name: String) {
103104
prepare(account: AuthAccount) {
104105
account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
@@ -127,7 +128,7 @@ FCL JS supports TypeScript. If you need to import specific types, you can do so
127128
```typescript
128129
import {CurrentUser} from "@onflow/typedefs"
129130

130-
const newUser: CurrentUser = {
131+
const newUser: CurrentUser = {
131132
addr: null,
132133
cid: null,
133134
expiresAt: null,

‎docs/tools/flow-cli/flow.json/configuration.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ Flow configuration (`flow.json`) file will contain the following properties:
2525
"accounts": {
2626
"emulator-account": {
2727
"address": "f8d6e0586b0a20c7",
28-
"key": "ae1b44c0f5e8f6992ef2348898a35e50a8b0b9684000da8b1dade1b3bcd6ebee",
28+
"key": "ae1b44c0f5e8f6992ef2348898a35e50a8b0b9684000da8b1dade1b3bcd6ebee"
2929
}
3030
},
3131
"deployments": {},
@@ -80,7 +80,7 @@ We'll walk through each property one by one.
8080
},
8181
"emulator-account": {
8282
"address": "f8d6e0586b0a20c7",
83-
"key": "2eae2f31cb5b756151fa11d82949c634b8f28796a711d7eb1e52cc301ed11111",
83+
"key": "2eae2f31cb5b756151fa11d82949c634b8f28796a711d7eb1e52cc301ed11111"
8484
}
8585
},
8686

0 commit comments

Comments
 (0)