fix redraw issue for wallet configuration

2025-08-27 13:09:22 +00:00 · 2025-07-14 14:21:57 +00:00 · 2025-07-14 14:21:57 +00:00 · 97a493c218
commit 97a493c218
parent 6845e6cf7c
3 changed files with 288 additions and 221 deletions
--- a/src/components/WalletModal.tsx
+++ b/src/components/WalletModal.tsx
@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 import { Wallet, Plus, Trash2, Zap, Globe, WalletMinimal, CheckCircle, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@ -28,77 +28,70 @@ import { useNWC } from '@/hooks/useNWCContext';
 import { useWallet } from '@/hooks/useWallet';
 import { useToast } from '@/hooks/useToast';
 import { useIsMobile } from '@/hooks/useIsMobile';
+import type { NWCConnection, NWCInfo } from '@/hooks/useNWC';

 interface WalletModalProps {
  children?: React.ReactNode;
  className?: string;
 }

-export function WalletModal({ children, className }: WalletModalProps) {
-  const [open, setOpen] = useState(false);
-  const [addDialogOpen, setAddDialogOpen] = useState(false);
-  const [connectionUri, setConnectionUri] = useState('');
-  const [alias, setAlias] = useState('');
-  const [isConnecting, setIsConnecting] = useState(false);
-  const isMobile = useIsMobile();
+// Extracted AddWalletContent to prevent re-renders
+const AddWalletContent = forwardRef<HTMLDivElement, {
+  alias: string;
+  setAlias: (value: string) => void;
+  connectionUri: string;
+  setConnectionUri: (value: string) => void;
+}>(({ alias, setAlias, connectionUri, setConnectionUri }, ref) => (
+  <div className="space-y-4 px-4" ref={ref}>
+    <div>
+      <Label htmlFor="alias">Wallet Name (optional)</Label>
+      <Input
+        id="alias"
+        placeholder="My Lightning Wallet"
+        value={alias}
+        onChange={(e) => setAlias(e.target.value)}
+      />
+    </div>
+    <div>
+      <Label htmlFor="connection-uri">Connection URI</Label>
+      <Textarea
+        id="connection-uri"
+        placeholder="nostr+walletconnect://..."
+        value={connectionUri}
+        onChange={(e) => setConnectionUri(e.target.value)}
+        rows={3}
+      />
+    </div>
+  </div>
+));
+AddWalletContent.displayName = 'AddWalletContent';

-  const {
+// Extracted WalletContent to prevent re-renders
+const WalletContent = forwardRef<HTMLDivElement, {
+  hasWebLN: boolean;
+  isDetecting: boolean;
+  hasNWC: boolean;
+  connections: NWCConnection[];
+  connectionInfo: Record<string, NWCInfo>;
+  activeConnection: string | null;
+  handleSetActive: (cs: string) => void;
+  handleRemoveConnection: (cs: string) => void;
+  setAddDialogOpen: (open: boolean) => void;
+}>(({
+  hasWebLN,
+  isDetecting,
+  hasNWC,
  connections,
-    activeConnection,
  connectionInfo,
-    addConnection,
-    removeConnection,
-    setActiveConnection
-  } = useNWC();
-
-  const { hasWebLN, isDetecting } = useWallet();
-
-  // Calculate hasNWC directly from connections to ensure reactivity
-  const hasNWC = connections.length > 0 && connections.some(c => c.isConnected);
-  const { toast } = useToast();
-
-  const handleAddConnection = async () => {
-    if (!connectionUri.trim()) {
-      toast({
-        title: 'Connection URI required',
-        description: 'Please enter a valid NWC connection URI.',
-        variant: 'destructive',
-      });
-      return;
-    }
-
-    setIsConnecting(true);
-    try {
-      const success = await addConnection(connectionUri.trim(), alias.trim() || undefined);
-      if (success) {
-        setConnectionUri('');
-        setAlias('');
-        setAddDialogOpen(false);
-      }
-    } finally {
-      setIsConnecting(false);
-    }
-  };
-
-  const handleRemoveConnection = (connectionString: string) => {
-    removeConnection(connectionString);
-  };
-
-  const handleSetActive = (connectionString: string) => {
-    setActiveConnection(connectionString);
-    toast({
-      title: 'Active wallet changed',
-      description: 'The selected wallet is now active for zaps.',
-    });
-  };
-
-  // Shared content component
-  const WalletContent = () => (
-    <div className="space-y-6 px-4 pb-4">
+  activeConnection,
+  handleSetActive,
+  handleRemoveConnection,
+  setAddDialogOpen
+}, ref) => (
+  <div className="space-y-6 px-4 pb-4" ref={ref}>
    {/* Current Status */}
    <div className="space-y-3">
      <h3 className="font-medium">Current Status</h3>
-
      <div className="grid gap-3">
        {/* WebLN */}
        <div className="flex items-center justify-between p-3 border rounded-lg">
@ -116,7 +109,6 @@ export function WalletModal({ children, className }: WalletModalProps) {
            </Badge>
          </div>
        </div>
-
        {/* NWC */}
        <div className="flex items-center justify-between p-3 border rounded-lg">
          <div className="flex items-center gap-3">
@ -140,59 +132,15 @@ export function WalletModal({ children, className }: WalletModalProps) {
        </div>
      </div>
    </div>
-
    <Separator />
-
    {/* NWC Management */}
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-medium">Nostr Wallet Connect</h3>
-          <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
-            <DialogTrigger asChild>
-              <Button size="sm" variant="outline">
+        <Button size="sm" variant="outline" onClick={() => setAddDialogOpen(true)}>
          <Plus className="h-4 w-4 mr-1" />
          Add
        </Button>
-            </DialogTrigger>
-            <DialogContent className="sm:max-w-[425px]">
-              <DialogHeader>
-                <DialogTitle>Connect NWC Wallet</DialogTitle>
-                <DialogDescription>
-                  Enter your connection string from a compatible wallet.
-                </DialogDescription>
-              </DialogHeader>
-              <div className="space-y-4 px-4">
-                <div>
-                  <Label htmlFor="alias">Wallet Name (optional)</Label>
-                  <Input
-                    id="alias"
-                    placeholder="My Lightning Wallet"
-                    value={alias}
-                    onChange={(e) => setAlias(e.target.value)}
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="connection-uri">Connection URI</Label>
-                  <Textarea
-                    id="connection-uri"
-                    placeholder="nostr+walletconnect://..."
-                    value={connectionUri}
-                    onChange={(e) => setConnectionUri(e.target.value)}
-                    rows={3}
-                  />
-                </div>
-              </div>
-              <DialogFooter className="px-4">
-                <Button
-                  onClick={handleAddConnection}
-                  disabled={isConnecting || !connectionUri.trim()}
-                  className="w-full"
-                >
-                  {isConnecting ? 'Connecting...' : 'Connect'}
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
      </div>
      {/* Connected Wallets List */}
      {connections.length === 0 ? (
@ -204,7 +152,6 @@ export function WalletModal({ children, className }: WalletModalProps) {
          {connections.map((connection) => {
            const info = connectionInfo[connection.connectionString];
            const isActive = activeConnection === connection.connectionString;
-
            return (
              <div key={connection.connectionString} className={`flex items-center justify-between p-3 border rounded-lg ${isActive ? 'ring-2 ring-primary' : ''}`}>
                <div className="flex items-center gap-3">
@ -243,7 +190,6 @@ export function WalletModal({ children, className }: WalletModalProps) {
        </div>
      )}
    </div>
-
    {/* Help */}
    {!hasWebLN && connections.length === 0 && (
      <>
@ -256,10 +202,109 @@ export function WalletModal({ children, className }: WalletModalProps) {
      </>
    )}
  </div>
+));
+WalletContent.displayName = 'WalletContent';
+
+export function WalletModal({ children, className }: WalletModalProps) {
+  const [open, setOpen] = useState(false);
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [connectionUri, setConnectionUri] = useState('');
+  const [alias, setAlias] = useState('');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const isMobile = useIsMobile();
+
+  const {
+    connections,
+    activeConnection,
+    connectionInfo,
+    addConnection,
+    removeConnection,
+    setActiveConnection
+  } = useNWC();
+
+  const { hasWebLN, isDetecting } = useWallet();
+
+  const hasNWC = connections.length > 0 && connections.some(c => c.isConnected);
+  const { toast } = useToast();
+
+  const handleAddConnection = async () => {
+    if (!connectionUri.trim()) {
+      toast({
+        title: 'Connection URI required',
+        description: 'Please enter a valid NWC connection URI.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    setIsConnecting(true);
+    try {
+      const success = await addConnection(connectionUri.trim(), alias.trim() || undefined);
+      if (success) {
+        setConnectionUri('');
+        setAlias('');
+        setAddDialogOpen(false);
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleRemoveConnection = (connectionString: string) => {
+    removeConnection(connectionString);
+  };
+
+  const handleSetActive = (connectionString: string) => {
+    setActiveConnection(connectionString);
+    toast({
+      title: 'Active wallet changed',
+      description: 'The selected wallet is now active for zaps.',
+    });
+  };
+
+  const walletContentProps = {
+    hasWebLN,
+    isDetecting,
+    hasNWC,
+    connections,
+    connectionInfo,
+    activeConnection,
+    handleSetActive,
+    handleRemoveConnection,
+    setAddDialogOpen,
+  };
+
+  const addWalletDialog = (
+    <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Connect NWC Wallet</DialogTitle>
+          <DialogDescription>
+            Enter your connection string from a compatible wallet.
+          </DialogDescription>
+        </DialogHeader>
+        <AddWalletContent
+          alias={alias}
+          setAlias={setAlias}
+          connectionUri={connectionUri}
+          setConnectionUri={setConnectionUri}
+        />
+        <DialogFooter className="px-4">
+          <Button
+            onClick={handleAddConnection}
+            disabled={isConnecting || !connectionUri.trim()}
+            className="w-full"
+          >
+            {isConnecting ? 'Connecting...' : 'Connect'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
  );

  if (isMobile) {
    return (
+      <>
        <Drawer open={open} onOpenChange={setOpen}>
          <DrawerTrigger asChild>
            {children || (
@ -271,18 +316,12 @@ export function WalletModal({ children, className }: WalletModalProps) {
          </DrawerTrigger>
          <DrawerContent className="h-full">
            <DrawerHeader className="text-center relative">
-            {/* Close button */}
              <DrawerClose asChild>
-              <Button
-                variant="ghost"
-                size="sm"
-                className="absolute right-4 top-4"
-              >
+                <Button variant="ghost" size="sm" className="absolute right-4 top-4">
                  <X className="h-4 w-4" />
                  <span className="sr-only">Close</span>
                </Button>
              </DrawerClose>
-
              <DrawerTitle className="flex items-center justify-center gap-2 pt-2">
                <Wallet className="h-5 w-5" />
                Lightning Wallet
@ -292,14 +331,42 @@ export function WalletModal({ children, className }: WalletModalProps) {
              </DrawerDescription>
            </DrawerHeader>
            <div className="overflow-y-auto">
-            <WalletContent />
+              <WalletContent {...walletContentProps} />
            </div>
          </DrawerContent>
        </Drawer>
+        {/* Render Add Wallet as a separate Drawer for mobile */}
+        <Drawer open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Connect NWC Wallet</DrawerTitle>
+              <DrawerDescription>
+                Enter your connection string from a compatible wallet.
+              </DrawerDescription>
+            </DrawerHeader>
+            <AddWalletContent
+              alias={alias}
+              setAlias={setAlias}
+              connectionUri={connectionUri}
+              setConnectionUri={setConnectionUri}
+            />
+            <div className="p-4">
+              <Button
+                onClick={handleAddConnection}
+                disabled={isConnecting || !connectionUri.trim()}
+                className="w-full"
+              >
+                {isConnecting ? 'Connecting...' : 'Connect'}
+              </Button>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
    );
  }

  return (
+    <>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          {children || (
@ -319,8 +386,10 @@ export function WalletModal({ children, className }: WalletModalProps) {
              Connect your lightning wallet to send zaps instantly.
            </DialogDescription>
          </DialogHeader>
-        <WalletContent />
+          <WalletContent {...walletContentProps} />
        </DialogContent>
      </Dialog>
+      {addWalletDialog}
+    </>
  );
 }
--- a/src/components/ZapDialog.tsx
+++ b/src/components/ZapDialog.tsx
@ -248,8 +248,6 @@ export function ZapDialog({ target, children, className }: ZapDialogProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const isMobile = useIsMobile();

-
-
  useEffect(() => {
    if (target) {
      setComment('Zapped with MKStack!');
--- a/src/hooks/useNWC.ts
+++ b/src/hooks/useNWC.ts
@ -10,7 +10,7 @@ export interface NWCConnection {
  client?: LN;
 }

-interface NWCInfo {
+export interface NWCInfo {
  alias?: string;
  color?: string;
  pubkey?: string;