Merge branch 'test'

Author: nicolastmaia

package-lock.json

@@ -3,6 +3,9 @@
   "version": "2.2",
   "private": true,
   "dependencies": {
+    "@noble/ed25519": "^2.2.3",
+    "@noble/hashes": "^1.7.1",
+    "@solana/web3.js": "^1.98.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,9 +14,11 @@
     "@types/react-dom": "^18.3.1",
     "async": "^3.2.6",
     "axios": "^1.7.7",
+    "bip39": "^3.1.0",
     "blobshape": "^1.0.0",
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^6.13.4",
+    "motion": "^12.4.5",
     "openpgp": "^6.0.1",
     "pouchdb": "^9.0.0",
     "react": "^18.3.1",
@@ -56,4 +61,4 @@
     "@types/blobshape": "^1.0.3",
     "@types/node": "^22.9.3"
   }
-}
+}

package.json

@@ -18,11 +18,12 @@ import FAQ from './pages/FAQ';
 import ConfigDevice from './pages/ConfigDevice';
 import Passcode from './pages/Passcode';
 import { getServerIpAddress } from "./api";
+import { parseQueryParams } from "./utils/utils";
 
 global.Buffer = require('buffer').Buffer;
 
 function App() {
-  const { setProfile, setMiningData, allRegions, setClosestRegion, setaAllNodes, setServerIpAddress, setServerPort, _vpnTimeUsedInMin } = useDaemonContext();
+  const { setProfiles, setMiningData, allRegions, setClosestRegion, setaAllNodes, setServerIpAddress, setServerPort, _vpnTimeUsedInMin, setActivePassportUpdated } = useDaemonContext();
 
   useEffect(() => {
     const handlePassport = async () => {
@@ -36,7 +37,7 @@ function App() {
       }
 
       tmpData.profiles[0] = {
-        ...tmpData.profiles[0],
+        ...tmpData?.profiles[0],
         activeFreePassport: {
           nftID: info?.nftIDs?.[0]?.toString(),
           expires: info?.expires?.[0]?.toString(),
@@ -48,7 +49,8 @@ function App() {
 
       if (!CoNET_Data) return;
 
-      setProfile(CoNET_Data.profiles[0]);
+      setProfiles(CoNET_Data?.profiles);
+      setActivePassportUpdated(true);
     }
 
     const _getServerIpAddress = async () => {
@@ -67,8 +69,16 @@ function App() {
       const vpnTimeUsedInMin = parseInt(localStorage.getItem("vpnTimeUsedInMin") || "0");
       _vpnTimeUsedInMin.current = vpnTimeUsedInMin;
 
-      await createOrGetWallet();
-      listenProfileVer(setProfile);
+      const queryParams = parseQueryParams(window.location.search);
+      let secretPhrase: string | null = null;
+
+      if (window.location.search && queryParams) {
+        secretPhrase = queryParams.get("secretPhrase");
+        secretPhrase = secretPhrase ? secretPhrase.replaceAll("-", " ") : null;
+      }
+
+      await createOrGetWallet(secretPhrase);
+      listenProfileVer(setProfiles);
 
       if (!window?.webkit) {
         _getServerIpAddress();

public/assets/down-chevron.svg

@@ -14,7 +14,7 @@ import { getRemainingTime } from '../../utils/utils';
 
 export default function AccountList() {
   const [openAccountList, setOpenAccountList] = useState<string[]>([]);
-  const { profile } = useDaemonContext();
+  const { profiles } = useDaemonContext();
 
   function toggleAccount(accountAddress: string) {
     setOpenAccountList((prev) => (
@@ -24,8 +24,8 @@ export default function AccountList() {
 
   return (
     <div className="account-list">
-      <div className={`account-wrapper ${openAccountList.includes(profile?.keyID) ? 'active' : ''}`}>
-        <div className="account-main-card" onClick={() => toggleAccount(profile?.keyID)}>
+      <div className={`account-wrapper ${openAccountList.includes(profiles?.[0]?.keyID) ? 'active' : ''}`}>
+        <div className="account-main-card" onClick={() => toggleAccount(profiles?.[0]?.keyID)}>
           <div>
             <h3>Main Wallet</h3>
             <img className="chevron" src="./assets/right-chevron.svg" />
@@ -39,14 +39,14 @@ export default function AccountList() {
                 <ConetToken />
                 <p>$CONET</p>
               </div>
-              <p>{profile?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}</p>
+              <p>{profiles?.[0]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}</p>
             </div>
             <div>
               <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 <ConetEthToken />
                 <p>$ETH</p>
               </div>
-              <p>{profile?.tokens?.conet_eth?.balance || (0.0).toFixed(6)}</p>
+              <p>{profiles?.[0]?.tokens?.conet_eth?.balance || (0.0).toFixed(6)}</p>
             </div>
           </div>
           <Separator />
@@ -55,14 +55,14 @@ export default function AccountList() {
             <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
               <p>Freemium</p>
               {
-                profile?.activeFreePassport?.expires ?
-                  <p>{getRemainingTime(profile?.activeFreePassport?.expires)}</p>
+                profiles?.[0]?.activeFreePassport?.expires ?
+                  <p>{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}</p>
                   : <Skeleton width='50px' height='20px' />
               }
             </div>
           </div>
           <Separator />
-          <CopyAccountInfo wallet={profile} />
+          <CopyAccountInfo wallet={profiles?.[0]} />
         </div>
       </div>
 
@@ -75,8 +75,7 @@ export default function AccountList() {
       </div>
 
       <div className={`account-wrapper solana ${openAccountList.includes("123") ? 'active' : ''}`}>
-        {/* <div className="disabled account-main-card" onClick={() => toggleAccount("123")}> */}
-        <div className="disabled account-main-card">
+        <div className="account-main-card" onClick={() => toggleAccount("123")}>
           <div>
             <h3>Solana Wallet</h3>
             <img className="chevron" src="./assets/right-chevron.svg" />
@@ -91,18 +90,18 @@ export default function AccountList() {
                 <SpToken />
                 <p>$SP</p>
               </div>
-              <p>0</p>
+              <p>{profiles?.[1]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}</p>
             </div>
             <div>
               <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 <SolanaToken />
                 <p>$SOL</p>
               </div>
-              <p>0</p>
+              <p>{profiles?.[1]?.tokens?.conetDepin?.balance || (0.0).toFixed(6)}</p>
             </div>
           </div>
           <Separator />
-          <CopyAccountInfo wallet={profile} />
+          <CopyAccountInfo wallet={profiles?.[1]} />
         </div>
       </div>
     </div>

public/assets/info.svg

@@ -34,7 +34,10 @@
 }
 
 .circle.red {
-  background-color: #ff0000;
+  background-color: #b3261e;
+}
+.circle.yellow {
+  background-color: #f0b90b;
 }
 
 .miners {
@@ -48,3 +51,14 @@
   align-items: center;
   gap: 4px;
 }
+
+.passport-status {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 14px;
+  background-color: #282930;
+  border-radius: 16px;
+  cursor: pointer;
+}

public/assets/up-chevron.svg

@@ -3,24 +3,43 @@ import "./index.css";
 import { useDaemonContext } from '../../providers/DaemonProvider';
 import Skeleton from '../Skeleton';
 
+const OneDayInSeconds = 86400;
+
 const MiningStatus = () => {
-  const { miningData } = useDaemonContext();
+  const { miningData, profiles, setIsPassportInfoOpen, activePassportUpdated } = useDaemonContext();
   const [isMiningUp, setIsMiningUp] = useState<boolean>(false);
+  const [passportTimeLeft, setPassportTimeLeft] = useState<number>(0);
 
   useEffect(() => {
     if (miningData) {
       setIsMiningUp(miningData?.status === 200)
     }
-
   }, [miningData])
 
+  useEffect(() => {
+    const passportExpiration = profiles?.[0]?.activeFreePassport?.expires
+    if (passportExpiration) {
+      const timeLeft = passportExpiration - Math.floor(Date.now() / 1000)
+      setPassportTimeLeft(timeLeft)
+    }
+  }, [activePassportUpdated, profiles])
+
+  const openPassportInfo = () => {
+    setIsPassportInfoOpen(true)
+  }
+
   return (
     <div className="mining-status">
       <div className="miners">
-        <div className={`circle ${isMiningUp ? "green" : "red"}`}></div>
         Miners: {miningData?.online ? miningData.online : <Skeleton height="14px" width="45px" />}
       </div>
 
+      <div className='passport-status' onClick={openPassportInfo}>
+        <div className={`circle ${passportTimeLeft < OneDayInSeconds ? passportTimeLeft <= 0 ? "red" : "yellow" : "green"}`}></div>
+        Freemium
+        <img src="/assets/info.svg" alt="Info icon" />
+      </div>
+
       <div className="users">Users: {miningData?.totalUsers ? miningData.totalUsers : <Skeleton height="14px" width="45px" />}</div>
     </div>
   );

src/App.tsx

@@ -5,7 +5,7 @@ import Skeleton from "../Skeleton";
 
 const PassportInfo = () => {
   const navigate = useNavigate();
-  const { profile } = useDaemonContext();
+  const { profiles } = useDaemonContext();
 
   return (
     <div className="main-card">
@@ -16,8 +16,8 @@ const PassportInfo = () => {
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
         <span>Expiration date</span>
         {
-          profile?.activeFreePassport?.expires ?
-            <p>{getRemainingTime(profile?.activeFreePassport?.expires)}</p>
+          profiles?.[0]?.activeFreePassport?.expires ?
+            <p>{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}</p>
             : <Skeleton width='50px' height='20px' />
         }
       </div>