ag/dev wallet/upload file sigdata refactor

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 />} />

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 && (

packages/apps/dev-wallet/src/pages/signature-builder/ExistingTransactionList.tsx

@@ -0,0 +1,59 @@
+import { ITransaction } from '@/modules/transaction/transaction.repository';
+import { usePatchedNavigate } from '@/utils/usePatchedNavigate';
+import {
+  MonoCheck,
+  MonoRemoveCircleOutline,
+  MonoSignature,
+} from '@kadena/kode-icons/system';
+import { Box, Stack, Text } from '@kadena/kode-ui';
+import React from 'react';
+import { TxTileGeneric } from '../transaction-group/components/TxTileGeneric';
+import { successClass } from '../transaction-group/components/style.css';
+
+interface ExistingTransactionListProps {
+  transactions: ITransaction[];
+  onRemove: (tx: ITransaction) => void;
+}
+
+export const ExistingTransactionList: React.FC<
+  ExistingTransactionListProps
+> = ({ transactions, onRemove }) => {
+  const navigate = usePatchedNavigate();
+
+  if (transactions.length === 0) return null;
+
+  return (
+    <Box>
+      {transactions.map((tx) => (
+        <TxTileGeneric
+          key={tx.uuid}
+          tx={tx}
+          subtexts={[
+            () => (
+              <Text size={'smallest'} className={successClass}>
+                <Stack alignItems={'center'} gap={'xs'}>
+                  <MonoCheck />
+                  Already present in wallet
+                </Stack>
+              </Text>
+            ),
+          ]}
+          buttons={[
+            {
+              label: 'Discard',
+              Icon: () => <MonoRemoveCircleOutline />,
+              onClick: () => onRemove(tx),
+              position: 'flex-start',
+            },
+            {
+              label: 'Open',
+              onClick: () => navigate(`/transaction-group/${tx.groupId}`),
+              Icon: () => <MonoSignature />,
+              position: 'flex-end',
+            },
+          ]}
+        />
+      ))}
+    </Box>
+  );
+};

packages/apps/dev-wallet/src/pages/signature-builder/TransactionFileUpload.tsx

@@ -0,0 +1,43 @@
+import { browse, readContent } from '@/utils/select-file';
+import { Box, Button } from '@kadena/kode-ui';
+import yaml from 'js-yaml';
+import React from 'react';
+
+interface TransactionFileUploadProps {
+  onError: (message?: string) => void;
+  onProcess: (data: string) => void;
+}
+
+export const TransactionFileUpload: React.FC<TransactionFileUploadProps> = ({
+  onError,
+  onProcess,
+}) => {
+  const handleFile = async () => {
+    onError(undefined);
+    const files = await browse(true);
+    if (files && files instanceof FileList) {
+      await Promise.all(
+        Array.from(files).map(async (file) => {
+          const content = await readContent(file);
+          try {
+            // Attempt to load as YAML (which can also parse valid JSON)
+            yaml.load(content);
+
+            // If successful, we pass the raw content along for processing
+            onProcess(content);
+          } catch (e) {
+            onError('Invalid file format, unable to parse as YAML/JSON');
+          }
+        }),
+      );
+    }
+  };
+
+  return (
+    <Box>
+      <Button variant="outlined" onClick={handleFile}>
+        Add From File(s)
+      </Button>
+    </Box>
+  );
+};

packages/apps/dev-wallet/src/pages/signature-builder/TransactionInputArea.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Notification } from '@kadena/kode-ui';
+import classNames from 'classnames';
+import { codeArea } from './style.css'; // Use your existing style
+
+interface TransactionInputAreaProps {
+  input: string;
+  error?: string;
+  onChange: (val: string) => void;
+}
+
+export const TransactionInputArea: React.FC<TransactionInputAreaProps> = ({
+  input,
+  error,
+  onChange,
+}) => {
+  return (
+    <Box>
+      <textarea
+        value={input}
+        className={classNames(codeArea)}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      {error && (
+        <Notification intent="negative" role="alert">
+          {error}
+        </Notification>
+      )}
+    </Box>
+  );
+};

packages/apps/dev-wallet/src/pages/signature-builder/TransactionList.tsx

@@ -0,0 +1,41 @@
+import { ITransaction } from '@/modules/transaction/transaction.repository';
+import { MonoRemoveCircleOutline } from '@kadena/kode-icons/system';
+import { Box, Stack, Text } from '@kadena/kode-ui';
+import React from 'react';
+import { TxTileGeneric } from '../transaction-group/components/TxTileGeneric';
+
+interface TransactionListProps {
+  transactions: ITransaction[];
+  onRemove: (tx: ITransaction) => void;
+  title?: string;
+}
+
+export const TransactionList: React.FC<TransactionListProps> = ({
+  transactions,
+  onRemove,
+  title = 'Transactions to review',
+}) => {
+  if (transactions.length === 0) return null;
+
+  return (
+    <Stack flexDirection={'row'} gap={'sm'}>
+      <Box>
+        <Text>{title}</Text>
+        {transactions.map((tx) => (
+          <TxTileGeneric
+            key={tx.uuid}
+            tx={tx}
+            buttons={[
+              {
+                label: 'Discard',
+                Icon: () => <MonoRemoveCircleOutline />,
+                onClick: () => onRemove(tx),
+                position: 'flex-start',
+              },
+            ]}
+          />
+        ))}
+      </Box>
+    </Stack>
+  );
+};