Skip to content

Commit 788ca00

Browse files
author
James Bartnik
committed
More Sentry Wallet UI
1 parent b6fb0ee commit 788ca00

File tree

1 file changed

+93
-6
lines changed

1 file changed

+93
-6
lines changed

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

Lines changed: 93 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,112 @@
1-
import {AiFillWarning} from "react-icons/ai";
1+
import {AiFillWarning, AiOutlineCheck, AiOutlineInfoCircle} from "react-icons/ai";
22
import {useState} from "react";
33
import {ActionsRequiredModalManager} from "./modals/actions-required/ActionsRequiredModalManager.tsx";
44
import {BuyKeysModal} from "../keys/modals/buy-keys/BuyKeysModal.tsx";
55
import {ViewKeysModal} from "./modals/view-keys/ViewKeysModal.tsx";
66
import {ContinueInBrowserModal} from "./modals/ContinueInBrowserModal.tsx";
77
import {BiLinkExternal} from "react-icons/bi";
8+
import {useOperator} from "../operator";
9+
import {PiCopy} from "react-icons/pi";
10+
import {HiOutlineDotsVertical} from "react-icons/hi";
11+
import {GiPauseButton} from "react-icons/gi";
12+
import {FaEthereum} from "react-icons/fa";
13+
import {MdRefresh} from "react-icons/md";
814

915
export function SentryWallet() {
1016
const [number, setNumber] = useState<number>(0);
1117
const [showBuyModal, setShowBuyModal] = useState<boolean>(false);
1218
const [showViewModal, setShowViewModal] = useState<boolean>(false);
1319
const [showContinueInBrowserModal, setShowContinueInBrowserModal] = useState<boolean>(false);
20+
const {loading, privateKey} = useOperator();
21+
22+
const [copied, setCopied] = useState<boolean>(false);
23+
24+
function copyPrivateKey() {
25+
if (privateKey && navigator.clipboard) {
26+
navigator.clipboard.writeText(privateKey)
27+
.then(() => {
28+
setCopied(true);
29+
setTimeout(() => {
30+
setCopied(false);
31+
}, 2000);
32+
})
33+
.catch(err => {
34+
console.error('Unable to copy to clipboard: ', err);
35+
});
36+
} else {
37+
console.error('Clipboard API not available, unable to copy to clipboard');
38+
}
39+
}
1440

1541
return (
1642
<div className="w-full h-screen">
1743
<div
18-
className="sticky top-0 flex flex-row items-center w-full h-16 border-b border-gray-200 pl-10 gap-2 bg-white">
19-
<h2 className="text-lg">Assigned Keys</h2>
20-
<p className="text-sm bg-gray-100 pl-2 pr-2 rounded-2xl text-gray-500">
21-
{number} keys in 0 (placeholder) wallets
22-
</p>
44+
className="sticky top-0 flex flex-col items-center w-full h-auto bg-white z-10">
45+
<div className="flex flex-row items-center w-full py-3 gap-2 border-b border-gray-200 pl-10">
46+
<h2 className="text-lg font-semibold">Sentry Wallet</h2>
47+
48+
<p className="border border-[#D9771F] bg-[#FEFCE8] text-[#D9771F] text-xs font-semibold uppercase rounded-full px-2">
49+
No ETH
50+
</p>
51+
<p className="border border-[#D9771F] bg-[#FEFCE8] text-[#D9771F] text-xs font-semibold uppercase rounded-full px-2">
52+
No Keys Assigned
53+
</p>
54+
55+
<div className="flex flex-row items-center gap-2 text-[#A3A3A3] text-[15px]">
56+
<p>
57+
{loading ? "Loading..." : privateKey}
58+
</p>
59+
60+
<div
61+
onClick={() => copyPrivateKey()}
62+
className="cursor-pointer"
63+
>
64+
{copied
65+
? (<AiOutlineCheck/>)
66+
: (<PiCopy/>)}
67+
</div>
68+
69+
70+
<AiOutlineInfoCircle/>
71+
<HiOutlineDotsVertical/>
72+
</div>
73+
74+
<button
75+
onClick={() => window.electron.openExternal('http://localhost:7555/')}
76+
className="ml-4 flex flex-row justify-center items-center gap-1 text-[15px] border border-[#E5E5E5] px-4 py-2"
77+
>
78+
<GiPauseButton className="h-[15px]"/>
79+
Pause Sentry
80+
</button>
81+
</div>
82+
83+
<div className="flex flex-col items-start w-full border-b border-gray-200 gap-2 py-2 pl-10">
84+
<div className="flex items-center gap-1">
85+
<h2 className="font-semibold">Sentry Wallet Balance</h2>
86+
<AiOutlineInfoCircle className="text-[#A3A3A3]"/>
87+
</div>
88+
89+
<div className="flex justify-center items-center gap-4">
90+
<div className="flex justify-center items-center gap-1">
91+
<FaEthereum className="w-6 h-6"/>
92+
<p className="text-[#F29E0D] text-2xl font-semibold">0 ETH</p>
93+
</div>
94+
<a
95+
onClick={() => window.electron.openExternal('http://localhost:7555/')}
96+
className="flex items-center text-[15px] text-[#F30919] gap-1 cursor-pointer"
97+
>
98+
<MdRefresh/> Refresh
99+
</a>
100+
</div>
101+
</div>
102+
103+
<div className="flex flex-row items-center w-full py-3 pl-10 gap-1">
104+
<h2 className="font-semibold">Assigned Keys</h2>
105+
<p className="text-sm bg-gray-100 px-2 rounded-2xl text-gray-500">
106+
{number} keys in 0 (placeholder) wallets
107+
</p>
108+
<AiOutlineInfoCircle className="text-[#A3A3A3]"/>
109+
</div>
23110
</div>
24111

25112
{!number && (

0 commit comments

Comments
 (0)