@hfunlabs/hypurr-connect 0.1.12 → 0.1.13

package/src/RenameWalletModal.tsx

@@ -0,0 +1,325 @@
+import { AnimatePresence, motion } from "framer-motion";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import {
+  AlertTriangle,
+  Loader2,
+  Pencil,
+  SpinKeyframes,
+  X,
+} from "./icons/lucide";
+import {
+  closeBtnStyle as makeCloseBtnStyle,
+  fontFamily,
+  modalBackdropStyle,
+  modalHeaderStyle,
+  modalPanelStyle,
+  modalWrapperStyle,
+  profileColors,
+  raisedButtonStyle,
+  titleStyle,
+  upperLabelStyle,
+} from "./profileStyles";
+
+export interface RenameWalletModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  wallet: HyperliquidWallet | null;
+  onConfirm: (walletId: number, name: string) => Promise<void>;
+  onNotify?: (n: { type: "success" | "error"; message: string }) => void;
+  /** Kept for compatibility. Profile modal actions now use the shared app raised button style. */
+  accentColor?: string;
+}
+
+const DANGER_BORDER = "rgba(248,113,113,0.2)";
+const WALLET_NAME_REGEX = /^[a-zA-Z0-9/]+$/;
+
+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 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 = (hasError: boolean, disabled: boolean): CSSProperties => ({
+  width: "100%",
+  background: "rgba(13,18,25,0.9)",
+  border: `1px solid ${
+    hasError ? "rgba(248,113,113,0.5)" : 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 saveButtonStyle = (
+  enabled: boolean,
+  hovered: boolean,
+): CSSProperties => ({
+  ...raisedButtonStyle(enabled ? (hovered ? "hover" : "default") : "disabled"),
+  width: "100%",
+  padding: "8px 0",
+  borderRadius: 8,
+  fontSize: 12.5,
+  lineHeight: "1rem",
+  fontWeight: 500,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+});
+
+export function RenameWalletModal({
+  isOpen,
+  onClose,
+  wallet,
+  onConfirm,
+  onNotify,
+}: RenameWalletModalProps): ReactNode {
+  const [name, setName] = useState("");
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saveHovered, setSaveHovered] = useState(false);
+
+  const currentName = wallet?.name || "Unnamed";
+  const trimmedName = name.trim();
+  const isNameChanged = trimmedName !== currentName;
+  const isNameValid = WALLET_NAME_REGEX.test(trimmedName);
+  const canSubmit = isNameValid && isNameChanged && !isRenaming;
+
+  useEffect(() => {
+    if (!wallet) return;
+    setName(wallet.name || "");
+    setError(null);
+  }, [wallet]);
+
+  const handleClose = useCallback(() => {
+    if (isRenaming) return;
+    setError(null);
+    onClose();
+  }, [isRenaming, onClose]);
+
+  const handleRename = useCallback(async () => {
+    if (!wallet || !isNameValid || !isNameChanged) return;
+    setError(null);
+    setIsRenaming(true);
+    try {
+      await onConfirm(wallet.id, trimmedName);
+      onNotify?.({ type: "success", message: "Wallet renamed successfully" });
+      onClose();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to rename wallet");
+    } finally {
+      setIsRenaming(false);
+    }
+  }, [
+    wallet,
+    isNameValid,
+    isNameChanged,
+    onConfirm,
+    trimmedName,
+    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}>Rename Wallet</h3>
+                <button
+                  onClick={handleClose}
+                  disabled={isRenaming}
+                  style={makeCloseBtnStyle(isRenaming)}
+                  aria-label="Close"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+
+              <div style={bodyStyle}>
+                <div style={infoBoxStyle}>
+                  <p
+                    style={{
+                      margin: "0 0 4px",
+                      color: profileColors.muted,
+                      ...upperLabelStyle,
+                    }}
+                  >
+                    Wallet
+                  </p>
+                  <p
+                    style={{
+                      margin: 0,
+                      fontSize: 12.5,
+                      lineHeight: "1rem",
+                      fontWeight: 500,
+                      color: profileColors.text,
+                    }}
+                  >
+                    {currentName}
+                  </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}>Wallet name</label>
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => {
+                      setName(e.target.value);
+                      setError(null);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") handleRename();
+                      if (e.key === "Escape") handleClose();
+                    }}
+                    disabled={isRenaming}
+                    autoFocus
+                    style={inputStyle(!!error, isRenaming)}
+                  />
+                  <p
+                    style={{
+                      margin: "8px 0 0",
+                      fontSize: 12.5,
+                      lineHeight: "1rem",
+                      color: profileColors.subdued,
+                    }}
+                  >
+                    Use letters, numbers, and / only.
+                  </p>
+                </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={handleRename}
+                  disabled={!canSubmit}
+                  onMouseEnter={() => setSaveHovered(true)}
+                  onMouseLeave={() => setSaveHovered(false)}
+                  style={saveButtonStyle(canSubmit, saveHovered)}
+                >
+                  {isRenaming ? (
+                    <>
+                      <Loader2 size={14} /> Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Pencil size={14} /> Save Name
+                    </>
+                  )}
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}