wip, session page

This commit is contained in:
Ilja 2022-02-23 13:33:15 +02:00
parent 169a442b78
commit 8d6cd5c541
4 changed files with 97 additions and 44 deletions

View File

@ -0,0 +1,3 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M184 112L328 256L184 400" stroke="white" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 224 B

View File

@ -1,54 +1,55 @@
import { truncate } from '@/utils/HelperUtil' import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Link, Text, Tooltip } from '@nextui-org/react' import { Avatar, Card, Link, Text } from '@nextui-org/react'
import Image from 'next/image' import Image from 'next/image'
import NextLink from 'next/link'
/** /**
* Types * Types
*/ */
interface IProps { interface IProps {
topic?: string
logo?: string logo?: string
name?: string name?: string
url?: string url?: string
onDelete: () => Promise<void>
} }
/** /**
* Component * Component
*/ */
export default function SessionCard({ logo, name, url, onDelete }: IProps) { export default function SessionCard({ logo, name, url, topic }: IProps) {
return ( return (
<Card <NextLink href={`/session?topic=${topic}`} passHref>
bordered <Card
borderWeight="light" clickable
css={{ bordered
position: 'relative', borderWeight="light"
marginBottom: '$6',
minHeight: '70px'
}}
>
<Card.Body
css={{ css={{
flexDirection: 'row', position: 'relative',
alignItems: 'center', marginBottom: '$6',
justifyContent: 'space-between', minHeight: '70px'
overflow: 'hidden'
}} }}
> >
<Avatar src={logo} /> <Card.Body
<div style={{ flex: 1 }}> css={{
<Text h5 css={{ marginLeft: '$9' }}> flexDirection: 'row',
{name} alignItems: 'center',
</Text> justifyContent: 'space-between',
<Link href={url} css={{ marginLeft: '$9' }}> overflow: 'hidden'
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)} }}
</Link> >
</div> <Avatar src={logo} />
<Tooltip content="Delete" placement="left"> <div style={{ flex: 1 }}>
<Button size="sm" color="error" flat onClick={onDelete} css={{ minWidth: 'auto' }}> <Text h5 css={{ marginLeft: '$9' }}>
<Image src={'/icons/delete-icon.svg'} width={15} height={15} alt="delete icon" /> {name}
</Button> </Text>
</Tooltip> <Link href={url} css={{ marginLeft: '$9' }}>
</Card.Body> {truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Card> </Link>
</div>
<Image src={'/icons/arrow-right-icon.svg'} width={20} height={20} alt="session icon" />
</Card.Body>
</Card>
</NextLink>
) )
} }

View File

@ -0,0 +1,59 @@
import PageHeader from '@/components/PageHeader'
import { truncate } from '@/utils/HelperUtil'
import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Avatar, Col, Link, Row, Text } from '@nextui-org/react'
import { useRouter } from 'next/router'
import { Fragment, useEffect, useState } from 'react'
/**
* Component
*/
export default function SessionPage() {
const [topic, setTopic] = useState('')
const { query } = useRouter()
useEffect(() => {
if (query?.topic) {
setTopic(query.topic as string)
}
}, [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
}
const { name, url, icons, description } = session.peer.metadata
return (
<Fragment>
<PageHeader title="Session Details" />
<Row align="center">
<Col css={{ flex: 1 }}>
<Avatar size="xl" src={icons[0]} />
</Col>
<Col css={{ marginLeft: '$5' }}>
<Text h5>{name}</Text>
<Link css={{ marginLeft: '$5' }} href={url}>
{truncate(url?.split('https://')[1] ?? 'Unknown', 23)}
</Link>
</Col>
</Row>
<Text css={{ color: '$accents4' }}>{description}</Text>
</Fragment>
)
}

View File

@ -2,21 +2,11 @@ import PageHeader from '@/components/PageHeader'
import SessionCard from '@/components/SessionCard' import SessionCard from '@/components/SessionCard'
import { walletConnectClient } from '@/utils/WalletConnectUtil' import { walletConnectClient } from '@/utils/WalletConnectUtil'
import { Text } from '@nextui-org/react' import { Text } from '@nextui-org/react'
import { ERROR } from '@walletconnect/utils'
import { Fragment, useState } from 'react' import { Fragment, useState } from 'react'
export default function SessionsPage() { export default function SessionsPage() {
const [sessions, setSessions] = useState(walletConnectClient.session.values) const [sessions, setSessions] = useState(walletConnectClient.session.values)
async function onDelete(topic: string) {
await walletConnectClient.session.delete({
topic,
reason: ERROR.DELETED.format()
})
const newSessions = sessions.filter(sessions => sessions.topic !== topic)
setSessions(newSessions)
}
return ( return (
<Fragment> <Fragment>
<PageHeader title="Sessions" /> <PageHeader title="Sessions" />
@ -27,10 +17,10 @@ export default function SessionsPage() {
return ( return (
<SessionCard <SessionCard
key={session.topic} key={session.topic}
topic={session.topic}
name={name} name={name}
logo={icons[0]} logo={icons[0]}
url={url} url={url}
onDelete={() => onDelete(session.topic)}
/> />
) )
}) })