Save connected user data to global store

packages/nextjs/app/submit-grant/_component/SubmitButton.tsx

@@ -8,6 +8,7 @@ import { useBGBuilderData } from "~~/hooks/useBGBuilderData";
 const SubmitButton = () => {
   const { pending } = useFormStatus();
   const { isConnected, address: connectedAddress } = useAccount();
+  // ToDo. We could use builderData from global state
   const { isBuilderPresent, isLoading: isFetchingBuilderData } = useBGBuilderData(connectedAddress);
   const isSubmitDisabled = !isConnected || isFetchingBuilderData || pending || !isBuilderPresent;
 

packages/nextjs/components/Footer.tsx

@@ -1,19 +1,17 @@
 import React from "react";
 import Link from "next/link";
 import { hardhat } from "viem/chains";
-import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 import { Faucet } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { useGlobalState } from "~~/services/store/store";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === hardhat.id;
 
@@ -22,14 +20,6 @@ export const Footer = () => {
       <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 && (
-              <div>
-                <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
-                  <CurrencyDollarIcon className="h-4 w-4" />
-                  <span>{nativeCurrencyPrice}</span>
-                </div>
-              </div>
-            )}
             {isLocalNetwork && (
               <>
                 <Faucet />

packages/nextjs/components/Header.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { RainbowKitCustomConnectButton } from "./scaffold-eth";
 import { LockClosedIcon } from "@heroicons/react/24/outline";
+import { useGlobalState } from "~~/services/store/store";
 
 type HeaderMenuLink = {
   label: string;
@@ -16,7 +17,6 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "Home",
     href: "/",
   },
-  // ToDo. Show only on admins
   {
     label: "Admin",
     href: "/admin",
@@ -26,11 +26,13 @@ export const menuLinks: HeaderMenuLink[] = [
 
 export const HeaderMenuLinks = () => {
   const pathname = usePathname();
+  const builderData = useGlobalState(state => state.builderData);
 
   return (
     <>
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
+        if (href === "/admin" && builderData?.role !== "admin") return null;
         return (
           <li key={href}>
             <Link

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -4,25 +4,28 @@ import { useEffect, useState } from "react";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
-import { WagmiConfig } from "wagmi";
+import { WagmiConfig, useAccount } from "wagmi";
 import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
-import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
+import { useBGBuilderData } from "~~/hooks/useBGBuilderData";
 import { useGlobalState } from "~~/services/store/store";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
-  const price = useNativeCurrencyPrice();
-  const setNativeCurrencyPrice = useGlobalState(state => state.setNativeCurrencyPrice);
+  const { address } = useAccount();
+  const { data } = useBGBuilderData(address);
+
+  const setBuilderData = useGlobalState(state => state.setBuilderData);
 
   useEffect(() => {
-    if (price > 0) {
-      setNativeCurrencyPrice(price);
+    if (data?.id) {
+      setBuilderData(data);
     }
-  }, [setNativeCurrencyPrice, price]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setBuilderData, data?.id]);
 
   return (
     <>

packages/nextjs/services/store/store.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import scaffoldConfig from "~~/scaffold.config";
+import { BuilderData } from "~~/services/database/schema";
 import { ChainWithAttributes } from "~~/utils/scaffold-eth";
 
 /**
@@ -16,11 +17,15 @@ type GlobalState = {
   setNativeCurrencyPrice: (newNativeCurrencyPriceState: number) => void;
   targetNetwork: ChainWithAttributes;
   setTargetNetwork: (newTargetNetwork: ChainWithAttributes) => void;
+  builderData: BuilderData | null;
+  setBuilderData: (newBuilderData: BuilderData) => void;
 };
 
 export const useGlobalState = create<GlobalState>(set => ({
   nativeCurrencyPrice: 0,
   setNativeCurrencyPrice: (newValue: number): void => set(() => ({ nativeCurrencyPrice: newValue })),
   targetNetwork: scaffoldConfig.targetNetworks[0],
   setTargetNetwork: (newTargetNetwork: ChainWithAttributes) => set(() => ({ targetNetwork: newTargetNetwork })),
+  builderData: null,
+  setBuilderData: (newBuilderData: BuilderData) => set(() => ({ builderData: newBuilderData })),
 }));