qr reader styling

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",

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

@@ -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>

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

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

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

@@ -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'
         }}
       >

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<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>
+  )
+}

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;
+}

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 (
     <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>
         }

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:
+valtio@1.2.12:
-  version "1.2.11"
+  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.2.11.tgz#1a49c6a24d774a1f0bb70692b20d93c1f7d40a06"
+  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.2.12.tgz#14f46f6c90b63c6e4176831c68ab9b729fea38ee"
-  integrity sha512-zNbJsBNQ0EpzZnOUpuy6lUlpGSvkZu+/hZ9g7ifY3AQxo1RkqL7Ld6fVxRNLE04tVwOMNiDOgYihpEd6apLrog==
+  integrity sha512-TlQkbSma4aAAgs6tQXrvGilMZBVH0q8gbbWxRbo2R43FhkW4lWi45f9jC6gAdJdC40bsNnYyBsYDB9OOKNlqSw==
   dependencies:
     proxy-compare "2.0.2"