mirror of
https://github.com/luxfi/bridge.git
synced 2026-09-24 00:26:46 +00:00
zeekay
ad4421264b
User asked to confirm the rebuild is up to date with @hanzo/gui framework
and to run both Vite tenant + Next.js explorer locally to verify. Playwright
caught a regression: bumping @hanzo/gui to 7.2.2 (latest published) made
the bridge tenant render a blank page with 'createGui is not a function'.
Root cause: @hanzo/gui's published dist artefacts use the upstream Tamagui
symbol names verbatim (createHanzogui / HanzoguiProvider / getDefault-
HanzoguiConfig). The consumer-side scripts/patch-hanzogui-exports.cjs
ONLY runs when dist/ is empty — which was true for 7.0.0 (broken
publish) but is false for 7.2.x (real dist). So 7.2.2 exposes the
upstream Hanzogui* names and the bridge SDK code (which calls the
renamed createGui / GuiProvider / getDefaultGuiConfig) finds undefined
exports.
Fix: SDK accepts BOTH naming surfaces. pkg/bridge/src/mount.ts and
Bridge.tsx try the renamed symbol first (works on 7.0.0 + patch), fall
back to the upstream Hanzogui* name (works on 7.2.x dist). Throw a
clear error if neither is exported.
Playwright in-browser verification after the fix:
Title: 'LUX Bridge'
#bridge-root: 1 child rendered (Tamagui tree)
Console errors: 0 (only theme-token warnings, harmless)
UI rendering: header (LUX Bridge + Connect Wallet) ✓
swap form (FROM Lux Network → TO Ethereum) ✓
TRANSFERS panel ✓
footer (Network: mainnet · Docs · [email protected]) ✓
Also bumped:
- @hanzo/gui ^7.0.0 → ^7.2.2 (latest published)
- @luxfi/bridge 1.0.4 → 1.0.5
Plus an incidental fix to app/explorer/components/SwapHistory/StatusIcons.tsx
(pre-existing operator-precedence bug: 'a' + b ?? '' had its ?? branch
unreachable; wrapped className ?? '' in parens). Found while attempting
to run the legacy explorer locally; we're deprecating that whole app
per #387 but the type error blocked next dev / next build cold.
Tests:
- SDK pkg/bridge: 58/58 passing
- SDK typecheck: clean
- app/server: 77/77 passing (unchanged)
95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
import { SwapStatus } from "../../models/SwapStatus";
|
|
|
|
export function StatusIcon({ swap, className}: { swap: string | undefined , className?: string}) {
|
|
switch (swap) {
|
|
case SwapStatus.Failed:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<RedIcon />
|
|
<p>Failed</p>
|
|
</div>
|
|
)
|
|
case SwapStatus.Completed:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<GreenIcon />
|
|
<p>Completed</p>
|
|
</div>
|
|
)
|
|
case SwapStatus.Cancelled:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<GreyIcon />
|
|
<p>Cancelled</p>
|
|
</div>
|
|
)
|
|
case SwapStatus.UserTransferPending:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<YellowIcon />
|
|
<p>Deposite pending</p>
|
|
</div>
|
|
)
|
|
case SwapStatus.UserTransferDelayed:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<YellowIcon />
|
|
<p>Delayed</p>
|
|
</div>
|
|
)
|
|
case SwapStatus.BridgeTransferPending:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<YellowIcon />
|
|
<p>Pending</p>
|
|
</div>
|
|
)
|
|
case SwapStatus.Expired:
|
|
return (
|
|
<div className={"inline-flex items-center " + (className ?? '')} >
|
|
<GreyIcon />
|
|
<p>Expired</p>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export const RedIcon = () => {
|
|
return (
|
|
<svg className="w-2 h-2 rounded-sm mr-1">
|
|
<rect fill="#E43636" width="100%" height="100%"></rect>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export const GreenIcon = () => {
|
|
return (
|
|
<svg className="w-2 h-2 mr-1 rounded-sm">
|
|
<rect fill="#55B585" className="rounded-full" width="100%" height="100%"></rect>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export const YellowIcon = () => {
|
|
return (
|
|
<svg className="w-2 h-2 rounded-sm mr-1">
|
|
<rect fill="#facc15" width="100%" height="100%"></rect>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export const GreyIcon = () => {
|
|
return (
|
|
<svg className="w-2 h-2 rounded-sm mr-1">
|
|
<rect fill="#808080" width="100%" height="100%"></rect>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
export const PurpleIcon = () => {
|
|
return (
|
|
<svg className="w-2 h-2 rounded-sm mr-1">
|
|
<rect fill="#A020F0" width="100%" height="100%"></rect>
|
|
</svg>
|
|
)
|
|
} |