Skip to content

Commit a3fc09a

Browse files
nicolastmaianicolastmaia
committed
fix: show error when toggle power with expired passport
1 parent c1ed38e commit a3fc09a

File tree

8 files changed

+74
-30
lines changed

8 files changed

+74
-30
lines changed

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function App() {
3838

3939
tmpData.profiles[0] = {
4040
...tmpData?.profiles[0],
41-
activeFreePassport: {
41+
activePassport: {
4242
nftID: info?.nftIDs?.[0]?.toString(),
4343
expires: info?.expires?.[0]?.toString(),
4444
expiresDays: info?.expiresDays?.[0]?.toString()

‎src/components/AccountList/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export default function AccountList() {
5555
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
5656
<p>Freemium</p>
5757
{
58-
profiles?.[0]?.activeFreePassport?.expires ?
59-
<p>{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}</p>
58+
profiles?.[0]?.activePassport?.expires ?
59+
<p>{getRemainingTime(profiles?.[0]?.activePassport?.expires)}</p>
6060
: <Skeleton width='50px' height='20px' />
6161
}
6262
</div>

‎src/components/MiningStatus/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Skeleton from '../Skeleton';
66
const OneDayInSeconds = 86400;
77

88
const MiningStatus = () => {
9-
const { miningData, profiles, setIsPassportInfoOpen, activePassportUpdated } = useDaemonContext();
9+
const { miningData, profiles, setIsPassportInfoPopupOpen, activePassportUpdated } = useDaemonContext();
1010
const [isMiningUp, setIsMiningUp] = useState<boolean>(false);
1111
const [passportTimeLeft, setPassportTimeLeft] = useState<number>(0);
1212

@@ -17,15 +17,15 @@ const MiningStatus = () => {
1717
}, [miningData])
1818

1919
useEffect(() => {
20-
const passportExpiration = profiles?.[0]?.activeFreePassport?.expires
20+
const passportExpiration = profiles?.[0]?.activePassport?.expires
2121
if (passportExpiration) {
2222
const timeLeft = passportExpiration - Math.floor(Date.now() / 1000)
2323
setPassportTimeLeft(timeLeft)
2424
}
2525
}, [activePassportUpdated, profiles])
2626

2727
const openPassportInfo = () => {
28-
setIsPassportInfoOpen(true)
28+
setIsPassportInfoPopupOpen(true)
2929
}
3030

3131
return (

‎src/components/PassportInfo/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const PassportInfo = () => {
1616
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
1717
<span>Expiration date</span>
1818
{
19-
profiles?.[0]?.activeFreePassport?.expires ?
20-
<p>{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}</p>
19+
profiles?.[0]?.activePassport?.expires ?
20+
<p>{getRemainingTime(profiles?.[0]?.activePassport?.expires)}</p>
2121
: <Skeleton width='50px' height='20px' />
2222
}
2323
</div>

‎src/components/PassportInfoPopup/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import './index.css';
44
import Skeleton from "../Skeleton";
55

66
const PassportInfoPopup = () => {
7-
const { profiles, isPassportInfoOpen, setIsPassportInfoOpen } = useDaemonContext();
7+
const { profiles, isPassportInfoPopupOpen, setIsPassportInfoPopupOpen } = useDaemonContext();
88

9-
return isPassportInfoOpen ? (
10-
<div className="home-popup-backdrop" onClick={() => setIsPassportInfoOpen(false)}>
9+
return isPassportInfoPopupOpen ? (
10+
<div className="home-popup-backdrop" onClick={() => setIsPassportInfoPopupOpen(false)}>
1111
<div className="home-nft-info">
1212
<div className="home-main-card">
1313
<div style={{ display: "flex", flexDirection: 'column', textAlign: 'start', gap: '16px' }}>
@@ -18,8 +18,8 @@ const PassportInfoPopup = () => {
1818
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end', gap: '16px' }}>
1919
<span>Expiration date</span>
2020
{
21-
profiles?.[0]?.activeFreePassport?.expires ?
22-
<p>{getRemainingTime(profiles?.[0]?.activeFreePassport?.expires)}</p>
21+
profiles?.[0]?.activePassport?.expires ?
22+
<p>{getRemainingTime(profiles?.[0]?.activePassport?.expires)}</p>
2323
: <Skeleton width='50px' height='20px' />
2424
}
2525
</div>
@@ -31,7 +31,7 @@ const PassportInfoPopup = () => {
3131
<span>Upgrade</span>
3232
</button>
3333

34-
<button onClick={() => setIsPassportInfoOpen(false)}>Close</button>
34+
<button onClick={() => setIsPassportInfoPopupOpen(false)}>Close</button>
3535
</div>
3636
</div>
3737
</div>

‎src/pages/Home/index.tsx‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,20 @@ import { formatMinutesToHHMM } from "../../utils/utils";
1515
import { startSilentPass, stopSilentPass } from "../../api";
1616
import PassportInfoPopup from "../../components/PassportInfoPopup";
1717

18+
const GENERIC_ERROR = 'Error Starting Silent Pass. Please try using our iOS App or our desktop Proxy program.';
19+
const PASSPORT_EXPIRED_ERROR = 'Passport has expired. Please renew your passport and try again.';
20+
const WAIT_PASSPORT_LOAD_ERROR = 'Passport info is loading. Please wait a few seconds and try again.';
21+
1822
interface RenderButtonProps {
19-
errorStartingSilentPass: boolean;
23+
errorMessage: string;
2024
isConnectionLoading: boolean;
2125
power: boolean;
2226
profile: any;
2327
_vpnTimeUsedInMin: number;
2428
handleTogglePower: () => void;
2529
}
2630

27-
const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnectionLoading, power, profile, _vpnTimeUsedInMin }: RenderButtonProps) => {
31+
const RenderButton = ({ errorMessage, handleTogglePower, isConnectionLoading, power, profile, _vpnTimeUsedInMin }: RenderButtonProps) => {
2832
if (isConnectionLoading)
2933
return (
3034
<div className="button-wrapper">
@@ -36,7 +40,7 @@ const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnection
3640
</button>
3741
</BlobWrapper>
3842

39-
<p className="connected">Loading...</p>
43+
<p className="connected" style={{ zIndex: 10 }}>Loading...</p>
4044
</div>
4145
)
4246

@@ -79,7 +83,7 @@ const RenderButton = ({ errorStartingSilentPass, handleTogglePower, isConnection
7983
</div>
8084
</div>
8185

82-
{errorStartingSilentPass && <span style={{ color: '#bf3b37', fontSize: '12px' }}>Error Starting Silent Pass. Please try using our iOS App or our desktop Proxy program.</span>}
86+
{errorMessage && <span style={{ color: '#bf3b37', fontSize: '12px' }}>{errorMessage}</span>}
8387
</>
8488
)
8589
}
@@ -90,7 +94,7 @@ const Home = () => {
9094
const [isInitialLoading, setIsInitialLoading] = useState<boolean>(true);
9195
const [isConnectionLoading, setIsConnectionLoading] = useState<boolean>(false)
9296
const [initPercentage, setInitPercentage] = useState<number>(0);
93-
const [errorStartingSilentPass, setErrorStartingSilentPass] = useState<boolean>(false);
97+
const [errorMessage, setErrorMessage] = useState<string>('');
9498
const vpnTimeTimeout = useRef<NodeJS.Timeout>();
9599

96100
const navigate = useNavigate();
@@ -157,10 +161,21 @@ const Home = () => {
157161
_getAllRegions()
158162
}, []);
159163

164+
const isPassportValid = (expires: number | undefined) => {
165+
if (!expires) {
166+
return false
167+
}
168+
169+
const now = Math.floor(Date.now());
170+
const expiresDate = new Date(expires * 1000);
171+
172+
return expiresDate.getTime() > now
173+
}
174+
160175
const handleTogglePower = async () => {
161176
setIsConnectionLoading(true)
162177
let error = false;
163-
setErrorStartingSilentPass(false);
178+
setErrorMessage('');
164179
let selectedCountryIndex = -1
165180

166181
if (power) {
@@ -179,8 +194,27 @@ const Home = () => {
179194
return
180195
}
181196

197+
if (!profiles?.[0]?.activePassport?.expires) {
198+
setTimeout(() => {
199+
setIsConnectionLoading(false)
200+
setErrorMessage(WAIT_PASSPORT_LOAD_ERROR);
201+
}, 1000)
202+
203+
return
204+
}
205+
206+
if (!isPassportValid(profiles?.[0]?.activePassport?.expires)) {
207+
setTimeout(() => {
208+
setIsConnectionLoading(false)
209+
setErrorMessage(PASSPORT_EXPIRED_ERROR);
210+
}, 1000)
211+
212+
return
213+
}
214+
182215
const conetProfile = CoNET_Data?.profiles[0];
183216
const privateKey = conetProfile?.privateKeyArmor
217+
184218
if (!privateKey) {
185219
return
186220
}
@@ -236,7 +270,7 @@ const Home = () => {
236270
await startSilentPass(startVPNMessageObject);
237271
} catch (ex) {
238272
error = true
239-
setErrorStartingSilentPass(true);
273+
setErrorMessage(GENERIC_ERROR);
240274
}
241275
}
242276

@@ -273,7 +307,7 @@ const Home = () => {
273307
<img src="/assets/header-title.svg"></img>
274308
</div>
275309

276-
<RenderButton profile={profiles?.[0]} errorStartingSilentPass={errorStartingSilentPass} isConnectionLoading={isConnectionLoading} power={power} handleTogglePower={handleTogglePower} _vpnTimeUsedInMin={_vpnTimeUsedInMin.current} />
310+
<RenderButton profile={profiles?.[0]} errorMessage={errorMessage} isConnectionLoading={isConnectionLoading} power={power} handleTogglePower={handleTogglePower} _vpnTimeUsedInMin={_vpnTimeUsedInMin.current} />
277311

278312
<CopyProxyInfo />
279313

‎src/providers/DaemonProvider.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,14 @@ type DaemonContext = {
2626
serverPac: string
2727
setServerPac: (pac: string) => void
2828
_vpnTimeUsedInMin: React.MutableRefObject<number>
29-
isPassportInfoOpen: boolean
30-
setIsPassportInfoOpen: (val: boolean) => void
29+
isPassportInfoPopupOpen: boolean
30+
setIsPassportInfoPopupOpen: (val: boolean) => void
3131
activePassportUpdated: boolean
3232
setActivePassportUpdated: (val: boolean) => void
33+
activePassport: any
34+
setActivePassport: (val: any) => void
35+
isSelectPassportPopupOpen: any
36+
setIsSelectPassportPopupOpen: (val: any) => void
3337
};
3438

3539
type DaemonProps = {
@@ -62,10 +66,14 @@ const defaultContextValue: DaemonContext = {
6266
serverPac: "",
6367
setServerPac: () => { },
6468
_vpnTimeUsedInMin: { current: 0 },
65-
isPassportInfoOpen: false,
66-
setIsPassportInfoOpen: () => { },
69+
isPassportInfoPopupOpen: false,
70+
setIsPassportInfoPopupOpen: () => { },
6771
activePassportUpdated: false,
68-
setActivePassportUpdated: () => { }
72+
setActivePassportUpdated: () => { },
73+
activePassport: null,
74+
setActivePassport: () => { },
75+
isSelectPassportPopupOpen: false,
76+
setIsSelectPassportPopupOpen: () => { },
6977
};
7078

7179
const Daemon = createContext<DaemonContext>(defaultContextValue);
@@ -89,8 +97,10 @@ export function DaemonProvider({ children }: DaemonProps) {
8997
const [serverPort, setServerPort] = useState<string>(defaultContextValue.serverPort);
9098
const [serverPac, setServerPac] = useState<string>("");
9199
const _vpnTimeUsedInMin = useRef<number>(0);
92-
const [isPassportInfoOpen, setIsPassportInfoOpen] = useState<boolean>(false);
100+
const [isPassportInfoPopupOpen, setIsPassportInfoPopupOpen] = useState<boolean>(false);
101+
const [isSelectPassportPopupOpen, setIsSelectPassportPopupOpen] = useState<boolean>(false);
93102
const [activePassportUpdated, setActivePassportUpdated] = useState<boolean>(false);
103+
const [activePassport, setActivePassport] = useState<any>(null);
94104

95105
useEffect(() => {
96106
{
@@ -101,7 +111,7 @@ export function DaemonProvider({ children }: DaemonProps) {
101111

102112

103113
return (
104-
<Daemon.Provider value={{ power, setPower, sRegion, setSRegion, allRegions, setAllRegions, closestRegion, setClosestRegion, isRandom, setIsRandom, miningData, setMiningData, profiles, setProfiles, isMiningUp, setIsMiningUp, getAllNodes, setaAllNodes, serverIpAddress, setServerIpAddress, serverPort, setServerPort, serverPac, setServerPac, _vpnTimeUsedInMin, isPassportInfoOpen, setIsPassportInfoOpen, activePassportUpdated, setActivePassportUpdated }}>
114+
<Daemon.Provider value={{ power, setPower, sRegion, setSRegion, allRegions, setAllRegions, closestRegion, setClosestRegion, isRandom, setIsRandom, miningData, setMiningData, profiles, setProfiles, isMiningUp, setIsMiningUp, getAllNodes, setaAllNodes, serverIpAddress, setServerIpAddress, serverPort, setServerPort, serverPac, setServerPac, _vpnTimeUsedInMin, isPassportInfoPopupOpen, setIsPassportInfoPopupOpen, activePassportUpdated, setActivePassportUpdated, activePassport, setActivePassport, isSelectPassportPopupOpen, setIsSelectPassportPopupOpen }}>
105115
{children}
106116
</Daemon.Provider>
107117
);

‎src/types.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ interface profile extends keyPair {
6565
nodeID?: number;
6666
nodeIP_address?: string;
6767
nodeRegion?: string;
68-
activeFreePassport?: freePassport;
68+
activePassport?: freePassport;
6969
vpnTimeUsedInMin?: number;
7070
}
7171

0 commit comments

Comments
 (0)