mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekayandHanzo Dev
6d805a016a
Three write-once-deploy-4 root causes from the 4-res audit:
1. Horizontal overflow (454px @1280, 38px @1920). The shared layout
Container forced 'min-w-[100vw] lg:min-w-[fit-content]', promoting the
whole page to its ~1734px max-content width so stat/block cards clipped
past the viewport. Make it a fluid column ('w-full min-w-0') and add
'min-w-0' to MainColumn so the flex chain shrinks and inner
overflow-x-auto regions scroll internally -> document.scrollWidth ==
innerWidth at every breakpoint.
2. White-on-white values (block Reward / tx Value / tx Fee /
network-utilization%). These passed legacy Chakra dot-tokens
('text.secondary', 'green.600'...) straight into an inline CSS 'color',
which browsers drop as invalid -> the text inherited white. Add one
resolveColorToken() helper (dot-token -> var(--color-*)), apply it in
SimpleValue (the value chokepoint for Reward/Value/Fee), and point
getNetworkUtilizationParams at real theme vars (bright badge fg shades,
all >=4.5:1 on the light card bg).
3. Broken 'Menu' button: the wallet/settings button stacked a 20px icon
over its label in a bare div inside a 32px overflow-hidden button (the
'51px in 32px' clip that read as a stray hamburger at lg+). Lay the
icon+label out horizontally (flex items-center gap-2, sized icon).
Co-authored-by: Hanzo Dev <[email protected]>
70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import { Button, type ButtonProps } from '@luxfi/ui/button';
|
|
import { Tooltip } from '@luxfi/ui/tooltip';
|
|
import React from 'react';
|
|
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import shortenString from 'lib/shortenString';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
import UserIdenticon from '../UserIdenticon';
|
|
|
|
interface Props {
|
|
size?: ButtonProps['size'];
|
|
variant?: ButtonProps['variant'];
|
|
isPending?: boolean;
|
|
isAutoConnectDisabled?: boolean;
|
|
address?: string;
|
|
domain?: string;
|
|
}
|
|
|
|
const UserWalletButton = ({ size, variant, isPending, isAutoConnectDisabled, address, domain, ...rest }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
|
|
|
|
const isMobile = useIsMobile();
|
|
|
|
const content = (() => {
|
|
if (address) {
|
|
const text = domain || shortenString(address);
|
|
return (
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<UserIdenticon address={ address } isAutoConnectDisabled={ isAutoConnectDisabled }/>
|
|
<div className="truncate">{ text }</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<IconSvg name="profile" className="w-5 h-5 shrink-0"/>
|
|
<div>Menu</div>
|
|
</div>
|
|
);
|
|
})();
|
|
|
|
return (
|
|
<Tooltip
|
|
content="Settings & wallet"
|
|
disabled={ isMobile || Boolean(address) }
|
|
openDelay={ 500 }
|
|
disableOnMobile
|
|
>
|
|
<span>
|
|
<Button
|
|
ref={ ref }
|
|
size={ size }
|
|
variant={ variant }
|
|
selected={ Boolean(address) }
|
|
highlighted={ isAutoConnectDisabled }
|
|
className={ `px-2.5 lg:px-3 ${ address ? 'font-bold' : 'font-semibold' }` }
|
|
loading={ isPending }
|
|
loadingText={ isMobile ? undefined : 'Connecting' }
|
|
{ ...rest }
|
|
>
|
|
{ content }
|
|
</Button>
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
};
|
|
|
|
export default React.memo(React.forwardRef(UserWalletButton));
|