From 75ae180945ddf1d4c7ab537f4ffc40863e582487 Mon Sep 17 00:00:00 2001
From: Javad Khalilian <khalilian.javad@gmail.com>
Date: Fri, 8 Nov 2024 14:43:30 +0100
Subject: [PATCH] Feat/dw transaction account (#2653)

* fix(dx): tx list

* fix(dw): transactions
---
 .../dev-wallet/src/pages/account/account.tsx  | 154 ++++++++++--------
 .../backup-recovery-phrase.tsx                |   5 +-
 .../transaction/components/CommandView.tsx    |  23 ++-
 .../src/pages/transactions/style.css.ts       |   4 +
 .../src/pages/transactions/transactions.tsx   |  66 +++++---
 .../dev-wallet/src/utils/parsedCodeToPact.ts  |  56 +++++++
 6 files changed, 207 insertions(+), 101 deletions(-)
 create mode 100644 packages/apps/dev-wallet/src/utils/parsedCodeToPact.ts

diff --git a/packages/apps/dev-wallet/src/pages/account/account.tsx b/packages/apps/dev-wallet/src/pages/account/account.tsx
index 3447648fa1..3c574cec09 100644
--- a/packages/apps/dev-wallet/src/pages/account/account.tsx
+++ b/packages/apps/dev-wallet/src/pages/account/account.tsx
@@ -7,6 +7,7 @@ import { ConfirmDeletion } from '@/Components/ConfirmDeletion/ConfirmDeletion';
 import { FundOnTestnetButton } from '@/Components/FundOnTestnet/FundOnTestnet';
 import { usePrompt } from '@/Components/PromptProvider/Prompt';
 import { QRCode } from '@/Components/QRCode/QRCode';
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
 import {
   accountRepository,
   isWatchedAccount,
@@ -19,9 +20,10 @@ import {
   MonoCreate,
   MonoKey,
   MonoRemoveRedEye,
+  MonoWallet,
 } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
-import { useLayout } from '@kadena/kode-ui/patterns';
+import { SideBarBreadcrumbsItem, useLayout } from '@kadena/kode-ui/patterns';
 import { useMemo, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { noStyleLinkClass, panelClass } from '../home/style.css';
@@ -99,20 +101,16 @@ export function AccountPage() {
 
   return (
     <Stack flexDirection={'column'} gap={'lg'}>
+      <SideBarBreadcrumbs icon={<MonoWallet />}>
+        <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href={`/account/${accountId}`}>
+          Account ({account.alias || account.address})
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
       <AliasForm show={isRightAsideExpanded} account={account} />
       <Stack flexDirection={'column'} gap={'sm'}>
         <Stack gap={'sm'} alignItems={'center'}>
           <Heading variant="h3">{account.alias || '{ No Alias }'}</Heading>
-          {account.profileId === profile?.uuid && (
-            <Button
-              isCompact
-              variant="transparent"
-              startVisual={<MonoCreate />}
-              onPress={() => {
-                setIsRightAsideExpanded(!isRightAsideExpanded);
-              }}
-            />
-          )}
         </Stack>
 
         <Stack justifyContent={'space-between'}>
@@ -249,62 +247,86 @@ export function AccountPage() {
           )}
           {activities.length > 0 && <ActivityTable activities={activities} />}
         </TabItem>
-        {
-          (isOwnedAccount && (
-            <TabItem key="settings" title="Settings">
-              <Stack flexDirection={'column'} gap={'xxl'}>
-                <Stack
-                  flexDirection={'column'}
-                  gap={'md'}
-                  className={panelClass}
-                  alignItems={'flex-start'}
-                >
-                  <Heading variant="h4">Migrate Account</Heading>
-                  <Text>
-                    You can use account migration to transfer all balances to a
-                    newly created account with a new keyset, even though the
-                    keyset guard for this account cannot be changed.
-                  </Text>
-                  <Button variant="outlined">Migrate</Button>
-                </Stack>
-                <Stack
-                  flexDirection={'column'}
-                  gap={'md'}
-                  className={panelClass}
-                  alignItems={'flex-start'}
-                >
-                  <Heading variant="h4">Delete Account</Heading>
-                  <Text>
-                    You don't want to use this account anymore? You can delete
-                    it from your wallet. This will be deleted locally not from
-                    the blockchain.
-                  </Text>
-                  <Button
-                    variant="negative"
-                    onClick={async () => {
-                      const confirm = await prompt((resolve) => {
-                        return (
-                          <ConfirmDeletion
-                            onCancel={() => resolve(false)}
-                            onDelete={() => resolve(true)}
-                            title="Delete Account"
-                            description=" Are you sure you want to delete this account? If you need to add it again you will need to use account creation process."
-                          />
-                        );
-                      });
-                      if (confirm) {
-                        await accountRepository.deleteAccount(account.uuid);
-                        navigate('/');
-                      }
-                    }}
+
+        <TabItem key="settings" title="Settings">
+          <Stack flexDirection={'column'} gap={'xxl'}>
+            <Stack
+              flexDirection={'column'}
+              gap={'md'}
+              className={panelClass}
+              alignItems={'flex-start'}
+            >
+              <Heading variant="h4">Account Alias</Heading>
+              <Text>
+                You can set or change the alias for this account. This will help
+                you to identify this account easily.
+              </Text>
+              <Button
+                variant="outlined"
+                startVisual={<MonoCreate />}
+                onPress={() => {
+                  setIsRightAsideExpanded(!isRightAsideExpanded);
+                }}
+              >
+                Edit Alias
+              </Button>
+            </Stack>
+            {
+              (isOwnedAccount && (
+                <>
+                  <Stack
+                    flexDirection={'column'}
+                    gap={'md'}
+                    className={panelClass}
+                    alignItems={'flex-start'}
                   >
-                    Delete
-                  </Button>
-                </Stack>
-              </Stack>
-            </TabItem>
-          )) as any
-        }
+                    <Heading variant="h4">Migrate Account</Heading>
+                    <Text>
+                      You can use account migration to transfer all balances to
+                      a newly created account with a new keyset, even though the
+                      keyset guard for this account cannot be changed.
+                    </Text>
+                    <Button variant="outlined">Migrate</Button>
+                  </Stack>
+                  <Stack
+                    flexDirection={'column'}
+                    gap={'md'}
+                    className={panelClass}
+                    alignItems={'flex-start'}
+                  >
+                    <Heading variant="h4">Delete Account</Heading>
+                    <Text>
+                      You don't want to use this account anymore? You can delete
+                      it from your wallet. This will be deleted locally not from
+                      the blockchain.
+                    </Text>
+                    <Button
+                      variant="negative"
+                      onClick={async () => {
+                        const confirm = await prompt((resolve) => {
+                          return (
+                            <ConfirmDeletion
+                              onCancel={() => resolve(false)}
+                              onDelete={() => resolve(true)}
+                              title="Delete Account"
+                              description=" Are you sure you want to delete this account? If you need to add it again you will need to use account creation process."
+                            />
+                          );
+                        });
+                        if (confirm) {
+                          await accountRepository.deleteAccount(account.uuid);
+                          navigate('/');
+                        }
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </Stack>
+                </>
+              )) as any
+            }
+          </Stack>
+        </TabItem>
       </Tabs>
     </Stack>
   );
diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
index 9b0af35bda..ef8af22daf 100644
--- a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
+++ b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
@@ -4,10 +4,7 @@ import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
 import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui';
 import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { Link } from 'react-router-dom';
-<SideBarBreadcrumbs icon={<MonoDashboardCustomize />}>
-  <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
-  <SideBarBreadcrumbsItem href="/terminal">Dev Console</SideBarBreadcrumbsItem>
-</SideBarBreadcrumbs>;
+
 export function BackupRecoveryPhrase() {
   return (
     <>
diff --git a/packages/apps/dev-wallet/src/pages/transaction/components/CommandView.tsx b/packages/apps/dev-wallet/src/pages/transaction/components/CommandView.tsx
index 02228e5c92..94a9ba4761 100644
--- a/packages/apps/dev-wallet/src/pages/transaction/components/CommandView.tsx
+++ b/packages/apps/dev-wallet/src/pages/transaction/components/CommandView.tsx
@@ -1,9 +1,11 @@
 import { CopyButton } from '@/Components/CopyButton/CopyButton';
 import { ITransaction } from '@/modules/transaction/transaction.repository';
+import { shortenPactCode } from '@/utils/parsedCodeToPact';
 import { IPactCommand } from '@kadena/client';
-import { Heading, Stack, Text } from '@kadena/kode-ui';
+import { MonoTextSnippet } from '@kadena/kode-icons/system';
+import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Label, Value } from './helpers';
 import { Signers } from './Signers';
 import { cardClass, codeClass, textEllipsis } from './style.css';
@@ -19,6 +21,7 @@ export function CommandView({
     () => JSON.parse(transaction.cmd),
     [transaction.cmd],
   );
+  const [showShortenCode, setShowShortenCode] = useState(true);
   return (
     <Stack flexDirection={'column'} gap={'xl'}>
       <Stack gap={'sm'} flexDirection={'column'}>
@@ -29,8 +32,20 @@ export function CommandView({
       {'exec' in command.payload && (
         <>
           <Stack gap={'sm'} flexDirection={'column'}>
-            <Heading variant="h4">Code</Heading>
-            <Value className={codeClass}>{command.payload.exec.code}</Value>
+            <Stack gap={'sm'} justifyContent={'space-between'}>
+              <Heading variant="h4">Code</Heading>
+              <Button
+                onPress={() => setShowShortenCode(!showShortenCode)}
+                variant={'transparent'}
+                isCompact
+                startVisual={<MonoTextSnippet />}
+              />
+            </Stack>
+            <Value className={codeClass}>
+              {showShortenCode
+                ? shortenPactCode(command.payload.exec.code)
+                : command.payload.exec.code}
+            </Value>
           </Stack>
           {Object.keys(command.payload.exec.data).length > 0 && (
             <Stack gap={'sm'} flexDirection={'column'}>
diff --git a/packages/apps/dev-wallet/src/pages/transactions/style.css.ts b/packages/apps/dev-wallet/src/pages/transactions/style.css.ts
index 2d428b8da5..5cbede1973 100644
--- a/packages/apps/dev-wallet/src/pages/transactions/style.css.ts
+++ b/packages/apps/dev-wallet/src/pages/transactions/style.css.ts
@@ -6,3 +6,7 @@ export const hashStyle = style({
   whiteSpace: 'nowrap',
   flex: 1,
 });
+
+export const codeClass = style({
+  whiteSpace: 'pre-wrap',
+});
diff --git a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
index c1f1c40a8d..6a2e426a28 100644
--- a/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
+++ b/packages/apps/dev-wallet/src/pages/transactions/transactions.tsx
@@ -1,21 +1,20 @@
 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 { shortenPactCode } from '@/utils/parsedCodeToPact';
 import { IPactCommand } from '@kadena/client';
-import { MonoSwapHoriz } from '@kadena/kode-icons/system';
-import { Heading, Stack } from '@kadena/kode-ui';
-import {
-  CompactTable,
-  CompactTableFormatters,
-  SideBarBreadcrumbsItem,
-} from '@kadena/kode-ui/patterns';
+import { MonoArrowOutward, MonoSwapHoriz } from '@kadena/kode-icons/system';
+import { Heading, Stack, Text } from '@kadena/kode-ui';
+import { CompactTable, SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { noStyleLinkClass } from '../home/style.css';
+import { codeClass } from './style.css';
 
 export function Transactions() {
   const { profile, activeNetwork } = useWallet();
@@ -75,13 +74,13 @@ export const TransactionList = ({
           return {
             ...tx,
             type: 'exec',
-            code: cmd.payload.exec.code,
+            code: shortenPactCode(cmd.payload.exec.code, 4),
           };
         } else {
           return {
             ...tx,
             type: 'cont',
-            code: cmd.payload.cont.pactId,
+            code: `cont: ${cmd.payload.cont.pactId}`,
           };
         }
       }),
@@ -91,34 +90,47 @@ export const TransactionList = ({
     <CompactTable
       fields={[
         {
-          label: 'Status',
-          key: 'status',
-          variant: 'code',
-          width: '10%',
-          render: CompactTableFormatters.FormatStatus(),
+          label: 'Hash',
+          key: 'hash',
+          variant: 'body',
+          width: '15%',
+          render: ({ value }) => {
+            const tx = txs.find((tx) => tx.hash === value);
+            return (
+              <Link
+                to={`/transaction/${tx!.groupId}`}
+                className={noStyleLinkClass}
+                style={{ textDecoration: 'underline' }}
+              >
+                <Stack gap={'sm'} alignItems={'center'}>
+                  {shorten(value)} <MonoArrowOutward fontSize={16} />
+                </Stack>
+              </Link>
+            );
+          },
         },
         {
-          label: 'GroupId',
-          key: 'groupId',
+          label: 'Status',
+          key: 'status',
           variant: 'code',
-          width: '30%',
-          render: CompactTableFormatters.FormatLinkWrapper({
-            url: '/transaction/:value',
-            linkComponent: Link,
-          }),
+          width: '15%',
         },
         {
-          label: 'Hash',
-          key: 'hash',
+          label: 'Code',
+          key: 'code',
           variant: 'code',
-          width: '20%',
-          render: FormatHash(),
+          width: 'auto',
+          render: ({ value }) => (
+            <Text variant="code" className={codeClass}>
+              {value}
+            </Text>
+          ),
         },
         {
           label: 'Date',
           key: 'cmd',
           variant: 'code',
-          width: '40%',
+          width: '20%',
           render: FormatCreationDateWrapper(),
         },
       ]}
diff --git a/packages/apps/dev-wallet/src/utils/parsedCodeToPact.ts b/packages/apps/dev-wallet/src/utils/parsedCodeToPact.ts
new file mode 100644
index 0000000000..4e62a27b94
--- /dev/null
+++ b/packages/apps/dev-wallet/src/utils/parsedCodeToPact.ts
@@ -0,0 +1,56 @@
+import { PactNumber } from '@kadena/pactjs';
+import { execCodeParser, IParsedCode } from '@kadena/pactjs-generator';
+import { shorten as textShorten } from './helpers';
+
+const shorten = (str: string, length: number): string => {
+  if (str.length <= 2 * length + 5) {
+    return str;
+  }
+  return textShorten(str, length);
+};
+
+const parseArg = (arg: IParsedCode['args'][number], shortening = 6): string => {
+  if ('string' in arg) {
+    return `"${shorten(arg.string, shortening)}"`;
+  }
+  if ('int' in arg) {
+    return `${arg.int}`;
+  }
+  if ('decimal' in arg) {
+    return new PactNumber(arg.decimal).toDecimal();
+  }
+  if ('list' in arg) {
+    return `[${arg.list.map((a) => parseArg(a, shortening)).join(', ')}]`;
+  }
+  if ('object' in arg) {
+    return `{${arg.object
+      .map((a) => `${a.property}: ${parseArg(a.value, shortening)}`)
+      .join(', ')}}`;
+  }
+  if ('code' in arg) {
+    return parsedCodeToPact(arg.code, shortening);
+  }
+  return JSON.stringify(arg);
+};
+
+function parsedCodeToPact(code: IParsedCode, shortening = 6): string {
+  const namespace = code.function.namespace
+    ? shorten(code.function.namespace, shortening)
+    : '';
+  const name = code.function.name;
+  const module = code.function.module;
+  const fn = [namespace, module, name].filter(Boolean).join('.');
+  const shortenCode = `(${fn} ${code.args
+    .map((arg) => parseArg(arg, shortening))
+    .join(' ')})`;
+  return shortenCode;
+}
+
+export function shortenPactCode(code: string, shortening = 6): string {
+  const parsedCode = execCodeParser(code);
+  const codes =
+    parsedCode?.map((code) => {
+      return parsedCodeToPact(code, shortening);
+    }) ?? [];
+  return codes.join('\n');
+}