Merge pull request #9 from ProvableHQ/feature/transaction-sign-react-example

Handles ExecuteTransaction

Author: dms120

examples/react-app/package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@provablehq/aleo-wallet-adaptor-core": "workspace:*",
+    "@provablehq/aleo-wallet-adaptor-leo": "workspace:*",
     "@provablehq/aleo-wallet-adaptor-puzzle": "workspace:*",
     "@provablehq/aleo-wallet-adaptor-react": "workspace:*",
     "@provablehq/aleo-wallet-adaptor-react-ui": "workspace:*",
-    "@provablehq/aleo-wallet-adaptor-leo": "workspace:*",
     "@puzzlehq/sdk": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

examples/react-app/src/App.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { AleoWalletProvider } from '@provablehq/aleo-wallet-adaptor-react';
 import { WalletConnectButton } from '@provablehq/aleo-wallet-adaptor-react-ui';
 import { PuzzleWalletAdapter } from '@provablehq/aleo-wallet-adaptor-puzzle';
@@ -29,53 +29,51 @@ const WalletInfo = () => {
 };
 
 // Example transaction component
-// const ExecuteTransaction = () => {
-//   const { executeTransaction, connected } = useWallet();
-//   const [txId, setTxId] = useState<string | null>(null);
-//   const [loading, setLoading] = useState(false);
+const ExecuteTransaction = () => {
+  const { executeTransaction, connected } = useWallet();
+  const [txId, setTxId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
 
-//   const handleExecute = async () => {
-//     if (!connected) return;
+  const handleExecute = async () => {
+    if (!connected) return;
 
-//     try {
-//       setLoading(true);
+    try {
+      setLoading(true);
 
-//       // This is just an example - you would need a real program and function to call
-//       const tx = await executeTransaction({
-//         program: 'hello_world.aleo',
-//         function: 'main',
-//         inputs: [],
-//       });
+      // This is just an example - you would need a real program and function to call
+      const tx = await executeTransaction({
+        program: 'hello_world.aleo',
+        function: 'main',
+        inputs: ['1u32', '1u32'],
+        fee: 100000,
+      });
 
-//       setTxId(tx.id);
-//     } catch (error) {
-//       console.error('Transaction failed', error);
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
+      setTxId(tx.id);
+    } catch (error) {
+      console.error('Transaction failed', error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-//   if (!connected) {
-//     return null;
-//   }
+  if (!connected) {
+    return null;
+  }
 
-//   return (
-//     <div className="transaction">
-//       <button
-//         onClick={handleExecute}
-//         disabled={loading}
-//       >
-//         {loading ? 'Executing...' : 'Execute Transaction'}
-//       </button>
+  return (
+    <div className="transaction">
+      <button onClick={handleExecute} disabled={loading}>
+        {loading ? 'Executing...' : 'Execute Transaction'}
+      </button>
 
-//       {txId && (
-//         <div className="tx-result">
-//           <p>Transaction ID: {txId}</p>
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
+      {txId && (
+        <div className="tx-result">
+          <p>Transaction ID: {txId}</p>
+        </div>
+      )}
+    </div>
+  );
+};
 
 export function App() {
   // memoize to avoid re‑instantiating adapters on each render
@@ -97,13 +95,14 @@ export function App() {
   );
 
   return (
-    <AleoWalletProvider wallets={wallets} autoConnect network={Network.MAINNET}>
+    <AleoWalletProvider wallets={wallets} autoConnect network={Network.TESTNET3}>
       <header>
         <div className="app">
           <h1>Aleo Wallet Example</h1>
           <WalletConnectButton />
 
           <WalletInfo />
+          <ExecuteTransaction />
         </div>
       </header>
       <main>{/* your DApp's components */}</main>

packages/aleo-types/src/transaction.ts

@@ -29,7 +29,7 @@ export interface Transaction {
   /**
    * The transaction fee
    */
-  fee?: string;
+  fee?: number;
 
   /**
    * The transaction data
@@ -59,7 +59,7 @@ export interface TransactionOptions {
   /**
    * The transaction fee to pay
    */
-  fee?: string;
+  fee?: number;
 
   /**
    * Record indices to use

packages/aleo-wallet-adaptor-leo/src/LeoWalletAdapter.ts

@@ -140,6 +140,7 @@ export class LeoWalletAdapter extends BaseAleoWalletAdapter {
       // Call connect and extract address safely
       try {
         await this._leoWallet?.connect(DecryptPermission.NoDecrypt, network);
+        this._network = network;
       } catch (error: unknown) {
         if (
           error instanceof Object &&
@@ -235,8 +236,8 @@ export class LeoWalletAdapter extends BaseAleoWalletAdapter {
       const requestData = {
         address: this._publicKey,
         chainId: this._network,
-        fee: options.fee ? parseFloat(options.fee) : 0.001,
-        feePrivate: true,
+        fee: options.fee ? options.fee : 0.001,
+        feePrivate: false,
         transitions: [
           {
             program: options.program,

packages/aleo-wallet-adaptor-puzzle/src/PuzzleWalletAdapter.ts

@@ -105,7 +105,7 @@ export class PuzzleWalletAdapter extends BaseAleoWalletAdapter {
   /**
    * Current network
    */
-  private _network: Network | undefined;
+  private _network: PuzzleNetwork | undefined;
 
   /**
    * Public key
@@ -173,7 +173,8 @@ export class PuzzleWalletAdapter extends BaseAleoWalletAdapter {
         throw new WalletConnectionError('Invalid response from wallet');
       }
 
-      this._network = network;
+      this._network =
+        network === Network.MAINNET ? PuzzleNetwork.AleoMainnet : PuzzleNetwork.AleoTestnet;
 
       const address = (response as { connection: { address: string } }).connection?.address;
 
@@ -252,7 +253,7 @@ export class PuzzleWalletAdapter extends BaseAleoWalletAdapter {
     }
 
     try {
-      const fee = options.fee ? parseFloat(options.fee) / 1000000 : 0.001;
+      const fee = options.fee ? options.fee / 1000000 : 0.001;
 
       const requestData = {
         type: EventType.Execute,
@@ -261,7 +262,7 @@ export class PuzzleWalletAdapter extends BaseAleoWalletAdapter {
         fee,
         inputs: options.inputs,
         address: this._publicKey,
-        network: this._network as unknown as PuzzleNetwork,
+        network: this._network,
       };
 
       const result = await requestCreateEvent(requestData);

packages/aleo-wallet-adaptor-react/src/WalletProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, ReactNode } from 'react';
 import type { WalletAdapter } from '@provablehq/aleo-wallet-standard';
-import type { Account, Network } from '@provablehq/aleo-types';
+import type { Account, Network, TransactionOptions } from '@provablehq/aleo-types';
 import { WalletReadyState } from '@provablehq/aleo-wallet-standard';
 import { WalletContext } from './context';
 
@@ -88,6 +88,12 @@ export const AleoWalletProvider: React.FC<{
     setWallet(null);
   };
 
+  const executeTransaction = async (options: TransactionOptions) => {
+    if (!wallet) throw new Error('No wallet selected');
+    if (!connected) throw new Error('No wallet connected');
+    return await wallet.executeTransaction(options);
+  };
+
   return (
     <WalletContext.Provider
       value={{
@@ -99,6 +105,7 @@ export const AleoWalletProvider: React.FC<{
         selectWallet,
         connect,
         disconnect,
+        executeTransaction,
       }}
     >
       {children}

packages/aleo-wallet-adaptor-react/src/context.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 import { WalletAdapter } from '@provablehq/aleo-wallet-standard';
-import { Account } from '@provablehq/aleo-types';
+import { Account, Transaction, TransactionOptions } from '@provablehq/aleo-types';
 
 /**
  * Wallet context state
@@ -46,6 +46,11 @@ export interface WalletContextState {
    * Disconnect from the connected wallet
    */
   disconnect: () => Promise<void>;
+
+  /**
+   * Execute a transaction
+   */
+  executeTransaction: (options: TransactionOptions) => Promise<Transaction>;
 }
 
 /**