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

Author: pedroferreira1

src/components/TxData.js

@@ -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 });
   }
@@ -929,10 +929,19 @@ class TxData extends React.Component {
     }
 
     const renderArgValue = (arg) => {
-      if (arg.type === 'bytes') {
+      const typeBytesOrigin = ['bytes', 'TxOutputScript', 'TokenUid', 'VertexId'];
+      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/screens/nano/NanoContractDetail.js

@@ -31,11 +31,17 @@ function NanoContractDetail() {
   const context = useContext(GlobalModalContext);
   const wallet = getGlobalWallet();
 
-  const { nanoContracts, blueprintsData, tokenMetadata } = useSelector((state) => {
+  const {
+    nanoContracts,
+    blueprintsData,
+    tokenMetadata,
+    decimalPlaces,
+  } = useSelector((state) => {
     return {
       nanoContracts: state.nanoContracts,
       blueprintsData: state.blueprintsData,
-      tokenMetadata: state.tokenMetadata
+      tokenMetadata: state.tokenMetadata,
+      decimalPlaces: state.serverInfo.decimalPlaces,
     }
   });
 
@@ -168,12 +174,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;
   }
 
   const renderNanoAttributes = () => {