[Explorer]: Shinzohub Transactions and Transaction details by NiranjanaBinoy · Pull Request #231 · shinzonetwork/web

NiranjanaBinoy · 2026-05-27T21:31:44Z

Pull Request

Description

The PR uses the existing transactions and transaction-details components for Shinzohub.

Changes

I reorganized the component paths for more clarity in this PR, the components under @page/shinzohub/home are moved to @page/shinzohub-home avoiding an extra step in the folder structure. These files does not have any new changes, they only reflect the path changes.
The files in the transactions and transaction-details folders are organized to /hook and /ui folders respectively.
Inside the /hook folder, all the existing ethereum based hooks are moved to ethereum folder and shinzohub related hooks are in the shinzohub folder.
In the /ui folder, we have reused most of the components, in transactions I have updated the page.tsx to call the chain based page clients and introduced EthereumTransactionsPageClient and ShinzohubTransactionsPageClient for chain specific data rendering.
Similarly in transaction-details I have EthereumTransactionCard and ShinzohubTransactionCard which uses teh respective hooks to fetch the related data to be displayed.

Related Issue

fixes #161

Steps to Test

Worker urls => https://feat-shinzohub-txns-shinzo-explorer.shinzo-492.workers.dev/shinzohub/txs
https://feat-shinzohub-txns-shinzo-explorer.shinzo-492.workers.dev/shinzohub/tx/--hash value --

Pull branch locally and NEXT_PUBLIC_SHINZOHUB_RPC_URL=http://rpc.develop.devnet.shinzo.network:8545 to the .env file
Run the app or service
Load http://localhost:3000/shinzohub/txs to get transactiosn list.
Load http://localhost:3000/shinzohub/tx/-txhash- to get the transactions details.

Checklist

Code compiles / runs
Tests added / updated
Documentation updated if needed
PR is self-contained and focused
Code does not break any existing features
Code passes personal internal testing

Notes

cloudflare-workers-and-pages · 2026-05-27T21:33:22Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	shinzo-explorer	`547cf18`	Commit Preview URL Branch Preview URL	Jun 09 2026, 06:05 PM

NiranjanaBinoy · 2026-06-02T05:12:18Z

      unwatch()
    }
-  }, [count])
+  }, [count, publicClient])


Lint warning fix

NiranjanaBinoy · 2026-06-02T05:12:59Z


 import { useMemo } from 'react';
-import { useShinzohubTransactionIndex } from '../../hook/use-shinzohub-transaction-index';
+import { useShinzohubTransactionsSync } from '@/pages/transactions/hooks/shinzohub/use-shinzohub-transactions-sync';


Existing hook is renamed for clarity

NiranjanaBinoy · 2026-06-02T05:15:50Z

-    queryKey: ['transaction-logs', hash],
-    enabled: !!hash && enabled,
+    queryKey: ['ethereum', 'transaction-logs', hash],
+    enabled: chain === 'ethereum' && !!hash && !!tx,


to make sure the api fetch call happens only for ethereum not shinzohub.

why could it possibly be called on shinzohub-related pages? Do you have this hook usages running globally? I imagine that ethereum-related hooks shouldn't even be called on shinzohub pages

suggestion: refactor it in a way that the hook doesn't depend on useChainPathSegment hook. It should only be called in the pages where it is actually needed

NiranjanaBinoy · 2026-06-02T05:20:41Z

@@ -0,0 +1,209 @@
+'use client';
+


This is a new component added for Shinzohub transaction details; It fetches data from Shinzohub specific hooks and use DataList to display i, same as in EthereumTransactionCard.

NiranjanaBinoy · 2026-06-02T05:26:30Z

+    case 'ethereum':
+      return <TransactionLogs txHash={hash} />;
+    default:
+      return null;


Making sure the transcationlogs get rendered for only ethereum network.

NiranjanaBinoy · 2026-06-02T05:26:59Z

+    case 'shinzohub':
+      return <ShinzohubTransactionCard txHash={hash} />;
+    default:
+      return null;


Switch based on chain to render the appropriate transaction card.

NiranjanaBinoy · 2026-06-02T05:27:47Z

 import { getPublicClient } from '@/shared/viem/client';
 import type { Transaction } from 'viem';

-const TX_INDEX_QUERY_KEY = ['shinzohub', 'transaction-index'] as const;


Most of the changes in this hook is renaming the variables for clarity

NiranjanaBinoy · 2026-06-02T05:29:10Z

+    case 'shinzohub':
+      return <ShinzohubTransactionsPageClient pageParams={pageParams} />
+    default:
+      return <div>Invalid chain</div>


Chain based rendering of the TransactionPageClient

NiranjanaBinoy · 2026-06-02T05:30:59Z

@@ -0,0 +1,47 @@
+"use client"
+


New component to render the transactions list for the Shinzohub. this one uses the Shinzohub specific use-shinzohub-transcations hook for the data fetching.

VanishMax · 2026-06-02T08:42:25Z

-    queryKey: ['transaction-logs', hash],
-    enabled: !!hash && enabled,
+    queryKey: ['ethereum', 'transaction-logs', hash],
+    enabled: chain === 'ethereum' && !!hash && !!tx,


suggestion: refactor it in a way that the hook doesn't depend on useChainPathSegment hook. It should only be called in the pages where it is actually needed

VanishMax · 2026-06-02T08:53:25Z

