Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 13x 370x 370x 370x 370x 370x 5x 365x 370x 370x 370x 370x | import { Box, Skeleton, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { CaretDownIcon } from "@phosphor-icons/react";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useAppTheme } from "@theme/v2/Provider";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import useThemeSettings from "@components/EnterpriseSettings/Branding/hooks/useThemeSettings";
import { BALANCE_MAINTENANCE_TOOLTIP_MESSAGE } from "@shared/constants";
type StatsSkeletonProps = {
label: string;
flexRow?: boolean;
textAlign?: "left" | "right";
isWideView: boolean;
isMainStat?: boolean;
isAmount?: boolean;
percent?: boolean;
setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
isOpen?: boolean;
isSubStats?: boolean;
};
const StatsSkeleton = ({
label,
flexRow,
textAlign = "left",
isWideView,
isMainStat,
isAmount,
percent,
setIsOpen,
isOpen,
isSubStats,
}: StatsSkeletonProps) => {
const { isLargeView } = useCustomThemeV2();
const { bgColorHighlight } = useThemeSettings();
const theme = useAppTheme();
const getSkeletonSize = () => {
if (!isLargeView) {
return {
width: isMainStat ? 108 : 70,
height: isMainStat ? 26 : 20,
};
}
return {
width: isMainStat ? 160 : 80,
height: 40,
};
};
const { width, height } = getSkeletonSize();
const suffix = percent ? " (%)" : isAmount ? " (USD)" : "";
// ✅ Only main stats keep the ocean blue background
// Mobile expanded sub-stats and all non-main stats use the default MUI background
const skeletonBg = !isLargeView && !isMainStat ? undefined : bgColorHighlight;
return (
<Stack
spacing={1}
direction={flexRow ? "row-reverse" : "column"}
justifyContent={flexRow ? "space-between" : "flex-start"}
width={flexRow ? "100%" : "auto"}
sx={!isWideView && isSubStats ? { cursor: "pointer" } : undefined}
onClick={isSubStats ? () => setIsOpen?.((prev) => !prev) : undefined}
>
<GiveTooltip
title={BALANCE_MAINTENANCE_TOOLTIP_MESSAGE}
placement="top"
fluidWidth
>
<Box
display="flex"
alignItems="center"
justifyContent={
isMainStat
? "flex-start"
: textAlign === "right"
? "flex-end"
: "flex-start"
}
gap={1}
>
<Skeleton
variant="rounded"
width={width}
height={height}
sx={{
borderRadius: "40px",
background: skeletonBg,
}}
/>
{!isWideView && !flexRow && isSubStats && (
<CaretDownIcon
size={16}
color={theme.palette.icon?.["icon-primary"]}
style={{
flexShrink: 0,
transition: "transform 0.2s ease",
transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
}}
/>
)}
</Box>
</GiveTooltip>
<GiveText textAlign={textAlign} variant="bodyS" color="secondary">
{label}
{suffix}
</GiveText>
</Stack>
);
};
export default StatsSkeleton;
|