lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(brand): mobile NetworkIcon/NetworkLogo render chain.branding.logoContent (the per-brand mark) instead of image-URL→triangle fallback

Browse Source
This commit is contained in:
Antje Worring
2026-06-23 16:13:49 -07:00
parent 8fe3d37986
commit 4369780c8f
2 changed files with 33 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/snippets/networkLogo/NetworkIcon.tsx
+14 -23
View File
@@ -2,41 +2,32 @@ import React from 'react';
import { route } from 'nextjs-routes';
import config from 'configs/app';
import { useColorModeValue } from 'toolkit/next/color-mode';
import { Image } from '@luxfi/ui/image';
const IconFallback = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30" height="30" aria-label={ `${ config.chain.name } icon` }>
<polygon points="25,46.65 50,3.35 0,3.35" fill="currentColor"/>
</svg>
);
};
import { getCurrentChain } from 'configs/app/chainRegistry';
type Props = {
className?: string;
};
// Renders the resolved chain's brand mark (inline SVG from chainRegistry),
// matching the desktop TopBar. No image-URL dependency / triangle fallback —
// the per-host branding (e.g. the Hanzo H) is authoritative.
const NetworkIcon = ({ className }: Props) => {
const iconSrc = useColorModeValue(config.UI.navigation.icon.default, config.UI.navigation.icon.dark || config.UI.navigation.icon.default);
const chain = getCurrentChain();
return (
<a
className={ className }
href={ route({ pathname: '/' }) }
aria-label="Link to main page"
aria-label={ `${ chain.branding.brandName } home` }
>
<Image
w="30px"
h="30px"
src={ iconSrc }
alt={ `${ config.chain.name } network icon` }
fallback={ <IconFallback/> }
objectFit="contain"
objectPosition="left"
className={ !config.UI.navigation.icon.dark ? 'dark:brightness-0 dark:invert' : undefined }
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox={ chain.branding.logoViewBox }
width="30"
height="30"
className="shrink-0 text-[var(--color-text-primary)]"
aria-label={ `${ chain.branding.brandName } icon` }
dangerouslySetInnerHTML={{ __html: chain.branding.logoContent }}
/>
</a>
);
ui/snippets/networkLogo/NetworkLogo.tsx
+19 -29
View File
@@ -2,47 +2,37 @@ import React from 'react';
import { route } from 'nextjs-routes';
import config from 'configs/app';
import { useColorModeValue } from 'toolkit/next/color-mode';
import { Image } from '@luxfi/ui/image';
const LogoFallback = () => {
return (
<div className="flex items-center gap-2 h-6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24" height="24">
<polygon points="25,46.65 50,3.35 0,3.35" fill="currentColor"/>
</svg>
<span className="font-bold text-lg tracking-tight">
{ config.chain.name }
</span>
</div>
);
};
import { getCurrentChain } from 'configs/app/chainRegistry';
type Props = {
className?: string;
};
// Renders the resolved chain's brand mark + name (inline SVG from
// chainRegistry), matching the desktop TopBar. No image-URL dependency /
// triangle fallback — the per-host branding (e.g. the Hanzo H) is authoritative.
const NetworkLogo = ({ className }: Props) => {
const logoSrc = useColorModeValue(config.UI.navigation.logo.default, config.UI.navigation.logo.dark || config.UI.navigation.logo.default);
const chain = getCurrentChain();
return (
<a
className={ className }
href={ route({ pathname: '/' }) }
aria-label="Link to main page"
aria-label={ `${ chain.branding.brandName } home` }
>
<Image
h="24px"
skeletonWidth="120px"
src={ logoSrc }
alt={ `${ config.chain.name } network logo` }
fallback={ <LogoFallback/> }
objectFit="contain"
objectPosition="left"
className={ !config.UI.navigation.logo.dark ? 'dark:brightness-0 dark:invert' : undefined }
/>
<div className="flex items-center gap-2 h-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox={ chain.branding.logoViewBox }
width="24"
height="24"
className="shrink-0 text-[var(--color-text-primary)]"
dangerouslySetInnerHTML={{ __html: chain.branding.logoContent }}
/>
<span className="font-bold text-lg tracking-tight whitespace-nowrap text-[var(--color-text-primary)]">
{ chain.branding.brandName }
</span>
</div>
</a>
);
};