@reown/appkit-react-native 0.0.0-develop-20251030154825 → 0.0.0-develop-20251114152149

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/lib/commonjs/hooks/useAccount.js +4 -4
  2. package/lib/commonjs/hooks/useAccount.js.map +1 -1
  3. package/lib/commonjs/hooks/useAppKit.js +41 -9
  4. package/lib/commonjs/hooks/useAppKit.js.map +1 -1
  5. package/lib/commonjs/hooks/useAppKitContext.js +46 -0
  6. package/lib/commonjs/hooks/useAppKitContext.js.map +1 -0
  7. package/lib/commonjs/hooks/useAppKitEvents.js +64 -4
  8. package/lib/commonjs/hooks/useAppKitEvents.js.map +1 -1
  9. package/lib/commonjs/hooks/useAppKitLogs.js +2 -8
  10. package/lib/commonjs/hooks/useAppKitLogs.js.map +1 -1
  11. package/lib/commonjs/hooks/useAppKitState.js +35 -2
  12. package/lib/commonjs/hooks/useAppKitState.js.map +1 -1
  13. package/lib/commonjs/hooks/useAppKitTheme.js +74 -0
  14. package/lib/commonjs/hooks/useAppKitTheme.js.map +1 -0
  15. package/lib/commonjs/hooks/useProvider.js +3 -4
  16. package/lib/commonjs/hooks/useProvider.js.map +1 -1
  17. package/lib/commonjs/hooks/useWalletInfo.js +33 -2
  18. package/lib/commonjs/hooks/useWalletInfo.js.map +1 -1
  19. package/lib/commonjs/index.js +7 -0
  20. package/lib/commonjs/index.js.map +1 -1
  21. package/lib/commonjs/modal/w3m-modal/styles.js +2 -1
  22. package/lib/commonjs/modal/w3m-modal/styles.js.map +1 -1
  23. package/lib/commonjs/partials/w3m-connecting-body/index.js +2 -0
  24. package/lib/commonjs/partials/w3m-connecting-body/index.js.map +1 -1
  25. package/lib/commonjs/partials/w3m-connecting-mobile/components/StoreLink.js +4 -0
  26. package/lib/commonjs/partials/w3m-connecting-mobile/components/StoreLink.js.map +1 -1
  27. package/lib/commonjs/partials/w3m-connecting-qrcode/index.js +5 -1
  28. package/lib/commonjs/partials/w3m-connecting-qrcode/index.js.map +1 -1
  29. package/lib/commonjs/partials/w3m-header/index.js +1 -0
  30. package/lib/commonjs/partials/w3m-header/index.js.map +1 -1
  31. package/lib/commonjs/partials/w3m-header/styles.js +3 -0
  32. package/lib/commonjs/partials/w3m-header/styles.js.map +1 -1
  33. package/lib/commonjs/views/w3m-connecting-external-view/index.js +4 -8
  34. package/lib/commonjs/views/w3m-connecting-external-view/index.js.map +1 -1
  35. package/lib/commonjs/views/w3m-connecting-view/index.js +17 -7
  36. package/lib/commonjs/views/w3m-connecting-view/index.js.map +1 -1
  37. package/lib/module/hooks/useAccount.js +4 -4
  38. package/lib/module/hooks/useAccount.js.map +1 -1
  39. package/lib/module/hooks/useAppKit.js +43 -10
  40. package/lib/module/hooks/useAppKit.js.map +1 -1
  41. package/lib/module/hooks/useAppKitContext.js +42 -0
  42. package/lib/module/hooks/useAppKitContext.js.map +1 -0
  43. package/lib/module/hooks/useAppKitEvents.js +65 -4
  44. package/lib/module/hooks/useAppKitEvents.js.map +1 -1
  45. package/lib/module/hooks/useAppKitLogs.js +3 -9
  46. package/lib/module/hooks/useAppKitLogs.js.map +1 -1
  47. package/lib/module/hooks/useAppKitState.js +36 -2
  48. package/lib/module/hooks/useAppKitState.js.map +1 -1
  49. package/lib/module/hooks/useAppKitTheme.js +71 -0
  50. package/lib/module/hooks/useAppKitTheme.js.map +1 -0
  51. package/lib/module/hooks/useProvider.js +3 -4
  52. package/lib/module/hooks/useProvider.js.map +1 -1
  53. package/lib/module/hooks/useWalletInfo.js +34 -2
  54. package/lib/module/hooks/useWalletInfo.js.map +1 -1
  55. package/lib/module/index.js +1 -0
  56. package/lib/module/index.js.map +1 -1
  57. package/lib/module/modal/w3m-modal/styles.js +2 -1
  58. package/lib/module/modal/w3m-modal/styles.js.map +1 -1
  59. package/lib/module/partials/w3m-connecting-body/index.js +2 -0
  60. package/lib/module/partials/w3m-connecting-body/index.js.map +1 -1
  61. package/lib/module/partials/w3m-connecting-mobile/components/StoreLink.js +4 -0
  62. package/lib/module/partials/w3m-connecting-mobile/components/StoreLink.js.map +1 -1
  63. package/lib/module/partials/w3m-connecting-qrcode/index.js +5 -1
  64. package/lib/module/partials/w3m-connecting-qrcode/index.js.map +1 -1
  65. package/lib/module/partials/w3m-header/index.js +1 -0
  66. package/lib/module/partials/w3m-header/index.js.map +1 -1
  67. package/lib/module/partials/w3m-header/styles.js +3 -0
  68. package/lib/module/partials/w3m-header/styles.js.map +1 -1
  69. package/lib/module/views/w3m-connecting-external-view/index.js +4 -8
  70. package/lib/module/views/w3m-connecting-external-view/index.js.map +1 -1
  71. package/lib/module/views/w3m-connecting-view/index.js +17 -7
  72. package/lib/module/views/w3m-connecting-view/index.js.map +1 -1
  73. package/lib/typescript/AppKitContext.d.ts +1 -1
  74. package/lib/typescript/AppKitContext.d.ts.map +1 -1
  75. package/lib/typescript/hooks/useAccount.d.ts.map +1 -1
  76. package/lib/typescript/hooks/useAppKit.d.ts +42 -0
  77. package/lib/typescript/hooks/useAppKit.d.ts.map +1 -1
  78. package/lib/typescript/hooks/useAppKitContext.d.ts +27 -0
  79. package/lib/typescript/hooks/useAppKitContext.d.ts.map +1 -0
  80. package/lib/typescript/hooks/useAppKitEvents.d.ts +66 -0
  81. package/lib/typescript/hooks/useAppKitEvents.d.ts.map +1 -1
  82. package/lib/typescript/hooks/useAppKitLogs.d.ts.map +1 -1
  83. package/lib/typescript/hooks/useAppKitState.d.ts +32 -0
  84. package/lib/typescript/hooks/useAppKitState.d.ts.map +1 -1
  85. package/lib/typescript/hooks/useAppKitTheme.d.ts +59 -0
  86. package/lib/typescript/hooks/useAppKitTheme.d.ts.map +1 -0
  87. package/lib/typescript/hooks/useProvider.d.ts +1 -4
  88. package/lib/typescript/hooks/useProvider.d.ts.map +1 -1
  89. package/lib/typescript/hooks/useWalletInfo.d.ts +31 -0
  90. package/lib/typescript/hooks/useWalletInfo.d.ts.map +1 -1
  91. package/lib/typescript/index.d.ts +1 -0
  92. package/lib/typescript/index.d.ts.map +1 -1
  93. package/lib/typescript/modal/w3m-modal/styles.d.ts +1 -0
  94. package/lib/typescript/modal/w3m-modal/styles.d.ts.map +1 -1
  95. package/lib/typescript/partials/w3m-connecting-body/index.d.ts.map +1 -1
  96. package/lib/typescript/partials/w3m-connecting-qrcode/index.d.ts.map +1 -1
  97. package/lib/typescript/partials/w3m-header/index.d.ts.map +1 -1
  98. package/lib/typescript/partials/w3m-header/styles.d.ts +3 -0
  99. package/lib/typescript/partials/w3m-header/styles.d.ts.map +1 -1
  100. package/lib/typescript/views/w3m-connecting-external-view/index.d.ts.map +1 -1
  101. package/lib/typescript/views/w3m-connecting-view/index.d.ts.map +1 -1
  102. package/package.json +5 -4
  103. package/src/AppKitContext.tsx +1 -1
  104. package/src/hooks/useAccount.ts +5 -3
  105. package/src/hooks/useAppKit.ts +45 -12
  106. package/src/hooks/useAppKitContext.ts +43 -0
  107. package/src/hooks/useAppKitEvents.ts +63 -3
  108. package/src/hooks/useAppKitLogs.ts +3 -11
  109. package/src/hooks/useAppKitState.ts +35 -2
  110. package/src/hooks/useAppKitTheme.ts +81 -0
  111. package/src/hooks/useProvider.ts +3 -4
  112. package/src/hooks/useWalletInfo.ts +33 -2
  113. package/src/index.ts +1 -0
  114. package/src/modal/w3m-modal/styles.ts +2 -1
  115. package/src/partials/w3m-connecting-body/index.tsx +3 -1
  116. package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx +4 -1
  117. package/src/partials/w3m-connecting-qrcode/index.tsx +10 -1
  118. package/src/partials/w3m-header/index.tsx +6 -1
  119. package/src/partials/w3m-header/styles.ts +3 -0
  120. package/src/views/w3m-connecting-external-view/index.tsx +4 -8
  121. package/src/views/w3m-connecting-view/index.tsx +24 -8
