feat: show sdk version (#5)

package.json

@@ -20,6 +20,7 @@
     "nanoid": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-promise-suspense": "^0.3.4",
     "react-redux": "^8.0.5"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -31,6 +31,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-promise-suspense:
+    specifier: ^0.3.4
+    version: 0.3.4
   react-redux:
     specifier: ^8.0.5
     version: 8.0.5(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
@@ -2601,6 +2604,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /fast-deep-equal@2.0.1:
+    resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -3172,6 +3179,12 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-promise-suspense@0.3.4:
+    resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
+    dependencies:
+      fast-deep-equal: 2.0.1
+    dev: false
+
   /react-redux@8.0.5(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1):
     resolution: {integrity: sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==}
     peerDependencies:

src/Footer.tsx

@@ -1,4 +1,6 @@
 import { Center, Link, Text } from '@chakra-ui/react';
+import { Suspense } from 'react';
+import { SDKVersion } from './SDKVersion';
 
 export function Footer() {
   return (
@@ -15,13 +17,19 @@ export function Footer() {
         left="0"
         flexDir="column"
       >
-        <Text>音乐解锁 (x.x.x) - 移除已购音乐的加密保护。</Text>
         <Text>
-          Copyright © 2019 - 2023{' '}
+          {'音乐解锁 (x.x.x) '}
+          <Suspense>
+            <SDKVersion />
+          </Suspense>
+          {' - 移除已购音乐的加密保护。'}
+        </Text>
+        <Text>
+          {'Copyright © 2019 - 2023 '}
           <Link href="https://git.unlock-music.dev/um" isExternal>
             UnlockMusic 团队
-          </Link>{' '}
-          | 音乐解锁授权基于
+          </Link>
+          {' | 音乐解锁授权基于'}
           <Link href="https://git.unlock-music.dev/um/um-react/src/branch/main/LICENSE" isExternal>
             MIT许可协议
           </Link>

src/SDKVersion.tsx

@@ -0,0 +1,20 @@
+import { InfoOutlineIcon } from '@chakra-ui/icons';
+import { Tooltip } from '@chakra-ui/react';
+import { workerClientBus } from './decrypt-worker/client';
+import { DECRYPTION_WORKER_ACTION_NAME } from './decrypt-worker/constants';
+
+import usePromise from 'react-promise-suspense';
+
+const getSDKVersion = async () => {
+  const version = workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
+  return `SDK: ${version}`;
+};
+
+export function SDKVersion() {
+  const sdkVersion = usePromise(getSDKVersion, []);
+  return (
+    <Tooltip hasArrow placement="top" label={sdkVersion} bg="gray.300" color="black">
+      <InfoOutlineIcon />
+    </Tooltip>
+  );
+}