Merge pull request #1397 from input-output-hk/fix-explorer-sanchonet-respin

Switch explorer to run on preview & clear TVL on Finalized

Author: ffakenz

.github/workflows/explorer/docker-compose.yaml

@@ -4,7 +4,7 @@ services:
   cardano-node:
     image: ghcr.io/intersectmbo/cardano-node:8.9.0
     volumes:
-      - /srv/var/cardano/state-sanchonet:/data
+      - /srv/var/cardano/state-preview:/data
     environment:
       - CARDANO_CONFIG=/data/config.json
       - CARDANO_TOPOLOGY=/data/topology.json
@@ -19,14 +19,14 @@ services:
   hydra-explorer:
     image: ghcr.io/input-output-hk/hydra-explorer:unstable
     volumes:
-    - /srv/var/cardano/state-sanchonet:/data
+    - /srv/var/cardano/state-preview:/data
     ports:
       - "80:8080"
     command:
       [ "--node-socket", "/data/node.socket"
-      , "--testnet-magic", "4"
+      , "--testnet-magic", "2"
       , "--api-port", "8080"
       # NOTE: Block in which current master scripts were published
-      , "--start-chain-from", "21830575.4fa28d6c6f6541fd5c73d715d69f3dd7751e7b4d7dc1213cb02d30c5a0db609b"
+      , "--start-chain-from", "45386581.4a362bfca7cf840575c17b6cbb531588bc8e907beb5a6a28890877fb16be1cd3"
       ]
     restart: always

hydra-explorer/web/.env

@@ -0,0 +1 @@
+NETWORK_URL=preview

hydra-explorer/web/next.config.mjs

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export'
-  };
+  output: 'export',
+  env: {
+    NETWORK_URL: process.env.NETWORK_URL
+  },
+};
 
 export default nextConfig;

hydra-explorer/web/src/app/page.tsx

@@ -7,9 +7,11 @@ import TickBox from "@/components/TickBox"
 import HeadsTable from "@/components/HeadsTable"
 import { HeadsDataProvider } from "@/providers/HeadsDataProvider"
 import HeadsDashboard from "@/components/HeadsDashboard"
