feat:re-verify (#243)

* feat: implements verify context badge

* feat: implements verify cases in example dapp - valid/invalid/unknown

* fix: styled props

---------

Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>

wallets/react-wallet-v2/src/components/ProjectInfoCard.tsx

@@ -1,3 +1,8 @@
+import { useMemo } from 'react'
+import { useSnapshot } from 'valtio'
+
+import SettingsStore from '@/store/SettingsStore'
+import { getVerifyStatus } from '@/utils/HelperUtil'
 import { Avatar, Col, Link, Row, Text } from '@nextui-org/react'
 import { SignClientTypes } from '@walletconnect/types'
 
@@ -12,17 +17,26 @@ interface IProps {
  * Components
  */
 export default function ProjectInfoCard({ metadata }: IProps) {
+  const { currentRequestVerifyContext } = useSnapshot(SettingsStore.state)
   const { icons, name, url } = metadata
-
+  const validation = useMemo(
+    () => getVerifyStatus(currentRequestVerifyContext),
+    [currentRequestVerifyContext]
+  )
   return (
-    <Row align="center">
-      <Col span={3}>
-        <Avatar src={icons[0]} />
-      </Col>
-      <Col span={14}>
-        <Text h5>{name}</Text>
-        <Link href={url}>{url}</Link>
-      </Col>
-    </Row>
+    <>
+      <Row align="center">
+        <Col span={3}>
+          <Avatar src={icons[0]} />
+        </Col>
+        <Col span={15}>
+          <Text h5>{name}</Text>
+          <Row>
+            <Link href={url}>{url}</Link>
+            <Text style={{ marginLeft: '5px' }}>{validation}</Text>
+          </Row>
+        </Col>
+      </Row>
+    </>
   )
 }

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

@@ -5,6 +5,8 @@ import { POLKADOT_SIGNING_METHODS } from '@/data/PolkadotData'
 import { MULTIVERSX_SIGNING_METHODS } from '@/data/MultiversxData'
 import { TRON_SIGNING_METHODS } from '@/data/TronData'
 import ModalStore from '@/store/ModalStore'
+import SettingsStore from '@/store/SettingsStore'
+import { useSnapshot } from 'valtio'
 import { signClient } from '@/utils/WalletConnectUtil'
 import { SignClientTypes } from '@walletconnect/types'
 import { useCallback, useEffect } from 'react'
@@ -19,6 +21,8 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
    *****************************************************************************/
   const onSessionProposal = useCallback(
     (proposal: SignClientTypes.EventArguments['session_proposal']) => {
+      // set the verify context so it can be displayed in the projectInfoCard
+      SettingsStore.setCurrentRequestVerifyContext(proposal.verifyContext)
       ModalStore.open('SessionProposalModal', { proposal })
     },
     []
@@ -30,9 +34,11 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
   const onSessionRequest = useCallback(
     async (requestEvent: SignClientTypes.EventArguments['session_request']) => {
       console.log('session_request', requestEvent)
-      const { topic, params } = requestEvent
+      const { topic, params, verifyContext } = requestEvent
       const { request } = params
       const requestSession = signClient.session.get(topic)
+      // set the verify context so it can be displayed in the projectInfoCard
+      SettingsStore.setCurrentRequestVerifyContext(verifyContext)
 
       switch (request.method) {
         case EIP155_SIGNING_METHODS.ETH_SIGN:

wallets/react-wallet-v2/src/store/SettingsStore.ts

@@ -1,3 +1,4 @@
+import { Verify } from '@walletconnect/types'
 import { proxy } from 'valtio'
 
 /**
@@ -17,6 +18,7 @@ interface State {
   kadenaAddress: string
   relayerRegionURL: string
   activeChainId: string
+  currentRequestVerifyContext?: Verify.Context
 }
 
 /**
@@ -89,6 +91,10 @@ const SettingsStore = {
     state.activeChainId = value
   },
 
+  setCurrentRequestVerifyContext(context: Verify.Context) {
+    state.currentRequestVerifyContext = context
+  },
+
   toggleTestNets() {
     state.testNets = !state.testNets
     if (state.testNets) {

wallets/react-wallet-v2/src/utils/HelperUtil.ts

@@ -9,6 +9,7 @@ import { TRON_CHAINS, TTronChain } from '@/data/TronData'
 import { KADENA_CHAINS, TKadenaChain } from '@/data/KadenaData'
 
 import { utils } from 'ethers'
+import { Verify } from '@walletconnect/types'
 
 /**
  * Truncates string (in the middle) via given lenght value
@@ -160,3 +161,15 @@ export function formatChainName(chainId: string) {
     chainId
   )
 }
+
+export function getVerifyStatus(context?: Verify.Context) {
+  if (!context) return ''
+  switch (context.verified.validation) {
+    case 'VALID':
+      return '✅ Verified'
+    case 'INVALID':
+      return '❌ Origin does not match'
+    case 'UNKNOWN':
+      return '❓ Unknown'
+  }
+}