Skip to content

Commit

Permalink
feat: add support for Pectra upgrade (#719)
Browse files Browse the repository at this point in the history 
* refactor(web): extract Ethereum blob-realted params into a separate file

* feat(web): add Pectra params

* chore: add changeset

* refactor: move ethereum config to its own package

* chore(web): sort deps

* chore: fix type-check issue

* feat(docs): add `@blobscan/eth-config` package description

* refactor: rename ethereum config to blob config

* chore: fix changeset typo

* refactor(network-blob-config): clarify blob size calculation as the product of `FIELD_ELEMENTS_PER_BLOB` and `BYTES_PER_FIELD_ELEMENT`

* fix(web): resolve tx external link issue

* style: apply pr comments
  • Loading branch information
@PJColombo
PJColombo authored Feb 24, 2025
1 parent 4fcb423 commit 9b403be
Show file tree
Hide file tree
Showing 21 changed files with 585 additions and 583 deletions.
5 changes: 5 additions & 0 deletions .changeset/rich-owls-count.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@blobscan/web": minor
---

Added support for calculating the blob gas target using Pectra update params
27 changes: 14 additions & 13 deletions apps/docs/src/app/docs/codebase-overview/page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,20 +47,21 @@ Blobscan has the following command line interfaces:

Here you can find all the shared packages used by the apps:

| Package | Description |
| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`@blobscan/api`](https://github.com/Blobscan/blobscan/tree/main/packages/api) | tRPC routers and procedures used by the web app and the REST API |
| [`@blobscan/blob-propagator`](https://github.com/Blobscan/blobscan/tree/main/packages/blob-propagator) | Mechanism for propagating blob data across various storage systems through [bullmq](https://docs.bullmq.io/) sandboxed workers. |
| Package | Description |
| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`@blobscan/api`](https://github.com/Blobscan/blobscan/tree/main/packages/api) | tRPC routers and procedures used by the web app and the REST API |
| [`@blobscan/blob-propagator`](https://github.com/Blobscan/blobscan/tree/main/packages/blob-propagator) | Mechanism for propagating blob data across various storage systems through [bullmq](https://docs.bullmq.io/) sandboxed workers. |
| [`@blobscan/blob-storage-manager`](https://github.com/Blobscan/blobscan/tree/main/packages/blob-storage-manager) | Orchestrates the storage/retrieval of blobs in/from different storage providers. Currently it supports [Google Cloud Storage](https://cloud.google.com/storage), [Swarm](https://www.ethswarm.org), PostgreSQL database and filesystem. |
| [`@blobscan/dayjs`](https://github.com/Blobscan/blobscan/tree/main/packages/dayjs) |  Extended [Day.js](https://day.js.org/) with plugins. |
| [`@blobscan/db`](https://github.com/Blobscan/blobscan/tree/main/packages/db) | Prisma schema and a Prisma client with [extensions](https://www.prisma.io/docs/concepts/components/prisma-client/client-extensions) containing custom methods queries. |
| [`@blobscan/logger`](https://github.com/Blobscan/blobscan/tree/main/packages/logger) | Shared logger utilities. |
| [`@blobscan/optimism-decoder`](https://github.com/Blobscan/blobscan/tree/main/packages/optimism-decoder) | Optimism blobs decoder. |
| [`@blobscan/open-telemetry`](https://github.com/Blobscan/blobscan/tree/main/packages/open-telemetry) | [Otel](https://opentelemetry.io/) configuration and sdk setup. |
| [`@blobscan/test`](https://github.com/Blobscan/blobscan/tree/main/packages/test) | Shared test utilities and fixtures. |
| [`@blobscan/zod`](https://github.com/Blobscan/blobscan/tree/main/packages/zod) | Shared [Zod](https://zod.dev) schemas and utilities. |
| [`@blobscan/eth-format`](https://github.com/Blobscan/blobscan/tree/main/packages/eth-format) | Provides utility functions for handling Ethereum value conversions and formatting. |
| [`@blobscan/rollups`](https://github.com/Blobscan/blobscan/tree/main/packages/rollups) | A utility that provides a comprehensive list of all rollups and their associated addresses supported by Blobscan, along with functions to retrieve them easily. |
| [`@blobscan/dayjs`](https://github.com/Blobscan/blobscan/tree/main/packages/dayjs) |  Extended [Day.js](https://day.js.org/) with plugins. |
| [`@blobscan/db`](https://github.com/Blobscan/blobscan/tree/main/packages/db) | Prisma schema and a Prisma client with [extensions](https://www.prisma.io/docs/concepts/components/prisma-client/client-extensions) containing custom methods queries. |
| [`@blobscan/logger`](https://github.com/Blobscan/blobscan/tree/main/packages/logger) | Shared logger utilities. |
| [`@blobscan/optimism-decoder`](https://github.com/Blobscan/blobscan/tree/main/packages/optimism-decoder) | Optimism blobs decoder. |
| [`@blobscan/open-telemetry`](https://github.com/Blobscan/blobscan/tree/main/packages/open-telemetry) | [Otel](https://opentelemetry.io/) configuration and sdk setup. |
| [`@blobscan/test`](https://github.com/Blobscan/blobscan/tree/main/packages/test) | Shared test utilities and fixtures. |
| [`@blobscan/zod`](https://github.com/Blobscan/blobscan/tree/main/packages/zod) | Shared [Zod](https://zod.dev) schemas and utilities. |
| [`@blobscan/network-blob-config`](https://github.com/Blobscan/blobscan/tree/main/packages/eth-config) | Provides network blob-related fork configuration parameters. |
| [`@blobscan/eth-format`](https://github.com/Blobscan/blobscan/tree/main/packages/eth-format) | Provides utility functions for handling Ethereum value conversions and formatting. |
| [`@blobscan/rollups`](https://github.com/Blobscan/blobscan/tree/main/packages/rollups) | A utility that provides a comprehensive list of all rollups and their associated addresses supported by Blobscan, along with functions to retrieve them easily. |

### Tooling

Expand Down
2 changes: 2 additions & 0 deletions apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
"@blobscan/dates": "workspace:*",
"@blobscan/dayjs": "workspace:^0.1.0",
"@blobscan/db": "workspace:^0.14.0",
"@blobscan/env": "workspace:^0.1.0",
"@blobscan/eth-format": "workspace:^0.1.0",
"@blobscan/network-blob-config": "workspace:^0.1.0",
"@blobscan/open-telemetry": "workspace:^0.0.9",
"@blobscan/rollups": "workspace:^0.2.3",
"@floating-ui/react": "^0.26.23",
Expand Down
55 changes: 39 additions & 16 deletions apps/web/src/components/Displays/BlobGasUsageDisplay.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,63 @@
import type { FC } from "react";
import cn from "classnames";

import {
BLOB_GAS_LIMIT_PER_BLOCK,
TARGET_BLOB_GAS_PER_BLOCK,
calculateBlobGasTarget,
calculatePercentage,
formatNumber,
} from "~/utils";
import type { NetworkBlobConfig } from "@blobscan/network-blob-config";

import { calculatePercentage, formatNumber, performDiv } from "~/utils";
import { PercentageBar } from "../PercentageBar";

type BlobGasUsageDisplayProps = {
networkBlobConfig: NetworkBlobConfig;
blobGasUsed: bigint;
compact?: boolean;
};

function getTargetSign(blobGasUsed: bigint): "+" | "-" | undefined {
if (blobGasUsed < TARGET_BLOB_GAS_PER_BLOCK) {
function getTargetSign(
blobGasUsed: bigint,
targetBlobGasPerBlock: bigint
): "+" | "-" | undefined {
if (blobGasUsed < targetBlobGasPerBlock) {
return "-";
} else if (blobGasUsed > TARGET_BLOB_GAS_PER_BLOCK) {
}

if (blobGasUsed > targetBlobGasPerBlock) {
return "+";
} else {
return;
}
}

function calculateBlobGasTarget(
blobGasUsed: bigint,
targetBlobsPerBlock: number,
gasPerBlob: bigint
) {
const blobsInBlock = performDiv(blobGasUsed, gasPerBlob);

return calculatePercentage(
blobsInBlock < targetBlobsPerBlock
? blobsInBlock
: blobsInBlock - targetBlobsPerBlock,
targetBlobsPerBlock
);
}

export const BlobGasUsageDisplay: FC<BlobGasUsageDisplayProps> = function ({
networkBlobConfig,
blobGasUsed,
compact = false,
}) {
const blobGasUsedPercentage = calculatePercentage(
const {
gasPerBlob,
blobGasLimit,
targetBlobsPerBlock,
targetBlobGasPerBlock,
} = networkBlobConfig;
const blobGasUsedPercentage = calculatePercentage(blobGasUsed, blobGasLimit);
const blobGasTarget = calculateBlobGasTarget(
blobGasUsed,
BigInt(BLOB_GAS_LIMIT_PER_BLOCK)
targetBlobsPerBlock,
gasPerBlob
);
const blobGasTarget = calculateBlobGasTarget(blobGasUsed);
const targetSign = getTargetSign(blobGasUsed);
const targetSign = getTargetSign(blobGasUsed, targetBlobGasPerBlock);
const isPositive = targetSign === "+";
const isNegative = targetSign === "-";

Expand Down
Loading

0 comments on commit 9b403be

Please sign in to comment.