@hfunlabs/hypurr-connect 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "packageManager": "pnpm@10.10.0",
   "main": "./dist/index.js",

package/src/WalletSelectorDropdown.tsx

@@ -18,12 +18,9 @@ import { useIsMobile } from "./useIsMobile";
 import { UserProfileModal, type SlippageOption } from "./UserProfileModal";
 import { getAgentExpiryTitle } from "./agentWallet";
 import {
-  Bot,
   Copy,
   Crown,
-  Eye,
   Folder,
-  KeyRound,
   LayoutDashboard,
   LogOut,
   Plus,
@@ -202,36 +199,6 @@ const formatCompactAddress = (addr: string | undefined) => {
   return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
 };
 
-type WalletTypeMeta = {
-  label: string;
-  color: string;
-  icon: ReactNode;
-};
-
-function getWalletTypeMeta(wallet: DropdownWallet): WalletTypeMeta {
-  if (wallet.isAgent) {
-    return {
-      label: "Agent wallet",
-      color: "#38bdf8",
-      icon: <Bot size={12} />,
-    };
-  }
-
-  if (wallet.isReadOnly) {
-    return {
-      label: "Read-only wallet",
-      color: "#a78bfa",
-      icon: <Eye size={12} />,
-    };
-  }
-
-  return {
-    label: "Private-key wallet",
-    color: "#34d399",
-    icon: <KeyRound size={12} />,
-  };
-}
-
 const rootStyle: CSSProperties = {
   position: "absolute",
   right: 0,
@@ -245,6 +212,17 @@ const rootStyle: CSSProperties = {
   overflow: "hidden",
 };
 
+// Scoped scrollbar styling so the dropdown looks the same on every host site
+// (matches alpha-trade). Inline styles can't target ::-webkit-scrollbar, so
+// inject a scoped <style>; Firefox uses the standard props on the element.
+const SCROLLBAR_CLASS = "hpc-wallet-scroll";
+const scrollbarCss = `
+.${SCROLLBAR_CLASS}::-webkit-scrollbar { width: 6px; height: 6px; }
+.${SCROLLBAR_CLASS}::-webkit-scrollbar-track { background: #0b0e11; }
+.${SCROLLBAR_CLASS}::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
+.${SCROLLBAR_CLASS}::-webkit-scrollbar-thumb:hover { background: #4b5563; }
+`;
+
 const sectionBorder = "1px solid rgb(var(--line))";
 
 const sectionHeaderStyle: CSSProperties = {
@@ -341,7 +319,6 @@ export function WalletSelectorDropdown({
         depth={depth}
         isSelected={isSelected}
         label={label}
-        walletType={getWalletTypeMeta(wallet)}
         compactAddress={compactAddress}
         onSelect={() => {
           selectWallet(wallet.id);
@@ -381,6 +358,7 @@ export function WalletSelectorDropdown({
             exit={{ opacity: 0, scale: 0.95 }}
             transition={{ duration: 0.15, ease: "easeOut" }}
           >
+            <style>{scrollbarCss}</style>
             {/* Profile header */}
             <button
               onClick={openProfile}
@@ -537,10 +515,13 @@ export function WalletSelectorDropdown({
             <div style={{ borderBottom: sectionBorder }}>
               <div style={sectionHeaderStyle}>Wallets</div>
               <div
+                className={SCROLLBAR_CLASS}
                 style={{
                   maxHeight: 256,
                   overflowY: "auto",
                   paddingBottom: 4,
+                  scrollbarWidth: "thin",
+                  scrollbarColor: "#374151 #0b0e11",
                 }}
               >
                 {walletListEntries.map((entry) => {
@@ -716,7 +697,6 @@ function WalletRow({
   depth,
   isSelected,
   label,
-  walletType,
   compactAddress,
   onSelect,
   onShowPortfolio,
@@ -728,7 +708,6 @@ function WalletRow({
   depth: number;
   isSelected: boolean;
   label: string | null;
-  walletType: WalletTypeMeta;
   compactAddress: string;
   onSelect: () => void;
   onShowPortfolio?: () => void;
@@ -794,19 +773,6 @@ function WalletRow({
           padding: 0,
         }}
       >
-        <span
-          title={walletType.label}
-          aria-label={walletType.label}
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            color: isAgentExpired ? walletTextColor : walletType.color,
-          }}
-        >
-          {walletType.icon}
-        </span>
         {label ? (
           <>
             <span