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

qr reader styling

Browse Source
This commit is contained in:
Ilja 2022-02-09 14:32:32 +02:00
parent 364661955a
commit c0fe3a5b22
8 changed files with 154 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,9 +16,9 @@
"next-themes": "0.0.15",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-iconly": "2.2.5",
"react-qr-reader-es6": "2.2.1-2",
"ethers": "5.5.4",
"valtio": "1.2.11"
"valtio": "1.2.12"
},
"devDependencies": {
"@walletconnect/types": "2.0.0-beta.22",

13
wallets/react-wallet-v2/public/qr-icon.svg Normal file
View File

@ -0,0 +1,13 @@
<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="#8B8B8B"/>
<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="#8B8B8B"/>
<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="#8B8B8B"/>
<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="#8B8B8B"/>
<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="#8B8B8B"/>
<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="#8B8B8B"/>
<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="#8B8B8B" 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="#8B8B8B"/>
<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="#8B8B8B" 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="#8B8B8B"/>
<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="#8B8B8B" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

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

@ -46,7 +46,7 @@ export default function Layout({ children, initialized }: Props) {
<Fragment>
<Card.Body
css={{
padding: 0,
padding: 2,
'@xs': {
padding: '20px'
}

2
wallets/react-wallet-v2/src/components/PageHeader.tsx
View File

@ -18,7 +18,7 @@ export default function PageHeader({ children }: Props) {
h3
weight="bold"
css={{
textGradient: '45deg, $primary, $secondary 100%',
textGradient: '90deg, $secondary, $primary 30%',
marginBottom: '$5'
}}
>

78
wallets/react-wallet-v2/src/components/QrReader/index.tsx Normal file
View File

@ -0,0 +1,78 @@
import { Button, Loading } from '@nextui-org/react'
import dynamic from 'next/dynamic'
import Image from 'next/image'
import { Fragment, useState } from 'react'
import s from './styles.module.css'
/**
* You can use normal import if you are not within next / ssr environment
* @info https://nextjs.org/docs/advanced-features/dynamic-import
*/
const ReactQrReader = dynamic(() => import('react-qr-reader-es6'), { ssr: false })
/**
* Types
*/
interface IProps {
onConnect: (uri: string) => Promise<void>
}
/**
* Component
*/
export default function QrReader({ onConnect }: IProps) {
const [show, setShow] = useState(false)
const [loading, setLoading] = useState(false)
function onError() {
setShow(false)
}
async function onScan(data: string | null) {
if (data) {
await onConnect(data)
setShow(false)
}
}
function onShowScanner() {
setLoading(true)
setShow(true)
}
return (
<div className={s.container}>
{show ? (
<Fragment>
{loading && <Loading css={{ position: 'absolute' }} />}
<div className={s.mask}>
<ReactQrReader
onLoad={() => setLoading(false)}
showViewFinder={false}
onError={onError}
onScan={onScan}
style={{ width: '100%' }}
/>
</div>
</Fragment>
) : (
<div className={`${s.container} ${s.placeholder}`}>
<Image
src="/qr-icon.svg"
width={100}
height={100}
alt="qr code icon"
className={s.icon}
/>
<Button
color="gradient"
css={{ marginTop: '$10', width: '100%' }}
onClick={onShowScanner}
>
Scan QR code
</Button>
</div>
)}
</div>
)
}

25
wallets/react-wallet-v2/src/components/QrReader/styles.module.css Normal file
View File

@ -0,0 +1,25 @@
.container {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mask {
width: 100%;
border-radius: 15px;
overflow: hidden;
position: relative;
}
.placeholder {
border: 2px rgba(139, 139, 139, 0.4) dashed;
width: 100%;
border-radius: 15px;
padding: 50px;
}
.icon {
opacity: 0.3;
}

21
wallets/react-wallet-v2/src/pages/walletconnect.tsx
View File

@ -1,13 +1,14 @@
import PageHeader from '@/components/PageHeader'
import QrReader from '@/components/QrReader'
import { client } from '@/utils/WalletConnectUtil'
import { Button, Input, Loading } from '@nextui-org/react'
import { Button, Input, Loading, Text } from '@nextui-org/react'
import { Fragment, useState } from 'react'
export default function WalletConnectPage() {
const [uri, setUri] = useState('')
const [loading, setLoading] = useState(false)
async function onConnect() {
async function onConnect(uri: string) {
try {
setLoading(true)
await client?.pair({ uri })
@ -21,14 +22,26 @@ export default function WalletConnectPage() {
return (
<Fragment>
<PageHeader>WalletConnect</PageHeader>
<QrReader onConnect={onConnect} />
<Text size={13} css={{ textAlign: 'center', marginTop: '$10', marginBottom: '$10' }}>
or use walletconnect uri
</Text>
<Input
bordered
label="WalletConnect URI"
placeholder="e.g. wc:a281567bb3e4..."
onChange={e => setUri(e.target.value)}
value={uri}
contentRight={
<Button size="xs" disabled={!uri} css={{ marginLeft: -60 }} onClick={onConnect}>
<Button
size="xs"
disabled={!uri}
css={{ marginLeft: -60 }}
onClick={() => onConnect(uri)}
color="gradient"
>
{loading ? <Loading size="sm" /> : 'Connect'}
</Button>
}

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

@ -1994,6 +1994,11 @@ json5@^1.0.1:
dependencies:
minimist "^1.2.0"
jsqr-es6@^1.4.0-1:
version "1.4.0-1"
resolved "https://registry.yarnpkg.com/jsqr-es6/-/jsqr-es6-1.4.0-1.tgz#e72d94a0ed794c6f19d87682ac89fab2a0f8496b"
integrity sha512-LPWZJLI+3LLOy9k3/s/MeXlkfNOs3bYBX5O+fp4N0XuxbgO8H7Uc/nYZeNwo13nSZXRW9xWFKmZdy9591+PyAg==
"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
@ -2506,16 +2511,19 @@ react-dom@17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
react-iconly@2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-iconly/-/react-iconly-2.2.5.tgz#32b9a1d66815ae6a421026694e7d16027248d87f"
integrity sha512-c9WO/2TJltmyCVGj+/mdJZFoldfzYA8uUPmcml03D6YlBVWsCN5gq5Vb2k95qmeg+vSqMRvC69yghZvM0T4lKQ==
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-qr-reader-es6@2.2.1-2:
version "2.2.1-2"
resolved "https://registry.yarnpkg.com/react-qr-reader-es6/-/react-qr-reader-es6-2.2.1-2.tgz#d1e23881db4775e57ea82a8a7719d5e9d34879fe"
integrity sha512-pDNH8FoR3fOBBCgh4ImKHlX+pv/D3P8JmE+vjjcw3+YTEUgBqUAZbIkD/WUE3HzhVhN2zx7ZLBhO9vJngnjJxw==
dependencies:
jsqr-es6 "^1.4.0-1"
prop-types "^15.7.2"
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -2965,10 +2973,10 @@ v8-compile-cache@^2.0.3:
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
valtio@1.2.11:
version "1.2.11"
resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.2.11.tgz#1a49c6a24d774a1f0bb70692b20d93c1f7d40a06"
integrity sha512-zNbJsBNQ0EpzZnOUpuy6lUlpGSvkZu+/hZ9g7ifY3AQxo1RkqL7Ld6fVxRNLE04tVwOMNiDOgYihpEd6apLrog==
valtio@1.2.12:
version "1.2.12"
resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.2.12.tgz#14f46f6c90b63c6e4176831c68ab9b729fea38ee"
integrity sha512-TlQkbSma4aAAgs6tQXrvGilMZBVH0q8gbbWxRbo2R43FhkW4lWi45f9jC6gAdJdC40bsNnYyBsYDB9OOKNlqSw==
dependencies:
proxy-compare "2.0.2"