mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
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:
@@ -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' },
|
||||
|
||||
Reference in New Issue
Block a user