From b673487cd04156fa630790abf16ed32b20097ba1 Mon Sep 17 00:00:00 2001
From: Albert G <516972+alber70g@users.noreply.github.com>
Date: Thu, 19 Dec 2024 16:12:57 +0100
Subject: [PATCH] feat(cw3): adds bulk sigdata

---
 packages/apps/dev-wallet/src/App/routes.tsx   |   5 +
 .../Components/UnlockPrompt/UnlockPrompt.tsx  |   1 +
 .../signature-builder/signature-builder.tsx   | 193 +++++++-
 .../transaction-group/TransactionGroup.tsx    |  80 ++++
 .../components/CommandView.tsx                | 233 ++++++++++
 .../components/ExpandedTransaction.tsx        | 309 +++++++++++++
 .../transaction-group/components/Signer.tsx   | 221 +++++++++
 .../components/SubmittedStatus.tsx            |  93 ++++
 .../components/TxContainer.tsx                | 203 +++++++++
 .../transaction-group/components/TxList.tsx   | 228 ++++++++++
 .../components/TxMinimized.tsx                |  58 +++
 .../components/TxPipeLine.tsx                 | 426 ++++++++++++++++++
 .../transaction-group/components/TxTile.tsx   | 195 ++++++++
 .../components/TxTileGeneric.tsx              | 129 ++++++
 .../transaction-group/components/helpers.tsx  |  23 +
 .../transaction-group/components/style.css.ts | 139 ++++++
 .../src/pages/transaction-group/style.css.ts  |  18 +
 .../pages/unlock-profile/unlock-profile.tsx   |   1 +
 .../src/utils/transaction-scheme.ts           |   3 +-
 19 files changed, 2541 insertions(+), 17 deletions(-)
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/TransactionGroup.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/CommandView.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/ExpandedTransaction.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/Signer.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/SubmittedStatus.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/TxContainer.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/TxList.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/TxMinimized.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/TxPipeLine.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/TxTile.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/TxTileGeneric.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/helpers.tsx
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/components/style.css.ts
 create mode 100644 packages/apps/dev-wallet/src/pages/transaction-group/style.css.ts

diff --git a/packages/apps/dev-wallet/src/App/routes.tsx b/packages/apps/dev-wallet/src/App/routes.tsx
index 529b002d1b..93a22926c3 100644
--- a/packages/apps/dev-wallet/src/App/routes.tsx
+++ b/packages/apps/dev-wallet/src/App/routes.tsx
@@ -29,6 +29,7 @@ import { ImportData } from '@/pages/settings/import-data/import-data';
 import { RevealPhrase } from '@/pages/settings/reveal-phrase/reveal-phrase';
 import { Settings } from '@/pages/settings/settings';
 import { SignatureBuilder } from '@/pages/signature-builder/signature-builder';
+import { TransactionGroupPage } from '@/pages/transaction-group/TransactionGroup';
 import { TransactionPage } from '@/pages/transaction/Transaction';
 import { Transactions } from '@/pages/transactions/transactions';
 import { Transfer } from '@/pages/transfer/transfer';
