Extract hooks derived from contexts in their own files

packages/extension/src/contexts/BrowserContext/BrowserContext.tsx

@@ -1,17 +1,15 @@
-import { useContext, useState, useEffect, createContext, FC, useCallback } from 'react';
+import { useState, useEffect, createContext, FC, useCallback } from 'react';
 
-import * as Sentry from '@sentry/react';
-
-export interface CloseProps {
+interface CloseProps {
   windowId: number;
 }
 
-interface ContextType {
+export interface ContextType {
   window?: chrome.windows.Window;
   closeExtension: ({ windowId }: CloseProps) => void;
 }
 
-const BrowserContext = createContext<ContextType>({
+export const BrowserContext = createContext<ContextType>({
   window: undefined,
   closeExtension: () => {}
 });
@@ -20,7 +18,7 @@ interface Props {
   children: React.ReactElement;
 }
 
-const BrowserProvider: FC<Props> = ({ children }) => {
+export const BrowserProvider: FC<Props> = ({ children }) => {
   const [window, setWindow] = useState<chrome.windows.Window | undefined>();
 
   const getCurrentWindow = useCallback(() => {
@@ -47,15 +45,3 @@ const BrowserProvider: FC<Props> = ({ children }) => {
 
   return <BrowserContext.Provider value={value}>{children}</BrowserContext.Provider>;
 };
-
-const useBrowser = (): ContextType => {
-  const context = useContext(BrowserContext);
-  if (context === undefined) {
-    const error = new Error('useBrowser must be used within a BrowserProvider');
-    Sentry.captureException(error);
-    throw error;
-  }
-  return context;
-};
-
-export { BrowserProvider, BrowserContext, useBrowser };

packages/extension/src/contexts/BrowserContext/index.ts

@@ -1 +1,2 @@
-export * from './BrowserContext';
+export { BrowserContext, BrowserProvider } from './BrowserContext';
+export { useBrowser } from './useBrowser';

packages/extension/src/contexts/BrowserContext/useBrowser.tsx

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/react';
+import { useContext } from 'react';
+import { BrowserContext, ContextType } from './BrowserContext';
+
+export const useBrowser = (): ContextType => {
+  const context = useContext(BrowserContext);
+  if (context === undefined) {
+    const error = new Error('useBrowser must be used within a BrowserProvider');
+    Sentry.captureException(error);
+    throw error;
+  }
+  return context;
+};

packages/extension/src/contexts/LedgerContext/LedgerContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, useCallback, useContext } from 'react';
+import { createContext, FC, useCallback } from 'react';
 
 import * as Sentry from '@sentry/react';
 import { sign } from 'ripple-keypairs';
@@ -170,7 +170,7 @@ export interface LedgerContextType {
   setHook: (payload: SetHook) => Promise<SetHookResponse>;
 }
 
-const LedgerContext = createContext<LedgerContextType>({
+export const LedgerContext = createContext<LedgerContextType>({
   sendPayment: () => new Promise(() => {}),
   setTrustline: () => new Promise(() => {}),
   signMessage: () => undefined,
@@ -201,7 +201,7 @@ const LedgerContext = createContext<LedgerContextType>({
   setHook: () => new Promise(() => {})
 });
 
-const LedgerProvider: FC<Props> = ({ children }) => {
+export const LedgerProvider: FC<Props> = ({ children }) => {
   const { client, networkName, chainName } = useNetwork();
   const { getCurrentWallet } = useWallet();
 
@@ -894,15 +894,3 @@ const LedgerProvider: FC<Props> = ({ children }) => {
 
   return <LedgerContext.Provider value={value}>{children}</LedgerContext.Provider>;
 };
-
-const useLedger = (): LedgerContextType => {
-  const context = useContext(LedgerContext);
-  if (context === undefined) {
-    const error = new Error('useLedger must be used within a LedgerProvider');
-    Sentry.captureException(error);
-    throw error;
-  }
-  return context;
-};
-
-export { LedgerProvider, LedgerContext, useLedger };

packages/extension/src/contexts/LedgerContext/index.ts

@@ -1,2 +1,8 @@
-export * from './LedgerContext';
+export {
+  LedgerProvider,
+  LedgerContext,
+  LEDGER_CONNECTION_ERROR,
+  type LedgerContextType
+} from './LedgerContext';
+export { useLedger } from './useLedger';
 export * from './utils';

packages/extension/src/contexts/LedgerContext/useLedger.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { LedgerContext, LedgerContextType } from './LedgerContext';
+import * as Sentry from '@sentry/react';
+
+export const useLedger = (): LedgerContextType => {
+  const context = useContext(LedgerContext);
+  if (context === undefined) {
+    const error = new Error('useLedger must be used within a LedgerProvider');
+    Sentry.captureException(error);
+    throw error;
+  }
+  return context;
+};

packages/extension/src/contexts/NavBarContext/NavBarContext.tsx

@@ -1,13 +1,11 @@
-import { createContext, FC, useContext, useState } from 'react';
-
-import * as Sentry from '@sentry/react';
+import { createContext, FC, useState } from 'react';
 
 interface NavBarPosition {
   left: string;
   width: string;
 }
 
-interface NavBarPositionContextType {
+export interface NavBarPositionContextType {
   setNavBarPosition: (position: NavBarPosition) => void;
   navBarPosition: NavBarPosition;
 }
@@ -21,12 +19,12 @@ const defaultPosition = {
   width: '0'
 };
 
-const NavBarPositionContext = createContext<NavBarPositionContextType>({
+export const NavBarPositionContext = createContext<NavBarPositionContextType>({
   setNavBarPosition: () => {},
   navBarPosition: defaultPosition
 });
 
-const NavBarPositionProvider: FC<Props> = ({ children }) => {
+export const NavBarPositionProvider: FC<Props> = ({ children }) => {
   const [navBarPosition, setNavBarPosition] = useState<NavBarPosition>(defaultPosition);
 
   const contextValue: NavBarPositionContextType = {
@@ -38,17 +36,3 @@ const NavBarPositionProvider: FC<Props> = ({ children }) => {
     <NavBarPositionContext.Provider value={contextValue}>{children}</NavBarPositionContext.Provider>
   );
 };
-
-const useNavBarPosition = (): NavBarPositionContextType => {
-  const context = useContext(NavBarPositionContext);
-
-  if (context === undefined) {
-    const error = new Error('useNavBarPosition must be used within a NavBarPositionProvider');
-    Sentry.captureException(error);
-    throw error;
-  }
-
-  return context;
-};
-
-export { NavBarPositionProvider, NavBarPositionContext, useNavBarPosition };

packages/extension/src/contexts/NavBarContext/index.ts

@@ -1 +1,2 @@
-export * from './NavBarContext';
+export { NavBarPositionProvider, NavBarPositionContext } from './NavBarContext';
+export { useNavBarPosition } from './useNavBarPosition';

packages/extension/src/contexts/NavBarContext/useNavBarPosition.tsx

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import * as Sentry from '@sentry/react';
+import { NavBarPositionContext, NavBarPositionContextType } from './NavBarContext';
+
+export const useNavBarPosition = (): NavBarPositionContextType => {
+  const context = useContext(NavBarPositionContext);
+
+  if (context === undefined) {
+    const error = new Error('useNavBarPosition must be used within a NavBarPositionProvider');
+    Sentry.captureException(error);
+    throw error;
+  }
+
+  return context;
+};

packages/extension/src/contexts/NetworkContext/NetworkContext.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo, useState, useEffect, createContext, FC, useCallback } from 'react';
+import { useMemo, useState, useEffect, createContext, FC, useCallback } from 'react';
 
 import * as Sentry from '@sentry/react';
 import { useLocation } from 'react-router-dom';
@@ -21,7 +21,7 @@ import { connectToLedger } from '../LedgerContext/utils/connectToLedger';
 const RECOGNIZED_CONNECTION_ERRORS = ['Connection failed.', 'Could not establish connection.'];
 const DEFAULT_NETWORK_NAME = 'Loading...';
 
-interface ContextType {
+export interface NetworkContextType {
   reconnectToNetwork: () => Promise<void>;
   switchNetwork: (params: {
     network: Network;
@@ -43,7 +43,7 @@ interface Props {
   children: React.ReactElement;
 }
 
-const NetworkContext = createContext<ContextType>({
+export const NetworkContext = createContext<NetworkContextType>({
   reconnectToNetwork: () => new Promise(() => {}),
   switchNetwork: () => new Promise(() => {}),
   resetNetwork: () => new Promise(() => {}),
@@ -57,7 +57,7 @@ const NetworkContext = createContext<ContextType>({
 
 const MAX_RETRIES = 2;
 
-const NetworkProvider: FC<Props> = ({ children }) => {
+export const NetworkProvider: FC<Props> = ({ children }) => {
   const { pathname } = useLocation();
 
   const [client, setClient] = useState<Client | null | undefined>(undefined);
@@ -224,7 +224,7 @@ const NetworkProvider: FC<Props> = ({ children }) => {
     }
   }, []);
 
-  const value: ContextType = useMemo(() => {
+  const value: NetworkContextType = useMemo(() => {
     return {
       reconnectToNetwork,
       switchNetwork,
@@ -255,15 +255,3 @@ const NetworkProvider: FC<Props> = ({ children }) => {
     </NetworkContext.Provider>
   );
 };
-
-const useNetwork = (): ContextType => {
-  const context = useContext(NetworkContext);
-  if (context === undefined) {
-    const error = new Error('useNetwork must be used within a NetworkProvider');
-    Sentry.captureException(error);
-    throw error;
-  }
-  return context;
-};
-
-export { NetworkProvider, NetworkContext, useNetwork };

packages/extension/src/contexts/NetworkContext/index.ts

@@ -1 +1,2 @@
-export * from './NetworkContext';
+export { NetworkContext, NetworkProvider } from './NetworkContext';
+export { useNetwork } from './useNetwork';

packages/extension/src/contexts/NetworkContext/useNetwork.tsx

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/react';
+import { NetworkContext, NetworkContextType } from './NetworkContext';
+import { useContext } from 'react';
+
+export const useNetwork = (): NetworkContextType => {
+  const context = useContext(NetworkContext);
+  if (context === undefined) {
+    const error = new Error('useNetwork must be used within a NetworkProvider');
+    Sentry.captureException(error);
+    throw error;
+  }
+  return context;
+};

packages/extension/src/contexts/ServerContext/ServerContext.test.tsx

@@ -1,7 +1,8 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 
-import { ServerProvider, useServer } from './ServerContext';
+import { ServerProvider } from './ServerContext';
 import { vi } from 'vitest';
+import { useServer } from './useServer';
 
 vi.mock('../NetworkContext', () => ({
   useNetwork: () => ({

packages/extension/src/contexts/ServerContext/ServerContext.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo, useState, useEffect, createContext, FC } from 'react';
+import { useMemo, useState, useEffect, createContext, FC } from 'react';
 
 import * as Sentry from '@sentry/react';
 import { ServerInfoResponse } from 'xrpl';
@@ -7,7 +7,7 @@ import { useNetwork } from '../NetworkContext';
 
 type ServerInfo = ServerInfoResponse['result'];
 
-interface ContextType {
+export interface ServerContextType {
   // Returns null if serverInfo couldn't be fetched
   serverInfo?: ServerInfo | null;
 }
@@ -16,11 +16,11 @@ interface Props {
   children: React.ReactElement;
 }
 
-const ServerContext = createContext<ContextType>({
+export const ServerContext = createContext<ServerContextType>({
   serverInfo: undefined
 });
 
-const ServerProvider: FC<Props> = ({ children }) => {
+export const ServerProvider: FC<Props> = ({ children }) => {
   const { client } = useNetwork();
 
   const [serverInfo, setServerInfo] = useState<ServerInfo | null>();
@@ -39,22 +39,11 @@ const ServerProvider: FC<Props> = ({ children }) => {
       });
   }, [client]);
 
-  const value: ContextType = useMemo(() => {
+  const value: ServerContextType = useMemo(() => {
     return {
       serverInfo
     };
   }, [serverInfo]);
 
   return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
 };
-
-const useServer = (): ContextType => {
-  const context = useContext(ServerContext);
-  if (context === undefined) {
-    const error = new Error('useServer must be used within a ServerProvider');
-    Sentry.captureException(error);
-  }
-  return context;
-};
-
-export { ServerProvider, ServerContext, useServer };

packages/extension/src/contexts/ServerContext/index.ts

@@ -1 +1,2 @@
-export * from './ServerContext';
+export { ServerContext, ServerProvider } from './ServerContext';
+export { useServer } from './useServer';

packages/extension/src/contexts/ServerContext/useServer.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import * as Sentry from '@sentry/react';
+import { ServerContext, ServerContextType } from './ServerContext';
+
+export const useServer = (): ServerContextType => {
+  const context = useContext(ServerContext);
+  if (context === undefined) {
+    const error = new Error('useServer must be used within a ServerProvider');
+    Sentry.captureException(error);
+  }
+  return context;
+};