fix: implements optional namespaces for non evm chains (#167)

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

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

@@ -3,13 +3,29 @@ 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 { isEIP155Chain } from '@/utils/HelperUtil'
+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 { 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, useEffect, useState } from 'react'
+import { nearAddresses } from '@/utils/NearWalletUtil'
 
 export default function SessionProposalModal() {
   const [selectedAccounts, setSelectedAccounts] = useState<Record<string, string[]>>({})
@@ -27,8 +43,6 @@ export default function SessionProposalModal() {
   const { id, params } = proposal
 
   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) {
@@ -57,9 +71,12 @@ export default function SessionProposalModal() {
           selectedOptionalNamespaces.push(chain.split(':')[1])
         }
       }
-      requiredNamespaceKeys.concat(selectedOptionalNamespaces).forEach(key => {
+
+      Object.keys(requiredNamespaces)
+        .concat(selectedOptionalNamespaces)
+        .forEach(key => {
           const accounts: string[] = []
-        if (requiredNamespaces[key].chains) {
+          if (requiredNamespaces[key] && requiredNamespaces[key]?.chains) {
             requiredNamespaces[key].chains?.map(chain => {
               selectedAccounts[`required:${key}`].map(acc => accounts.push(`${chain}:${acc}`))
             })
@@ -79,10 +96,11 @@ export default function SessionProposalModal() {
               accounts,
               methods: optionalNamespaces[key].methods,
               events: optionalNamespaces[key].events,
-            chains: namespaces[key].chains?.concat(optionalNamespaces[key].chains || [])
+              chains: namespaces[key]?.chains?.concat(optionalNamespaces[key].chains || [])
             }
           }
         })
+
       await signClient.approve({
         id,
         relayProtocol: relays[0].protocol,
@@ -114,6 +132,69 @@ 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}
+        />
+      )
     }
   }
 
@@ -123,9 +204,8 @@ export default function SessionProposalModal() {
         <ProjectInfoCard metadata={proposer.metadata} />
 
         <Divider y={2} />
-
+        {Object.keys(requiredNamespaces).length != 0 ? <Text h4>Required Namespaces</Text> : null}
-        {requiredNamespaceKeys.length ? <Text h4>Required Namespaces</Text> : null}
+        {Object.keys(requiredNamespaces).map(chain => {
-        {requiredNamespaceKeys.map(chain => {
           return (
             <Fragment key={chain}>
               <Text css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>
@@ -135,9 +215,12 @@ export default function SessionProposalModal() {
             </Fragment>
           )
         })}
-        {optionalNamespaceKeys ? <Text h4>Optional Namespaces</Text> : null}
+        {optionalNamespaces && Object.keys(optionalNamespaces).length != 0 ? (
-        {optionalNamespaceKeys.length &&
+          <Text h4>Optional Namespaces</Text>
-          optionalNamespaceKeys.map(chain => {
+        ) : null}
+        {optionalNamespaces &&
+          Object.keys(optionalNamespaces).length != 0 &&
+          Object.keys(optionalNamespaces).map(chain => {
             return (
               <Fragment key={chain}>
                 <Text css={{ marginBottom: '$5' }}>{`Review ${chain} permissions`}</Text>