From dd18cef0bbaff1f5a9262e15e59ec1de7061f959 Mon Sep 17 00:00:00 2001
From: nacho <25931366+ignaciosantise@users.noreply.github.com>
Date: Tue, 20 May 2025 15:46:48 -0300
Subject: [PATCH] chore: improved hooks code, fixed mixed docs with web

---
 appkit/react-native/core/hooks.mdx            | 263 ++++++++++++++----
 snippets/appkit/react-native/ethers/hooks.mdx |  29 +-
 .../appkit/react-native/ethers5/hooks.mdx     |  27 +-
 snippets/appkit/react-native/wagmi/hooks.mdx  |  14 -
 4 files changed, 234 insertions(+), 99 deletions(-)

diff --git a/appkit/react-native/core/hooks.mdx b/appkit/react-native/core/hooks.mdx
index 709edc934..3f86bcafe 100644
--- a/appkit/react-native/core/hooks.mdx
+++ b/appkit/react-native/core/hooks.mdx
@@ -8,53 +8,68 @@ import Ethers5Hooks from "/snippets/appkit/react-native/ethers5/hooks.mdx";
 
 ## useAppKit
 
-Control the modal with the `useAppKit` hook
+The `useAppKit` hook provides functions to control the modal's visibility. You can use it to programmatically open or close the modal.
 
 <Tabs>
 
 <Tab title="Wagmi">
 ```ts
 import { useAppKit } from '@reown/appkit-wagmi-react-native'
+import { Button } from 'react-native';
 
 export default function Component() {
   const { open, close } = useAppKit()
 
-open()
-
-//...
+  return (
+    <>
+      <Button title="Open Modal" onPress={() => open()} />
+      <Button title="Open Account View" onPress={() => open({ view: 'Account' })} />
+      <Button title="Close Modal" onPress={() => close()} />
+    </>
+  );
 }
 
-````
+```
 </Tab>
 
 <Tab title="Ethers">
 ```ts
 import { useAppKit } from '@reown/appkit-ethers-react-native'
+import { Button } from 'react-native';
 
 export default function Component() {
   const { open, close } = useAppKit()
 
-  open()
-
-  //...
+  return (
+    <>
+      <Button title="Open Modal" onPress={() => open()} />
+      <Button title="Open Account View" onPress={() => open({ view: 'Account' })} />
+      <Button title="Close Modal" onPress={() => close()} />
+    </>
+  );
 }
-````
 
+```
 </Tab>
 
 <Tab title="Ethers v5">
 ```ts
 import { useAppKit } from '@reown/appkit-ethers5-react-native'
+import { Button } from 'react-native';
 
 export default function Component() {
   const { open, close } = useAppKit()
 
-open()
-
-//...
+  return (
+    <>
+      <Button title="Open Modal" onPress={() => open()} />
+      <Button title="Open Account View" onPress={() => open({ view: 'Account' })} />
+      <Button title="Close Modal" onPress={() => close()} />
+    </>
+  );
 }
 
-````
+```
 </Tab>
 
 </Tabs>
@@ -63,25 +78,13 @@ You can also select the modal's view when calling the `open` function
 
 ```ts
 open({ view: 'Account' })
-
-// to connect and show multi wallets view
-open({ view: 'Connect'})
-
-// to connect and show only solana wallets
-open({ view: 'Connect', namespace: 'solana' })
-
-// to connect and show only bitcoin wallets
-open({ view: 'Connect', namespace: 'bip122' })
-
-// to connect and show only ethereum wallets
-open({ view: 'Connect', namespace: 'eip155' })
 ````
 
 List of views you can select
 
 | Variable         | Description                                                                                                                                              |
 | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Connect`        | Principal view of the modal - default view when disconnected. A `namespace` can be selected to connect to a specific network (solana, bip122 or eip155). |
+| `Connect`        | Principal view of the modal - default view when disconnected.
 | `Account`        | User profile - default view when connected.                                                                                                              |
 | `Networks`       | List of available networks - you can select and target a specific network before connecting.                                                             |
 | `WhatIsANetwork` | "What is a network" onboarding view.                                                                                                                     |
