fix: fix modal positioning for multiple toggle buttons

Author: riyanshu-patro

packages/ui-kit/src/lib/components/LoginModal/index.tsx

@@ -27,9 +27,10 @@ type LoginModalProps = {
   isWalletMinimised: boolean;
   setMinimiseWallet: (isWalletMinimised: boolean) => void;
   handleUserLogOutEvent: () => void;
-  toggleButtonRef: React.RefObject<HTMLDivElement>;
   sendMessageToPushWallet: (message: any) => void;
   isReadOnly: boolean;
+  toggleButtonRefs: React.MutableRefObject<Record<string, HTMLDivElement | null>>;
+  activeTriggerId: string | undefined;
 };
 
 const LoginModal: FC<LoginModalProps> = ({
@@ -45,20 +46,22 @@ const LoginModal: FC<LoginModalProps> = ({
   setMinimiseWallet,
   handleUserLogOutEvent,
   config,
-  toggleButtonRef,
   sendMessageToPushWallet,
-  isReadOnly
+  isReadOnly,
+  toggleButtonRefs,
+  activeTriggerId,
 }) => {
   const [version, setVersion] = React.useState<number>(5);
 
   const { modal } = config;
   const { pushChainClient } = usePushChainClient(config?.uid || 'default');
 
   const { top, left } = useSmartModalPosition(
-    toggleButtonRef,
+    activeTriggerId || null,
+    toggleButtonRefs,
     450,
     675,
-    config.uid
+    config.uid,
   );
 
   const handleSendTransaction = async (data: ExecuteParams) => {
@@ -278,10 +281,12 @@ const FrameContainer = styled.div<{
   $style?: Record<'top' | 'left', number>;
 }>`
   position: fixed;
-  top: ${({ $universalAccount, $accountMenuVariant }) =>
+  top: ${({ $universalAccount, $accountMenuVariant, $style }) =>
     $universalAccount
       ? $accountMenuVariant === PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL
         ? '0'
+        : $style?.top != null
+        ? `${$style.top}px`
         : '50px'
       : '0'};
   left: ${({ $style }) => ($style?.left != null ? `${$style.left}px` : 'auto')};

packages/ui-kit/src/lib/components/LoginModal/useSmartModalPosition.ts

@@ -5,7 +5,8 @@ import { PushUI } from '../../constants';
 type Position = { top: number; left: number };
 
 export function useSmartModalPosition(
-  triggerRef: React.RefObject<HTMLElement>,
+  triggerId: string | null,
+  triggerRefs: React.MutableRefObject<Record<string, HTMLDivElement | null>>,
   modalWidth = 450,
   modalHeight = 675,
   uid?: string,
@@ -16,35 +17,43 @@ export function useSmartModalPosition(
 
   useEffect(() => {
     const calculatePosition = () => {
-      if (!triggerRef.current) return;
+      if (!triggerId || !triggerRefs.current[triggerId]) return;
+
+      const triggerRef = triggerRefs.current[triggerId];
 
       if (config.modal?.connectedLayout === PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL) {
         setPosition({ top: 0, left: 0 });
         return;
       }
 
-      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const triggerRect = triggerRef.getBoundingClientRect();
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
 
       const spaceBelow = viewportHeight - triggerRect.bottom;
       const spaceAbove = triggerRect.top;
-      const spaceRight = viewportWidth - triggerRect.left;
-      const spaceLeft = triggerRect.right;
-
-      const top =
-        spaceBelow >= modalHeight
-          ? triggerRect.bottom - 16
-          : spaceAbove >= modalHeight
-          ? triggerRect.top - modalHeight + 16
-          : Math.max(viewportHeight - modalHeight, 0);
-
-      const left =
-        spaceRight >= modalWidth
-          ? triggerRect.left - 35
-          : spaceLeft >= modalWidth
-          ? triggerRect.right - modalWidth + 35
-          : Math.max(viewportWidth - modalWidth, 0);
+      const spaceRight = viewportWidth - triggerRect.right;
+      const spaceLeft = triggerRect.left;
+
+      let top;
+      let left;
+
+      if (spaceBelow >= modalHeight) {
+        top = triggerRect.bottom;
+      } else if (spaceAbove >= modalHeight) {
+        top = triggerRect.top - modalHeight;
+      } else {
+        top = Math.max(viewportHeight - modalHeight, 0) / 2;
+      }
+
+      // Horizontal
+      if ((spaceRight + triggerRect.width) >= modalWidth) {
+        left = triggerRect.left - 35;
+      } else if (spaceLeft >= modalWidth) {
+        left = triggerRect.right - modalWidth + 35;
+      } else {
+        left = Math.max(viewportWidth - modalWidth, 0) / 2;
+      }
 
       setPosition({ top, left });
     };
@@ -61,7 +70,7 @@ export function useSmartModalPosition(
       window.removeEventListener('resize', calculatePosition);
       document.body.style.overflow = '';
     };
-  }, [triggerRef, modalWidth, modalHeight, isWalletMinimised, config]);
+  }, [triggerId, triggerRefs, modalWidth, modalHeight, isWalletMinimised, config, uid]);
 
   useEffect(() => {
     if (!universalAccount) {

packages/ui-kit/src/lib/components/PushUniversalAccountButton/TogglePushWalletButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CHAIN } from '@pushchain/core/src/lib/constants/enums';
 import { usePushWalletContext } from '../../hooks/usePushWallet';
 import { UniversalAccount } from '../../types';
-import { Button, PushLogo, PushMonotone } from '../common';
+import { Button, PushMonotone } from '../common';
 import { centerMaskString, getChainId } from '../../helpers';
 import { CHAIN_LOGO } from '../../constants';
 import styled from 'styled-components';
@@ -14,14 +14,15 @@ export type TogglePushWalletButtonProps = {
   customComponent?: React.ReactNode;
   className?: string;
 };
+
 const TogglePushWalletButton: React.FC<TogglePushWalletButtonProps> = ({
   uid,
   universalAccount,
   customComponent,
-  className,
+  className = 'default',
   style,
 }) => {
-  const { setMinimiseWallet, isWalletMinimised, toggleButtonRef } =
+  const { setMinimiseWallet, isWalletMinimised, toggleButtonRefs , setActiveTriggerId } =
     usePushWalletContext(uid);
   const { chain, address } = universalAccount;
 
@@ -40,10 +41,26 @@ const TogglePushWalletButton: React.FC<TogglePushWalletButtonProps> = ({
 
   const maskedAddress = centerMaskString(address);
 
+  const handleClick = () => {
+    setActiveTriggerId(className);
+    setMinimiseWallet(!isWalletMinimised);
+  };
+
+  const setTriggerRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      if (node) {
+        toggleButtonRefs.current[className] = node;
+      } else {
+        delete toggleButtonRefs.current[className];
+      }
+    },
+    [className]
+  );
+
   return (
     <ButtonContainer
-      onClick={() => setMinimiseWallet(!isWalletMinimised)}
-      ref={toggleButtonRef}
+      onClick={handleClick}
+      ref={setTriggerRef}
     >
       {customComponent ? customComponent : (
         <Button

packages/ui-kit/src/lib/components/PushUniversalAccountButton/index.tsx

@@ -4,7 +4,6 @@ import { usePushWalletContext } from '../../hooks/usePushWallet';
 import { ConnectPushWalletButtonProps, ConnectWalletButton } from './ConnectWalletButton';
 import { TogglePushWalletButton, TogglePushWalletButtonProps } from './TogglePushWalletButton';
 import {
-  createGlobalStyle,
   DefaultTheme,
   ThemeProvider,
 } from 'styled-components';

packages/ui-kit/src/lib/context/WalletContext.tsx

@@ -1,14 +1,12 @@
 import React, {
   createContext,
   FC,
-  useCallback,
   useEffect,
   useRef,
   useState,
 } from 'react';
 import { PushChain } from '@pushchain/core';
 import {
-  PROGRESS_HOOK,
   ProgressEvent,
 } from '@pushchain/core/src/lib/progress-hook/progress-hook.types';
 import {
@@ -65,14 +63,16 @@ export type WalletContextType = {
   themeMode: ThemeMode;
   themeOverrides: ThemeOverrides;
 
-  toggleButtonRef: React.RefObject<HTMLDivElement>;
-
   progress: ProgressEvent | null;
   setProgress: React.Dispatch<React.SetStateAction<ProgressEvent | null>>;
 
   isReadOnly: boolean;
   setIsReadOnly: React.Dispatch<React.SetStateAction<boolean>>;
   requestPushWalletConnection: () => Promise<{ chain: ChainType; provider: IWalletProvider["name"] }>;
+
+  activeTriggerId: string | undefined;
+  setActiveTriggerId: React.Dispatch<React.SetStateAction<string | undefined>>;
+  toggleButtonRefs: React.MutableRefObject<Record<string, HTMLDivElement | null>>;
 };
 
 export const WalletContext = createContext<WalletContextType | null>(null);
@@ -131,7 +131,10 @@ export const WalletContextProvider: FC<PushWalletProviderProps> = ({
       : undefined
   );
 
-  const toggleButtonRef = useRef<HTMLDivElement>(null);
+  const [activeTriggerId, setActiveTriggerId] = useState<string>();
+
+  const toggleButtonRefs = React.useRef<Record<string, HTMLDivElement | null>>({});
+  
 
   const updateModalAppData = (newData: Partial<ModalAppDetails>) => {
     setModalAppData((prevData) => ({
@@ -663,13 +666,15 @@ export const WalletContextProvider: FC<PushWalletProviderProps> = ({
         handleSignMessage,
         handleSignAndSendTransaction,
         handleSignTypedData,
-        toggleButtonRef,
         progress,
         setProgress,
         isReadOnly,
         setIsReadOnly,
         handleExternalWalletConnection,
         requestPushWalletConnection,
+        activeTriggerId,
+        setActiveTriggerId,
+        toggleButtonRefs,
       }}
     >
       <LoginModal
@@ -685,9 +690,10 @@ export const WalletContextProvider: FC<PushWalletProviderProps> = ({
         isWalletMinimised={isWalletMinimised}
         setMinimiseWallet={setMinimiseWallet}
         handleUserLogOutEvent={handleUserLogOutEvent}
-        toggleButtonRef={toggleButtonRef}
         sendMessageToPushWallet={sendMessageToPushWallet}
         isReadOnly={isReadOnly}
+        toggleButtonRefs={toggleButtonRefs}
+        activeTriggerId={activeTriggerId}
       />
       {progress && (
         <PushWalletToast progress={progress} setProgress={setProgress} />