+import { CardanoExplorerProvider } from "@/providers/CardanoExplorer"
 
 
 export default function Home() {
+
   return (
     <main className="items-center">
       <div className="">
@@ -42,16 +44,20 @@ export default function Home() {
                 </div>
               </div>
 
-              <div className="flex items-start space-x-4">
-                <div>
-                  <TickBox />
-                </div>
-                <div>
-                  <IntervalSetter />
+              <CardanoExplorerProvider network={process.env.NETWORK_URL || "preview"}>
+                <div className="flex items-start space-x-4">
+                  <div>
+                    <TickBox />
+                  </div>
+                  <div>
+                    <IntervalSetter />
+                  </div>
+
                 </div>
+                <HeadsTable />
+              </CardanoExplorerProvider>
+
 
-              </div>
-              <HeadsTable />
             </HeadsDataProvider>
           </div>
 

hydra-explorer/web/src/components/HeadDetails/index.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect } from 'react'
 import { HeadState, HeadMember } from '@/app/model'
 import MemberCommitDetails from '../MemberCommitDetails'
+import { useCardanoExplorer } from '@/providers/CardanoExplorer'
 
 interface HeadDetailsProps {
     head: HeadState
@@ -36,6 +37,8 @@ const HeadDetails: React.FC<HeadDetailsProps> = ({ head, onClose }) => {
         }
     }, [onClose, showMemberCommitDetails])
 
+    const explorer = useCardanoExplorer()
+
     return (
         <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50">
             <div className="bg-gray-800 p-6 rounded-lg shadow-xl relative overflow-auto max-h-screen">
@@ -50,17 +53,23 @@ const HeadDetails: React.FC<HeadDetailsProps> = ({ head, onClose }) => {
                     <div className="border p-4">
                         <h3 className="text-lg font-semibold mb-2">Head ID</h3>
                         <p>
-                            <a href={`https://sancho.cexplorer.io/policy/${head.headId}/mint`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                            <a href={explorer.mintPolicy(head.headId)} target="_blank" className="text-blue-300 hover:text-blue-500">
                                 {head.headId}
                             </a>
                         </p>
                     </div>
                     <div className="border p-4">
                         <h3 className="text-lg font-semibold mb-2">Seed Tx In</h3>
                         <p>
-                            <a href={`https://sancho.cexplorer.io/tx/${head.seedTxIn}`} target="_blank" className="text-blue-300 hover:text-blue-500">
-                                {head.seedTxIn}
-                            </a>
+                            {head.seedTxIn && (
+                                <a
+                                    href={explorer.tx(head.seedTxIn)}
+                                    target="_blank"
+                                    className="text-blue-300 hover:text-blue-500"
+                                >
+                                    {head.seedTxIn}
+                                </a>
+                            )}
                         </p>
                     </div>
                     <div className="border p-4">
@@ -86,7 +95,7 @@ const HeadDetails: React.FC<HeadDetailsProps> = ({ head, onClose }) => {
                     <div className="border p-4">
                         <h3 className="text-lg font-semibold mb-2">Point</h3>
                         <p>
-                            Block Hash: <a href={`https://sancho.cexplorer.io/block/${head.point.blockHash}`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                            Block Hash: <a href={explorer.block(head.point.blockHash)} target="_blank" className="text-blue-300 hover:text-blue-500">
                                 {head.point.blockHash}
                             </a> <br />
                             Slot: {head.point.slot}

hydra-explorer/web/src/components/HeadsTable/index.tsx

@@ -5,6 +5,7 @@ import { HeadState } from "@/app/model"
 import { useHeadsData } from "@/providers/HeadsDataProvider"
 import HeadDetails from "../HeadDetails"
 import { totalLovelaceValueLocked } from '@/utils'
+import { useCardanoExplorer } from '@/providers/CardanoExplorer'
 
 const HeadsTable: React.FC = () => {
     const { heads, error } = useHeadsData()
@@ -14,6 +15,8 @@ const HeadsTable: React.FC = () => {
         setSelectedHead(head)
     }
 
+    const explorer = useCardanoExplorer()
+
     return (
         <div className="container mx-auto mt-12 overflow-y-auto">
             {error ? (
@@ -36,15 +39,15 @@ const HeadsTable: React.FC = () => {
                             {heads?.sort((a, b) => b.blockNo - a.blockNo).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">
-                                        <a href={`https://sancho.cexplorer.io/policy/${head.headId}/mint`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                                        <a href={explorer.mintPolicy(head.headId)} target="_blank" className="text-blue-300 hover:text-blue-500">
                                             {head.headId}
                                         </a>
                                     </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">
-                                        <a href={`https://sancho.cexplorer.io/block/${head.point.blockHash}`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                                        <a href={explorer.block(head.point.blockHash)} target="_blank" className="text-blue-300 hover:text-blue-500">
                                             {head.point.blockHash}
                                         </a>
                                     </td>

hydra-explorer/web/src/components/MemberCommitDetails/index.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect } from 'react'
 import { HeadMember } from '@/app/model'
+import { useCardanoExplorer } from '@/providers/CardanoExplorer'
 
 interface MemberCommitDetailsProps {
   member: HeadMember
@@ -23,6 +24,8 @@ const MemberCommitDetails: React.FC<MemberCommitDetailsProps> = ({ member, onClo
     }
   }, [onClose])
 
+  const explorer = useCardanoExplorer()
+
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 z-50">
       <div className="bg-gray-800 p-6 rounded-lg shadow-xl relative">
@@ -50,12 +53,12 @@ const MemberCommitDetails: React.FC<MemberCommitDetailsProps> = ({ member, onClo
                     return (
                       <tr key={index} className={`${index % 2 === 0 ? 'bg-gray-700' : 'bg-gray-600'}`}>
                         <td className="truncate text-center border px-4 py-2">
-                          <a href={`https://sancho.cexplorer.io/tx/${txId}`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                          <a href={explorer.tx(txId)} target="_blank" className="text-blue-300 hover:text-blue-500">
                             {txId}
                           </a>#{txIx}
                         </td>
                         <td className="truncate text-center border px-4 py-2">
-                          <a href={`https://sancho.cexplorer.io/address/${commit.address}`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                          <a href={explorer.address(commit.address)} target="_blank" className="text-blue-300 hover:text-blue-500">
                             {commit.address}
                           </a>
                         </td>

hydra-explorer/web/src/components/TickBox/index.tsx

@@ -2,6 +2,7 @@
 
 import { TickState } from "@/app/model"
 import useDataFetcher from "@/hooks/DataFetcher"
+import { useCardanoExplorer } from "@/providers/CardanoExplorer"
 import { useState } from "react"
 
 const TickBox = () => {
@@ -14,6 +15,8 @@ const TickBox = () => {
         setError,
     })
 
+    const explorer = useCardanoExplorer()
+
     return (
         <div className="container mx-auto mt-8">
             {error ? (
@@ -33,7 +36,7 @@ const TickBox = () => {
                                 <tr>
                                     <td className="truncate text-center border px-4 py-2">{tick?.blockNo}</td>
                                     <td className="truncate text-center border px-4 py-2">
-                                        <a href={`https://sancho.cexplorer.io/block/${tick?.point.blockHash}`} target="_blank" className="text-blue-300 hover:text-blue-500">
+                                        <a href={explorer.block(tick?.point.blockHash)} target="_blank" className="text-blue-300 hover:text-blue-500">
                                             {tick?.point.blockHash}
                                         </a>
                                     </td>

hydra-explorer/web/src/providers/CardanoExplorer/index.tsx

@@ -0,0 +1,41 @@
+"use client" // This is a client component 👈🏽
+
+import React, { PropsWithChildren, useContext } from "react"
+
+export interface CardanoExplorer {
+    mintPolicy: (policyId: string) => string
+    tx: (txIn: string) => string
+    block: (blockHash: string) => string
+    address: (addr: string) => string
+}
+
+const CardanoExplorerContext: React.Context<CardanoExplorer> =
+    React.createContext({} as CardanoExplorer)
+
+export const useCardanoExplorer = () => {
+    const context = useContext(CardanoExplorerContext)
+    if (!context) {
+        throw new Error("useCardanoExplorer must be used within a CardanoExplorerProvider")
+    }
+    return context
+}
+
+export type CardanoExplorerProps = {
+    network: string
+}
+
+export const CardanoExplorerProvider: React.FC<PropsWithChildren<CardanoExplorerProps>> =
+    ({ network, children }) => {
+        const cexplorer: CardanoExplorer = {
+            mintPolicy: (policyId: string) => `https://${network}.cexplorer.io/policy/${policyId}/mint`,
+            tx: (txIn: string) => `https://${network}.cexplorer.io/tx/${txIn}`,
+            block: (blockHash: string) => `https://${network}.cexplorer.io/block/${blockHash}`,
+            address: (addr: string) => `https://${network}.cexplorer.io/address/${addr}`
+        }
+
+        return (
+            <CardanoExplorerContext.Provider value={cexplorer}>
+                {children}
+            </CardanoExplorerContext.Provider>
+        )
+    }

hydra-explorer/web/src/providers/HeadsDataProvider/index.tsx

@@ -12,7 +12,13 @@ export interface HeadsDataService {
 const HeadsDataContext: React.Context<HeadsDataService> =
   React.createContext({} as HeadsDataService)
 
-export const useHeadsDataContext = () => useContext(HeadsDataContext)
+export const useHeadsDataContext = () => {
+  const context = useContext(HeadsDataContext)
+  if (!context) {
+      throw new Error("useHeadsDataContext must be used within a HeadsDataProvider")
+  }
+  return context
+}
 
 export const HeadsDataProvider: React.FC<any> = ({
     children

hydra-explorer/web/src/providers/IntervalProvider/index.tsx

@@ -12,7 +12,13 @@ export interface IntervalSettingService {
 const IntervalContext: React.Context<IntervalSettingService> =
     React.createContext({} as IntervalSettingService)
 
-export const useIntervalContext = () => useContext(IntervalContext)
+export const useIntervalContext = () => {
+    const context = useContext(IntervalContext)
+    if (!context) {
+        throw new Error("useIntervalContext must be used within a IntervalSettingProvider")
+    }
+    return context
+}
 
 const IntervalSettingProvider: React.FC<any> = ({
     children

hydra-explorer/web/src/utils.tsx

@@ -1,12 +1,14 @@
 import { HeadState } from "./app/model"
 
 export const totalLovelaceValueLocked = (head: HeadState) => {
+    if (head.status == "Finalized" || head.status == "Aborted" ) return 0
     return (head.members || []).reduce((total, member) => {
         if (member.commits && Object.keys(member.commits).length > 0) {
-            return total + Object.values(member.commits).reduce((memberTotal, commit) => {
+            const memberTotal = Object.values(member.commits).reduce((memberTotal, commit) => {
                 return memberTotal + commit.value.lovelace
             }, 0)
+            return total + memberTotal
         }
         return total
     }, 0)
-}
+}