Merge pull request #592 from reown-com/devin/1753723203-appkit-v1-7-17-docs-update

docs: Update documentation for AppKit v1.7.17 features

Author: rohit-710

appkit/javascript/core/actions.mdx

@@ -347,6 +347,41 @@ Change the string parameter `name` from `appKitWalletButton.connect(name)` in or
 | `solana`  | Solana blockchain                     |
 | `bip122`  | Bitcoin blockchain                    |
 
+#### Enhanced Multichain Examples
+
+The wallet button now supports enhanced multichain functionality with improved namespace targeting:
+
+```javascript
+<script type="module">
+  import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
+  
+  const wallets = [
+    { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
+    { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
+    { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
+  ];
+
+  wallets.forEach(({ wallet, namespace, label }) => {
+    const walletButton = createAppKitWalletButton({ namespace });
+    
+    walletButton.subscribeIsReady(({ isReady }) => {
+      if (!isReady) return;
+
+      const button = document.querySelector(`[data-wallet="${wallet}-${namespace}"]`);
+      if (button) {
+        button.disabled = false;
+        button.textContent = `Connect ${label}`;
+        button.onclick = () => walletButton.connect(wallet);
+      }
+    });
+  });
+</script>
+
+<button data-wallet="metamask-eip155" disabled>Loading...</button>
+<button data-wallet="metamask-solana" disabled>Loading...</button>
+<button data-wallet="phantom-bip122" disabled>Loading...</button>
+```
+
 
 ## themeVariables
 

appkit/next/core/components.mdx

@@ -67,6 +67,32 @@ You can specify a blockchain namespace to target specific chains:
 <appkit-wallet-button wallet="leather" namespace="bip122" />
 ```
 
+#### Enhanced Multichain Examples
+
+The wallet button now supports enhanced multichain functionality with improved namespace targeting:
+
+```tsx
+const wallets = [
+  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
+  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
+  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
+]
+
+export function WalletButtons() {
+  return (
+    <>
+      {wallets.map(({ wallet, namespace, label }) => (
+        <appkit-wallet-button
+          key={`${wallet}-${namespace}`}
+          wallet={wallet}
+          namespace={namespace}
+        />
+      ))}
+    </>
+  )
+}
+```
+
 #### Options for wallet property
 
 | Type          | Options                                                                                                                                                                                                                                                                                                                                                                       |

appkit/react/core/components.mdx

@@ -9,6 +9,41 @@ import Components from "/snippets/appkit/shared/components.mdx";
 
 <Components />
 
+## React Components
+
+AppKit provides React-specific components that integrate seamlessly with your React application. These components automatically reflect the AppKit state and provide a more React-native experience.
+
+### `<AppKitButton />` and `<AppKitNetworkButton />`
+
+These React components provide the same functionality as the web components but with better React integration and TypeScript support.
+
+```jsx
+import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'
+
+export function AppKitButtons() {
+  return (
+    <div>
+      {/* Default button */}
+      <AppKitButton />
+      
+      {/* Network selection button */}
+      <AppKitNetworkButton />
+      
+      {/* Button with specific namespace */}
+      <AppKitButton namespace="eip155" />
+    </div>
+  )
+}
+```
+
+#### Props
+
+Both components accept the following optional props:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `namespace` | `string` | Specify the blockchain namespace (`eip155`, `solana`, `bip122`) |
+
 ### `<appkit-wallet-button  />`
 
 <Frame>
@@ -68,6 +103,34 @@ You can specify a blockchain namespace to target specific chains:
 <appkit-wallet-button wallet="leather" namespace="bip122" />
 ```
 
+#### React Hook Integration
+
+You can also use the `useAppKitWallet` hook for programmatic wallet connections with multichain support:
+
+```tsx
+import { useAppKitWallet } from '@reown/appkit-wallet-button/react'
+
+export function WalletConnector() {
+  const { data, error, isPending, isSuccess, isError, connect } = useAppKitWallet({
+    namespace: 'eip155', // Use 'solana' or 'bip122' for other chains
+    onError: err => {
+      console.error('Connection error:', err)
+    },
+    onSuccess: data => {
+      console.log('Connected successfully:', data)
+    }
+  })
+
+  return (
+    <>
+      <button onClick={() => connect('walletConnect')}>Open QR modal</button>
+      <button onClick={() => connect('metamask')}>Connect to MetaMask</button>
+      <button onClick={() => connect('google')}>Connect to Google</button>
+    </>
+  )
+}
+```
+
 #### Options for wallet property
 
 | Type          | Options                                                                                                                                                                                                                                                                                                    |

appkit/react/core/hooks.mdx

