update useSubmitTransaction hook

arjanjohan · Sep 21, 2024 · 3e14769 · 3e14769
1 parent 16f9fa3
commit 3e14769
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/packages/nextjs/app/bio/page.tsx b/packages/nextjs/app/bio/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { InputTransactionData, Types, useWallet } from "@aptos-labs/wallet-adapter-react";
+import { Types, useWallet } from "@aptos-labs/wallet-adapter-react";
 import type { NextPage } from "next";
 import { InputBase } from "~~/components/scaffold-move";
 import { useGetAccountResource } from "~~/hooks/scaffold-move";
@@ -32,7 +32,7 @@ const OnchainBio: NextPage = () => {
   const [currentName, setCurrentName] = useState<string | null>(null);
   const [currentBio, setCurrentBio] = useState<string | null>(null);
 
-  const { submitTransaction, transactionResponse, transactionInProcess } = useSubmitTransaction();
+  const { submitTransaction, transactionResponse, transactionInProcess } = useSubmitTransaction("onchain_bio");
 
   const moveModule = useGetModule("onchain_bio");
   const bioAbi = moveModule?.abi;
@@ -74,16 +74,9 @@ const OnchainBio: NextPage = () => {
     }
 
     try {
-      const transaction: InputTransactionData = {
-        data: {
-          function: `${bioAbi.address}::${bioAbi.name}::register`,
-          functionArguments: [inputName, inputBio],
-        },
-      };
-
-      await submitTransaction(transaction);
-      await fetchBio();
+      await submitTransaction("register", [inputName, inputBio]);
 
+      // await fetchBio();
       if (transactionResponse?.transactionSubmitted) {
         console.log("Transaction successful:", transactionResponse.success ? "success" : "failed");
       }

diff --git a/packages/nextjs/app/debug/_components/module/WriteFunctionForm.tsx b/packages/nextjs/app/debug/_components/module/WriteFunctionForm.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { parseTypeTag } from "@aptos-labs/ts-sdk";
-import { InputTransactionData, useWallet } from "@aptos-labs/wallet-adapter-react";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
 import { Types } from "aptos";
 import useSubmitTransaction from "~~/hooks/scaffold-move/useSubmitTransaction";
 import { useTargetNetwork } from "~~/hooks/scaffold-move/useTargetNetwork";
@@ -26,7 +26,7 @@ function removeSignerParam(fn: Types.MoveFunction) {
 }
 
 export const WriteFunctionForm = ({ module, fn }: FunctionFormProps) => {
-  const { submitTransaction, transactionResponse, transactionInProcess } = useSubmitTransaction();
+  const { submitTransaction, transactionResponse, transactionInProcess } = useSubmitTransaction(module.name.toString());
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<ModuleFormType>({ typeArgs: [], args: [] });
 
@@ -80,19 +80,14 @@ export const WriteFunctionForm = ({ module, fn }: FunctionFormProps) => {
   };
 
   const handleWrite = async () => {
-    const payload: InputTransactionData = {
-      data: {
-        function: `${module.address}::${module.name}::${fn.name}`,
-        typeArguments: data.typeArgs,
-        functionArguments: data.args.map((arg, i) => {
-          const type = fnParams[i];
-          return convertArgument(arg, type);
-        }),
-      },
-    };
+    // const typeArguments = data.typeArgs;
+    const functionArguments = data.args.map((arg, i) => {
+      const type = fnParams[i];
+      return convertArgument(arg, type);
+    });
 
     try {
-      await submitTransaction(payload);
+      await submitTransaction(fn.name, functionArguments);
 
       if (transactionResponse?.transactionSubmitted) {
         console.log("function_interacted", fn.name, {

diff --git a/packages/nextjs/hooks/scaffold-move/useSubmitTransaction.ts b/packages/nextjs/hooks/scaffold-move/useSubmitTransaction.ts
@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
+import { useGetModule } from "./useGetModule";
 import { InputTransactionData, useWallet } from "@aptos-labs/wallet-adapter-react";
 import { FailedTransactionError } from "aptos";
 import { useAptosClient } from "~~/hooks/scaffold-move/useAptosClient";
 import { useTargetNetwork } from "~~/hooks/scaffold-move/useTargetNetwork";
+import { ModuleName } from "~~/utils/scaffold-move/module";
 
 export type TransactionResponse = TransactionResponseOnSubmission | TransactionResponseOnError;
 
@@ -20,23 +22,43 @@ export type TransactionResponseOnError = {
   message: string;
 };
 
-const useSubmitTransaction = () => {
+const useSubmitTransaction = <TModuleName extends ModuleName>(moduleName: TModuleName) => {
   const [transactionResponse, setTransactionResponse] = useState<TransactionResponse | null>(null);
   const [transactionInProcess, setTransactionInProcess] = useState<boolean>(false);
+  const [moduleAddress, setModuleAddress] = useState<string | null>(null);
 
   const network = useTargetNetwork();
   const aptos = useAptosClient(network.targetNetwork.id);
 
+  // TODO: with Nightly wallet it can fail because network is mismatched.
   const { signAndSubmitTransaction } = useWallet();
 
+  const moveModule = useGetModule(moduleName.toString());
+  if (!moveModule) {
+    throw new Error("Module not found");
+  }
+  useEffect(() => {
+    if (moveModule) {
+      setModuleAddress(moveModule.abi.address);
+    } else {
+      throw new Error("Module not found");
+    }
+  }, [moveModule]);
+
   useEffect(() => {
     if (transactionResponse !== null) {
       setTransactionInProcess(false);
     }
   }, [transactionResponse]);
 
-  // TODO: Replace `transaction: InputTransactionData` by moduleName, functionName, args
-  async function submitTransaction(transaction: InputTransactionData) {
+  async function submitTransaction(functionName: string, args: any[]) {
+    const transaction: InputTransactionData = {
+      data: {
+        function: `${moduleAddress}::${moduleName.toString()}::${functionName}`,
+        functionArguments: args,
+      },
+    };
+
     setTransactionInProcess(true);
     const signAndSubmitTransactionCall = async (transaction: InputTransactionData): Promise<TransactionResponse> => {
       const responseOnError: TransactionResponseOnError = {
@@ -46,14 +68,14 @@ const useSubmitTransaction = () => {
       let response;
       try {
         response = await signAndSubmitTransaction(transaction);
-
         // transaction submit succeed
-        if ("hash" in response) {
-          // await state.aptos_client.waitForTransaction(response["hash"], {
-          //   checkSuccess: true,
-          // });
-
-          await aptos.waitForTransaction(response["hash"]);
+        if (response.hash) {
+          await aptos.waitForTransaction({
+            transactionHash: response.hash,
+            options: {
+              checkSuccess: true,
+            },
+          });
 
           return {
             transactionSubmitted: true,