diff --git a/templates/base/packages/nextjs/app/blockexplorer/page.tsx b/templates/base/packages/nextjs/app/blockexplorer/page.tsx
index 80f481cac..61e6fc6de 100644
--- a/templates/base/packages/nextjs/app/blockexplorer/page.tsx
+++ b/templates/base/packages/nextjs/app/blockexplorer/page.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
import { PaginationButton, SearchBar, TransactionsTable } from "./_components";
import type { NextPage } from "next";
import { hardhat } from "viem/chains";
@@ -11,24 +11,23 @@ import { notification } from "~~/utils/scaffold-eth";
const BlockExplorer: NextPage = () => {
const { blocks, transactionReceipts, currentPage, totalBlocks, setCurrentPage, error } = useFetchBlocks();
const { targetNetwork } = useTargetNetwork();
+ const [isLocalNetwork, setIsLocalNetwork] = useState(true);
+ const [hasError, setHasError] = useState(false);
+
+ useEffect(() => {
+ if (targetNetwork.id !== hardhat.id) {
+ setIsLocalNetwork(false);
+ }
+ }, [targetNetwork.id]);
useEffect(() => {
if (targetNetwork.id === hardhat.id && error) {
- notification.error(
- <>
-
- >,
- );
+ setHasError(true);
}
+ }, [targetNetwork.id, error]);
- if (targetNetwork.id !== hardhat.id) {
+ useEffect(() => {
+ if (!isLocalNetwork) {
notification.error(
<>
@@ -48,7 +47,29 @@ const BlockExplorer: NextPage = () => {
>,
);
}
- }, [error, targetNetwork]);
+ }, [
+ isLocalNetwork,
+ targetNetwork.blockExplorers?.default.name,
+ targetNetwork.blockExplorers?.default.url,
+ targetNetwork.name,
+ ]);
+
+ useEffect(() => {
+ if (hasError) {
+ notification.error(
+ <>
+
diff --git a/templates/base/packages/nextjs/app/layout.tsx b/templates/base/packages/nextjs/app/layout.tsx
index 4e02a1456..8ed8ca41f 100644
--- a/templates/base/packages/nextjs/app/layout.tsx
+++ b/templates/base/packages/nextjs/app/layout.tsx
@@ -9,19 +9,23 @@ const baseUrl = process.env.VERCEL_URL
: `http://localhost:${process.env.PORT || 3000}`;
const imageUrl = `${baseUrl}/thumbnail.jpg`;
+const title = "Scaffold-ETH 2 App";
+const titleTemplate = "%s | Scaffold-ETH 2";
+const description = "Built with 🏗 Scaffold-ETH 2";
+
export const metadata: Metadata = {
metadataBase: new URL(baseUrl),
title: {
- default: "Scaffold-ETH 2 App",
- template: "%s | Scaffold-ETH 2",
+ default: title,
+ template: titleTemplate,
},
- description: "Built with 🏗 Scaffold-ETH 2",
+ description,
openGraph: {
title: {
- default: "Scaffold-ETH 2 App",
- template: "%s | Scaffold-ETH 2",
+ default: title,
+ template: titleTemplate,
},
- description: "Built with 🏗 Scaffold-ETH 2",
+ description,
images: [
{
url: imageUrl,
@@ -32,10 +36,10 @@ export const metadata: Metadata = {
card: "summary_large_image",
images: [imageUrl],
title: {
- default: "Scaffold-ETH 2",
- template: "%s | Scaffold-ETH 2",
+ default: title,
+ template: titleTemplate,
},
- description: "Built with 🏗 Scaffold-ETH 2",
+ description,
},
icons: {
icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
diff --git a/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx b/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx
index 7811f5fd1..d778cb44f 100644
--- a/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx
+++ b/templates/base/packages/nextjs/components/scaffold-eth/Balance.tsx
@@ -2,8 +2,9 @@
import { useState } from "react";
import { Address } from "viem";
-import { useAccountBalance } from "~~/hooks/scaffold-eth";
+import { useBalance } from "wagmi";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
+import { useGlobalState } from "~~/services/store/store";
type BalanceProps = {
address?: Address;
@@ -16,7 +17,17 @@ type BalanceProps = {
*/
export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
const { targetNetwork } = useTargetNetwork();
- const { balance, price, isError, isLoading } = useAccountBalance(address);
+
+ const price = useGlobalState(state => state.nativeCurrencyPrice);
+ const {
+ data: balance,
+ isError,
+ isLoading,
+ } = useBalance({
+ address,
+ watch: true,
+ });
+
const [displayUsdMode, setDisplayUsdMode] = useState(price > 0 ? Boolean(usdMode) : false);
const toggleBalanceMode = () => {
@@ -44,6 +55,8 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => {
);
}
+ const formattedBalance = balance ? Number(balance.formatted) : 0;
+
return (