feat: Refactor app configuration and context with enhanced AppKit initialization and analytics

frontend/decentralized-reputation-system/app/config/index.tsx

@@ -1,22 +1,23 @@
+// app/config/index.tsx
 import { cookieStorage, createStorage } from "wagmi";
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
-import { mainnet, base, optimism } from "@reown/appkit/networks"
+import { mainnet, base, optimism } from "@reown/appkit/networks";
 
-export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
+export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
 
-if (!projectId){
-    throw new Error("Project id is not defined")
+if (!projectId) {
+    throw new Error("NEXT_PUBLIC_PROJECT_ID is not defined");
 }
 
 export const networks = [mainnet, optimism, base];
 
 export const wagmiAdapter = new WagmiAdapter({
     storage: createStorage({
-        storage: cookieStorage
+        storage: cookieStorage,
     }),
     ssr: true,
     networks,
-    projectId
+    projectId,
 });
 
 export const config = wagmiAdapter.wagmiConfig;

frontend/decentralized-reputation-system/app/context/index.tsx

@@ -1,45 +1,101 @@
-'use client'
+"use client";
 
-import { wagmiAdapter, projectId } from "@/app/config";
-import { createAppKit } from "@reown/appkit";
-import { mainnet, optimism, base } from "@reown/appkit/networks";
+import { wagmiAdapter, projectId, networks } from "@/app/config";
+import { createAppKit } from "@reown/appkit/react";
+import { base } from "@reown/appkit/networks";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { type ReactNode } from "react";
-import { Context, cookieToInitialState, WagmiProvider, type Config } from "wagmi";
+import React, { ReactNode, useEffect } from "react";
+import { cookieToInitialState, WagmiProvider, type Config, useAccount } from "wagmi";
 
 const queryClient = new QueryClient();
 
-if (!projectId) {
-    throw new Error("Project Id is not defined");
-}
+if (!projectId) throw new Error("NEXT_PUBLIC_PROJECT_ID is not defined");
+
+console.log("🔧 Project ID:", projectId);
+console.log("🌐 Networks:", [base, ...networks]);
 
 const metadata = {
-    name: "Idea Sandbox",
-    description: "An AI-powered idea generation and brainstorming tool.",
-    url: "https://idea-sandbox.vercel.app",
-    icons: ["https://idea-sandbox.vercel.app/favicon.ico"]
-}
+    name: "Decentralized Reputation System",
+    description: "A ochain decentralized reputation system.",
+    url: "https://decentralized-reputation-system-teal.vercel.app", // Removed trailing slash
+    icons: ["https://decentralized-reputation-system-teal.vercel.app/favicon.ico"],
+};
+
+console.log("📝 Metadata:", metadata);
 
-const modal = createAppKit({
+// Initialize AppKit with detailed logging
+const appKit = createAppKit({
     adapters: [wagmiAdapter],
     projectId,
-    networks: [mainnet, optimism, base],
+    networks: [base, ...networks],
     defaultNetwork: base,
+    metadata,
     features: {
         analytics: true,
         email: true,
-        socials: ['google', 'x', 'github', 'discord', 'farcaster'],
-        emailShowWallets: true
+        socials: ["google", "x", "github", "discord", "farcaster"],
+        emailShowWallets: true,
     },
-    themeMode: 'light'
+    themeMode: "light",
+    enableWalletConnect: true, // Explicitly enable WalletConnect
+    enableInjected: true, // Explicitly enable injected wallets
+    enableCoinbase: true, // Explicitly enable Coinbase
 });
 
-function ContextProvider({ children, cookies }: { children: ReactNode, cookies: string | null }) {
-    const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies)
+console.log("🎯 AppKit initialized:", !!appKit);
+
+// Expose AppKit to window for debugging and analytics
+if (typeof window !== 'undefined') {
+    (window as any).appkit = appKit;
+    console.log("🪟 AppKit exposed to window");
+}
+
+// Analytics tracker component
+function AnalyticsTracker() {
+    const { isConnected, address, chainId } = useAccount();
+
+    useEffect(() => {
+        if (isConnected && address) {
+            console.log("📊 Analytics Event - Wallet Connected:", {
+                address,
+                chainId,
+                timestamp: new Date().toISOString(),
+                url: window.location.href,
+            });
+
+            // Force analytics tracking
+            try {
+                if (window && (window as any).appkit) {
+                    console.log("📈 AppKit instance found on window");
+                } else {
+                    console.log("❌ AppKit instance not found on window");
+                }
+            } catch (error) {
+                console.error("🚨 Analytics tracking error:", error);
+            }
+        } else if (!isConnected) {
+            console.log("🔌 Wallet disconnected");
+        }
+    }, [isConnected, address, chainId]);
+
+    return null;
+}
+
+interface ContextProviderProps {
+    children: ReactNode;
+    cookies: string | null;
+}
+
+function ContextProvider({ children, cookies }: ContextProviderProps) {
+    const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies);
+
+    console.log("🍪 Initial state from cookies:", !!initialState);
+
     return (
         <WagmiProvider config={wagmiAdapter.wagmiConfig as Config} initialState={initialState}>
             <QueryClientProvider client={queryClient}>
+                <AnalyticsTracker />
                 {children}
             </QueryClientProvider>
         </WagmiProvider>