V2

demos/react-dapp/src/App.tsx

@@ -1,3 +1,6 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import Modal from './components/Modal'
+import V2App from './AppV2'
 import { Buffer } from 'buffer'
 import {
   AccountId,
@@ -46,19 +49,16 @@ import {
   extractFirstSignature,
 } from '../../../dist'
 
-import React, { useEffect, useMemo, useState } from 'react'
-import Modal from './components/Modal'
-
-// Fetch public keys from mirror node for each account
-const fetchPublicKey = async (accountId: string) => {
-  const response = await fetch(
-    `https://testnet.mirrornode.hedera.com/api/v1/accounts/${accountId}`,
-  )
-  const data = await response.json()
-  return data.key.key
-}
+const V1App: React.FC = () => {
+  // Fetch public keys from mirror node for each account
+  const fetchPublicKey = async (accountId: string) => {
+    const response = await fetch(
+      `https://testnet.mirrornode.hedera.com/api/v1/accounts/${accountId}`,
+    )
+    const data = await response.json()
+    return data.key.key
+  }
 
-const App: React.FC = () => {
   // Connector data states
   const [projectId, setProjectId] = useState('')
   const [name, setName] = useState('')
@@ -995,7 +995,7 @@ const App: React.FC = () => {
           </div>
         </section>
         <section>
-        <h2>Signature Verification Test</h2>
+          <h2>Signature Verification Test</h2>
           <div>
             <button
               onClick={() => {
@@ -1115,6 +1115,24 @@ const App: React.FC = () => {
   )
 }
 
+const App: React.FC = () => {
+  const [version, setVersion] = useState<'v1' | 'v2'>('v1')
+
+  return (
+    <div className="app-container">
+      <div className="version-selector">
+        <button className={version === 'v1' ? 'active' : ''} onClick={() => setVersion('v1')}>
+          Version 1
+        </button>
+        <button className={version === 'v2' ? 'active' : ''} onClick={() => setVersion('v2')}>
+          Version 2
+        </button>
+      </div>
+      {version === 'v1' ? <V1App /> : <V2App />}
+    </div>
+  )
+}
+
 export default App
 
 interface AccountSelectorProps {

demos/react-dapp/src/AppV2.tsx

@@ -0,0 +1,90 @@
+import { AppKit, createAppKit } from '@reown/appkit'
+import { HederaAdapter } from '../../../src/reown'
+import { LedgerId } from '@hashgraph/sdk'
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import { hedera, hederaTestnet } from '@reown/appkit/networks'
+import { AccountController } from '@reown/appkit'
+
+const projectId = process.env.PROJECT_ID || 'bfd9ad3ea26e2c73eb21e8f9c750c166'
+
+const metadata = {
+  name: 'Reown Hedera Demo',
+  description: 'Reown Hedera WalletConnect Demo',
+  url: 'https://reown.xyz',
+  icons: ['https://reown.xyz/logo.png'],
+}
+
+const AppKitContext = createContext<AppKit | undefined>(undefined)
+
+export default function V2App() {
+  const [appKit, setAppKit] = useState<AppKit>()
+  const [account, setAccount] = useState<string | null>(null)
+
+  useEffect(() => {
+    const adapter = new HederaAdapter({
+      projectId,
+      chainId: LedgerId.TESTNET,
+      metadata,
+      networks: [hederaTestnet],
+      defaultNetwork: hederaTestnet,
+    })
+
+    const kit = createAppKit({
+      projectId,
+      networks: [hederaTestnet],
+      metadata,
+      adapters: [adapter],
+      showWallets: true,
+      features: {
+        swaps: false,
+        history: false,
+        email: false,
+        socials: false,
+        allWallets: false,
+      },
+    })
+
+    adapter.syncConnectors(
+      {
+        projectId,
+        metadata,
+        networks: [hederaTestnet],
+      },
+      kit,
+    )
+
+    AccountController.subscribeKey('address', (address: string | undefined) => {
+      if (address) {
+        setAccount(address)
+      }
+    })
+
+    setAppKit(kit)
+
+    return () => {
+      kit.disconnect().catch(console.error)
+    }
+  }, [])
+
+  if (!appKit) {
+    return <div>Loading AppKit...</div>
+  }
+
+  return (
+    <AppKitContext.Provider value={appKit}>
+      <div className="container">
+        <h2>Hedera WalletConnect V2 Demo</h2>
+        <div className="content">
+          {account ? (
+            <>
+              <p>Connected Account: {account}</p>
+              <button onClick={() => appKit.disconnect()}>Disconnect</button>
+            </>
+          ) : (
+            <button onClick={() => appKit.open()}>Connect Wallet</button>
+          )}
+        </div>
+      </div>
+    </AppKitContext.Provider>
+  )
+}