Improved wc redirect flexibility and ConnectModal

.changeset/pretty-walls-live.md

@@ -0,0 +1,6 @@
+---
+"@onflow/fcl-react-native": minor
+"@onflow/react-native-sdk": minor
+---
+
+Improved wc redirect flexibility and updated connect modal to be normal centered modal for better layout support.

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/src/utils/react-native/ConnectModal.js

@@ -1,8 +1,8 @@
 import {Image} from "expo-image"
-import {createElement, useEffect, useRef, useState} from "react"
+import {createElement, useEffect, useState} from "react"
 import {
-  Animated,
   Modal,
+  Pressable,
   SafeAreaView,
   ScrollView,
   StyleSheet,
@@ -92,40 +92,15 @@ export const ConnectModal = ({
 }) => {
   const {services, isLoading} = useServiceDiscovery({fcl})
 
-  // Animation values
-  const backdropOpacity = useRef(new Animated.Value(0)).current
-  const slideAnim = useRef(new Animated.Value(300)).current
-
   // Double-click protection
   const [isAuthenticating, setIsAuthenticating] = useState(false)
 
-  // Animate backdrop and content when modal visibility changes
+  // Reset authentication state when modal opens
   useEffect(() => {
     if (visible) {
-      // Fade in backdrop instantly (fast)
-      Animated.timing(backdropOpacity, {
-        toValue: 1,
-        duration: 200,
-        useNativeDriver: true,
-      }).start()
-
-      // Slide up content with spring animation
-      Animated.spring(slideAnim, {
-        toValue: 0,
-        tension: 65,
-        friction: 10,
-        useNativeDriver: true,
-      }).start()
-
-      // Reset authentication state when modal opens
-      setIsAuthenticating(false)
-    } else {
-      // Reset animations when modal closes
-      backdropOpacity.setValue(0)
-      slideAnim.setValue(300)
       setIsAuthenticating(false)
     }
-  }, [visible, backdropOpacity, slideAnim])
+  }, [visible])
 
   const handleServiceSelect = service => {
     // Prevent double-click: ignore if already authenticating
@@ -141,76 +116,70 @@ export const ConnectModal = ({
     {
       visible,
       transparent: true,
-      animationType: "none",
+      animationType: "fade",
       onRequestClose: onClose,
     },
     createElement(
-      Animated.View,
-      {style: [styles.backdrop, {opacity: backdropOpacity}]},
-      createElement(TouchableOpacity, {
-        style: styles.backdropTouchable,
-        activeOpacity: 1,
-        onPress: onClose,
-      }),
+      Pressable,
+      {style: styles.backdrop, onPress: onClose},
       createElement(
-        SafeAreaView,
-        {style: styles.safeArea},
+        Pressable,
+        {style: styles.modalContainer, onPress: e => e.stopPropagation()},
         createElement(
-          Animated.View,
-          {
-            style: [
-              styles.modalContent,
-              {transform: [{translateY: slideAnim}]},
-            ],
-          },
-          // Header
+          SafeAreaView,
+          {style: styles.safeArea},
           createElement(
             View,
-            {style: styles.header},
-            createElement(Text, {style: styles.title}, title),
+            {style: styles.modalContent},
+            // Header
             createElement(
-              TouchableOpacity,
-              {onPress: onClose, style: styles.closeButton},
-              createElement(Text, {style: styles.closeButtonText}, "✕")
-            )
-          ),
-          // Content
-          createElement(
-            Wrapper,
-            null,
-            isLoading &&
-              (Loading
-                ? createElement(Loading)
-                : createElement(
-                    View,
-                    {style: styles.loadingContainer},
-                    createElement(
-                      Text,
-                      {style: styles.loadingText},
-                      "Loading wallets..."
-                    )
-                  )),
-            !isLoading &&
-              services.length === 0 &&
-              (Empty
-                ? createElement(Empty)
-                : createElement(
-                    View,
-                    {style: styles.emptyContainer},
-                    createElement(
-                      Text,
-                      {style: styles.emptyText},
-                      "No wallets found"
-                    )
-                  )),
-            !isLoading &&
-              services.map((service, index) => {
-                return createElement(ServiceCard, {
-                  key: service?.provider?.address ?? service?.uid ?? index,
-                  service,
-                  onPress: () => handleServiceSelect(service),
+              View,
+              {style: styles.header},
+              createElement(Text, {style: styles.title}, title),
+              createElement(
+                TouchableOpacity,
+                {onPress: onClose, style: styles.closeButton},
+                createElement(Text, {style: styles.closeButtonText}, "✕")
+              )
+            ),
+            // Content
+            createElement(
+              Wrapper,
+              null,
+              isLoading &&
+                (Loading
+                  ? createElement(Loading)
+                  : createElement(
+                      View,
+                      {style: styles.loadingContainer},
+                      createElement(
+                        Text,
+                        {style: styles.loadingText},
+                        "Loading wallets..."
+                      )
+                    )),
+              !isLoading &&
+                services.length === 0 &&
+                (Empty
+                  ? createElement(Empty)
+                  : createElement(
+                      View,
+                      {style: styles.emptyContainer},
+                      createElement(
+                        Text,
+                        {style: styles.emptyText},
+                        "No wallets found"
+                      )
+                    )),
+              !isLoading &&
+                services.map((service, index) => {
+                  return createElement(ServiceCard, {
+                    key: service?.provider?.address ?? service?.uid ?? index,
+                    service,
+                    onPress: () => handleServiceSelect(service),
+                  })
                 })
-              })
+            )
           )
         )
       )
@@ -222,23 +191,27 @@ const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
-    justifyContent: "flex-end",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 16,
   },
-  backdropTouchable: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+  modalContainer: {
+    width: "100%",
+    maxWidth: 400,
+    maxHeight: "80%",
   },
   safeArea: {
-    maxHeight: "80%",
+    width: "100%",
   },
   modalContent: {
     backgroundColor: "#ffffff",
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
+    borderRadius: 20,
     overflow: "hidden",
+    shadowColor: "#000000",
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
   },
   header: {
     flexDirection: "row",

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

@@ -68,7 +68,9 @@ const initClient = async ({
     await initializeWalletConnect()
 
     // Auto-detect redirect URI using expo-linking (always available as dependency)
-    const redirect = Linking.createURL("")
+    // We use a unique path that apps can intercept
+    // This allows apps to handle the redirect however they want (e.g., stay on current screen)
+    const redirect = Linking.createURL("wc-redirect")
 
     // Build metadata
     const clientMetadata = metadata || {

packages/react-native-sdk/README.md

@@ -56,6 +56,12 @@ Here's a look at some of the hooks available. For a full list, see the [official
 - `<Connect />` - Wallet connection button with built-in profile modal
 - `<Profile />` - Displays connected wallet information with disconnect option
 
+## 🔗 WalletConnect Deeplinks
+
+This SDK 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.
+
+To prevent navigation flashes, you can intercept this path using Expo Router's `+native-intent.tsx`. See [Expo Router Native Intent documentation](https://docs.expo.dev/router/advanced/native-intent/) for details.
+
 ## 📚 Full Documentation
 
 Looking for full API docs, examples, and usage tips?

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

@@ -30,6 +30,23 @@ const defaultQueryOptions: DefaultOptions = {
   },
 }
 
+// Singleton to preserve flowClient across remounts (e.g., deeplink navigation)
+// This prevents auth state from being lost when expo-router causes remounts
+let cachedFlowClient: ReturnType<typeof createFlowClient> | null = null
+let cachedConfigKey: string | null = null
+
+function getConfigKey(
+  cfg: FlowConfig,
+  flowJson?: Record<string, unknown>
+): string {
+  // Create a stable key from config to detect if config actually changed
+  return JSON.stringify({
+    accessNodeUrl: cfg.accessNodeUrl,
+    flowNetwork: cfg.flowNetwork,
+    walletconnectProjectId: cfg.walletconnectProjectId,
+  })
+}
+
 export function FlowProvider({
   config: initialConfig = {},
   queryClient: _queryClient,
@@ -43,7 +60,14 @@ export function FlowProvider({
 
   const flowClient = useMemo(() => {
     if (_flowClient) return _flowClient
-    return createFlowClient({
+
+    // Check if we can reuse cached client (same config)
+    const configKey = getConfigKey(initialConfig, flowJson)
+    if (cachedFlowClient && cachedConfigKey === configKey) {
+      return cachedFlowClient
+    }
+
+    const client = createFlowClient({
       accessNodeUrl: initialConfig.accessNodeUrl!,
       discoveryWallet: initialConfig.discoveryWallet,
       discoveryWalletMethod: initialConfig.discoveryWalletMethod,
@@ -62,6 +86,12 @@ export function FlowProvider({
       appDetailUrl: initialConfig.appDetailUrl,
       serviceOpenIdScopes: initialConfig.serviceOpenIdScopes,
     })
+
+    // Cache for reuse across remounts
+    cachedFlowClient = client
+    cachedConfigKey = configKey
+
+    return client
   }, [_flowClient, initialConfig, flowJson])
 
   // Set discovery.authn.endpoint in global FCL config for ServiceDiscovery