From f256ab2c87a651eb3973b4fa9a285daf4d3d3e71 Mon Sep 17 00:00:00 2001 From: Danyal Prout Date: Thu, 10 Sep 2026 22:06:18 -0500 Subject: [PATCH] ui tweaks --- app/components/AppShell.tsx | 87 +------------------ app/vibenet/demos/account/AccountDemo.tsx | 19 +--- .../demos/account/useAccountEngine.tsx | 19 ++-- 3 files changed, 14 insertions(+), 111 deletions(-) diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx index 4471434..e40e709 100644 --- a/app/components/AppShell.tsx +++ b/app/components/AppShell.tsx @@ -4,7 +4,7 @@ import { CSSProperties, MouseEvent as ReactMouseEvent, PropsWithChildren, useEff import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { Dialog } from '@base-ui/react/dialog'; -import { AnimatePresence, easeOut, motion, useIsPresent, useMotionTemplate, useMotionValue, usePresenceData, useReducedMotion, type MotionValue } from 'motion/react'; +import { AnimatePresence, easeOut, motion, useIsPresent, usePresenceData } from 'motion/react'; import { Toaster } from 'sonner'; import { getActiveParent, isChildActive, isTopNavActive, navActiveParent, navHighlightPath, NAV_ITEMS, NavIcon, titleForPath } from '../navigation'; @@ -18,7 +18,7 @@ import { NavScrollArea } from './NavScrollArea'; import { AnimatedBaseLogo, BaseMark } from './ui/AnimatedBaseLogo'; import { Breadcrumb } from './ui/Breadcrumb'; import { cn } from './ui/cn'; -import { AnimatedArrowIcon, CloseIcon } from './ui/icons'; +import { AnimatedArrowIcon } from './ui/icons'; import { Text, textVariantClasses } from './ui/Text'; const SIDEBAR_WIDTH = 248; @@ -359,8 +359,6 @@ function TopNavList({ highlightPath, onSelect }: { highlightPath: string; onSele } const slideTransition = { duration: 0.2, ease: easeOut, x: { visualDuration: 0.2, type: 'spring', bounce: 0 } }; -/** Matches `h-9` / theme(spacing.9). */ -const APP_BANNER_HEIGHT = '2.25rem'; // How long the nav trusts a tapped href before falling back to the router. Only // reached if a navigation never commits (aborted, failed, or a modified click that @@ -649,63 +647,6 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC ); } -type GlobalBannerProps = { - dismissed: boolean; - onDismiss: () => void; - className?: string; - height: MotionValue; -}; - -function GlobalBanner({ dismissed, onDismiss, className, height }: GlobalBannerProps) { - const reducedMotion = useReducedMotion(); - const transition = reducedMotion ? { duration: 0 } : slideTransition; - - return ( - - -
-
- New! - EIP-8130: Accounts - - { - if (opensInNewTab(event)) return; - onDismiss(); - }} - > - Test on Vibenet - - -
-
- - - - ); -} - // next-themes `disableTransitionOnChange`: stamp a global `transition: none` // rule, apply the theme, force a restyle, then drop the rule on the next tick // so color tokens don't animate through every `transition-colors` on the page. @@ -734,10 +675,7 @@ function disableAnimation() { export function AppShell({ children }: PropsWithChildren) { const pathname = usePathname() || '/'; const title = titleForPath(pathname); - const bannerHeight = useMotionValue(APP_BANNER_HEIGHT); - const sidebarHeight = useMotionTemplate`calc(100dvh - ${bannerHeight})`; const [menuOpen, setMenuOpen] = useState(false); - const [bannerDismissed, setBannerDismissed] = useState(false); // aria-checked only. The switch's look is CSS against html[data-theme], // which the pre-paint script already set — this state starts false so SSR // and the first client render match, then catches up after mount. @@ -775,20 +713,11 @@ export function AppShell({ children }: PropsWithChildren) { return (
- {/* Desktop: banner spans the full width above the shell. On mobile it is - rendered below the fixed header instead (see below), so it isn't hidden - behind it. */} - setBannerDismissed(true)} - height={bannerHeight} - className="sticky top-0 z-50 hidden md:block" - />
{/* Desktop sidebar */} @@ -823,17 +752,9 @@ export function AppShell({ children }: PropsWithChildren) {
- {/* Mobile: banner sits below the fixed header (which the top slot is - hidden behind), so it's visible without scrolling. */} - setBannerDismissed(true)} - height={bannerHeight} - className="sticky top-14 z-50 block md:hidden" - />
{(() => { diff --git a/app/vibenet/demos/account/AccountDemo.tsx b/app/vibenet/demos/account/AccountDemo.tsx index a2d681c..b22d959 100644 --- a/app/vibenet/demos/account/AccountDemo.tsx +++ b/app/vibenet/demos/account/AccountDemo.tsx @@ -14,7 +14,6 @@ import { useState } from 'react'; import { AnimatePresence, motion } from 'motion/react'; import { Button } from '../../../components/ui/Button'; -import { Modal } from '../../../components/ui/Modal'; import { Text } from '../../../components/ui/Text'; import { AccountDemoShell } from '../_components/AccountDemoShell'; import { FeatureCard } from '../../components/FeatureCard'; @@ -37,7 +36,7 @@ export function AccountDemo() { function AccountDemoInner() { const engine = useAccountEngine(); - const { accounts, activeAccountId, activity, regenesisNotice, setRegenesisNotice, acct } = engine; + const { accounts, activeAccountId, activity, acct } = engine; const [transactionRequest, setTransactionRequest] = useState<{ preset?: TransactPreset; @@ -126,22 +125,6 @@ function AccountDemoInner() { preset={transactionRequest.preset} /> ) : null} - - setRegenesisNotice(false)} - title="Chain Was Reset" - footer={ - - } - > - - The vibenet devnet has been regenesised — its onchain state was wiped. Your - accounts and keys are still here and their addresses are unchanged; top up to transact again. - - ); diff --git a/app/vibenet/demos/account/useAccountEngine.tsx b/app/vibenet/demos/account/useAccountEngine.tsx index 885a7bd..1ec041b 100644 --- a/app/vibenet/demos/account/useAccountEngine.tsx +++ b/app/vibenet/demos/account/useAccountEngine.tsx @@ -205,6 +205,7 @@ function useAccountEngineCore() { setActivity, networkShort, setNetworkShort, + genesisHash, setGenesisHash, hydrated, addAccount, @@ -214,9 +215,6 @@ function useAccountEngineCore() { const [busy, setBusy] = useState(false); const [faucetBusy, setFaucetBusy] = useState(null); - // Regenesis (devnet reset) detection. - const [regenesisNotice, setRegenesisNotice] = useState(false); - const chain = useMemo(() => getDemoChain(networkShort), [networkShort]); // A viem public client pointed at vibenet's cross-origin RPC route — reads @@ -260,10 +258,13 @@ function useAccountEngineCore() { return; } if (!hash || cancelled) return; - setGenesisHash((prev) => { - if (prev && prev !== hash) setRegenesisNotice(true); - return hash; - }); + if (genesisHash && genesisHash !== hash) { + toast.info('Vibenet chain was reset', { + description: 'Your accounts, keys, and addresses are unchanged. Top up to transact again.', + duration: 8_000, + }); + } + if (genesisHash !== hash) setGenesisHash(hash); }; checkGenesis(); const t = setInterval(checkGenesis, 10_000); @@ -271,7 +272,7 @@ function useAccountEngineCore() { cancelled = true; clearInterval(t); }; - }, [hydrated, makeRpcClient, setGenesisHash]); + }, [genesisHash, hydrated, makeRpcClient, setGenesisHash]); // --- helpers ----------------------------------------------------------- // Entries that name a tx hash pick up its inclusion timing automatically, so @@ -637,8 +638,6 @@ function useAccountEngineCore() { busy, activeSigner, signerForAccount, - regenesisNotice, - setRegenesisNotice, // Faucet faucetBusy,