feat (WIP): join sp club

Author: nicolastmaia

src/api/index.ts

@@ -1,4 +1,7 @@
 import axios, { AxiosResponse } from "axios";
+import { ethers } from "ethers";
+import { apiv4_endpoint } from "../utils/constants";
+import { getCONET_api_health, postToEndpoint } from "../utils/utils";
 
 // Create an Axios instance with common configurations
 const api = axios.create({
@@ -43,3 +46,30 @@ export const getServerIpAddress = async (): Promise<AxiosResponse<any>> => {
     throw error;
   }
 };
+
+export const joinSpClub = async (
+  conetProfile: profile,
+  solanaProfile: profile
+) => {
+  const message = JSON.stringify({
+    walletAddress: conetProfile.keyID,
+    // solanaWallet: solanaProfile.keyID,
+  });
+
+  const wallet = new ethers.Wallet(conetProfile.privateKeyArmor);
+  const signMessage = await wallet.signMessage(message);
+
+  const sendData = {
+    message,
+    signMessage,
+  };
+
+  if (await getCONET_api_health()) {
+    const url = `${apiv4_endpoint}spclub`;
+    let result = await postToEndpoint(url, true, sendData);
+
+    return result;
+  }
+
+  return false;
+};

src/components/AccountList/SpClub.tsx

@@ -2,18 +2,38 @@ import { useState } from 'react'
 
 import "./index.css";
 import SpClubCongratsPopup from '../SpClubCongratsPopup';
+import SimpleLoadingRing from '../SimpleLoadingRing';
+import { joinSpClub } from '../../api';
+import { useDaemonContext } from '../../providers/DaemonProvider';
 
 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);
 
+  const { profiles } = useDaemonContext();
+
+  const handleJoinClub = async () => {
+    setIsLoading(true)
+
+    try {
+      const result = await joinSpClub(profiles[0], profiles[1]);
+
+      if (result !== false)
+        setIsCongratsPopupOpen(true)
+    } catch (error) {
+      console.log(error);
+    }
+
+    setTimeout(() => setIsLoading(false), 2000)
+  }
+
   return (
     <>
       <div className={`account-wrapper referral-program ${isOpen ? 'active' : ''}`}>
-        {/* <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}> */}
-        <div className="disabled account-main-card">
+        <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}>
+          {/* <div className="disabled account-main-card"> */}
           <div className="name">
             <h3>Join SP Club</h3>
             <img height='16px' width='16px' className="chevron" src="./assets/right-chevron.svg" />
@@ -41,7 +61,11 @@ export default function SpClub() {
               <p style={{ width: '100%', textAlign: 'center', fontSize: '16px' }}>Get Silent Pass Passport and join the club</p>
             </div>
 
-            <button><p>Join Club</p></button>
+            <button onClick={handleJoinClub}>
+              {isLoading ? <SimpleLoadingRing /> :
+                <p>Join Club</p>
+              }
+            </button>
           </div>
         </div>
       </div>

src/components/SimpleLoadingRing/index.tsx

@@ -0,0 +1,34 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotationClock = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const LoadingRingContainer = styled.div`
+  display: flex;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  width: 100% !important;
+`;
+
+const RotatingImage = styled.img`
+
+`;
+
+const RotationClock = styled(RotatingImage)`
+  animation: ${rotationClock} 2s infinite linear;
+`;
+
+export default function SimpleLoadingRing() {
+  return (
+    <LoadingRingContainer>
+      <RotationClock src="/assets/dentro.svg" />
+    </LoadingRingContainer>
+  );
+}

src/utils/utils.ts

@@ -1,6 +1,6 @@
 import bs58 from "bs58";
 import { Keypair } from "@solana/web3.js";
-import { XMLHttpRequestTimeout } from "./constants";
+import { apiv4_endpoint, XMLHttpRequestTimeout } from "./constants";
 import contracts from "./contracts";
 
 export const customJsonStringify = (item: any) => {
@@ -230,3 +230,12 @@ export function isValidSolanaBase58PrivateKey(base58Key: string) {
     return false;
   }
 }
+
+export const getCONET_api_health = async () => {
+  const url = `${apiv4_endpoint}health`;
+  const result: any = await postToEndpoint(url, false, null);
+  if (result?.health === true) {
+    return true;
+  }
+  return false;
+};