@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.
- package/lib/commonjs/hooks/useAccount.js +4 -4
- package/lib/commonjs/hooks/useAccount.js.map +1 -1
- package/lib/commonjs/hooks/useAppKit.js +41 -9
- package/lib/commonjs/hooks/useAppKit.js.map +1 -1
- package/lib/commonjs/hooks/useAppKitContext.js +46 -0
- package/lib/commonjs/hooks/useAppKitContext.js.map +1 -0
- package/lib/commonjs/hooks/useAppKitEvents.js +64 -4
- package/lib/commonjs/hooks/useAppKitEvents.js.map +1 -1
- package/lib/commonjs/hooks/useAppKitLogs.js +2 -8
- package/lib/commonjs/hooks/useAppKitLogs.js.map +1 -1
- package/lib/commonjs/hooks/useAppKitState.js +35 -2
- package/lib/commonjs/hooks/useAppKitState.js.map +1 -1
- package/lib/commonjs/hooks/useAppKitTheme.js +74 -0
- package/lib/commonjs/hooks/useAppKitTheme.js.map +1 -0
- package/lib/commonjs/hooks/useProvider.js +3 -4
- package/lib/commonjs/hooks/useProvider.js.map +1 -1
- package/lib/commonjs/hooks/useWalletInfo.js +33 -2
- package/lib/commonjs/hooks/useWalletInfo.js.map +1 -1
- package/lib/commonjs/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/modal/w3m-modal/styles.js +2 -1
- package/lib/commonjs/modal/w3m-modal/styles.js.map +1 -1
- package/lib/commonjs/partials/w3m-connecting-body/index.js +2 -0
- package/lib/commonjs/partials/w3m-connecting-body/index.js.map +1 -1
- package/lib/commonjs/partials/w3m-connecting-mobile/components/StoreLink.js +4 -0
- package/lib/commonjs/partials/w3m-connecting-mobile/components/StoreLink.js.map +1 -1
- package/lib/commonjs/partials/w3m-connecting-qrcode/index.js +5 -1
- package/lib/commonjs/partials/w3m-connecting-qrcode/index.js.map +1 -1
- package/lib/commonjs/partials/w3m-header/index.js +1 -0
- package/lib/commonjs/partials/w3m-header/index.js.map +1 -1
- package/lib/commonjs/partials/w3m-header/styles.js +3 -0
- package/lib/commonjs/partials/w3m-header/styles.js.map +1 -1
- package/lib/commonjs/views/w3m-connecting-external-view/index.js +4 -8
- package/lib/commonjs/views/w3m-connecting-external-view/index.js.map +1 -1
- package/lib/commonjs/views/w3m-connecting-view/index.js +17 -7
- package/lib/commonjs/views/w3m-connecting-view/index.js.map +1 -1
- package/lib/module/hooks/useAccount.js +4 -4
- package/lib/module/hooks/useAccount.js.map +1 -1
- package/lib/module/hooks/useAppKit.js +43 -10
- package/lib/module/hooks/useAppKit.js.map +1 -1
- package/lib/module/hooks/useAppKitContext.js +42 -0
- package/lib/module/hooks/useAppKitContext.js.map +1 -0
- package/lib/module/hooks/useAppKitEvents.js +65 -4
- package/lib/module/hooks/useAppKitEvents.js.map +1 -1
- package/lib/module/hooks/useAppKitLogs.js +3 -9
- package/lib/module/hooks/useAppKitLogs.js.map +1 -1
- package/lib/module/hooks/useAppKitState.js +36 -2
- package/lib/module/hooks/useAppKitState.js.map +1 -1
- package/lib/module/hooks/useAppKitTheme.js +71 -0
- package/lib/module/hooks/useAppKitTheme.js.map +1 -0
- package/lib/module/hooks/useProvider.js +3 -4
- package/lib/module/hooks/useProvider.js.map +1 -1
- package/lib/module/hooks/useWalletInfo.js +34 -2
- package/lib/module/hooks/useWalletInfo.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/modal/w3m-modal/styles.js +2 -1
- package/lib/module/modal/w3m-modal/styles.js.map +1 -1
- package/lib/module/partials/w3m-connecting-body/index.js +2 -0
- package/lib/module/partials/w3m-connecting-body/index.js.map +1 -1
- package/lib/module/partials/w3m-connecting-mobile/components/StoreLink.js +4 -0
- package/lib/module/partials/w3m-connecting-mobile/components/StoreLink.js.map +1 -1
- package/lib/module/partials/w3m-connecting-qrcode/index.js +5 -1
- package/lib/module/partials/w3m-connecting-qrcode/index.js.map +1 -1
- package/lib/module/partials/w3m-header/index.js +1 -0
- package/lib/module/partials/w3m-header/index.js.map +1 -1
- package/lib/module/partials/w3m-header/styles.js +3 -0
- package/lib/module/partials/w3m-header/styles.js.map +1 -1
- package/lib/module/views/w3m-connecting-external-view/index.js +4 -8
- package/lib/module/views/w3m-connecting-external-view/index.js.map +1 -1
- package/lib/module/views/w3m-connecting-view/index.js +17 -7
- package/lib/module/views/w3m-connecting-view/index.js.map +1 -1
- package/lib/typescript/AppKitContext.d.ts +1 -1
- package/lib/typescript/AppKitContext.d.ts.map +1 -1
- package/lib/typescript/hooks/useAccount.d.ts.map +1 -1
- package/lib/typescript/hooks/useAppKit.d.ts +42 -0
- package/lib/typescript/hooks/useAppKit.d.ts.map +1 -1
- package/lib/typescript/hooks/useAppKitContext.d.ts +27 -0
- package/lib/typescript/hooks/useAppKitContext.d.ts.map +1 -0
- package/lib/typescript/hooks/useAppKitEvents.d.ts +66 -0
- package/lib/typescript/hooks/useAppKitEvents.d.ts.map +1 -1
- package/lib/typescript/hooks/useAppKitLogs.d.ts.map +1 -1
- package/lib/typescript/hooks/useAppKitState.d.ts +32 -0
- package/lib/typescript/hooks/useAppKitState.d.ts.map +1 -1
- package/lib/typescript/hooks/useAppKitTheme.d.ts +59 -0
- package/lib/typescript/hooks/useAppKitTheme.d.ts.map +1 -0
- package/lib/typescript/hooks/useProvider.d.ts +1 -4
- package/lib/typescript/hooks/useProvider.d.ts.map +1 -1
- package/lib/typescript/hooks/useWalletInfo.d.ts +31 -0
- package/lib/typescript/hooks/useWalletInfo.d.ts.map +1 -1
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/modal/w3m-modal/styles.d.ts +1 -0
- package/lib/typescript/modal/w3m-modal/styles.d.ts.map +1 -1
- package/lib/typescript/partials/w3m-connecting-body/index.d.ts.map +1 -1
- package/lib/typescript/partials/w3m-connecting-qrcode/index.d.ts.map +1 -1
- package/lib/typescript/partials/w3m-header/index.d.ts.map +1 -1
- package/lib/typescript/partials/w3m-header/styles.d.ts +3 -0
- package/lib/typescript/partials/w3m-header/styles.d.ts.map +1 -1
- package/lib/typescript/views/w3m-connecting-external-view/index.d.ts.map +1 -1
- package/lib/typescript/views/w3m-connecting-view/index.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/AppKitContext.tsx +1 -1
- package/src/hooks/useAccount.ts +5 -3
- package/src/hooks/useAppKit.ts +45 -12
- package/src/hooks/useAppKitContext.ts +43 -0
- package/src/hooks/useAppKitEvents.ts +63 -3
- package/src/hooks/useAppKitLogs.ts +3 -11
- package/src/hooks/useAppKitState.ts +35 -2
- package/src/hooks/useAppKitTheme.ts +81 -0
- package/src/hooks/useProvider.ts +3 -4
- package/src/hooks/useWalletInfo.ts +33 -2
- package/src/index.ts +1 -0
- package/src/modal/w3m-modal/styles.ts +2 -1
- package/src/partials/w3m-connecting-body/index.tsx +3 -1
- package/src/partials/w3m-connecting-mobile/components/StoreLink.tsx +4 -1
- package/src/partials/w3m-connecting-qrcode/index.tsx +10 -1
- package/src/partials/w3m-header/index.tsx +6 -1
- package/src/partials/w3m-header/styles.ts +3 -0
- package/src/views/w3m-connecting-external-view/index.tsx +4 -8
- 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
|
|
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,
|
|
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;
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/modal/w3m-modal/styles.ts"],"names":[],"mappings":"
|
|
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,
|
|
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":"
|
|
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,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-header/index.tsx"],"names":[],"mappings":"AAYA,wBAAgB,MAAM,mDAyGrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/partials/w3m-header/styles.ts"],"names":[],"mappings":"
|
|
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":"
|
|
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,
|
|
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-
|
|
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-
|
|
43
|
-
"@reown/appkit-core-react-native": "0.0.0-develop-
|
|
44
|
-
"@reown/appkit-ui-react-native": "0.0.0-develop-
|
|
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
|
},
|
package/src/AppKitContext.tsx
CHANGED
package/src/hooks/useAccount.ts
CHANGED
|
@@ -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
|
-
|
|
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
|
() =>
|
package/src/hooks/useAppKit.ts
CHANGED
|
@@ -1,27 +1,60 @@
|
|
|
1
|
-
import {
|
|
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 {
|
|
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 =
|
|
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 {
|
|
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
|
-
|
|
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
|
-
|
|
88
|
+
useAppKitContext();
|
|
29
89
|
|
|
30
90
|
useEffect(() => {
|
|
31
91
|
const unsubscribe = EventsController?.subscribeEvent(event, callback);
|