@hfunlabs/hypurr-connect 0.1.13 → 0.1.14

package/dist/index.d.ts

@@ -196,8 +196,10 @@ declare function HypurrConnectProvider({ config, children, }: {
 interface LoginModalProps {
     onConnectWallet: () => void;
     walletIcon?: ReactNode;
+    /** CSS color used as the modal/drawer background. Defaults to `rgba(20,20,20,0.95)`. */
+    backgroundColor?: string;
 }
-declare function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps): react_jsx_runtime.JSX.Element;
+declare function LoginModal({ onConnectWallet, walletIcon, backgroundColor, }: LoginModalProps): react_jsx_runtime.JSX.Element;
 
 interface PrincipalColors {
     accent: string;

package/dist/index.js

@@ -1052,7 +1052,9 @@ function HypurrConnectProvider({
     sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
     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));
@@ -1434,6 +1436,7 @@ function TelegramColorIcon({ style }) {
 // src/LoginModal.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MOBILE_BREAKPOINT = 640;
+var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
 var btnStyle = {
   display: "flex",
   height: 53,
@@ -1479,7 +1482,6 @@ var modalBoxStyle = {
   overflow: "hidden",
   borderRadius: 12,
   border: "1px solid rgba(255,255,255,0.1)",
-  background: "#282828",
   padding: 24
 };
 var headingStyle = {
@@ -1521,7 +1523,11 @@ function HoverButton({
     }
   );
 }
-function LoginModal({ onConnectWallet, walletIcon }) {
+function LoginModal({
+  onConnectWallet,
+  walletIcon,
+  backgroundColor = DEFAULT_BACKGROUND_COLOR
+}) {
   const { loginTelegram, loginModalOpen, closeLoginModal } = useHypurrConnectInternal();
   const handleTelegramAuth = useCallback2(() => {
     closeLoginModal();
@@ -1561,7 +1567,15 @@ function LoginModal({ onConnectWallet, walletIcon }) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(MobileDrawer, { onClose: closeLoginModal, children: modalContent }, "drawer") : /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(
+    MobileDrawer,
+    {
+      onClose: closeLoginModal,
+      backgroundColor,
+      children: modalContent
+    },
+    "drawer"
+  ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx4(
       motion.div,
       {
@@ -1586,7 +1600,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
         children: /* @__PURE__ */ jsxs3(
           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 },
@@ -1618,7 +1632,6 @@ var drawerSheetStyle = {
   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))"
 };
 var drawerBgStyle = {
@@ -1628,7 +1641,6 @@ var drawerBgStyle = {
   top: 0,
   bottom: "-100vh",
   zIndex: -1,
-  background: "#282828",
   borderTopLeftRadius: 12,
   borderTopRightRadius: 12
 };
@@ -1646,7 +1658,8 @@ var grabHandleStyle = {
 };
 function MobileDrawer({
   children,
-  onClose
+  onClose,
+  backgroundColor
 }) {
   const controls = useAnimationControls();
   const handleDragEnd = useCallback2(
@@ -1675,7 +1688,7 @@ function MobileDrawer({
     /* @__PURE__ */ jsxs3(
       motion.div,
       {
-        style: drawerSheetStyle,
+        style: { ...drawerSheetStyle, background: backgroundColor },
         initial: { y: "100%" },
         animate: { y: 0 },
         exit: { y: "100%" },
@@ -1685,7 +1698,7 @@ function MobileDrawer({
         dragElastic: { top: 0, bottom: 0.4 },
         onDragEnd: handleDragEnd,
         children: [
-          /* @__PURE__ */ jsx4("div", { style: drawerBgStyle }),
+          /* @__PURE__ */ jsx4("div", { style: { ...drawerBgStyle, background: backgroundColor } }),
           /* @__PURE__ */ jsx4("div", { style: grabHandleAreaStyle, children: /* @__PURE__ */ jsx4("div", { style: grabHandleStyle }) }),
           /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
           children
@@ -3556,7 +3569,7 @@ function IconBtn({
 
 // src/WalletSelectorDropdown.tsx
 import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
+var DEFAULT_BACKGROUND_COLOR2 = "rgba(20,20,20,0.95)";
 var getWalletNameParts = (name) => (name ?? "").split("/").map((part) => part.trim()).filter(Boolean);
 var buildWalletListEntries = (wallets) => {
   const standalone = [];
@@ -3679,7 +3692,7 @@ function WalletSelectorDropdown({
   onWalletRenamed,
   accentColor,
   principalColors,
-  backgroundColor = DEFAULT_BACKGROUND_COLOR
+  backgroundColor = DEFAULT_BACKGROUND_COLOR2
 }) {
   const { user, wallets, selectedWalletId, selectWallet, logout, authMethod } = useHypurrConnectInternal();
   const [profileOpen, setProfileOpen] = useState5(false);