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]>
87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import { Skeleton } from '@luxfi/ui/skeleton';
|
|
import { Tooltip } from '@luxfi/ui/tooltip';
|
|
import type BigNumber from 'bignumber.js';
|
|
import React from 'react';
|
|
|
|
import { resolveColorToken } from 'lib/utils/colorToken';
|
|
import CopyToClipboard from 'ui/shared/CopyToClipboard';
|
|
|
|
import { DEFAULT_ACCURACY, formatBnValue } from './utils';
|
|
|
|
const TOOLTIP_CONTENT_PROPS = { className: 'max-w-[calc(100vw-8px)] lg:max-w-[400px]' };
|
|
|
|
export interface Props {
|
|
className?: string;
|
|
color?: string;
|
|
value: BigNumber;
|
|
accuracy?: number;
|
|
prefix?: string;
|
|
postfix?: string;
|
|
startElement?: React.ReactNode;
|
|
endElement?: React.ReactNode;
|
|
tooltipContent?: React.ReactNode;
|
|
noTooltip?: boolean;
|
|
loading?: boolean;
|
|
overflowed?: boolean;
|
|
tooltipContentBefore?: React.ReactNode;
|
|
// Legacy style-prop shims
|
|
fontSize?: string;
|
|
lineHeight?: string;
|
|
maxW?: string;
|
|
}
|
|
|
|
const SimpleValue = ({
|
|
value,
|
|
accuracy = DEFAULT_ACCURACY,
|
|
prefix,
|
|
postfix,
|
|
startElement,
|
|
endElement,
|
|
tooltipContent: tooltipContentProp,
|
|
tooltipContentBefore,
|
|
noTooltip,
|
|
loading,
|
|
overflowed,
|
|
color,
|
|
...rest
|
|
}: Props) => {
|
|
|
|
const tooltipContent = React.useMemo(() => {
|
|
return (
|
|
<>
|
|
{ tooltipContentBefore }
|
|
<span className="inline whitespace-normal break-all">
|
|
{ prefix ?? '' }{ value.toFormat() }{ postfix ?? '' }
|
|
<CopyToClipboard text={ value.toFixed() } className="align-bottom" noTooltip/>
|
|
</span>
|
|
</>
|
|
);
|
|
}, [ postfix, prefix, value, tooltipContentBefore ]);
|
|
|
|
return (
|
|
<Skeleton
|
|
loading={ loading }
|
|
display="inline-flex"
|
|
alignItems="center"
|
|
color={ resolveColorToken(color) }
|
|
className="whitespace-pre max-w-full overflow-hidden"
|
|
{ ...rest }
|
|
>
|
|
{ startElement }
|
|
<Tooltip
|
|
content={ tooltipContentProp ?? tooltipContent }
|
|
contentProps={ TOOLTIP_CONTENT_PROPS }
|
|
disabled={ noTooltip }
|
|
interactive
|
|
>
|
|
<span className="inline-block max-w-full overflow-hidden text-ellipsis">
|
|
{ formatBnValue({ value, accuracy, prefix, postfix, overflowed }) }
|
|
</span>
|
|
</Tooltip>
|
|
{ typeof endElement === 'string' ? <span>{ endElement }</span> : endElement }
|
|
</Skeleton>
|
|
);
|
|
};
|
|
|
|
export default React.memo(SimpleValue);
|