add fix for dialog

kadena-community · Nov 15, 2024 · 1903e82 · 1903e82
1 parent 83bd571
commit 1903e82
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 42 deletions.
diff --git a/.changeset/sour-dolphins-push.md b/.changeset/sour-dolphins-push.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/rwa-demo/src/components/AddAgentForm/AddAgentForm.tsx b/packages/apps/rwa-demo/src/components/AddAgentForm/AddAgentForm.tsx
@@ -2,7 +2,14 @@ import { useAccount } from '@/hooks/account';
 import { useNetwork } from '@/hooks/networks';
 import type { IAddAgentProps } from '@/services/addAgent';
 import { addAgent } from '@/services/addAgent';
-import { Button, TextField } from '@kadena/kode-ui';
+import type { IUnsignedCommand } from '@kadena/client';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  TextField,
+} from '@kadena/kode-ui';
 import {
   RightAside,
   RightAsideContent,
@@ -20,45 +27,62 @@ interface IProps {
 export const AddAgentForm: FC<IProps> = ({ onClose }) => {
   const { activeNetwork } = useNetwork();
   const { account } = useAccount();
+  const [openModal, setOpenModal] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setError] = useState<string | null>(null);
+  const [transaction, setTransaction] = useState<IUnsignedCommand>();
   const { register, handleSubmit } = useForm<IAddAgentProps>({
     defaultValues: {
       agent: '',
     },
   });
 
   const onSubmit = async (data: IAddAgentProps) => {
-    console.log({ data });
     setError(null);
     try {
-      await addAgent(data, activeNetwork, account!);
-
-      // setIsRightAsideExpanded(false);
+      const tx = await addAgent(data, activeNetwork, account!);
+      console.log({ tx });
+      setTransaction(tx);
+      setOpenModal(true);
+      //onClose();
     } catch (e: any) {
       setError(e?.message || e);
     }
 
-    // onClose();
+    //onClose();
   };
 
+  console.log(!!transaction);
+
   return (
-    <RightAside isOpen onClose={onClose}>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <RightAsideHeader label="Add Agent" />
-        <RightAsideContent>
-          <TextField
-            label="Agent Account"
-            {...register('agent', { required: true })}
-          />
-        </RightAsideContent>
-        <RightAsideFooter>
-          <Button onPress={onClose} variant="transparent">
-            Cancel
-          </Button>
-          <Button type="submit">Add Agent</Button>
-        </RightAsideFooter>
-      </form>
-    </RightAside>
+    <>
+      <Dialog
+        isOpen={openModal}
+        onOpenChange={() => {
+          setOpenModal(false);
+        }}
+      >
+        <DialogHeader>Transaction</DialogHeader>
+        <DialogContent>df</DialogContent>
+      </Dialog>
+
+      <RightAside isOpen onClose={onClose}>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <RightAsideHeader label="Add Agent" />
+          <RightAsideContent>
+            <TextField
+              label="Agent Account"
+              {...register('agent', { required: true })}
+            />
+          </RightAsideContent>
+          <RightAsideFooter>
+            <Button onPress={onClose} variant="transparent">
+              Cancel
+            </Button>
+            <Button type="submit">Add Agent</Button>
+          </RightAsideFooter>
+        </form>
+      </RightAside>
+    </>
   );
 };
diff --git a/packages/apps/rwa-demo/src/services/addAgent.ts b/packages/apps/rwa-demo/src/services/addAgent.ts
@@ -29,7 +29,7 @@ export const addAgent = async (
   network: INetwork,
   account: ConnectedAccount,
 ) => {
-  const transaction = Pact.builder
+  return Pact.builder
     .execution(
       `(RWA.agent-role.add-agent (read-string 'agent) (read-keyset 'agent_guard))`,
     )
@@ -49,17 +49,4 @@ export const addAgent = async (
 
     .setNetworkId(network.networkId)
     .createTransaction();
-
-  console.log({ transaction });
-  console.log(transaction.cmd);
-  console.log(JSON.parse(transaction.cmd));
-
-  // const { transactions, isReady } = await sign([transaction], [account]);
-  // await isReady();
-  // console.log(transactions);
-
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  // transactions.map(async (t) => {
-  //   await doSubmit(t);
-  // });
 };
diff --git a/packages/libs/kode-ui/src/components/Modal/Modal.css.ts b/packages/libs/kode-ui/src/components/Modal/Modal.css.ts
@@ -1,4 +1,4 @@
-import { style } from '../../styles';
+import { style, token } from '../../styles';
 
 export const underlayClass = style([
   {
@@ -9,7 +9,7 @@ export const underlayClass = style([
     inset: 0,
     // TODO: Update to use token: please check docs search dialog to align
     // backgroundColor: 'rgba(34, 33, 33, 0.8)',
-
+    zIndex: token('zIndex.modal'),
     backdropFilter: 'blur(12px)',
   },
 ]);
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -10,7 +10,7 @@ import {
 import type { Meta, StoryObj } from '@storybook/react';
 import type { FC, PropsWithChildren } from 'react';
 import React, { useState } from 'react';
-import { Button, Stack } from './../../components';
+import { Button, Dialog, DialogHeader, Stack } from './../../components';
 import { SideBarBreadcrumbs } from './components/Breadcrumbs/SideBarBreadcrumbs';
 import { SideBarBreadcrumbsItem } from './components/Breadcrumbs/SideBarBreadcrumbsItem';
 import { LayoutProvider, useLayout } from './components/LayoutProvider';
@@ -68,9 +68,20 @@ const InnerLayout = () => {
     useLayout();
   const [hasOpenSidebar, setHasOpenSidebar] = useState(false);
   const [hasOpenOtherSidebar, setHasOpenOtherSidebar] = useState(false);
+  const [openDialog, setOpenDialog] = useState(false);
 
   return (
     <>
+      {openDialog && (
+        <Dialog
+          isOpen
+          onOpenChange={() => {
+            setOpenDialog(false);
+          }}
+        >
+          <DialogHeader>Header of dialog</DialogHeader>
+        </Dialog>
+      )}
       {isRightAsideExpanded && hasOpenSidebar && (
         <RightAside
           isOpen
@@ -93,7 +104,16 @@ const InnerLayout = () => {
           }}
         >
           <RightAsideHeader label="test header" />
-          <RightAsideContent>content</RightAsideContent>
+          <RightAsideContent>
+            content
+            <Button
+              onPress={() => {
+                setOpenDialog(true);
+              }}
+            >
+              Open Dialog on TOP of Sidebar
+            </Button>
+          </RightAsideContent>
         </RightAside>
       )}
       <SideBarLayout

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -121,7 +121,7 @@ export const menuBackdropClass = recipe({
         position: 'fixed',
         inset: 0,
         background: token('color.neutral.n90@alpha20'),
-        zIndex: token('zIndex.overlay'),
+        zIndex: 8000,
         backdropFilter: 'blur(8px)',
         opacity: 0,
         willChange: 'transform, opacity',