chore: Fix Solana Connection

Author: Bingle Kruger

ntc-web/components/WalletBalance.tsx

@@ -16,51 +16,64 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+// components/WalletBalance.tsx
 "use client";
 
 import { useEffect, useState } from "react";
 import { useWallet } from "@solana/wallet-adapter-react";
-import { Connection, clusterApiUrl, LAMPORTS_PER_SOL } from "@solana/web3.js";
+import { LAMPORTS_PER_SOL } from "@solana/web3.js";
+import { useSolanaConnection } from "@/lib/solanaConnection";
 
 const WalletBalance = () => {
   const { publicKey, connected } = useWallet();
+  const connection = useSolanaConnection();
   const [balance, setBalance] = useState<number | null>(null);
-  const connection = new Connection(clusterApiUrl("devnet"));
+  const [isLoading, setIsLoading] = useState(false);
 
-  // Function to fetch wallet balance
   const fetchBalance = async () => {
-    if (!publicKey) return;
+    if (!publicKey || !connection) return;
+    
+    setIsLoading(true);
     try {
       const lamports = await connection.getBalance(publicKey);
       setBalance(lamports / LAMPORTS_PER_SOL);
     } catch (error) {
       console.error("Error fetching balance:", error);
+      setBalance(null);
+    } finally {
+      setIsLoading(false);
     }
   };
 
-  // Fetch balance when the component mounts or wallet connects
   useEffect(() => {
     if (connected && publicKey) {
       fetchBalance();
-    }
-  }, [connected, publicKey]);
 
-  // Listen for wallet transactions and refresh balance
-  useEffect(() => {
-    const handleWalletTransaction = () => {
-      console.log("Wallet transaction detected, refreshing balance...");
-      fetchBalance();
-    };
+      // Subscribe to account changes
+      const subscriptionId = connection.onAccountChange(
+        publicKey,
+        () => {
+          console.log("Balance update detected");
+          fetchBalance();
+        },
+        "confirmed"
+      );
 
-    window.addEventListener("walletTransaction", handleWalletTransaction);
-    return () => {
-      window.removeEventListener("walletTransaction", handleWalletTransaction);
-    };
-  }, []);
+      return () => {
+        connection.removeAccountChangeListener(subscriptionId);
+      };
+    }
+  }, [connected, publicKey, connection]);
 
   return (
     <span className="text-sm font-bold">
-      {balance !== null ? `${balance.toFixed(2)} SOL` : "Loading..."}
+      {isLoading ? (
+        "Loading..."
+      ) : balance !== null ? (
+        `${balance.toFixed(2)} SOL`
+      ) : (
+        "Error loading balance"
+      )}
     </span>
   );
 };

ntc-web/components/WalletConnector.tsx

@@ -24,65 +24,61 @@ import { useWallet } from "@solana/wallet-adapter-react";
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 import { useUser } from "@clerk/nextjs";
 import { Copy } from "lucide-react";
-import WalletBalance from "@/components/WalletBalance"; 
-import { Connection, clusterApiUrl } from "@solana/web3.js";
+import WalletBalance from "@/components/WalletBalance";
+import { useSolanaConnection } from "@/lib/solanaConnection";
 
 const WalletConnector = () => {
   const { publicKey, connected, disconnect } = useWallet();
   const { user } = useUser();
+  const connection = useSolanaConnection();
   const [isLinked, setIsLinked] = useState<boolean>(false);
   const [loadingLinkStatus, setLoadingLinkStatus] = useState<boolean>(true);
 
-  const connection = new Connection(clusterApiUrl("devnet"));
-
-  // Fetch the current wallet link status from your API
   useEffect(() => {
     async function fetchWalletStatus() {
-      const res = await fetch("/api/wallet");
-      if (res.ok) {
-        const data = await res.json();
-        setIsLinked(!!data.walletAddress);
+      try {
+        const res = await fetch("/api/wallet");
+        if (res.ok) {
+          const data = await res.json();
+          setIsLinked(!!data.walletAddress);
+        }
+      } catch (error) {
+        console.error("Error fetching wallet status:", error);
+      } finally {
+        setLoadingLinkStatus(false);
       }
-      setLoadingLinkStatus(false);
     }
+
     if (user) {
       fetchWalletStatus();
     }
   }, [user]);
 
-  // Add listener for transactions affecting the wallet
-  useEffect(() => {
-    if (!publicKey || !connected) return;
-
-    const listenerId = connection.onAccountChange(publicKey, () => {
-      console.log("🔄 Wallet transaction detected! Refreshing balance...");
-      window.dispatchEvent(new Event("walletTransaction")); // Dispatch event for balance update
-    });
-
-    return () => {
-      connection.removeAccountChangeListener(listenerId);
-    };
-  }, [publicKey, connected]);
-
-  // Call API to link wallet
   const handleLinkWallet = async () => {
     if (!publicKey) return;
-    const res = await fetch("/api/wallet", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ walletAddress: publicKey.toBase58() }),
-    });
-    if (res.ok) {
-      setIsLinked(true);
+    try {
+      const res = await fetch("/api/wallet", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ walletAddress: publicKey.toBase58() }),
+      });
+      if (res.ok) {
+        setIsLinked(true);
+      }
+    } catch (error) {
+      console.error("Error linking wallet:", error);
     }
   };
 
