feat: parcel bundler

.gitignore

@@ -15,4 +15,5 @@ test-results
 .vscode/*
 apps/laboratory/playwright/.auth/user.json
 tsconfig.tsbuildinfo
-.cache-synpress
+.cache-synpress
+.parcel-cache

examples/parcel/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@examples/parcel-react-wagmi",
+  "version": "1.0.0",
+  "source": "src/index.html",
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@reown/appkit": "workspace:*",
+    "@reown/appkit-adapter-wagmi": "workspace:*",
+    "@walletconnect/universal-provider": "2.17.0",
+    "@walletconnect/utils": "2.17.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "viem": "2.21.26",
+    "wagmi": "2.12.17"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.1",
+    "parcel": "2.0.1",
+    "process": "0.11.10"
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
+  }
+}

examples/parcel/src/App.tsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react'
+import {
+  createAppKit,
+  useAppKitAccount,
+  useAppKitNetwork,
+  useAppKitState,
+  useAppKitTheme
+} from '@reown/appkit/react'
+import { mainnet, polygon, bsc } from '@reown/appkit/networks'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+
+// Initialize WagmiAdapter
+const wagmiAdapter = new WagmiAdapter({
+  projectId: '3bdbc796b351092d40d5d08e987f4eca',
+  networks: [mainnet, polygon, bsc]
+})
+
+// Initialize AppKit
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  networks: [mainnet, polygon],
+  metadata: {
+    name: 'AppKit React with Parcel',
+    description: 'AppKit implementation with Wagmi adapter on Parcel bundler',
+    url: 'https://reown.com/appkit',
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
+  },
+  projectId: '3bdbc796b351092d40d5d08e987f4eca'
+})
+
+export function App() {
+  // Hooks for state management
+  const account = useAppKitAccount()
+  const network = useAppKitNetwork()
+  const appState = useAppKitState()
+  const { setThemeMode } = useAppKitTheme()
+  const [themeState, setThemeState] = useState({ themeMode: 'light', themeVariables: {} })
+  const [walletInfo, setWalletInfo] = useState({})
+
+  // Theme toggle function
+  const toggleTheme = () => {
+    const newTheme = themeState.themeMode === 'dark' ? 'light' : 'dark'
+    setThemeMode(newTheme)
+    setThemeState(prev => ({ ...prev, themeMode: newTheme }))
+    document.body.className = newTheme
+  }
+
+  useEffect(() => {
+    // Set initial theme
+    document.body.className = themeState.themeMode
+
+    // Subscribe to theme changes
+    modal.subscribeTheme(state => {
+      setThemeState(state)
+      document.body.className = state.themeMode
+    })
+
+    // Subscribe to wallet info
+    modal.subscribeWalletInfo(state => {
+      setWalletInfo(state)
+    })
+  }, [])
+
+  return (
+    <div className="container">
+      <h1>React Wagmi Example</h1>
+
+      {/* AppKit UI Components */}
+      <div className="button-group">
+        <w3m-button></w3m-button>
+        <w3m-network-button></w3m-network-button>
+      </div>
+
+      {/* Modal Controls */}
+      <div className="button-group">
+        <button onClick={() => modal.open()}>Open Connect Modal</button>
+        <button onClick={() => modal.open({ view: 'Networks' })}>Open Network Modal</button>
+        <button onClick={toggleTheme}>Toggle Theme Mode</button>
+        <button
+          onClick={() => network.switchNetwork(network.chainId === polygon.id ? mainnet : polygon)}
+        >
+          Switch to {network.chainId === polygon.id ? 'Mainnet' : 'Polygon'}
+        </button>
+      </div>
+
+      {/* State Displays */}
+      <div className="state-container">
+        <section>
+          <h2>Account</h2>
+          <pre>{JSON.stringify(account, null, 2)}</pre>
+        </section>
+
+        <section>
+          <h2>Network</h2>
+          <pre>{JSON.stringify(network, null, 2)}</pre>
+        </section>
+
+        <section>
+          <h2>State</h2>
+          <pre>{JSON.stringify(appState, null, 2)}</pre>
+        </section>
+
+        <section>
+          <h2>Theme</h2>
+          <pre>{JSON.stringify(themeState, null, 2)}</pre>
+        </section>
+
+        <section>
+          <h2>Wallet Info</h2>
+          <pre>{JSON.stringify(walletInfo, null, 2)}</pre>
+        </section>
+      </div>
+    </div>
+  )
+}

examples/parcel/src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Parcel Demo</title>
+  <link rel="stylesheet" href="styles.css">
+  <script type="module" src="index.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

examples/parcel/src/index.js

@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom'
+import { App } from './App'
+import './styles.css'
+
+ReactDOM.render(<App />, document.getElementById('root'))

examples/parcel/src/styles.css

@@ -0,0 +1,109 @@
+/* Base styles */
+body {
+  margin: 0;
+  min-height: 100vh;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Theme styles */
+body.dark {
+  background-color: #333;
+  color: #fff;
+}
+
+body.light {
+  background-color: #fff;
+  color: #000;
+}
+
+/* Layout */
+.container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Typography */
+h1 {
+  font-weight: 700;
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  font-weight: 600;
+  font-size: 1.125rem;
+  margin: 0 0 10px 0;
+  letter-spacing: -0.01em;
+}
+
+/* Buttons */
+.button-group {
+  display: flex;
+  gap: 16px;
+  margin: 20px 0;
+}
+
+button {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+/* Light theme button styles */
+body.light button {
+  background: white;
+  color: black;
+  border-color: #ddd;
+}
+
+body.light button:hover {
+  background: #f5f5f5;
+}
+
+/* Dark theme button styles */
+body.dark button {
+  background: #444;
+  color: white;
+  border-color: #666;
+}
+
+body.dark button:hover {
+  background: #555;
+}
+
+/* State container */
+.state-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+section {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  border-radius: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro',
+    monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}

examples/parcel/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "outDir": "dist",
+    "isolatedModules": true
+  },
+  "include": ["src/**/*", "index.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -9,6 +9,7 @@
     "build:sample-apps": "turbo run build --filter={./examples/*}",
     "build:example:wagmi-cdn": "pnpm build; pnpm --filter @examples/html-wagmi-cdn build",
     "build:example:vue-wagmi": "pnpm --filter @examples/vue-wagmi build",
+    "build:example:parcel-react-wagmi": "pnpm --filter @examples/parcel-react-wagmi build",
     "build": "turbo run build --filter={./packages/*} --concurrency=31",
     "watch": "turbo run watch --filter={./packages/*,./packages/adapters/*} --concurrency=50 --continue",
     "gallery": "turbo run dev --filter={./apps/gallery}",
@@ -54,18 +55,22 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-require-extensions": "0.1.3",
     "husky": "9.0.11",
+    "pino": "7.11.0",
     "prettier": "3.1.1",
+    "process": "0.11.10",
     "turbo": "2.0.6-canary.0",
     "typescript": "5.3.3",
     "vite": "5.2.11",
-    "vitest": "2.1.3",
     "vite-plugin-node-polyfills": "0.22.0",
-    "pino": "7.11.0"
+    "vitest": "2.1.3"
   },
   "packageManager": "[email protected]",
   "pnpm": {
     "patchedDependencies": {
       "@synthetixio/[email protected]": "patches/@[email protected]"
     }
+  },
+  "@parcel/resolver-default": {
+    "packageExports": true
   }
 }