fix(ui): fix background issue after join multi sign (#575)

Co-authored-by: Vu Van Duc <vuvanduc@Vus-MacBook-Pro.local>
cardano-foundation · Jul 15, 2024 · d0e1b80 · d0e1b80
1 parent bf20971
commit d0e1b80
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 36 deletions.
diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -1,4 +1,7 @@
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import {
+  BarcodeScanner,
+  SupportedFormat,
+} from "@capacitor-community/barcode-scanner";
 import {
   IonCol,
   IonGrid,
@@ -7,46 +10,41 @@ import {
   IonSpinner,
   isPlatform,
 } from "@ionic/react";
-import {
-  BarcodeScanner,
-  SupportedFormat,
-} from "@capacitor-community/barcode-scanner";
 import { scanOutline } from "ionicons/icons";
-import "./Scanner.scss";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { Agent } from "../../../core/agent/agent";
+import { KeriConnectionType } from "../../../core/agent/agent.types";
 import { i18n } from "../../../i18n";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
+import {
+  getMultiSigGroupCache,
+  setMultiSigGroupCache,
+} from "../../../store/reducers/identifiersCache";
+import { MultiSigGroup } from "../../../store/reducers/identifiersCache/identifiersCache.types";
+import { setBootUrl, setConnectUrl } from "../../../store/reducers/ssiAgent";
 import {
   getCurrentOperation,
-  getCurrentRoute,
   getToastMsg,
   setCurrentOperation,
   setToastMsg,
 } from "../../../store/reducers/stateCache";
-import { TabsRoutePath } from "../navigation/TabsMenu";
+import { setPendingConnection } from "../../../store/reducers/walletConnectionsCache";
 import { OperationType, ToastMsgType } from "../../globals/types";
-import { Agent } from "../../../core/agent/agent";
-import { ScannerProps } from "./Scanner.types";
-import { KeriConnectionType } from "../../../core/agent/agent.types";
-import {
-  getMultiSigGroupCache,
-  setMultiSigGroupCache,
-} from "../../../store/reducers/identifiersCache";
-import { MultiSigGroup } from "../../../store/reducers/identifiersCache/identifiersCache.types";
-import { PageFooter } from "../PageFooter";
+import { CreateIdentifier } from "../CreateIdentifier";
 import { CustomInput } from "../CustomInput";
+import { TabsRoutePath } from "../navigation/TabsMenu";
 import { OptionModal } from "../OptionsModal";
-import { setPendingConnection } from "../../../store/reducers/walletConnectionsCache";
-import { CreateIdentifier } from "../CreateIdentifier";
-import { setBootUrl, setConnectUrl } from "../../../store/reducers/ssiAgent";
+import { PageFooter } from "../PageFooter";
+import "./Scanner.scss";
+import { ScannerProps } from "./Scanner.types";
 
 const Scanner = forwardRef(
-  ({ setIsValueCaptured, handleReset }: ScannerProps, ref) => {
+  ({ routePath, setIsValueCaptured, handleReset }: ScannerProps, ref) => {
     const componentId = "scanner";
     const dispatch = useAppDispatch();
     const multiSigGroupCache = useAppSelector(getMultiSigGroupCache);
     const currentOperation = useAppSelector(getCurrentOperation);
     const currentToastMsg = useAppSelector(getToastMsg);
-    const currentRoute = useAppSelector(getCurrentRoute);
     const [createIdentifierModalIsOpen, setCreateIdentifierModalIsOpen] =
       useState(false);
     const [pasteModalIsOpen, setPasteModalIsOpen] = useState(false);
@@ -202,7 +200,7 @@ const Scanner = forwardRef(
 
     useEffect(() => {
       if (
-        ((currentRoute?.path === TabsRoutePath.SCAN ||
+        ((routePath === TabsRoutePath.SCAN ||
           [
             OperationType.SCAN_CONNECTION,
             OperationType.SCAN_WALLET_CONNECTION,
@@ -218,7 +216,7 @@ const Scanner = forwardRef(
       } else {
         stopScan();
       }
-    }, [currentOperation, currentRoute]);
+    }, [currentOperation, currentToastMsg, routePath]);
 
     const handlePrimaryButtonAction = () => {
       stopScan();

diff --git a/src/ui/components/Scanner/Scanner.types.ts b/src/ui/components/Scanner/Scanner.types.ts
@@ -1,4 +1,5 @@
 interface ScannerProps {
+  routePath?: string;
   setIsValueCaptured?: (value: boolean) => void;
   handleReset?: () => void;
 }

diff --git a/src/ui/pages/Scan/Scan.test.tsx b/src/ui/pages/Scan/Scan.test.tsx
@@ -9,7 +9,7 @@ import { OperationType } from "../../globals/types";
 import { Scan } from "./Scan";
 
 const startScan = jest.fn(
-  (args: any) =>
+  (args: unknown) =>
     new Promise((resolve) => {
       setTimeout(() => {
         resolve({
@@ -30,7 +30,7 @@ jest.mock("@capacitor-community/barcode-scanner", () => {
           granted: true,
         }),
       hideBackground: jest.fn(),
-      startScan: (args: any) => startScan(args),
+      startScan: (args: unknown) => startScan(args),
       stopScan: jest.fn(),
       showBackground: jest.fn(),
     },
@@ -50,7 +50,7 @@ jest.mock("../../../core/agent/agent", () => ({
     agent: {
       connections: {
         connectByOobiUrl: () => connectByOobiUrlMock(),
-        getMultisigLinkedContacts: (args: any) =>
+        getMultisigLinkedContacts: (args: unknown) =>
           getMultisigLinkedContactsMock(args),
       },
     },
@@ -61,9 +61,12 @@ const historyPushMock = jest.fn();
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useHistory: () => ({
-    push: (args: any) => {
+    push: (args: unknown) => {
       historyPushMock(args);
     },
+    location: {
+      pathname: TabsRoutePath.SCAN,
+    },
   }),
 }));
 

diff --git a/src/ui/pages/Scan/Scan.tsx b/src/ui/pages/Scan/Scan.tsx
@@ -1,21 +1,21 @@
+import { useIonViewWillEnter } from "@ionic/react";
 import { useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
-import { useIonViewWillEnter } from "@ionic/react";
-import { TabLayout } from "../../components/layout/TabLayout";
+import { getNextRoute } from "../../../routes/nextRoute";
+import { DataProps } from "../../../routes/nextRoute/nextRoute.types";
+import { TabsRoutePath } from "../../../routes/paths";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks";
 import {
   getCurrentOperation,
   getStateCache,
   getToastMsg,
   setCurrentRoute,
 } from "../../../store/reducers/stateCache";
-import { TabsRoutePath } from "../../../routes/paths";
+import { updateReduxState } from "../../../store/utils";
+import { TabLayout } from "../../components/layout/TabLayout";
 import { Scanner } from "../../components/Scanner";
+import { OperationType } from "../../globals/types";
 import "./Scan.scss";
-import { DataProps } from "../../../routes/nextRoute/nextRoute.types";
-import { getNextRoute } from "../../../routes/nextRoute";
-import { updateReduxState } from "../../../store/utils";
-import { OperationType, ToastMsgType } from "../../globals/types";
 
 const Scan = () => {
   const pageId = "scan-tab";
@@ -65,7 +65,10 @@ const Scan = () => {
       pageId={pageId}
       header={false}
     >
-      <Scanner setIsValueCaptured={setIsValueCaptured} />
+      <Scanner
+        routePath={history.location.pathname}
+        setIsValueCaptured={setIsValueCaptured}
+      />
     </TabLayout>
   );
 };