Add ability to manage session
This commit is contained in:
Ilja
parent
3add26b0bf
commit
749e8f9bd4
35
wallets/react-wallet-v2/src/components/AccountSelectCard.tsx
Normal file
35
wallets/react-wallet-v2/src/components/AccountSelectCard.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
<Col>
|
||||
<Text h5>Select EIP155 Accounts</Text>
|
||||
{eip155Addresses.map((address, index) => (
|
||||
<Card
|
||||
onClick={() => onSelectEIP155(address)}
|
||||
clickable
|
||||
<AccountSelectCard
|
||||
key={address}
|
||||
css={{
|
||||
marginTop: '$5',
|
||||
backgroundColor: selectedEIP155.includes(address)
|
||||
? 'rgba(23, 200, 100, 0.2)'
|
||||
: '$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>
|
||||
address={address}
|
||||
index={index}
|
||||
onSelect={() => onSelectEIP155(address)}
|
||||
selected={selectedEIP155.includes(address)}
|
||||
/>
|
||||
))}
|
||||
</Col>
|
||||
</Row>
|
||||
@ -192,27 +167,13 @@ export default function SessionProposalModal() {
|
||||
<Col>
|
||||
<Text h5>Select Cosmos Accounts</Text>
|
||||
{cosmosAddresses.map((address, index) => (
|
||||
<Card
|
||||
onClick={() => onSelectCosmos(address)}
|
||||
clickable
|
||||
<AccountSelectCard
|
||||
key={address}
|
||||
css={{
|
||||
marginTop: '$5',
|
||||
backgroundColor: selectedCosmos.includes(address)
|
||||
? 'rgba(23, 200, 100, 0.2)'
|
||||
: '$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>
|
||||
address={address}
|
||||
index={index}
|
||||
onSelect={() => onSelectCosmos(address)}
|
||||
selected={selectedCosmos.includes(address)}
|
||||
/>
|
||||
))}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user