Feat/verify integration (#161)

* Added verify status to auth req modal

* updated deps

* updated types deps

* updated wc deps

* updated auth client in wallet to canary for testing

* updated auth client in dapp to canary for testing

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

@@ -8,13 +8,13 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
    *****************************************************************************/
   useEffect(() => {
     if (initialized) {
-      // Auth client events
+      authClient.on('auth_request', ({ id, params, verifyContext }) => {
-      authClient.on('auth_request', ({ id, params }) => {
+        console.log('auth_request', { id, params, verifyContext })
-        console.log('auth_request', { id, params })
         ModalStore.open('AuthenticationRequest', {
           authenticationRequest: {
             id,
-            params
+            params,
+            verifyContext
           }
         })
       })

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

@@ -1,5 +1,6 @@
 import AuthClient from '@walletconnect/auth-client'
 import pkg from '@walletconnect/auth-client/package.json'
+import { Verify } from '@walletconnect/types'
 import { Core } from '@walletconnect/core'
 import { WalletClient } from '@walletconnect/push-client'
 
@@ -57,3 +58,17 @@ export const getAndFormatNotifications = () => {
 
   return allMessagesWithSubscription
 }
+
+export function getVerifyStatus(context?: Verify.Context) {
+  if (!context) return ''
+  switch (context.verified.validation) {
+    case 'VALID':
+      return '✅'
+    case 'INVALID':
+      return '❌'
+    case 'UNKNOWN':
+      return '❓'
+    default:
+      return ''
+  }
+}

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

@@ -4,10 +4,11 @@ import ModalStore from '@/store/ModalStore'
 import { Button, Col, Modal, Row, Text } from '@nextui-org/react'
 import { createOrRestoreEIP155Wallet } from '@/utils/EIP155WalletUtil'
 import { authClient } from '@/utils/WalletConnectUtil'
+import { getVerifyStatus } from '@/utils/WalletConnectUtil'
 
 export default function AuthenticationRequestModal() {
   const authenticationRequest = ModalStore.state.data?.authenticationRequest
-  const { params, id } = authenticationRequest
+  const { params, id, verifyContext } = authenticationRequest
   const [message, setMessage] = useState<string>()
   const [iss, setIss] = useState<string>()
   const { eip155Wallets, eip155Addresses } = createOrRestoreEIP155Wallet()
@@ -72,7 +73,7 @@ export default function AuthenticationRequestModal() {
       <RequestModalContainer title="Authentication Request">
         <Row>
           <Col>
-            <Text h5>Message</Text>
+            <Text h5>Message {getVerifyStatus(verifyContext)}</Text>            
             <Text style={{ whiteSpace: 'pre-wrap' }} color="$gray400">
               {message}
             </Text>