minor tweaks (#60)

technophile-04 · web-flow · commit d2504c601f59 · 2025-10-28T12:50:49.000+07:00
diff --git a/.changeset/pink-months-bow.md b/.changeset/pink-months-bow.md
@@ -0,0 +1,5 @@
+---
+"@scaffold-ui/debug-contracts": patch
+---
+
+(debug-contracts): make the hardhat/anvil chain name neutral
diff --git a/.changeset/poor-apples-wear.md b/.changeset/poor-apples-wear.md
@@ -0,0 +1,5 @@
+---
+"@scaffold-ui/components": patch
+---
+
+set font-family at component level instead of global css rule
diff --git a/packages/components/src/Address/Address.tsx b/packages/components/src/Address/Address.tsx
@@ -7,6 +7,7 @@ import { mainnet } from "viem/chains";
 import { AddressLinkWrapper } from "./AddressLinkWrapper";
 import { AddressCopyIcon } from "./AddressCopyIcon";
 import { textSizeMap, blockieSizeMap, copyIconSizeMap, getNextSize, getPrevSize } from "./utils";
+import { DefaultStylesWrapper } from "../utils/ComponentWrapper";
 
 export type AddressProps = {
   address?: AddressType;
@@ -51,7 +52,7 @@ export const Address: React.FC<AddressProps> = ({
 
   if (!checkSumAddress) {
     return (
-      <div className="flex items-center text-sui-primary-content" style={style}>
+      <DefaultStylesWrapper className="flex items-center text-sui-primary-content" style={style}>
         <div
           className="shrink-0 sui-skeleton !rounded-full"
           style={{
@@ -69,12 +70,12 @@ export const Address: React.FC<AddressProps> = ({
             <span className="invisible">0x1234...56789</span>
           </div>
         </div>
-      </div>
+      </DefaultStylesWrapper>
     );
   }
 
   return (
-    <div className="flex items-center shrink-0 text-sui-primary-content" style={style}>
+    <DefaultStylesWrapper className="flex items-center shrink-0 text-sui-primary-content" style={style}>
       <div className="shrink-0">
         <img
           className="rounded-full"
@@ -115,6 +116,6 @@ export const Address: React.FC<AddressProps> = ({
           />
         </div>
       </div>
-    </div>
+    </DefaultStylesWrapper>
   );
 };
diff --git a/packages/components/src/Balance.tsx b/packages/components/src/Balance.tsx
@@ -5,6 +5,7 @@ import { Address, Chain } from "viem";
 import { useBalance } from "@scaffold-ui/hooks";
 import { useAccount } from "wagmi";
 import { mainnet } from "viem/chains";
+import { DefaultStylesWrapper } from "./utils/ComponentWrapper";
 
 export type BalanceProps = {
   address?: Address;
@@ -39,26 +40,27 @@ export const Balance: React.FC<BalanceProps> = ({ address, chain, defaultUsdMode
 
   if (isLoading || !balance) {
     return (
-      <div className="flex items-center animate-pulse" style={style}>
+      <DefaultStylesWrapper className="flex items-center animate-pulse" style={style}>
         <div className="h-4 w-20 bg-sui-skeleton-base rounded" />
-      </div>
+      </DefaultStylesWrapper>
     );
   }
 
   if (isError) {
     return (
-      <div
+      <DefaultStylesWrapper
         className="border border-gray-300 rounded 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>
-      </div>
+      </DefaultStylesWrapper>
     );
   }
 
   return (
-    <button
-      className={`flex flex-col items-center font-normal bg-transparent focus:outline-none cursor-pointer text-sui-primary-content`}
+    <DefaultStylesWrapper
+      as="button"
+      className="flex flex-col items-center font-normal bg-transparent focus:outline-none cursor-pointer text-sui-primary-content"
       onClick={toggleDisplayUsdMode}
       type="button"
       title="Toggle balance display mode"
@@ -77,6 +79,6 @@ export const Balance: React.FC<BalanceProps> = ({ address, chain, defaultUsdMode
           </div>
         )}
       </div>
-    </button>
+    </DefaultStylesWrapper>
   );
 };
diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
@@ -2,6 +2,7 @@
 
 import { ChangeEvent, FocusEvent, ReactNode, useCallback, useEffect, useRef } from "react";
 import { CommonInputProps } from "./utils";
+import { DefaultStylesWrapper } from "../utils/ComponentWrapper";
 
 export type BaseInputProps<T> = CommonInputProps<T> & {
   error?: boolean;
@@ -82,7 +83,7 @@ export const BaseInput = <T extends { toString: () => string } | undefined = str
   }, [reFocus]);
 
   return (
-    <div
+    <DefaultStylesWrapper
       className={`flex border-2 rounded-full border-sui-input-border bg-sui-input-background text-sui-input-text ${modifier}`}
       style={style}
     >
@@ -101,6 +102,6 @@ export const BaseInput = <T extends { toString: () => string } | undefined = str
         onFocus={onFocus}
       />
       {suffix}
-    </div>
+    </DefaultStylesWrapper>
   );
 };
diff --git a/packages/components/src/styles.css b/packages/components/src/styles.css
@@ -41,11 +41,6 @@
   --color-sui-input-border: var(--color-sui-primary);
 }
 
-/* Apply default font family to all component elements */
-* {
-  font-family: var(--font-sans);
-}
-
 .sui-skeleton {
   border-radius: 0.2rem;
   background-color: var(--color-sui-skeleton-base);
diff --git a/packages/components/src/utils/ComponentWrapper.tsx b/packages/components/src/utils/ComponentWrapper.tsx
@@ -0,0 +1,27 @@
+import React, { CSSProperties, ElementType, ComponentPropsWithoutRef } from "react";
+
+type ComponentWrapperProps<T extends ElementType = "div"> = {
+  children: React.ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "className" | "style" | "children" | "as">;
+
+/**
+ * Base wrapper component for all scaffold-ui components
+ * Automatically applies the font-sans class for consistent styling
+ */
+export const DefaultStylesWrapper = <T extends ElementType = "div">({
+  children,
+  className = "",
+  style,
+  as,
+  ...props
+}: ComponentWrapperProps<T>) => {
+  const Component = as || "div";
+  return (
+    <Component className={`${className} font-sans`} style={style} {...props}>
+      {children}
+    </Component>
+  );
+};
diff --git a/packages/debug-contracts/src/Contract.tsx b/packages/debug-contracts/src/Contract.tsx
@@ -28,7 +28,7 @@ export const Contract: React.FC<ContractProps> = ({ contractName, contract, chai
 
   return (
     <ContractConfigProvider config={{ blockExplorerAddressLink, chain, chainId }}>
-      <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`}>
+      <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">
@@ -55,7 +55,9 @@ export const Contract: React.FC<ContractProps> = ({ contractName, contract, chai
                   </div>
                   <p className="my-0 text-sm">
                     <span className="font-bold">Network</span>:{" "}
-                    <span style={{ color: NETWORKS_EXTRA_DATA[chainId]?.color }}>{chain.name}</span>
+                    <span style={{ color: NETWORKS_EXTRA_DATA[chainId]?.color }}>
+                      {chain.id === 31_337 ? "Localhost" : chain.name}
+                    </span>
                   </p>
                 </div>
               </div>
diff --git a/packages/debug-contracts/src/components/DisplayVariable.tsx b/packages/debug-contracts/src/components/DisplayVariable.tsx
@@ -73,9 +73,7 @@ export const DisplayVariable = ({
       <div className="text-sui-primary-content/80 flex flex-col items-start">
         <div>
           <div
-            className={`block transition bg-transparent ${
-              showAnimation ? "bg-warning rounded-xs animate-pulse-fast" : ""
-            }`}
+            className={`block transition ${showAnimation ? "bg-[#e2d563] rounded-xs animate-pulse-fast" : "bg-transparent"}`}
           >
             {displayTxResult(result, "base")}
           </div>
diff --git a/packages/debug-contracts/src/styles.css b/packages/debug-contracts/src/styles.css
@@ -70,4 +70,17 @@
   .link-dc:hover {
     opacity: 80%;
   }
+
+  .loading-dc {
+    @apply pointer-events-none inline-block aspect-square bg-current align-middle;
+    width: calc(var(0.25rem) * 6);
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+  }
+
+  .loading-dc-spinner {
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+  }
 }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@scaffold-ui/debug-contracts": patch
 +---
++
 +(debug-contracts): make the hardhat/anvil chain name neutral