[DRAFT] - Non-dynamic WaaS import

fixWaas.js

@@ -0,0 +1,34 @@
+/**
+ * This script is temporarily needed for making a small transformation on the WaaS
+ * SDK-s, which allows us to non-dynamically import these packages. This script is
+ * executed at postinstall. If you encounter ERR_IMPORT_ASSERTION_TYPE_MISSING
+ * TypeError at build, you should probably run an 'npm install'
+ */
+import { readFileSync, writeFileSync } from "fs"
+
+const basePath = "./node_modules/@coinbase/waas-sdk-web/dist"
+
+const paths = [
+  `${basePath}/mpc.js`,
+  `${basePath}/waas.js`,
+  `${basePath}/perf.js`,
+  `${basePath}/bugsnag.js`,
+  `${basePath}/core/http.js`,
+]
+console.log(`[fixWaas] - ${paths.length} files will be processed`)
+
+for (const path of paths) {
+  console.log("\n[fixWaas] - Processing:", path)
+
+  try {
+    const content = readFileSync(path).toString()
+    const newContent = content
+      .replace(`versions.json";`, `versions.json" assert { type: "json" };`)
+      .replace(`versions.json';`, `versions.json' assert { type: "json" };`)
+
+    writeFileSync(path, newContent)
+    console.log("[fixWaas] - Processed")
+  } catch (error) {
+    console.log("[fixWaas] - Failed")
+  }
+}

mockWaas.js

@@ -1,11 +1,11 @@
-const fs = require("fs")
-const path = require("path")
+import { mkdir, writeFileSync } from "fs"
+import { join } from "path"
 
-const WEB_ROOT = path.join(__dirname, "node_modules", "@coinbase", "waas-sdk-web")
-const VIEM_ROOT = path.join(__dirname, "node_modules", "@coinbase", "waas-sdk-viem")
+const WEB_ROOT = join(__dirname, "node_modules", "@coinbase", "waas-sdk-web")
+const VIEM_ROOT = join(__dirname, "node_modules", "@coinbase", "waas-sdk-viem")
 
