feat(BurnLeaderboard): Add blob fee category to burn leaderboard and …

…cateogries

src/mainsite/api/burn-categories.ts

@@ -7,6 +7,7 @@ export const categoryId = [
  "defi",
  // Contract creations is a special case and currently injected on the frontend.
  "creations",
+ "blobs",
  // Eth transfers is a special case and currently injected on the frontend.
  "transfers",
  "gaming",
@@ -34,6 +35,7 @@ export const categoryDisplayMap: Record<CategoryId, string> = {
  nft: "NFTs",
  transfers: "ETH transfers",
  creations: "contract creations",
+ blobs: "blob fees",
  woof: "woof",
 };
 

src/mainsite/api/leaderboards.ts

@@ -46,10 +46,23 @@ type ContractCreationsEntry = {
  id: string;
 };
 
+type BlobFeesEntry = {
+ type: "blob-fees";
+ name: string;
+ fees: number;
+ feesUsd: number;
+ /**
+ * @deprecated
+ */
+ id: string;
+};
+
+
 // Name is undefined because we don't always know the name for a contract. Image is undefined because we don't always have an image for a contract. Address is undefined because base fees paid for ETH transfers are shared between many addresses.
 export type LeaderboardEntry =
  | ContractEntry
  | EthTransfersEntry
+ | BlobFeesEntry
  | ContractCreationsEntry;
 
 export type Leaderboards = {

src/mainsite/components/BurnCategoryWidget.tsx

@@ -40,6 +40,8 @@ import bridgeSlateus from "../../assets/bridge-slateus.svg";
 import bridgeOwn from "../../assets/bridge-own.svg";
 import chartSlateus from "../../assets/chart-slateus.svg";
 import chartOwn from "../../assets/chart-own.svg";
+import mdBubbleChartOwn from "../../assets/md-bubble-chart-own.svg";
+import mdBubbleChartSlateus from "../../assets/md-bubble-chart-slateus.svg";
 import type { StaticImageData } from "next/image";
 import Image from "next/image";
 import type { OnClick } from "../../components/TimeFrameControl";
@@ -73,6 +75,7 @@ const activeCategories: CategoryId[] = [
  "defi",
  "transfers",
  "creations",
+ "blobs",
 ];
 
 const alwaysShowImgPercentThreshold = 0.08;
@@ -295,6 +298,7 @@ const imgAltMap: Record<CategoryId, string> = {
  nft: "icon of a wooden painters palette, signaling NFTs",
  transfers: "an image of flying money, signaling ETH transfers",
  creations: "a copy icon, signaling contract creations",
+ blobs: "a blob icon, signaling blob fees",
  woof: "a dog, signaling meme tokens",
 };
 
@@ -346,6 +350,10 @@ const imgMap: Record<
  coloroff: copySlateus as StaticImageData,
  coloron: copyOwn as StaticImageData,
  },
+ blobs: {
+ coloroff: mdBubbleChartSlateus as StaticImageData,
+ coloron: mdBubbleChartOwn as StaticImageData,
+ },
  woof: {
  coloroff: questionMarkSlateus as StaticImageData,
  coloron: questionMarkOwn as StaticImageData,
@@ -364,6 +372,7 @@ const initialState: Record<CategoryId, boolean> = {
  nft: false,
  transfers: false,
  creations: false,
+ blobs: false,
  woof: false,
 };
 
@@ -508,15 +517,15 @@ const BurnCategoryWidget: FC<Props> = ({ onClickTimeFrame, timeFrame }) => {
  O.map(A.filter((entry) => entry.type === "contract-creations")),
  O.chain(A.head),
  O.map(
- (transfers): CategoryProps => ({
+ (creations): CategoryProps => ({
  imgName: imgMap.creations,
  id: "creations",
  imgAlt: "missing icon for contract creation fees",
- fees: transfers.fees,
- feesUsd: transfers.feesUsd,
+ fees: creations.fees,
+ feesUsd: creations.feesUsd,
  transactionCount: undefined,
- percentOfTotalBurn: transfers.fees / burnSum.sum.eth / 1e18,
- percentOfTotalBurnUsd: transfers.feesUsd / burnSum.sum.usd,
+ percentOfTotalBurn: creations.fees / burnSum.sum.eth / 1e18,
+ percentOfTotalBurnUsd: creations.feesUsd / burnSum.sum.usd,
  onHoverCategory: (hovering) =>
  dispatchHover({
  type: hovering ? "highlight" : "unhighlight",
@@ -527,6 +536,33 @@ const BurnCategoryWidget: FC<Props> = ({ onClickTimeFrame, timeFrame }) => {
  ),
  );
 
+ // contractCreations is a special case that we hack on in the frontend.
+ const blobFees = pipe(
+ leaderboard,
+ O.fromNullable,
+ O.map(A.filter((entry) => entry.type === "blob-fees")),
+ O.chain(A.head),
+ O.map(
+ (blobs): CategoryProps => ({
+ imgName: imgMap.blobs,
+ id: "blobs",
+ imgAlt: "missing icon for contract blob fees",
+ fees: blobs.fees,
+ feesUsd: blobs.feesUsd,
+ transactionCount: undefined,
+ percentOfTotalBurn: blobs.fees / burnSum.sum.eth / 1e18,
+ percentOfTotalBurnUsd: blobs.feesUsd / burnSum.sum.usd,
+ onHoverCategory: (hovering) =>
+ dispatchHover({
+ type: hovering ? "highlight" : "unhighlight",
+ category: "blobs",
+ }),
+ showHighlight: hoverState["blobs"] ?? false,
+ }),
+ ),
+ );
+
+
  const miscCategory = pipe(
  burnCategories,
  O.fromNullable,
@@ -545,7 +581,7 @@ const BurnCategoryWidget: FC<Props> = ({ onClickTimeFrame, timeFrame }) => {
  );
 
  const combinedCategories = pipe(
- OAlt.sequenceTuple(apiBurnCategories, ethTransfers, contractDeployments, miscCategory),
+ OAlt.sequenceTuple(apiBurnCategories, ethTransfers, contractDeployments, blobFees, miscCategory),
  O.map(([apiCategories, ethTransfers, contractDeployments, miscCategory]) =>
  pipe(
  apiCategories,

src/mainsite/components/BurnLeaderboard/LeaderboardRow.tsx

@@ -61,6 +61,8 @@ const LeaderboardRow: FC<Props> = ({
  ? "/leaderboard-images/bot-v2.svg"
  : type === "contract-creations"
  ? "/leaderboard-images/contract-creations.svg"
+ : type === "blob-fees"
+ ? "/leaderboard-images/blob-fees.svg"
  : undefined;
 
  const isDoneLoading = type !== undefined;