feat: auth wallet multi address (#93)

* feat: updates auth wallet to be multi address compatible

* chore: updates `auth` to v2.0.0

* chore: updates `react-dapp-auth` to auth latest

* chore: updates `vue-dapp-auth` to auth latest

dapps/react-dapp-auth/package.json

@@ -12,7 +12,7 @@
     "@chakra-ui/react": "^2.2.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@walletconnect/auth-client": "1.0.1",
+    "@walletconnect/auth-client": "^2.0.0",
     "better-sqlite3": "^7.6.2",
     "ethers": "^5.7.0",
     "events": "^3.3.0",

dapps/vue-dapp-auth/package.json

@@ -16,7 +16,7 @@
     "@nuxtjs/tailwindcss": "^6.1.3",
     "@pinia/nuxt": "^0.4.3",
     "@vueuse/nuxt": "^9.1.1",
-    "@walletconnect/auth-client": "1.0.1",
+    "@walletconnect/auth-client": "^2.0.0",
     "ethers": "^5.7.0",
     "nuxt-icon": "^0.1.7",
     "pinia": "^2.0.23",

wallets/react-wallet-auth/package.json

@@ -15,7 +15,7 @@
     "@nextui-org/react": "1.0.8-beta.5",
     "@polkadot/keyring": "^10.1.2",
     "@solana/web3.js": "1.43.0",
-    "@walletconnect/auth-client": "1.0.1",
+    "@walletconnect/auth-client": "^2.0.0",
     "@walletconnect/utils": "2.0.0",
     "bs58": "5.0.0",
     "cosmos-wallet": "1.2.0",

wallets/react-wallet-auth/src/hooks/useInitialization.ts

@@ -9,11 +9,8 @@ export default function useInitialization() {
   const onInitialize = useCallback(async () => {
     try {
       const { eip155Addresses } = createOrRestoreEIP155Wallet()
-
       SettingsStore.setEIP155Address(eip155Addresses[0])
-
+      await createAuthClient()
-      await createAuthClient(eip155Addresses[0])
-
       setInitialized(true)
     } catch (err: unknown) {
       alert(err)

wallets/react-wallet-auth/src/utils/WalletConnectUtil.ts

@@ -5,11 +5,10 @@ console.log(`AuthClient@${pkg.version}`)
 
 export let authClient: AuthClient
 
-export async function createAuthClient(address: string) {
+export async function createAuthClient() {
   authClient = await AuthClient.init({
     projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
     relayUrl: process.env.NEXT_PUBLIC_RELAY_URL || 'wss://relay.walletconnect.com',
-    iss: `did:pkh:eip155:1:${address}`,
     metadata: {
       name: 'React Wallet',
       description: 'React Wallet for WalletConnect',

wallets/react-wallet-auth/src/views/AuthenticationRequestModal.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
 import RequestModalContainer from '@/components/RequestModalContainer'
 import ModalStore from '@/store/ModalStore'
 import { Button, Col, Divider, Modal, Row, Text } from '@nextui-org/react'
@@ -7,29 +7,42 @@ import { authClient } from '@/utils/WalletConnectUtil'
 
 export default function AuthenticationRequestModal() {
   const authenticationRequest = ModalStore.state.data?.authenticationRequest
+  const { params, id } = authenticationRequest
+  const [message, setMessage] = useState<string>()
+  const [iss, setIss] = useState<string>()
+  const { eip155Wallets, eip155Addresses } = createOrRestoreEIP155Wallet()
+
+  useEffect(() => {
+    if (message) return
+    const address = eip155Addresses[0]
+    const iss = `did:pkh:eip155:1:${address}`
+    setMessage(authClient.formatMessage(authenticationRequest.params.cacaoPayload, iss))
+    setIss(iss)
+  }, [authenticationRequest.params.cacaoPayload, eip155Addresses, message])
+
+  const onApprove = useCallback(async () => {
+    if (authenticationRequest && iss && message) {
+      console.log({ eip155Wallets })
+
+      const signature = await eip155Wallets[eip155Addresses[0]].signMessage(message)
+      await authClient.respond(
+        {
+          id,
+          signature: {
+            s: signature,
+            t: 'eip191'
+          }
+        },
+        iss
+      )
+      ModalStore.close()
+    }
+  }, [authenticationRequest, eip155Addresses, eip155Wallets, id, iss, message])
 
   if (!authenticationRequest) {
     return <Text>Missing authentication request</Text>
   }
 
-  const { params, id } = authenticationRequest
-
-  async function onApprove() {
-    if (authenticationRequest) {
-      const { eip155Wallets, eip155Addresses } = createOrRestoreEIP155Wallet()
-      console.log({ eip155Wallets })
-      const signature = await eip155Wallets[eip155Addresses[0]].signMessage(params.message)
-      await authClient.respond({
-        id,
-        signature: {
-          s: signature,
-          t: 'eip191'
-        }
-      })
-      ModalStore.close()
-    }
-  }
-
   // Handle reject action
   async function onReject() {
     ModalStore.close()
@@ -42,7 +55,7 @@ export default function AuthenticationRequestModal() {
           <Col>
             <Text h5>Message</Text>
             <Text style={{ whiteSpace: 'pre-wrap' }} color="$gray400">
-              {params.message}
+              {message}
             </Text>
           </Col>
         </Row>