Interop module support (#6325)

kumaryash90 · web-flow · commit 77029a2e0189 · 2025-03-06T17:27:41.000-08:00
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/data-table.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/data-table.tsx
@@ -1,7 +1,14 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { Form } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -11,6 +18,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
@@ -33,7 +41,9 @@ import { useForm } from "react-hook-form";
 import {
   defineChain,
   eth_getCode,
+  getContract,
   getRpcClient,
+  prepareContractCall,
   prepareTransaction,
   sendAndConfirmTransaction,
 } from "thirdweb";
@@ -57,19 +67,21 @@ type CrossChain = {
   status: "DEPLOYED" | "NOT_DEPLOYED";
 };
 
+const interopChains = ["420120000", "420120001"];
+
+type ChainId = "420120000" | "420120001";
+
 const formSchema = z.object({
   amounts: z.object({
-    "84532": z.string(),
-    "11155420": z.string(),
-    "919": z.string(),
-    "111557560": z.string(),
-    "999999999": z.string(),
-    "11155111": z.string(),
-    "421614": z.string(),
+    "420120000": z.string(),
+    "420120001": z.string(),
   }),
 });
 type FormSchema = z.output<typeof formSchema>;
 
+const positiveIntegerRegex = /^[0-9]\d*$/;
+const superchainBridgeAddress = "0x4200000000000000000000000000000000000028";
+
 export function DataTable({
   data,
   coreMetadata,
@@ -97,13 +109,21 @@ export function DataTable({
     "Failed to deploy contract",
   );
 
+  const isCrosschain = !!modulesMetadata?.find(
+    (m) => m.name === "SuperChainInterop",
+  );
+
   const addRowMutation = useMutation({
     mutationFn: async (chain: { chainId: number; name: string }) => {
+      if (coreContract.chain.id === chain.chainId) {
+        return;
+      }
+      // eslint-disable-next-line no-restricted-syntax
+      const c = defineChain(chain.chainId);
       const code = await eth_getCode(
         getRpcClient({
           client: getThirdwebClient(),
-          // eslint-disable-next-line no-restricted-syntax
-          chain: defineChain(chain.chainId),
+          chain: c,
         }),
         { address: coreContract.address },
       );
@@ -155,19 +175,59 @@ export function DataTable({
 
   const form = useForm<FormSchema>({
     resolver: zodResolver(formSchema),
-    values: {
+    defaultValues: {
       amounts: {
-        "84532": "", // Base
-        "11155420": "", // OP testnet
-        "919": "", // Mode Network
-        "111557560": "", // Cyber
-        "999999999": "", // Zora
-        "11155111": "", // Sepolia
-        "421614": "",
+        "420120000": "",
+        "420120001": "",
       },
     },
   });
 
+  const crossChainTransfer = async (chainId: ChainId) => {
+    if (!activeAccount) {
+      throw new Error("Account not connected");
+    }
+    const amount = form.getValues().amounts[chainId];
+    if (!positiveIntegerRegex.test(amount)) {
+      form.setError(`amounts.${chainId}`, { message: "Invalid Amount" });
+      return;
+    }
+
+    const superChainBridge = getContract({
+      address: superchainBridgeAddress,
+      chain: coreContract.chain,
+      client: coreContract.client,
+    });
+
+    const sendErc20Tx = prepareContractCall({
+      contract: superChainBridge,
+      method:
+        "function sendERC20(address _token, address _to, uint256 _amount, uint256 _chainId)",
+      params: [
+        coreContract.address,
+        activeAccount.address,
+        BigInt(amount),
+        BigInt(chainId),
+      ],
+    });
+
+    await sendAndConfirmTransaction({
+      account: activeAccount,
+      transaction: sendErc20Tx,
+    });
+  };
+
+  const crossChainTransferNotifications = useTxNotifications(
+    "Successfully submitted cross chain transfer",
+    "Failed to submit cross chain transfer",
+  );
+
+  const crossChainTransferMutation = useMutation({
+    mutationFn: crossChainTransfer,
+    onSuccess: crossChainTransferNotifications.onSuccess,
+    onError: crossChainTransferNotifications.onError,
+  });
+
   const columns: ColumnDef<CrossChain>[] = [
     {
       accessorKey: "network",
@@ -208,6 +268,54 @@ export function DataTable({
         );
       },
     },
+    {
+      accessorKey: "transfer",
+      header: "",
+      cell: ({ row }) => {
+        const chain = row.getValue("chainId");
+        if (
+          row.getValue("status") === "DEPLOYED" &&
+          interopChains.includes(String(chain)) &&
+          isCrosschain
+        ) {
+          return (
+            <FormField
+              disabled={false}
+              control={form.control}
+              name={`amounts.${row.getValue("chainId") as ChainId}`}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <ToolTipLabel label="Bridge tokens">
+                      <div className="flex">
+                        <Input
+                          className="w-22 rounded-r-none border-r-0"
+                          placeholder="amount"
+                          {...field}
+                        />
+                        <Button
+                          type="button"
+                          disabled={false}
+                          onClick={() =>
+                            crossChainTransferMutation.mutate(
+                              row.getValue("chainId"),
+                            )
+                          }
+                          className="rounded-lg rounded-l-none border border-l-0"
+                        >
+                          Bridge
+                        </Button>
+                      </div>
+                    </ToolTipLabel>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          );
+        }
+      },
+    },
   ];
 
   const table = useReactTable({
@@ -268,6 +376,18 @@ export function DataTable({
           crosschainContractAddress = coreContract.address;
         }
       } else {
+        if (modulesMetadata) {
+          for (const m of modulesMetadata) {
+            await getOrDeployInfraForPublishedContract({
+              chain,
+              client,
+              account: activeAccount,
+              contractId: m.name,
+              publisher: m.publisher,
+            });
+          }
+        }
+
         crosschainContractAddress = await deployContractfromDeployMetadata({
           account: activeAccount,
           chain,
@@ -283,17 +403,6 @@ export function DataTable({
           chain,
           client,
         });
-        if (modulesMetadata) {
-          for (const m of modulesMetadata) {
-            await getOrDeployInfraForPublishedContract({
-              chain,
-              client,
-              account: activeAccount,
-              contractId: m.name,
-              publisher: m.publisher,
-            });
-          }
-        }
       }
       deployStatusModal.nextStep();
       deployStatusModal.setViewContractLink(
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/page.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/page.tsx
@@ -2,6 +2,7 @@ import { fetchPublishedContractsFromDeploy } from "components/contract-component
 import { notFound } from "next/navigation";
 import {
   type ContractOptions,
+  eth_blockNumber,
   eth_getTransactionByHash,
   eth_getTransactionReceipt,
   getContractEvents,
@@ -110,10 +111,16 @@ export default async function Page(props: {
   let creationBlockNumber: bigint | undefined;
 
   if (twCloneFactoryContract) {
+    const latestBlockNumber = await eth_blockNumber(
+      getRpcClient({
+        client: contract.client,
+        chain: contract.chain,
+      }),
+    );
     const events = await getContractEvents({
       contract: twCloneFactoryContract,
       events: [ProxyDeployedEvent],
-      blockRange: 123456n,
+      blockRange: latestBlockNumber < 2000000n ? latestBlockNumber : 2000000n,
     });
     const event = events.find(
       (e) =>
@@ -165,7 +172,7 @@ export default async function Page(props: {
         }
       }),
     )
-  ).filter((c) => c.status === "DEPLOYED");
+  ).filter((c) => c.chainId !== contract.chain.id);
 
   let coreMetadata: FetchDeployMetadataResult | undefined;
   try {
@@ -260,10 +267,11 @@ export default async function Page(props: {
     <>
       <div>
         <h2 className="mb-1 font-bold text-2xl tracking-tight">
-          Deploy Cross-chain
+          Cross-chain contracts
         </h2>
         <p className="text-muted-foreground">
-          Deterministically deploy your contracts on multiple networks.
+          Deterministically deploy and interact with your contracts on multiple
+          networks.
         </p>
       </div>
       <div className="h-10" />
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
@@ -62,6 +62,7 @@ import {
   getModuleInstallParams,
   showPrimarySaleFieldset,
   showRoyaltyFieldset,
+  showSuperchainBridgeFieldset,
 } from "./modular-contract-default-modules-fieldset";
 import { Param } from "./param";
 import { PlatformFeeFieldset } from "./platform-fee-fieldset";
@@ -294,6 +295,9 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
                 // set connected wallet address as default "primarySaleRecipient"
                 else if (showPrimarySaleFieldset(paramNames)) {
                   returnVal.primarySaleRecipient = activeAccount.address;
+                } else if (showSuperchainBridgeFieldset(paramNames)) {
+                  returnVal.superchainBridge =
+                    "0x4200000000000000000000000000000000000028";
                 }
 
                 acc[mod.name] = returnVal;
diff --git a/apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx b/apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx
@@ -226,3 +226,7 @@ export function showPrimarySaleFieldset(paramNames: string[]) {
 function showSequentialTokenIdFieldset(paramNames: string[]) {
   return paramNames.length === 1 && paramNames.includes("startTokenId");
 }
+
+export function showSuperchainBridgeFieldset(paramNames: string[]) {
+  return paramNames.length === 1 && paramNames.includes("superchainBridge");
+}
diff --git a/apps/dashboard/src/components/explore/contract-card/index.tsx b/apps/dashboard/src/components/explore/contract-card/index.tsx
@@ -114,7 +114,7 @@ export async function ContractCard({
       <div className="flex justify-between">
         <div className="flex items-center gap-1.5">
           {/* Audited */}
-          {auditLink && (
+          {auditLink && !isBeta && (
             <>
               <Link
                 target="_blank"
diff --git a/apps/dashboard/src/data/explore.ts b/apps/dashboard/src/data/explore.ts
@@ -192,6 +192,43 @@ const MODULAR_CONTRACTS = {
   ],
 } satisfies ExploreCategory;
 
+const SUPERCHAIN = {
+  id: "modular-superchain-contracts",
+  name: "Modular Superchain Contracts",
+  displayName: "Modular Superchain Contracts",
+  description: "Modular contracts with OP Superchain support",
+  contracts: [
+    // erc20 token + superchain
+    [
+      "thirdweb.eth/ERC20CoreInitializable",
+      [
+        "deployer.thirdweb.eth/MintableERC20",
+        "deployer.thirdweb.eth/TransferableERC20",
+        "deployer.thirdweb.eth/SuperChainInterop",
+      ],
+      {
+        title: "Modular Superchain Token",
+        description: "ERC20 Tokens that only owners can mint.",
+      },
+    ],
+    // erc20 drop + superchain
+    [
+      "thirdweb.eth/ERC20CoreInitializable",
+      [
+        "deployer.thirdweb.eth/ClaimableERC20",
+        "deployer.thirdweb.eth/TransferableERC20",
+        "deployer.thirdweb.eth/SuperChainInterop",
+      ],
+      {
+        title: "Modular Superchain Token Drop",
+        description: "ERC20 Tokens that others can mint.",
+      },
+    ],
+  ],
+  showInExplore: true,
+  isBeta: true,
+} satisfies ExploreCategory;
+
 const AIRDROP = {
   id: "airdrop",
   name: "Airdrop",
@@ -281,6 +318,7 @@ const SMART_WALLET = {
 const CATEGORIES: Record<string, ExploreCategory> = {
   [POPULAR.id]: POPULAR,
   [MODULAR_CONTRACTS.id]: MODULAR_CONTRACTS,
+  [SUPERCHAIN.id]: SUPERCHAIN,
   [NFTS.id]: NFTS,
   [MARKETS.id]: MARKETS,
   [DROPS.id]: DROPS,
diff --git a/packages/thirdweb/src/contract/deployment/utils/create-2-factory.ts b/packages/thirdweb/src/contract/deployment/utils/create-2-factory.ts

Original file line number	Diff line number	Diff line change
`@@ -226,3 +226,7 @@ export function showPrimarySaleFieldset(paramNames: string[]) {`
`226`	`226`	`function showSequentialTokenIdFieldset(paramNames: string[]) {`
`227`	`227`	`return paramNames.length === 1 && paramNames.includes("startTokenId");`
`228`	`228`	`}`
	`229`	`+`
	`230`	`+export function showSuperchainBridgeFieldset(paramNames: string[]) {`
	`231`	`+ return paramNames.length === 1 && paramNames.includes("superchainBridge");`
	`232`	`+}`