From 157f3cdeb97f19857de4abccb11cbe884fba98c0 Mon Sep 17 00:00:00 2001
From: Nacho Iacovino <50103937+nachoiacovino@users.noreply.github.com>
Date: Mon, 12 Feb 2024 20:45:56 +0100
Subject: [PATCH] Improve publish reliability (#2202)

* Take name out of the object

* All of this makes sense to me
---
 .../contract-publish-form/landing-fieldset.tsx       | 10 +++-------
 .../components/solidity-inputs/address-input.tsx     |  5 +++--
 .../components/solidity-inputs/array-input.tsx       | 12 ++++--------
 .../components/solidity-inputs/bool-input.tsx        |  3 ++-
 .../components/solidity-inputs/bytes-input.tsx       | 10 ++++++++--
 contract-ui/components/solidity-inputs/int-input.tsx |  5 +++--
 contract-ui/components/solidity-inputs/raw-input.tsx |  7 ++++---
 .../components/solidity-inputs/string-input.tsx      |  7 ++++---
 .../components/solidity-inputs/tuple-input.tsx       |  6 ++++--
 9 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/components/contract-components/contract-publish-form/landing-fieldset.tsx b/components/contract-components/contract-publish-form/landing-fieldset.tsx
index fa57b820cf5..0b8ee8a69d1 100644
--- a/components/contract-components/contract-publish-form/landing-fieldset.tsx
+++ b/components/contract-components/contract-publish-form/landing-fieldset.tsx
@@ -172,8 +172,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
             <TabPanels pt={2}>
               <TabPanel px={0} pb={0}>
                 <Textarea
-                  value={form.watch("readme")}
-                  onChange={(e) => form.setValue("readme", e.target.value)}
+                  {...form.register("readme")}
                   rows={12}
                   placeholder="Describe how users can use this contract. Add links if relevant."
                 />
@@ -209,8 +208,8 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
               )}
             </Flex>
             <Input
-              value={form.watch("version")}
               placeholder={placeholderVersion}
+              value={form.watch("version")}
               onChange={handleVersionChange}
             />
             <FormErrorMessage>
@@ -236,10 +235,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
                 <TabPanels pt={2}>
                   <TabPanel px={0} pb={0}>
                     <Textarea
-                      value={form.watch("changelog")}
-                      onChange={(e) =>
-                        form.setValue("changelog", e.target.value)
-                      }
+                      {...form.register("changelog")}
                       placeholder="Mention what is new in this version of your contract."
                     />
                     <FormErrorMessage>
