fix DaisyUI semantic color misuses

packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx

@@ -21,7 +21,7 @@ export const AddressComponent = ({
       </div>
       <div className="col-span-5 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10">
         <div className="col-span-1 flex flex-col">
-          <div className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
+          <div className="bg-base-100 border-base-300 border px-6 lg:px-8 mb-6 space-y-1 py-4 overflow-x-auto">
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <Address address={address} format="long" onlyEnsOrAddress chain={targetNetwork} />

packages/nextjs/app/blockexplorer/_components/BackButton.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 export const BackButton = () => {
   const router = useRouter();
   return (
-    <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+    <button className="btn btn-sm btn-secondary" onClick={() => router.back()}>
       Back
     </button>
   );

packages/nextjs/app/blockexplorer/_components/PaginationButton.tsx

@@ -12,8 +12,8 @@ export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: Pa
   const isPrevButtonDisabled = currentPage === 0;
   const isNextButtonDisabled = currentPage + 1 >= Math.ceil(totalItems / ITEMS_PER_PAGE);
 
-  const prevButtonClass = isPrevButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
-  const nextButtonClass = isNextButtonDisabled ? "btn-disabled cursor-default" : "btn-primary";
+  const prevButtonClass = isPrevButtonDisabled ? "btn-disabled cursor-default" : "btn-secondary";
+  const nextButtonClass = isNextButtonDisabled ? "btn-disabled cursor-default" : "btn-secondary";
 
   if (isNextButtonDisabled && isPrevButtonDisabled) return null;
 
@@ -26,7 +26,7 @@ export const PaginationButton = ({ currentPage, totalItems, setCurrentPage }: Pa
       >
         <ArrowLeftIcon className="h-4 w-4" />
       </button>
-      <span className="self-center text-primary-content font-medium">Page {currentPage + 1}</span>
+      <span className="self-center font-medium">Page {currentPage + 1}</span>
       <button
         className={`btn btn-sm ${nextButtonClass}`}
         disabled={isNextButtonDisabled}

packages/nextjs/app/blockexplorer/_components/SearchBar.tsx

@@ -35,7 +35,7 @@ export const SearchBar = () => {
   return (
     <form onSubmit={handleSearch} className="flex items-center justify-end mb-5 space-x-3 mx-5">
       <input
-        className="border-primary bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 rounded-md shadow-md focus:outline-hidden focus:ring-2 focus:ring-accent"
+        className="border border-base-300 bg-base-100 text-base-content placeholder:text-base-content/50 p-2 mr-2 w-full md:w-1/2 lg:w-1/3 focus:outline-hidden focus:ring-2 focus:ring-primary"
         type="text"
         value={searchInput}
         placeholder="Search by hash or address"

packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx

@@ -10,17 +10,17 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
 
   return (
     <div className="flex justify-center px-4 md:px-0">
-      <div className="overflow-x-auto w-full shadow-2xl rounded-xl">
+      <div className="overflow-x-auto w-full border border-base-300">
         <table className="table text-xl bg-base-100 table-zebra w-full md:table-md table-sm">
           <thead>
-            <tr className="rounded-xl text-sm text-base-content">
-              <th className="bg-primary">Transaction Hash</th>
-              <th className="bg-primary">Function Called</th>
-              <th className="bg-primary">Block Number</th>
-              <th className="bg-primary">Time Mined</th>
-              <th className="bg-primary">From</th>
-              <th className="bg-primary">To</th>
-              <th className="bg-primary text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
+            <tr className="text-sm text-base-content">
+              <th className="bg-base-200">Transaction Hash</th>
+              <th className="bg-base-200">Function Called</th>
+              <th className="bg-base-200">Block Number</th>
+              <th className="bg-base-200">Time Mined</th>
+              <th className="bg-base-200">From</th>
+              <th className="bg-base-200">To</th>
+              <th className="bg-base-200 text-end">Value ({targetNetwork.nativeCurrency.symbol})</th>
             </tr>
           </thead>
           <tbody>

packages/nextjs/app/blockexplorer/page.tsx

@@ -39,7 +39,7 @@ const BlockExplorer: NextPage = () => {
           </p>
           <p className="mt-1 break-normal">
             - You can use{" "}
-            <a className="text-accent" href={targetNetwork.blockExplorers?.default.url}>
+            <a className="link link-primary" href={targetNetwork.blockExplorers?.default.url}>
               {targetNetwork.blockExplorers?.default.name}
             </a>{" "}
             instead

packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx

@@ -39,13 +39,13 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
 
   return (
     <div className="container mx-auto mt-10 mb-20 px-10 md:px-0">
-      <button className="btn btn-sm btn-primary" onClick={() => router.back()}>
+      <button className="btn btn-sm btn-secondary" onClick={() => router.back()}>
         Back
       </button>
       {transaction ? (
         <div className="overflow-x-auto">
-          <h2 className="text-3xl font-bold mb-4 text-center text-primary-content">Transaction Details</h2>{" "}
-          <table className="table rounded-lg bg-base-100 w-full shadow-lg md:table-lg table-md">
+          <h2 className="text-3xl font-bold mb-4 text-center">Transaction Details</h2>{" "}
+          <table className="table bg-base-100 w-full border border-base-300 md:table-lg table-md">
             <tbody>
               <tr>
                 <td>

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -45,7 +45,7 @@ export function DebugContracts() {
                   className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
                     contractName === selectedContract
                       ? "bg-base-300 hover:bg-base-300 no-animation"
-                      : "bg-base-100 hover:bg-secondary"
+                      : "bg-base-100 hover:bg-base-300"
                   }`}
                   key={contractName}
                   onClick={() => setSelectedContract(contractName)}

packages/nextjs/app/debug/page.tsx

@@ -11,9 +11,9 @@ const Debug: NextPage = () => {
   return (
     <>
       <DebugContracts />
-      <div className="text-center mt-8 bg-secondary p-10">
+      <div className="text-center mt-8 bg-base-300 p-10">
         <h1 className="text-4xl my-0">Debug Contracts</h1>
-        <p className="text-neutral">
+        <p>
           You can debug & interact with your deployed contracts here.
           <br /> Check{" "}
           <code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem] px-1">

packages/nextjs/app/layout.tsx

@@ -2,6 +2,7 @@ import "@rainbow-me/rainbowkit/styles.css";
 import "@scaffold-ui/components/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
+import { PaletteLoader } from "~~/components/test/PaletteLoader";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
@@ -15,6 +16,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
     <html suppressHydrationWarning>
       <body>
         <ThemeProvider enableSystem>
+          <PaletteLoader />
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>
       </body>

packages/nextjs/app/page.tsx

@@ -43,8 +43,8 @@ const Home: NextPage = () => {
 
         <div className="grow bg-base-300 w-full mt-16 px-8 py-12">
           <div className="flex justify-center items-center gap-12 flex-col md:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-base-100 border border-base-300 px-10 py-10 text-center items-center max-w-xs">
+              <BugAntIcon className="h-8 w-8" />
               <p>
                 Tinker with your smart contract using the{" "}
                 <Link href="/debug" passHref className="link">
@@ -53,8 +53,8 @@ const Home: NextPage = () => {
                 tab.
               </p>
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+            <div className="flex flex-col bg-base-100 border border-base-300 px-10 py-10 text-center items-center max-w-xs">
+              <MagnifyingGlassIcon className="h-8 w-8" />
               <p>
                 Explore your local transactions with the{" "}
                 <Link href="/blockexplorer" passHref className="link">