prep session and pairing pages
This commit is contained in:
Ilja
parent
c3daa5b2a9
commit
c94076a35c
@ -49,4 +49,12 @@
|
||||
.codeBlock span {
|
||||
background-color: transparent !important;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.navLink {
|
||||
transition: ease-in-out .2s opacity;
|
||||
}
|
||||
|
||||
.navLink:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
59
wallets/react-wallet-v2/public/pairings-icon.svg
Normal file
59
wallets/react-wallet-v2/public/pairings-icon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
19
wallets/react-wallet-v2/public/sessions-icon.svg
Normal file
19
wallets/react-wallet-v2/public/sessions-icon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -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
|
||||
bordered
|
||||
clickable
|
||||
borderWeight="light"
|
||||
<Card
|
||||
bordered
|
||||
borderWeight="light"
|
||||
css={{
|
||||
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)`,
|
||||
boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
|
||||
backgroundColor: `rgba(${rgb}, 0.25)`,
|
||||
marginBottom: '$6',
|
||||
minHeight: '70px'
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<Text weight="light" size={13} css={{ marginLeft: '$9' }}>
|
||||
{truncate(address, 19)}
|
||||
</Text>
|
||||
</div>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Link>
|
||||
<Avatar src={logo} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<Text h5 css={{ marginLeft: '$9' }}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text weight="light" size={13} css={{ marginLeft: '$9' }}>
|
||||
{truncate(address, 19)}
|
||||
</Text>
|
||||
</div>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
<Image alt="accounts icon" src="/accounts-icon.svg" width={30} height={30} />
|
||||
<a className="navLink">
|
||||
<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>
|
||||
<Image alt="settings icon" src="/settings-icon.svg" width={35} height={35} />
|
||||
<a className="navLink">
|
||||
<Image alt="settings icon" src="/settings-icon.svg" width={27} height={27} />
|
||||
</a>
|
||||
</Link>
|
||||
</Row>
|
||||
|
||||
14
wallets/react-wallet-v2/src/pages/pairings.tsx
Normal file
14
wallets/react-wallet-v2/src/pages/pairings.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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, useEffect } from 'react'
|
||||
import { Fragment } from 'react'
|
||||
|
||||
export default function SessionsPage() {
|
||||
const { query } = useRouter()
|
||||
const address = (query?.address as string) ?? 'Unknown'
|
||||
|
||||
useEffect(() => {
|
||||
console.log(walletConnectClient.session.values)
|
||||
}, [])
|
||||
console.log(walletConnectClient.session.values)
|
||||
console.log(walletConnectClient.session.history.pending)
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageHeader>{truncate(address, 15)}</PageHeader>
|
||||
<PageHeader>Sessions</PageHeader>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user