@@ -96,17 +99,36 @@ Get the current value of the modal's state
 <Tab title="Wagmi">
 ```ts
 import { useAppKitState } from '@reown/appkit-wagmi-react-native'
+import { Text, View } from 'react-native';
 
-const { open, selectedNetworkId } = useAppKitState()
-
-````
+export default function Component() {
+  const { open, selectedNetworkId } = useAppKitState();
+
+  return (
+    <View>
+      <Text>Modal Open: {String(open)}</Text>
+      <Text>Selected Network ID: {selectedNetworkId}</Text>
+    </View>
+  );
+}
+```
 </Tab>
 
 <Tab title="Ethers">
 ```ts
 import { useAppKitState } from '@reown/appkit-ethers-react-native'
+import { Text, View } from 'react-native';
 
-const { open, selectedNetworkId } = useAppKitState()
+export default function Component() {
+  const { open, selectedNetworkId } = useAppKitState();
+
+  return (
+    <View>
+      <Text>Modal Open: {String(open)}</Text>
+      <Text>Selected Network ID: {selectedNetworkId}</Text>
+    </View>
+  );
+}
 ```
 
 </Tab>
@@ -114,8 +136,18 @@ const { open, selectedNetworkId } = useAppKitState()
 <Tab title="Ethers v5">
 ```ts
 import { useAppKitState } from '@reown/appkit-ethers5-react-native'
+import { Text, View } from 'react-native';
 
-const { open, selectedNetworkId } = useAppKitState()
+export default function Component() {
+  const { open, selectedNetworkId } = useAppKitState();
+
+  return (
+    <View>
+      <Text>Modal Open: {String(open)}</Text>
+      <Text>Selected Network ID: {selectedNetworkId}</Text>
+    </View>
+  );
+}
 ```
 </Tab>
 
@@ -137,10 +169,25 @@ Get the last tracked modal event. The hook accepts an optional callback function
 <Tab title="Wagmi">
 ```ts
 import { useAppKitEvents } from '@reown/appkit-wagmi-react-native'
+import { useEffect } from 'react';
 
-const event = useAppKitEvents(event => {
-  // your code here
-})
+export default function Component() {
+  const event = useAppKitEvents(newEvent => {
+    console.log('New AppKit Event:', newEvent);
+    // Example: Handle a specific event type
+    if (newEvent?.type === 'MODAL_CLOSED') {
+      // Do something when the modal is closed
+    }
+  });
+
+  useEffect(() => {
+    if (event) {
+      console.log('Last AppKit Event:', event);
+    }
+  }, [event]);
+
+  return null; // Or your component JSX
+}
 ```
 
 </Tab>
