From 4c603a81264e7fc86feb3834f39402ed8e20858b Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sun, 1 Nov 2026 13:25:22 +0700
Subject: [PATCH] ui: lead with built-in wallet on native

---
 src/components/Layout.tsx      |  2 +-
 src/components/WalletModal.tsx | 33 +++++++++++++++++++++++++++++++--
 src/pages/WalletPage.tsx       | 19 ++++++++++++++-----
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 64e5b58..0224d7f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -428,7 +428,7 @@ function MobileNav({
           )}
         </span>
         <span className={cn(
-          'block w-full truncate text-center text-[9px] xs:text-[10px] leading-tight tracking-wide uppercase transition-all',
+          'block w-full truncate text-center text-[10px] xs:text-[11px] leading-tight tracking-wide uppercase transition-all',
           active ? 'font-extrabold' : 'font-semibold',
         )}>
           {tab.labelKey ? t(tab.labelKey) : tab.label}
diff --git a/src/components/WalletModal.tsx b/src/components/WalletModal.tsx
index 2d4be77..81dcf94 100644
--- a/src/components/WalletModal.tsx
+++ b/src/components/WalletModal.tsx
@@ -13,6 +13,7 @@ import { useWallet } from '@/hooks/useWallet';
 import { useToast } from '@/hooks/useToast';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useTranslation } from '@/contexts/language';
+import { isNativePlatform } from '@/lib/platform';
 import type { NWCConnection, NWCInfo } from '@/hooks/useNWC';
 import type { WebLNProvider } from "@webbtc/webln-types";
 
@@ -80,6 +81,7 @@ const WalletContent = forwardRef<HTMLDivElement, {
   handleSetActive: (cs: string) => void;
   handleRemoveConnection: (cs: string) => void;
   setAddDialogOpen: (open: boolean) => void;
+  onSelectCashu: () => void;
 }>(({
   webln,
   connections,
@@ -87,12 +89,33 @@ const WalletContent = forwardRef<HTMLDivElement, {
   activeConnection,
   handleSetActive,
   handleRemoveConnection,
-  setAddDialogOpen
+  setAddDialogOpen,
+  onSelectCashu,
 }, ref) => {
   const { t } = useTranslation();
   return (
   <div className="space-y-4 sm:space-y-6 px-0 sm:px-4 pb-4" ref={ref}>
-    {/* NWC First - Primary Option */}
+    {/* Native built-in wallet comes before external connection. */}
+    {isNativePlatform() && (
+      <button
+        type="button"
+        onClick={onSelectCashu}
+        className="flex w-full items-center gap-3 rounded-xl border border-orange-500/30 bg-orange-500/[0.06] p-4 text-left transition-colors hover:bg-orange-500/[0.12]"
+      >
+        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-orange-500/15">
+          <Wallet className="h-5 w-5 text-orange-400" />
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="block text-sm font-bold text-white">{t('walletUi.cashu.title')}</span>
+          <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
+            {t('walletUi.cashu.desc')}
+          </span>
+        </span>
+        <span className="text-gray-500">›</span>
+      </button>
+    )}
+
+    {/* NWC - connect an existing wallet */}
     <div className="space-y-3">
       <div className="flex items-center justify-between">
         <h3 className="font-medium text-sm sm:text-base">{t('walletUi.modal.connectWallet')}</h3>
@@ -266,6 +289,12 @@ export function WalletModal({ children, className }: WalletModalProps) {
     handleSetActive,
     handleRemoveConnection,
     setAddDialogOpen,
+    onSelectCashu: () => {
+      setOpen(false);
+      window.setTimeout(() => {
+        document.getElementById('cashu-wallet')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 120);
+    },
   };
 
   const addWalletDialog = (
diff --git a/src/pages/WalletPage.tsx b/src/pages/WalletPage.tsx
index e203388..d519716 100644
--- a/src/pages/WalletPage.tsx
+++ b/src/pages/WalletPage.tsx
@@ -8,6 +8,7 @@ import { useWallet } from '@/hooks/useWallet';
 import { useNWC } from '@/hooks/useNWCContext';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useCashu } from '@/hooks/wallet/useCashu';
+import { isNativePlatform } from '@/lib/platform';
 import { useTranslation } from '@/contexts/language';
 import { LoginArea } from '@/components/auth/LoginArea';
 import { CashuWalletCard } from '@/components/wallet/CashuWalletCard';
@@ -224,11 +225,19 @@ export default function WalletPage() {
             {/* Status bar + manage — compact single row */}
             <WalletStatusBar />
 
-            {/* Connected Lightning wallet (NIP-47) — balance / receive / send */}
-            <NwcWalletCard />
-
-            {/* Cashu wallet — native app, self-custodial ecash */}
-            <CashuWalletCard />
+            {/* Native app: the built-in wallet is the primary path. Web keeps
+                the connected-wallet card first because Cashu is app-only. */}
+            {isNativePlatform() ? (
+              <>
+                <div id="cashu-wallet"><CashuWalletCard /></div>
+                <NwcWalletCard />
+              </>
+            ) : (
+              <>
+                <NwcWalletCard />
+                <div id="cashu-wallet"><CashuWalletCard /></div>
+              </>
+            )}
             <EscrowKeyCard />
             <EscrowSettingsCard />