Update fee payer example to submit from wallet

apps/nextjs-example/pages/index.tsx

@@ -312,11 +312,12 @@ function OptionalFunctionality() {
         connected,
         account,
         network,
-        signAndSubmitTransaction,
+        prepMultiTransaction,
         signAndSubmitBCSTransaction,
         signTransaction,
         signMessageAndVerify,
         signMultiAgentTransaction,
+        signAndSubmitMultiTransaction,
     } = useWallet();
     let sendable = isSendableNetwork(connected, network?.name)
 
@@ -409,7 +410,56 @@ function OptionalFunctionality() {
         return feePayerAccount;
     }
 
-    const onSubmitFeePayer = async () => {
+    const signAndSubmitFeePayerTransaction = async () => {
+        if (!account) {
+            throw new Error("Not connected");
+        }
+
+        let provider = aptosClient(network?.name.toLowerCase());
+        // Generate an account and fund it
+        let feePayerAccount = await fundAndSetFeePayer(provider);
+
+        const payload: Types.TransactionPayload = {
+            type: "entry_function_payload",
+            function: "0x1::aptos_account::transfer",
+            type_arguments: [],
+            arguments: [account.address, 1], // 1 is in Octas
+        };
+
+        // Get the information about gas & expiration from the wallet
+        let rawTxn = await prepMultiTransaction({
+            payload: payload,
+            feePayer: {
+                publicKey: feePayerAccount.pubKey().hex(),
+                address: feePayerAccount.address().hex()
+            },
+        });
+
+        if (!rawTxn) {
+            console.log("Failed to prep transaction");
+            return;
+        }
+
+        // Sign with fee payer
+        const feePayerAuthenticator = await provider.signMultiTransaction(feePayerAccount, rawTxn);
+
+        // Sign and submit with wallet
+        const response: undefined | Types.PendingTransaction = await signAndSubmitMultiTransaction({
+            payload: rawTxn,
+            feePayerSignature: HexString.fromUint8Array(feePayerAuthenticator.signature.value).hex()
+        });
+        if (response?.hash === undefined) {
+            throw new Error(`No response given ${response}`)
+        }
+        await aptosClient(network?.name.toLowerCase()).waitForTransaction(response.hash);
+        setSuccessAlertHash(response.hash, network?.name);
+
+        setSuccessAlertMessage(
+            JSON.stringify({signAndSubmitTransaction: response ?? "No response"})
+        );
+    };
+
+    const signFeePayerTransaction = async () => {
         if (!account) {
             throw new Error("Not connected");
         }
@@ -435,13 +485,14 @@ function OptionalFunctionality() {
         // We need to increase the default timeout
         let expiration_timestamp_secs = Math.floor(Date.now() / 1000) + 60000;
 
+
         const rawTxn = await provider.generateFeePayerTransaction(account.address, payload, feePayerAccount.address().hex(), [], {expiration_timestamp_secs: expiration_timestamp_secs.toString()})
 
         // Sign with fee payer
         const feePayerAuthenticator = await provider.signMultiTransaction(feePayerAccount, rawTxn);
 
         // Sign with user
-        const userSignature  = await signMultiAgentTransaction(rawTxn);
+        const userSignature = await signMultiAgentTransaction(rawTxn);
         // TODO: Why do we need to check this when the error should fail?
         if (!userSignature) {
             return;
@@ -455,12 +506,12 @@ function OptionalFunctionality() {
 
         // Submit it TODO: the wallet possibly should send it instead?
         let response: undefined | Types.PendingTransaction = undefined;
-            response = await provider.submitFeePayerTransaction(rawTxn, userAuthenticator, feePayerAuthenticator);
-            if (response?.hash === undefined) {
-                throw new Error(`No response given ${response}`)
-            }
-            await aptosClient(network?.name.toLowerCase()).waitForTransaction(response.hash);
-            setSuccessAlertHash(response.hash, network?.name);
+        response = await provider.submitFeePayerTransaction(rawTxn, userAuthenticator, feePayerAuthenticator);
+        if (response?.hash === undefined) {
+            throw new Error(`No response given ${response}`)
+        }
+        await aptosClient(network?.name.toLowerCase()).waitForTransaction(response.hash);
+        setSuccessAlertHash(response.hash, network?.name);
 
         setSuccessAlertMessage(
             JSON.stringify({signAndSubmitTransaction: response ?? "No response"})
@@ -477,8 +528,10 @@ function OptionalFunctionality() {
             <Button color={"blue"} onClick={onSignTransaction} disabled={!sendable} message={"Sign transaction"}/>
             <Button color={"blue"} onClick={onSignAndSubmitBCSTransaction} disabled={!sendable}
                     message={"Sign and submit BCS transaction"}/>
-            <Button color={"blue"} onClick={onSubmitFeePayer} disabled={!sendable}
-                    message={"Sign and submit fee payer"}/>
+            <Button color={"blue"} onClick={signFeePayerTransaction} disabled={!sendable}
+                    message={"Sign and submit fee payer by application"}/>
+            <Button color={"blue"} onClick={signAndSubmitFeePayerTransaction} disabled={!sendable}
+                    message={"Sign and submit fee payer by wallet"}/>
         </Col>
     </Row>;
 }