Merge pull request #263 from berachain/fix/vp-configuration-small-cha…

…nges Fix/vp configuration small changes
berachain · Dec 18, 2024 · ce2234d · ce2234d
2 parents a2e50f5 + eebe3f8
commit ce2234d
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 30 deletions.
diff --git a/apps/hub/src/app/validators/components/general-settings.tsx b/apps/hub/src/app/validators/components/general-settings.tsx
@@ -2,18 +2,19 @@ import { useCallback, useMemo, useState } from "react";
 import {
   TransactionActionType,
   beaconDepositAbi,
+  truncateHash,
   useBeraJs,
   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 { InputWithLabel } from "@bera/ui/input";
+import { Address, isAddress, zeroAddress } from "viem";
 
 export const GeneralSettings = ({
   validatorPublicKey,
@@ -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,6 +108,14 @@ export const GeneralSettings = ({
     });
   }, [validatorPublicKey]);
 
+  const isValidAddress = useMemo(
+    () =>
+      isAddress(operatorInput) &&
+      operatorInput !== zeroAddress &&
+      operatorInput !== account,
+    [operatorInput],
+  );
+
   return (
     <div className="flex flex-col gap-6">
       {isQueuedOperatorAddress && (
@@ -119,13 +128,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
@@ -157,11 +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]"
+          <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">
@@ -172,15 +191,27 @@ 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>
           </div>
           <Button
             className="flex w-[100px] self-center border border-border p-2"
             size={"sm"}
-            disabled={!confirmed || isApplyingOperatorChange}
+            title={
+              !confirmed
+                ? "Please confirm the change"
+                : isApplyingOperatorChange
+                  ? "Applying Operator Change"
+                  : !isValidAddress
+                    ? "Please enter a valid address"
+                    : undefined
+            }
+            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
@@ -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>
   );
 };