From 1903e82ed4cc8491f89fc9b933d3f73444eaf359 Mon Sep 17 00:00:00 2001 From: Steven Straatemans Date: Fri, 15 Nov 2024 13:47:33 +0100 Subject: [PATCH] add fix for dialog --- .changeset/sour-dolphins-push.md | 2 + .../components/AddAgentForm/AddAgentForm.tsx | 70 +++++++++++++------ .../apps/rwa-demo/src/services/addAgent.ts | 15 +--- .../kode-ui/src/components/Modal/Modal.css.ts | 4 +- .../SideBarLayout/SideBarLayout.stories.tsx | 24 ++++++- .../src/patterns/SideBarLayout/aside.css.ts | 2 +- 6 files changed, 75 insertions(+), 42 deletions(-) create mode 100644 .changeset/sour-dolphins-push.md diff --git a/.changeset/sour-dolphins-push.md b/.changeset/sour-dolphins-push.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ 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 index 7bfe82ddf5..d5c162f764 100644 --- 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,8 +27,10 @@ interface IProps { export const AddAgentForm: FC = ({ onClose }) => { const { activeNetwork } = useNetwork(); const { account } = useAccount(); + const [openModal, setOpenModal] = useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [_, setError] = useState(null); + const [transaction, setTransaction] = useState(); const { register, handleSubmit } = useForm({ defaultValues: { agent: '', @@ -29,36 +38,51 @@ export const AddAgentForm: FC = ({ onClose }) => { }); 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 ( - -
- - - - - - - - - -
+ <> + { + setOpenModal(false); + }} + > + Transaction + df + + + +
+ + + + + + + + + +
+ ); }; diff --git a/packages/apps/rwa-demo/src/services/addAgent.ts b/packages/apps/rwa-demo/src/services/addAgent.ts index 1809f29b96..53b7a52007 100644 --- 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 index 8d235a0968..9e48791ca1 100644 --- 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 index b78b8d8f4d..2f143c8c11 100644 --- 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 && ( + { + setOpenDialog(false); + }} + > + Header of dialog + + )} {isRightAsideExpanded && hasOpenSidebar && ( { }} > - content + + content + + )}