feat: multi-wallet support — Solflare, Phantom, Backpack

src/components/ExecutionPanel.tsx

@@ -24,12 +24,12 @@ import {
   type FC,
 } from "react";
 import {
-  connectWallet,
   getSOLBalance,
   getSPLTokenBalances,
   subscribeWallet,
   type WalletState,
 } from "../services/solflare";
+import WalletPickerModal from "./WalletPickerModal";
 import { selectOptimalVault, type KaminoVault } from "../services/kamino";
 import { usePriceMonitor } from "../hooks/usePriceMonitor";
 import { useExecutionMachine } from "../hooks/useExecutionMachine";
@@ -271,15 +271,10 @@ export const ExecutionPanel: FC = () => {
   // the user rejected the connection popup, they'd see no feedback at
   // all. Capture the error and render it next to the Connect button.
   const [connectError, setConnectError] = useState<string | null>(null);
-  const handleConnect = useCallback(async () => {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const handleConnect = useCallback(() => {
     setConnectError(null);
-    try {
-      await connectWallet();
-    } catch (err) {
-      setConnectError(
-        err instanceof Error ? err.message : "Could not connect to Solflare.",
-      );
-    }
+    setPickerOpen(true);
   }, []);
   const { tokens: rawTokens, loading: tokensLoading, error: tokensError } =
     useAvailableTokens(wallet);
@@ -486,6 +481,10 @@ export const ExecutionPanel: FC = () => {
   // ------------------------------------------------------------------------
   return (
     <section style={styles.panel} aria-label="Execution panel">
+      <WalletPickerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+      />
       <header style={styles.header}>Execute</header>
 
       {/* Multi-tab warning — surfaces only when ANOTHER tab in the
@@ -603,11 +602,11 @@ export const ExecutionPanel: FC = () => {
             </div>
             <Button
               variant="primary"
-              onClick={() => void handleConnect()}
+              onClick={() => handleConnect()}
               disabled={wallet.connecting}
               style={{ width: "100%", marginTop: 8, padding: "14px 28px" }}
             >
-              {wallet.connecting ? "Connecting…" : "Connect Solflare"}
+              {wallet.connecting ? "Connecting…" : "Connect wallet"}
             </Button>
             {connectError && (
               <div

src/components/HeaderBar.tsx

@@ -26,11 +26,11 @@ import {
   type FC,
 } from "react";
 import {
-  connectWallet,
   getWalletState,
   subscribeWallet,
   type WalletState,
 } from "../services/solflare";
+import WalletPickerModal from "./WalletPickerModal";
 import { LiminalMark } from "./BrandLogos";
 import { getMevStrategy } from "../services/mevProtection";
 import { useDeviceDetection } from "../hooks/useDeviceDetection";
@@ -109,6 +109,7 @@ export const HeaderBar: FC<HeaderBarProps> = ({
     : null;
 
   const [copiedAddr, setCopiedAddr] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
   const handleCopyAddr = useCallback(() => {
     if (!wallet.address) return;
     void navigator.clipboard.writeText(wallet.address).then(() => {
@@ -244,14 +245,14 @@ export const HeaderBar: FC<HeaderBarProps> = ({
         {!wallet.connected ? (
           <button
             type="button"
-            onClick={() => void connectWallet()}
+            onClick={() => setPickerOpen(true)}
             disabled={wallet.connecting}
             style={styles.connectCta}
             className="liminal-press"
-            aria-label="Connect Solflare wallet"
+            aria-label="Connect a Solana wallet"
           >
             <span style={styles.connectDot} aria-hidden="true" />
-            <span>{wallet.connecting ? "Connecting…" : device.isMobile ? "Connect" : "Connect Solflare"}</span>
+            <span>{wallet.connecting ? "Connecting…" : device.isMobile ? "Connect" : "Connect wallet"}</span>
           </button>
         ) : wallet.connected && profile && onEditProfile ? (
           <button
@@ -301,6 +302,10 @@ export const HeaderBar: FC<HeaderBarProps> = ({
           </button>
         )}
       </div>
+      <WalletPickerModal
+        open={pickerOpen}
+        onClose={() => setPickerOpen(false)}
+      />
     </header>
   );
 };