@explorins/pers-sdk-react-native 2.0.4 → 2.1.1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"PersSDKProvider.d.ts","sourceRoot":"","sources":["../../src/providers/PersSDKProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuC,SAAS,EAA2C,MAAM,OAAO,CAAC;AAEvH,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,WAAW,cAAc;IAE7B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IAGpB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACxC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAGlC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAGzC,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IAGhC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,sBAAsB,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5F,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAMD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CA+IA,CAAC;AAGF,eAAO,MAAM,UAAU,QAAO,cAQ7B,CAAC"}
1
+ {"version":3,"file":"PersSDKProvider.d.ts","sourceRoot":"","sources":["../../src/providers/PersSDKProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuC,SAAS,EAA2C,MAAM,OAAO,CAAC;AAEvH,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAIpF,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAG3D,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,WAAW,cAAc;IAE7B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAC;IAGpB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACxC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAGlC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAGzC,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IAGhC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,sBAAsB,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI,EAAE,eAAe,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5F,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAMD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAiPA,CAAC;AAGF,eAAO,MAAM,UAAU,QAAO,cAQ7B,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createContext, useContext, useState, useCallback, useRef, useEffect, useMemo } from 'react';
3
- import { Platform } from 'react-native';
3
+ import { Platform, AppState } from 'react-native';
4
4
  import { PersSDK } from '@explorins/pers-sdk/core';
5
5
  import { ReactNativeHttpClient } from './react-native-http-client';
6
6
  import { createReactNativeAuthProvider } from './react-native-auth-provider';
@@ -68,18 +68,37 @@ export const PersSDKProvider = ({ children, config }) => {
68
68
  initializingRef.current = false;
69
69
  }
70
70
  }, [isInitialized]);
71
+ const setAuthenticationState = useCallback((user, isAuthenticated) => {
72
+ setUser(user);
73
+ setIsAuthenticated(isAuthenticated);
74
+ }, []);
71
75
  // Auto-initialize if config is provided
