feat: integrate WalletConnet

packages/neuron-ui/package.json

@@ -50,6 +50,7 @@
     "last 2 chrome versions"
   ],
   "dependencies": {
+    "@ckb-connect/walletconnect-wallet-sdk": "0.0.1-alpha.2",
     "@ckb-lumos/base": "0.21.0-next.2",
     "@ckb-lumos/codec": "0.21.0-next.2",
     "@nervosnetwork/ckb-sdk-core": "0.109.0",

packages/neuron-ui/src/components/CameraScanDialog/cameraScanDialog.module.scss

@@ -0,0 +1,15 @@
+@import '../../styles';
+
+.container {
+  margin-bottom: 8px;
+  padding: 0 16px;
+
+  .scanBox {
+    border: 2px solid var(--primary-color);
+    width: 400px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,126 @@
+import React, { useEffect, useRef, useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { askForCameraAccess } from 'services/remote'
+import Dialog from 'widgets/Dialog'
+import LoadingDialog from 'widgets/LoadingDialog'
+import AlertDialog from 'widgets/AlertDialog'
+import { isSuccessResponse } from 'utils'
+import jsQR from 'jsqr'
+
+import styles from './cameraScanDialog.module.scss'
+
+const IMAGE_SIZE = 400
+
+export interface Point {
+  x: number
+  y: number
+}
+
+const CameraScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm: (result: string) => void }) => {
+  const [t] = useTranslation()
+  const videoRef = useRef<HTMLVideoElement>()
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const canvas2dRef = useRef<CanvasRenderingContext2D>()
+  const [dialogType, setDialogType] = useState<'' | 'opening' | 'access-fail' | 'scan'>('')
+
+  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 scan = useCallback(() => {
+    if (videoRef.current?.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
+      setDialogType('scan')
+      const canvas2d = canvasRef.current?.getContext('2d')
+      if (canvas2d) {
+        canvas2d.drawImage(videoRef.current, 0, 0, IMAGE_SIZE, IMAGE_SIZE)
+        canvas2dRef.current = canvas2d
+        const imageData = canvas2d.getImageData(0, 0, IMAGE_SIZE, IMAGE_SIZE)
+        const code = jsQR(imageData.data, imageData.width, imageData.height, {
+          inversionAttempts: 'dontInvert',
+        })
+        if (code) {
+          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)
+          onConfirm(code.data)
+        }
+      }
+    }
+    requestAnimationFrame(scan)
+  }, [setDialogType])
+
+  useEffect(() => {
+    let mediaStream: MediaStream
+
+    askForCameraAccess().then(accessRes => {
+      if (isSuccessResponse(accessRes)) {
+        setDialogType('opening')
+        navigator.mediaDevices
+          .getUserMedia({
+            audio: false,
+            video: { width: IMAGE_SIZE, height: IMAGE_SIZE },
+          })
+          .then(res => {
+            if (res) {
+              videoRef.current = document.createElement('video')
+              videoRef.current.srcObject = res
+              videoRef.current.play()
+              mediaStream = res
+              requestAnimationFrame(scan)
+            }
+          })
+      } else {
+        setDialogType('access-fail')
+      }
+    })
+
+    return () => {
+      if (mediaStream) {
+        mediaStream.getTracks().forEach(track => {
+          track.stop()
+        })
+      }
+    }
+  }, [])
+
+  return (
+    <>
+      <Dialog
+        show={dialogType === 'scan'}
+        title={t('wallet-connect.scan-with-camera')}
+        onCancel={close}
+        showCancel={false}
+        showConfirm={false}
+        showFooter={false}
+      >
+        <div className={styles.container}>
+          <div className={styles.scanBox}>
+            <canvas ref={canvasRef} width="400px" height="400px" />
+          </div>
+        </div>
+      </Dialog>
+
+      <LoadingDialog show={dialogType === 'opening'} message={t('wallet-connect.camera-connecting')} />
+
+      <AlertDialog
+        show={dialogType === 'access-fail'}
+        title={t('wallet-connect.camera-fail')}
+        message={t('wallet-connect.camera-msg')}
+        type="failed"
+        onCancel={() => {
+          close()
+        }}
+      />
+    </>
+  )
+}
+
+CameraScanDialog.displayName = 'CameraScanDialog'
+export default CameraScanDialog

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { captureScreen } from 'services/remote'
+import { isSuccessResponse } from 'utils'
+import { useTranslation } from 'react-i18next'
+import AlertDialog from 'widgets/AlertDialog'
+import LoadingDialog from 'widgets/LoadingDialog'
+import jsQR from 'jsqr'
+
+const ScreenScanDialog = ({ close, onConfirm }: { close: () => void; onConfirm: (result: string[]) => void }) => {
+  const [t] = useTranslation()
+  const [dialogType, setDialogType] = useState<'' | 'scanning' | 'access-fail'>('')
+
+  const handleScanResult = useCallback(async (sources: Controller.CaptureScreenSource[]) => {
+    const uriList = [] as string[]
+
+    const callArr = sources.map(async item => {
+      const image = new Image()
+      image.src = item.dataUrl
+      await new Promise(resolve => {
+        image.addEventListener('load', resolve)
+      })
+
+      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) {
+          uriList.push(code.data)
+        }
+      }
+    })
+
+    await Promise.all(callArr)
+
+    onConfirm(uriList)
+  }, [])
+
+  useEffect(() => {
+    captureScreen().then(res => {
+      if (isSuccessResponse(res)) {
+        setDialogType('scanning')
+        const result = res.result as Controller.CaptureScreenSource[]
+        handleScanResult(result)
+      } else {
+        setDialogType('access-fail')
+      }
+    })
+  }, [])
+
+  return (
+    <>
+      <LoadingDialog show={dialogType === 'scanning'} message={t('wallet-connect.scanning')} />
+
+      <AlertDialog
+        show={dialogType === 'access-fail'}
+        title={t('wallet-connect.screen-fail')}
+        message={t('wallet-connect.screen-msg')}
+        type="failed"
+        onCancel={() => {
+          close()
+        }}
+      />
+    </>
+  )
+}
+
+ScreenScanDialog.displayName = 'ScreenScanDialog'
+export default ScreenScanDialog

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

@@ -32,7 +32,7 @@ interface PasswordDialogProps {
   onSubmit: (pwd: string) => Promise<ControllerResponse>
 }
 
-const PasswordDialog = ({ show, walletName, onCancel, onSubmit }: PasswordDialogProps) => {
+export const PasswordDialog = ({ show, walletName, onCancel, onSubmit }: PasswordDialogProps) => {
   const [t, i18n] = useTranslation()
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')