empty UI

Author: aditya520

entropy/mint-nft/ui/app/page.tsx

@@ -10,7 +10,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Badge } from "@/components/ui/badge"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Alert, AlertDescription } from "@/components/ui/alert"
-import { ConnectButton } from "@/components/mock-connect-button"
+import { WalletConnectButton } from "@/components/wallet-connect-button"
 import { InteractiveFlowDiagram } from "@/components/interactive-flow-diagram"
 import { ThemeToggle } from "@/components/theme-toggle"
 
@@ -208,7 +208,7 @@ export default function PythentropyNFTDemo() {
 
           {/* Wallet Connection */}
           <div className="flex justify-center mb-6">
-            <ConnectButton />
+            <WalletConnectButton />
           </div>
 
           {/* Disclaimer */}

entropy/mint-nft/ui/app/providers.tsx

@@ -1,7 +1,72 @@
 "use client"
 
+import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'
+import { WagmiProvider } from 'wagmi'
+import { base } from 'wagmi/chains'
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import '@rainbow-me/rainbowkit/styles.css'
+import { useEffect, useState } from 'react'
 import type { ReactNode } from "react"
 
+// Create a fallback config for SSR
+const createConfig = () => {
+  if (typeof window === 'undefined') {
+    // Return a minimal config for SSR
+    return null
+  }
+  
+  return getDefaultConfig({
+    appName: 'Pyth Entropy NFT Demo',
+    projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || 'demo-project-id',
+    chains: [base],
+    ssr: false,
+  })
+}
+
+const createQueryClient = () => {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: false,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+      },
+    },
+  })
+}
+
 export function Providers({ children }: { children: ReactNode }) {
-  return <>{children}</>
+  const [mounted, setMounted] = useState(false)
+  const [config, setConfig] = useState<ReturnType<typeof getDefaultConfig> | null>(null)
+  const [queryClient] = useState(() => createQueryClient())
+
+  useEffect(() => {
+    // Only initialize on client side
+    if (typeof window !== 'undefined') {
+      setConfig(createConfig())
+      setMounted(true)
+    }
+  }, [])
+
+  // Show loading state during hydration
+  if (!mounted || !config) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+      </div>
+    )
+  }
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider 
+          initialChain={base}
+          showRecentTransactions={true}
+        >
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
 }

entropy/mint-nft/ui/components/mock-connect-button.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+
+export function WalletConnectButton() {
+  return <ConnectButton />
+}

entropy/mint-nft/ui/components/wallet-connect-button.tsx

@@ -38,6 +38,8 @@
     "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.6",
+    "@rainbow-me/rainbowkit": "^2.2.8",
+    "@tanstack/react-query": "^5.84.2",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -60,6 +62,8 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.9",
+    "viem": "^2.33.3",
+    "wagmi": "^2.16.2",
     "zod": "3.25.67"
   },
   "devDependencies": {