Load FCL-WC in createFlowClient (#2614)

jribbink · web-flow · commit c5191ab2f512 · 2025-07-24T14:25:27.000-07:00
diff --git a/.changeset/shaggy-starfishes-attend.md b/.changeset/shaggy-starfishes-attend.md
@@ -0,0 +1,5 @@
+---
+"@onflow/fcl-wc": minor
+---
+
+Add support for manually passing a `network` to `createSessionProposal`
diff --git a/.changeset/spicy-otters-camp.md b/.changeset/spicy-otters-camp.md
@@ -0,0 +1,5 @@
+---
+"@onflow/fcl-core": minor
+---
+
+Remove unused WalletConnect configuration options from `createFlowClient`
diff --git a/.changeset/wild-taxis-behave.md b/.changeset/wild-taxis-behave.md
@@ -0,0 +1,5 @@
+---
+"@onflow/fcl": minor
+---
+
+Load FCL-WC in `createFlowClient`
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/demo/src/components/flow-provider-wrapper.tsx b/packages/demo/src/components/flow-provider-wrapper.tsx
@@ -62,10 +62,11 @@ export default function FlowProviderWrapper({
         config={{
           ...flowConfig[flowNetwork],
           appDetailTitle: "Demo App",
+          appDetailUrl: window.location.origin,
           appDetailIcon: "https://avatars.githubusercontent.com/u/62387156?v=4",
-          appDetailUrl: "https://yourapp.com",
           appDetailDescription: "Your app description",
           computeLimit: 1000,
+          walletconnectProjectId: "9b70cfa398b2355a5eb9b1cf99f4a981",
         }}
         flowJson={flowJSON}
         colorMode={darkMode ? "dark" : "light"}
diff --git a/packages/demo/vite.config.ts b/packages/demo/vite.config.ts
@@ -4,4 +4,7 @@ import react from "@vitejs/plugin-react"
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    allowedHosts: true,
+  },
 })
diff --git a/packages/fcl-core/src/client.ts b/packages/fcl-core/src/client.ts
@@ -23,10 +23,6 @@ export interface FlowClientCoreConfig {
   discoveryAuthnEndpoint?: string
   discoveryAuthnInclude?: string[]
 
-  // WalletConnect configuration
-  walletconnectProjectId?: string
-  walletconnectDisableNotifications?: boolean
-
   // Compute limit for transactions
   computeLimit: number
 
diff --git a/packages/fcl-core/src/context/index.ts b/packages/fcl-core/src/context/index.ts
@@ -16,8 +16,6 @@ interface FCLConfig {
   discoveryAuthnEndpoint?: string
   discoveryAuthnInclude?: string[]
   flowNetwork?: string
-  walletconnectProjectId?: string
-  walletconnectDisableNotifications?: boolean
   storage: StorageProvider
   discovery?: {
     execStrategy?: (...args: any[]) => any
@@ -125,11 +123,6 @@ export function createConfigService(config: FCLConfig): ConfigService {
     ["discovery.wallet.method", config.discoveryWalletMethod],
     ["discovery.authn.endpoint", config.discoveryAuthnEndpoint],
     ["flow.network", config.flowNetwork],
-    ["walletconnectProjectId", config.walletconnectProjectId],
-    [
-      "walletconnect.disableNotifications",
-      config.walletconnectDisableNotifications,
-    ],
     ["accessNode.api", config.accessNodeUrl],
     ["fcl.limit", config.computeLimit],
     ["app.detail.title", config.appDetailTitle],
diff --git a/packages/fcl-wc/src/service.ts b/packages/fcl-wc/src/service.ts
@@ -117,6 +117,7 @@ const makeExec = (
           wcRequestHook,
           pairingModalOverride,
           abortSignal,
+          network: opts.config.client.network,
         }).then(resolve, reject)
       })
     }
