Merge pull request #309 from HathorNetwork/dev

Release: v0.20.1
HathorNetwork · Aug 29, 2024 · 2a21404 · 2a21404
2 parents 2153b0c + 4f19b14
commit 2a21404
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 163 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -92,8 +92,8 @@ jobs:
           aws-region: eu-central-1
           role-to-assume: arn:aws:iam::471112952246:role/ExplorerGitHubActionsRole
       - name: Download node modules
-        # https://github.com/actions/download-artifact/releases/tag/v3.0.2
-        uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a
+        # https://github.com/actions/download-artifact/releases/tag/v4.1.8
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16
         with:
           name: node_modules
       - name: Build
@@ -118,8 +118,8 @@ jobs:
           aws-region: eu-central-1
           role-to-assume: arn:aws:iam::730335348496:role/ExplorerGitHubActionsRoleEkvilibroTestnet
       - name: Download node modules
-        # https://github.com/actions/download-artifact/releases/tag/v3.0.2
-        uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a
+        # https://github.com/actions/download-artifact/releases/tag/v4.1.8
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16
         with:
           name: node_modules
       - name: Build
@@ -143,8 +143,8 @@ jobs:
           aws-region: eu-central-1
           role-to-assume: arn:aws:iam::730335348496:role/ExplorerGitHubActionsRoleEkvilibroMainnet
       - name: Download node modules
-        # https://github.com/actions/download-artifact/releases/tag/v3.0.2
-        uses: actions/download-artifact@9bc31d5ccc31df68ecc42ccf4149144866c47d8a
+        # https://github.com/actions/download-artifact/releases/tag/v4.1.8
+        uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16
         with:
           name: node_modules
       - name: Build

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hathor-admin",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=10.0.0"

diff --git a/src/WebSocketHandler.js b/src/WebSocketHandler.js
@@ -12,64 +12,68 @@ const HEARTBEAT_TMO = 30000; // 30s
 
 class WS extends EventEmitter {
   constructor() {
-    if (!WS.instance) {
-      super();
-      this.connected = false;
-      this.setup();
-    }
+    super();
+    this.connected = false;
+    this.setup = this.setup.bind(this);
+    this.sendPing = this.sendPing.bind(this);
+    this.sendMessage = this.sendMessage.bind(this);
 
-    return WS.instance;
+    this.setup();
   }
 
-  setup = () => {
+  setup() {
     if (this.connected) {
       return;
     }
     console.log('ws setup');
+    this.ws = null;
     this.ws = new WebSocket(WS_URL);
 
-    this.ws.onopen = this.onOpen;
-    this.ws.onmessage = this.onMessage;
-    this.ws.onerror = this.onError;
-    this.ws.onclose = this.onClose;
-  };
+    this.ws.onopen = this.onOpen.bind(this);
+    this.ws.onmessage = this.onMessage.bind(this);
+    this.ws.onerror = this.onError.bind(this);
+    this.ws.onclose = this.onClose.bind(this);
+  }
 
-  onMessage = evt => {
+  onMessage(evt) {
     const message = JSON.parse(evt.data);
     const _type = message.type.split(':')[0];
     this.emit(_type, message);
-  };
+  }
 
-  onOpen = () => {
+  onOpen() {
     this.connected = true;
     console.log('ws connection established');
     this.heartbeat = setInterval(this.sendPing, HEARTBEAT_TMO);
-  };
+  }
 
-  onClose = () => {
+  onClose(evt) {
     this.connected = false;
-    setTimeout(this.setup, 500);
+    if (evt?.code === 1006) {
+      console.warn('Abnormal ws connection closure. Are you using a secure ws connection?');
+    }
+    setTimeout(this.setup, 5000);
     clearInterval(this.heartbeat);
     console.log('ws connection closed');
-  };
+  }
 
-  onError = evt => {
+  onError(evt) {
     console.log('ws error', evt);
-  };
+  }
 
-  sendMessage = msg => {
+  sendMessage(msg) {
     if (!this.connected) {
       console.log('ws not connected, cannot send message');
       return;
     }
 
     this.ws.send(msg);
-  };
+  }
 
-  sendPing = () => {
+  sendPing() {
     const msg = JSON.stringify({ type: 'ping' });
     this.sendMessage(msg);
-  };
+  }
 }
 
 const instance = new WS();

diff --git a/src/constants.js b/src/constants.js
@@ -57,7 +57,7 @@ export const TESTNET_GENESIS_TX = [
   '00975897028ceb037307327c953f5e7ad4d3f42402d71bd3d11ecb63ac39f01a',
 ];
 
-export const VERSION = '0.20.0';
+export const VERSION = '0.20.1';
 
 export const MIN_API_VERSION = '0.33.0';
 

diff --git a/src/screens/TransactionDetail.js b/src/screens/TransactionDetail.js
@@ -5,163 +5,98 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ReactLoading from 'react-loading';
+import hathorLib from '@hathor/wallet-lib';
+import { useParams } from 'react-router-dom';
 import TxData from '../components/tx/TxData';
 import txApi from '../api/txApi';
 import metadataApi from '../api/metadataApi';
-import hathorLib from '@hathor/wallet-lib';
 import colors from '../index.scss';
 
 /**
  * Shows the detail of a transaction or block
  *
  * @memberof Screens
  */
