feat: implement Sign-In With Stellar (SIWS) authentication and wallet session management hooks

.github/workflows/CI.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   # Dummy variables for tests/builds that might expect them
-  DATABASE_URL: postgresql://lance:lance@localhost:5432/lance
+  DATABASE_URL: postgresql://postgres:postgres@localhost:5432/postgres
   NEXT_PUBLIC_E2E: "true"
   JUDGE_AUTHORITY_SECRET: SBU6F23AV5T5E6AXK2J5C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6
   ESCROW_CONTRACT_ID: CD5E6AXK2J5C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6C6A6
@@ -25,9 +25,9 @@ jobs:
       postgres:
         image: postgres:15
         env:
-          POSTGRES_USER: lance
-          POSTGRES_PASSWORD: lance
-          POSTGRES_DB: lance
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_DB: postgres
         ports:
           - 5432:5432
         options: >-

Cargo.toml

@@ -26,6 +26,7 @@ thiserror          = "1"
 dotenvy            = "0.15"
 tower              = "0.4"
 tower-http         = { version = "0.5", features = ["cors", "trace"] }
+hex                = "0.4"
 
 [profile.release]
 opt-level         = "z"
@@ -35,4 +36,4 @@ strip             = "symbols"
 debug-assertions  = false
 panic             = "abort"
 codegen-units     = 1
-lto               = true
+lto               = true

apps/web/components/navigation/top-nav.tsx

@@ -37,8 +37,8 @@
   const {
     address,
     xlmBalance,
     appNetwork,
     walletNetwork,
     networkMismatch,
     isConnected,
     isConnecting,
@@ -137,7 +137,7 @@
               </button>
             )}
             {networkMismatch ? (
-              <span className="inline-flex items-center rounded-xl border border-indigo-500/40 bg-zinc-900 px-2 py-1 text-[10px] text-indigo-300">
+              <span className="inline-flex items-center rounded-xl border border-indigo-500/40 bg-zinc-900 px-2 py-1 text-[10px] text-indigo-300 animate-pulse">
                 <TriangleAlert className="h-3 w-3" />
               </span>
             ) : null}
