feat: throw error if useWallet is being used outside the WalletProvid…

…er (#125)

* chore: import zustand/shallow from named export

This resolves the deprecated warning that started appearing in the console after upgrading to zustand@^4.3.8

* feat: useWallet throws error if used outside WalletProvider

This also renames the context provider to match the exported "WalletProvider", and the context object itself is imported via a `useWalletContext` hook.

src/context/WalletContext.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useContext } from 'react'
+import type { SupportedProviders } from 'src/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'