diff --git a/app/src/components/WalletConnectSheet.tsx b/app/src/components/WalletConnectSheet.tsx new file mode 100644 index 0000000..ee4a9d1 --- /dev/null +++ b/app/src/components/WalletConnectSheet.tsx @@ -0,0 +1,57 @@ +import type { JSX } from "react"; +import { View } from "react-native"; +import { BottomSheet, Button, Typography, useToast } from "heroui-native"; +import { useModals } from "@/state/modals"; +import type { WalletName } from "@/state/wallet"; + +const WALLETS: { id: WalletName; label: string; description: string; emoji: string }[] = [ + { id: "phantom", label: "Phantom", description: "Most popular Solana wallet", emoji: "👻" }, + { id: "solflare", label: "Solflare", description: "Built for power users", emoji: "🌊" }, + { id: "backpack", label: "Backpack", description: "xNFT & multi-chain wallet", emoji: "🎒" }, +]; + +export function WalletConnectSheet(): JSX.Element { + const { isWalletSheetOpen, closeWalletSheet, connectWallet } = useModals(); + const { toast } = useToast(); + + const handleConnect = (wallet: WalletName, label: string) => { + connectWallet(wallet); + toast.show({ variant: "success", label: `${label} connected!` }); + }; + + return ( + { + if (!open) closeWalletSheet(); + }} + > + + + + + Connect Wallet + Choose your Solana wallet + + {WALLETS.map((wallet) => ( + + ))} + + + + + ); +}