diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx index 04f3bf01b4e..f237f0c0604 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx @@ -11,7 +11,6 @@ import { subMonths } from "date-fns"; import Link from "next/link"; import { Suspense, useMemo } from "react"; import type { ThirdwebClient } from "thirdweb"; -import { toPercent, toSize } from "utils/number"; import { TotalSponsoredChartCardUI } from "../../../../_components/TotalSponsoredCard"; import { SponsoredTransactionsTable } from "./SponsoredTransactionsTable"; import { UsageCard } from "./UsageCard"; @@ -31,6 +30,11 @@ type UsageProps = { }[]; }; +const compactNumberFormatter = new Intl.NumberFormat("en-US", { + minimumFractionDigits: 0, + notation: "compact", +}); + export const Usage: React.FC = ({ usage: usageData, subscriptions, @@ -39,23 +43,6 @@ export const Usage: React.FC = ({ client, projects, }) => { - // TODO - get this from team instead of account - const storageMetrics = useMemo(() => { - if (!usageData) { - return {}; - } - - const consumedBytes = usageData.usage.storage.sumFileSizeBytes; - const limitBytes = usageData.limits.storage; - const percent = toPercent(consumedBytes, limitBytes); - - return { - total: `${toSize(Math.min(consumedBytes, limitBytes), "MB")} of ${toSize(limitBytes)} included storage used`, - progress: percent, - totalUsage: `Total Usage: ${toSize(consumedBytes, "MB")}`, - }; - }, [usageData]); - // TODO - get this from team instead of account const rpcMetrics = useMemo(() => { if (!usageData) { @@ -66,7 +53,8 @@ export const Usage: React.FC = ({ title: "Unlimited Requests", total: ( - {usageData.rateLimits.rpc} Requests Per Second + {compactNumberFormatter.format(usageData.rateLimits.rpc)} Requests Per + Second ), }; @@ -81,7 +69,8 @@ export const Usage: React.FC = ({ title: "Unlimited Requests", total: ( - {usageData.rateLimits.storage} Requests Per Second + {compactNumberFormatter.format(usageData.rateLimits.storage)} Requests + Per Second ), }; @@ -100,6 +89,8 @@ export const Usage: React.FC = ({ ? new Date(usageSub.currentPeriodEnd) : new Date(); + const storageUsage = team.capabilities.storage.upload; + return (
= ({ /> 10_000 ? undefined : ( +

+ {compactNumberFormatter.format(storageUsage.rateLimit)} Requests + Per Second +

+ ) + } name="Storage Pinning" description="Amount of IPFS Storage pinning allowed in your plan" > @@ -274,3 +273,29 @@ async function AsyncTotalSponsoredChartCard( /> ); } + +function formatStorageBytes(bytes: number) { + const ONE_KB = 1024; + const ONE_MB = ONE_KB * 1024; + const ONE_GB = ONE_MB * 1024; + + if (bytes < ONE_KB) { + return `${bytes} bytes`; + } + + if (bytes < ONE_MB) { + return `${compactNumberFormatter.format(bytes / ONE_KB)} KB`; + } + + if (bytes < ONE_GB) { + return `${compactNumberFormatter.format(bytes / ONE_MB)} MB`; + } + + const gbs = bytes / ONE_GB; + + if (gbs > 1000) { + return "Unlimited"; + } + + return `${compactNumberFormatter.format(gbs)} GB`; +} diff --git a/apps/dashboard/src/utils/number.ts b/apps/dashboard/src/utils/number.ts index 357c1193802..56203ad136b 100644 --- a/apps/dashboard/src/utils/number.ts +++ b/apps/dashboard/src/utils/number.ts @@ -30,7 +30,3 @@ export const toSize = (value: number | bigint, defaultUnit?: string) => { return formatted; }; - -export const toPercent = (num1: number, num2: number) => { - return Math.round(((num1 / num2) * 100 * 10) / 10); -};