chore(devwallet): wide style layout (#2640)

kadena-community · Nov 7, 2024 · ebebe4d · ebebe4d
1 parent 36e9c53
commit ebebe4d
Show file tree

Hide file tree

Showing 33 changed files with 425 additions and 235 deletions.
diff --git a/.changeset/lazy-gorillas-raise.md b/.changeset/lazy-gorillas-raise.md
@@ -0,0 +1,2 @@
+---
+---
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/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx b/packages/apps/dev-wallet/src/Components/SideBarBreadcrumbs/SideBarBreadcrumbs.tsx
@@ -1,4 +1,5 @@
-import { IBreadcrumbsProps } from '@kadena/kode-ui';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { Badge, IBreadcrumbsProps } from '@kadena/kode-ui';
 import { SideBarBreadcrumbs as SideBarBreadcrumbsUI } from '@kadena/kode-ui/patterns';
 import React, { FC } from 'react';
 import { Link } from 'react-router-dom';
@@ -7,14 +8,19 @@ export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
   children,
   ...props
 }) => {
+  const { activeNetwork } = useWallet();
+
   return (
     <SideBarBreadcrumbsUI {...props}>
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-        return React.cloneElement(child, { ...child.props, component: Link });
-      })}
+      <>
+        <Badge size="sm" style="highContrast">{`${activeNetwork?.name}`}</Badge>
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) {
+            return null;
+          }
+          return React.cloneElement(child, { ...child.props, component: Link });
+        })}
+      </>
     </SideBarBreadcrumbsUI>
   );
 };
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,17 @@
+import { IPactCommand } from '@kadena/client';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+type IProps = Exclude<ICompactTableFormatterProps, 'value'> & {
+  value: string;
+};
+
+export const FormatCreationDateWrapper: () => FC<IProps> =
+  () =>
+  ({ 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,12 @@
+import { shorten } from '@/utils/helpers';
+import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
+import type { FC } from 'react';
+
+type IProps = Exclude<ICompactTableFormatterProps, 'value'> & {
+  value: string;
+};
+
+export const FormatHash: () => FC<IProps> =
+  () =>
+  ({ 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,26 @@
+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';
+
+export const FormatKeys =
+  () =>
+  ({ value }: ICompactTableFormatterProps) => {
+    if (typeof value === 'string') return null;
+    const keyset: string[] =
+      value.length > 1 ? (value[1] as unknown as string[]) : [];
+
+    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,7 @@
-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 { Button, Heading, Stack } from '@kadena/kode-ui';
+import { CompactTable, useLayout } from '@kadena/kode-ui/patterns';
 import { CreateKeySetForm } from './CreateKeySetForm';
 
 export function KeySets() {
@@ -17,7 +15,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 +24,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/keys/keys-page.tsx b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
@@ -17,7 +17,7 @@ export function KeysPage() {
           Manage Your Keys
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Stack flexDirection={'column'} gap={'lg'}>
+      <Stack flexDirection={'column'} gap={'lg'} width="100%">
         <Heading>Manage Your Keys</Heading>
         <Tabs defaultSelectedKey={tab}>
           <TabItem

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/apps/docs/src/docs/build/pact/intermediate/built-in-functions.md b/packages/apps/docs/src/docs/build/pact/intermediate/built-in-functions.md
@@ -32,9 +32,9 @@ TXOUT is the same as what is used for crosschain, but should not be used for "on
 
 ## Managed Capabilities
 
-Documentation for understanding capabilities can be found [here](/build/pact/advanced#capabilitiesh-1323277354).
+Documentation for understanding capabilities can be found [here](/build/pact/advanced#capabilities).
 
-The capability built-in functions can be found [here](/reference/functions/capabilities#compose-capabilityh1942343731).
+The capability built-in functions can be found [here](/reference/functions/capabilities).
 
 Before diving into managed capabilities, it is important to understand the difference between managed and unmanaged capabilities. Capabilities are never "changed" since they are only granted by `with-capability`. In addition to defining a capability, managed capabilities also define a "resource" that is decreased whenever the associated capability is granted.