Merge pull request #82 from pshenmic/feat/transaction-info

Extend the displaying of transaction info
pshenmic · Nov 6, 2023 · 98725fb · 98725fb
2 parents 9101713 + 02da9ce
commit 98725fb
Show file tree

Hide file tree

Showing 3 changed files with 256 additions and 23 deletions.
diff --git a/packages/frontend/src/routes/transaction/transaction.route.js b/packages/frontend/src/routes/transaction/transaction.route.js
@@ -1,30 +1,221 @@
-import {useLoaderData} from "react-router-dom";
-import * as Api from "../../util/Api";
-import './transaction.css'
-import {useState} from "react";
-import {getTransitionTypeString} from "../../util";
+import * as Api from '../../util/Api'
+import {Link, useLoaderData} from 'react-router-dom'
+import {useState, useEffect} from 'react'
+import {getTransitionTypeString} from '../../util'
+import {StateTransitionEnum} from "../enums/state.transition.type"
+import './transaction.scss'
 
 import { 
     Container,
-    TableContainer, Table, Thead, Tbody, Tr, Th, Td
-} from "@chakra-ui/react"
+    TableContainer, Table, Thead, Tbody, Tr, Th, Td,
+    Heading
+} from '@chakra-ui/react'
 
 
 export async function loader({params}) {
-    const {txHash} = params
+    const { txHash } = params
 
-    const transaction = await Api.getTransaction(txHash);
+    const transaction = await Api.getTransaction(txHash)
 
-    return {transaction};
+    return { transaction }
+}
+
+function TransactionData({data}) {
+    if (data === null) return <></>
+
+    if (data.type === StateTransitionEnum.DATA_CONTRACT_CREATE) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Created data contract</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Data contract</Td>
+                    <Td><Link to={`/dataContract/${data.dataContractId}`}>{data.dataContractId}</Link></Td>
+                </Tr>
+                <Tr>
+                    <Td>Owner</Td>
+                    <Td><Link to={`/identity/${data.identityId}`}>{data.identityId}</Link></Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.DOCUMENTS_BATCH) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Changed documents</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            {data.transitions.map((transition, key) => 
+                <Tbody className='TransactionData__DocumentsBatch' key={'dc' + key}>
+                    <Tr>
+                        <Td>Data contract</Td>
+                        <Td><Link to={`/dataContract/${transition.dataContractId}`}>{transition.dataContractId}</Link></Td>
+                    </Tr>
+                    <Tr>
+                        <Td>Document</Td>
+                        <Td><Link to={`/document/${transition.id}`}>{transition.id}</Link></Td>
+                    </Tr>
+                </Tbody>
+            )}
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.IDENTITY_CREATE) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Created identity</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Identity</Td>
+                    <Td><Link to={`/identity/${data.identityId}`}>{data.identityId}</Link></Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.IDENTITY_TOP_UP) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Credit top up</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Amount</Td>
+                    <Td>{data.amount} Credits</Td>
+                </Tr>
+                <Tr>
+                    <Td>Identity</Td>
+                    <Td><Link to={`/identity/${data.identityId}`}>{data.identityId}</Link></Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.DATA_CONTRACT_UPDATE) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Updated data contract</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Data contract</Td>
+                    <Td><Link to={`/dataContract/${data.dataContractId}`}>{data.dataContractId}</Link></Td>
+                </Tr>
+                <Tr>
+                    <Td>Owner</Td>
+                    <Td><Link to={`/identity/${data.identityId}`}>{data.identityId}</Link></Td>
+                </Tr>
+                <Tr>
+                    <Td>Version</Td>
+                    <Td>{data.version}</Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.IDENTITY_UPDATE) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Updated identity</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Identity</Td>
+                    <Td><Link to={`/identity/${data.identityId}`}>{data.identityId}</Link></Td>
+                </Tr>
+                <Tr>
+                    <Td>Revision</Td>
+                    <Td>{data.revision}</Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.IDENTITY_CREDIT_WITHDRAWAL) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Credit withdrawal</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Amount</Td>
+                    <Td>{data.amount} Credits</Td>
+                </Tr>
+                <Tr>
+                    <Td>Identity</Td>
+                    <Td><Link to={`/identity/${data.identityId}`}>{data.identityId}</Link></Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
+
+    if (data.type === StateTransitionEnum.IDENTITY_CREDIT_TRANSFER) {
+        return (<>
+            <Thead>
+                <Tr>
+                    <Th>Credit transfer</Th>
+                    <Th></Th>
+                </Tr>
+            </Thead>
+
+            <Tbody>
+                <Tr>
+                    <Td>Amount</Td>
+                    <Td>{data.amount} Credits</Td>
+                </Tr>
+                <Tr>
+                    <Td>Sender</Td>
+                    <Td><Link to={`/identity/${data.senderId}`}>{data.senderId}</Link></Td>
+                </Tr>
+                <Tr>
+                    <Td>Recipient</Td>
+                    <Td><Link to={`/identity/${data.recipientId}`}>{data.recipientId}</Link></Td>
+                </Tr>
+            </Tbody>
+        </>)
+    }
 }
 
 function TransactionRoute() {
-    const {transaction} = useLoaderData();
+    const { transaction } = useLoaderData()
+
+    const { hash, blockHeight, index, type, timestamp, data } = transaction
 
     const decodeTx = (tx) => {
-        if (decodedST) {
+        if (decodedST || decoding) {
             return
         }
+
         setDecoding(true)
         setDecodingError(false)
         setDecodedST(null)
@@ -33,7 +224,6 @@ function TransactionRoute() {
             .then((stateTransition) => {
                 setDecoding(false)
                 setDecodedST(stateTransition)
-                console.log(stateTransition)
             })
             .catch((e) => {
                 setDecodingError(e.message)
@@ -45,17 +235,22 @@ function TransactionRoute() {
     const [decodingError, setDecodingError] = useState(null)
     const [decodedST, setDecodedST] = useState(null)
 
+    useEffect(() => {
+        decodeTx(data)
+    }, [])
+
     return (
         <Container 
-            maxW='container.xl' 
+            maxW='container.lg' 
             p={3}
             mt={8}
         >
             <TableContainer 
                 maxW='none'
                 borderWidth='1px' borderRadius='lg'
+                mb={4}
             >
-                <Table variant='simple'>
+                <Table variant='simple' className='Table'>
                     <Thead>
                         <Tr>
                             <Th>transaction info</Th>
@@ -65,30 +260,45 @@ function TransactionRoute() {
                     <Tbody>
                         <Tr>
                             <Td>Hash</Td>
-                            <Td >{transaction.hash}</Td>
+                            <Td>{hash}</Td>
                         </Tr>
                         <Tr>
                             <Td>Height</Td>
-                            <Td >{transaction.blockHeight}</Td>
+                            <Td>{blockHeight}</Td>
                         </Tr>
                         <Tr>
                             <Td>Index</Td>
-                            <Td >{transaction.index}</Td>
+                            <Td>{index}</Td>
                         </Tr>
                         <Tr>
                             <Td>Type</Td>
-                            <Td >{getTransitionTypeString(transaction.type)}</Td>
+                            <Td>{getTransitionTypeString(type)}</Td>
                         </Tr>
                         <Tr>
                             <Td>Timestamp</Td>
-                            <Td >{new Date(transaction.timestamp).toLocaleString()}</Td>
+                            <Td>{new Date(timestamp).toLocaleString()}</Td>
                         </Tr>
-
                     </Tbody>
                 </Table>
             </TableContainer>
+
+            <Container
+                maxW='container.lg'
+                m={0}
+                borderWidth='1px' borderRadius='lg'
+                className={'InfoBlock'}
+            >
+                <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Transaction data</Heading>
+
+
+                <Table variant='simple' className='Table TransactionData'>
+
+                    <TransactionData data={decodedST}/>
+
+                </Table>
+            </Container>
         </Container>
-    );
+    )
 }
 
-export default TransactionRoute;
+export default TransactionRoute
diff --git a/...nd/src/routes/transaction/transaction.css → ...d/src/routes/transaction/transaction.scss b/...nd/src/routes/transaction/transaction.css → ...d/src/routes/transaction/transaction.scss
@@ -75,3 +75,18 @@
     flex-direction: row;
     justify-content: space-between;
 }
+
+.TransactionData {
+    &__DocumentsBatch {
+        border-bottom: var(--chakra-borders-1px);
+        border-color: var(--chakra-colors-gray-700);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    td {
+        border-bottom: none;
+    }
+}
diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss
@@ -29,4 +29,12 @@
             border-bottom: none;
         }
     }
+
+    tr {
+        &:last-child {
+            td {
+                border-bottom: none;
+            }
+        }
+    }
 }