-fs.mkdir(WEB_ROOT, () => {})
-fs.mkdir(VIEM_ROOT, () => {})
+mkdir(WEB_ROOT, () => {})
+mkdir(VIEM_ROOT, () => {})
 
 const webMockTypes = `
 export type Address<T> = any;
@@ -15,7 +15,7 @@ export type Waas = any;
 export type Wallet = any
 export enum ProtocolFamily { EVM }
 export function InitializeWaas(_) {}
-export function Logout() {}
+export async function Logout() {}
 `
 
 const viemMock = `
@@ -39,8 +39,8 @@ const viemPackage = `
 }
 `
 
-fs.writeFileSync(path.join(WEB_ROOT, "index.d.ts"), webMockTypes, { flag: "w+" })
-fs.writeFileSync(path.join(WEB_ROOT, "package.json"), webPackage, { flag: "w+" })
-fs.writeFileSync(path.join(WEB_ROOT, "index.js"), "", { flag: "w+" })
-fs.writeFileSync(path.join(VIEM_ROOT, "index.js"), viemMock, { flag: "w+" })
-fs.writeFileSync(path.join(VIEM_ROOT, "package.json"), viemPackage, { flag: "w+" })
+writeFileSync(join(WEB_ROOT, "index.d.ts"), webMockTypes, { flag: "w+" })
+writeFileSync(join(WEB_ROOT, "package.json"), webPackage, { flag: "w+" })
+writeFileSync(join(WEB_ROOT, "index.js"), "", { flag: "w+" })
+writeFileSync(join(VIEM_ROOT, "index.js"), viemMock, { flag: "w+" })
+writeFileSync(join(VIEM_ROOT, "package.json"), viemPackage, { flag: "w+" })

next.config.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-const { BugsnagSourceMapUploaderPlugin } = require("webpack-bugsnag-plugins")
+import { BugsnagSourceMapUploaderPlugin } from "webpack-bugsnag-plugins"
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
@@ -255,4 +255,4 @@ const nextConfig = {
   },
 }
 
-module.exports = nextConfig
+export default nextConfig

package.json

@@ -2,6 +2,7 @@
   "name": "guildxyz",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "prepare": "npm run snyk-protect && husky install",
     "dev": "next dev",
@@ -16,7 +17,7 @@
     "test": "cypress run",
     "test:mobile": "cypress run --config viewportWidth=375,viewportHeight=667",
     "snyk-protect": "snyk-protect",
-    "postinstall": "npx dotenv-cli -e .env.local -- bash -c 'npm i --no-save --ignore-scripts $WAAS_WEB_URL $WAAS_VIEM_URL'"
+    "postinstall": "npx dotenv-cli -e .env.local -- bash -c 'npm i --no-save --ignore-scripts $WAAS_WEB_URL $WAAS_VIEM_URL'; node fixWaas.js"
   },
   "dependencies": {
     "@bugsnag/js": "^7.22.4",

src/wagmiConfig/index.ts

@@ -216,59 +216,63 @@ export const wagmiConfig = createConfig({
           allowedDomains: [/gnosis-safe\.io$/, /app\.safe\.global$/],
           debug: false,
         }),
-        waasConnector({
-          provideAuthToken: async () => {
-            const connector = wagmiConfig.connectors.find(
-              (conn) => conn.id === WAAS_CONNECTOR_ID
-            ) as Connector
+        ...(typeof window === "undefined"
+          ? []
+          : [
+              waasConnector({
+                provideAuthToken: async () => {
+                  const connector = wagmiConfig.connectors.find(
+                    (conn) => conn.id === WAAS_CONNECTOR_ID
+                  ) as Connector
 
-            const walletClient = await connector
-              .getClient()
-              .catch(() => null as WalletClient)
+                  const walletClient = await connector
+                    .getClient()
+                    .catch(() => null as WalletClient)
 
-            // First we check if there is data in the cache
-            const userCheck = !!walletClient
-              ? await mutate<PublicUser>(
-                  `/v2/users/${walletClient.account.address.toLowerCase()}/profile`,
-                  (prev) => prev,
-                  { revalidate: false }
-                )
-              : null
+                  // First we check if there is data in the cache
+                  const userCheck = !!walletClient
+                    ? await mutate<PublicUser>(
+                        `/v2/users/${walletClient.account.address.toLowerCase()}/profile`,
+                        (prev) => prev,
+                        { revalidate: false }
+                      )
+                    : null
 
-            // If there isn't, we mutate
-            const user = !!walletClient
-              ? !userCheck
-                ? await mutate<PublicUser>(
-                    `/v2/users/${walletClient.account.address.toLowerCase()}/profile`
-                  )
-                : userCheck
-              : null
+                  // If there isn't, we mutate
+                  const user = !!walletClient
+                    ? !userCheck
+                      ? await mutate<PublicUser>(
+                          `/v2/users/${walletClient.account.address.toLowerCase()}/profile`
+                        )
+                      : userCheck
+                    : null
 
-            const shouldSign =
-              walletClient &&
-              walletClient?.account?.address &&
-              user?.keyPair?.keyPair
+                  const shouldSign =
+                    walletClient &&
+                    walletClient?.account?.address &&
+                    user?.keyPair?.keyPair
 
-            const token = shouldSign
-              ? await fetcherWithSign(
-                  {
-                    address: walletClient?.account?.address,
-                    publicClient: null,
-                    walletClient,
-                    keyPair: user?.keyPair?.keyPair,
-                  },
-                  "/v2/third-party/coinbase/token",
-                  { method: "GET" }
-                )
-              : await fetcher("/v2/third-party/coinbase/token")
+                  const token = shouldSign
+                    ? await fetcherWithSign(
+                        {
+                          address: walletClient?.account?.address,
+                          publicClient: null,
+                          walletClient,
+                          keyPair: user?.keyPair?.keyPair,
+                        },
+                        "/v2/third-party/coinbase/token",
+                        { method: "GET" }
+                      )
+                    : await fetcher("/v2/third-party/coinbase/token")
 
-            return token
-          },
-          collectAndReportMetrics: true,
-          prod:
-            (typeof window !== "undefined" &&
-              window.origin === "https://guild.xyz") ||
-            undefined,
-        }),
+                  return token
+                },
+                collectAndReportMetrics: true,
+                prod:
+                  (typeof window !== "undefined" &&
+                    window.origin === "https://guild.xyz") ||
+                  undefined,
+              }),
+            ]),
       ],
 })

src/wagmiConfig/waasConnector.ts

@@ -1,8 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { toViem } from "@coinbase/waas-sdk-viem"
-import type {
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
   Address,
+  InitializeWaas,
   InitializeWaasOptions,
+  Logout,
   NewWallet,
   ProtocolFamily,
   Waas,
@@ -20,15 +23,6 @@ export class WaasActionFailed extends Error {
   }
 }
 
-let cwaasModule: typeof import("@coinbase/waas-sdk-web")
-const cwaasImport = async () => {
-  if (cwaasModule) return cwaasModule
-  // eslint-disable-next-line import/no-extraneous-dependencies
-  const mod = await import("@coinbase/waas-sdk-web")
-  cwaasModule = mod
-  return mod
-}
-
 type WalletWithAccount<W extends NewWallet | Wallet> = {
   wallet: W
   account: LocalAccount
@@ -45,8 +39,6 @@ export default function waasConnector(options: InitializeWaasOptions) {
   let waas: Waas
 
   async function getAllEvmAddresses() {
-    const { ProtocolFamily } = await cwaasImport()
-
     const allAddresses =
       (await waas.wallets.wallet.addresses.all()) as Address<ProtocolFamily>[]
 
@@ -68,8 +60,6 @@ export default function waasConnector(options: InitializeWaasOptions) {
   }
 
   async function withAccount<W extends Wallet>(wallet: W) {
-    const { ProtocolFamily } = await cwaasImport()
-
     const address = await waas.wallets.wallet.addresses.for(ProtocolFamily.EVM)
 
     const account = toViem(address)
@@ -105,8 +95,6 @@ export default function waasConnector(options: InitializeWaasOptions) {
     async getProvider() {
       try {
         if (!waas) {
-          const { InitializeWaas } = await cwaasImport()
-
           waas = await InitializeWaas(options)
         }
 
@@ -155,7 +143,6 @@ export default function waasConnector(options: InitializeWaasOptions) {
       try {
         await this.getProvider()
         throwIfNoWallet()
-        const { ProtocolFamily } = await cwaasImport()
 
         await this.getProvider()
 
@@ -191,7 +178,6 @@ export default function waasConnector(options: InitializeWaasOptions) {
     async createWallet() {
       try {
         await this.getProvider()
-        const { Logout, ProtocolFamily } = await cwaasImport()
 
         await Logout().catch(() => {})
 
@@ -208,7 +194,6 @@ export default function waasConnector(options: InitializeWaasOptions) {
     async restoreWallet(backupData) {
       try {
         await this.getProvider()
-        const { Logout, ProtocolFamily } = await cwaasImport()
 
         await Logout().catch(() => {})