feat: useDisconnect hook (#3121)

.changeset/tall-zebras-protect.md

@@ -0,0 +1,23 @@
+---
+'@apps/laboratory': patch
+'@reown/appkit-core': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+Added `useDisconnect` hook to `@reown/appkit/react` and `@reown/appkit/vue`.

apps/laboratory/src/components/AppKitButtons.tsx

@@ -1,4 +1,4 @@
-import { useAppKit } from '@reown/appkit/react'
+import { useAppKit, useDisconnect, useAppKitAccount } from '@reown/appkit/react'
 import {
   Stack,
   Card,
@@ -12,6 +12,8 @@ import {
 
 export function AppKitButtons() {
   const { open } = useAppKit()
+  const { caipAddress } = useAppKitAccount()
+  const { disconnect } = useDisconnect()
 
   return (
     <Card marginTop={10}>
@@ -37,9 +39,17 @@ export function AppKitButtons() {
             <Heading size="xs" textTransform="uppercase" pb="2">
               Hooks Interactions
             </Heading>
-            <Button data-testid="w3m-open-hook-button" onClick={() => open()}>
-              Open
-            </Button>
+            <Box display="flex" alignItems="center" columnGap={3}>
+              <Button data-testid="w3m-open-hook-button" onClick={() => open()}>
+                Open
+              </Button>
+
+              {caipAddress && (
+                <Button data-testid="disconnect-hook-button" onClick={() => disconnect()}>
+                  Disconnect
+                </Button>
+              )}
+            </Box>
           </Box>
         </Stack>
       </CardBody>

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -447,6 +447,12 @@ export class ModalPage {
     await tabWebApp.click()
   }
 
+  async clickHookDisconnectButton() {
+    const disconnectHookButton = this.page.getByTestId('disconnect-hook-button')
+    await expect(disconnectHookButton).toBeVisible()
+    await disconnectHookButton.click()
+  }
+
   async clickCopyLink() {
     const copyLink = this.page.getByTestId('wui-link-copy')
     await expect(copyLink).toBeVisible()

apps/laboratory/tests/wallet.spec.ts

@@ -172,7 +172,19 @@ sampleWalletTest(
     await modalPage.closeModal()
   }
 )
+
+sampleWalletTest('it should connect and disconnect using hook', async () => {
+  await walletPage.disconnectConnection()
+  await modalValidator.expectDisconnected()
+  await modalPage.qrCodeFlow(modalPage, walletPage)
+  await modalValidator.expectConnected()
+  await modalPage.clickHookDisconnectButton()
+  await modalValidator.expectDisconnected()
+})
+
 sampleWalletTest('it should disconnect and close modal when connecting from wallet', async () => {
+  await modalPage.qrCodeFlow(modalPage, walletPage)
+  await modalValidator.expectConnected()
   await modalPage.openModal()
   await walletPage.disconnectConnection()
   await walletValidator.expectSessionCard({ visible: false })

packages/core/exports/react.ts

@@ -3,6 +3,7 @@ import { AccountController } from '../src/controllers/AccountController.js'
 import { CoreHelperUtil } from '../src/utils/CoreHelperUtil.js'
 import { ChainController } from '../src/controllers/ChainController.js'
 import type { CaipNetwork, CaipNetworkId } from '@reown/appkit-common'
+import { ConnectionController } from '../src/controllers/ConnectionController.js'
 
 // -- Hooks ------------------------------------------------------------
 export function useAppKitNetwork(): {
@@ -30,3 +31,11 @@ export function useAppKitAccount() {
     status
   }
 }
+
+export function useDisconnect() {
+  async function disconnect() {
+    await ConnectionController.disconnect()
+  }
+
+  return { disconnect }
+}

packages/core/exports/vue.ts

@@ -4,6 +4,7 @@ import { ChainController } from '../src/controllers/ChainController.js'
 import type { CaipNetwork, CaipNetworkId } from '@reown/appkit-common'
 import { ref } from 'valtio/vanilla'
 import { onUnmounted } from 'vue'
+import { ConnectionController } from '../src/controllers/ConnectionController.js'
 
 // -- Hooks ------------------------------------------------------------
 export function useAppKitNetwork(): {
@@ -56,3 +57,11 @@ export function useAppKitAccount() {
     status: state.status
   }
 }
+
+export function useDisconnect() {
+  async function disconnect() {
+    await ConnectionController.disconnect()
+  }
+
+  return { disconnect }
+}