Merge pull request #120 from lidofinance/develop

Merge into main from develop

Author: AnnaSila

features/vesting/hooks.ts

@@ -289,15 +289,12 @@ export const useSnapshotDelegate = (escrow: string | undefined) => {
 
 export const useSnapshotDelegateAddress = (escrow = AddressZero) => {
   const { contractRpc } = useSnapshotDelegationContract();
-  const { chainId } = useWeb3();
 
   return useSWR(`snapshot-delegate-${escrow}`, () =>
-    chainId === CHAINS.Holesky
-      ? AddressZero
-      : contractRpc.delegation(
-          escrow,
-          '0x0000000000000000000000000000000000000000000000000000000000000000',
-        ),
+    contractRpc.delegation(
+      escrow,
+      '0x0000000000000000000000000000000000000000000000000000000000000000',
+    ),
   );
 };
 

features/vesting/vestingDelegateBadge.tsx

@@ -0,0 +1,39 @@
+import { FC, memo } from 'react';
+import { AddressZero } from '@ethersproject/constants';
+
+import { encodeAddress, useENS } from '../addressModal';
+import { useModal } from '../walletModal';
+import { InlineLoader } from '@lidofinance/lido-ui';
+import { Badge, BadgeContainer } from './vestingSlideStyles';
+
+type Props = {
+  delegateAddress: string | undefined;
+};
+
+export const VestingDelegateBadge: FC<Props> = memo(({ delegateAddress }) => {
+  const { data: ensName, isLoading } = useENS(delegateAddress);
+
+  const delegateNameToShow = ensName ?? delegateAddress;
+
+  const { openModal } = useModal(encodeAddress(delegateAddress, 'delegate'));
+
+  if (isLoading) {
+    return <InlineLoader />;
+  }
+
+  if (!delegateAddress || delegateAddress === AddressZero) {
+    return <>Not delegated</>;
+  }
+
+  return (
+    <BadgeContainer>
+      <Badge
+        address={delegateNameToShow}
+        title={delegateNameToShow}
+        onClick={openModal}
+      />
+    </BadgeContainer>
+  );
+});
+
+VestingDelegateBadge.displayName = 'VestingDelegateBadge';

features/vesting/vestingSummarySlide.tsx

@@ -19,14 +19,11 @@ import {
   BadgeContainer,
   Row,
   VestingSlide,
-  EnsName,
 } from './vestingSlideStyles';
 import { BigNumber } from 'ethers';
-import { AddressZero } from '@ethersproject/constants';
 import { useModal } from '../walletModal';
 import { encodeAddress } from '../addressModal';
-import { useENS } from '../addressModal';
-import { InlineLoader } from '@lidofinance/lido-ui';
+import { VestingDelegateBadge } from './vestingDelegateBadge';
 
 export type VestingSummarySlideProps = {
   title?: string;
@@ -47,12 +44,11 @@ export const VestingSummarySlide: FC<VestingSummarySlideProps> = memo(
       useAragonDelegateAddress(vesting?.escrow);
     const { data: snapshotDelegate, isLoading: snapshotDelegateIsLoading } =
       useSnapshotDelegateAddress(vesting?.escrow);
-    const { data: ensName, isLoading: ensNameIsLoading } =
-      useENS(aragonDelegate);
+
+    const delegateAddress =
+      showDelegation === 'snapshot' ? snapshotDelegate : aragonDelegate;
+
     const { data: token, isLoading: tokenIsLoading } = useVestingToken();
-    const { openModal: openDelegateModal } = useModal(
-      encodeAddress(aragonDelegate, 'delegate'),
-    );
     const { openModal: openEscrowModal } = useModal(
       encodeAddress(vesting?.escrow, 'trp'),
     );
@@ -66,9 +62,6 @@ export const VestingSummarySlide: FC<VestingSummarySlideProps> = memo(
       return null;
     }
 
-    const delegate =
-      showDelegation === 'snapshot' ? snapshotDelegate : aragonDelegate;
-
     if (
       unclaimedIsLoading ||
       lockedIsLoading ||
@@ -128,23 +121,7 @@ export const VestingSummarySlide: FC<VestingSummarySlideProps> = memo(
                 <DetailsHeader>Delegated to</DetailsHeader>
               </Column>
               <Column style={{ textAlign: 'right' }}>
-                {delegate === AddressZero ? (
-                  'Not delegated'
-                ) : (
-                  <BadgeContainer>
-                    {ensNameIsLoading ? (
-                      <InlineLoader />
-                    ) : !ensName ? (
-                      <Badge
-                        address={delegate}
-                        title={delegate}
-                        onClick={openDelegateModal}
-                      />
-                    ) : (
-                      <EnsName onClick={openDelegateModal}>{ensName}</EnsName>
-                    )}
-                  </BadgeContainer>
-                )}
+                <VestingDelegateBadge delegateAddress={delegateAddress} />
               </Column>
             </Row>
           )}