Support all wallet modules

src/components/WalletButton.tsx

@@ -1,21 +1,43 @@
-import { Button, Icon, Text, Modal, Profile } from "@stellar/design-system"
+import {
+	Button,
+	Text,
+	Modal,
+	Profile,
+	Icon,
+	Tooltip,
+} from "@stellar/design-system"
 import { useState } from "react"
 import { useWallet } from "../hooks/useWallet"
 import { connectWallet, disconnectWallet } from "../util/wallet"
 
 export const WalletButton = () => {
 	const [showDisconnectModal, setShowDisconnectModal] = useState(false)
-	const { address, isPending, balances } = useWallet()
-	const buttonLabel = isPending ? "Loading..." : "Connect Wallet"
+	const [isWarningTooltipVisible, setIsWarningTooltipVisible] = useState(false)
+	const { address, isPending, balances, walletWarnings } = useWallet()
+	const buttonLabel = isPending ? "Loading..." : "Connect"
+
+	// Build warning message based on wallet issues
+	const getWarningMessage = () => {
+		const warnings: string[] = []
+		if (walletWarnings.popupAlways) {
+			warnings.push("This wallet triggers a popup on every interaction")
+		}
+		if (walletWarnings.noGetNetworkSupport) {
+			warnings.push("This wallet doesn't support network detection")
+		}
+		return warnings.join(". ")
+	}
+
+	// Handle click on warning icon - open help URL if available
+	const handleWarningClick = () => {
+		if (walletWarnings.helpUrl) {
+			window.open(walletWarnings.helpUrl, "_blank", "noopener,noreferrer")
+		}
+	}
 
 	if (!address) {
 		return (
-			<Button
-				variant="secondary"
-				size="md"
-				onClick={() => void connectWallet()}
-			>
-				<Icon.Wallet02 />
+			<Button variant="primary" size="md" onClick={() => void connectWallet()}>
 				{buttonLabel}
 			</Button>
 		)
@@ -41,11 +63,13 @@ export const WalletButton = () => {
 					onClose={() => setShowDisconnectModal(false)}
 					parentId="modalContainer"
 				>
-					<Modal.Heading>
-						Connected as{" "}
-						<code style={{ lineBreak: "anywhere" }}>{address}</code>. Do you
-						want to disconnect?
-					</Modal.Heading>
+					<Modal.Heading>Disconnect wallet?</Modal.Heading>
+					<Modal.Body>
+						<Text as="p" size="sm">
+							Connected as{" "}
+							<code>{`${address.slice(0, 6)}...${address.slice(-6)}`}</code>
+						</Text>
+					</Modal.Body>
 					<Modal.Footer itemAlignment="stack">
 						<Button
 							size="md"
@@ -71,12 +95,61 @@ export const WalletButton = () => {
 				</Modal>
 			</div>
 
-			<Profile
-				publicAddress={address}
-				size="md"
-				isShort
-				onClick={() => setShowDisconnectModal(true)}
-			/>
+			<div style={{ position: "relative" }}>
+				<Profile
+					publicAddress={address}
+					size="md"
+					isShort
+					onClick={() => setShowDisconnectModal(true)}
+				/>
+
+				{walletWarnings.hasWarnings && (
+					<div
+						onMouseEnter={() => setIsWarningTooltipVisible(true)}
+						onMouseLeave={() => setIsWarningTooltipVisible(false)}
+						style={{
+							position: "absolute",
+							top: "-6px",
+							right: "-6px",
+							zIndex: 1,
+						}}
+					>
+						<Tooltip
+							isVisible={isWarningTooltipVisible}
+							isContrast
+							placement="bottom"
+							triggerEl={
+								<div
+									onClick={handleWarningClick}
+									style={{
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										cursor: "pointer",
+										backgroundColor: "var(--color-gray-00, #fff)",
+										borderRadius: "50%",
+										padding: "3px",
+										border: "2px solid var(--color-yellow-60, #f0ad4e)",
+										boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+									}}
+								>
+									<Icon.AlertTriangle
+										style={{
+											color: "var(--color-yellow-60, #f0ad4e)",
+											width: "12px",
+											height: "12px",
+										}}
+									/>
+								</div>
+							}
+						>
+							<div style={{ maxWidth: "15em" }}>
+								{getWarningMessage()}. Click to learn more about this issue.
+							</div>
+						</Tooltip>
+					</div>
+				)}
+			</div>
 		</div>
 	)
 }