@reown/appkit-react-native 0.0.0-chore-qr-borders-20251104183806 → 0.0.0-chore-use-theme-hook-20251105193739

package/src/hooks/useAppKitTheme.ts

@@ -0,0 +1,81 @@
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
+import { ThemeController } from '@reown/appkit-core-react-native';
+import { useAppKitContext } from './useAppKitContext';
+
+/**
+ * Interface representing the result of the useAppKitTheme hook
+ */
+export interface UseAppKitThemeReturn {
+  /** The current theme mode ('dark' or 'light'), or undefined if using system default */
+  themeMode: ThemeMode | undefined;
+  /** The current theme variables, currently only supports 'accent' color */
+  themeVariables: ThemeVariables | undefined;
+  /** Function to set the theme mode */
+  setThemeMode: (themeMode: ThemeMode | undefined) => void;
+  /** Function to set theme variables */
+  setThemeVariables: (themeVariables: ThemeVariables | undefined) => void;
+}
+
+/**
+ * Hook to control the visual appearance of the AppKit modal
+ *
+ * @remarks
+ * This hook provides access to the theme mode and theme variables, allowing you to
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
+ * mode or match the modal's appearance with your application's theme.
+ *
+ * Currently, the only supported theme variable is `accent`, which controls the primary
+ * accent color used throughout the modal interface.
+ *
+ * @returns {UseAppKitThemeReturn} An object containing:
+ *   - `themeMode`: The current theme mode ('dark' or 'light')
+ *   - `themeVariables`: The current theme variables (only 'accent' is supported)
+ *   - `setThemeMode`: Function to change the theme mode
+ *   - `setThemeVariables`: Function to update theme variables
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ *
+ * @example
+ * ```typescript
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
+ *
+ * function MyComponent() {
+ *   const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
+ *
+ *   // Set theme to dark mode
+ *   setThemeMode('dark');
+ *
+ *   // Customize the accent color
+ *   setThemeVariables({
+ *     accent: '#00BB7F'
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Current theme: {themeMode}</Text>
+ *       <Text>Accent color: {themeVariables?.accent}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useAppKitTheme(): UseAppKitThemeReturn {
+  useAppKitContext();
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  const stableFunctions = useMemo(
+    () => ({
+      setThemeMode: ThemeController.setThemeMode.bind(ThemeController),
+      setThemeVariables: ThemeController.setThemeVariables.bind(ThemeController)
+    }),
+    []
+  );
+
+  return {
+    themeMode,
+    themeVariables,
+    ...stableFunctions
+  };
+}

package/src/hooks/useProvider.ts

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController, LogController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
+import { useAppKitContext } from './useAppKitContext';
 
 /**
  * Interface representing the result of the useProvider hook
@@ -29,14 +30,12 @@ interface ProviderResult {
  *
  * if (provider) {
  *   // Use the provider for blockchain operations
- *   const balance = await provider.request({
- *     method: 'eth_getBalance',
- *     params: [address, 'latest']
- *   });
+ *   const balance = await provider.request({...});
  * }
  * ```
  */
 export function useProvider(): ProviderResult {
+  useAppKitContext();
   const { connection } = useSnapshot(ConnectionsController.state);
 
   const returnValue = useMemo(() => {

package/src/hooks/useWalletInfo.ts

@@ -1,10 +1,41 @@
 import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
-import { useAppKit } from './useAppKit';
+import { useAppKitContext } from './useAppKitContext';
 
+/**
+ * Hook to access information about the currently connected wallet
+ *
+ * @remarks
+ * This hook provides access to metadata about the connected wallet, such as its name,
+ * icon, and other identifying information. It automatically subscribes to wallet info
+ * changes via valtio.
+ *
+ * @returns An object containing:
+ *   - `walletInfo`: Metadata about the currently connected wallet (name, icon, etc.)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { walletInfo } = useWalletInfo();
+ *
+ *   return (
+ *     <View>
+ *       {walletInfo && (
+ *         <>
+ *           <Image source={{ uri: walletInfo.icon }} />
+ *           <Text>{walletInfo.name}</Text>
+ *         </>
+ *       )}
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @throws {Error} If used outside of an AppKitProvider
+ */
 export function useWalletInfo() {
-  useAppKit(); // Use the hook for checks
+  useAppKitContext();
   const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
   const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);

package/src/index.ts

@@ -32,6 +32,7 @@ export type { AppKitConfig } from './types';
 export { useAppKit } from './hooks/useAppKit';
 export { useProvider } from './hooks/useProvider';
 export { useAccount, type Account as UseAccountReturn } from './hooks/useAccount';
+export { useAppKitTheme, type UseAppKitThemeReturn } from './hooks/useAppKitTheme';
 export { useWalletInfo } from './hooks/useWalletInfo';
 export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
 export { useAppKitState } from './hooks/useAppKitState';