mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
ebbee2ba57
* Support redirect to a correct view from search * show domains on address page * migrate to new API version to display address domains * another api update * new design for chain widget on home page + tests * chain widget styles for mobile devices * ecosystems page * update types * add ecosystems to navigation * address portfolio: pt.1 * portfolio tokens list * filter portfolio by chain * skip redirect when navigating to search result by clicking on "show all results" link * net worth block design * add filter input to chain select and fix tokens table * calculate address portfolio * adjust card logic * support custom token types in multichain explorer * handle case when new worth is 0 * add text filter to tokens list * fixes * demo envs * portfolio tests * ecosystems test * change signature for getTokenTypes function * fix adding token to the wallet from the list * lazy load all address domains * show contract creator and implementations info * fix tests * add poor reputation tokens toggle * tweaks * dim celo native tokens * disable env validator * fix tests * remove tokens with 0 usd value from top tokens * fixes * preserve selected chain when switching tabs on address page * add hints to stats widgets on home page * update envs for demo * fix portfolio cards and home page * update styles for contract creator and implementations * fix select issues * add chains from cluster to network menu * hide csv export link on empty logs page * update screenshots * rollback select fix * update cut length calculation for portfolio cards * fix chain select * update screenshots * fix tests * more fixes * add sorting to ecosystems table * fix test * fixes * fix loading state in ecosystems page * review fixes * fix tests
134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
import { Box, Flex, Text, chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { Route } from 'nextjs-routes';
|
|
import { route } from 'nextjs-routes';
|
|
|
|
import { Link } from 'toolkit/chakra/link';
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import { Hint } from 'toolkit/components/Hint/Hint';
|
|
import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
|
|
import IconSvg, { type IconName } from 'ui/shared/IconSvg';
|
|
|
|
export type Props = {
|
|
className?: string;
|
|
label: string;
|
|
value: string | React.ReactNode;
|
|
valuePrefix?: string;
|
|
valuePostfix?: string;
|
|
hint?: string | React.ReactNode;
|
|
isLoading?: boolean;
|
|
diff?: string | number;
|
|
diffFormatted?: string;
|
|
diffPeriod?: '24h';
|
|
period?: '1h' | '24h' | '30min';
|
|
href?: Route;
|
|
icon?: IconName;
|
|
isFallback?: boolean;
|
|
};
|
|
|
|
const Container = ({ href, children, className }: { href?: Route; children: React.JSX.Element; className?: string }) => {
|
|
if (href) {
|
|
return (
|
|
<Link href={ route(href) } variant="plain" className={ className }>
|
|
{ children }
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return children;
|
|
};
|
|
|
|
const StatsWidget = ({
|
|
className,
|
|
icon,
|
|
label,
|
|
value,
|
|
valuePrefix,
|
|
valuePostfix,
|
|
isLoading,
|
|
hint,
|
|
diff,
|
|
diffPeriod = '24h',
|
|
diffFormatted,
|
|
period,
|
|
href,
|
|
isFallback,
|
|
}: Props) => {
|
|
return (
|
|
<Container href={ !isLoading ? href : undefined } className={ href ? className : undefined }>
|
|
<Flex
|
|
className={ href ? undefined : className }
|
|
alignItems="center"
|
|
bgColor={ isLoading ? { _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' } : { _light: 'theme.stats.bg._light', _dark: 'theme.stats.bg._dark' } }
|
|
p={ 3 }
|
|
borderRadius="base"
|
|
justifyContent="space-between"
|
|
columnGap={ 2 }
|
|
w="100%"
|
|
h="100%"
|
|
>
|
|
{ icon && (
|
|
<IconSvg
|
|
name={ icon }
|
|
p={ 2 }
|
|
boxSize="40px"
|
|
isLoading={ isLoading }
|
|
borderRadius="base"
|
|
display={{ base: 'none', lg: 'block' }}
|
|
flexShrink={ 0 }
|
|
opacity={ isFallback && !isLoading ? 'control.disabled' : 1 }
|
|
/>
|
|
) }
|
|
<Box
|
|
w={{
|
|
base: `calc(100% - ${ hint ? '24px' : '0px' })`,
|
|
lg: `calc(100% - ${ icon ? '48px' : '0px' } - ${ hint ? '24px' : '0px' })`,
|
|
}}
|
|
>
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
color="text.secondary"
|
|
textStyle="xs"
|
|
w="fit-content"
|
|
>
|
|
<h2>{ label }</h2>
|
|
</Skeleton>
|
|
<Skeleton
|
|
loading={ isLoading }
|
|
display="flex"
|
|
alignItems="baseline"
|
|
fontWeight={ 500 }
|
|
textStyle="heading.md"
|
|
opacity={ isFallback && !isLoading ? 'control.disabled' : 1 }
|
|
>
|
|
{ valuePrefix && <chakra.span whiteSpace="pre">{ valuePrefix }</chakra.span> }
|
|
{ typeof value === 'string' ? (
|
|
<TruncatedText text={ value } loading={ isLoading }/>
|
|
) : (
|
|
value
|
|
) }
|
|
{ valuePostfix && <chakra.span whiteSpace="pre">{ valuePostfix }</chakra.span> }
|
|
{ diff && Number(diff) > 0 && (
|
|
<>
|
|
<Text ml={ 2 } mr={ 1 } color="green.500">
|
|
+{ diffFormatted || Number(diff).toLocaleString() }
|
|
</Text>
|
|
<Text color="text.secondary" textStyle="sm">({ diffPeriod })</Text>
|
|
</>
|
|
) }
|
|
{ period && <Text color="text.secondary" textStyle="xs" fontWeight={ 400 } ml={ 1 }>({ period })</Text> }
|
|
</Skeleton>
|
|
</Box>
|
|
{ typeof hint === 'string' ? (
|
|
<Skeleton loading={ isLoading } alignSelf="center" borderRadius="base" flexShrink={ 0 }>
|
|
<Hint label={ hint } boxSize={ 5 } color="icon.secondary"/>
|
|
</Skeleton>
|
|
) : hint }
|
|
</Flex>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default chakra(StatsWidget);
|