feat: fetch eth price

packages/nextjs/components/Footer.tsx

@@ -8,6 +8,9 @@ import {
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
+import { devnet } from "@starknet-react/chains";
 // import { Faucet } from "~~/components/scaffold-eth";
 // import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 // import { useGlobalState } from "~~/services/store/store";
@@ -16,18 +19,18 @@ import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
  * Site footer
  */
 export const Footer = () => {
-  //   const nativeCurrencyPrice = useGlobalState(
-  //     (state) => state.nativeCurrencyPrice
-  //   );
-  //   const { targetNetwork } = useTargetNetwork();
-  const isLocalNetwork = false;
+  const nativeCurrencyPrice = useGlobalState(
+    (state) => state.nativeCurrencyPrice,
+  );
+  const { targetNetwork } = useTargetNetwork();
+  const isLocalNetwork = targetNetwork.id === devnet.id;
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
-            {/* {nativeCurrencyPrice > 0 && (
+            {nativeCurrencyPrice > 0 && (
               <div>
                 <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
                   <CurrencyDollarIcon className="h-4 w-4" />
@@ -37,7 +40,7 @@ export const Footer = () => {
             )}
             {isLocalNetwork && (
               <>
-                <Faucet />
+                {/*<Faucet />*/}
                 <Link
                   href="/blockexplorer"
                   passHref
@@ -47,7 +50,7 @@ export const Footer = () => {
                   <span>Block Explorer</span>
                 </Link>
               </>
-            )} */}
+            )}
           </div>
           <SwitchTheme
             className={`pointer-events-auto ${

packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx

@@ -17,8 +17,11 @@ import { ProgressBar } from "~~/components/scaffold-stark/ProgressBar";
 import { appChains } from "~~/services/web3/connectors";
 import { BurnerConnector } from "~~/services/web3/stark-burner/BurnerConnector";
 import provider from "~~/services/web3/provider";
+import { useNativeCurrencyPrice } from "~~/hooks/scaffold-stark/useNativeCurrencyPrice";
 
 const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
+  useNativeCurrencyPrice();
+
   return (
     <>
       <div className="flex flex-col min-h-screen">

packages/nextjs/components/scaffold-stark/Balance.tsx

@@ -70,7 +70,12 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
         {displayUsdMode ? (
           <>
             <span className="text-[0.8em] font-bold mr-1">$</span>
-            <span>{(formattedBalance * price).toFixed(2)}</span>
+            <span>
+              {(formattedBalance * price).toLocaleString("en-US", {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })}
+            </span>
           </>
         ) : (
           <>

packages/nextjs/hooks/scaffold-stark/useNativeCurrencyPrice.ts

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useTargetNetwork } from "./useTargetNetwork";
+import { useInterval } from "usehooks-ts";
+import scaffoldConfig from "~~/scaffold.config";
+import { fetchPriceFromCoingecko } from "~~/utils/scaffold-stark";
+import { useGlobalState } from "~~/services/store/store";
+
+/**
+ * Get the price of Native Currency based on Native Token/DAI trading pair from Uniswap SDK
+ */
+export const useNativeCurrencyPrice = () => {
+  const { targetNetwork } = useTargetNetwork();
+  const nativeCurrencyPrice = useGlobalState(
+    (state) => state.nativeCurrencyPrice,
+  );
+  const setNativeCurrencyPrice = useGlobalState(
+    (state) => state.setNativeCurrencyPrice,
+  );
+  // Get the price of ETH from Coingecko on mount
+  useEffect(() => {
+    (async () => {
+      if (nativeCurrencyPrice == 0) {
+        const price = await fetchPriceFromCoingecko(targetNetwork);
+        setNativeCurrencyPrice(price);
+      }
+    })();
+  }, [targetNetwork]);
+
+  // Get the price of ETH from Coingecko at a given interval
+  useInterval(
+    async () => {
+      const price = await fetchPriceFromCoingecko(targetNetwork);
+      setNativeCurrencyPrice(price);
+    },
+    scaffoldConfig.pollingInterval ? 4000 : scaffoldConfig.pollingInterval,
+  );
+
+  //return nativeCurrencyPrice;
+};

packages/nextjs/scaffold.config.ts

@@ -2,6 +2,7 @@ import * as chains from "@starknet-react/chains";
 
 export type ScaffoldConfig = {
   targetNetworks: readonly chains.Chain[];
+  pollingInterval?: number | null;
   onlyLocalBurnerWallet: boolean;
   rpcProviderUrl: string;
   walletAutoConnect: boolean;
@@ -12,6 +13,9 @@ const scaffoldConfig = {
   // Only show the Burner Wallet when running on devnet
   onlyLocalBurnerWallet: false,
   rpcProviderUrl: process.env.NEXT_PUBLIC_PROVIDER_URL || "",
+  // The interval at which your front-end polls the RPC servers for new data
+  // it has no effect if you only target the local network (default is 4000)
+  pollingInterval: null,
   /**
    * Auto connect:
    * 1. If the user was connected into a wallet before, on page reload reconnect automatically

packages/nextjs/utils/scaffold-stark/fetchPriceFromCoingecko.ts

@@ -0,0 +1,27 @@
+import { ChainWithAttributes } from "~~/utils/scaffold-stark";
+
+export const fetchPriceFromCoingecko = async (
+  targetNetwork: ChainWithAttributes,
+): Promise<number> => {
+  if (
+    targetNetwork.nativeCurrency.symbol !== "ETH" &&
+    targetNetwork.nativeCurrency.symbol !== "SEP" &&
+    !targetNetwork.nativeCurrencyTokenAddress
+  ) {
+    return 0;
+  }
+
+  try {
+    const response = await fetch(
+      "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd",
+    );
+    const data = await response.json();
+    return data.ethereum.usd;
+  } catch (error) {
+    console.error(
+      `useNativeCurrencyPrice - Error fetching ${targetNetwork.nativeCurrency.symbol} price from Coingecko: `,
+      error,
+    );
+    return 0;
+  }
+};

packages/nextjs/utils/scaffold-stark/index.ts

@@ -1,2 +1,3 @@
 export * from "./networks";
 export * from "./notification";
+export * from "./fetchPriceFromCoingecko";

packages/nextjs/utils/scaffold-stark/networks.ts

@@ -4,6 +4,7 @@ import scaffoldConfig from "~~/scaffold.config";
 type ChainAttributes = {
   // color | [lightThemeColor, darkThemeColor]
   color: string | [string, string];
+  nativeCurrencyTokenAddress?: string;
 };
 
 export type ChainWithAttributes = chains.Chain & Partial<ChainAttributes>;