deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Nav menu

Browse Source
This commit is contained in:
Ilja 2022-02-08 16:07:19 +02:00
parent 35947268a0
commit 364661955a
8 changed files with 123 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wallets/react-wallet-v2/package.json
View File

@ -2,7 +2,7 @@
"name": "react-wallet-v2",
"private": true,
"scripts": {
"dev": "next dev -p 3100",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
@ -22,7 +22,7 @@
},
"devDependencies": {
"@walletconnect/types": "2.0.0-beta.22",
"@types/node": "17.0.15",
"@types/node": "17.0.16",
"@types/react": "17.0.39",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",

24
wallets/react-wallet-v2/public/accounts-icon.svg Normal file
View File

@ -0,0 +1,24 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M160 368H448M160 144H448H160ZM160 256H448H160Z" stroke="url(#paint0_linear_46_13)" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M80 160C88.8366 160 96 152.837 96 144C96 135.163 88.8366 128 80 128C71.1634 128 64 135.163 64 144C64 152.837 71.1634 160 80 160Z" stroke="url(#paint1_linear_46_13)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M80 272C88.8366 272 96 264.837 96 256C96 247.163 88.8366 240 80 240C71.1634 240 64 247.163 64 256C64 264.837 71.1634 272 80 272Z" stroke="url(#paint2_linear_46_13)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M80 384C88.8366 384 96 376.837 96 368C96 359.163 88.8366 352 80 352C71.1634 352 64 359.163 64 368C64 376.837 71.1634 384 80 384Z" stroke="url(#paint3_linear_46_13)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_46_13" x1="160" y1="144.018" x2="380.191" y2="421.745" gradientUnits="userSpaceOnUse">
<stop stop-color="#A562D5"/>
<stop offset="1" stop-color="#306FEB"/>
</linearGradient>
<linearGradient id="paint1_linear_46_13" x1="64" y1="128.003" x2="96.3014" y2="159.69" gradientUnits="userSpaceOnUse">
<stop stop-color="#A562D5"/>
<stop offset="1" stop-color="#306FEB"/>
</linearGradient>
<linearGradient id="paint2_linear_46_13" x1="64" y1="240.003" x2="96.3014" y2="271.69" gradientUnits="userSpaceOnUse">
<stop stop-color="#A562D5"/>
<stop offset="1" stop-color="#306FEB"/>
</linearGradient>
<linearGradient id="paint3_linear_46_13" x1="64" y1="352.003" x2="96.3014" y2="383.69" gradientUnits="userSpaceOnUse">
<stop stop-color="#A562D5"/>
<stop offset="1" stop-color="#306FEB"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

9
wallets/react-wallet-v2/public/settings-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

3
wallets/react-wallet-v2/public/wallet-connect-logo.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="388" height="238" viewBox="0 0 388 238" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M79.4993 46.539C142.716 -15.355 245.209 -15.355 308.426 46.539L316.034 53.988C319.195 57.0827 319.195 62.1002 316.034 65.1949L290.008 90.6766C288.427 92.2239 285.865 92.2239 284.285 90.6766L273.815 80.4258C229.714 37.247 158.211 37.247 114.11 80.4258L102.898 91.4035C101.317 92.9509 98.7551 92.9509 97.1747 91.4035L71.1486 65.9219C67.9878 62.8272 67.9878 57.8096 71.1486 54.715L79.4993 46.539ZM362.25 99.2378L385.413 121.917C388.574 125.011 388.574 130.029 385.413 133.123L280.969 235.385C277.808 238.48 272.683 238.48 269.522 235.385C269.522 235.385 269.522 235.385 269.522 235.385L195.394 162.807C194.604 162.033 193.322 162.033 192.532 162.807C192.532 162.807 192.532 162.807 192.532 162.807L118.405 235.385C115.244 238.48 110.12 238.48 106.959 235.385C106.959 235.385 106.959 235.385 106.959 235.385L2.51129 133.122C-0.649517 130.027 -0.649517 125.01 2.51129 121.915L25.6746 99.2365C28.8354 96.1418 33.9601 96.1418 37.1209 99.2365L111.25 171.816C112.041 172.589 113.322 172.589 114.112 171.816C114.112 171.816 114.112 171.815 114.112 171.815L188.238 99.2365C191.399 96.1417 196.523 96.1416 199.684 99.2362C199.684 99.2362 199.684 99.2363 199.684 99.2363L273.814 171.815C274.604 172.589 275.885 172.589 276.675 171.815L350.804 99.2378C353.964 96.1431 359.089 96.1431 362.25 99.2378Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
wallets/react-wallet-v2/src/components/AccountCard.tsx
View File

@ -1,6 +1,5 @@
import { truncate } from '@/utils/HelperUtil'
import { Avatar, Button, Card, Text } from '@nextui-org/react'
import { Paper } from 'react-iconly'
import { Avatar, Card, Text } from '@nextui-org/react'
interface Props {
name: string
@ -16,14 +15,19 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
borderWeight="light"
css={{
borderColor: `rgba(${rgb}, 0.4)`,
boxShadow: `0 0 10px 0 rgba(${rgb}, 0.2)`,
boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
backgroundColor: `rgba(${rgb}, 0.25)`,
marginBottom: '$6',
overflowY: 'hidden',
minHeight: '70px'
}}
>
<Card.Body
css={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
css={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
overflow: 'hidden'
}}
>
<Avatar src={logo} />
<div style={{ flex: 1 }}>
@ -34,7 +38,6 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
{truncate(address, 19)}
</Text>
</div>
<Button auto flat color="primary" icon={<Paper filled />} />
</Card.Body>
</Card>
)

44
wallets/react-wallet-v2/src/components/Layout.tsx
View File

@ -1,4 +1,5 @@
import { Card, Container, Divider, Loading } from '@nextui-org/react'
import Navigation from '@/components/Navigation'
import { Card, Container, Loading } from '@nextui-org/react'
import { Fragment, ReactNode } from 'react'
/**
@ -12,30 +13,51 @@ interface Props {
/**
* Container
*/
export default function GlobalLayout({ children, initialized }: Props) {
export default function Layout({ children, initialized }: Props) {
return (
<Container
display="flex"
justify="center"
alignItems="center"
css={{ width: '100vw', height: '100vh' }}
css={{
width: '100vw',
height: '100vh',
paddingLeft: 0,
paddingRight: 0
}}
>
<Card
bordered
borderWeight="light"
bordered={{ '@initial': false, '@xs': true }}
borderWeight={{ '@initial': 'light', '@xs': 'light' }}
css={{
height: '92vh',
maxWidth: '500px',
height: '100vh',
width: '100%',
justifyContent: initialized ? 'normal' : 'center',
alignItems: initialized ? 'normal' : 'center'
alignItems: initialized ? 'normal' : 'center',
borderRadius: 0,
'@xs': {
borderRadius: '$lg',
height: '93vh',
maxWidth: '450px'
}
}}
>
{initialized ? (
<Fragment>
<Card.Body css={{ overflow: 'scroll' }}>{children}</Card.Body>
<Divider />
<Card.Footer>Footer</Card.Footer>
<Card.Body
css={{
padding: 0,
'@xs': {
padding: '20px'
}
}}
>
{children}
</Card.Body>
<Card.Footer>
<Navigation />
</Card.Footer>
</Fragment>
) : (
<Loading />

39
wallets/react-wallet-v2/src/components/Navigation.tsx Normal file
View File

@ -0,0 +1,39 @@
import { Avatar, Row } from '@nextui-org/react'
import Image from 'next/image'
import Link from 'next/link'
export default function Navigation() {
return (
<Row justify="space-between" align="center" css={{ width: '80%', margin: '0 auto' }}>
<Link href="/" passHref>
<a>
<Image alt="accounts icon" src="/accounts-icon.svg" width={30} height={30} />
</a>
</Link>
<Link href="/walletconnect" passHref>
<a>
<Avatar
size="lg"
css={{ cursor: 'pointer' }}
color="gradient"
icon={
<Image
alt="wallet connect icon"
src="/wallet-connect-logo.svg"
width={30}
height={30}
/>
}
/>
</a>
</Link>
<Link href="/settings" passHref>
<a>
<Image alt="settings icon" src="/settings-icon.svg" width={35} height={35} />
</a>
</Link>
</Row>
)
}

8
wallets/react-wallet-v2/yarn.lock
View File

@ -555,10 +555,10 @@
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
"@types/node@17.0.15":
version "17.0.15"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.15.tgz#97779282c09c09577120a2162e71d8380003590a"
integrity sha512-zWt4SDDv1S9WRBNxLFxFRHxdD9tvH8f5/kg5/IaLFdnSNXsDY4eL3Q3XXN+VxUnWIhyVFDwcsmAprvwXoM/ClA==
"@types/node@17.0.16":
version "17.0.16"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.16.tgz#e3733f46797b9df9e853ca9f719c8a6f7b84cd26"
integrity sha512-ydLaGVfQOQ6hI1xK2A5nVh8bl0OGoIfYMxPWHqqYe9bTkWCfqiVvZoh2I/QF2sNSkZzZyROBoTefIEI+PB6iIA==
"@types/prop-types@*":
version "15.7.4"