style: sp club

Author: nicolastmaia

public/assets/clapping-hands.png

@@ -19,25 +19,15 @@ import { ethers } from 'ethers';
 import { ReactComponent as VisibilityOnIcon } from "./assets/visibility-on.svg";
 import { ReactComponent as VisibilityOffIcon } from "./assets/visibility-off.svg";
 
+const SP_EARNED_FROM_REFERRAL = 10
+
 export default function ReferralProgram() {
-  const [openAccountList, setOpenAccountList] = useState<string[]>([]);
-  const { profiles, activePassport, setProfiles, randomSolanaRPC, getAllNodes } = useDaemonContext();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const { profiles } = useDaemonContext();
 
-  const [mainAccountAddressCopied, setMainAccountAddressCopied] = useState(false);
-  const [solanaAccountAddressCopied, setSolanaAccountAddressCopied] = useState(false);
-  const [passportToChange, setPassportToChange] = useState();
-  const [isRefreshingSolanaBalances, setIsRefreshingSolanaBalances] = useState(false);
   const [isAddressHidden, setIsAddressHidden] = useState(true);
   const [copied, setCopied] = useState(false);
 
-  const { isSelectPassportPopupOpen, setIsSelectPassportPopupOpen } = useDaemonContext();
-
-  function toggleAccount(accountAddress: string) {
-    setOpenAccountList((prev) => (
-      prev.includes(accountAddress) ? prev.filter((item) => item !== accountAddress) : [...prev, accountAddress]
-    ))
-  }
-
   function handleCopy() {
     navigator.clipboard.writeText(profiles?.[0]?.keyID);
     setCopied(true)
@@ -52,8 +42,8 @@ export default function ReferralProgram() {
   }
 
   return (
-    <div className={`account-wrapper ${openAccountList.includes(profiles?.[0]?.keyID) ? 'active' : ''}`}>
-      {/* <div className="account-main-card" onClick={() => toggleAccount(profiles?.[0]?.keyID)}> */}
+    <div className={`account-wrapper ${isOpen ? 'active' : ''}`}>
+      {/* <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}> */}
       <div className="disabled account-main-card">
         <div className="name">
           <h3>Referral Program</h3>
@@ -109,13 +99,13 @@ export default function ReferralProgram() {
             <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
               <p>Referees</p>
             </div>
-            <p>{100}</p>
+            <p>{profiles?.[0]?.spClub?.referees?.length}</p>
           </div>
           <div style={{ marginLeft: '16px' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
               <p>$SP</p>
             </div>
-            <p>{100.0006453}</p>
+            <p>{(Number(profiles?.[0]?.spClub?.totalReferees) * SP_EARNED_FROM_REFERRAL) || 0}</p>
           </div>
         </div>
 
@@ -124,12 +114,11 @@ export default function ReferralProgram() {
         <div className="info-wrapper" style={{ maxHeight: '200px', overflowY: 'auto', }}>
           <p>History</p>
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', width: '100%', paddingLeft: '16px' }}>
-            {(profiles?.[0]?.silentPassPassports && profiles?.[0]?.activePassport)
-              ?
-              (
+            {profiles?.[0]?.spClub?.referees
+              ? 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: '#989899', fontWeight: 400 }}>{'0x628r9823u98u98sud9f8u'.slice(0, 5) + '...' + '0x628r9823u98u98sud9f8u'.slice(-5)}</p>
-                  <p style={{ width: 'auto', fontSize: '16px', color: '#9FBFE5FE', fontWeight: 400 }}>+ 10 $SP</p>
+                  <p style={{ width: 'auto', fontSize: '16px', color: '#989899', fontWeight: 400 }}>{referee?.slice(0, 5) + '...' + referee?.slice(-5)}</p>
+                  <p style={{ width: 'auto', fontSize: '16px', color: '#9FBFE5FE', fontWeight: 400 }}>+ {SP_EARNED_FROM_REFERRAL} $SP</p>
                 </div>
               )
               : <Skeleton width={'100%'} height={'20px'} />}

src/components/AccountList/ReferralProgram.tsx

@@ -7,6 +7,7 @@ export default function SpClub() {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [walletAddress, setWalletAddress] = useState('');
   const [isCongratsPopupOpen, setIsCongratsPopupOpen] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   return (
     <>
@@ -40,7 +41,7 @@ export default function SpClub() {
               <p style={{ width: '100%', textAlign: 'center', fontSize: '16px' }}>Get Silent Pass Passport and join the club</p>
             </div>
 
-            <button><p>Confirm</p></button>
+            <button><p>Join Club</p></button>
           </div>
         </div>
       </div>

src/components/AccountList/SpClub.tsx

@@ -18,14 +18,28 @@ const Backdrop = styled.div`
 const PopupContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 56px;
   background: #191919;
   border-radius: 16px;
-  padding: 16px;
   width: 100%;
   max-width: 380px;
 `;
 
+const PopupContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+  padding: 0 16px 16px 16px;
+  width: 100%;
+`;
+
+const CardTop = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
 const TextContent = styled.div`
   display: flex;
   flex-direction: column;
@@ -67,25 +81,34 @@ const Button = styled.button`
   background-color: #9fbfe533;
 `;
 
-const SpClubCongratsPopup = ({ setIsCongratsPopupOpen }: { setIsCongratsPopupOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
+const SP_EARNED_FROM_REFERRAL = 10
+
+const SpClubCongratsPopup = ({ setIsCongratsPopupOpen, memberId }: any) => {
 
   return (
     <Backdrop onClick={() => setIsCongratsPopupOpen(false)}>
       <PopupContainer onClick={(e) => e.stopPropagation()}>
-        <TextContent>
-          <TitleContainer>
-            <div style={{ fontSize: '32px' }}>Congratulations!</div>
-            <div style={{ fontSize: '20px', width: '300px' }}>You've earned <span style={{ color: '#9FBFE5FE', fontWeight: '700' }}>10 $SP</span> and unlocked access to the <span style={{ color: '#9FBFE5FE', fontWeight: '700' }}>$SP Club!</span></div>
-          </TitleContainer>
-          <InfoContainer>
-            <div style={{ fontSize: '16px', color: '#989899' }}>Your SP Club Member ID:</div>
-            <div style={{ fontSize: '16px' }}>#123454354</div>
-          </InfoContainer>
-        </TextContent>
+        <CardTop>
+          <img src="/assets/congrats-card-top.png" alt="congrats" style={{ width: '100%', height: '100%', borderRadius: '16px 16px 0 0' }} />
+          <img src="/assets/clapping-hands.png" alt="congrats" style={{ width: '88px', height: '88px', marginTop: '-65px' }} />
+        </CardTop>
+
+        <PopupContent>
+          <TextContent>
+            <TitleContainer>
+              <div style={{ fontSize: '32px' }}>Congratulations!</div>
+              <div style={{ fontSize: '20px', width: '300px' }}>You've earned <span style={{ color: '#9FBFE5FE', fontWeight: '700' }}>{SP_EARNED_FROM_REFERRAL} $SP</span> and unlocked access to the <span style={{ color: '#9FBFE5FE', fontWeight: '700' }}>$SP Club!</span></div>
+            </TitleContainer>
+            <InfoContainer>
+              <div style={{ fontSize: '16px', color: '#989899' }}>Your SP Club Member ID:</div>
+              <div style={{ fontSize: '16px' }}>{memberId}</div>
+            </InfoContainer>
+          </TextContent>
 
-        <ButtonsContainer>
-          <Button onClick={() => setIsCongratsPopupOpen(false)}>Close</Button>
-        </ButtonsContainer>
+          <ButtonsContainer>
+            <Button onClick={() => setIsCongratsPopupOpen(false)}>Close</Button>
+          </ButtonsContainer>
+        </PopupContent>
       </PopupContainer>
     </Backdrop>
   );

src/components/SpClubCongratsPopup/index.tsx

@@ -177,7 +177,7 @@ const Home = () => {
     let error = false;
     setErrorMessage('');
     let selectedCountryIndex = -1
-	
+
     if (power) {
       if (window?.webkit) {
         window?.webkit?.messageHandlers["stopVPN"].postMessage(null)
@@ -266,20 +266,20 @@ const Home = () => {
       const base64VPNMessage = btoa(stringifiedVPNMessageObject);
       window?.webkit?.messageHandlers["startVPN"].postMessage(base64VPNMessage)
     }
-      try {
-        await startSilentPass(startVPNMessageObject);
-      } catch (ex) {
-        // error = true
-        // setErrorMessage(GENERIC_ERROR);
-      }
+    try {
+      await startSilentPass(startVPNMessageObject);
+    } catch (ex) {
+      // error = true
+      // setErrorMessage(GENERIC_ERROR);
+    }
 
     setTimeout(() => {
       setIsConnectionLoading(false)
 
       if (!error) {
-		setPower(true);
-	  }
-        
+        setPower(true);
+      }
+
     }, 1000)
 
     return
@@ -288,7 +288,7 @@ const Home = () => {
   return (
     <>
       <Header />
-      <div className="home">
+      <div className="home" style={{ overflowX: 'hidden' }}>
         {isInitialLoading ? (
           <>
             <button

src/pages/Home/index.tsx

@@ -16,6 +16,7 @@ import { initProfileTokens } from "../utils/utils";
 import { checkCurrentRate } from "../services/passportPurchase";
 import {
   getPassportsInfoForProfile,
+  getSpClubInfo,
   getVpnTimeUsed,
   storeSystemData,
 } from "./wallets";
@@ -45,9 +46,10 @@ const listenProfileVer = async (
       setProcessingBlock(true);
 
       if (block % 10 === 0) {
-        await getProfileAssets(profiles[0], profiles[1]);
         checkCurrentRate(setMiningData);
+        await getProfileAssets(profiles[0], profiles[1]);
         await getVpnTimeUsed();
+        await getSpClubInfo(profiles[0]);
       }
 
       if (block % 2 === 0) {

src/services/listeners.ts

@@ -737,6 +737,55 @@ const refreshSolanaBalances = async (
   }
 };
 
+const getSpClubInfo = async (profile: profile) => {
+  const temp = CoNET_Data;
+
+  if (!temp) {
+    return false;
+  }
+
+  const wallet = new ethers.Wallet(profile.privateKeyArmor, conetDepinProvider);
+  const contract = new ethers.Contract(
+    contracts.SpClub.address,
+    contracts.SpClub.abi,
+    wallet
+  );
+
+  if (!profile.spClub) {
+    profile.spClub = {
+      memberId: "0",
+      referrer: "",
+      referees: [],
+      totalReferees: 0,
+    };
+  }
+
+  try {
+    const result = await contract.membership(profile.keyID);
+    profile.spClub.memberId = result;
+  } catch (error) {
+    console.log(error);
+  }
+
+  try {
+    const result = await contract.getReferrer(profile.keyID);
+    profile.spClub.referrer = result;
+  } catch (error) {
+    console.log(error);
+  }
+
+  try {
+    const result = await contract.getReferees(profile.keyID, 0);
+    profile.spClub.referees = result.referees;
+    profile.spClub.totalReferees = result._total_length;
+  } catch (error) {
+    console.log(error);
+  }
+
+  temp.profiles[0] = profile;
+  setCoNET_Data(temp);
+};
+
 export {
   createOrGetWallet,
   createGPGKey,
@@ -751,4 +800,5 @@ export {
   getVpnTimeUsed,
   getPassportsInfoForProfile,
   refreshSolanaBalances,
+  getSpClubInfo,
 };

src/services/wallets.ts

@@ -68,6 +68,7 @@ interface profile extends keyPair {
   tokens: conet_tokens;
   isNode: boolean;
   referrer: string | null | undefined;
+  spClub?: SpClub;
   data?: any;
   type?: keyPairType;
   nodeID?: number;
@@ -78,6 +79,13 @@ interface profile extends keyPair {
   silentPassPassports?: passportInfo[];
 }
 
+interface SpClub {
+  memberId: string;
+  referrer: string;
+  referees: string[];
+  totalReferees: number;
+}
+
 type encrypt_keys_object = {
   profiles: profile[];
   isReady: boolean;
@@ -149,7 +157,7 @@ interface nodeResponse {
   currentCCNTP?: string;
   minerResponseHash?: string;
   userWallets?: string[];
-  totalUsers: string
+  totalUsers: string;
   nodeWallets?: string[];
   online?: string;
 }