fix: update modals delete to overlay

libs/shared-components/src/mini-overlay/overlay-wrapper.tsx

@@ -6,14 +6,10 @@ import Header from './header'
 import Main from './pages/main'
 import Profile from './pages/profile'
 import { IWalletConnect } from './types'
-import {
-  MemoryRouter,
-  Navigate,
-  NavigateFunction,
-  useLocation,
-  useNavigate,
-  Location,
-} from 'react-router'
+import { NavigateFunction, Location } from 'react-router'
+import { ModalConfirmBackground } from '../multitable-panel/components/dropdown'
+import { ModalDelete } from '../multitable-panel/components/modal-delete'
+import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine'
 const { Title } = Typography
 
 const OverlayWrapperBlock = styled.div<{ $isApps: boolean }>`
@@ -218,14 +214,11 @@ const OverlayWrapper: FC<
   const [isProfileOpen, openCloseProfile] = useState(false)
   const isMutationIconButton = !!connectWallet && !!disconnectWallet && !!nearNetwork
   const openCloseWalletPopupRef = useRef<HTMLButtonElement>(null)
-
-  const handleSignIn = async () => {
-    setWaiting(true)
-    try {
-      await connectWallet()
-    } finally {
-      setWaiting(false)
-    }
+  const { deleteLocalMutation } = useDeleteLocalMutation()
+  const { favoriteMutationId, setFavoriteMutation } = useMutableWeb()
+  const [mutationIdToDelete, setMutationIdToDelete] = useState<string | null>(null)
+  const handleFavoriteButtonClick = (mutationId: string) => {
+    setFavoriteMutation(mutationId === favoriteMutationId ? null : mutationId)
   }
 
   return (
@@ -279,11 +272,27 @@ const OverlayWrapper: FC<
                 handleMutateButtonClick={handleMutateButtonClick}
                 onClose={onClose}
                 connectWallet={connectWallet}
+                handleFavoriteButtonClick={handleFavoriteButtonClick}
+                setMutationIdToDelete={setMutationIdToDelete}
               />
             ) : null}
             {location.pathname === '/system/profile' ? (
               <Profile navigate={navigate} location={location} />
             ) : null}
+
+            {mutationIdToDelete && (
+              <ModalConfirmBackground>
+                <ModalDelete
+                  onAction={async () => {
+                    await deleteLocalMutation(mutationIdToDelete)
+                    if (mutationIdToDelete === favoriteMutationId)
+                      handleFavoriteButtonClick(mutationIdToDelete)
+                    setMutationIdToDelete(null)
+                  }}
+                  onCloseCurrent={() => setMutationIdToDelete(null)}
+                />
+              </ModalConfirmBackground>
+            )}
           </Body>
         </Drawer>
       </OverlayContent>

libs/shared-components/src/mini-overlay/pages/main.tsx

@@ -18,19 +18,24 @@ export interface IMainProps {
   handleMutateButtonClick: () => void
   onClose: () => void
   connectWallet: () => Promise<void>
+  handleFavoriteButtonClick: (mutationId: string) => void
+  setMutationIdToDelete: React.Dispatch<React.SetStateAction<string | null>>
 }
 const Main: FC<IMainProps> = ({
   loggedInAccountId,
   modalContainerRef,
   handleMutateButtonClick,
   onClose,
   connectWallet,
+  setMutationIdToDelete,
+  handleFavoriteButtonClick,
 }) => {
   return (
     <MainContainer data-testid="main-page">
       <MultitablePanel
         connectWallet={connectWallet}
-        loggedInAccountId={loggedInAccountId}
+        setMutationIdToDelete={setMutationIdToDelete}
+        handleFavoriteButtonClick={handleFavoriteButtonClick}
         handleMutateButtonClick={handleMutateButtonClick}
       />
       {loggedInAccountId ? (

libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx

@@ -108,7 +108,6 @@ export const ListMutations = styled.div`
   display: flex;
   flex-direction: column;
   gap: 3px;
-  z-index: 1;
 `
 
 export const InputBlock = styled.div<{ isActive?: boolean }>`
