Implement hybrid profile fetching with NIP-42 authentication

- Add environment-based NDK configuration with relay URLs
- Implement NIP-42 authentication using NDKRelayAuthPolicies.signIn
- Create hybrid profile fetching: NDK first, backend API fallback
- Fix authentication issues in LoginForm and useWalletAuth
- Improve display name parsing from Nostr profile data
- Prevent infinite loops with better profile caching logic
- Remove global Window.nostr declaration to avoid NDK conflicts

Author: Maphikza

.env.development

@@ -4,6 +4,10 @@ REACT_APP_ASSETS_BUCKET=http://localhost
 REACT_APP_DEMO_MODE=false
 REACT_APP_BASENAME=
 
+# Nostr relay configuration for profile fetching
+REACT_APP_OWN_RELAY_URL=ws://localhost:7000
+REACT_APP_NOSTR_RELAY_URLS=wss://relay.damus.io,wss://relay.nostr.band,wss://relay.snort.social,wss://vault.iris.to
+
 # More info https://create-react-app.dev/docs/advanced-configuration
 ESLINT_NO_DEV_ERRORS=true
 TSC_COMPILE_ON_ERROR=true

src/App.tsx

@@ -13,15 +13,33 @@ import { usePWA } from './hooks/usePWA';
 import { useThemeWatcher } from './hooks/useThemeWatcher';
 import { useAppSelector } from './hooks/reduxHooks';
 import { themeObject } from './styles/themes/themeVariables';
-import NDK from '@nostr-dev-kit/ndk';
+import NDK, { NDKEvent, NDKNip07Signer, NDKRelayAuthPolicies } from '@nostr-dev-kit/ndk';
 import { useNDKInit } from '@nostr-dev-kit/ndk-hooks';
+import config from './config/config';
+
+// Configure NDK with user's relay URLs from environment variables
+const getRelayUrls = () => {
+  const relayUrls = [...config.nostrRelayUrls];
+  
+  // Add user's own relay URL as the first priority if provided
+  if (config.ownRelayUrl) {
+    relayUrls.unshift(config.ownRelayUrl);
+  }
+  
+  return relayUrls;
+};
 
 const ndk = new NDK({
-  explicitRelayUrls: ['wss://relay.damus.io', 'wss://relay.nostr.band', 'wss://relay.snort.social', 'vault.iris.to'],
+  explicitRelayUrls: getRelayUrls(),
+  signer: new NDKNip07Signer(),
 });
+
+// Set up NIP-42 authentication policy following the example
+ndk.relayAuthDefaultPolicy = NDKRelayAuthPolicies.signIn({ ndk });
+
 ndk
   .connect()
