initial checkin

src/components/providers.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { getDefaultConfig, RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
+import { WagmiProvider } from 'wagmi';
+import { mainnet, polygon, optimism, arbitrum, base } from 'wagmi/chains';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { ThemeProvider, useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+import { TranslationsProvider } from '@/providers/translations-provider';
+import { Header } from '@/components/header';
+
+const config = getDefaultConfig({
+  appName: 'Liquidity Party',
+  projectId: 'YOUR_PROJECT_ID', // Get this from https://cloud.walletconnect.com
+  chains: [mainnet, polygon, optimism, arbitrum, base],
+  ssr: false,
+});
+
+const queryClient = new QueryClient();
+
+function Web3Provider({ children }: { children: React.ReactNode }) {
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Use dark theme by default until mounted, then follow the actual theme
+  const rainbowKitTheme = !mounted || theme === 'dark' 
+    ? darkTheme({
+        accentColor: '#a855f7', // Purple to match your primary color
+        accentColorForeground: 'white',
+      })
+    : lightTheme({
+        accentColor: '#a855f7',
+        accentColorForeground: 'white',
+      });
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider theme={rainbowKitTheme}>
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <TranslationsProvider>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        enableSystem={false}
+        storageKey="liquidity-party-theme"
+      >
+        <Web3Provider>
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1 container mx-auto px-4 py-8">
+              {children}
+            </main>
+          </div>
+        </Web3Provider>
+      </ThemeProvider>
+    </TranslationsProvider>
+  );
+}