setSelectedConfig(config.id)}
- className={`p-4 rounded-lg border cursor-pointer transition-all hover:border-primary/50 ${
- selectedConfig === config.id
- ? "border-primary bg-primary/5"
- : "border-border bg-background"
- }`}
- >
-
-
-
-
-
- {config.machineType}
-
+ {vms.length === 0 ? (
+
+ No configurations available. Please try again later.
+
+ ) : (
+ vms.map((config) => (
+
setSelectedConfig(config.id)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ setSelectedConfig(config.id);
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ className={`p-4 rounded-lg border cursor-pointer transition-all hover:border-primary/50 ${
+ selectedConfig === config.id
+ ? "border-primary bg-primary/5"
+ : "border-border bg-background"
+ }`}
+ >
+
+
+
+
+
+ {config.machineType}
+
+
+
+ {config.description}
+
-
- {config.description}
-
-
-
-
- {prices[config.id]
- ? `${prices[config.id].toFixed(6)} SOL/hr`
- : "Calculating..."}
+
+
+ {prices[config.id]
+ ? `${prices[config.id].toFixed(6)} SOL/hr`
+ : "Calculating..."}
+
-
- ))}
+ ))
+ )}
@@ -194,6 +208,14 @@ export const Step1 = ({
setOs(osOption.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ setOs(osOption.value);
+ }
+ }}
+ role="button"
+ tabIndex={0}
className={`p-3 rounded-lg border cursor-pointer transition-all hover:border-primary/50 ${
os === osOption.value
? "border-primary bg-primary/5"
diff --git a/web-services/apps/frontend/src/components/RentVm/Step2.tsx b/web-services/apps/frontend/src/components/RentVm/Step2.tsx
index 7a7bb9f..fc10d9c 100644
--- a/web-services/apps/frontend/src/components/RentVm/Step2.tsx
+++ b/web-services/apps/frontend/src/components/RentVm/Step2.tsx
@@ -113,6 +113,11 @@ export const Step2 = ({
}
className="mt-2 w-33"
/>
+ {duration !== undefined && duration <= 0 && (
+
+ Duration must be greater than 0.
+
+ )}
)}
@@ -158,6 +163,11 @@ export const Step2 = ({
placeholder="Enter amount in SOL"
className="my-4 w-32"
/>
+ {escrowAmount !== undefined && escrowAmount <= 0 && (
+
+ Escrow amount must be greater than 0.
+
+ )}
≈{" "}
{selectedVMConfig
diff --git a/web-services/apps/frontend/src/components/RequireAuth.tsx b/web-services/apps/frontend/src/components/RequireAuth.tsx
new file mode 100644
index 0000000..9b477a3
--- /dev/null
+++ b/web-services/apps/frontend/src/components/RequireAuth.tsx
@@ -0,0 +1,35 @@
+import { motion } from "motion/react";
+import { Link } from "react-router-dom";
+import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+
+interface RequireAuthProps {
+ children: React.ReactNode;
+ message?: string;
+}
+
+export function RequireAuth({
+ children,
+ message = "Please sign in to access this page.",
+}: RequireAuthProps) {
+ const { isAuthenticated } = useAuth();
+
+ if (isAuthenticated) return <>{children};
+
+ return (
+
+
+
+ {message}
+
+
+
+
+
+
+ );
+}
diff --git a/web-services/apps/frontend/src/components/Skeleton.tsx b/web-services/apps/frontend/src/components/Skeleton.tsx
new file mode 100644
index 0000000..76875ee
--- /dev/null
+++ b/web-services/apps/frontend/src/components/Skeleton.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+ className?: string;
+ variant?: "pulse" | "shimmer";
+}
+
+export function Skeleton({ className, variant = "shimmer" }: SkeletonProps) {
+ return (
+
+ );
+}
diff --git a/web-services/apps/frontend/src/components/WSConnectionDot.tsx b/web-services/apps/frontend/src/components/WSConnectionDot.tsx
new file mode 100644
index 0000000..aa435f7
--- /dev/null
+++ b/web-services/apps/frontend/src/components/WSConnectionDot.tsx
@@ -0,0 +1,41 @@
+import { motion } from "motion/react";
+import { useWSConnectionStatus } from "@/lib/useIndexerEvents";
+
+const dotColors: Record
= {
+ connected: "bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,0.5)]",
+ connecting: "bg-amber-500 shadow-[0_0_6px_rgba(245,158,11,0.5)]",
+ disconnected: "bg-red-500 shadow-[0_0_6px_rgba(239,68,68,0.5)]",
+};
+
+const labels: Record = {
+ connected: "Connected",
+ connecting: "Connecting…",
+ disconnected: "Disconnected",
+};
+
+export function WSConnectionDot() {
+ const status = useWSConnectionStatus();
+
+ return (
+
+
+
+ {labels[status]}
+
+
+ );
+}
diff --git a/web-services/apps/frontend/src/components/ui/badge.tsx b/web-services/apps/frontend/src/components/ui/badge.tsx
index 72b073b..38692e7 100644
--- a/web-services/apps/frontend/src/components/ui/badge.tsx
+++ b/web-services/apps/frontend/src/components/ui/badge.tsx
@@ -32,10 +32,9 @@ function Badge({
...props
}: React.ComponentProps<"span"> &
VariantProps & { asChild?: boolean }) {
- const Comp = asChild ? Slot : "span";
+ const Comp: React.ElementType = asChild ? Slot : "span";
return (
- // @ts-expect-error Slot component has incompatible props with span
& {
asChild?: boolean;
}) {
- const Comp = asChild ? Slot : "button";
+ const Comp: React.ElementType = asChild ? Slot : "button";
return (
- // @ts-expect-error Slot component has incompatible props with button
{
onConfirmed: async () => {
setTxStatus("confirmed");
try {
- const res = await axios.post(
- `${BACKEND_URL}/vm/topup`,
- {
- id: vm.id,
- instanceId: vm.instanceId,
- amount: topUpAmount,
- additionalEscrowDuration,
- },
- {
- headers: {
- "Content-Type": "application/json",
- Authorization: `${localStorage.getItem("token")}`,
- },
- },
- );
+ const res = await api.post("/vm/topup", {
+ id: vm.id,
+ instanceId: vm.instanceId,
+ amount: topUpAmount,
+ additionalEscrowDuration,
+ });
if (res.status === 200) {
toast.success("Escrow balance topped up successfully", {
position: "top-right",
@@ -194,13 +184,19 @@ export const BillingStatus = ({ vm }: { vm: VM }) => {
{topUpAmount.toFixed(3)} SOL
- {statusLabel && (
-
- {statusLabel}
-
- )}
+
+ {statusLabel && (
+
+ {statusLabel}
+
+ )}
+
diff --git a/web-services/apps/frontend/src/components/vmDetail/Overview.tsx b/web-services/apps/frontend/src/components/vmDetail/Overview.tsx
index ea00d82..a66d793 100644
--- a/web-services/apps/frontend/src/components/vmDetail/Overview.tsx
+++ b/web-services/apps/frontend/src/components/vmDetail/Overview.tsx
@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Copy, Monitor } from "lucide-react";
import type { VM } from "types/vm";
@@ -56,6 +56,8 @@ export const Overview = ({ vm }: { vm: VM }) => {
size="sm"
onClick={() => copyToClipboard(vm.ipAddress)}
className="h-6 w-6 p-0 cursor-pointer"
+ title="Copy IP address"
+ aria-label="Copy IP address"
>
@@ -80,6 +82,8 @@ export const Overview = ({ vm }: { vm: VM }) => {
size="sm"
onClick={() => copyToClipboard(vm.VMImage?.applicationUrl)}
className="h-6 w-6 p-0 cursor-pointer"
+ title="Copy application URL"
+ aria-label="Copy application URL"
>
diff --git a/web-services/apps/frontend/src/components/vmDetail/SSH.tsx b/web-services/apps/frontend/src/components/vmDetail/SSH.tsx
index f0abc92..251946e 100644
--- a/web-services/apps/frontend/src/components/vmDetail/SSH.tsx
+++ b/web-services/apps/frontend/src/components/vmDetail/SSH.tsx
@@ -45,6 +45,8 @@ export const SSH = ({ vm }: { vm: VM }) => {
onClick={() =>
copyToClipboard(`ssh-keygen -R ${vm.ipAddress}`)
}
+ title="Copy command"
+ aria-label="Copy command"
>
@@ -64,6 +66,8 @@ export const SSH = ({ vm }: { vm: VM }) => {
onClick={() =>
copyToClipboard(`chmod 600 ${vm.name}-key.pem`)
}
+ title="Copy command"
+ aria-label="Copy command"
>
@@ -84,6 +88,8 @@ export const SSH = ({ vm }: { vm: VM }) => {
`ssh -i ${vm.name}-key.pem axion@${vm.ipAddress}`,
)
}
+ title="Copy command"
+ aria-label="Copy command"
>
diff --git a/web-services/apps/frontend/src/components/vmDetail/Sidebar.tsx b/web-services/apps/frontend/src/components/vmDetail/Sidebar.tsx
index 8b146b4..4e3b7f7 100644
--- a/web-services/apps/frontend/src/components/vmDetail/Sidebar.tsx
+++ b/web-services/apps/frontend/src/components/vmDetail/Sidebar.tsx
@@ -1,11 +1,14 @@
import { motion } from "motion/react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Copy, Monitor } from "lucide-react";
+import { Copy, Link2, Monitor } from "lucide-react";
import type { VM } from "types/vm";
import { copyToClipboard } from "@/lib/utils";
+import { toast } from "sonner";
export const Sidebar = ({ vm }: { vm: VM }) => {
+ const vmUrl = `${window.location.origin}/vm/${vm.id}`;
+
return (
{
Copy IP Address
+
);
}
diff --git a/web-services/apps/frontend/src/pages/Admin.tsx b/web-services/apps/frontend/src/pages/Admin.tsx
index 2ababa8..ae1f752 100644
--- a/web-services/apps/frontend/src/pages/Admin.tsx
+++ b/web-services/apps/frontend/src/pages/Admin.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
-import { motion } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
import {
Card,
CardContent,
@@ -10,7 +10,7 @@ import {
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import {
@@ -31,12 +31,14 @@ import {
Server,
AlertCircle,
CheckCircle,
+ Check,
Clock,
ChevronLeft,
ChevronRight,
Loader2,
} from "lucide-react";
import { toast } from "sonner";
+import { useLoadingTimeout } from "@/hooks/useLoadingTimeout";
import type { VM } from "types/vm";
import {
FundVaultAccount,
@@ -46,9 +48,10 @@ import {
isVaultInitialized,
} from "@/lib/contract";
import { useAnchorWallet } from "@solana/wallet-adapter-react";
-import axios from "axios";
-import { ADMIN_KEY, BACKEND_URL } from "@/config";
+import { api } from "@/lib/api";
+import { ADMIN_KEY } from "@/config";
import { formatter } from "@/lib/FormatTime";
+import { Skeleton } from "@/components/Skeleton";
import { useIndexerEvents, type IndexerEvent } from "@/lib/useIndexerEvents";
import { clusterApiUrl, Connection } from "@solana/web3.js";
@@ -121,6 +124,7 @@ export function AdminPage() {
// Per-operation states
const [initOp, setInitOp] = useState(IDLE);
+ const [initSuccess, setInitSuccess] = useState(false);
const [fundOp, setFundOp] = useState(IDLE);
const [withdrawOp, setWithdrawOp] = useState(IDLE);
const [balanceOp, setBalanceOp] = useState(IDLE);
@@ -137,7 +141,10 @@ export function AdminPage() {
// Form states
const [fundVault, setFundVault] = useState({ amount: "" });
const [withdrawVault, setWithdrawVault] = useState({ amount: "" });
+ const [errors, setErrors] = useState>({});
const [vms, setVMs] = useState([]);
+ const [loadingVms, setLoadingVms] = useState(false);
+ const timedOut = useLoadingTimeout(loadingVms, 30000);
// Track pending signatures → which op they belong to
const pendingSigs = useRef void>>(
@@ -176,17 +183,21 @@ export function AdminPage() {
},
});
+ const fetchVMs = useCallback(async () => {
+ setLoadingVms(true);
+ try {
+ const res = await api.get(`/vm/getAll?adminKey=${wallet?.publicKey}`);
+ if (res.status === 200) setVMs(res.data || []);
+ } catch {
+ toast.error("Failed to load virtual machines");
+ }
+ setLoadingVms(false);
+ }, [wallet?.publicKey]);
+
useEffect(() => {
if (activeTab !== "vms") return;
- axios
- .get(`${BACKEND_URL}/vm/getAll?adminKey=${wallet?.publicKey}`, {
- headers: { Authorization: `${localStorage.getItem("token")}` },
- })
- .then((res) => {
- if (res.status === 200) setVMs(res.data || []);
- })
- .catch(() => toast.error("Failed to load virtual machines"));
- }, [activeTab, wallet?.publicKey]);
+ fetchVMs();
+ }, [activeTab, fetchVMs]);
// ── Helper: submit tx, show "submitted", wait for indexer event ──
function watchTx(
@@ -274,14 +285,18 @@ export function AdminPage() {
watchTx(res.signature, setInitOp, "Vault initialized successfully", () => {
setVaultBalance(0);
setVaultExists(true);
+ setInitSuccess(true);
+ setTimeout(() => setInitSuccess(false), 2000);
});
};
const handleFund = async () => {
+ const newErrors: Record = {};
if (!fundVault.amount || parseFloat(fundVault.amount) <= 0) {
- toast.error("Valid amount required");
- return;
+ newErrors.fundAmount = "Valid amount is required";
}
+ setErrors((prev) => ({ ...prev, ...newErrors }));
+ if (Object.keys(newErrors).length > 0) return;
setFundOp({ status: "submitted", message: "Signing transaction…" });
const res = await FundVaultAccount(wallet!, parseFloat(fundVault.amount));
if (!res?.success || !res.signature) {
@@ -300,10 +315,12 @@ export function AdminPage() {
};
const handleWithdraw = async () => {
- if (!withdrawVault.amount) {
- toast.error("Amount is required");
- return;
+ const newErrors: Record = {};
+ if (!withdrawVault.amount || parseFloat(withdrawVault.amount) <= 0) {
+ newErrors.withdrawAmount = "Valid amount is required";
}
+ setErrors((prev) => ({ ...prev, ...newErrors }));
+ if (Object.keys(newErrors).length > 0) return;
const amt = parseFloat(withdrawVault.amount);
if (vaultBalance !== null && amt > vaultBalance) {
toast.error("Insufficient vault balance");
@@ -382,11 +399,7 @@ export function AdminPage() {
);
};
- if (
- !wallet ||
- wallet.publicKey.toBase58() !== ADMIN_KEY ||
- !localStorage.getItem("token")
- ) {
+ if (wallet?.publicKey?.toBase58() !== ADMIN_KEY) {
return (
@@ -401,7 +414,10 @@ export function AdminPage() {
const busy = (op: OpState) => op.status === "submitted";
return (
-
+
@@ -457,302 +473,391 @@ export function AdminPage() {
- {/* ── Vault tab ─────────────────────────────────────────── */}
-
-
- {/* Initialize Vault */}
-
-
-
- Initialize Vault
-
-
- {vaultExists
- ? "Vault is already initialized"
- : "Create the platform vault account"}
-
-
-
-
-
-
-
-
- {/* Fund Vault */}
-
-
-
- Fund
- Vault
-
-
- Add funds to your vault account
-
-
-
-
-
-
- setFundVault({ ...fundVault, amount: e.target.value })
- }
- />
-
-
-
-
-
-
- {/* Withdraw Funds */}
-
-
-
- {" "}
- Withdraw Funds
-
-
- Withdraw funds from your vault to an address
-
-
-
-
-
-
- setWithdrawVault({
- ...withdrawVault,
- amount: e.target.value,
- })
- }
- />
-
-
-
-
-
-
- {/* Check Balance */}
-
-
-
- Check Balance
-
-
- View your current vault balance
-
-
-
-
-
-
-
-
-
- {/* ── VM tab ────────────────────────────────────────────── */}
-
- {vms.length === 0 ? (
-
- No virtual machines found.
-
- ) : (
-
-
-
- Virtual Machines (
- {vms.length} total)
-
-
- Monitor and manage all deployed virtual machines
-
-
-
-
-
-
-
- VM ID
- Name
- Status
- Type
- Region
- Resources
- IP Address
- Cost
- Duration
- Created At
-
-
-
- {paginatedVMs.map((vm) => (
-
-
- {vm.instanceId}
-
-
- {vm.name}
-
- {getStatusBadge(vm.status)}
- {vm.VMConfig.machineType}
- {vm.region}
-
- {vm.VMConfig.os}
-
- {vm.VMConfig.diskSize} GB
-
-
-
- {vm.ipAddress}
-
-
- {Number(vm.price).toFixed(6)} SOL
-
-
- {vm.endTime
- ? `${Math.floor((new Date(vm.endTime).getTime() - new Date(vm.createdAt).getTime()) / 60000)} min`
- : "N/A"}
-
-
- {formatter.format(new Date(vm.createdAt))}
-
-
- ))}
-
-
-
-
- Showing {startIndex + 1}–
- {Math.min(startIndex + itemsPerPage, totalItems)} of{" "}
- {totalItems} VMs
+
+ {activeTab === "vault" && (
+
+
+ {/* Initialize Vault */}
+
+
+
+ Initialize
+ Vault
+
+
+ {vaultExists
+ ? "Vault is already initialized"
+ : "Create the platform vault account"}
+
+
+
+
+
+
+
+
+ {/* Fund Vault */}
+
+
+
+ {" "}
+ Fund Vault
+
+
+ Add funds to your vault account
+
+
+
+
+
+
{
+ setFundVault({
+ ...fundVault,
+ amount: e.target.value,
+ });
+ setErrors((prev) => ({ ...prev, fundAmount: "" }));
+ }}
+ />
+ {errors.fundAmount && (
+
+ {errors.fundAmount}
+
+ )}
+
+
+ {/* Withdraw Funds */}
+
+
+
+ {" "}
+ Withdraw Funds
+
+
+ Withdraw funds from your vault to an address
+
+
+
+
+
+
{
+ setWithdrawVault({
+ ...withdrawVault,
+ amount: e.target.value,
+ });
+ setErrors((prev) => ({
+ ...prev,
+ withdrawAmount: "",
+ }));
+ }}
+ />
+ {errors.withdrawAmount && (
+
+ {errors.withdrawAmount}
+
+ )}
-
- {Array.from(
- { length: Math.min(5, totalPages) },
- (_, i) => i + 1,
- ).map((page) => (
-
- ))}
- {totalPages > 5 && (
+
+
+
+
+
+ {/* Check Balance */}
+
+
+
+ Check
+ Balance
+
+
+ View your current vault balance
+
+
+
+
+
+
+
+
+
+ )}
+ {activeTab === "vms" && (
+
+ {timedOut ? (
+
+
+ Loading is taking longer than expected. Please try again.
+
+
+
+
+
+
+ {[...Array(10)].map((_, i) => (
+
+
+
+ ))}
+
+
+
+ {[...Array(3)].map((_, row) => (
+
+ {[...Array(10)].map((_, cell) => (
+
+
+
+ ))}
+
+ ))}
+
+
+
+
+
+
+
+ VM ID
+ Name
+ Status
+ Type
+ Region
+ Resources
+ IP Address
+ Cost
+ Duration
+ Created At
+
+
+
+ {paginatedVMs.map((vm) => (
+
+
+ {vm.instanceId}
+
+
+ {vm.name}
+
+
+ {getStatusBadge(vm.status)}
+
+
+ {vm.VMConfig.machineType}
+
+ {vm.region}
+
+ {vm.VMConfig.os}
+
+ {vm.VMConfig.diskSize} GB
+
+
+
+ {vm.ipAddress}
+
+
+ {Number(vm.price).toFixed(6)} SOL
+
+
+ {vm.endTime
+ ? `${Math.floor((new Date(vm.endTime).getTime() - new Date(vm.createdAt).getTime()) / 60000)} min`
+ : "N/A"}
+
+
+ {formatter.format(new Date(vm.createdAt))}
+
+
+ ))}
+
+
+
+
+
+ Showing {startIndex + 1}–
+ {Math.min(startIndex + itemsPerPage, totalItems)} of{" "}
+ {totalItems} VMs
+
+
+ {Array.from(
+ { length: Math.min(5, totalPages) },
+ (_, i) => i + 1,
+ ).map((page) => (
+
+ ))}
+ {totalPages > 5 && (
+ <>
+ …
+
+
+ )}
+
-
- )}
-
-
-
+ )}
+
+
+ )}
+
)}
-
+
-
+
diff --git a/web-services/apps/frontend/src/pages/Billing.tsx b/web-services/apps/frontend/src/pages/Billing.tsx
index d59677d..07658fa 100644
--- a/web-services/apps/frontend/src/pages/Billing.tsx
+++ b/web-services/apps/frontend/src/pages/Billing.tsx
@@ -1,116 +1,93 @@
import { motion } from "motion/react";
import { useWallet } from "@solana/wallet-adapter-react";
-import { Link } from "react-router-dom";
-
+import { BackgroundGlow } from "@/components/BackgroundGlow";
export default function Billing() {
const { publicKey } = useWallet();
- if (!publicKey || !localStorage.getItem("token")) {
- return (
-
-
-
- Sign in to view billing
-
-
- Sign in →
-
-
-
- );
- }
-
return (
-
-
+
+
+
+
+
+
+
+
+
+ Billing
+
+
+
+
+
+ Transactions
+
+
+
+
+
+
+ {[
+ {
+ label: "Total spent",
+ value: "—",
+ color: "text-zinc-900 dark:text-white",
+ },
+ { label: "Total earned", value: "—", color: "text-emerald-500" },
+ {
+ label: "Wallet",
+ value: `${publicKey?.toBase58()?.slice(0, 4) ?? "…"}…${publicKey?.toBase58()?.slice(-4) ?? ""}`,
+ color: "text-zinc-500 dark:text-zinc-400",
+ },
+ ].map((s) => (
+
+
+ {s.label}
+
+
+ {s.value}
+
+
+ ))}
+
-
-
-
-
- Billing
+
+ Activity
+
+
+ No transactions yet. Rent a VM or host a machine to get started.
+
+
-
-
-
- Transactions
-
-
-
-
-
- {[
- {
- label: "Total spent",
- value: "—",
- color: "text-zinc-900 dark:text-white",
- },
- { label: "Total earned", value: "—", color: "text-emerald-500" },
- {
- label: "Wallet",
- value: `${publicKey.toBase58().slice(0, 4)}…${publicKey.toBase58().slice(-4)}`,
- color: "text-zinc-500 dark:text-zinc-400",
- },
- ].map((s) => (
-
-
- {s.label}
-
-
- {s.value}
-
-
- ))}
-
-
-
-
- Activity
-
-
-
- No transactions yet. Rent a VM or host a machine to get started.
-
-
-
+
);
}
diff --git a/web-services/apps/frontend/src/pages/Blog.tsx b/web-services/apps/frontend/src/pages/Blog.tsx
index af54716..3a39acc 100644
--- a/web-services/apps/frontend/src/pages/Blog.tsx
+++ b/web-services/apps/frontend/src/pages/Blog.tsx
@@ -1,44 +1,46 @@
import { motion } from "motion/react";
+import { BackgroundGlow } from "@/components/BackgroundGlow";
export default function Blog() {
return (
-
-
-
-
-
-
-
- Blog
-
-
-
-
+
+
+
+
+
- Updates & insights
-
-
-
-
-
- No posts yet. Product updates and technical deep-dives coming soon.
-
+
+
+ Blog
+
+
+
+
+ Updates & insights
+
+
+
+
+
+ No posts yet. Product updates and technical deep-dives coming
+ soon.
+
+
+
);
}
diff --git a/web-services/apps/frontend/src/pages/Careers.tsx b/web-services/apps/frontend/src/pages/Careers.tsx
index 8a00942..5cbc14b 100644
--- a/web-services/apps/frontend/src/pages/Careers.tsx
+++ b/web-services/apps/frontend/src/pages/Careers.tsx
@@ -1,48 +1,49 @@
import { motion } from "motion/react";
+import { BackgroundGlow } from "@/components/BackgroundGlow";
export default function Careers() {
return (
-
-
-
-
-
-
-
- Careers
-
-
-
-
+
+
+
+
+
- Join the team
-
-
-
- We're building the future of decentralized compute. Check back soon
- for open roles.
-
-
-
-
- No open roles right now. Follow us on X for updates.
-
+
+
+ Careers
+
+
+
+
+ Join the team
+
+
+
+ We're building the future of decentralized compute. Check back
+ soon for open roles.
+
+
+
+
+ No open roles right now. Follow us on X for updates.
+
+
+
);
}
diff --git a/web-services/apps/frontend/src/pages/ClaimRewards.tsx b/web-services/apps/frontend/src/pages/ClaimRewards.tsx
index 29a0591..99bb83a 100644
--- a/web-services/apps/frontend/src/pages/ClaimRewards.tsx
+++ b/web-services/apps/frontend/src/pages/ClaimRewards.tsx
@@ -1,11 +1,14 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { motion, useInView } from "motion/react";
import { useWallet } from "@solana/wallet-adapter-react";
+import { BackgroundGlow } from "@/components/BackgroundGlow";
import { Link } from "react-router-dom";
import { type Machine } from "../../types/depinMachines";
-import { BACKEND_URL } from "@/config";
import { toast } from "sonner";
-import axios from "axios";
+import { RefreshCw, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useLoadingTimeout } from "@/hooks/useLoadingTimeout";
+import { api } from "@/lib/api";
// per-machine claim status
type ClaimStatus = "idle" | "submitted" | "confirmed" | "failed";
@@ -97,35 +100,41 @@ export default function ClaimRewards() {
const wallet = useWallet();
const [machines, setMachines] = useState
([]);
const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(false);
+ const timedOut = useLoadingTimeout(loading, 30000);
// per-machine claim status
const [claimStatuses, setClaimStatuses] = useState<
Record
>({});
- useEffect(() => {
- if (!wallet.publicKey) return;
- axios
- .get(
- `${BACKEND_URL}/user/depin/getAll?userPublicKey=${wallet.publicKey.toBase58()}`,
- { headers: { Authorization: `${localStorage.getItem("token")}` } },
- )
- .then((r) => setMachines(r.data))
- .catch(console.error)
- .finally(() => setLoading(false));
+ const fetchMachines = useCallback(async () => {
+ setLoading(true);
+ setError(false);
+ try {
+ const r = await api.get(
+ `/user/depin/getAll?userPublicKey=${wallet.publicKey?.toBase58() ?? ""}`,
+ );
+ setMachines(r.data);
+ } catch {
+ setError(true);
+ }
+ setLoading(false);
}, [wallet.publicKey]);
+ useEffect(() => {
+ fetchMachines();
+ }, [fetchMachines]);
+
const setStatus = (id: string, s: ClaimStatus) =>
setClaimStatuses((p) => ({ ...p, [id]: s }));
const handleClaim = async (id: string) => {
- if (!wallet.publicKey) return;
setStatus(id, "submitted");
try {
- const res = await axios.post(
- `${BACKEND_URL}/user/depin/claimSOL`,
- { id, pubKey: wallet.publicKey.toBase58() },
- { headers: { Authorization: `${localStorage.getItem("token")}` } },
- );
+ const res = await api.post("/user/depin/claimSOL", {
+ id,
+ pubKey: wallet.publicKey?.toBase58() ?? "",
+ });
if (res.status === 200) {
setStatus(id, "confirmed");
toast.success("Claim submitted. Rewards will arrive shortly.");
@@ -138,38 +147,17 @@ export default function ClaimRewards() {
}
};
- if (!wallet.publicKey || !localStorage.getItem("token")) {
- return (
-
-
-
- Sign in to claim rewards
-
-
- Sign in →
-
-
-
-
+
@@ -216,7 +204,16 @@ export default function ClaimRewards() {
{/* machines */}
- {loading ? (
+ {timedOut && !error ? (
+
+
+ Loading is taking longer than expected. Please try again.
+
+
+
+ ) : loading ? (
+ ) : error ? (
+
+
+
+ Failed to load machines.
+
+
+
) : machines.length === 0 ? (
diff --git a/web-services/apps/frontend/src/pages/Contact.tsx b/web-services/apps/frontend/src/pages/Contact.tsx
index be7438a..cb16e07 100644
--- a/web-services/apps/frontend/src/pages/Contact.tsx
+++ b/web-services/apps/frontend/src/pages/Contact.tsx
@@ -1,26 +1,26 @@
import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
+import { BackgroundGlow } from "@/components/BackgroundGlow";
export default function Contact() {
const [focused, setFocused] = useState(null);
const [sent, setSent] = useState(false);
const [vals, setVals] = useState({ name: "", email: "", message: "" });
+ const [errors, setErrors] = useState>({});
const inputCls = (field: string) =>
- `w-full bg-transparent border-0 border-b text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-zinc-600 py-3 focus:outline-none transition-colors duration-300 ${
+ `w-full bg-transparent border-0 border-b text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-zinc-600 py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 transition-colors duration-300 ${
focused === field
? "border-zinc-900 dark:border-white"
: "border-black/10 dark:border-white/10"
- }`;
+ } ${errors[field] ? "animate-shake" : ""}`;
return (
-
-
+
@@ -118,10 +118,21 @@ export default function Contact() {
) : (
{
e.preventDefault();
+ const newErrors: Record = {};
+ if (!vals.name) newErrors.name = "Name is required";
+ if (!vals.email) newErrors.email = "Email is required";
+ else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(vals.email))
+ newErrors.email = "Invalid email";
+ if (!vals.message)
+ newErrors.message = "Message is required";
+ setErrors(newErrors);
+ if (Object.keys(newErrors).length > 0) return;
setSent(true);
}}
className="space-y-8"
diff --git a/web-services/apps/frontend/src/pages/Dashboard.tsx b/web-services/apps/frontend/src/pages/Dashboard.tsx
index 5711fe6..7157b7b 100644
--- a/web-services/apps/frontend/src/pages/Dashboard.tsx
+++ b/web-services/apps/frontend/src/pages/Dashboard.tsx
@@ -1,27 +1,60 @@
-import { motion } from "motion/react";
+import { motion, AnimatePresence } from "motion/react";
import { useEffect, useState } from "react";
+import { useDebounce } from "@/hooks/useDebounce";
import { Button } from "@/components/ui/button";
+import { useLoadingTimeout } from "@/hooks/useLoadingTimeout";
import { Input } from "@/components/ui/input";
import { StatusBadge } from "@/components/StatusBadge";
-import { Plus, Search, ExternalLink } from "lucide-react";
+import {
+ Plus,
+ Search,
+ ExternalLink,
+ RefreshCw,
+ AlertCircle,
+} from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
-import axios from "axios";
-import { BACKEND_URL } from "@/config";
+import { api } from "@/lib/api";
import { type VM } from "../../types/vm";
import { useWallet } from "@solana/wallet-adapter-react";
import { formatter } from "@/lib/FormatTime";
import { getVmDetails } from "@/lib/vm";
import { toast } from "sonner";
import { useIndexerEvents } from "@/lib/useIndexerEvents";
+import { Skeleton } from "@/components/Skeleton";
+
+function SkeletonCard() {
+ return (
+
+
+
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+
+
+
+ ))}
+
+
+
+
+
-
- Please SignIn
-
- Please connect your wallet and signInto manage your virtual
- machines.
-
-
-
-
-
-
- {/* Header */}
+
@@ -137,10 +149,10 @@ export function Dashboard() {
- {/* Controls */}
@@ -151,6 +163,7 @@ export function Dashboard() {
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10"
+ aria-label="Search"
/>
@@ -169,98 +182,173 @@ export function Dashboard() {
- {filteredVMs.map((vm, index) => (
-
{
- if (vm.status === "RUNNING") {
- navigate(
- vm.provider === "LOCAL"
- ? `/depin/deployment/${vm.id}`
- : `/vm/${vm.id}`,
- );
- } else {
- toast.info("This VM is not running.", {
- position: "top-right",
- });
- }
- }}
- >
-
-
-
-
- {vm.name}
-
-
-
-
-
-
+ {error && (
+
+
+ Failed to load VMs
+
+ Something went wrong while fetching your virtual machines.
+
+
+
+ )}
-
-
-
- {vm.region}
-
- Region
-
-
-
- {vm.VMConfig?.os || vm.VMImage?.os || "N/A"}
-
- Operating System
-
-
-
- {vm.provider === "LOCAL"
- ? `${vm.VMImage?.cpu || 0}vCPUs • ${vm.VMImage?.ram || 0}Gb Ram`
- : `${getVmDetails(vm.VMConfig?.machineType).cpu}vCPUs • ${getVmDetails(vm.VMConfig?.machineType).ram}Gb Ram`}
-
-
Resources
+ {timedOut && !error && (
+
+
+ Loading is taking longer than expected. Please try again.
+
+
+
+ )}
+
+ {loading && !error && (
+
+ {[...Array(3)].map((_, i) => (
+
+ ))}
+
+ )}
+
+ {!loading && !error && (
+
+ {filteredVMs.map((vm, index) => (
+ {
+ if (vm.status === "RUNNING") {
+ navigate(
+ vm.provider === "LOCAL"
+ ? `/depin/deployment/${vm.id}`
+ : `/vm/${vm.id}`,
+ );
+ } else {
+ toast.info("This VM is not running.", {
+ position: "top-right",
+ });
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ if (vm.status === "RUNNING") {
+ navigate(
+ vm.provider === "LOCAL"
+ ? `/depin/deployment/${vm.id}`
+ : `/vm/${vm.id}`,
+ );
+ } else {
+ toast.info("This VM is not running.", {
+ position: "top-right",
+ });
+ }
+ }
+ }}
+ >
+
+
+
+
+ {vm.name}
+
+
+
+
+
-
-
- {Number(vm.price).toFixed(6)} SOL
-
-
Rented for
+
+
+
+
+ {vm.region}
+
+ Region
+
+
+
+ {vm.VMConfig?.os || vm.VMImage?.os || "N/A"}
+
+ Operating System
+
+
+
+ {vm.provider === "LOCAL"
+ ? `${vm.VMImage?.cpu || 0} vCPUs • ${vm.VMImage?.ram || 0} GB RAM`
+ : `${getVmDetails(vm.VMConfig?.machineType).cpu} vCPUs • ${getVmDetails(vm.VMConfig?.machineType).ram} GB RAM`}
+
+ Resources
+
+
+
+ {Number(vm.price).toFixed(6)} SOL
+
+ Rented for
+
-
-
- Created On: {formatter.format(new Date(vm.createdAt))}
-
- {vm.provider !== "LOCAL" && (
-
Instance Id: {vm.instanceId}
- )}
- {vm.provider === "LOCAL" && (
-
- Image Deployed: {vm.VMImage?.dockerImage}
+
+
+ Created On: {formatter.format(new Date(vm.createdAt))}
- )}
-
-
- ))}
-
+
+ ))}
+
+ )}
- {filteredVMs.length === 0 && (
+ {!loading && !error && filteredVMs.length === 0 && (
(null);
const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(false);
+ const timedOut = useLoadingTimeout(loading, 30000);
const isTerminated = vm?.status === "DELETED" || vm?.status === "TERMINATED";
useIndexerEvents({
@@ -38,36 +42,80 @@ export function DepinDeployment() {
},
});
- useEffect(() => {
+ const fetchDeployment = useCallback(async () => {
if (!id) return;
- const fetch = async () => {
- try {
- const res = await axios.get(
- `${BACKEND_URL}/vmInstance/getDetails?id=${id}`,
- { headers: { Authorization: `${localStorage.getItem("token")}` } },
- );
- setVm(res.data.vmInstance);
- } catch {
- toast.error("Failed to load deployment details", {
- position: "bottom-right",
- });
- }
- setLoading(false);
- };
- fetch();
+ setLoading(true);
+ setError(false);
+ try {
+ const res = await api.get(`/vmInstance/getDetails?id=${id}`);
+ setVm(res.data.vmInstance);
+ } catch {
+ setError(true);
+ toast.error("Failed to load deployment details", {
+ position: "bottom-right",
+ });
+ }
+ setLoading(false);
}, [id]);
+ useEffect(() => {
+ fetchDeployment();
+ }, [fetchDeployment]);
+
+ if (timedOut && !error) {
+ return (
+
+
+
+ Loading is taking longer than expected. Please try again.
+
+
+
+
-
- Loading deployment details...
-
+
);
}
- if (!vm) {
+ if (error) {
return (
- Deployment Not Found
+
+ Failed to load deployment
- This deployment does not exist or has been removed.
+ Something went wrong while fetching this deployment.
-
-
-
+
+
+
+
+
+
);
}
- if (!wallet || !localStorage.getItem("token")) {
+ if (!vm) {
return (
- Please Sign In
+ Deployment Not Found
- Connect your wallet and sign in to view your deployment.
+ This deployment does not exist or has been removed.
-
-
+
+
diff --git a/web-services/apps/frontend/src/pages/Docs.tsx b/web-services/apps/frontend/src/pages/Docs.tsx
index 066e10e..cc2bc29 100644
--- a/web-services/apps/frontend/src/pages/Docs.tsx
+++ b/web-services/apps/frontend/src/pages/Docs.tsx
@@ -1,5 +1,7 @@
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
+import { BackgroundGlow } from "@/components/BackgroundGlow";
+import { ReadingProgress } from "@/components/ReadingProgress";
import { Link } from "react-router-dom";
const NAV = [
@@ -245,17 +247,16 @@ export default function Docs() {
}, []);
return (
-
-
+
+
{/* top bar */}
-
+