Skip to content

Ui redesign #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rin-st wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Ui redesign #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3657277
feat: redesign
rin-st May 29, 2026
979f59a
fix: invalid css
rin-st May 29, 2026
9478f46
fix: review
rin-st Jun 3, 2026
2e8438a
Merge branch 'main' of github.com:scaffold-eth/scaffold-ui into remov…
rin-st Jun 3, 2026
e95effa
Merge branch 'main' of github.com:scaffold-eth/scaffold-ui into remov…
rin-st Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/app/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand Down
6 changes: 3 additions & 3 deletions example/app/components/SwitchTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}`}
/>
Expand Down
8 changes: 4 additions & 4 deletions example/app/components/UseAddressExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ 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>
);
}

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">
Expand Down Expand Up @@ -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>
)}
Expand Down
12 changes: 6 additions & 6 deletions example/app/components/UseAddressInputExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,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">
Expand Down Expand Up @@ -106,14 +106,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`}
/>
Expand All @@ -124,8 +124,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>
)
Expand Down
11 changes: 7 additions & 4 deletions example/app/components/UseBalanceExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ 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>
);
}

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">
Expand All @@ -53,7 +53,10 @@ export const UseBalanceExample = () => {
</div>
<div className="flex flex-col items-start">
<span className="text-sm text-gray-500 mb-1">Custom styles</span>
<Balance address={address} style={customBalanceStyle} />
<Balance
address={address}
style={customBalanceStyle}
/>
</div>
</div>
</div>
Expand All @@ -75,7 +78,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-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
className="flex items-center gap-2 px-3 py-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
onClick={toggleDisplayUsdMode}
type="button"
title="Toggle balance display mode"
Expand Down
2 changes: 1 addition & 1 deletion example/app/components/UseDebugContractsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)]"
Expand Down
4 changes: 2 additions & 2 deletions example/app/components/UseEtherInputExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand Down Expand Up @@ -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)}
Expand Down
9 changes: 4 additions & 5 deletions packages/components/src/Address/Address.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"]}
Expand All @@ -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>
) : (
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/Balance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ 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>
);
}

if (isBalanceError) {
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>
Expand Down
18 changes: 6 additions & 12 deletions packages/components/src/Input/AddressInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`}
/>
Expand All @@ -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>
)
Expand All @@ -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" />
)
}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/Input/BaseInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions packages/debug-contracts/src/Contract.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/debug-contracts/src/components/Collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/debug-contracts/src/components/DisplayVariable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down
Loading