Update Modals in TRAIN, resolves FRONT-878

components/HeaderWithMenu/index.tsx

@@ -1,11 +1,11 @@
 import { useIntercom } from "react-use-intercom"
-import IconButton from "../buttons/iconButton"
-import GoHomeButton from "../utils/GoHome"
+import IconButton from "@/components/buttons/iconButton"
+import GoHomeButton from "@/components/utils/GoHome"
 import { ArrowLeft } from 'lucide-react'
-import ChatIcon from "../Icons/ChatIcon"
+import ChatIcon from "@/components/Icons/ChatIcon"
 import dynamic from "next/dynamic"
-import LayerswapMenu from "../LayerswapMenu"
-import { useQueryState } from "../../context/query"
+import LayerswapMenu from "@/components/LayerswapMenu"
+import { useQueryState } from "@/context/query"
 
 const WalletsHeader = dynamic(() => import("../Wallet/ConnectedWallets.tsx").then((comp) => comp.WalletsHeader), {
    loading: () => <></>

components/LayerswapMenu/MenuList.tsx

@@ -2,17 +2,17 @@ import { BookOpen, Home, LibraryIcon, Shield, MessageSquarePlus, CircleHelp, Inf
 import { useRouter } from "next/router";
 import { FC, useEffect, useState } from "react";
 import { useIntercom } from "react-use-intercom";
-import ChatIcon from "../Icons/ChatIcon";
-import inIframe from "../utils/inIframe";
-import GitHubLogo from "../Icons/GitHubLogo";
-import TwitterLogo from "../Icons/TwitterLogo";
+import ChatIcon from "@/components/Icons/ChatIcon";
+import inIframe from "@/components/utils/inIframe";
+import GitHubLogo from "@/components/Icons/GitHubLogo";
+import TwitterLogo from "@/components/Icons/TwitterLogo";
 import Link from "next/link";
-import Popover from "../Modal/popover";
-import SendFeedback from "../sendFeedback";
+import Popover from "@/components/Modal/popover";
+import SendFeedback from "@/components/sendFeedback";
 import Menu from "./Menu";
 import dynamic from "next/dynamic";
-import { MenuStep } from "../../Models/Wizard";
-import useWindowDimensions from "../../hooks/useWindowDimensions";
+import { MenuStep } from "@/Models/Wizard";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 const WalletsMenu = dynamic(() => import("../Wallet/ConnectedWallets.tsx").then((comp) => comp.WalletsMenu), {
     loading: () => <></>

components/LayerswapMenu/index.tsx

@@ -1,36 +1,27 @@
 import { MenuIcon, ChevronLeft } from "lucide-react";
-import { FC, useState } from "react";
-import IconButton from "../buttons/iconButton";
-import { FormWizardProvider, useFormWizardaUpdate, useFormWizardState } from "../../context/formWizardProvider";
-import { MenuStep } from "../../Models/Wizard";
+import { FC, useEffect, useState } from "react";
+import IconButton from "@/components/buttons/iconButton";
+import { FormWizardProvider, useFormWizardaUpdate, useFormWizardState } from "@/context/formWizardProvider";
+import { MenuStep } from "@/Models/Wizard";
 import MenuList from "./MenuList";
-import Wizard from "../Wizard/Wizard";
+import Wizard from "@/components/Wizard/Wizard";
 import WizardItem from "../Wizard/WizardItem";
 import { NextRouter, useRouter } from "next/router";
-import { resolvePersistantQueryParams } from "../../helpers/querryHelper";
-import Modal from "../Modal/modal";
-import RpcNetworkListView from "../Settings/RpcNetworkListView";
-import NetworkRpcEditView from "../Settings/NetworkRpcEditView";
-import { Network } from "../../Models/Network";
-import clsx from "clsx";
+import { resolvePersistantQueryParams } from "@/helpers/querryHelper";
+import { Modal, ModalContent } from "@/components/Modal/modalWithoutAnimation";
+import RpcNetworkListView from "@/components/Settings/RpcNetworkListView";
+import NetworkRpcEditView from "@/components/Settings/NetworkRpcEditView";
+import { Network } from "@/Models/Network";
 
 const Comp = () => {
     const router = useRouter();
+    const [isOpen, setIsOpen] = useState(false);
 
     const { goBack, currentStepName } = useFormWizardState()
     const { goToStep } = useFormWizardaUpdate()
 
-    const [openTopModal, setOpenTopModal] = useState(false);
     const [selectedNetwork, setSelectedNetwork] = useState<Network | null>(null);
 
-    const handleModalOpenStateChange = (value: boolean) => {
-        setOpenTopModal(value)
-        if (value === false) {
-            goToStep(MenuStep.Menu)
-            setSelectedNetwork(null)
-        }
-    }
-
     const goBackToMenuStep = () => { goToStep(MenuStep.Menu, "back"); clearMenuPath(router) }
     const goBackToRpcConfiguration = () => { goToStep(MenuStep.RPCConfiguration, "back") }
 
@@ -51,56 +42,60 @@ const Comp = () => {
         goToStep(MenuStep.RPCConfiguration, "back")
     }
 
+    useEffect(() => {
+        if (!isOpen) {
+            goToStep(MenuStep.Menu)
+            setSelectedNetwork(null)
+            clearMenuPath(router)
+        }
+    }, [isOpen])
+
     return <>
         <div className="text-secondary-text cursor-pointer relative">
-            <IconButton onClick={() => setOpenTopModal(true)} icon={
-                <MenuIcon strokeWidth="2" />
-            }>
-            </IconButton>
-            <Modal
-                modalId="menuModal"
-                show={openTopModal}
-                setShow={handleModalOpenStateChange}
-                header={
-                    <div className="inline-flex items-center">
-                        {
-                            goBack &&
-                            <div className="-ml-2">
-                                <IconButton onClick={goBack} icon={
-                                    <ChevronLeft strokeWidth="2" />
-                                }>
-                                </IconButton>
-                            </div>
-                        }
-                        <h2>{currentStepName as string}</h2>
-                    </div>
-                }
-            >
-                <Wizard wizardId='menuWizard'
-                    className={clsx("h-full", {
-                        '!pb-0': currentStepName !== MenuStep.Menu
-                    })}
+            <div className="sm:-mr-2 mr-0">
+                <IconButton className="inline-flex active:animate-press-down" onClick={() => setIsOpen(true)} icon={
+                    <MenuIcon strokeWidth="2" />
+                } />
+            </div>
+            <Modal isOpen={isOpen} setIsOpen={setIsOpen}>
+                <ModalContent
+                    header={
+                        <div className="inline-flex items-center w-full">
+                            {
+                                goBack &&
+                                <div className="-ml-2">
+                                    <IconButton className="inline-flex" onClick={goBack} icon={
+                                        <ChevronLeft strokeWidth="2" />
+                                    } />
+                                </div>
+                            }
+                            <h2 className="flex-1">{currentStepName as string}</h2>
+                        </div>
+                    }
                 >
-                    <WizardItem StepName={MenuStep.Menu} inModal>
-                        <MenuList goToStep={handleGoToStep} />
-                    </WizardItem>
-                    <WizardItem className="h-full" StepName={MenuStep.RPCConfiguration} GoBack={goBackToMenuStep} inModal>
-                        <RpcNetworkListView onNetworkSelect={handleNetworkSelect} />
-                    </WizardItem>
-                    <WizardItem className="h-full" StepName={MenuStep.NetworkRPCEdit} GoBack={goBackToRpcConfiguration} inModal>
-                        {selectedNetwork ? (
-                            <NetworkRpcEditView
-                                network={selectedNetwork}
-                                onSave={handleNetworkSave}
-                            />
-                        ) : (
-                            <div>Loading...</div>
-                        )}
-                    </WizardItem>
-                    {/* <WizardItem StepName={MenuStep.Transactions} GoBack={goBackToMenuStep} className="h-full" inModal>
-                        <HistoryList onNewTransferClick={() => handleModalOpenStateChange(false)} />
-                    </WizardItem> */}
-                </Wizard>
+                    {() => (
+                        <div className="h-full openpicker" id="virtualListContainer">
+                            <Wizard wizardId='menuWizard'>
+                                <WizardItem StepName={MenuStep.Menu} inModal>
+                                    <MenuList goToStep={handleGoToStep} />
+                                </WizardItem>
+                                <WizardItem className="h-full" StepName={MenuStep.RPCConfiguration} GoBack={goBackToMenuStep} inModal>
+                                    <RpcNetworkListView onNetworkSelect={handleNetworkSelect} />
+                                </WizardItem>
+                                <WizardItem className="h-full" StepName={MenuStep.NetworkRPCEdit} GoBack={goBackToRpcConfiguration} inModal>
+                                    {selectedNetwork ? (
+                                        <NetworkRpcEditView
+                                            network={selectedNetwork}
+                                            onSave={handleNetworkSave}
+                                        />
+                                    ) : (
+                                        <div>Loading...</div>
+                                    )}
+                                </WizardItem>
+                            </Wizard>
+                        </div>
+                    )}
+                </ModalContent>
             </Modal>
         </div >
     </>

components/Modal/modalWithoutAnimation.tsx

@@ -0,0 +1,138 @@
+import { createContext, DetailedHTMLProps, HTMLAttributes, ReactNode, SetStateAction, useContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+import IconButton from "@/components/buttons/iconButton";
+import { X } from 'lucide-react';
+import clsx from "clsx";
+
+type ModalProps = {
+    setIsOpen: (value: SetStateAction<boolean>) => void;
+    isOpen: boolean
+    shouldFocus: boolean;
+    setShouldFocus: (value: SetStateAction<boolean>) => void;
+}
+
+const ModalContext = createContext<ModalProps>({ isOpen: false, setIsOpen: () => { }, shouldFocus: false, setShouldFocus: () => { } });
+
+export const Modal = ({ children, isOpen: _isOpen, setIsOpen: _setIsOpen }: { children: ReactNode, isOpen?: ModalProps['isOpen'], setIsOpen?: ModalProps['setIsOpen'] }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [shouldFocus, setShouldFocus] = useState(false);
+
+    return (
+        <ModalContext.Provider value={{ isOpen: _isOpen || isOpen, setIsOpen: _setIsOpen || setIsOpen, shouldFocus, setShouldFocus }}>
+            {children}
+        </ModalContext.Provider>
+    );
+};
+
+export const useModalState = () => {
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error("useModalState must be used within a Modal");
+    }
+    return context;
+}
+
+type ContentChildProps = {
+    closeModal: () => void;
+    shouldFocus: boolean;
+}
+
+type ModalContentProps = {
+    header?: ReactNode;
+    children: ((props: ContentChildProps) => JSX.Element) | JSX.Element;
+    className?: string;
+    showCloseButton?: boolean;
+}
+
+export const ModalContent = (props: ModalContentProps) => {
+    const { children, header, className = "", showCloseButton = true } = props
+    const { isOpen, setIsOpen, setShouldFocus, shouldFocus } = useModalState();
+    const closeModal = () => { setIsOpen(false); setShouldFocus(false) };
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                closeModal();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen]);
+
+    if (!isOpen) return null;
+
+    const modalElement = (
+        <div className={clsx("fixed sm:absolute inset-0 z-50 bg-secondary-900 rounded-t-2xl sm:rounded-none flex flex-col overscroll-none", className)}>
+            {(header || showCloseButton) && (
+                <div className="w-full relative z-20">
+                    <div className="flex items-center w-full text-left justify-between px-4 py-3 gap-x-2 sm:gap-x-1">
+                        <div className="flex-1 text-lg text-secondary-text font-semibold w-full">
+                            {header}
+                        </div>
+                        {showCloseButton && (
+                            <div className="-mr-2">
+                                <IconButton onClick={closeModal} className="active:animate-press-down" icon={
+                                    <X strokeWidth={3} />
+                                }>
+                                </IconButton>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            <div className="flex flex-col w-full h-full max-h-[90dvh] px-6 styled-scroll overflow-x-hidden overflow-y-auto pb-6 z-0 openpicker">
+                {typeof children === 'function' ? children({ closeModal, shouldFocus }) : children}
+            </div>
+        </div>
+    );
+
+    const widgetElement = document.getElementById('widget');
+
+    if (!widgetElement) {
+        console.warn('Widget element not found, modal will not render');
+        return null;
+    }
+
+    return createPortal(modalElement, widgetElement);
+}
+
+type ModalTriggerProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    disabled?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+    className?: string;
+    onClick?: () => void;
+}
+
+export const ModalTrigger = (props: ModalTriggerProps) => {
+    const { disabled = false, children, className = "", onClick, ...rest } = props
+    const { setIsOpen, setShouldFocus } = useContext(ModalContext);
+    const { isDesktop } = useWindowDimensions();
+
+    function openModal() {
+        setIsOpen(true)
+        isDesktop && setShouldFocus(true)
+        onClick?.();
+    }
+
+    return (
+        <div
+            {...rest}
+            className="rounded-lg flex items-center relative w-full z-10 self-end"
+        >
+            <button
+                type="button"
+                onClick={openModal}
+                disabled={disabled}
+                className={clsx("rounded-lg focus:outline-none disabled:cursor-not-allowed relative grow flex items-center text-left justify-bottom w-full px-2 pr-0 bg-secondary-700 hover:bg-secondary-600 font-semibold", className)}
+            >
+                {children}
+            </button>
+        </div>
+    )
+}

components/Select/Command/CommandSelectWrapper.tsx

@@ -3,7 +3,6 @@ import Image from 'next/image'
 import { ChevronDown } from 'lucide-react'
 import { ISelectMenuItem, SelectMenuItem } from '../Shared/Props/selectMenuItem'
 import CommandSelect, { SelectMenuItemGroup } from './commandSelect'
-import { LeafletHeight } from '../../Modal/leaflet'
 
 type CommandSelectWrapperProps = {
     setValue: (value: ISelectMenuItem) => void;
@@ -14,7 +13,6 @@ type CommandSelectWrapperProps = {
     disabled: boolean;
     valueGrouper: (values: ISelectMenuItem[]) => SelectMenuItemGroup[];
     isLoading: boolean;
-    modalHeight?: LeafletHeight;
     valueDetails?: React.ReactNode;
     modalContent?: React.ReactNode;
     direction?: string;
@@ -30,7 +28,6 @@ export default function CommandSelectWrapper<T>({
     values,
     valueGrouper,
     isLoading,
-    modalHeight,
     modalContent,
     header,
     valueDetails
@@ -95,7 +92,6 @@ export default function CommandSelectWrapper<T>({
                 valueGrouper={valueGrouper}
                 values={values}
                 isLoading={isLoading}
-                modalHeight={modalHeight}
                 modalContent={modalContent}
                 header={header}
             />