chore: Update AnnouncementBar content and styles

docusaurus.config.js

@@ -215,7 +215,7 @@ const config = {
       announcementBar: {
         id: "mainnet",
         content:
-          `Cartesi Rollups is Mainnet Ready! {{balance}} in {{symbol}} is up for grabs... if you can <a href="https://honeypot.cartesi.io/" target="_blank" rel="noopener noreferrer">hack Cartesi Rollups</a>.`,
+          `Cartesi Rollups is Mainnet Ready! Over 1M in CTSI is up for grabs... if you can <a href="https://honeypot.cartesi.io/" target="_blank" rel="noopener noreferrer">hack Cartesi Rollups</a>.`,
 
         backgroundColor: "rgba(0, 0, 0, 0.7)",
         textColor: "#FFFFFF",

src/theme/AnnouncementBar/Content/index.js

@@ -1,97 +1,17 @@
-import React, { useEffect, useMemo, useState } from "react";
-import clsx from "clsx";
-import { useThemeConfig } from "@docusaurus/theme-common";
-import styles from "./styles.module.css";
-import { JsonRpcProvider, Contract, formatEther } from "ethers";
-
-import { wagmiContract } from "./contracts/contracts";
-
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
 export default function AnnouncementBarContent(props) {
-  const { announcementBar } = useThemeConfig();
-  const { content } = announcementBar;
-
-  const [loaded, setLoaded] = useState(false);
-  const [dynamicContent, setDynamicContent] = useState(content);
-  const [balanceLoaded, setBalanceLoaded] = useState(false);
-
-  const formatLargeNumber = (num) => {
-    const absNum = Math.abs(num);
-    if (absNum >= 1000000) {
-      return (num / 1000000).toFixed(1) + "M";
-    } else if (absNum >= 1000) {
-      return (num / 1000).toFixed(1) + "K";
-    } else {
-      return num.toString();
-    }
-  };
-
-  // Fetch data for variables in the content
-  const getBalance = async () => {
-    const provider = new JsonRpcProvider(
-      "https://eth-mainnet.g.alchemy.com/v2/cBxzBgf91hVaZIV-gnC0kuc-K1WGd2xX"
-    );
-    const contract = new Contract(
-      wagmiContract.address,
-      wagmiContract.abi,
-      provider
-    );
-
-    const balance = await contract.balanceOf(
-      "0x0974CC873dF893B302f6be7ecf4F9D4b1A15C366"
-    );
-    setBalanceLoaded(true);
-
-    const balanceInEther = parseFloat(formatEther(balance));
-    return formatLargeNumber(balanceInEther);
-  };
-
-  // Add all variables and fetchers here
-  const fetchMap = {
-    balance: getBalance(),
-    symbol: "CTSI",
-  };
-
-  // Extract variables from the content
-  const contentVars = useMemo(() => {
-    return content.match(/{{(.*?)}}/g)?.map((v) => v.slice(2, -2));
-  }, [content]);
-
-  // Update the content with the fetched values
-  useEffect(() => {
-    if (!contentVars) {
-      return;
-    }
-
-    function fetchVars() {
-      return Promise.all(
-        contentVars.map((contentVar) => {
-          return fetchMap[contentVar];
-        })
-      );
-    }
-
-    async function updateContent() {
-      const values = await fetchVars();
-      let newContent = content;
-      contentVars.forEach((v, i) => {
-        newContent = newContent.replace(`{{${v}}}`, values[i]);
-      });
-      setDynamicContent(newContent);
-      setLoaded(true);
-    }
-
-    updateContent();
-  }, [contentVars, balanceLoaded]);
-
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar;
   return (
     <div
       {...props}
       className={clsx(styles.content, props.className)}
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: loaded ? dynamicContent : null,
-      }}
+      dangerouslySetInnerHTML={{__html: content}}
     />
   );
-}
+}