fix: show referees

Author: nicolastmaia

src/components/AccountList/ReferralProgram.tsx

@@ -18,6 +18,7 @@ import { ethers } from 'ethers';
 
 import { ReactComponent as VisibilityOnIcon } from "./assets/visibility-on.svg";
 import { ReactComponent as VisibilityOffIcon } from "./assets/visibility-off.svg";
+import { getPassportTitle } from '../../utils/utils';
 
 const SP_EARNED_FROM_REFERRAL = 10
 
@@ -42,7 +43,7 @@ export default function ReferralProgram() {
   }
 
   return (
-    <div className={`account-wrapper ${isOpen ? 'active' : ''}`}>
+    <div className={`account-wrapper fit-content ${isOpen ? 'active' : ''}`}>
       <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}>
         {/* <div className="disabled account-main-card"> */}
         <div className="name">
@@ -116,11 +117,11 @@ export default function ReferralProgram() {
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', width: '100%', paddingLeft: '16px' }}>
             {profiles?.[0]?.spClub
               ?
-              profiles.spClub?.totalReferees > 0 ?
+              profiles?.[0].spClub?.totalReferees > 0 ?
                 profiles?.[0]?.spClub.referees?.map((referee: any) =>
                   <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%', gap: '8px' }}>
-                    <p style={{ width: 'auto', fontSize: '16px', color: '#FFFFFF', fontWeight: 400 }}>{referee.activePlan}</p>
-                    <p style={{ width: 'auto', fontSize: '16px', color: '#989899', fontWeight: 400 }}>{referee.walletAddress?.slice(0, 5) + '...' + referee?.slice(-5)}</p>
+                    <p style={{ width: 'auto', fontSize: '16px', color: '#FFFFFF', fontWeight: 400 }}>{getPassportTitle(referee?.activePassport)}</p>
+                    <p style={{ width: 'auto', fontSize: '16px', color: '#989899', fontWeight: 400 }}>{referee?.walletAddress?.slice(0, 5) + '...' + referee?.walletAddress?.slice(-5)}</p>
                   </div>
                 ) :
                 <p>No invitees</p>

src/components/AccountList/SpClub.tsx

@@ -65,7 +65,7 @@ export default function SpClub() {
           </div>
 
           {
-            profiles?.[0]?.spClub?.referrer &&
+            profiles?.[0]?.spClub?.referrer && profiles?.[0]?.spClub?.referrer?.toString() !== '' &&
             <div>
               <p style={{ fontSize: '14px', color: '#FFFFFF' }}>Inviter</p>
               <p style={{ fontSize: '16px', color: '#989899' }}>{profiles?.[0]?.spClub?.referrer?.toString().slice(0, 5) + '...' + profiles?.[0]?.spClub?.referrer?.toString().slice(-5)}</p>
@@ -116,7 +116,7 @@ export default function SpClub() {
 
   return (
     <>
-      <div className={`account-wrapper referral-program ${isOpen ? 'active' : ''}`}>
+      <div className={`account-wrapper referral-program fit-content ${isOpen ? 'active' : ''}`} >
         <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}>
           {/* <div className="disabled account-main-card"> */}
           <div className="name">

src/components/AccountList/index.css

@@ -41,7 +41,7 @@
 }
 
 .referral-program.account-wrapper.active {
-  height: 340px;
+  height: fit-content;
 }
 
 .account-wrapper.active .account-main-card {
@@ -233,6 +233,10 @@
   gap: 4px;
 }
 
+.fit-content.account-wrapper.active {
+  height: fit-content !important;
+}
+
 .referral-program .info-wrapper {
   display: flex;
   flex-direction: column;

src/services/wallets.ts

@@ -789,7 +789,8 @@ const getSpClubInfo = async (profile: profile) => {
 
     try {
       const refereesResult = await contract.getReferees(profile.keyID, 0);
-      profile.spClub.totalReferees = refereesResult._total_length;
+      profile.spClub.totalReferees = Number(refereesResult._total_length);
+      profile.spClub.referees = [];
 
       if (
         refereesResult?.referees?.length > 0 &&
@@ -798,28 +799,30 @@ const getSpClubInfo = async (profile: profile) => {
       )
         profile.spClub.totalReferees = 0;
 
-      refereesResult.referees
-        .filter(
-          (referee: string) =>
-            referee !== "0x0000000000000000000000000000000000000000"
-        )
-        .forEach(async (referee: string) => {
-          const _activePassport = await getCurrentPassportInfo(referee);
-
-          const activePassport = {
-            nftID: _activePassport?.nftIDs?.toString(),
-            expires: _activePassport?.expires?.toString(),
-            expiresDays: _activePassport?.expiresDays?.toString(),
-            premium: _activePassport?.premium,
-          };
-
-          const _referee = {
-            walletAddress: referee,
-            activePassport: activePassport,
-          };
-
-          profile.spClub?.referees.push(_referee);
-        });
+      const validReferees = refereesResult.referees.filter(
+        (referee: string) =>
+          referee !== "0x0000000000000000000000000000000000000000"
+      );
+
+      // Use map to handle async operations
+      const refereePromises = validReferees.map(async (referee: string) => {
+        const _activePassport = await getCurrentPassportInfo(referee);
+
+        const activePassport = {
+          nftID: _activePassport?.nftIDs?.toString(),
+          expires: _activePassport?.expires?.toString(),
+          expiresDays: _activePassport?.expiresDays?.toString(),
+          premium: _activePassport?.premium,
+        };
+
+        return {
+          walletAddress: referee,
+          activePassport: activePassport,
+        };
+      });
+
+      // Wait for all promises to resolve
+      profile.spClub.referees = await Promise.all(refereePromises);
     } catch (error) {
       console.log(error);
     }