@@ -0,0 +1,27 @@
1
+ import { type AppKitContextType } from '../AppKitContext';
2
+ /**
3
+ * Hook to access the AppKit context
4
+ *
5
+ * @remarks
6
+ * This is an internal hook used by other AppKit hooks to ensure they're used within
7
+ * the AppKitProvider. You typically don't need to use this hook directly - use the
8
+ * higher-level hooks like `useAppKit`, `useAccount`, `useAppKitTheme`, etc. instead.
9
+ *
10
+ * @returns {AppKitContextType} The AppKit context containing the AppKit instance
11
+ *
12
+ * @throws {Error} If used outside of an AppKitProvider
13
+ * @throws {Error} If the AppKit instance is not yet available in context
14
+ *
15
+ * @internal
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * // This is typically used internally by other hooks
20
+ * function MyCustomHook() {
21
+ * const context = useAppKitContext();
22
+ * // Use context.appKit...
23
+ * }
24
+ * ```
25
+ */
26
+ export declare const useAppKitContext: () => AppKitContextType;
27
+ //# sourceMappingURL=useAppKitContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAppKitContext.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,eAAO,MAAM,gBAAgB,QAAO,iBAanC,CAAC"}
@@ -1,5 +1,37 @@
1
1
  import { type EventsControllerState } from '@reown/appkit-core-react-native';
