keys as a compact table

kadena-community · Nov 7, 2024 · 6eedd98 · 6eedd98
1 parent 3e03fab
commit 6eedd98
Show file tree

Hide file tree

Showing 16 changed files with 268 additions and 106 deletions.
diff --git a/packages/apps/dev-wallet/src/Components/BackupMnemonic/BackupMnemonic.tsx b/packages/apps/dev-wallet/src/Components/BackupMnemonic/BackupMnemonic.tsx
@@ -30,9 +30,9 @@ export function BackupMnemonic({
   return (
     <>
       {step === 'start' && (
-        <Stack flexDirection={'column'} gap={'lg'}>
-          <Stack flexDirection={'column'} gap={'sm'}>
-            <Heading variant="h5">Write your recovery phrase down</Heading>
+        <Stack flexDirection={'column'} gap="md">
+          <Stack flexDirection={'column'}>
+            <Heading as="h4">Write your recovery phrase down</Heading>
             <Text>
               Make sure no one is watching you; consider some malware might take
               screenshot of your screen
@@ -59,7 +59,7 @@ export function BackupMnemonic({
         </Stack>
       )}
       {step === 'view' && (
-        <Stack flexDirection={'column'} gap={'sm'}>
+        <Stack flexDirection={'column'} gap={'md'}>
           <Heading variant="h5">Write down your recovery phrase</Heading>
           <Text size="small">
             Your recovery phrase is the key to your account. Write it down and

diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx
@@ -0,0 +1,13 @@
+import { IPactCommand } from '@kadena/client';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+export const FormatCreationDateWrapper: () => FC<ICompactTableFormatterProps> =
+  () =>
+  ({ value }) => {
+    const date = new Date(
+      ((JSON.parse(value) as IPactCommand).meta.creationTime || 0) * 1000,
+    ).toLocaleString();
+
+    return date;
+  };
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx
@@ -0,0 +1,8 @@
+import { shorten } from '@/utils/helpers';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+export const FormatHash: () => FC<ICompactTableFormatterProps> =
+  () =>
+  ({ value }) =>
+    shorten(value);
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx
@@ -0,0 +1,28 @@
+import { IKeySet } from '@/modules/account/account.repository';
+import { shorten } from '@/utils/helpers';
+import { MonoKey } from '@kadena/kode-icons/system';
+import { Stack, Text } from '@kadena/kode-ui';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+export const FormatKeys: () => FC<ICompactTableFormatterProps> =
+  () =>
+  ({ value }) => {
+    console.log(1111, value);
+    const keyset: string[] = value.length > 1 ? (value[1] as string) : [];
+
+    console.log(keyset);
+    return (
+      <Stack gap={'sm'} alignItems={'center'}>
+        {value[0]}:
+        {keyset.map((key) => (
+          <Stack gap={'sm'} alignItems={'center'}>
+            <Text variant="code">
+              <MonoKey />
+            </Text>
+            <Text variant="code">{shorten(key)}</Text>{' '}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  };
diff --git a/...s/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx b/...s/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Heading, Text, TextField } from '@kadena/kode-ui';
+import { Button, Heading, Stack, Text, TextField } from '@kadena/kode-ui';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
@@ -21,15 +21,15 @@ export function ConfirmRecoveryPhrase({
 
   return (
     <>
-      <Box margin="md">
-        <Heading variant="h5">Confirm you wrote it down</Heading>
+      <Stack width="100%" gap="md">
+        <Heading as="h4">Confirm you wrote it down</Heading>
         <form onSubmit={handleSubmit(confirm)}>
           <label htmlFor="phrase">Enter phrase in the same order</label>
           <TextField type="password" id="phrase" {...register('phrase')} />
           <Button type="submit">Confirm</Button>
         </form>
         {error && <Text>{error}</Text>}
-      </Box>
+      </Stack>
     </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx
@@ -1,9 +1,10 @@
 import { ListItem } from '@/Components/ListItem/ListItem';
+import { FormatKeys } from '@/Components/Table/FormatKeys';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { shorten } from '@/utils/helpers';
 import { MonoKey } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { CompactTable, useLayout } from '@kadena/kode-ui/patterns';
 import { CreateKeySetForm } from './CreateKeySetForm';
 
 export function KeySets() {
@@ -17,7 +18,7 @@ export function KeySets() {
       />
       <Stack flexDirection={'column'}>
         <Stack marginBlock={'md'} justifyContent={'space-between'}>
-          <Heading variant="h3">Key Sets</Heading>
+          <Heading variant="h5">Key Sets</Heading>
           <Button
             onPress={() => setIsRightAsideExpanded(true)}
             variant="outlined"
@@ -26,31 +27,28 @@ export function KeySets() {
             Create Key Set
           </Button>
         </Stack>
-        <Stack flexDirection={'column'}>
-          {keysets
-            .filter(({ guard }) => guard.keys.length >= 2)
-            .map((keySet) => (
-              <ListItem key={keySet.uuid}>
-                <Stack justifyContent={'space-between'}>
-                  <Stack key={keySet.uuid} gap={'sm'}>
-                    <Text>{keySet.alias}</Text>
-                    <Text>{keySet.principal}</Text>
-                  </Stack>
-                </Stack>
-                <Stack gap={'md'}>
-                  <Text>{keySet.guard.pred}:</Text>
-                  {keySet.guard.keys.map((key) => (
-                    <Stack gap={'xs'} alignItems={'center'}>
-                      <Text>
-                        <MonoKey />
-                      </Text>
-                      <Text variant="code">{shorten(key)}</Text>{' '}
-                    </Stack>
-                  ))}
-                </Stack>
-              </ListItem>
-            ))}
-        </Stack>
+        <CompactTable
+          fields={[
+            {
+              label: 'Alias',
+              key: 'alias',
+              width: '10%',
+            },
+            {
+              label: 'Principal',
+              key: 'principal',
+              width: '45%',
+            },
+            {
+              label: 'Keys',
+              key: ['guard.pred', 'guard.keys'],
+              variant: 'code',
+              width: '45%',
+              render: FormatKeys(),
+            },
+          ]}
+          data={keysets.filter(({ guard }) => guard.keys.length >= 2)}
+        />
       </Stack>
     </>
   );

diff --git a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -199,10 +199,8 @@ export function SignatureBuilder() {
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
 
-      <Stack flexDirection={'column'} gap={'md'}>
-        <Heading variant="h5">
-          Paste SigData, CommandSigData, or Payload
-        </Heading>
+      <Stack flexDirection={'column'} gap={'md'} width="100%">
+        <Heading as="h4">Paste SigData, CommandSigData, or Payload</Heading>
         <textarea
           value={input}
           className={classNames(codeArea)}

diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
@@ -1,18 +1,21 @@
 import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { FormatCreationDateWrapper } from '@/Components/Table/FormatCreationDateWrapper';
+import { FormatHash } from '@/Components/Table/FormatHash';
 import {
   ITransaction,
   transactionRepository,
 } from '@/modules/transaction/transaction.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { shorten } from '@/utils/helpers';
 import { IPactCommand } from '@kadena/client';
-import { MonoOpenInNew, MonoSwapHoriz } from '@kadena/kode-icons/system';
-import { Box, Heading, Stack, Text } from '@kadena/kode-ui';
-import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
+import { MonoSwapHoriz } from '@kadena/kode-icons/system';
+import { Heading, Stack } from '@kadena/kode-ui';
+import {
+  CompactTable,
+  CompactTableFormatters,
+  SideBarBreadcrumbsItem,
+} from '@kadena/kode-ui/patterns';
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { listClass, listItemClass, panelClass } from '../home/style.css';
-import { hashStyle } from './style.css';
 
 export function Transactions() {
   const { profile, activeNetwork } = useWallet();
@@ -50,10 +53,11 @@ export function Transactions() {
           Transactions
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Box className={panelClass} marginBlockStart="xs">
+
+      <Stack width="100%" flexDirection="column" gap="md">
         <Heading as="h4">Transactions</Heading>
         <TransactionList transactions={transactions} />
-      </Box>
+      </Stack>
     </>
   );
 }
@@ -84,47 +88,41 @@ export const TransactionList = ({
     [transactions],
   );
   return (
-    <>
-      <Box marginBlockStart="md">
-        {txs.length ? (
-          <ul className={listClass}>
-            {txs.map((tx) => (
-              <li key={tx.uuid}>
-                <Stack
-                  justifyContent="space-between"
-                  alignItems={'center'}
-                  className={listItemClass}
-                  gap={'lg'}
-                >
-                  <Link to={`/transaction/${tx.groupId}`}>
-                    <Text>
-                      <MonoOpenInNew />
-                    </Text>
-                  </Link>
-                  <Text>{shorten(tx.hash)}</Text>
-
-                  <Text className={hashStyle}>
-                    <span
-                      title={tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                    >
-                      {tx.type === 'exec' ? tx.code : `cont: ${tx.code}`}
-                    </span>
-                  </Text>
-
-                  <Text>{tx.status}</Text>
-
-                  <Text>
-                    {new Date(
-                      ((JSON.parse(tx.cmd) as IPactCommand).meta.creationTime ||
-                        0) * 1000,
-                    ).toLocaleString()}
-                  </Text>
-                </Stack>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </Box>
-    </>
+    <CompactTable
+      fields={[
+        {
+          label: 'Status',
+          key: 'status',
+          variant: 'code',
+          width: '10%',
+          render: CompactTableFormatters.FormatStatus(),
+        },
+        {
+          label: 'GroupId',
+          key: 'groupId',
+          variant: 'code',
+          width: '30%',
+          render: CompactTableFormatters.FormatLinkWrapper({
+            url: '/transaction/:value',
+            linkComponent: Link,
+          }),
+        },
+        {
+          label: 'Hash',
+          key: 'hash',
+          variant: 'code',
+          width: '20%',
+          render: FormatHash(),
+        },
+        {
+          label: 'Date',
+          key: 'cmd',
+          variant: 'code',
+          width: '40%',
+          render: FormatCreationDateWrapper(),
+        },
+      ]}
+      data={txs}
+    />
   );
 };
diff --git a/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx b/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx
@@ -16,7 +16,6 @@ export interface ITextProps {
   transform?: keyof typeof transformVariants;
   variant?: 'body' | 'code' | 'ui';
   ariaLabel?: HTMLAttributes<HTMLSpanElement>['aria-label'];
-  style?: HTMLAttributes<HTMLSpanElement>['style'];
   id?: HTMLAttributes<HTMLSpanElement>['id'];
 }
 
@@ -43,7 +42,6 @@ export const Text = ({
   ariaLabel,
   bold,
   id,
-  style,
 }: ITextProps) => {
   let isInheritedSize = false;
 
@@ -64,7 +62,7 @@ export const Text = ({
   const Element = as ? as : variant === 'code' ? 'code' : 'span';
 
   return (
-    <Element className={classList} aria-label={ariaLabel} id={id} style={style}>
+    <Element className={classList} aria-label={ariaLabel} id={id}>
       {children}
     </Element>
   );

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
@@ -266,3 +266,40 @@ export const FormatAmount: Story = {
     );
   },
 };
+
+export const FormatWithkeyArray: Story = {
+  name: 'Format Array Key',
+  args: {
+    isLoading: false,
+  },
+  render: ({ isLoading }) => {
+    return (
+      <MediaContextProvider>
+        <CompactTable
+          isLoading={isLoading}
+          fields={[
+            {
+              label: 'Height',
+              key: 'node.block.height',
+              width: '15%',
+            },
+            {
+              label: 'RequestKey',
+              key: 'node.requestKey',
+              width: '30%',
+              render: CompactTableFormatters.FormatLink({
+                url: `https://kadena.io`,
+              }),
+            },
+            {
+              label: 'Parameters',
+              key: ['node.parameters', 'node.balance.balance'],
+              width: '55%',
+            },
+          ]}
+          data={data}
+        />
+      </MediaContextProvider>
+    );
+  },
+};
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/FieldCell.tsx
@@ -20,7 +20,7 @@ export const FieldCell: FC<IFieldCellProps> = ({
   isMobile = false,
 }) => {
   if (
-    typeof field.key === 'string' &&
+    (typeof field.key === 'string' || typeof field.key === 'object') &&
     (typeof field.render === 'function' || !field.render)
   ) {
     const Render = field.render ? field.render : FormatDefault();