From c0fe3a5b22295e1ec8cf0c6f98829c932c8282f9 Mon Sep 17 00:00:00 2001 From: Ilja Date: Wed, 9 Feb 2022 14:32:32 +0200 Subject: [PATCH] qr reader styling --- wallets/react-wallet-v2/package.json | 4 +- wallets/react-wallet-v2/public/qr-icon.svg | 13 ++++ .../react-wallet-v2/src/components/Layout.tsx | 2 +- .../src/components/PageHeader.tsx | 2 +- .../src/components/QrReader/index.tsx | 78 +++++++++++++++++++ .../src/components/QrReader/styles.module.css | 25 ++++++ .../src/pages/walletconnect.tsx | 21 ++++- wallets/react-wallet-v2/yarn.lock | 26 ++++--- 8 files changed, 154 insertions(+), 17 deletions(-) create mode 100644 wallets/react-wallet-v2/public/qr-icon.svg create mode 100644 wallets/react-wallet-v2/src/components/QrReader/index.tsx create mode 100644 wallets/react-wallet-v2/src/components/QrReader/styles.module.css diff --git a/wallets/react-wallet-v2/package.json b/wallets/react-wallet-v2/package.json index c5bbab4..15ac2ce 100644 --- a/wallets/react-wallet-v2/package.json +++ b/wallets/react-wallet-v2/package.json @@ -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", diff --git a/wallets/react-wallet-v2/public/qr-icon.svg b/wallets/react-wallet-v2/public/qr-icon.svg new file mode 100644 index 0000000..caf6441 --- /dev/null +++ b/wallets/react-wallet-v2/public/qr-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wallets/react-wallet-v2/src/components/Layout.tsx b/wallets/react-wallet-v2/src/components/Layout.tsx index d879daf..4ba859c 100644 --- a/wallets/react-wallet-v2/src/components/Layout.tsx +++ b/wallets/react-wallet-v2/src/components/Layout.tsx @@ -46,7 +46,7 @@ export default function Layout({ children, initialized }: Props) { diff --git a/wallets/react-wallet-v2/src/components/QrReader/index.tsx b/wallets/react-wallet-v2/src/components/QrReader/index.tsx new file mode 100644 index 0000000..a68a72b --- /dev/null +++ b/wallets/react-wallet-v2/src/components/QrReader/index.tsx @@ -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 +} + +/** + * 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 ( +
+ {show ? ( + + {loading && } +
+ setLoading(false)} + showViewFinder={false} + onError={onError} + onScan={onScan} + style={{ width: '100%' }} + /> +
+ + ) : ( +
+ qr code icon + +
+ )} +
+ ) +} diff --git a/wallets/react-wallet-v2/src/components/QrReader/styles.module.css b/wallets/react-wallet-v2/src/components/QrReader/styles.module.css new file mode 100644 index 0000000..5e9225f --- /dev/null +++ b/wallets/react-wallet-v2/src/components/QrReader/styles.module.css @@ -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; +} \ No newline at end of file diff --git a/wallets/react-wallet-v2/src/pages/walletconnect.tsx b/wallets/react-wallet-v2/src/pages/walletconnect.tsx index 862d973..a17dab5 100644 --- a/wallets/react-wallet-v2/src/pages/walletconnect.tsx +++ b/wallets/react-wallet-v2/src/pages/walletconnect.tsx @@ -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 ( WalletConnect + + + + + or use walletconnect uri + + setUri(e.target.value)} value={uri} contentRight={ - } diff --git a/wallets/react-wallet-v2/yarn.lock b/wallets/react-wallet-v2/yarn.lock index 54f3bc9..b97a525 100644 --- a/wallets/react-wallet-v2/yarn.lock +++ b/wallets/react-wallet-v2/yarn.lock @@ -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"