wip, session page

wallets/react-wallet-v2/public/icons/arrow-right-icon.svg

@@ -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>

wallets/react-wallet-v2/src/components/SessionCard.tsx

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

wallets/react-wallet-v2/src/pages/session.tsx

@@ -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>
+  )
+}

wallets/react-wallet-v2/src/pages/sessions.tsx

@@ -2,21 +2,11 @@ import PageHeader from '@/components/PageHeader'
 import SessionCard from '@/components/SessionCard'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
 import { Text } from '@nextui-org/react'
-import { ERROR } from '@walletconnect/utils'
 import { Fragment, useState } from 'react'
 
 export default function SessionsPage() {
   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 (
     <Fragment>
       <PageHeader title="Sessions" />
@@ -27,10 +17,10 @@ export default function SessionsPage() {
           return (
             <SessionCard
               key={session.topic}
+              topic={session.topic}
               name={name}
               logo={icons[0]}
               url={url}
-              onDelete={() => onDelete(session.topic)}
             />
           )
         })