@@ -188,6 +189,7 @@ function connectWc(
     wcRequestHook,
     pairingModalOverride,
     abortSignal,
+    network,
   }: {
     service: any
     onClose: any
@@ -198,6 +200,7 @@ function connectWc(
     wcRequestHook: any
     pairingModalOverride: any
     abortSignal?: AbortSignal
+    network: string
   }): Promise<SessionTypes.Struct> => {
     const projectId = provider.providerOpts.projectId
     invariant(
@@ -212,6 +215,7 @@ function connectWc(
       const {uri, approval} = await createSessionProposal({
         provider,
         existingPairing: pairing,
+        network,
       })
 
       if (wcRequestHook && wcRequestHook instanceof Function) {
diff --git a/packages/fcl-wc/src/session.ts b/packages/fcl-wc/src/session.ts
@@ -8,11 +8,13 @@ import {Service} from "@onflow/typedefs"
 export async function createSessionProposal({
   provider,
   existingPairing,
+  network,
 }: {
   provider: InstanceType<typeof UniversalProvider>
   existingPairing?: PairingTypes.Struct
+  network?: string
 }) {
-  const network = await fclCore.getChainId()
+  const _network = network || (await fclCore.getChainId())
 
   const requiredNamespaces = {
     flow: {
@@ -22,7 +24,7 @@ export async function createSessionProposal({
         FLOW_METHODS.FLOW_AUTHZ,
         FLOW_METHODS.FLOW_USER_SIGN,
       ],
-      chains: [`flow:${network}`],
+      chains: [`flow:${_network}`],
       events: ["chainChanged", "accountsChanged"],
     },
   }
diff --git a/packages/fcl/src/client.ts b/packages/fcl/src/client.ts
@@ -5,6 +5,7 @@ import {
 } from "@onflow/fcl-core"
 import {LOCAL_STORAGE} from "./fcl"
 import {execStrategyHook} from "./discovery/exec-hook"
+import {loadFclWc} from "./utils/walletconnect/loader"
 
 const PLATFORM = "web"
 
@@ -48,6 +49,18 @@ export interface 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.
+  loadFclWc({
+    walletConnectProjectId: params.walletconnectProjectId,
+    walletConnectDisableNotifications: params.walletconnectDisableNotifications,
+    appDetailTitle: params.appDetailTitle,
+    appDetailIcon: params.appDetailIcon,
+    appDetailDescription: params.appDetailDescription,
+    appDetailUrl: params.appDetailUrl,
+  })
+
   const fclCore = createFlowClientCore({
     flowNetwork: params.flowNetwork,
     flowJson: params.flowJson,
@@ -63,8 +76,6 @@ export function createFlowClient(params: FlowClientConfig) {
     customResolver: params.customResolver,
     customDecoders: params.customDecoders,
     discoveryWallet: params.discoveryWallet,
-    walletconnectProjectId: params.walletconnectProjectId,
-    walletconnectDisableNotifications: params.walletconnectDisableNotifications,
     appDetailTitle: params.appDetailTitle,
     appDetailIcon: params.appDetailIcon,
     appDetailDescription: params.appDetailDescription,
diff --git a/packages/fcl/src/discovery/rpc/client.ts b/packages/fcl/src/discovery/rpc/client.ts
@@ -24,6 +24,7 @@ export function createDiscoveryRpcClient({
   rpc.on(
     FclRequest.REQUEST_WALLETCONNECT_QRCODE,
     wcRequestHandlerFactory({
+      network: opts.config.client.network,
       rpc,
       onExecResult,
       authnBody: body,
diff --git a/packages/fcl/src/discovery/rpc/handlers/request-wc-qr.ts b/packages/fcl/src/discovery/rpc/handlers/request-wc-qr.ts
@@ -9,11 +9,13 @@ import {DiscoveryNotification, DiscoveryRpc} from "../requests"
 // RPC handler for handling WalletConnect QR code requests
 export const wcRequestHandlerFactory = ({
   rpc,
+  network,
   onExecResult,
   authnBody,
   abortSignal,
 }: {
   rpc: DiscoveryRpc
+  network: string
   onExecResult: (result: any) => void
   authnBody: any
   abortSignal: AbortSignal
@@ -33,6 +35,7 @@ export const wcRequestHandlerFactory = ({
     // Execute WC bypass if session is approved
     const {uri, approval} = await createSessionProposal({
       provider,
+      network,
     })
 
     // Watch for QR code connection asynchronously
diff --git a/packages/fcl/src/utils/walletconnect/loader.ts b/packages/fcl/src/utils/walletconnect/loader.ts
@@ -1,4 +1,4 @@
-import {config} from "@onflow/config"
+import {config, type config as _config} from "@onflow/config"
 import {pluginRegistry} from "@onflow/fcl-core"
 import {invariant} from "@onflow/util-invariant"
 import * as fclWc from "@onflow/fcl-wc"
@@ -7,15 +7,15 @@ import {CoreTypes} from "@walletconnect/types"
 export const isServer = typeof window === "undefined"
 
 const getMetadata = (config: {
-  "app.detail.title": string | undefined | null
-  "app.detail.icon": string | undefined | null
-  "app.detail.description": undefined | null
-  "app.detail.url": string | undefined | null
+  appDetailTitle?: string | null
+  appDetailIcon?: string | null
+  appDetailDescription?: string | null
+  appDetailUrl?: string | null
 }): CoreTypes.Metadata => {
-  const appTitle = config["app.detail.title"]
-  const appIcon = config["app.detail.icon"]
-  const appDescription = config["app.detail.description"]
-  const appUrl = config["app.detail.url"]
+  const appTitle = config.appDetailTitle
+  const appIcon = config.appDetailIcon
+  const appDescription = config.appDetailDescription
+  const appUrl = config.appDetailUrl
 
   return {
     name: appTitle ?? document.title,
@@ -25,86 +25,96 @@ const getMetadata = (config: {
   }
 }
 
-export function initFclWcLoader() {
-  // We cannot load WalletConnect plugin on server side
-  if (isServer) {
-    return
-  }
-
-  // Use previous configuration to check for changes & notify the user that this is not possible
-  let lastConfig: string | null = null
+// Use previous configuration to check for changes & notify the user that this is not possible
+let lastConfig: string | null = null
 
-  // Only the first configuration will be used
-  let hasLoaded = false
+// Only the first configuration will be used
+let hasLoaded = false
 
+export function initFclWcLoader() {
   config.subscribe(async (fullConfig: any) => {
     const wcConfig = {
-      "walletconnect.projectId": fullConfig["walletconnect.projectId"],
-      "walletconnect.disableNotifications":
+      walletConnectProjectId: fullConfig["walletconnect.projectId"],
+      walletConnectDisableNotifications:
         fullConfig["walletconnect.disableNotifications"],
-      "app.detail.title": fullConfig["app.detail.title"],
-      "app.detail.icon": fullConfig["app.detail.icon"],
-      "app.detail.description": fullConfig["app.detail.description"],
-      "app.detail.url": fullConfig["app.detail.url"],
+      appDetailTitle: fullConfig["app.detail.title"],
+      appDetailIcon: fullConfig["app.detail.icon"],
+      appDetailDescription: fullConfig["app.detail.description"],
+      appDetailUrl: fullConfig["app.detail.url"],
     }
-    const projectId: string | undefined = wcConfig["walletconnect.projectId"]
-    const disableNotifications: boolean | undefined =
-      wcConfig["walletconnect.disableNotifications"]
+    loadFclWc(wcConfig)
+  })
+}
+
+export function loadFclWc(wcConfig: {
+  walletConnectProjectId?: string | null
+  walletConnectDisableNotifications?: boolean | null
+  appDetailTitle?: string | null
+  appDetailIcon?: string | null
+  appDetailDescription?: string | null
+  appDetailUrl?: string | null
+}) {
+  // We cannot load WalletConnect plugin on server side
+  if (isServer) {
+    return
+  }
 
-    // Check if the plugin is already loaded by this loader, but with different configuration
-    // The plugin can only be loaded once
-    const previousConfig = lastConfig
-    lastConfig = JSON.stringify(wcConfig, null, 2)
-    if (hasLoaded) {
-      if (previousConfig !== lastConfig) {
-        console.warn(
-          `FCL WalletConnect Plugin has been already loaded with different configuration. It is not possible to change the configuration after the plugin has been loaded.
+  const projectId: string | undefined | null = wcConfig.walletConnectProjectId
+  const disableNotifications: boolean | undefined | null =
+    wcConfig.walletConnectDisableNotifications
+
+  // Check if the plugin is already loaded by this loader, but with different configuration
+  // The plugin can only be loaded once
+  const previousConfig = lastConfig
+  lastConfig = JSON.stringify(wcConfig, null, 2)
+  if (hasLoaded) {
+    if (previousConfig !== lastConfig) {
+      console.warn(
+        `FCL WalletConnect Plugin has been already loaded with different configuration. It is not possible to change the configuration after the plugin has been loaded.
 
 Previous configuration:
 ${previousConfig}
 
 Current configuration:
 ${lastConfig}`
-        )
-      }
-      return
+      )
     }
+    return
+  }
 
-    // If the configuration is not set, we do not load the plugin
-    const isConfigured = !!projectId
-    if (!isConfigured) {
-      return
-    }
+  // If the configuration is not set, we do not load the plugin
+  const isConfigured = !!projectId
+  if (!isConfigured) {
+    return
+  }
 
-    invariant(
-      !!projectId,
-      "FCL Configuration value for 'walletconnect.projectId' is required"
-    )
+  invariant(
+    !!projectId,
+    "FCL Configuration value for 'walletconnect.projectId' is required"
+  )
 
-    // Check if the plugin is already loaded manually
-    // Usually this won't happen as it is more likely that the plugin will be loaded by this loader
-    // before the developer has a chance to load it manually, but it's good to check
-    if (pluginRegistry.getPlugins().has(fclWc.SERVICE_PLUGIN_NAME)) {
-      if (!hasLoaded) {
-        console.warn(
-          "It seems like the FCL WalletConnect plugins has been already loaded manually. This is no longer necessary, please see the documentation for more information."
-        )
-      }
-      hasLoaded = true
-      return
+  // Check if the plugin is already loaded manually
+  // Usually this won't happen as it is more likely that the plugin will be loaded by this loader
+  // before the developer has a chance to load it manually, but it's good to check
+  if (pluginRegistry.getPlugins().has(fclWc.SERVICE_PLUGIN_NAME)) {
+    if (!hasLoaded) {
+      console.warn(
+        "It seems like the FCL WalletConnect plugins has been already loaded manually. This is no longer necessary, please see the documentation for more information."
+      )
     }
     hasLoaded = true
+    return
+  }
+  hasLoaded = true
 
-    // Load the plugin if not already loaded
-    // We must lazy load the plugin to avoid race conditions
-    // where the developer attempts to use the plugin before
-    // our loader applies the configuration
-    const {providerPromise: _clientPromise, FclWcServicePlugin} =
-      fclWc.initLazy({
-        projectId,
-        metadata: getMetadata(wcConfig),
-        disableNotifications: disableNotifications,
-      })
-    pluginRegistry.add([FclWcServicePlugin])
+  // Load the plugin if not already loaded
+  // We must lazy load the plugin to avoid race conditions
+  // where the developer attempts to use the plugin before
+  // our loader applies the configuration
+  const {providerPromise: _clientPromise, FclWcServicePlugin} = fclWc.initLazy({
+    projectId,
+    metadata: getMetadata(wcConfig),
+    disableNotifications: disableNotifications ?? undefined,
   })
+  pluginRegistry.add([FclWcServicePlugin])
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@onflow/fcl-wc": minor
 +---
++
 +Add support for manually passing a `network` to `createSessionProposal`