ui: lead with built-in wallet on native

This commit is contained in:
SkateSpots 2026-11-01 13:25:22 +07:00
parent a42e85202f
commit 4c603a8126
3 changed files with 46 additions and 8 deletions

View file

@ -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}

View file

@ -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 = (

View file

@ -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 */}
{/* 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 />
{/* Cashu wallet — native app, self-custodial ecash */}
<CashuWalletCard />
</>
) : (
<>
<NwcWalletCard />
<div id="cashu-wallet"><CashuWalletCard /></div>
</>
)}
<EscrowKeyCard />
<EscrowSettingsCard />