refactor: appkit packages cdn workaround (#3046)

reown-com · Oct 9, 2024 · 3b3b124 · 3b3b124
1 parent 30e2ee5
commit 3b3b124
Show file tree

Hide file tree

Showing 14 changed files with 297 additions and 23 deletions.
diff --git a/.changeset/silver-geckos-repair.md b/.changeset/silver-geckos-repair.md
@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-cdn': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@apps/laboratory': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+Refactor CDN package to properly export our modules
diff --git a/examples/html-wagmi-cdn/index.html b/examples/html-wagmi-cdn/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AppKit CDN Example</title>
+  </head>
+
+  <body>
+    <h1>AppKit CDN Example</h1>
+    <div style="display: flex; gap: 16px; margin-bottom: 16px">
+      <w3m-button></w3m-button>
+      <w3m-network-button></w3m-network-button>
+    </div>
+    <div style="display: flex; gap: 16px">
+      <button id="open-appkit">Open AppKit</button>
+      <button id="open-appkit-networks">Open AppKit Networks</button>
+    </div>
+
+    <!-- Load the CDN scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/@reown/appkit-cdn@1.1.0/dist/appkit.js"></script>
+    <script>
+      window.onerror = function (message, source, lineno, colno, error) {
+        console.error('Error while loading document:', error, message, source, lineno, colno)
+      }
+      // Check if AppKit is loaded
+      console.info('AppKit loaded')
+    </script>
+    <!-- Load our main script -->
+    <script src="./main.js" type="module"></script>
+  </body>
+</html>
diff --git a/examples/html-wagmi-cdn/main.js b/examples/html-wagmi-cdn/main.js
@@ -0,0 +1,51 @@
+// Since we're using the CDN, we can access AppKit globals directly
+const createAppKit = window.AppKit.createAppKit
+const appKitNetworks = window.AppKit.networks
+const WagmiAdapter = window.AppKit.WagmiAdapter
+const SolanaAdapter = window.AppKit.SolanaAdapter
+
+if (!AppKit || !AppKit.createAppKit) {
+  throw new Error('AppKit or createAppKit not found on window object')
+} else {
+  const projectId = '3bdbc796b351092d40d5d08e987f4eca' // Replace with your actual project ID
+  const networks = [appKitNetworks.mainnet, appKitNetworks.polygon, appKitNetworks.base]
+
+  try {
+    const wagmiAdapter = new AppKit.WagmiAdapter({
+      projectId,
+      networks
+    })
+
+    // 3. Create modal
+    const modal = AppKit.createAppKit({
+      adapters: [wagmiAdapter],
+      networks,
+      projectId,
+      metadata: {
+        name: 'Html CDN Example',
+        description: 'Html CDN Example using local server',
+        url: 'https://reown.com/appkit',
+        icons: ['https://avatars.githubusercontent.com/u/37784886']
+      },
+      networks: [],
+      themeMode: 'light'
+    })
+
+    // 4. Trigger modal programmatically
+    document.addEventListener('DOMContentLoaded', () => {
+      const openConnectModalBtn = document.getElementById('open-appkit')
+      const openNetworkModalBtn = document.getElementById('open-appkit-networks')
+
+      if (openConnectModalBtn && openNetworkModalBtn) {
+        openConnectModalBtn.addEventListener('click', () => {
+          modal.open()
+        })
+        openNetworkModalBtn.addEventListener('click', () => {
+          modal.open({ view: 'Networks' })
+        })
+      }
+    })
+  } catch (error) {
+    console.error('Error creating or using modal:', error)
+  }
+}
diff --git a/examples/html-wagmi-cdn/package.json b/examples/html-wagmi-cdn/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@examples/html-wagmi-cdn",
+  "private": true,
+  "version": "1.0.6",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "5.2.11"
+  }
+}
diff --git a/examples/html-wagmi-cdn/vite.config.js b/examples/html-wagmi-cdn/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    open: true,
+    port: 3000
+  },
+  optimizeDeps: {
+    exclude: ['@reown/appkit-cdn']
+  },
+  build: {
+    commonjsOptions: {
+      include: []
+    }
+  }
+})
diff --git a/packages/cdn/lib/appkit.ts b/packages/cdn/lib/appkit.ts
@@ -0,0 +1,34 @@
+/**
+ * Due to some limitations on exporting multiple modules with UMD, we needed to export all of our modules in this file.
+ * For now exporting only Wagmi and Solana adapters. Until we found a better workaround and need other adapters, we can keep it this way.
+ */
+import '@reown/appkit-polyfills'
+import { createAppKit } from '@reown/appkit'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { SolanaAdapter } from '@reown/appkit-adapter-solana'
+import * as AppKitNetworks from '@reown/appkit/networks'
+
+const networks = AppKitNetworks
+
+export { createAppKit, networks, WagmiAdapter, SolanaAdapter }
+
+declare global {
+  interface Window {
+    AppKit: {
+      createAppKit: typeof createAppKit
+      WagmiAdapter: typeof WagmiAdapter
+      SolanaAdapter: typeof SolanaAdapter
+      networks: typeof AppKitNetworks
+    }
+  }
+}
+
+// Assign to window.AppKit
+if (typeof window !== 'undefined') {
+  window.AppKit = {
+    createAppKit,
+    WagmiAdapter,
+    SolanaAdapter,
+    networks: AppKitNetworks
+  }
+}
diff --git a/packages/cdn/lib/ethers.ts b/packages/cdn/lib/ethers.ts
diff --git a/packages/cdn/lib/ethers5.ts b/packages/cdn/lib/ethers5.ts
diff --git a/packages/cdn/lib/solana.ts b/packages/cdn/lib/solana.ts
diff --git a/packages/cdn/lib/wagmi.ts b/packages/cdn/lib/wagmi.ts
diff --git a/packages/cdn/package.json b/packages/cdn/package.json
@@ -10,10 +10,13 @@
   "scripts": {
     "build:clean": "rm -rf dist",
     "build": "tsc && vite build",
-    "upload": "pnpm build && pnpm publish --public"
+    "watch": "tsc --watch",
+    "upload": "pnpm build && pnpm publish --public",
+    "serve": "http-server dist -p 8080 --cors"
   },
   "devDependencies": {
     "@wagmi/connectors": "5.1.9",
+    "http-server": "14.1.1",
     "vite-plugin-node-polyfills": "0.22.0"
   },
   "peerDependencies": {
@@ -26,10 +29,10 @@
   },
   "dependencies": {
     "@reown/appkit": "workspace:*",
-    "@reown/appkit-adapter-wagmi": "workspace:*",
     "@reown/appkit-adapter-ethers": "workspace:*",
     "@reown/appkit-adapter-ethers5": "workspace:*",
     "@reown/appkit-adapter-solana": "workspace:*",
+    "@reown/appkit-adapter-wagmi": "workspace:*",
     "@reown/appkit-polyfills": "workspace:*",
     "@wagmi/connectors": "5.1.9",
     "@wagmi/core": "2.13.4",

diff --git a/packages/cdn/vite.config.ts b/packages/cdn/vite.config.ts
@@ -7,11 +7,13 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills'
 export default defineConfig({
   build: {
     lib: {
-      entry: {
-        wagmi: resolve(__dirname, 'lib/wagmi.ts'),
-        ethers: resolve(__dirname, 'lib/ethers.ts')
-      }
-    }
+      entry: resolve(__dirname, 'lib/appkit.ts'),
+      name: 'AppKit',
+      formats: ['umd'],
+      fileName: (_, entryName) => `${entryName}.js`
+    },
+    sourcemap: true,
+    minify: 'terser'
   },
   plugins: [
     nodePolyfills({

diff --git a/packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts b/packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts
@@ -34,7 +34,10 @@ export class W3mConnectingWcView extends LitElement {
     super()
     this.determinePlatforms()
     this.initializeConnection()
-    this.interval = setInterval(this.initializeConnection.bind(this), ConstantsUtil.TEN_SEC_MS)
+    this.interval = setInterval(
+      this.initializeConnection.bind(this),
+      ConstantsUtil.TEN_SEC_MS
+    ) as unknown as NodeJS.Timeout
   }
 
   public override disconnectedCallback() {