OCT-1762: UI does not show delegated state properly (#328)

Author: aziolek

client/src/components/Settings/SettingsUniquenessScoreAddresses/SettingsUniquenessScoreAddresses.tsx

@@ -5,7 +5,9 @@ import { useTranslation } from 'react-i18next';
 import { useAccount } from 'wagmi';
 
 import Identicon from 'components/ui/Identicon';
+import Svg from 'components/ui/Svg';
 import useSettingsStore from 'store/settings/store';
+import { octant } from 'svg/logo';
 import truncateEthAddress from 'utils/truncateEthAddress';
 
 import styles from './SettingsUniquenessScoreAddresses.module.scss';
@@ -34,7 +36,8 @@ const SettingsUniquenessScoreAddresses: FC<SettingsUniquenessScoreAddressesProps
   }));
 
   const addresses =
-    isDelegationCompleted && delegationPrimaryAddress && delegationSecondaryAddress
+    (isDelegationCompleted && delegationPrimaryAddress && delegationSecondaryAddress) ||
+    (delegationPrimaryAddress && delegationSecondaryAddress === '0x???')
       ? [delegationPrimaryAddress, delegationSecondaryAddress]
       : [accountAddress];
 
@@ -66,7 +69,11 @@ const SettingsUniquenessScoreAddresses: FC<SettingsUniquenessScoreAddressesProps
       <div className={styles.avatarsGroup}>
         {addresses.map(address => (
           <div key={address} className={styles.addressAvatar}>
-            <Identicon className={styles.avatar} username={address} />
+            {address === '0x???' ? (
+              <Svg img={octant} size={1.4} />
+            ) : (
+              <Identicon className={styles.avatar} username={address} />
+            )}
           </div>
         ))}
       </div>

client/src/components/Settings/SettingsUniquenessScoreBox/SettingsUniquenessScoreBox.tsx

@@ -86,12 +86,17 @@ const SettingsUniquenessScoreBox = (): ReactNode => {
   } = useRefreshAntisybilStatus();
 
   const { data: antisybilStatusScore, isSuccess: isSuccessAntisybilStatusScore } =
-    useAntisybilStatusScore(isDelegationCompleted ? delegationSecondaryAddress! : address!, {
-      enabled:
-        isSuccessRefreshAntisybilStatus ||
-        (refreshAntisybilStatusError as null | { message: string })?.message ===
-          'Address is already used for delegation',
-    });
+    useAntisybilStatusScore(
+      isDelegationCompleted && delegationSecondaryAddress !== '0x???'
+        ? delegationSecondaryAddress!
+        : address!,
+      {
+        enabled:
+          isSuccessRefreshAntisybilStatus ||
+          (refreshAntisybilStatusError as null | { message: string })?.message ===
+            'Address is already used for delegation',
+      },
+    );
 
   const checkDelegation = async () => {
     if (!isUserTOSAccepted) {
@@ -139,6 +144,10 @@ const SettingsUniquenessScoreBox = (): ReactNode => {
     if (isDelegationCompleted) {
       setSecondaryAddressScore(antisybilStatusScore);
     } else {
+      if (refreshAntisybilStatusError) {
+        setDelegationPrimaryAddress(address);
+        setDelegationSecondaryAddress('0x???');
+      }
       setPrimaryAddressScore(
         antisybilStatusScore < DELEGATION_MIN_SCORE && uqScore === 100n
           ? DELEGATION_MIN_SCORE
@@ -147,7 +156,7 @@ const SettingsUniquenessScoreBox = (): ReactNode => {
     }
     setIsFetchingScore(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSuccessAntisybilStatusScore, isFetchingUqScore]);
+  }, [isSuccessAntisybilStatusScore, isFetchingUqScore, refreshAntisybilStatusError]);
 
   useEffect(() => {
     if (
@@ -208,7 +217,12 @@ const SettingsUniquenessScoreBox = (): ReactNode => {
         <div className={styles.buttonsWrapper}>
           <Button
             className={styles.button}
-            isDisabled={isDelegationCompleted || isFetchingScore || isFetchingUqScore}
+            isDisabled={
+              isDelegationCompleted ||
+              isFetchingScore ||
+              isFetchingUqScore ||
+              delegationSecondaryAddress === '0x???'
+            }
             isHigh
             onClick={() => setIisRecalculatingScoreModalOpen(true)}
             variant="cta"
@@ -224,7 +238,8 @@ const SettingsUniquenessScoreBox = (): ReactNode => {
               primaryAddressScore === undefined ||
               primaryAddressScore >= 20 ||
               isFetchingUqScore ||
-              uqScore === 100n
+              uqScore === 100n ||
+              delegationSecondaryAddress === '0x???'
             }
             isHigh
             onClick={() => {