prep session and pairing pages

wallets/react-wallet-v2/public/main.css

@@ -50,3 +50,11 @@
   background-color: transparent !important;
   overflow: scroll;
 }
+
+.navLink {
+  transition: ease-in-out .2s opacity;
+}
+
+.navLink:hover {
+  opacity: 0.6;
+}

wallets/react-wallet-v2/public/pairings-icon.svg

@@ -0,0 +1,59 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M408 336H344C339.582 336 336 339.582 336 344V408C336 412.418 339.582 416 344 416H408C412.418 416 416 412.418 416 408V344C416 339.582 412.418 336 408 336Z" fill="url(#paint0_linear_101_5)"/>
+<path d="M328 272H280C275.582 272 272 275.582 272 280V328C272 332.418 275.582 336 280 336H328C332.418 336 336 332.418 336 328V280C336 275.582 332.418 272 328 272Z" fill="url(#paint1_linear_101_5)"/>
+<path d="M472 416H424C419.582 416 416 419.582 416 424V472C416 476.418 419.582 480 424 480H472C476.418 480 480 476.418 480 472V424C480 419.582 476.418 416 472 416Z" fill="url(#paint2_linear_101_5)"/>
+<path d="M472 272H440C435.582 272 432 275.582 432 280V312C432 316.418 435.582 320 440 320H472C476.418 320 480 316.418 480 312V280C480 275.582 476.418 272 472 272Z" fill="url(#paint3_linear_101_5)"/>
+<path d="M312 432H280C275.582 432 272 435.582 272 440V472C272 476.418 275.582 480 280 480H312C316.418 480 320 476.418 320 472V440C320 435.582 316.418 432 312 432Z" fill="url(#paint4_linear_101_5)"/>
+<path d="M408 96H344C339.582 96 336 99.5817 336 104V168C336 172.418 339.582 176 344 176H408C412.418 176 416 172.418 416 168V104C416 99.5817 412.418 96 408 96Z" fill="url(#paint5_linear_101_5)"/>
+<path d="M448 48H304C295.163 48 288 55.1634 288 64V208C288 216.837 295.163 224 304 224H448C456.837 224 464 216.837 464 208V64C464 55.1634 456.837 48 448 48Z" stroke="url(#paint6_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M168 96H104C99.5817 96 96 99.5817 96 104V168C96 172.418 99.5817 176 104 176H168C172.418 176 176 172.418 176 168V104C176 99.5817 172.418 96 168 96Z" fill="url(#paint7_linear_101_5)"/>
+<path d="M208 48H64C55.1634 48 48 55.1634 48 64V208C48 216.837 55.1634 224 64 224H208C216.837 224 224 216.837 224 208V64C224 55.1634 216.837 48 208 48Z" stroke="url(#paint8_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M168 336H104C99.5817 336 96 339.582 96 344V408C96 412.418 99.5817 416 104 416H168C172.418 416 176 412.418 176 408V344C176 339.582 172.418 336 168 336Z" fill="url(#paint9_linear_101_5)"/>
+<path d="M208 288H64C55.1634 288 48 295.163 48 304V448C48 456.837 55.1634 464 64 464H208C216.837 464 224 456.837 224 448V304C224 295.163 216.837 288 208 288Z" stroke="url(#paint10_linear_101_5)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_101_5" x1="336" y1="336.006" x2="416.753" y2="415.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_101_5" x1="272" y1="272.005" x2="336.603" y2="335.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_101_5" x1="416" y1="416.005" x2="480.603" y2="479.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_101_5" x1="432" y1="272.004" x2="480.452" y2="319.536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint4_linear_101_5" x1="272" y1="432.004" x2="320.452" y2="479.536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint5_linear_101_5" x1="336" y1="96.0063" x2="416.753" y2="175.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint6_linear_101_5" x1="288" y1="48.0139" x2="465.657" y2="222.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint7_linear_101_5" x1="96" y1="96.0063" x2="176.753" y2="175.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint8_linear_101_5" x1="48" y1="48.0139" x2="225.657" y2="222.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint9_linear_101_5" x1="96" y1="336.006" x2="176.753" y2="415.226" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint10_linear_101_5" x1="48" y1="288.014" x2="225.657" y2="462.298" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+</defs>
+</svg>

wallets/react-wallet-v2/public/sessions-icon.svg

@@ -0,0 +1,19 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M320 120L368 168L320 216" stroke="url(#paint0_linear_101_17)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M352 168H144C122.802 168.063 102.491 176.512 87.5014 191.501C72.5122 206.491 64.0633 226.802 64 248V264M192 392L144 344L192 296" stroke="url(#paint1_linear_101_17)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160 344H368C389.198 343.937 409.509 335.488 424.499 320.499C439.488 305.509 447.937 285.198 448 264V248" stroke="url(#paint2_linear_101_17)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_101_17" x1="320" y1="120.008" x2="396.642" y2="157.601" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_101_17" x1="64.0001" y1="168.018" x2="284.191" y2="445.745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_101_17" x1="160" y1="248.008" x2="219.048" y2="421.788" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -1,6 +1,5 @@
 import { truncate } from '@/utils/HelperUtil'
 import { Avatar, Card, Text } from '@nextui-org/react'
-import Link from 'next/link'
 
 interface Props {
   name: string
@@ -11,38 +10,35 @@ interface Props {
 
 export default function AccountCard({ name, logo, rgb, address }: Props) {
   return (
-    <Link href={`/sessions?address=${address}`} passHref>
+    <Card
-      <Card
+      bordered
-        bordered
+      borderWeight="light"
-        clickable
+      css={{
-        borderWeight="light"
+        borderColor: `rgba(${rgb}, 0.4)`,
+        boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
+        backgroundColor: `rgba(${rgb}, 0.25)`,
+        marginBottom: '$6',
+        minHeight: '70px'
+      }}
+    >
+      <Card.Body
         css={{
-          borderColor: `rgba(${rgb}, 0.4)`,
+          flexDirection: 'row',
-          boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
+          alignItems: 'center',
-          backgroundColor: `rgba(${rgb}, 0.25)`,
+          justifyContent: 'space-between',
-          marginBottom: '$6',
+          overflow: 'hidden'
-          minHeight: '70px'
         }}
       >
-        <Card.Body
+        <Avatar src={logo} />
-          css={{
+        <div style={{ flex: 1 }}>
-            flexDirection: 'row',
+          <Text h5 css={{ marginLeft: '$9' }}>
-            alignItems: 'center',
+            {name}
-            justifyContent: 'space-between',
+          </Text>
-            overflow: 'hidden'
+          <Text weight="light" size={13} css={{ marginLeft: '$9' }}>
-          }}
+            {truncate(address, 19)}
-        >
+          </Text>
-          <Avatar src={logo} />
+        </div>
-          <div style={{ flex: 1 }}>
+      </Card.Body>
-            <Text h5 css={{ marginLeft: '$9' }}>
+    </Card>
-              {name}
-            </Text>
-            <Text weight="light" size={13} css={{ marginLeft: '$9' }}>
-              {truncate(address, 19)}
-            </Text>
-          </div>
-        </Card.Body>
-      </Card>
-    </Link>
   )
 }

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

@@ -4,15 +4,21 @@ import Link from 'next/link'
 
 export default function Navigation() {
   return (
-    <Row justify="space-between" align="center" css={{ width: '80%', margin: '0 auto' }}>
+    <Row justify="space-between" align="center">
       <Link href="/" passHref>
-        <a>
+        <a className="navLink">
-          <Image alt="accounts icon" src="/accounts-icon.svg" width={30} height={30} />
+          <Image alt="accounts icon" src="/accounts-icon.svg" width={27} height={27} />
+        </a>
+      </Link>
+
+      <Link href="/sessions" passHref>
+        <a className="navLink">
+          <Image alt="sessions icon" src="/sessions-icon.svg" width={27} height={27} />
         </a>
       </Link>
 
       <Link href="/walletconnect" passHref>
-        <a>
+        <a className="navLink">
           <Avatar
             size="lg"
             css={{ cursor: 'pointer' }}
@@ -29,9 +35,15 @@ export default function Navigation() {
         </a>
       </Link>
 
+      <Link href="/pairings" passHref>
+        <a className="navLink">
+          <Image alt="pairings icon" src="/pairings-icon.svg" width={25} height={25} />
+        </a>
+      </Link>
+
       <Link href="/settings" passHref>
-        <a>
+        <a className="navLink">
-          <Image alt="settings icon" src="/settings-icon.svg" width={35} height={35} />
+          <Image alt="settings icon" src="/settings-icon.svg" width={27} height={27} />
         </a>
       </Link>
     </Row>

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

@@ -0,0 +1,14 @@
+import PageHeader from '@/components/PageHeader'
+import { walletConnectClient } from '@/utils/WalletConnectUtil'
+import { Fragment } from 'react'
+
+export default function PairingsPage() {
+  console.log(walletConnectClient.session.values)
+  console.log(walletConnectClient.session.history.pending)
+
+  return (
+    <Fragment>
+      <PageHeader>Pairings</PageHeader>
+    </Fragment>
+  )
+}

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

@@ -1,20 +1,14 @@
 import PageHeader from '@/components/PageHeader'
-import { truncate } from '@/utils/HelperUtil'
 import { walletConnectClient } from '@/utils/WalletConnectUtil'
-import { useRouter } from 'next/router'
+import { Fragment } from 'react'
-import { Fragment, useEffect } from 'react'
 
 export default function SessionsPage() {
-  const { query } = useRouter()
+  console.log(walletConnectClient.session.values)
-  const address = (query?.address as string) ?? 'Unknown'
+  console.log(walletConnectClient.session.history.pending)
-
-  useEffect(() => {
-    console.log(walletConnectClient.session.values)
-  }, [])
 
   return (
     <Fragment>
-      <PageHeader>{truncate(address, 15)}</PageHeader>
+      <PageHeader>Sessions</PageHeader>
     </Fragment>
   )
 }

wallets/react-wallet-v2/src/views/SessionSendTransactionModal.tsx

@@ -174,7 +174,7 @@ export default function SessionSendTransactionModal() {
           Reject
         </Button>
         <Button auto flat color="success" onClick={onApprove} disabled={loading}>
-          {loading ? <Loading size="sm" color="white" /> : 'Approve'}
+          {loading ? <Loading size="sm" color="success" /> : 'Approve'}
         </Button>
       </Modal.Footer>
     </Fragment>