handle address array

kumaryash90 · kumaryash90 · commit 7bdaabc89b81 · 2024-11-12T21:00:23.000+05:30
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
@@ -84,10 +84,10 @@ type CustomContractDeploymentFormData = {
 
 interface ContractRef {
   ref: {
-    publisher: string;
+    publisherAddress: string;
     version: string;
     contractId: string;
-  };
+  }[];
 }
 
 export type CustomContractDeploymentForm =
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/contract-params-fieldset.tsx
@@ -25,7 +25,7 @@ import {
   Heading,
   Text,
 } from "tw-components";
-import { RefContractInput } from "./ref-input";
+import { RefInputFieldset } from "./ref-input-fieldset";
 
 interface ContractParamsFieldsetProps {
   deployParams: readonly AbiParameter[];
@@ -45,27 +45,37 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
     setIsCustomInputEnabled((prev) => {
       const updated = [...prev];
       updated[index] = !updated[index];
+
+      // Clear values accordingly when toggling between input types
+      if (updated[index]) {
+        form.setValue(
+          `constructorParams.${deployParams[index]?.name || "*"}.ref.refType`,
+          deployParams[index]?.type,
+        );
+
+        form.setValue(
+          `constructorParams.${deployParams[index]?.name || "*"}.defaultValue`,
+          "",
+          {
+            shouldDirty: true,
+          },
+        );
+      } else {
+        form.setValue(
+          `constructorParams.${deployParams[index]?.name || "*"}.ref.refType`,
+          "",
+        );
+        form.setValue(
+          `constructorParams.${deployParams[index]?.name || "*"}.ref`,
+          "",
+          {
+            shouldDirty: true,
+          },
+        );
+      }
+
       return updated;
     });
-
-    // Clear values accordingly when toggling between input types
-    if (isCustomInputEnabled[index]) {
-      form.setValue(
-        `constructorParams.${deployParams[index]?.name || "*"}.defaultValue`,
-        "",
-        {
-          shouldDirty: true,
-        },
-      );
-    } else {
-      form.setValue(
-        `constructorParams.${deployParams[index]?.name || "*"}.ref`,
-        "",
-        {
-          shouldDirty: true,
-        },
-      );
-    }
   };
 
   return (
@@ -150,9 +160,7 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
                         {!isCustomInputEnabled[idx] ? (
                           <>
                             <SolidityInput
-                              solidityType={
-                                param.type === "address" ? "string" : param.type
-                              }
+                              solidityType={param.type}
                               placeholder={
                                 isMobile ||
                                 paramTemplateValues?.[0]?.value ===
@@ -168,10 +176,11 @@ export const ContractParamsFieldset: React.FC<ContractParamsFieldsetProps> = ({
                             />
                           </>
                         ) : (
-                          <RefContractInput param={param} />
+                          <RefInputFieldset param={param} />
                         )}
 
-                        {param.type === "address" && (
+                        {(param.type === "address" ||
+                          param.type === "address[]") && (
                           <Checkbox
                             isChecked={isCustomInputEnabled[idx]}
                             onChange={() => handleToggleCustomInput(idx)}
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/impl-params-fieldset.tsx
@@ -21,7 +21,7 @@ import {
   Heading,
   Text,
 } from "tw-components";
-import { RefContractImplInput } from "./ref-input-impl";
+import { RefInputImplFieldset } from "./ref-input-impl-fieldset";
 
 interface ImplementationParamsFieldsetProps {
   implParams: readonly AbiParameter[];
@@ -41,27 +41,35 @@ export const ImplementationParamsFieldset: React.FC<
     setIsCustomInputEnabled((prev) => {
       const updated = [...prev];
       updated[index] = !updated[index];
+
+      // Clear or set values accordingly when toggling between input types
+      if (updated[index]) {
+        form.setValue(
+          `implConstructorParams.${implParams[index]?.name || "*"}.ref.refType`,
+          implParams[index]?.type,
+        );
+        form.setValue(
+          `implConstructorParams.${implParams[index]?.name || "*"}.defaultValue`,
+          "",
+          {
+            shouldDirty: true,
+          },
+        );
+      } else {
+        form.setValue(
+          `implConstructorParams.${implParams[index]?.name || "*"}.ref.refType`,
+          "",
+        );
+        form.setValue(
+          `implConstructorParams.${implParams[index]?.name || "*"}.ref`,
+          "",
+          {
+            shouldDirty: true,
+          },
+        );
+      }
       return updated;
     });
-
-    // Clear values accordingly when toggling between input types
-    if (isCustomInputEnabled[index]) {
-      form.setValue(
-        `implConstructorParams.${implParams[index]?.name || "*"}.defaultValue`,
-        "",
-        {
-          shouldDirty: true,
-        },
-      );
-    } else {
-      form.setValue(
-        `implConstructorParams.${implParams[index]?.name || "*"}.ref`,
-        "",
-        {
-          shouldDirty: true,
-        },
-      );
-    }
   };
 
   return (
@@ -126,7 +134,7 @@ export const ImplementationParamsFieldset: React.FC<
                             />
                           </>
                         ) : (
-                          <RefContractImplInput param={param} />
+                          <RefInputImplFieldset param={param} />
                         )}
 
                         {param.type === "address" && (
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input-fieldset.tsx
@@ -0,0 +1,58 @@
+import { Box, Flex, Icon } from "@chakra-ui/react";
+import type { AbiParameter } from "abitype";
+import { PlusIcon } from "lucide-react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { Button, Text } from "tw-components";
+import { RefContractInput } from "./ref-input";
+
+interface RefInputFieldsetProps {
+  param: AbiParameter;
+}
+
+export const RefInputFieldset: React.FC<RefInputFieldsetProps> = ({
+  param,
+}) => {
+  const form = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    name: `constructorParams.${param.name ? param.name : "*"}.ref.contracts`,
+    control: form.control,
+  });
+
+  return (
+    <Flex gap={8} direction="column" as="fieldset">
+      <Flex gap={2} direction="column">
+        <Text>Set ref contract for this param.</Text>
+      </Flex>
+      <Flex flexDir="column" gap={4}>
+        {fields.map((item, index) => (
+          <RefContractInput
+            key={item.id}
+            remove={remove}
+            index={index}
+            param={param}
+          />
+        ))}
+        <Box>
+          <Button
+            type="button"
+            size="sm"
+            colorScheme="primary"
+            borderRadius="md"
+            leftIcon={<Icon as={PlusIcon} />}
+            isDisabled={param.type === "address" && fields.length >= 1}
+            onClick={() =>
+              append({
+                contractId: "",
+                version: "",
+                publisherAddress: "",
+              })
+            }
+          >
+            Add Ref
+          </Button>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input-impl-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input-impl-fieldset.tsx
@@ -0,0 +1,58 @@
+import { Box, Flex, Icon } from "@chakra-ui/react";
+import type { AbiParameter } from "abitype";
+import { PlusIcon } from "lucide-react";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { Button, Text } from "tw-components";
+import { RefContractImplInput } from "./ref-input-impl";
+
+interface RefInputImplFieldsetProps {
+  param: AbiParameter;
+}
+
+export const RefInputImplFieldset: React.FC<RefInputImplFieldsetProps> = ({
+  param,
+}) => {
+  const form = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    name: `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts`,
+    control: form.control,
+  });
+
+  return (
+    <Flex gap={8} direction="column" as="fieldset">
+      <Flex gap={2} direction="column">
+        <Text>Set ref contract for this param.</Text>
+      </Flex>
+      <Flex flexDir="column" gap={4}>
+        {fields.map((item, index) => (
+          <RefContractImplInput
+            key={item.id}
+            remove={remove}
+            index={index}
+            param={param}
+          />
+        ))}
+        <Box>
+          <Button
+            type="button"
+            size="sm"
+            colorScheme="primary"
+            borderRadius="md"
+            leftIcon={<Icon as={PlusIcon} />}
+            isDisabled={param.type === "address" && fields.length >= 1}
+            onClick={() =>
+              append({
+                contractId: "",
+                version: "",
+                publisherAddress: "",
+              })
+            }
+          >
+            Add Ref
+          </Button>
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input-impl.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input-impl.tsx
@@ -2,36 +2,43 @@ import {
   Divider,
   Flex,
   FormControl,
+  Icon,
+  IconButton,
   Input,
   Select,
   Skeleton,
 } from "@chakra-ui/react";
 import type { AbiParameter } from "abitype";
+import { TrashIcon } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 import { FormLabel } from "tw-components";
 import { useAllVersions, usePublishedContractsQuery } from "../hooks";
 
 interface RefContractImplInputProps {
   param: AbiParameter;
+  index: number;
+  remove: (index: number) => void;
 }
 
 export const RefContractImplInput: React.FC<RefContractImplInputProps> = ({
   param,
+  index,
+  remove,
 }) => {
   const form = useFormContext();
 
   const publishedContractsQuery = usePublishedContractsQuery(
     form.watch(
-      `implConstructorParams.${param.name ? param.name : "*"}.ref.publisherAddress`,
+      `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.publisherAddress`,
     ),
   );
 
   const allVersions = useAllVersions(
     form.watch(
-      `implConstructorParams.${param.name ? param.name : "*"}.ref.publisherAddress`,
+      `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.publisherAddress`,
     ),
     form.watch(
-      `implConstructorParams.${param.name ? param.name : "*"}.ref.contractId`,
+      `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.contractId`,
     ),
   );
 
@@ -48,7 +55,7 @@ export const RefContractImplInput: React.FC<RefContractImplInputProps> = ({
           gap={1}
           isInvalid={
             !!form.getFieldState(
-              `implConstructorParams.${param.name ? param.name : "*"}.ref.publisherAddress`,
+              `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.publisherAddress`,
               form.formState,
             ).error
           }
@@ -57,7 +64,7 @@ export const RefContractImplInput: React.FC<RefContractImplInputProps> = ({
           <Input
             placeholder="Address or ENS"
             {...form.register(
-              `implConstructorParams.${param.name ? param.name : "*"}.ref.publisherAddress`,
+              `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.publisherAddress`,
             )}
           />
         </FormControl>
@@ -73,7 +80,7 @@ export const RefContractImplInput: React.FC<RefContractImplInputProps> = ({
             <Select
               isDisabled={(publishedContractsQuery?.data || []).length === 0}
               {...form.register(
-                `implConstructorParams.${param.name ? param.name : "*"}.ref.contractId`,
+                `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.contractId`,
               )}
               placeholder={
                 publishedContractsQuery.isFetched &&
@@ -101,7 +108,7 @@ export const RefContractImplInput: React.FC<RefContractImplInputProps> = ({
               w="full"
               isDisabled={!allVersions.data}
               {...form.register(
-                `implConstructorParams.${param.name ? param.name : "*"}.ref.version`,
+                `implConstructorParams.${param.name ? param.name : "*"}.ref.contracts.${index}.version`,
               )}
               borderRadius="lg"
             >
@@ -114,6 +121,12 @@ export const RefContractImplInput: React.FC<RefContractImplInputProps> = ({
             </Select>
           </Skeleton>
         </FormControl>
+        <IconButton
+          icon={<Icon as={TrashIcon} boxSize={5} />}
+          aria-label="Remove row"
+          onClick={() => remove(index)}
+          alignSelf="end"
+        />
       </Flex>
       <Divider />
     </Flex>
diff --git a/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input.tsx b/apps/dashboard/src/components/contract-components/contract-publish-form/ref-input.tsx
diff --git a/packages/thirdweb/src/extensions/prebuilts/deploy-published.ts b/packages/thirdweb/src/extensions/prebuilts/deploy-published.ts
diff --git a/packages/thirdweb/src/utils/any-evm/deploy-metadata.ts b/packages/thirdweb/src/utils/any-evm/deploy-metadata.ts