-  // Unlink wallet (and optionally disconnect)
   const handleUnlinkWallet = async () => {
-    const res = await fetch("/api/wallet", { method: "DELETE" });
-    if (res.ok) {
-      setIsLinked(false);
-      disconnect();
+    try {
+      const res = await fetch("/api/wallet", { method: "DELETE" });
+      if (res.ok) {
+        setIsLinked(false);
+        disconnect();
+      }
+    } catch (error) {
+      console.error("Error unlinking wallet:", error);
     }
   };
 
@@ -96,13 +92,11 @@ const WalletConnector = () => {
     <div className="flex items-center space-x-4">
       {connected && publicKey ? (
         <>
-          {/* Display SOL balance using WalletBalance component */}
           <WalletBalance />
-
-          {/* Display wallet address */}
+          
           <div className="flex items-center space-x-2">
             <span className="text-sm font-mono">
-              {publicKey.toBase58().slice(0, 8) + "..." + publicKey.toBase58().slice(-8)}
+              {publicKey.toBase58().slice(0, 8)}...{publicKey.toBase58().slice(-8)}
             </span>
             <button 
               onClick={handleCopyAddress}
@@ -113,16 +107,22 @@ const WalletConnector = () => {
             </button>
           </div>
 
-          {/* Link/Unlink wallet */}
-          {!loadingLinkStatus && !isLinked && (
-            <button onClick={handleLinkWallet} className="px-2 py-1 bg-green-500 text-white rounded">
-              Link Wallet
-            </button>
-          )}
-          {!loadingLinkStatus && isLinked && (
-            <button onClick={handleUnlinkWallet} className="px-2 py-1 bg-red-500 text-white rounded">
-              Unlink Wallet
-            </button>
+          {!loadingLinkStatus && (
+            isLinked ? (
+              <button 
+                onClick={handleUnlinkWallet} 
+                className="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
+              >
+                Unlink Wallet
+              </button>
+            ) : (
+              <button 
+                onClick={handleLinkWallet} 
+                className="px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+              >
+                Link Wallet
+              </button>
+            )
           )}
         </>
       ) : (

ntc-web/lib/solanaConnection.ts

@@ -0,0 +1,62 @@
+/**
+ * Nautilus Trusted Compute
+ * Copyright (C) 2025 Nautilus
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// lib/solanaConnection.ts
+import { Connection, clusterApiUrl } from "@solana/web3.js";
+import { useConnection } from "@solana/wallet-adapter-react";
+import { create } from 'zustand';
+
+// Connection configuration
+export const SOLANA_NETWORK = "devnet";
+export const SOLANA_ENDPOINT = clusterApiUrl(SOLANA_NETWORK);
+
+// Create a single connection instance
+export const connection = new Connection(SOLANA_ENDPOINT, "processed");
+
+// Custom hook for using the connection consistently
+export function useSolanaConnection() {
+  const { connection } = useConnection();
+  return connection;
+}
+
+// Define state shape
+type State = {
+  isConnecting: boolean;
+  lastError: string | null;
+}
+
+// Define actions
+type Actions = {
+  setConnecting: (isConnecting: boolean) => void;
+  setError: (error: string | null) => void;
+}
+
+// Combine state and actions
+type ConnectionState = State & Actions;
+
+// Create store with explicit type annotations
+export const useConnectionStore = create<ConnectionState>((set: (
+  fn: (state: ConnectionState) => ConnectionState
+) => void) => ({
+  isConnecting: false,
+  lastError: null,
+  setConnecting: (isConnecting: boolean) => 
+    set((state) => ({ ...state, isConnecting })),
+  setError: (error: string | null) => 
+    set((state) => ({ ...state, lastError: error }))
+}));

ntc-web/package-lock.json

@@ -52,7 +52,8 @@
     "react-dom": "^19.0.0",
     "shadcn-ui": "^0.9.4",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",