Add WalletConnectSheet component

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 (
+    <BottomSheet
+      isOpen={isWalletSheetOpen}
+      onOpenChange={(open) => {
+        if (!open) closeWalletSheet();
+      }}
+    >
+      <BottomSheet.Portal>
+        <BottomSheet.Overlay />
+        <BottomSheet.Content>
+          <BottomSheet.Close />
+          <BottomSheet.Title>Connect Wallet</BottomSheet.Title>
+          <BottomSheet.Description>Choose your Solana wallet</BottomSheet.Description>
+          <View className="mt-5 gap-2">
+            {WALLETS.map((wallet) => (
+              <Button
+                key={wallet.id}
+                variant="secondary"
+                className="h-auto justify-start gap-3 px-4 py-3"
+                onPress={() => handleConnect(wallet.id, wallet.label)}
+              >
+                <Typography className="text-2xl">{wallet.emoji}</Typography>
+                <View className="flex-1 items-start">
+                  <Button.Label>{wallet.label}</Button.Label>
+                  <Typography type="body-xs" color="muted">
+                    {wallet.description}
+                  </Typography>
+                </View>
+              </Button>
+            ))}
+          </View>
+        </BottomSheet.Content>
+      </BottomSheet.Portal>
+    </BottomSheet>
+  );
+}