feat: add Albedo and xBull wallet support with mock connections

- Added Albedo and xBull to SUPPORTED_WALLETS array
- Implemented mock connection functions for Albedo and xBull wallets
- Updated WalletModal to display all three wallets (Freighter, Albedo, xBull)
- Added wallet-specific notes in modal (Albedo popup, xBull extension/mobile)
- Updated footer to show all supported wallets
- Fixed TypeScript errors in dashboard-view and dashboard.ts
- Auto-close modal on successful connection

Author: Abidoyesimze

frontend/components/dashboard/dashboard-view.tsx

@@ -434,14 +434,6 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     }
   };
 
-  const handleCreateStream = async (data: StreamFormData) => {
-    console.log("Creating stream with data:", data);
-    // TODO: Integrate with Soroban contract's create_stream function
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-    alert(
-      `Stream created successfully!\n\nRecipient: ${data.recipient}\nToken: ${data.token}\nAmount: ${data.amount}\nDuration: ${data.duration} ${data.durationUnit}`,
-    );
-    setShowWizard(false);
   const handleApplyTemplate = (templateId: string) => {
     const template = templates.find((item) => item.id === templateId);
     if (!template) {
@@ -597,16 +589,11 @@ export function DashboardView({ session, onDisconnect }: DashboardViewProps) {
     if (activeTab === "incoming") {
       return (
         <div className="mt-8">
-          <IncomingStreams />
+          <IncomingStreams streams={stats?.incomingStreams || []} />
         </div>
       );
     }
 
-    if (activeTab === "overview") {
-      if (!stats) {
-      return <div className="mt-8"><IncomingStreams streams={stats?.incomingStreams || []} /></div>;
-    }
-
     if (activeTab === "streams") {
       return (
         <div className="dashboard-content-stack mt-8">

frontend/components/wallet/WalletButton.tsx

@@ -62,6 +62,13 @@ export function WalletButton() {
     disconnect();
   };
 
+  // Close modal when connection is successful
+  useEffect(() => {
+    if (status === "connected") {
+      setModalOpen(false);
+    }
+  }, [status]);
+
   // Don't render anything until client-side hydration is complete to avoid
   // localStorage mismatch flicker.
   if (!isHydrated) {

frontend/components/wallet/WalletModal.tsx

@@ -22,7 +22,10 @@ interface WalletModalProps {
   onClose: () => void;
 }
 
-const WALLET_NOTES: Partial<Record<WalletId, string>> = {};
+const WALLET_NOTES: Partial<Record<WalletId, string>> = {
+  albedo: "A popup window will open for authentication.",
+  xbull: "Available as browser extension or mobile app.",
+};
 
 export function WalletModal({ onClose }: WalletModalProps) {
   const { wallets, status, selectedWalletId, errorMessage, connect, clearError } =
@@ -193,7 +196,7 @@ export function WalletModal({ onClose }: WalletModalProps) {
         >
           {isConnecting
             ? "Waiting for wallet approval…"
-            : "Freighter"}
+            : "Supported wallets: Freighter, Albedo, xBull"}
         </p>
       </div>
     </div>

frontend/components/wallet/wallet-entry.tsx

@@ -1,12 +1,21 @@
 "use client";
 
 import { DashboardView } from "@/components/dashboard/dashboard-view";
-import { WalletSelectionModal } from "@/components/wallet/wallet-selection-modal";
+import { WalletModal } from "@/components/wallet/WalletModal";
 import { useWallet } from "@/context/wallet-context";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 
 export function WalletEntry() {
   const { status, session, isHydrated, disconnect } = useWallet();
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    if (isHydrated && status !== "connected") {
+      setShowModal(true);
+    } else if (status === "connected") {
+      setShowModal(false);
+    }
+  }, [isHydrated, status]);
 
   if (!isHydrated) {
     return (
@@ -26,10 +35,7 @@ export function WalletEntry() {
     return <DashboardView session={session} onDisconnect={disconnect} />;
   }
 
-  return (
-    <WalletSelectionModal
-      isOpen={status !== "connected"}
-      onClose={undefined}
-    />
-  );
+  return showModal ? (
+    <WalletModal onClose={() => setShowModal(false)} />
+  ) : null;
 }

frontend/context/wallet-context.tsx

@@ -35,7 +35,7 @@ interface WalletContextValue {
 // so stale persisted sessions are discarded rather than causing type errors.
 const STORAGE_KEY = "flowfi.wallet.session.v1";
 const WalletContext = createContext<WalletContextValue | undefined>(undefined);
-const VALID_WALLET_IDS: WalletId[] = ["freighter"];
+const VALID_WALLET_IDS: WalletId[] = ["freighter", "albedo", "xbull"];
 
 interface WalletState {
   status: WalletStatus;

frontend/lib/dashboard.ts

@@ -1,4 +1,5 @@
 import type { BackendStream } from "./api-types";
+import type { WalletId } from "./wallet";
 
 export interface ActivityItem {
   id: string;
@@ -45,7 +46,7 @@ const MOCK_STATS_BY_WALLET: Record<WalletId, DashboardSnapshot | null> = {
     totalReceived: 4720,
     totalValueLocked: 32140,
     activeStreamsCount: 2,
-    streams: [
+    outgoingStreams: [
       {
         id: "stream-1",
         date: "2023-10-25",
@@ -67,6 +68,7 @@ const MOCK_STATS_BY_WALLET: Record<WalletId, DashboardSnapshot | null> = {
         withdrawn: 300,
       },
     ],
+    incomingStreams: [],
     recentActivity: [
       {
         id: "act-1",
@@ -94,6 +96,8 @@ const MOCK_STATS_BY_WALLET: Record<WalletId, DashboardSnapshot | null> = {
       },
     ],
   },
+  albedo: null,
+  xbull: null,
 };
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/v1";
 

frontend/lib/wallet.ts

@@ -28,7 +28,7 @@ import {
   getNetworkDetails,
 } from "@stellar/freighter-api";
 
-export type WalletId = "freighter";
+export type WalletId = "freighter" | "albedo" | "xbull";
 
 export interface WalletDescriptor {
   id: WalletId;
@@ -71,6 +71,18 @@ export const SUPPORTED_WALLETS: readonly WalletDescriptor[] = [
     badge: "Extension",
     description: "Direct browser wallet for Stellar accounts and Soroban apps.",
   },
+  {
+    id: "albedo",
+    name: "Albedo",
+    badge: "Web",
+    description: "Connect via web authentication popup. No extension required.",
+  },
+  {
+    id: "xbull",
+    name: "xBull",
+    badge: "Extension",
+    description: "Browser extension and mobile wallet for Stellar ecosystem.",
+  },
 ];
 
 // ── Internal helpers ──────────────────────────────────────────────────────────
@@ -79,6 +91,7 @@ function buildSession(
   walletId: WalletId,
   publicKey: string,
   network: string,
+  mocked: boolean = false,
 ): WalletSession {
   const descriptor = SUPPORTED_WALLETS.find((w) => w.id === walletId);
 
@@ -92,7 +105,7 @@ function buildSession(
     publicKey,
     connectedAt: new Date().toISOString(),
     network,
-    mocked: false,
+    mocked,
   };
 }
 
@@ -133,6 +146,48 @@ async function connectFreighter(): Promise<WalletSession> {
   return buildSession("freighter", address, networkId);
 }
 
+// ── Albedo (Mock) ──────────────────────────────────────────────────────────────
+
+/**
+ * Mock connection for Albedo wallet.
+ * Simulates a connection with a delay to show loading state.
+ * In production, this would integrate with Albedo's web auth popup.
+ */
+async function connectAlbedo(): Promise<WalletSession> {
+  // Simulate connection delay
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  // Generate a mock public key for demonstration
+  // In production, this would come from Albedo's authentication flow
+  // Stellar public keys are base32 encoded and 56 characters long, starting with G
+  const mockPublicKey = "G" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567".substring(0, 55);
+  
+  const networkId = STELLAR_NETWORK === "MAINNET" ? "Mainnet" : "Testnet";
+
+  return buildSession("albedo", mockPublicKey, networkId, true);
+}
+
+// ── xBull (Mock) ────────────────────────────────────────────────────────────────
+
+/**
+ * Mock connection for xBull wallet.
+ * Simulates a connection with a delay to show loading state.
+ * In production, this would integrate with xBull extension or mobile handoff.
+ */
+async function connectXBull(): Promise<WalletSession> {
+  // Simulate connection delay
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  // Generate a mock public key for demonstration
+  // In production, this would come from xBull's connection flow
+  // Stellar public keys are base32 encoded and 56 characters long, starting with G
+  const mockPublicKey = "G" + "ZYXWVUTSRQPONMLKJIHGFEDCBA234567".substring(0, 55);
+  
+  const networkId = STELLAR_NETWORK === "MAINNET" ? "Mainnet" : "Testnet";
+
+  return buildSession("xbull", mockPublicKey, networkId, true);
+}
+
 // ── Public connect dispatch ───────────────────────────────────────────────────
 
 export async function connectWallet(
@@ -141,6 +196,10 @@ export async function connectWallet(
   switch (walletId) {
     case "freighter":
       return connectFreighter();
+    case "albedo":
+      return connectAlbedo();
+    case "xbull":
+      return connectXBull();
     default:
       throw new Error("Unsupported wallet selected.");
   }