✨ feat: add invisible vconsole trigger (#197)

apps/wallet/src/App.tsx

@@ -1,4 +1,4 @@
-import { FC, Suspense, lazy, useEffect, useRef, useState } from 'react';
+import { FC, Suspense, lazy, useEffect, useState } from 'react';
 import { observer } from 'mobx-react'
 import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
 import hibitIdSession from './stores/session';
@@ -7,13 +7,11 @@ import { useIsDesktop } from './utils/hooks';
 import PageLoading from './components/PageLoading';
 import { useOidc } from './utils/oidc';
 import { IS_TELEGRAM_MINI_APP, RUNTIME_ENV, RUNTIME_PARAMS_RAW } from './utils/runtime';
-import { HibitEnv, RuntimeEnv } from './utils/basicEnums';
+import { RuntimeEnv } from './utils/basicEnums';
 import { AuthenticatorType } from '@delandlabs/hibit-id-sdk';
 import authManager from './utils/auth';
 import toaster from './components/Toaster';
 import rpcManager from './stores/rpc';
-import VConsole from 'vconsole';
-import { HIBIT_ENV } from './utils/env';
 import { useTranslation } from 'react-i18next';
 import { useDfinityIcrcPostMessageTransport } from './utils/chain/chain-wallets/dfinity/post-message-transport-hook';
 
@@ -36,18 +34,6 @@ const App: FC = observer(() => {
   const isDesktop = useIsDesktop()
   const navigate = useNavigate()
   const { t } = useTranslation()
-  const vConsoleRef = useRef<VConsole>();
-
-  // show vConsole if is mobile and test env
-  useEffect(() => {
-    if (isDesktop && vConsoleRef.current) {
-      vConsoleRef.current.destroy();
-      vConsoleRef.current = undefined;
-    }
-    if (!isDesktop && !vConsoleRef.current && HIBIT_ENV !== HibitEnv.PROD) {
-      vConsoleRef.current = new VConsole();
-    }
-  }, [isDesktop]);
 
   useEffect(() => {
     (async () => {

apps/wallet/src/components/VConsoleInvisibleTrigger.tsx

@@ -0,0 +1,40 @@
+import { FC, useRef } from "react";
+import { useIsDesktop } from "../utils/hooks";
+import VConsole from "vconsole";
+
+const TRIGGER_CLICK_COUNT = 6
+const TIME_WINDOW = 3000
+
+const VConsoleInvisibleTrigger: FC = () => {
+  const isDesktop = useIsDesktop()
+  const clickCountRef = useRef(0)
+  const vConsoleRef = useRef<VConsole>()
+
+  const handleClick = () => {
+    if (clickCountRef.current > TRIGGER_CLICK_COUNT) {
+      return
+    }
+    clickCountRef.current += 1
+    if (clickCountRef.current === 1) {
+      setTimeout(() => {
+        clickCountRef.current = 0
+      }, TIME_WINDOW)
+    }
+    if (clickCountRef.current === TRIGGER_CLICK_COUNT) {
+      if (vConsoleRef.current) {
+        vConsoleRef.current.destroy()
+      }
+      vConsoleRef.current = new VConsole()
+    }
+  }
+
+  if (isDesktop) {
+    return null
+  }
+
+  return (
+    <div onClick={handleClick} className="size-2 fixed bottom-0 left-0 z-[100000]" />
+  )
+}
+
+export default VConsoleInvisibleTrigger

apps/wallet/src/main.tsx

@@ -11,6 +11,7 @@ import './i18n'
 import HibitToastContainer from './components/Toaster/Container.tsx'
 import BigNumber from 'bignumber.js'
 import { OidcProvider } from './utils/oidc/index.ts'
+import VConsoleInvisibleTrigger from './components/VConsoleInvisibleTrigger.tsx'
 
 BigNumber.config({ EXPONENTIAL_AT: 1e+9 });
 
@@ -36,6 +37,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
             <HibitToastContainer />
           </BrowserRouter>
         )}
+        <VConsoleInvisibleTrigger />
       </QueryClientProvider>
     </OidcProvider>
   </React.StrictMode>