From f50dfcc0a9d244b9615628d88306bec208fa1df9 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Wed, 25 Dec 2024 19:48:13 +0300
Subject: [PATCH] Use usePublicClient instead of createPublicClient to use the
 global alchemy api key (#80)

---
 .../components/address-vision/ButtonsCard.tsx  | 11 +++--------
 .../components/address-vision/Navbar.tsx       | 11 ++++-------
 .../nextjs/components/address-vision/index.tsx |  1 +
 packages/nextjs/pages/[address].tsx            | 18 +++++++++---------
 packages/nextjs/services/web3/wagmiConfig.tsx  |  3 ++-
 5 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/packages/nextjs/components/address-vision/ButtonsCard.tsx b/packages/nextjs/components/address-vision/ButtonsCard.tsx
index 51cac53..93b3362 100644
--- a/packages/nextjs/components/address-vision/ButtonsCard.tsx
+++ b/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,11 +26,6 @@ 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);
@@ -38,7 +33,7 @@ export const ButtonsCard = () => {
   const [safeThreshold, setSafeThreshold] = useState<number>(0);
 
   const { resolvedAddress: address } = useAddressStore();
-
+  const client = usePublicClient();
   const { resolvedTheme } = useTheme();
   const isDarkMode = resolvedTheme === "dark";
 
diff --git a/packages/nextjs/components/address-vision/Navbar.tsx b/packages/nextjs/components/address-vision/Navbar.tsx
index 2dfc5c7..aff71d8 100644
--- a/packages/nextjs/components/address-vision/Navbar.tsx
+++ b/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 || "");
diff --git a/packages/nextjs/components/address-vision/index.tsx b/packages/nextjs/components/address-vision/index.tsx
index b7edb03..6ede1e5 100644
--- a/packages/nextjs/components/address-vision/index.tsx
+++ b/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";
diff --git a/packages/nextjs/pages/[address].tsx b/packages/nextjs/pages/[address].tsx
index dd5a5ff..8043d71 100644
--- a/packages/nextjs/pages/[address].tsx
+++ b/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;
 };
diff --git a/packages/nextjs/services/web3/wagmiConfig.tsx b/packages/nextjs/services/web3/wagmiConfig.tsx
index 8420601..11f5894 100644
--- a/packages/nextjs/services/web3/wagmiConfig.tsx
+++ b/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)),
   },
 });