-class TransactionDetail extends React.Component {
-  constructor(props) {
-    super(props);
-
-    /**
-     * transaction {Object} Loaded transaction
-     *  - `transaction.meta`: Will be created by `updateTxMetadata` with data from the explorer-service metadata
-     * loaded {boolean} If had success loading transaction from the server
-     * success {boolean} If a transaction was returned from the server or an error ocurred
-     * meta {Object} Metadata of loaded transaction received from the server
-     * spentOutputs {Object} Spent outputs of loaded transaction received from the server
-     * confirmationData {Object} Confirmation data of loaded transaction received from the server
-     */
-    this.state = {
-      transaction: null,
-      meta: null,
-      spentOutputs: null,
-      loaded: false,
-      success: null,
-      confirmationData: null,
-    };
-  }
-
-  componentDidMount() {
-    this.getTx();
-  }
-
-  /**
-   * Get accumulated weight and confirmation level of the transaction
-   */
-  getConfirmationData = () => {
-    txApi.getConfirmationData(this.props.match.params.id).then(
-      data => {
-        this.setState({ confirmationData: data });
-      },
-      e => {
-        // Error in request
-        console.log(e);
-      }
-    );
-  };
+function TransactionDetail() {
+  const { id: txUid } = useParams();
 
   /**
-   * Update state after receiving the transaction response back from the server
+   * transaction {Object} Loaded transaction
+   *  - `transaction.meta`: Will be created by `updateTxMetadata` with data from the explorer-service metadata
    */
-  txReceived(data) {
-    if (data.success) {
-      this.setState({
-        transaction: data.tx,
-        meta: data.meta,
-        spentOutputs: data.spent_outputs,
-        loaded: true,
-        success: true,
-      });
-    } else {
-      this.setState({ loaded: true, success: false, transaction: null });
-    }
-  }
+  const [transaction, setTransaction] = useState(null);
+  /* meta {Object} Metadata of loaded transaction received from the server */
+  const [meta, setMeta] = useState(null);
+  /* loaded {boolean} If had success loading transaction from the server */
+  const [loaded, setLoaded] = useState(false);
+  /* spentOutputs {Object} Spent outputs of loaded transaction received from the server */
+  const [spentOutputs, setSpentOutputs] = useState(null);
+  /* confirmationData {Object} Confirmation data of loaded transaction received from the server */
+  const [confirmationData, setConfirmationData] = useState(null);
 
   /**
    * Get transaction in the server
    */
-  updateTxInfo = id => {
-    txApi.getTransaction(id).then(
-      data => {
-        this.txReceived(data);
-        if (data.success && !hathorLib.transactionUtils.isBlock(data.tx)) {
-          this.getConfirmationData();
-        }
-      },
-      e => {
-        // Error in request
-        console.log(e);
-      }
-    );
-  };
+  const updateTxInfo = useCallback(async id => {
+    const txData = await txApi.getTransaction(id);
 
-  /**
-   * Get transaction metadata from explorer service
-   */
-  updateTxMetadata = id => {
-    metadataApi.getDagMetadata(id).then(data => {
-      if (data) {
-        this.setState(oldState => {
-          return {
-            transaction: {
-              ...oldState.transaction,
-              meta: data,
-            },
-          };
-        });
-      }
-    });
-  };
+    setLoaded(true);
+    if (!txData.success) {
+      setTransaction(null);
+      setMeta(null);
+      setSpentOutputs(null);
+      setConfirmationData(null);
+      return;
+    }
 
-  /**
-   * Update transaction information when loading page
-   */
-  getTx() {
-    this.updateTxInfo(this.props.match.params.id);
-    this.updateTxMetadata(this.props.match.params.id);
-  }
+    // Update state after receiving the transaction response back from the server
+    setTransaction(txData.tx);
+    setMeta(txData.meta);
+    setSpentOutputs(txData.spent_outputs);
 
-  /**
-   * When transaction changed in the page we need to load the new one and the new confirmation data
-   */
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    if (this.props.match.params.id !== prevProps.match.params.id) {
-      this.getTx();
+    // Get accumulated weight and confirmation level of the transaction
+    if (!hathorLib.transactionUtils.isBlock(txData.tx)) {
+      const confirmationDataResponse = await txApi.getConfirmationData(id);
+      setConfirmationData(confirmationDataResponse);
+    }
+
+    // Get transaction metadata from explorer service, overwriting the one already obtained
+    const metadataResponse = await metadataApi.getDagMetadata(id);
+    if (metadataResponse) {
+      setMeta(metadataResponse);
     }
-  }
+  }, []);
 
-  render() {
-    const renderTx = () => {
-      return (
-        <div>
-          {this.state.transaction ? (
-            <TxData
-              transaction={this.state.transaction}
-              confirmationData={this.state.confirmationData}
-              spentOutputs={this.state.spentOutputs}
-              meta={this.state.meta}
-              showRaw={true}
-              showConflicts={true}
-            />
-          ) : (
-            <p className="text-danger">
-              Transaction with hash {this.props.match.params.id} not found
-            </p>
-          )}
-        </div>
-      );
-    };
+  useEffect(() => {
+    updateTxInfo(txUid).catch(e => console.error(e));
+  }, [txUid, updateTxInfo]);
 
+  const renderTx = () => {
     return (
-      <div className="flex align-items-center content-wrapper">
-        {!this.state.loaded ? (
-          <ReactLoading type="spin" color={colors.purpleHathor} delay={500} />
+      <div>
+        {transaction ? (
+          <TxData
+            transaction={transaction}
+            confirmationData={confirmationData}
+            spentOutputs={spentOutputs}
+            meta={meta}
+            showRaw={true}
+            showConflicts={true}
+          />
         ) : (
-          renderTx()
+          <p className="text-danger">Transaction with hash {txUid} not found</p>
         )}
       </div>
     );
-  }
+  };
+
+  return (
+    <div className="flex align-items-center content-wrapper">
+      {!loaded ? <ReactLoading type="spin" color={colors.purpleHathor} delay={500} /> : renderTx()}
+    </div>
+  );
 }
 
 export default TransactionDetail;