Feat/wallet not installed badge

components/layout/connect-wallet-button.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Check, Copy, LogOut, Loader2, Wallet } from 'lucide-react'
+import { Check, Copy, LogOut, Loader2, Wallet, ExternalLink } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
@@ -19,7 +19,7 @@
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { useWallet } from '@/hooks/use-wallet'
-import { WALLET_OPTIONS } from '@/components/providers/wallet-provider'
+import { WALLET_OPTIONS, ADAPTERS } from '@/components/providers/wallet-provider'
 import { shortenAddress } from '@/lib/stream-utils'
 import { cn } from '@/lib/utils'
 import { toast } from 'sonner'
@@ -114,6 +114,7 @@
           </div>
           {WALLET_OPTIONS.map((wallet) => {
             const isPending = connecting && pendingId === wallet.id
+            const available = ADAPTERS[wallet.id]?.isAvailable() ?? true
             return (
               <button
                 key={wallet.id}
@@ -134,6 +135,24 @@
                 {isPending && (
                   <Loader2 className="size-4 animate-spin text-muted-foreground" />
                 )}
+                {!isPending && !available && (
+                  wallet.installUrl ? (
+                    <a
+                      href={wallet.installUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={(e) => e.stopPropagation()}
+                      className="flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground hover:text-foreground"
+                    >
+                      Not installed
+                      <ExternalLink className="size-3" />
+                    </a>
+                  ) : (
+                    <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                      Not installed
+                    </span>
+                  )
+                )}
               </button>
             )
           })}

components/layout/notification-bell.tsx

@@ -1,13 +1,17 @@
 'use client'
 
 import { useState, useRef, useEffect } from 'react'
-import { Bell } from 'lucide-react'
+import { Bell, X } from 'lucide-react'
 import { formatTimeAgo } from '@/lib/stream-utils'
 import { useWallet } from '@/hooks/use-wallet'
 import { useNotifications, type AppNotification } from '@/hooks/use-notifications'
 
 function NotificationItem({
   notification,
+  onDismiss,
+}: {
+  notification: AppNotification
+  onDismiss: (id: string) => void
   itemRef,
 }: {
   notification: AppNotification
@@ -25,9 +29,18 @@ function NotificationItem({
     >
       <div className="flex items-start justify-between gap-2">
         <p className="text-sm font-medium">{notification.title}</p>
-        {!notification.read && (
-          <span className="mt-1 size-2 shrink-0 rounded-full bg-primary" />
-        )}
+        <div className="flex shrink-0 items-center gap-1.5 mt-0.5">
+          {!notification.read && (
+            <span className="size-2 rounded-full bg-primary" />
+          )}
+          <button
+            onClick={() => onDismiss(notification.id)}
+            aria-label="Dismiss notification"
+            className="text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
       </div>
       <p className="mt-0.5 text-xs text-muted-foreground">{notification.body}</p>
       <p className="mt-1 text-xs text-muted-foreground">{formatTimeAgo(notification.timestamp)}</p>
@@ -37,7 +50,7 @@ function NotificationItem({
 
 export function NotificationBell() {
   const { address } = useWallet()
-  const { notifications, unreadCount, markAllRead, clearAll } = useNotifications(address)
+  const { notifications, unreadCount, markAllRead, clearAll, dismissNotification } = useNotifications(address)
   const [open, setOpen] = useState(false)
   const [activeIndex, setActiveIndex] = useState(-1)
   const ref = useRef<HTMLDivElement>(null)
@@ -151,6 +164,8 @@ export function NotificationBell() {
                 No notifications yet
               </p>
             ) : (
+              notifications.map((n) => (
+                <NotificationItem key={n.id} notification={n} onDismiss={dismissNotification} />
               notifications.map((n, idx) => (
                 <NotificationItem
                   key={n.id}

components/providers/wallet-provider.tsx

@@ -50,15 +50,22 @@ export interface WalletOption {
   id: string;
   name: string;
   detail: string;
+  installUrl?: string;
 }
 
 export const WALLET_OPTIONS: WalletOption[] = [
   {
     id: "freighter",
     name: "Freighter",
     detail: "Browser extension · stellar.org",
+    installUrl: "https://www.freighter.app",
+  },
+  {
+    id: "xbull",
+    name: "xBull",
+    detail: "Extension & web",
+    installUrl: "https://xbull.app",
   },
-  { id: "xbull", name: "xBull", detail: "Extension & web" },
   { id: "lobstr", name: "LOBSTR", detail: "Mobile & extension" },
   { id: "albedo", name: "Albedo", detail: "Web signer" },
 ];
@@ -287,7 +294,7 @@ const albedoAdapter: WalletAdapter = {
 
 // ─── Adapter registry ─────────────────────────────────────────────────────────
 
-const ADAPTERS: Record<string, WalletAdapter> = {
+export const ADAPTERS: Record<string, WalletAdapter> = {
   freighter: freighterAdapter,
   xbull: xbullAdapter,
   lobstr: lobstrAdapter,

hooks/use-notifications.ts

@@ -252,6 +252,14 @@ export function useNotifications(walletAddress: string | null) {
     saveNotifications([]);
   }, []);
 
+  const dismissNotification = useCallback((id: string) => {
+    setNotifications((prev) => {
+      const updated = prev.filter((n) => n.id !== id);
+      saveNotifications(updated);
+      return updated;
+    });
+  }, []);
+
   useEffect(() => {
     const rpcUrl = config.rpcUrl;
     const contractId = config.streamContractId;
@@ -388,5 +396,5 @@ export function useNotifications(walletAddress: string | null) {
     network,
   ]);
 
-  return { notifications, unreadCount, markAllRead, clearAll };
+  return { notifications, unreadCount, markAllRead, clearAll, dismissNotification };
 }