search

walnuthq / op-scan

Lightweight transaction explorer for the OP Stack.
7 stars 16 forks source link

Created the Block Details page #35

Closed Dprof-in-tech closed 10 hours ago

Dprof-in-tech commented 3 days ago

closes #7

After the corrections, this is what it looks like

image

Dprof-in-tech commented 1 day ago

Okay chief I’m working on it

On Sat, Jun 29, 2024 at 10:26 PM saimeunt @.***> wrote:

@.**** requested changes on this pull request.

@Dprof-in-tech https://github.com/Dprof-in-tech Still not looking the same as Etherscan, please make the appropriate changes.

On src/app/block/[number]/txs/page.tsx https://github.com/walnuthq/op-scan/pull/35#discussion_r1659974476:

This should not be removed, move your [block]/page.tsx to [number]/page.tsx instead. The block slug is number, not block.

In src/app/block/[block]/page.tsx https://github.com/walnuthq/op-scan/pull/35#discussion_r1659992610:

  • {blockData.hash}
  • {blockData.parentHash}
  • <Link
  • href={/block/${blockNumber}/txs}
  • className="text-blue-600 hover:underline"
  • {blockData.transactions.length} transactions
  • {formatEther(blockData.gasUsed).toString()} (
  • {formatPercent(parseInt(blockData.gasUsed.toString()))})

This is not what we should display, see Etherscan as a reference:

Screenshot.2024-06-29.at.22.45.30.png (view on web) https://github.com/walnuthq/op-scan/assets/5597359/3e773207-5a78-4b24-b51a-384491c049e0

We want to display the percentage of gas used over the gas limit. You can get inspiration from the work done on the latest blocks page:

https://github.com/walnuthq/op-scan/blob/main/src/components/pages/blocks/latest-blocks-table.tsx#L39-L46

In src/app/block/[block]/page.tsx https://github.com/walnuthq/op-scan/pull/35#discussion_r1659993360:

  • {blockData.parentHash}
  • <Link
  • href={/block/${blockNumber}/txs}
  • className="text-blue-600 hover:underline"
  • {blockData.transactions.length} transactions
  • {formatEther(blockData.gasUsed).toString()} (
  • {formatPercent(parseInt(blockData.gasUsed.toString()))})
  • {formatEther(blockData.gasLimit).toString()}

Again, this is not what we want, stick to the exact same display as Etherscan. See this as an inspiration:

https://github.com/walnuthq/op-scan/blob/main/src/components/pages/blocks/latest-blocks-table.tsx#L108

— Reply to this email directly, view it on GitHub https://github.com/walnuthq/op-scan/pull/35#pullrequestreview-2149827579, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3W3TPJMSMOOOFQBVO3N4QDZJ4Q7HAVCNFSM6AAAAABKBCLRD6VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDCNBZHAZDONJXHE . You are receiving this because you were mentioned.Message ID: @.***>

Dprof-in-tech commented 1 day ago

it currently looks like this, just like the etherscan example

image