PKG -- [fcl-wc] Add notifications prompting user to approve WC reques…

…ts in mobile wallet

.changeset/pre.json

@@ -26,7 +26,6 @@
     "@onflow/util-uid": "1.2.2"
   },
   "changesets": [
-    "lovely-bikes-applaud",
     "odd-actors-ring",
     "pink-students-divide",
     "slow-lies-fix",

.changeset/shaggy-snakes-vanish.md

@@ -0,0 +1,6 @@
+---
+"@onflow/fcl-core": patch
+"@onflow/fcl-wc": patch
+---
+
+Improve deeplinking for WC/RPC wallets using non-WC/RPC pre-authz services

.changeset/unlucky-melons-arrive.md

@@ -0,0 +1,6 @@
+---
+"@onflow/fcl-core": minor
+"@onflow/fcl-wc": minor
+---
+
+Fix deep linking issues to mobile wallets

.prettierrc

@@ -2,5 +2,6 @@
   "semi": false,
   "trailingComma": "es5",
   "bracketSpacing": false,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-classnames"]
 }

package.json

@@ -26,6 +26,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "lerna": "^8.1.8",
     "prettier": "^3.3.3",
+    "prettier-plugin-classnames": "^0.7.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.3"
   },

packages/fcl-bundle/package.json

@@ -18,12 +18,16 @@
     "@babel/preset-typescript": "^7.25.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-url": "^8.0.2",
