From 6e22fe26cf14194b7d81aab67ff0bc8ffe903373 Mon Sep 17 00:00:00 2001
From: brown <brown@berachain.com>
Date: Fri, 13 Dec 2024 12:25:14 -0500
Subject: [PATCH 1/2] feat(hub): add small improvements to vp for configuration

---
 .../components/general-settings.tsx           | 46 ++++++++++++++-----
 .../components/validator-configuration.tsx    | 37 +++++++++------
 2 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/apps/hub/src/app/validators/components/general-settings.tsx b/apps/hub/src/app/validators/components/general-settings.tsx
index 5150753f8..1e6681c6a 100644
--- a/apps/hub/src/app/validators/components/general-settings.tsx
+++ b/apps/hub/src/app/validators/components/general-settings.tsx
@@ -6,14 +6,14 @@ import {
   useValidatorOperatorAddress,
   useValidatorQueuedOperatorAddress,
 } from "@bera/berajs";
-import { depositContractAddress } from "@bera/config";
+import { blockExplorerUrl, depositContractAddress } from "@bera/config";
 import { useTxn } from "@bera/shared-ui";
 import { Button } from "@bera/ui/button";
 import { Card, CardContent, CardFooter } from "@bera/ui/card";
 import { Checkbox } from "@bera/ui/checkbox";
 import { Icons } from "@bera/ui/icons";
 import { Input } from "@bera/ui/input";
-import { Address, zeroAddress } from "viem";
+import { Address, isAddress, zeroAddress } from "viem";
 
 export const GeneralSettings = ({
   validatorPublicKey,
@@ -107,6 +107,10 @@ export const GeneralSettings = ({
     });
   }, [validatorPublicKey]);
 
