diff --git a/wallets/react-wallet-v2/src/components/AccountSelectCard.tsx b/wallets/react-wallet-v2/src/components/AccountSelectCard.tsx
new file mode 100644
index 0000000..dcdff4b
--- /dev/null
+++ b/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 (
+
+
+
+
+ {`${truncate(address, 14)} - Account ${index + 1}`}
+
+
+ )
+}
diff --git a/wallets/react-wallet-v2/src/pages/session.tsx b/wallets/react-wallet-v2/src/pages/session.tsx
index 82b9c5b..71ca899 100644
--- a/wallets/react-wallet-v2/src/pages/session.tsx
+++ b/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 (
@@ -52,6 +83,97 @@ export default function SessionPage() {
+
+ {chains.map(chain => {
+ if (isEIP155Chain(chain)) {
+ return (
+
+
+
+
+
+ EIP155 Accounts
+ {eip155Addresses.map((address, index) => {
+ const fullAddress = `${chain}:${address}`
+ const selected = accounts.includes(fullAddress)
+
+ return (
+
+ selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
+ }
+ selected={selected}
+ />
+ )
+ })}
+
+
+
+ )
+ } else if (isCosmosChain(chain)) {
+ return (
+
+
+
+
+
+ Cosmos Accounts
+ {cosmosAddresses.map((address, index) => {
+ const fullAddress = `${chain}:${address}`
+ const selected = accounts.includes(fullAddress)
+
+ return (
+
+ selected ? onDeleteAccount(fullAddress) : onAddAccount(fullAddress)
+ }
+ selected={selected}
+ />
+ )
+ })}
+
+
+
+ )
+ }
+ })}
+
+
+
+
+
+ Methods
+ {methods.map(method => method).join(', ')}
+
+
+
+
+
+
+ Expiry
+ {expiryDate.toDateString()}
+
+
+
+
+
+ Last Updated
+ {updated.toDateString()}
+
+
+
+
+
+
+
)
}
diff --git a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
index 194fd7f..45b4bb2 100644
--- a/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
+++ b/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 {
- Avatar,
- Button,
- Card,
- Checkbox,
- Col,
- Container,
- Divider,
- Link,
- Modal,
- Row,
- Text
-} from '@nextui-org/react'
+import { Avatar, Button, Col, Container, Divider, Link, Modal, Row, Text } from '@nextui-org/react'
import { Fragment, useState } from 'react'
export default function SessionProposalModal() {
@@ -69,7 +58,7 @@ export default function SessionProposalModal() {
accounts.push(`${chain}:${address}`)
})
} else if (isCosmosChain(chain)) {
- cosmosAddresses.forEach(address => {
+ selectedCosmos.forEach(address => {
accounts.push(`${chain}:${address}`)
})
}
@@ -157,27 +146,13 @@ export default function SessionProposalModal() {
Select EIP155 Accounts
{eip155Addresses.map((address, index) => (
- onSelectEIP155(address)}
- clickable
+
-
-
-
- {`${truncate(address, 14)} - Account ${index + 1}`}
-
-
+ address={address}
+ index={index}
+ onSelect={() => onSelectEIP155(address)}
+ selected={selectedEIP155.includes(address)}
+ />
))}
@@ -192,27 +167,13 @@ export default function SessionProposalModal() {
Select Cosmos Accounts
{cosmosAddresses.map((address, index) => (
- onSelectCosmos(address)}
- clickable
+
-
-
-
- {`${truncate(address, 14)} - Account ${index + 1}`}
-
-
+ address={address}
+ index={index}
+ onSelect={() => onSelectCosmos(address)}
+ selected={selectedCosmos.includes(address)}
+ />
))}