From e5832fef43baa21da9993d2677ff3dca88c90b92 Mon Sep 17 00:00:00 2001
From: Renfeng Shi <111484932+renfengshi@users.noreply.github.com>
Date: Thu, 21 Sep 2023 14:24:44 +0800
Subject: [PATCH] Fix Scanning (#1763)

* add progress of scanning QR code

* fix delay of scanning
---
 src/ui/component/Progress/index.less          | 22 +++++++++++++++++++
 src/ui/component/Progress/index.tsx           | 19 ++++++++++++++++
 src/ui/component/QRCodeReader/index.tsx       |  5 ++++-
 .../components/QRHardWareWaiting/Reader.tsx   | 17 ++++++++++----
 .../ImportHardware/QRCodeConnect/index.tsx    | 12 ++++++++++
 5 files changed, 70 insertions(+), 5 deletions(-)
 create mode 100644 src/ui/component/Progress/index.less
 create mode 100644 src/ui/component/Progress/index.tsx

diff --git a/src/ui/component/Progress/index.less b/src/ui/component/Progress/index.less
new file mode 100644
index 00000000000..ef29db32ace
--- /dev/null
+++ b/src/ui/component/Progress/index.less
@@ -0,0 +1,22 @@
+.progress {
+  text-align: center;
+  &-bar {
+    width: 100%;
+    background-color: #dadada;
+    border-radius: 3px;
+    overflow: hidden;
+    &::before {
+      content: " ";
+      display: block;
+      height: 6px;
+      width: var(--percent);
+      background-color: #7084ff;
+    }
+  }
+  &-num {
+    font-size: 12px;
+    color: #7084ff;
+    margin-top: 12px;
+    line-height: 1;
+  }
+}
diff --git a/src/ui/component/Progress/index.tsx b/src/ui/component/Progress/index.tsx
new file mode 100644
index 00000000000..2e21d32ee75
--- /dev/null
+++ b/src/ui/component/Progress/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import './index.less';
+
+interface Props {
+  percent: number;
+}
+
+export default function Progress({ percent }: Props) {
+  return (
+    <div className={clsx('progress')}>
+      <div
+        className={clsx('progress-bar')}
+        style={{ '--percent': `${percent}%` }}
+      ></div>
+      <div className={clsx('progress-num')}>{percent}%</div>
+    </div>
+  );
+}
diff --git a/src/ui/component/QRCodeReader/index.tsx b/src/ui/component/QRCodeReader/index.tsx
index 0fb9368b846..bedca9ba8fb 100644
--- a/src/ui/component/QRCodeReader/index.tsx
+++ b/src/ui/component/QRCodeReader/index.tsx
@@ -22,7 +22,10 @@ const QRCodeReader = ({
 }: QRCodeReaderProps) => {
   const [canplay, setCanplay] = useState(false);
   const codeReader = useMemo(() => {
-    return new BrowserQRCodeReader();
+    return new BrowserQRCodeReader(undefined, {
+      delayBetweenScanSuccess: 100,
+      delayBetweenScanAttempts: 50,
+    });
   }, []);
   const videoEl = useRef<HTMLVideoElement>(null);
   const checkCameraPermission = async () => {
diff --git a/src/ui/views/Approval/components/QRHardWareWaiting/Reader.tsx b/src/ui/views/Approval/components/QRHardWareWaiting/Reader.tsx
index d43ea7d669c..d967810d0dc 100644
--- a/src/ui/views/Approval/components/QRHardWareWaiting/Reader.tsx
+++ b/src/ui/views/Approval/components/QRHardWareWaiting/Reader.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { ETHSignature } from '@keystonehq/bc-ur-registry-eth';
 import * as uuid from 'uuid';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { URDecoder } from '@ngraveio/bc-ur';
 import { openInternalPageInTab, useWallet } from 'ui/utils';
 import { useHistory } from 'react-router-dom';
 import { Form } from 'antd';
+import Progress from '@/ui/component/Progress';
 
 const Reader = ({ requestId, setErrorMessage, brandName, onScan }) => {
   const { t } = useTranslation();
@@ -14,9 +15,11 @@ const Reader = ({ requestId, setErrorMessage, brandName, onScan }) => {
   const wallet = useWallet();
   const history = useHistory();
   const [form] = Form.useForm();
+  const [progress, setProgress] = useState(0);
 
   const handleSuccess = async (data) => {
     decoder.current.receivePart(data);
+    setProgress(Math.floor(decoder.current.estimatedPercentComplete() * 100));
     if (decoder.current.isComplete()) {
       const ur = decoder.current.resultUR();
       if (ur.type === 'eth-signature') {
@@ -58,9 +61,15 @@ const Reader = ({ requestId, setErrorMessage, brandName, onScan }) => {
           onError={handleError}
         />
       </div>
-      <p className="text-13 leading-[18px] mb-0 mt-24 text-gray-subTitle font-medium text-center">
-        {t('page.signFooterBar.qrcode.afterSignDesc', { brand: brandName })}
-      </p>
+      {progress > 0 ? (
+        <div className="mt-[24px] m-auto w-[130px]">
+          <Progress percent={progress} />
+        </div>
+      ) : (
+        <p className="text-13 leading-[18px] mb-0 mt-24 text-gray-subTitle font-medium text-center">
+          {t('page.signFooterBar.qrcode.afterSignDesc', { brand: brandName })}
+        </p>
+      )}
     </div>
   );
 };
diff --git a/src/ui/views/ImportHardware/QRCodeConnect/index.tsx b/src/ui/views/ImportHardware/QRCodeConnect/index.tsx
index 2854898b3b8..dbb454d14c2 100644
--- a/src/ui/views/ImportHardware/QRCodeConnect/index.tsx
+++ b/src/ui/views/ImportHardware/QRCodeConnect/index.tsx
@@ -11,6 +11,7 @@ import * as Sentry from '@sentry/browser';
 import { HARDWARE_KEYRING_TYPES, WALLET_BRAND_CONTENT } from 'consts';
 import QRCodeCheckerDetail from 'ui/views/QRCodeCheckerDetail';
 import clsx from 'clsx';
+import Progress from '@/ui/component/Progress';
 
 type Valueof<T> = T[keyof T];
 
@@ -36,6 +37,8 @@ export const QRCodeConnect = () => {
   const brandInfo: Valueof<typeof WALLET_BRAND_CONTENT> =
     WALLET_BRAND_CONTENT[brand] || WALLET_BRAND_CONTENT.Keystone;
 
+  const [progress, setProgress] = useState(0);
+
   const showErrorChecker = useMemo(() => {
     return errorMessage !== '';
   }, [errorMessage]);
@@ -43,6 +46,7 @@ export const QRCodeConnect = () => {
   const handleScanQRCodeSuccess = async (data) => {
     try {
       decoder.current.receivePart(data);
+      setProgress(Math.floor(decoder.current.estimatedPercentComplete() * 100));
       if (decoder.current.isComplete()) {
         const result = decoder.current.resultUR();
         if (result.type === 'crypto-hdkey') {
@@ -134,6 +138,8 @@ export const QRCodeConnect = () => {
   const handleScan = () => {
     setErrorMessage('');
     setScan(true);
+    setProgress(0);
+    decoder.current = new URDecoder();
   };
   return (
     <div className="bg-gray-bg2 h-full flex">
@@ -171,6 +177,12 @@ export const QRCodeConnect = () => {
             )}
           </div>
 
+          {progress > 0 && (
+            <div className="mt-[24px] m-auto w-[130px]">
+              <Progress percent={progress} />
+            </div>
+          )}
+
           {showErrorChecker && (
             <QRCodeCheckerDetail
               visible={showErrorChecker}