Modular contracts - rename extensions to modules

apps/dashboard/src/@/components/ui/alert.tsx

@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "bg-destructive/10 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
+          "bg-destructive/30 border-destructive/50 dark:border-destructive [&>svg]:text-destructive",
         info: "bg-primary/10 border-primary/50 dark:border-primary [&>svg]:text-primary",
         warning:
           "bg-warning/10 border-warning/50 dark:border-warning [&>svg]:text-warning",

apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx

@@ -49,11 +49,11 @@ import {
   useDeployStatusModal,
 } from "./deploy-context-modal";
 import {
-  ModularContractDefaultExtensionsFieldset,
+  ModularContractDefaultModulesFieldset,
   showPrimarySaleFiedset,
   showRoyaltyFieldset,
-  useModularContractsDefaultExtensionsInstallParams,
-} from "./modular-contract-default-extensions-fieldset";
+  useModularContractsDefaultModulesInstallParams,
+} from "./modular-contract-default-modules-fieldset";
 import { Param } from "./param";
 import { PlatformFeeFieldset } from "./platform-fee-fieldset";
 import { PrimarySaleFieldset } from "./primary-sale-fieldset";
@@ -77,7 +77,7 @@ export type CustomContractDeploymentFormData = {
   saltForCreate2: string;
   signerAsSalt: boolean;
   deployParams: Record<string, string>;
-  modularContractDefaultExtensionsInstallParams: Record<string, string>[];
+  modularContractDefaultModulesInstallParams: Record<string, string>[];
   contractMetadata?: {
     name: string;
     description: string;
@@ -160,11 +160,11 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
     fullPublishMetadata.data?.deployType === "customFactory";
 
   const isModular = fullPublishMetadata.data?.routerType === "modular";
-  const defaultExtensions = fullPublishMetadata.data?.defaultExtensions;
+  const defaultModules = fullPublishMetadata.data?.defaultModules;
 
-  const modularContractDefaultExtensionsInstallParams =
-    useModularContractsDefaultExtensionsInstallParams({
-      defaultExtensions,
+  const modularContractDefaultModulesInstallParams =
+    useModularContractsDefaultModulesInstallParams({
+      defaultModules,
       isQueryEnabled: isModular,
     });
 
@@ -219,11 +219,11 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
       signerAsSalt: true,
       deployParams: parsedDeployParams,
       recipients: [{ address: connectedWallet || "", sharesBps: 10000 }],
-      // set default values for modular contract extensions with custom components
-      modularContractDefaultExtensionsInstallParams:
+      // set default values for modular contract modules with custom components
+      modularContractDefaultModulesInstallParams:
         (activeAccount &&
           isTWPublisher &&
-          modularContractDefaultExtensionsInstallParams.data?.map((ext) => {
+          modularContractDefaultModulesInstallParams.data?.map((ext) => {
             const paramNames = ext.params.map((param) => param.name);
             const returnVal: Record<string, string> = {};
 
@@ -245,7 +245,7 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
       parsedDeployParams,
       isAccountFactory,
       connectedWallet,
-      modularContractDefaultExtensionsInstallParams.data,
+      modularContractDefaultModulesInstallParams.data,
       isTWPublisher,
       activeAccount,
     ],
@@ -413,26 +413,25 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
 
           const deployParams = { ...formData.deployParams };
 
-          // if Modular contract has extensions
-          if (isModular && modularContractDefaultExtensionsInstallParams.data) {
-            const extensionInstallData: string[] =
-              modularContractDefaultExtensionsInstallParams.data.map(
+          // if Modular contract has modules
+          if (isModular && modularContractDefaultModulesInstallParams.data) {
+            const moduleInstallData: string[] =
+              modularContractDefaultModulesInstallParams.data.map(
                 (ext, extIndex) => {
                   return encodeAbiParameters(
                     // param name+type []
                     ext.params.map((p) => ({ name: p.name, type: p.type })),
                     // value []
                     Object.values(
-                      formData.modularContractDefaultExtensionsInstallParams[
+                      formData.modularContractDefaultModulesInstallParams[
                         extIndex
                       ] || {},
                     ),
                   );
                 },
               );
 
-            deployParams._extensionInstallData =
-              JSON.stringify(extensionInstallData);
+            deployParams._moduleInstallData = JSON.stringify(moduleInstallData);
           }
 
           deploy.mutate(
@@ -649,8 +648,8 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
               .filter((paramName) => {
                 if (
                   isModular &&
-                  (paramName === "_extensionInstallData" ||
-                    paramName === "_extensions")
+                  (paramName === "_moduleInstallData" ||
+                    paramName === "_modules")
                 ) {
                   return false;
                 }
@@ -681,12 +680,10 @@ const CustomContractForm: React.FC<CustomContractFormProps> = ({
 
             {isModular && (
               <>
-                {modularContractDefaultExtensionsInstallParams.data ? (
-                  <ModularContractDefaultExtensionsFieldset
+                {modularContractDefaultModulesInstallParams.data ? (
+                  <ModularContractDefaultModulesFieldset
                     form={form}
-                    extensions={
-                      modularContractDefaultExtensionsInstallParams.data
-                    }
+                    modules={modularContractDefaultModulesInstallParams.data}
                     isTWPublisher={isTWPublisher}
                   />
                 ) : (

apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-extensions-fieldset.tsx → apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx

@@ -1,72 +1,72 @@
 import { FormControl } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { SolidityInput } from "contract-ui/components/solidity-inputs";
-import { getExtensionInstalledParams } from "contract-ui/tabs/manage/components/getExtensionInstalledParams";
+import { getModuleInstalledParams } from "contract-ui/tabs/manage/components/getModuleInstalledParams";
 import invariant from "tiny-invariant";
 import { FormErrorMessage, FormLabel } from "tw-components";
 import type { CustomContractDeploymentForm } from "./custom-contract";
 import { PrimarySaleFieldset } from "./primary-sale-fieldset";
 import { RoyaltyFieldset } from "./royalty-fieldset";
 
-type ExtensionMeta = {
-  extensionName: string;
-  extensionVersion: string;
+type ModuleMeta = {
+  moduleName: string;
+  moduleVersion: string;
   publisherAddress: string;
 };
 
 /**
- * Get the install params for all given extensions
+ * Get the install params for all given modules
  */
-export function useModularContractsDefaultExtensionsInstallParams(props: {
-  defaultExtensions?: ExtensionMeta[];
+export function useModularContractsDefaultModulesInstallParams(props: {
+  defaultModules?: ModuleMeta[];
   isQueryEnabled: boolean;
 }) {
-  const { defaultExtensions, isQueryEnabled } = props;
+  const { defaultModules, isQueryEnabled } = props;
   return useQuery({
     queryKey: [
-      "useModularContractsDefaultExtensionsInstallParams",
-      defaultExtensions,
+      "useModularContractsDefaultModulesInstallParams",
+      defaultModules,
     ],
     queryFn: async () => {
-      invariant(defaultExtensions, "defaultExtensions must be defined");
-      return Promise.all(defaultExtensions.map(getExtensionInstalledParams));
+      invariant(defaultModules, "defaultModules must be defined");
+      return Promise.all(defaultModules.map(getModuleInstalledParams));
     },
-    enabled: !!(isQueryEnabled && defaultExtensions),
+    enabled: !!(isQueryEnabled && defaultModules),
     refetchOnWindowFocus: false,
   });
 }
 
-export type UseModularContractsDefaultExtensionsInstallParams = ReturnType<
-  typeof useModularContractsDefaultExtensionsInstallParams
+export type UseModularContractsDefaultModulesInstallParams = ReturnType<
+  typeof useModularContractsDefaultModulesInstallParams
 >;
 
-type Extensions = NonNullable<
-  UseModularContractsDefaultExtensionsInstallParams["data"]
+type Modules = NonNullable<
+  UseModularContractsDefaultModulesInstallParams["data"]
 >;
 
-type ExtensionWithIndex = Extensions[number] & { extensionIndex: number };
+type ModuleWithIndex = Modules[number] & { moduleIndex: number };
 
-export function ModularContractDefaultExtensionsFieldset(props: {
-  extensions: Extensions;
+export function ModularContractDefaultModulesFieldset(props: {
+  modules: Modules;
   form: CustomContractDeploymentForm;
   isTWPublisher: boolean;
 }) {
-  // save the index of the extension before filtering out
-  const extensionsWithIndex: ExtensionWithIndex[] = props.extensions
+  // save the index of the module before filtering out
+  const modulesWithIndex: ModuleWithIndex[] = props.modules
     .map((v, i) => ({
       ...v,
-      extensionIndex: i,
+      moduleIndex: i,
     }))
     .filter((v) => v.params.length > 0);
 
   return (
     <div className="py-4">
       <div className="flex flex-col gap-4">
-        {extensionsWithIndex.map((ext) => {
+        {modulesWithIndex.map((ext) => {
           return (
-            <RenderExtension
-              key={ext.extensionName}
-              extension={ext}
+            <RenderModule
+              key={ext.moduleName}
+              module={ext}
               isTWPublisher={props.isTWPublisher}
               form={props.form}
             />
@@ -77,47 +77,39 @@ export function ModularContractDefaultExtensionsFieldset(props: {
   );
 }
 
-function RenderExtension(props: {
-  extension: ExtensionWithIndex;
+function RenderModule(props: {
+  module: ModuleWithIndex;
   form: CustomContractDeploymentForm;
   isTWPublisher: boolean;
 }) {
-  const { extension, form } = props;
+  const { module, form } = props;
 
   // only consider mapping if published by thirdweb, else show the generic form
   if (props.isTWPublisher) {
-    const paramNames = extension.params.map((param) => param.name);
+    const paramNames = module.params.map((param) => param.name);
 
     if (showRoyaltyFieldset(paramNames)) {
       return (
-        <RenderRoyaltyFieldset
-          extension={extension}
-          form={form}
-          isTWPublisher
-        />
+        <RenderRoyaltyFieldset module={module} form={form} isTWPublisher />
       );
     }
 
     if (showPrimarySaleFiedset(paramNames)) {
       return (
-        <RenderPrimarySaleFieldset
-          extension={extension}
-          form={form}
-          isTWPublisher
-        />
+        <RenderPrimarySaleFieldset module={module} form={form} isTWPublisher />
       );
     }
   }
 
   return (
     <div>
       <h3 className="text-lg mb-2 text-secondary-foreground font-medium">
-        {extension.extensionName}
+        {module.moduleName}
       </h3>
       <div className="flex flex-col gap-3">
-        {extension.params.map((param) => {
+        {module.params.map((param) => {
           const formFieldKey =
-            `modularContractDefaultExtensionsInstallParams.${extension.extensionIndex}.${param.name}` as const;
+            `modularContractDefaultModulesInstallParams.${module.moduleIndex}.${param.name}` as const;
 
           return (
             <FormControl
@@ -149,14 +141,14 @@ function RenderExtension(props: {
 }
 
 function RenderPrimarySaleFieldset(prosp: {
-  extension: ExtensionWithIndex;
+  module: ModuleWithIndex;
   form: CustomContractDeploymentForm;
   isTWPublisher: boolean;
 }) {
-  const { extension, form } = prosp;
+  const { module, form } = prosp;
 
   const primarySaleRecipientPath =
-    `modularContractDefaultExtensionsInstallParams.${extension.extensionIndex}.primarySaleRecipient` as const;
+    `modularContractDefaultModulesInstallParams.${module.moduleIndex}.primarySaleRecipient` as const;
 
   return (
     <PrimarySaleFieldset
@@ -173,17 +165,17 @@ function RenderPrimarySaleFieldset(prosp: {
 }
 
 function RenderRoyaltyFieldset(props: {
-  extension: ExtensionWithIndex;
+  module: ModuleWithIndex;
   form: CustomContractDeploymentForm;
   isTWPublisher: boolean;
 }) {
-  const { extension: ext, form } = props;
+  const { module: ext, form } = props;
 
   const royaltyRecipientPath =
-    `modularContractDefaultExtensionsInstallParams.${ext.extensionIndex}.royaltyRecipient` as const;
+    `modularContractDefaultModulesInstallParams.${ext.moduleIndex}.royaltyRecipient` as const;
 
   const royaltyBpsPath =
-    `modularContractDefaultExtensionsInstallParams.${ext.extensionIndex}.royaltyBps` as const;
+    `modularContractDefaultModulesInstallParams.${ext.moduleIndex}.royaltyBps` as const;
 
   return (
     <RoyaltyFieldset