Add ability to manage session

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

@@ -0,0 +1,35 @@
+import { truncate } from '@/utils/HelperUtil'
+import { Card, Checkbox, Row, Text } from '@nextui-org/react'
+
+/**
+ * Types
+ */
+interface IProps {
+  address: string
+  index: number
+  selected: boolean
+  onSelect: () => void
+}
+
+/**
+ * Component
+ */
+export default function AccountSelectCard({ address, selected, index, onSelect }: IProps) {
+  return (
+    <Card
+      onClick={onSelect}
+      clickable
+      key={address}
+      css={{
+        marginTop: '$5',
+        backgroundColor: selected ? 'rgba(23, 200, 100, 0.2)' : '$accents2'
+      }}
+    >
+      <Row justify="space-between" align="center">
+        <Checkbox size="lg" color="success" checked={selected} />
+
+        <Text>{`${truncate(address, 14)} - Account ${index + 1}`} </Text>
+      </Row>
+    </Card>
+  )
+}

wallets/react-wallet-v2/src/pages/session.tsx

@@ -1,7 +1,11 @@
+import AccountSelectCard from '@/components/AccountSelectCard'
 import PageHeader from '@/components/PageHeader'
-import { truncate } from '@/utils/HelperUtil'
+import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
+import { eip155Addresses } from '@/utils/EIP155WalletUtil'
+import { isCosmosChain, isEIP155Chain, truncate } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { Avatar, Col, Link, Row, Text } from '@nextui-org/react'
+import { Avatar, Button, Col, Divider, Link, Row, Text } from '@nextui-org/react'
+import { ERROR } from '@walletconnect/utils'
 import { useRouter } from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
 
