Add Fund and FundContent components to React Native SDK

.changeset/old-tires-refuse.md

@@ -0,0 +1,10 @@
+---
+"@onflow/react-native-sdk": minor
+"@onflow/fcl-bundle": minor
+"@onflow/react-sdk": minor
+"@onflow/payments": minor
+"@onflow/demo": minor
+"@onflow/fcl": minor
+---
+
+Added Fund and FundContent components to React Native SDK

packages/demo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @onflow/demo
 
+## 1.9.0
+
+### Minor Changes
+
+- [#2745](https://github.com/onflow/fcl-js/pull/2745) [`706e08247a1e13eb49f01671772e2172bf664338`](https://github.com/onflow/fcl-js/commit/706e08247a1e13eb49f01671772e2172bf664338) Thanks [@mfbz](https://github.com/mfbz)! - Added react-native-sdk package, similar to react-sdk but for react-native applications. It fully supports all the same hooks available in react-sdk, plus the connect and profile components. It leverages fcl-react-native for managing blockchain interactions and it's compatible to both react-native and expo applications.
+
 ## 1.8.1
 
 ### Patch Changes

packages/demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onflow/demo",
   "private": true,
-  "version": "1.8.1",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "dev": "cross-env VITE_FLOW_NETWORK=emulator vite",

packages/demo/src/components/advanced-cards/theming-card.tsx

@@ -9,16 +9,16 @@ const THEMING_CODE = `import { FlowProvider } from "@onflow/react-sdk"
 
 const customTheme = {
   colors: {
-    primary: {
-      background: "flow-bg-purple-600 dark:flow-bg-purple-400",
-      text: "flow-text-white dark:flow-text-purple-900",
-      hover: "hover:flow-bg-purple-700 dark:hover:flow-bg-purple-300"
-    },
-    secondary: {
-      background: "flow-bg-emerald-500 dark:flow-bg-emerald-400",
-      text: "flow-text-white dark:flow-text-emerald-900",
-      hover: "hover:flow-bg-emerald-600 dark:hover:flow-bg-emerald-300"
-    }
+    primary: "flow-bg-purple-600 dark:flow-bg-purple-400",
+    primaryForeground: "flow-text-white dark:flow-text-white",
+    secondary: "flow-bg-purple-100 dark:flow-bg-purple-900",
+    secondaryForeground: "flow-text-purple-900 dark:flow-text-purple-100",
+    accent: "flow-bg-purple-700 dark:flow-bg-purple-300",
+    background: "flow-bg-white dark:flow-bg-purple-950",
+    foreground: "flow-text-purple-900 dark:flow-text-purple-100",
+    muted: "flow-bg-purple-50 dark:flow-bg-purple-800",
+    mutedForeground: "flow-text-purple-500 dark:flow-text-purple-400",
+    border: "flow-border-purple-200 dark:flow-border-purple-700",
   }
 }
 
@@ -52,13 +52,17 @@ export function ThemingCard() {
       name: "Purple Theme",
       theme: {
         colors: {
-          primary: {
-            background: darkMode ? "flow-bg-purple-400" : "flow-bg-purple-600",
-            text: "flow-text-white",
-            hover: darkMode
-              ? "hover:flow-bg-purple-300"
-              : "hover:flow-bg-purple-700",
-          },
+          primary: "flow-bg-purple-600 dark:flow-bg-purple-400",
+          primaryForeground: "flow-text-white",
+          secondary: "flow-bg-purple-100 dark:flow-bg-purple-900",
+          secondaryForeground: "flow-text-purple-900 dark:flow-text-purple-100",
+          accent: "flow-bg-purple-700 dark:flow-bg-purple-300",
+          background: "flow-bg-white dark:flow-bg-purple-950",
+          foreground: "flow-text-purple-900 dark:flow-text-purple-100",
+          muted: "flow-bg-purple-50 dark:flow-bg-purple-800",
+          mutedForeground: "flow-text-purple-500 dark:flow-text-purple-400",
+          border: "flow-border-purple-200 dark:flow-border-purple-700",
+          link: "flow-text-purple-600 dark:flow-text-purple-300",
         },
       },
       colors: {
@@ -71,15 +75,18 @@ export function ThemingCard() {
       name: "Emerald Theme",
       theme: {
         colors: {
-          primary: {
-            background: darkMode
-              ? "flow-bg-emerald-400"
-              : "flow-bg-emerald-600",
-            text: "flow-text-white",
-            hover: darkMode
-              ? "hover:flow-bg-emerald-300"
-              : "hover:flow-bg-emerald-700",
-          },
+          primary: "flow-bg-emerald-600 dark:flow-bg-emerald-400",
+          primaryForeground: "flow-text-white",
+          secondary: "flow-bg-emerald-100 dark:flow-bg-emerald-900",
+          secondaryForeground:
+            "flow-text-emerald-900 dark:flow-text-emerald-100",
+          accent: "flow-bg-emerald-700 dark:flow-bg-emerald-300",
+          background: "flow-bg-white dark:flow-bg-emerald-950",
+          foreground: "flow-text-emerald-900 dark:flow-text-emerald-100",
+          muted: "flow-bg-emerald-50 dark:flow-bg-emerald-800",
+          mutedForeground: "flow-text-emerald-500 dark:flow-text-emerald-400",
+          border: "flow-border-emerald-200 dark:flow-border-emerald-700",
+          link: "flow-text-emerald-600 dark:flow-text-emerald-300",
         },
       },
       colors: {
@@ -92,13 +99,17 @@ export function ThemingCard() {
       name: "Rose Theme",
       theme: {
         colors: {
-          primary: {
-            background: darkMode ? "flow-bg-rose-400" : "flow-bg-rose-600",
-            text: "flow-text-white",
-            hover: darkMode
-              ? "hover:flow-bg-rose-300"
-              : "hover:flow-bg-rose-700",
-          },
+          primary: "flow-bg-rose-600 dark:flow-bg-rose-400",
+          primaryForeground: "flow-text-white",
+          secondary: "flow-bg-rose-100 dark:flow-bg-rose-900",
+          secondaryForeground: "flow-text-rose-900 dark:flow-text-rose-100",
+          accent: "flow-bg-rose-700 dark:flow-bg-rose-300",
+          background: "flow-bg-white dark:flow-bg-rose-950",
+          foreground: "flow-text-rose-900 dark:flow-text-rose-100",
+          muted: "flow-bg-rose-50 dark:flow-bg-rose-800",
+          mutedForeground: "flow-text-rose-500 dark:flow-text-rose-400",
+          border: "flow-border-rose-200 dark:flow-border-rose-700",
+          link: "flow-text-rose-600 dark:flow-text-rose-300",
         },
       },
       colors: {

packages/demo/src/components/starter-banner.tsx

@@ -30,46 +30,91 @@ export function StarterBanner() {
         <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z" />
       </svg>
 
-      <div
-        className="relative overflow-hidden rounded-xl border border-flow-primary/20
-          bg-gradient-to-r from-flow-50 to-emerald-50 dark:from-flow-900/20
-          dark:to-emerald-900/20 p-6"
-      >
-        <div className="relative flex flex-col sm:flex-row items-start sm:items-center gap-4">
-          <div className="flex flex-col gap-1 flex-1">
-            <h3 className="text-base font-semibold text-gray-900 dark:text-white">
-              Looking for a starter?
-            </h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              Try our Next.js starter template with Flow React SDK
-              pre-configured and ready to be used.
-            </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+        <div
+          className="relative overflow-hidden rounded-xl border border-flow-primary/20
+            bg-gradient-to-r from-flow-50 to-emerald-50 dark:from-flow-900/20
+            dark:to-emerald-900/20 p-6"
+        >
+          <div className="relative flex flex-col gap-4">
+            <div className="flex flex-col gap-1 flex-1">
+              <h3 className="text-base font-semibold text-gray-900 dark:text-white">
+                Looking for a starter?
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Try our Next.js starter template with Flow React SDK
+                pre-configured and ready to be used.
+              </p>
+            </div>
+
+            <a
+              href="https://github.com/onflow/flow-react-sdk-starter"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="self-start inline-flex items-center gap-2 px-4 py-2.5 rounded-lg font-semibold
+                text-sm bg-flow-primary hover:bg-flow-primary/90 text-gray-900 transition-colors
+                duration-200"
+            >
+              View Starter
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
+                />
+              </svg>
+            </a>
           </div>
+        </div>
+
+        <div
+          className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700
+            bg-gradient-to-r from-slate-50 to-gray-100 dark:from-slate-900/20
+            dark:to-gray-800/20 p-6"
+        >
+          <div className="relative flex flex-col gap-4">
+            <div className="flex flex-col gap-1 flex-1">
+              <h3 className="text-base font-semibold text-gray-900 dark:text-white">
+                Building for mobile?
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Try our Expo starter template with Flow React Native SDK
+                pre-configured and ready to be used.
+              </p>
+            </div>
 
-          <a
-            href="https://github.com/onflow/flow-react-sdk-starter"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2.5 rounded-lg
-              font-semibold text-sm bg-flow-primary hover:bg-flow-primary/90 text-gray-900
-              transition-colors duration-200"
-          >
-            View Starter
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
+            <a
+              href="https://github.com/onflow/flow-react-native-sdk-starter"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="self-start inline-flex items-center gap-2 px-4 py-2.5 rounded-lg font-semibold
+                text-sm bg-gray-800 hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600
+                text-white transition-colors duration-200"
             >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M13 7l5 5m0 0l-5 5m5-5H6"
-              />
-            </svg>
-          </a>
+              View Starter
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
+                />
+              </svg>
+            </a>
+          </div>
         </div>
       </div>
     </div>

packages/fcl-react-native/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @onflow/fcl-react-native
 
+## 1.22.0
+
+### Minor Changes
+
+- [#2774](https://github.com/onflow/fcl-js/pull/2774) [`d8cbe12f20ca9c047567155b40642e3dbea66c89`](https://github.com/onflow/fcl-js/commit/d8cbe12f20ca9c047567155b40642e3dbea66c89) Thanks [@mfbz](https://github.com/mfbz)! - Improved wc redirect flexibility and updated connect modal to be normal centered modal for better layout support.
+
+## 1.21.0
+
+### Minor Changes
+
+- [#2745](https://github.com/onflow/fcl-js/pull/2745) [`706e08247a1e13eb49f01671772e2172bf664338`](https://github.com/onflow/fcl-js/commit/706e08247a1e13eb49f01671772e2172bf664338) Thanks [@mfbz](https://github.com/mfbz)! - Added react-native-sdk package, similar to react-sdk but for react-native applications. It fully supports all the same hooks available in react-sdk, plus the connect and profile components. It leverages fcl-react-native for managing blockchain interactions and it's compatible to both react-native and expo applications.
+
 ## 1.20.1
 
 ### Patch Changes

packages/fcl-react-native/README.md

@@ -38,3 +38,9 @@ npm install --save @onflow/fcl @onflow/types
 For a detailed guide explaining how to use `@onflow/fcl` to interact with Flow please see the [Flow App Quick Start](https://developers.flow.com/tutorials/flow-app-quickstart)
 
 Having trouble with something? Reach out to us on [Discord](https://discord.gg/k6cZ7QC), we are more than happy to help.
+
+## WalletConnect Deeplinks
+
+This package uses `wc-redirect` as the deeplink path for WalletConnect redirects (e.g., `myapp://wc-redirect`). When a wallet approves a connection or transaction, it redirects back to your app using this path.
+
+If you're using Expo Router, you may want to intercept this path to prevent unwanted navigation. See `@onflow/react-native-sdk` README for details.

packages/fcl-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onflow/fcl-react-native",
-  "version": "1.20.1",
+  "version": "1.22.0",
   "description": "React Native JavaScript/TypeScript library for building mobile applications on the Flow blockchain.",
   "license": "Apache-2.0",
   "author": "Flow Foundation",

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

@@ -6,6 +6,7 @@ import {
 import {getAsyncStorage} from "./utils/react-native/storage"
 import {loadFclWc} from "./walletconnect/loader"
 import {DISCOVERY_RN_METHOD} from "./utils/react-native/constants"
+import {disconnectWalletConnect} from "./walletconnect/client"
 
 const PLATFORM = "react-native"
 
@@ -31,9 +32,9 @@ export interface FlowClientConfig
  * Creates a Flow client instance with authentication, transaction, and query capabilities for React Native.
  *
  * @param params Configuration object for the Flow client
- * @returns A promise that resolves to a Flow client object with many methods for interacting with the Flow blockchain
+ * @returns A Flow client object with many methods for interacting with the Flow blockchain
  */
-export async function createFlowClient(params: FlowClientConfig) {
+export function createFlowClient(params: FlowClientConfig) {
   // TODO: Load into the global plugin registry for now. This should be
   // refactored to use a plugin registry bound to the client instance in the future.
   // Auto-load WalletConnect plugin when projectId is provided
@@ -71,7 +72,14 @@ export async function createFlowClient(params: FlowClientConfig) {
     serviceOpenIdScopes: params.serviceOpenIdScopes,
   })
 
+  // Create unauthenticate that also disconnects WalletConnect sessions
+  const unauthenticate = async () => {
+    fclCore.unauthenticate()
+    await disconnectWalletConnect()
+  }
+
   return {
     ...fclCore,
+    unauthenticate,
   }
 }

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

@@ -1,3 +1,7 @@
+// Polyfill must be imported first
+// This provides crypto.getRandomValues for WalletConnect
+import "react-native-get-random-values"
+
 export {
   VERSION,
   query,
@@ -76,7 +80,7 @@ import {
   setIsReactNative,
 } from "@onflow/fcl-core"
 
-import {getClient} from "./walletconnect/client"
+import {disconnectWalletConnect} from "./walletconnect/client"
 
 // Get AsyncStorage instance when module loads
 // This ensures storage is ready before any component subscribes to currentUser
@@ -93,32 +97,8 @@ export const mutate = getMutate(currentUser)
 export const authenticate = (opts = {}) => currentUser().authenticate(opts)
 
 export const unauthenticate = async () => {
-  // First unauthenticate from FCL
   currentUser().unauthenticate()
-
-  // Then disconnect WalletConnect (both sessions and pairings for complete cleanup)
-  try {
-    const client = await getClient()
-    if (!client) return
-
-    const sessions = client.session.getAll()
-    const pairings = client.core.pairing.pairings.getAll()
-
-    // Disconnect all in parallel
-    await Promise.allSettled([
-      ...sessions.map((session: any) =>
-        client.disconnect({
-          topic: session.topic,
-          reason: {code: 6000, message: "User disconnected"},
-        })
-      ),
-      ...pairings.map((pairing: any) =>
-        client.core.pairing.disconnect({topic: pairing.topic})
-      ),
-    ])
-  } catch {
-    // WC client not initialized or disconnect failed (safe to ignore)
-  }
+  await disconnectWalletConnect()
 }
 
 export const reauthenticate = async (opts = {}) => {