Updates Rick Roll to actual Xai Sentry Node Web URL

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

@@ -3,7 +3,7 @@ import {FiGift, FiGitCommit} from "react-icons/fi";
 import {AiFillInfoCircle} from "react-icons/ai";
 import {ViewKeysModal} from "./modals/view-keys/ViewKeysModal.tsx";
 import {useState} from "react";
-import {ConnectWalletModal} from "./modals/connect-wallet/ConnectWalletModal.tsx";
+import {BuyKeysModal} from "../keys/modals/buy-keys/BuyKeysModal.tsx";
 
 const body = [
 	{
@@ -44,8 +44,9 @@ const sentryBody = [
 ]
 
 export function GetSentryNode() {
-	const [showModal, setShowModal] = useState<boolean>(false);
-	const [showConnectedModal, setShowConnectedModal] = useState<boolean>(false);
+	const [number, setNumber] = useState<number>(0);
+	const [showBuyModal, setShowBuyModal] = useState<boolean>(false);
+	const [showViewModal, setShowViewModal] = useState<boolean>(false);
 
 	function getBody() {
 		return body.map((item, i) => {
@@ -80,12 +81,16 @@ export function GetSentryNode() {
 		<div
 			className="max-w-[1920px] flex flex-row items-center justify-between px-[5.125rem] pt-[5.625rem] overflow-hidden">
 
-			{showModal && (
-				<ViewKeysModal setShowModal={setShowModal}/>
+			{showViewModal && (
+				<ViewKeysModal setShowModal={setShowViewModal}/>
 			)}
 
-			{showConnectedModal && (
-				<ConnectWalletModal setShowConnectedModal={setShowConnectedModal}/>
+			{showBuyModal && (
+				<BuyKeysModal
+					number={number}
+					setNumber={setNumber}
+					setShowModal={setShowBuyModal}
+				/>
 			)}
 
 			<div className="flex flex-col">
@@ -102,14 +107,14 @@ export function GetSentryNode() {
 				<div className="flex items-center mt-4 gap-[3rem]">
 					<button
 						className={`w-[27.25rem] bg-[#F30919] flex justify-center items-center gap-2 text-lg text-white py-5 font-semibold mt-2`}
-						onClick={() => setShowConnectedModal(true)}
+						onClick={() => setShowBuyModal(true)}
 					>
 						<RiKey2Line className="w-5 h-5"/>
 						Purchase Key
 					</button>
 					<p
 						className="text-xl text-[#F30919] cursor-pointer font-semibold"
-						onClick={() => setShowModal(true)}
+						onClick={() => setShowViewModal(true)}
 					>
 						I already own a key
 					</p>

apps/vanguard-client-desktop/src/features/home/modals/actions-required/ActionsRequiredFlow.tsx

@@ -41,7 +41,7 @@ export function ActionsRequiredFlow({setAddWallet}: ActionsRequiredFlowProps) {
 				</span>
 
 				<button
-					onClick={() => window.electron.openExternal('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}
+					onClick={() => window.electron.openExternal('http://localhost:7555/')}
 					className="w-full h-12 flex flex-row justify-center items-center gap-1 bg-[#F30919] text-[15px] text-white font-semibold"
 				>
 					Connect wallet <BiLinkExternal/>

apps/vanguard-client-desktop/src/features/home/modals/actions-required/ActionsRequiredModalManager.tsx

@@ -3,13 +3,15 @@ import {AiFillWarning} from "react-icons/ai";
 import {ActionsRequiredModal} from "./ActionsRequiredModal.tsx";
 import {BuyKeysModal} from "../../../keys/modals/buy-keys/BuyKeysModal.tsx";
 import {ViewKeysModal} from "../view-keys/ViewKeysModal.tsx";
+import {ConnectWalletModal} from "../connect-wallet/ConnectWalletModal.tsx";
 
 export function ActionsRequiredModalManager() {
 	const [number, setNumber] = useState<number>(0);
 
 	const [showActionsModal, setShowActionsModal] = useState<boolean>(false);
 	const [showBuyModal, setShowBuyModal] = useState<boolean>(false);
 	const [showViewModal, setShowViewModal] = useState<boolean>(false);
+	const [showConnectedModal, setShowConnectedModal] = useState<boolean>(false);
 
 	return (
 		<div>
@@ -49,6 +51,10 @@ export function ActionsRequiredModalManager() {
 					setShowModal={setShowViewModal}
 				/>
 			)}
+
+			{showConnectedModal && (
+				<ConnectWalletModal setShowConnectedModal={setShowConnectedModal}/>
+			)}
 		</div>
 	)
 }

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

@@ -42,7 +42,7 @@ export function ConnectWalletModal({setShowConnectedModal}: ConnectWalletModalPr
 						<span className="text-xl font-semibold">Wallet connected</span>
 						<span className="text-[15px]">Transaction ID:
 						<a
-							onClick={() => window.electron.openExternal('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}
+							onClick={() => window.electron.openExternal('http://localhost:7555/')}
 							className="text-[#F30919] ml-1 cursor-pointer"
 						>
 							129019028

apps/vanguard-client-desktop/src/features/home/modals/view-keys/ViewKeysFlow.tsx

@@ -3,49 +3,54 @@ import {BiLinkExternal} from "react-icons/bi";
 
 interface ViewKeysFlowProps {
 	setAddWallet: Dispatch<SetStateAction<boolean>>;
-	// setConnectWallet: Dispatch<SetStateAction<boolean>>;
+	setShowConnectedModal: Dispatch<SetStateAction<boolean>>;
 }
 
-export function ViewKeysFlow({setAddWallet}: ViewKeysFlowProps) {
+export function ViewKeysFlow({setAddWallet, setShowConnectedModal}: ViewKeysFlowProps) {
 	const [inputValue, setInputValue] = useState('');
 
 	const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setInputValue(event.target.value);
 	};
 
 	return (
-		<div className="w-full flex flex-col gap-8 mt-12">
-			<div className="flex flex-col gap-2 px-6 pt-8">
+		<div>
+			<div className="w-full flex flex-col gap-8 mt-12">
+				<div className="flex flex-col gap-2 px-6 pt-8">
 				<span className="text-[15px] text-[#525252] mt-2">
 					Enter the the public key of the wallet you want to view keys for
 				</span>
 
-				<input
-					type="text"
-					value={inputValue}
-					onChange={handleInputChange}
-					className="w-full my-2 p-3 border rounded"
-					placeholder="Enter public key"
-				/>
-
-				<button
-					onClick={() => setAddWallet(true)}
-					className="w-full h-12 flex flex-row justify-center items-center gap-1 bg-[#F30919] text-[15px] text-white font-semibold"
-					// disabled={inputValue === ""}
-				>
-					Add wallet
-				</button>
-
-				<span className="text-[15px] text-[#525252] mt-8">
+					<input
+						type="text"
+						value={inputValue}
+						onChange={handleInputChange}
+						className="w-full my-2 p-3 border rounded"
+						placeholder="Enter public key"
+					/>
+
+					<button
+						onClick={() => setAddWallet(true)}
+						className="w-full h-12 flex flex-row justify-center items-center gap-1 bg-[#F30919] text-[15px] text-white font-semibold"
+						// disabled={inputValue === ""}
+					>
+						Add wallet
+					</button>
+
+					<span className="text-[15px] text-[#525252] mt-8">
 					Or connect wallet to view all keys in the wallet
 				</span>
 
-				<button
-					onClick={() => window.electron.openExternal('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}
-					className="w-full h-12 flex flex-row justify-center items-center gap-1 bg-[#F30919] text-[15px] text-white font-semibold"
-				>
-					Connect wallet <BiLinkExternal/>
-				</button>
+					<button
+						onClick={() => {
+							window.electron.openExternal('http://localhost:7555/')
+							setShowConnectedModal(true)
+						}}
+						className="w-full h-12 flex flex-row justify-center items-center gap-1 bg-[#F30919] text-[15px] text-white font-semibold"
+					>
+						Connect wallet <BiLinkExternal/>
+					</button>
+				</div>
 			</div>
 		</div>
 	)

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

@@ -2,35 +2,46 @@ import {AiOutlineClose} from "react-icons/ai";
 import {Dispatch, SetStateAction, useState} from "react";
 import {ViewKeysFlow} from "./ViewKeysFlow.tsx";
 import {ViewKeySuccess} from "./ViewKeysSuccess.tsx";
+import {ConnectWalletModal} from "../connect-wallet/ConnectWalletModal.tsx";
 
 interface ViewKeysModalProps {
 	setShowModal: Dispatch<SetStateAction<boolean>>;
 }
 
 export function ViewKeysModal({setShowModal}: ViewKeysModalProps) {
 	const [addWallet, setAddWallet] = useState<boolean>(false);
+	const [showConnectedModal, setShowConnectedModal] = useState<boolean>(false);
 
 	return (
-		<div
-			className="absolute top-0 right-0 w-[30rem] h-screen flex flex-col justify-start items-center border border-gray-200 z-20 bg-white">
+		<div>
+			{showConnectedModal && (
+				<ConnectWalletModal
+					setShowConnectedModal={setShowConnectedModal}
+				/>
+			)}
+
 			<div
-				className="absolute top-0 w-full h-16 flex flex-row justify-between items-center border-b border-gray-200 text-lg font-semibold px-8">
-				<span>View keys in wallet</span>
-				<div className="cursor-pointer z-10" onClick={() => setShowModal(false)}>
-					<AiOutlineClose/>
+				className="absolute top-0 right-0 w-[30rem] h-screen flex flex-col justify-start items-center border border-gray-200 z-20 bg-white">
+				<div
+					className="absolute top-0 w-full h-16 flex flex-row justify-between items-center border-b border-gray-200 text-lg font-semibold px-8">
+					<span>View keys in wallet</span>
+					<div className="cursor-pointer z-10" onClick={() => setShowModal(false)}>
+						<AiOutlineClose/>
+					</div>
 				</div>
-			</div>
 
-			{addWallet ? (
-				<ViewKeySuccess
-					setShowModal={setShowModal}
-				/>
-			) : (
-				<ViewKeysFlow
-					setAddWallet={setAddWallet}
-					// setConnectWallet={setConnectWallet}
-				/>
-			)}
+				{addWallet ? (
+					<ViewKeySuccess
+						setShowModal={setShowModal}
+					/>
+				) : (
+					<ViewKeysFlow
+						setAddWallet={setAddWallet}
+						setShowConnectedModal={setShowConnectedModal}
+						// setConnectWallet={setConnectWallet}
+					/>
+				)}
+			</div>
 		</div>
 	)
 }

apps/vanguard-client-desktop/src/features/keys/HasKeys.tsx

@@ -5,19 +5,19 @@ const dummyLicenses = [
 		number: 1,
 		license: "Xai Vanguard Node Key",
 		date: "2023-09-26",
-		receipt: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+		receipt: "http://localhost:7555/",
 	},
 	// {
 	// 	number: 2,
 	// 	license: "Xai Vanguard Node Key",
 	// 	date: "2023-09-27",
-	// 	receipt: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+	// 	receipt: "http://localhost:7555/",
 	// },
 	// {
 	// 	number: 3,
 	// 	license: "Xai Vanguard Node Key",
 	// 	date: "2023-09-28",
-	// 	receipt: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+	// 	receipt: "http://localhost:7555/",
 	// },
 ]
 

apps/vanguard-client-desktop/src/features/keys/Keys.tsx

@@ -18,7 +18,9 @@ export function Keys() {
 				</p>
 			</div>
 
-			<ActionsRequiredModalManager/>
+			{!number && (
+				<ActionsRequiredModalManager/>
+			)}
 
 			{showBuyModal && (
 				<BuyKeysModal

apps/vanguard-client-desktop/src/features/keys/NoKeys.tsx

@@ -63,7 +63,7 @@ export function NoKeys({setShowModal}: NoKeysProps) {
 					Already own a key?
 
 					<a
-						onClick={() => window.electron.openExternal('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}
+						onClick={() => window.electron.openExternal('http://localhost:7555/')}
 						className="text-[#F30919] ml-1 cursor-pointer"
 					>
 						Add wallet to Xai Client

apps/vanguard-client-desktop/src/features/keys/modals/buy-keys/BuyKeysFlow.tsx

@@ -228,7 +228,10 @@ export function BuyKeysFlow({setPurchaseSuccess}: BuyKeysFlowProps) {
 				{/*		CTA		*/}
 				<div className="pb-6 font-semibold">
 					<button
-						onClick={() => setPurchaseSuccess(true)}
+						onClick={() => {
+							window.electron.openExternal('http://localhost:7555/')
+							setPurchaseSuccess(true)
+						}}
 						className={`w-full h-16 flex flex-row justify-center items-center gap-1 bg-[#F30919] text-lg text-white`}
 					>
 						Confirm purchase <BiLinkExternal/>

apps/web-connect/src/features/router/AppRoutes.tsx

@@ -1,5 +1,5 @@
 import { Route, HashRouter as Router, Routes } from 'react-router-dom';
-import Sandbox from '../sandbox/Sandbox';
+import {Sandbox} from "../sandbox";
 
 export function AppRoutes() {
   return (
@@ -9,4 +9,4 @@ export function AppRoutes() {
       </Routes>
     </Router>
   );
-}
+}

apps/web-connect/src/features/sandbox/Sandbox.tsx

@@ -1,17 +1,11 @@
-import {TestInput} from '@xai-vanguard-node/ui';
-
-const Sandbox = () => {
+export const Sandbox = () => {
     return (
         <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex flex-col items-center space-y-4">
-            <h1 className="text-2xl font-bold text-center">Heading 1 </h1>
-            <h2 className="text-xl font-semibold text-center">Heading 2</h2>
-            <h3 className="text-lg font-medium text-center">Heading 3</h3>
-            <p className="text-base text-center">This is a paragraph demonstrating the default text styles in Tailwind CSS.</p>
-            <TestInput/>
-            <button className="px-4 py-2 bg-blue-600 text-white rounded self-center">Button</button>
+            <h1 className="text-2xl font-bold text-center">Xai Sentry Node Web</h1>
+            <p className="text-base text-center">This is where the web experience will go once implemented.</p>
         </div>
     );
 };
 
-export default Sandbox;
+