feat: improve UI/UX for nano state detail and tx data with new custom types (#654)

Author: pedroferreira1

package-lock.json

@@ -29,7 +29,7 @@
   },
   "private": true,
   "dependencies": {
-    "@hathor/wallet-lib": "1.8.0",
+    "@hathor/wallet-lib": "1.10.0",
     "@ledgerhq/hw-transport-node-hid": "6.28.1",
     "@reduxjs/toolkit": "2.2.3",
     "@sentry/electron": "3.0.7",

package.json

@@ -106,8 +106,8 @@ class TxData extends React.Component {
 
     const network = hathorLib.config.getNetwork();
     const ncData = this.props.transaction;
-    const deserializer = new hathorLib.NanoContractTransactionParser(ncData.nc_blueprint_id, ncData.nc_method, ncData.nc_pubkey, ncData.nc_args);
-    deserializer.parseAddress(network);
+    const deserializer = new hathorLib.NanoContractTransactionParser(ncData.nc_blueprint_id, ncData.nc_method, ncData.nc_pubkey, network, ncData.nc_args);
+    deserializer.parseAddress();
     await deserializer.parseArguments();
     this.setState({ ncDeserializer: deserializer, ncLoading: false });
   }
@@ -952,10 +952,19 @@ class TxData extends React.Component {
     }
 
     const renderArgValue = (arg) => {
-      if (arg.type === 'bytes') {
+      const typeBytesOrigin = ['bytes', 'TxOutputScript', 'TokenUid', 'VertexId', 'ContractId'];
+      if (typeBytesOrigin.includes(arg.type)) {
         return arg.parsed.toString('hex');
       }
 
+      if (arg.type === 'Timestamp') {
+        return hathorLib.dateFormatter.parseTimestamp(arg.parsed);
+      }
+
+      if (arg.type === 'Amount') {
+        return numberUtils.prettyValue(arg.parsed, this.props.decimalPlaces);
+      }
+
       return arg.parsed;
     }
 

src/components/TxData.js

@@ -32,7 +32,12 @@ function NanoContractDetail() {
   const context = useContext(GlobalModalContext);
   const wallet = getGlobalWallet();
 
-  const { nanoContracts, blueprintsData, tokenMetadata, decimalPlaces } = useSelector((state) => {
+  const {
+    nanoContracts,
+    blueprintsData,
+    tokenMetadata,
+    decimalPlaces,
+  } = useSelector((state) => {
     return {
       nanoContracts: state.nanoContracts,
       blueprintsData: state.blueprintsData,
@@ -170,12 +175,23 @@ function NanoContractDetail() {
       return get(blueprintInformation.attributes, field);
     }
 
-    // Some fields should be better parsed, e.g., timestamp, address
-    // however we don't have a simple and generic way to knowing it
-    // this was discussed and we will have this in the future, so
-    // for now we keep this UI and when we have this feature in the
-    // hathor-core, we can improve the user UI
-    return value === null ? ' - ' : value;
+    if (value == null) {
+      // If value is null or undefined, we show empty string
+      return null;
+    }
+
+    // Get type of value but removing possible optional mark (?) to format the value correctly
+    const type = blueprintInformation.attributes[field].replace('?', '');
+
+    if (type === 'Timestamp') {
+      return hathorLib.dateUtils.parseTimestamp(value);
+    }
+
+    if (type === 'Amount') {
+      return hathorLib.numberUtils.prettyValue(value, decimalPlaces);
+    }
+
+    return value;
   }
 
   /**