Skip to content

Commit 19f8bb1

Browse files
author
James Bartnik
committed
Adds ConnectWalletModal
1 parent 5bef6a7 commit 19f8bb1

File tree

4 files changed

+115
-16
lines changed

4 files changed

+115
-16
lines changed

‎apps/vanguard-client-desktop/src/features/home/GetSentryNode.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {FiGift, FiGitCommit} from "react-icons/fi";
33
import {AiFillInfoCircle} from "react-icons/ai";
44
import {ViewKeysModal} from "../modals/view-keys/ViewKeysModal.tsx";
55
import {useState} from "react";
6+
import {ConnectWalletModal} from "../modals/connect-wallet/ConnectWalletModal.tsx";
67

78
const body = [
89
{
@@ -44,6 +45,7 @@ const sentryBody = [
4445

4546
export function GetSentryNode() {
4647
const [showModal, setShowModal] = useState<boolean>(false);
48+
const [showConnectedModal, setShowConnectedModal] = useState<boolean>(false);
4749

4850
function getBody() {
4951
return body.map((item, i) => {
@@ -81,6 +83,10 @@ export function GetSentryNode() {
8183
{showModal && (
8284
<ViewKeysModal setShowModal={setShowModal}/>
8385
)}
86+
87+
{showConnectedModal && (
88+
<ConnectWalletModal setShowConnectedModal={setShowConnectedModal}/>
89+
)}
8490

8591
<div className="flex flex-col">
8692
<h1 className="text-[40px] font-bold uppercase tracking-widest">
@@ -96,7 +102,7 @@ export function GetSentryNode() {
96102
<div className="flex items-center mt-4 gap-[3rem]">
97103
<button
98104
className={`w-[27.25rem] bg-[#F30919] flex justify-center items-center gap-2 text-lg text-white py-5 font-semibold mt-2`}
99-
onClick={() => alert("Be patient")}
105+
onClick={() => setShowConnectedModal(true)}
100106
>
101107
<RiKey2Line className="w-5 h-5"/>
102108
Purchase Key

‎apps/vanguard-client-desktop/src/features/modals/connect-wallet/ConnectWalletModal.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {Dispatch, SetStateAction, useEffect, useState} from "react";
2+
import {AiOutlineClose} from "react-icons/ai";
3+
import {BiLoaderAlt} from "react-icons/bi";
4+
import {FaCircleCheck} from "react-icons/fa6";
5+
6+
interface ConnectWalletModalProps {
7+
setShowConnectedModal: Dispatch<SetStateAction<boolean>>;
8+
}
9+
10+
export function ConnectWalletModal({setShowConnectedModal}: ConnectWalletModalProps) {
11+
const [connectWallet, setConnectWallet] = useState<boolean>(false);
12+
13+
useEffect(() => {
14+
// Function to set loading to true after 2 seconds
15+
const setLoadingTrueAfterDelay = () => {
16+
setTimeout(() => {
17+
setConnectWallet(true);
18+
}, 2000); // 2000 milliseconds (2 seconds)
19+
};
20+
21+
// Call the function when the component mounts
22+
setLoadingTrueAfterDelay();
23+
}, []);
24+
25+
return (
26+
<div
27+
className="absolute top-0 right-0 left-0 bottom-0 m-auto w-auto h-auto flex flex-col justify-start items-center z-20">
28+
<div className="w-full h-full bg-white opacity-70"/>
29+
<div
30+
className="absolute top-0 right-0 left-0 bottom-0 m-auto flex flex-col justify-start items-center w-[506px] h-[216px] border border-gray-200 bg-white">
31+
<div
32+
className="absolute top-0 right-0 h-16 flex flex-row justify-between items-center text-lg px-6">
33+
<div className="cursor-pointer z-10" onClick={() => setShowConnectedModal(false)}>
34+
<AiOutlineClose/>
35+
</div>
36+
</div>
37+
38+
{connectWallet ? (
39+
<div
40+
className="absolute top-0 bottom-0 left-0 right-0 m-auto flex flex-col justify-center items-center gap-4">
41+
<FaCircleCheck color={"#16A34A"} size={32}/>
42+
<span className="text-xl font-semibold">Wallet connected</span>
43+
<span className="text-[15px]">Transaction ID:
44+
<a
45+
onClick={() => window.electron.openExternal('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}
46+
className="text-[#F30919] ml-1 cursor-pointer"
47+
>
48+
129019028
49+
</a>
50+
</span>
51+
</div>
52+
) : (
53+
<div
54+
className="absolute top-0 bottom-0 left-0 right-0 m-auto flex flex-col justify-center items-center gap-4">
55+
<BiLoaderAlt className="animate-spin" color={"#A3A3A3"} size={32}/>
56+
<span className="text-xl font-semibold">
57+
Transaction in progress
58+
</span>
59+
<span className="text-[15px]">
60+
Complete transaction in web browser before returning to Xai Client
61+
</span>
62+
</div>
63+
)}
64+
</div>
65+
</div>
66+
)
67+
}

‎apps/vanguard-client-desktop/src/features/modals/view-keys/ViewKeysModal.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ interface ViewKeysModalProps {
99

1010
export function ViewKeysModal({setShowModal}: ViewKeysModalProps) {
1111
const [addWallet, setAddWallet] = useState<boolean>(false);
12-
// const [connectWallet, setConnectWallet] = useState<boolean>(false);
1312

1413
return (
1514
<div

‎apps/vanguard-client-desktop/src/features/modals/view-keys/ViewKeysSuccess.tsx

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,53 @@
11
import {FaCircleCheck} from "react-icons/fa6";
2-
import {Dispatch, SetStateAction} from "react";
2+
import {Dispatch, SetStateAction, useEffect, useState} from "react";
3+
import {BiLoaderAlt} from "react-icons/bi";
4+
import {useNavigate} from "react-router-dom";
35

46
interface ViewKeySuccessProps {
57
setShowModal: Dispatch<SetStateAction<boolean>>;
68
}
79

810
export function ViewKeySuccess({setShowModal}: ViewKeySuccessProps) {
11+
const [loading, setLoading] = useState<boolean>(true)
12+
const navigate = useNavigate();
13+
14+
// todo: setup real loading logic, this is for demo purposes only
15+
useEffect(() => {
16+
setLoadingTrueAfterDelay();
17+
}, []);
18+
19+
const setLoadingTrueAfterDelay = () => {
20+
setTimeout(() => {
21+
setLoading(false);
22+
handleSuccess()
23+
}, 2000);
24+
};
25+
26+
const handleSuccess = () => {
27+
setTimeout(() => {
28+
setShowModal(false);
29+
navigate("/keys")
30+
}, 2000);
31+
};
32+
33+
934
return (
1035
<div className="w-auto h-auto">
11-
<div className="absolute top-0 bottom-0 left-0 right-0 m-auto flex flex-col justify-center items-center gap-4">
12-
<FaCircleCheck color={"#16A34A"} size={32}/>
13-
<span className="text-lg">Wallet added successfully</span>
14-
</div>
15-
16-
<div className="absolute bottom-0 left-0 w-full p-6">
17-
<button
18-
onClick={() => setShowModal(false)}
19-
className="w-full h-16 bg-[#F30919] text-sm text-white p-2 uppercase font-semibold"
20-
>
21-
Continue
22-
</button>
23-
</div>
36+
37+
{loading ? (
38+
<div
39+
className="absolute top-0 bottom-0 left-0 right-0 m-auto flex flex-col justify-center items-center gap-4">
40+
<BiLoaderAlt className="animate-spin" color={"#A3A3A3"} size={32}/>
41+
<span className="text-lg">Adding wallet...</span>
42+
</div>
43+
44+
) : (
45+
<div
46+
className="absolute top-0 bottom-0 left-0 right-0 m-auto flex flex-col justify-center items-center gap-4">
47+
<FaCircleCheck color={"#16A34A"} size={32}/>
48+
<span className="text-lg">Wallet added successfully</span>
49+
</div>
50+
)}
2451
</div>
2552
)
2653
}

0 commit comments

Comments
 (0)