Add Fund and FundContent components to React Native SDK by mfbz · Pull Request #2782 · onflow/fcl-js

mfbz · 2026-01-07T20:29:45Z

Home	Credit Card	Crypto Transfer

Close #2711

* First correct setup * Blocto working! * Walletconnect opens Flow wallet! * Cleanup walletconnect * Minor improvements * Minor fixes and added more logging * Added more logging and auto-redirect support * Fixed autologout * Prettier fixes * Improved implementation without hardcoding services * Improved service discovery * Added missing exports * Improved implementation with client export like fcl * Improved connection management * Fixed walletconnect connection * Simplified walletconnect implementation * Converted logger to normal logs * Added possibility to add custom wallets * Cleanup * Improved folder structure * Improved and added connect modal * Improved modal * Improved service modal * Walletconnect service improvements * Improved scrolling with multiple wallets * Improved connect modal ui * Improved ConnectModal * Improved modal provider * Fixed discovery not working * Minor cleanup * Improved wc connect request * Improved disconnect * Added auto-redirect detection * Fixed app deeplink * Added discoveryAuthnExclude for fcl parity * Removed changes for testing * Typo * More cleanup * Other cleanups * Revert "Other cleanups" This reverts commit 5870fec. * Added changeset * Regenerated lockfile * Logging cleanup * Added session ping with log cleanup * Overall improvements and code refactoring * PR review improvements * Improved and cleaned up flowclientconfig * Updated changeset * Moved computelimit optional with default to fcl-core * Improved flowclientconfig implementation * Implemented DISCOVERY/RN strategy insteaf of custom authenticate implementation * Improved connect modal implementation * Minor cleanup * Added react-core package and refactored react-sdk * Further updated dependencies and all fcl references from tests * Updated dependencies * Added common types * Added changeset * Cleanup react-core * Cleaned up unused context file in react-sdk * Made explicit exports from react-sdk * Minor fixes * Updated version * Minor demo cleanup * Another demo cleanup * Cleaned up hook * Improved hooks flowclient type imports * Any cleanup * Added sansPrefix import * Fixed query hooks types * Fixed tests * Minor params naming fix * Minor fix * Another minor fix * Other fix * Update packages/react-core/src/core/types.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Package implementation with base components * Fixed npm install * Added changeset * Improved components and polyfills * Improved uid support for deeplinking * Minor fixes * Improved discovery endpoint retrieval * Revert "Improved discovery endpoint retrieval" This reverts commit 8fab296. * Improved flowprovider config ux * Updated deps * Fixed deps * Updated deps * Fixed icons * Fixed deps install * Fixed unauthenticate in client * Updated deps * Added playground banner * Improved readme * Added more info to readme * Improved design system * Used sansPrefix instead of regex * Updated changeset * Added truncateAddress function and usage * Refactored FlowQueryClientProvider to react-core * Refactored also GlobalTransactionProvider to react-core --------- Co-authored-by: mfbz <mfbz@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Version Packages * Fixed Version Packages * Fixed react-core deps --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: mfbz <mfbz@users.noreply.github.com>

* Added singleton to flowprovider client * Improved routing flexibility * Added changeset * Centered ConnectModal --------- Co-authored-by: mfbz <mfbz@users.noreply.github.com>

* Version Packages * Fixed Version Packages --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: mfbz <mfbz@users.noreply.github.com>