+    "@rollup/pluginutils": "^5.1.2",
     "commander": "^12.1.0",
     "lodash": "^4.17.21",
     "rollup": "^4.24.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0"
   },
   "bin": {

packages/fcl-bundle/src/build/get-input-options.js

@@ -1,14 +1,23 @@
 const _ = require("lodash")
 
+const path = require("path")
+const fs = require("fs")
+const builtinModules = require("node:module").builtinModules
+
 const commonjs = require("@rollup/plugin-commonjs")
 const replace = require("@rollup/plugin-replace")
 const {nodeResolve} = require("@rollup/plugin-node-resolve")
 const {babel} = require("@rollup/plugin-babel")
 const terser = require("@rollup/plugin-terser")
 const typescript = require("rollup-plugin-typescript2")
+const rawPlugin = require("../plugins/raw-plugin")
+const postcss = require("rollup-plugin-postcss")
+const imagePlugin = require("@rollup/plugin-image")
 const {DEFAULT_EXTENSIONS} = require("@babel/core")
 
-const builtinModules = require("node:module").builtinModules
+const tailwindcss = require("tailwindcss")
+
+const {getPackageRoot} = require("../util")
 
 const SUPPRESSED_WARNING_CODES = [
   "MISSING_GLOBAL_NAME",
@@ -59,7 +68,21 @@ module.exports = function getInputOptions(package, build) {
     ),
   ]
 
-  const extensions = DEFAULT_EXTENSIONS.concat([".ts", ".tsx", ".mts", ".cts"])
+  const extensions = DEFAULT_EXTENSIONS.concat([
+    ".ts",
+    ".tsx",
+    ".mts",
+    ".cts",
+    ".png",
+  ])
+
+  const tailwindConfigPath = path.resolve(
+    getPackageRoot(),
+    "tailwind.config.js"
+  )
+  const tailwindConfig = fs.existsSync(tailwindConfigPath)
+    ? require(tailwindConfigPath)
+    : null
 
   let options = {
     input: build.source,
@@ -69,12 +92,21 @@ module.exports = function getInputOptions(package, build) {
       console.warn(message.toString())
     },
     plugins: [
+      imagePlugin(),
       nodeResolve({
         browser: true,
         preferBuiltins: build.type !== "umd",
         resolveOnly,
         extensions,
       }),
+      tailwindConfig
+        ? postcss({
+            inject: false,
+            extensions: [".css"],
+            minimize: true,
+            plugins: [tailwindcss(tailwindConfig)],
+          })
+        : null,
       commonjs(),
       build.type !== "umd" &&
         isTypeScript &&
@@ -106,6 +138,13 @@ module.exports = function getInputOptions(package, build) {
               version: babelRuntimeVersion,
             },
           ],
+          [
+            "@babel/plugin-transform-react-jsx",
+            {
+              importSource: "preact",
+              runtime: "automatic",
+            },
+          ],
         ],
         sourceMaps: true,
         extensions,

packages/fcl-bundle/src/get-package-json.js

@@ -1,8 +1,9 @@
 const {existsSync, readFileSync} = require("fs")
 const {resolve} = require("path")
+const {getPackageRoot} = require("./util")
 
-module.exports = function getPackageJSON(cwd = process.cwd()) {
-  const pathPackageJSON = resolve(cwd, "package.json")
+module.exports = function getPackageJSON() {
+  const pathPackageJSON = resolve(getPackageRoot(), "package.json")
   if (existsSync(pathPackageJSON)) {
     return JSON.parse(readFileSync(pathPackageJSON))
   } else {

packages/fcl-bundle/src/package-config.js

@@ -1,6 +1,6 @@
 const assert = require("assert")
 const {resolve, dirname, basename, join} = require("path")
-const {isArray, isObject, isString} = require("./util")
+const {isArray, isObject, isString, getPackageRoot} = require("./util")
 const {existsSync, mkdirSync} = require("fs")
 
 function determineBuildPaths(package, outputs, entryName) {
@@ -53,7 +53,7 @@ function determineBuildPaths(package, outputs, entryName) {
 
   return Object.keys(outputs).map(type => ({
     type,
-    dir: resolve(join(process.cwd(), dirname(outputs[type]))),
+    dir: resolve(join(getPackageRoot(), dirname(outputs[type]))),
     entry: basename(outputs[type]),
   }))
 }

packages/fcl-bundle/src/plugins/raw-plugin.js

@@ -0,0 +1,39 @@
+const {createFilter} = require("@rollup/pluginutils")
+
+module.exports = function rawPlugin() {
+  const filter = createFilter(["**/*?raw"]) // Match files ending with ?raw
+
+  const rawList = []
+  return {
+    name: "raw-suffix-plugin",
+
+    // Use `resolveId` to handle the ?raw suffix
+    resolveId(source, importer) {
+      if (filter(source)) {
+        // Strip ?raw, and let other plugins (like node-resolve) handle the resolution
+        const actualSource = source.replace("?raw", "")
+        return this.resolve(actualSource, importer, {skipSelf: true}).then(
+          resolved => {
+            // Append ?raw back after resolution
+            if (resolved) {
+              rawList.push(resolved.id)
+              return `${resolved.id}`
+            }
+            return null
+          }
+        )
+      }
+      return null // Allow other plugins to resolve other files
+    },
+    transform(code, id) {
+      // Only transform files that match the filter
+      if (!rawList.includes(id)) return null
+
+      // Return the raw code directly as a JavaScript object
+      return {
+        code: `export default ${JSON.stringify(code)}`,
+        map: {mappings: ""},
+      }
+    },
+  }
+}

packages/fcl-bundle/src/util.js

@@ -10,8 +10,13 @@ function isString(obj) {
   return typeof obj === "string" || obj instanceof String
 }
 
+function getPackageRoot() {
+  return process.cwd()
+}
+
 module.exports = {
   isArray,
   isObject,
   isString,
+  getPackageRoot,
 }

packages/fcl-core/src/current-user/exec-service/index.js

@@ -15,10 +15,11 @@ export const execStrategy = async ({
   config,
   abortSignal,
   customRpc,
+  user,
   opts,
 }) => {
   const strategy = getServiceRegistry().getStrategy(service.method)
-  return strategy({service, body, config, abortSignal, customRpc, opts})
+  return strategy({service, body, config, abortSignal, customRpc, user, opts})
 }
 
 export async function execService({
@@ -28,7 +29,9 @@ export async function execService({
   opts = {},
   platform,
   abortSignal = new AbortController().signal,
+  user,
   execStrategy: _execStrategy,
+  user,
 }) {
   // Notify the developer if WalletConnect is not enabled
   checkWalletConnectEnabled()
@@ -52,7 +55,7 @@ export async function execService({
       service,
       body: msg,
       config: execConfig,
-      opts,
+      user,
       abortSignal,
     })
 
@@ -67,6 +70,8 @@ export async function execService({
         config: execConfig,
         opts,
         abortSignal,
+        platform,
+        user,
       })
     } else {
       return res

packages/fcl-core/src/current-user/index.js

@@ -12,7 +12,6 @@ import {execService} from "./exec-service"
 import {normalizeCompositeSignature} from "../normalizers/service/composite-signature"
 import {getDiscoveryService, makeDiscoveryServices} from "../discovery"
 import {getServiceRegistry} from "./exec-service/plugins"
-import {isMobile} from "../utils"
 
 /**
  * @typedef {import("@onflow/typedefs").CurrentUser} CurrentUser
@@ -160,6 +159,7 @@ const getAuthenticate =
    * @description - Authenticate a user
    * @param {object} [opts] - Options
    * @param {object} [opts.service] - Optional service to use for authentication
+   * @param {object} [opts.user] - Optional user object
    * @param {boolean} [opts.redir] - Optional redirect flag
    * @returns
    */
@@ -189,6 +189,7 @@ const getAuthenticate =
               msg: accountProofData,
               opts,
               platform,
+              user,
             })
             send(NAME, SET_CURRENT_USER, await buildUser(response))
           } catch (error) {
@@ -224,6 +225,7 @@ const getAuthenticate =
           opts,
           platform,
           execStrategy: discovery?.execStrategy,
+          user,
         })
 
         send(NAME, SET_CURRENT_USER, await buildUser(response))
@@ -258,7 +260,7 @@ const normalizePreAuthzResponse = authz => ({
 
 const getResolvePreAuthz =
   ({platform}) =>
-  authz => {
+  (authz, {user}) => {
     const resp = normalizePreAuthzResponse(authz)
     const axs = []
 
@@ -275,9 +277,7 @@ const getResolvePreAuthz =
           service: az,
           msg: signable,
           platform,
-          opts: {
-            initiatedByPreAuthz: true,
-          },
+          user,
         })
       },
       role: {
@@ -314,12 +314,17 @@ const getAuthorization =
         const preAuthz = serviceOfType(user.services, "pre-authz")
 
         if (preAuthz)
-          return getResolvePreAuthz({platform, discovery})(
+          return getResolvePreAuthz({platform, discovery, user})(
             await execService({
               service: preAuthz,
               msg: preSignable,
+              user,
               platform,
-            })
+              user,
+            }),
+            {
+              user,
+            }
           )
         if (authz) {
           return {
@@ -339,6 +344,7 @@ const getAuthorization =
                     includeOlderJsonRpcCall: true,
                   },
                   platform,
+                  user,
                 })
               )
             },
@@ -446,6 +452,7 @@ const getSignUserMessage =
         service: signingService,
         msg: makeSignable(msg),
         platform,
+        user,
       })
       if (Array.isArray(response)) {
         return response.map(compSigs => normalizeCompositeSignature(compSigs))

packages/fcl-wc/.babelrc

@@ -1,3 +1,17 @@
 {
-  "presets": [["@babel/preset-env"], "@babel/preset-typescript"]
+  "presets": [
+    ["@babel/preset-env"],
+    [
+      "@babel/preset-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-decorators",
+      {"version": "2023-11", "decoratorsBeforeExport": true}
+    ]
+  ]
 }

packages/fcl-wc/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @onflow/fcl-wc
 
-## 5.4.1-alpha.2
-
-### Patch Changes
-
-- [#1994](https://github.com/onflow/fcl-js/pull/1994) [`a7df42ff4609aa8a1f381fd447d3f94606f71a17`](https://github.com/onflow/fcl-js/commit/a7df42ff4609aa8a1f381fd447d3f94606f71a17) Thanks [@jribbink](https://github.com/jribbink)! - Fix WalletConnectModal close detection
-
 ## 5.4.1-alpha.1
 
 ### Patch Changes