Noindex legacy redirect, farm-list lock status, themed ErrorBoundary (#227, #234, #235)

src/app/farm/FarmPoolRow.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import NextLink from "next/link";
-import { Button, Flex, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
 import { MetricColumn } from "./EarningRow";
 import { memo } from "react";
+import { useCountdown } from "@/hooks/useCountdown";
 
 type LivePoolRow = {
   id: string;
@@ -52,6 +53,12 @@ export const FarmPoolRow = memo(function FarmPoolRow({
   isNetworkMismatch,
   onDeposit,
 }: FarmPoolRowProps) {
+  // Issue #234: surface lock status here too, not just in "My Earnings" —
+  // a user browsing the full pool list shouldn't have to click into a pool
+  // they already have a position in just to see when it unlocks.
+  const hasStake = farm.lockedAmount > 0;
+  const countdown = useCountdown(farm.lockedAt + farm.lockPeriodSeconds * 1000);
+
   return (
     <Flex
       display={{ base: "flex", md: "flex" }}
@@ -89,6 +96,27 @@ export const FarmPoolRow = memo(function FarmPoolRow({
         value={farm.totalStakedLiquidity}
         minW="180px"
       />
+      {hasStake && (
+        <Box
+          display="block"
+          w={{ base: "full", md: "auto" }}
+          minW={{ md: "150px" }}
+          textAlign="center"
+          border="1px solid"
+          borderColor="app.border"
+          borderRadius="2xl"
+          bg="app.inputBg"
+          px={3}
+          py={3}
+        >
+          <Text fontSize="2xs" color="app.muted" textTransform="uppercase">
+            Unlock status
+          </Text>
+          <Text fontSize="lg" fontWeight="bold">
+            {countdown.label}
+          </Text>
+        </Box>
+      )}
       {isConnected && (
         <Button
           borderRadius="3xl"

src/app/leaderbord/RedirectClient.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+/** Old URL; static hosts keep this route as a client redirect. */
+export default function RedirectClient() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace("/leaderboard");
+  }, [router]);
+  return null;
+}

src/app/leaderbord/page.tsx

@@ -1,13 +1,13 @@
-"use client";
+import type { Metadata } from "next";
+import RedirectClient from "./RedirectClient";
 
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+// Issue #227: /leaderbord is a typo'd legacy URL kept only as a redirect to
+// /leaderboard. Keep it out of search indexes so the typo variant doesn't
+// compete with the real page.
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
 
-/** Old URL; static hosts keep this route as a client redirect. */
 export default function LeaderbordRedirect() {
-  const router = useRouter();
-  useEffect(() => {
-    router.replace("/leaderboard");
-  }, [router]);
-  return null;
+  return <RedirectClient />;
 }

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -59,38 +59,42 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
           display="flex"
           alignItems="center"
           justifyContent="center"
-          bg="black"
-          color="white"
+          bg="app.bg"
+          color="app.text"
           p={4}
         >
           <VStack spacing={6} textAlign="center">
             <Heading size="lg">Something went wrong</Heading>
-            <Text color="gray.400" maxW="md">
+            <Text color="app.muted" maxW="md">
               We encountered an unexpected error. Please try again.
             </Text>
             {process.env.NODE_ENV === "development" && (
               <Box
-                bg="gray.900"
+                bg="app.surface"
+                border="1px solid"
+                borderColor="app.border"
                 p={4}
-                borderRadius="md"
+                borderRadius="card"
                 w="100%"
                 maxW="md"
                 textAlign="left"
                 fontSize="sm"
                 fontFamily="mono"
                 overflowX="auto"
               >
-                <Text color="red.400" fontWeight="bold" mb={2}>
+                <Text color="app.errorFg" fontWeight="bold" mb={2}>
                   {error?.name}: {error?.message}
                 </Text>
-                <Text color="gray.400" whiteSpace="pre-wrap" fontSize="xs">
+                <Text color="app.muted" whiteSpace="pre-wrap" fontSize="xs">
                   {error?.stack}
                 </Text>
               </Box>
             )}
             <Button
               onClick={this.retry}
-              colorScheme="blue"
+              bg="app.accent"
+              color="app.onAccent"
+              _hover={{ opacity: 0.9 }}
               size="lg"
               borderRadius="full"
             >
@@ -126,9 +130,11 @@ export function ErrorBoundarySection({
           <Box
             w="100%"
             p={6}
-            borderRadius="md"
-            bg="red.900"
-            color="white"
+            borderRadius="card"
+            border="1px solid"
+            borderColor="app.errorFg"
+            bg="app.errorBg"
+            color="app.errorFg"
             textAlign="center"
           >
             <Heading size="sm" mb={2}>
@@ -138,8 +144,10 @@ export function ErrorBoundarySection({
             <Button
               onClick={retry}
               size="sm"
-              colorScheme="red"
               variant="outline"
+              borderColor="app.errorFg"
+              color="app.errorFg"
+              _hover={{ bg: "app.errorFg", color: "app.onAccent" }}
             >
               Retry
             </Button>