[Explorer]: Shinzohub Transactions and Transaction details

apps/explorer/.env.example

@@ -4,4 +4,4 @@ NEXT_PUBLIC_METRICS_URL=https://api.shinzo.network/metrics
 NEXT_PUBLIC_RPC_URL=https://ethereum-rpc.publicnode.com
 # Optional overrides per path: /ethereum/* vs /shinzohub/* (Shinzo chain id 91273002)
 NEXT_PUBLIC_ETHEREUM_RPC_URL=
-NEXT_PUBLIC_SHINZOHUB_RPC_URL=
+NEXT_PUBLIC_SHINZOHUB_RPC_URL=http://rpc.develop.devnet.shinzo.network:8545

apps/explorer/app/shinzohub/page.tsx

@@ -1 +1 @@
-export { HomePage as default } from '@/pages/shinzohub/home';
+export { HomePage as default } from '@/pages/shinzohub-home';

apps/explorer/app/shinzohub/tx/[hash]/page.tsx

@@ -0,0 +1 @@
+export { TransactionDetailPage as default } from '@/pages/transaction-details';

apps/explorer/app/shinzohub/txs/page.tsx

@@ -0,0 +1 @@
+export { TransactionsPage as default } from '@/pages/transactions';

apps/explorer/lib/pages/shinzohub/home/hook/use-home-blocks.ts → apps/explorer/lib/pages/shinzohub-home/hook/use-home-blocks.ts

@@ -67,7 +67,7 @@ export function useHomeBlocks({ count = 5 }: UseHomeBlocksOptions = {}) {
     return () => {
       unwatch()
     }
-  }, [count])
+  }, [count, publicClient])
 
   return { blocks, isLoading, error }
 }