@@ -260,6 +260,49 @@ AppKit supports the [top 32 wallets](https://github.com/reown-com/appkit/blob/ma
 | Social logins | google, github, apple, facebook, x, discord and farcaster                                                                                                                                                                                                                                                  |
 | Email         | email                                                                                                                                                                                                                                                                                                      |
 
+#### Enhanced Multichain Examples
+
+The `useAppKitWallet` hook now supports enhanced multichain functionality with the namespace prop:
+
+```tsx
+import { useAppKitWallet } from '@reown/appkit-wallet-button/react'
+
+// Multiple wallet connections for different chains
+export function MultichainWalletConnector() {
+  // Ethereum/EVM connection
+  const { connect: connectEVM } = useAppKitWallet({
+    namespace: 'eip155',
+    onSuccess: (address) => console.log('Connected to EVM:', address)
+  })
+
+  // Solana connection
+  const { connect: connectSolana } = useAppKitWallet({
+    namespace: 'solana',
+    onSuccess: (address) => console.log('Connected to Solana:', address)
+  })
+
+  // Bitcoin connection
+  const { connect: connectBitcoin } = useAppKitWallet({
+    namespace: 'bip122',
+    onSuccess: (address) => console.log('Connected to Bitcoin:', address)
+  })
+
+  return (
+    <div>
+      <button onClick={() => connectEVM('metamask')}>
+        Connect MetaMask (EVM)
+      </button>
+      <button onClick={() => connectSolana('phantom')}>
+        Connect Phantom (Solana)
+      </button>
+      <button onClick={() => connectBitcoin('leather')}>
+        Connect Leather (Bitcoin)
+      </button>
+    </div>
+  )
+}
+```
+
 #### Use Cases
 
 `useAppKitWallet` enables:
@@ -291,24 +334,38 @@ AppKit supports the [top 32 wallets](https://github.com/reown-com/appkit/blob/ma
 
 #### Multichain Examples
 
+#### Integration with React Components
+
+The `useAppKitWallet` hook works seamlessly with the new React components:
+
 ```tsx
-// Connect to Ethereum/EVM chains
-const { connect: connectEVM } = useAppKitWallet({
-  namespace: 'eip155',
-  onSuccess: (address) => console.log('Connected to EVM:', address)
-})
-
-// Connect to Solana
-const { connect: connectSolana } = useAppKitWallet({
-  namespace: 'solana',
-  onSuccess: (address) => console.log('Connected to Solana:', address)
-})
-
-// Connect to Bitcoin
-const { connect: connectBitcoin } = useAppKitWallet({
-  namespace: 'bip122',
-  onSuccess: (address) => console.log('Connected to Bitcoin:', address)
-})
+import { useAppKitWallet } from '@reown/appkit-wallet-button/react'
+import { AppKitButton, AppKitNetworkButton } from '@reown/appkit/react'
+
+export function WalletInterface() {
+  const { isReady, isPending, connect } = useAppKitWallet({
+    namespace: 'eip155',
+    onSuccess: (data) => {
+      console.log('Wallet connected:', data)
+    }
+  })
+
+  return (
+    <div>
+      {/* React components for UI */}
+      <AppKitButton />
+      <AppKitNetworkButton />
+      
+      {/* Programmatic wallet connections */}
+      <button 
+        onClick={() => connect('metamask')}
+        disabled={!isReady || isPending}
+      >
+        {isPending ? 'Connecting...' : 'Connect MetaMask'}
+      </button>
+    </div>
+  )
+}
 
 // Usage
 <Button onClick={() => connectEVM("metamask")}>Connect MetaMask (EVM)</Button>

appkit/react/core/installation.mdx

@@ -193,6 +193,29 @@ Create a new project on Reown Dashboard at https://dashboard.reown.com and obtai
 
 ## Implementation
 
+### AppKitProvider Component
+
+AppKit now provides an `AppKitProvider` React component for easy integration in React applications. This component wraps your app and provides the AppKit context to all child components.
+
+```tsx
+import { AppKitProvider } from '@reown/appkit/react'
+
+function App() {
+  return (
+    <AppKitProvider
+      projectId="YOUR_PROJECT_ID"
+      networks={[
+        /* Your Networks */
+      ]}
+    >
+      {/* Your App */}
+    </AppKitProvider>
+  )
+}
+```
+
+### Framework-Specific Implementation
+
 <Tabs>
 <Tab title="Wagmi">
 <Card title="wagmi Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/react/react-wagmi">

appkit/vue/core/wallet-buttons.mdx

@@ -81,3 +81,45 @@ onMounted(() => {
 | `eip155`  | Ethereum and EVM-compatible chains    |
 | `solana`  | Solana blockchain                     |
 | `bip122`  | Bitcoin blockchain                    |
+
+#### Enhanced Multichain Examples
+
+The wallet button now supports enhanced multichain functionality with improved namespace targeting:
+
+```javascript
+<template>
+  <div>
+    <button 
+      v-for="wallet in wallets" 
+      :key="`${wallet.wallet}-${wallet.namespace}`"
+      @click="() => connectWallet(wallet.wallet, wallet.namespace)" 
+      :disabled="!isReady"
+    >
+      {{ wallet.label }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { createAppKitWalletButton } from '@reown/appkit-wallet-button'
+
+const wallets = [
+  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
+  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
+  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
+]
+
+const appKitWalletButton = createAppKitWalletButton()
+const isReady = ref(false)
+
+const connectWallet = (wallet, namespace) => {
+  const walletButton = createAppKitWalletButton({ namespace })
+  walletButton.connect(wallet)
+}
+
+onMounted(() => {
+  isReady.value = appKitWalletButton.isReady()
+})
+</script>
+```