refactor: batch 1

src/components/SDKVersion.tsx

@@ -1,33 +1,39 @@
-import { InfoOutlineIcon } from '@chakra-ui/icons';
-import { Tooltip, VStack, Text, Flex } from '@chakra-ui/react';
+import { MdInfoOutline } from 'react-icons/md';
 import { workerClientBus } from '~/decrypt-worker/client';
 import { DECRYPTION_WORKER_ACTION_NAME } from '~/decrypt-worker/constants';
-
-import usePromise from 'react-promise-suspense';
+import { useEffect, useRef, useState } from 'react';
 
 const getSDKVersion = async (): Promise<string> => {
   return workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
 };
 
 export function SDKVersion() {
-  const sdkVersion = usePromise(getSDKVersion, []);
+  const refDialog = useRef<HTMLDialogElement>(null);
+  const [sdkVersion, setSdkVersion] = useState('...');
+  useEffect(() => {
+    getSDKVersion().then(setSdkVersion);
+  }, []);
 
   return (
-    <Flex as="span" pl="1" alignItems="center" data-testid="sdk-version">
-      <Tooltip
-        hasArrow
-        placement="top"
-        label={
-          <VStack>
-            <Text>App: __APP_VERSION__</Text>
-            <Text>SDK: {sdkVersion}</Text>
-          </VStack>
-        }
-        bg="gray.300"
-        color="black"
-      >
-        <InfoOutlineIcon />
-      </Tooltip>
-    </Flex>
+    <>
+      <span className="btn btn-ghost inline-flex p-0 h-[1em]" onClick={() => refDialog.current?.showModal()}>
+        <MdInfoOutline />
+      </span>
+
+      <dialog ref={refDialog} className="modal text-left">
+        <div className="modal-box">
+          <form method="dialog">
+            <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+          </form>
+          <h3 className="font-bold text-lg">详细信息</h3>
+
+          <p>App: __APP_VERSION__</p>
+          <p>SDK: {sdkVersion}</p>
+        </div>
+        <form method="dialog" className="modal-backdrop">
+          <button>关闭</button>
+        </form>
+      </dialog>
+    </>
   );
 }