@@ -148,10 +195,25 @@ const event = useAppKitEvents(event => {
 <Tab title="Ethers">
 ```ts
 import { useAppKitEvents } from '@reown/appkit-ethers-react-native'
+import { useEffect } from 'react';
 
-const event = useAppKitEvents(event => {
-  // your code here
-})
+export default function Component() {
+  const event = useAppKitEvents(newEvent => {
+    console.log('New AppKit Event:', newEvent);
+    // Example: Handle a specific event type
+    if (newEvent?.type === 'MODAL_CLOSED') {
+      // Do something when the modal is closed
+    }
+  });
+
+  useEffect(() => {
+    if (event) {
+      console.log('Last AppKit Event:', event);
+    }
+  }, [event]);
+
+  return null; // Or your component JSX
+}
 ```
 
 </Tab>
@@ -159,10 +221,25 @@ const event = useAppKitEvents(event => {
 <Tab title="Ethers v5">
 ```ts
 import { useAppKitEvents } from '@reown/appkit-ethers5-react-native'
+import { useEffect } from 'react';
 
-const event = useAppKitEvents(event => {
-  // your code here
-})
+export default function Component() {
+  const event = useAppKitEvents(newEvent => {
+    console.log('New AppKit Event:', newEvent);
+    // Example: Handle a specific event type
+    if (newEvent?.type === 'MODAL_CLOSED') {
+      // Do something when the modal is closed
+    }
+  });
+
+  useEffect(() => {
+    if (event) {
+      console.log('Last AppKit Event:', event);
+    }
+  }, [event]);
+
+  return null; // Or your component JSX
+}
 ```
 
 </Tab>
@@ -178,10 +255,21 @@ Subscribe to modal specific events
 <Tab title="Wagmi">
 ```ts
 import { useAppKitEventSubscription } from '@reown/appkit-wagmi-react-native'
+import { useEffect } from 'react';
 
-useAppKitEventSubscription('MODAL_OPEN', newEvent => {
-  // your code here
-});
+export default function Component() {
+  useAppKitEventSubscription('MODAL_OPEN', newEvent => {
+    console.log('Modal Opened Event:', newEvent);
+    // Perform actions when the modal opens
+  });
+
+  useAppKitEventSubscription('MODAL_CLOSED', newEvent => {
+    console.log('Modal Closed Event:', newEvent);
+    // Perform actions when the modal closes
+  });
+  
+  return null; // Or your component JSX
+}
 ```
 
 </Tab>
@@ -189,20 +277,42 @@ useAppKitEventSubscription('MODAL_OPEN', newEvent => {
 <Tab title="Ethers">
 ```ts
 import { useAppKitEventSubscription } from '@reown/appkit-ethers-react-native'
+import { useEffect } from 'react';
+
+export default function Component() {
+  useAppKitEventSubscription('MODAL_OPEN', newEvent => {
+    console.log('Modal Opened Event:', newEvent);
+    // Perform actions when the modal opens
+  });
+
+  useAppKitEventSubscription('MODAL_CLOSED', newEvent => {
+    console.log('Modal Closed Event:', newEvent);
+    // Perform actions when the modal closes
+  });
 
-useAppKitEventSubscription('MODAL_OPEN', newEvent => {
-  // your code here
-});
+  return null; // Or your component JSX
+}
 ```
 </Tab>
 
 <Tab title="Ethers v5">
 ```ts
 import { useAppKitEventSubscription } from '@reown/appkit-ethers5-react-native'
+import { useEffect } from 'react';
+
+export default function Component() {
+  useAppKitEventSubscription('MODAL_OPEN', newEvent => {
+    console.log('Modal Opened Event:', newEvent);
+    // Perform actions when the modal opens
+  });
 
-useAppKitEventSubscription('MODAL_OPEN', newEvent => {
-  // your code here
-});
+  useAppKitEventSubscription('MODAL_CLOSED', newEvent => {
+    console.log('Modal Closed Event:', newEvent);
+    // Perform actions when the modal closes
+  });
+
+  return null; // Or your component JSX
+}
 ```
 
 </Tab>
@@ -218,27 +328,68 @@ Get the metadata information from the connected wallet
 <Tab title="Wagmi">
 ```ts
 import { useWalletInfo } from '@reown/appkit-wagmi-react-native'
+import { Text, View } from 'react-native';
 
-const { walletInfo } = useWalletInfo()
-````
+export default function Component() {
+  const { walletInfo } = useWalletInfo();
+
+  if (!walletInfo) {
+    return <Text>No wallet connected or info unavailable.</Text>;
+  }
+
+  return (
+    <View>
+      <Text>Wallet Name: {walletInfo.name}</Text>
+      <Text>Wallet Icon: {walletInfo.icon}</Text> 
+    </View>
+  );
+}
+```
 
 </Tab>
 
 <Tab title="Ethers">
 ```ts
 import { useWalletInfo } from '@reown/appkit-ethers-react-native'
+import { Text, View } from 'react-native';
 
-const { walletInfo } = useWalletInfo()
-
-````
+export default function Component() {
+  const { walletInfo } = useWalletInfo();
+
+  if (!walletInfo) {
+    return <Text>No wallet connected or info unavailable.</Text>;
+  }
+
+  return (
+    <View>
+      <Text>Wallet Name: {walletInfo.name}</Text>
+      <Text>Wallet Icon: {walletInfo.icon}</Text>
+    </View>
+  );
+}
+```
 </Tab>
 
 <Tab title="Ethers v5">
 ```ts
 import { useWalletInfo } from '@reown/appkit-ethers5-react-native'
+import { Text, View } from 'react-native';
 
-const { walletInfo } = useWalletInfo()
-````
+export default function Component() {
+  const { walletInfo } = useWalletInfo();
+
+  if (!walletInfo) {
+    return <Text>No wallet connected or info unavailable.</Text>;
+  }
+
+  return (
+    <View>
+      <Text>Wallet Name: {walletInfo.name}</Text>
+      <Text>Wallet Icon: {walletInfo.icon}</Text>
+    </View>
+  );
+}
+```
 
 </Tab>
 
diff --git a/snippets/appkit/react-native/ethers/hooks.mdx b/snippets/appkit/react-native/ethers/hooks.mdx
index 977055981..6ca511938 100644
--- a/snippets/appkit/react-native/ethers/hooks.mdx
+++ b/snippets/appkit/react-native/ethers/hooks.mdx
@@ -3,12 +3,23 @@
 Hook that returns the client's information.
 
 ```tsx
-import { useAppKitAccount } from "@reown/appkit-ethers-react-native";
+import { useAppKitAccount } from '@reown/appkit-ethers-react-native';
+import { Text, View } from 'react-native';
 
-function Components() {
+export default function AccountInfoEthers() {
   const { address, chainId, isConnected } = useAppKitAccount();
 
-  //...
+  if (!isConnected) {
+    return <Text>Disconnected. Please connect your wallet.</Text>;
+  }
+
+  return (
+    <View>
+      <Text>Connected Account (Ethers):</Text>
+      <Text>Address: {address}</Text>
+      <Text>Chain ID: {chainId}</Text>
+    </View>
+  );
 }
 ```
 
@@ -35,18 +46,6 @@ function Components() {
 }
 ```
 
-#### useAppKitError
-
-```ts
-import { useAppKitError } from "@reown/appkit-ethers-react-native";
-
-function Components() {
-  const { error } = useAppKitError();
-
-  //...
-}
-```
-
 <Card
   title="Learn More About Ethers"
   href="https://docs.ethers.org/v6/getting-started/#getting-started--contracts"
diff --git a/snippets/appkit/react-native/ethers5/hooks.mdx b/snippets/appkit/react-native/ethers5/hooks.mdx
index 8adcc5132..eaa4dfe4e 100644
--- a/snippets/appkit/react-native/ethers5/hooks.mdx
+++ b/snippets/appkit/react-native/ethers5/hooks.mdx
@@ -4,11 +4,22 @@ Hook that returns the client's information.
 
 ```tsx
 import { useAppKitAccount } from "@reown/appkit-ethers5-react-native";
+import { Text, View } from 'react-native';
 
-function Components() {
+export default function AccountInfoEthers5() {
   const { address, chainId, isConnected } = useAppKitAccount();
 
-  //...
+  if (!isConnected) {
+    return <Text>Disconnected. Please connect your wallet.</Text>;
+  }
+
+  return (
+    <View>
+      <Text>Connected Account (Ethers v5):</Text>
+      <Text>Address: {address}</Text>
+      <Text>Chain ID: {chainId}</Text>
+    </View>
+  );
 }
 ```
 
@@ -34,18 +45,6 @@ function Components() {
 }
 ```
 
-#### useAppKitError
-
-```ts
-import { useAppKitError } from "@reown/appkit-ethers5-react-native";
-
-function Components() {
-  const { error } = useAppKitError();
-
-  //...
-}
-```
-
 <Card
   title="Learn More About Ethers v5"
   href="https://docs.ethers.org/v5/getting-started/#getting-started--contracts"
diff --git a/snippets/appkit/react-native/wagmi/hooks.mdx b/snippets/appkit/react-native/wagmi/hooks.mdx
index 33343009e..194766377 100644
--- a/snippets/appkit/react-native/wagmi/hooks.mdx
+++ b/snippets/appkit/react-native/wagmi/hooks.mdx
@@ -1,17 +1,3 @@
-### useAppKitAccount
-
-Hook that returns the client's information.
-
-```tsx
-import { useAppKitAccount } from "@reown/appkit/react";
-
-function Components() {
-  const { address, caipAddress, isConnected } = useAppKitAccount();
-
-  //...
-}
-```
-
 #### useSignMessage
 
 Hook for signing messages with connected account.