Skip to content

Commit 4257266

Browse files
PJColomboPJColombo
committed
fix(web): display indicators without waiting for env vars to load
1 parent 8c5cfa5 commit 4257266

File tree

1 file changed

+92
-94
lines changed

1 file changed

+92
-94
lines changed

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

Lines changed: 92 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -62,115 +62,113 @@ export function NetworkIndicators() {
6262

6363
const indicators: IndicatorProps[] = [];
6464

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} />
65+
if (env?.PUBLIC_NETWORK_NAME === "devnet") {
66+
indicators.push({
67+
name: "Network",
68+
value: env ? (
69+
capitalize(env.PUBLIC_NETWORK_NAME)
70+
) : (
71+
<Skeleton height={14} width={48} />
72+
),
73+
});
74+
}
8875

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-
}
76+
if (
77+
env?.PUBLIC_NETWORK_NAME === "mainnet" ||
78+
env?.PUBLIC_NETWORK_NAME === "gnosis"
79+
) {
80+
indicators.push({
81+
icon: <Icon src={EthereumIcon} />,
82+
name: "ETH Price",
83+
value:
84+
latestUsdPrice !== undefined ? (
85+
<div className="flex items-center gap-1">
86+
<FiatDisplay amount={latestUsdPrice} />
12287

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 ? (
88+
{past24hUsdPrice ? (
13689
<>
13790
<Tooltip>
13891
<TooltipTrigger>
13992
<DeltaPercentageChange
140-
initialValue={past24hBlobGasPrice}
141-
finalValue={latestBlobGasPrice}
93+
initialValue={past24hUsdPrice}
94+
finalValue={latestUsdPrice}
14295
/>
14396
</TooltipTrigger>
14497
<TooltipContent>Last 24 hours changes</TooltipContent>
14598
</Tooltip>
14699
</>
147100
) : undefined}
101+
{isOutdated && (
102+
<>
103+
<Tooltip>
104+
<TooltipContent>
105+
Outdated price (last updated{" "}
106+
{latestUsdPriceTimestamp
107+
? formatTimestamp(latestUsdPriceTimestamp, true)
108+
: ""}
109+
)
110+
</TooltipContent>
111+
<TooltipTrigger>
112+
<ExclamationTriangleIcon className="h-3 w-3 text-yellow-600 dark:text-yellow-300" />
113+
</TooltipTrigger>
114+
</Tooltip>
115+
</>
116+
)}
148117
</div>
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-
);
118+
) : undefined,
119+
});
172120
}
173121

122+
indicators.push(
123+
{
124+
name: "Blob Gas Price",
125+
icon: <Icon src={GasIcon} />,
126+
value: latestBlobGasPrice && (
127+
<div>
128+
{prettyFormatWei(latestBlobGasPrice, {
129+
numberFormatOpts: {
130+
notation: "standard",
131+
maximumFractionDigits: 4,
132+
},
133+
})}{" "}
134+
{past24hBlobGasPrice ? (
135+
<>
136+
<Tooltip>
137+
<TooltipTrigger>
138+
<DeltaPercentageChange
139+
initialValue={past24hBlobGasPrice}
140+
finalValue={latestBlobGasPrice}
141+
/>
142+
</TooltipTrigger>
143+
<TooltipContent>Last 24 hours changes</TooltipContent>
144+
</Tooltip>
145+
</>
146+
) : undefined}
147+
</div>
148+
),
149+
secondaryValue: latestBlobGasUsdPrice !== undefined && (
150+
<FiatDisplay amount={latestBlobGasUsdPrice} />
151+
),
152+
},
153+
{
154+
name: "Blob Price",
155+
icon: <Icon src={BlobIcon} />,
156+
value: blobPrice && (
157+
<span>
158+
{prettyFormatWei(blobPrice, {
159+
numberFormatOpts: {
160+
notation: "standard",
161+
maximumFractionDigits: 4,
162+
},
163+
})}
164+
</span>
165+
),
166+
secondaryValue: blobUsdPrice !== undefined && (
167+
<FiatDisplay amount={blobUsdPrice} />
168+
),
169+
}
170+
);
171+
174172
return (
175173
<Scrollable>
176174
<div className="flex w-full gap-1 text-xs">

0 commit comments

Comments
 (0)