feat(dw): transaction page improvement

packages/apps/dev-wallet/src/Components/AccountBalanceDistribution/AccountBalanceDistribution.tsx

@@ -45,7 +45,7 @@
       new PactNumber(overallBalance).toNumber(),
     );
     return divideChains(enrichedChains, 2);
   }, [chains]);
 
   const flatChains = useMemo(
     () =>
@@ -134,6 +134,7 @@
     );
     const [groupId] = await createRedistributionTxs({
       account: account as IRetrievedAccount,
+      gasPayer: account as IRetrievedAccount,
       gasLimit,
       gasPrice,
       network: activeNetwork!,

packages/apps/dev-wallet/src/modules/activity/activity.repository.ts

@@ -15,12 +15,12 @@ export interface TransferData {
     discoveryStatus: 'not-started' | 'in-progress' | 'done';
     transferMax?: boolean;
   }>;
-  gasPayer: string;
+  gasPayer: IRetrievedAccount;
   gasPrice: string;
   gasLimit: string;
   type: 'safeTransfer' | 'normalTransfer';
   ttl: number;
-  creationTime?: number;
+  creationTime: number;
 }
 
 export interface IActivity {

packages/apps/dev-wallet/src/pages/transaction/components/CommandView.tsx

@@ -1,14 +1,16 @@
+'use client';
 import { CopyButton } from '@/Components/CopyButton/CopyButton';
 import { ITransaction } from '@/modules/transaction/transaction.repository';
+import { useWallet } from '@/modules/wallet/wallet.hook';
 import { shorten, toISOLocalDateTime } from '@/utils/helpers';
 import { shortenPactCode } from '@/utils/parsedCodeToPact';
 import { IPactCommand } from '@kadena/client';
 import { MonoTextSnippet } from '@kadena/kode-icons/system';
-import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
+import { Button, Heading, Notification, Stack, Text } from '@kadena/kode-ui';
 import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import { Label, Value } from './helpers';
-import { Signers } from './Signers';
+import { RenderSigner } from './Signer';
 import { cardClass, codeClass, textEllipsis } from './style.css';
 
 export function CommandView({
@@ -18,16 +20,30 @@ export function CommandView({
   transaction: ITransaction;
   onSign: (sig: ITransaction['sigs']) => void;
 }) {
+  const { getPublicKeyData } = useWallet();
   const command: IPactCommand = useMemo(
     () => JSON.parse(transaction.cmd),
     [transaction.cmd],
   );
+  const signers = useMemo(
+    () =>
+      command.signers.map((signer) => {
+        const info = getPublicKeyData(signer.pubKey);
+        return {
+          ...signer,
+          info,
+        };
+      }),
+    [command, getPublicKeyData],
+  );
+
+  const externalSigners = signers.filter((signer) => !signer.info);
+  const internalSigners = signers.filter((signer) => signer.info);
   const [showShortenCode, setShowShortenCode] = useState(true);
   return (
-    <Stack flexDirection={'column'} gap={'xl'}>
+    <Stack flexDirection={'column'} gap={'lg'}>
       <Stack gap={'sm'} flexDirection={'column'}>
         <Heading variant="h4">hash (request-key)</Heading>
-
         <Value className={codeClass}>{transaction.hash}</Value>
       </Stack>
       {'exec' in command.payload && (
@@ -154,11 +170,65 @@ export function CommandView({
           </Stack>
         </Stack>
       </Stack>
-      <Signers
-        transaction={transaction}
-        transactionStatus={transaction.status}
-        onSign={onSign}
-      />
+      <Stack flexDirection={'column'} gap={'xxl'}>
+        <Stack
+          title="Your Signatures"
+          key={'your-signatures'}
+          flexDirection={'column'}
+          gap={'sm'}
+        >
+          <Heading variant="h4">Your Signatures</Heading>
+          {internalSigners.length === 0 && (
+            <Notification intent="info" role="status">
+              Nothing to sign by you
+            </Notification>
+          )}
+          {internalSigners.map((signer) => {
+            return (
+              <Stack
+                gap={'sm'}
+                flexDirection={'column'}
+                className={cardClass}
+                key={signer.pubKey}
+              >
+                <RenderSigner
+                  transaction={transaction}
+                  signer={signer}
+                  transactionStatus={transaction.status}
+                  onSign={onSign}
+                />
+              </Stack>
+            );
+          })}
+        </Stack>
+        {externalSigners.length > 0 && (
+          <Stack
+            title="External Signers"
+            key={'external-signatures'}
+            flexDirection={'column'}
+            gap={'sm'}
+          >
+            <Heading variant="h4">External Signers</Heading>
+            {externalSigners.map((signer) => {
+              return (
+                <Stack
+                  gap={'sm'}
+                  flexDirection={'column'}
+                  className={cardClass}
+                  key={signer.pubKey}
+                >
+                  <RenderSigner
+                    transaction={transaction}
+                    signer={signer}
+                    transactionStatus={transaction.status}
+                    onSign={onSign}
+                  />
+                </Stack>
+              );
+            })}
+          </Stack>
+        )}
+      </Stack>
     </Stack>
   );
 }

packages/apps/dev-wallet/src/pages/transaction/components/ExpandedTransaction.tsx

@@ -14,7 +14,7 @@ import {
 } from '@kadena/kode-ui';
 import yaml from 'js-yaml';
 
-import { codeClass } from './style.css.ts';
+import { codeClass, txDetailsClass, txExpandedWrapper } from './style.css.ts';
 
 import { CopyButton } from '@/Components/CopyButton/CopyButton.tsx';
 import { ITransaction } from '@/modules/transaction/transaction.repository.ts';
@@ -29,6 +29,7 @@ import {
   MonoMoreVert,
   MonoShare,
 } from '@kadena/kode-icons/system';
+import classNames from 'classnames';
 import { useState } from 'react';
 import { CommandView } from './CommandView.tsx';
 import { statusPassed, TxPipeLine } from './TxPipeLine.tsx';
@@ -92,12 +93,11 @@ export function ExpandedTransaction({
         </Stack>
       </Title>
       <Content>
-        <Stack gap={'lg'} width="100%">
+        <Stack gap={'lg'} width="100%" className={txExpandedWrapper}>
           <Stack
             gap={'lg'}
             flexDirection={'column'}
             style={{
-              flexBasis: '260px',
               minWidth: '260px',
             }}
             className={panelClass}
@@ -118,10 +118,7 @@ export function ExpandedTransaction({
             flex={1}
             gap={'xxl'}
             flexDirection={'column'}
-            className={panelClass}
-            style={{
-              maxWidth: 'calc(100% - 285px)',
-            }}
+            className={classNames(panelClass, txDetailsClass)}
           >
             {statusPassed(transaction.status, 'success') &&
               (!transaction.continuation?.autoContinue ||