feat(rwa): add asset (#2706)

.changeset/curvy-mice-destroy.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/popular-rice-search.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/rwa-demo/src/app/(app)/assets/page.tsx

@@ -1,34 +1,102 @@
 'use client';
 
+import { AssetForm } from '@/components/AssetForm/AssetForm';
+import { Confirmation } from '@/components/Confirmation/Confirmation';
 import { useAsset } from '@/hooks/asset';
-import { CompactTable, CompactTableFormatters } from '@kadena/kode-ui/patterns';
+import { MonoAdd, MonoDelete } from '@kadena/kode-icons';
+import { Button } from '@kadena/kode-ui';
+import {
+  CompactTable,
+  CompactTableFormatters,
+  RightAside,
+  RightAsideContent,
+  RightAsideHeader,
+  SectionCard,
+  SectionCardBody,
+  SectionCardContentBlock,
+  SectionCardHeader,
+  useLayout,
+} from '@kadena/kode-ui/patterns';
 import Link from 'next/link';
+import { useState } from 'react';
 
 const Assets = () => {
-  const { assets } = useAsset();
+  const { assets, removeAsset } = useAsset();
+  const [openSide, setOpenSide] = useState(false);
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
+
+  const handleDelete = (value: any) => {
+    removeAsset(value);
+  };
 
   return (
     <>
-      <CompactTable
-        variant="open"
-        fields={[
-          {
-            key: 'uuid',
-            label: 'id',
-            width: '40%',
-            render: CompactTableFormatters.FormatLink({
-              linkComponent: Link,
-              url: '/assets/:value',
-            }),
-          },
-          {
-            key: 'name',
-            label: 'name',
-            width: '60%',
-          },
-        ]}
-        data={assets}
-      />
+      {isRightAsideExpanded && openSide && (
+        <RightAside
+          isOpen
+          onClose={() => {
+            setIsRightAsideExpanded(false);
+            setOpenSide(false);
+          }}
+        >
+          <RightAsideHeader label="Assets" />
+          <RightAsideContent></RightAsideContent>
+        </RightAside>
+      )}
+      <SectionCard stack="vertical">
+        <SectionCardContentBlock>
+          <SectionCardHeader
+            title="Assets"
+            description={<>List of all your selected contracts</>}
+            actions={
+              <AssetForm
+                trigger={
+                  <Button variant="outlined" isCompact endVisual={<MonoAdd />}>
+                    Add Asset
+                  </Button>
+                }
+              />
+            }
+          />
+          <SectionCardBody>
+            <CompactTable
+              fields={[
+                {
+                  key: 'contractName',
+                  label: 'name',
+                  width: '90%',
+                  render: CompactTableFormatters.FormatLink({
+                    linkComponent: Link,
+                    url: '/assets/:value',
+                  }),
+                },
+                {
+                  label: '',
+                  key: 'uuid',
+                  width: '10%',
+                  render: CompactTableFormatters.FormatActions({
+                    trigger: (
+                      <Confirmation
+                        onPress={handleDelete}
+                        trigger={
+                          <Button
+                            isCompact
+                            variant="outlined"
+                            startVisual={<MonoDelete />}
+                          />
+                        }
+                      >
+                        Are you sure you want to remove this asset?
+                      </Confirmation>
+                    ),
+                  }),
+                },
+              ]}
+              data={assets}
+            />
+          </SectionCardBody>
+        </SectionCardContentBlock>
+      </SectionCard>
     </>
   );
 };

packages/apps/rwa-demo/src/app/(app)/layout.tsx

@@ -9,13 +9,15 @@ import {
 } from '@kadena/kode-ui/patterns';
 
 import { ActiveTransactionsList } from '@/components/ActiveTransactionsList/ActiveTransactionsList';
+import { StepperAssetForm } from '@/components/AssetForm/StepperAssetForm';
 import { AssetInfo } from '@/components/AssetInfo/AssetInfo';
-import { AssetForm } from '@/components/AssetSwitch/AssetForm';
 import { TransactionPendingIcon } from '@/components/TransactionPendingIcon/TransactionPendingIcon';
+import { useAccount } from '@/hooks/account';
 import { useTransactions } from '@/hooks/transactions';
 import { getAsset } from '@/utils/getAsset';
 import { MonoAccountBalanceWallet } from '@kadena/kode-icons';
 import { Button, Heading, Link, Stack } from '@kadena/kode-ui';
+import { useRouter } from 'next/navigation';
 import React, { useEffect, useRef, useState } from 'react';
 import { KLogo } from './KLogo';
 import { SideBar } from './SideBar';
@@ -25,19 +27,26 @@ const RootLayout = ({
 }: Readonly<{
   children: React.ReactNode;
 }>) => {
+  const { account, isMounted } = useAccount();
   const [openTransactionsSide, setOpenTransactionsSide] = useState(false);
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const { transactions, setTxsButtonRef, setTxsAnimationRef } =
     useTransactions();
   const txsButtonRef = useRef<HTMLButtonElement | null>(null);
   const transactionAnimationRef = useRef<HTMLDivElement | null>(null);
+  const router = useRouter();
 
   useEffect(() => {
     if (!txsButtonRef.current || !transactionAnimationRef.current) return;
     setTxsButtonRef(txsButtonRef.current);
     setTxsAnimationRef(transactionAnimationRef.current);
   }, [txsButtonRef.current, transactionAnimationRef.current]);
 
+  if (isMounted && !account) {
+    router.replace('/login');
+    return;
+  }
+
   if (!getAsset()) {
     return (
       <Stack
@@ -49,7 +58,7 @@ const RootLayout = ({
       >
         <div>
           <Heading>Add new asset</Heading>
-          <AssetForm />
+          <StepperAssetForm />
         </div>
       </Stack>
     );

packages/apps/rwa-demo/src/components/AgentForm/AgentForm.tsx

@@ -21,9 +21,13 @@ interface IProps {
 }
 
 export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
+  // const { data: userAgentRolesData } = useGetAgentRoles({
+  //   agent: agent?.accountName,
+  // });
   const { submit } = useEditAgent();
   const [isOpen, setIsOpen] = useState(false);
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
+
   const {
     handleSubmit,
     control,
@@ -60,6 +64,7 @@ export const AgentForm: FC<IProps> = ({ onClose, agent, trigger }) => {
   };
 
   const onSubmit = async (data: IAddAgentProps) => {
+    console.log({ data });
     await submit(data);
     handleOnClose();
   };

packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx

@@ -19,6 +19,7 @@ import { useRouter } from 'next/navigation';
 import type { FC } from 'react';
 import { AgentForm } from '../AgentForm/AgentForm';
 import { Confirmation } from '../Confirmation/Confirmation';
+import { FormatAgentRoles } from '../TableFormatters/FormatAgentRoles';
 
 export const AgentsList: FC = () => {
   const { paused } = useAsset();
@@ -63,14 +64,20 @@ export const AgentsList: FC = () => {
                 {
                   label: 'Name',
                   key: 'alias',
-                  width: '30%',
+                  width: '20%',
                 },
                 {
                   label: 'Account',
                   key: 'accountName',
-                  width: '50%',
+                  width: '20%',
                   render: CompactTableFormatters.FormatAccount(),
                 },
+                {
+                  label: 'Roles',
+                  key: 'accountName',
+                  width: '40%',
+                  render: FormatAgentRoles(),
+                },
                 {
                   label: '',
                   key: 'accountName',

packages/apps/rwa-demo/src/components/AssetForm/AddExistingAssetForm.tsx

@@ -0,0 +1,52 @@
+import { useAsset } from '@/hooks/asset';
+import { Button, Stack, TextField } from '@kadena/kode-ui';
+import { useRouter } from 'next/navigation';
+import type { FC } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
+interface IAddExistingAssetProps {
+  name: string;
+}
+
+export const AddExistingAssetForm: FC = () => {
+  const router = useRouter();
+  const { addExistingAsset } = useAsset();
+  const {
+    handleSubmit,
+    control,
+    formState: { isValid },
+  } = useForm<IAddExistingAssetProps>({
+    values: {
+      name: '',
+    },
+  });
+
+  const handleSave = async (data: IAddExistingAssetProps) => {
+    const asset = addExistingAsset(data.name);
+    if (!asset) return;
+
+    router.refresh();
+  };
+
+  return (
+    <Stack
+      as="form"
+      flexDirection="column"
+      gap="sm"
+      onSubmit={handleSubmit(handleSave)}
+    >
+      <Controller
+        name="name"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <TextField placeholder="Asset name" {...field} />
+        )}
+      />
+
+      <Button isDisabled={!isValid} type="submit">
+        Add Existing Asset
+      </Button>
+    </Stack>
+  );
+};

packages/apps/rwa-demo/src/components/AssetForm/AssetForm.tsx

@@ -0,0 +1,51 @@
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideHeader,
+  useLayout,
+} from '@kadena/kode-ui/patterns';
+import type { FC, ReactElement } from 'react';
+import { cloneElement, useState } from 'react';
+import type { IAsset } from '../AssetProvider/AssetProvider';
+import { StepperAssetForm } from './StepperAssetForm';
+
+interface IProps {
+  asset?: IAsset;
+  trigger: ReactElement;
+  onClose?: () => void;
+}
+
+export const AssetForm: FC<IProps> = ({ trigger, onClose }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
+
+  const handleOpen = () => {
+    setIsRightAsideExpanded(true);
+    setIsOpen(true);
+    if (trigger.props.onPress) trigger.props.onPress();
+  };
+
+  const handleOnClose = () => {
+    setIsRightAsideExpanded(false);
+    setIsOpen(false);
+    if (onClose) onClose();
+  };
+
+  return (
+    <>
+      {isRightAsideExpanded && isOpen && (
+        <RightAside
+          isOpen={isRightAsideExpanded && isOpen}
+          onClose={handleOnClose}
+        >
+          <RightAsideHeader label="Add Asset" />
+          <RightAsideContent>
+            <StepperAssetForm />
+          </RightAsideContent>
+        </RightAside>
+      )}
+
+      {cloneElement(trigger, { ...trigger.props, onPress: handleOpen })}
+    </>
+  );
+};