chore: connection status

This commit is contained in:
Danish Arora 2024-11-11 16:05:14 +07:00
parent 0d86689931
commit baa5145ff1
No known key found for this signature in database
GPG Key ID: 1C6EF37CDAE1426E
3 changed files with 65 additions and 4 deletions

View File

@ -12,6 +12,7 @@ import { BlockPayload, getMessagesFromStore, subscribeToFilter } from './lib/wak
import TelemetryOptIn from './components/TelemetryOptIn'; import TelemetryOptIn from './components/TelemetryOptIn';
import TelemetryPage from './components/TelemetryPage'; import TelemetryPage from './components/TelemetryPage';
import SignSharedChain from './components/Chain/SignSharedChain' import SignSharedChain from './components/Chain/SignSharedChain'
import ConnectionStatus from '@/components/ConnectionStatus';
type Status = 'success' | 'in-progress' | 'error'; type Status = 'success' | 'in-progress' | 'error';
@ -132,6 +133,9 @@ function App() {
return ( return (
<div className="min-h-screen bg-background text-foreground"> <div className="min-h-screen bg-background text-foreground">
<Header wakuStatus={wakuStatus} /> <Header wakuStatus={wakuStatus} />
<div className="md:hidden">
<ConnectionStatus filter={wakuStatus.filter} store={wakuStatus.store} />
</div>
<main className="container mx-auto px-4 py-4 md:py-8 max-w-7xl"> <main className="container mx-auto px-4 py-4 md:py-8 max-w-7xl">
<Routes> <Routes>
<Route path="" element={<Home />} /> <Route path="" element={<Home />} />

View File

@ -0,0 +1,53 @@
import React from 'react';
import { Card } from "@/components/ui/card";
import { Loader2, CheckCircle2, XCircle } from "lucide-react";
import type { Status } from '@/App';
interface ConnectionStatusProps {
filter: Status;
store: Status;
}
const StatusIndicator: React.FC<{ status: Status; label: string }> = ({ status, label }) => {
const getStatusIcon = () => {
switch (status) {
case 'success':
return <CheckCircle2 className="h-4 w-4 text-green-500" />;
case 'error':
return <XCircle className="h-4 w-4 text-red-500" />;
case 'in-progress':
return <Loader2 className="h-4 w-4 animate-spin text-yellow-500" />;
}
};
const getStatusColor = () => {
switch (status) {
case 'success':
return 'bg-green-500/10 text-green-500';
case 'error':
return 'bg-red-500/10 text-red-500';
case 'in-progress':
return 'bg-yellow-500/10 text-yellow-500';
}
};
return (
<div className={`flex items-center gap-2 px-2 py-1 rounded-full ${getStatusColor()}`}>
{getStatusIcon()}
<span className="text-xs font-medium">{label}</span>
</div>
);
};
const ConnectionStatus: React.FC<ConnectionStatusProps> = ({ filter, store }) => {
return (
<Card className="fixed bottom-4 left-4 right-4 md:static md:bottom-auto md:left-auto p-2 bg-background/80 backdrop-blur-sm border shadow-lg z-50 md:z-auto">
<div className="flex flex-row justify-around md:justify-start md:gap-4">
<StatusIndicator status={filter} label="Filter" />
<StatusIndicator status={store} label="Store" />
</div>
</Card>
);
};
export default ConnectionStatus;

View File

@ -1,6 +1,5 @@
import * as React from "react" import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog" import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Cross2Icon } from "@radix-ui/react-icons"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
@ -36,9 +35,14 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200", "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200",
"rounded-lg", "p-4 md:p-6",
"max-h-[85vh] overflow-y-auto", "rounded-t-lg md:rounded-lg",
"max-h-[95vh] md:max-h-[85vh]",
"w-full md:max-w-lg",
"bottom-0 md:bottom-auto",
"overflow-y-auto",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
className className
)} )}
{...props} {...props}