@hfunlabs/hypurr-connect 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/DeleteWalletModal.tsx

@@ -0,0 +1,344 @@
+import { AnimatePresence, motion } from "framer-motion";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+import {
+  useCallback,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import {
+  AlertTriangle,
+  Loader2,
+  SpinKeyframes,
+  Trash2,
+  X,
+} from "./icons/lucide";
+import {
+  closeBtnStyle as makeCloseBtnStyle,
+  dangerOutlineButtonStyle,
+  fontFamily,
+  modalBackdropStyle,
+  modalHeaderStyle,
+  modalPanelStyle,
+  modalWrapperStyle,
+  profileColors,
+  titleStyle,
+  upperLabelStyle,
+} from "./profileStyles";
+
+export interface DeleteWalletModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  wallet: HyperliquidWallet | null;
+  onConfirm: (walletId: number) => Promise<void>;
+  /** Optional toast callback. Fires `{type:"success"}` on delete; errors are shown inline. */
+  onNotify?: (n: { type: "success" | "error"; message: string }) => void;
+}
+
+const DANGER_BG = "rgba(248,113,113,0.07)";
+const DANGER_BORDER = "rgba(248,113,113,0.2)";
+
+const backdropStyle = modalBackdropStyle(110);
+const wrapperStyle = modalWrapperStyle(111, 16);
+const panelStyle: CSSProperties = {
+  ...modalPanelStyle(true),
+  border: `1px solid ${profileColors.surfaceBd}`,
+};
+const headerStyle: CSSProperties = {
+  ...modalHeaderStyle,
+  borderBottom: "1px solid rgba(255,255,255,0.06)",
+};
+
+const bodyStyle: CSSProperties = {
+  padding: "20px 24px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 16,
+};
+
+const warningBoxStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 12,
+  padding: 14,
+  background: DANGER_BG,
+  border: `1px solid ${DANGER_BORDER}`,
+  borderRadius: 8,
+};
+
+const infoBoxStyle: CSSProperties = {
+  padding: "10px 12px",
+  background: "rgba(255,255,255,0.03)",
+  border: "1px solid rgba(255,255,255,0.06)",
+  borderRadius: 8,
+};
+
+const labelStyle: CSSProperties = {
+  display: "block",
+  fontSize: 12.5,
+  lineHeight: "1rem",
+  color: profileColors.muted,
+  marginBottom: 8,
+};
+
+const inputStyle = (disabled: boolean): CSSProperties => ({
+  width: "100%",
+  background: "rgba(13,18,25,0.9)",
+  border: `1px solid ${profileColors.surfaceBd}`,
+  borderRadius: 8,
+  padding: "10px 12px",
+  color: profileColors.text,
+  fontFamily: fontFamily.mono,
+  fontSize: 12.5,
+  lineHeight: "1rem",
+  outline: "none",
+  opacity: disabled ? 0.5 : 1,
+  boxSizing: "border-box",
+  transition: "border-color 150ms, background-color 150ms",
+});
+
+const footerStyle: CSSProperties = {
+  padding: "0 24px 24px",
+};
+
+const deleteButtonStyle = (
+  enabled: boolean,
+  hovered: boolean,
+): CSSProperties => ({
+  ...dangerOutlineButtonStyle(enabled, hovered),
+  width: "100%",
+  padding: "8px 0",
+  borderRadius: 8,
+  fontSize: 12.5,
+  lineHeight: "1rem",
+  fontWeight: 500,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  transition: "background-color 150ms, color 150ms, border-color 150ms",
+});
+
+export function DeleteWalletModal({
+  isOpen,
+  onClose,
+  wallet,
+  onConfirm,
+  onNotify,
+}: DeleteWalletModalProps): ReactNode {
+  const [confirmName, setConfirmName] = useState("");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [deleteHovered, setDeleteHovered] = useState(false);
+
+  const walletName = wallet?.name || "Unnamed Wallet";
+  const isNameMatch = confirmName === walletName;
+  const canDelete = isNameMatch && !isDeleting;
+
+  const handleClose = useCallback(() => {
+    if (isDeleting) return;
+    setConfirmName("");
+    setError(null);
+    onClose();
+  }, [isDeleting, onClose]);
+
+  const handleDelete = useCallback(async () => {
+    if (!wallet || !isNameMatch) return;
+    setError(null);
+    setIsDeleting(true);
+    try {
+      await onConfirm(wallet.id);
+      setConfirmName("");
+      onNotify?.({ type: "success", message: "Wallet deleted successfully" });
+      onClose();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to delete wallet");
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [wallet, isNameMatch, onConfirm, onClose, onNotify]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && wallet && (
+        <>
+          <SpinKeyframes />
+          <motion.div
+            key="backdrop"
+            style={backdropStyle}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            onClick={handleClose}
+          />
+          <div style={wrapperStyle}>
+            <motion.div
+              key="panel"
+              style={panelStyle}
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 8 }}
+              transition={{ duration: 0.18, ease: "easeOut" }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div style={headerStyle}>
+                <h3 style={titleStyle}>Delete Wallet</h3>
+                <button
+                  onClick={handleClose}
+                  disabled={isDeleting}
+                  style={makeCloseBtnStyle(isDeleting)}
+                  aria-label="Close"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+
+              <div style={bodyStyle}>
+                <div style={warningBoxStyle}>
+                  <AlertTriangle
+                    size={15}
+                    color={profileColors.danger}
+                    style={{ flexShrink: 0, marginTop: 2 }}
+                  />
+                  <div>
+                    <p
+                      style={{
+                        margin: 0,
+                        fontSize: 12.5,
+                        lineHeight: "1rem",
+                        color: profileColors.danger,
+                        fontWeight: 500,
+                      }}
+                    >
+                      This action cannot be undone
+                    </p>
+                    <p
+                      style={{
+                        margin: "2px 0 0",
+                        fontSize: 12.5,
+                        lineHeight: "1rem",
+                        color: "rgba(248,113,113,0.7)",
+                      }}
+                    >
+                      The private key will be permanently deleted. Any remaining
+                      funds will be inaccessible.
+                    </p>
+                  </div>
+                </div>
+
+                <div style={infoBoxStyle}>
+                  <p
+                    style={{
+                      margin: "0 0 4px",
+                      color: profileColors.muted,
+                      ...upperLabelStyle,
+                    }}
+                  >
+                    Wallet to delete
+                  </p>
+                  <p
+                    style={{
+                      margin: 0,
+                      fontSize: 12.5,
+                      lineHeight: "1rem",
+                      fontWeight: 500,
+                      color: profileColors.text,
+                    }}
+                  >
+                    {walletName}
+                  </p>
+                  <p
+                    style={{
+                      margin: "2px 0 0",
+                      fontSize: 12.5,
+                      lineHeight: "1rem",
+                      color: profileColors.muted,
+                      fontFamily: fontFamily.mono,
+                      wordBreak: "break-all",
+                    }}
+                  >
+                    {wallet.ethereumAddress}
+                  </p>
+                </div>
+
+                <div>
+                  <label style={labelStyle}>
+                    Type{" "}
+                    <span
+                      style={{
+                        color: profileColors.text,
+                        fontWeight: 500,
+                      }}
+                    >
+                      &quot;{walletName}&quot;
+                    </span>{" "}
+                    to confirm
+                  </label>
+                  <input
+                    type="text"
+                    value={confirmName}
+                    onChange={(e) => setConfirmName(e.target.value)}
+                    placeholder={walletName}
+                    disabled={isDeleting}
+                    style={inputStyle(isDeleting)}
+                  />
+                </div>
+
+                {error && (
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "flex-start",
+                      gap: 8,
+                      padding: 12,
+                      background: "rgba(248,113,113,0.08)",
+                      border: `1px solid ${DANGER_BORDER}`,
+                      borderRadius: 8,
+                    }}
+                  >
+                    <AlertTriangle
+                      size={14}
+                      color={profileColors.danger}
+                      style={{ flexShrink: 0, marginTop: 2 }}
+                    />
+                    <p
+                      style={{
+                        margin: 0,
+                        fontSize: 12.5,
+                        lineHeight: "1rem",
+                        color: profileColors.danger,
+                      }}
+                    >
+                      {error}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div style={footerStyle}>
+                <button
+                  onClick={handleDelete}
+                  disabled={!canDelete}
+                  onMouseEnter={() => setDeleteHovered(true)}
+                  onMouseLeave={() => setDeleteHovered(false)}
+                  style={deleteButtonStyle(canDelete, deleteHovered)}
+                >
+                  {isDeleting ? (
+                    <>
+                      <Loader2 size={14} /> Deleting...
+                    </>
+                  ) : (
+                    <>
+                      <Trash2 size={14} /> Delete Wallet
+                    </>
+                  )}
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/HypurrConnectProvider.tsx

@@ -52,8 +52,6 @@ import type {
 /** @internal context value — extends the public type with fields used only by library internals */
 interface InternalConnectState extends HypurrConnectState {
   loginTelegram: () => void;
-  botUsername: string;
-  useWidget: boolean;
 }
 
 const TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-jwt";
@@ -504,9 +502,12 @@ export function HypurrConnectProvider({
         displayName: tgUser.telegramUsername
           ? `@${tgUser.telegramUsername}`
           : `Telegram ${tgUser.telegramId}`,
-        photoUrl: tgUser.pictureFileId
-          ? `${mediaUrl}/${tgUser.pictureFileId}`
-          : undefined,
+        photoUrl: (() => {
+          // `pictureFileId` is read at runtime; the schema may not type it.
+          const fileId = (tgUser as unknown as { pictureFileId?: string })
+            .pictureFileId;
+          return fileId ? `${mediaUrl}/${fileId}` : undefined;
+        })(),
         authMethod: "telegram",
         telegramId: String(tgUser.telegramId),
         hfunScore: tgUser?.reputation?.hfunScore,
@@ -912,6 +913,21 @@ export function HypurrConnectProvider({
     [tgClient, telegramRpcOptions, selectedWalletId, wallets, refreshWallets],
   );
 
+  const renameWallet = useCallback(
+    async (walletId: number, name: string): Promise<void> => {
+      await tgClient.hyperliquidWalletUpdate(
+        {
+          authData: {},
+          walletId,
+          name,
+        },
+        telegramRpcOptions,
+      );
+      refreshWallets();
+    },
+    [tgClient, telegramRpcOptions, refreshWallets],
+  );
+
   const createWalletPack = useCallback(
     async (name: string): Promise<number> => {
       const { response } = await tgClient.telegramChatWalletPackCreate(
@@ -1133,16 +1149,18 @@ export function HypurrConnectProvider({
     const state = randomState();
     sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
 
-    const configuredReturnTo = config.telegram.returnTo;
+    const configuredReturnTo = config.telegram?.returnTo;
     const returnTo =
       typeof configuredReturnTo === "function"
         ? configuredReturnTo()
         : configuredReturnTo || currentReturnTo();
 
-    const authUrl = new URL(config.telegram.authHubUrl || DEFAULT_AUTH_HUB_URL);
+    const authUrl = new URL(
+      config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL,
+    );
     authUrl.searchParams.set("return_to", returnTo);
     authUrl.searchParams.set("state", state);
-    authUrl.searchParams.set("scope", normalizeScopes(config.telegram.scope));
+    authUrl.searchParams.set("scope", normalizeScopes(config.telegram?.scope));
 
     const width = 520;
     const height = 720;
@@ -1168,9 +1186,9 @@ export function HypurrConnectProvider({
 
     window.location.assign(authUrl.toString());
   }, [
-    config.telegram.authHubUrl,
-    config.telegram.returnTo,
-    config.telegram.scope,
+    config.telegram?.authHubUrl,
+    config.telegram?.returnTo,
+    config.telegram?.scope,
   ]);
 
   const connectEoa = useCallback(
@@ -1333,6 +1351,7 @@ export function HypurrConnectProvider({
 
       createWallet,
       deleteWallet,
+      renameWallet,
       refreshWallets,
 
       packs,
@@ -1362,10 +1381,6 @@ export function HypurrConnectProvider({
       agentReady,
       clearAgent: handleClearAgent,
 
-      botId: config.telegram?.botId ?? "",
-      botUsername: config.telegram?.botUsername ?? "",
-      useWidget: config.telegram?.useWidget ?? false,
-
       authDataMap,
       authToken: tgAuthToken,
       telegramRpcOptions,
@@ -1385,6 +1400,7 @@ export function HypurrConnectProvider({
       selectWallet,
       createWallet,
       deleteWallet,
+      renameWallet,
       refreshWallets,
       packs,
       createWalletPack,
@@ -1407,9 +1423,6 @@ export function HypurrConnectProvider({
       agent,
       agentReady,
       handleClearAgent,
-      config.telegram?.botId,
-      config.telegram?.botUsername,
-      config.telegram?.useWidget,
       authDataMap,
       tgAuthToken,
       telegramRpcOptions,

package/src/LoginModal.tsx

@@ -17,10 +17,14 @@ import { TelegramColorIcon } from "./icons/TelegramColorIcon";
 export interface LoginModalProps {
   onConnectWallet: () => void;
   walletIcon?: ReactNode;
+  /** CSS color used as the modal/drawer background. Defaults to `rgba(20,20,20,0.95)`. */
+  backgroundColor?: string;
 }
 
 const MOBILE_BREAKPOINT = 640;
 
+const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
+
 const btnStyle: CSSProperties = {
   display: "flex",
   height: 53,
@@ -70,7 +74,6 @@ const modalBoxStyle: CSSProperties = {
   overflow: "hidden",
   borderRadius: 12,
   border: "1px solid rgba(255,255,255,0.1)",
-  background: "#282828",
   padding: 24,
 };
 
@@ -127,7 +130,11 @@ function HoverButton({
   );
 }
 
-export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
+export function LoginModal({
+  onConnectWallet,
+  walletIcon,
+  backgroundColor = DEFAULT_BACKGROUND_COLOR,
+}: LoginModalProps) {
   const { loginTelegram, loginModalOpen, closeLoginModal } =
     useHypurrConnectInternal();
 
@@ -174,7 +181,11 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
     <AnimatePresence>
       {loginModalOpen &&
         (isMobile ? (
-          <MobileDrawer key="drawer" onClose={closeLoginModal}>
+          <MobileDrawer
+            key="drawer"
+            onClose={closeLoginModal}
+            backgroundColor={backgroundColor}
+          >
             {modalContent}
           </MobileDrawer>
         ) : (
@@ -198,7 +209,7 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
               onClick={closeLoginModal}
             >
               <motion.div
-                style={modalBoxStyle}
+                style={{ ...modalBoxStyle, background: backgroundColor }}
                 initial={{ scale: 0.96, opacity: 0, y: 8 }}
                 animate={{ scale: 1, opacity: 1, y: 0 }}
                 exit={{ scale: 0.96, opacity: 0, y: 8 }}
@@ -230,7 +241,6 @@ const drawerSheetStyle: CSSProperties = {
   borderLeft: "1px solid rgba(255,255,255,0.1)",
   borderRight: "1px solid rgba(255,255,255,0.1)",
   borderTop: "1px solid rgba(255,255,255,0.1)",
-  background: "#282828",
   padding: "12px 24px max(24px, env(safe-area-inset-bottom))",
 };
 
@@ -241,7 +251,6 @@ const drawerBgStyle: CSSProperties = {
   top: 0,
   bottom: "-100vh",
   zIndex: -1,
-  background: "#282828",
   borderTopLeftRadius: 12,
   borderTopRightRadius: 12,
 };
@@ -263,9 +272,11 @@ const grabHandleStyle: CSSProperties = {
 function MobileDrawer({
   children,
   onClose,
+  backgroundColor,
 }: {
   children: ReactNode;
   onClose: () => void;
+  backgroundColor: string;
 }) {
   const controls = useAnimationControls();
 
@@ -294,7 +305,7 @@ function MobileDrawer({
 
       <motion.div
         key="drawer-sheet"
-        style={drawerSheetStyle}
+        style={{ ...drawerSheetStyle, background: backgroundColor }}
         initial={{ y: "100%" }}
         animate={{ y: 0 }}
         exit={{ y: "100%" }}
@@ -304,7 +315,7 @@ function MobileDrawer({
         dragElastic={{ top: 0, bottom: 0.4 }}
         onDragEnd={handleDragEnd}
       >
-        <div style={drawerBgStyle} />
+        <div style={{ ...drawerBgStyle, background: backgroundColor }} />
 
         <div style={grabHandleAreaStyle}>
           <div style={grabHandleStyle} />