72
76
  useEffect(() => {
73
77
  if (config && !isInitialized && !initializingRef.current) {
74
- initialize(config).catch(err => {
78
+ initialize(config).then(async () => {
79
+ // Validate stored tokens on startup
80
+ // SDK's initialize() already calls ensureValidToken() which handles expired tokens
81
+ // This provides an additional safety layer for missing/corrupted tokens
82
+ if (authProvider && sdk) {
83
+ try {
84
+ const hasToken = await sdk.auth.hasValidAuth();
85
+ if (!hasToken) {
86
+ console.log('[PersSDK] No tokens found on startup, ensuring clean state');
87
+ await authProvider.clearTokens();
88
+ setAuthenticationState(null, false);
89
+ }
90
+ // Note: Token expiration validation happens automatically in SDK's initialize()
91
+ // which calls ensureValidToken() → checks expiration → triggers AUTH_FAILED if needed
92
+ }
93
+ catch (error) {
94
+ console.warn('[PersSDK] Token validation on startup failed:', error);
95
+ }
96
+ }
97
+ }).catch(err => {
75
98
  console.error('Auto-initialization failed:', err);
76
99
  });
77
100
  }
78
- }, [config, isInitialized, initialize]);
79
- const setAuthenticationState = useCallback((user, isAuthenticated) => {
80
- setUser(user);
81
- setIsAuthenticated(isAuthenticated);
82
- }, []);
101
+ }, [config, isInitialized, initialize, authProvider, sdk, setAuthenticationState]);
83
102
  const refreshUserData = useCallback(async () => {
84
103
  if (!sdk || !isAuthenticated || !isInitialized) {
85
104
  throw new Error('SDK not initialized or not authenticated. Cannot refresh user data.');
@@ -93,6 +112,75 @@ export const PersSDKProvider = ({ children, config }) => {
93
112
  throw error;
94
113
  }
95
114
  }, [sdk, isAuthenticated, isInitialized]);
115
+ // Listen for authentication status changes and refresh user data when tokens are renewed
116
+ useEffect(() => {
117
+ if (!authProvider || !isInitialized)
118
+ return;
119
+ // Access the config object with proper type safety
120
+ const providerConfig = authProvider.config;
121
+ if (!providerConfig)
122
+ return;
123
+ // Set up auth status change handler
124
+ const originalHandler = providerConfig.onAuthStatusChange;
125
+ const authStatusHandler = async (status) => {
126
+ console.log('[PersSDK] Auth status changed:', status);
127
+ // Call original handler first if it exists
128
+ if (originalHandler) {
129
+ await originalHandler(status);
130
+ }
131
+ // If token was refreshed successfully and user is authenticated, reload user data
132
+ if (status === 'authenticated' && isAuthenticated && sdk) {
133
+ try {
134
+ console.log('[PersSDK] Token refreshed, reloading user data...');
135
+ await refreshUserData();
136
+ }
137
+ catch (error) {
138
+ console.error('[PersSDK] Failed to refresh user data after token renewal:', error);
139
+ }
140
+ }
141
+ // If authentication failed, clear state
142
+ // Frontend app can observe isAuthenticated state change to show custom UI
143
+ if (status === 'auth_failed') {
144
+ console.log('[PersSDK] Authentication failed - session expired');
145
+ // Note: Token clearing already handled by SDK's handleAuthFailure()
146
+ // which calls authProvider.clearTokens() with robust retry logic
147
+ // Clear React state to sync with SDK
148
+ // This triggers re-render, allowing app to show login screen
149
+ setAuthenticationState(null, false);
150
+ }
151
+ };
152
+ // Inject our handler into the auth provider config
153
+ providerConfig.onAuthStatusChange = authStatusHandler;
154
+ // Cleanup
155
+ return () => {
156
+ if (originalHandler) {
157
+ providerConfig.onAuthStatusChange = originalHandler;
158
+ }
159
+ };
160
+ }, [authProvider, isInitialized, isAuthenticated, sdk, refreshUserData, setAuthenticationState]);
161
+ // iOS/Android: Monitor app state and validate tokens when app becomes active
162
+ useEffect(() => {
163
+ if (!sdk || Platform.OS === 'web') {
164
+ return;
165
+ }
166
+ const handleAppStateChange = async (nextAppState) => {
167
+ if (nextAppState === 'active' && isAuthenticated) {
168
+ console.log('[PersSDK] App became active - validating tokens');
169
+ try {
170
+ // Trigger token validation when app resumes from background
171
+ // This ensures tokens are checked after extended inactivity
172
+ await sdk.auth.ensureValidToken();
173
+ }
174
+ catch (error) {
175
+ console.warn('[PersSDK] Token validation failed on app resume:', error);
176
+ }
177
+ }
178
+ };
179
+ const subscription = AppState.addEventListener('change', handleAppStateChange);
180
+ return () => {
181
+ subscription?.remove();
182
+ };
183
+ }, [sdk, isAuthenticated]);
96
184
  const contextValue = useMemo(() => ({
97
185
  // Main SDK instance
98
186
  sdk,
@@ -1 +1 @@
1
- {"version":3,"file":"async-storage-token-storage.d.ts","sourceRoot":"","sources":["../../src/storage/async-storage-token-storage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA8D7D;;;;;GAKG;AACH,qBAAa,wBAAyB,YAAW,YAAY;IAC3D,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAA8B;gBAEtC,SAAS,GAAE,MAAuB;IAexC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAS9C,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IASxC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQlC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;CAY7B"}
1
+ {"version":3,"file":"async-storage-token-storage.d.ts","sourceRoot":"","sources":["../../src/storage/async-storage-token-storage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA8D7D;;;;;GAKG;AACH,qBAAa,wBAAyB,YAAW,YAAY;IAC3D,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAA8B;gBAEtC,SAAS,GAAE,MAAuB;IAexC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAW9C,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAYxC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQlC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;CAgB7B"}
@@ -74,19 +74,24 @@ export class AsyncStorageTokenStorage {
74
74
  }
75
75
  async set(key, value) {
76
76
  try {
77
- await this.asyncStorage.setItem(`${this.keyPrefix}${key}`, value);
77
+ const fullKey = `${this.keyPrefix}${key}`;
78
+ await this.asyncStorage.setItem(fullKey, value);
79
+ console.log(`[AsyncStorage] Token stored: ${key}`);
78
80
  }
79
81
  catch (error) {
80
- console.error(`Failed to store token ${key}:`, error);
82
+ console.error(`[AsyncStorage] Failed to store token ${key}:`, error);
81
83
  throw new Error(`Token storage failed: ${error}`);
82
84
  }
83
85
  }
84
86
  async get(key) {
85
87
  try {
86
- return await this.asyncStorage.getItem(`${this.keyPrefix}${key}`);
88
+ const fullKey = `${this.keyPrefix}${key}`;
89
+ const value = await this.asyncStorage.getItem(fullKey);
90
+ console.log(`[AsyncStorage] Token retrieved: ${key} - ${value ? 'exists' : 'null'}`);
91
+ return value;
87
92
  }
88
93
  catch (error) {
89
- console.error(`Failed to retrieve token ${key}:`, error);
94
+ console.error(`[AsyncStorage] Failed to retrieve token ${key}:`, error);
90
95
  return null;
91
96
  }
92
97
  }
@@ -103,11 +108,16 @@ export class AsyncStorageTokenStorage {
103
108
  const allKeys = await this.asyncStorage.getAllKeys();
104
109
  const ourKeys = allKeys.filter(key => key.startsWith(this.keyPrefix));
105
110
  if (ourKeys.length > 0) {
111
+ console.log(`[AsyncStorage] Clearing ${ourKeys.length} token(s):`, ourKeys);
106
112
  await this.asyncStorage.multiRemove(ourKeys);
113
+ console.log('[AsyncStorage] All tokens cleared successfully');
114
+ }
115
+ else {
116
+ console.log('[AsyncStorage] No tokens to clear');
107
117
  }
108
118
  }
109
119
  catch (error) {
110
- console.error('Failed to clear token storage:', error);
120
+ console.error('[AsyncStorage] Failed to clear token storage:', error);
111
121
  }
112
122
  }
113
123
  }
@@ -1 +1 @@
1
- {"version":3,"file":"rn-secure-storage.d.ts","sourceRoot":"","sources":["../../src/storage/rn-secure-storage.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EAGb,MAAM,0BAA0B,CAAC;AAalC;;;GAGG;AACH,qBAAa,wBAAyB,YAAW,YAAY;IAc/C,OAAO,CAAC,SAAS;IAZ7B,QAAQ,CAAC,eAAe,SAAS;IAGjC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;IAEH,OAAO,CAAC,eAAe,CAA2B;gBAE9B,SAAS,GAAE,MAAuB;IAIhD,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IA0B/C,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAkCzC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAkBlC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB5B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,QAAQ;CAOjB"}
1
+ {"version":3,"file":"rn-secure-storage.d.ts","sourceRoot":"","sources":["../../src/storage/rn-secure-storage.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EAGb,MAAM,0BAA0B,CAAC;AAalC;;;GAGG;AACH,qBAAa,wBAAyB,YAAW,YAAY;IAc/C,OAAO,CAAC,SAAS;IAZ7B,QAAQ,CAAC,eAAe,SAAS;IAGjC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;IAEH,OAAO,CAAC,eAAe,CAA2B;gBAE9B,SAAS,GAAE,MAAuB;IAIhD,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IA0B/C,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAkCzC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAkBlC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAqC5B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,QAAQ;CAOjB"}
@@ -110,23 +110,37 @@ export class ReactNativeSecureStorage {
110
110
  }
111
111
  }
112
112
  async clear() {
113
- // Clear all known secure keys
113
+ const clearPromises = [];
114
+ // Clear all known secure keys with retry logic
114
115
  for (const key of this.SECURE_KEYS) {
115
- try {
116
- if (Keychain) {
117
- await Keychain.resetGenericPassword({ service: this.getKeyName(key) });
116
+ clearPromises.push((async () => {
117
+ try {
118
+ if (Keychain) {
119
+ await Keychain.resetGenericPassword({ service: this.getKeyName(key) });
120
+ }
118
121
  }
119
- }
120
- catch (e) {
121
- console.warn(`[ReactNativeSecureStorage] Failed to clear keychain key ${key}`, e);
122
- }
122
+ catch (e) {
123
+ console.warn(`[ReactNativeSecureStorage] Retry clearing ${key}`);
124
+ // Retry once
125
+ try {
126
+ if (Keychain) {
127
+ await Keychain.resetGenericPassword({ service: this.getKeyName(key) });
128
+ }
129
+ }
130
+ catch (retryError) {
131
+ console.error(`[ReactNativeSecureStorage] Failed to clear ${key} after retry:`, retryError);
132
+ }
133
+ }
134
+ })());
123
135
  }
124
- // Clear AsyncStorage keys related to PERS
136
+ // Wait for all Keychain clearing to complete (or fail)
137
+ await Promise.allSettled(clearPromises);
138
+ // Always clear AsyncStorage fallback
125
139
  try {
126
140
  await this.fallbackStorage.clear();
127
141
  }
128
142
  catch (e) {
129
- console.warn('[ReactNativeSecureStorage] Failed to clear AsyncStorage', e);
143
+ console.error('[ReactNativeSecureStorage] Failed to clear AsyncStorage:', e);
130
144
  }
131
145
  }
132
146
  getKeyName(key) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@explorins/pers-sdk-react-native",
3
- "version": "2.0.4",
3
+ "version": "2.1.1",
4
4
  "description": "React Native SDK for PERS Platform - Tourism Loyalty System with Blockchain Transaction Signing and WebAuthn Authentication",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -37,10 +37,8 @@
37
37
  "author": "eXplorins",
38
38
  "license": "MIT",
39
39
  "dependencies": {
40
- "@explorins/pers-sdk": "^2.0.5",
41
- "@explorins/pers-shared": "^2.1.64",
40
+ "@explorins/pers-sdk": "^2.1.1",
42
41
  "@explorins/pers-signer": "^1.0.33",
43
- "@explorins/web3-ts": "^0.3.77",
44
42
  "buffer": "^6.0.3",
45
43
  "ethers": "^6.15.0",
46
44
  "react-native-get-random-values": "^2.0.0",
@@ -1,6 +1,7 @@
1
1
  // Export all hooks (only hooks, no providers to avoid circular dependency)
2
2
  export { useAuth } from './useAuth';
3
3
  export { useTokens } from './useTokens';
4
+ export { useTokenBalances } from './useTokenBalances';
4
5
  export { useTransactions } from './useTransactions';
5
6
  export { useTransactionSigner, SigningStatus } from './useTransactionSigner';
6
7
  export { useBusiness } from './useBusiness';
@@ -28,4 +29,9 @@ export type {
28
29
  SigningStatus as SigningStatusType
29
30
  } from './useTransactionSigner';
30
31
  export type { AccountOwnedTokensResult, Web3Hook } from './useWeb3';
31
- export type { EventsHook, PersEvent, EventHandler, EventFilter, Unsubscribe } from './useEvents';
32
+ export type { EventsHook, PersEvent, EventHandler, EventFilter, Unsubscribe } from './useEvents';
33
+ export type {
34
+ TokenBalanceWithToken,
35
+ UseTokenBalancesOptions,
36
+ UseTokenBalancesResult
37
+ } from './useTokenBalances';
@@ -0,0 +1,290 @@
1
+ import { useCallback, useEffect, useState } from 'react';
2
+ import { usePersSDK } from '../providers/PersSDKProvider';
3
+ import { useWeb3 } from './useWeb3';
4
+ import { NativeTokenTypes, type TokenDTO } from '@explorins/pers-shared';
5
+ import type { TokenBalance, TokenBalanceRequest } from '@explorins/pers-sdk/web3';
6
+
7
+ /**
8
+ * Token balance with associated token information for display
9
+ *
10
+ * This composite type combines blockchain balance data with token metadata,
11
+ * making it easy to display token information in UI components without
12
+ * needing to join data from multiple sources.
13
+ */
14
+ export interface TokenBalanceWithToken {
15
+ /** The balance data from blockchain */
16
+ tokenBalance: TokenBalance;
17
+ /** The token definition (contract, symbol, metadata, etc.) */
18
+ token: TokenDTO;
19
+ /** Human-readable formatted balance string (e.g., "100 XPL" or "3 stamps") */
20
+ balanceFormatted: string;
21
+ }
22
+
23
+ /**
24
+ * Configuration options for useTokenBalances hook
25
+ */
26
+ export interface UseTokenBalancesOptions {
27
+ /**
28
+ * Wallet address to check balances for (REQUIRED)
29
+ * Apps must explicitly provide the wallet address - no automatic selection
30
+ * Get from: user.wallets[selectedIndex].address
31
+ */
32
+ accountAddress: string;
33
+ /** Available tokens to check balances for (from SDK or filtered list) */
34
+ availableTokens?: TokenDTO[];
35
+ /** Whether to automatically load balances on mount/auth/token changes */
36
+ autoLoad?: boolean;
37
+ /** Optional refresh interval in milliseconds (0 = disabled) */
38
+ refreshInterval?: number;
39
+ }
40
+
41
+ /**
42
+ * Token balance loading hook return value
43
+ */
44
+ export interface UseTokenBalancesResult {
45
+ /** Array of token balances with formatted display data */
46
+ tokenBalances: TokenBalanceWithToken[];
47
+ /** Whether balances are currently loading */
48
+ isLoading: boolean;
49
+ /** Error message if loading failed */
50
+ error: string | null;
51
+ /** Manually trigger balance refresh */
52
+ refresh: () => Promise<void>;
53
+ /** Whether the hook is available (SDK initialized, user authenticated, has wallet) */
54
+ isAvailable: boolean;
55
+ /** User's wallet address being queried */
56
+ userAccountAddress: string | null;
57
+ }
58
+
59
+ /**
60
+ * React hook for loading and managing token balances
61
+ *
62
+ * Automatically handles:
63
+ * - Loading balances for ERC20 (fungible tokens/points)
64
+ * - Loading collections for ERC721 (unique NFTs/stamps)
65
+ * - Loading collections for ERC1155 (semi-fungible tokens/rewards)
66
+ * - Parallel loading with error resilience
67
+ * - Auto-refresh on authentication or token list changes
68
+ * - Formatted balance strings for display
69
+ *
70
+ * This hook consolidates complex token balance loading logic that would otherwise
71
+ * need to be duplicated across every app. It handles the differences between
72
+ * fungible and non-fungible tokens, parallel loading, error handling, and
73
+ * provides formatted display strings.
74
+ *
75
+ * @param options - Configuration options
76
+ * @returns Token balances state and actions
77
+ *
78
+ * @example
79
+ * **Basic Usage:**
80
+ * ```typescript
81
+ * import { useTokenBalances, useTokens, usePersSDK } from '@explorins/pers-sdk-react-native';
82
+ *
83
+ * function TokenBalancesScreen() {
84
+ * const { user } = usePersSDK();
85
+ * const { availableTokens } = useTokens();
86
+ *
87
+ * // App explicitly selects which wallet to use
88
+ * const walletAddress = user?.wallets?.[0]?.address;
89
+ *
90
+ * const {
91
+ * tokenBalances,
92
+ * isLoading,
93
+ * error,
94
+ * refresh
95
+ * } = useTokenBalances({
96
+ * accountAddress: walletAddress!,
97
+ * availableTokens,
98
+ * autoLoad: true
99
+ * });
100
+ *
101
+ * if (isLoading) return <Text>Loading balances...</Text>;
102
+ * if (error) return <Text>Error: {error}</Text>;
103
+ *
104
+ * return (
105
+ * <View>
106
+ * {tokenBalances.map(({ token, balanceFormatted }) => (
107
+ * <View key={token.id}>
108
+ * <Text>{token.name}: {balanceFormatted}</Text>
109
+ * </View>
110
+ * ))}
111
+ * <Button onPress={refresh} title="Refresh" />
112
+ * </View>
113
+ * );
114
+ * }
115
+ * ```
116
+ *
117
+ * @example
118
+ * **With Auto-Refresh:**
119
+ * ```typescript
120
+ * const { tokenBalances, isLoading } = useTokenBalances({
121
+ * accountAddress: walletAddress!,
122
+ * availableTokens,
123
+ * autoLoad: true,
124
+ * refreshInterval: 30000 // Refresh every 30 seconds
125
+ * });
126
+ * ```
127
+ *
128
+ * @example
129
+ * **Multi-Wallet Support:**
130
+ * ```typescript
131
+ * function MultiWalletBalances() {
132
+ * const { user } = usePersSDK();
133
+ * const [selectedWalletIndex, setSelectedWalletIndex] = useState(0);
134
+ *
135
+ * const walletAddress = user?.wallets?.[selectedWalletIndex]?.address;
136
+ *
137
+ * const { tokenBalances } = useTokenBalances({
138
+ * accountAddress: walletAddress!,
139
+ * availableTokens
140
+ * });
141
+ *
142
+ * // UI lets user switch between wallets
143
+ * }
144
+ * ```
145
+ */
146
+ export function useTokenBalances(options: UseTokenBalancesOptions): UseTokenBalancesResult {
147
+ const {
148
+ accountAddress,
149
+ availableTokens = [],
150
+ autoLoad = true,
151
+ refreshInterval = 0
152
+ } = options;
153
+
154
+ const { isAuthenticated } = usePersSDK();
155
+ const web3 = useWeb3();
156
+
157
+ const [tokenBalances, setTokenBalances] = useState<TokenBalanceWithToken[]>([]);
158
+ const [isLoading, setIsLoading] = useState(false);
159
+ const [error, setError] = useState<string | null>(null);
160
+
161
+ // Check if the hook is available for use
162
+ const isAvailable = web3.isAvailable && isAuthenticated && !!accountAddress;
163
+
164
+ /**
165
+ * Process balance for ERC20 fungible tokens (points/credits)
166
+ */
167
+ const processPointsBalance = useCallback(async (token: TokenDTO): Promise<TokenBalanceWithToken | null> => {
168
+ if (!web3.getTokenBalance || !accountAddress) return null;
169
+
170
+ try {
171
+ const request: TokenBalanceRequest = {
172
+ accountAddress,
173
+ contractAddress: token.contractAddress,
174
+ abi: token.abi,
175
+ tokenId: '',
176
+ chainId: token.chainId
177
+ };
178
+
179
+ const balanceResult = await web3.getTokenBalance(request);
180
+
181
+ if (!balanceResult || !balanceResult.hasBalance) return null;
182
+
183
+ return {
184
+ tokenBalance: balanceResult,
185
+ token,
186
+ balanceFormatted: `${balanceResult.balance} ${token.symbol || 'tokens'}`
187
+ };
188
+ } catch (err) {
189
+ console.warn(`[useTokenBalances] Failed to load balance for ${token.symbol}:`, err);
190
+ return null;
191
+ }
192
+ }, [web3.getTokenBalance, accountAddress]);
193
+
194
+ /**
195
+ * Process collection for ERC721/ERC1155 non-fungible tokens (stamps/rewards)
196
+ */
197
+ const processRewardsBalance = useCallback(async (token: TokenDTO): Promise<TokenBalanceWithToken[]> => {
198
+ if (!web3.getAccountOwnedTokensFromContract || !accountAddress) return [];
199
+
200
+ try {
201
+ const result = await web3.getAccountOwnedTokensFromContract(accountAddress, token);
202
+
203
+ if (result.totalOwned === 0) return [];
204
+
205
+ const balanceUnit = token.type === NativeTokenTypes.ERC1155 ? 'reward' : 'stamp';
206
+
207
+ // Return one item per tokenId (for individual display in lists)
208
+ return result.ownedTokens.map(ownedToken => ({
209
+ tokenBalance: ownedToken,
210
+ token,
211
+ balanceFormatted: `${ownedToken.balance} ${balanceUnit}${ownedToken.balance !== 1 ? 's' : ''}`
212
+ }));
213
+ } catch (err) {
214
+ console.warn(`[useTokenBalances] Failed to load collection for ${token.symbol}:`, err);
215
+ return [];
216
+ }
217
+ }, [web3.getAccountOwnedTokensFromContract, accountAddress]);
218
+
219
+ /**
220
+ * Load all token balances
221
+ */
222
+ const loadBalances = useCallback(async () => {
223
+ if (!isAvailable || availableTokens.length === 0) {
224
+ return;
225
+ }
226
+
227
+ setIsLoading(true);
228
+ setError(null);
229
+
230
+ try {
231
+ // Split by category: points (fungible credits) vs rewards (stamps/collectibles)
232
+ const points = availableTokens.filter(t => t.type === NativeTokenTypes.ERC20);
233
+ const rewards = availableTokens.filter(
234
+ t => t.type === NativeTokenTypes.ERC721 || t.type === NativeTokenTypes.ERC1155
235
+ );
236
+
237
+ // Load all balances in parallel (individual errors handled per-token)
238
+ const [pointsResults, rewardsResults] = await Promise.all([
239
+ Promise.all(points.map(processPointsBalance)),
240
+ Promise.all(rewards.map(processRewardsBalance))
241
+ ]);
242
+
243
+ // Combine results, filtering out nulls (failed loads return null/empty)
244
+ const allBalances = [
245
+ ...pointsResults.filter(Boolean),
246
+ ...rewardsResults.flat()
247
+ ] as TokenBalanceWithToken[];
248
+
249
+ setTokenBalances(allBalances);
250
+
251
+ // Set error only if no balances loaded at all
252
+ if (allBalances.length === 0 && availableTokens.length > 0) {
253
+ setError('No token balances could be loaded');
254
+ }
255
+ } catch (err) {
256
+ const errorMessage = err instanceof Error ? err.message : 'Failed to load balances';
257
+ setError(errorMessage);
258
+ console.error('[useTokenBalances] Error loading balances:', err);
259
+ } finally {
260
+ setIsLoading(false);
261
+ }
262
+ }, [isAvailable, availableTokens, processPointsBalance, processRewardsBalance]);
263
+
264
+ // Auto-load balances when dependencies change
265
+ useEffect(() => {
266
+ if (autoLoad && isAvailable && availableTokens.length > 0) {
267
+ loadBalances();
268
+ }
269
+ }, [autoLoad, isAvailable, availableTokens.length, loadBalances]);
270
+
271
+ // Optional auto-refresh interval
272
+ useEffect(() => {
273
+ if (refreshInterval > 0 && isAvailable && availableTokens.length > 0) {
274
+ const intervalId = setInterval(() => {
275
+ loadBalances();
276
+ }, refreshInterval);
277
+
278
+ return () => clearInterval(intervalId);
279
+ }
280
+ }, [refreshInterval, isAvailable, availableTokens.length, loadBalances]);
281
+
282
+ return {
283
+ tokenBalances,
284
+ isLoading,
285
+ error,
286
+ refresh: loadBalances,
287
+ isAvailable,
288
+ userAccountAddress: accountAddress
289
+ };
290
+ }