diff --git a/components/layout/connect-wallet-button.tsx b/components/layout/connect-wallet-button.tsx index 00614de..bce2f58 100644 --- a/components/layout/connect-wallet-button.tsx +++ b/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 @@ import { 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 @@ export function ConnectWalletButton({ className }: { className?: string }) { {WALLET_OPTIONS.map((wallet) => { const isPending = connecting && pendingId === wallet.id + const available = ADAPTERS[wallet.id]?.isAvailable() ?? true return ( ) })} diff --git a/components/layout/notification-bell.tsx b/components/layout/notification-bell.tsx index 3f995e2..7f5ced1 100644 --- a/components/layout/notification-bell.tsx +++ b/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({ >

{notification.title}

- {!notification.read && ( - - )} +
+ {!notification.read && ( + + )} + +

{notification.body}

{formatTimeAgo(notification.timestamp)}

@@ -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(null) @@ -151,6 +164,8 @@ export function NotificationBell() { No notifications yet

) : ( + notifications.map((n) => ( + notifications.map((n, idx) => ( = { +export const ADAPTERS: Record = { freighter: freighterAdapter, xbull: xbullAdapter, lobstr: lobstrAdapter, diff --git a/hooks/use-notifications.ts b/hooks/use-notifications.ts index 238dca1..bf7244a 100644 --- a/hooks/use-notifications.ts +++ b/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 }; }