2
2
  import { type EventName } from '@reown/appkit-common-react-native';
3
+ /**
4
+ * Hook to subscribe to all AppKit events
5
+ *
6
+ * @remarks
7
+ * This hook provides reactive access to AppKit's event system, allowing you to
8
+ * monitor all events that occur within the AppKit lifecycle (connections, disconnections,
9
+ * network changes, etc.). The callback is invoked whenever a new event is emitted.
10
+ *
11
+ * @param callback - Optional callback function invoked when any event occurs
12
+ *
13
+ * @returns An object containing:
14
+ * - `data`: The most recent event data
15
+ * - `timestamp`: The timestamp of the most recent event
16
+ *
17
+ * @throws {Error} If used outside of an AppKitProvider
18
+ *
19
+ * @example
20
+ * ```tsx
21
+ * function MyComponent() {
22
+ * const { data, timestamp } = useAppKitEvents((event) => {
23
+ * console.log('Event occurred:', event.data.event);
24
+ * });
25
+ *
26
+ * return (
27
+ * <View>
28
+ * <Text>Last event: {data?.event}</Text>
29
+ * <Text>Time: {timestamp}</Text>
30
+ * </View>
31
+ * );
32
+ * }
33
+ * ```
34
+ */
3
35
  export declare function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void): {
4
36
  data: {
5
37
  readonly type: "track";
@@ -92,6 +124,13 @@ export declare function useAppKitEvents(callback?: (newEvent: EventsControllerSt
92
124
  readonly properties: {
93
125
  readonly message: string;
94
126
  };
127
+ } | {
128
+ readonly type: "track";
129
+ readonly address?: string | undefined;
130
+ readonly event: "USER_REJECTED";
131
+ readonly properties: {
132
+ readonly message: string;
133
+ };
95
134
  } | {
96
135
  readonly type: "track";
97
136
  readonly event: "DISCONNECT_SUCCESS";
@@ -371,5 +410,32 @@ export declare function useAppKitEvents(callback?: (newEvent: EventsControllerSt
371
410
  };
372
411
  timestamp: number;
373
412
  };
413
+ /**
414
+ * Hook to subscribe to a specific AppKit event
415
+ *
416
+ * @remarks
417
+ * This hook allows you to listen for a specific event type rather than all events.
418
+ * It's more efficient than `useAppKitEvents` when you only care about a particular event.
419
+ *
420
+ * @param event - The specific event name to subscribe to (e.g., 'MODAL_OPEN', 'CONNECT_SUCCESS')
421
+ * @param callback - Callback function invoked when the specified event occurs
422
+ *
423
+ * @throws {Error} If used outside of an AppKitProvider
424
+ *
425
+ * @example
426
+ * ```tsx
427
+ * function MyComponent() {
428
+ * useAppKitEventSubscription('CONNECT_SUCCESS', (event) => {
429
+ * console.log('Wallet connected!', event.data);
430
+ * });
431
+ *
432
+ * useAppKitEventSubscription('DISCONNECT_SUCCESS', (event) => {
433
+ * console.log('Wallet disconnected!', event.data);
434
+ * });
435
+ *
436
+ * return <View>{/ Your component /}</View>;
437
+ * }
438
+ * ```
439
+ */
374
440
  export declare function useAppKitEventSubscription(event: EventName, callback: (newEvent: EventsControllerState) => void): void;
375
441
  //# sourceMappingURL=useAppKitEvents.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useAppKitEvents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitEvents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC/F,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAGnE,wBAAgB,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenF;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI,QAWpD"}
1
+ {"version":3,"file":"useAppKitEvents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitEvents.ts"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC/F,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,eAAe,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI,QAWpD"}
@@ -1 +1 @@
1
- {"version":3,"file":"useAppKitLogs.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitLogs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAG9F,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;OAEG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,QAAQ,EAAE,CAAC;IAEhD;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAC;IAE9C;;OAEG;IACH,UAAU,EAAE,MAAM,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAE7C;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,QAAQ,EAAE,CAAC;IACxB,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,QAAO,mBA8DhC,CAAC"}
1
+ {"version":3,"file":"useAppKitLogs.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitLogs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAG9F,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,EAAE,QAAQ,EAAE,CAAC;IAEjB;;OAEG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,QAAQ,EAAE,CAAC;IAEhD;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,QAAQ,EAAE,CAAC;IAE9C;;OAEG;IACH,UAAU,EAAE,MAAM,MAAM,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAE7C;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,WAAW,EAAE,QAAQ,EAAE,CAAC;IACxB,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,QAAO,mBAsDhC,CAAC"}
@@ -1,3 +1,35 @@
1
+ /**
2
+ * Hook to access the overall state of the AppKit modal and connection
3
+ *
4
+ * @remarks
5
+ * This hook provides a high-level view of the AppKit's current state, including
6
+ * whether the modal is open, if it's loading, connection status, and the active chain.
7
+ * It's useful for coordinating UI elements with the AppKit's state.
8
+ *
9
+ * @returns An object containing:
10
+ * - `isOpen`: Whether the AppKit modal is currently open
11
+ * - `isLoading`: Whether the AppKit is in a loading state
12
+ * - `isConnected`: Whether a wallet is currently connected
13
+ * - `chain`: The currently active blockchain network
14
+ *
15
+ * @throws {Error} If used outside of an AppKitProvider
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * function MyComponent() {
20
+ * const { isOpen, isLoading, isConnected, chain } = useAppKitState();
21
+ *
22
+ * return (
23
+ * <View>
24
+ * <Text>Modal: {isOpen ? 'Open' : 'Closed'}</Text>
25
+ * <Text>Loading: {isLoading ? 'Yes' : 'No'}</Text>
26
+ * <Text>Connected: {isConnected ? 'Yes' : 'No'}</Text>
27
+ * {chain && <Text>Chain: {chain.name}</Text>}
28
+ * </View>
29
+ * );
30
+ * }
31
+ * ```
32
+ */
1
33
  export declare function useAppKitState(): {
2
34
  isOpen: boolean;
3
35
  isLoading: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"useAppKitState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitState.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB7B"}
1
+ {"version":3,"file":"useAppKitState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitState.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmB7B"}
@@ -0,0 +1,59 @@
1
+ import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
2
+ /**
3
+ * Interface representing the result of the useAppKitTheme hook
4
+ */
5
+ export interface UseAppKitThemeReturn {
6
+ /** The current theme mode ('dark' or 'light'), or undefined if using system default */
7
+ themeMode?: ThemeMode;
8
+ /** The current theme variables, currently only supports 'accent' color */
9
+ themeVariables: ThemeVariables;
10
+ /** Function to set the theme mode */
11
+ setThemeMode: (themeMode: ThemeMode | undefined) => void;
12
+ /** Function to set theme variables */
13
+ setThemeVariables: (themeVariables: ThemeVariables | undefined) => void;
14
+ }
15
+ /**
16
+ * Hook to control the visual appearance of the AppKit modal
17
+ *
18
+ * @remarks
19
+ * This hook provides access to the theme mode and theme variables, allowing you to
20
+ * customize the modal's appearance. Use this hook when you need to implement dark/light
21
+ * mode or match the modal's appearance with your application's theme.
22
+ *
23
+ * Currently, the only supported theme variable is `accent`, which controls the primary
24
+ * accent color used throughout the modal interface.
25
+ *
26
+ * @returns {UseAppKitThemeReturn} An object containing:
27
+ * - `themeMode`: The current theme mode ('dark' or 'light')
28
+ * - `themeVariables`: The current theme variables (only 'accent' is supported)
29
+ * - `setThemeMode`: Function to change the theme mode
30
+ * - `setThemeVariables`: Function to update theme variables
31
+ *
32
+ * @throws {Error} If used outside of an AppKitProvider
33
+ *
34
+ * @example
35
+ * ```typescript
36
+ * import { useAppKitTheme } from '@reown/appkit-react-native';
37
+ *
38
+ * function MyComponent() {
39
+ * const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme();
40
+ *
41
+ * // Set theme to dark mode
42
+ * setThemeMode('dark');
43
+ *
44
+ * // Customize the accent color
45
+ * setThemeVariables({
46
+ * accent: '#00BB7F'
47
+ * });
48
+ *
49
+ * return (
50
+ * <View>
51
+ * <Text>Current theme: {themeMode}</Text>
52
+ * <Text>Accent color: {themeVariables?.accent}</Text>
53
+ * </View>
54
+ * );
55
+ * }
56
+ * ```
57
+ */
58
+ export declare function useAppKitTheme(): UseAppKitThemeReturn;
59
+ //# sourceMappingURL=useAppKitTheme.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useAppKitTheme.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAppKitTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInF;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uFAAuF;IACvF,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,0EAA0E;IAC1E,cAAc,EAAE,cAAc,CAAC;IAC/B,qCAAqC;IACrC,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACzD,sCAAsC;IACtC,iBAAiB,EAAE,CAAC,cAAc,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAC;CACzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CAiBrD"}
@@ -23,10 +23,7 @@ interface ProviderResult {
23
23
  *
24
24
  * if (provider) {
25
25
  * // Use the provider for blockchain operations
26
- * const balance = await provider.request({
27
- * method: 'eth_getBalance',
28
- * params: [address, 'latest']
29
- * });
26
+ * const balance = await provider.request({...});
30
27
  * }
31
28
  * ```
32
29
  */
@@ -1 +1 @@
1
- {"version":3,"file":"useProvider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useProvider.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAElF;;GAEG;AACH,UAAU,cAAc;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,IAAI,cAAc,CAsB5C"}
1
+ {"version":3,"file":"useProvider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useProvider.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGlF;;GAEG;AACH,UAAU,cAAc;IACtB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,cAAc,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,IAAI,cAAc,CAuB5C"}
@@ -1,3 +1,34 @@
1
+ /**
2
+ * Hook to access information about the currently connected wallet
3
+ *
4
+ * @remarks
5
+ * This hook provides access to metadata about the connected wallet, such as its name,
6
+ * icon, and other identifying information. It automatically subscribes to wallet info
7
+ * changes via valtio.
8
+ *
9
+ * @returns An object containing:
10
+ * - `walletInfo`: Metadata about the currently connected wallet (name, icon, etc.)
11
+ *
12
+ * @example
13
+ * ```tsx
14
+ * function MyComponent() {
15
+ * const { walletInfo } = useWalletInfo();
16
+ *
17
+ * return (
18
+ * <View>
19
+ * {walletInfo && (
20
+ * <>
21
+ * <Image source={{ uri: walletInfo.icon }} />
22
+ * <Text>{walletInfo.name}</Text>
23
+ * </>
24
+ * )}
25
+ * </View>
26
+ * );
27
+ * }
28
+ * ```
29
+ *
30
+ * @throws {Error} If used outside of an AppKitProvider
31
+ */
1
32
  export declare function useWalletInfo(): {
2
33
  walletInfo: {
3
34
  readonly [x: string]: unknown;
@@ -1 +1 @@
1
- {"version":3,"file":"useWalletInfo.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWalletInfo.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa;;;;;;;;;;;;;;;EAO5B"}
1
+ {"version":3,"file":"useWalletInfo.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWalletInfo.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,aAAa;;;;;;;;;;;;;;;EAO5B"}
@@ -14,6 +14,7 @@ export type { AppKitConfig } from './types';
14
14
  export { useAppKit } from './hooks/useAppKit';
15
15
  export { useProvider } from './hooks/useProvider';
16
16
  export { useAccount, type Account as UseAccountReturn } from './hooks/useAccount';
17
+ export { useAppKitTheme, type UseAppKitThemeReturn } from './hooks/useAppKitTheme';
17
18
  export { useWalletInfo } from './hooks/useWalletInfo';
18
19
  export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
19
20
  export { useAppKitState } from './hooks/useAppKitState';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,kCAAkC;AAClC,OAAO,EACL,aAAa,IAAI,aAAa,EAC9B,KAAK,kBAAkB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EACL,aAAa,IAAI,aAAa,EAC9B,KAAK,kBAAkB,IAAI,kBAAkB,EAC9C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,aAAa,IAAI,aAAa,EAC9B,KAAK,kBAAkB,IAAI,kBAAkB,EAC9C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,6BAA6B;AAC7B,mBAAmB,iCAAiC,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAChF,YAAY,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACb,MAAM,mCAAmC,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,sBAAsB;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,KAAK,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE5E,4BAA4B;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE,4BAA4B;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,kCAAkC;AAClC,OAAO,EACL,aAAa,IAAI,aAAa,EAC9B,KAAK,kBAAkB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EACL,aAAa,IAAI,aAAa,EAC9B,KAAK,kBAAkB,IAAI,kBAAkB,EAC9C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,aAAa,IAAI,aAAa,EAC9B,KAAK,kBAAkB,IAAI,kBAAkB,EAC9C,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,6BAA6B;AAC7B,mBAAmB,iCAAiC,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAChF,YAAY,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACb,MAAM,mCAAmC,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,sBAAsB;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,KAAK,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE5E,4BAA4B;AAC5B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAEtE,4BAA4B;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC"}
@@ -2,6 +2,7 @@ declare const _default: {
2
2
  card: {
3
3
  borderBottomLeftRadius: number;
4
4
  borderBottomRightRadius: number;
5
+ borderWidth: number;
5
6
  };
6
7
  };
7
8
  export default _default;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/modal/w3m-modal/styles.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/modal/w3m-modal/styles.ts"],"names":[],"mappings":";;;;;;;AAEA,wBAMG"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-connecting-body/index.tsx"],"names":[],"mappings":"AAGA,cAAc,SAAS,CAAC;AAExB,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAWzE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-connecting-body/index.tsx"],"names":[],"mappings":"AAGA,cAAc,SAAS,CAAC;AAExB,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAazE"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-connecting-qrcode/index.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB,4CA+D/B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-connecting-qrcode/index.tsx"],"names":[],"mappings":"AAyBA,wBAAgB,gBAAgB,4CAqE/B"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-header/index.tsx"],"names":[],"mappings":"AAYA,wBAAgB,MAAM,mDAoGrB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-header/index.tsx"],"names":[],"mappings":"AAYA,wBAAgB,MAAM,mDAyGrB"}
@@ -3,6 +3,9 @@ declare const _default: {
3
3
  height: number;
4
4
  width: number;
5
5
  };
6
+ headerText: {
7
+ flexShrink: number;
8
+ };
6
9
  };
7
10
  export default _default;
8
11
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-header/styles.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-header/styles.ts"],"names":[],"mappings":";;;;;;;;;AAEA,wBAQG"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-connecting-external-view/index.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,sBAAsB,4CAiIrC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-connecting-external-view/index.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,sBAAsB,4CA4HrC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-connecting-view/index.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,cAAc,4CAuG7B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/w3m-connecting-view/index.tsx"],"names":[],"mappings":"AAoBA,wBAAgB,cAAc,4CAuH7B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reown/appkit-react-native",
3
- "version": "0.0.0-develop-20251030154825",
3
+ "version": "0.0.0-develop-20251114152149",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "types": "lib/typescript/index.d.ts",
6
6
  "module": "lib/module/index.js",
@@ -9,6 +9,7 @@
9
9
  "scripts": {
10
10
  "build": "bob build",
11
11
  "clean": "rm -rf lib",
12
+ "test": "jest",
12
13
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
13
14
  },
14
15
  "files": [
@@ -39,9 +40,9 @@
39
40
  "provenance": true
40
41
  },
41
42
  "dependencies": {
42
- "@reown/appkit-common-react-native": "0.0.0-develop-20251030154825",
43
- "@reown/appkit-core-react-native": "0.0.0-develop-20251030154825",
44
- "@reown/appkit-ui-react-native": "0.0.0-develop-20251030154825",
43
+ "@reown/appkit-common-react-native": "0.0.0-develop-20251114152149",
44
+ "@reown/appkit-core-react-native": "0.0.0-develop-20251114152149",
45
+ "@reown/appkit-ui-react-native": "0.0.0-develop-20251114152149",
45
46
  "@walletconnect/universal-provider": "2.21.10",
46
47
  "valtio": "2.1.8"
47
48
  },
@@ -1,7 +1,7 @@
1
1
  import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
2
2
  import { AppKit } from './AppKit';
3
3
 
4
- interface AppKitContextType {
4
+ export interface AppKitContextType {
5
5
  appKit: AppKit | null;
6
6
  }
7
7
 
@@ -6,8 +6,8 @@ import {
6
6
  } from '@reown/appkit-core-react-native';
7
7
  import { useMemo } from 'react';
8
8
  import { useSnapshot } from 'valtio';
9
- import { useAppKit } from './useAppKit';
10
9
  import type { AccountType, AppKitNetwork } from '@reown/appkit-common-react-native';
10
+ import { useAppKitContext } from './useAppKitContext';
11
11
 
12
12
  /**
13
13
  * Represents a blockchain account with its associated metadata
@@ -64,7 +64,7 @@ export interface Account {
64
64
  * @throws Will log errors via LogController if account parsing fails
65
65
  */
66
66
  export function useAccount() {
67
- useAppKit(); // Use the hook for checks
67
+ useAppKitContext();
68
68
 
69
69
  const {
70
70
  activeAddress: address,
@@ -75,6 +75,8 @@ export function useAccount() {
75
75
  } = useSnapshot(ConnectionsController.state);
76
76
 
77
77
  const allAccounts: Account[] = useMemo(() => {
78
+ if (!address) return [];
79
+
78
80
  return Array.from(connections.values()).flatMap(
79
81
  _connection =>
80
82
  _connection.accounts
@@ -97,7 +99,7 @@ export function useAccount() {
97
99
  })
98
100
  .filter(account => account !== undefined) as Account[]
99
101
  );
100
- }, [connections]);
102
+ }, [connections, address]);
101
103
 
102
104
  const activeChain = useMemo(
103
105
  () =>
@@ -1,27 +1,60 @@
1
- import { useContext, useMemo } from 'react';
1
+ import { useMemo } from 'react';
2
2
  import type { ChainNamespace } from '@reown/appkit-common-react-native';
3
3
 
4
4
  import type { AppKit } from '../AppKit';
5
- import { AppKitContext } from '../AppKitContext';
5
+ import { useAppKitContext } from './useAppKitContext';
6
6
 
7
+ /**
8
+ * Interface representing the return value of the useAppKit hook
9
+ */
7
10
  interface UseAppKitReturn {
11
+ /** Function to open the AppKit modal with optional view configuration */
8
12
  open: AppKit['open'];
13
+ /** Function to close the AppKit modal */
9
14
  close: AppKit['close'];
15
+ /** Function to disconnect the wallet, optionally scoped to a specific namespace */
10
16
  disconnect: (namespace?: ChainNamespace) => void;
17
+ /** Function to switch to a different network */
11
18
  switchNetwork: AppKit['switchNetwork'];
12
19
  }
13
20
 
21
+ /**
22
+ * Hook to access core AppKit functionality for controlling the modal
23
+ *
24
+ * @remarks
25
+ * This hook provides access to the main AppKit instance methods for opening/closing
26
+ * the modal, disconnecting wallets, and switching networks. All functions are memoized
27
+ * and properly bound to ensure stable references across renders.
28
+ *
29
+ * @returns {UseAppKitReturn} An object containing:
30
+ * - `open`: Opens the AppKit modal, optionally with a specific view
31
+ * - `close`: Closes the AppKit modal
32
+ * - `disconnect`: Disconnects the current wallet connection (optionally for a specific namespace)
33
+ * - `switchNetwork`: Switches to a different blockchain network
34
+ *
35
+ * @throws {Error} If used outside of an AppKitProvider
36
+ * @throws {Error} If AppKit instance is not available in context
37
+ *
38
+ * @example
39
+ * ```tsx
40
+ * function MyComponent() {
41
+ * const { open, close, disconnect, switchNetwork } = useAppKit();
42
+ *
43
+ * return (
44
+ * <View>
45
+ * <Button onPress={() => open()} title="Connect Wallet" />
46
+ * <Button onPress={() => disconnect()} title="Disconnect" />
47
+ * <Button
48
+ * onPress={() => switchNetwork('eip155:1')}
49
+ * title="Switch to Ethereum"
50
+ * />
51
+ * </View>
52
+ * );
53
+ * }
54
+ * ```
55
+ */
14
56
  export const useAppKit = (): UseAppKitReturn => {
15
- const context = useContext(AppKitContext);
16
-
17
- if (context === undefined) {
18
- throw new Error('useAppKit must be used within an AppKitProvider');
19
- }
20
-
21
- if (!context.appKit) {
22
- // This might happen if the provider is rendered before AppKit is initialized
23
- throw new Error('AppKit instance is not yet available in context.');
24
- }
57
+ const context = useAppKitContext();
25
58
 
26
59
  const stableFunctions = useMemo(() => {
27
60
  if (!context.appKit) {
@@ -0,0 +1,43 @@
1
+ import { useContext } from 'react';
2
+
3
+ import { AppKitContext, type AppKitContextType } from '../AppKitContext';
4
+
5
+ /**
6
+ * Hook to access the AppKit context
7
+ *
8
+ * @remarks
9
+ * This is an internal hook used by other AppKit hooks to ensure they're used within
10
+ * the AppKitProvider. You typically don't need to use this hook directly - use the
11
+ * higher-level hooks like `useAppKit`, `useAccount`, `useAppKitTheme`, etc. instead.
12
+ *
13
+ * @returns {AppKitContextType} The AppKit context containing the AppKit instance
14
+ *
15
+ * @throws {Error} If used outside of an AppKitProvider
16
+ * @throws {Error} If the AppKit instance is not yet available in context
17
+ *
18
+ * @internal
19
+ *
20
+ * @example
21
+ * ```tsx
22
+ * // This is typically used internally by other hooks
23
+ * function MyCustomHook() {
24
+ * const context = useAppKitContext();
25
+ * // Use context.appKit...
26
+ * }
27
+ * ```
28
+ */
29
+
30
+ export const useAppKitContext = (): AppKitContextType => {
31
+ const context = useContext(AppKitContext);
32
+
33
+ if (context === undefined) {
34
+ throw new Error('useAppKitContext must be used within an AppKitProvider');
35
+ }
36
+
37
+ if (!context.appKit) {
38
+ // This might happen if the provider is rendered before AppKit is initialized
39
+ throw new Error('AppKit instance is not yet available in context.');
40
+ }
41
+
42
+ return context;
43
+ };
@@ -2,10 +2,42 @@ import { useEffect } from 'react';
2
2
  import { useSnapshot } from 'valtio';
3
3
  import { EventsController, type EventsControllerState } from '@reown/appkit-core-react-native';
4
4
  import { type EventName } from '@reown/appkit-common-react-native';
5
- import { useAppKit } from './useAppKit';
5
+ import { useAppKitContext } from './useAppKitContext';
6
6
 
7
+ /**
8
+ * Hook to subscribe to all AppKit events
9
+ *
10
+ * @remarks
11
+ * This hook provides reactive access to AppKit's event system, allowing you to
12
+ * monitor all events that occur within the AppKit lifecycle (connections, disconnections,
13
+ * network changes, etc.). The callback is invoked whenever a new event is emitted.
14
+ *
15
+ * @param callback - Optional callback function invoked when any event occurs
16
+ *
17
+ * @returns An object containing:
18
+ * - `data`: The most recent event data
19
+ * - `timestamp`: The timestamp of the most recent event
20
+ *
21
+ * @throws {Error} If used outside of an AppKitProvider
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * function MyComponent() {
26
+ * const { data, timestamp } = useAppKitEvents((event) => {
27
+ * console.log('Event occurred:', event.data.event);
28
+ * });
29
+ *
30
+ * return (
31
+ * <View>
32
+ * <Text>Last event: {data?.event}</Text>
33
+ * <Text>Time: {timestamp}</Text>
34
+ * </View>
35
+ * );
36
+ * }
37
+ * ```
38
+ */
7
39
  export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
8
- useAppKit(); // Use the hook for checks
40
+ useAppKitContext();
9
41
  const { data, timestamp } = useSnapshot(EventsController.state);
10
42
 
11
43
  useEffect(() => {
@@ -21,11 +53,39 @@ export function useAppKitEvents(callback?: (newEvent: EventsControllerState) =>
21
53
  return { data, timestamp };
22
54
  }
23
55
 
56
+ /**
57
+ * Hook to subscribe to a specific AppKit event
58
+ *
59
+ * @remarks
60
+ * This hook allows you to listen for a specific event type rather than all events.
61
+ * It's more efficient than `useAppKitEvents` when you only care about a particular event.
62
+ *
63
+ * @param event - The specific event name to subscribe to (e.g., 'MODAL_OPEN', 'CONNECT_SUCCESS')
64
+ * @param callback - Callback function invoked when the specified event occurs
65
+ *
66
+ * @throws {Error} If used outside of an AppKitProvider
67
+ *
68
+ * @example
69
+ * ```tsx
70
+ * function MyComponent() {
71
+ * useAppKitEventSubscription('CONNECT_SUCCESS', (event) => {
72
+ * console.log('Wallet connected!', event.data);
73
+ * });
74
+ *
75
+ * useAppKitEventSubscription('DISCONNECT_SUCCESS', (event) => {
76
+ * console.log('Wallet disconnected!', event.data);
77
+ * });
78
+ *
79
+ * return <View>{/ Your component /}</View>;
80
+ * }
81
+ * ```
82
+ */
83
+
24
84
  export function useAppKitEventSubscription(
25
85
  event: EventName,
26
86
  callback: (newEvent: EventsControllerState) => void
27
87
  ) {
28
- useAppKit(); // Use the hook for checks
88
+ useAppKitContext();
29
89
 
30
90
  useEffect(() => {
31
91
  const unsubscribe = EventsController?.subscribeEvent(event, callback);