From 365727767303a796b7e1122c5e53f3d051fbe3d0 Mon Sep 17 00:00:00 2001
From: Rinat <rinatkins@gmail.com>
Date: Fri, 29 May 2026 18:09:31 +0400
Subject: [PATCH 1/4] feat: redesign

---
 example/app/components/Header.tsx              |  2 +-
 example/app/components/SwitchTheme.tsx         |  6 +++---
 example/app/components/UseAddressExample.tsx   |  8 ++++----
 .../app/components/UseAddressInputExample.tsx  | 12 ++++++------
 example/app/components/UseBalanceExample.tsx   |  4 ++--
 .../components/UseDebugContractsExample.tsx    |  2 +-
 .../app/components/UseEtherInputExample.tsx    |  4 ++--
 packages/components/src/Address/Address.tsx    |  9 ++++-----
 packages/components/src/Input/AddressInput.tsx | 18 ++++++------------
 packages/components/src/Input/BaseInput.tsx    |  2 +-
 packages/debug-contracts/src/Contract.tsx      | 12 ++++++------
 .../src/components/Collapsible.tsx             |  4 ++--
 .../src/components/DisplayVariable.tsx         |  6 +++---
 .../src/components/ReadOnlyFunctionForm.tsx    |  2 +-
 .../debug-contracts/src/components/Tooltip.tsx |  2 +-
 .../src/components/TxReceipt.tsx               |  8 ++++----
 packages/debug-contracts/src/styles.css        |  2 +-
 .../debug-contracts/src/utils/notification.tsx |  2 +-
 .../debug-contracts/src/utils/utilsDisplay.tsx |  2 +-
 19 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/example/app/components/Header.tsx b/example/app/components/Header.tsx
