feat: spclub congrats popup

Author: nicolastmaia

package-lock.json

@@ -36,6 +36,7 @@
     "react-scripts": "5.0.1",
     "react-spring": "^9.7.4",
     "stream-http": "^3.2.0",
+    "styled-components": "^6.1.15",
     "tweetnacl": "^1.0.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -67,6 +68,7 @@
   "devDependencies": {
     "@types/async": "^3.2.24",
     "@types/blobshape": "^1.0.3",
-    "@types/node": "^22.9.3"
+    "@types/node": "^22.9.3",
+    "@types/styled-components": "^5.1.34"
   }
 }

package.json

@@ -1,45 +1,55 @@
 import { useState } from 'react'
 
 import "./index.css";
+import SpClubCongratsPopup from '../SpClubCongratsPopup';
 
 export default function SpClub() {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [walletAddress, setWalletAddress] = useState('');
+  const [isCongratsPopupOpen, setIsCongratsPopupOpen] = useState<boolean>(false);
 
   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="name">
-          <h3>Join SP Club</h3>
-          <img height='16px' width='16px' className="chevron" src="./assets/right-chevron.svg" />
-        </div>
-      </div>
-      <div className="info-card">
-        <div className="info-wrapper">
-          <div>
-            <p>Input you inviter wallet address</p>
-            <input value={walletAddress} onChange={(e) => setWalletAddress(e.target.value)} placeholder="wallet address" />
+    <>
+      <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="name">
+            <h3>Join SP Club</h3>
+            <img height='16px' width='16px' className="chevron" src="./assets/right-chevron.svg" />
           </div>
-
-          <div style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: '24px', flexDirection: 'row', alignItems: 'center' }}>
-            <div style={{ width: '100%', height: '1px', background: '#FFFFFF' }} />
-
+        </div>
+        <div className="info-card">
+          <div className="info-wrapper">
             <div>
-              <p style={{ fontSize: '20px' }}>or</p>
+              <p>Input you inviter wallet address</p>
+              <input value={walletAddress} onChange={(e) => setWalletAddress(e.target.value)} placeholder="wallet address" />
             </div>
 
-            <div style={{ width: '100%', height: '1px', background: '#FFFFFF' }} />
+            <div style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: '24px', flexDirection: 'row', alignItems: 'center' }}>
+              <div style={{ width: '100%', height: '1px', background: '#FFFFFF' }} />
 
-          </div>
+              <div>
+                <p style={{ fontSize: '20px' }}>or</p>
+              </div>
 
-          <div style={{ width: '100%' }}>
-            <p style={{ width: '100%', textAlign: 'center', fontSize: '16px' }}>Get Silent Pass Passport and join the club</p>
-          </div>
+              <div style={{ width: '100%', height: '1px', background: '#FFFFFF' }} />
 
-          <button><p>Confirm</p></button>
+            </div>
+
+            <div style={{ width: '100%' }}>
+              <p style={{ width: '100%', textAlign: 'center', fontSize: '16px' }}>Get Silent Pass Passport and join the club</p>
+            </div>
+
+            <button><p>Confirm</p></button>
+          </div>
         </div>
       </div>
-    </div>
+
+      {
+        isCongratsPopupOpen && (
+          <SpClubCongratsPopup setIsCongratsPopupOpen={setIsCongratsPopupOpen} />
+        )
+      }
+    </>
   )
 }