From 92a67b9cb84bf5b73b175a0fd591d3514ba81707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= <oceanrdn@gmail.com>
Date: Tue, 9 Jun 2026 14:57:34 +0200
Subject: [PATCH 1/4] UI tweaks/redesign (#1282)

Co-authored-by: Rinat <rinat@hey.com>
---
 .../_components/AddressComponent.tsx          |  2 +-
 .../blockexplorer/_components/SearchBar.tsx   |  2 +-
 .../_components/TransactionsTable.tsx         |  4 +-
 .../_components/TransactionComp.tsx           |  2 +-
 .../app/debug/_components/DebugContracts.tsx  |  2 +-
 packages/nextjs/app/debug/page.tsx            |  4 +-
 packages/nextjs/app/page.tsx                  |  8 ++--
 packages/nextjs/components/Header.tsx         | 14 +++----
 .../components/scaffold-eth/BlockieAvatar.tsx |  8 +---
 .../nextjs/components/scaffold-eth/Faucet.tsx |  4 +-
 .../components/scaffold-eth/FaucetButton.tsx  |  2 +-
 .../AddressInfoDropdown.tsx                   | 16 ++++----
 .../AddressQRCodeModal.tsx                    |  2 +-
 .../NetworkOptions.tsx                        |  2 +-
 .../RevealBurnerPKModal.tsx                   |  2 +-
 .../WrongNetworkDropdown.tsx                  | 11 +-----
 packages/nextjs/package.json                  |  4 +-
 packages/nextjs/public/logo.svg               |  2 +-
 packages/nextjs/styles/globals.css            | 18 ++++-----
 .../utils/scaffold-eth/notification.tsx       |  2 +-
 yarn.lock                                     | 38 +++++++------------
 21 files changed, 62 insertions(+), 87 deletions(-)

diff --git a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx b/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
index a4a0d05d9b..a1adca9c5b 100644
--- a/packages/nextjs/app/blockexplorer/_components/AddressComponent.tsx
+++ b/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} />
diff --git a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
index 8f3cbb5d0f..28c68c9b1e 100644
--- a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx
+++ b/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-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 focus:outline-hidden focus:ring-2 focus:ring-accent"
         type="text"
         value={searchInput}
         placeholder="Search by hash or address"
