Shitcoin topup with lendasat swap rest api

app/layout.tsx

@@ -1,7 +1,10 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import ClientProviders from "@/components/ClientProviders";
+import dynamic from "next/dynamic";
+const ClientProviders = dynamic(() => import("@/components/ClientProviders"), {
+  ssr: false,
+});
 import { Toaster } from "@/components/ui/sonner";
 import BitcoinConnectClient from "@/components/bitcoin-connect/BitcoinConnectClient";
 import SWUpdater from "@/components/SWUpdater";

components/TopUpPromptModal.tsx

@@ -49,6 +49,7 @@ import { DEFAULT_MINT_URL } from "@/lib/utils";
 import { toast } from "sonner";
 import { ModalShell } from "@/components/ui/ModalShell";
 import CloseButton from "@/components/ui/CloseButton";
+import CryptoDepositPanel from "@/features/wallet/components/CryptoDepositPanel";
 import {
   requestBitcoinConnectProvider,
   useBitcoinConnectStatus,
@@ -103,9 +104,9 @@ const TopUpPromptModal: React.FC<TopUpPromptModalProps> = ({
   } = useBitcoinConnectStatus();
   const [cashuToken, setCashuToken] = useState("");
   const [isReceivingToken, setIsReceivingToken] = useState(false);
-  const [activeTab, setActiveTab] = useState<"lightning" | "token" | "wallet">(
-    "lightning"
-  );
+  const [activeTab, setActiveTab] = useState<
+    "lightning" | "crypto" | "token" | "wallet"
+  >("lightning");
   const [nwcCustomAmount, setNwcCustomAmount] = useState("");
   const [isPayingWithNWC, setIsPayingWithNWC] = useState(false);
   const [activePage, setActivePage] = useState<"topup" | "login">(
@@ -783,6 +784,7 @@ const TopUpPromptModal: React.FC<TopUpPromptModalProps> = ({
     { key: "lightning" as const, label: "Lightning" },
     { key: "token" as const, label: "Token" },
     { key: "wallet" as const, label: "NWC" },
+    { key: "crypto" as const, label: "Crypto" },
   ];
 
   const topUpTabButtonBase =
@@ -989,6 +991,11 @@ const TopUpPromptModal: React.FC<TopUpPromptModalProps> = ({
           </div>
         )}
 
+        {/* Crypto Tab */}
+        {activeTab === "crypto" && (
+          <CryptoDepositPanel />
+        )}
+
         {/* Wallet Tab */}
         {activeTab === "wallet" && (
           <div className="space-y-4">
@@ -1487,7 +1494,7 @@ const TopUpPromptModal: React.FC<TopUpPromptModalProps> = ({
         }}
       >
         <DrawerContent
-          className={`bg-card flex flex-col rounded-t-[10px] mt-24 ${dialogHeightClass} outline-none z-[60] overflow-hidden`}
+          className={`bg-card flex flex-col rounded-t-[10px] mt-24 ${dialogHeightClass} outline-none z-60 overflow-hidden`}
         >
           <div className="pt-4 pb-4 bg-card rounded-t-[10px] flex-1 flex flex-col min-h-0">
             <DrawerTitle className="sr-only">{headerTitle}</DrawerTitle>

components/chat/ChatContainer.tsx

@@ -55,6 +55,7 @@ const ChatContainer: React.FC<ChatContainerProps> = ({
   return (
     <div
       className={`flex h-dvh w-full bg-background text-foreground overflow-hidden`}
+      suppressHydrationWarning
     >
       {/* Mobile Sidebar Overlay */}
       {isMobile && isAuthenticated && (

components/ui/ModalShell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 
 interface ModalShellProps {
@@ -30,7 +31,14 @@ export const ModalShell: React.FC<ModalShellProps> = ({
   contentRole = "dialog",
   contentAriaLabel,
 }) => {
-  if (!open) return null;
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!open || !mounted) return null;
 
   const shouldStopPropagation =
     stopPropagation ?? (closeOnAnyClick ? false : true);
@@ -46,10 +54,10 @@ export const ModalShell: React.FC<ModalShellProps> = ({
     }
   };
 
-  return (
+  return createPortal(
     <div
       className={cn(
-        "fixed inset-0 flex items-center justify-center",
+        "fixed inset-0 flex items-center justify-center z-9999",
         overlayClassName
       )}
       onMouseDown={handleOverlayMouseDown}
@@ -66,6 +74,7 @@ export const ModalShell: React.FC<ModalShellProps> = ({
       >
         {children}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 };

features/wallet/components/BalanceDisplay.tsx

@@ -54,6 +54,7 @@ import BalancePopoverHeader from "@/features/wallet/components/balance/BalancePo
 import BalanceOverviewTab from "@/features/wallet/components/balance/BalanceOverviewTab";
 import BalanceActivityTab from "@/features/wallet/components/balance/BalanceActivityTab";
 import BalanceInvoiceTab from "@/features/wallet/components/balance/BalanceInvoiceTab";
+import CryptoDepositPanel from "@/features/wallet/components/CryptoDepositPanel";
 
 /**
  * User balance and authentication status component with comprehensive wallet popover
@@ -112,7 +113,7 @@ const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
   const [isPayingInvoice, setIsPayingInvoice] = useState(false);
 
   // Receive state
-  const [receiveTab, setReceiveTab] = useState<"lightning" | "token">(
+  const [receiveTab, setReceiveTab] = useState<"lightning" | "crypto" | "token">(
     "lightning"
   );
   const [mintAmount, setMintAmount] = useState("");
@@ -1483,7 +1484,7 @@ const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
                   {/* Note about msats if using msat unit */}
                   {msatNote}
 
-                  {/* Sub-tabs for Lightning/Token */}
+                  {/* Sub-tabs for Lightning/Token/Crypto */}
                   <div className="flex bg-muted/50 rounded-lg p-1">
                     <button
                       onClick={() => setReceiveTab("lightning")}
@@ -1503,6 +1504,13 @@ const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
                     >
                       Token
                     </button>
+                    <button
+                      onClick={() => setReceiveTab("crypto")}
+                      className={getSubTabClass(receiveTab === "crypto")}
+                      type="button"
+                    >
+                      Crypto
+                    </button>
                   </div>
 
                   {receiveTab === "lightning" && (
@@ -1613,6 +1621,10 @@ const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
                       </div>
                     </div>
                   )}
+
+                  {receiveTab === "crypto" && (
+                    <CryptoDepositPanel />
+                  )}
                 </div>
               )}