feat: refactor usenostr hook (keep-starknet-strange#118)

* feat: refactor usenostr hook

* feat: refactor usenostr hook

* feat: added lock file

* Fix some issues

- Providers moved to Wrapper
- Replaced 3 Providers with 1 General Provider
- Queries should return the query itself, not just data

---------

Co-authored-by: Uğur Eren <[email protected]>

JoyboyCommunity/package.json

@@ -26,6 +26,7 @@
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
     "@react-navigation/stack": "^6.3.29",
+    "@tanstack/react-query": "^5.39.0",
     "buffer": "^6.0.3",
     "crypto-es": "^2.1.0",
     "events": "^3.3.0",

JoyboyCommunity/src/app/App.tsx

@@ -4,7 +4,6 @@ import * as SplashScreen from 'expo-splash-screen';
 import React, {useCallback, useEffect, useState} from 'react';
 import {StatusBar, View} from 'react-native';
 
-import {useNostr} from '../hooks/useNostr';
 import {Router} from './Router';
 
 // Keep the splash screen visible while we fetch resources
@@ -13,8 +12,6 @@ SplashScreen.preventAutoHideAsync();
 export default function App() {
   const [appIsReady, setAppIsReady] = useState(false);
 
-  const {getEvents, getEventsNotes, setEvents, events} = useNostr();
-
   useEffect(() => {
     async function prepare() {
       try {

JoyboyCommunity/src/app/Wrapper.tsx

@@ -1,13 +1,19 @@
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {useEffect, useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {Host as PortalizeProvider} from 'react-native-portalize';
 import {ThemeProvider} from 'styled-components/native';
 
 import {RootScreenContainer} from '../components';
+import {NostrProvider} from '../context/NostrContext';
 import {darkModeColors, lightModeColors} from '../tokens/colors';
 import App from './App';
 
+const queryClient = new QueryClient({
+  defaultOptions: {queries: {retry: 2}},
+});
+
 export const Wrapper: React.FC = () => {
   const colorScheme = useColorScheme();
 
@@ -24,9 +30,13 @@ export const Wrapper: React.FC = () => {
     <GestureHandlerRootView style={{flex: 1}}>
       <ThemeProvider theme={theme}>
         <PortalizeProvider>
-          <RootScreenContainer>
-            <App />
-          </RootScreenContainer>
+          <NostrProvider>
+            <QueryClientProvider client={queryClient}>
+              <RootScreenContainer>
+                <App />
+              </RootScreenContainer>
+            </QueryClientProvider>
+          </NostrProvider>
         </PortalizeProvider>
       </ThemeProvider>
     </GestureHandlerRootView>

JoyboyCommunity/src/context/NostrContext.tsx

@@ -0,0 +1,35 @@
+import NDK, {NDKNip07Signer} from '@nostr-dev-kit/ndk';
+import {SimplePool} from 'nostr-tools';
+import {createContext, useContext, useMemo} from 'react';
+
+import {RELAYS_PROD} from '../utils/relay';
+
+export type NostrContextType = {
+  pool: SimplePool;
+  relays: string[];
+  ndk: NDK;
+};
+
+export const NostrContext = createContext<NostrContextType | null>(null);
+
+export const NostrProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const pool = useMemo(() => new SimplePool(), []);
+  const relays = RELAYS_PROD;
+
+  const ndk = useMemo(() => {
+    const nip07signer = new NDKNip07Signer();
+    return new NDK({signer: nip07signer});
+  }, []);
+
+  return <NostrContext.Provider value={{pool, relays, ndk}}>{children}</NostrContext.Provider>;
+};
+
+export const useNostrContext = () => {
+  const nostr = useContext(NostrContext);
+
+  if (!nostr) {
+    throw new Error('NostrContext must be used within a NostrProvider');
+  }
+
+  return nostr;
+};