chore: simplify tooltip

Author: chadoh

src/components/WalletButton.module.css

@@ -1,6 +1,23 @@
 /* Override the global a[target]::after external 
 link icon that appeared on the warning sign */
-a.warningIcon[target]::after {
+.learnMore[target]::after {
 	content: none;
 	display: none;
 }
+.learnMore {
+	color: var(--sds-clr-lilac-09, #606);
+}
+
+.warningIcon {
+	height: 20px;
+	width: 20px;
+	color: var(--color-yellow-60, #f0ad4e);
+	position: absolute;
+	bottom: -8px;
+	right: -8px;
+	cursor: pointer;
+}
+
+.profileWrap {
+	position: relative;
+}

src/components/WalletButton.tsx

@@ -13,24 +13,9 @@ import cssStyles from "./WalletButton.module.css"
 
 export const WalletButton = () => {
 	const [showDisconnectModal, setShowDisconnectModal] = useState(false)
-	const [isWarningTooltipVisible, setIsWarningTooltipVisible] = useState(false)
 	const { address, isPending, balances, walletWarnings } = useWallet()
 	const buttonLabel = isPending ? "Loading..." : "Connect"
 
-	const warningIconStyles = {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		overflow: "hidden",
-		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)",
-		lineHeight: 0,
-		textDecoration: "none",
-	} as const
-
 	if (!address) {
 		return (
 			<Button variant="primary" size="md" onClick={() => void connectWallet()}>
@@ -109,7 +94,7 @@ export const WalletButton = () => {
 				</Modal>
 			</div>
 
-			<div style={{ position: "relative" }}>
+			<div className={cssStyles.profileWrap}>
 				<Profile
 					publicAddress={address}
 					size="md"
@@ -118,45 +103,23 @@ export const WalletButton = () => {
 				/>
 
 				{walletWarnings.hasWarnings && (
-					<div
-						onMouseEnter={() => setIsWarningTooltipVisible(true)}
-						onMouseLeave={() => setIsWarningTooltipVisible(false)}
-						style={{
-							position: "absolute",
-							top: "-6px",
-							right: "-6px",
-							zIndex: 1,
-						}}
+					<Tooltip
+						placement="bottom"
+						triggerEl={<Icon.AlertTriangle className={cssStyles.warningIcon} />}
 					>
-						<Tooltip
-							isVisible={isWarningTooltipVisible}
-							isContrast
-							placement="bottom"
-							triggerEl={React.createElement(
-								walletWarnings.helpUrl ? "a" : "span",
-								walletWarnings.helpUrl
-									? {
-											href: walletWarnings.helpUrl,
-											target: "_blank",
-											className: cssStyles.warningIcon,
-											style: warningIconStyles,
-										}
-									: { style: warningIconStyles },
-								<Icon.AlertTriangle
-									style={{
-										color: "var(--color-yellow-60, #f0ad4e)",
-										width: "12px",
-										height: "12px",
-									}}
-								/>,
+						<div style={{ maxWidth: "15em" }}>
+							{walletWarnings.messages.join("")}
+							{walletWarnings.helpUrl && (
+								<a
+									className={cssStyles.learnMore}
+									href={walletWarnings.helpUrl}
+									target="_blank"
+								>
+									Learn more
+								</a>
 							)}
-						>
-							<div style={{ maxWidth: "15em" }}>
-								{walletWarnings.messages.join(". ")}
-								{walletWarnings.helpUrl ? ". Click to learn more." : ""}
-							</div>
-						</Tooltip>
-					</div>
+						</div>
+					</Tooltip>
 				)}
 			</div>
 		</div>

src/providers/WalletProvider.tsx

@@ -109,10 +109,10 @@ function getWalletWarnings(walletId: string | null): WalletWarnings {
 
 	const messages: string[] = []
 	if (popupAlways) {
-		messages.push("This wallet triggers a popup on every interaction")
+		messages.push("This wallet triggers a popup on every interaction. ")
 	}
 	if (noGetNetworkSupport) {
-		messages.push("This wallet doesn't support network detection")
+		messages.push("This wallet doesn't support network detection. ")
 	}
 
 	return {