feat: update screenScan

Author: devchenyan

packages/neuron-ui/src/components/ScreenScanDialog/index.tsx

@@ -1,126 +1,62 @@
-import React, { useEffect, useRef, useMemo, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import { captureScreen } from 'services/remote'
-import Button from 'widgets/Button'
 import { isSuccessResponse } from 'utils'
 import { useTranslation } from 'react-i18next'
-import Dialog from 'widgets/Dialog'
 import AlertDialog from 'widgets/AlertDialog'
+import LoadingDialog from 'widgets/LoadingDialog'
 import jsQR from 'jsqr'
 
-import styles from './screenScanDialog.module.scss'
-
-interface Point {
-  x: number
-  y: number
-}
-
-const ScreenScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm: (result: string) => void }) => {
+const ScreenScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm: (result: string[]) => void }) => {
   const [t] = useTranslation()
-  const imgRef = useRef<HTMLImageElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const canvas2dRef = useRef<CanvasRenderingContext2D>()
-  const [sources, setSources] = useState<Controller.CaptureScreenSource[]>([])
-  const [selectId, setSelectId] = useState('')
-  const [dialogType, setDialogType] = useState<'' | 'access-fail' | 'scan'>('')
-  const [uri, setUri] = useState('')
+  const [dialogType, setDialogType] = useState<'' | 'scanning' | 'access-fail'>('')
 
-  const drawLine = (begin: Point, end: Point) => {
-    if (!canvas2dRef.current) return
-    canvas2dRef.current.beginPath()
-    canvas2dRef.current.moveTo(begin.x, begin.y)
-    canvas2dRef.current.lineTo(end.x, end.y)
-    canvas2dRef.current.lineWidth = 4
-    canvas2dRef.current.strokeStyle = '#00c891'
-    canvas2dRef.current.stroke()
-  }
+  const handleScanResult = useCallback(async (sources: Controller.CaptureScreenSource[]) => {
+    const uriList = [] as string[]
 
-  const source = useMemo(() => sources.find(item => item.id === selectId), [selectId, sources])
+    const callArr = sources.map(async item => {
+      const image = new Image()
+      image.src = item.dataUrl
+      await new Promise(resolve => {
+        image.addEventListener('load', resolve)
+      })
 
-  useEffect(() => {
-    if (!source) return
-
-    if (imgRef.current) {
-      const { width, height } = imgRef.current
-      canvasRef.current?.setAttribute('height', `${height}px`)
-      canvasRef.current?.setAttribute('width', `${width}px`)
-      const canvas2d = canvasRef.current?.getContext('2d')
-      if (canvas2d) {
-        canvas2d.drawImage(imgRef.current, 0, 0, width, height)
-
-        canvas2dRef.current = canvas2d
-        const imageData = canvas2d.getImageData(0, 0, width, height)
-        const code = jsQR(imageData.data, imageData.width, imageData.height, {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.width
+      canvas.height = image.height
+      const context = canvas.getContext('2d')
+      if (context) {
+        context.imageSmoothingEnabled = false
+        context.drawImage(image, 0, 0)
+        const imageData = context.getImageData(0, 0, image.width, image.height)
+        const code = jsQR(imageData.data, image.width, image.height, {
           inversionAttempts: 'dontInvert',
         })
-
         if (code?.data) {
-          drawLine(code.location.topLeftCorner, code.location.topRightCorner)
-          drawLine(code.location.topRightCorner, code.location.bottomRightCorner)
-          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner)
-          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner)
-          setUri(code.data)
+          uriList.push(code.data)
         }
       }
-    }
-  }, [source])
+    })
+
+    await Promise.all(callArr)
+
+    onConfirm(uriList)
+  }, [])
 
   useEffect(() => {
     captureScreen().then(res => {
       if (isSuccessResponse(res)) {
-        setDialogType('scan')
+        setDialogType('scanning')
         const result = res.result as Controller.CaptureScreenSource[]
-        setSources(result)
-        if (result.length) {
-          setSelectId(result[0].id)
-        }
+        handleScanResult(result)
       } else {
         setDialogType('access-fail')
       }
     })
   }, [])
 
-  const handleSelect = (e: React.SyntheticEvent<HTMLButtonElement>) => {
-    const { idx = '' } = e.currentTarget.dataset
-    if (idx !== selectId) {
-      setSelectId(idx)
-      setUri('')
-    }
-  }
-
-  const handleConfirm = () => {
-    onConfirm(uri)
-  }
-
   return (
     <>
-      <Dialog
-        show={dialogType === 'scan'}
-        title={t('wallet-connect.scan-qrcode')}
-        onCancel={close}
-        disabled={!uri}
-        onConfirm={handleConfirm}
-        className={styles.scanDialog}
-      >
-        <div className={styles.container}>
-          <div className={styles.chooseBox}>
-            {sources.map(({ dataUrl, id }) => (
-              <Button
-                key={id}
-                className={styles.chooseItem}
-                data-idx={id}
-                data-active={selectId === id}
-                onClick={handleSelect}
-              >
-                <img src={dataUrl} alt="" />
-              </Button>
-            ))}
-          </div>
-          <div className={styles.scanBox}>
-            <canvas ref={canvasRef} />
-            {source ? <img ref={imgRef} src={source?.dataUrl} alt="" /> : null}
-          </div>
-        </div>
-      </Dialog>
+      <LoadingDialog show={dialogType === 'scanning'} message={t('wallet-connect.scanning')} />
 
       <AlertDialog
         show={dialogType === 'access-fail'}

packages/neuron-ui/src/components/ScreenScanDialog/screenScanDialog.module.scss

@@ -60,16 +60,31 @@ const WalletConnect = () => {
   )
 
   const handleConnect = useCallback(
-    async (url: string) => {
-      setDialogType('')
+    async (url: string | string[]) => {
+      setDialogType('connecting')
       setUri('')
 
-      setDialogType('connecting')
+      const urlArr = typeof url === 'string' ? [url] : url
 
-      const res = await onConnect(url)
+      if (!urlArr.length) {
+        setDialogType('invalid-qrcode')
+        return
+      }
 
-      if (isSuccessResponse(res)) {
-        setDialogType('')
+      let successFlag = true
+      const callArr = urlArr.map(async item => {
+        const res = await onConnect(item)
+        if (!isSuccessResponse(res)) {
+          successFlag = false
+        }
+      })
+
+      await Promise.all(callArr)
+
+      if (successFlag) {
+        setTimeout(() => {
+          setDialogType('')
+        }, 2000)
       } else {
         setDialogType('invalid-qrcode')
       }

packages/neuron-ui/src/components/WalletConnect/index.tsx

@@ -3,7 +3,13 @@ import { createPortal } from 'react-dom'
 import { useLocation, NavLink, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { NeuronWalletActions, showGlobalAlertDialog, useDispatch, useState as useGlobalState } from 'states'
-import { VerifyExternalCkbNodeRes, checkForUpdates, getVersion, verifyExternalCkbNode } from 'services/remote'
+import {
+  VerifyExternalCkbNodeRes,
+  checkForUpdates,
+  getVersion,
+  verifyExternalCkbNode,
+  getWCState,
+} from 'services/remote'
 import { AppUpdater as AppUpdaterSubject, WalletConnectUpdate as WalletConnectUpdateSubject } from 'services/subjects'
 import { AppActions } from 'states/stateProvider/reducer'
 import Badge from 'widgets/Badge'
@@ -115,6 +121,15 @@ const Navbar = () => {
         setVerifyCkbResult(res.result)
       }
     })
+
+    getWCState().then(res => {
+      if (isSuccessResponse(res) && res.result) {
+        dispatch({
+          type: AppActions.UpdateWalletConnectState,
+          payload: res.result,
+        })
+      }
+    })
   }, [])
 
   useEffect(() => {

packages/neuron-ui/src/containers/Navbar/index.tsx

@@ -1160,6 +1160,7 @@
       "uri-placeholder": "Please input the uri",
       "connect": "Connect",
       "connecting": "Connecting your wallet via WalletConnect now",
+      "scanning": "Scanning the QR code in the screen",
       "invalid-qrcode": "Invalid QR code",
       "invalid-qrcode-tip": "Make sure the WalletConnect QR code on the screen/camera feed is valid",
       "connected-session": "Established connections",

packages/neuron-ui/src/locales/en.json

@@ -1131,6 +1131,7 @@
       "uri-placeholder": "請輸入連結碼",
       "connect": "連結",
       "connecting": "正在通過WalletConnect連結你的錢包",
+      "scanning": "正在掃描屏幕二維碼",
       "invalid-qrcode": "無效的二維碼",
       "invalid-qrcode-tip": "請確保屏幕上/攝像頭畫面中的WalletConnect二維碼有效",
       "connected-session": "已建立的連結",

packages/neuron-ui/src/locales/zh-tw.json

@@ -1152,6 +1152,7 @@
       "uri-placeholder": "请输入连接码",
       "connect": "连接",
       "connecting": "正在通过WalletConnect连接你的钱包",
+      "scanning": "正在扫描屏幕二维码",
       "invalid-qrcode": "无效的二维码",
       "invalid-qrcode-tip": "请确保屏幕上/摄像头画面中的WalletConnect二维码有效",
       "connected-session": "已建立的连接",

packages/neuron-ui/src/locales/zh.json

@@ -158,6 +158,7 @@ type Action =
   | 'wc-reject-session'
   | 'wc-approve-request'
   | 'wc-reject-request'
+  | 'wc-get-state'
   | 'ask-camera-access'
   | 'capture-screen'
 

packages/neuron-ui/src/services/remote/remoteApiWrapper.ts

@@ -3,6 +3,7 @@ import { remoteApi } from './remoteApiWrapper'
 
 export const connect = remoteApi<string>('wc-connect')
 export const disconnect = remoteApi<string>('wc-disconnect')
+export const getWCState = remoteApi<void>('wc-get-state')
 export const approveSession = remoteApi<{
   id: number
   scriptBases: string[]

packages/neuron-ui/src/services/remote/walletConnect.ts

@@ -841,6 +841,9 @@ export default class ApiController {
     handle('wc-reject-request', async (_, params) => {
       return this.#walletConnectController.rejectRequest(params)
     })
+    handle('wc-get-state', async _ => {
+      return this.#walletConnectController.getState()
+    })
   }
 
   // Register handler, warp and serialize API response