OK-23599: add request camera permission

OneKeyHQ · Oct 18, 2023 · 0bfa89f · 0bfa89f
1 parent a34d8e6
commit 0bfa89f
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 0 deletions.
diff --git a/packages/kit/src/routes/Root/Modal/ScanQrcode.tsx b/packages/kit/src/routes/Root/Modal/ScanQrcode.tsx
@@ -1,6 +1,7 @@
 import { useIsVerticalLayout } from '@onekeyhq/components';
 
 import PreviewSend from '../../../views/ScanQrcode/PreviewSend';
+import RequestCameraPermissionExt from '../../../views/ScanQrcode/RequestCameraPermissionExt';
 import ScanQrcode from '../../../views/ScanQrcode/ScanQrcode';
 import ScanQrcodeResult from '../../../views/ScanQrcode/ScanQrcodeResult';
 import { ScanQrcodeRoutes } from '../../../views/ScanQrcode/types';
@@ -22,6 +23,10 @@ const modalRoutes = [
     name: ScanQrcodeRoutes.PreviewSend,
     component: PreviewSend,
   },
+  {
+    name: ScanQrcodeRoutes.RequestPermission,
+    component: RequestCameraPermissionExt,
+  },
 ];
 
 const ScanQrcodeStack = () => {

diff --git a/packages/kit/src/routes/linking.ts b/packages/kit/src/routes/linking.ts
@@ -10,6 +10,7 @@ import {
 } from '../components/WalletConnect/walletConnectConsts';
 import { getExtensionIndexHtml } from '../utils/extUtils.getHtml';
 import { EOnboardingRoutes } from '../views/Onboarding/routes/enums';
+import { ScanQrcodeRoutes } from '../views/ScanQrcode/types';
 
 import { legacyLinkingPathMap, linkingPathMap } from './linking.path';
 import {
@@ -186,6 +187,9 @@ export const normalRouteWhiteList: WhiteListItemList = [
   {
     screen: `${RootRoutes.Modal}/${ModalRoutes.Send}/${SendModalRoutes.LNURLWithdraw}`,
   },
+  {
+    screen: `${RootRoutes.Modal}/${ModalRoutes.ScanQrcode}/${ScanQrcodeRoutes.RequestPermission}`,
+  },
   /**
    * refresh page will flash the last item of normalRouteWhiteList
    * ** please add exact routes above here

diff --git a/packages/kit/src/views/ScanQrcode/PermitDeniedDialog.tsx b/packages/kit/src/views/ScanQrcode/PermitDeniedDialog.tsx
@@ -0,0 +1,39 @@
+import { useIntl } from 'react-intl';
+
+import { Dialog, Icon } from '@onekeyhq/components';
+
+import backgroundApiProxy from '../../background/instance/backgroundApiProxy';
+import { ModalRoutes, RootRoutes } from '../../routes/routesEnum';
+
+import { ScanQrcodeRoutes } from './types';
+
+export const PermitDeniedDialog = () => {
+  const intl = useIntl();
+  return (
+    <Dialog
+      visible
+      contentProps={{
+        icon: <Icon name="ExclamationTriangleOutline" size={48} />,
+        title: intl.formatMessage({ id: 'title__camera_permission_required' }),
+        content: intl.formatMessage({
+          id: 'msg__approving_camera_permission_needs_to_be_turned_on_in_expand_view',
+        }),
+      }}
+      footerButtonProps={{
+        primaryActionProps: {
+          children: intl.formatMessage({ id: 'action__open_expand_view' }),
+        },
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        onPrimaryActionPress: ({ onClose }) => {
+          backgroundApiProxy.serviceApp.openExtensionExpandTab({
+            routes: [RootRoutes.Modal, ModalRoutes.ScanQrcode],
+            params: {
+              screen: ScanQrcodeRoutes.RequestPermission,
+            },
+          });
+          onClose?.();
+        },
+      }}
+    />
+  );
+};
diff --git a/packages/kit/src/views/ScanQrcode/RequestCameraPermissionExt.tsx b/packages/kit/src/views/ScanQrcode/RequestCameraPermissionExt.tsx
@@ -0,0 +1,43 @@
+import { useCallback, useEffect } from 'react';
+
+import { useIntl } from 'react-intl';
+
+import { Modal, Typography } from '@onekeyhq/components';
+import debugLogger from '@onekeyhq/shared/src/logger/debugLogger';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
+
+const RequestCameraPermissionExt = () => {
+  const intl = useIntl();
+  useEffect(() => {
+    async function main() {
+      if (platformEnv.isExtension) {
+        try {
+          await navigator.mediaDevices.getUserMedia({ video: true });
+        } catch {
+          debugLogger.common.info('failed to request camera permission on ext');
+        }
+      }
+    }
+    main();
+  }, []);
+  const onPrimaryActionPress = useCallback(
+    ({ close }: { close: () => void }) => {
+      close?.();
+    },
+    [],
+  );
+  return (
+    <Modal
+      header={intl.formatMessage({ id: 'title__camera_permission_required' })}
+      onPrimaryActionPress={onPrimaryActionPress}
+    >
+      <Typography.Body1Strong>
+        {intl.formatMessage({
+          id: 'msg__please_approve_camera_permission_on_your_browser',
+        })}
+      </Typography.Body1Strong>
+    </Modal>
+  );
+};
+
+export default RequestCameraPermissionExt;
diff --git a/packages/kit/src/views/ScanQrcode/ScanQrcode.tsx b/packages/kit/src/views/ScanQrcode/ScanQrcode.tsx
@@ -25,6 +25,7 @@ import { handleScanResult } from '../../utils/gotoScanQrcode';
 import { showMigrateDataModal } from '../Onboarding/screens/Migration/ConnectServer/MigrateDataModal';
 import { OneKeyMigrateQRCodePrefix } from '../Onboarding/screens/Migration/util';
 
+import { PermitDeniedDialog } from './PermitDeniedDialog';
 import ScanCamera from './ScanCamera';
 import { scanFromURLAsync } from './scanFromURLAsync';
 import { ScanQrcodeRoutes, ScanSubResultCategory } from './types';
@@ -188,6 +189,9 @@ const ScanQrcode: FC = () => {
     );
   }
   if (currentPermission === PermissionStatus.DENIED) {
+    if (platformEnv.isExtension) {
+      return <PermitDeniedDialog />;
+    }
     return <PermissionDialog type="camera" />;
   }
   return null;

diff --git a/packages/kit/src/views/ScanQrcode/types.ts b/packages/kit/src/views/ScanQrcode/types.ts
@@ -22,6 +22,7 @@ export enum ScanQrcodeRoutes {
   ScanQrcode = 'ScanQrcode',
   ScanQrcodeResult = 'ScanQrcodeResult',
   PreviewSend = 'PreviewSend',
+  RequestPermission = 'RequestPermission',
 }
 export type ScanQrcodeRoutesParams = {
   [ScanQrcodeRoutes.ScanQrcode]:
@@ -34,6 +35,7 @@ export type ScanQrcodeRoutesParams = {
     address: string;
     possibleNetworks?: string[];
   };
+  [ScanQrcodeRoutes.RequestPermission]: undefined;
 };
 
 export interface ScanCameraProps {