Wallets array reacting

TxnLab · Jan 22, 2024 · 9a3e46a · 9a3e46a
1 parent 0edc89d
commit 9a3e46a
Show file tree

Hide file tree

Showing 5 changed files with 426 additions and 163 deletions.
diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json
@@ -17,11 +17,11 @@
     "@walletconnect/modal": "^2.6.2",
     "@walletconnect/sign-client": "^2.10.2",
     "algosdk": "^2.7.0",
-    "solid-js": "^1.8.7"
+    "solid-js": "^1.8.11"
   },
   "devDependencies": {
     "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vite-plugin-solid": "^2.8.0"
+    "vite": "^5.0.12",
+    "vite-plugin-solid": "^2.8.2"
   }
 }
diff --git a/examples/solid-ts/src/Connect.tsx b/examples/solid-ts/src/Connect.tsx
@@ -5,14 +5,14 @@ import encoding from 'algosdk'
 
 export function Connect() {
   const {
-    wallets,
     activeNetwork,
     setActiveNetwork,
     activeWallet,
     activeWalletId,
     walletStateMap,
     activeWalletAccounts,
     activeWalletAddresses,
+    activeWalletState,
     activeAccount,
     activeAddress,
     algodClient,
@@ -21,17 +21,22 @@ export function Connect() {
 
   return (
     <div>
-      <For each={wallets()}>
+      <For each={manager().wallets}>
         {(wallet) => (
           <div>
+            <p>{wallet.id}</p>
             <h4>
               {wallet.metadata.name}{' '}
-              <Show when={wallet.isActive()} fallback="">
+              <Show when={wallet.id === activeWalletId()} fallback="">
                 [active]
               </Show>
             </h4>
             <div class="wallet-buttons">
-              <button type="button" onClick={() => wallet.connect()} disabled={wallet.isConnected}>
+              <button
+                type="button"
+                onClick={() => wallet.connect()}
+                disabled={!!walletStateMap()[wallet.id]?.accounts.length}
+              >
                 Connect
               </button>
               <button
@@ -44,13 +49,15 @@ export function Connect() {
               <button
                 type="button"
                 onClick={() => wallet.setActive()}
-                disabled={!wallet.isConnected || wallet.isActive()}
+                disabled={
+                  !walletStateMap()[wallet.id]?.accounts.length || wallet.id === activeWalletId()
+                }
               >
                 Set Active
               </button>
             </div>
 
-            <Show when={wallet.isActive() && wallet.accounts.length > 0}>
+            <Show when={wallet.id === activeWalletId() && wallet.accounts.length}>
               <div>
                 <select
                   onChange={(event) => {
@@ -62,6 +69,12 @@ export function Connect() {
                     {(account) => <option value={account.address}>{account.address}</option>}
                   </For>
                 </select>
+                <p>wallet.id: {wallet.id}</p>
+                <p>wallet.metadata: {wallet.metadata.name}</p>
+                <span>wallet.icon: </span>
+                <img src={wallet.metadata.icon} height={24} width={24} />
+                <p>wallet.activeAccount: {wallet.activeAccount?.name}</p>
+                <p>wallet.accounts: {JSON.stringify(wallet.accounts)}</p>
               </div>
             </Show>
           </div>
@@ -74,14 +87,15 @@ export function Connect() {
       <p>activeWallet: {activeWallet()?.metadata.name}</p>
       <p>activeWalletAccounts: {JSON.stringify(activeWalletAccounts())}</p>
       <p>activeWalletAddresses: {activeWalletAddresses()?.join(', ')}</p>
+      <p>activeWalletState: {JSON.stringify(activeWalletState())}</p>
       <p>activeAccount: {JSON.stringify(activeAccount())}</p>
       <p>activeAddress: {activeAddress()}</p>
       <p>algodClient int encoding: {algodClient().getIntEncoding()}</p>
       <button onClick={() => algodClient().setIntEncoding(encoding.IntDecoding.SAFE)}>
         Set Int encoding
       </button>
       <p>walletStateMap: {JSON.stringify(walletStateMap())}</p>
-      <pre>manager: {JSON.stringify(manager(), null, 2)}</pre>
+      {/* <pre>manager: {JSON.stringify(manager(), null, 2)}</pre> */}
     </div>
   )
 }
diff --git a/packages/use-wallet-solid/package.json b/packages/use-wallet-solid/package.json
@@ -89,7 +89,7 @@
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.5",
     "algosdk": "^2.6.0",
-    "solid-js": "^1.8.8",
+    "solid-js": "^1.8.11",
     "tsup": "^8.0.0",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.2.2"

diff --git a/packages/use-wallet-solid/src/useWallet.ts b/packages/use-wallet-solid/src/useWallet.ts
@@ -5,11 +5,11 @@ import type { NetworkId, WalletAccount, WalletId, WalletMetadata } from '@txnlab
 import type algosdk from 'algosdk'
 
 export interface Wallet {
-  id: string
-  metadata: WalletMetadata
-  accounts: WalletAccount[]
-  activeAccount: WalletAccount | null
-  isConnected: boolean
+  id: () => string
+  metadata: () => WalletMetadata
+  accounts: () => WalletAccount[]
+  activeAccount: () => WalletAccount | null
+  isConnected: () => boolean
   isActive: () => boolean
   connect: () => Promise<WalletAccount[]>
   disconnect: () => Promise<void>
@@ -21,9 +21,6 @@ export function useWallet() {
   // Good
   const manager = createMemo(() => useWalletManager())
 
-  // TODO: Not reactive when intDecoding is changed
-  const algodClient = createMemo(() => manager().algodClient)
-
   // Good
   const walletStateMap = useStore(manager().store, (state) => {
     console.log('Running walletStateMap callback...', state.wallets)
@@ -36,34 +33,11 @@ export function useWallet() {
     return state.activeWallet
   })
 
-  // Showing promise but needs more testing
-  const wallets = createMemo(() => {
-    console.log('Recomputing wallets...')
-
-    return [...manager().wallets.values()].map((wallet) => {
-      const walletState = walletStateMap()[wallet.id]
-
-      const walletObject: Wallet = {
-        id: wallet.id,
-        metadata: wallet.metadata,
-        accounts: walletState?.accounts ?? [],
-        activeAccount: walletState?.activeAccount ?? null,
-        isConnected: !!walletState,
-        isActive: () => wallet.id === activeWalletId(),
-        connect: () => wallet.connect(),
-        disconnect: () => wallet.disconnect(),
-        setActive: () => wallet.setActive(),
-        setActiveAccount: (addr) => wallet.setActiveAccount(addr)
-      }
-
-      return walletObject
-    })
-  })
-
   // Good
   const activeWallet = () =>
     activeWalletId() !== null ? manager().getWallet(activeWalletId() as WalletId) || null : null
 
+  // Good
   const activeWalletState = () =>
     activeWalletId() !== null ? walletStateMap()[activeWalletId() as WalletId] || null : null
 
@@ -86,7 +60,10 @@ export function useWallet() {
   // Good
   const setActiveNetwork = (network: NetworkId) => manager().setActiveNetwork(network)
 
-  // TODO
+  // TODO: Not reactive when intDecoding is changed
+  const algodClient = createMemo(() => manager().algodClient)
+
+  // TODO: Needs to be set up and tested
   const signTransactions = (
     txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][],
     indexesToSign?: number[],
@@ -98,23 +75,48 @@ export function useWallet() {
     return activeWallet()?.signTransactions(txnGroup, indexesToSign, returnGroup)
   }
 
-  // TODO
+  // TODO: Need to be set up and tested
   const transactionSigner = (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => {
     if (!activeWallet) {
       throw new Error('No active wallet')
     }
     return activeWallet()?.transactionSigner(txnGroup, indexesToSign)
   }
 
+  // TODO: Array doesn't react; consider removing
+  // const wallets = createMemo(() => {
+  //   console.log('Recomputing wallets...')
+
+  //   return [...manager().wallets.values()].map((wallet) => {
+  //     const walletState = walletStateMap()[wallet.id]
+
+  //     const walletObject: Wallet = {
+  //       id: () => wallet.id,
+  //       metadata: () => wallet.metadata,
+  //       accounts: () => walletState?.accounts ?? [],
+  //       activeAccount: () => walletState?.activeAccount ?? null,
+  //       isConnected: () => !!walletState?.accounts.length,
+  //       isActive: () => wallet.id === activeWalletId(),
+  //       connect: () => wallet.connect(),
+  //       disconnect: () => wallet.disconnect(),
+  //       setActive: () => wallet.setActive(),
+  //       setActiveAccount: (addr) => wallet.setActiveAccount(addr)
+  //     }
+
+  //     return walletObject
+  //   })
+  // })
+
   return {
     activeWalletId,
     walletStateMap,
-    wallets,
+    // wallets,
     algodClient,
     activeNetwork,
     activeWallet,
     activeWalletAccounts,
     activeWalletAddresses,
+    activeWalletState,
     activeAccount,
     activeAddress,
     setActiveNetwork,