fix(solid): fix transaction signing functions (#172)

* fix(solid): signing functions should not use optional chaining * feat: transaction signing in Solid example app
TxnLab · May 16, 2024 · 097638f · 097638f
1 parent 9e2611b
commit 097638f
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 13 deletions.
diff --git a/examples/solid-ts/src/Connect.tsx b/examples/solid-ts/src/Connect.tsx
@@ -1,8 +1,59 @@
-import { useWallet } from '@txnlab/use-wallet-solid'
-import { For, Show } from 'solid-js'
+import { useWallet, type BaseWallet } from '@txnlab/use-wallet-solid'
+import algosdk from 'algosdk'
+import { For, Show, createSignal } from 'solid-js'
 
 export function Connect() {
-  const { activeWalletId, isWalletActive, isWalletConnected, wallets } = useWallet()
+  const [isSending, setIsSending] = createSignal(false)
+  const {
+    algodClient,
+    activeAddress,
+    activeWalletId,
+    isWalletActive,
+    isWalletConnected,
+    transactionSigner,
+    wallets
+  } = useWallet()
+
+  const setActiveAccount = (event: Event & { target: HTMLSelectElement }, wallet: BaseWallet) => {
+    const target = event.target
+    wallet.setActiveAccount(target.value)
+  }
+
+  const sendTransaction = async () => {
+    try {
+      const sender = activeAddress()
+      if (!sender) {
+        throw new Error('[App] No active account')
+      }
+
+      const atc = new algosdk.AtomicTransactionComposer()
+      const suggestedParams = await algodClient().getTransactionParams().do()
+
+      const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
+        from: sender,
+        to: sender,
+        amount: 0,
+        suggestedParams
+      })
+
+      atc.addTransaction({ txn: transaction, signer: transactionSigner })
+
+      console.info(`[App] Sending transaction...`, transaction)
+
+      setIsSending(true)
+
+      const result = await atc.execute(algodClient(), 4)
+
+      console.info(`[App] ✅ Successfully sent transaction!`, {
+        confirmedRound: result.confirmedRound,
+        txIDs: result.txIDs
+      })
+    } catch (error) {
+      console.error('[App] Error signing transaction:', error)
+    } finally {
+      setIsSending(false)
+    }
+  }
 
   return (
     <div>
@@ -30,6 +81,11 @@ export function Connect() {
               >
                 Disconnect
               </button>
+              <Show when={wallet.id === activeWalletId()}>
+                <button type="button" onClick={sendTransaction} disabled={isSending()}>
+                  {isSending() ? 'Sending Transaction...' : 'Send Transaction'}
+                </button>
+              </Show>
               <button
                 type="button"
                 onClick={() => wallet.setActive()}
@@ -41,12 +97,7 @@ export function Connect() {
 
             <Show when={wallet.id === activeWalletId() && wallet.accounts.length}>
               <div>
-                <select
-                  onChange={(event) => {
-                    const target = event.target
-                    wallet.setActiveAccount(target?.value)
-                  }}
-                >
+                <select onChange={(event) => setActiveAccount(event, wallet)}>
                   <For each={wallet.accounts}>
                     {(account) => <option value={account.address}>{account.address}</option>}
                   </For>

diff --git a/packages/use-wallet-solid/src/useWallet.ts b/packages/use-wallet-solid/src/useWallet.ts
@@ -71,17 +71,19 @@ export function useWallet() {
     indexesToSign?: number[],
     returnGroup?: boolean
   ) => {
-    if (!activeWallet) {
+    const wallet = activeWallet()
+    if (!wallet) {
       throw new Error('No active wallet')
     }
-    return activeWallet()?.signTransactions(txnGroup, indexesToSign, returnGroup)
+    return wallet.signTransactions(txnGroup, indexesToSign, returnGroup)
   }
 
   const transactionSigner = (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => {
-    if (!activeWallet) {
+    const wallet = activeWallet()
+    if (!wallet) {
       throw new Error('No active wallet')
     }
-    return activeWallet()?.transactionSigner(txnGroup, indexesToSign)
+    return wallet.transactionSigner(txnGroup, indexesToSign)
   }
 
   return {