use portal

packages/apps/dev-wallet/src/pages/networks/Components/network-form.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/pages/transaction/components/style.css';
 import { MonoCircle, MonoDelete, MonoWarning } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, Text, TextField } from '@kadena/kode-ui';
+import { useLayout } from '@kadena/kode-ui/patterns';
 import classNames from 'classnames';
 import { useEffect } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
@@ -34,12 +35,28 @@ interface INewNetwork {
   }[];
 }
 
+export const getNewNetwork = (): INetworkWithOptionalUuid => ({
+  uuid: undefined,
+  networkId: '',
+  name: '',
+  hosts: [
+    {
+      url: '',
+      submit: false,
+      read: false,
+      confirm: false,
+    },
+  ],
+});
+
 export function NetworkForm({
   network,
+  onClose,
   onSave: onDone,
 }: {
   network: INetworkWithOptionalUuid;
   onSave: (network: INetworkWithOptionalUuid) => void;
+  onClose: () => void;
 }) {
   const {
     control,
@@ -49,10 +66,12 @@ export function NetworkForm({
     setValue,
     watch,
     formState,
+    reset,
   } = useForm<INewNetwork>({
     defaultValues: network,
     mode: 'all',
   });
+  const { setAsideTitle } = useLayout();
   const { fields, append, remove } = useFieldArray({ control, name: 'hosts' });
   async function create(updNetwork: INewNetwork) {
     const hosts = updNetwork.hosts.map(
@@ -65,6 +84,11 @@ export function NetworkForm({
     });
   }
 
+  useEffect(() => {
+    reset(network ?? getNewNetwork());
+    setAsideTitle(network.uuid ? 'Edit Network' : 'Add Network');
+  }, [network.uuid]);
+
   const hosts = watch('hosts');
   const networkId = watch('networkId');
 
@@ -87,20 +111,20 @@ export function NetworkForm({
 
   return (
     <>
-      <Stack margin="md" gap={'md'} flexDirection={'column'} width="100%">
+      <Stack gap={'md'} flexDirection={'column'} width="100%">
         <form onSubmit={handleSubmit(create)} className={displayContentsClass}>
           <TextField
             label="Network ID"
             aria-label="networkId"
             type="text"
-            defaultValue={getValues('networkId')}
+            value={getValues('networkId')}
             {...register('networkId')}
           />
           <TextField
             label="Title"
             aria-label="title"
             type="text"
-            defaultValue={getValues('name')}
+            value={getValues('name')}
             {...register('name')}
           />
           <Stack gap="md" justifyContent={'space-between'} paddingBlock={'lg'}>
@@ -179,12 +203,18 @@ export function NetworkForm({
               );
             })}
           </Stack>
-          <Button
-            type="submit"
-            isDisabled={!isNetworkIdValid || !formState.isDirty}
-          >
-            Save
-          </Button>
+
+          <Stack gap={'md'} width="100%" justifyContent="flex-end">
+            <Button variant="outlined" onPress={() => onClose()} type="reset">
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              isDisabled={!isNetworkIdValid || !formState.isDirty}
+            >
+              Save
+            </Button>
+          </Stack>
         </form>
       </Stack>
     </>

packages/apps/dev-wallet/src/pages/networks/networks.tsx

@@ -3,41 +3,20 @@ import { networkRepository } from '@/modules/network/network.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { createAsideUrl } from '@/utils/createAsideUrl';
 import { MonoWifiTethering, MonoWorkspaces } from '@kadena/kode-icons/system';
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  Heading,
-  Link,
-  Stack,
-  Text,
-} from '@kadena/kode-ui';
+import { Button, Heading, Link, Stack, Text } from '@kadena/kode-ui';
 import { useLayout } from '@kadena/kode-ui/patterns';
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { panelClass } from '../home/style.css';
 import {
+  getNewNetwork,
   INetworkWithOptionalUuid,
   NetworkForm,
 } from './Components/network-form';
 
-const getNewNetwork = (): INetworkWithOptionalUuid => ({
-  uuid: undefined,
-  networkId: '',
-  name: '',
-  hosts: [
-    {
-      url: '',
-      submit: false,
-      read: false,
-      confirm: false,
-    },
-  ],
-});
-
 export function Networks() {
   const { networks } = useWallet();
-  const [showNetworkModal, setShowNetworkModal] = useState(false);
+  const { asideRef, handleSetAsideExpanded, isAsideExpanded } = useLayout();
   const [selectedNetwork, setSelectedNetwork] =
     useState<INetworkWithOptionalUuid>(() => getNewNetwork());
   useLayout({
@@ -55,14 +34,13 @@ export function Networks() {
   return (
     <>
       <Stack margin="md" flexDirection={'column'}>
-        <Dialog
-          isOpen={showNetworkModal}
-          onOpenChange={setShowNetworkModal}
-          size="sm"
-        >
-          <DialogHeader>Add Network</DialogHeader>
-          <DialogContent>
+        {isAsideExpanded &&
+          asideRef &&
+          createPortal(
             <NetworkForm
+              onClose={() => {
+                handleSetAsideExpanded(false);
+              }}
               onSave={async (updNetwork) => {
                 if (updNetwork.uuid) {
                   await networkRepository.updateNetwork(updNetwork);
@@ -72,12 +50,13 @@ export function Networks() {
                     uuid: crypto.randomUUID(),
                   });
                 }
-                setShowNetworkModal(false);
+                handleSetAsideExpanded(false);
               }}
               network={selectedNetwork}
-            />
-          </DialogContent>
-        </Dialog>
+            />,
+            asideRef,
+          )}
+
         <Stack
           className={panelClass}
           marginBlockStart="xl"
@@ -96,7 +75,7 @@ export function Networks() {
               isCompact
               onPress={() => {
                 setSelectedNetwork(getNewNetwork());
-                setShowNetworkModal(true);
+                handleSetAsideExpanded(true);
               }}
             >
               Add Network
@@ -126,7 +105,7 @@ export function Networks() {
                     variant="outlined"
                     onPress={() => {
                       setSelectedNetwork(network);
-                      setShowNetworkModal(true);
+                      handleSetAsideExpanded(true);
                     }}
                   >
                     Edit

packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider.tsx

@@ -38,6 +38,8 @@ export interface ILayoutContext {
   isActiveUrl: (url?: string) => boolean;
   asideTitle?: string;
   setAsideTitle: (value?: string) => void;
+  asideRef?: HTMLDivElement | null;
+  setAsideRef: (value?: HTMLDivElement | null) => void;
 }
 export const LayoutContext = createContext<ILayoutContext>({
   isAsideExpanded: false,
@@ -55,9 +57,7 @@ export const LayoutContext = createContext<ILayoutContext>({
   setAsideTitle: () => {},
 });
 
-export interface IuseLayoutProps extends ILayoutContext {
-  initPage: (props: Pick<ILayoutContext, 'appContext' | 'breadCrumbs'>) => void;
-}
+export interface IuseLayoutProps extends ILayoutContext {}
 
 export const useLayout = (
   props?: Pick<ILayoutContext, 'appContext' | 'breadCrumbs'>,
@@ -93,6 +93,7 @@ export const useLayout = (
 export interface ILayoutProvider extends PropsWithChildren {}
 
 export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
+  const [asideRef, setAsideRefState] = useState<HTMLDivElement | null>(null);
   const [isAsideExpanded, setIsAsideExpanded] = useState(false);
   const [asideTitle, setAsideTitleState] = useState<string | undefined>('');
   const [isExpanded, setIsExpanded] = useState(false);
@@ -145,6 +146,9 @@ export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
   const setAsideTitle = (value?: string) => {
     setAsideTitleState(value);
   };
+  const setAsideRef = (value?: HTMLDivElement | null) => {
+    setAsideRefState(value ? value : null);
+  };
 
   const isActiveUrl = (url?: string) => {
     return !!url && url === location?.url;
@@ -168,6 +172,8 @@ export const LayoutProvider: FC<ILayoutProvider> = ({ children }) => {
         isActiveUrl,
         asideTitle,
         setAsideTitle,
+        asideRef,
+        setAsideRef,
       }}
     >
       {children}

packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx

@@ -1,6 +1,6 @@
 import { MonoClose } from '@kadena/kode-icons/system';
 import type { FC, PropsWithChildren } from 'react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   asideContentClass,
   asideHeaderClass,
@@ -20,18 +20,31 @@ export const SideBarAside: FC<
     location: ISideBarLayoutLocation;
   }>
 > = ({ hasTopBanner, location, children }) => {
-  const { handleSetAsideExpanded, isAsideExpanded, asideTitle } = useLayout();
+  const {
+    handleSetAsideExpanded,
+    isAsideExpanded,
+    asideTitle,
+    setAsideRef,
+    asideRef,
+  } = useLayout();
+  const ref = useRef<HTMLDivElement | null>();
 
   const handleExpand = (e: PressEvent) => {
     if (handleSetAsideExpanded) {
       handleSetAsideExpanded(false);
     }
   };
 
+  useEffect(() => {
+    if (!ref.current) return;
+    setAsideRef(ref.current);
+  }, [ref.current]);
+
   useEffect(() => {
     handleSetAsideExpanded(!!location?.hash);
   }, [location?.hash]);
 
+  console.log(asideRef);
   return (
     <>
       <Stack
@@ -68,7 +81,9 @@ export const SideBarAside: FC<
           </Stack>
         </header>
 
-        <Stack className={asideContentClass}>{children}</Stack>
+        <Stack className={asideContentClass}>
+          <div ref={ref}></div>
+        </Stack>
       </aside>
     </>
   );