@@ -10,7 +14,8 @@ import { Fragment, useEffect, useState } from 'react'
  */
 export default function SessionPage() {
   const [topic, setTopic] = useState('')
-  const { query } = useRouter()
+  const [updated, setUpdated] = useState(new Date())
+  const { query, replace } = useRouter()
 
   useEffect(() => {
     if (query?.topic) {
@@ -18,24 +23,50 @@ export default function SessionPage() {
     }
   }, [query])
 
-  // async function onDelete(topic: string) {
-  //   await walletConnectClient.session.delete({
-  //     topic,
-  //     reason: ERROR.DELETED.format()
-  //   })
-  //   const newSessions = sessions.filter(sessions => sessions.topic !== topic)
-  //   setSessions(newSessions)
-  // }
-
   const session = walletConnectClient.session.values.find(s => s.topic === topic)
 
-  console.log(session)
-
   if (!session) {
     return null
   }
 
+  // Get necessary data from session
   const { name, url, icons } = session.peer.metadata
+  const expiryDate = new Date(session.expiry * 1000)
+  const { chains } = session.permissions.blockchain
+  const { methods } = session.permissions.jsonrpc
+  const { accounts } = session.state
+
+  // Handle deletion of a session
+  async function onDeleteSession() {
+    await walletConnectClient.session.delete({
+      topic,
+      reason: ERROR.DELETED.format()
+    })
+    replace('/sessions')
+  }
+
+  // Hanlde deletion of session account
+  async function onDeleteAccount(account: string) {
+    const newAccounts = accounts.filter(a => a !== account)
+    await walletConnectClient.session.update({
+      topic,
+      state: {
+        accounts: newAccounts
+      }
+    })
+    setUpdated(new Date())
+  }
+
+  // Handle addition of account to the session
+  async function onAddAccount(account: string) {
+    await walletConnectClient.session.update({
+      topic,
+      state: {
+        accounts: [...accounts, account]
+      }
+    })
+    setUpdated(new Date())
+  }
 
   return (
     <Fragment>
@@ -52,6 +83,97 @@ export default function SessionPage() {
           </Link>
         </Col>
       </Row>
+
+      {chains.map(chain => {
+        if (isEIP155Chain(chain)) {
+          return (
+            <Fragment key={chain}>
+              <Divider y={1} />
+
+              <Row>
+                <Col>
+                  <Text h5>EIP155 Accounts</Text>
+                  {eip155Addresses.map((address, index) => {
+                    const fullAddress = `${chain}:${address}`
+                    const selected = accounts.includes(fullAddress)
+
+                    return (
+                      <AccountSelectCard
+                        key={address}
+                        address={address}
+                        index={index}
+                        onSelect={() =>
+                          selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
+                        }
+                        selected={selected}
+                      />
+                    )
+                  })}
+                </Col>
+              </Row>
+            </Fragment>
+          )
+        } else if (isCosmosChain(chain)) {
+          return (
+            <Fragment key={chain}>
+              <Divider y={1} />
+
+              <Row>
+                <Col>
+                  <Text h5>Cosmos Accounts</Text>
+                  {cosmosAddresses.map((address, index) => {
+                    const fullAddress = `${chain}:${address}`
+                    const selected = accounts.includes(fullAddress)
+
+                    return (
+                      <AccountSelectCard
+                        key={address}
+                        address={address}
+                        index={index}
+                        onSelect={() =>
+                          selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
+                        }
+                        selected={selected}
+                      />
+                    )
+                  })}
+                </Col>
+              </Row>
+            </Fragment>
+          )
+        }
+      })}
+
+      <Divider y={1} />
+
+      <Row>
+        <Col>
+          <Text h5>Methods</Text>
+          <Text color="$gray400">{methods.map(method => method).join(', ')}</Text>
+        </Col>
+      </Row>
+
+      <Divider y={1} />
+
+      <Row justify="space-between">
+        <Text h5>Expiry</Text>
+        <Text css={{ color: '$gray400' }}>{expiryDate.toDateString()}</Text>
+      </Row>
+
+      <Divider y={1} />
+
+      <Row justify="space-between">
+        <Text h5>Last Updated</Text>
+        <Text css={{ color: '$gray400' }}>{updated.toDateString()}</Text>
+      </Row>
+
+      <Divider y={1} />
+
+      <Row>
+        <Button flat css={{ width: '100%' }} color="error" onClick={onDeleteSession}>
+          Delete Session
+        </Button>
+      </Row>
     </Fragment>
   )
 }

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

@@ -1,23 +1,12 @@
+import AccountSelectCard from '@/components/AccountSelectCard'
 import { COSMOS_MAINNET_CHAINS, TCosmosChain } from '@/data/COSMOSData'
 import { EIP155_CHAINS, TEIP155Chain } from '@/data/EIP155Data'
 import ModalStore from '@/store/ModalStore'
 import { cosmosAddresses } from '@/utils/CosmosWalletUtil'
 import { eip155Addresses } from '@/utils/EIP155WalletUtil'
-import { isCosmosChain, isEIP155Chain, truncate } from '@/utils/HelperUtil'
+import { isCosmosChain, isEIP155Chain } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import {
+import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
-  Avatar,
-  Button,
-  Card,
-  Checkbox,
-  Col,
-  Container,
-  Divider,
-  Link,
-  Modal,
-  Row,
-  Text
-} from '@nextui-org/react'
 import { Fragment, useState } from 'react'
 
 export default function SessionProposalModal() {
@@ -157,27 +146,13 @@ export default function SessionProposalModal() {
                     <Col>
                       <Text h5>Select EIP155 Accounts</Text>
                       {eip155Addresses.map((address, index) => (
-                        <Card
+                        <AccountSelectCard
-                          onClick={() => onSelectEIP155(address)}
-                          clickable
                           key={address}
-                          css={{
+                          address={address}
-                            marginTop: '$5',
+                          index={index}
-                            backgroundColor: selectedEIP155.includes(address)
+                          onSelect={() => onSelectEIP155(address)}
-                              ? 'rgba(23, 200, 100, 0.2)'
+                          selected={selectedEIP155.includes(address)}
-                              : '$accents2'
+                        />
-                          }}
-                        >
-                          <Row justify="space-between" align="center">
-                            <Checkbox
-                              size="lg"
-                              color="success"
-                              checked={selectedEIP155.includes(address)}
-                            />
-
-                            <Text>{`${truncate(address, 14)} - Account ${index + 1}`} </Text>
-                          </Row>
-                        </Card>
                       ))}
                     </Col>
                   </Row>
@@ -192,27 +167,13 @@ export default function SessionProposalModal() {
                     <Col>
                       <Text h5>Select Cosmos Accounts</Text>
                       {cosmosAddresses.map((address, index) => (
-                        <Card
+                        <AccountSelectCard
-                          onClick={() => onSelectCosmos(address)}
-                          clickable
                           key={address}
-                          css={{
+                          address={address}
-                            marginTop: '$5',
+                          index={index}
-                            backgroundColor: selectedCosmos.includes(address)
+                          onSelect={() => onSelectCosmos(address)}
-                              ? 'rgba(23, 200, 100, 0.2)'
+                          selected={selectedCosmos.includes(address)}
-                              : '$accents2'
+                        />
-                          }}
-                        >
-                          <Row justify="space-between" align="center">
-                            <Checkbox
-                              size="lg"
-                              color="success"
-                              checked={selectedCosmos.includes(address)}
-                            />
-
-                            <Text>{`${truncate(address, 14)} - Account ${index + 1}`} </Text>
-                          </Row>
-                        </Card>
                       ))}
                     </Col>
                   </Row>