Use usePublicClient instead of createPublicClient to use the global a…

…lchemy api key (#80)

packages/nextjs/components/address-vision/ButtonsCard.tsx

@@ -3,8 +3,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { SafeOwner } from "./SafeOwner";
 import { useTheme } from "next-themes";
-import { Address, createPublicClient, http, isAddress } from "viem";
-import { mainnet } from "viem/chains";
+import { Address, isAddress } from "viem";
+import { usePublicClient } from "wagmi";
 import { useAddressStore } from "~~/services/store/store";
 
 const GNOSIS_SAFE_BYTECODE_PATTERN = "0x608060405273ffffffffffffffffffffffffffffffffffffffff600054167fa619486e";
@@ -26,19 +26,14 @@ const SAFE_ABI = [
   },
 ];
 
-export const client = createPublicClient({
-  chain: mainnet,
-  transport: http(),
-});
-
 export const ButtonsCard = () => {
   const [isContractAddress, setIsContractAddress] = useState<boolean>(false);
   const [isGnosisSafe, setIsGnosisSafe] = useState<boolean>(false);
   const [safeOwners, setSafeOwners] = useState<Address[]>([]);
   const [safeThreshold, setSafeThreshold] = useState<number>(0);
 
   const { resolvedAddress: address } = useAddressStore();
-
+  const client = usePublicClient();
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
 

packages/nextjs/components/address-vision/Navbar.tsx

@@ -4,23 +4,18 @@ import { useRouter } from "next/router";
 import { AddressInput } from "../scaffold-eth";
 import { QrScanner } from "@yudiel/react-qr-scanner";
 import { Address, isAddress } from "viem";
-import { createPublicClient, http } from "viem";
-import { mainnet } from "viem/chains";
 import { normalize } from "viem/ens";
+import { usePublicClient } from "wagmi";
 import { QrCodeIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useAddressStore, useNetworkBalancesStore } from "~~/services/store/store";
 import { notification } from "~~/utils/scaffold-eth";
 
-const client = createPublicClient({
-  chain: mainnet,
-  transport: http(),
-});
-
 export const Navbar = () => {
   const [inputValue, setInputValue] = useState("");
   const [isScannerVisible, setIsScannerVisible] = useState(false);
   const [inputChanged, setInputChanged] = useState(false);
 
+  const client = usePublicClient();
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -61,6 +56,7 @@ export const Navbar = () => {
       router.push(`/${trimmedAddress}`, undefined, { shallow: true });
       setEnsName(trimmedAddress);
       async function getEnsAddress(ensName: string) {
+        if (!client) return;
         const resolvedEnsName = await client.getEnsAddress({ name: normalize(ensName) });
         if (!resolvedEnsName) {
           notification.error("ENS name not found");
@@ -75,6 +71,7 @@ export const Navbar = () => {
     } else if (isAddress(trimmedAddress)) {
       setResolvedAddress(trimmedAddress);
       async function getEnsName(address: Address) {
+        if (!client) return;
         const ensName = await client.getEnsName({ address });
         router.push(`/${ensName || address}`, undefined, { shallow: true });
         setEnsName(ensName || "");

packages/nextjs/components/address-vision/index.tsx

@@ -6,3 +6,4 @@ export * from "./NftsCarousel";
 export * from "./QRCodeCard";
 export * from "./SafeOwner";
 export * from "./TokensTable";
+export * from "./TotalBalanceCard";

packages/nextjs/pages/[address].tsx

@@ -1,19 +1,19 @@
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 import type { GetServerSideProps, NextPage } from "next";
-import { createPublicClient, http, isAddress } from "viem";
-import { mainnet } from "viem/chains";
+import { isAddress } from "viem";
 import * as chains from "wagmi/chains";
 import { MetaHeader } from "~~/components/MetaHeader";
-import { AddressCard, ButtonsCard, Navbar, NetworkCard, QRCodeCard } from "~~/components/address-vision/";
-import { TotalBalanceCard } from "~~/components/address-vision/TotalBalanceCard";
+import {
+  AddressCard,
+  ButtonsCard,
+  Navbar,
+  NetworkCard,
+  QRCodeCard,
+  TotalBalanceCard,
+} from "~~/components/address-vision/";
 import { useAddressStore } from "~~/services/store/store";
 
-export const publicClient = createPublicClient({
-  chain: mainnet,
-  transport: http(),
-});
-
 type Props = {
   address: string;
 };

packages/nextjs/services/web3/wagmiConfig.tsx

@@ -1,11 +1,12 @@
 import { http } from "viem";
 import { mainnet } from "viem/chains";
 import { createConfig } from "wagmi";
+import { getAlchemyHttpUrl } from "~~/utils/scaffold-eth";
 
 export const wagmiConfig = createConfig({
   chains: [mainnet],
   ssr: true,
   transports: {
-    [mainnet.id]: http(),
+    [mainnet.id]: http(getAlchemyHttpUrl(1)),
   },
 });