wip, session page
This commit is contained in:
parent
169a442b78
commit
8d6cd5c541
@ -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 |
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
59
wallets/react-wallet-v2/src/pages/session.tsx
Normal file
59
wallets/react-wallet-v2/src/pages/session.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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)}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user