+import { formatUnits } from "viem";
+
+export const formatGasPrice = (gasPrice: string) => {
+    return Number(formatUnits(BigInt(gasPrice), 9)).toFixed(2);


question: is gas always measured with 9 decimals?

As we are formating the gasPrice to GWEI, which is Giga-WEI, it should be 9 from what I could find.

cc @dvncan or @soniasingla can you confirm this?

viem have a formatGwei for the same conversion, I am replacing this function with that in #235

VanishMax · 2026-06-02T08:58:48Z

 # 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


suggestion: add a proxy endpoint and make the viem client configurable to use the proxy when calling ShinzoHub. It would make the deployed Explorer load data correctly. Limit this proxy endpoint to same-site requests, so it won't be available for anyone else to use.

I have added the url in this file just for testing guid lines, I have added the staging proxy url to the deployed app.

VanishMax

issue: requests keep loading infinitely. In the screenshot, I got >300 requests in 6.8 seconds.

NiranjanaBinoy · 2026-06-02T17:35:14Z

issue: requests keep loading infinitely. In the screenshot, I got >300 requests in 6.8 seconds.

Inorder to fetch the list of transactions using viem, we need to read through each block and get the trasaction from each block. We currently have a hook useShinzohubTranscationSync, which reads through all the blocks starting from 0 during the initial load and travel upto the latest block at that point. At each 20 blocks the transactions detected until that point are written to localstorage. We are also saving the latestblock till fetch the fetch is done, so for every refetch we will start from that point to fill the transaction list. This is the reason we are seeing so many request at the backend, for me all of them are resolving. Since we do not have much activity, just filling transaction list as the blocks comes up leaves the transactions list bare.

I am thinking of storing the transactions list to the cloudflare DB1 instead of in localstorage, in which case the user does not have to wait till the transactions started loading, it wont be alarming when the initial transactions starts loading.

VanishMax · 2026-06-03T13:02:10Z

At each 20 blocks the transactions detected until that point are written to localstorage

Unexpected. This definitely shouldn't be a work of the frontend. With this logic, all we'll do is start a DoS attack on a ShinzoHub node, and we surely don't want that.

I agree on using a DB from Cloudflare. Ideally, it should start the data-filling process as soon as the explorer is deployed, and keep the backend stateful - always watching for new blocks and processing them when needed.

If you think this is too much for the current PR, then we can leave it minimal and simply render transactions only for the last block, or show 0 if it doesn't have it. It would require removing the localStorage tx saving logic and infinite requests logic.

cloudflare-workers-and-pages · 2026-06-04T20:57:53Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	shinzo-webapp-staging	`8e0b215`	Jun 04 2026, 08:59 PM

Adding shinzohub transactions page

95ab833

NiranjanaBinoy self-assigned this May 27, 2026

NiranjanaBinoy added the enhancement New feature or request label May 27, 2026

NiranjanaBinoy linked an issue May 27, 2026 that may be closed by this pull request

Explorer: ShinzoHub transactions #161

Open

NiranjanaBinoy modified the milestones: Client Pages, Testnet Features May 27, 2026

NiranjanaBinoy added 4 commits May 29, 2026 02:14

updating transcations for shinzohub transcations

ce3a61d

extending tranction details path for the shinzohub

c8f29bd

minor fixes

0ae80dc

some nitpicks

4f11d98

NiranjanaBinoy commented Jun 2, 2026

View reviewed changes

removing unused type

51b6eb5

NiranjanaBinoy commented Jun 2, 2026

View reviewed changes

Comment thread apps/explorer/lib/pages/transactions/hooks/shinzohub/use-shinzohub-transactions.ts

NiranjanaBinoy commented Jun 2, 2026

View reviewed changes

Comment thread apps/explorer/lib/pages/transactions/ui/transactions-list.tsx

NiranjanaBinoy marked this pull request as ready for review June 2, 2026 05:31

adding .env.example

de8143b

NiranjanaBinoy requested review from VanishMax, dvncan and soniasingla June 2, 2026 06:04

VanishMax reviewed Jun 2, 2026

View reviewed changes

VanishMax requested changes Jun 2, 2026

View reviewed changes

reducing the use of chainPath to differentiate the chain compoenets

30d1444

replacing localstorage with D1 database

b5d5985

NiranjanaBinoy force-pushed the feat/shinzohub-txns branch from 8e0b215 to b5d5985 Compare June 4, 2026 21:04

NiranjanaBinoy added 3 commits June 4, 2026 17:19

fixing build error

02d5f05

diabling prefect

384fc50

fixing the transcation fee and value

15b3eac

NiranjanaBinoy changed the title ~~[Explorer]: Shinzohub Transactions~~ [Explorer]: Shinzohub Transactions and Transaction details Jun 8, 2026

NiranjanaBinoy added 2 commits June 9, 2026 01:48

replacing format functions with existing ones

f64d465

updatng types

547cf18

Conversation

NiranjanaBinoy commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request

Description

Changes

Related Issue

Steps to Test

Checklist

Notes

Uh oh!

cloudflare-workers-and-pages Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VanishMax left a comment

Choose a reason for hiding this comment

Uh oh!

NiranjanaBinoy commented Jun 2, 2026

Uh oh!

VanishMax commented Jun 3, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

NiranjanaBinoy commented May 27, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented May 27, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jun 4, 2026 •

edited

Loading