fix(explore): the mobile home page was a crash screen — no animation driver

Every phone visitor got "Oops! Something went wrong" instead of the
explorer. Desktop and tablet were clean, which is why it survived.

@hanzogui v5 ships WITHOUT an animation driver by design; the app has to
supply one. `@luxfi/ui`'s own config (packages/ui/src/lux.config.ts) has
carried `animations` from `@hanzogui/config/v5-css` since it was written —
this second, hand-rolled config predates that and never got the key. gui's
Sheet reads `useAnimatedNumber` straight off the driver and calls
`.setValue()` on the result, so with no driver it threw

    TypeError: Cannot read properties of undefined (reading 'setValue')
      at SheetImplementationCustom.useIsomorphicLayoutEffect

into the error boundary. Every @luxfi/ui Drawer here — Burger, mobile
search, wallet and profile sheets — mounts ONLY below the mobile
breakpoint, so the crash was viewport-gated and invisible above it.

Measured on the home page, one variable changed:
  390px   before "Oops! Something went wrong"  after full page, 0 pageerrors
  834px   before renders                       after renders
  1440px  before renders                       after renders

and /validators at 390px now reads 5 validators / 2,500,000,000 LUX, which
is what platform.getCurrentValidators returns.

The real lesson is the duplicate config, not the missing key: this app
hand-rolls a gui config that @luxfi/ui already owns. Folding it onto the
umbrella's is the follow-up.
This commit is contained in:
2026-07-27 18:27:16 -07:00
parent 86cfb45d2c
commit 6865d8ead1
+14
View File
@@ -1,3 +1,4 @@
import { animations } from '@hanzogui/config/v5-css';
import { createGui, GuiProvider } from '@hanzogui/core';
import { Toaster } from '@luxfi/ui/toaster';
import { QueryClientProvider } from '@tanstack/react-query';
@@ -23,6 +24,18 @@ import React from 'react';
// throws "Missing theme." in production. createGui alone is not
// enough — it sets the config, but the theme-state Provider
// tree has to exist as well.
// 4. `animations` must be set. @hanzogui ships v5 WITHOUT a driver, and
// `@luxfi/ui`'s own config (src/lux.config.ts) has carried this key
// since the day it was written — this config predates it and did not.
// gui's Sheet reads `useAnimatedNumber` straight off the driver and
// calls `.setValue()` on the result, so with no driver the home
// page threw
// TypeError: Cannot read properties of undefined (reading 'setValue')
// out of SheetImplementationCustom. Every @luxfi/ui Drawer here — the
// burger menu, mobile search, the wallet and profile sheets — mounts
// ONLY below the mobile breakpoint, so desktop and tablet were clean
// and every phone visitor got "Oops! Something went wrong" instead of
// the explorer. Measured: crash at 390px, clean at 834px and 1440px.
//
// We materialize the config once, on both server and client (no `typeof
// window` gate). createGui is idempotent via getConfigMaybe() — if a
@@ -30,6 +43,7 @@ import React from 'react';
// merged forward.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const guiConfig: any = createGui({
animations,
themes: {
light: { background: '#ffffff', color: '#000000' },
dark: { background: '#000000', color: '#ffffff' },