diff --git a/.gitignore b/.gitignore index ade48fd..cb6581e 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ build requirements.md .vercel .env*.local +temp_auto_push.bat +temp_interactive_push.bat diff --git a/components/Wallet/WalletModal.tsx b/components/Wallet/WalletModal.tsx index b66387c..46d6908 100644 --- a/components/Wallet/WalletModal.tsx +++ b/components/Wallet/WalletModal.tsx @@ -1,6 +1,7 @@ 'use client' import { useMemo, useState } from 'react' +import type { ReactNode } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Dialog, @@ -9,7 +10,9 @@ import { DialogHeader, DialogTitle, } from '@/components/ui/dialog' +import { Drawer } from 'vaul' import { Button } from '@/components/ui/button' +import { cn } from '@/lib/utils' import { Wallet, ExternalLink, @@ -19,8 +22,10 @@ import { RefreshCw, Smartphone, Monitor, + X, } from 'lucide-react' import { useWallet } from '@/hooks/useWallet' +import { useIsMobile } from '@/hooks/use-is-mobile' interface WalletModalProps { open: boolean @@ -28,6 +33,7 @@ interface WalletModalProps { } type ModalView = 'connect' | 'installing' | 'connecting' | 'network-warning' +type ModalVariant = 'dialog' | 'sheet' export function WalletModal({ open, onOpenChange }: WalletModalProps) { const { @@ -41,6 +47,7 @@ export function WalletModal({ open, onOpenChange }: WalletModalProps) { clearError, } = useWallet() + const isMobile = useIsMobile() const [manualView, setManualView] = useState(null) const derivedView = useMemo(() => { @@ -78,54 +85,168 @@ export function WalletModal({ open, onOpenChange }: WalletModalProps) { setManualView('connect') } + const viewsProps = { + view, + onCheckAgain: () => setManualView('connect'), + onConnect: handleConnect, + hasError, + error, + onRetry: handleRetry, + isFreighterInstalled, + onShowInstall: () => setManualView('installing'), + network, + onContinue: () => onOpenChange(false), + onRefresh: handleRetry, + } + + if (isMobile) { + return ( + + + + + + + + +
+ +
+
+
+
+ ) + } + return ( - - {view === 'installing' && ( - setManualView('connect')} /> - )} - {view === 'connect' && ( - setManualView('installing')} - /> - )} - {view === 'connecting' && } - {view === 'network-warning' && ( - onOpenChange(false)} - onRefresh={handleRetry} - /> - )} - + ) } -function InstallView({ onCheckAgain }: { onCheckAgain: () => void }) { +interface WalletModalViewsProps { + view: ModalView + variant: ModalVariant + onCheckAgain: () => void + onConnect: () => void + hasError: boolean + error: string | null + onRetry: () => void + isFreighterInstalled: boolean + onShowInstall: () => void + network: string | null + onContinue: () => void + onRefresh: () => void +} + +function WalletModalViews({ + view, + variant, + onCheckAgain, + onConnect, + hasError, + error, + onRetry, + isFreighterInstalled, + onShowInstall, + network, + onContinue, + onRefresh, +}: WalletModalViewsProps) { + return ( + + {view === 'installing' && ( + + )} + {view === 'connect' && ( + + )} + {view === 'connecting' && } + {view === 'network-warning' && ( + + )} + + ) +} + +function WalletModalHeader({ + icon, + title, + description, + titleClassName, + variant, +}: { + icon: ReactNode + title: string + description: ReactNode + titleClassName?: string + variant: ModalVariant +}) { + if (variant === 'dialog') { + return ( + + + {icon} + {title} + + {description} + + ) + } + return ( +
+

+ {icon} + {title} +

+

{description}

+
+ ) +} + +function InstallView({ + onCheckAgain, + variant, +}: { + onCheckAgain: () => void + variant: ModalVariant +}) { return ( - - - - Install Freighter - - Freighter is required to connect to AFRAMP - + } + title="Install Freighter" + description="Freighter is required to connect to AFRAMP" + />
@@ -143,28 +264,28 @@ function InstallView({ onCheckAgain }: { onCheckAgain: () => void }) { href="https://chrome.google.com/webstore/detail/freighter/bcacfldlkkdogcmkkibnjlakofdplcbk" target="_blank" rel="noopener noreferrer" - className="flex items-center gap-3 p-4 rounded-lg border border-border bg-card hover:bg-muted/50 transition-colors" + className="flex items-center gap-3 p-4 min-h-[56px] rounded-lg border border-border bg-card hover:bg-muted/50 active:bg-muted/70 transition-colors" > - +
Chrome Extension

For Chrome, Brave, Edge browsers

- + - +
Mobile App

iOS & Android available

- +
@@ -178,9 +299,7 @@ function InstallView({ onCheckAgain }: { onCheckAgain: () => void }) {