CoNET-project · CoNETProject · Feb 18, 2025 · Feb 17, 2025 · Feb 17, 2025 · Feb 17, 2025
diff --git a/public/index.html b/public/index.html
@@ -22,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Silent Pass VPN</title>
+  <title>Silent Pass</title>
 </head>
 
 <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -17,11 +17,12 @@ import Support from './pages/Support';
 import FAQ from './pages/FAQ';
 import ConfigDevice from './pages/ConfigDevice';
 import Passcode from './pages/Passcode';
+import { getServerIpAddress } from "./api";
 
 global.Buffer = require('buffer').Buffer;
 
 function App() {
-  const { setProfile, setMiningData, allRegions, setClosestRegion, setaAllNodes } = useDaemonContext();
+  const { setProfile, setMiningData, allRegions, setClosestRegion, setaAllNodes, setServerIpAddress, setServerPort, _vpnTimeUsedInMin } = useDaemonContext();
 
   useEffect(() => {
     const handlePassport = async () => {
@@ -50,10 +51,29 @@ function App() {
       setProfile(CoNET_Data.profiles[0]);
     }
 
+    const _getServerIpAddress = async () => {
+      try {
+        const response = await getServerIpAddress();
+        const tmpIpAddress = response.data;
+
+        setServerIpAddress(tmpIpAddress?.ip || "");
+        setServerPort('3002');
+      } catch (ex) {
+        console.log(ex)
+      }
+    };
+
     const init = async () => {
+      const vpnTimeUsedInMin = parseInt(localStorage.getItem("vpnTimeUsedInMin") || "0");
+      _vpnTimeUsedInMin.current = vpnTimeUsedInMin;
+
       await createOrGetWallet();
       listenProfileVer(setProfile);
 
+      if (!window?.webkit) {
+        _getServerIpAddress();
+      }
+
       await getAllNodes(allRegions, setClosestRegion, (allNodes: nodes_info[]) => {
         setaAllNodes(allNodes)
 

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -23,3 +23,23 @@ export const startSilentPass = async (
     throw error;
   }
 };
+
+export const stopSilentPass = async (): Promise<AxiosResponse<any>> => {
+  try {
+    const response = await api.get("/stopSilentPass");
+    return response;
+  } catch (error) {
+    console.error("Error starting silent pass:", error);
+    throw error;
+  }
+};
+
+export const getServerIpAddress = async (): Promise<AxiosResponse<any>> => {
+  try {
+    const response = await api.get("/ipaddress");
+    return response;
+  } catch (error) {
+    console.error("Error fetching regions:", error);
+    throw error;
+  }
+};
diff --git a/src/components/CopyProxyInfo/index.tsx b/src/components/CopyProxyInfo/index.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Skeleton from '../Skeleton';
 
 import { ReactComponent as ChevronArrow } from "./assets/right-chevron.svg";
-import { PROXY_PAC, PROXY_PORT, PROXY_SERVER } from '../../utils/constants';
+import { useDaemonContext } from '../../providers/DaemonProvider';
 
 type CopyProxyInfoProps = {
 
@@ -14,6 +14,8 @@ export default function CopyProxyInfo({ }: CopyProxyInfoProps) {
   const [isProxyPortCopied, setIsProxyPortCopied] = useState<boolean>(false);
   const [isPACCopied, setIsPACCopied] = useState<boolean>(false);
 
+  const { serverIpAddress, serverPort, serverPac } = useDaemonContext();
+
   const handleCopy = (text: string, setMethod: (val: boolean) => any) => {
     navigator.clipboard.writeText(text);
 
@@ -35,8 +37,8 @@ export default function CopyProxyInfo({ }: CopyProxyInfoProps) {
         <p>Proxy server:</p>
         {
           true ? (
-            <button onClick={() => handleCopy(PROXY_SERVER, setIsProxyServerCopied)}>
-              <p>{PROXY_SERVER}</p>
+            <button onClick={() => handleCopy(serverIpAddress, setIsProxyServerCopied)}>
+              <p>{serverIpAddress}</p>
               {
                 isProxyServerCopied ? (
                   <img src="/assets/check.svg" alt="Copy icon" />
@@ -55,8 +57,8 @@ export default function CopyProxyInfo({ }: CopyProxyInfoProps) {
         <p>Proxy port:</p>
         {
           true ? (
-            <button onClick={() => handleCopy(PROXY_PORT, setIsProxyPortCopied)}>
-              <p>{PROXY_PORT}</p>
+            <button onClick={() => handleCopy(serverPort, setIsProxyPortCopied)}>
+              <p>{serverPort}</p>
               {
                 isProxyPortCopied ? (
                   <img src="/assets/check.svg" alt="Copy icon" />
@@ -75,8 +77,8 @@ export default function CopyProxyInfo({ }: CopyProxyInfoProps) {
         <p>PAC:</p>
         {
           true ? (
-            <button onClick={() => handleCopy(PROXY_PAC, setIsPACCopied)}>
-              <p>{PROXY_PAC}</p>
+            <button onClick={() => handleCopy(serverPac, setIsPACCopied)}>
+              <p>{serverPac}</p>
               {
                 isPACCopied ? (
                   <img src="/assets/check.svg" alt="Copy icon" />

diff --git a/src/components/PassportInfo/index.css b/src/components/PassportInfo/index.css
@@ -0,0 +1,61 @@
+.main-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background: #191919;
+  padding: 16px;
+  border-radius: 16px;
+}
+
+.main-card span {
+  font-size: 14px;
+  color: #989899;
+}
+
+.main-card p {
+  font-size: 24px;
+}
+
+.main-card div:last-child {
+  text-align: right;
+}
+
+.buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.buttons button {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 16px 8px;
+  border: 0;
+  border-radius: 16px;
+  font-weight: 700;
+
+  cursor: pointer;
+}
+
+.buttons button:first-child {
+  background-color: #282930;
+  color: #ffffff;
+}
+
+.buttons button:last-child {
+  background-color: #9fbfe533;
+  color: #9fbfe5fe;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.disabled {
+  background: #191919 !important;
+  color: #5a5a5afe !important;
+}
diff --git a/src/components/PassportInfo/index.tsx b/src/components/PassportInfo/index.tsx
@@ -0,0 +1,28 @@
+import { useNavigate } from "react-router-dom";
+import { useDaemonContext } from "../../providers/DaemonProvider";
+import { getRemainingTime } from "../../utils/utils";
+import Skeleton from "../Skeleton";
+
+const PassportInfo = () => {
+  const navigate = useNavigate();
+  const { profile } = useDaemonContext();
+
+  return (
+    <div className="main-card">
+      <div style={{ textAlign: 'start' }}>
+        <span>Silent Pass Passport</span>
+        <p>Freemium</p>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
+        <span>Expiration date</span>
+        {
+          profile?.activeFreePassport?.expires ?
+            <p>{getRemainingTime(profile?.activeFreePassport?.expires)}</p>
+            : <Skeleton width='50px' height='20px' />
+        }
+      </div>
+    </div>
+  );
+};
+
+export default PassportInfo;
diff --git a/src/components/ProxyInfo/index.tsx b/src/components/ProxyInfo/index.tsx
@@ -6,14 +6,16 @@ import Separator from '../Separator';
 import Skeleton from '../Skeleton';
 
 import './index.css';
-import { PROXY_PAC, PROXY_PORT, PROXY_SERVER } from '../../utils/constants';
+import { useDaemonContext } from '../../providers/DaemonProvider';
 
 export default function ProxyInfo() {
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [isProxyServerCopied, setIsProxyServerCopied] = useState<boolean>(false);
   const [isProxyPortCopied, setIsProxyPortCopied] = useState<boolean>(false);
   const [isPACCopied, setIsPACCopied] = useState<boolean>(false);
 
+  const { serverIpAddress, serverPort, serverPac } = useDaemonContext();
+
   const handleCopy = (text: string, setMethod: (val: boolean) => any) => {
     navigator.clipboard.writeText(text);
 
@@ -33,8 +35,8 @@ export default function ProxyInfo() {
         <ClickableItem title="Proxy server:" chevron={false}>
           {
             true ? (
-              <button onClick={() => handleCopy(PROXY_SERVER, setIsProxyServerCopied)}>
-                <p>{PROXY_SERVER}</p>
+              <button onClick={() => handleCopy(serverIpAddress, setIsProxyServerCopied)}>
+                <p>{serverIpAddress}</p>
                 {
                   isProxyServerCopied ? (
                     <img src="/assets/check.svg" alt="Copy icon" />
@@ -52,8 +54,8 @@ export default function ProxyInfo() {
         <ClickableItem title="Proxy Port:" chevron={false}>
           {
             true ? (
-              <button onClick={() => handleCopy(PROXY_PORT, setIsProxyPortCopied)}>
-                <p>{PROXY_PORT}</p>
+              <button onClick={() => handleCopy(serverPort, setIsProxyPortCopied)}>
+                <p>{serverPort}</p>
                 {
                   isProxyPortCopied ? (
                     <img src="/assets/check.svg" alt="Copy icon" />
@@ -71,8 +73,8 @@ export default function ProxyInfo() {
         <ClickableItem title="PAC:" chevron={false}>
           {
             true ? (
-              <button onClick={() => handleCopy(PROXY_PAC, setIsPACCopied)}>
-                <p>{PROXY_PAC}</p>
+              <button onClick={() => handleCopy(serverPac, setIsPACCopied)}>
+                <p>{serverPac}</p>
                 {
                   isPACCopied ? (
                     <img src="/assets/check.svg" alt="Copy icon" />

diff --git a/src/pages/FAQ/index.tsx b/src/pages/FAQ/index.tsx
@@ -4,7 +4,6 @@ import SilentPassServiceTable from "./assets/silent-pass-service-table.svg";
 import SilentPassBenefitsTable from "./assets/silent-pass-benefits-table.svg";
 
 import "./index.css";
-import { PROXY_PAC, PROXY_PORT, PROXY_SERVER } from '../../utils/constants';
 
 const FAQ = () => {
   return (
@@ -76,16 +75,6 @@ const FAQ = () => {
           </li>
         </ol>
       </div>
-      <div>
-        <h3>Silent Pass Proxy Server Setting Parameters</h3>
-        <p>
-          Support Windows 10~, Linux & MacOS <br />
-          Local Proxy Auto-Config (PAC) Url: <br />
-          {PROXY_PAC} <br />
-          Proxy server: {PROXY_SERVER} <br />
-          Port number: {PROXY_PORT} <br />
-        </p>
-      </div>
     </div>
   );
 };

diff --git a/src/pages/Home/index.css b/src/pages/Home/index.css
@@ -9,6 +9,7 @@ a {
   align-items: center;
   position: absolute;
   top: 0;
+  padding-top: 1rem;
 }
 
 .header-content {
@@ -27,6 +28,7 @@ a {
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
+  overflow-y: auto;
   height: 100%;
   width: 90%;
   padding: 45px 0;
@@ -197,7 +199,7 @@ h1 span {
 
   height: 31px;
 
-  transition: height .20s ease;
+  transition: height 0.2s ease;
 
   overflow: hidden;
 }
@@ -229,7 +231,7 @@ h1 span {
 }
 
 .wallet-info-container hr {
-  border-color: #3F3F40;
+  border-color: #3f3f40;
 }
 
 .wallet-info {
@@ -274,6 +276,7 @@ h1 span {
   flex-direction: column;
   align-items: center;
   line-height: 22px;
+  padding-top: 3rem;
 }
 
 .current-mined p,
@@ -344,5 +347,5 @@ h1 span {
 .button-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 2px;
 }