Skip to content

Commit 8c5cfa5

Browse files
PJColomboPJColombo
authored
feat(web): update header indicators (#902)
* fix(web): display unfinalized badge by default * fix(web): remove redundant network name from indicators and display ETH-USD price only on non-testnet chains * chore: add changesets
1 parent 04dd07c commit 8c5cfa5

File tree

4 files changed

+113
-86
lines changed

4 files changed

+113
-86
lines changed

‎.changeset/chilled-dodos-run.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@blobscan/web": minor
3+
---
4+
5+
Removed network name display

‎.changeset/clever-zebras-agree.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@blobscan/web": minor
3+
---
4+
5+
Displayed eth usd price on non-testnet chains only

‎apps/web/src/components/Badges/StatusBadge.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ interface StatusBadgeProps {
2929
status: Status;
3030
}
3131

32-
export const StatusBadge: FC<StatusBadgeProps> = ({ status, ...props }) => {
32+
export const StatusBadge: FC<StatusBadgeProps> = ({
33+
status = "unfinalized",
34+
...props
35+
}) => {
3336
const { style, icon } = STATUSES[status];
3437
const statusIcon = icon ? <Icon src={icon} /> : null;
3538
return (

‎apps/web/src/components/Indicators/NetworkIndicators.tsx‎

Lines changed: 99 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { capitalize, formatTimestamp } from "~/utils";
1717
import { DeltaPercentageChange } from "../DeltaPercentage";
1818
import { FiatDisplay } from "../Displays/FiatDisplay";
1919
import { Icon } from "../Icon";
20+
import type { IndicatorProps } from "../Indicator";
2021
import { Indicator } from "../Indicator";
2122
import { Scrollable } from "../Scrollable";
2223
import { Separator } from "../Separator";
@@ -59,103 +60,116 @@ export function NetworkIndicators() {
5960
latestUsdPriceTimestamp &&
6061
dayjs().diff(latestUsdPriceTimestamp, "minutes") > 5;
6162

62-
const indicators = [
63-
{
64-
name: "Network",
65-
value: env ? (
66-
capitalize(env.PUBLIC_NETWORK_NAME)
67-
) : (
68-
<Skeleton height={14} width={48} />
69-
),
70-
},
71-
{
72-
icon: <Icon src={EthereumIcon} />,
73-
name: "ETH Price",
74-
value:
75-
latestUsdPrice !== undefined ? (
76-
<div className="flex items-center gap-1">
77-
<FiatDisplay amount={latestUsdPrice} />
63+
const indicators: IndicatorProps[] = [];
7864

79-
{past24hUsdPrice ? (
65+
if (env) {
66+
if (env.PUBLIC_NETWORK_NAME === "devnet") {
67+
indicators.push({
68+
name: "Network",
69+
value: env ? (
70+
capitalize(env.PUBLIC_NETWORK_NAME)
71+
) : (
72+
<Skeleton height={14} width={48} />
73+
),
74+
});
75+
}
76+
77+
if (
78+
env.PUBLIC_NETWORK_NAME === "mainnet" ||
79+
env.PUBLIC_NETWORK_NAME === "gnosis"
80+
) {
81+
indicators.push({
82+
icon: <Icon src={EthereumIcon} />,
83+
name: "ETH Price",
84+
value:
85+
latestUsdPrice !== undefined ? (
86+
<div className="flex items-center gap-1">
87+
<FiatDisplay amount={latestUsdPrice} />
88+
89+
{past24hUsdPrice ? (
90+
<>
91+
<Tooltip>
92+
<TooltipTrigger>
93+
<DeltaPercentageChange
94+
initialValue={past24hUsdPrice}
95+
finalValue={latestUsdPrice}
96+
/>
97+
</TooltipTrigger>
98+
<TooltipContent>Last 24 hours changes</TooltipContent>
99+
</Tooltip>
100+
</>
101+
) : undefined}
102+
{isOutdated && (
103+
<>
104+
<Tooltip>
105+
<TooltipContent>
106+
Outdated price (last updated{" "}
107+
{latestUsdPriceTimestamp
108+
? formatTimestamp(latestUsdPriceTimestamp, true)
109+
: ""}
110+
)
111+
</TooltipContent>
112+
<TooltipTrigger>
113+
<ExclamationTriangleIcon className="h-3 w-3 text-yellow-600 dark:text-yellow-300" />
114+
</TooltipTrigger>
115+
</Tooltip>
116+
</>
117+
)}
118+
</div>
119+
) : undefined,
120+
});
121+
}
122+
123+
indicators.push(
124+
{
125+
name: "Blob Gas Price",
126+
icon: <Icon src={GasIcon} />,
127+
value: latestBlobGasPrice && (
128+
<div>
129+
{prettyFormatWei(latestBlobGasPrice, {
130+
numberFormatOpts: {
131+
notation: "standard",
132+
maximumFractionDigits: 4,
133+
},
134+
})}{" "}
135+
{past24hBlobGasPrice ? (
80136
<>
81137
<Tooltip>
82138
<TooltipTrigger>
83139
<DeltaPercentageChange
84-
initialValue={past24hUsdPrice}
85-
finalValue={latestUsdPrice}
140+
initialValue={past24hBlobGasPrice}
141+
finalValue={latestBlobGasPrice}
86142
/>
87143
</TooltipTrigger>
88144
<TooltipContent>Last 24 hours changes</TooltipContent>
89145
</Tooltip>
90146
</>
91147
) : undefined}
92-
{isOutdated && (
93-
<>
94-
<Tooltip>
95-
<TooltipContent>
96-
Outdated price (last updated{" "}
97-
{latestUsdPriceTimestamp
98-
? formatTimestamp(latestUsdPriceTimestamp, true)
99-
: ""}
100-
)
101-
</TooltipContent>
102-
<TooltipTrigger>
103-
<ExclamationTriangleIcon className="h-3 w-3 text-yellow-600 dark:text-yellow-300" />
104-
</TooltipTrigger>
105-
</Tooltip>
106-
</>
107-
)}
108148
</div>
109-
) : undefined,
110-
},
111-
{
112-
name: "Blob Gas Price",
113-
icon: <Icon src={GasIcon} />,
114-
value: latestBlobGasPrice && (
115-
<div>
116-
{prettyFormatWei(latestBlobGasPrice, {
117-
numberFormatOpts: {
118-
notation: "standard",
119-
maximumFractionDigits: 4,
120-
},
121-
})}{" "}
122-
{past24hBlobGasPrice ? (
123-
<>
124-
<Tooltip>
125-
<TooltipTrigger>
126-
<DeltaPercentageChange
127-
initialValue={past24hBlobGasPrice}
128-
finalValue={latestBlobGasPrice}
129-
/>
130-
</TooltipTrigger>
131-
<TooltipContent>Last 24 hours changes</TooltipContent>
132-
</Tooltip>
133-
</>
134-
) : undefined}
135-
</div>
136-
),
137-
secondaryValue: latestBlobGasUsdPrice !== undefined && (
138-
<FiatDisplay amount={latestBlobGasUsdPrice} />
139-
),
140-
},
141-
{
142-
name: "Blob Price",
143-
icon: <Icon src={BlobIcon} />,
144-
value: blobPrice && (
145-
<span>
146-
{prettyFormatWei(blobPrice, {
147-
numberFormatOpts: {
148-
notation: "standard",
149-
maximumFractionDigits: 4,
150-
},
151-
})}
152-
</span>
153-
),
154-
secondaryValue: blobUsdPrice !== undefined && (
155-
<FiatDisplay amount={blobUsdPrice} />
156-
),
157-
},
158-
];
149+
),
150+
secondaryValue: latestBlobGasUsdPrice !== undefined && (
151+
<FiatDisplay amount={latestBlobGasUsdPrice} />
152+
),
153+
},
154+
{
155+
name: "Blob Price",
156+
icon: <Icon src={BlobIcon} />,
157+
value: blobPrice && (
158+
<span>
159+
{prettyFormatWei(blobPrice, {
160+
numberFormatOpts: {
161+
notation: "standard",
162+
maximumFractionDigits: 4,
163+
},
164+
})}
165+
</span>
166+
),
167+
secondaryValue: blobUsdPrice !== undefined && (
168+
<FiatDisplay amount={blobUsdPrice} />
169+
),
170+
}
171+
);
172+
}
159173

160174
return (
161175
<Scrollable>

0 commit comments

Comments
 (0)