[TOOL-4988] Dashboard, SDK: Add gas sponsorship option for asset creation for in-app wallets

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/_common/form.ts

@@ -42,16 +42,29 @@ export type CreateNFTCollectionFunctions = {
       address: string;
     }[];
     chain: string;
+    gasless: boolean;
   }) => Promise<void>;
   erc721: {
-    deployContract: (values: CreateNFTCollectionAllValues) => Promise<{
+    deployContract: (params: {
+      values: CreateNFTCollectionAllValues;
+      gasless: boolean;
+    }) => Promise<{
       contractAddress: string;
     }>;
-    setClaimConditions: (values: CreateNFTCollectionAllValues) => Promise<void>;
-    lazyMintNFTs: (values: CreateNFTCollectionAllValues) => Promise<void>;
+    setClaimConditions: (params: {
+      values: CreateNFTCollectionAllValues;
+      gasless: boolean;
+    }) => Promise<void>;
+    lazyMintNFTs: (params: {
+      values: CreateNFTCollectionAllValues;
+      gasless: boolean;
+    }) => Promise<void>;
   };
   erc1155: {
-    deployContract: (values: CreateNFTCollectionAllValues) => Promise<{
+    deployContract: (params: {
+      values: CreateNFTCollectionAllValues;
+      gasless: boolean;
+    }) => Promise<{
       contractAddress: string;
     }>;
     setClaimConditions: (params: {
@@ -60,8 +73,12 @@ export type CreateNFTCollectionFunctions = {
         startIndex: number;
         count: number;
       };
+      gasless: boolean;
+    }) => Promise<void>;
+    lazyMintNFTs: (params: {
+      values: CreateNFTCollectionAllValues;
+      gasless: boolean;
     }) => Promise<void>;
-    lazyMintNFTs: (values: CreateNFTCollectionAllValues) => Promise<void>;
   };
 };
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/nft/create-nft-page.tsx

@@ -21,6 +21,7 @@ import {
 import { grantRole } from "thirdweb/extensions/permissions";
 import { useActiveAccount } from "thirdweb/react";
 import { maxUint256 } from "thirdweb/utils";
+import { create7702MinimalAccount } from "thirdweb/wallets/smart";
 import { revalidatePathAction } from "@/actions/revalidate";
 import {
   reportAssetCreationFailed,
@@ -42,15 +43,26 @@ export function CreateNFTPage(props: {
   teamPlan: Team["billingPlan"];
 }) {
   const activeAccount = useActiveAccount();
-
   const addContractToProject = useAddContractToProject();
   const contractAddressRef = useRef<string | undefined>(undefined);
 
-  function getContractAndAccount(params: { chain: string }) {
+  function getAccount(params: { gasless: boolean }) {
     if (!activeAccount) {
       throw new Error("Wallet is not connected");
     }
 
+    if (params.gasless) {
+      return create7702MinimalAccount({
+        adminAccount: activeAccount,
+        client: props.client,
+        sponsorGas: true,
+      });
+    }
+
+    return activeAccount;
+  }
+
+  function getDeployedContract(params: { chain: string }) {
     // eslint-disable-next-line no-restricted-syntax
     const chain = defineChain(Number(params.chain));
 
@@ -60,30 +72,26 @@ export function CreateNFTPage(props: {
       throw new Error("Contract not found");
     }
 
-    const contract = getContract({
+    return getContract({
       address: contractAddress,
       chain,
       client: props.client,
     });
-
-    return {
-      activeAccount,
-      contract,
-    };
   }
 
   async function handleContractDeploy(params: {
     values: CreateNFTCollectionAllValues;
     ercType: "erc721" | "erc1155";
+    gasless: boolean;
   }) {
     const { values: formValues, ercType } = params;
     const { collectionInfo, sales } = formValues;
     const contractType =
       ercType === "erc721" ? ("DropERC721" as const) : ("DropERC1155" as const);
 
-    if (!activeAccount) {
-      throw new Error("Wallet is not connected");
-    }
+    const account = getAccount({
+      gasless: params.gasless,
+    });
 
     // eslint-disable-next-line no-restricted-syntax
     const chain = defineChain(Number(collectionInfo.chain));
@@ -93,7 +101,7 @@ export function CreateNFTPage(props: {
 
       if (ercType === "erc721") {
         contractAddress = await deployERC721Contract({
-          account: activeAccount,
+          account,
           chain: chain,
           client: props.client,
           params: {
@@ -110,7 +118,7 @@ export function CreateNFTPage(props: {
         });
       } else {
         contractAddress = await deployERC1155Contract({
-          account: activeAccount,
+          account,
           chain: chain,
           client: props.client,
           params: {
@@ -166,27 +174,32 @@ export function CreateNFTPage(props: {
   }
 
   async function handleLazyMintNFTs(params: {
-    formValues: CreateNFTCollectionAllValues;
+    values: CreateNFTCollectionAllValues;
     ercType: "erc721" | "erc1155";
+    gasless: boolean;
   }) {
-    const { formValues, ercType } = params;
+    const { values, ercType } = params;
     const contractType =
       ercType === "erc721" ? ("DropERC721" as const) : ("DropERC1155" as const);
 
-    const { contract, activeAccount } = getContractAndAccount({
-      chain: formValues.collectionInfo.chain,
+    const contract = getDeployedContract({
+      chain: values.collectionInfo.chain,
+    });
+
+    const account = getAccount({
+      gasless: params.gasless,
     });
 
     const lazyMintFn = ercType === "erc721" ? lazyMint721 : lazyMint1155;
 
     const transaction = lazyMintFn({
       contract,
-      nfts: formValues.nfts,
+      nfts: values.nfts,
     });
 
     try {
       await sendAndConfirmTransaction({
-        account: activeAccount,
+        account,
         transaction,
       });
     } catch (error) {
@@ -205,14 +218,19 @@ export function CreateNFTPage(props: {
   }
 
   async function handleSetClaimConditionsERC721(params: {
-    formValues: CreateNFTCollectionAllValues;
+    values: CreateNFTCollectionAllValues;
+    gasless: boolean;
   }) {
-    const { formValues } = params;
-    const { contract, activeAccount } = getContractAndAccount({
-      chain: formValues.collectionInfo.chain,
+    const { values } = params;
+    const contract = getDeployedContract({
+      chain: values.collectionInfo.chain,
     });
 
-    const firstNFT = formValues.nfts[0];
+    const account = getAccount({
+      gasless: params.gasless,
+    });
+
+    const firstNFT = values.nfts[0];
     if (!firstNFT) {
       throw new Error("No NFTs found");
     }
@@ -235,7 +253,7 @@ export function CreateNFTPage(props: {
 
     try {
       await sendAndConfirmTransaction({
-        account: activeAccount,
+        account,
         transaction,
       });
     } catch (error) {
@@ -259,12 +277,17 @@ export function CreateNFTPage(props: {
       startIndex: number;
       count: number;
     };
+    gasless: boolean;
   }) {
     const { values, batch } = params;
-    const { contract, activeAccount } = getContractAndAccount({
+    const contract = getDeployedContract({
       chain: values.collectionInfo.chain,
     });
 
+    const account = getAccount({
+      gasless: params.gasless,
+    });
+
     const endIndexExclusive = batch.startIndex + batch.count;
     const nfts = values.nfts.slice(batch.startIndex, endIndexExclusive);
 
@@ -315,7 +338,7 @@ export function CreateNFTPage(props: {
 
     try {
       await sendAndConfirmTransaction({
-        account: activeAccount,
+        account,
         transaction: tx,
       });
     } catch (error) {
@@ -339,15 +362,20 @@ export function CreateNFTPage(props: {
     admins: {
       address: string;
     }[];
+    gasless: boolean;
     chain: string;
   }) {
-    const { contract, activeAccount } = getContractAndAccount({
+    const contract = getDeployedContract({
       chain: params.chain,
     });
 
+    const account = getAccount({
+      gasless: params.gasless,
+    });
+
     // remove the current account from the list - its already an admin, don't have to add it again
     const adminsToAdd = params.admins.filter(
-      (admin) => admin.address !== activeAccount.address,
+      (admin) => admin.address !== account.address,
     );
 
     const encodedTxs = await Promise.all(
@@ -369,7 +397,7 @@ export function CreateNFTPage(props: {
 
     try {
       await sendAndConfirmTransaction({
-        account: activeAccount,
+        account,
         transaction: tx,
       });
     } catch (e) {
@@ -392,35 +420,35 @@ export function CreateNFTPage(props: {
       {...props}
       createNFTFunctions={{
         erc721: {
-          deployContract: (formValues) => {
+          deployContract: (params) => {
             return handleContractDeploy({
               ercType: "erc721",
-              values: formValues,
+              ...params,
             });
           },
-          lazyMintNFTs: (formValues) => {
+          lazyMintNFTs: (params) => {
             return handleLazyMintNFTs({
               ercType: "erc721",
-              formValues,
+              ...params,
             });
           },
-          setClaimConditions: async (formValues) => {
+          setClaimConditions: async (params) => {
             return handleSetClaimConditionsERC721({
-              formValues,
+              ...params,
             });
           },
         },
         erc1155: {
-          deployContract: (formValues) => {
+          deployContract: (params) => {
             return handleContractDeploy({
               ercType: "erc1155",
-              values: formValues,
+              ...params,
             });
           },
-          lazyMintNFTs: (formValues) => {
+          lazyMintNFTs: (params) => {
             return handleLazyMintNFTs({
               ercType: "erc1155",
-              formValues,
+              ...params,
             });
           },
           setClaimConditions: async (params) => {