diff --git a/.changeset/cool-dingos-visit.md b/.changeset/cool-dingos-visit.md new file mode 100644 index 000000000..0636346e1 --- /dev/null +++ b/.changeset/cool-dingos-visit.md @@ -0,0 +1,5 @@ +--- +"@blobscan/web": patch +--- + +Fixed an issue where the chart tooltip displayed zero for very low values. It now shows the most appropriate unit for each value. diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx index d31850a46..9765c4369 100644 --- a/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx +++ b/apps/web/src/components/Charts/Block/DailyAvgBlobFeeChart.tsx @@ -1,10 +1,11 @@ import type { FC } from "react"; import type { EChartOption } from "echarts"; +import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units"; + import { ChartCard } from "~/components/Cards/ChartCard"; import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts"; import type { DailyBlockStats } from "~/types"; -import { formatNumber } from "~/utils"; import { buildTimeSeriesOptions } from "~/utils"; export type DailyAvgBlobFeeChartProps = { @@ -14,14 +15,14 @@ export type DailyAvgBlobFeeChartProps = { export const DailyAvgBlobFeeChart: FC> = function ({ days, avgBlobFees }) { - const { scaledValues, unit } = useScaledWeiAmounts(avgBlobFees); + const { unit } = useScaledWeiAmounts(avgBlobFees); const options: EChartOption = { ...buildTimeSeriesOptions({ dates: days, axisFormatters: { - yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`, - yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`, + yAxisTooltip: (value) => formatWei(value, findBestUnit(value)), + yAxisLabel: (value) => prettyFormatWei(value, unit), }, yUnit: "ethereum", }), @@ -31,7 +32,7 @@ export const DailyAvgBlobFeeChart: FC> = series: [ { name: "Avg. Blob Fees", - data: scaledValues, + data: avgBlobFees, type: "line", }, ], diff --git a/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx b/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx index 9d5567ab6..d5266f78d 100644 --- a/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx +++ b/apps/web/src/components/Charts/Block/DailyAvgBlobGasPriceChart.tsx @@ -1,10 +1,12 @@ import type { FC } from "react"; import type { EChartOption } from "echarts"; +import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units"; + import { ChartCard } from "~/components/Cards/ChartCard"; import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts"; import type { DailyBlockStats } from "~/types"; -import { buildTimeSeriesOptions, formatNumber } from "~/utils"; +import { buildTimeSeriesOptions } from "~/utils"; export type DailyAvgBlobGasPriceChartProps = { days: DailyBlockStats["days"]; @@ -14,14 +16,14 @@ export type DailyAvgBlobGasPriceChartProps = { export const DailyAvgBlobGasPriceChart: FC< Partial > = function ({ days, avgBlobGasPrices }) { - const { scaledValues, unit } = useScaledWeiAmounts(avgBlobGasPrices); + const { unit } = useScaledWeiAmounts(avgBlobGasPrices); const options: EChartOption = { ...buildTimeSeriesOptions({ dates: days, axisFormatters: { - yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`, - yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`, + yAxisTooltip: (value) => formatWei(value, findBestUnit(value)), + yAxisLabel: (value) => prettyFormatWei(value, unit), }, yUnit: "ethereum", }), @@ -31,7 +33,7 @@ export const DailyAvgBlobGasPriceChart: FC< series: [ { name: "Avg. Blob Gas Prices", - data: scaledValues, + data: avgBlobGasPrices, type: "line", }, ], diff --git a/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx index 0a52d19ca..10379db35 100644 --- a/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx +++ b/apps/web/src/components/Charts/Block/DailyBlobFeeChart.tsx @@ -1,10 +1,11 @@ import type { FC } from "react"; import type { EChartOption } from "echarts"; +import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units"; + import { ChartCard } from "~/components/Cards/ChartCard"; import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts"; import type { DailyBlockStats } from "~/types"; -import { formatNumber } from "~/utils"; import { buildTimeSeriesOptions } from "~/utils"; export type DailyBlobFeeChartProps = { @@ -14,16 +15,15 @@ export type DailyBlobFeeChartProps = { export const DailyBlobFeeChart: FC> = function ({ days, blobFees }) { - const { scaledValues, unit } = useScaledWeiAmounts( - blobFees?.map((x) => Number(x)) - ); + const data = blobFees?.map((x) => Number(x)); + const { unit } = useScaledWeiAmounts(data); const options: EChartOption = { ...buildTimeSeriesOptions({ dates: days, axisFormatters: { - yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`, - yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`, + yAxisTooltip: (value) => formatWei(value, findBestUnit(value)), + yAxisLabel: (value) => prettyFormatWei(value, unit), }, yUnit: "ethereum", }), @@ -33,7 +33,7 @@ export const DailyBlobFeeChart: FC> = series: [ { name: "Blob Fees", - data: scaledValues, + data: data, type: "bar", }, ], diff --git a/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx index 5136588bf..ac382f64e 100644 --- a/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx +++ b/apps/web/src/components/Charts/Block/DailyBlobGasComparisonChart.tsx @@ -3,10 +3,12 @@ import * as echarts from "echarts"; import type { EChartOption } from "echarts"; import { useTheme } from "next-themes"; +import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units"; + import { ChartCard } from "~/components/Cards/ChartCard"; import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts"; import type { DailyBlockStats } from "~/types"; -import { buildTimeSeriesOptions, formatNumber } from "~/utils"; +import { buildTimeSeriesOptions } from "~/utils"; export type DailyBlobGasComparisonChartProps = Partial<{ days: DailyBlockStats["days"]; @@ -18,16 +20,15 @@ export type DailyBlobGasComparisonChartProps = Partial<{ export const DailyBlobGasComparisonChart: FC = function ({ blobAsCalldataGasUsed, blobGasUsed, days, opts = {} }) { const { resolvedTheme } = useTheme(); - const { scaledValues, unit } = useScaledWeiAmounts( - blobGasUsed ? blobGasUsed.map((x) => Number(x)) : [] - ); + const data = blobGasUsed?.map((x) => Number(x)); + const { unit } = useScaledWeiAmounts(data); const options: EChartOption = { ...buildTimeSeriesOptions({ dates: days, axisFormatters: { - yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`, - yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`, + yAxisTooltip: (value) => formatWei(value, findBestUnit(value)), + yAxisLabel: (value) => prettyFormatWei(value, unit), }, }), grid: { @@ -36,7 +37,7 @@ export const DailyBlobGasComparisonChart: FC = series: [ { name: "Blob Gas Used", - data: scaledValues, + data: data, stack: "gas", type: "bar", diff --git a/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx b/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx index c0b611841..da364f44a 100644 --- a/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx +++ b/apps/web/src/components/Charts/Block/DailyBlobGasUsedChart.tsx @@ -1,10 +1,12 @@ import type { FC } from "react"; import type { EChartOption } from "echarts"; +import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units"; + import { ChartCard } from "~/components/Cards/ChartCard"; import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts"; import type { DailyBlockStats } from "~/types"; -import { buildTimeSeriesOptions, formatNumber } from "~/utils"; +import { buildTimeSeriesOptions } from "~/utils"; export type DailyBlobGasUsedChartProps = Partial<{ days: DailyBlockStats["days"]; @@ -13,15 +15,14 @@ export type DailyBlobGasUsedChartProps = Partial<{ const BaseChart: FC = function ({ days, blobGasUsed, title }) { - const { scaledValues, unit } = useScaledWeiAmounts( - blobGasUsed ? blobGasUsed.map((x) => Number(x)) : [] - ); + const data = blobGasUsed?.map((x) => Number(x)); + const { unit } = useScaledWeiAmounts(data); const options: EChartOption = { ...buildTimeSeriesOptions({ dates: days, axisFormatters: { - yAxisTooltip: (value) => `${formatNumber(value, "compact")} ${unit}`, - yAxisLabel: (value) => `${formatNumber(value, "compact")} ${unit}`, + yAxisTooltip: (value) => formatWei(value, findBestUnit(value)), + yAxisLabel: (value) => prettyFormatWei(value, unit), }, }), grid: { @@ -30,7 +31,7 @@ const BaseChart: FC = series: [ { name: "Blob Gas Used", - data: scaledValues, + data: data, stack: "gas", type: "bar", }, diff --git a/apps/web/src/components/Charts/Transaction/DailyAvgMaxBlobGasFeeChart.tsx b/apps/web/src/components/Charts/Transaction/DailyAvgMaxBlobGasFeeChart.tsx index f642bfcb7..5ccdc7806 100644 --- a/apps/web/src/components/Charts/Transaction/DailyAvgMaxBlobGasFeeChart.tsx +++ b/apps/web/src/components/Charts/Transaction/DailyAvgMaxBlobGasFeeChart.tsx @@ -1,10 +1,12 @@ import type { FC } from "react"; import type { EChartOption } from "echarts"; +import { findBestUnit, formatWei, prettyFormatWei } from "@blobscan/eth-units"; + import { ChartCard } from "~/components/Cards/ChartCard"; import { useScaledWeiAmounts } from "~/hooks/useScaledWeiAmounts"; import type { DailyTransactionStats } from "~/types"; -import { buildTimeSeriesOptions, formatNumber } from "~/utils"; +import { buildTimeSeriesOptions } from "~/utils"; export type DailyAvgMaxBlobGasFeeChartProps = { days: DailyTransactionStats["days"]; @@ -15,7 +17,7 @@ export type DailyAvgMaxBlobGasFeeChartProps = { export const DailyAvgMaxBlobGasFeeChart: FC< Partial > = function ({ days, avgMaxBlobGasFees, compact = false }) { - const { scaledValues, unit } = useScaledWeiAmounts(avgMaxBlobGasFees); + const { unit } = useScaledWeiAmounts(avgMaxBlobGasFees); const options: EChartOption< EChartOption.SeriesBar | EChartOption.SeriesLine @@ -23,8 +25,8 @@ export const DailyAvgMaxBlobGasFeeChart: FC< ...buildTimeSeriesOptions({ dates: days, axisFormatters: { - yAxisTooltip: (value) => `${formatNumber(value)} ${unit}`, - yAxisLabel: (value) => `${formatNumber(value)} ${unit}`, + yAxisTooltip: (value) => formatWei(value, findBestUnit(value)), + yAxisLabel: (value) => prettyFormatWei(value, unit), }, }), grid: { @@ -33,7 +35,7 @@ export const DailyAvgMaxBlobGasFeeChart: FC< series: [ { name: "Avg. Max Blob Gas Fees", - data: scaledValues, + data: avgMaxBlobGasFees, type: compact ? "line" : "bar", smooth: true, }, diff --git a/packages/eth-format/index.ts b/packages/eth-format/index.ts index 50cdf385a..f1ca6665a 100644 --- a/packages/eth-format/index.ts +++ b/packages/eth-format/index.ts @@ -92,6 +92,9 @@ export function countIntegerDigits(value: string | number | bigint): number { export function shiftDecimal(value: EthAmount, decimals: number): string { value = value.toString(); + // Convert scientific notation to standard decimal notation + value = fullwideFormatter.format(value as Intl.StringNumericLiteral); + const negative = value.startsWith("-"); if (negative) {