@hfunlabs/hypurr-connect 0.1.13 → 0.1.14

package/package.json

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

package/src/HypurrConnectProvider.tsx

@@ -1155,7 +1155,9 @@ export function HypurrConnectProvider({
         ? 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));

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} />