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 = ({
-
+
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 (
-
+
- + 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 ? (

Transaction Details

{" "} -
Transaction Hash Function Called Block Number
+
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 ( <> -
+

Debug Contracts

-

+

You can debug & interact with your deployed contracts here.
Check{" "} diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index 657c9c98e0..a409db5682 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -2,6 +2,7 @@ import "@rainbow-me/rainbowkit/styles.css"; import "@scaffold-ui/components/styles.css"; import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders"; import { ThemeProvider } from "~~/components/ThemeProvider"; +import { PaletteLoader } from "~~/components/test/PaletteLoader"; import "~~/styles/globals.css"; import { getMetadata } from "~~/utils/scaffold-eth/getMetadata"; @@ -15,6 +16,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => { + {children} 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 = () => {

-
- +
+

Tinker with your smart contract using the{" "} @@ -53,8 +53,8 @@ const Home: NextPage = () => { tab.

-
- +
+

Explore your local transactions with the{" "} diff --git a/packages/nextjs/app/test/page.tsx b/packages/nextjs/app/test/page.tsx new file mode 100644 index 0000000000..6c10dfd99b --- /dev/null +++ b/packages/nextjs/app/test/page.tsx @@ -0,0 +1,292 @@ +"use client"; + +import { useEffect, useState } from "react"; +import type { NextPage } from "next"; +import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { + PALETTE_STORAGE_KEY, + PALETTE_STYLE_ID, + applyPalette, + palettes, + resetPalette, +} from "~~/components/test/palettes"; + +const Section = ({ title, children }: { title: string; children: React.ReactNode }) => ( +

+

{title}

+ {children} +
+); + +const SWATCH_KEYS = ["primary", "secondary", "accent", "base-100", "base-300"] as const; + +const Test: NextPage = () => { + const [activePalette, setActivePalette] = useState(null); + + useEffect(() => { + const style = document.getElementById(PALETTE_STYLE_ID) as HTMLStyleElement | null; + if (style?.dataset.palette) setActivePalette(style.dataset.palette); + }, []); + + return ( +
+

Theme Test Page

+ +
+
+ {palettes.map(p => { + const active = activePalette === p.name; + return ( +
+
{p.name}
+
+
+ {SWATCH_KEYS.map(k => ( +
+ ))} +
+ +
+
+ ); + })} +
+ {activePalette && ( + + )} +
+ +
+
+ + + + + + + + + + + +
+
+ +
+
+ + + + + + + + +
+
+ +
+
+ + + + + + + + +
+
+ +
+
+ + + + +
+
+ +
+
+ + + +
+
+ +
+
+
bg-primary
+
bg-secondary
+
bg-accent
+
bg-neutral
+
bg-info
+
bg-success
+
bg-warning
+
bg-error
+
+
+ +
+
+
bg-base-100
+
bg-base-200
+
bg-base-300
+
+
+ +
+
+

text-primary

+

text-secondary

+

text-accent

+

text-neutral

+

text-info

+

text-success

+

text-warning

+

text-error

+

text-base-content

+
+
+ +
+
+
border-primary
+
border-secondary
+
border-accent
+
border-neutral
+
border-info
+
border-success
+
border-warning
+
border-error
+
+
+ +
+
+
+ + fill-primary +
+
+ + fill-secondary +
+
+ + fill-accent +
+
+ + fill-neutral +
+
+ + fill-secondary on base-100 +
+
+
+ +
+
+ + + +
+ + + + +
+
+ + + +
+
+ + + + +
+
+
+ +
+
+ badge-primary + badge-secondary + badge-accent + badge-neutral + badge-info + badge-success + badge-warning + badge-error +
+
+ +
+
+
alert-info
+
alert-success
+
alert-warning
+
alert-error
+
+
+ +
+
+

Card title

+

Body text on base-100. Border uses base-300.

+
+ + + +
+
+
+ +
+ +
+
+ ); +}; + +export default Test; diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index fba0c29a9a..82044ae264 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { hardhat } from "viem/chains"; -import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline"; +import { Bars3Icon, BugAntIcon, SwatchIcon } from "@heroicons/react/24/outline"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth"; @@ -25,6 +25,11 @@ export const menuLinks: HeaderMenuLink[] = [ href: "/debug", icon: , }, + { + label: "Test", + href: "/test", + icon: , + }, ]; export const HeaderMenuLinks = () => { @@ -35,13 +40,13 @@ export const HeaderMenuLinks = () => { {menuLinks.map(({ label, href, icon }) => { const isActive = pathname === href; return ( -
  • +
  • {icon} {label} @@ -66,14 +71,14 @@ export const Header = () => { }); return ( -
    -
    +
    +
      { burgerMenuRef?.current?.removeAttribute("open"); }} @@ -90,7 +95,7 @@ export const Header = () => { Ethereum dev stack
    -
      +
    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 - {`${address} + {`${address} ); 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 */}

    Local Faucet

    -