fix: added new back button

ssvlabs · Jan 14, 2025 · 4005a8d · 4005a8d
1 parent e176380
commit 4005a8d
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 60 deletions.
diff --git a/src/app/routes/create-cluster/select-operators.tsx b/src/app/routes/create-cluster/select-operators.tsx
@@ -25,6 +25,7 @@ import { OperatorPickerFilter } from "@/components/operator/operator-picker/oper
 import { useOrdering } from "@/hooks/use-ordering.ts";
 import { useReshareDkg } from "@/hooks/use-reshare-dkg.ts";
 import { useBulkActionContext } from "@/guard/bulk-action-guard.tsx";
+import { useClusterPageParams } from "@/hooks/cluster/use-cluster-page-params.ts";
 
 export type SelectOperatorsProps = {
   // TODO: Add props or remove this type
@@ -87,6 +88,7 @@ export const SelectOperators: FCProps = ({ className, ...props }) => {
   const cluster = useCluster(hash, {
     enabled: isClusterSizeMet,
   });
+  const { clusterHash } = useClusterPageParams();
 
   const isClusterExists =
     reshareFlow.operators.length === 0 &&
@@ -111,14 +113,21 @@ export const SelectOperators: FCProps = ({ className, ...props }) => {
     navigate(nextRoute);
   };
 
+  const stepBack = () => {
+    useRegisterValidatorContext.resetState();
+    useBulkActionContext.state.dkgReshareState.proofFiles.files = [];
+  };
+
   return (
-    <Container variant="vertical" className="py-6 " size="xl">
-      <NavigateBackBtn
-        onClick={() => {
-          useRegisterValidatorContext.resetState();
-          useBulkActionContext.state.dkgReshareState.proofFiles.files = [];
-        }}
-      />
+    <Container
+      variant="vertical"
+      className="py-6 "
+      size="xl"
+      backButtonLabel={reshareFlow.operators.length ? "Proofs" : ""}
+      navigateRoutePath={`/clusters/${clusterHash}/reshare`}
+      onBackButtonClick={stepBack}
+    >
+      {!reshareFlow.operators.length && <NavigateBackBtn />}
       <div className="flex items-stretch flex-1 gap-6 w-full">
         <Card className={cn(className, "flex flex-col flex-[2.2]")} {...props}>
           <Text variant="headline4">

diff --git a/src/app/routes/dashboard/clusters/cluster/cluster.tsx b/src/app/routes/dashboard/clusters/cluster/cluster.tsx
@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Container } from "@/components/ui/container";
 import { Divider } from "@/components/ui/divider";
-import { NavigateBackBtn } from "@/components/ui/navigate-back-btn";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spacer } from "@/components/ui/spacer";
 import { Text } from "@/components/ui/text";
@@ -25,7 +24,6 @@ import { useAccount } from "@/hooks/account/use-account";
 
 export const Cluster: FC = () => {
   const account = useAccount();
-
   const { clusterHash } = useClusterPageParams();
 
   const { cluster, isLiquidated, balance } = useClusterState(clusterHash!, {
@@ -54,9 +52,13 @@ export const Cluster: FC = () => {
   const { data: runway } = useClusterRunway(clusterHash!);
 
   return (
-    <Container variant="vertical" size="xl" className="min-h-full py-6">
-      <NavigateBackBtn />
-
+    <Container
+      variant="vertical"
+      size="xl"
+      className="min-h-full py-6"
+      navigateRoutePath={"/clusters"}
+      backButtonLabel={"Clusters"}
+    >
       <div className="grid grid-cols-4 gap-6 w-full">
         {cluster.data?.operators.map((operatorId) => (
           <OperatorStatCard

diff --git a/src/app/routes/reshare-dkg/reshare-dkg.tsx b/src/app/routes/reshare-dkg/reshare-dkg.tsx
@@ -13,7 +13,6 @@ import { useForm } from "react-hook-form";
 import type { Address } from "viem";
 import { getAddress, isAddress } from "viem";
 import { Input } from "@/components/ui/input.tsx";
-import { NavigateBackBtn } from "@/components/ui/navigate-back-btn.tsx";
 import { useState } from "react";
 import { useReshareSignaturePayload } from "@/hooks/operator/use-reshare-signature-payload.ts";
 import { isContractWallet, useAccount } from "@/hooks/account/use-account.ts";
@@ -64,7 +63,6 @@ const ReshareDkg = () => {
   const account = useAccount();
   const reshareContext = useReshareDkg();
   const [copyState, copy] = useCopyToClipboard();
-
   const form = useForm<{
     ownerAddress: Address | string;
     withdrawAddress: Address | string;
@@ -120,27 +118,30 @@ const ReshareDkg = () => {
     account.address !== getAddress(form.watch().ownerAddress || "0x");
 
   return (
-    <Container variant="vertical" size="lg" className="py-5">
-      <NavigateBackBtn
-        onClick={() => {
-          if (
-            useRegisterValidatorContext.state.selectedOperatorsIds.length === 0
-          ) {
-            const operators = context.dkgReshareState.newOperators.length
-              ? context.dkgReshareState.newOperators
-              : context.dkgReshareState.operators;
-            useRegisterValidatorContext.state.clusterSize =
-              operators.length as ClusterSize;
-            operators.forEach(({ id }) => {
-              useRegisterValidatorContext.state.selectedOperatorsIds = [
-                ...useRegisterValidatorContext.state.selectedOperatorsIds,
-                id,
-              ];
-            });
-          }
-        }}
-        to={`/clusters/${clusterHash}/reshare/select-operators`}
-      />
+    <Container
+      variant="vertical"
+      size="lg"
+      className="py-5"
+      backButtonLabel={"Pick Cluster"}
+      navigateRoutePath={`/clusters/${clusterHash}/reshare/select-operators`}
+      onBackButtonClick={() => {
+        if (
+          useRegisterValidatorContext.state.selectedOperatorsIds.length === 0
+        ) {
+          const operators = context.dkgReshareState.newOperators.length
+            ? context.dkgReshareState.newOperators
+            : context.dkgReshareState.operators;
+          useRegisterValidatorContext.state.clusterSize =
+            operators.length as ClusterSize;
+          operators.forEach(({ id }) => {
+            useRegisterValidatorContext.state.selectedOperatorsIds = [
+              ...useRegisterValidatorContext.state.selectedOperatorsIds,
+              id,
+            ];
+          });
+        }
+      }}
+    >
       <SignatureStep
         activateStep={activateStep}
         currentStep={currentStep}

diff --git a/src/app/routes/reshare-dkg/reshare.tsx b/src/app/routes/reshare-dkg/reshare.tsx
@@ -3,7 +3,6 @@ import { UnhealthyOperatorsList } from "@/components/offline-generation/unhealth
 import { Button } from "@/components/ui/button.tsx";
 import { Link } from "react-router-dom";
 import { useOperatorsDKGHealth } from "@/hooks/operator/use-operator-dkg-health.ts";
-import { NavigateBackBtn } from "@/components/ui/navigate-back-btn.tsx";
 import { Container } from "@/components/ui/container";
 import { Card } from "@/components/ui/card";
 import { Text } from "@/components/ui/text.tsx";
@@ -12,6 +11,7 @@ import { SsvLoader } from "@/components/ui/ssv-loader.tsx";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils/tw.ts";
 import { isContractWallet } from "@/hooks/account/use-account.ts";
+import { useClusterPageParams } from "@/hooks/cluster/use-cluster-page-params.ts";
 
 const Reshare = () => {
   const context = useBulkActionContext();
@@ -28,6 +28,7 @@ const Reshare = () => {
         ({ isHealthy, isMismatchId, isOutdated }) =>
           isHealthy && !isMismatchId && !isOutdated,
       );
+  const { clusterHash } = useClusterPageParams();
 
   if (health.isLoading) {
     return (
@@ -48,8 +49,13 @@ const Reshare = () => {
   return reshareAccepted ? (
     <ReshareDkg />
   ) : (
-    <Container size="lg" variant="vertical" className="py-6">
-      <NavigateBackBtn by="path" to="../select-operators" />
+    <Container
+      size="lg"
+      variant="vertical"
+      className="py-6"
+      backButtonLabel={"Pick Cluster"}
+      navigateRoutePath={`/clusters/${clusterHash}/reshare/select-operators`}
+    >
       <Card className="w-full">
         <Text variant="headline4">
           Pick the cluster of network operators to run your validator

diff --git a/src/app/routes/reshare-dkg/upload-proofs.tsx b/src/app/routes/reshare-dkg/upload-proofs.tsx
@@ -1,5 +1,4 @@
 import { Container } from "@/components/ui/container.tsx";
-import { NavigateBackBtn } from "@/components/ui/navigate-back-btn.tsx";
 import { Card, CardHeader } from "@/components/ui/card.tsx";
 import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
 import { Button } from "@/components/ui/button.tsx";
@@ -17,13 +16,16 @@ import { useBulkActionContext } from "@/guard/bulk-action-guard.tsx";
 import { useRegisterValidatorContext } from "@/guard/register-validator-guard.tsx";
 import { useEffect } from "react";
 import type { ClusterSize } from "@/components/operator/operator-picker/operator-cluster-size-picker.tsx";
+import { ClusterBackBtnHeader } from "@/components/ui/cluster-back-btn-header.tsx";
+import { useClusterPageParams } from "@/hooks/cluster/use-cluster-page-params.ts";
 
 const UploadProofs = () => {
   const navigate = useNavigate();
   const { state } = useBulkActionContext;
   const registerValidatorContext = useRegisterValidatorContext;
   const context = useBulkActionContext();
   const { operators, proofsQuery } = useReshareDkg();
+  const { clusterHash } = useClusterPageParams();
 
   const nextStep = () => {
     registerValidatorContext.state.clusterSize =
@@ -52,11 +54,12 @@ const UploadProofs = () => {
       variant="vertical"
       size="lg"
       className="p-6 font-medium w-[1096px]"
+      backButtonLabel={<ClusterBackBtnHeader />}
+      navigateRoutePath={`/clusters/${clusterHash}`}
+      onBackButtonClick={() => {
+        state.dkgReshareState.proofFiles.files = [];
+      }}
     >
-      <NavigateBackBtn
-        to={".."}
-        onClick={() => (state.dkgReshareState.proofFiles.files = [])}
-      />
       <div className="flex w-full gap-6">
         <Card className="w-[648px]">
           <CardHeader

diff --git a/src/components/ui/cluster-back-btn-header.tsx b/src/components/ui/cluster-back-btn-header.tsx
@@ -0,0 +1,23 @@
+import { Text } from "@/components/ui/text.tsx";
+import { shortenAddress } from "@/lib/utils/strings.ts";
+import { useClusterPageParams } from "@/hooks/cluster/use-cluster-page-params.ts";
+import { CopyBtn } from "@/components/ui/copy-btn.tsx";
+
+export const ClusterBackBtnHeader = () => {
+  const { clusterHash } = useClusterPageParams();
+
+  return (
+    <div className="flex gap-4">
+      Cluster {shortenAddress((clusterHash || "").slice(2) || "", 4, 4)}
+      <div className="h-6 w-[1px] bg-gray-400" />
+      <Text className="text-gray-700 font-medium flex items-center gap-4">
+        {shortenAddress((clusterHash || "").slice(2) || "", 4, 4)}
+        <CopyBtn
+          isFullSizeIcon
+          text={clusterHash}
+          className="bg-transparent text-[24px] size-[24px] p-0"
+        />
+      </Text>
+    </div>
+  );
+};
diff --git a/src/components/ui/container.tsx b/src/components/ui/container.tsx
@@ -1,7 +1,9 @@
 import { cn } from "@/lib/utils/tw";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
-import type { ComponentPropsWithoutRef, FC } from "react";
+import type { ComponentPropsWithoutRef, FC, ReactElement } from "react";
+import { FaArrowLeft } from "react-icons/fa6";
+import { useNavigate } from "react-router-dom";
 
 export const variants = cva("mx-auto max-w-full", {
   variants: {
@@ -21,21 +23,50 @@ export const variants = cva("mx-auto max-w-full", {
 });
 type FCProps = FC<
   Omit<ComponentPropsWithoutRef<"div">, keyof VariantProps<typeof variants>> &
-    VariantProps<typeof variants>
+    VariantProps<typeof variants> & {
+      backButtonLabel?: string | ReactElement;
+      navigateRoutePath?: string;
+      onBackButtonClick?: () => void;
+    }
 >;
 
-export const Container: FCProps = ({ className, size, variant, ...props }) => {
+export const Container: FCProps = ({
+  className,
+  size,
+  variant,
+  onBackButtonClick,
+  backButtonLabel,
+  navigateRoutePath,
+  ...props
+}) => {
+  const navigate = useNavigate();
   return (
-    <div
-      className={cn(
-        variants({
-          className,
-          size,
-          variant,
-        }),
+    <div>
+      {backButtonLabel && (
+        <div
+          onClick={() => {
+            onBackButtonClick && onBackButtonClick();
+            navigateRoutePath ? navigate(navigateRoutePath) : navigate(-1);
+          }}
+          className="w-full h-[60px] bg-gray-100 px-[300px] py-3.5"
+        >
+          <div className="flex items-center gap-3 cursor-pointer text-lg font-bold">
+            <FaArrowLeft className="size-[24px] text-primary-500" />
+            {backButtonLabel}
+          </div>
+        </div>
       )}
-      {...props}
-    />
+      <div
+        className={cn(
+          variants({
+            className,
+            size,
+            variant,
+          }),
+        )}
+        {...props}
+      />
+    </div>
   );
 };
 

diff --git a/src/components/ui/copy-btn.tsx b/src/components/ui/copy-btn.tsx
@@ -8,11 +8,17 @@ import { LuCheck, LuCopy } from "react-icons/lu";
 
 export type CopyBtnProps = {
   text: string | undefined;
+  isFullSizeIcon?: boolean;
 };
 
 type FCProps = FC<Omit<ButtonProps, keyof CopyBtnProps> & CopyBtnProps>;
 
-export const CopyBtn: FCProps = ({ className, text, ...props }) => {
+export const CopyBtn: FCProps = ({
+  className,
+  text,
+  isFullSizeIcon,
+  ...props
+}) => {
   const { copy, hasCopied } = useClipboard();
   return (
     <IconButton
@@ -30,7 +36,7 @@ export const CopyBtn: FCProps = ({ className, text, ...props }) => {
         {!hasCopied ? (
           <motion.div
             key="copy"
-            className="size-[55%]"
+            className={isFullSizeIcon ? "size-full" : "size-[55%]"}
             style={{
               color: "inherit",
               position: "absolute",
@@ -48,7 +54,7 @@ export const CopyBtn: FCProps = ({ className, text, ...props }) => {
         ) : (
           <motion.div
             key="copied"
-            className="size-[55%]"
+            className={isFullSizeIcon ? "size-full" : "size-[55%]"}
             style={{
               position: "absolute",
               top: "50%",

diff --git a/src/lib/utils/strings.ts b/src/lib/utils/strings.ts
@@ -11,5 +11,8 @@ export const shortenClusterId = (clusterId: string) => {
   return `${clusterIdWithout0x.slice(0, 4)}...${clusterIdWithout0x.slice(-4)}`;
 };
 
-export const shortenAddress = (address: string, length = 6) =>
-  `${address.slice(0, length)}...${address.slice(-(length - 2))}`;
+export const shortenAddress = (
+  address: string,
+  length = 6,
+  afterSlice: number = length - 2,
+) => `${address.slice(0, length)}...${address.slice(-afterSlice)}`;