apps/explorer/lib/pages/shinzohub/home/hook/use-home-transactions.ts → apps/explorer/lib/pages/shinzohub-home/hook/use-home-transactions.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { useShinzohubTransactionIndex } from '../../hook/use-shinzohub-transaction-index';
+import { useShinzohubTransactionsSync } from '@/pages/transactions/hooks/shinzohub/use-shinzohub-transactions-sync';
 
 export type TransactionSummary = {
   hash: `0x${string}`;
@@ -18,7 +18,7 @@ type UseHomeTransactionsOptions = {
 export function useHomeTransactions(
   { count, refetchIntervalMs = 10_000 }: UseHomeTransactionsOptions = {},
 ) {
-  const indexQuery = useShinzohubTransactionIndex({ refetchIntervalMs });
+  const indexQuery = useShinzohubTransactionsSync({ refetchIntervalMs });
 
   const transactions = useMemo<TransactionSummary[]>(() => {
     const indexed = indexQuery.data?.transactions ?? [];

apps/explorer/lib/pages/shinzohub/home/ui/transactions-home.tsx → apps/explorer/lib/pages/shinzohub-home/ui/transactions-home.tsx

@@ -13,6 +13,7 @@ import { useHighlight } from '@/pages/home/use-highlight';
 import { CopyButton } from '@/shared/ui/button';
 import { getPageLink } from '@/shared/utils/links';
 import { useChainPathSegment } from '@/widgets/chain-path-segment';
+import { formatTokenValue } from '@/shared/utils/format-token';
 
 export const TransactionsHome = () => {
   const { data: transactions, isLoading } = useHomeTransactions({ count: 5 });
@@ -27,11 +28,6 @@ export const TransactionsHome = () => {
     duration: 1000,
   });
 
-  const formatValue = (value: string) => {
-    const eth = Number(value) / 1e18;
-    return eth.toFixed(2);
-  };
-
   return (
     <div>
       <div className='flex'>
@@ -96,7 +92,7 @@ export const TransactionsHome = () => {
               <TableNullableCell value={tx?.value} align="center" className={highlightClass}>
                 {(value) => (
                   <div className="flex items-center gap-1 text-sm">
-                    {formatValue(value)}ETH
+                    {formatTokenValue(value, 18)} SHNZ
                   </div>
                 )}
               </TableNullableCell>

apps/explorer/lib/pages/transaction-details/use-attestations.ts → apps/explorer/lib/pages/transaction-details/hook/ethereum/use-attestations.ts

@@ -11,7 +11,7 @@ const AttestationsQuery = graphql(`
 
 export const useAttestations = (docId: string | undefined) => {
   return useQuery({
-    queryKey: ['attestations', docId],
+    queryKey: ['ethereum', 'attestations', docId],
     enabled: !!docId,
     staleTime: 60 * 1000,
     queryFn: async () => {

apps/explorer/lib/pages/transaction-details/use-decoded-log.ts → apps/explorer/lib/pages/transaction-details/hook/ethereum/use-decoded-log.ts

@@ -2,7 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import { decodeEventLog, getAddress, type AbiEvent } from 'viem';
-import { KNOWN_EVENTS } from './known-events';
+import { KNOWN_EVENTS } from '../../known-events';
 
 export interface DecodedArg {
   name: string;
@@ -124,7 +124,7 @@ export const useDecodedLog = (
   const topic0 = topics?.[0];
 
   return useQuery({
-    queryKey: ['decoded-log', topics, data],
+    queryKey: ['ethereum', 'decoded-log', topics, data],
     queryFn: async (): Promise<DecodedLog | null> => {
       if (!topic0 || !topics) return null;
 

apps/explorer/lib/pages/transaction-details/use-transaction.ts → apps/explorer/lib/pages/transaction-details/hook/ethereum/use-ethereum-transaction.ts

@@ -1,4 +1,5 @@
 import { execute, graphql } from '@/shared/graphql';
+import { useChainPathSegment } from '@/widgets/chain-path-segment';
 import { useQuery } from '@tanstack/react-query';
 
 const TransactionQuery = graphql(`
@@ -34,20 +35,21 @@ const TransactionQuery = graphql(`
   }
 `)
 
-interface UseTransactionOptions {
+interface UseEthereumTransactionOptions {
   hash: string;
 }
 
-export const useTransaction = (options: UseTransactionOptions) => {
+export const useEthereumTransaction = (options: UseEthereumTransactionOptions) => {
   const { hash } = options;
+  const chain = useChainPathSegment();
 
   return useQuery({
-    queryKey: ['transaction', hash],
+    queryKey: ['ethereum', 'transaction', hash],
     queryFn: async () => {
       const res = await execute(TransactionQuery, { hash });
       return res.Transaction?.[0] ?? null;
     },
-    enabled: !!hash,
+    enabled: chain === 'ethereum' && !!hash,
   });
 };
 

apps/explorer/lib/pages/transaction-details/use-token-metadata.ts → apps/explorer/lib/pages/transaction-details/hook/ethereum/use-token-metadata.ts

@@ -29,7 +29,7 @@ export const useTokenMetadata = (address: string | undefined) => {
   const chain = useChainPathSegment();
 
   return useQuery({
-    queryKey: ['token-metadata', chain, address],
+    queryKey: ['ethereum', 'token-metadata', chain, address],
     queryFn: async (): Promise<TokenMetadata | null> => {
       if (!address) return null;
 

apps/explorer/lib/pages/transaction-details/use-transaction-logs.ts → apps/explorer/lib/pages/transaction-details/hook/ethereum/use-transaction-logs.ts

@@ -1,7 +1,9 @@
 'use client';
 
 import { execute, graphql } from '@/shared/graphql';
+import { useChainPathSegment } from '@/widgets/chain-path-segment';
 import { useQuery } from '@tanstack/react-query';
+import { useEthereumTransaction } from './use-ethereum-transaction';
 
 const TransactionLogsQuery = graphql(`
   query TransactionLogs($hash: String) {
@@ -24,10 +26,13 @@ interface UseTransactionLogsOptions {
   enabled?: boolean;
 }
 
-export const useTransactionLogs = ({ hash, enabled = true }: UseTransactionLogsOptions) => {
+export const useTransactionLogs = ({ hash }: UseTransactionLogsOptions) => {
+  const {data: tx} = useEthereumTransaction({ hash });
+  const chain = useChainPathSegment();
+
   return useQuery({
-    queryKey: ['transaction-logs', hash],
-    enabled: !!hash && enabled,
+    queryKey: ['ethereum', 'transaction-logs', hash],
+    enabled: chain === 'ethereum' && !!hash && !!tx,
     staleTime: Infinity,
     queryFn: async () => {
       const res = await execute(TransactionLogsQuery, { hash });

apps/explorer/lib/pages/transaction-details/hook/shinzohub/use-shinzohub-block-by-blocknumber.ts

@@ -0,0 +1,16 @@
+import { getPublicClient } from "@/shared/viem/client";
+import { useQuery } from "@tanstack/react-query";
+import type { Block } from "viem";
+
+const fetchShinzohubBlockByBlockNumber = async (blockNumber: bigint): Promise<Block> => {
+  const publicClient = getPublicClient('shinzohub');
+  return publicClient.getBlock({ blockNumber });
+};
+
+export const useShinzohubBlockByBlocknumber = (blockNumber: bigint | undefined) => {
+  return useQuery<Block>({
+    queryKey: ['shinzohub', 'block-by-blocknumber', blockNumber?.toString()],
+    queryFn: () => fetchShinzohubBlockByBlockNumber(blockNumber!),
+    enabled: blockNumber != null,
+  });
+};

apps/explorer/lib/pages/transaction-details/hook/shinzohub/use-shinzohub-transaction-details.ts

@@ -0,0 +1,18 @@
+import { getPublicClient } from "@/shared/viem/client";
+import { useQuery } from "@tanstack/react-query";
+import type { Hex, Transaction } from "viem";
+
+const fetchShinzohubTransactionDetails = async (hash: Hex): Promise<Transaction> => {
+  const publicClient = getPublicClient('shinzohub');
+  const transaction = await publicClient.getTransaction({ hash });
+
+  return transaction;
+};
+
+export const useShinzohubTransactionDetails = (hash: Hex) => {
+  return useQuery<Transaction>({
+    queryKey: ['shinzohub', 'transaction-details', hash],
+    queryFn: () => fetchShinzohubTransactionDetails(hash),
+    enabled: !!hash,
+  });
+};

apps/explorer/lib/pages/transaction-details/hook/shinzohub/use-shinzohub-transaction-receipt.ts

@@ -0,0 +1,18 @@
+import { getPublicClient } from "@/shared/viem/client";
+import { useQuery } from "@tanstack/react-query";
+import type { Hex, TransactionReceipt } from "viem";
+
+const fetchShinzohubTransactionReceipt = async (hash: Hex): Promise<TransactionReceipt> => {
+  const publicClient = getPublicClient('shinzohub');
+  const receipt = await publicClient.getTransactionReceipt({ hash });
+
+  return receipt;
+};
+
+export const useShinzohubTransactionReceipt = (hash: Hex) => {
+  return useQuery<TransactionReceipt>({
+    queryKey: ['shinzohub', 'transaction-receipt', hash],
+    queryFn: () => fetchShinzohubTransactionReceipt(hash),
+    enabled: !!hash,
+  });
+};

apps/explorer/lib/pages/transaction-details/index.ts

@@ -1 +1 @@
-export { TransactionDetailPage } from './page';
+export { TransactionDetailPage } from './ui/page';

apps/explorer/lib/pages/transaction-details/attestations-tooltip.tsx → apps/explorer/lib/pages/transaction-details/ui/attestations-tooltip.tsx

@@ -1,7 +1,7 @@
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/ui/tooltip';
 import { Badge } from '@/shared/ui/badge';
 import { Typography } from '@/shared/ui/typography';
-import { useAttestations } from '@/pages/transaction-details/use-attestations';
+import { useAttestations } from '@/pages/transaction-details/hook/ethereum/use-attestations';
 
 export interface AttestationsTooltipProps {
   docId: string | undefined;

apps/explorer/lib/pages/transaction-details/transaction-card.tsx → apps/explorer/lib/pages/transaction-details/ui/ethereum-transaction-card.tsx

@@ -4,14 +4,15 @@ import type { ReactNode } from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import { CheckCircle2, XCircle } from 'lucide-react';
 import { Badge } from '@/shared/ui/badge';
-import { useTransaction } from './use-transaction';
+import { useEthereumTransaction } from '../hook/ethereum/use-ethereum-transaction';
 import { DataItem, DataList } from '@/widgets/data-list';
-import { AttestationsTooltip } from '@/pages/transaction-details/attestations-tooltip';
+import { AttestationsTooltip } from '@/pages/transaction-details/ui/attestations-tooltip';
 import { getPageLink } from "@/shared/utils/links";
 import { useChainPathSegment } from "@/widgets/chain-path-segment";
+import { Hex } from 'viem';
 
-export interface TransactionCardProps {
-  txHash: string;
+export type EthereumTransactionCardProps = {
+  txHash: Hex;
 }
 
 const TransactionStatus = ({ status, children }: { status: boolean | undefined, children: ReactNode }) => {
@@ -40,8 +41,8 @@ const TransactionStatus = ({ status, children }: { status: boolean | undefined,
   );
 };
 
-export const TransactionCard = ({ txHash }: TransactionCardProps) => {
-  const { data: tx, isLoading } = useTransaction({ hash: txHash });
+export const EthereumTransactionCard = ({ txHash }: EthereumTransactionCardProps) => {
+  const { data: tx, isLoading } = useEthereumTransaction({ hash: txHash });
   const chain = useChainPathSegment();
 
   if (!tx || !tx.hash) {

apps/explorer/lib/pages/transaction-details/page.tsx → apps/explorer/lib/pages/transaction-details/ui/page.tsx

@@ -3,8 +3,9 @@ import { Typography } from '@/shared/ui/typography';
 import { formatHash } from '@/shared/utils/format-hash';
 import { CopyButton } from '@/shared/ui/button';
 import { TxTabs } from './transaction-tabs';
+import { Hex } from 'viem';
 
-export const TransactionDetailPage = async ({ params }: { params: Promise<{ hash: string }> }) => {
+export const TransactionDetailPage = async ({ params }: { params: Promise<{ hash: Hex }> }) => {
   const { hash } = await params;
 
   return (