Code clean up

MagicBareRnExample/App.tsx

@@ -1,52 +1,15 @@
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import React from 'react';
 import Navigation from './navigation';
-import { SolanaExtension } from '@magic-ext/solana';
-import { EVMExtension } from '@magic-ext/evm';
-import { Magic } from '@magic-sdk/react-native-bare';
-import { OAuthExtension } from '@magic-ext/react-native-bare-oauth';
-import { ethers } from 'ethers';
-import { ENV, API_KEY } from './config/env';
-import { GDKMSExtension } from '@magic-ext/gdkms';
-
-const customPolygonOptions = {
-  rpcUrl: 'https://polygon-rpc.com/', // Polygon RPC URL
-  chainId: 137, // Polygon chain id
-  default: true, // Set as default network
-};
-
-const customOptimismOptions = {
-  rpcUrl: 'https://mainnet.optimism.io',
-  chainId: 10,
-};
+import { useMagic } from './hooks/magic';
 
 export default function App() {
 
-    const [env, setEnv] = React.useState(ENV.PROD);
-
-    const magic = new Magic(API_KEY[env], {
-        extensions: [
-            new OAuthExtension(),
-            new GDKMSExtension(),
-            new SolanaExtension({
-              rpcUrl: 'https://api.devnet.solana.com',
-            }),
-            new EVMExtension([customPolygonOptions, customOptimismOptions]),
-          ],
-    });
-
-    const provider = new ethers.BrowserProvider(magic.rpcProvider as any);
-
-    const magicProps = {
-        magic,
-        provider,
-        setEnv,
-        env,
-    };
+  const { magic } = useMagic();
 
     return (
         <SafeAreaProvider>
-            <Navigation  magicProps={magicProps} />
+            <Navigation />
           <magic.Relayer />
         </SafeAreaProvider>
     );

MagicBareRnExample/hooks/magic.ts

@@ -0,0 +1,56 @@
+import { Magic } from '@magic-sdk/react-native-bare';
+import { OAuthExtension } from '@magic-ext/react-native-bare-oauth';
+import { SolanaExtension } from '@magic-ext/solana';
+import { EVMExtension } from '@magic-ext/evm';
+import { ethers } from 'ethers';
+
+// API Key - Replace with your actual publishable key
+const API_KEY = 'YOUR_PUBLISHABLE_KEY';
+
+const customPolygonOptions = {
+  rpcUrl: 'https://polygon-rpc.com/', // Polygon RPC URL
+  chainId: 137, // Polygon chain id
+  default: true, // Set as default network
+};
+
+const customOptimismOptions = {
+  rpcUrl: 'https://mainnet.optimism.io',
+  chainId: 10,
+};
+
+class MagicService {
+  private static _magic: any = null;
+  private static _provider: ethers.BrowserProvider | null = null;
+
+  public static get magic(): any {
+    if (!this._magic) {
+      this._magic = new Magic(API_KEY, {
+        extensions: [
+          new OAuthExtension(),
+          new SolanaExtension({
+            rpcUrl: 'https://api.devnet.solana.com',
+          }),
+          new EVMExtension([customPolygonOptions, customOptimismOptions]),
+        ],
+      });
+    }
+    return this._magic;
+  }
+
+  public static get provider(): ethers.BrowserProvider {
+    if (!this._provider) {
+      this._provider = new ethers.BrowserProvider(
+        MagicService.magic.rpcProvider as any
+      );
+    }
+    return this._provider;
+  }
+}
+
+// React hook to use Magic service
+export function useMagic() {
+  return {
+    magic: MagicService.magic,
+    provider: MagicService.provider,
+  };
+}

MagicBareRnExample/navigation/index.tsx

@@ -14,17 +14,15 @@ import LoginScreen from '../screens/LoginScreen';
 import CryptoScreen from '../screens/CryptoScreen';
 import { RootStackParamList, RootTabParamList, TabOneParamList, TabTwoParamList } from '../types';
 import LinkingConfiguration from './LinkingConfiguration';
-import HeaderDropdown from './HeaderDropdown';
-import { JSX } from 'react';
 
 Icon.loadFont();
 
-export default function Navigation({ magicProps }: { magicProps: any  }) {
+export default function Navigation() {
 
   return (
     <NavigationContainer
       linking={LinkingConfiguration}>
-      <RootNavigator magicProps={magicProps}/>
+      <RootNavigator/>
     </NavigationContainer>
   );
 }
@@ -35,11 +33,11 @@ export default function Navigation({ magicProps }: { magicProps: any  }) {
  */
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
-function RootNavigator({ magicProps }: any) {
+function RootNavigator() {
   return (
     <Stack.Navigator>
         <Stack.Screen name="Root" options={{ headerShown: false }} >
-            {() => BottomTabNavigator(magicProps)}
+            {() => BottomTabNavigator()}
         </Stack.Screen>
       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
     </Stack.Navigator>
@@ -52,14 +50,7 @@ function RootNavigator({ magicProps }: any) {
  */
 const BottomTab = createBottomTabNavigator<RootTabParamList>();
 
-function BottomTabNavigator(props: { navigation?: any; env?: any; setEnv?: any; magic?: any; provider?: any; }) {
-
-    const { env, setEnv, magic, provider } = props;
-
-    const header = () => <HeaderDropdown
-        env={env}
-        setEnv={setEnv}
-    />;
+function BottomTabNavigator() {
 
   return (
     <BottomTab.Navigator
@@ -72,7 +63,7 @@ function BottomTabNavigator(props: { navigation?: any; env?: any; setEnv?: any;
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
         })}
       >
-          {() => TabOneNavigator(header, magic, provider)}
+          {() => TabOneNavigator()}
       </BottomTab.Screen>
       <BottomTab.Screen
         name="Web3"
@@ -82,7 +73,7 @@ function BottomTabNavigator(props: { navigation?: any; env?: any; setEnv?: any;
           tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
         }}
       >
-          {() => TabTwoNavigator(header, provider, magic)}
+          {() => TabTwoNavigator()}
       </BottomTab.Screen>
     </BottomTab.Navigator>
   );
@@ -98,29 +89,29 @@ function TabBarIcon(props: {
 // https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
 const TabOneStack = createNativeStackNavigator<TabOneParamList>();
 
-function TabOneNavigator(header: () => JSX.Element, magic: any, provider: any) {
+function TabOneNavigator() {
     return (
         <TabOneStack.Navigator>
             <TabOneStack.Screen
                 name="LoginScreen"
-                options={{ headerTitle: header }}
+                options={{ headerTitle: 'Login' }}
             >
-                {props => <LoginScreen {...props} magic={magic} provider={provider} />}
+                {() => <LoginScreen />}
             </TabOneStack.Screen>
         </TabOneStack.Navigator>
     );
 }
 
 const TabTwoStack = createNativeStackNavigator<TabTwoParamList>();
 
-function TabTwoNavigator(header: () => JSX.Element, provider: any, magic: any) {
+function TabTwoNavigator() {
     return (
         <TabTwoStack.Navigator>
             <TabTwoStack.Screen
                 name="CryptoScreen"
-                options={{ headerTitle: header }}
+                options={{ headerTitle: 'Crypto' }}
             >
-                {(props: any) => <CryptoScreen {...props} provider={provider} magic={magic}/>}
+                {() => <CryptoScreen />}
             </TabTwoStack.Screen>
         </TabTwoStack.Navigator>
     );

MagicBareRnExample/screens/CryptoScreen.tsx

@@ -5,23 +5,24 @@ import { styles } from './styles';
 import { Card } from 'react-native-paper';
 import { ethers } from 'ethers';
 import '../shim'; // Required for Bitcoin Blockchain interaction
+import { useMagic } from '../hooks/magic';
 
 // Type error: Incorrect prop types - should be more specific
-export default function CryptoScreen(props: { provider: any; magic: any }) {
+export default function CryptoScreen() {
   const [publicAddress, updatePublicAddress] = React.useState<string>('');
   const [toAddress, onChangeToAddress] = React.useState<string>('');
   const [transactionHash, updateTransactionHash] = React.useState('');
   const [ciphertexts, setCiphertexts] = React.useState('');
   const [chainId, onChangeChainId] = React.useState('137');
 
   // Type error: Destructuring with wrong types
-  const { provider, magic } = props;
+  const { provider, magic } = useMagic();
 
   React.useEffect(() => {
   }, []);
 
   /** GetAccount */
-  const getAccount = async (): Promise<number> => {
+  const getAccount = async (): Promise<string> => {
     try {
       const signer = await provider.getSigner();
       const account = await signer.getAddress();
@@ -30,7 +31,7 @@ export default function CryptoScreen(props: { provider: any; magic: any }) {
     } catch(e) {
       console.log(e);
       updatePublicAddress('');
-      return 0;
+      return '';
     }
   };