From 3b7bb1e1821984e6d912a92cef702d84e93b6b9f Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 1 Sep 2023 12:01:07 +0200
Subject: [PATCH 1/2] Update web3-react

---
 docs/dapps/dapp-recipes.md | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/docs/dapps/dapp-recipes.md b/docs/dapps/dapp-recipes.md
index cca4646d..936927b8 100644
--- a/docs/dapps/dapp-recipes.md
+++ b/docs/dapps/dapp-recipes.md
@@ -125,7 +125,15 @@ The `@alephium/web3-react` package provides several hooks to facilitate the deve
 ```typescript
 import { useWallet, Wallet } from '@alephium/web3-react'
 
-const wallet: Wallet | undefined = useWallet()
+function Component() {
+  const { account, connectionStatus } = useWallet()
+
+  if (connectionStatus === 'connecting') return <div>Connecting</div>
+  if (connectionStatus === 'disconnected') return <div>Connecting</div>
+
+  // connected
+  return <div>{account}</div>
+}
 ```
 
 If the return value is `undefined`, it indicates that the wallet is not connected. The returned wallet has the following fields:
@@ -188,17 +196,12 @@ const nodeProvider = new NodeProvider('node-url', undefined, retryFetch)
 you can also use the `AlephiumConnectButton.Custom` to customize the style of the connect button:
 
 ```typescript
-import { AlephiumConnectButton, useConnect } from '@alephium/web3'
+import { AlephiumConnectButton } from '@alephium/web3'
 
 function CustomWalletConnectButton = () => {
-  const { disconnect } = useConnect({
-    addressGroup: 0,
-    networkId: 'mainnet'
-  })
-
   return (
     <AlephiumConnectButton.Custom>
-      {({ isConnected, show, address }) => {
+      {({ isConnected, disconnect, show, address }) => {
         return isConnected ? (
           <button onClick={disconnect}>
             Disconnect

From 528c7aad28eac1f4c3c05bec7caa3644c5849b9e Mon Sep 17 00:00:00 2001
From: Cheng Wang <wachmc@gmail.com>
Date: Fri, 1 Sep 2023 12:55:53 +0200
Subject: [PATCH 2/2] Address comments

---
 docs/dapps/dapp-recipes.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/dapps/dapp-recipes.md b/docs/dapps/dapp-recipes.md
index 936927b8..8a45dde6 100644
--- a/docs/dapps/dapp-recipes.md
+++ b/docs/dapps/dapp-recipes.md
@@ -129,7 +129,7 @@ function Component() {
   const { account, connectionStatus } = useWallet()
 
   if (connectionStatus === 'connecting') return <div>Connecting</div>
-  if (connectionStatus === 'disconnected') return <div>Connecting</div>
+  if (connectionStatus === 'disconnected') return <div>Disconnected</div>
 
   // connected
   return <div>{account}</div>
@@ -201,7 +201,7 @@ import { AlephiumConnectButton } from '@alephium/web3'
 function CustomWalletConnectButton = () => {
   return (
     <AlephiumConnectButton.Custom>
-      {({ isConnected, disconnect, show, address }) => {
+      {({ isConnected, disconnect, show, account }) => {
         return isConnected ? (
           <button onClick={disconnect}>
             Disconnect