Merge pull request #353 from algorandfoundation/use-wallet-v3

feat: upgrade to use-wallet v3
algorandfoundation · Dec 2, 2024 · f881259 · f881259
2 parents 5109c7b + 8d14c41
commit f881259
Show file tree

Hide file tree

Showing 35 changed files with 375 additions and 426 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="AlgoKit lora, the Algorand live on-chain resource analyzer." />
+    <meta name="name" content="AlgoKit - lora" />
     <title>AlgoKit - lora</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.9.0",
-    "@perawallet/connect": "^1.3.4",
+    "@perawallet/connect": "^1.3.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -55,7 +55,8 @@
     "@tauri-apps/plugin-cli": "^2.0.0",
     "@tauri-apps/plugin-deep-link": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2.0.0",
-    "@txnlab/use-wallet": "2.8.2",
+    "@txnlab/use-wallet": "^3.10.1",
+    "@txnlab/use-wallet-react": "^3.10.1",
     "@xstate/react": "^4.1.1",
     "algosdk": "2.9.0",
     "class-variance-authority": "^0.7.0",
@@ -196,4 +197,4 @@
     "path-to-regexp@>= 0.2.0 <8.0.0": "8.0.0",
     "cross-spawn": "^7.0.6"
   }
-}
+}
diff --git a/patches/@txnlab+use-wallet+2.8.2.patch b/patches/@txnlab+use-wallet+2.8.2.patch
diff --git a/src/features/app-interfaces/components/create/deploy-app.tsx b/src/features/app-interfaces/components/create/deploy-app.tsx
@@ -7,7 +7,7 @@ import {
   BuildMethodCallTransactionResult,
   BuildTransactionResult,
 } from '@/features/transaction-wizard/models'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { DialogBodyProps, useDialogForm } from '@/features/common/hooks/use-dialog-form'
 import algosdk from 'algosdk'
 import { TransactionBuilder } from '@/features/transaction-wizard/components/transaction-builder'

diff --git a/src/features/app-interfaces/components/create/from-deployment-card.tsx b/src/features/app-interfaces/components/create/from-deployment-card.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
 import { useCreateAppInterfaceStateMachine } from '../../data'
 import { Card, CardContent } from '@/features/common/components/card'
 import { Button } from '@/features/common/components/button'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import { deployAppLabel } from '../labels'
 
 type Props = {

diff --git a/src/features/app-interfaces/pages/create-app-interface-page.test.tsx b/src/features/app-interfaces/pages/create-app-interface-page.test.tsx
@@ -5,7 +5,7 @@ import { algorandFixture } from '@algorandfoundation/algokit-utils/testing'
 import { afterEach, beforeEach, describe, expect, it, vi, vitest } from 'vitest'
 import { CreateAppInterfacePage } from './create-app-interface-page'
 import { deployAppLabel } from '../components/labels'
-import { useWallet } from '@txnlab/use-wallet'
+import { useWallet } from '@txnlab/use-wallet-react'
 import SampleSixAppSpec from '@/tests/test-app-specs/sample-six.arc32.json'
 import { Arc32AppSpec } from '../data/types'
 import { selectOption } from '@/tests/utils/select-option'
@@ -213,14 +213,12 @@ describe('create-app-interface', () => {
 
   describe('when a wallet is not connected', () => {
     beforeEach(async () => {
-      const original = await vi.importActual<{ useWallet: () => ReturnType<typeof useWallet> }>('@txnlab/use-wallet')
+      const original = await vi.importActual<{ useWallet: () => ReturnType<typeof useWallet> }>('@txnlab/use-wallet-react')
       vi.mocked(useWallet).mockImplementation(() => {
         return {
           ...original.useWallet(),
-          activeAddress: undefined,
-          isActive: false,
-          isReady: true,
-        }
+          activeAddress: null,
+        } satisfies ReturnType<typeof useWallet>
       })
     })
 

diff --git a/src/features/common/components/wallet-provider-inner.tsx b/src/features/common/components/wallet-provider-inner.tsx
@@ -1,25 +1,22 @@
-import { useInitializeProviders, useWallet } from '@txnlab/use-wallet'
 import { PropsWithChildren } from 'react'
-import { WalletProvider as UseWalletProvider } from '@txnlab/use-wallet'
 import { useSetActiveWalletState } from '@/features/wallet/data/active-wallet'
+import { useWallet, WalletManager, WalletProvider } from '@txnlab/use-wallet-react'
 
 type Props = PropsWithChildren<{
-  initOptions: Parameters<typeof useInitializeProviders>[0]
+  walletManager: WalletManager
 }>
 
 function SetActiveWalletState({ children }: PropsWithChildren) {
-  const { activeAddress, isReady, signer } = useWallet()
-  useSetActiveWalletState(isReady, activeAddress, signer)
+  const { activeAddress, transactionSigner } = useWallet()
+  useSetActiveWalletState(activeAddress ?? undefined, transactionSigner)
 
   return <>{children}</>
 }
 
-export function WalletProviderInner({ initOptions, children }: Props) {
-  const walletProviders = useInitializeProviders(initOptions)
-
+export function WalletProviderInner({ walletManager, children }: Props) {
   return (
-    <UseWalletProvider value={walletProviders}>
+    <WalletProvider manager={walletManager}>
       <SetActiveWalletState>{children}</SetActiveWalletState>
-    </UseWalletProvider>
+    </WalletProvider>
   )
 }