fix tx status and show token contract address on transfer nft ui

Author: nachopiris

src/components/Actions.tsx

@@ -1,25 +1,23 @@
 import { Text, Table, Box } from "@mantine/core";
 import { TransactionsEntry } from "../stores/db/Transactions";
 
-export function Actions(props: { transaction: TransactionsEntry}) {
+export function Actions(props: { transaction: TransactionsEntry }) {
   const rows = props.transaction.transactions.map((element, i) => (
     <Table.Tr key={i} style={{ verticalAlign: "text-top" }}>
       <Table.Td>{element.to}</Table.Td>
       <Table.Td>{element.value || "0"}</Table.Td>
       <Table.Td>
         <Box>
-          <Text style={{ lineBreak: "anywhere"}}>
-            <p>
-            {element.data || "0x"}
-            </p>
-          </Text>
+          <Text style={{ lineBreak: "anywhere" }}>{element.data || "0x"}</Text>
         </Box>
       </Table.Td>
-      <Table.Td>{element.gasLimit || element.revertOnError ? "Auto" : "0"}</Table.Td>
+      <Table.Td>
+        {element.gasLimit || element.revertOnError ? "Auto" : "0"}
+      </Table.Td>
       <Table.Td>{element.revertOnError ? "Yes" : "No"}</Table.Td>
-      <Table.Td>{element.delegateCall ? "Yes" : "No"}</Table.Td>  
+      <Table.Td>{element.delegateCall ? "Yes" : "No"}</Table.Td>
     </Table.Tr>
-  ))
+  ));
 
   return (
     <Table>
@@ -35,5 +33,5 @@ export function Actions(props: { transaction: TransactionsEntry}) {
       </Table.Thead>
       <Table.Tbody>{rows}</Table.Tbody>
     </Table>
-  )
+  );
 }

src/components/ActionsDecoded.tsx

@@ -132,7 +132,7 @@ export function ActionsDecoded(props: { transaction: TransactionsEntry, state: {
 
   return <>
     <Space h="md" />
-    {transaction.transactions.map((action, i) => <Box>
+    {transaction.transactions.map((action, i) => <Box key={i}>
         <Title order={6}>Action #{i}</Title>
         <ActionDecode key={i} action={action} state={state} />
       </Box>

src/components/TransferNFTs.tsx

@@ -262,7 +262,7 @@ export default function TransferNFTs(args: {
                 data={[
                   { label: "Select token", value: "" },
                   ...tokenContracts.map((token) => {
-                    return { label: token.name, value: token.address };
+                    return { label: `${token.name !== "" ? token.name : "unknown"} (${token.address})`, value: token.address };
                   }),
                 ]}
                 style={{ flex: 1 }}

src/sections/Send.tsx

@@ -247,7 +247,6 @@ export function Send() {
       nonce: ethers.BigNumber.from(values.nonce).toString(),
       chainId: network.chainId.toString(),
       transactions: fromSequenceTransactions(address, actions),
-      firstSeen: Date.now(),
     };
 
     const subdigest = subdigestOf(txe);

src/sections/Transaction.tsx

@@ -68,7 +68,7 @@ export function Transaction() {
         <MiniCard title="Space" value={transaction.space} />
         <MiniCard title="Nonce" value={transaction.nonce} />
         <MiniCard title="Actions" value={transaction.transactions.length.toString()} />
-        <MiniCard title="First Seen" value={transaction.firstSeen ? new Date(transaction.firstSeen).toDateString() : "--"} />
+        <MiniCard title="First Seen" value={transaction.space ? new Date(Number(transaction.space)).toDateString() : "--"} />
       </Grid>
     </Box>
     <Box m="md">

src/sections/Transactions.tsx

@@ -42,7 +42,7 @@ export function Transactions() {
       <Table.Td>{element.space}</Table.Td>
       <Table.Td>{element.nonce}</Table.Td>
       <Table.Td>{element.transactions.length}</Table.Td>
-      <Table.Td>{element.firstSeen ? new Date(element.firstSeen).toDateString() : "--"}</Table.Td>
+      <Table.Td>{element.space ? new Date(Number(element.space)).toDateString(): "--"}</Table.Td>
       <Table.Td>
         <Button
           size="compact-sm"