fix: fixed button show more, added input btn (#1246)

Author: axelrod-blox

src/app/routes/create-cluster/ceremony-summary.tsx

@@ -1,7 +1,7 @@
 import { Badge } from "@/components/ui/badge.tsx";
 import { Text } from "@/components/ui/text.tsx";
 import { Divider } from "@/components/ui/divider.tsx";
-import { FaRegFolderClosed } from "react-icons/fa6";
+import { FaRegFolderClosed, FaAngleUp, FaAngleDown } from "react-icons/fa6";
 import { useState } from "react";
 
 const CeremonySummary = ({
@@ -18,9 +18,10 @@ const CeremonySummary = ({
           <Text className="text-[16px] font-bold">Generated Files Summary</Text>
           <Text
             onClick={setShowAllHandler}
-            className="text-sm text-primary-500 cursor-pointer"
+            className="text-sm text-primary-500 cursor-pointer flex items-center gap-1"
           >
-            Show more
+            {`Show ${isShowAll ? "Less" : "More"}`}
+            {isShowAll ? <FaAngleUp /> : <FaAngleDown />}
           </Text>
         </div>
       )}

src/app/routes/reshare-dkg/reshare-dkg.tsx

@@ -30,6 +30,7 @@ import CeremonySection from "@/app/routes/reshare-dkg/ceremony-section.tsx";
 import RemoveValidatorsSection from "@/app/routes/reshare-dkg/remove-validators-section.tsx";
 import { FaCircleInfo } from "react-icons/fa6";
 import { Tooltip } from "@/components/ui/tooltip.tsx";
+import { shortenAddress } from "@/lib/utils/strings.ts";
 
 enum ReshareSteps {
   Signature = 1,
@@ -66,6 +67,7 @@ const schema = z.object({
 
 const ReshareDkg = () => {
   const [currentStep, setCurrentStep] = useState(ReshareSteps.Signature);
+  const [isOwnerInputDisabled, setIsOwnerInputDisabled] = useState(true);
   const context = useBulkActionContext();
   const isReshare = context.dkgReshareState.newOperators.length > 0;
   const account = useAccount();
@@ -171,7 +173,34 @@ const ReshareDkg = () => {
                         </Tooltip>
                       </FormLabel>
                       <FormControl>
-                        <Input {...field} />
+                        <Input
+                          {...field}
+                          disabled={isOwnerInputDisabled || isLoading}
+                          value={
+                            isOwnerInputDisabled
+                              ? shortenAddress(field.value)
+                              : field.value
+                          }
+                          rightSlot={
+                            <Button
+                              className="border-none text-primary-500 hover:bg-transparent hover:text-primary-500"
+                              variant={
+                                isOwnerInputDisabled ? "outline" : "secondary"
+                              }
+                              onClick={() => {
+                                if (
+                                  form.formState.errors.ownerAddress ||
+                                  isLoading
+                                ) {
+                                  return;
+                                }
+                                setIsOwnerInputDisabled(!isOwnerInputDisabled);
+                              }}
+                            >
+                              {isOwnerInputDisabled ? "Add" : "Save"}
+                            </Button>
+                          }
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -186,7 +215,10 @@ const ReshareDkg = () => {
                     <FormItem>
                       <FormLabel>Set Withdrawal Address</FormLabel>
                       <FormControl>
-                        <Input {...field} />
+                        <Input
+                          {...field}
+                          disabled={field.disabled || isLoading}
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>

src/components/ui/input.tsx

@@ -28,6 +28,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             "pr-4": rightSlot,
           },
           className,
+          `${props.disabled ? "bg-gray-200" : "bg-transparent"}`,
         )}
       >
         <Slot>{isLoading ? <Spinner /> : leftSlot}</Slot>
@@ -37,7 +38,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...inputProps}
           className={cn(
             inputProps?.className,
-            "w-full h-full flex-1 bg-transparent outline-none",
+            `w-full h-full flex-1 bg-transparent outline-none ${props.disabled ? "text-gray-500" : "text-gray-800"}`,
           )}
           ref={ref}
         />