Skip to content

Commit c394b99

Browse files
mfbzmfbz
authored
Added latest react-sdk components and minor refactoring (#1564)
Co-authored-by: mfbz <mfbz@users.noreply.github.com>
1 parent 9a1749f commit c394b99

File tree

2 files changed

+205
-97
lines changed

2 files changed

+205
-97
lines changed

‎docs/build/tools/react-sdk/components.md‎

Lines changed: 205 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -12,88 +12,11 @@ import PlaygroundButton from '@site/src/components/PlaygroundButton';
1212

1313
# React SDK Components
1414

15-
## 🎨 Theming
16-
17-
### How Theming Works
18-
19-
All UI components in `@onflow/react-sdk` are styled using [Tailwind CSS](https://tailwindcss.com/) utility classes. The kit supports both light and dark themes out of the box, using Tailwind's `dark:` variant for dark mode styling.
20-
21-
You can customize the look and feel of the kit by providing a custom theme to the `FlowProvider` via the `theme` prop. This allows you to override default colors and styles to better match your app's branding.
22-
23-
```tsx
24-
import { FlowProvider } from "@onflow/react-sdk"
25-
26-
<FlowProvider
27-
config={...}
28-
theme={{
29-
colors: {
30-
primary: {
31-
background: "bg-blue-600 dark:bg-blue-400",
32-
text: "text-white dark:text-blue-900",
33-
hover: "hover:bg-blue-700 dark:hover:bg-blue-300",
34-
},
35-
// ...other color overrides
36-
}
37-
}}
38-
>
39-
<App />
40-
</FlowProvider>
41-
```
42-
43-
---
44-
45-
## 🌙 Dark Mode
46-
47-
### How Dark Mode Works
48-
49-
Dark mode is **fully controlled by the parent app** using the `darkMode` prop on `FlowProvider`. The kit does not manage dark mode state internally—this gives you full control and ensures the kit always matches your app's theme.
50-
51-
- `darkMode={false}` (default): Forces all kit components to use light mode styles.
52-
- `darkMode={true}`: Forces all kit components to use dark mode styles.
53-
- You can dynamically change the `darkMode` prop to switch themes at runtime.
54-
55-
**Example:**
56-
57-
```tsx
58-
function App() {
59-
// Parent app manages dark mode state
60-
const [isDark, setIsDark] = useState(false)
61-
62-
return (
63-
<FlowProvider config={...} darkMode={isDark}>
64-
<MyFlowComponents />
65-
</FlowProvider>
66-
)
67-
}
68-
```
69-
70-
**Accessing Dark Mode State in Components:**
71-
72-
You can use the `useDarkMode` hook to check the current mode inside your components:
73-
74-
```tsx
75-
import { useDarkMode } from "@onflow/react-sdk"
76-
77-
function MyComponent() {
78-
// useDarkMode only returns the current state, no setter
79-
const { isDark } = useDarkMode()
80-
return <div>{isDark ? "Dark mode" : "Light mode"}</div>
81-
}
82-
```
83-
84-
### Notes
85-
86-
- The kit does **not** automatically follow system preferences or save user choices. You are responsible for managing and passing the correct `darkMode` value.
87-
- All kit components will automatically apply the correct Tailwind `dark:` classes based on the `darkMode` prop.
88-
- For best results, ensure your app's global theme and the kit's `darkMode` prop are always in sync.
89-
90-
---
91-
9215
## Components
9316

9417
### `Connect`
9518

96-
A drop-in wallet connection component with UI for copy address, logout, and balance display.
19+
A drop-in wallet connection component with UI for copy address, logout, and balance display. Displays user scheduled transactions within its profile modal with support for multiple tokens.
9720

9821
<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#connect" /></div>
9922

@@ -103,9 +26,17 @@ A drop-in wallet connection component with UI for copy address, logout, and bala
10326
- `onConnect?: () => void` – Callback triggered after successful authentication
10427
- `onDisconnect?: () => void` – Callback triggered after logout
10528
- `balanceType?: "cadence" | "evm" | "combined"` – Specifies which balance to display (default: `"cadence"`). Options:
106-
- `"cadence"`: Shows the FLOW token balance from the Cadence side
107-
- `"evm"`: Shows the FLOW token balance from the Flow EVM side
108-
- `"combined"`: Shows the total combined FLOW token balance from both sides
29+
- `"cadence"`: Shows the token balance from the Cadence side
30+
- `"evm"`: Shows the token balance from the Flow EVM side
31+
- `"combined"`: Shows the total combined token balance from both sides
32+
- `balanceTokens?: TokenConfig[]` – Optional array of token configurations to display in the balance selector. Each `TokenConfig` requires:
33+
- `symbol: string` – Token symbol (e.g. "FLOW", "USDC")
34+
- `name: string` – Full token name
35+
- Either `vaultIdentifier: string` (for Cadence tokens) or `erc20Address: string` (for EVM tokens)
36+
- `modalConfig?: ConnectModalConfig` – Optional configuration for the profile modal:
37+
- `scheduledTransactions.show?: boolean` – Whether to show the scheduled transactions tab (default: `false`)
38+
- `scheduledTransactions.filterHandlerTypes?: string[]` – Optional array of handler type identifiers to filter displayed transactions
39+
- `modalEnabled?: boolean` – Whether to show the profile modal on click when connected (default: `true`). When `false`, clicking the button when connected will disconnect instead
10940

11041
```tsx
11142
import { Connect } from "@onflow/react-sdk"
@@ -116,7 +47,7 @@ import { Connect } from "@onflow/react-sdk"
11647
/>
11748
```
11849

119-
### Live Demo
50+
#### Live Demo
12051

12152
<FlowProviderDemo>
12253
<Connect
@@ -127,6 +58,40 @@ import { Connect } from "@onflow/react-sdk"
12758

12859
---
12960

61+
### `Profile`
62+
63+
A standalone component for displaying wallet information including account address, balance and optional scheduled transactions.
64+
65+
<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#profile" /></div>
66+
67+
**Props:**
68+
69+
- `onDisconnect?: () => void` – Callback triggered when the user clicks the disconnect button
70+
- `balanceType?: "cadence" | "evm" | "combined"` – Specifies which balance to display (default: `"cadence"`). Options:
71+
- `"cadence"`: Shows the token balance from the Cadence side
72+
- `"evm"`: Shows the token balance from the Flow EVM side
73+
- `"combined"`: Shows the total combined token balance from both sides
74+
- `balanceTokens?: TokenConfig[]` – Optional array of token configurations to display in the balance selector. Each `TokenConfig` requires:
75+
- `symbol: string` – Token symbol (e.g. "FLOW", "USDC")
76+
- `name: string` – Full token name
77+
- Either `vaultIdentifier: string` (for Cadence tokens) or `erc20Address: string` (for EVM tokens)
78+
- `profileConfig?: ProfileConfig` – Optional configuration for the profile display:
79+
- `scheduledTransactions.show?: boolean` – Whether to show the scheduled transactions tab (default: `false`)
80+
- `scheduledTransactions.filterHandlerTypes?: string[]` – Optional array of handler type identifiers to filter displayed transactions
81+
- `className?: string` – Optional custom CSS class
82+
- `style?: React.CSSProperties` – Optional inline styles
83+
84+
```tsx
85+
import { Profile } from "@onflow/react-sdk"
86+
87+
<Profile
88+
balanceType="combined"
89+
onDisconnect={() => console.log("User disconnected")}
90+
/>
91+
```
92+
93+
---
94+
13095
### `TransactionButton`
13196

13297
Button component for executing Flow transactions with built-in loading states and global transaction management.
@@ -166,7 +131,7 @@ const myTransaction = {
166131
/>
167132
```
168133

169-
### Live Demo
134+
#### Live Demo
170135

171136
<FlowProviderDemo>
172137
<TransactionButton
@@ -213,7 +178,7 @@ import { TransactionDialog } from "@onflow/react-sdk"
213178
/>
214179
```
215180

216-
### Live Demo
181+
#### Live Demo
217182

218183
<TransactionDialogDemo />
219184

@@ -236,11 +201,165 @@ import { TransactionLink } from "@onflow/react-sdk"
236201
<TransactionLink txId="your-tx-id" />
237202
```
238203

239-
### Live Demo
204+
#### Live Demo
240205

241206
<FlowProviderDemo>
242207
<TransactionLink
243208
txId="0x1234567890abcdef"
244209
variant="primary"
245210
/>
246-
</FlowProviderDemo>
211+
</FlowProviderDemo>
212+
213+
---
214+
215+
### `NftCard`
216+
217+
A component for rendering a NFT with image, name, description, collection details, traits and external links. Features include loading states, error handling, dark mode support and optional custom actions.
218+
219+
<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#nftcard" /></div>
220+
221+
**Props:**
222+
223+
- `accountAddress: string` – The Flow account address that owns the NFT
224+
- `tokenId: string | number` – The ID of the NFT
225+
- `publicPathIdentifier: string` – The public path identifier for the NFT collection (e.g., "A.0b2a3299cc857e29.TopShot.Collection")
226+
- `showTraits?: boolean` – Whether to display NFT traits/attributes (default: `false`). Shows up to 4 traits with a button to view all
227+
- `showExtra?: boolean` – Whether to display additional information like serial number, rarity, and external links (default: `false`)
228+
- `actions?: NftCardAction[]` – Optional array of custom action buttons displayed in a dropdown menu. Each action requires:
229+
- `title: string` – Display text for the action
230+
- `onClick: () => Promise<void> | void` – Handler function called when action is clicked
231+
- `className?: string` – Optional custom CSS class
232+
- `style?: React.CSSProperties` – Optional inline styles
233+
234+
```tsx
235+
import { NftCard } from "@onflow/react-sdk"
236+
237+
<NftCard
238+
accountAddress="0x1234567890abcdef"
239+
tokenId="12345"
240+
publicPathIdentifier="A.0b2a3299cc857e29.TopShot.Collection"
241+
showTraits={true}
242+
showExtra={true}
243+
actions={[
244+
{
245+
title: "Transfer NFT",
246+
onClick: async () => {
247+
// Handle transfer logic
248+
}
249+
},
250+
{
251+
title: "List for Sale",
252+
onClick: async () => {
253+
// Handle listing logic
254+
}
255+
}
256+
]}
257+
/>
258+
```
259+
260+
---
261+
262+
### `ScheduledTransactionList`
263+
264+
A component for displaying scheduled transactions for a Flow account. Shows transaction metadata including thumbnails, descriptions, priority, scheduled time, execution effort, fees and provides an optional transaction cancellation functionality.
265+
266+
<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#scheduledtransactionlist" /></div>
267+
268+
**Props:**
269+
270+
- `address: string` – The Flow account address to fetch scheduled transactions for
271+
- `filterHandlerTypes?: string[]` – Optional array of handler type identifiers to filter which transactions are displayed. Only transactions with matching `handlerTypeIdentifier` will be shown
272+
- `cancelEnabled?: boolean` – Whether to show the cancel button for transactions (default: `true`)
273+
- `className?: string` – Optional custom CSS class
274+
- `style?: React.CSSProperties` – Optional inline styles
275+
- `flowClient?: UseFlowScheduledTransactionListArgs["flowClient"]` – Optional custom Flow client instance
276+
277+
```tsx
278+
import { ScheduledTransactionList } from "@onflow/react-sdk"
279+
280+
<ScheduledTransactionList
281+
address="0x1234567890abcdef"
282+
filterHandlerTypes={[
283+
"A.1234.MyContract.Handler",
284+
"A.5678.OtherContract.Handler"
285+
]}
286+
cancelEnabled={true}
287+
/>
288+
```
289+
290+
---
291+
292+
## Theming
293+
294+
### How Theming Works
295+
296+
All UI components in `@onflow/react-sdk` are styled using [Tailwind CSS](https://tailwindcss.com/) utility classes. The kit supports both light and dark themes out of the box, using Tailwind's `dark:` variant for dark mode styling.
297+
298+
You can customize the look and feel of the kit by providing a custom theme to the `FlowProvider` via the `theme` prop. This allows you to override default colors and styles to better match your app's branding.
299+
300+
```tsx
301+
import { FlowProvider } from "@onflow/react-sdk"
302+
303+
<FlowProvider
304+
config={...}
305+
theme={{
306+
colors: {
307+
primary: {
308+
background: "bg-blue-600 dark:bg-blue-400",
309+
text: "text-white dark:text-blue-900",
310+
hover: "hover:bg-blue-700 dark:hover:bg-blue-300",
311+
},
312+
// ...other color overrides
313+
}
314+
}}
315+
>
316+
<App />
317+
</FlowProvider>
318+
```
319+
320+
---
321+
322+
## Dark Mode
323+
324+
### How Dark Mode Works
325+
326+
Dark mode is **fully controlled by the parent app** using the `darkMode` prop on `FlowProvider`. The kit does not manage dark mode state internally—this gives you full control and ensures the kit always matches your app's theme.
327+
328+
- `darkMode={false}` (default): Forces all kit components to use light mode styles.
329+
- `darkMode={true}`: Forces all kit components to use dark mode styles.
330+
- You can dynamically change the `darkMode` prop to switch themes at runtime.
331+
332+
**Example:**
333+
334+
```tsx
335+
function App() {
336+
// Parent app manages dark mode state
337+
const [isDark, setIsDark] = useState(false)
338+
339+
return (
340+
<FlowProvider config={...} darkMode={isDark}>
341+
<MyFlowComponents />
342+
</FlowProvider>
343+
)
344+
}
345+
```
346+
347+
**Accessing Dark Mode State in Components:**
348+
349+
You can use the `useDarkMode` hook to check the current mode inside your components:
350+
351+
```tsx
352+
import { useDarkMode } from "@onflow/react-sdk"
353+
354+
function MyComponent() {
355+
// useDarkMode only returns the current state, no setter
356+
const { isDark } = useDarkMode()
357+
return <div>{isDark ? "Dark mode" : "Light mode"}</div>
358+
}
359+
```
360+
361+
#### Notes
362+
363+
- The kit does **not** automatically follow system preferences or save user choices. You are responsible for managing and passing the correct `darkMode` value.
364+
- All kit components will automatically apply the correct Tailwind `dark:` classes based on the `darkMode` prop.
365+
- For best results, ensure your app's global theme and the kit's `darkMode` prop are always in sync.

‎docs/build/tools/react-sdk/index.mdx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,6 @@ import { Connect } from '@onflow/react-sdk';
1010

1111
# Flow React SDK
1212

13-
<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', maxWidth: '100%' }}>
14-
<iframe
15-
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
16-
src="https://www.youtube.com/embed/ie7TWbXS-XU"
17-
title="YouTube video player"
18-
frameborder="0"
19-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
20-
allowfullscreen
21-
></iframe>
22-
</div>
23-
2413
**The easiest way to build React apps on Flow.** A lightweight, TypeScript-first library that makes Flow blockchain interactions feel native to React development.
2514

2615
<ReactSDKOverview />

0 commit comments

Comments
 (0)