diff --git a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx b/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
index d198238ec8..d10316b910 100644
--- a/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
+++ b/packages/nextjs/app/blockexplorer/_components/TransactionsTable.tsx
@@ -11,7 +11,7 @@ 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">
         {!hasTransactions ? (
           <div className="bg-base-100 rounded-xl p-8 text-center text-base-content/70">
             No transactions found on this page.
@@ -19,7 +19,7 @@ export const TransactionsTable = ({ blocks, transactionReceipts }: TransactionsT
         ) : (
           <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">
+              <tr className="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>
diff --git a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
index 0024f2e011..ca9d28c257 100644
--- a/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
+++ b/packages/nextjs/app/blockexplorer/transaction/_components/TransactionComp.tsx
@@ -45,7 +45,7 @@ const TransactionComp = ({ txHash }: { txHash: Hash }) => {
       {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">
+          <table className="table bg-base-100 w-full border border-base-300 md:table-lg table-md">
             <tbody>
               <tr>
                 <td>
diff --git a/packages/nextjs/app/debug/_components/DebugContracts.tsx b/packages/nextjs/app/debug/_components/DebugContracts.tsx
index 39736725e5..7e6a7046a2 100644
--- a/packages/nextjs/app/debug/_components/DebugContracts.tsx
+++ b/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-secondary hover:text-secondary-content"
                   }`}
                   key={contractName}
                   onClick={() => setSelectedContract(contractName)}
diff --git a/packages/nextjs/app/debug/page.tsx b/packages/nextjs/app/debug/page.tsx
index e6fb89f50b..09a0b64bdc 100644
--- a/packages/nextjs/app/debug/page.tsx
+++ b/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-secondary text-secondary-content 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">
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 0e02056728..6e9aa87904 100644
--- a/packages/nextjs/app/page.tsx
+++ b/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">
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index fba0c29a9a..0a3bd7baa2 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -35,13 +35,13 @@ export const HeaderMenuLinks = () => {
       {menuLinks.map(({ label, href, icon }) => {
         const isActive = pathname === href;
         return (
-          <li key={href}>
+          <li key={href} className="h-full">
             <Link
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive ? "bg-base-300" : ""
+              } hover:bg-base-300 focus:!bg-base-300 h-full px-4 text-sm gap-2 flex items-center`}
             >
               {icon}
               <span>{label}</span>
@@ -66,14 +66,14 @@ export const Header = () => {
   });
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
-      <div className="navbar-start w-auto lg:w-1/2">
+    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-16 shrink-0 justify-between z-20 border-b-2 border-base-300 p-0 sm:px-2">
+      <div className="navbar-start w-auto lg:w-1/2 self-stretch">
         <details className="dropdown" ref={burgerMenuRef}>
           <summary className="ml-1 btn btn-ghost lg:hidden hover:bg-transparent">
             <Bars3Icon className="h-1/2" />
           </summary>
           <ul
-            className="menu menu-compact dropdown-content mt-3 p-2 shadow-sm bg-base-100 rounded-box w-52"
+            className="menu menu-compact dropdown-content mt-3 p-2 shadow-lg bg-base-100 w-52"
             onClick={() => {
               burgerMenuRef?.current?.removeAttribute("open");
             }}
@@ -90,7 +90,7 @@ export const Header = () => {
             <span className="text-xs">Ethereum dev stack</span>
           </div>
         </Link>
-        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
+        <ul className="hidden lg:flex lg:flex-nowrap h-full m-0 p-0 list-none">
           <HeaderMenuLinks />
         </ul>
       </div>
diff --git a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
index 46f47b5af7..389f315f5f 100644
--- a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
+++ b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
@@ -7,11 +7,5 @@ import { blo } from "blo";
 export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
   // Don't want to use nextJS Image here (and adding remote patterns for the URL)
   // eslint-disable-next-line @next/next/no-img-element
-  <img
-    className="rounded-full"
-    src={ensImage || blo(address as `0x${string}`)}
-    width={size}
-    height={size}
-    alt={`${address} avatar`}
-  />
+  <img src={ensImage || blo(address as `0x${string}`)} width={size} height={size} alt={`${address} avatar`} />
 );
diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx
index 4a7c972532..1a09567b30 100644
--- a/packages/nextjs/components/scaffold-eth/Faucet.tsx
+++ b/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -92,7 +92,7 @@ export const Faucet = () => {
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
           <h3 className="text-xl font-bold mb-3">Local Faucet</h3>
-          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <label htmlFor="faucet-modal" className="btn btn-ghost btn-sm absolute right-3 top-3">
             ✕
           </label>
           <div className="space-y-3">
@@ -117,7 +117,7 @@ export const Faucet = () => {
                 onValueChange={({ valueInEth }) => setSendValue(valueInEth)}
                 style={{ width: "100%" }}
               />
-              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+              <button className="h-10 btn btn-primary btn-sm px-2" onClick={sendETH} disabled={loading}>
                 {!loading ? (
                   <BanknotesIcon className="h-6 w-6" />
                 ) : (
diff --git a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx b/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
index 4c49ff21a0..4b54c923c2 100644
--- a/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
+++ b/packages/nextjs/components/scaffold-eth/FaucetButton.tsx
@@ -61,7 +61,7 @@ export const FaucetButton = () => {
       }
       data-tip="Grab funds from faucet"
     >
-      <button className="btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+      <button className="btn btn-secondary btn-sm px-2" onClick={sendETH} disabled={loading}>
         {!loading ? (
           <BanknotesIcon className="h-4 w-4" />
         ) : (
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
index d947df9e5c..4ba89a132a 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -54,18 +54,18 @@ export const AddressInfoDropdown = ({
   return (
     <>
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
-        <summary className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 h-auto!">
+        <summary className="btn btn-secondary btn-sm pl-0 pr-2 dropdown-toggle gap-0 h-auto!">
           <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
           <span className="ml-2 mr-1">
             {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
         </summary>
-        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1">
+        <ul className="dropdown-content menu z-2 p-2 mt-2 shadow-lg bg-base-200 gap-1">
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             <div
-              className="h-8 btn-sm rounded-xl! flex gap-3 py-3 cursor-pointer"
+              className="h-8 btn-sm flex gap-3 py-3 cursor-pointer"
               onClick={() => copyAddressToClipboard(checkSumAddress)}
             >
               {isAddressCopiedToClipboard ? (
@@ -82,13 +82,13 @@ export const AddressInfoDropdown = ({
             </div>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <label htmlFor="qrcode-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3">
+            <label htmlFor="qrcode-modal" className="h-8 btn-sm flex gap-3 py-3">
               <QrCodeIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <span className="whitespace-nowrap">View QR Code</span>
             </label>
           </li>
           <li className={selectingNetwork ? "hidden" : ""}>
-            <button className="h-8 btn-sm rounded-xl! flex gap-3 py-3" type="button">
+            <button className="h-8 btn-sm flex gap-3 py-3" type="button">
               <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
               <a
                 target="_blank"
@@ -103,7 +103,7 @@ export const AddressInfoDropdown = ({
           {allowedNetworks.length > 1 ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="h-8 btn-sm rounded-xl! flex gap-3 py-3"
+                className="h-8 btn-sm flex gap-3 py-3"
                 type="button"
                 onClick={() => {
                   setSelectingNetwork(true);
@@ -115,7 +115,7 @@ export const AddressInfoDropdown = ({
           ) : null}
           {connector?.id === BURNER_WALLET_ID ? (
             <li>
-              <label htmlFor="reveal-burner-pk-modal" className="h-8 btn-sm rounded-xl! flex gap-3 py-3 text-error">
+              <label htmlFor="reveal-burner-pk-modal" className="h-8 btn-sm flex gap-3 py-3 text-error">
                 <EyeIcon className="h-6 w-4 ml-2 sm:ml-0" />
                 <span>Reveal Private Key</span>
               </label>
@@ -123,7 +123,7 @@ export const AddressInfoDropdown = ({
           ) : null}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-error h-8 btn-sm rounded-xl! flex gap-3 py-3"
+              className="menu-item text-error h-8 btn-sm flex gap-3 py-3"
               type="button"
               onClick={() => disconnect()}
             >
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
index 2ae67aa96f..8a8dbc125f 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx
@@ -16,7 +16,7 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
           <label className="modal-box relative">
             {/* dummy input to capture event onclick on modal box */}
             <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm absolute right-3 top-3">
               ✕
             </label>
             <div className="space-y-3 py-6">
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
index 0afc12a853..bd22ee7a34 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/NetworkOptions.tsx
@@ -23,7 +23,7 @@ export const NetworkOptions = ({ hidden = false }: NetworkOptionsProps) => {
         .map(allowedNetwork => (
           <li key={allowedNetwork.id} className={hidden ? "hidden" : ""}>
             <button
-              className="menu-item btn-sm rounded-xl! flex gap-3 py-3 whitespace-nowrap"
+              className="menu-item btn-sm flex gap-3 py-3 whitespace-nowrap"
               type="button"
               onClick={() => {
                 switchChain?.({ chainId: allowedNetwork.id });
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx
index 081302a086..80660a2829 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/RevealBurnerPKModal.tsx
@@ -32,7 +32,7 @@ export const RevealBurnerPKModal = () => {
           <label className="modal-box relative">
             {/* dummy input to capture event onclick on modal box */}
             <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+            <label htmlFor="reveal-burner-pk-modal" className="btn btn-ghost btn-sm absolute right-3 top-3">
               ✕
             </label>
             <div>
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
index b198d088c3..eea522cdcb 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
@@ -11,17 +11,10 @@ export const WrongNetworkDropdown = () => {
         <span>Wrong network</span>
         <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
       </label>
-      <ul
-        tabIndex={0}
-        className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
-      >
+      <ul tabIndex={0} className="dropdown-content menu p-2 mt-1 shadow-lg bg-base-200 gap-1">
         <NetworkOptions />
         <li>
-          <button
-            className="menu-item text-error btn-sm rounded-xl! flex gap-3 py-3"
-            type="button"
-            onClick={() => disconnect()}
-          >
+          <button className="menu-item text-error btn-sm flex gap-3 py-3" type="button" onClick={() => disconnect()}>
             <ArrowLeftOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />
             <span>Disconnect</span>
           </button>
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 5d38b7925c..8be3fa9101 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -19,8 +19,8 @@
     "@heroicons/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "2.2.9",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@scaffold-ui/components": "^0.1.10",
-    "@scaffold-ui/debug-contracts": "^0.1.9",
+    "@scaffold-ui/components": "^0.1.12",
+    "@scaffold-ui/debug-contracts": "^0.1.11",
     "@scaffold-ui/hooks": "^0.1.8",
     "@tanstack/react-query": "^5.59.15",
     "blo": "^2.0.0",
diff --git a/packages/nextjs/public/logo.svg b/packages/nextjs/public/logo.svg
index 93e4b40a6b..c5702af6a9 100644
--- a/packages/nextjs/public/logo.svg
+++ b/packages/nextjs/public/logo.svg
@@ -1,5 +1,5 @@
 <svg width="103" height="102" viewBox="0 0 103 102" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.72229" y="0.99707" width="101.901" height="100.925" rx="19.6606" fill="black"/>
+<rect x="0.72229" y="0.99707" width="101.901" height="100.925" fill="black"/>
 <path d="M69.4149 42.5046L70.9118 39.812L72.5438 42.5046L83.0241 59.1906L70.9533 65.9361L59.1193 59.1906L69.4149 42.5046Z" fill="white"/>
 <path d="M70.9533 69.2496L60.6577 63.6876L70.9533 79.0719L81.184 63.4985L70.9533 69.2496Z" fill="white"/>
 <path d="M70.953 65.9259V41.8533V39.8499L83.063 59.1785L70.953 65.9259Z" fill="#DFDFDF"/>
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 37baff6aca..4ca109b643 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -33,8 +33,10 @@
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 1rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
+
   --tt-tailw: 6px;
 }
 
@@ -58,8 +60,9 @@
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 1rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   --tt-tailw: 6px;
   --tt-bg: var(--color-primary);
@@ -105,12 +108,7 @@
 }
 
 .btn {
-  @apply shadow-md;
-  border-radius: 9999rem;
-}
-
-.btn.btn-ghost {
-  @apply shadow-none;
+  box-shadow: none;
 }
 
 .link {
diff --git a/packages/nextjs/utils/scaffold-eth/notification.tsx b/packages/nextjs/utils/scaffold-eth/notification.tsx
index 1a09b0b60d..b40f7c8de3 100644
--- a/packages/nextjs/utils/scaffold-eth/notification.tsx
+++ b/packages/nextjs/utils/scaffold-eth/notification.tsx
@@ -46,7 +46,7 @@ const Notification = ({
   return toast.custom(
     (t: Toast) => (
       <div
-        className={`flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
+        className={`flex flex-row items-start justify-between max-w-sm shadow-center shadow-accent bg-base-200 p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
         ${
           position.substring(0, 3) == "top"
             ? `hover:translate-y-1 ${t.visible ? "top-0" : "-top-96"}`
diff --git a/yarn.lock b/yarn.lock
index 8ae0bc3dfa..3ffcacac37 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4262,9 +4262,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@scaffold-ui/components@npm:^0.1.10":
-  version: 0.1.10
-  resolution: "@scaffold-ui/components@npm:0.1.10"
+"@scaffold-ui/components@npm:^0.1.12":
+  version: 0.1.12
+  resolution: "@scaffold-ui/components@npm:0.1.12"
   peerDependencies:
     "@scaffold-ui/hooks": 0.1.8
     "@tanstack/react-query": ^5.59.15
@@ -4272,25 +4272,25 @@ __metadata:
     react: ^19.2.3
     viem: ^2.23.0
     wagmi: ^2.14.11
-  checksum: 10/e2a61b134c4d5b57b45d1baae89aa8bed041c14bc646b6686190c1e00ea34ae7ff3078e4b5e61b139b57572232ebc057255ac0f6f0d4f978ed1d79568edee867
+  checksum: 10/22322c0fc0344c783e00314136fb993be429a6808b6266b92ffbe7bfced9bf5aa48af7f026496a183b2735dc8b95a73a52457e7e07003c65ad171ab38744ba3d
   languageName: node
   linkType: hard
 
-"@scaffold-ui/debug-contracts@npm:^0.1.9":
-  version: 0.1.9
-  resolution: "@scaffold-ui/debug-contracts@npm:0.1.9"
+"@scaffold-ui/debug-contracts@npm:^0.1.11":
+  version: 0.1.11
+  resolution: "@scaffold-ui/debug-contracts@npm:0.1.11"
   dependencies:
     "@heroicons/react": "npm:^2.2.0"
     react-hot-toast: "npm:^2.5.2"
   peerDependencies:
-    "@scaffold-ui/components": 0.1.10
+    "@scaffold-ui/components": 0.1.12
     "@scaffold-ui/hooks": 0.1.8
     "@tanstack/react-query": ^5.59.15
     "@types/react": ^19.0.7
     react: ^19.2.3
     viem: ^2.23.0
     wagmi: ^2.14.11
-  checksum: 10/286e84123f98b46aca224cb4197801b9f0f2a6be884c2366f3c7e6e41b357f4c038120b75ee5620f4975b706db11526ef6d548609008c8f8837c19a1bacfedb6
+  checksum: 10/a72b4cca79bf3331dee3a1b3f1383113c5620e7bccdcd863b6472c6a359850f852aecfadc255baea200d997b6e673e869adb689779a690f3bac11281e4be20a2
   languageName: node
   linkType: hard
 
@@ -4471,8 +4471,8 @@ __metadata:
     "@heroicons/react": "npm:^2.2.0"
     "@rainbow-me/rainbowkit": "npm:2.2.9"
     "@react-native-async-storage/async-storage": "npm:^2.2.0"
-    "@scaffold-ui/components": "npm:^0.1.10"
-    "@scaffold-ui/debug-contracts": "npm:^0.1.9"
+    "@scaffold-ui/components": "npm:^0.1.12"
+    "@scaffold-ui/debug-contracts": "npm:^0.1.11"
     "@scaffold-ui/hooks": "npm:^0.1.8"
     "@tailwindcss/postcss": "npm:^4.2.4"
     "@tanstack/react-query": "npm:^5.59.15"
@@ -5597,12 +5597,9 @@ __metadata:
   linkType: hard
 
 "@types/chai@npm:*":
-  version: 5.2.3
-  resolution: "@types/chai@npm:5.2.3"
-  dependencies:
-    "@types/deep-eql": "npm:*"
-    assertion-error: "npm:^2.0.1"
-  checksum: 10/e79947307dc235953622e65f83d2683835212357ca261389116ab90bed369ac862ba28b146b4fed08b503ae1e1a12cb93ce783f24bb8d562950469f4320e1c7c
+  version: 4.3.6
+  resolution: "@types/chai@npm:4.3.6"
+  checksum: 10/cfdcee881619c1719909f7f6ca083851f5694527fa28ca1be4eb4733fa729e244f443a0cfcb43ad0caf9367067612eaa3628963dfd2acf19f1e03a49e46adcd8
   languageName: node
   linkType: hard
 
@@ -5624,13 +5621,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/deep-eql@npm:*":
-  version: 4.0.2
-  resolution: "@types/deep-eql@npm:4.0.2"
-  checksum: 10/249a27b0bb22f6aa28461db56afa21ec044fa0e303221a62dff81831b20c8530502175f1a49060f7099e7be06181078548ac47c668de79ff9880241968d43d0c
-  languageName: node
-  linkType: hard
-
 "@types/dns-packet@npm:^5.6.5":
   version: 5.6.5
   resolution: "@types/dns-packet@npm:5.6.5"

From f5e4737d3a2928573671ff18e5d831fc9d031b95 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Tue, 9 Jun 2026 18:42:07 +0530
Subject: [PATCH 2/4] chore: add changeset for backmerge

---
 .changeset/backmerge-09-06-26.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/backmerge-09-06-26.md

diff --git a/.changeset/backmerge-09-06-26.md b/.changeset/backmerge-09-06-26.md
new file mode 100644
index 0000000000..9bbfdd30cd
--- /dev/null
+++ b/.changeset/backmerge-09-06-26.md
@@ -0,0 +1,5 @@
+---
+"create-eth": patch
+---
+
+- UI tweaks/redesign (https://github.com/scaffold-eth/scaffold-eth-2/pull/1282)

From 2b918c619e1b92b9717d9176f16ba6cafd306953 Mon Sep 17 00:00:00 2001
From: Rinat <rinat@hey.com>
Date: Tue, 16 Jun 2026 10:17:38 +0400
Subject: [PATCH 3/4] fix: generateTsAbis formatting (#1303)

---
 packages/hardhat/scripts/generateTsAbis.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/hardhat/scripts/generateTsAbis.ts b/packages/hardhat/scripts/generateTsAbis.ts
index c9f19c8d3c..ecd7b36eb6 100644
--- a/packages/hardhat/scripts/generateTsAbis.ts
+++ b/packages/hardhat/scripts/generateTsAbis.ts
@@ -155,6 +155,9 @@ export default async function generateTsAbis() {
  const deployedContracts = {${fileContent}} as const; \n\n export default deployedContracts satisfies GenericContractsDeclaration`,
       {
         parser: "typescript",
+        // Match the nextjs prettier config (printWidth 120) so the generated file
+        // passes the frontend lint/build instead of defaulting to printWidth 80.
+        printWidth: 120,
       },
     ),
   );

From 24d5a56464d81e4d2c100c865ee9a2b903285709 Mon Sep 17 00:00:00 2001
From: Rinat <rinatkins@gmail.com>
Date: Tue, 16 Jun 2026 11:30:56 +0400
Subject: [PATCH 4/4] chore: add #1303 to backmerge changeset

---
 .changeset/backmerge-09-06-26.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/backmerge-09-06-26.md b/.changeset/backmerge-09-06-26.md
index 9bbfdd30cd..5722ac78b8 100644
--- a/.changeset/backmerge-09-06-26.md
+++ b/.changeset/backmerge-09-06-26.md
@@ -3,3 +3,4 @@
 ---
 
 - UI tweaks/redesign (https://github.com/scaffold-eth/scaffold-eth-2/pull/1282)
+- fix: generateTsAbis formatting (https://github.com/scaffold-eth/scaffold-eth-2/pull/1303)