show 2 steps for airdrop

Author: MananTank

apps/dashboard/src/@/analytics/report.ts

@@ -374,7 +374,8 @@ export function reportAssetCreationFailed(
           | "deploy-contract"
           | "set-claim-conditions"
           | "mint-tokens"
-          | "airdrop-tokens";
+          | "airdrop-tokens"
+          | "approve-airdrop-tokens";
       }
   ),
 ) {

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

@@ -176,34 +176,23 @@ export function CreateTokenAssetPage(props: {
     const account = getAccount(gasless);
     const contract = getDeployedContract({ chain: values.chain });
 
-    const totalAmountToAirdrop = values.airdropAddresses.reduce(
-      (acc, recipient) => acc + BigInt(recipient.quantity),
-      0n,
-    );
-
-    // approve entrypoint to spend tokens
-
     try {
-      const entrypoint = await getDeployedEntrypointERC20({
+      const airdropTx = await distributeToken({
         chain: contract.chain,
         client: props.client,
-      });
-
-      if (!entrypoint) {
-        throw new Error("Entrypoint not found");
-      }
-
-      const approvalTx = approve({
-        amountWei: toWei(totalAmountToAirdrop.toString()),
-        contract: contract,
-        spender: entrypoint.address,
+        contents: values.airdropAddresses.map((recipient) => ({
+          amount: BigInt(recipient.quantity),
+          recipient: recipient.address,
+        })),
+        tokenAddress: contract.address,
       });
 
       await sendAndConfirmTransaction({
         account,
-        transaction: approvalTx,
+        transaction: airdropTx,
       });
     } catch (e) {
+      console.error(e);
       const errorMessage = parseError(e);
 
       reportAssetCreationFailed({
@@ -212,27 +201,44 @@ export function CreateTokenAssetPage(props: {
         error: errorMessage,
         step: "airdrop-tokens",
       });
-
       throw e;
     }
+  }
+
+  async function approveAirdropTokens(params: {
+    values: CreateAssetFormValues;
+    gasless: boolean;
+  }) {
+    const { values, gasless } = params;
+    const account = getAccount(gasless);
+    const contract = getDeployedContract({ chain: values.chain });
+
+    const totalAmountToAirdrop = values.airdropAddresses.reduce(
+      (acc, recipient) => acc + BigInt(recipient.quantity),
+      0n,
+    );
 
     try {
-      const airdropTx = await distributeToken({
+      const entrypoint = await getDeployedEntrypointERC20({
         chain: contract.chain,
         client: props.client,
-        contents: values.airdropAddresses.map((recipient) => ({
-          amount: BigInt(recipient.quantity),
-          recipient: recipient.address,
-        })),
-        tokenAddress: contract.address,
+      });
+
+      if (!entrypoint) {
+        throw new Error("Entrypoint not found");
+      }
+
+      const approvalTx = approve({
+        amountWei: toWei(totalAmountToAirdrop.toString()),
+        contract: contract,
+        spender: entrypoint.address,
       });
 
       await sendAndConfirmTransaction({
         account,
-        transaction: airdropTx,
+        transaction: approvalTx,
       });
     } catch (e) {
-      console.error(e);
       const errorMessage = parseError(e);
 
       reportAssetCreationFailed({
@@ -241,6 +247,7 @@ export function CreateTokenAssetPage(props: {
         error: errorMessage,
         step: "airdrop-tokens",
       });
+
       throw e;
     }
   }
@@ -252,6 +259,7 @@ export function CreateTokenAssetPage(props: {
       createTokenFunctions={{
         airdropTokens,
         deployContract,
+        approveAirdropTokens,
       }}
       onLaunchSuccess={(params) => {
         createTokenOnUniversalBridge({

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

@@ -28,6 +28,7 @@ export type CreateTokenFunctions = {
     contractAddress: string;
   }>;
   airdropTokens: (values: CreateTokenFunctionsParams) => Promise<void>;
+  approveAirdropTokens: (values: CreateTokenFunctionsParams) => Promise<void>;
 };
 
 export function CreateTokenAssetPageUI(props: {

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

@@ -29,6 +29,9 @@ const mockCreateTokenFunctions: CreateTokenFunctions = {
   airdropTokens: async () => {
     await new Promise((resolve) => setTimeout(resolve, 1000));
   },
+  approveAirdropTokens: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  },
   deployContract: async () => {
     await new Promise((resolve) => setTimeout(resolve, 1000));
     return { contractAddress: "0x123" };

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

@@ -39,6 +39,7 @@ import { TokenDistributionBarChart } from "../distribution/token-distribution";
 
 const stepIds = {
   "airdrop-tokens": "airdrop-tokens",
+  "approve-airdrop-tokens": "approve-airdrop-tokens",
   "deploy-contract": "deploy-contract",
   "mint-tokens": "mint-tokens",
   "set-claim-conditions": "set-claim-conditions",
@@ -97,6 +98,12 @@ export function LaunchTokenStatus(props: {
     ];
 
     if (formValues.airdropEnabled && formValues.airdropAddresses.length > 0) {
+      initialSteps.push({
+        id: stepIds["approve-airdrop-tokens"],
+        label: "Approve spending tokens for airdrop",
+        status: { type: "idle" },
+      });
+
       initialSteps.push({
         id: stepIds["airdrop-tokens"],
         label: "Airdrop tokens",
@@ -123,6 +130,8 @@ export function LaunchTokenStatus(props: {
       setContractAddress(result.contractAddress);
     } else if (stepId === "airdrop-tokens") {
       await createTokenFunctions.airdropTokens(params);
+    } else if (stepId === "approve-airdrop-tokens") {
+      await createTokenFunctions.approveAirdropTokens(params);
     }
   }