chore(buddybook): fix build/hosting related issues

2026-01-03 06:13:08 +00:00 · 2024-11-03 00:22:38 +05:30 · 2024-11-03 00:22:38 +05:30 · 9050ca97e0
commit 9050ca97e0
parent eb18e5da1d
13 changed files with 2672 additions and 589 deletions
--- a/examples/buddybook/.gitignore
+++ b/examples/buddybook/.gitignore
@ -14,4 +14,12 @@ instructions
 *.sln
 *.sw?

-.env
+.env
+.env.*
+!.env.example
+
+# Build
+/build
+/dist
+.output
+.vercel
--- a/examples/buddybook/index.html
+++ b/examples/buddybook/index.html
@ -2,9 +2,24 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BuddyBook Dogfood</title>
    <base href="/" />
+    <script>
+      window.global = window;
+      window.process = {
+        env: { 
+          NODE_ENV: 'production',
+          VITE_WALLETCONNECT_PROJECT_ID: '%VITE_WALLETCONNECT_PROJECT_ID%'
+        },
+        nextTick: function(fn) { setTimeout(fn, 0); },
+        platform: 'browser',
+        version: 'v16.0.0',
+        browser: true
+      };
+    </script>
  </head>
  <body>
    <div id="root"></div>
--- a/examples/buddybook/package-lock.json
+++ b/examples/buddybook/package-lock.json
--- a/examples/buddybook/package.json
+++ b/examples/buddybook/package.json
@ -5,10 +5,12 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "tsc && vite build",
    "build:ci": "vite build",
    "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "serve": "vite preview --port 3000 --mode production",
+    "clean": "rimraf dist"
  },
  "dependencies": {
    "@radix-ui/react-dialog": "^1.1.2",
@ -21,18 +23,22 @@
    "@tailwindcss/typography": "^0.5.15",
    "@tanstack/react-query": "^5.59.15",
    "@waku/react": "0.0.7-0adebab",
+    "buffer": "^6.0.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "connectkit": "^1.8.2",
    "lucide-react": "^0.453.0",
+    "process": "^0.11.10",
    "protobufjs": "^7.4.0",
    "qrcode.react": "^4.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-markdown": "^9.0.1",
    "react-router-dom": "^6.27.0",
+    "stream-browserify": "^3.0.0",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
+    "util": "^0.12.5",
    "uuid": "^10.0.0",
    "viem": "^2.21.28",
    "wagmi": "^2.12.19",
@ -42,6 +48,7 @@
    "@types/node": "^22.7.6",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
    "autoprefixer": "^10.4.20",
    "copy-webpack-plugin": "^11.0.0",
    "eslint": "^8.56.0",
@ -51,10 +58,9 @@
    "tailwindcss": "^3.4.14",
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.3",
+    "vite": "^5.4.8",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "@vitejs/plugin-react": "^4.3.2",
-    "vite": "^5.4.8"
+    "webpack-dev-server": "^4.11.1"
  }
 }
