List transactions based on 'serialized' format

Signed-off-by: Patrik Stas <patrik.stas@gmail.com>
Patrik-Stas · Sep 7, 2022 · d0dfea6 · d0dfea6
1 parent e8de991
commit d0dfea6
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 151 deletions.
diff --git a/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js b/indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js
@@ -17,7 +17,7 @@ export function BadgedValueDisplay (props) {
                < span className="tooltiptext">Copied</span>
             }
             <Icon data-tip data-for="registerTip"
-                  name='copy outline icon'
+                  name='copy outline'
                   style={{ cursor: 'pointer', marginRight: '1em' }}
                   onClick={() => {
                     navigator.clipboard.writeText(value)

diff --git a/indyscan-webapp/components/TxDisplay/TxDisplay.js b/indyscan-webapp/components/TxDisplay/TxDisplay.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import './TxDisplay.scss'
 import {
-  Button,
-  GridRow, Icon,
+  GridRow,
   Item,
   ItemContent,
   ItemDescription,
@@ -17,8 +16,12 @@ import { BadgedValueDisplay } from '../BadgedValueDisplay/BadgedValueDisplay'
 
 
 
-const TxDisplay = ({ txIndyscan, txLedger }) => {
-  const keyValTxDetailsHumanReadable = extractTxDataDetailsHumanReadable(txIndyscan)
+const TxDisplay = ({ txIndyscan }) => {
+  const txExpansion = txIndyscan?.idata?.expansion
+  if (!txExpansion) {
+    return <div/>
+  }
+  const keyValTxDetailsHumanReadable = extractTxDataDetailsHumanReadable(txExpansion)
   const keyValTxBasic = extractTxDataBasic(txIndyscan)
   const { txnTimeIso8601, typeName } = keyValTxBasic // eslint-disable-line
   const keyValBasicHumanReadable = converTxDataBasicToHumanReadable(keyValTxBasic)

diff --git a/indyscan-webapp/components/TxListCompact/TxListCompact.js b/indyscan-webapp/components/TxListCompact/TxListCompact.js
@@ -25,7 +25,6 @@ class TxListCompact extends Component {
                 network={this.props.network}
                 ledger={this.props.ledger}
                 txn={txn}
-                description='Todo'
               />
             )
           })}

diff --git a/indyscan-webapp/components/TxListItem/TxListItem.js b/indyscan-webapp/components/TxListItem/TxListItem.js
@@ -27,9 +27,14 @@ class TxListItem extends Component {
   render () {
     const { baseUrl, description, ledger, network, txn } = this.props
     const { seqNo, txnTimeIso8601, typeName, from } = extractTxDataBasic(txn)
-    const data = extractTxDataDetailsHumanReadable(txn, 5)
     const { href, as } = getTxLinkData(baseUrl, network, ledger, seqNo)
-    const filteredData = filterTxDetails(data)
+    let filteredData
+    try {
+      const data = extractTxDataDetailsHumanReadable(txn, 5)
+      filteredData = filterTxDetails(data)
+    } catch (err) {
+
+    }
     return (
       <TableRow className='txListItem' style={{ fontSize: '0.8em', height: '100%' }}>
         <TableCell><Link href={href} as={as}><a>{seqNo}</a></Link></TableCell>
@@ -45,7 +50,7 @@ class TxListItem extends Component {
           <TimeAgoText sinceEpoch={new Date(txnTimeIso8601)} className='txlistitem-graytext'/>
         </TableCell>
         <TableCell>{from}</TableCell>
-        <TableCell>{renderKeyValuesAsBadges(seqNo, filteredData, palette[2])}</TableCell>
+        <TableCell>{filteredData && renderKeyValuesAsBadges(seqNo, filteredData, palette[2])}</TableCell>
       </TableRow>
     )
   }

diff --git a/indyscan-webapp/components/TxPreview/TxPreview.js b/indyscan-webapp/components/TxPreview/TxPreview.js
@@ -15,44 +15,22 @@ class TxPreview extends Component {
     this.state = {}
   }
 
-  calculateTimeSinceLastTransaction = function calculateTimeSinceLastTransaction (expansionTx) {
-    const txnTime = (expansionTx.idata && expansionTx.idata.txnMetadata) ?
-      (Date.parse(expansionTx.idata.txnMetadata.txnTime))
-      : undefined
-    const utimeNow = Math.floor(new Date())
-    return secondsToDhms((utimeNow - txnTime) / 1000)
-  }
-
-  refreshTimesSinceLast () {
-    let sinceSinceTx = this.calculateTimeSinceLastTransaction(this.props.indyscanTx)
-    sinceSinceTx = (sinceSinceTx) ? sinceSinceTx : 'Unknown'
-    this.setState({ sinceSinceTx })
-  }
-
-  componentDidMount () {
-    this.refreshTimesSinceLast()
-    this.interval = setInterval(this.refreshTimesSinceLast.bind(this), 1000)
-  }
-
-  componentWillUnmount () {
-    clearInterval(this.interval)
-  }
-
   render () {
-    const { baseUrl, network, ledger, indyscanTx } = this.props
-    const { seqNo, txnTimeIso8601, typeName, from } = extractTxDataBasic(indyscanTx)
+    const { baseUrl, network, ledger, seqNo, txnTimeIso8601, typeName, from } = this.props
     const href = `${baseUrl}/tx?network=${network}&ledger=${ledger}&seqNo=${seqNo}`
     const as = `/tx/${network}/${ledger}/${seqNo}`
     const fromDidDisplayed = from
       ? (from.length < MAX_DID_LENTH) ? from : `${from.substring(0, (MAX_DID_LENTH - 3))}...`
       : 'N/A'
-    // const utcTime = moment.utc(txnTimeIso8601).format('do MMMM YYYY, H:mm:ss')
     let txnDateLocalString = "N/A"
-    let txnDate
-    if (indyscanTx.idata && indyscanTx.idata.txnMetadata && indyscanTx.idata.txnMetadata.txnTime) {
-      txnDate =  new Date(indyscanTx.idata.txnMetadata.txnTime)
-      txnDateLocalString = moment.utc(txnTimeIso8601).tz(moment.tz.guess()).format('DD MMMM YYYY, HH:mm:ss a')
+    // let utcDateString = "N/A"
+    const sinceEpoch = txnTimeIso8601 ? (Date.parse(txnTimeIso8601)) : null
+    if (txnTimeIso8601) {
+      txnDateLocalString = moment.utc(txnTimeIso8601).tz(moment.tz.guess()).format('do MMMM YYYY, HH:mm:ss a')
+      // todo: display this
+      // utcDateString = moment.utc(txnTimeIso8601).format('do MMMM YYYY, HH:mm:ss a')
     }
+    console.log(`txnTimeIso8601 = ${txnTimeIso8601}, sinceEpoch=${sinceEpoch}`)
 
     return (
 
@@ -66,7 +44,7 @@ class TxPreview extends Component {
         <div style={{ marginTop: '0.6em', fontSize: '0.85em' }}>
           <span style={{ display: 'block' }}><b>From  DID: </b>{fromDidDisplayed}</span>
           <span style={{ display: 'block', marginBottom: '0.1em' }}><b>Local Time:</b> {txnDateLocalString}</span>
-          <TimeAgoText sinceEpoch={txnDate} className='txitem-graytext' style={{ display: 'block' }}/>
+          <TimeAgoText sinceEpoch={sinceEpoch} className='txitem-graytext' style={{ display: 'block' }}/>
         </div>
       </div>
 

diff --git a/indyscan-webapp/components/TxPreviewList/TxPreviewList.js b/indyscan-webapp/components/TxPreviewList/TxPreviewList.js
@@ -19,23 +19,29 @@ class TxPreviewList extends Component {
 
   render () {
     const { indyscanTxs, network, subledger, animateFirst } = this.props
-    const firstTx = indyscanTxs[0]
+    const { seqNo, txnTimeIso8601, typeName, from } = extractTxDataBasic(indyscanTxs[0])
     return (
       <ItemGroup>
-        {firstTx &&
-        <CSSTransition key={firstTx.imeta.seqNo} appear={animateFirst} in={true} timeout={1000} classNames="txitem">
-          <TxPreview key={`preview-${network}-${subledger}-xyz`}
-                     indyscanTx={firstTx}
-                     network={network}
-                     ledger={subledger}/>
-        </CSSTransition>
+        {seqNo &&
+          <CSSTransition key={seqNo} appear={animateFirst} in={true} timeout={1000} classNames="txitem">
+            <TxPreview key={`preview-${network}-${subledger}-xyz`}
+                       seqNo={seqNo}
+                       txnTimeIso8601={txnTimeIso8601}
+                       typeName={typeName}
+                       from={from}
+                       network={network}
+                       ledger={subledger}/>
+          </CSSTransition>
         }
         {
           indyscanTxs.slice(1).map((indyscanTx, index) => {
-            const { seqNo } = extractTxDataBasic(indyscanTx)
+            const { seqNo, txnTimeIso8601, typeName, from } = extractTxDataBasic(indyscanTx)
             return (
               <TxPreview key={`preview-${network}-${subledger}-${seqNo}`}
-                         indyscanTx={indyscanTx}
+                         seqNo={seqNo}
+                         txnTimeIso8601={txnTimeIso8601}
+                         typeName={typeName}
+                         from={from}
                          network={network}
                          ledger={subledger}/>
             )

diff --git a/indyscan-webapp/context/socket-client.js b/indyscan-webapp/context/socket-client.js
@@ -3,12 +3,20 @@ import io from 'socket.io-client'
 
 let socketClient
 
-function getWebsocketClient () {
+function assureWebsocketClient () {
   if (socketClient) {
     return socketClient
   }
   socketClient = io.connect('')
   return socketClient
 }
 
-export default getWebsocketClient
+
+function getWebsocketClient () {
+  return socketClient
+}
+
+export {
+  assureWebsocketClient,
+  getWebsocketClient
+}
diff --git a/indyscan-webapp/nodemon.json b/indyscan-webapp/nodemon.json
@@ -4,8 +4,7 @@
   "watch": ["server/**/*", "index.js"],
   "ext": "js json",
   "env": {
-    "INDYSCAN_API_URL": "http://localhost:3708",
-    "DAEMON_WS_URL": "http://localhost:3709",
+    "INDYSCAN_API_URL": "https://indyscan.io",
     "PORT" : 3707,
     "LOG_LEVEL": "debug",
     "LOG_HTTP_REQUESTS" : true,

diff --git a/indyscan-webapp/package.json b/indyscan-webapp/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "standard",
     "lint:fix": "standard --fix",
-    "dev": "nodemon server/index.js",
+    "dev": "NODE_OPTIONS='--inspect' nodemon server/index.js",
     "test:unit": "jest tests/unit",
     "build": "next build",
     "start": "next start",