@@ -171,9 +171,9 @@
               </button>
             )}
             {networkMismatch ? (
-              <span className="inline-flex items-center gap-1 rounded-xl border border-indigo-500/40 bg-zinc-900 px-2.5 py-1.5 text-xs text-indigo-300">
+              <span className="inline-flex items-center gap-1 rounded-xl border border-indigo-500/40 bg-zinc-900 px-2.5 py-1.5 text-xs text-indigo-300 animate-pulse">
                 <TriangleAlert className="h-3.5 w-3.5" />
-                {walletNetwork} vs {appNetwork}
+                Network Mismatch
               </span>
             ) : null}
             {error ? (
@@ -193,7 +193,7 @@
                   <AvatarFallback className="bg-primary/15 text-xs font-semibold text-primary">
                     {user?.name
                       ?.split(" ")
-                      .map((part) => part[0])
+                      .map((part: string) => part[0])
                       .join("")
                       .slice(0, 2) ?? "LN"}
                   </AvatarFallback>

apps/web/components/ui/network-mismatch-banner.tsx

@@ -1,25 +1,61 @@
 "use client";
 
-import { AlertTriangle } from "lucide-react";
-import { useAuthStore } from "@/lib/store/use-auth-store";
+import { TriangleAlert, ArrowRightLeft, X } from "lucide-react";
+import { useWalletStore } from "@/lib/store/use-wallet-store";
+import { APP_STELLAR_NETWORK } from "@/lib/stellar";
+import { cn } from "@/lib/utils";
 
 export function NetworkMismatchBanner() {
-  const networkMismatch = useAuthStore((state) => state.networkMismatch);
+  const { networkMismatch, setNetworkMismatch } = useWalletStore();
 
   if (!networkMismatch) return null;
 
   return (
-    <div
-      role="alert"
-      aria-live="assertive"
-      className="flex items-center gap-3 border-b border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-600 dark:text-amber-400"
-    >
-      <AlertTriangle className="h-4 w-4 shrink-0" aria-hidden="true" />
-      <p>
-        <span className="font-semibold">Network mismatch — </span>
-        your wallet is connected to a different network than this app.
-        Please switch your wallet to the correct network to continue.
-      </p>
+    <div className="w-full px-4 pt-4 animate-in fade-in slide-in-from-top-4 duration-500">
+      <div 
+        role="alert"
+        aria-live="assertive"
+        className={cn(
+          "mx-auto max-w-7xl relative overflow-hidden",
+          "rounded-[12px] border border-indigo-500/20 bg-zinc-900/90 backdrop-blur-md",
+          "flex flex-col md:flex-row items-center justify-between gap-4 p-4 md:p-5",
+          "transition-all duration-200 hover:border-indigo-500/40 shadow-xl shadow-indigo-500/5"
+        )}
+      >
+        <div className="flex items-center gap-4">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20">
+            <TriangleAlert className="h-5 w-5 text-indigo-400" aria-hidden="true" />
+          </div>
+          <div className="space-y-1">
+            <h3 className="text-sm font-semibold text-zinc-100 tracking-tight">
+              Network Mismatch Detected
+            </h3>
+            <p className="text-xs text-zinc-400 leading-relaxed">
+              Your wallet is connected to a different network. Switch to <span className="text-indigo-300 font-medium capitalize">{APP_STELLAR_NETWORK}</span> to continue with Lance.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 w-full md:w-auto">
+          <button
+            onClick={() => window.location.reload()}
+            className="flex-1 md:flex-none inline-flex items-center justify-center gap-2 rounded-[10px] bg-indigo-500 px-4 py-2 text-xs font-semibold text-white transition-all hover:bg-indigo-600 active:scale-[0.98] shadow-lg shadow-indigo-500/20"
+          >
+            <ArrowRightLeft className="h-3.5 w-3.5" />
+            Switch Network
+          </button>
+          <button
+            onClick={() => setNetworkMismatch(false)}
+            aria-label="Dismiss warning"
+            className="inline-flex h-9 w-9 items-center justify-center rounded-[10px] border border-zinc-800 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Decorative background element */}
+        <div className="absolute -right-12 -top-12 h-24 w-24 rounded-full bg-indigo-500/5 blur-3xl pointer-events-none" />
+      </div>
     </div>
   );
 }

apps/web/components/wallet/wallet-connect.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useWallet } from "@/hooks/use-wallet";
+import { useWalletSession } from "@/hooks/use-wallet-session";
 import { Button } from "@/components/ui/button";
 import { 
   Wallet, 
@@ -22,19 +22,19 @@ import {
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { WalletSelectionModal } from "./wallet-selection-modal";
+import { useState } from "react";
 
 export function WalletConnect() {
   const { 
     address, 
-    network,
-    status, 
+    walletNetwork,
     connect, 
     disconnect, 
     isConnected, 
-    isConnecting,
-    isModalOpen,
-    setIsModalOpen
-  } = useWallet();
+    isConnecting 
+  } = useWalletSession();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const truncateAddress = (addr: string) => 
     `${addr.slice(0, 6)}...${addr.slice(-4)}`;
@@ -46,15 +46,20 @@ export function WalletConnect() {
     }
   };
 
-  const handleConnectClick = () => {
-    setIsModalOpen(true);
+  const handleConnect = async (walletId?: string) => {
+    try {
+      setIsModalOpen(false);
+      await connect(walletId);
+    } catch (err) {
+      console.error("Connection error:", err);
+    }
   };
 
   if (!isConnected) {
     return (
       <>
         <Button
-          onClick={handleConnectClick}
+          onClick={() => setIsModalOpen(true)}
           disabled={isConnecting}
           aria-label={isConnecting ? "Connecting to wallet" : "Connect Stellar wallet"}
           className={cn(
@@ -73,12 +78,13 @@ export function WalletConnect() {
               Connect Wallet
             </>
           )}
+          <div className="absolute inset-0 rounded-[12px] bg-gradient-to-r from-indigo-500/0 via-indigo-500/5 to-indigo-500/0 opacity-0 transition-opacity hover:opacity-100" />
         </Button>
 
         <WalletSelectionModal 
           isOpen={isModalOpen}
           onClose={() => setIsModalOpen(false)}
-          onSelect={connect}
+          onSelect={handleConnect}
         />
       </>
     );
@@ -131,7 +137,7 @@ export function WalletConnect() {
           className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm hover:bg-white/5 hover:text-white transition-colors"
         >
           <a 
-            href={`${network === 'TESTNET' ? 'https://stellar.expert/explorer/testnet' : 'https://stellar.expert/explorer/public'}/account/${address}`}
+            href={`${walletNetwork === 'testnet' ? 'https://stellar.expert/explorer/testnet' : 'https://stellar.expert/explorer/public'}/account/${address}`}
             target="_blank"
             rel="noopener noreferrer"
           >