useAppStore => useGlobalState

packages/nextjs/components/Footer.tsx

@@ -3,14 +3,14 @@ import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { Faucet } from "~~/components/scaffold-eth";
-import { useAppStore } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
  * Site footer
  */
 export const Footer = () => {
-  const nativeCurrencyPrice = useAppStore(state => state.nativeCurrencyPrice);
+  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
 
   return (
     <div className="min-h-0 p-5 mb-11 lg:mb-0">

packages/nextjs/components/scaffold-eth/Input/EtherInput.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
 import { CommonInputProps, InputBase, SIGNED_NUMBER_REGEX } from "~~/components/scaffold-eth";
-import { useAppStore } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 
 const MAX_DECIMALS_USD = 2;
 
@@ -45,7 +45,7 @@ function displayValueToEtherValue(usdMode: boolean, displayValue: string, native
  */
 export const EtherInput = ({ value, name, placeholder, onChange }: CommonInputProps) => {
   const [transitoryDisplayValue, setTransitoryDisplayValue] = useState<string>();
-  const nativeCurrencyPrice = useAppStore(state => state.nativeCurrencyPrice);
+  const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
   const [usdMode, setUSDMode] = useState(false);
 
   // The displayValue is derived from the ether value that is controlled outside of the component

packages/nextjs/hooks/scaffold-eth/useAccountBalance.ts

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useState } from "react";
 import { useBalance } from "wagmi";
-import { useAppStore } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 export function useAccountBalance(address?: string) {
   const [isEthBalance, setIsEthBalance] = useState(true);
   const [balance, setBalance] = useState<number | null>(null);
-  const price = useAppStore(state => state.nativeCurrencyPrice);
+  const price = useGlobalState(state => state.nativeCurrencyPrice);
 
   const {
     data: fetchedBalanceData,

packages/nextjs/pages/_app.tsx

@@ -10,14 +10,14 @@ import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
 import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
-import { useAppStore } from "~~/services/store/store";
+import { useGlobalState } from "~~/services/store/store";
 import { wagmiClient } from "~~/services/web3/wagmiClient";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 import "~~/styles/globals.css";
 
 const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   const price = useNativeCurrencyPrice();
-  const setNativeCurrencyPrice = useAppStore(state => state.setNativeCurrencyPrice);
+  const setNativeCurrencyPrice = useGlobalState(state => state.setNativeCurrencyPrice);
   // This variable is required for initial client side rendering of correct theme for RainbowKit
   const [isDarkTheme, setIsDarkTheme] = useState(true);
   const { isDarkMode } = useDarkMode();

packages/nextjs/services/store/store.ts

@@ -3,18 +3,18 @@ import create from "zustand";
 /**
  * Zustand Store
  *
- * You can add global state to the app using this AppStore, to get & set
+ * You can add global state to the app using this useGlobalState, to get & set
  * values from anywhere in the app.
  *
  * Think about it as a global useState.
  */
 
-type TAppStore = {
+type TGlobalState = {
   nativeCurrencyPrice: number;
   setNativeCurrencyPrice: (newNativeCurrencyPriceState: number) => void;
 };
 
-export const useAppStore = create<TAppStore>(set => ({
+export const useGlobalState = create<TGlobalState>(set => ({
   nativeCurrencyPrice: 0,
   setNativeCurrencyPrice: (newValue: number): void => set(() => ({ nativeCurrencyPrice: newValue })),
 }));