chore: move technical home page widgets into a nerds card

getAlby · Jan 17, 2025 · 6da5fad · 6da5fad
1 parent 0706452
commit 6da5fad
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/frontend/src/components/home/widgets/NodeStatusWidget.tsx b/frontend/src/components/home/widgets/NodeStatusWidget.tsx
@@ -27,11 +27,11 @@ export function NodeStatusWidget() {
             {channels.filter((c) => c.active).length || 0} /{" "}
             {channels.filter((c) => c.active).length || 0}
           </p>
-          {/* <p className="text-muted-foreground text-xs mt-6">Connected Peers</p>
+          <p className="text-muted-foreground text-xs mt-6">Connected Peers</p>
           <p className="text-xl font-semibold">
             {peers.filter((p) => p.isConnected).length || 0} /{" "}
             {peers.filter((p) => p.isConnected).length || 0}
-          </p> */}
+          </p>
         </CardContent>
       </Card>
     </Link>

diff --git a/frontend/src/screens/Home.tsx b/frontend/src/screens/Home.tsx
@@ -18,6 +18,7 @@ import { useBalances } from "src/hooks/useBalances";
 import { useInfo } from "src/hooks/useInfo";
 import OnboardingChecklist from "src/screens/wallet/OnboardingChecklist";
 
+import React from "react";
 import albyGo from "src/assets/suggested-apps/alby-go.png";
 import zapplanner from "src/assets/suggested-apps/zapplanner.png";
 import { AppOfTheDayWidget } from "src/components/home/widgets/AppOfTheDayWidget";
@@ -46,6 +47,7 @@ function Home() {
   const { data: info } = useInfo();
   const { data: balances } = useBalances();
   const { data: albyMe } = useAlbyMe();
+  const [isNerd, setNerd] = React.useState(false);
 
   /* eslint-disable  @typescript-eslint/no-explicit-any */
   const extensionInstalled = (window as any).alby !== undefined;
@@ -182,9 +184,26 @@ function Home() {
         <div className="grid gap-5">
           <LatestUsedAppsWidget />
           <AppOfTheDayWidget />
-          <NodeStatusWidget />
-          <BlockHeightWidget />
-          <OnchainFeesWidget />
+
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>Stats for nerds</CardTitle>
+                <Button variant="secondary" onClick={() => setNerd(!isNerd)}>
+                  {isNerd ? "Hide" : "Show"}
+                </Button>
+              </div>
+            </CardHeader>
+            {isNerd && (
+              <CardContent>
+                <div className="grid gap-5">
+                  <NodeStatusWidget />
+                  <BlockHeightWidget />
+                  <OnchainFeesWidget />
+                </div>
+              </CardContent>
+            )}
+          </Card>
         </div>
       </div>
     </>