feat: implement SIWE authentication with iron-session and RainbowKit

.env.example

@@ -5,4 +5,9 @@ ANVIL_BLOCK_NUMBER=
 # Set to 'true' to enable Fast DAO feature on mainnet chains (LOCAL TESTING ONLY)
 # Default: false (Fast DAO only available on testnets)
 # WARNING: Only use this for local testing. Never enable in production.
-NEXT_PUBLIC_ALLOW_FAST_DAO_ON_MAINNET=false
+NEXT_PUBLIC_ALLOW_FAST_DAO_ON_MAINNET=false
+
+# Safe API Key for transaction proposal service
+# Get your API key from: https://dashboard.safe.global/
+# Required for multi-signature Safe wallet transactions
+SAFE_API_KEY=

apps/web/.env.local.example

@@ -20,3 +20,11 @@ NEXT_PUBLIC_PINATA_GATEWAY=
 
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NEXT_PUBLIC_WALLET_CONNECT_METADATA=
+
+# Iron Session Configuration (for SIWE authentication)
+# Generate a password with: openssl rand -base64 32
+# Must be at least 32 characters long
+IRON_PASSWORD=your-secret-here-at-least-32-chars
+
+# For proposing Safe transactions
+SAFE_API_KEY=

apps/web/next.config.js

@@ -148,6 +148,15 @@ const basicConfig = {
       })
     )
 
+    // Tree-shake debug package in production
+    if (!dev) {
+      config.plugins.push(
+        new webpack.NormalModuleReplacementPlugin(/^debug$/, (resource) => {
+          resource.request = require.resolve('./src/utils/debug-noop.js')
+        })
+      )
+    }
+
     return {
       ...config,
       // Hot-fix for $RefreshReg issues: https://github.com/vanilla-extract-css/vanilla-extract/issues/679#issuecomment-1402839249

apps/web/package.json

@@ -28,23 +28,28 @@
     "@fontsource/inter": "5.2.5",
     "@fontsource/londrina-solid": "^5.2.5",
     "@rainbow-me/rainbowkit": "^2.2.10",
+    "@safe-global/api-kit": "^5.0.2",
     "@sentry/nextjs": "^9.22.0",
     "@smartinvoicexyz/types": "^0.1.27",
     "@tanstack/react-query": "^5.90.3",
     "@vanilla-extract/next-plugin": "^2.4.11",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vercel/og": "^0.6.8",
+    "@wagmi/core": "^2.22.1",
+    "@xstate/react": "^6.1.0",
     "@zoralabs/coins-sdk": "^0.4.3",
     "@zoralabs/protocol-deployments": "^0.7.2",
     "ai": "^5.0.76",
     "alchemy-sdk": "^3.6.0",
     "axios": "^1.12.2",
     "dayjs": "^1.11.13",
+    "debug": "^4.4.3",
     "flatpickr": "^4.6.13",
     "formik": "^2.4.6",
     "framer-motion": "^12.12.1",
     "graphql-request": "^7.1.2",
     "ioredis": "^5.8.1",
+    "iron-session": "^8.0.4",
     "next": "^15.5.9",
     "nextjs-progressbar": "^0.0.16",
     "ox": "^0.14.0",
@@ -57,6 +62,7 @@
     "swr": "^2.3.3",
     "viem": "^2.47.1",
     "wagmi": "^2.18.1",
+    "xstate": "^5.32.6",
     "zustand": "^5.0.4"
   },
   "devDependencies": {
@@ -69,6 +75,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/debug": "^4.1.13",
     "@types/lodash": "^4.17.17",
     "@types/node": "^22.15.21",
     "@types/papaparse": "^5.3.16",
@@ -78,6 +85,7 @@
     "@vanilla-extract/css": "^1.17.2",
     "@vanilla-extract/vite-plugin": "^5.0.2",
     "@vitejs/plugin-react": "^4.5.0",
+    "@xstate/inspect": "^0.8.0",
     "dotenv": "^16.5.0",
     "eslint": "8.57.1",
     "eslint-config-next": "15.5.5",

apps/web/src/components/AsyncImage.tsx

@@ -0,0 +1,64 @@
+import { Box } from '@buildeross/zord'
+import { useReducer } from 'react'
+
+import { type AsyncImageSrc, useAsyncImage } from '../hooks/useAsyncImage'
+import { isIOS } from '../utils/isMobile'
+
+interface AsyncImageProps {
+  alt?: string
+  src: string | AsyncImageSrc | undefined
+  width: number
+  height: number
+  background?: string
+  borderRadius?: string | number
+  className?: string
+}
+
+export function AsyncImage({
+  alt,
+  background,
+  borderRadius = '6px',
+  height,
+  src: srcProp,
+  width,
+  className,
+}: AsyncImageProps) {
+  const ios = isIOS()
+  const src = useAsyncImage(srcProp)
+  const isRemoteImage = src && /^http/.test(src)
+  const [isRemoteImageLoaded, setRemoteImageLoaded] = useReducer(() => true, false)
+
+  return (
+    <Box
+      position="relative"
+      overflow="hidden"
+      style={{
+        background,
+        height,
+        width,
+        borderRadius,
+        border: `1px solid ${background}`,
+      }}
+      className={className}
+    >
+      {src && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={alt}
+          onLoad={isRemoteImage ? setRemoteImageLoaded : undefined}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain',
+            transition: 'opacity .15s linear',
+            opacity: isRemoteImage && !isRemoteImageLoaded ? 0 : 1,
+            userSelect: 'none',
+            WebkitTouchCallout: ios ? 'none' : undefined,
+            WebkitUserSelect: ios ? 'none' : undefined,
+          }}
+        />
+      )}
+    </Box>
+  )
+}