Feature: NDK integration and profile search

craco.config.js

@@ -11,6 +11,11 @@ module.exports = {
       webpackConfig.plugins = webpackConfig.plugins.filter(plugin => 
         !(plugin.constructor && plugin.constructor.name === 'PrettierPlugin')
       );
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      });
       return webpackConfig;
     },
     plugins: [

package.json

@@ -13,8 +13,11 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@babel/core": "^7.24.7",
+    "@cashu/cashu-ts": "^2.5.2",
     "@craco/craco": "^6.1.2",
     "@lit-labs/react": "^1.0.2",
+    "@nostr-dev-kit/ndk": "^2.14.32",
+    "@nostr-dev-kit/ndk-hooks": "^1.2.3",
     "@react-google-maps/api": "^2.18.1",
     "@reduxjs/toolkit": "^1.7.1",
     "@splidejs/react-splide": "^0.7.12",

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ConfigProvider } from 'antd';
 import { HelmetProvider } from 'react-helmet-async';
 import deDe from 'antd/lib/locale/de_DE';
@@ -13,10 +13,25 @@ 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 { useNDKInit } from '@nostr-dev-kit/ndk-hooks';
+
+const ndk = new NDK({
+  explicitRelayUrls: ['wss://relay.damus.io', 'wss://relay.nostr.band', 'wss://relay.snort.social', 'vault.iris.to'],
+});
+ndk
+  .connect()
+  .then(() => console.log('NDK connected'))
+  .catch((error) => console.error('NDK connection error:', error));
 
 const App: React.FC = () => {
   const { language } = useLanguage();
   const theme = useAppSelector((state) => state.theme.theme);
+  const initializeNDK = useNDKInit();
+
+  useEffect(() => {
+    initializeNDK(ndk);
+  }, [initializeNDK]);
 
   usePWA();
 

src/components/header/Header.styles.ts

@@ -7,6 +7,7 @@ import { BaseCol } from '../common/BaseCol/BaseCol';
 
 export const HeaderActionWrapper = styled.div`
   cursor: pointer;
+  position: relative;
 
   & > .ant-btn > span[role='img'],
   .ant-badge {
@@ -22,6 +23,18 @@ export const HeaderActionWrapper = styled.div`
   }
 `;
 
+export const InvalidPubkey = styled.div`
+  position: absolute;
+  top: 3rem;
+  left: 2rem;
+  width: 100%;
+  color: var(--error-color);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+`;
+
 export const DropdownCollapse = styled(BaseCollapse)`
   & > .ant-collapse-item > .ant-collapse-header {
     font-weight: 600;

src/components/header/components/HeaderSearch/HeaderSearch.tsx

@@ -37,7 +37,7 @@ export const HeaderSearch: React.FC = () => {
 
   useEffect(() => {
     setModalOpen(false);
-    setOverlayOpen(false);
+    //setOverlayOpen(false);
   }, [pathname]);
 
   return (
@@ -59,7 +59,7 @@ export const HeaderSearch: React.FC = () => {
               query={query}
               setQuery={setQuery}
               data={sortedResults}
-              isOverlayOpen={isOverlayOpen}
+              isOverlayOpen={false}
               setOverlayOpen={setOverlayOpen}
             />
           </S.SearchModal>
@@ -71,7 +71,7 @@ export const HeaderSearch: React.FC = () => {
           query={query}
           setQuery={setQuery}
           data={sortedResults}
-          isOverlayOpen={isOverlayOpen}
+          isOverlayOpen={false}
           setOverlayOpen={setOverlayOpen}
         />
       )}

src/components/header/components/searchDropdown/SearchDropdown.tsx

@@ -1,12 +1,17 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { FilterIcon } from 'components/common/icons/FilterIcon';
 import { SearchOverlay } from './searchOverlay/SearchOverlay/SearchOverlay';
 import { HeaderActionWrapper } from '@app/components/header/Header.styles';
 import { CategoryComponents } from '@app/components/header/components/HeaderSearch/HeaderSearch';
 import { Btn, InputSearch } from '../HeaderSearch/HeaderSearch.styles';
 import { useTranslation } from 'react-i18next';
 import { BasePopover } from '@app/components/common/BasePopover/BasePopover';
+import { NDKUserProfile, useNDK } from '@nostr-dev-kit/ndk-hooks';
+import usePaidSubscribers from '@app/hooks/usePaidSubscribers';
+import { convertNDKUserProfileToSubscriberProfile } from '@app/utils/utils';
+import { InvalidPubkey } from '../../Header.styles';
 
+import { SubscriberProfile } from '@app/hooks/usePaidSubscribers';
+import { SubscriberDetailModal } from '@app/components/relay-dashboard/paid-subscribers/SubscriberDetailModal';
 interface SearchOverlayProps {
   query: string;
   setQuery: (query: string) => void;
@@ -23,7 +28,13 @@ export const SearchDropdown: React.FC<SearchOverlayProps> = ({
   setOverlayOpen,
 }) => {
   const [isFilterOpen, setFilterOpen] = useState(false);
-
+  const [isSubscriberDetailModalOpen, setSubscriberDetailModalOpen] = useState(false);
+  const [fetchingProfile, setFetchingProfile] = useState(false);
+  const [fetchingFailed, setFetchingFailed] = useState(false);
+  const [subscriberProfile, setSubscriberProfile] = useState<SubscriberProfile | null>(null);
+  const [invalidPubkey, setInvalidPubkey] = useState(false);
+  const { subscribers } = usePaidSubscribers();
+  const ndkInstance = useNDK();
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -33,6 +44,74 @@ export const SearchDropdown: React.FC<SearchOverlayProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const ref = useRef<any>(null);
 
+  const fetchProfile = async (pubkey: string): Promise<NDKUserProfile | null> => {
+    if (!ndkInstance) return null;
+
+    try {
+      setFetchingProfile(true);
+      const profile = await ndkInstance.ndk?.getUser({ pubkey: pubkey }).fetchProfile();
+
+      if (profile) {
+        setFetchingProfile(false);
+        setFetchingFailed(false);
+        return profile;
+      } else {
+        console.error('Profile not found for pubkey:', pubkey);
+        setFetchingProfile(false);
+        setFetchingFailed(true);
+        return null;
+      }
+    } catch (error) {
+      console.error('Error fetching profile:', error);
+      setFetchingProfile(false);
+      setFetchingFailed(true);
+      return null;
+    }
+  };
+
+  const handleSearchProfile = async () => {
+    if (!query) return;
+    //verify that it's a pubkey
+    if (/^[a-fA-F0-9]{64}$/.test(query)) {
+      setSubscriberDetailModalOpen(true);
+
+      //See if the pubkey exists in the subscribers
+      const pubkey = query;
+      const subscriber = subscribers.find((sub) => sub.pubkey === query);
+      // If it exists, open the modal with the subscriber details. If name,picture, or about are not set, fetch profile.
+      //if It doesnt exist, fetch the profile from NDK
+      //once fetched, convert it to SubscriberProfile and open the modal
+      if (subscriber) {
+        if (!subscriber.name || !subscriber.picture || !subscriber.about) {
+          const profile = await fetchProfile(pubkey);
+          if (profile) {
+            const subscriberProfile: SubscriberProfile = convertNDKUserProfileToSubscriberProfile(pubkey, profile);
+            // Open the modal with the fetched subscriber profile
+            setSubscriberProfile(subscriberProfile);
+          }
+        }
+      } else {
+        const profile = await fetchProfile(pubkey);
+        if (profile) {
+          const subscriberProfile: SubscriberProfile = convertNDKUserProfileToSubscriberProfile(pubkey, profile);
+          // Open the modal with the fetched subscriber profile
+          setSubscriberProfile(subscriberProfile);
+        }
+      }
+    }else{
+      setInvalidPubkey(true);
+    }
+  };
+  const onCloseSubscriberDetailModal = () => {
+    setSubscriberDetailModalOpen(false);
+    setSubscriberProfile(null);
+  };
+
+  useEffect(() => {
+    if(query.length === 0) {
+      setInvalidPubkey(false);
+    }
+  }, [query]);
   return (
     <>
       <BasePopover
@@ -43,25 +122,43 @@ export const SearchDropdown: React.FC<SearchOverlayProps> = ({
         getPopupContainer={() => ref.current}
       >
         <HeaderActionWrapper>
+          {invalidPubkey && (
+            <InvalidPubkey>
+              {"Invalid pubkey."}
+            </InvalidPubkey>
+          )}
           <InputSearch
             width="100%"
             value={query}
-            placeholder={t('header.search')}
+            placeholder={t('header.search') + ' hex pubkey'}
             filter={
               <Btn
                 size="small"
                 type={isFilterOpen ? 'ghost' : 'text'}
                 aria-label="Filter"
-                icon={<FilterIcon />}
                 onClick={() => setFilterOpen(!isFilterOpen)}
               />
             }
             onChange={(event) => setQuery(event.target.value)}
             enterButton={null}
             addonAfter={null}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                handleSearchProfile();
+              }
+            }}
           />
           <div ref={ref} />
         </HeaderActionWrapper>
+        {isSubscriberDetailModalOpen && (
+          <SubscriberDetailModal
+            loading={fetchingProfile}
+            fetchFailed={fetchingFailed}
+            isVisible={isSubscriberDetailModalOpen}
+            subscriber={subscriberProfile}
+            onClose={onCloseSubscriberDetailModal}
+          />
+        )}
       </BasePopover>
     </>
   );

src/components/layouts/main/MainContent/MainContent.tsx

@@ -17,7 +17,7 @@ export default styled(BaseLayout.Content)<HeaderProps>`
   ${(props) =>
     props?.$isDesktop &&
     css`
-      z-index: 105;
+      z-index: 0;
     `}
 
   @media only screen and ${media.md} {