clean up demo dapp from unnecessary server calls

aptos-labs · Mar 29, 2024 · 07e890b · 07e890b
1 parent c8da908
commit 07e890b
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 110 deletions.
diff --git a/apps/nextjs-example/components/transactionFlow/MultiAgent.tsx b/apps/nextjs-example/components/transactionFlow/MultiAgent.tsx
@@ -5,7 +5,7 @@ import {
 } from "@aptos-labs/ts-sdk";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { aptosClient } from "../../utils";
 import { useAlert } from "../AlertProvider";
 import Button from "../Button";
@@ -35,65 +35,40 @@ export default function MultiAgentTransaction({
 
   let sendable = isSendableNetwork(connected, network?.name);
 
-  useEffect(() => {
-    if (!sendable) return;
-    if (!account) return;
-    if (!network) return;
+  const generateTransaction = async (): Promise<AnyRawTransaction> => {
+    if (!account) {
+      throw new Error("no account");
+    }
+    if (!network) {
+      throw new Error("no network");
+    }
 
     const secondarySigner = Account.generate();
-
-    // Generate a raw transaction using the SDK
-    const generate = async (): Promise<AnyRawTransaction> => {
-      const transactionToSign = await aptosClient(
-        network?.name.toLowerCase()
-      ).transaction.build.multiAgent({
-        sender: account.address,
-        secondarySignerAddresses: [secondarySigner.accountAddress],
-        data: {
-          function: "0x1::coin::transfer",
-          typeArguments: [APTOS_COIN],
-          functionArguments: [account.address, 1], // 1 is in Octas
-        },
-      });
-      return transactionToSign;
-    };
-
-    // Fund secondary signer account to create it on chain
-    const fundSecondarySigner = async () => {
-      await aptosClient(network.name.toLowerCase()).fundAccount({
-        accountAddress: secondarySigner.accountAddress.toString(),
-        amount: 100_000_000,
-      });
-    };
-
-    // Fund current connected account to create it on chain
-    const fundCurrentAccount = async () => {
-      await aptosClient(network.name.toLowerCase()).fundAccount({
-        accountAddress: account.address,
-        amount: 100_000_000,
-      });
-    };
-
-    // We fund the secondary signer account to create it on chain
-    // We fund the current connected account to create it on chain
-    // Then we generate the transaction with the current connected account
-    // as the sender and the secondary signer account
-    fundSecondarySigner().then(() => {
-      setSecondarySignerAccount(secondarySigner);
-      fundCurrentAccount().then(() => {
-        generate().then((transactionToSign) =>
-          setTransactionToSubmit(transactionToSign)
-        );
-      });
+    await aptosClient(network.name.toLowerCase()).fundAccount({
+      accountAddress: secondarySigner.accountAddress.toString(),
+      amount: 100_000_000,
     });
-  }, [network, account, sendable]);
+    setSecondarySignerAccount(secondarySigner);
+
+    const transactionToSign = await aptosClient(
+      network?.name.toLowerCase()
+    ).transaction.build.multiAgent({
+      sender: account.address,
+      secondarySignerAddresses: [secondarySigner.accountAddress],
+      data: {
+        function: "0x1::coin::transfer",
+        typeArguments: [APTOS_COIN],
+        functionArguments: [account.address, 1], // 1 is in Octas
+      },
+    });
+    return transactionToSign;
+  };
 
   const onSenderSignTransaction = async () => {
-    if (!transactionToSubmit) {
-      throw new Error("No Transaction to sign");
-    }
+    const transaction = await generateTransaction();
+    setTransactionToSubmit(transaction);
     try {
-      const authenticator = await signTransaction(transactionToSubmit);
+      const authenticator = await signTransaction(transaction);
       setSenderAuthenticator(authenticator);
     } catch (error) {
       console.error(error);
@@ -144,7 +119,7 @@ export default function MultiAgentTransaction({
           <Button
             color={"blue"}
             onClick={onSenderSignTransaction}
-            disabled={!sendable || !transactionToSubmit}
+            disabled={!sendable}
             message={"Sign as sender"}
           />
 
@@ -162,7 +137,7 @@ export default function MultiAgentTransaction({
           />
         </Col>
       </Row>
-      {secondarySignerAccount && secondarySignerAuthenticator && (
+      {secondarySignerAccount && senderAuthenticator && (
         <Row>
           <Col title={true}>
             <h3>Secondary Signer details</h3>

diff --git a/apps/nextjs-example/components/transactionFlow/Sponsor.tsx b/apps/nextjs-example/components/transactionFlow/Sponsor.tsx
@@ -1,6 +1,10 @@
-import { AccountAddress, AccountAuthenticator, AnyRawTransaction } from "@aptos-labs/ts-sdk";
+import {
+  AccountAddress,
+  AccountAuthenticator,
+  AnyRawTransaction,
+} from "@aptos-labs/ts-sdk";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { aptosClient } from "../../utils";
 import { useAlert } from "../AlertProvider";
 import Button from "../Button";
@@ -24,65 +28,49 @@ export default function SponsorTransaction({
     useState<AccountAuthenticator>();
   const [feepayerAuthenticator, setFeepayerAuthenticator] =
     useState<AccountAuthenticator>();
-  const [feepayerAddress, setFeepayerAddress] =
-    useState<AccountAddress>();
+  const [feepayerAddress, setFeepayerAddress] = useState<AccountAddress>();
 
   let sendable = isSendableNetwork(connected, network?.name);
 
-  useEffect(() => {
-    if (!sendable) return;
-    if (!account) return;
-    if (!network) return;
-
-    // Generate a raw transaction using the SDK
-    const generate = async (): Promise<AnyRawTransaction> => {
-      const transactionToSign = await aptosClient(
-        network?.name.toLowerCase()
-      ).transaction.build.simple({
-        sender: account.address,
-        withFeePayer: true,
-        data: {
-          function: "0x1::coin::transfer",
-          typeArguments: [APTOS_COIN],
-          functionArguments: [account.address, 1], // 1 is in Octas
-        },
-      });
-      return transactionToSign;
-    };
+  // Generate a raw transaction using the SDK
+  const generateTransaction = async (): Promise<AnyRawTransaction> => {
+    if (!account) {
+      throw new Error("no account");
+    }
+    const transactionToSign = await aptosClient(
+      network?.name.toLowerCase()
+    ).transaction.build.simple({
+      sender: account.address,
+      withFeePayer: true,
+      data: {
+        function: "0x1::coin::transfer",
+        typeArguments: [APTOS_COIN],
+        functionArguments: [account.address, 1], // 1 is in Octas
+      },
+    });
+    return transactionToSign;
+  };
 
-    // Fund current connected account to create it on chain
-    const fundCurrentAccount = async () => {
-      await aptosClient(network.name.toLowerCase()).fundAccount({
-        accountAddress: account.address,
-        amount: 100_000_000,
-      });
-    };
+  const onSignTransaction = async () => {
+    const transaction = await generateTransaction();
+    setTransactionToSubmit(transaction);
 
-    // We fund the current connected account to create it on chain
-    // Then we generate the transaction with the current connected account
-    // as the sender
-    fundCurrentAccount().then(() => {
-      generate().then((transactionToSign) =>
-        setTransactionToSubmit(transactionToSign)
-      );
-    });
-  }, [network, account, sendable]);
+    try {
+      const authenticator = await signTransaction(transaction);
+      setSenderAuthenticator(authenticator);
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
-  const onSignTransaction = async (asSponsor?: boolean) => {
+  const onSignTransactionAsSponsor = async () => {
     if (!transactionToSubmit) {
       throw new Error("No Transaction to sign");
     }
     try {
-      const authenticator = await signTransaction(
-        transactionToSubmit,
-        asSponsor
-      );
-      if (asSponsor) {
-        setFeepayerAuthenticator(authenticator);
-        setFeepayerAddress(AccountAddress.from(account!.address));
-      } else {
-        setSenderAuthenticator(authenticator);
-      }
+      const authenticator = await signTransaction(transactionToSubmit, true);
+      setFeepayerAuthenticator(authenticator);
+      setFeepayerAddress(AccountAddress.from(account!.address));
     } catch (error) {
       console.error(error);
     }
@@ -119,13 +107,13 @@ export default function SponsorTransaction({
       <Col border={true}>
         <Button
           color={"blue"}
-          onClick={() => onSignTransaction(false)}
-          disabled={!sendable || !transactionToSubmit}
+          onClick={() => onSignTransaction()}
+          disabled={!sendable}
           message={"Sign as Sender"}
         />
         <Button
           color={"blue"}
-          onClick={() => onSignTransaction(true)}
+          onClick={() => onSignTransactionAsSponsor()}
           disabled={!sendable || !senderAuthenticator}
           message={"Sign as Sponsor"}
         />