diff --git a/src/components/ConnectWalletDialog.tsx b/src/components/ConnectWalletDialog.tsx index 44333d5..7a5bc04 100644 --- a/src/components/ConnectWalletDialog.tsx +++ b/src/components/ConnectWalletDialog.tsx @@ -11,7 +11,7 @@ import { import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { useGrimoire } from "@/core/state"; -import { createWalletFromURI } from "@/services/nwc"; +import { createWalletFromURI, balance$ } from "@/services/nwc"; interface ConnectWalletDialogProps { open: boolean; @@ -66,6 +66,8 @@ export default function ConnectWalletDialog({ try { const balanceResult = await wallet.getBalance(); balance = balanceResult.balance; + // Update the observable immediately so WalletViewer shows correct balance + balance$.next(balance); } catch (err) { console.warn("[NWC] Failed to get balance:", err); // Balance is optional, continue anyway @@ -83,6 +85,7 @@ export default function ConnectWalletDialog({ balance, info: { alias: info.alias, + network: info.network, methods: info.methods, notifications: info.notifications, }, @@ -96,6 +99,7 @@ export default function ConnectWalletDialog({ // Update info updateNWCInfo({ alias: info.alias, + network: info.network, methods: info.methods, notifications: info.notifications, }); diff --git a/src/components/WalletConnectionStatus.tsx b/src/components/WalletConnectionStatus.tsx new file mode 100644 index 0000000..e5eaf92 --- /dev/null +++ b/src/components/WalletConnectionStatus.tsx @@ -0,0 +1,65 @@ +/** + * WalletConnectionStatus Component + * + * Displays a visual indicator for wallet connection status. + * Shows different colors and animations based on status: + * - connected: green + * - connecting: yellow (pulsing) + * - error: red + * - disconnected: gray + */ + +import type { NWCConnectionStatus } from "@/services/nwc"; + +interface WalletConnectionStatusProps { + status: NWCConnectionStatus; + /** Size of the indicator */ + size?: "sm" | "md"; + /** Whether to show the status label */ + showLabel?: boolean; + /** Additional class names */ + className?: string; +} + +const sizeClasses = { + sm: "size-1.5", + md: "size-2", +}; + +/** + * Get the color class for a connection status + */ +export function getConnectionStatusColor(status: NWCConnectionStatus): string { + switch (status) { + case "connected": + return "bg-green-500"; + case "connecting": + return "bg-yellow-500 animate-pulse"; + case "error": + return "bg-red-500"; + default: + return "bg-gray-500"; + } +} + +export function WalletConnectionStatus({ + status, + size = "sm", + showLabel = false, + className = "", +}: WalletConnectionStatusProps) { + const colorClass = getConnectionStatusColor(status); + + if (!showLabel) { + return ( + + ); + } + + return ( +