fix(address type): allows user to set his preference in scaffold conf…

…ig (#630)

Fixes #514

packages/nextjs/components/blockexplorer/AddressStorageTab.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from "react";
-import { createPublicClient, http, toHex } from "viem";
+import { Address, createPublicClient, http, toHex } from "viem";
 import { hardhat } from "viem/chains";
 
 const publicClient = createPublicClient({
   chain: hardhat,
   transport: http(),
 });
 
-export const AddressStorageTab = ({ address }: { address: string }) => {
+export const AddressStorageTab = ({ address }: { address: Address }) => {
   const [storage, setStorage] = useState<string[]>([]);
 
   useEffect(() => {

packages/nextjs/components/scaffold-eth/Address.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { isAddress } from "viem";
+import { Address as AddressType, isAddress } from "viem";
 import { hardhat } from "viem/chains";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
@@ -10,7 +10,7 @@ import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
 type AddressProps = {
-  address?: string;
+  address?: AddressType;
   disableAddressLink?: boolean;
   format?: "short" | "long";
   size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";

packages/nextjs/components/scaffold-eth/Balance.tsx

@@ -1,8 +1,9 @@
+import { Address } from "viem";
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 
 type BalanceProps = {
-  address?: string;
+  address?: Address;
   className?: string;
 };
 

packages/nextjs/components/scaffold-eth/Contract/utilsDisplay.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { TransactionBase, TransactionReceipt, formatEther } from "viem";
+import { TransactionBase, TransactionReceipt, formatEther, isAddress } from "viem";
 import { Address } from "~~/components/scaffold-eth";
 import { replacer } from "~~/utils/scaffold-eth/common";
 
@@ -34,7 +34,7 @@ export const displayTxResult = (
     }
   }
 
-  if (typeof displayContent === "string" && displayContent.indexOf("0x") === 0 && displayContent.length === 42) {
+  if (typeof displayContent === "string" && isAddress(displayContent)) {
     return asText ? displayContent : <Address address={displayContent} />;
   }
 

packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -110,7 +110,7 @@ export const Faucet = () => {
               <AddressInput
                 placeholder="Destination Address"
                 value={inputAddress ?? ""}
-                onChange={value => setInputAddress(value)}
+                onChange={value => setInputAddress(value as AddressType)}
               />
               <EtherInput placeholder="Amount to send" value={sendValue} onChange={value => setSendValue(value)} />
               <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>

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

@@ -27,7 +27,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
 
   const [enteredEnsName, setEnteredEnsName] = useState<string>();
   const { data: ensName, isLoading: isEnsNameLoading } = useEnsName({
-    address: settledValue,
+    address: settledValue as Address,
     enabled: isAddress(debouncedValue),
     chainId: 1,
     cacheTime: 30_000,
@@ -62,7 +62,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
       name={name}
       placeholder={placeholder}
       error={ensAddress === null}
-      value={value}
+      value={value as Address}
       onChange={handleChange}
       disabled={isEnsAddressLoading || isEnsNameLoading || disabled}
       prefix={

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { NetworkOptions } from "./NetworkOptions";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { useDisconnect } from "wagmi";
+import { Address, useDisconnect } from "wagmi";
 import {
   ArrowLeftOnRectangleIcon,
   ArrowTopRightOnSquareIcon,
@@ -18,7 +18,7 @@ import { getTargetNetworks } from "~~/utils/scaffold-eth";
 const allowedNetworks = getTargetNetworks();
 
 type AddressInfoDropdownProps = {
-  address: string;
+  address: Address;
   blockExplorerAddressLink: string | undefined;
   displayName: string;
   ensAvatar?: string;

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx

@@ -1,12 +1,13 @@
 import { QRCodeSVG } from "qrcode.react";
+import { Address as AddressType } from "viem";
 import { Address } from "~~/components/scaffold-eth";
 
-interface IAddressQRCodeModal {
-  address: string;
+type AddressQRCodeModalProps = {
+  address: AddressType;
   modalId: string;
-}
+};
 
-export const AddressQRCodeModal: React.FC<IAddressQRCodeModal> = ({ address, modalId }) => {
+export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps) => {
   return (
     <>
       <div>

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -3,6 +3,7 @@ import { AddressInfoDropdown } from "./AddressInfoDropdown";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { Address } from "viem";
 import { useAutoConnect, useNetworkColor } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
@@ -41,18 +42,18 @@ export const RainbowKitCustomConnectButton = () => {
               return (
                 <>
                   <div className="flex flex-col items-center mr-1">
-                    <Balance address={account.address} className="min-h-0 h-auto" />
+                    <Balance address={account.address as Address} className="min-h-0 h-auto" />
                     <span className="text-xs" style={{ color: networkColor }}>
                       {chain.name}
                     </span>
                   </div>
                   <AddressInfoDropdown
-                    address={account.address}
+                    address={account.address as Address}
                     displayName={account.displayName}
                     ensAvatar={account.ensAvatar}
                     blockExplorerAddressLink={blockExplorerAddressLink}
                   />
-                  <AddressQRCodeModal address={account.address} modalId="qrcode-modal" />
+                  <AddressQRCodeModal address={account.address as Address} modalId="qrcode-modal" />
                 </>
               );
             })()}

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

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTargetNetwork } from "./useTargetNetwork";
+import { Address } from "viem";
 import { useBalance } from "wagmi";
 import { useGlobalState } from "~~/services/store/store";
 
-export function useAccountBalance(address?: string) {
+export function useAccountBalance(address?: Address) {
   const [isEthBalance, setIsEthBalance] = useState(true);
   const [balance, setBalance] = useState<number | null>(null);
   const price = useGlobalState(state => state.nativeCurrencyPrice);

packages/nextjs/pages/blockexplorer/address/[address].tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import fs from "fs";
 import { GetServerSideProps } from "next";
 import path from "path";
-import { createPublicClient, http } from "viem";
+import { Address as AddressType, createPublicClient, http } from "viem";
 import { hardhat } from "viem/chains";
 import {
   AddressCodeTab,
@@ -23,7 +23,7 @@ type AddressCodeTabProps = {
 };
 
 type PageProps = {
-  address: string;
+  address: AddressType;
   contractData: AddressCodeTabProps | null;
 };
 

packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import type { NextPage } from "next";
-import { Transaction, TransactionReceipt, formatEther, formatUnits } from "viem";
+import { Hash, Transaction, TransactionReceipt, formatEther, formatUnits } from "viem";
 import { hardhat } from "viem/chains";
 import { usePublicClient } from "wagmi";
 import { Address } from "~~/components/scaffold-eth";
@@ -13,7 +13,7 @@ const TransactionPage: NextPage = () => {
   const client = usePublicClient({ chainId: hardhat.id });
 
   const router = useRouter();
-  const { txHash } = router.query as { txHash?: `0x${string}` };
+  const { txHash } = router.query as { txHash?: Hash };
   const [transaction, setTransaction] = useState<Transaction>();
   const [receipt, setReceipt] = useState<TransactionReceipt>();
   const [functionCalled, setFunctionCalled] = useState<string>();

packages/nextjs/scaffold.config.ts

@@ -7,6 +7,7 @@ export type ScaffoldConfig = {
   walletConnectProjectId: string;
   onlyLocalBurnerWallet: boolean;
   walletAutoConnect: boolean;
+  useStrictAddressType?: boolean;
 };
 
 const scaffoldConfig = {
@@ -38,6 +39,12 @@ const scaffoldConfig = {
    * 2. If user is not connected to any wallet:  On reload, connect to burner wallet if burnerWallet.enabled is true && burnerWallet.onlyLocal is false
    */
   walletAutoConnect: true,
+
+  /**
+   * Strict address types makes viem/wagmi use `0x${string}` instead of plain string for addresses
+   * Leave this undefined or set to the default value if you're new to TypeScript
+   */
+  useStrictAddressType: false,
 } as const satisfies ScaffoldConfig;
 
 export default scaffoldConfig;

packages/nextjs/types/abitype/abi.d.ts

@@ -1,13 +1,16 @@
 import "abitype";
+import scaffoldConfig from "~~/scaffold.config";
+
+type AddressType = typeof scaffoldConfig extends { useStrictAddressType: true } ? `0x${string}` : string;
 
 declare module "viem/node_modules/abitype" {
   export interface Config {
-    AddressType: string;
+    AddressType: AddressType;
   }
 }
 
 declare module "abitype" {
   export interface Config {
-    AddressType: string;
+    AddressType: AddressType;
   }
 }

packages/nextjs/utils/scaffold-eth/fetchPriceFromUniswap.ts

@@ -1,6 +1,6 @@
 import { CurrencyAmount, Token } from "@uniswap/sdk-core";
 import { Pair, Route } from "@uniswap/v2-sdk";
-import { createPublicClient, http, parseAbi } from "viem";
+import { Address, createPublicClient, http, parseAbi } from "viem";
 import { mainnet } from "wagmi";
 import scaffoldConfig from "~~/scaffold.config";
 import { ChainWithAttributes } from "~~/utils/scaffold-eth";
@@ -31,7 +31,7 @@ export const fetchPriceFromUniswap = async (targetNetwork: ChainWithAttributes):
       targetNetwork.nativeCurrencyTokenAddress || "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
       18,
     );
-    const pairAddress = Pair.getAddress(TOKEN, DAI);
+    const pairAddress = Pair.getAddress(TOKEN, DAI) as Address;
 
     const wagmiConfig = {
       address: pairAddress,