From 749e8f9bd4029d970ad0a12557686f8671dbf939 Mon Sep 17 00:00:00 2001 From: Ilja Date: Wed, 2 Mar 2022 15:57:21 +0200 Subject: [PATCH] Add ability to manage session --- .../src/components/AccountSelectCard.tsx | 35 ++++ wallets/react-wallet-v2/src/pages/session.tsx | 150 ++++++++++++++++-- .../src/views/SessionProposalModal.tsx | 69 ++------ 3 files changed, 186 insertions(+), 68 deletions(-) create mode 100644 wallets/react-wallet-v2/src/components/AccountSelectCard.tsx 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 b151f94..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() { @@ -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)} + /> ))}