* Use internal button on nft card * Add changeset --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Use color palette for theming buttons * Change naming * Change to theme colors * switch * Run prettier * Add dark colors * Move inline * Run prettier * Support themeing in dialog component (#2772) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Support theming on profile component (#2773) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Use theme system on Scheduled Tx component (#2776) * Use theme on scheduled tx component * Run prettier --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Use theming system on tx dialog (#2777) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> * Add changset * Use theming system on nft card (#2779) Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com> --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Version Packages --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

changeset-bot · 2026-01-07T20:29:48Z

🦋 Changeset detected

Latest commit: cbccbfd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@onflow/react-native-sdk	Minor
@onflow/fcl-bundle	Minor
@onflow/react-sdk	Major
@onflow/payments	Minor
@onflow/demo	Minor
@onflow/fcl	Minor
@onflow/fcl-ethereum-provider	Major
@onflow/fcl-rainbowkit-adapter	Major
@onflow/fcl-wagmi-adapter	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-01-07T20:29:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
react-sdk-demo	Ready	Preview, Comment	Jan 7, 2026 8:31pm

Copilot

Pull request overview

This PR adds React Native support to the FCL SDK by introducing a new @onflow/react-native-sdk package with Fund and FundContent components, along with improvements to theming and code organization across packages.

Changes:

Introduces @onflow/react-native-sdk package with Connect, Profile, Fund, and FundContent components for React Native applications
Refactors theming system in @onflow/react-sdk to use a more flexible color-based approach
Consolidates shared providers (FlowQueryClientProvider, GlobalTransactionProvider) in @onflow/react-core

Reviewed changes

Copilot reviewed 59 out of 60 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/react-native-sdk/*	New React Native SDK package with components, styles, icons, and providers
packages/react-sdk/src/core/theme.tsx	Refactored theme system from variant-based to color-based
packages/react-sdk/src/components/*.tsx	Updated components to use new theming system
packages/react-core/src/provider/*	Moved shared providers from react-sdk to react-core
packages/fcl-react-native/src/*	Enhanced WalletConnect integration and modal improvements

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-14T23:19:20Z

packages/fcl-react-native/src/walletconnect/service.ts

+  const uid =
+    method === FLOW_METHODS.FLOW_AUTHN
+      ? service.uid
+      : storedWalletAppLink || service.uid


The logic for determining the UID could be simplified. Consider extracting the ternary into a more readable conditional structure or adding a comment explaining when storedWalletAppLink vs service.uid is used.

Suggested change

const uid =

method === FLOW_METHODS.FLOW_AUTHN

? service.uid

: storedWalletAppLink || service.uid

// For FLOW_AUTHN always use the service UID. For other methods, prefer a stored

// wallet app link when available, falling back to the service UID.

let uid = service.uid

if (method !== FLOW_METHODS.FLOW_AUTHN && storedWalletAppLink) {

uid = storedWalletAppLink

}

Copilot · 2026-01-14T23:19:21Z

packages/react-native-sdk/src/components/FundContent.tsx

+]
+
+type TabType = "credit-card" | "crypto-transfer"
+


The placeholder address appears to be hardcoded. Consider documenting why this specific format was chosen or whether it should match the Flow address format more closely.

Suggested change

// NOTE: This is a UI-only demo placeholder and is not a real deposit address.

// It is intentionally not guaranteed to match Flow (or any chain's) address format.

// In production, replace this with a valid, chain-appropriate deposit address.

Copilot · 2026-01-14T23:19:21Z

packages/react-native-sdk/src/components/FundContent.tsx

+    // TODO: Implement continue functionality for credit card
+    console.log("Continue with amount:", amount)


This TODO comment indicates incomplete functionality. Consider either implementing the credit card flow or documenting in the component's JSDoc that this is placeholder functionality.

Copilot · 2026-01-14T23:19:22Z

packages/fcl-react-native/src/fcl-react-native.ts

+// Polyfill must be imported first
+// This provides crypto.getRandomValues for WalletConnect


While the comment explains why this import is first, consider documenting this requirement in the package README to help users understand the dependency.

Suggested change

// Polyfill must be imported first

// This provides crypto.getRandomValues for WalletConnect

// Polyfill must be imported first, before any code that relies on crypto.getRandomValues.

// This provides crypto.getRandomValues for WalletConnect. See the package README for details.

Copilot · 2026-01-14T23:19:22Z

packages/react-native-sdk/src/provider/FlowProvider.tsx

+let cachedFlowClient: ReturnType<typeof createFlowClient> | null = null
+let cachedConfigKey: string | null = null


Using module-level singleton state can cause issues in testing and with hot module replacement. Consider documenting this design decision or exploring alternatives like React Context for state management.

Copilot · 2026-01-14T23:19:23Z

packages/react-core/src/provider/GlobalTransactionProvider.tsx

-    // Subscribe to transaction updates
    const unsub = fcl.tx(txId).subscribe(
-      txStatus => {
+      (txStatus: {status: number}) => {


The inline type annotation {status: number} is too generic. Consider importing and using the proper TransactionStatus type from @onflow/typedefs for better type safety.

Copilot · 2026-01-14T23:19:24Z

packages/react-native-sdk/src/components/Profile.tsx

+      } catch {
+        // Silently fail - clipboard may not be available in all environments
+      }


Silent failure in the copy operation provides no feedback to users when clipboard access fails. Consider showing a toast or error message to inform users of the failure.

Copilot · 2026-01-14T23:19:24Z

packages/react-native-sdk/src/components/Connect.tsx

+      } catch {
+        // Authentication was cancelled or failed - no action needed


Catching and silently ignoring authentication errors may hide important issues. Consider logging the error or providing user feedback for unexpected failures vs. user cancellations.

Suggested change

} catch {

// Authentication was cancelled or failed - no action needed

} catch (error) {

// Authentication was cancelled or failed - log for diagnostics

console.error("Wallet authentication failed or was cancelled:", error)

chasefleming · 2026-01-20T22:32:40Z

packages/react-native-sdk/src/components/Connect.tsx

+ * />
+ * ```
+ */
+export function Connect({


Why is the connect component in this PR?

That's because feature/fund branch was created from master before the creation of the react-native-sdk package and so here the branch is also getting those files!

mfbz and others added 11 commits December 16, 2025 22:00

Version Packages (#2771)

4c2d6cc

* Version Packages * Fixed Version Packages * Fixed react-core deps --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: mfbz <mfbz@users.noreply.github.com>

Improved wc redirect flexibility and ConnectModal (#2774)

d8cbe12

* Added singleton to flowprovider client * Improved routing flexibility * Added changeset * Centered ConnectModal --------- Co-authored-by: mfbz <mfbz@users.noreply.github.com>

Version Packages (#2775)

b1ff6f3

* Version Packages * Fixed Version Packages --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: mfbz <mfbz@users.noreply.github.com>

Use internal button on nft card (#2750)

e98815e

* Use internal button on nft card * Add changeset --------- Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

Version Packages (#2778)

4d04a7e

* Version Packages --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

Merge branch 'master' into mfbz/react-native-fund

4a26ed1

Fixed package lock file after merge

ae3e2f2

Added Fund and FundContent components

6f74d1f

Added changeset

cbccbfd

mfbz requested a review from a team as a code owner January 7, 2026 20:29

mfbz marked this pull request as draft January 7, 2026 20:29

vercel bot deployed to Preview January 7, 2026 20:31 View deployment

mfbz marked this pull request as ready for review January 9, 2026 22:14

chasefleming requested a review from Copilot January 14, 2026 23:18

Copilot AI reviewed Jan 14, 2026

View reviewed changes

chasefleming reviewed Jan 20, 2026

View reviewed changes

mfbz requested a review from chasefleming January 21, 2026 21:16

-  const uid =
-    method === FLOW_METHODS.FLOW_AUTHN
-      ? service.uid
-      : storedWalletAppLink || service.uid
+  // For FLOW_AUTHN always use the service UID. For other methods, prefer a stored
+  // wallet app link when available, falling back to the service UID.
+  let uid = service.uid
+  if (method !== FLOW_METHODS.FLOW_AUTHN && storedWalletAppLink) {
+    uid = storedWalletAppLink
+  }

+// NOTE: This is a UI-only demo placeholder and is not a real deposit address.
+// It is intentionally not guaranteed to match Flow (or any chain's) address format.
+// In production, replace this with a valid, chain-appropriate deposit address.

		// TODO: Implement continue functionality for credit card
		console.log("Continue with amount:", amount)

		// Polyfill must be imported first
		// This provides crypto.getRandomValues for WalletConnect

		let cachedFlowClient: ReturnType<typeof createFlowClient> \| null = null
		let cachedConfigKey: string \| null = null

		} catch {
		// Authentication was cancelled or failed - no action needed

-      } catch {
-        // Authentication was cancelled or failed - no action needed
+      } catch (error) {
+        // Authentication was cancelled or failed - log for diagnostics
+        console.error("Wallet authentication failed or was cancelled:", error)

Conversation

mfbz commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Jan 7, 2026

🦋 Changeset detected

Uh oh!

vercel bot commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

chasefleming Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

mfbz Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

mfbz commented Jan 7, 2026 •

edited

Loading

vercel bot commented Jan 7, 2026 •

edited

Loading