-  .then(() => console.log('NDK connected'))
+  .then(() => console.log('NDK connected with relay URLs and NIP-42 auth policy:', getRelayUrls()))
   .catch((error) => console.error('NDK connection error:', error));
 
 const App: React.FC = () => {

src/components/auth/LoginForm/LoginForm.tsx

@@ -70,9 +70,9 @@ export const LoginForm: React.FC = () => {
         console.log('Signed event:', signedEvent);
 
         const response = await verifyChallenge({
-          challenge: signedEvent.content,
+          challenge: event.content,
           signature: signedEvent.sig,
-          messageHash: signedEvent.id,
+          messageHash: event.id,
           event: signedEvent,
         });
 

src/components/relay-dashboard/paid-subscribers/PaidSubscribers.tsx

@@ -93,48 +93,94 @@ export const PaidSubscribers: React.FC = () => {
   };
 
   useEffect(() => {
-    // Fetch profiles for test subscribers
+    // Implement hybrid profile fetching: NDK first, fallback to backend data
     if (useDummyData) {
       console.warn('[PaidSubscribers] Using dummy data, skipping profile fetch');
       setLoadingProfiles(false);
       return;
     }
+
     const fetchProfiles = async () => {
       if (!ndkInstance || !ndkInstance.ndk) {
-        console.error('NDK instance is not initialized');
+        console.error('[PaidSubscribers] NDK instance is not initialized, using backend data only');
+        setLoadingProfiles(false);
         return;
       }
-      //1. map through subscribers and fetch profiles. skip profile if already on map
+
+      console.log('[PaidSubscribers] Starting hybrid profile fetch for', subscribers.length, 'subscribers');
+
+      // Process each subscriber with hybrid approach
       await Promise.all(
         subscribers.map(async (subscriber) => {
-          if (
-            subscriberProfiles.has(subscriber.pubkey) &&
-            subscriberProfiles.get(subscriber.pubkey)?.picture &&
-            subscriberProfiles.get(subscriber.pubkey)?.about
-          ) {
-            return subscriberProfiles.get(subscriber.pubkey);
+          // Skip if we already have a complete profile in our map
+          const existingProfile = subscriberProfiles.get(subscriber.pubkey);
+          const hasValidProfile = existingProfile && (
+            (existingProfile.name && existingProfile.name !== 'Anonymous Subscriber') ||
+            existingProfile.picture ||
+            existingProfile.about
+          );
+          
+          if (hasValidProfile) {
+            console.log(`[PaidSubscribers] Profile already cached for ${subscriber.pubkey}:`, {
+              name: existingProfile.name,
+              picture: !!existingProfile.picture,
+              about: !!existingProfile.about
+            });
+            return;
           }
+
           try {
-            if (!ndkInstance.ndk) {
-              console.error('NDK instance is not available');
-              return null;
-            }
+            console.log(`[PaidSubscribers] Fetching NDK profile for ${subscriber.pubkey}`);
+            
+            // Try to fetch profile from NDK (user's relay + other relays)
             const user = await ndkInstance.ndk?.getUser({ pubkey: subscriber.pubkey }).fetchProfile();
-            if (user) {
-              // Convert NDKUserProfile to SubscriberProfile and add to map
-              const covertedNDKUserProfile = convertNDKUserProfileToSubscriberProfile(subscriber.pubkey, user);
-              updateSubscriberProfile(subscriber.pubkey, covertedNDKUserProfile);
-
-              return user;
+            
+            if (user && (user.name || user.picture || user.about)) {
+              // NDK returned a profile - use it as the primary source
+              console.log(`[PaidSubscribers] NDK profile found for ${subscriber.pubkey}:`, {
+                name: user.name,
+                picture: user.picture,
+                about: user.about
+              });
+              
+              const ndkProfile = convertNDKUserProfileToSubscriberProfile(subscriber.pubkey, user);
+              updateSubscriberProfile(subscriber.pubkey, ndkProfile);
+            } else {
+              // NDK came up empty - fallback to backend data
+              console.log(`[PaidSubscribers] NDK profile empty for ${subscriber.pubkey}, falling back to backend data:`, {
+                name: subscriber.name,
+                picture: subscriber.picture,
+                about: subscriber.about
+              });
+              
+              // Use the backend data as-is since NDK had no better information
+              updateSubscriberProfile(subscriber.pubkey, {
+                ...subscriber,
+                // Ensure we have fallback values if backend data is also incomplete
+                name: subscriber.name || 'Anonymous Subscriber',
+                picture: subscriber.picture || '',
+                about: subscriber.about || ''
+              });
             }
           } catch (error) {
-            console.error(`Error fetching profile for ${subscriber.pubkey}:`, error);
+            console.error(`[PaidSubscribers] Error fetching NDK profile for ${subscriber.pubkey}:`, error);
+            
+            // Error occurred - fallback to backend data
+            console.log(`[PaidSubscribers] NDK error for ${subscriber.pubkey}, using backend data`);
+            updateSubscriberProfile(subscriber.pubkey, {
+              ...subscriber,
+              name: subscriber.name || 'Anonymous Subscriber',
+              picture: subscriber.picture || '',
+              about: subscriber.about || ''
+            });
           }
-          return null;
         }),
       );
+
+      console.log('[PaidSubscribers] Hybrid profile fetch completed');
       setLoadingProfiles(false);
     };
+
     fetchProfiles();
   }, [subscribers, ndkInstance]);
 

src/components/relay-dashboard/paid-subscribers/SubscriberDetailModal/SubscriberDetailModal.tsx

@@ -43,7 +43,7 @@ export const SubscriberDetailModal: React.FC<SubscriberDetailModalProps> = ({ su
   if (!subscriber && !loading &&  !fetchFailed) {
     return (
       <S.StateModal open={isVisible} footer={null} onCancel={onClose} centered>
-        <Typography.Text type="secondary">Couldn't find this subscriber profile.</Typography.Text>
+        <Typography.Text type="secondary">Couldn&apos;t find this subscriber profile.</Typography.Text>
       </S.StateModal>
     );
   }

src/config/config.ts

@@ -8,6 +8,17 @@ const config = {
   isDemoMode: process.env.REACT_APP_DEMO_MODE === 'true',
   walletBaseURL: process.env.REACT_APP_WALLET_BASE_URL?.trim() || 'http://localhost:9003',
 
+  // Nostr relay configuration
+  nostrRelayUrls: process.env.REACT_APP_NOSTR_RELAY_URLS?.split(',').map(url => url.trim()) || [
+    'wss://relay.damus.io',
+    'wss://relay.nostr.band', 
+    'wss://relay.snort.social',
+    'wss://vault.iris.to'
+  ],
+  
+  // User's own relay URL (primary relay for profile fetching)
+  ownRelayUrl: process.env.REACT_APP_OWN_RELAY_URL?.trim() || null,
+  
   // Notification settings
   notifications: {
     // 5 minutes in milliseconds

src/hooks/usePaidSubscribers.ts

@@ -146,15 +146,14 @@ const usePaidSubscribers = (pageSize = 20) => {
       console.log(`[usePaidSubscribers] Normalized data:`, data);
       console.log(`[usePaidSubscribers] Data length: ${data?.length}, typeof data: ${typeof data}, Array.isArray(data): ${Array.isArray(data)}`);
 
-      // *** NEW DIRECT CHECK FOR DATA WITHOUT NESTED CONDITIONS ***
+      // If we have backend data, use it as the primary source and return subscribers for NDK enhancement
       if (data && Array.isArray(data) && data.length > 0) {
-        console.log(`[usePaidSubscribers] **** REAL DATA DETECTED! Bypassing all other logic ****`);
+        console.log(`[usePaidSubscribers] Backend data detected, using as primary source`);
 
         try {
           // Process the profiles to replace placeholder avatar URLs
           const processedProfiles: SubscriberProfile[] = [];
 
-          // Attempt to directly parse one of the data elements to verify it's structured correctly
           console.log(`[usePaidSubscribers] First item pubkey:`, data[0]?.pubkey);
           console.log(`[usePaidSubscribers] First item picture:`, data[0]?.picture);
 
@@ -182,31 +181,26 @@ const usePaidSubscribers = (pageSize = 20) => {
             });
           }
 
-          console.log('[usePaidSubscribers] DIRECT STATE UPDATES WITH REAL DATA');
+          console.log('[usePaidSubscribers] Backend data processed successfully');
           console.log('[usePaidSubscribers] Processed profiles count:', processedProfiles.length);
 
-          // Force a state update for useDummyData first
+          // Update state with backend data
           setUseDummyData(false);
-          
-          // Then update all other state with real data
-          if (processedProfiles.length > 0) {
-            setSubscribers(processedProfiles);
-          }
-          
+          setSubscribers(processedProfiles);
           setHasMore(data.length === pageSize);
           setCurrentPage(page + 1);
 
-          console.log('[usePaidSubscribers] State updates with real data complete!');
-          return; // Exit early after processing real data
+          console.log('[usePaidSubscribers] Backend data set as primary source');
+          return; // Exit early after processing backend data
         } catch (processingError) {
-          console.error('[usePaidSubscribers] Error processing profiles:', processingError);
+          console.error('[usePaidSubscribers] Error processing backend profiles:', processingError);
           // Continue to fallback logic below if processing fails
         }
       }
 
-      // Fallback logic if the direct approach failed
+      // Fallback logic if no backend data
       if (isMounted.current) {
-        console.log('[usePaidSubscribers] Using fallback logic - probably no valid data');
+        console.log('[usePaidSubscribers] No backend data found, using dummy data');
         setUseDummyData(true);
         setSubscribers(dummyProfiles);
         setHasMore(false);

src/hooks/useWalletAuth.ts

@@ -54,14 +54,17 @@ const useWalletAuth = () => {
 
       console.log(challenge)
 
-      // Sign the challenge using Nostr
-      const signedEvent = await window.nostr.signEvent({
+      // Create the event to sign
+      const event = {
         pubkey: npub,
         content: challenge,
         created_at: Math.floor(Date.now() / 1000),
         kind: 1,
         tags: [],
-      });
+      };
+
+      // Sign the challenge using Nostr
+      const signedEvent = await window.nostr.signEvent(event);
 
       // Send the signed challenge to the backend for verification
       const verifyResponse = await fetch(`${config.walletBaseURL}/verify`, {
@@ -70,7 +73,7 @@ const useWalletAuth = () => {
         body: JSON.stringify({
           challenge,
           signature: signedEvent.sig,
-          messageHash: signedEvent.id,
+          messageHash: event.content,
           event: signedEvent,
         }),
       });

src/types/nostr.ts

@@ -13,8 +13,5 @@ export interface NostrProvider {
     };
   }
 
-  declare global {
-    interface Window {
-      nostr?: NostrProvider;
-    }
-  }
+  // Global Window declaration removed to avoid conflict with NDK types
+  // NDK will provide the window.nostr types automatically

src/utils/utils.ts

@@ -23,9 +23,14 @@ export const getSatsCurrency = (price: number | string, currency: CurrencyTypeEn
   return isIcon ? `${currencySymbol}${formattedPrice}` : `${formattedPrice} ${currency}`;
 };
  export const convertNDKUserProfileToSubscriberProfile = (pubkey: string, user: NDKUserProfile): SubscriberProfile => {
+    // Handle display_name from the profile data since NDK sometimes uses different field names
+    const displayName = user.name || 
+                       ('display_name' in user ? user.display_name : '') || 
+                       ('displayName' in user ? user.displayName : '') || '';
+    
     return {
       pubkey,
-      name: user.name || '',
+      name: typeof displayName === 'string' ? displayName : '',
       picture: user.picture || '',
       about: user.about || '',
     };