@hfunlabs/hypurr-connect 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,7 +24,7 @@
     "format": "pnpm prettier --write ."
   },
   "peerDependencies": {
-    "@hfunlabs/hyperliquid": "0.30.2-hfunlabs.2",
+    "@hfunlabs/hyperliquid": ">=0.30.2-hfunlabs.2 <0.33.0",
     "@protobuf-ts/grpcweb-transport": ">=2.0.0",
     "@protobuf-ts/runtime-rpc": ">=2.0.0",
     "framer-motion": ">=10.0.0",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.3",
-    "@hfunlabs/hyperliquid": "0.30.2-hfunlabs.2",
+    "@hfunlabs/hyperliquid": "0.32.2-hfunlabs.2",
     "@protobuf-ts/grpcweb-transport": "^2.11.1",
     "@protobuf-ts/runtime-rpc": "^2.11.1",
     "@types/react": "^19.2.14",
@@ -47,6 +47,7 @@
     "typescript-eslint": "^8.56.1"
   },
   "dependencies": {
-    "hypurr-grpc": "github:Hypurr-Fun/hypurr-grpc#dev"
+    "hypurr-grpc": "github:Hypurr-Fun/hypurr-grpc#dev",
+    "viem": "^2.48.11"
   }
 }

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>
+  );
+}