From 6903f6f10fcb2052a94b26827df56eecbfa61201 Mon Sep 17 00:00:00 2001
From: Franco Testagrossa <franco.testagrossa@gmail.com>
Date: Wed, 6 Mar 2024 22:03:11 -0300
Subject: [PATCH] Add utils to calculate totalValueLocked in lovelace

---
 .../src/components/HeadsDashboard/index.tsx   | 12 ++------
 .../web/src/components/HeadsTable/index.tsx   | 29 ++++++-------------
 hydra-explorer/web/src/utils.tsx              | 13 +++++++++
 3 files changed, 24 insertions(+), 30 deletions(-)
 create mode 100644 hydra-explorer/web/src/utils.tsx

diff --git a/hydra-explorer/web/src/components/HeadsDashboard/index.tsx b/hydra-explorer/web/src/components/HeadsDashboard/index.tsx
index 382fb70adb9..91e3a24290d 100644
--- a/hydra-explorer/web/src/components/HeadsDashboard/index.tsx
+++ b/hydra-explorer/web/src/components/HeadsDashboard/index.tsx
@@ -1,6 +1,7 @@
 "use client" // This is a client component 👈🏽
 
 import { useHeadsData } from '@/providers/HeadsDataProvider'
+import { totalLovelaceValueLocked } from '@/utils'
 import React from 'react'
 
 const HeadsDashboard = () => {
@@ -8,16 +9,7 @@ const HeadsDashboard = () => {
 
     const totalHeads = heads.length
 
-    let totalLockedMoney = 0
-    heads.forEach(head => {
-        head.members?.forEach((member) => {
-            if (member.commits && Object.keys(member.commits).length > 0) {
-                Object.values(member.commits).forEach((commit) => {
-                    totalLockedMoney += (commit.value.lovelace) 
-                })
-            }
-        })
-    })
+    const totalLockedMoney = heads.reduce((total, head) => total + totalLovelaceValueLocked(head), 0)
 
     return (
         <div style={{ maxWidth: 'fit-content' }}>
diff --git a/hydra-explorer/web/src/components/HeadsTable/index.tsx b/hydra-explorer/web/src/components/HeadsTable/index.tsx
index 36de252650d..7a3022c9dd2 100644
--- a/hydra-explorer/web/src/components/HeadsTable/index.tsx
+++ b/hydra-explorer/web/src/components/HeadsTable/index.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import { HeadState } from "@/app/model"
 import { useHeadsData } from "@/providers/HeadsDataProvider"
 import HeadDetails from "../HeadDetails"
+import { totalLovelaceValueLocked } from '@/utils'
 
 const HeadsTable: React.FC = () => {
     const { heads, error } = useHeadsData()
@@ -13,18 +14,6 @@ const HeadsTable: React.FC = () => {
         setSelectedHead(head)
     }
 
-    const totalValueLocked = (head: HeadState) => {
-        let totalLockedMoney = 0
-        head.members?.forEach((member) => {
-            if (member.commits && Object.keys(member.commits).length > 0) {
-                Object.values(member.commits).forEach((commit) => {
-                    totalLockedMoney += (commit.value.lovelace) 
-                })
-            }
-        })
-        return totalLockedMoney;
-    }
-
     return (
         <div className="container mx-auto mt-12">
             {error ? (
@@ -44,18 +33,18 @@ const HeadsTable: React.FC = () => {
                             </tr>
                         </thead>
                         <tbody>
-                            {heads?.map((entry, index) => (
+                            {heads?.map((head, index) => (
                                 <tr key={index} className={`${index % 2 === 0 ? 'bg-gray-700' : 'bg-gray-600'}`}>
-                                    <td className="truncate text-center border px-4 py-2">{entry.headId}</td>
-                                    <td className="truncate text-center border px-4 py-2">{entry.status}</td>
-                                    <td className="truncate text-center border px-4 py-2">{entry.point.slot}</td>
-                                    <td className="truncate text-center border px-4 py-2">{entry.blockNo}</td>
-                                    <td className="truncate text-center border px-4 py-2">{entry.point.blockHash}</td>
-                                    <td className="truncate text-center border px-4 py-2">{totalValueLocked(entry) / 1000000} ₳</td>
+                                    <td className="truncate text-center border px-4 py-2">{head.headId}</td>
+                                    <td className="truncate text-center border px-4 py-2">{head.status}</td>
+                                    <td className="truncate text-center border px-4 py-2">{head.point.slot}</td>
+                                    <td className="truncate text-center border px-4 py-2">{head.blockNo}</td>
+                                    <td className="truncate text-center border px-4 py-2">{head.point.blockHash}</td>
+                                    <td className="truncate text-center border px-4 py-2">{totalLovelaceValueLocked(head) / 1000000} ₳</td>
                                     <td className="text-center border px-4 py-2">
                                         <button
                                             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                                            onClick={() => handleRowClick(entry)}
+                                            onClick={() => handleRowClick(head)}
                                         >
                                             Details
                                         </button>
diff --git a/hydra-explorer/web/src/utils.tsx b/hydra-explorer/web/src/utils.tsx
new file mode 100644
index 00000000000..ea62f8d02d5
--- /dev/null
+++ b/hydra-explorer/web/src/utils.tsx
@@ -0,0 +1,13 @@
+import { HeadState } from "./app/model"
+
+export const totalLovelaceValueLocked = (head: HeadState) => {
+    let totalLockedMoney = 0
+    head.members?.forEach((member) => {
+        if (member.commits && Object.keys(member.commits).length > 0) {
+            Object.values(member.commits).forEach((commit) => {
+                totalLockedMoney += (commit.value.lovelace)
+            })
+        }
+    })
+    return totalLockedMoney
+}
\ No newline at end of file