diff --git a/contract-ui/components/solidity-inputs/address-input.tsx b/contract-ui/components/solidity-inputs/address-input.tsx
index 67303a3414d..5a07b2f653e 100644
--- a/contract-ui/components/solidity-inputs/address-input.tsx
+++ b/contract-ui/components/solidity-inputs/address-input.tsx
@@ -12,7 +12,8 @@ export const SolidityAddressInput: React.FC<SolidityInputProps> = ({
   formContext: form,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
   const inputNameWatch = form.watch(inputName);
   const [localInput, setLocalInput] = useState(inputNameWatch);
   const address = useAddress();
@@ -98,7 +99,7 @@ export const SolidityAddressInput: React.FC<SolidityInputProps> = ({
         placeholder="address"
         // probably OK but obviously can be longer if ens name is passed?
         maxLength={42}
-        {...inputProps}
+        {...restOfInputProps}
         onChange={(e) => handleChange(e.target.value)}
         // if we don't have a value from the form, use the local input (but if value is empty string then that's valid)
         value={(localInput ?? inputNameWatch) || ""}
diff --git a/contract-ui/components/solidity-inputs/array-input.tsx b/contract-ui/components/solidity-inputs/array-input.tsx
index a5dbfb4f3a2..edac191392c 100644
--- a/contract-ui/components/solidity-inputs/array-input.tsx
+++ b/contract-ui/components/solidity-inputs/array-input.tsx
@@ -13,7 +13,8 @@ export const SolidityArrayInput: React.FC<SolidityInputWithTypeProps> = ({
   solidityType,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
   const [showRawInput, setShowRawInput] = useState(false);
   const localForm = useForm({ defaultValues: { array: [{ value: "" }] } });
   const { fields, append, remove } = useFieldArray({
@@ -21,11 +22,6 @@ export const SolidityArrayInput: React.FC<SolidityInputWithTypeProps> = ({
     control: localForm.control,
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    form.setValue(inputName, val);
-  };
-
   const typeWithoutArray = solidityType.replace("[]", "");
 
   if (showRawInput) {
@@ -34,8 +30,8 @@ export const SolidityArrayInput: React.FC<SolidityInputWithTypeProps> = ({
         <SolidityRawInput
           formContext={form}
           solidityType={solidityType}
-          {...inputProps}
-          onChange={handleChange}
+          {...restOfInputProps}
+          name={inputName}
         />
         <Text
           size="label.sm"
diff --git a/contract-ui/components/solidity-inputs/bool-input.tsx b/contract-ui/components/solidity-inputs/bool-input.tsx
index 206c7ad5151..9e9de9cc043 100644
--- a/contract-ui/components/solidity-inputs/bool-input.tsx
+++ b/contract-ui/components/solidity-inputs/bool-input.tsx
@@ -6,7 +6,8 @@ export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
   formContext: form,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name } = inputProps;
+  const inputName = name as string;
   const watchInput = form.watch(inputName);
   return (
     <Flex>
diff --git a/contract-ui/components/solidity-inputs/bytes-input.tsx b/contract-ui/components/solidity-inputs/bytes-input.tsx
index 0dd5d814933..3ecae6225db 100644
--- a/contract-ui/components/solidity-inputs/bytes-input.tsx
+++ b/contract-ui/components/solidity-inputs/bytes-input.tsx
@@ -7,7 +7,8 @@ export const SolidityBytesInput: React.FC<SolidityInputWithTypeProps> = ({
   solidityType,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
@@ -23,6 +24,11 @@ export const SolidityBytesInput: React.FC<SolidityInputWithTypeProps> = ({
   };
 
   return (
-    <Input placeholder={solidityType} {...inputProps} onChange={handleChange} />
+    <Input
+      placeholder={solidityType}
+      {...restOfInputProps}
+      value={form.watch(inputName)}
+      onChange={handleChange}
+    />
   );
 };
diff --git a/contract-ui/components/solidity-inputs/int-input.tsx b/contract-ui/components/solidity-inputs/int-input.tsx
index 5fd34d2fc6f..a6f3b831a08 100644
--- a/contract-ui/components/solidity-inputs/int-input.tsx
+++ b/contract-ui/components/solidity-inputs/int-input.tsx
@@ -10,7 +10,8 @@ export const SolidityIntInput: React.FC<SolidityInputWithTypeProps> = ({
   solidityType,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
@@ -49,7 +50,7 @@ export const SolidityIntInput: React.FC<SolidityInputWithTypeProps> = ({
     <InputGroup>
       <Input
         placeholder={solidityType}
-        {...inputProps}
+        {...restOfInputProps}
         value={form.watch(inputName)}
         onChange={handleChange}
       />
diff --git a/contract-ui/components/solidity-inputs/raw-input.tsx b/contract-ui/components/solidity-inputs/raw-input.tsx
index da885c3eae2..a3936b72c0a 100644
--- a/contract-ui/components/solidity-inputs/raw-input.tsx
+++ b/contract-ui/components/solidity-inputs/raw-input.tsx
@@ -9,12 +9,13 @@ export const SolidityRawInput: React.FC<SolidityInputWithTypeProps> = ({
   solidityComponents,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
+
   const typeWithoutArray = solidityType.replace("[]", "");
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = e.target;
-
     form.setValue(inputName, value);
 
     const invalidInputError = {
@@ -50,7 +51,7 @@ export const SolidityRawInput: React.FC<SolidityInputWithTypeProps> = ({
       <Textarea
         fontFamily="mono"
         placeholder={solidityType}
-        {...(inputProps as TextareaProps)}
+        {...(restOfInputProps as TextareaProps)}
         value={form.watch(inputName)}
         onChange={handleChange}
       />
diff --git a/contract-ui/components/solidity-inputs/string-input.tsx b/contract-ui/components/solidity-inputs/string-input.tsx
index dfc87d29629..8e357a15200 100644
--- a/contract-ui/components/solidity-inputs/string-input.tsx
+++ b/contract-ui/components/solidity-inputs/string-input.tsx
@@ -13,7 +13,8 @@ export const SolidityStringInput: React.FC<SolidityInputWithTypeProps> = ({
 }) => {
   const storageUpload = useStorageUpload();
   const queryClient = useQueryClient();
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
   const nameOrInput = (solidityName as string) || inputName;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -33,10 +34,10 @@ export const SolidityStringInput: React.FC<SolidityInputWithTypeProps> = ({
       <Input
         placeholder="string"
         isDisabled={storageUpload.isLoading}
+        pr={{ base: "90px", md: "160px" }}
+        {...restOfInputProps}
         value={form.watch(inputName)}
-        {...inputProps}
         onChange={handleChange}
-        pr={{ base: "90px", md: "160px" }}
       />
       {showButton && (
         <InputRightElement mx={1} width={{ base: "75px", md: "145px" }}>
diff --git a/contract-ui/components/solidity-inputs/tuple-input.tsx b/contract-ui/components/solidity-inputs/tuple-input.tsx
index 4a3cdd9cdac..11746d3dc47 100644
--- a/contract-ui/components/solidity-inputs/tuple-input.tsx
+++ b/contract-ui/components/solidity-inputs/tuple-input.tsx
@@ -9,7 +9,8 @@ export const SolidityTupleInput: React.FC<SolidityInputWithTypeProps> = ({
   solidityComponents,
   ...inputProps
 }) => {
-  const inputName = inputProps.name as string;
+  const { name, ...restOfInputProps } = inputProps;
+  const inputName = name as string;
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = e.target;
@@ -52,7 +53,8 @@ export const SolidityTupleInput: React.FC<SolidityInputWithTypeProps> = ({
       <Textarea
         fontFamily="mono"
         placeholder={solidityType}
-        {...(inputProps as TextareaProps)}
+        {...(restOfInputProps as TextareaProps)}
+        value={form.watch(inputName)}
         onChange={handleChange}
       />
       <FormHelperText>