Fix: Connect wallet hook (#848)

* Export disconnect type

* Fix unsub and make wallet reactive

Author: lnbc1QWFyb24

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/index.ts

@@ -24,6 +24,7 @@ export type {
   InitOptions,
   OnboardAPI,
   ConnectOptions,
+  DisconnectOptions,
   WalletState,
   ConnectedChain
 } from './types'

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Collection of React Hooks for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -21,8 +21,8 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.0.0",
-    "@web3-onboard/core": "^2.0.0"
+    "@web3-onboard/common": "^2.0.1",
+    "@web3-onboard/core": "^2.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"

packages/react/src/index.ts

@@ -5,12 +5,12 @@ import type {
   InitOptions,
   OnboardAPI,
   ConnectOptions,
+  DisconnectOptions,
   WalletState,
   ConnectedChain
 } from '@web3-onboard/core'
 
 import { Chain } from '@web3-onboard/common'
-import { DisconnectOptions } from '@web3-onboard/core/dist/types'
 
 export let web3Onboard: OnboardAPI | null = null
 
@@ -29,27 +29,39 @@ export const useConnectWallet = (): [
   const [wallet, setConnectedWallet] = useState<WalletState | null>(null)
   const [connecting, setConnecting] = useState(false)
 
+  useEffect(() => {
+    const subscription = (web3Onboard as OnboardAPI).state
+      .select('wallets')
+      .subscribe(wallets => {
+        if (!wallet) return
+
+        const updatedWallet = wallets.find(
+          ({ label }) => label === wallet.label
+        )
+
+        updatedWallet && setConnectedWallet(updatedWallet)
+      })
+
+    return () => subscription.unsubscribe()
+  }, [wallet])
+
   const connect = useCallback(async (options: ConnectOptions) => {
     setConnecting(true)
 
-    const [lastConnectedWallet] = await (
-      web3Onboard as OnboardAPI
-    ).connectWallet(options)
+    const [connectedWallet] = await (web3Onboard as OnboardAPI).connectWallet(
+      options
+    )
 
     setConnecting(false)
-
-    if (lastConnectedWallet) {
-      setConnectedWallet(lastConnectedWallet)
-    }
+    setConnectedWallet(connectedWallet || null)
   }, [])
 
-  const disconnect = useCallback(async ({label}) => {
+  const disconnect = useCallback(async ({ label }) => {
     setConnecting(true)
 
-    await (web3Onboard as OnboardAPI).disconnectWallet({label})
+    await (web3Onboard as OnboardAPI).disconnectWallet({ label })
 
     setConnectedWallet(null)
-
     setConnecting(false)
   }, [])
 
@@ -83,14 +95,14 @@ export const useSetChain = (
   const chains = useMemo(() => state.get().chains, [])
 
   useEffect(() => {
-    const { unsubscribe } = state.select('wallets').subscribe(wallets => {
+    const subscription = state.select('wallets').subscribe(wallets => {
       const wallet =
         wallets.find(({ label }) => label === walletLabel) || wallets[0]
 
       wallet && setConnectedChain(wallet.chains[0])
     })
 
-    return unsubscribe
+    return () => subscription.unsubscribe()
   }, [])
 
   const set = useCallback(async (options: SetChainOptions) => {
@@ -111,9 +123,9 @@ export const useWallets = (): WalletState[] => {
 
   useEffect(() => {
     const wallets$ = (web3Onboard as OnboardAPI).state.select('wallets')
-    const { unsubscribe } = wallets$.subscribe(setConnectedWallets)
+    const subscription = wallets$.subscribe(setConnectedWallets)
 
-    return unsubscribe
+    return () => subscription.unsubscribe()
   }, [])
 
   return wallets