+  const isValidAddress = useMemo(() => {
+    return operatorInput ? isAddress(operatorInput) : true;
+  }, [operatorInput]);
+
   return (
     <div className="flex flex-col gap-6">
       {isQueuedOperatorAddress && (
@@ -119,13 +123,22 @@ export const GeneralSettings = ({
                   ? "Confirm Operator Address Change"
                   : "Queued Operator Address Change"}
               </div>
-              <span className="text-sm text-muted-foreground">
-                {`Operator Address is currently queued to change to ${
-                  queuedOperatorAddress?.[1]
-                }. You'll be able to apply the change at ${new Date(
-                  timeRemaining,
-                ).toLocaleString()}`}
-              </span>
+              <div>
+                <span className="text-sm text-muted-foreground">
+                  {"Operator Address is currently queued to change to "}
+                  <a
+                    href={`${blockExplorerUrl}/address/${queuedOperatorAddress?.[1]}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="font-semibold underline hover:text-primary"
+                  >
+                    {queuedOperatorAddress?.[1]}
+                  </a>
+                  {`. You'll be able to apply the change at ${new Date(
+                    timeRemaining,
+                  ).toLocaleString()}`}
+                </span>
+              </div>
             </div>
             <div className="mt-4 flex gap-2 self-end md:self-auto">
               <Button
@@ -159,7 +172,13 @@ export const GeneralSettings = ({
           <span className="mt-2 flex font-semibold">Operator Address</span>
           <Input
             type="input"
-            className="w-[300px]"
+            className={`w-[300px] ${
+              operatorInput
+                ? isValidAddress
+                  ? "border-green-500"
+                  : "border-red-500"
+                : ""
+            }`}
             value={operatorInput}
             onChange={(e) => setOperatorInput(e.target.value)}
           />
@@ -172,7 +191,10 @@ export const GeneralSettings = ({
               checked={confirmed}
               onCheckedChange={() => setConfirmed(!confirmed)}
             />
-            <span className="mr-2 text-sm text-muted-foreground">
+            <span
+              className="mr-2 cursor-pointer text-sm text-muted-foreground"
+              onClick={() => setConfirmed(!confirmed)}
+            >
               I understand that changing operator address is equivalent to
               handing over ownership rights to the validator
             </span>
@@ -180,7 +202,7 @@ export const GeneralSettings = ({
           <Button
             className="flex w-[100px] self-center border border-border p-2"
             size={"sm"}
-            disabled={!confirmed || isApplyingOperatorChange}
+            disabled={!confirmed || isApplyingOperatorChange || !isValidAddress}
             onClick={handleSaveSettings}
           >
             {"Save"}
diff --git a/apps/hub/src/app/validators/components/validator-configuration.tsx b/apps/hub/src/app/validators/components/validator-configuration.tsx
index ebc6e5e91..30d56793d 100644
--- a/apps/hub/src/app/validators/components/validator-configuration.tsx
+++ b/apps/hub/src/app/validators/components/validator-configuration.tsx
@@ -1,9 +1,13 @@
 import { useCallback } from "react";
+import Link from "next/link";
 import { Card } from "@bera/ui/card";
+import { Icons } from "@bera/ui/icons";
 import { Address } from "viem";
+
+import { GeneralSettings } from "./general-settings";
 import { QueuedRewardAllocationConfiguration } from "./queued-reward-allocation-configuration";
 import { RewardAllocationConfiguration } from "./reward-allocation-configuration";
-import { GeneralSettings } from "./general-settings";
+
 export const ValidatorConfiguration = ({
   validatorPublicKey,
 }: {
@@ -20,19 +24,24 @@ export const ValidatorConfiguration = ({
       />
       <RewardAllocationConfiguration validatorPublicKey={validatorPublicKey} />
       <GeneralSettings validatorPublicKey={validatorPublicKey} />
-      <Card className="flex flex-col gap-1 p-4">
-        <span className="text-2xl font-bold">Update your metadata</span>
-        <span className="text-sm text-muted-foreground">
-          Configure and modify your validator metadata
-        </span>
-        <div
-          className="mt-2 flex cursor-pointer items-center text-xl font-bold mb-1"
-          onClick={handleUpdateMetadata}
-        >
-          {"Coming Soon"}
-          {/* <Icons.arrowRight className="ml-1 cursor-pointer" /> */}
-        </div>
-      </Card>
+      <Link href={"https://github.com/berachain/default-lists"}>
+        <Card className="flex flex-col gap-1 p-4">
+          <div className="flex-center flex">
+            <span className="text-2xl font-bold">
+              Update your validator metadata
+            </span>
+            <div
+              className="mb-1 mt-1 flex cursor-pointer items-center text-xl font-bold"
+              onClick={handleUpdateMetadata}
+            >
+              <Icons.arrowRight className="ml-1 cursor-pointer" />
+            </div>
+          </div>
+          <span className="text-sm text-muted-foreground">
+            Configure and modify your validator metadata
+          </span>
+        </Card>
+      </Link>
     </div>
   );
 };

From eebe3f85cceb04fa2c75950d44a3f47283aed874 Mon Sep 17 00:00:00 2001
From: brown <brown@berachain.com>
Date: Fri, 13 Dec 2024 13:07:13 -0500
Subject: [PATCH 2/2] fix(hub): updates to vp configuration nit

---
 .../components/general-settings.tsx           | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/apps/hub/src/app/validators/components/general-settings.tsx b/apps/hub/src/app/validators/components/general-settings.tsx
index 1e6681c6a..e1dce8b65 100644
--- a/apps/hub/src/app/validators/components/general-settings.tsx
+++ b/apps/hub/src/app/validators/components/general-settings.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import {
   TransactionActionType,
   beaconDepositAbi,
+  truncateHash,
   useBeraJs,
   useValidatorOperatorAddress,
   useValidatorQueuedOperatorAddress,
@@ -12,7 +13,7 @@ import { Button } from "@bera/ui/button";
 import { Card, CardContent, CardFooter } from "@bera/ui/card";
 import { Checkbox } from "@bera/ui/checkbox";
 import { Icons } from "@bera/ui/icons";
-import { Input } from "@bera/ui/input";
+import { InputWithLabel } from "@bera/ui/input";
 import { Address, isAddress, zeroAddress } from "viem";
 
 export const GeneralSettings = ({
@@ -32,7 +33,7 @@ export const GeneralSettings = ({
     isLoading: isQueuedOperatorAddressLoading,
     refresh: refreshQueuedOperatorAddress,
   } = useValidatorQueuedOperatorAddress(validatorPublicKey);
-  const [operatorInput, setOperatorInput] = useState<string>(account || "");
+  const [operatorInput, setOperatorInput] = useState<string>("");
 
   const isQueuedOperatorAddress = useMemo(() => {
     if (
@@ -107,9 +108,13 @@ export const GeneralSettings = ({
     });
   }, [validatorPublicKey]);
 
-  const isValidAddress = useMemo(() => {
-    return operatorInput ? isAddress(operatorInput) : true;
-  }, [operatorInput]);
+  const isValidAddress = useMemo(
+    () =>
+      isAddress(operatorInput) &&
+      operatorInput !== zeroAddress &&
+      operatorInput !== account,
+    [operatorInput],
+  );
 
   return (
     <div className="flex flex-col gap-6">
@@ -170,17 +175,12 @@ export const GeneralSettings = ({
             Configure your operator address
           </span>
           <span className="mt-2 flex font-semibold">Operator Address</span>
-          <Input
-            type="input"
-            className={`w-[300px] ${
-              operatorInput
-                ? isValidAddress
-                  ? "border-green-500"
-                  : "border-red-500"
-                : ""
-            }`}
+          <InputWithLabel
             value={operatorInput}
+            placeholder={truncateHash("0x00000000000000")}
             onChange={(e) => setOperatorInput(e.target.value)}
+            className="w-[300px]"
+            error={!isValidAddress ? "Please enter a valid address" : undefined}
           />
         </CardContent>
         <CardFooter className="flex w-full justify-between border-t border-border pt-6">
@@ -202,6 +202,15 @@ export const GeneralSettings = ({
           <Button
             className="flex w-[100px] self-center border border-border p-2"
             size={"sm"}
+            title={
+              !confirmed
+                ? "Please confirm the change"
+                : isApplyingOperatorChange
+                  ? "Applying Operator Change"
+                  : !isValidAddress
+                    ? "Please enter a valid address"
+                    : undefined
+            }
             disabled={!confirmed || isApplyingOperatorChange || !isValidAddress}
             onClick={handleSaveSettings}
           >