chore: updated @walletconnect deps (#164)

* chore: updates auth dapp

* chore: updates react sign dapp

* chore: updates cosmos dapp

* chore: updates ethers dapp

* chore: updates web3js dapp

* chore: updates vue auth dapp

* chore: updates auth wallet

* chore: updates eip155 wallet

* updates react-wallet-v2

* chore: updates web3wallet example

* feat: adds optional namespaces to main example wallet

* chore: eip155 example lock

* chore: removes console log

---------

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

wallets/react-wallet-v2/package.json

@@ -24,8 +24,8 @@
     "@taquito/taquito": "^15.1.0",
     "@walletconnect/client": "1.8.0",
     "@walletconnect/legacy-types": "^2.0.0-rc.0",
-    "@walletconnect/sign-client": "2.7.2",
-    "@walletconnect/utils": "2.7.2",
+    "@walletconnect/sign-client": "2.7.6",
+    "@walletconnect/utils": "2.7.6",
     "bs58": "5.0.0",
     "cosmos-wallet": "1.2.0",
     "ethers": "5.6.6",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@types/node": "17.0.35",
     "@types/react": "18.0.9",
-    "@walletconnect/types": "2.6.2",
+    "@walletconnect/types": "2.7.6",
     "eslint": "8.15.0",
     "eslint-config-next": "12.1.6",
     "eslint-config-prettier": "8.5.0",

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

@@ -9,10 +9,8 @@ import { formatJsonRpcError, formatJsonRpcResult } from '@json-rpc-tools/utils'
 import { SignClientTypes } from '@walletconnect/types'
 import { getSdkError } from '@walletconnect/utils'
 import { providers } from 'ethers'
-
-export async function approveEIP155Request(
-  requestEvent: SignClientTypes.EventArguments['session_request']
-) {
+type RequestEventArgs = Omit<SignClientTypes.EventArguments['session_request'], 'verifyContext'>
+export async function approveEIP155Request(requestEvent: RequestEventArgs) {
   const { params, id } = requestEvent
   const { chainId, request } = params
   const wallet = eip155Wallets[getWalletAddressFromParams(eip155Addresses, params)]
@@ -74,7 +72,7 @@ export async function approveEIP155Request(
   }
 }
 
-export function rejectEIP155Request(request: SignClientTypes.EventArguments['session_request']) {
+export function rejectEIP155Request(request: RequestEventArgs) {
   const { id } = request
 
   return formatJsonRpcError(id, getSdkError('USER_REJECTED').message)

wallets/react-wallet-v2/src/views/SessionProposalModal.tsx

@@ -3,29 +3,13 @@ import ProposalSelectSection from '@/components/ProposalSelectSection'
 import RequestModalContainer from '@/components/RequestModalContainer'
 import SessionProposalChainCard from '@/components/SessionProposalChainCard'
 import ModalStore from '@/store/ModalStore'
-import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
-import { polkadotAddresses } from '@/utils/PolkadotWalletUtil'
-import { elrondAddresses } from '@/utils/ElrondWalletUtil'
-import { tronAddresses } from '@/utils/TronWalletUtil'
-import { tezosAddresses } from '@/utils/TezosWalletUtil'
-import {
-  isCosmosChain,
-  isEIP155Chain,
-  isSolanaChain,
-  isPolkadotChain,
-  isNearChain,
-  isElrondChain,
-  isTronChain,
-  isTezosChain
-} from '@/utils/HelperUtil'
-import { solanaAddresses } from '@/utils/SolanaWalletUtil'
+import { isEIP155Chain } from '@/utils/HelperUtil'
 import { signClient } from '@/utils/WalletConnectUtil'
 import { Button, Divider, Modal, Text } from '@nextui-org/react'
 import { SessionTypes } from '@walletconnect/types'
 import { getSdkError } from '@walletconnect/utils'
-import { Fragment, useState } from 'react'
-import { nearAddresses } from '@/utils/NearWalletUtil'
+import { Fragment, useEffect, useState } from 'react'
 
 export default function SessionProposalModal() {
   const [selectedAccounts, setSelectedAccounts] = useState<Record<string, string[]>>({})
@@ -41,7 +25,10 @@ export default function SessionProposalModal() {
 
   // Get required proposal data
   const { id, params } = proposal
-  const { proposer, requiredNamespaces, relays } = params
+
+  const { proposer, requiredNamespaces, optionalNamespaces, sessionProperties, relays } = params
+  const requiredNamespaceKeys = requiredNamespaces ? Object.keys(requiredNamespaces) : []
+  const optionalNamespaceKeys = optionalNamespaces ? Object.keys(optionalNamespaces) : []
 
   // Add / remove address from EIP155 selection
   function onSelectAccount(chain: string, account: string) {
@@ -63,26 +50,44 @@ export default function SessionProposalModal() {
   // Hanlde approve action, construct session namespace
   async function onApprove() {
     if (proposal) {
-      const namespaces: SessionTypes.Namespaces = {}
-      Object.keys(requiredNamespaces).forEach(key => {
+      let namespaces: SessionTypes.Namespaces = {}
+      const selectedOptionalNamespaces = []
+      for (const [chain, account] of Object.entries(selectedAccounts)) {
+        if (chain.includes('optional')) {
+          selectedOptionalNamespaces.push(chain.split(':')[1])
+        }
+      }
+      requiredNamespaceKeys.concat(selectedOptionalNamespaces).forEach(key => {
         const accounts: string[] = []
-        requiredNamespaces[key].chains?.map(chain => {
-          selectedAccounts[key].map(acc => accounts.push(`${chain}:${acc}`))
-        })
-        namespaces[key] = {
-          accounts,
-          chains: key.includes(':') ? [key] : requiredNamespaces[key].chains,
-          methods: requiredNamespaces[key].methods,
-          events: requiredNamespaces[key].events
+        if (requiredNamespaces[key].chains) {
+          requiredNamespaces[key].chains?.map(chain => {
+            selectedAccounts[`required:${key}`].map(acc => accounts.push(`${chain}:${acc}`))
+          })
+          namespaces[key] = {
+            accounts,
+            methods: requiredNamespaces[key].methods,
+            events: requiredNamespaces[key].events,
+            chains: requiredNamespaces[key].chains
+          }
+        }
+        if (optionalNamespaces[key] && selectedAccounts[`optional:${key}`]) {
+          optionalNamespaces[key].chains?.map(chain => {
+            selectedAccounts[`optional:${key}`].map(acc => accounts.push(`${chain}:${acc}`))
+          })
+          namespaces[key] = {
+            ...namespaces[key],
+            accounts,
+            methods: optionalNamespaces[key].methods,
+            events: optionalNamespaces[key].events,
+            chains: namespaces[key].chains?.concat(optionalNamespaces[key].chains || [])
+          }
         }
       })
-
-      const { acknowledged } = await signClient.approve({
+      await signClient.approve({
         id,
         relayProtocol: relays[0].protocol,
         namespaces
       })
-      await acknowledged()
     }
     ModalStore.close()
   }
@@ -109,69 +114,6 @@ export default function SessionProposalModal() {
           chain={chain}
         />
       )
-    } else if (isCosmosChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={cosmosAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
-    } else if (isSolanaChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={solanaAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
-    } else if (isPolkadotChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={polkadotAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
-    } else if (isNearChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={nearAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
-    } else if (isElrondChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={elrondAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
-    } else if (isTronChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={tronAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
-    } else if (isTezosChain(chain)) {
-      return (
-        <ProposalSelectSection
-          addresses={tezosAddresses}
-          selectedAddresses={selectedAccounts[chain]}
-          onSelect={onSelectAccount}
-          chain={chain}
-        />
-      )
     }
   }
 
@@ -180,24 +122,35 @@ export default function SessionProposalModal() {
       <RequestModalContainer title="Session Proposal">
         <ProjectInfoCard metadata={proposer.metadata} />
 
-        {/* TODO(ilja) Relays selection */}
-
         <Divider y={2} />
 
-        {Object.keys(requiredNamespaces).map(chain => {
+        {requiredNamespaceKeys.length ? <Text h4>Required Namespaces</Text> : null}
+        {requiredNamespaceKeys.map(chain => {
           return (
             <Fragment key={chain}>
-              <Text h4 css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
+              <Text css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
               <SessionProposalChainCard requiredNamespace={requiredNamespaces[chain]} />
-              {renderAccountSelection(chain)}
+              {renderAccountSelection(`required:${chain}`)}
               <Divider y={2} />
             </Fragment>
           )
         })}
+        {optionalNamespaceKeys ? <Text h4>Optional Namespaces</Text> : null}
+        {optionalNamespaceKeys.length &&
+          optionalNamespaceKeys.map(chain => {
+            return (
+              <Fragment key={chain}>
+                <Text css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
+                <SessionProposalChainCard requiredNamespace={optionalNamespaces[chain]} />
+                {renderAccountSelection(`optional:${chain}`)}
+                <Divider y={2} />
+              </Fragment>
+            )
+          })}
       </RequestModalContainer>
 
       <Modal.Footer>
-        <Button auto flat color="error" onClick={onReject}>
+        <Button auto flat color="error" onPress={onReject}>
           Reject
         </Button>
 
@@ -205,7 +158,7 @@ export default function SessionProposalModal() {
           auto
           flat
           color="success"
-          onClick={onApprove}
+          onPress={onApprove}
           disabled={!hasSelected}
           css={{ opacity: hasSelected ? 1 : 0.4 }}
         >