@@ -215,7 +214,6 @@ export const AvalibleMutations = styled.div`
   flex-direction: column;
   box-sizing: border-box;
   padding: 10px;
-  z-index: 1;
 
   .avalibleMutationsInput {
     background: rgba(248, 249, 255, 1);

libs/shared-components/src/multitable-panel/components/dropdown.tsx

@@ -1,6 +1,6 @@
 import { ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons'
 import { EntitySourceType, MutationWithSettings } from '@mweb/backend'
-import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine'
+import { useMutableWeb } from '@mweb/engine'
 import React, { DetailedHTMLProps, FC, HTMLAttributes, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import {
@@ -32,9 +32,8 @@ import {
 } from '../assets/vectors'
 import { Badge } from './badge'
 import { Image } from './image'
-import { ModalDelete } from './modal-delete'
 
-const ModalConfirmBackground = styled.div`
+export const ModalConfirmBackground = styled.div`
   position: absolute;
   display: flex;
   justify-content: center;
@@ -51,21 +50,24 @@ const ModalConfirmBackground = styled.div`
 
 export type DropdownProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
   onMutateButtonClick: () => void
+  handleFavoriteButtonClick: (mutationId: string) => void
+  setMutationIdToDelete: React.Dispatch<React.SetStateAction<string | null>>
 }
 
-export const Dropdown: FC<DropdownProps> = ({ onMutateButtonClick }: DropdownProps) => {
+export const Dropdown: FC<DropdownProps> = ({
+  onMutateButtonClick,
+  handleFavoriteButtonClick,
+  setMutationIdToDelete,
+}: DropdownProps) => {
   const {
     mutations,
     selectedMutation,
     favoriteMutationId,
-    setFavoriteMutation,
     switchMutation,
     getPreferredSource,
     removeMutationFromRecents,
   } = useMutableWeb()
 
-  const { deleteLocalMutation } = useDeleteLocalMutation()
-
   const recentlyUsedMutations = useMemo(
     () =>
       Object.groupBy(
@@ -88,7 +90,6 @@ export const Dropdown: FC<DropdownProps> = ({ onMutateButtonClick }: DropdownPro
   const [isAccordeonExpanded, setIsAccordeonExpanded] = useState(
     Object.keys(recentlyUsedMutations).length === 0
   )
-  const [mutationIdToDelete, setMutationIdToDelete] = useState<string | null>(null)
 
   const unusedMutations = useMemo(
     () =>
@@ -112,10 +113,6 @@ export const Dropdown: FC<DropdownProps> = ({ onMutateButtonClick }: DropdownPro
     onMutateButtonClick()
   }
 
-  const handleFavoriteButtonClick = (mutationId: string) => {
-    setFavoriteMutation(mutationId === favoriteMutationId ? null : mutationId)
-  }
-
   const handleOriginalButtonClick = async () => {
     switchMutation(null)
   }
@@ -282,20 +279,6 @@ export const Dropdown: FC<DropdownProps> = ({ onMutateButtonClick }: DropdownPro
             </AvalibleMutations>
           ) : null}
         </MutationsListWrapper>
-
-        {mutationIdToDelete && (
-          <ModalConfirmBackground>
-            <ModalDelete
-              onAction={async () => {
-                await deleteLocalMutation(mutationIdToDelete)
-                if (mutationIdToDelete === favoriteMutationId)
-                  handleFavoriteButtonClick(mutationIdToDelete)
-                setMutationIdToDelete(null)
-              }}
-              onCloseCurrent={() => setMutationIdToDelete(null)}
-            />
-          </ModalConfirmBackground>
-        )}
       </MutationsList>
     </WrapperDropdown>
   )

libs/shared-components/src/multitable-panel/index.tsx

@@ -30,12 +30,17 @@ const Loader = () => (
 )
 
 const MultitablePanel: FC<{
-  loggedInAccountId: string
   connectWallet: (() => Promise<void>) | undefined
   handleMutateButtonClick: () => void
-}> = ({ loggedInAccountId, connectWallet, handleMutateButtonClick }) => {
+  setMutationIdToDelete: React.Dispatch<React.SetStateAction<string | null>>
+  handleFavoriteButtonClick: (mutationId: string) => void
+}> = ({
+  connectWallet,
+  handleMutateButtonClick,
+  setMutationIdToDelete,
+  handleFavoriteButtonClick,
+}) => {
   const [isWaiting, setWaiting] = useState(false)
-  const [isModalOpen, setIsModalOpen] = useState(false)
 
   const overlayRef = useRef<HTMLDivElement>(null)
 
@@ -68,7 +73,11 @@ const MultitablePanel: FC<{
 
         </>
       )} */}
-      <Dropdown onMutateButtonClick={handleMutateButtonClick} />
+      <Dropdown
+        setMutationIdToDelete={setMutationIdToDelete}
+        handleFavoriteButtonClick={handleFavoriteButtonClick}
+        onMutateButtonClick={handleMutateButtonClick}
+      />
     </FeedContainer>
   )
 }