--- a/examples/buddybook/public/favicon.svg
+++ b/examples/buddybook/public/favicon.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#646cff"/>
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white" font-family="Arial" font-size="20">B</text>
+</svg> 
--- a/examples/buddybook/src/App.tsx
+++ b/examples/buddybook/src/App.tsx
@ -101,6 +101,7 @@ function App() {
  }

  if (wakuError) {
+    console.error("Waku error:", wakuError);
    return (
      <div className="min-h-screen bg-background text-foreground flex flex-col justify-center items-center">
        <p className="text-red-500">Error connecting to Waku network</p>
--- a/examples/buddybook/src/env.ts
+++ b/examples/buddybook/src/env.ts
@ -1,10 +1,21 @@
 import { createEnv } from "@t3-oss/env-core";
 import { z } from "zod";

+// Define a global type for our environment variables
+declare global {
+  const __ENV__: {
+    NODE_ENV: string;
+    VITE_WALLETCONNECT_PROJECT_ID: string;
+  }
+}
+
 export const env = createEnv({
  clientPrefix: "VITE_",
  client: {
-    VITE_WALLETCONNECT_PROJECT_ID: z.string().min(1),
+    VITE_WALLETCONNECT_PROJECT_ID: z.string().length(32, "WalletConnect Project ID must be 32 characters long"),
  },
-  runtimeEnv: import.meta.env,
+  runtimeEnv: {
+    VITE_WALLETCONNECT_PROJECT_ID: __ENV__.VITE_WALLETCONNECT_PROJECT_ID
+  },
+  emptyStringAsUndefined: true,
 });
--- a/examples/buddybook/src/lib/waku-config.ts
+++ b/examples/buddybook/src/lib/waku-config.ts
@ -0,0 +1,15 @@
+import { Protocols } from '@waku/sdk';
+
+// Configure Waku options with browser-compatible settings
+export const WAKU_NODE_OPTIONS = {
+  defaultBootstrap: true,
+  libp2p: {
+    addresses: {
+      listen: [] // Empty for browser environments
+    },
+    connectionManager: {
+      minConnections: 2
+    }
+  },
+  protocols: [Protocols.Store, Protocols.Filter, Protocols.LightPush]
+}; 
--- a/examples/buddybook/src/lib/walletConnect.ts
+++ b/examples/buddybook/src/lib/walletConnect.ts
@ -1,15 +1,24 @@
 import { mainnet } from 'wagmi/chains'
-import {  createConfig, http } from 'wagmi'
-import {  getDefaultConfig } from 'connectkit'
-import { env } from '@/env'
+import { createConfig, http } from 'wagmi'
+import { getDefaultConfig } from 'connectkit'
+
+// Try multiple ways to get the project ID
+const projectId = 
+  process.env.VITE_WALLETCONNECT_PROJECT_ID || 
+  window.process?.env?.VITE_WALLETCONNECT_PROJECT_ID ||
+  'dd346811b5dd8a8f7d471df7c571dd92' // Fallback to hardcoded value if all else fails
+
+if (!projectId) {
+  throw new Error('Missing VITE_WALLETCONNECT_PROJECT_ID environment variable')
+}

 export const config = createConfig(
-    getDefaultConfig({
-      appName: 'BuddyBook',
-      walletConnectProjectId: env.VITE_WALLETCONNECT_PROJECT_ID,
-      chains: [mainnet],
-      transports: {
-        [mainnet.id]: http(),
-      },
-    }),
-  )
+  getDefaultConfig({
+    appName: 'BuddyBook',
+    walletConnectProjectId: projectId,
+    chains: [mainnet],
+    transports: {
+      [mainnet.id]: http(),
+    },
+  }),
+)
--- a/examples/buddybook/src/main.tsx
+++ b/examples/buddybook/src/main.tsx
@ -1,3 +1,4 @@
+import { Buffer } from 'buffer'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { WagmiProvider } from 'wagmi'
@ -8,8 +9,15 @@ import App from './App.tsx'
 import './index.css'
 import { LightNodeProvider } from "@waku/react";
 import { config } from './lib/walletConnect.ts'
-import { WAKU_NODE_OPTIONS } from './lib/waku.ts'
+import { WAKU_NODE_OPTIONS } from './lib/waku-config.ts'

+// Polyfills
+if (typeof global === 'undefined') {
+  (window as any).global = window;
+}
+if (typeof Buffer === 'undefined') {
+  (window as any).Buffer = Buffer;
+}

 const queryClient = new QueryClient()

@ -19,7 +27,7 @@ createRoot(document.getElementById('root')!).render(
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          <LightNodeProvider options={WAKU_NODE_OPTIONS}>
-            <Router>
+            <Router basename={import.meta.env.BASE_URL}>
              <App />
            </Router>
          </LightNodeProvider>
--- a/examples/buddybook/src/vite-env.d.ts
+++ b/examples/buddybook/src/vite-env.d.ts
@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare const __ENV__: {
+  NODE_ENV: string;
+  VITE_WALLETCONNECT_PROJECT_ID: string;
+}
--- a/examples/buddybook/tasks.md
+++ b/examples/buddybook/tasks.md
@ -1,12 +1,21 @@
 - [ x ] waku connections on header should have green/yellow/red color indicator
 - [ x ] chains can't be signed twice by an address
- [ ] generate waku peer id using the wallet address
+- [ x ] sign shared chain route should show spinner while waiting for the store query to resolve
+- [ x ] create chain -> QR modal should have a sharable link instead of the object
+- [ x ] store query should yield messages as they come in, instead of waiting for all of them to come in before displaying anything
+
+- [ ] generate waku peer id using a custom seed (store in localstorage)
 - [ ] telemetry
  - [ x ] disclaimer
  - [ ] functionality
- [ ] landing page
 - [ ] look into high initial loading times
 - [ ] fix deployment/hosting
- [ x ] sign shared chain route should show spinner while waiting for the store query to resolve
- [ x ] create chain -> QR modal should have a sharable link instead of the object
- [ x ] store query should yield messages as they come in, instead of waiting for all of them to come in before displaying anything
+
+- [ ] Meme UI options 
+  - [ ] Pepe?
+- [ ] landing page
+- [ ] leaderboard/top 3 chains on the landing
+  
+- [ ] view chains
+  - sorted by most recent
+  - sorted by most signed
--- a/examples/buddybook/vite.config.ts
+++ b/examples/buddybook/vite.config.ts
@ -1,27 +1,57 @@
 import path from "path"
 import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
+import { defineConfig, loadEnv } from "vite"

-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  base: '/buddybook/',
-  build: {
-    assetsDir: 'assets',
-    manifest: true,
-    rollupOptions: {
-      output: {
-        entryFileNames: 'assets/[name]-[hash].js',
-        chunkFileNames: 'assets/[name]-[hash].js',
-        assetFileNames: 'assets/[name]-[hash].[ext]'
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  
+  return {
+    plugins: [
+      react(),
+      {
+        name: 'html-transform',
+        transformIndexHtml(html) {
+          return html.replace(
+            /%VITE_WALLETCONNECT_PROJECT_ID%/g,
+            env.VITE_WALLETCONNECT_PROJECT_ID || ''
+          )
+        }
      }
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+        stream: 'stream-browserify',
+        buffer: 'buffer',
+        util: 'util',
+        process: 'process/browser',
+      },
+    },
+    build: {
+      assetsDir: 'assets',
+      manifest: true,
+      rollupOptions: {
+        output: {
+          entryFileNames: 'assets/[name]-[hash].js',
+          chunkFileNames: 'assets/[name]-[hash].js',
+          assetFileNames: 'assets/[name]-[hash].[ext]'
+        }
+      }
+    },
+    define: {
+      global: 'globalThis',
+      'process.env.VITE_WALLETCONNECT_PROJECT_ID': JSON.stringify(env.VITE_WALLETCONNECT_PROJECT_ID),
+      'process': {
+        'env': {
+          'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+          'DEBUG': JSON.stringify(process.env.DEBUG),
+          'VITE_WALLETCONNECT_PROJECT_ID': JSON.stringify(env.VITE_WALLETCONNECT_PROJECT_ID)
+        },
+        'nextTick': 'setImmediate',
+        'platform': JSON.stringify('browser'),
+        'version': JSON.stringify('v16.0.0'),
+        'browser': true
+      },
    }
-  },
-  define: {
-    'process.env': {}
  }
 })