Merge pull request #48 from lidofinance/fix/general-info

refactor: add AddressWithPopover in overview; add color in for health…

Author: DiRaiks

features/create-vault/create-vault-form/permissions/address-list/address-item/address-item.tsx

@@ -24,6 +24,7 @@ export interface AddressItemProps {
   field: PermissionField;
 }
 
+// TODO: use shared/components/AddressWithPopover component
 export const AddressItem: FC<AddressItemProps> = ({
   index,
   permission,

features/overview/components/balance/balance.tsx

@@ -11,7 +11,7 @@ const sectionPayloadList: SectionPayload[] = [
   {
     title: 'Idle capital',
     key: 'balanceEth',
-    actionText: 'Deposit to validators',
+    actionText: 'Supply ETH',
     actionLink: '/supply/fund',
   },
   // TODO: add this after the metrics are implemented

features/overview/components/capacity/capacity.tsx

@@ -16,20 +16,38 @@ const sectionPayloadList: SectionPayload[] = [
   },
 ];
 
+const getUtilizationRatioColor = (utilizationRatio: string) => {
+  if (!utilizationRatio) return '';
+  const utilizationRatioNumber = Number(utilizationRatio.split('%')[0]);
+
+  if (utilizationRatioNumber < 90) return '#53BA95';
+  if (utilizationRatioNumber < 100) return '#ffbf00';
+  if (utilizationRatioNumber === 100) return '#E14D4D';
+  if (utilizationRatioNumber > 100) return 'darkRed';
+};
+
 export const Capacity = () => {
   const { getVaultDataToRender } = useVaultOverview();
   const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection title="stETH capacity utilization">
-      {renderData.map((item) => (
-        <OverviewItem
-          key={item.title}
-          title={item.title}
-          content={item.payload}
-          isLoading={item.isLoading}
-        />
-      ))}
+      {renderData.map((item) => {
+        const isUtilizationRatio = item.key === 'utilizationRatio';
+        const color = isUtilizationRatio
+          ? getUtilizationRatioColor(item.payload)
+          : undefined;
+
+        return (
+          <OverviewItem
+            key={item.title}
+            title={item.title}
+            content={item.payload}
+            isLoading={item.isLoading}
+            color={color}
+          />
+        );
+      })}
     </OverviewSection>
   );
 };

features/overview/components/general/address-section/address-section.tsx

@@ -1,6 +1,6 @@
 import { useVaultOverview } from 'features/overview/contexts';
 
-import { AddressBadge } from 'shared/components';
+import { AddressWithPopover } from 'shared/components';
 import { Text } from '@lidofinance/lido-ui';
 import { NodeOperator, Title, Wrapper } from './styles';
 
@@ -11,14 +11,14 @@ export const AddressSection = () => {
 
   return (
     <Wrapper>
-      <AddressBadge size="lg" address={address} />
+      <AddressWithPopover size="lg" address={address} />
       <NodeOperator>
         <Title>
           <Text color="secondary" size="xxs">
             Node operator
           </Text>
         </Title>
-        <AddressBadge weight={400} address={nodeOperator} />
+        <AddressWithPopover weight={400} address={nodeOperator} />
       </NodeOperator>
     </Wrapper>
   );

features/overview/components/health/heath.tsx

@@ -20,20 +20,37 @@ const sectionPayloadList: SectionPayload[] = [
   },
 ];
 
+const getHealthFactorColor = (healthFactor: string) => {
+  if (!healthFactor) return '';
+  const healthFactorNumber = Number(healthFactor.split('%')[0]);
+  if (healthFactorNumber >= 125) return '#53BA95 ';
+  if (healthFactorNumber >= 105) return '#ffbf00';
+  if (healthFactorNumber >= 100) return '#E14D4D';
+  return 'darkRed';
+};
+
 export const Health = () => {
   const { getVaultDataToRender } = useVaultOverview();
   const renderData = getVaultDataToRender(sectionPayloadList);
 
   return (
     <OverviewSection title="Vault health" titleTooltip="Lorem Ipsum">
-      {renderData.map((item) => (
-        <OverviewItem
-          key={item.title}
-          title={item.title}
-          content={item.payload}
-          isLoading={item.isLoading}
-        />
-      ))}
+      {renderData.map((item) => {
+        const isHealthy = item.key === 'healthFactor';
+        const color = isHealthy
+          ? getHealthFactorColor(item.payload)
+          : undefined;
+
+        return (
+          <OverviewItem
+            key={item.title}
+            title={item.title}
+            content={item.payload}
+            isLoading={item.isLoading}
+            color={color}
+          />
+        );
+      })}
     </OverviewSection>
   );
 };

features/overview/shared/overview-item/overview-item-value.tsx

@@ -6,12 +6,11 @@ import { LoaderWrapper, ValueWrapper } from './styles';
 export interface ItemValueProps {
   content: string | number | undefined;
   isLoading?: boolean;
-  isSuccess?: boolean;
+  color?: string;
 }
 
 export const OverviewItemValue: FC<ItemValueProps> = (props) => {
-  const { content, isSuccess, isLoading } = props;
-  const contentColor = isSuccess ? 'success' : 'default';
+  const { content, isLoading, color } = props;
 
   return (
     <>
@@ -21,7 +20,7 @@ export const OverviewItemValue: FC<ItemValueProps> = (props) => {
         </LoaderWrapper>
       ) : (
         <ValueWrapper>
-          <Text size="lg" color={contentColor} strong>
+          <Text size="lg" style={{ color }} strong>
             {content ?? '-'}
           </Text>
         </ValueWrapper>

features/overview/shared/overview-item/overview-item.tsx

@@ -12,15 +12,14 @@ export interface ItemProps {
   content: string | number | undefined;
   actionLink?: string;
   actionText?: string;
-  isSuccess?: boolean;
   isLoading?: boolean;
+  color?: string;
 }
 
 export const OverviewItem: FC<ItemProps> = (props) => {
   const router = useRouter();
   const { activeVault } = useVaultInfo();
-  const { title, content, isSuccess, actionLink, actionText, isLoading } =
-    props;
+  const { title, content, actionLink, actionText, isLoading, color } = props;
 
   return (
     <ItemWrapper>
@@ -32,7 +31,7 @@ export const OverviewItem: FC<ItemProps> = (props) => {
       <OverviewItemValue
         content={content}
         isLoading={isLoading}
-        isSuccess={isSuccess}
+        color={color}
       />
       {!!actionLink && !!actionText && (
         <Button

features/settings/permissions/components/address-list/address-item/address-item.tsx

@@ -23,6 +23,7 @@ export type AddressItemProps = {
   readonly?: boolean;
 };
 
+// TODO: use shared/components/AddressWithPopover component
 export const AddressItem: FC<AddressItemProps> = ({
   index,
   field,

shared/components/address-badge/styles.ts

@@ -84,6 +84,7 @@ export const PillContainer = styled.div<PillProps>`
   background-color: ${getBgColor};
   white-space: nowrap;
   text-wrap: nowrap;
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
 `;
 
 export const AddressText = styled(Address)<InjectedProps>`

shared/components/address-with-popover/address-with-popover.tsx

@@ -0,0 +1,86 @@
+import { FC, useState, useRef, MouseEvent } from 'react';
+
+import { Copy, External, ToastSuccess } from '@lidofinance/lido-ui';
+import {
+  AddressBadge,
+  AddressBadgeProps,
+  AddressLinkEtherscan,
+  ButtonLink,
+} from 'shared/components';
+
+import {
+  ActionGroup,
+  ActionWrapper,
+  PopoverContent,
+  PopoverWrapper,
+} from './styles';
+
+import { truncateAddress } from 'utils/truncate-address';
+import { Address } from 'viem';
+
+export const AddressWithPopover: FC<AddressBadgeProps> = (props) => {
+  const { address, onToggle, onClick, bgColor, crossedText } = props;
+  const [showPopover, showPopoverVisibility] = useState(false);
+  const badgeRef = useRef<HTMLDivElement>(null);
+
+  const handleShowPopover = () => {
+    showPopoverVisibility(true);
+  };
+
+  const handleCopyLink = () => {
+    if (!address) return;
+    void navigator.clipboard.writeText(address);
+    ToastSuccess(`Address ${truncateAddress({ address })} have been copied`);
+  };
+
+  const handleClosePopover = () => {
+    showPopoverVisibility(false);
+  };
+
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+    handleShowPopover();
+    onClick?.(event);
+  };
+
+  return (
+    <>
+      <AddressBadge
+        ref={badgeRef}
+        crossedText={crossedText}
+        bgColor={bgColor}
+        address={address}
+        isActive={showPopover}
+        onToggle={onToggle}
+        onClick={handleClick}
+      />
+      {!!badgeRef?.current && (
+        <PopoverWrapper
+          anchorRef={{
+            current: badgeRef.current,
+          }}
+          backdrop
+          offset="xs"
+          onClose={handleClosePopover}
+          placement="topLeft"
+          open={showPopover}
+        >
+          <PopoverContent>
+            <AddressBadge address={address} symbols={21} />
+            <ActionGroup>
+              <ActionWrapper>
+                <Copy fill="var(--lido-color-primary)" />
+                <ButtonLink onClick={handleCopyLink}>Copy address</ButtonLink>
+              </ActionWrapper>
+              <ActionWrapper>
+                <External fill="var(--lido-color-primary)" />
+                {address && (
+                  <AddressLinkEtherscan address={address as Address} />
+                )}
+              </ActionWrapper>
+            </ActionGroup>
+          </PopoverContent>
+        </PopoverWrapper>
+      )}
+    </>
+  );
+};