Merge branch 'main' into main

Author: aorumbayev

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.3.1](https://github.com/txnlab/use-wallet/compare/v2.3.0...v2.3.1) (2023-12-15)
+
+### Changes
+
+- Throw error if `useWallet` hook is being used outside the `WalletProvider` ([#125](https://github.com/txnlab/use-wallet/pull/125)) ([3ccc5e0](https://github.com/txnlab/use-wallet/commit/3ccc5e0251ff3f4f5f0da5950a038d8d1f21e70c))
+- Use named export of `zustand/shallow` to suppress deprecation warning ([263a56b](https://github.com/TxnLab/use-wallet/commit/263a56b95e9cab6112cc0f46f456ddbc107e7ee7))
+
 # [2.3.0](https://github.com/txnlab/use-wallet/compare/v2.2.0...v2.3.0) (2023-11-29)
 
 ### Features

package.json

@@ -12,7 +12,7 @@
     "url": "https://github.com/txnlab/use-wallet/issues"
   },
   "homepage": "https://txnlab.github.io/use-wallet",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "React hooks for using Algorand compatible wallets in dApps.",
   "scripts": {
     "dev": "yarn storybook",

src/context/WalletContext.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext } from 'react'
+import type { SupportedProviders } from '../types/providers'
+
+const WalletContext = createContext<SupportedProviders | null>(null)
+
+export const useWalletContext = (): SupportedProviders | null => {
+  const context = useContext(WalletContext)
+  if (context === undefined) {
+    throw new Error('useWallet must be used within the WalletProvider')
+  }
+  return context
+}
+
+export interface WalletProviderProps {
+  children: React.ReactNode
+  value: SupportedProviders | null
+}
+
+export const WalletProvider = ({ children, value }: WalletProviderProps) => {
+  return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>
+}

src/hooks/useWallet.test.tsx

@@ -7,9 +7,8 @@ import React from 'react'
 import useWallet from './useWallet'
 import DeflyWalletClient from '../clients/defly'
 import PeraWalletClient from '../clients/pera'
-import { default as ClientProvider } from '../store/state/clientStore'
+import { WalletProvider, type WalletProviderProps } from '../context/WalletContext'
 import { useHydratedWalletStore } from '../store/state/walletStore'
-import { createWrapper } from '../testUtils/createWrapper'
 import { mockAccounts } from '../testUtils/mockAccounts'
 import { createDeflyMockInstance, createPeraMockInstance } from '../testUtils/mockClients'
 import { clearAccounts } from '../utils/clearAccounts'
@@ -36,7 +35,7 @@ jest.mock('../store/state/walletStore', () => ({
 }))
 
 jest.mock('../', () => ({
-  ClientProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
+  WalletProvider: ({ children }: WalletProviderProps) => <div>{children}</div>
 }))
 
 jest.mock('../utils/clearAccounts')
@@ -59,7 +58,7 @@ describe('useWallet', () => {
     jest.spyOn(peraMockInstance, 'disconnect')
     jest.spyOn(peraMockInstance, 'getAccountInfo')
 
-    // Passed to `ClientProvider` in renderHook wrapper
+    // Passed to `WalletProvider` in renderHook wrapper
     mockClientProviders = {
       pera: peraMockInstance,
       defly: deflyMockInstance
@@ -72,7 +71,9 @@ describe('useWallet', () => {
 
   it('should return active and connected accounts', () => {
     const { result } = renderHook(() => useWallet(), {
-      wrapper: createWrapper(ClientProvider, { value: mockClientProviders })
+      wrapper: ({ children }) => (
+        <WalletProvider value={mockClientProviders}>{children}</WalletProvider>
+      )
     })
 
     // Active account
@@ -87,7 +88,9 @@ describe('useWallet', () => {
 
   it('should return `providers` array', async () => {
     const { result } = renderHook(() => useWallet(), {
-      wrapper: createWrapper(ClientProvider, { value: mockClientProviders })
+      wrapper: ({ children }) => (
+        <WalletProvider value={mockClientProviders}>{children}</WalletProvider>
+      )
     })
 
     const providers = result.current.providers
@@ -134,7 +137,9 @@ describe('useWallet', () => {
 
   it('should return status flags', () => {
     const { result } = renderHook(() => useWallet(), {
-      wrapper: createWrapper(ClientProvider, { value: mockClientProviders })
+      wrapper: ({ children }) => (
+        <WalletProvider value={mockClientProviders}>{children}</WalletProvider>
+      )
     })
 
     expect(result.current.isActive).toBe(true)
@@ -143,7 +148,9 @@ describe('useWallet', () => {
 
   it('should return `getAccountInfo`', async () => {
     const { result } = renderHook(() => useWallet(), {
-      wrapper: createWrapper(ClientProvider, { value: mockClientProviders })
+      wrapper: ({ children }) => (
+        <WalletProvider value={mockClientProviders}>{children}</WalletProvider>
+      )
     })
 
     await act(async () => {

src/hooks/useWallet.ts

@@ -1,17 +1,17 @@
-import { useState, useMemo, useContext, useEffect } from 'react'
+import { useState, useMemo, useEffect } from 'react'
 import type algosdk from 'algosdk'
 import { getAlgosdk } from '../algod'
 import { useHydratedWalletStore, walletStoreSelector } from '../store/index'
 import { TransactionsArray, WalletClient, Provider } from '../types'
 import { PROVIDER_ID } from '../constants'
-import { ClientContext } from '../store/state/clientStore'
+import { useWalletContext } from '../context/WalletContext'
 import allClients from '../clients'
 import { clearAccounts } from '../utils/clearAccounts'
-import shallow from 'zustand/shallow'
+import { shallow } from 'zustand/shallow'
 
 export default function useWallet() {
   const [providers, setProviders] = useState<Provider[] | null>(null)
-  const clients = useContext(ClientContext)
+  const clients = useWalletContext()
 
   const {
     activeAccount,

src/index.ts

@@ -1,5 +1,5 @@
 export { reconnectProviders, encodeNFDTransactionsArray } from './utils'
-export { WalletProvider } from './store'
+export { WalletProvider } from './context/WalletContext'
 export * from './constants'
 export * from './types'
 export * from './clients'

src/store/index.ts

@@ -1,3 +1,2 @@
 export * from './state/walletStore'
 export * from './state/debugStore'
-export { default as WalletProvider } from './state/clientStore'