@@ -120,6 +121,10 @@ export const Routes: FC = () => {
             <Route path="/key-management/:tab" element={<KeysPage />} />
             <Route path="/create-account" element={<CreateAccount />} />
             <Route path="/transaction/:groupId" element={<TransactionPage />} />
+            <Route
+              path="/transaction-group/:groupId"
+              element={<TransactionGroupPage />}
+            />
             <Route path="/transactions" element={<Transactions />} />
             <Route path="/keyset/:keysetId" element={<Keyset />} />
             <Route path="/fungible/:contract" element={<FungiblePage />} />
diff --git a/packages/apps/dev-wallet/src/Components/UnlockPrompt/UnlockPrompt.tsx b/packages/apps/dev-wallet/src/Components/UnlockPrompt/UnlockPrompt.tsx
index 8de06df638..744af6cf8e 100644
--- a/packages/apps/dev-wallet/src/Components/UnlockPrompt/UnlockPrompt.tsx
+++ b/packages/apps/dev-wallet/src/Components/UnlockPrompt/UnlockPrompt.tsx
@@ -74,6 +74,7 @@ export const UnlockPrompt: React.FC<{
               type="password"
               {...register('password')}
               label="Password"
+              autoFocus
             />
           )}
           {storePassword && (
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
index a2c0c0958b..4211ac7404 100644
--- a/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
+++ b/packages/apps/dev-wallet/src/pages/signature-builder/signature-builder.tsx
@@ -8,10 +8,14 @@ import {
 } from '@kadena/client';
 
 import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
-import { transactionRepository } from '@/modules/transaction/transaction.repository';
+import {
+  ITransaction,
+  transactionRepository,
+} from '@/modules/transaction/transaction.repository';
 import * as transactionService from '@/modules/transaction/transaction.service';
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { normalizeTx } from '@/utils/normalizeSigs';
+import { browse, readContent } from '@/utils/select-file';
 import {
   determineSchema,
   RequestScheme,
@@ -19,7 +23,13 @@ import {
 } from '@/utils/transaction-scheme';
 import { usePatchedNavigate } from '@/utils/usePatchedNavigate';
 import { base64UrlDecodeArr } from '@kadena/cryptography-utils';
-import { MonoDashboardCustomize } from '@kadena/kode-icons/system';
+import {
+  MonoDashboardCustomize,
+  MonoRemove,
+  MonoRemoveCircleOutline,
+  MonoRestoreFromTrash,
+  MonoSignature,
+} from '@kadena/kode-icons/system';
 import {
   Box,
   Button,
@@ -32,8 +42,9 @@ import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
 import { execCodeParser } from '@kadena/pactjs-generator';
 import classNames from 'classnames';
 import yaml from 'js-yaml';
-import { useEffect, useMemo, useState } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { TxTileGeneric } from '../transaction-group/components/TxTileGeneric';
 import { codeArea } from './style.css';
 
 const getTxFromUrlHash = () =>
@@ -45,12 +56,18 @@ export function SignatureBuilder() {
   const [error, setError] = useState<string>();
   const [schema, setSchema] = useState<RequestScheme>();
   const [input, setInput] = useState<string>('');
+  const [fileContent, setFileContent] = useState<any>();
   const [pactCommand, setPactCommand] = useState<IPartialPactCommand>();
   const [unsignedTx, setUnsignedTx] = useState<IUnsignedCommand>();
   const [signed, setSignedTx] = useState<IUnsignedCommand>();
   const [capsWithoutSigners, setCapsWithoutSigners] = useState<
     ISigningRequest['caps']
   >([]);
+  const [groupId] = useState<string>(crypto.randomUUID());
+  const [transactions, setTransactions] = useState<ITransaction[]>([]);
+  const [existingTransactions, setExistingTransactions] = useState<
+    ITransaction[]
+  >([]);
   const { profile, activeNetwork, networks, setActiveNetwork } = useWallet();
   const navigate = usePatchedNavigate();
 
@@ -75,11 +92,27 @@ export function SignatureBuilder() {
     if (urlTransaction) {
       const data = new TextDecoder().decode(base64UrlDecodeArr(urlTransaction));
       setInput(data);
-      processSig(data);
+      processSigData(data);
+      addTransactionToGroup(groupId);
     }
   }, [urlTransaction]);
 
-  function processSig(inputData: string) {
+  useEffect(() => {
+    async function addTransaction() {
+      if (unsignedTx && profile) {
+        await addTransactionToGroup(groupId);
+        setTransactions(
+          await transactionRepository.getTransactionsByGroup(
+            groupId,
+            profile.uuid,
+          ),
+        );
+      }
+    }
+    addTransaction();
+  }, [unsignedTx]);
+
+  function processSigData(inputData: string) {
     setInput(inputData);
     let schema = determineSchema(inputData);
     if (schema === 'base64') {
@@ -121,10 +154,36 @@ export function SignatureBuilder() {
     setSchema(schema);
   }
 
-  const reviewTransaction = async () => {
+  const removeTransactionToAdd = async (tx: ITransaction) => {
+    if (!profile) return;
+
+    // remove transaction from existingTransactions
+    if (
+      existingTransactions.find((item) => item.uuid === tx.uuid) !== undefined
+    ) {
+      setExistingTransactions((prev) =>
+        prev.filter((item) => item.uuid !== tx.uuid),
+      );
+    }
+
+    // remove transaction from group
+    if (transactions.find((item) => item.uuid === tx.uuid) !== undefined) {
+      await transactionRepository.deleteTransaction(tx.uuid);
+      setTransactions(
+        await transactionRepository.getTransactionsByGroup(
+          groupId,
+          profile.uuid,
+        ),
+      );
+    }
+  };
+
+  const addTransactionToGroup = async (groupId: string) => {
     if (!unsignedTx || !profile || !activeNetwork) return;
+
     const command: IPactCommand = JSON.parse(unsignedTx.cmd);
     let networkUUID = activeNetwork.uuid;
+
     if (command.networkId && activeNetwork.networkId !== command.networkId) {
       const network = networks.filter(
         ({ networkId }) => networkId === command.networkId,
@@ -132,7 +191,7 @@ export function SignatureBuilder() {
       if (network.length === 0) {
         setError(
           command.networkId === 'mainnet01'
-            ? 'MANNET_IS_DISABLED: Mainnet is disabled since the wallet is not fully tested; you can try other networks'
+            ? 'MAINNET_IS_DISABLED: Mainnet is disabled since the wallet is not fully tested; you can try other networks'
             : 'NETWORK_NOT_FOUND: This network is not found',
         );
         throw new Error('Network not found');
@@ -144,7 +203,6 @@ export function SignatureBuilder() {
       // switch network
       setActiveNetwork(network[0]);
     }
-    const groupId = crypto.randomUUID();
 
     // check if transaction already exists
     const tx = await transactionRepository.getTransactionByHashNetworkProfile(
@@ -162,12 +220,23 @@ export function SignatureBuilder() {
             pubKey?: string;
           }>),
         );
+
         await transactionRepository.updateTransaction({
           ...tx,
           sigs: updatedTx.sigs,
         });
+
+        if (
+          existingTransactions.find((item) => item.uuid === tx.uuid) ===
+          undefined
+        ) {
+          setExistingTransactions((prev) => [...prev, tx]);
+        }
       }
-      navigate(`/transaction/${tx.groupId}`);
+      setPactCommand(undefined);
+      setUnsignedTx(undefined);
+      setCapsWithoutSigners([]);
+      setInput('');
       return;
     }
 
@@ -177,7 +246,15 @@ export function SignatureBuilder() {
       networkUUID: networkUUID,
       groupId,
     });
-    navigate(`/transaction/${groupId}`);
+
+    setPactCommand(undefined);
+    setUnsignedTx(undefined);
+    setCapsWithoutSigners([]);
+    setInput('');
+  };
+
+  const reviewTransaction = () => {
+    navigate(`/transaction-group/${groupId}`);
   };
 
   return (
@@ -189,17 +266,20 @@ export function SignatureBuilder() {
       </SideBarBreadcrumbs>
 
       <Stack flexDirection={'column'} gap={'md'} width="100%">
-        <Heading as="h4">Paste SigData, CommandSigData, or Payload</Heading>
+        <Heading as="h4">
+          Paste or Upload SigData, CommandSigData, or Payload
+        </Heading>
         <textarea
           value={input}
           className={classNames(codeArea)}
           onChange={(e) => {
             e.preventDefault();
             setError(undefined);
-            processSig(e.target.value);
+            processSigData(e.target.value);
           }}
         />
-        <Box>{schema && <Text>{`Schema: ${schema}`}</Text>}</Box>
+
+        <Box>{schema && <Text>{`Schema: ${schema}`}</Text>} </Box>
         {schema === 'signingRequest' && (
           <Notification intent="info" role="status">
             SigningRequest is not supported yet, We are working on it.
@@ -210,13 +290,94 @@ export function SignatureBuilder() {
             {error}
           </Notification>
         )}
+
+        {/* <Box>
+          <Button
+            variant="outlined"
+            onClick={async () => {
+              setError(undefined);
+              setFileContent(undefined);
+              const file = await browse(true);
+              if (file && file instanceof File) {
+                const content = await readContent(file);
+                try {
+                  const json = JSON.parse(content, (_key, value) => {
+                    if (typeof value !== 'string') return value;
+                    if (value.startsWith('Uint8Array:')) {
+                      const base64Url = value.split('Uint8Array:')[1];
+                      return base64UrlDecodeArr(base64Url);
+                    }
+                    if (value.startsWith('ArrayBuffer:')) {
+                      const base64Url = value.split('ArrayBuffer:')[1];
+                      return base64UrlDecodeArr(base64Url).buffer;
+                    }
+                    return value;
+                  });
+                  setFileContent(json);
+                } catch (e) {
+                  setError('Invalid file format');
+                }
+              }
+            }}
+          >
+            Add From File(s)
+          </Button>
+        </Box> */}
+
+        <Box>
+          {transactions.length > 0 && (
+            <>
+              <Text>Transactions to review</Text>
+              {transactions.map((tx) => (
+                <TxTileGeneric
+                  tx={tx}
+                  buttons={[
+                    {
+                      label: 'Discard',
+                      Icon: () => <MonoRemoveCircleOutline />,
+                      onClick: () => removeTransactionToAdd(tx),
+                      position: 'flex-start',
+                    },
+                  ]}
+                />
+              ))}
+            </>
+          )}
+        </Box>
+
         <Box>
           <Box>
-            {['PactCommand', 'quickSignRequest'].includes(schema!) && (
-              <Button onPress={reviewTransaction}>Review Transaction</Button>
-            )}
+            {transactions.length > 0 &&
+              ['PactCommand', 'quickSignRequest'].includes(schema!) && (
+                <Button onPress={reviewTransaction}>
+                  Review Transaction(s)
+                </Button>
+              )}
           </Box>
         </Box>
+
+        <Box>
+          {existingTransactions.length > 0 &&
+            existingTransactions.map((tx) => (
+              <TxTileGeneric
+                tx={tx}
+                buttons={[
+                  {
+                    label: 'Discard',
+                    Icon: () => <MonoRemoveCircleOutline />,
+                    onClick: () => removeTransactionToAdd(tx),
+                    position: 'flex-start',
+                  },
+                  {
+                    label: 'Open',
+                    onClick: () => navigate(`/transaction-group/${tx.groupId}`),
+                    Icon: () => <MonoSignature />,
+                    position: 'flex-end',
+                  },
+                ]}
+              />
+            ))}
+        </Box>
       </Stack>
     </>
   );
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/TransactionGroup.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/TransactionGroup.tsx
new file mode 100644
index 0000000000..ed564d39f3
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/TransactionGroup.tsx
@@ -0,0 +1,80 @@
+import {
+  ITransaction,
+  transactionRepository,
+} from '@/modules/transaction/transaction.repository';
+
+import { SideBarBreadcrumbs } from '@/Components/SideBarBreadcrumbs/SideBarBreadcrumbs';
+import { useRequests } from '@/modules/communication/communication.provider';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { usePatchedNavigate } from '@/utils/usePatchedNavigate';
+import { MonoSwapHoriz } from '@kadena/kode-icons/system';
+import { Heading, Stack, Text } from '@kadena/kode-ui';
+import { SideBarBreadcrumbsItem } from '@kadena/kode-ui/patterns';
+import { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { TxList } from './components/TxList';
+
+export const TransactionGroupPage = () => {
+  const navigate = usePatchedNavigate();
+  const { groupId } = useParams();
+  const { profile } = useWallet();
+  const [searchParam] = useSearchParams();
+  const requestId = searchParam.get('request');
+  const requests = useRequests();
+  const [txs = [], setTxList] = useState<ITransaction[]>();
+
+  useEffect(() => {
+    const run = async () => {
+      if (profile?.uuid && groupId) {
+        const list = await transactionRepository.getTransactionsByGroup(
+          groupId,
+          profile.uuid,
+        );
+        if (!list || list.length === 0) {
+          navigate('/transactions');
+        }
+        setTxList(list);
+      }
+    };
+    run();
+  }, [groupId, navigate, profile?.uuid]);
+
+  return (
+    <>
+      <SideBarBreadcrumbs icon={<MonoSwapHoriz />}>
+        <SideBarBreadcrumbsItem href={`/transactions`}>
+          Transactions
+        </SideBarBreadcrumbsItem>
+        <SideBarBreadcrumbsItem href={`/transactions/${groupId}`}>
+          Transaction Group
+        </SideBarBreadcrumbsItem>
+      </SideBarBreadcrumbs>
+
+      <Stack flexDirection={'column'} gap={'lg'} overflow="auto">
+        <Stack flexDirection={'column'} gap={'sm'}>
+          <Heading>Transactions</Heading>
+          {txs.length === 0 && <Text>No transactions</Text>}
+          {txs.length >= 2 && (
+            <Text>This is a group of {txs.length} Transactions</Text>
+          )}
+        </Stack>
+        <TxList
+          onDone={() => {
+            console.log('done');
+          }}
+          txIds={txs.map((tx) => tx.uuid)}
+          showExpanded={txs.length === 1}
+          onSign={(tx) => {
+            if (requestId) {
+              const request = requests.get(requestId);
+              if (request) {
+                console.log('resolving request', request);
+                request.resolve({ status: 'signed', transaction: tx });
+              }
+            }
+          }}
+        />
+      </Stack>
+    </>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/CommandView.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/CommandView.tsx
new file mode 100644
index 0000000000..eb718f806b
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/CommandView.tsx
@@ -0,0 +1,233 @@
+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, Notification, Stack, Text } from '@kadena/kode-ui';
+import classNames from 'classnames';
+import { useMemo, useState } from 'react';
+import { Label, Value } from './helpers';
+import { RenderSigner } from './Signer';
+import { cardClass, codeClass, textEllipsis } from './style.css';
+
+export function CommandView({
+  transaction,
+  onSign,
+}: {
+  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={'lg'}>
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h4">hash (request-key)</Heading>
+        <Value className={codeClass}>{transaction.hash}</Value>
+      </Stack>
+      {'exec' in command.payload && (
+        <>
+          <Stack gap={'sm'} flexDirection={'column'}>
+            <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 ? (
+                <pre
+                  style={{
+                    fontFamily: 'inherit',
+                  }}
+                >
+                  {shortenPactCode(command.payload.exec.code)}
+                </pre>
+              ) : (
+                command.payload.exec.code
+              )}
+            </Value>
+          </Stack>
+          {Object.keys(command.payload.exec.data).length > 0 && (
+            <Stack gap={'sm'} flexDirection={'column'}>
+              <Heading variant="h4">Data</Heading>
+              <pre className={codeClass}>
+                {JSON.stringify(command.payload.exec.data, null, 2)}
+              </pre>
+            </Stack>
+          )}
+        </>
+      )}
+      {'cont' in command.payload && (
+        <>
+          <Stack gap={'sm'} flexDirection={'column'}>
+            <Heading variant="h4">Continuation</Heading>
+            <Value>
+              {command.payload.cont.pactId}- step(
+              {command.payload.cont.step})
+            </Value>
+          </Stack>
+          {Object.keys(command.payload.cont.data || {}).length > 0 && (
+            <Stack gap={'sm'} flexDirection={'column'}>
+              <Heading variant="h4">Data</Heading>
+              <pre className={codeClass}>
+                {JSON.stringify(command.payload.cont.data, null, 2)}
+              </pre>
+            </Stack>
+          )}
+          {command.payload.cont.proof && (
+            <Stack gap={'sm'} flexDirection={'column'}>
+              <Stack justifyContent={'space-between'}>
+                <Heading variant="h4">Proof</Heading>
+                <CopyButton data={command.payload.cont.proof} />
+              </Stack>
+              <Text
+                variant="code"
+                className={classNames(codeClass, textEllipsis)}
+              >
+                {shorten(command.payload.cont.proof, 40)}
+              </Text>
+            </Stack>
+          )}
+        </>
+      )}
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h4">Transaction Metadata</Heading>
+        <Stack flexDirection={'column'} className={cardClass}>
+          <Stack gap={'sm'}>
+            <Label>Network</Label>
+            <Value>{command.networkId}</Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>Chain</Label>
+            <Value>{command.meta.chainId}</Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>Creation time</Label>
+            <Value>
+              {command.meta.creationTime} (
+              {toISOLocalDateTime(command.meta.creationTime! * 1000)})
+            </Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>TTL</Label>
+            <Value>
+              {command.meta.ttl} (
+              {toISOLocalDateTime(
+                (command.meta.ttl! + command.meta.creationTime!) * 1000,
+              )}
+              )
+            </Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>Nonce</Label>
+            <Value>{command.nonce}</Value>
+          </Stack>
+        </Stack>
+      </Stack>
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h4">Gas Info</Heading>
+        <Stack flexDirection={'column'} className={cardClass}>
+          <Stack gap={'sm'}>
+            <Label>Gas Payer</Label>
+            <Value>{command.meta.sender}</Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>Gas Price</Label>
+            <Value>{command.meta.gasPrice}</Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>Gas Limit</Label>
+            <Value>{command.meta.gasLimit}</Value>
+          </Stack>
+          <Stack gap={'sm'}>
+            <Label>Max Gas Cost</Label>
+            <Value>{command.meta.gasLimit! * command.meta.gasPrice!} KDA</Value>
+          </Stack>
+        </Stack>
+      </Stack>
+      <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>
+  );
+}
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/ExpandedTransaction.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/ExpandedTransaction.tsx
new file mode 100644
index 0000000000..4c814693dd
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/ExpandedTransaction.tsx
@@ -0,0 +1,309 @@
+import { ICommand, IUnsignedCommand } from '@kadena/client';
+import {
+  Button,
+  ContextMenu,
+  ContextMenuItem,
+  DialogContent,
+  DialogHeader,
+  Heading,
+  Notification,
+  Stack,
+  TabItem,
+  Tabs,
+  Tooltip,
+} from '@kadena/kode-ui';
+import yaml from 'js-yaml';
+
+import { codeClass, txDetailsClass, txExpandedWrapper } from './style.css.ts';
+
+import { CopyButton } from '@/Components/CopyButton/CopyButton.tsx';
+import { ITransaction } from '@/modules/transaction/transaction.repository.ts';
+import { useWallet } from '@/modules/wallet/wallet.hook.tsx';
+import { panelClass } from '@/pages/home/style.css.ts';
+
+import { shorten } from '@/utils/helpers.ts';
+import { normalizeTx } from '@/utils/normalizeSigs.ts';
+import { base64UrlEncodeArr } from '@kadena/cryptography-utils';
+import {
+  MonoContentCopy,
+  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';
+
+export function ExpandedTransaction({
+  transaction,
+  contTx,
+  onSign,
+  sendDisabled,
+  onSubmit,
+  showTitle,
+  isDialog,
+  onPreflight,
+}: {
+  transaction: ITransaction;
+  contTx?: ITransaction;
+  onSign: (sig: ITransaction['sigs']) => void;
+  onSubmit: (skipPreflight?: boolean) => Promise<ITransaction>;
+  onPreflight: () => Promise<ITransaction>;
+  sendDisabled?: boolean;
+  showTitle?: boolean;
+  isDialog?: boolean;
+}) {
+  const { sign } = useWallet();
+  const [showShareTooltip, setShowShareTooltip] = useState(false);
+
+  const copyTransactionAs =
+    (format: 'json' | 'yaml', legacySig = false) =>
+    () => {
+      const tx = {
+        hash: transaction.hash,
+        cmd: transaction.cmd,
+        sigs: transaction.sigs,
+      };
+      const transactionData = legacySig ? normalizeTx(tx) : tx;
+
+      let formattedData: string;
+      if (format === 'json') {
+        formattedData = JSON.stringify(transactionData, null, 2);
+      } else {
+        formattedData = yaml.dump(transactionData);
+      }
+
+      navigator.clipboard.writeText(formattedData);
+    };
+
+  const signAll = async () => {
+    const signedTx = (await sign(transaction)) as IUnsignedCommand | ICommand;
+    onSign(signedTx.sigs);
+  };
+  const txCommand = {
+    hash: transaction.hash,
+    cmd: transaction.cmd,
+    sigs: transaction.sigs,
+  };
+  const Title = isDialog ? DialogHeader : Stack;
+  const Content = isDialog ? DialogContent : Stack;
+  return (
+    <>
+      <Title>
+        <Stack justifyContent={'space-between'}>
+          {showTitle && <Heading>View Transaction</Heading>}
+        </Stack>
+      </Title>
+      <Content>
+        <Stack gap={'lg'} width="100%" className={txExpandedWrapper}>
+          <Stack
+            gap={'lg'}
+            flexDirection={'column'}
+            style={{
+              minWidth: '260px',
+            }}
+            className={panelClass}
+          >
+            <Stack justifyContent={'space-between'} alignItems={'center'}>
+              <Heading variant="h6">Tx Status</Heading>
+            </Stack>
+            <TxPipeLine
+              tx={transaction}
+              contTx={contTx}
+              variant={'expanded'}
+              signAll={signAll}
+              onSubmit={onSubmit}
+              onPreflight={onPreflight}
+              sendDisabled={sendDisabled}
+            />
+          </Stack>
+          <Stack
+            flex={1}
+            gap={'xxl'}
+            flexDirection={'column'}
+            className={classNames(panelClass, txDetailsClass)}
+          >
+            {statusPassed(transaction.status, 'success') &&
+              (!transaction.continuation?.autoContinue ||
+                (contTx && statusPassed(contTx.status, 'success'))) && (
+                <Stack>
+                  <Notification intent="positive" role="status">
+                    Transaction is successful
+                  </Notification>
+                </Stack>
+              )}
+            {transaction.status === 'failure' &&
+              (!transaction.continuation?.autoContinue ||
+                (contTx && contTx.status === 'failure')) && (
+                <Stack>
+                  <Notification intent="negative" role="status">
+                    Transaction is failed
+                  </Notification>
+                </Stack>
+              )}
+            <Tabs isContained>
+              <TabItem title="Command Details">
+                <Stack gap={'sm'} flexDirection={'column'}>
+                  <Stack justifyContent={'space-between'}>
+                    <Heading variant="h4">Command Details</Heading>
+                    <Stack gap={'sm'}>
+                      <Tooltip
+                        content="The transaction url is copied to to the clipboard."
+                        position="left"
+                        isOpen={showShareTooltip}
+                      >
+                        <Button
+                          startVisual={<MonoShare />}
+                          variant="transparent"
+                          onClick={() => {
+                            const encodedTx = base64UrlEncodeArr(
+                              new TextEncoder().encode(
+                                JSON.stringify({
+                                  hash: txCommand.hash,
+                                  cmd: txCommand.cmd,
+                                  sigs: txCommand.sigs,
+                                }),
+                              ),
+                            );
+                            const baseUrl = `${window.location.protocol}//${window.location.host}`;
+                            navigator.clipboard.writeText(
+                              `${baseUrl}/sig-builder#${encodedTx}`,
+                            );
+                            setShowShareTooltip(true);
+                            setTimeout(() => setShowShareTooltip(false), 5000);
+                          }}
+                          isCompact
+                        />
+                      </Tooltip>
+                      <CopyButton data={txCommand} />
+                      <ContextMenu
+                        placement="bottom end"
+                        trigger={
+                          <Button
+                            endVisual={<MonoMoreVert />}
+                            variant="transparent"
+                            isCompact
+                          />
+                        }
+                      >
+                        <ContextMenuItem
+                          label="JSON"
+                          endVisual={<MonoContentCopy />}
+                          onClick={copyTransactionAs('json')}
+                        />
+                        <ContextMenuItem
+                          label="YAML"
+                          endVisual={<MonoContentCopy />}
+                          onClick={copyTransactionAs('yaml')}
+                        />
+                        <ContextMenuItem
+                          label="JSON Legacy (v2)"
+                          endVisual={<MonoContentCopy />}
+                          onClick={copyTransactionAs('json', true)}
+                        />
+                        <ContextMenuItem
+                          label="YAML Legacy (v2)"
+                          endVisual={<MonoContentCopy />}
+                          onClick={copyTransactionAs('yaml', true)}
+                        />
+                      </ContextMenu>
+                    </Stack>
+                  </Stack>
+                  <CommandView transaction={transaction} onSign={onSign} />
+                </Stack>
+              </TabItem>
+
+              {transaction.preflight &&
+                ((
+                  <TabItem title="Preflight Result">
+                    <JsonView
+                      title="Preflight Result"
+                      data={transaction.preflight}
+                    />
+                  </TabItem>
+                ) as any)}
+
+              {transaction.request && (
+                <TabItem title="Request">
+                  <JsonView title="Request" data={transaction.request} />
+                </TabItem>
+              )}
+              {'result' in transaction && transaction.result && (
+                <TabItem title="Result">
+                  <JsonView title="Result" data={transaction.result} />
+                </TabItem>
+              )}
+              {transaction.continuation?.proof && (
+                <TabItem title="SPV Proof">
+                  <JsonView
+                    title="Result"
+                    data={transaction.continuation?.proof}
+                    shortening={40}
+                  />
+                </TabItem>
+              )}
+              {contTx && [
+                <TabItem title="cont: Command Details">
+                  <Stack gap={'sm'} flexDirection={'column'}>
+                    <Heading variant="h4">Command Details</Heading>
+                    <CommandView transaction={contTx} onSign={onSign} />
+                  </Stack>
+                </TabItem>,
+                contTx.preflight && (
+                  <TabItem title="cont: Preflight Result">
+                    <JsonView
+                      title="Continuation Preflight Result"
+                      data={contTx.preflight}
+                    />
+                  </TabItem>
+                ),
+                contTx.request && (
+                  <TabItem title="cont: Request">
+                    <JsonView
+                      title="Continuation Request"
+                      data={contTx.request}
+                    />
+                  </TabItem>
+                ),
+                'result' in contTx && contTx.result && (
+                  <TabItem title="cont: Result">
+                    <JsonView
+                      title="Continuation Result"
+                      data={contTx.result}
+                    />
+                  </TabItem>
+                ),
+              ]}
+            </Tabs>
+          </Stack>
+        </Stack>
+      </Content>
+    </>
+  );
+}
+
+const JsonView = ({
+  title,
+  data,
+  shortening = 0,
+}: {
+  title: string;
+  data: any;
+  shortening?: number;
+}) => (
+  <Stack gap={'sm'} flexDirection={'column'}>
+    <Stack gap={'sm'} flexDirection={'column'}>
+      <Stack justifyContent={'space-between'}>
+        <Heading variant="h4">{title}</Heading>
+        <CopyButton data={data} />
+      </Stack>
+      <pre className={codeClass}>
+        {data && typeof data === 'object'
+          ? JSON.stringify(data, null, 2)
+          : shortening
+            ? shorten(data, shortening)
+            : data}
+      </pre>
+    </Stack>
+  </Stack>
+);
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/Signer.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/Signer.tsx
new file mode 100644
index 0000000000..fc0de27885
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/Signer.tsx
@@ -0,0 +1,221 @@
+import {
+  addSignatures,
+  IPactCommand,
+  IUnsignedCommand,
+  parseAsPactValue,
+} from '@kadena/client';
+import { Button, Heading, Stack, Text, TextareaField } from '@kadena/kode-ui';
+import { FC, PropsWithChildren } from 'react';
+import {
+  breakAllClass,
+  codeClass,
+  readyToSignClass,
+  signedClass,
+  tagClass,
+} from './style.css.ts';
+
+import { ITransaction } from '@/modules/transaction/transaction.repository.ts';
+import { useWallet } from '@/modules/wallet/wallet.hook.tsx';
+import { normalizeSigs } from '@/utils/normalizeSigs.ts';
+import { MonoContentCopy, MonoDelete } from '@kadena/kode-icons/system';
+import classNames from 'classnames';
+
+import yaml from 'js-yaml';
+import { statusPassed } from './TxPipeLine.tsx';
+
+const Value: FC<PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => (
+  <Text bold variant="code" className={className}>
+    {children}
+  </Text>
+);
+
+export const RenderSigner = ({
+  transaction,
+  signer,
+  transactionStatus,
+  onSign,
+}: {
+  transaction: IUnsignedCommand;
+  signer: IPactCommand['signers'][number];
+  transactionStatus: ITransaction['status'];
+  onSign: (sig: ITransaction['sigs']) => void;
+}) => {
+  const { getPublicKeyData, sign } = useWallet();
+  const signature = transaction.sigs.find(
+    (sig) => sig?.pubKey === signer.pubKey && sig.sig,
+  )?.sig;
+  const info = getPublicKeyData(signer.pubKey);
+  return (
+    <>
+      <Stack gap={'sm'}>
+        <Heading variant="h5">Public Key</Heading>
+        {signature && <Text className={signedClass}>Signed</Text>}
+        {!signature && info && <Text className={readyToSignClass}>Owned</Text>}
+        {<Text className={tagClass}>{info?.source ?? 'External'}</Text>}
+      </Stack>
+      <Value className={breakAllClass}>{signer.pubKey}</Value>
+      <Stack gap={'sm'} justifyContent={'space-between'}></Stack>
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h5">Sign for</Heading>
+        {signer.clist &&
+          signer.clist.map((cap) => (
+            <Stack
+              key={cap.name}
+              gap={'sm'}
+              justifyContent={'space-between'}
+              className={codeClass}
+            >
+              <Value>
+                (
+                {[
+                  cap.name,
+                  ...cap.args.map((data) =>
+                    typeof data === 'number' ? data : parseAsPactValue(data),
+                  ),
+                ].join(' ')}
+                )
+              </Value>
+            </Stack>
+          ))}
+      </Stack>
+      {signature && (
+        <>
+          <Stack
+            justifyContent={'space-between'}
+            alignItems={'flex-start'}
+            gap={'sm'}
+          >
+            <Heading variant="h5">Signature</Heading>
+            <Stack gap={'sm'}>
+              <Button
+                variant="transparent"
+                isDisabled={statusPassed(transactionStatus, 'submitted')}
+                isCompact
+                onClick={() => {
+                  const updatedSigs = transaction.sigs.map((sig) =>
+                    sig?.pubKey === signer.pubKey && sig.sig
+                      ? { pubKey: sig.pubKey }
+                      : sig,
+                  );
+                  onSign(updatedSigs);
+                }}
+              >
+                <MonoDelete />
+              </Button>
+              <Button
+                isCompact
+                variant="transparent"
+                startVisual={<MonoContentCopy />}
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    JSON.stringify({
+                      sig: signature,
+                      pubKey: signer.pubKey,
+                    }),
+                  );
+                }}
+              />
+            </Stack>
+          </Stack>
+          <Value className={classNames(breakAllClass, codeClass)}>
+            {signature}
+          </Value>
+        </>
+      )}
+      {!signature && info && (
+        <Stack>
+          <Button
+            isCompact
+            variant="primary"
+            onClick={async () => {
+              const signed = (await sign(transaction, [
+                signer.pubKey,
+              ])) as IUnsignedCommand;
+              onSign(signed.sigs ?? []);
+            }}
+          >
+            Sign
+          </Button>
+        </Stack>
+      )}
+      {!signature && !info && (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            const formData = new FormData(event.target as HTMLFormElement);
+            const signature = formData.get('signature') as string;
+            let sigObject;
+            if (!signature) return;
+            try {
+              const json:
+                | IUnsignedCommand
+                | {
+                    pubKey: string;
+                    sig?: string;
+                  } = yaml.load(signature) as
+                | IUnsignedCommand
+                | {
+                    pubKey: string;
+                    sig?: string;
+                  };
+
+              let sigs: Array<{
+                sig?: string;
+                pubKey: string;
+              }> = [];
+              if ('sig' in json) {
+                if (!json.pubKey) {
+                  json.pubKey = signer.pubKey;
+                }
+                sigs = [json];
+              } else {
+                sigs = normalizeSigs(json as IUnsignedCommand);
+              }
+
+              const extSignature = sigs.find(
+                (item) => item.pubKey === signer.pubKey,
+              );
+
+              if (!extSignature || !extSignature.sig) {
+                return;
+              }
+              sigObject = extSignature as {
+                sig: string;
+                pubKey: string;
+              };
+            } catch (e) {
+              sigObject = {
+                sig: signature,
+                pubKey: signer.pubKey,
+              };
+            }
+            // TODO: verify signature before adding it
+            const sigs = addSignatures(transaction, sigObject);
+            onSign(sigs.sigs);
+          }}
+        >
+          <Stack
+            gap={'sm'}
+            flex={1}
+            flexDirection={'column'}
+            alignItems={'flex-start'}
+          >
+            <Stack width="100%">
+              <TextareaField
+                label="Signature or Signed Tx"
+                name="signature"
+                placeholder="Paste signature or signed transaction here. the other party should provide you with the signature"
+              />
+            </Stack>
+            <Button variant="info" isCompact type="submit">
+              Add External Signature
+            </Button>
+          </Stack>
+        </form>
+      )}
+    </>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/SubmittedStatus.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/SubmittedStatus.tsx
new file mode 100644
index 0000000000..06ed1ff46d
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/SubmittedStatus.tsx
@@ -0,0 +1,93 @@
+import { ITransaction } from '@/modules/transaction/transaction.repository';
+import { MonoBrightness1 } from '@kadena/kode-icons/system';
+import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
+import classNames from 'classnames';
+import { Value } from './helpers';
+import {
+  codeClass,
+  failureClass,
+  pendingClass,
+  pendingText,
+  successClass,
+} from './style.css';
+
+export function SubmittedStatus({
+  transaction,
+}: {
+  transaction: ITransaction;
+}) {
+  if (!transaction.request?.requestKey) {
+    return <Text>Request Key not found</Text>;
+  }
+  if (transaction.preflight?.result.status !== 'success') {
+    return <Text>Preflight failed</Text>;
+  }
+  const status = transaction.status;
+  return (
+    <Stack flexDirection={'column'} gap={'lg'}>
+      <Heading variant="h4">Transaction Status</Heading>
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h6">Request Key</Heading>
+        <Value className={codeClass}>{transaction.request.requestKey}</Value>
+      </Stack>
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h6">Preflight Result</Heading>
+        <Value className={codeClass}>
+          <pre>
+            {JSON.stringify(transaction.preflight?.result.data, null, 2)}
+          </pre>
+        </Value>
+      </Stack>
+      <Stack gap={'sm'} flexDirection={'column'}>
+        <Heading variant="h6">Transaction Status</Heading>
+        <Stack gap={'sm'} alignItems={'center'}>
+          <MonoBrightness1 className={successClass} />{' '}
+          <Text>Transaction sent to mempool</Text>
+        </Stack>
+        <Stack gap={'sm'} alignItems={'center'}>
+          <MonoBrightness1
+            className={classNames(
+              status === 'success' && successClass,
+              status === 'failure' && failureClass,
+              status === 'submitted' && pendingClass,
+            )}
+          />{' '}
+          <Text className={classNames(status === 'submitted' && pendingText)}>
+            Transaction successfully mined
+          </Text>
+        </Stack>
+      </Stack>
+
+      {transaction.result && transaction.result.result.status === 'success' && (
+        <Stack gap={'sm'} flexDirection={'column'}>
+          <Heading variant="h6">Transaction Result</Heading>
+          <Value className={codeClass}>
+            <pre>{JSON.stringify(transaction.result.result.data, null, 2)}</pre>
+          </Value>
+        </Stack>
+      )}
+      <Stack>
+        {transaction.result && (
+          <Button
+            onClick={() => {
+              navigator.clipboard.writeText(JSON.stringify(transaction.result));
+            }}
+          >
+            Copy result
+          </Button>
+        )}
+      </Stack>
+      {status === 'success' && transaction.result?.continuation && (
+        <Stack flexDirection={'column'} gap={'lg'}>
+          <Stack gap={'sm'} alignItems={'center'}>
+            <MonoBrightness1 className={pendingClass} />{' '}
+            <Text>Transaction need continuation</Text>
+          </Stack>
+          <Stack>
+            <Button>create continuation</Button>
+          </Stack>
+        </Stack>
+      )}
+    </Stack>
+  );
+}
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/TxContainer.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxContainer.tsx
new file mode 100644
index 0000000000..eb07ac99c2
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxContainer.tsx
@@ -0,0 +1,203 @@
+import { useSubscribe } from '@/modules/db/useSubscribe';
+import {
+  ITransaction,
+  transactionRepository,
+} from '@/modules/transaction/transaction.repository';
+import * as transactionService from '@/modules/transaction/transaction.service';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { IUnsignedCommand } from '@kadena/client';
+import { Dialog } from '@kadena/kode-ui';
+import { isSignedCommand } from '@kadena/pactjs';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ExpandedTransaction } from './ExpandedTransaction';
+import { containerClass } from './style.css';
+import { TxMinimized } from './TxMinimized';
+import { steps } from './TxPipeLine';
+import { TxTile } from './TxTile';
+
+export const TxContainer = React.memo(
+  ({
+    transaction,
+    as,
+    sendDisabled,
+    onUpdate,
+    onDone,
+  }: {
+    transaction: ITransaction;
+    as: 'tile' | 'expanded' | 'minimized';
+    sendDisabled?: boolean;
+    onUpdate?: (tx: ITransaction) => void;
+    onDone?: (tx: ITransaction) => void;
+  }) => {
+    const [expandedModal, setExpandedModal] = useState(false);
+    const { sign, client } = useWallet();
+    const syncing = useRef(false);
+    const doneRef = useRef(false);
+
+    const localTransaction = useSubscribe<ITransaction>(
+      'transaction',
+      transaction.uuid,
+    );
+    const contTx = useSubscribe<ITransaction>(
+      'transaction',
+      localTransaction?.continuation?.continuationTxId,
+    );
+
+    useEffect(() => {
+      if (
+        localTransaction &&
+        localTransaction.status === 'success' &&
+        (!localTransaction.continuation?.autoContinue ||
+          contTx?.status === 'success')
+      ) {
+        if (onDone && !doneRef.current) {
+          doneRef.current = true;
+          console.log('onDone', localTransaction);
+          onDone(localTransaction);
+        }
+      }
+      if (localTransaction?.status === 'submitted' && onUpdate) {
+        console.log('onUpdate', localTransaction);
+        onUpdate(localTransaction);
+      }
+    }, [localTransaction?.status, contTx?.status]);
+
+    useEffect(() => {
+      if (!transaction) return;
+      if (transaction && !syncing.current) {
+        syncing.current = true;
+        transactionService.syncTransactionStatus(transaction, client);
+      }
+    }, [transaction.uuid]);
+
+    const onSign = async (tx: ITransaction) => {
+      const signed = (await sign(tx)) as IUnsignedCommand;
+      const updated = {
+        ...tx,
+        ...signed,
+        status: isSignedCommand(signed)
+          ? steps.indexOf(tx.status) < steps.indexOf('signed')
+            ? 'signed'
+            : tx.status
+          : tx.status,
+      } as ITransaction;
+      await transactionRepository.updateTransaction(updated);
+      // setLocalTransaction(updated);
+      if (onUpdate) {
+        onUpdate(updated);
+      }
+    };
+
+    const onExpandedSign =
+      (tx: ITransaction) => async (sigs: ITransaction['sigs']) => {
+        const updated = {
+          ...tx,
+          sigs,
+          status: sigs.every((data) => data?.sig)
+            ? steps.indexOf(tx.status) < steps.indexOf('signed')
+              ? 'signed'
+              : tx.status
+            : tx.status,
+        } as ITransaction;
+        await transactionRepository.updateTransaction(updated);
+        // setLocalTransaction(updated);
+        if (onUpdate) {
+          onUpdate(updated);
+        }
+      };
+
+    const onSubmit = useCallback(
+      async (tx: ITransaction, skipPreflight = false) => {
+        const result = await transactionService.submitTransaction(
+          tx,
+          client,
+          undefined,
+          skipPreflight,
+        );
+        if (onUpdate) onUpdate(result);
+
+        return result;
+      },
+      [client, onUpdate],
+    );
+
+    const onPreflight = useCallback(
+      async (tx: ITransaction) => {
+        const result = await transactionService.preflightTransaction(
+          tx,
+          client,
+        );
+        if (onUpdate) onUpdate(result);
+
+        return result;
+      },
+      [client, onUpdate],
+    );
+
+    if (!localTransaction) return null;
+    const renderExpanded = (isDialog = false) => (
+      <ExpandedTransaction
+        transaction={localTransaction}
+        contTx={contTx}
+        onSign={onExpandedSign(localTransaction)}
+        onSubmit={(skipPreflight = false) =>
+          onSubmit(localTransaction, skipPreflight)
+        }
+        onPreflight={() => onPreflight(localTransaction)}
+        sendDisabled={sendDisabled}
+        showTitle={as === 'tile' || isDialog}
+        isDialog={isDialog}
+      />
+    );
+    if (as === 'tile' || as === 'minimized')
+      return (
+        <>
+          {expandedModal && (
+            <Dialog
+              className={containerClass}
+              isOpen={true}
+              size="lg"
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setExpandedModal(false);
+                }
+              }}
+            >
+              {renderExpanded(true)}
+            </Dialog>
+          )}
+          {as === 'tile' && (
+            <TxTile
+              tx={localTransaction}
+              contTx={contTx}
+              sendDisabled={sendDisabled}
+              onSign={() => {
+                onSign(localTransaction);
+              }}
+              onSubmit={() => onSubmit(localTransaction)}
+              onPreflight={() => onPreflight(localTransaction)}
+              onView={async () => {
+                setExpandedModal(true);
+              }}
+            />
+          )}
+          {as === 'minimized' && (
+            <TxMinimized
+              tx={localTransaction}
+              contTx={contTx}
+              sendDisabled={sendDisabled}
+              onSign={() => {
+                onSign(localTransaction);
+              }}
+              onSubmit={() => onSubmit(localTransaction)}
+              onView={async () => {
+                setExpandedModal(true);
+              }}
+            />
+          )}
+        </>
+      );
+
+    return renderExpanded();
+  },
+);
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/TxList.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxList.tsx
new file mode 100644
index 0000000000..f2f38e529b
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxList.tsx
@@ -0,0 +1,228 @@
+import {
+  ITransaction,
+  transactionRepository,
+} from '@/modules/transaction/transaction.repository';
+
+import { Button, Stack, Text } from '@kadena/kode-ui';
+
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { ICommand, IUnsignedCommand } from '@kadena/client';
+import { MonoSignature } from '@kadena/kode-icons/system';
+import { isSignedCommand } from '@kadena/pactjs';
+import React, { useCallback, useEffect } from 'react';
+
+import * as transactionService from '@/modules/transaction/transaction.service';
+import { normalizeSigs } from '@/utils/normalizeSigs';
+import { TxContainer } from './TxContainer';
+import { statusPassed, steps } from './TxPipeLine';
+
+export const TxList = React.memo(
+  ({
+    txIds,
+    sendDisabled,
+    onDone,
+    showExpanded,
+    onSign,
+  }: {
+    txIds: string[];
+    showExpanded?: boolean;
+    sendDisabled?: boolean;
+    onDone?: () => void;
+    onSign?: (tx: ICommand) => void;
+  }) => {
+    const { sign, client, getPublicKeyData } = useWallet();
+    const [transactions, setTransactions] = React.useState<ITransaction[]>([]);
+
+    useEffect(() => {
+      if (!txIds || txIds.length === 0) {
+        setTransactions([]);
+        return;
+      }
+      Promise.all(txIds.map(transactionRepository.getTransaction)).then(
+        setTransactions,
+      );
+    }, [txIds]);
+
+    const updateTx = useCallback(
+      (updatedTx: ITransaction) =>
+        setTransactions((prev) => {
+          if (updatedTx.status === 'signed' && onSign) {
+            if (
+              prev.find((tx) => tx.uuid === updatedTx.uuid)?.status !== 'signed'
+            ) {
+              onSign({
+                cmd: updatedTx.cmd,
+                hash: updatedTx.hash,
+                sigs: updatedTx.sigs as ICommand['sigs'],
+              });
+            }
+          }
+          return prev.map((prevTx) =>
+            prevTx.uuid === updatedTx.uuid ? updatedTx : prevTx,
+          );
+        }),
+      [],
+    );
+
+    const signAll = async () => {
+      const txs = await Promise.all(
+        txIds.map(transactionRepository.getTransaction),
+      );
+      const signed = (await sign(txs)) as (IUnsignedCommand | ICommand)[];
+
+      const updatedTxs = txs.map((tx) => {
+        const signedTx = signed.find(({ hash }) => hash === tx.hash);
+        if (!signedTx) return tx;
+        const updatedTx = {
+          ...tx,
+          ...signedTx,
+          status: isSignedCommand(signedTx)
+            ? steps.indexOf(tx.status) < steps.indexOf('signed')
+              ? 'signed'
+              : tx.status
+            : tx.status,
+        } as ITransaction;
+        if (updatedTx.status === 'signed' && onSign) {
+          onSign({
+            cmd: updatedTx.cmd,
+            hash: updatedTx.hash,
+            sigs: updatedTx.sigs as ICommand['sigs'],
+          });
+        }
+        return updatedTx;
+      });
+      await updatedTxs.map(transactionRepository.updateTransaction);
+      setTransactions(updatedTxs);
+    };
+
+    const onSendAll = async () => {
+      const onSubmit = async (tx: ITransaction) => {
+        return transactionService.submitTransaction(tx, client, updateTx);
+      };
+
+      const txs = await Promise.all(
+        txIds.map(transactionRepository.getTransaction),
+      );
+      const result = await Promise.all(txs.map(onSubmit));
+      if (onDone) {
+        onDone();
+      }
+      console.log(result);
+    };
+
+    const onPreflightAll = async () => {
+      const onPreflight = async (tx: ITransaction) => {
+        return transactionService.preflightTransaction(tx, client);
+      };
+
+      const txs = await Promise.all(
+        txIds.map(transactionRepository.getTransaction),
+      );
+      const result = await Promise.all(txs.map(onPreflight));
+      result.forEach(updateTx);
+      console.log(result);
+    };
+
+    const signedByYou = (tx: ITransaction) => {
+      const signers = normalizeSigs(tx);
+      return !signers.find(
+        (sigData) => !sigData?.sig && getPublicKeyData(sigData?.pubKey),
+      );
+    };
+
+    return (
+      <Stack flexDirection={'column'} gap={'lg'}>
+        <Stack flexDirection={'row'} flexWrap="wrap" gap="md">
+          {transactions.length === 0 && <Text>No transactions</Text>}
+          {!showExpanded &&
+            transactions.map((tx) => (
+              <TxContainer
+                key={tx.uuid}
+                as="tile"
+                transaction={tx}
+                sendDisabled={sendDisabled}
+                onUpdate={updateTx}
+              />
+            ))}
+          {showExpanded &&
+            transactions.map((tx) => (
+              <Stack
+                flexDirection={'column'}
+                justifyContent={'flex-start'}
+                flex={1}
+                style={{ maxWidth: '100%' }}
+              >
+                <TxContainer
+                  key={tx.uuid}
+                  as="expanded"
+                  transaction={tx}
+                  sendDisabled={sendDisabled}
+                  onUpdate={updateTx}
+                />
+              </Stack>
+            ))}
+        </Stack>
+        {!showExpanded && !transactions.every((tx) => signedByYou(tx)) && (
+          <Stack gap={'sm'} flexDirection={'column'}>
+            <Text>You can sign all transactions at once.</Text>
+            <Stack>
+              <Button isCompact onClick={signAll}>
+                <Stack>
+                  <MonoSignature scale={0.5} />
+                  Sign All Transactions
+                </Stack>
+              </Button>
+            </Stack>
+          </Stack>
+        )}
+        {!showExpanded &&
+          transactions.every((tx) => signedByYou(tx)) &&
+          !transactions.every((tx) => statusPassed(tx.status, 'signed')) && (
+            <Stack gap={'sm'} flexDirection={'column'}>
+              <Text>
+                There is no action at the moment; share the transactions with
+                other signers to sign
+              </Text>
+            </Stack>
+          )}
+        {!showExpanded &&
+          !sendDisabled &&
+          transactions.every((tx) => statusPassed(tx.status, 'signed')) &&
+          transactions.find((tx) => tx.status === 'signed') && (
+            <Stack flexDirection={'column'} gap={'sm'}>
+              <Text>
+                All transactions are signed. Now you can call preflight
+              </Text>
+              <Stack>
+                <Button isCompact onPress={() => onPreflightAll()}>
+                  Preflight transactions
+                </Button>
+              </Stack>
+            </Stack>
+          )}
+        {!showExpanded &&
+          !sendDisabled &&
+          transactions.every((tx) => statusPassed(tx.status, 'preflight')) &&
+          transactions.find((tx) => tx.status === 'preflight') && (
+            <Stack flexDirection={'column'} gap={'sm'}>
+              <Text>
+                All transactions are signed. Now you can send them to the
+                blockchain
+              </Text>
+              <Stack>
+                <Button isCompact onPress={() => onSendAll()}>
+                  Send transactions
+                </Button>
+              </Stack>
+            </Stack>
+          )}
+      </Stack>
+    );
+  },
+  (prev, next) => {
+    if (prev.sendDisabled !== next.sendDisabled) return false;
+    if (prev.showExpanded !== next.showExpanded) return false;
+    if (prev.txIds.length !== next.txIds.length) return false;
+    return prev.txIds.every((txId, index) => txId === next.txIds[index]);
+  },
+);
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/TxMinimized.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxMinimized.tsx
new file mode 100644
index 0000000000..cb3871b235
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxMinimized.tsx
@@ -0,0 +1,58 @@
+import { ITransaction } from '@/modules/transaction/transaction.repository';
+
+import { MonoOpenInFull } from '@kadena/kode-icons/system';
+import { Button, Stack } from '@kadena/kode-ui';
+
+import { TxPipeLine } from './TxPipeLine';
+import { txMinimizedClass } from './style.css';
+
+export const TxMinimized = ({
+  tx,
+  contTx,
+  onSign,
+  onSubmit,
+  onView,
+  sendDisabled,
+  interactive = false,
+}: {
+  tx: ITransaction;
+  contTx?: ITransaction;
+  onSign: () => void;
+  onSubmit: () => Promise<ITransaction>;
+  onView: () => void;
+  sendDisabled?: boolean;
+  interactive?: boolean;
+}) => {
+  return (
+    <Stack
+      flexDirection={'row'}
+      gap={'xxl'}
+      className={txMinimizedClass}
+      alignItems={'center'}
+    >
+      <Stack gap={'sm'}>
+        <TxPipeLine tx={tx} variant="minimized" contTx={contTx} />
+        {interactive && tx.status === 'initiated' && (
+          <Button isCompact variant="info" onClick={() => onSign()}>
+            Sign
+          </Button>
+        )}
+        {interactive && tx.status === 'signed' && (
+          <Button
+            isCompact
+            variant="info"
+            isDisabled={sendDisabled}
+            onClick={() => onSubmit()}
+          >
+            Send
+          </Button>
+        )}
+      </Stack>
+      <Button variant="transparent" isCompact onClick={onView}>
+        <Stack gap={'sm'} alignItems={'center'}>
+          <MonoOpenInFull />
+        </Stack>
+      </Button>
+    </Stack>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/TxPipeLine.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxPipeLine.tsx
new file mode 100644
index 0000000000..8748b2631e
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxPipeLine.tsx
@@ -0,0 +1,426 @@
+import {
+  ITransaction,
+  TransactionStatus,
+} from '@/modules/transaction/transaction.repository';
+import { syncTransactionStatus } from '@/modules/transaction/transaction.service';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { shorten } from '@/utils/helpers';
+import { normalizeSigs } from '@/utils/normalizeSigs';
+import { base64UrlEncodeArr } from '@kadena/cryptography-utils';
+import {
+  MonoCheck,
+  MonoClose,
+  MonoCloudSync,
+  MonoLoading,
+  MonoPauseCircle,
+  MonoRefresh,
+  MonoShare,
+  MonoSignature,
+  MonoViewInAr,
+} from '@kadena/kode-icons/system';
+import { Button, Stack, Text } from '@kadena/kode-ui';
+import { useMemo, useState } from 'react';
+import { failureClass, pendingClass, successClass } from './style.css';
+
+export const steps: TransactionStatus[] = [
+  'initiated',
+  'signed',
+  'preflight',
+  'submitted',
+  'failure',
+  'success',
+  'persisted',
+];
+
+export const statusPassed = (
+  txStatus: ITransaction['status'],
+  status: ITransaction['status'],
+) => steps.indexOf(txStatus) >= steps.indexOf(status);
+
+export const getStatusClass = (status: ITransaction['status']) => {
+  if (statusPassed(status, 'success')) return successClass;
+  if (status === 'failure') return failureClass;
+  if (status === 'initiated') return '';
+  return pendingClass;
+};
+
+export function TxPipeLine({
+  tx,
+  contTx,
+  variant,
+  signAll,
+  onSubmit,
+  sendDisabled,
+  onPreflight,
+}: {
+  tx: ITransaction;
+  contTx?: ITransaction;
+  variant: 'tile' | 'expanded' | 'minimized';
+  signAll?: () => void;
+  onSubmit?: (skipPreflight?: boolean) => void;
+  onPreflight?: () => void;
+  sendDisabled?: boolean;
+}) {
+  const showAfterCont = !contTx || variant === 'expanded';
+  return (
+    <Stack flexDirection={'column'} gap={'md'}>
+      <TxStatusList
+        {...{
+          variant,
+          showAfterCont,
+          tx,
+          signAll,
+          onSubmit,
+          onPreflight,
+          sendDisabled,
+          contTx,
+        }}
+      />
+    </Stack>
+  );
+}
+
+function TxStatusList({
+  variant,
+  showAfterCont,
+  tx,
+  signAll,
+  onSubmit = () => {},
+  sendDisabled,
+  contTx,
+  onPreflight = () => {},
+}: {
+  variant: 'tile' | 'expanded' | 'minimized';
+  showAfterCont: boolean;
+  tx: ITransaction;
+  signAll?: () => void;
+  onSubmit?: (skipPreflight?: boolean) => void;
+  onPreflight?: () => void;
+  sendDisabled?: boolean;
+  contTx?: ITransaction | null;
+}) {
+  const { getPublicKeyData, client } = useWallet();
+  const signers = useMemo(() => normalizeSigs(tx), [tx]);
+  const textSize = variant === 'tile' ? 'smallest' : 'base';
+  const signedByYou = !signers.find(
+    (sigData) => !sigData?.sig && getPublicKeyData(sigData?.pubKey),
+  );
+  const [copied, setCopied] = useState(false);
+  const statusList = [
+    variant !== 'minimized' && (
+      <Stack justifyContent={'space-between'}>
+        <Text>
+          {tx.continuation?.autoContinue ? 'exec' : 'hash'}:{' '}
+          {shorten(tx.hash, 6)}
+        </Text>
+      </Stack>
+    ),
+    showAfterCont &&
+      variant !== 'tile' &&
+      !statusPassed(tx.status, 'signed') && (
+        <Stack flexDirection={'column'} gap={'md'}>
+          <Text size={textSize} className={pendingClass}>
+            <Stack alignItems={'center'} gap={'xs'}>
+              <MonoPauseCircle />
+              {signedByYou ? 'add external signatures' : 'Waiting for sign'}
+            </Stack>
+          </Text>
+
+          {variant === 'expanded' && signedByYou && (
+            <Stack gap={'sm'}>
+              <Button
+                startVisual={<MonoCloudSync />}
+                isCompact
+                variant="outlined"
+                onClick={() => {
+                  syncTransactionStatus(tx, client);
+                }}
+              >
+                query chain
+              </Button>
+              <Button
+                startVisual={<MonoShare />}
+                isCompact
+                onClick={() => {
+                  const encodedTx = base64UrlEncodeArr(
+                    new TextEncoder().encode(
+                      JSON.stringify({
+                        hash: tx.hash,
+                        cmd: tx.cmd,
+                        sigs: tx.sigs,
+                      }),
+                    ),
+                  );
+                  const baseUrl = `${window.location.protocol}//${window.location.host}`;
+                  navigator.clipboard.writeText(
+                    `${baseUrl}/sig-builder#${encodedTx}`,
+                  );
+                  setCopied(true);
+                  setTimeout(() => setCopied(false), 2000);
+                }}
+              >
+                {copied ? 'copied' : 'Share'}
+              </Button>
+            </Stack>
+          )}
+          {variant === 'expanded' && !signedByYou && (
+            <Stack>
+              <Button
+                isCompact
+                onClick={() => signAll!()}
+                startVisual={<MonoSignature />}
+              >
+                Sign all possible signers
+              </Button>
+            </Stack>
+          )}
+        </Stack>
+      ),
+    showAfterCont && statusPassed(tx.status, 'signed') && (
+      <Stack>
+        <Text size={textSize} className={successClass}>
+          <Stack alignItems={'center'} gap={'xs'}>
+            <MonoCheck />
+            Signed
+          </Stack>
+        </Text>
+      </Stack>
+    ),
+    showAfterCont &&
+      variant !== 'tile' &&
+      statusPassed(tx.status, 'signed') &&
+      !statusPassed(tx.status, 'preflight') && (
+        <Stack flexDirection={'column'} gap={'md'}>
+          <Text size={textSize} className={pendingClass}>
+            <Stack alignItems={'center'} gap={'xs'}>
+              <MonoPauseCircle />
+              {sendDisabled ? 'Transaction is pending' : 'Ready to preflight'}
+            </Stack>
+          </Text>
+          {variant === 'expanded' && (
+            <Button
+              isCompact
+              onClick={() => onPreflight()}
+              isDisabled={sendDisabled}
+              startVisual={<MonoViewInAr />}
+            >
+              Preflight transaction
+            </Button>
+          )}
+        </Stack>
+      ),
+    showAfterCont && statusPassed(tx.status, 'preflight') && (
+      <Stack gap={'sm'} alignItems={'center'}>
+        <Text
+          size={textSize}
+          className={
+            tx.preflight?.result.status === 'success'
+              ? successClass
+              : failureClass
+          }
+        >
+          <Stack alignItems={'center'} gap={'xs'}>
+            {tx.preflight?.result.status === 'success' ? (
+              <MonoCheck />
+            ) : (
+              <MonoClose />
+            )}
+            preflight
+          </Stack>
+        </Text>
+        {variant === 'expanded' &&
+          tx.status === 'preflight' &&
+          tx.preflight?.result.status === 'failure' && (
+            <Stack>
+              <Button isCompact onClick={() => onPreflight()}>
+                <MonoRefresh />
+              </Button>
+              <Button
+                isCompact
+                variant="transparent"
+                onClick={() => onSubmit(true)}
+              >
+                Skip
+              </Button>
+            </Stack>
+          )}
+      </Stack>
+    ),
+    showAfterCont &&
+      variant !== 'tile' &&
+      tx.status === 'preflight' &&
+      tx.preflight?.result.status === 'success' && (
+        <Stack flexDirection={'column'} gap={'md'}>
+          <Text size={textSize} className={pendingClass}>
+            <Stack alignItems={'center'} gap={'xs'}>
+              <MonoPauseCircle />
+              Ready to send
+            </Stack>
+          </Text>
+          {variant === 'expanded' && (
+            <Button
+              isCompact
+              onClick={() => onSubmit()}
+              isDisabled={sendDisabled}
+              startVisual={<MonoViewInAr />}
+            >
+              Send transaction
+            </Button>
+          )}
+        </Stack>
+      ),
+    showAfterCont && statusPassed(tx.status, 'submitted') && (
+      <Stack gap={'sm'} alignItems={'center'}>
+        <Text
+          size={textSize}
+          className={tx.request ? successClass : failureClass}
+        >
+          <Stack alignItems={'center'} gap={'xs'}>
+            {tx.request ? <MonoCheck /> : <MonoClose />}
+            Send
+          </Stack>
+        </Text>
+        {variant === 'expanded' && !tx.request && (
+          <Stack>
+            <Button isCompact onClick={() => onSubmit(true)}>
+              <MonoRefresh />
+            </Button>
+          </Stack>
+        )}
+      </Stack>
+    ),
+    showAfterCont &&
+      statusPassed(tx.status, 'submitted') &&
+      (!('result' in tx) || !tx.result) && (
+        <Stack>
+          <Text size={textSize} className={pendingClass}>
+            <Stack alignItems={'center'} gap={'xs'}>
+              <MonoLoading />
+              Mining...
+            </Stack>
+          </Text>
+        </Stack>
+      ),
+    statusPassed(tx.status, 'success') && (
+      <Stack>
+        <Text size={textSize} className={successClass}>
+          <Stack alignItems={'center'} gap={'xs'}>
+            <MonoCheck />
+            Mined{' '}
+            {tx.continuation?.autoContinue && contTx
+              ? `in chain ${tx.purpose!.data.source as string}`
+              : ''}
+          </Stack>
+        </Text>
+      </Stack>
+    ),
+    tx.status === 'failure' && (
+      <Stack>
+        <Text size={textSize} className={failureClass}>
+          <Stack alignItems={'center'} gap={'xs'}>
+            <MonoClose />
+            Failed
+          </Stack>
+        </Text>
+      </Stack>
+    ),
+    statusPassed(tx.status, 'success') && [
+      tx.continuation?.autoContinue && !tx.continuation.proof && (
+        <Stack>
+          <Text size={textSize} className={pendingClass}>
+            <Stack alignItems={'center'} gap={'xs'}>
+              <MonoLoading />
+              Fetching proof
+            </Stack>
+          </Text>
+        </Stack>
+      ),
+      showAfterCont &&
+        tx.continuation?.autoContinue &&
+        tx.continuation.proof && (
+          <Stack>
+            <Text size={textSize} className={successClass}>
+              <Stack alignItems={'center'} gap={'xs'}>
+                <MonoCheck />
+                proof fetched
+              </Stack>
+            </Text>
+          </Stack>
+        ),
+      contTx && [
+        variant !== 'minimized' && (
+          <Stack justifyContent={'space-between'}>
+            <Text>cont: {shorten(contTx.hash, 6)}</Text>
+          </Stack>
+        ),
+        statusPassed(contTx.status, 'preflight') && (
+          <Stack>
+            <Text
+              size={textSize}
+              className={
+                contTx.preflight?.result.status === 'success'
+                  ? successClass
+                  : failureClass
+              }
+            >
+              <Stack alignItems={'center'} gap={'xs'}>
+                {contTx.preflight?.result.status === 'success' ? (
+                  <MonoCheck />
+                ) : (
+                  <MonoClose />
+                )}
+                preflight
+              </Stack>
+            </Text>
+          </Stack>
+        ),
+        statusPassed(contTx.status, 'submitted') && (
+          <Stack>
+            <Text size={textSize} className={successClass}>
+              <Stack alignItems={'center'} gap={'xs'}>
+                <MonoCheck />
+                Send
+              </Stack>
+            </Text>
+          </Stack>
+        ),
+        statusPassed(contTx.status, 'submitted') &&
+          (!('result' in contTx) || !contTx.result) && (
+            <Stack>
+              <Text size={textSize} className={pendingClass}>
+                <Stack alignItems={'center'} gap={'xs'}>
+                  <MonoLoading />
+                  Mining...
+                </Stack>
+              </Text>
+            </Stack>
+          ),
+        statusPassed(contTx.status, 'success') && (
+          <Stack>
+            <Text size={textSize} className={successClass}>
+              <Stack alignItems={'center'} gap={'xs'}>
+                <MonoCheck />
+                Mined
+              </Stack>
+            </Text>
+          </Stack>
+        ),
+        contTx.status === 'failure' && (
+          <Stack>
+            <Text size={textSize} className={successClass}>
+              <Stack alignItems={'center'} gap={'xs'}>
+                <MonoCheck />
+                Failed
+              </Stack>
+            </Text>
+          </Stack>
+        ),
+      ],
+    ],
+  ]
+    .flat(Infinity)
+    .filter(Boolean);
+
+  if (variant === 'minimized') return statusList.pop() as JSX.Element;
+  return <>{statusList}</>;
+}
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/TxTile.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxTile.tsx
new file mode 100644
index 0000000000..a0c66bf839
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxTile.tsx
@@ -0,0 +1,195 @@
+import { ITransaction } from '@/modules/transaction/transaction.repository';
+
+import {
+  MonoCheck,
+  MonoOpenInFull,
+  MonoShare,
+  MonoSignature,
+  MonoViewInAr,
+} from '@kadena/kode-icons/system';
+import { Button, Stack, Text } from '@kadena/kode-ui';
+
+import { IPactCommand } from '@kadena/client';
+
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import { normalizeSigs } from '@/utils/normalizeSigs';
+import { shortenPactCode } from '@/utils/parsedCodeToPact';
+import { base64UrlEncodeArr } from '@kadena/cryptography-utils';
+import { useMemo, useState } from 'react';
+import { Value } from './helpers';
+import {
+  codeClass,
+  successClass,
+  txTileClass,
+  txTileContentClass,
+} from './style.css';
+import { TxPipeLine } from './TxPipeLine';
+
+export const TxTile = ({
+  tx,
+  contTx,
+  onSign,
+  onSubmit,
+  onPreflight,
+  onView,
+  sendDisabled,
+}: {
+  tx: ITransaction;
+  contTx?: ITransaction;
+  onSign: () => void;
+  onSubmit: () => Promise<ITransaction>;
+  onPreflight: () => Promise<ITransaction>;
+  onView: () => void;
+  sendDisabled?: boolean;
+}) => {
+  const command: IPactCommand = JSON.parse(tx.cmd);
+  const { getPublicKeyData } = useWallet();
+  const signers = useMemo(() => normalizeSigs(tx), [tx]);
+  const signedByYou = !signers.find(
+    (sigData) => !sigData?.sig && getPublicKeyData(sigData?.pubKey),
+  );
+  const [shareClicked, setCopyClick] = useState(false);
+
+  function shareTx() {
+    const encodedTx = base64UrlEncodeArr(
+      new TextEncoder().encode(
+        JSON.stringify({
+          hash: tx.hash,
+          cmd: tx.cmd,
+          sigs: tx.sigs,
+        }),
+      ),
+    );
+    const baseUrl = `${window.location.protocol}//${window.location.host}`;
+    navigator.clipboard.writeText(`${baseUrl}/sig-builder#${encodedTx}`);
+    setCopyClick(true);
+    setTimeout(() => setCopyClick(false), 5000);
+  }
+
+  return (
+    <Stack
+      flexDirection={'column'}
+      justifyContent={'space-between'}
+      className={txTileClass}
+      gap={'sm'}
+    >
+      <Stack flexDirection={'column'} gap={'sm'} flex={1}>
+        <TxPipeLine tx={tx} variant="tile" contTx={contTx} />
+        {tx.status === 'initiated' && !signedByYou && (
+          <>
+            {'exec' in command.payload && (
+              <>
+                <Stack
+                  gap={'sm'}
+                  flexDirection={'column'}
+                  overflow="auto"
+                  flex={1}
+                  className={txTileContentClass}
+                >
+                  <Value className={codeClass}>
+                    <span title={command.payload.exec.code}>
+                      {shortenPactCode(command.payload.exec.code)}
+                    </span>
+                  </Value>
+                </Stack>
+              </>
+            )}
+            {'cont' in command.payload && (
+              <>
+                <Stack gap={'sm'} flexDirection={'column'}>
+                  <Text>Continuation</Text>
+                  <Value>
+                    {command.payload.cont.pactId}- step(
+                    {command.payload.cont.step})
+                  </Value>
+                </Stack>
+              </>
+            )}
+          </>
+        )}
+        {tx.status === 'initiated' && signedByYou && (
+          <Stack
+            gap={'sm'}
+            flexDirection={'column'}
+            overflow="auto"
+            flex={1}
+            className={txTileContentClass}
+          >
+            <Stack>
+              <Text size={'smallest'} className={successClass}>
+                <Stack alignItems={'center'} gap={'xs'}>
+                  <MonoCheck />
+                  Signed by you
+                </Stack>
+              </Text>
+            </Stack>
+            <Value className={codeClass}>
+              You have signed this transaction, share the tx with others to
+              sign;
+            </Value>
+          </Stack>
+        )}
+        {tx.status === 'signed' && (
+          <>
+            <Stack
+              gap={'sm'}
+              flexDirection={'column'}
+              overflow="auto"
+              flex={1}
+              justifyContent={'flex-end'}
+              paddingBlockEnd={'sm'}
+            >
+              <Text size="small">
+                The transaction is Signed; you can now call preflight
+              </Text>
+            </Stack>
+          </>
+        )}
+      </Stack>
+      <Stack justifyContent={'space-between'} alignItems={'center'}>
+        <Stack alignItems={'center'}>
+          {tx.status === 'initiated' && !signedByYou && (
+            <Button isCompact onClick={onSign} variant="outlined">
+              <Stack gap={'sm'} alignItems={'center'}>
+                <MonoSignature scale={0.5} />
+                Sign
+              </Stack>
+            </Button>
+          )}
+          {tx.status === 'initiated' && signedByYou && (
+            <Button isCompact variant="outlined" onClick={shareTx}>
+              <Stack gap={'sm'} alignItems={'center'}>
+                <MonoShare />
+                {shareClicked ? 'Copied!' : 'Share'}
+              </Stack>
+            </Button>
+          )}
+          {tx.status === 'signed' && !sendDisabled && (
+            <Button isCompact variant="outlined">
+              <Stack gap={'sm'} alignItems={'center'} onClick={onPreflight}>
+                <MonoViewInAr />
+                Preflight
+              </Stack>
+            </Button>
+          )}
+          {tx.status === 'preflight' &&
+            tx.preflight.result.status === 'success' &&
+            !sendDisabled && (
+              <Button isCompact variant="outlined">
+                <Stack gap={'sm'} alignItems={'center'} onClick={onSubmit}>
+                  <MonoViewInAr />
+                  Send
+                </Stack>
+              </Button>
+            )}
+        </Stack>
+        <Button variant="outlined" isCompact onClick={onView}>
+          <Stack gap={'sm'} alignItems={'center'}>
+            <MonoOpenInFull />
+            Expand
+          </Stack>
+        </Button>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/TxTileGeneric.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxTileGeneric.tsx
new file mode 100644
index 0000000000..8cf5ec71be
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/TxTileGeneric.tsx
@@ -0,0 +1,129 @@
+import { ITransaction } from '@/modules/transaction/transaction.repository';
+
+import { MonoCheck } from '@kadena/kode-icons/system';
+import { Button, Stack, Text } from '@kadena/kode-ui';
+
+import { IPactCommand } from '@kadena/client';
+
+import { shortenPactCode } from '@/utils/parsedCodeToPact';
+import { Value } from './helpers';
+import {
+  codeClass,
+  successClass,
+  txTileClass,
+  txTileContentClass,
+} from './style.css';
+import { TxPipeLine } from './TxPipeLine';
+
+export const TxTileGeneric = ({
+  tx,
+  contTx,
+  buttons,
+}: {
+  tx: ITransaction;
+  contTx?: ITransaction;
+  buttons: {
+    label: string;
+    onClick: () => void;
+    Icon?: React.FC<{ className?: string }>;
+    position: 'flex-start' | 'flex-end';
+  }[];
+}) => {
+  const command: IPactCommand = JSON.parse(tx.cmd);
+
+  return (
+    <Stack
+      flexDirection={'column'}
+      justifyContent={'space-between'}
+      className={txTileClass}
+      gap={'sm'}
+    >
+      <Stack flexDirection={'column'} gap={'sm'} flex={1}>
+        <TxPipeLine tx={tx} variant="tile" contTx={contTx} />
+        {
+          <>
+            {'exec' in command.payload && (
+              <>
+                <Stack
+                  gap={'sm'}
+                  flexDirection={'column'}
+                  overflow="auto"
+                  flex={1}
+                  className={txTileContentClass}
+                >
+                  <Stack>
+                    <Text size={'smallest'} className={successClass}>
+                      <Stack alignItems={'center'} gap={'xs'}>
+                        <MonoCheck />
+                        Already present in wallet
+                      </Stack>
+                    </Text>
+                  </Stack>
+
+                  <Value className={codeClass}>
+                    <span title={command.payload.exec.code}>
+                      {shortenPactCode(command.payload.exec.code)}
+                    </span>
+                  </Value>
+                </Stack>
+              </>
+            )}
+            {'cont' in command.payload && (
+              <>
+                <Stack gap={'sm'} flexDirection={'column'}>
+                  <Text>Continuation</Text>
+                  <Value>
+                    {command.payload.cont.pactId}- step(
+                    {command.payload.cont.step})
+                  </Value>
+                </Stack>
+              </>
+            )}
+          </>
+        }
+      </Stack>
+
+      <Stack justifyContent={'space-between'} flexDirection={'row'}>
+        <Stack justifyContent={'space-between'} alignItems={'flex-start'}>
+          {buttons
+            .filter((b) => b.position === 'flex-start')
+            .map(({ label, onClick, Icon }) => (
+              <>
+                <Button
+                  key={label}
+                  variant="outlined"
+                  isCompact
+                  onClick={onClick}
+                >
+                  <Stack gap={'sm'} alignItems={'center'}>
+                    {Icon && <Icon />}
+                    {label}
+                  </Stack>
+                </Button>{' '}
+              </>
+            ))}
+        </Stack>
+
+        <Stack justifyContent={'space-between'} alignItems={'flex-end'}>
+          {buttons
+            .filter((b) => b.position === 'flex-end')
+            .map(({ label, onClick, Icon }) => (
+              <>
+                <Button
+                  key={label}
+                  variant="outlined"
+                  isCompact
+                  onClick={onClick}
+                >
+                  <Stack gap={'sm'} alignItems={'center'}>
+                    {Icon && <Icon />}
+                    {label}
+                  </Stack>
+                </Button>{' '}
+              </>
+            ))}
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/helpers.tsx b/packages/apps/dev-wallet/src/pages/transaction-group/components/helpers.tsx
new file mode 100644
index 0000000000..3b717e48c8
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/helpers.tsx
@@ -0,0 +1,23 @@
+import { Text } from '@kadena/kode-ui';
+import { FC, PropsWithChildren } from 'react';
+import { labelBoldClass, labelClass } from './style.css.ts';
+
+export const Label: FC<
+  PropsWithChildren<{
+    bold?: boolean;
+    size?: 'small' | 'smallest' | 'base' | 'inherit';
+  }>
+> = ({ children, bold, size }) => (
+  <Text size={size} className={bold ? labelBoldClass : labelClass}>
+    {children}
+  </Text>
+);
+
+export const Value: FC<PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => (
+  <Text size="smallest" bold variant="code" className={className}>
+    {children}
+  </Text>
+);
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/components/style.css.ts b/packages/apps/dev-wallet/src/pages/transaction-group/components/style.css.ts
new file mode 100644
index 0000000000..67c0eca24b
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/components/style.css.ts
@@ -0,0 +1,139 @@
+import { tokens, vars } from '@kadena/kode-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const footerClass = style({
+  paddingBlockStart: '10px',
+});
+
+export const breakAllClass = style({
+  wordBreak: 'break-all',
+});
+
+export const cardClass = style({
+  padding: '10px',
+  border: `1px solid ${vars.colors.$layoutSurfaceCard}`,
+  borderRadius: '5px',
+});
+
+export const codeClass = style({
+  padding: '10px',
+  borderRadius: '3px',
+  backgroundColor: tokens.kda.foundation.color.neutral.n10,
+  flex: '1',
+  flexBasis: 0,
+});
+
+export const labelClass = style({
+  maxWidth: '200px',
+  flex: '1',
+});
+
+export const labelBoldClass = style({
+  fontWeight: '700',
+  color: tokens.kda.foundation.color.text.base.default,
+});
+
+export const containerClass = style({
+  padding: '30px',
+  border: `1px solid ${vars.colors.$layoutSurfaceCard}`,
+  borderRadius: '5px',
+  backgroundColor: tokens.kda.foundation.color.neutral.n1,
+});
+
+export const signedClass = style({
+  background: vars.colors.$positiveContrast,
+  padding: '2px 5px',
+  borderRadius: '3px',
+  fontWeight: 'bold',
+});
+
+export const readyToSignClass = style({
+  background: vars.colors.$primaryLowContrast,
+  padding: '2px 5px',
+  borderRadius: '3px',
+  fontWeight: 'bold',
+});
+
+export const tagClass = style({
+  background: vars.colors.$layoutSurfaceCard,
+  padding: '2px 5px',
+  borderRadius: '3px',
+  fontWeight: 'bold',
+});
+
+export const pendingClass = style({
+  color: vars.colors.$warningHighContrast,
+});
+
+export const successClass = style({
+  color: vars.colors.$positiveSurface,
+});
+
+export const failureClass = style({
+  color: vars.colors.$negativeAccent,
+});
+
+export const pendingText = style({
+  opacity: 0.5,
+});
+
+export const textEllipsis = style({
+  overflow: 'hidden',
+  minHeight: '2.2em',
+  // overflowY: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
+export const tabTextClass = style({
+  width: '50px',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
+export const tabClass = style({
+  borderBottom: `0px solid ${vars.colors.$infoContrast}`,
+  selectors: {
+    '&.selected': {
+      borderWidth: '2px',
+    },
+  },
+});
+
+export const txTileClass = style({
+  width: '250px',
+  height: '260px',
+  padding: '10px',
+  border: `1px solid ${vars.colors.$borderDefault}`,
+  borderRadius: '5px',
+  overflow: 'hidden',
+});
+
+export const txTileContentClass = style({
+  flexBasis: 0,
+});
+
+export const txMinimizedClass = style({
+  padding: '3px',
+  paddingLeft: '5px',
+  border: `1px solid ${tokens.kda.foundation.color.border.base.default}`,
+});
+
+export const txExpandedWrapper = style({
+  flexDirection: 'column',
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      flexDirection: 'row',
+    },
+  },
+});
+
+export const txDetailsClass = style({
+  maxWidth: '100%',
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      maxWidth: 'calc(100% - 285px)',
+    },
+  },
+});
diff --git a/packages/apps/dev-wallet/src/pages/transaction-group/style.css.ts b/packages/apps/dev-wallet/src/pages/transaction-group/style.css.ts
new file mode 100644
index 0000000000..873b9b8456
--- /dev/null
+++ b/packages/apps/dev-wallet/src/pages/transaction-group/style.css.ts
@@ -0,0 +1,18 @@
+import { vars } from '@kadena/kode-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const tabStyle = style({
+  padding: 0,
+  paddingBottom: '2px',
+  backgroundColor: 'transparent',
+  border: 'none',
+  color: vars.colors.$borderContrast,
+  borderBottom: 'solid 2px transparent',
+  cursor: 'pointer',
+  selectors: {
+    '&.selected': {
+      borderBottomColor: vars.colors.$foreground,
+      color: vars.colors.$foreground,
+    },
+  },
+});
diff --git a/packages/apps/dev-wallet/src/pages/unlock-profile/unlock-profile.tsx b/packages/apps/dev-wallet/src/pages/unlock-profile/unlock-profile.tsx
index 1bbc9d5ba7..a344fa1947 100644
--- a/packages/apps/dev-wallet/src/pages/unlock-profile/unlock-profile.tsx
+++ b/packages/apps/dev-wallet/src/pages/unlock-profile/unlock-profile.tsx
@@ -100,6 +100,7 @@ export function UnlockProfile({ origin }: { origin: string }) {
               })}
               isInvalid={!isValid && !!errors.password}
               errorMessage={errors.password?.message}
+              autoFocus
             />
           </div>
           <Stack flexDirection="column" gap="md">
diff --git a/packages/apps/dev-wallet/src/utils/transaction-scheme.ts b/packages/apps/dev-wallet/src/utils/transaction-scheme.ts
index 95db8bb7eb..c1911b4b1a 100644
--- a/packages/apps/dev-wallet/src/utils/transaction-scheme.ts
+++ b/packages/apps/dev-wallet/src/utils/transaction-scheme.ts
@@ -6,7 +6,8 @@ export type RequestScheme =
   | 'quickSignRequest'
   | 'signingRequest'
   | 'PactCommand'
-  | 'base64';
+  | 'base64'
+  | 'Array';
 
 export function determineSchema(
   input: string,