@agg-market/ui 4.0.0 → 6.0.0

package/dist/chunk-3QLOUBDJ.mjs

@@ -1,483 +0,0 @@
-import {
-  Modal
-} from "./chunk-5K7VXAYM.mjs";
-import {
-  VenueLogo,
-  venueLogoLabels
-} from "./chunk-PORVP72S.mjs";
-import {
-  Icon,
-  ProfileIcon
-} from "./chunk-PZTHM6WG.mjs";
-import {
-  Button
-} from "./chunk-KAGYJ4XT.mjs";
-import {
-  cn
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/profile/index.tsx
-import { useState, useEffect, useCallback as useCallback2 } from "react";
-
-// src/profile/profile-modal.constants.ts
-var PROFILE_TAB_KEYS = {
-  ABOUT: "about",
-  ACCOUNTS_WALLETS: "accounts-wallets"
-};
-var PROFILE_TAB_ITEMS = [
-  { value: PROFILE_TAB_KEYS.ABOUT, label: "About", icon: "profile" },
-  { value: PROFILE_TAB_KEYS.ACCOUNTS_WALLETS, label: "Accounts & wallets", icon: "wallet" }
-];
-
-// src/profile/tabs/about-tab.tsx
-import { useCallback, useRef } from "react";
-import { useLabels } from "@agg-market/hooks";
-import { jsx, jsxs } from "react/jsx-runtime";
-var AboutTab = ({
-  avatarPreview,
-  onDeleteProfile,
-  draftUsername,
-  onDraftUsernameChange,
-  onDraftAvatarChange,
-  draftAvatarPreview
-}) => {
-  const labels = useLabels();
-  const fileInputRef = useRef(null);
-  const handleAvatarClick = useCallback(() => {
-    var _a;
-    (_a = fileInputRef.current) == null ? void 0 : _a.click();
-  }, []);
-  const handleFileChange = useCallback(
-    (e) => {
-      var _a;
-      const file = (_a = e.target.files) == null ? void 0 : _a[0];
-      if (!file)
-        return;
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        var _a2;
-        onDraftAvatarChange(file, (_a2 = event.target) == null ? void 0 : _a2.result);
-      };
-      reader.readAsDataURL(file);
-    },
-    [onDraftAvatarChange]
-  );
-  const resolvedPreview = draftAvatarPreview != null ? draftAvatarPreview : avatarPreview;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-center", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleAvatarClick,
-          className: cn(
-            "relative flex items-center justify-center",
-            "h-[80px] w-[80px]",
-            "rounded-agg-full",
-            "border-2 border-dashed border-agg-separator",
-            "bg-agg-secondary",
-            "hover:border-agg-muted-foreground hover:bg-agg-secondary-hover",
-            "transition-colors cursor-pointer",
-            "overflow-hidden"
-          ),
-          "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
-          children: resolvedPreview ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: resolvedPreview,
-              alt: labels.onboarding.profileSetup.profilePreviewAlt,
-              className: "h-full w-full object-cover"
-            }
-          ) : /* @__PURE__ */ jsx(ProfileIcon, { className: "h-8 w-8 text-agg-muted-foreground" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: fileInputRef,
-          type: "file",
-          accept: "image/*",
-          onChange: handleFileChange,
-          className: "hidden",
-          "aria-hidden": "true"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "label",
-        {
-          htmlFor: "profile-username",
-          className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground",
-          children: "Username"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: "profile-username",
-          type: "text",
-          placeholder: "e.g. CryptoJohn",
-          value: draftUsername,
-          onChange: (e) => onDraftUsernameChange(e.target.value),
-          className: cn(
-            "w-full px-4 py-3",
-            "rounded-agg-xl",
-            "border border-agg-separator",
-            "bg-agg-secondary text-agg-foreground",
-            "placeholder:text-agg-muted-foreground",
-            "outline-none",
-            "focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
-            "transition-colors",
-            "text-agg-sm sm:text-agg-base"
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: "Delete your profile" }),
-        /* @__PURE__ */ jsx("span", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: "This will permanently delete your account and all of its data. You will not be able to reactivate this account." })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onDeleteProfile,
-          className: cn(
-            "self-start cursor-pointer",
-            "rounded-agg-full border border-[#e5455f]",
-            "h-8 px-4",
-            "text-agg-sm font-agg-bold leading-agg-5 text-[#e5455f]",
-            "bg-agg-secondary hover:bg-[#e5455f]/10",
-            "transition-colors"
-          ),
-          children: "Delete Profile"
-        }
-      )
-    ] })
-  ] });
-};
-AboutTab.displayName = "AboutTab";
-
-// src/profile/tabs/accounts-wallets-tab.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SectionTitle = ({ children }) => /* @__PURE__ */ jsx2("h3", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children });
-var AccountRow = ({ children, className }) => /* @__PURE__ */ jsx2(
-  "div",
-  {
-    className: cn(
-      "flex items-center justify-between",
-      "rounded-agg-lg border border-agg-separator bg-agg-secondary",
-      "px-5 py-3",
-      className
-    ),
-    children
-  }
-);
-var ConnectTextButton = ({ onClick }) => /* @__PURE__ */ jsx2(
-  "button",
-  {
-    type: "button",
-    onClick,
-    className: "shrink-0 cursor-pointer text-agg-sm font-agg-bold leading-agg-5 text-agg-primary whitespace-nowrap",
-    children: "Connect"
-  }
-);
-var DisconnectTextButton = ({ onClick }) => /* @__PURE__ */ jsx2(
-  "button",
-  {
-    type: "button",
-    onClick,
-    className: "shrink-0 cursor-pointer text-agg-sm font-agg-bold leading-agg-5 text-agg-muted-foreground whitespace-nowrap",
-    children: "Disconnect"
-  }
-);
-var AccountsWalletsTab = ({
-  exchanges,
-  socialAccounts,
-  email,
-  onDisconnectExchange,
-  onConnectTwitter,
-  onDisconnectTwitter,
-  onConnectDiscord,
-  onDisconnectDiscord,
-  onConnectTelegram,
-  onDisconnectTelegram,
-  onConnectEmail
-}) => {
-  const twitter = socialAccounts == null ? void 0 : socialAccounts.twitter;
-  const discord = socialAccounts == null ? void 0 : socialAccounts.discord;
-  const telegram = socialAccounts == null ? void 0 : socialAccounts.telegram;
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx2(SectionTitle, { children: "Exchanges" }),
-      exchanges.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: "No exchange accounts connected." }) : /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-2", children: exchanges.map((account) => {
-        var _a;
-        const displayName = (_a = venueLogoLabels[account.venue]) != null ? _a : account.venue;
-        return /* @__PURE__ */ jsxs2(AccountRow, { children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 min-w-0", children: [
-            /* @__PURE__ */ jsx2(VenueLogo, { venue: account.venue, size: "small" }),
-            /* @__PURE__ */ jsx2("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: displayName }),
-            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx2("span", { className: "truncate text-agg-base font-agg-normal leading-6 text-agg-foreground", children: account.displayAddress }),
-              account.verified ? /* @__PURE__ */ jsx2(
-                Icon,
-                {
-                  name: "check-badge",
-                  size: "small",
-                  color: "var(--agg-color-primary, #536dfe)"
-                }
-              ) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx2(DisconnectTextButton, { onClick: () => onDisconnectExchange(account.venue) })
-        ] }, account.venue);
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx2(SectionTitle, { children: "Social Accounts" }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxs2(AccountRow, { children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx2("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ jsx2(Icon, { name: "twitter", size: "small", color: "currentColor" }) }),
-            /* @__PURE__ */ jsx2("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "X (Twitter)" })
-          ] }),
-          (twitter == null ? void 0 : twitter.connected) ? /* @__PURE__ */ jsx2(DisconnectTextButton, { onClick: onDisconnectTwitter }) : /* @__PURE__ */ jsx2(ConnectTextButton, { onClick: onConnectTwitter })
-        ] }),
-        /* @__PURE__ */ jsxs2(AccountRow, { children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx2("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#5865F2]", children: /* @__PURE__ */ jsx2(Icon, { name: "discord", size: "small", color: "currentColor" }) }),
-            /* @__PURE__ */ jsx2("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Discord" })
-          ] }),
-          (discord == null ? void 0 : discord.connected) ? /* @__PURE__ */ jsx2(DisconnectTextButton, { onClick: onDisconnectDiscord }) : /* @__PURE__ */ jsx2(ConnectTextButton, { onClick: onConnectDiscord })
-        ] }),
-        /* @__PURE__ */ jsxs2(AccountRow, { children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx2("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-[#26A5E4]", children: /* @__PURE__ */ jsx2(Icon, { name: "telegram", size: "small", color: "currentColor" }) }),
-            /* @__PURE__ */ jsx2("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: "Telegram" })
-          ] }),
-          (telegram == null ? void 0 : telegram.connected) ? /* @__PURE__ */ jsx2(DisconnectTextButton, { onClick: onDisconnectTelegram }) : /* @__PURE__ */ jsx2(ConnectTextButton, { onClick: onConnectTelegram })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx2(SectionTitle, { children: "Email Address" }),
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          type: "button",
-          onClick: onConnectEmail,
-          className: cn(
-            "flex items-center justify-between",
-            "rounded-agg-lg border border-agg-separator bg-agg-secondary",
-            "px-5 py-3",
-            "cursor-pointer hover:bg-agg-secondary-hover"
-          ),
-          children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx2("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-agg-foreground", children: /* @__PURE__ */ jsx2(Icon, { name: "email", size: "small", color: "currentColor" }) }),
-              /* @__PURE__ */ jsx2("span", { className: "text-agg-base font-agg-normal leading-6 text-agg-foreground whitespace-nowrap", children: email != null ? email : "Connect email" })
-            ] }),
-            /* @__PURE__ */ jsx2(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-AccountsWalletsTab.displayName = "AccountsWalletsTab";
-
-// src/profile/index.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var ProfileModal = ({
-  open,
-  onOpenChange,
-  username,
-  avatarPreview,
-  onSave,
-  onDeleteProfile,
-  exchanges,
-  socialAccounts,
-  email,
-  onDisconnectExchange,
-  onConnectTwitter,
-  onDisconnectTwitter,
-  onConnectDiscord,
-  onDisconnectDiscord,
-  onConnectTelegram,
-  onDisconnectTelegram,
-  onConnectEmail
-}) => {
-  const [activeTab, setActiveTab] = useState(PROFILE_TAB_KEYS.ABOUT);
-  const [draftUsername, setDraftUsername] = useState(username != null ? username : "");
-  const [draftAvatarFile, setDraftAvatarFile] = useState();
-  const [draftAvatarPreview, setDraftAvatarPreview] = useState();
-  const [isSaving, setIsSaving] = useState(false);
-  useEffect(() => {
-    setDraftUsername(username != null ? username : "");
-  }, [username]);
-  const handleOpenChange = useCallback2(
-    (isOpen) => {
-      if (!isOpen) {
-        setActiveTab(PROFILE_TAB_KEYS.ABOUT);
-        setIsSaving(false);
-        setDraftUsername(username != null ? username : "");
-        setDraftAvatarFile(void 0);
-        setDraftAvatarPreview(void 0);
-      }
-      onOpenChange(isOpen);
-    },
-    [
-      onOpenChange,
-      username,
-      setActiveTab,
-      setIsSaving,
-      setDraftUsername,
-      setDraftAvatarFile,
-      setDraftAvatarPreview
-    ]
-  );
-  const handleDraftAvatarChange = useCallback2(
-    (file, preview) => {
-      setDraftAvatarFile(file);
-      setDraftAvatarPreview(preview);
-    },
-    []
-  );
-  const hasChanges = draftUsername !== (username != null ? username : "") || draftAvatarFile !== void 0;
-  const handleSave = useCallback2(() => {
-    setIsSaving(true);
-    onSave({
-      username: draftUsername || void 0,
-      avatarFile: draftAvatarFile,
-      avatarPreview: draftAvatarPreview
-    });
-    setTimeout(() => {
-      setIsSaving(false);
-      onOpenChange(false);
-    }, 500);
-  }, [draftUsername, draftAvatarFile, draftAvatarPreview, onSave, onOpenChange]);
-  const handleCancel = useCallback2(() => {
-    handleOpenChange(false);
-  }, [handleOpenChange]);
-  return /* @__PURE__ */ jsx3(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs3(Modal.Container, { maxWidth: "800px", "aria-label": "Edit Profile", children: [
-    /* @__PURE__ */ jsx3(Modal.Header, { title: "Edit Profile" }),
-    /* @__PURE__ */ jsx3(Modal.Body, { children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col sm:flex-row sm:gap-10", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "shrink-0", children: [
-        /* @__PURE__ */ jsx3("div", { className: "flex gap-2 sm:hidden mb-6", children: PROFILE_TAB_ITEMS.map((tab) => {
-          const isActive = activeTab === tab.value;
-          return /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              onClick: () => setActiveTab(tab.value),
-              className: cn(
-                "flex items-center gap-3 px-4 py-3 rounded-agg-lg",
-                "text-agg-sm leading-agg-5 font-agg-sans",
-                "transition-colors cursor-pointer",
-                "border-b-2",
-                isActive ? "font-agg-normal text-agg-foreground bg-agg-secondary-hover border-agg-primary" : "font-agg-normal text-agg-foreground border-transparent"
-              ),
-              children: [
-                /* @__PURE__ */ jsx3(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
-                /* @__PURE__ */ jsx3("span", { className: "whitespace-nowrap", children: tab.label })
-              ]
-            },
-            tab.value
-          );
-        }) }),
-        /* @__PURE__ */ jsx3(
-          "nav",
-          {
-            className: cn(
-              "hidden sm:flex sm:flex-col",
-              "w-[240px]",
-              "overflow-hidden rounded-agg-lg",
-              "border border-agg-separator",
-              "bg-agg-secondary",
-              "py-3"
-            ),
-            role: "tablist",
-            "aria-label": "Profile sections",
-            children: PROFILE_TAB_ITEMS.map((tab) => {
-              const isActive = activeTab === tab.value;
-              return /* @__PURE__ */ jsxs3(
-                "button",
-                {
-                  type: "button",
-                  role: "tab",
-                  "aria-selected": isActive,
-                  onClick: () => setActiveTab(tab.value),
-                  className: cn(
-                    "relative flex items-center gap-3",
-                    "h-[49px] px-6 py-4",
-                    "text-agg-sm leading-agg-5 font-agg-sans",
-                    "transition-colors cursor-pointer",
-                    isActive ? "font-agg-normal text-agg-foreground bg-agg-secondary-hover" : "font-agg-normal text-agg-foreground"
-                  ),
-                  children: [
-                    isActive ? /* @__PURE__ */ jsx3("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-agg-primary" }) : null,
-                    /* @__PURE__ */ jsx3(Icon, { name: tab.icon, size: "small", color: "currentColor" }),
-                    /* @__PURE__ */ jsx3("span", { className: "shrink-0 whitespace-nowrap", children: tab.label })
-                  ]
-                },
-                tab.value
-              );
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-        activeTab === PROFILE_TAB_KEYS.ABOUT ? /* @__PURE__ */ jsx3(
-          AboutTab,
-          {
-            username,
-            avatarPreview,
-            onDeleteProfile,
-            draftUsername,
-            onDraftUsernameChange: setDraftUsername,
-            draftAvatarFile,
-            onDraftAvatarChange: handleDraftAvatarChange,
-            draftAvatarPreview
-          }
-        ) : null,
-        activeTab === PROFILE_TAB_KEYS.ACCOUNTS_WALLETS ? /* @__PURE__ */ jsx3(
-          AccountsWalletsTab,
-          {
-            exchanges,
-            socialAccounts,
-            email,
-            onDisconnectExchange,
-            onConnectTwitter,
-            onDisconnectTwitter,
-            onConnectDiscord,
-            onDisconnectDiscord,
-            onConnectTelegram,
-            onDisconnectTelegram,
-            onConnectEmail
-          }
-        ) : null
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs3(Modal.Footer, { children: [
-      /* @__PURE__ */ jsx3(Button, { variant: "secondary", size: "large", onClick: handleCancel, className: "min-w-[120px]", children: "Cancel" }),
-      /* @__PURE__ */ jsx3(
-        Button,
-        {
-          variant: "primary",
-          size: "large",
-          disabled: !hasChanges,
-          isLoading: isSaving,
-          onClick: handleSave,
-          children: "Save Changes"
-        }
-      )
-    ] })
-  ] }) });
-};
-ProfileModal.displayName = "ProfileModal";
-
-export {
-  ProfileModal
-};