1  import { Box, Tooltip } from '@mui/material';
  2  import { ReactNode } from 'react';
  3  
  4  import { ListColumn, ListColumnProps } from '../../../components/lists/ListColumn';
  5  import { FormattedNumber } from '../../../components/primitives/FormattedNumber';
  6  
  7  interface ListValueColumnProps {
  8    symbol?: string;
  9    value: string | number;
 10    subValue?: string | number;
 11    withTooltip?: boolean;
 12    capsComponent?: ReactNode;
 13    disabled?: boolean;
 14    listColumnProps?: ListColumnProps;
 15  }
 16  
 17  const Content = ({
 18    value,
 19    withTooltip,
 20    subValue,
 21    disabled,
 22    capsComponent,
 23  }: ListValueColumnProps) => {
 24    return (
 25      <>
 26        <Box sx={{ display: 'flex', alignItems: 'center' }}>
 27          <FormattedNumber
 28            value={value}
 29            variant="secondary14"
 30            sx={{ mb: !withTooltip && !!subValue ? '2px' : 0 }}
 31            color={disabled ? 'text.disabled' : 'text.main'}
 32            data-cy={`nativeAmount`}
 33          />
 34          {capsComponent}
 35        </Box>
 36  
 37        {!withTooltip && !!subValue && !disabled && (
 38          <FormattedNumber
 39            value={subValue}
 40            symbol="USD"
 41            variant="secondary12"
 42            color="text.secondary"
 43          />
 44        )}
 45      </>
 46    );
 47  };
 48  
 49  export const ListValueColumn = ({
 50    symbol,
 51    value,
 52    subValue,
 53    withTooltip,
 54    capsComponent,
 55    disabled,
 56    listColumnProps = {},
 57  }: ListValueColumnProps) => {
 58    return (
 59      <ListColumn {...listColumnProps}>
 60        {withTooltip ? (
 61          <Tooltip
 62            title={
 63              <Box
 64                sx={{
 65                  display: 'flex',
 66                  flexDirection: 'column',
 67                  alignItems: 'center',
 68                  justifyContent: 'center',
 69                }}
 70              >
 71                <FormattedNumber
 72                  value={subValue || 0}
 73                  symbol="USD"
 74                  variant="secondary14"
 75                  sx={{ mb: '2px' }}
 76                  symbolsColor="common.white"
 77                  compact={false}
 78                />
 79                <FormattedNumber
 80                  value={value}
 81                  variant="secondary12"
 82                  symbol={symbol}
 83                  symbolsColor="common.white"
 84                  compact={false}
 85                />
 86              </Box>
 87            }
 88            arrow
 89            placement="top"
 90          >
 91            <Box
 92              sx={{
 93                display: 'flex',
 94                flexDirection: 'column',
 95                alignItems: 'center',
 96                justifyContent: 'center',
 97              }}
 98            >
 99              <Content
100                symbol={symbol}
101                value={value}
102                subValue={subValue}
103                capsComponent={capsComponent}
104                disabled={disabled}
105                withTooltip={withTooltip}
106              />
107            </Box>
108          </Tooltip>
109        ) : (
110          <Content
111            symbol={symbol}
112            value={value}
113            subValue={subValue}
114            capsComponent={capsComponent}
115            disabled={disabled}
116            withTooltip={withTooltip}
117          />
118        )}
119      </ListColumn>
120    );
121  };