index 307f95c..24ca74c 100644
--- a/example/app/components/Header.tsx
+++ b/example/app/components/Header.tsx
@@ -9,7 +9,7 @@ export const Header = () => {
 
   const getLinkClassName = (href: string) => {
     const isActive = pathname === href;
-    const baseClasses = "px-3 py-2 rounded-md text-sm font-medium transition-colors";
+    const baseClasses = "px-3 py-2 text-sm font-medium transition-colors";
 
     if (isActive) {
       return `${baseClasses} bg-[var(--color-sui-primary)] text-[var(--color-sui-primary-content)] font-semibold`;
diff --git a/example/app/components/SwitchTheme.tsx b/example/app/components/SwitchTheme.tsx
index 37ed29e..5f23f2e 100644
--- a/example/app/components/SwitchTheme.tsx
+++ b/example/app/components/SwitchTheme.tsx
@@ -25,16 +25,16 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   if (!mounted) return null;
 
   return (
-    <div className={`fixed bottom-6 right-6 z-50 flex items-center space-x-3 p-3 rounded-lg shadow-lg ${className}`}>
+    <div className={`fixed bottom-6 right-6 z-50 flex items-center space-x-3 p-3 shadow-lg ${className}`}>
       {/* Custom Toggle Switch */}
       <button
         onClick={handleToggle}
-        className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50 bg-[var(--color-sui-primary-subtle)] dark:bg-[var(--color-sui-primary)] focus:ring-[var(--color-sui-primary)]"
+        className="relative inline-flex h-6 w-11 items-center transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50 bg-[var(--color-sui-primary-subtle)] dark:bg-[var(--color-sui-primary)] focus:ring-[var(--color-sui-primary)]"
         aria-label={`Switch to ${isDarkMode ? "light" : "dark"} theme`}
       >
         {/* Toggle Circle */}
         <span
-          className={`inline-block h-4 w-4 transform rounded-full transition-transform duration-200 ease-in-out bg-[var(--color-sui-primary)] dark:bg-[var(--color-sui-primary-content)]  ${
+          className={`inline-block h-4 w-4 transform transition-transform duration-200 ease-in-out bg-[var(--color-sui-primary)] dark:bg-[var(--color-sui-primary-content)]  ${
             isDarkMode ? "translate-x-6" : "translate-x-1"
           }`}
         />
diff --git a/example/app/components/UseAddressExample.tsx b/example/app/components/UseAddressExample.tsx
index 61a3330..a248516 100644
--- a/example/app/components/UseAddressExample.tsx
+++ b/example/app/components/UseAddressExample.tsx
@@ -13,7 +13,7 @@ export const UseAddressExample = () => {
 
   if (!address) {
     return (
-      <div className="mt-8 p-6 max-w-2xl rounded-lg bg-white/5 shadow-xl">
+      <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl">
         <h1 className="text-2xl font-bold mb-6">useAddress Example</h1>
         <p>Connect your wallet to see the information</p>
       </div>
@@ -21,7 +21,7 @@ export const UseAddressExample = () => {
   }
 
   return (
-    <div className="mt-8 p-6 max-w-2xl rounded-lg bg-white/5 shadow-xl w-full">
+    <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl w-full">
       <h1 className="text-2xl font-bold mb-6">useAddress Hook & Address Component Examples</h1>
 
       <div className="space-y-8">
@@ -131,10 +131,10 @@ export const UseAddressExample = () => {
             <img
               src={ensAvatar ?? blo(address)}
               alt="ENS Avatar"
-              className="w-8 h-8 rounded-full"
+              className="w-8 h-8"
             />
             {isEnsNameLoading ? (
-              <div className="h-6 w-32 bg-gray-700 animate-pulse rounded" />
+              <div className="h-6 w-32 bg-gray-700 animate-pulse" />
             ) : (
               <span className="text-lg font-medium">{ens ?? "No ENS name found"}</span>
             )}
diff --git a/example/app/components/UseAddressInputExample.tsx b/example/app/components/UseAddressInputExample.tsx
index 0405b47..6c0bb45 100644
--- a/example/app/components/UseAddressInputExample.tsx
+++ b/example/app/components/UseAddressInputExample.tsx
@@ -39,7 +39,7 @@ export const UseAddressInputExample = () => {
   );
 
   return (
-    <div className="mt-8 p-6 max-w-2xl rounded-lg bg-white/5 shadow-xl  w-full">
+    <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl  w-full">
       <h1 className="text-2xl font-bold mb-6">useAddressInput Hook & AddressInput Component Examples</h1>
 
       <div className="space-y-8">
@@ -104,14 +104,14 @@ export const UseAddressInputExample = () => {
 
           {ensAddress ? <div className="bg-[#dae8ff] items-center">Address: {ensAddress}</div> : null}
           {ensName ? (
-            <div className="flex bg-[#dae8ff] rounded-l-full items-center">
-              {isEnsAvatarLoading && <div className="skeleton w-[35px] h-[35px] rounded-full shrink-0"></div>}
+            <div className="flex bg-[#dae8ff] items-center">
+              {isEnsAvatarLoading && <div className="skeleton w-[35px] h-[35px] shrink-0"></div>}
               {ensAvatar ? (
                 <span className="w-[35px]">
                   {
                     // eslint-disable-next-line
                     <img
-                      className="w-full rounded-full"
+                      className="w-full"
                       src={ensAvatar}
                       alt={`${ensAddress} avatar`}
                     />
@@ -122,8 +122,8 @@ export const UseAddressInputExample = () => {
             </div>
           ) : (
             (isEnsNameLoading || isEnsAddressLoading) && (
-              <div className="flex bg-[#dae8ff] rounded-l-full items-center gap-2 pr-2">
-                <div className="animate-pulse bg-[#f4f8ff] w-[35px] h-[35px] rounded-full shrink-0"></div>
+              <div className="flex bg-[#dae8ff] items-center gap-2 pr-2">
+                <div className="animate-pulse bg-[#f4f8ff] w-[35px] h-[35px] shrink-0"></div>
                 <div className="animate-pulse bg-[#f4f8ff] h-3 w-20"></div>
               </div>
             )
diff --git a/example/app/components/UseBalanceExample.tsx b/example/app/components/UseBalanceExample.tsx
index 9272dda..2f599ae 100644
--- a/example/app/components/UseBalanceExample.tsx
+++ b/example/app/components/UseBalanceExample.tsx
@@ -24,7 +24,7 @@ export const UseBalanceExample = () => {
 
   if (!address) {
     return (
-      <div className="mt-8 p-6 max-w-2xl rounded-lg bg-white/5 shadow-xl">
+      <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl">
         <h1 className="text-2xl font-bold mb-6">useBalance Example</h1>
         <p>Connect your wallet to see the balance information</p>
       </div>
@@ -32,7 +32,7 @@ export const UseBalanceExample = () => {
   }
 
   return (
-    <div className="mt-8 p-6 max-w-2xl rounded-lg bg-white/5 shadow-xl w-full">
+    <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl w-full">
       <h1 className="text-2xl font-bold mb-6">useBalance Hook & Balance Component Examples</h1>
 
       <div className="space-y-8">
diff --git a/example/app/components/UseDebugContractsExample.tsx b/example/app/components/UseDebugContractsExample.tsx
index 0cb8dc0..e674a06 100644
--- a/example/app/components/UseDebugContractsExample.tsx
+++ b/example/app/components/UseDebugContractsExample.tsx
@@ -29,7 +29,7 @@ export const UseDebugContractsExample = () => {
             <div className="flex flex-row gap-2 w-full max-w-7xl pb-1 px-6 lg:px-10 flex-wrap">
               {contractNames.map((contractName) => (
                 <button
-                  className={`font-light hover:border-transparent p-2 px-4 rounded-full ${
+                  className={`font-light hover:border-transparent p-2 px-4 ${
                     contractName === selectedContract
                       ? "bg-[var(--color-sui-primary-subtle)] hover:bg-[var(--color-sui-primary-subtle)] no-animation"
                       : "bg-[var(--color-sui-base-100)] hover:bg-[var(--color-sui-primary-subtle)]"
diff --git a/example/app/components/UseEtherInputExample.tsx b/example/app/components/UseEtherInputExample.tsx
index 74702fd..33b6741 100644
--- a/example/app/components/UseEtherInputExample.tsx
+++ b/example/app/components/UseEtherInputExample.tsx
@@ -27,7 +27,7 @@ export const UseEtherInputExample = () => {
   );
 
   return (
-    <div className="mt-8 p-6 max-w-2xl rounded-lg bg-white/5 shadow-xl">
+    <div className="mt-8 p-6 max-w-2xl bg-white/5 shadow-xl">
       <h1 className="text-2xl font-bold mb-6">useEtherInput Hook & EtherInput Component Examples</h1>
       <div className="space-y-4">
         {/* EtherInput Component Examples */}
@@ -88,7 +88,7 @@ export const UseEtherInputExample = () => {
         {isError && <p className="text-red-500 mb-0">{error}</p>}
         <div className="flex items-center gap-2 mb-2">
           <input
-            className={`w-40 px-3 py-2 rounded-md bg-transparent border ${isError ? "border-red-500 border-2" : "border-gray-300 dark:border-gray-600"}`}
+            className={`w-40 px-3 py-2 bg-transparent border ${isError ? "border-red-500 border-2" : "border-gray-300 dark:border-gray-600"}`}
             type="text"
             value={manualValue}
             onChange={(e) => setManualValue(e.target.value)}
diff --git a/packages/components/src/Address/Address.tsx b/packages/components/src/Address/Address.tsx
index 32bef7a..fe38482 100644
--- a/packages/components/src/Address/Address.tsx
+++ b/packages/components/src/Address/Address.tsx
@@ -126,16 +126,16 @@ export const Address: React.FC<AddressProps> = ({
         style={style}
       >
         <div
-          className="shrink-0 sui-skeleton !rounded-full"
+          className="shrink-0 sui-skeleton"
           style={skeletonStyle}
         />
         <div className="flex flex-col space-y-1">
           {!onlyEnsOrAddress && (
-            <div className={`ml-1.5 sui-skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+            <div className={`ml-1.5 sui-skeleton font-bold ${textSizeMap[ensSize]}`}>
               <span className="invisible">0x1234...56789</span>
             </div>
           )}
-          <div className={`ml-1.5 sui-skeleton rounded-lg ${textSizeMap[addressSize]}`}>
+          <div className={`ml-1.5 sui-skeleton ${textSizeMap[addressSize]}`}>
             <span className="invisible">0x1234...56789</span>
           </div>
         </div>
@@ -155,7 +155,6 @@ export const Address: React.FC<AddressProps> = ({
     >
       <div className="shrink-0">
         <img
-          className="rounded-full"
           src={ensAvatar || blockieUrl}
           width={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
           height={(blockieSizeMap[blockieSize] * 24) / blockieSizeMap["base"]}
@@ -165,7 +164,7 @@ export const Address: React.FC<AddressProps> = ({
       <div className="flex flex-col">
         {showSkeleton &&
           (isEnsNameLoading ? (
-            <div className={`ml-1.5 sui-skeleton rounded-lg font-bold ${textSizeMap[ensSize]}`}>
+            <div className={`ml-1.5 sui-skeleton font-bold ${textSizeMap[ensSize]}`}>
               <span className="invisible">{shortAddress}</span>
             </div>
           ) : (
diff --git a/packages/components/src/Input/AddressInput.tsx b/packages/components/src/Input/AddressInput.tsx
index 027dd8d..55336c7 100644
--- a/packages/components/src/Input/AddressInput.tsx
+++ b/packages/components/src/Input/AddressInput.tsx
@@ -84,16 +84,16 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled, sty
       prefix={
         ensName ? (
           <div
-            className="flex rounded-l-full items-center bg-sui-input-border"
+            className="flex items-center bg-sui-input-border"
             style={style}
           >
             {isEnsAvatarLoading && (
-              <div className="animate-pulse w-[35px] h-[35px] rounded-full shrink-0 bg-sui-input-background" />
+              <div className="animate-pulse w-[35px] h-[35px] shrink-0 bg-sui-input-background" />
             )}
             {ensAvatar ? (
               <span className="w-[35px]">
                 <img
-                  className="w-full rounded-full"
+                  className="w-full"
                   src={ensAvatar}
                   alt={`${ensAddress} avatar`}
                 />
@@ -104,10 +104,10 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled, sty
         ) : (
           (isEnsNameLoading || isEnsAddressLoading) && (
             <div
-              className="flex rounded-l-full items-center gap-2 pr-2 bg-sui-input-border"
+              className="flex items-center gap-2 pr-2 bg-sui-input-border"
               style={style}
             >
-              <div className="animate-pulse w-[35px] h-[35px] rounded-full shrink-0 bg-sui-input-background" />
+              <div className="animate-pulse w-[35px] h-[35px] shrink-0 bg-sui-input-background" />
               <div className="animate-pulse h-3 w-20 bg-sui-input-background" />
             </div>
           )
@@ -116,13 +116,7 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled, sty
       suffix={
         // Don't want to use nextJS Image here (and adding remote patterns for the URL)
         value && (
-          <img
-            alt=""
-            className="rounded-full!"
-            src={blo(value as `0x${string}`)}
-            width="35"
-            height="35"
-          />
+          <img alt="" src={blo(value as `0x${string}`)} width="35" height="35" />
         )
       }
     />
diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
index 1214a21..bbb9726 100644
--- a/packages/components/src/Input/BaseInput.tsx
+++ b/packages/components/src/Input/BaseInput.tsx
@@ -85,7 +85,7 @@ export const BaseInput = <T extends { toString: () => string } | undefined = str
 
   return (
     <DefaultStylesWrapper
-      className={`flex border-2 rounded-full border-sui-input-border bg-sui-input-background text-sui-input-text ${modifier}`}
+      className={`flex border-2 border-sui-input-border bg-sui-input-background text-sui-input-text ${modifier}`}
       style={style}
     >
       {prefix}
diff --git a/packages/debug-contracts/src/Contract.tsx b/packages/debug-contracts/src/Contract.tsx
index a45b060..f34e2fc 100644
--- a/packages/debug-contracts/src/Contract.tsx
+++ b/packages/debug-contracts/src/Contract.tsx
@@ -48,7 +48,7 @@ export const Contract: React.FC<ContractProps> = ({ contractName, contract, chai
       <div className="grid grid-cols-1 lg:grid-cols-6 px-6 lg:px-10 lg:gap-12 w-full max-w-7xl my-0 font-sans">
         <div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
           <div className="col-span-1 flex flex-col">
-            <div className="bg-sui-base-100 border-sui-primary-subtle dark:border-sui-primary border shadow-md shadow-sui-primary-subtle rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4">
+            <div className="bg-sui-base-100 border-sui-primary-subtle dark:border-sui-primary border shadow-md shadow-sui-primary-subtle px-6 lg:px-8 mb-6 space-y-1 py-4">
               <div className="flex">
                 <div className="flex flex-col gap-1">
                   <span className="font-bold">{contractName}</span>
@@ -72,7 +72,7 @@ export const Contract: React.FC<ContractProps> = ({ contractName, contract, chai
                 </div>
               </div>
             </div>
-            <div className="bg-sui-primary-subtle dark:bg-sui-primary rounded-3xl px-6 lg:px-8 py-4 shadow-lg shadow-sui-primary-subtle dark:shadow-sui-primary overflow-y-auto">
+            <div className="bg-sui-primary-subtle dark:bg-sui-primary px-6 lg:px-8 py-4 shadow-lg shadow-sui-primary-subtle dark:shadow-sui-primary overflow-y-auto">
               <ContractVariables
                 refreshDisplayVariables={refreshDisplayVariables}
                 contract={contract}
@@ -81,8 +81,8 @@ export const Contract: React.FC<ContractProps> = ({ contractName, contract, chai
           </div>
           <div className="col-span-1 lg:col-span-2 flex flex-col gap-6">
             <div className="z-10">
-              <div className="bg-sui-base-100 rounded-3xl shadow-md shadow-sui-primary-subtle border border-sui-primary-subtle dark:border-sui-primary flex flex-col mt-10 relative">
-                <div className="h-[5rem] w-[5.5rem] bg-sui-primary-subtle dark:bg-sui-primary absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-sui-primary-subtle dark:shadow-sui-primary">
+              <div className="bg-sui-base-100 shadow-md shadow-sui-primary-subtle border border-sui-primary-subtle dark:border-sui-primary flex flex-col mt-10 relative">
+                <div className="h-[5rem] w-[5.5rem] bg-sui-primary-subtle dark:bg-sui-primary absolute self-start -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-sui-primary-subtle dark:shadow-sui-primary">
                   <div className="flex items-center justify-center space-x-2">
                     <p className="my-0 text-sm">Read</p>
                   </div>
@@ -93,8 +93,8 @@ export const Contract: React.FC<ContractProps> = ({ contractName, contract, chai
               </div>
             </div>
             <div className="z-10">
-              <div className="bg-sui-base-100 rounded-3xl shadow-md shadow-sui-primary-subtle dark:border-sui-primary border border-sui-primary-subtle flex flex-col mt-10 relative">
-                <div className="h-[5rem] w-[5.5rem] bg-sui-primary-subtle dark:bg-sui-primary absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-sui-primary-subtle dark:shadow-sui-primary">
+              <div className="bg-sui-base-100 shadow-md shadow-sui-primary-subtle dark:border-sui-primary border border-sui-primary-subtle flex flex-col mt-10 relative">
+                <div className="h-[5rem] w-[5.5rem] bg-sui-primary-subtle dark:bg-sui-primary absolute self-start -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-sui-primary-subtle dark:shadow-sui-primary">
                   <div className="flex items-center justify-center space-x-2">
                     <p className="my-0 text-sm">Write</p>
                   </div>
diff --git a/packages/debug-contracts/src/components/Collapsible.tsx b/packages/debug-contracts/src/components/Collapsible.tsx
index 0cb0b70..f3a62d7 100644
--- a/packages/debug-contracts/src/components/Collapsible.tsx
+++ b/packages/debug-contracts/src/components/Collapsible.tsx
@@ -14,11 +14,11 @@ export const Collapsible = ({ title, children, className = "" }: CollapsibleProp
   };
 
   return (
-    <div className={`border-2 border-sui-primary-subtle rounded-2xl ${className}`}>
+    <div className={`border-2 border-sui-primary-subtle ${className}`}>
       <button
         type="button"
         onClick={toggleOpen}
-        className={`w-full flex items-center justify-between p-3 text-left bg-sui-primary-neutral hover:brightness-90 transition-colors rounded-t-[14px] focus:outline-none border-sui-primary-subtle focus:ring-2 focus:ring-sui-primary ${isOpen ? "rounded-b-none" : "rounded-b-[14px]"}`}
+        className="w-full flex items-center justify-between p-3 text-left bg-sui-primary-neutral hover:brightness-90 transition-colors focus:outline-none border-sui-primary-subtle focus:ring-2 focus:ring-sui-primary"
       >
         <span className="text-sui-primary-content/50 text-sm">{title}</span>
         <svg
diff --git a/packages/debug-contracts/src/components/DisplayVariable.tsx b/packages/debug-contracts/src/components/DisplayVariable.tsx
index 4ff6638..e24f2e3 100644
--- a/packages/debug-contracts/src/components/DisplayVariable.tsx
+++ b/packages/debug-contracts/src/components/DisplayVariable.tsx
@@ -59,11 +59,11 @@ export const DisplayVariable = ({
       <div className="flex items-center">
         <h3 className="font-medium text-lg mb-0 break-all">{abiFunction.name}</h3>
         <button
-          className="p-1 text-sui-primary-content/60 hover:text-sui-primary-content dark:hover:bg-sui-primary-neutral hover:bg-sui-primary transition-colors duration-200 cursor-pointer ml-1 rounded-full"
+          className="p-1 text-sui-primary-content/60 hover:text-sui-primary-content dark:hover:bg-sui-primary-neutral hover:bg-sui-primary transition-colors duration-200 cursor-pointer ml-1"
           onClick={async () => await refetch()}
         >
           {isFetching ? (
-            <div className="w-3 h-3 border border-sui-primary-subtle border-t-transparent rounded-full animate-spin"></div>
+            <div className="w-3 h-3 border border-sui-primary-subtle border-t-transparent animate-spin"></div>
           ) : (
             <ArrowPathIcon
               className="h-3 w-3 cursor-pointer"
@@ -76,7 +76,7 @@ export const DisplayVariable = ({
       <div className="text-sui-primary-content/80 flex flex-col items-start">
         <div>
           <div
-            className={`block transition ${showAnimation ? "bg-[#e2d563] rounded-xs animate-pulse-fast" : "bg-transparent"}`}
+            className={`block transition ${showAnimation ? "bg-[#e2d563] animate-pulse-fast" : "bg-transparent"}`}
           >
             {displayTxResult(result, "base")}
           </div>
diff --git a/packages/debug-contracts/src/components/ReadOnlyFunctionForm.tsx b/packages/debug-contracts/src/components/ReadOnlyFunctionForm.tsx
index b9a554f..18023b5 100644
--- a/packages/debug-contracts/src/components/ReadOnlyFunctionForm.tsx
+++ b/packages/debug-contracts/src/components/ReadOnlyFunctionForm.tsx
@@ -81,7 +81,7 @@ export const ReadOnlyFunctionForm = ({
       <div className="flex flex-col md:flex-row justify-between gap-2 flex-wrap">
         <div className="grow w-full md:max-w-[80%]">
           {result !== null && result !== undefined && (
-            <div className="bg-sui-primary-subtle rounded-3xl text-sm px-4 py-1.5 break-words overflow-auto">
+            <div className="bg-sui-primary-subtle text-sm px-4 py-1.5 break-words overflow-auto">
               <p className="font-bold m-0 mb-1">Result:</p>
               <pre className="whitespace-pre-wrap break-words">{displayTxResult(result, "sm")}</pre>
             </div>
diff --git a/packages/debug-contracts/src/components/Tooltip.tsx b/packages/debug-contracts/src/components/Tooltip.tsx
index c326d39..407acee 100644
--- a/packages/debug-contracts/src/components/Tooltip.tsx
+++ b/packages/debug-contracts/src/components/Tooltip.tsx
@@ -60,7 +60,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     <div className={`relative group inline-block ${className}`}>
       {children}
       <div
-        className={`absolute ${positionClasses} px-2 py-1 text-sm rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 bg-sui-primary text-sui-primary-content ${contentClassName}`}
+        className={`absolute ${positionClasses} px-2 py-1 text-sm whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 bg-sui-primary text-sui-primary-content ${contentClassName}`}
       >
         {content}
         <div className={arrowClasses}></div>
diff --git a/packages/debug-contracts/src/components/TxReceipt.tsx b/packages/debug-contracts/src/components/TxReceipt.tsx
index 6772c4f..842af4b 100644
--- a/packages/debug-contracts/src/components/TxReceipt.tsx
+++ b/packages/debug-contracts/src/components/TxReceipt.tsx
@@ -14,7 +14,7 @@ export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
   };
 
   return (
-    <div className={`text-sm bg-sui-primary-subtle ${isExpanded ? "rounded-t-3xl" : "rounded-3xl"} min-h-0 py-0`}>
+    <div className="text-sm bg-sui-primary-subtle min-h-0 py-0">
       <div className="flex items-center">
         <div className="mt-1 pl-2 flex-shrink-0">
           {isTxResultCopiedToClipboard ? (
@@ -41,12 +41,12 @@ export const TxReceipt = ({ txResult }: { txResult: TransactionReceipt }) => {
         </div>
       </div>
       <div
-        className={`overflow-auto transition-all duration-300 ease-in-out rounded-b-3xl ${
+        className={`overflow-auto transition-all duration-300 ease-in-out ${
           isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
         }`}
       >
-        <div className="overflow-auto bg-sui-primary-subtle rounded-b-3xl border-t border-gray-300/20">
-          <pre className="text-xs p-4 whitespace-pre-wrap break-words rounded-b-3xl">
+        <div className="overflow-auto bg-sui-primary-subtle border-t border-gray-300/20">
+          <pre className="text-xs p-4 whitespace-pre-wrap break-words">
             {Object.entries(txResult).map(([k, v]) => (
               <ObjectFieldDisplay
                 name={k}
diff --git a/packages/debug-contracts/src/styles.css b/packages/debug-contracts/src/styles.css
index 68c2491..d46c9e4 100644
--- a/packages/debug-contracts/src/styles.css
+++ b/packages/debug-contracts/src/styles.css
@@ -23,7 +23,7 @@
 
 @layer components {
   .btn-dc {
-    @apply inline-flex items-center justify-center rounded-full px-3 py-1.5 text-xs cursor-pointer font-semibold;
+    @apply inline-flex items-center justify-center px-3 py-1.5 text-xs cursor-pointer font-semibold;
     background-color: var(--color-sui-primary-subtle);
     color: var(--color-sui-primary-content);
     @apply transition-transform duration-75 ease-out;
diff --git a/packages/debug-contracts/src/utils/notification.tsx b/packages/debug-contracts/src/utils/notification.tsx
index dd381b3..691ea13 100644
--- a/packages/debug-contracts/src/utils/notification.tsx
+++ b/packages/debug-contracts/src/utils/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-sui-primary bg-sui-primary-neutral 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-sui-primary bg-sui-primary-neutral 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/packages/debug-contracts/src/utils/utilsDisplay.tsx b/packages/debug-contracts/src/utils/utilsDisplay.tsx
index 1b4a450..8028e43 100644
--- a/packages/debug-contracts/src/utils/utilsDisplay.tsx
+++ b/packages/debug-contracts/src/utils/utilsDisplay.tsx
@@ -99,7 +99,7 @@ const NumberDisplay = ({ value }: { value: bigint }) => {
         className="font-sans ml-2"
       >
         <button
-          className="p-1 text-sui-primary-content/60 hover:text-sui-primary-content hover:bg-sui-primary-neutral rounded-full transition-colors duration-200 w-6 h-6 flex items-center justify-center cursor-pointer"
+          className="p-1 text-sui-primary-content/60 hover:text-sui-primary-content hover:bg-sui-primary-neutral transition-colors duration-200 w-6 h-6 flex items-center justify-center cursor-pointer"
           onClick={() => setIsEther(!isEther)}
         >
           <ArrowsRightLeftIcon className="h-3 w-3 opacity-65" />

From 979f59a8c15f1472978993f1666fec96e0280bb4 Mon Sep 17 00:00:00 2001
From: Rinat <rinatkins@gmail.com>
Date: Fri, 29 May 2026 18:22:13 +0400
Subject: [PATCH 2/4] fix: invalid css

---
 packages/debug-contracts/src/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/debug-contracts/src/styles.css b/packages/debug-contracts/src/styles.css
index d46c9e4..c3592e4 100644
--- a/packages/debug-contracts/src/styles.css
+++ b/packages/debug-contracts/src/styles.css
@@ -73,7 +73,7 @@
 
   .loading-dc {
     @apply pointer-events-none inline-block aspect-square bg-current align-middle;
-    width: calc(var(0.25rem) * 6);
+    width: calc(var(--size-selector, 0.25rem) * 6);
     mask-size: 100%;
     mask-repeat: no-repeat;
     mask-position: center;

From 9478f4696ad81325ba3bcd040753672f6ba6ddf6 Mon Sep 17 00:00:00 2001
From: Rinat <rinatkins@gmail.com>
Date: Wed, 3 Jun 2026 16:47:08 +0400
Subject: [PATCH 3/4] fix: review

---
 example/app/components/UseBalanceExample.tsx           | 2 +-
 packages/components/src/Balance.tsx                    | 4 ++--
 packages/components/src/styles.css                     | 2 +-
 packages/debug-contracts/src/components/TupleArray.tsx | 2 +-
 packages/debug-contracts/src/styles.css                | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/example/app/components/UseBalanceExample.tsx b/example/app/components/UseBalanceExample.tsx
index 2f599ae..b3671de 100644
--- a/example/app/components/UseBalanceExample.tsx
+++ b/example/app/components/UseBalanceExample.tsx
@@ -75,7 +75,7 @@ export const UseBalanceExample = () => {
           <div className="flex flex-col gap-2">
             <span className="text-sm text-gray-500">Balance</span>
             <button
-              className="flex items-center gap-2 px-3 py-1 rounded bg-gray-800 hover:bg-gray-700 transition-colors"
+              className="flex items-center gap-2 px-3 py-1 bg-gray-800 hover:bg-gray-700 transition-colors"
               onClick={toggleDisplayUsdMode}
               type="button"
               title="Toggle balance display mode"
diff --git a/packages/components/src/Balance.tsx b/packages/components/src/Balance.tsx
index f77ae97..a69661a 100644
--- a/packages/components/src/Balance.tsx
+++ b/packages/components/src/Balance.tsx
@@ -46,7 +46,7 @@ export const Balance: React.FC<BalanceProps> = ({ address, chain, defaultUsdMode
         className="flex items-center animate-pulse"
         style={style}
       >
-        <div className="h-4 w-20 bg-sui-skeleton-base rounded" />
+        <div className="h-4 w-20 bg-sui-skeleton-base" />
       </DefaultStylesWrapper>
     );
   }
@@ -54,7 +54,7 @@ export const Balance: React.FC<BalanceProps> = ({ address, chain, defaultUsdMode
   if (isError) {
     return (
       <DefaultStylesWrapper
-        className="border border-gray-300 rounded px-2 flex flex-col items-center max-w-fit text-sui-primary-content"
+        className="border border-gray-300 px-2 flex flex-col items-center max-w-fit text-sui-primary-content"
         style={style}
       >
         <div className="text-sui-warning text-sm">Error</div>
diff --git a/packages/components/src/styles.css b/packages/components/src/styles.css
index 2a99066..2b3612c 100644
--- a/packages/components/src/styles.css
+++ b/packages/components/src/styles.css
@@ -42,7 +42,7 @@
 }
 
 .sui-skeleton {
-  border-radius: 0.2rem;
+  border-radius: 0;
   background-color: var(--color-sui-skeleton-base);
   @media (prefers-reduced-motion: reduce) {
     transition-duration: 15s;
diff --git a/packages/debug-contracts/src/components/TupleArray.tsx b/packages/debug-contracts/src/components/TupleArray.tsx
index dcfefec..8fd5931 100644
--- a/packages/debug-contracts/src/components/TupleArray.tsx
+++ b/packages/debug-contracts/src/components/TupleArray.tsx
@@ -105,7 +105,7 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
             key={additionalIndex}
             className="space-y-1"
           >
-            <span className="inline-block bg-sui-primary-subtle text-sui-primary-content text-xs px-2 py-1 rounded">
+            <span className="inline-block bg-sui-primary-subtle text-sui-primary-content text-xs px-2 py-1">
               {depth > 1 ? `${additionalIndex}` : `tuple[${additionalIndex}]`}
             </span>
             <div className="space-y-4">
diff --git a/packages/debug-contracts/src/styles.css b/packages/debug-contracts/src/styles.css
index c3592e4..9731039 100644
--- a/packages/debug-contracts/src/styles.css
+++ b/packages/debug-contracts/src/styles.css
@@ -73,7 +73,7 @@
 
   .loading-dc {
     @apply pointer-events-none inline-block aspect-square bg-current align-middle;
-    width: calc(var(--size-selector, 0.25rem) * 6);
+    width: 1.5rem;
     mask-size: 100%;
     mask-repeat: no-repeat;
     mask-position: center;

From 6ced92b34dfaa5d85ca3affac3e3b39820fa3ee4 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Tue, 9 Jun 2026 17:34:09 +0530
Subject: [PATCH 4/4] add changeset

---
 .changeset/itchy-geckos-fry.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/itchy-geckos-fry.md

diff --git a/.changeset/itchy-geckos-fry.md b/.changeset/itchy-geckos-fry.md
new file mode 100644
index 0000000..a5ade2f
--- /dev/null
+++ b/.changeset/itchy-geckos-fry.md
@@ -0,0 +1,6 @@
+---
+"@scaffold-ui/debug-contracts": patch
+"@scaffold-ui/components": patch
+---
+
+Ui redesign remove rounded corners