Skip to content

Commit 00a6afb

Browse files
author
James Bartnik
committed
Potential fix for Windows not rendering content
1 parent 0d1f845 commit 00a6afb

File tree

8 files changed

+137
-60
lines changed

8 files changed

+137
-60
lines changed

‎apps/vanguard-client-desktop/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<base href="/">
78
<title>Vanguard Client</title>
89
</head>
910
<body>

‎apps/vanguard-client-desktop/src/features/ConnectWallet.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function ConnectWallet() {
3838
}
3939

4040
return (
41-
<div className="relative w-full h-screen flex flex-col justify-center items-center gap-20">
41+
<div className="relative w-full h-screen flex flex-col items-center gap-20 pt-52">
4242
<div className="flex flex-col justify-center items-center gap-2 z-10">
4343
<h1 className="text-[40px] font-bold uppercase tracking-widest">Connect your wallet</h1>
4444
<p className="text-lg text-[#525252] max-w-[508px] text-center">
@@ -63,7 +63,7 @@ export function ConnectWallet() {
6363
</div>
6464

6565
<video
66-
className="absolute bottom-0 w-full object-cover"
66+
className="absolute bottom-[-15rem] w-full object-cover"
6767
autoPlay
6868
loop
6969
muted

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export function Home() {
22
return (
3-
<div>
3+
<div className="w-full h-screen flex flex-col justify-center items-center">
44
<h1>Home</h1>
55
</div>
66
)

‎apps/vanguard-client-desktop/src/features/licenses/HasLicenses.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export function HasLicenses() {
2+
return (
3+
<div className="w-full flex flex-col px-8 py-9 gap-8">
4+
<div className="flex flex-col justify-center bg-[#F5F5F5] px-5 py-7 rounded-2xl gap-4">
5+
<p className="text-base font-semibold">Want to send more claims?</p>
6+
<p className="text-sm text-[#525252]">
7+
Purchase additional licenses to increase the number of claims submitted per challenge
8+
</p>
9+
<button
10+
onClick={() => alert("no")}
11+
className="w-48 bg-[#F30919] text-sm text-white p-2 uppercase font-semibold"
12+
>
13+
Buy Now
14+
</button>
15+
</div>
16+
17+
<div className="container mx-auto p-4">
18+
<table className="w-full bg-white">
19+
<thead className="flex text-gray-400">
20+
<tr>
21+
<th className="w-4 px-4 py-2">No.</th>
22+
<th className="w-64 px-4 py-2">License</th>
23+
<th className="w-8 px-4 py-2">Date</th>
24+
<th className="w-8 px-4 py-2">Receipt</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
<tr className="bg-[#F5F5F5]">
29+
<td className="border px-4 py-2">1</td>
30+
<td className="border px-4 py-2">Xai Vanguard Node License</td>
31+
<td className="border px-4 py-2">2023-09-26</td>
32+
<td className="border px-4 py-2">Receipt A</td>
33+
</tr>
34+
</tbody>
35+
</table>
36+
</div>
37+
</div>
38+
)
39+
}

‎apps/vanguard-client-desktop/src/features/licenses/Licenses.tsx

Lines changed: 20 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,30 @@
1-
import {AiFillWarning} from "react-icons/ai";
2-
3-
const licenses = [
4-
{
5-
header: "One license equals one claim",
6-
body: "Your node will be able to send one claim for each license owned",
7-
},
8-
{
9-
header: "Claims are sent to challenges",
10-
body: "Xai Vanguard Nodes send claims to verification challenges on the network",
11-
},
12-
{
13-
header: "Claims receive network rewards",
14-
body: "Once the challenge is finished, winning claims receive network rewards",
15-
},
16-
]
1+
import {useState} from "react";
2+
import {HasLicenses} from "./HasLicenses.tsx";
3+
import {NoLicenses} from "./NoLicenses.tsx";
174

185
export function Licenses() {
19-
20-
function getLicenseContent() {
21-
return licenses.map((item, i) => {
22-
return (
23-
<div
24-
key={`connect-wallet-content-${i}`}
25-
className="max-w-sm flex flex-col justify-center bg-[#F5F5F5] p-6 rounded-lg gap-4"
26-
>
27-
<div className="flex flex-row items-center gap-2">
28-
<p className="w-6 h-6 flex items-center justify-center text-lg bg-red-500 text-white rounded-full">{i + 1}</p>
29-
<p className="text-lg font-semibold">{item.header}</p>
30-
</div>
31-
<p className="text-base text-[#525252]">{item.body}</p>
32-
</div>
33-
)
34-
})
35-
36-
}
6+
const [number, setNumber] = useState<number>(1);
377

388
return (
39-
<div className="w-full h-screen flex flex-col justify-center items-center">
40-
<div className="flex flex-col justify-center items-center gap-4">
41-
<AiFillWarning className="w-16 h-16 text-[#D4D4D4]"/>
42-
<p className="text-xl font-semibold">You don’t own any licenses</p>
43-
<p className="text-base text-[#525252]">Buy a license to start participating in network challenges</p>
9+
<div className="w-full h-screen">
4410

45-
<button
46-
onClick={() => alert("lol you thought we had functionality")}
47-
className="w-52 bg-[#F30919] text-white p-4 uppercase font-semibold mt-2"
48-
>
49-
Buy Now
50-
</button>
11+
{/* Licenses Header */}
12+
<div className="sticky top-0 flex flex-row items-center w-full h-16 border-b border-gray-200 pl-10 gap-2 bg-white">
13+
<h2 className="text-lg">Licenses</h2>
14+
<p className="text-sm bg-gray-100 pl-2 pr-2 rounded-2xl text-gray-500">
15+
{number} owned
16+
</p>
5117
</div>
5218

53-
<div className="absolute bottom-12 flex flex-col justify-center items-center gap-6 text-2xl">
54-
<h3 className="font-semibold">
55-
How licensing works
56-
</h3>
57-
<div className="flex flex-row justify-center items-center gap-10 z-10">
58-
{getLicenseContent()}
59-
</div>
60-
</div>
19+
{number ? (
20+
<HasLicenses/>
21+
) : (
22+
<NoLicenses
23+
number={number}
24+
setNumber={setNumber}
25+
/>
26+
)}
27+
6128
</div>
6229
)
6330
}

‎apps/vanguard-client-desktop/src/features/licenses/NoLicenses.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import {AiFillWarning} from "react-icons/ai";
2+
import {Dispatch, SetStateAction} from "react";
3+
4+
const noLicenseCopy = [
5+
{
6+
header: "One license equals one claim",
7+
body: "Your node will be able to send one claim for each license owned",
8+
},
9+
{
10+
header: "Claims are sent to challenges",
11+
body: "Xai Vanguard Nodes send claims to verification challenges on the network",
12+
},
13+
{
14+
header: "Claims receive network rewards",
15+
body: "Once the challenge is finished, winning claims receive network rewards",
16+
},
17+
]
18+
19+
interface NoLicensesProps {
20+
number: number
21+
setNumber: Dispatch<SetStateAction<number>>
22+
}
23+
24+
export function NoLicenses({number, setNumber}: NoLicensesProps) {
25+
26+
function getLicenseContent() {
27+
return noLicenseCopy.map((item, i) => {
28+
return (
29+
<div
30+
key={`connect-wallet-content-${i}`}
31+
className="max-w-sm flex flex-col justify-center bg-[#F5F5F5] p-6 rounded-lg gap-4"
32+
>
33+
<div className="flex flex-row items-center gap-2">
34+
<p className="w-6 h-6 flex items-center justify-center text-lg bg-red-500 text-white rounded-full">{i + 1}</p>
35+
<p className="text-lg font-semibold">{item.header}</p>
36+
</div>
37+
<p className="text-base text-[#525252]">{item.body}</p>
38+
</div>
39+
)
40+
})
41+
}
42+
43+
return (
44+
<div className="w-full h-screen flex flex-col justify-center items-center">
45+
<div className="flex flex-col justify-center items-center gap-4">
46+
<AiFillWarning className="w-16 h-16 text-[#D4D4D4]"/>
47+
<p className="text-xl font-semibold">You don’t own any licenses</p>
48+
<p className="text-base text-[#525252]">Buy a license to start participating in network
49+
challenges</p>
50+
51+
<button
52+
onClick={() => setNumber(number + 1)}
53+
className="w-52 bg-[#F30919] text-white p-4 uppercase font-semibold mt-2"
54+
>
55+
Buy Now
56+
</button>
57+
</div>
58+
59+
<div className="absolute bottom-12 flex flex-col justify-center items-center gap-6 text-2xl">
60+
<h3 className="font-semibold">
61+
How licensing works
62+
</h3>
63+
<div className="flex flex-row justify-center items-center gap-10 p-6 z-10">
64+
{getLicenseContent()}
65+
</div>
66+
</div>
67+
</div>
68+
)
69+
}

‎apps/vanguard-client-desktop/src/features/router/routes.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {RootRoute, Route, Router} from "@tanstack/react-router";
22
import {Root} from ".";
33
import {ConnectWallet} from "../ConnectWallet.tsx";
44
import {Home} from "../home/Home.tsx";
5+
import {NoLicenses} from "../licenses/NoLicenses.tsx";
56
import {Licenses} from "../licenses/Licenses.tsx";
67

78
// Create a root route

‎apps/vanguard-client-desktop/src/features/sidebar/SidebarRoot.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {SiGitbook} from "react-icons/si";
1111
*/
1212
function Sidebar() {
1313
return (
14-
<div className="sticky h-screen w-64 bg-white border-r border-gray-400 text-gray-600 p-5 z-10">
14+
<div className="sticky h-screen w-64 bg-white border-r border-gray-200 text-gray-600 p-5 z-10">
1515
<div className="mb-5">
1616
<h2 className="text-gray-400 text-base mb-2 uppercase">Vanguard Node</h2>
1717
<Link to="/home" className="flex items-center mb-2 text-gray-600 hover:text-gray-400 cursor-pointer">
@@ -25,10 +25,10 @@ function Sidebar() {
2525

2626
<div className="mb-5">
2727
<h2 className="text-gray-400 text-base mb-2 uppercase">Help</h2>
28-
<Link to="/set-up-on-cloud" className="flex items-center mb-2 text-gray-600 hover:text-gray-400 cursor-pointer">
28+
<a onClick={() => window.electron.openExternal("https://xai-foundation.gitbook.io/xai-network/")} className="flex items-center mb-2 text-gray-600 hover:text-gray-400 cursor-pointer">
2929
<AiOutlineCloudUpload className="mr-2" /> Set up on Cloud
30-
</Link>
31-
<a onClick={() => window.electron.openExternal('https://xai-foundation.gitbook.io/xai-network/xai-odyssey/thirdweb/creator-portal')} className="flex items-center mb-2 text-gray-600 hover:text-gray-400 cursor-pointer">
30+
</a>
31+
<a onClick={() => window.electron.openExternal("https://xai-foundation.gitbook.io/xai-network/")} className="flex items-center mb-2 text-gray-600 hover:text-gray-400 cursor-pointer">
3232
<SiGitbook className="mr-2" /> Gitbook
3333
</a>
3434
</div>

0 commit comments

Comments
 (0)