PKG -- [FCL-WC] Add notifications for pending WC/RPC requests (#1970)

.changeset/brown-bobcats-remain.md

@@ -0,0 +1,5 @@
+---
+"@onflow/fcl-bundle": minor
+---
+
+Add `rollup-plugin-postcss` & `@rollup/plugin-image`

.changeset/little-spies-glow.md

@@ -0,0 +1,5 @@
+---
+"@onflow/fcl-wc": minor
+---
+
+Add UI notifications for pending requests

.changeset/poor-carrots-wink.md

@@ -0,0 +1,5 @@
+---
+"@onflow/fcl": minor
+---
+
+Add `walletconnect.disableNotifications` config option to disable WC notification UI

.changeset/rare-apes-argue.md

@@ -0,0 +1,5 @@
+---
+"@onflow/typedefs": patch
+---
+
+Fix CurrentUser services type

.changeset/rotten-paws-retire.md

@@ -0,0 +1,5 @@
+---
+"@onflow/fcl-core": patch
+---
+
+Pass missing fields to service redirects in execService

.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/README.md

@@ -97,4 +97,8 @@ A source configuration can be provided in one of three ways:
 ## Features
  - Replace `PACKAGE_CURRENT_VERSION` in bundled code with the current `version` of the package being bundled from `package.json`
  - Bundles dependencies with UMD builds for use in browser
- - Transpiles output bundles using `@babel/preset-env` and [babel rollup plugin](https://www.npmjs.com/package/@rollup/plugin-babel)
+ - Transpiles output bundles using `@babel/preset-env` and [babel rollup plugin](https://www.npmjs.com/package/@rollup/plugin-babel)
+ - PostCSS support for CSS bundling, must include a `postcss.config.js` in the root of the package
+ - Images are bundled with the `@rollup/plugin-image` plugin as base64 strings
+ - Minification of bundles with `terser` if output paths end in ".min.js"
+ - TypeScript support if entry point is a `.ts` file

packages/fcl-bundle/package.json

@@ -18,15 +18,20 @@
     "@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",
     "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": {
     "fcl-bundle": "src/cli.js"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.26.0"
   }
 }

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

@@ -1,14 +1,19 @@
 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 postcss = require("rollup-plugin-postcss")
+const imagePlugin = require("@rollup/plugin-image")
 const {DEFAULT_EXTENSIONS} = require("@babel/core")
-
-const builtinModules = require("node:module").builtinModules
+const {getPackageRoot} = require("../util")
 
 const SUPPRESSED_WARNING_CODES = [
   "MISSING_GLOBAL_NAME",
@@ -59,7 +64,15 @@ module.exports = function getInputOptions(package, build) {
     ),
   ]
 
-  const extensions = DEFAULT_EXTENSIONS.concat([".ts", ".tsx", ".mts", ".cts"])
+  const extensions = DEFAULT_EXTENSIONS.concat([
+    ".ts",
+    ".tsx",
+    ".mts",
+    ".cts",
+    ".svg",
+  ])
+
+  const postcssConfigPath = path.resolve(getPackageRoot(), "postcss.config.js")
 
   let options = {
     input: build.source,
@@ -69,12 +82,23 @@ module.exports = function getInputOptions(package, build) {
       console.warn(message.toString())
     },
     plugins: [
+      imagePlugin(),
       nodeResolve({
         browser: true,
         preferBuiltins: build.type !== "umd",
         resolveOnly,
         extensions,
       }),
+      fs.existsSync(postcssConfigPath)
+        ? postcss({
+            inject: false,
+            extensions: [".css"],
+            minimize: true,
+            config: {
+              path: postcssConfigPath,
+            },
+          })
+        : null,
       commonjs(),
       build.type !== "umd" &&
         isTypeScript &&

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/util.js

@@ -10,8 +10,14 @@ function isString(obj) {
   return typeof obj === "string" || obj instanceof String
 }
 
+// Get the root path of the package that the bundle is being built for
+function getPackageRoot() {
+  return process.cwd()
+}
+
 module.exports = {
   isArray,
   isObject,
   isString,
+  getPackageRoot,
 }

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

@@ -15,8 +15,8 @@ export const execStrategy = async ({
   config,
   abortSignal,
   customRpc,
-  opts,
   user,
+  opts,
 }) => {
   const strategy = getServiceRegistry().getStrategy(service.method)
   return strategy({service, body, config, abortSignal, customRpc, opts, user})
@@ -70,6 +70,8 @@ export async function execService({
         config: execConfig,
         opts,
         abortSignal,
+        platform,
+        user,
       })
     } else {
       return res

packages/fcl-wc/.babelrc

@@ -1,3 +1,20 @@
 {
-  "presets": [["@babel/preset-env"], "@babel/preset-typescript"]
+  "presets": [
+    ["@babel/preset-env"],
+    [
+      "@babel/preset-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "importSource": "preact",
+        "runtime": "automatic"
+      }
+    ]
+  ]
 }

packages/fcl-wc/jest.config.js

@@ -0,0 +1,10 @@
+const config = {
+  preset: "jest-preset-preact",
+  moduleNameMapper: {
+    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/src/mocks/file-mock.ts",
+    "\\.(css|less)$": "<rootDir>/src/mocks/file-mock.ts",
+  },
+}
+
+module.exports = config

packages/fcl-wc/package.json

@@ -28,10 +28,15 @@
     "lint": "eslint ."
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.25.9",
+    "@babel/preset-typescript": "^7.25.7",
     "@onflow/fcl-bundle": "1.5.1-alpha.0",
+    "@onflow/typedefs": "^1.4.0-alpha.1",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-plugin-jsdoc": "^46.10.1",
-    "jest": "^29.7.0"
+    "jest": "^29.7.0",
+    "jest-preset-preact": "^4.1.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.25.7",
@@ -42,7 +47,10 @@
     "@walletconnect/modal-core": "^2.6.2",
     "@walletconnect/sign-client": "^2.17.1",
     "@walletconnect/types": "^2.8.1",
-    "@walletconnect/utils": "^2.8.1"
+    "@walletconnect/utils": "^2.8.1",
+    "postcss-cli": "^11.0.0",
+    "preact": "^10.24.3",
+    "tailwindcss": "^3.4.14"
   },
   "peerDependencies": {
     "@onflow/fcl-core": "1.13.0-alpha.4"

packages/fcl-wc/postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require("tailwindcss")
+const tailwindConfig = require("./tailwind.config.js")
+const autoprefixer = require("autoprefixer")
+
+module.exports = {
+  plugins: [tailwindcss(tailwindConfig), autoprefixer],
+}

packages/fcl-wc/src/fcl-wc.ts

@@ -13,6 +13,7 @@ export interface FclWalletConnectConfig {
   wcRequestHook?: any
   pairingModalOverride?: any
   wallets?: any[]
+  disableNotifications?: boolean
 }
 
 const DEFAULT_RELAY_URL = "wss://relay.walletconnect.com"
@@ -70,14 +71,7 @@ export const init = async (config: FclWalletConnectConfig) => {
   }
 }
 
-const initHelper = ({
-  projectId,
-  metadata,
-  includeBaseWC = false,
-  wcRequestHook = null,
-  pairingModalOverride = null,
-  wallets = [],
-}: FclWalletConnectConfig) => {
+const initHelper = (config: FclWalletConnectConfig) => {
   if (typeof window === "undefined") {
     throw new Error(
       "FCL Wallet Connect Plugin can only be initialized in the browser"
@@ -94,7 +88,10 @@ const initHelper = ({
       if (_client) {
         return _client
       } else {
-        return initClient({projectId, metadata})
+        return initClient({
+          projectId: config.projectId,
+          metadata: config.metadata,
+        })
       }
     })
     .catch(e => {
@@ -106,13 +103,7 @@ const initHelper = ({
       throw e
     })
 
-  const FclWcServicePlugin = makeServicePlugin(clientPromise, {
-    projectId,
-    includeBaseWC,
-    wcRequestHook,
-    pairingModalOverride,
-    wallets,
-  })
+  const FclWcServicePlugin = makeServicePlugin(clientPromise, config)
 
   return {
     FclWcServicePlugin,

packages/fcl-wc/src/mocks/file-mock.ts

@@ -0,0 +1 @@
+export default "mocked-file"