Merge pull request #53 from Quantum3-Labs/50-eth-balance-component

Fetch ETH api in balance component
Scaffold-Stark · Apr 16, 2024 · fa4e83d · fa4e83d
2 parents 4f7fbb5 + eb2de3a
commit fa4e83d
Show file tree

Hide file tree

Showing 10 changed files with 648 additions and 24 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/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 ${

diff --git a/packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx b/packages/nextjs/components/ScaffoldStarkAppWithProviders.tsx
@@ -6,22 +6,22 @@ import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import {
   StarknetConfig,
-  publicProvider,
   argent,
   braavos,
   useInjectedConnectors,
   starkscan,
-  jsonRpcProvider,
-  starknetChainId,
 } from "@starknet-react/core";
 import { Header } from "~~/components/Header";
 import { Footer } from "~~/components/Footer";
 import { ProgressBar } from "~~/components/scaffold-stark/ProgressBar";
 import { appChains } from "~~/services/web3/connectors";
 import { BurnerConnector } from "~~/services/web3/stark-burner/BurnerConnector";
-import scaffoldConfig from "~~/scaffold.config";
+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">
@@ -42,16 +42,6 @@ export const ScaffoldStarkAppWithProviders = ({
   const isDarkMode = resolvedTheme === "dark";
   const [mounted, setMounted] = useState(false);
 
-  const provider =
-    scaffoldConfig.rpcProviderUrl == ""
-      ? publicProvider()
-      : jsonRpcProvider({
-          rpc: () => ({
-            nodeUrl: scaffoldConfig.rpcProviderUrl,
-            chainId: starknetChainId(scaffoldConfig.targetNetworks[0].id),
-          }),
-        });
-
   useEffect(() => {
     setMounted(true);
   }, []);

diff --git a/packages/nextjs/components/scaffold-stark/Balance.tsx b/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>
           </>
         ) : (
           <>