diff --git a/explorer/.slug-post-clean b/explorer/.slugignore
similarity index 100%
rename from explorer/.slug-post-clean
rename to explorer/.slugignore
diff --git a/explorer/src/pages/ClusterStatsPage.tsx b/explorer/src/pages/ClusterStatsPage.tsx
index c87baa4ebf..540da6bf0a 100644
--- a/explorer/src/pages/ClusterStatsPage.tsx
+++ b/explorer/src/pages/ClusterStatsPage.tsx
@@ -10,7 +10,7 @@ import {
import { lamportsToSol, slotsToHumanString } from "utils";
import { ClusterStatus, useCluster } from "providers/cluster";
import { TpsCard } from "components/TpsCard";
-import { displayTimestampUtc } from "utils/date";
+import { displayTimestampWithoutDate, displayTimestampUtc } from "utils/date";
import { Status, useFetchSupply, useSupply } from "providers/supply";
import { PublicKey } from "@solana/web3.js";
import { ErrorCard } from "components/common/ErrorCard";
@@ -127,7 +127,7 @@ function StakingComponent() {
return (
-
+
Circulating Supply
@@ -138,7 +138,7 @@ function StakingComponent() {
{circulatingPercentage}% is circulating
-
+
Active Stake
@@ -151,19 +151,24 @@ function StakingComponent() {
)}
-
+
{solanaInfo && (
-
Price
+
+ Price{" "}
+
+ Rank #{solanaInfo.market_cap_rank}
+
+
${solanaInfo.price.toFixed(2)}{" "}
{solanaInfo.price_change_percentage_24h > 0 && (
-
+
↑ {solanaInfo.price_change_percentage_24h.toFixed(2)}%
)}
{solanaInfo.price_change_percentage_24h < 0 && (
-
+
↓ {solanaInfo.price_change_percentage_24h.toFixed(2)}%
)}
@@ -187,6 +192,12 @@ function StakingComponent() {
)}
+ {solanaInfo && (
+
+ Updated at{" "}
+ {displayTimestampWithoutDate(solanaInfo.last_updated.getTime())}
+
+ )}
);
@@ -336,6 +347,8 @@ interface CoinInfo {
volume_24: number;
market_cap: number;
price_change_percentage_24h: number;
+ market_cap_rank: number;
+ last_updated: Date;
}
interface CoinInfoResult {
@@ -351,7 +364,9 @@ interface CoinInfoResult {
usd: number;
};
price_change_percentage_24h: number;
+ market_cap_rank: number;
};
+ last_updated: string;
};
}
@@ -373,8 +388,10 @@ function useCoinGecko(coinId: string): CoinGeckoResult | undefined {
price: info.data.market_data.current_price.usd,
volume_24: info.data.market_data.total_volume.usd,
market_cap: info.data.market_data.market_cap.usd,
+ market_cap_rank: info.data.market_data.market_cap_rank,
price_change_percentage_24h:
info.data.market_data.price_change_percentage_24h,
+ last_updated: new Date(info.data.last_updated),
},
status: CoingeckoStatus.Success,
});
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index d590da8bd3..1d63dfc701 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -369,3 +369,16 @@ pre.json-wrap {
color: $primary
}
}
+
+p.updated-time {
+ font-size: .66rem;
+ text-align: right;
+}
+
+.change-positive {
+ color: $success;
+}
+
+.change-negative {
+ color: $warning;
+}
diff --git a/explorer/src/utils/date.ts b/explorer/src/utils/date.ts
index 56c8155380..555192a69e 100644
--- a/explorer/src/utils/date.ts
+++ b/explorer/src/utils/date.ts
@@ -39,3 +39,18 @@ export function displayTimestampUtc(
}).format(expireDate);
return `${dateString} at ${timeString}`;
}
+
+export function displayTimestampWithoutDate(
+ unixTimestamp: number,
+ shortTimeZoneName = true
+) {
+ const expireDate = new Date(unixTimestamp);
+ const timeString = new Intl.DateTimeFormat("en-US", {
+ hour: "numeric",
+ minute: "numeric",
+ second: "numeric",
+ hourCycle: "h23",
+ timeZoneName: shortTimeZoneName ? "short" : "long",
+ }).format(expireDate);
+ return timeString;
+}