add page to show system info

src/components/comparison/index.tsx

@@ -1,19 +1,19 @@
 import { useEffect, useMemo, useState } from "react";
 import "./index.css";
-import { CoinData, CurrencyRateDetail } from "../../middlelayers/types";
+import { CoinData, CurrencyRateDetail } from "@/middlelayers/types";
 import {
   queryAllDataDates,
   queryCoinDataById,
-} from "../../middlelayers/charts";
+} from "@/middlelayers/charts";
 import _ from "lodash";
-import viewIcon from "../../assets/icons/view-icon.png";
-import hideIcon from "../../assets/icons/hide-icon.png";
+import ViewIcon from "@/assets/icons/view-icon.png";
+import HideIcon from "@/assets/icons/hide-icon.png";
 import {
   currencyWrapper,
   prettyNumberToLocaleString,
-} from "../../utils/currency";
-import { useWindowSize } from "../../utils/hook";
-import { parseDateToTS } from "../../utils/date";
+} from "@/utils/currency";
+import { useWindowSize } from "@/utils/hook";
+import { parseDateToTS } from "@/utils/date";
 import { ButtonGroup, ButtonGroupItem } from "../ui/button-group";
 import {
   Select,
@@ -336,7 +336,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
               <a onClick={onViewOrHideClick}>
                 <img
                   className="view-or-hide-icon"
-                  src={showDetail ? viewIcon : hideIcon}
+                  src={showDetail ? ViewIcon : HideIcon}
                   alt="view-or-hide"
                   width={25}
                   height={25}

src/components/configuration.tsx

@@ -39,7 +39,6 @@ import {
 } from "./ui/dialog";
 import { Input } from "./ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
-import React from "react";
 
 const initialConfiguration: GlobalConfig = {
   configs: {

src/components/historical-data/index.tsx

@@ -5,7 +5,7 @@ import {
   queryHistoricalData,
 } from "@/middlelayers/charts";
 import { CurrencyRateDetail, HistoricalData } from "@/middlelayers/types";
-import deleteIcon from "@/assets/icons/delete-icon.png";
+import DeleteIcon from "@/assets/icons/delete-icon.png";
 import _ from "lodash";
 
 import "./index.css";
@@ -174,7 +174,7 @@ const App = ({
               <div className="hidden group-hover:inline-block">
                 <a onClick={() => onHistoricalDataDeleteClick(d.id)}>
                   <img
-                    src={deleteIcon}
+                    src={DeleteIcon}
                     alt="delete"
                     style={{
                       border: 0,
@@ -308,7 +308,7 @@ const App = ({
             <td>
               <a onClick={() => onHistoricalDataDetailDeleteClick(d.assetId)}>
                 <img
-                  src={deleteIcon}
+                  src={DeleteIcon}
                   alt="delete"
                   style={{
                     border: 0,

src/components/index/index.tsx

@@ -35,30 +35,31 @@ import {
   LatestAssetsPercentageData,
   TopCoinsPercentageChangeData,
   TopCoinsRankData,
-} from "../../middlelayers/types";
+} from "@/middlelayers/types";
 import { useContext, useEffect, useState } from "react";
 import {
   queryAssetChange,
   queryLastRefreshAt,
   queryTopCoinsPercentageChangeData,
-} from "../../middlelayers/charts";
-import { queryCoinsAmountChange } from "../../middlelayers/charts";
-import { queryTopCoinsRank } from "../../middlelayers/charts";
-import { queryTotalValue } from "../../middlelayers/charts";
-import { queryLatestAssetsPercentage } from "../../middlelayers/charts";
-import { useWindowSize } from "../../utils/hook";
+} from "@/middlelayers/charts";
+import { queryCoinsAmountChange } from "@/middlelayers/charts";
+import { queryTopCoinsRank } from "@/middlelayers/charts";
+import { queryTotalValue } from "@/middlelayers/charts";
+import { queryLatestAssetsPercentage } from "@/middlelayers/charts";
+import { useWindowSize } from "@/utils/hook";
 import { Chart } from "chart.js";
-import { LoadingContext } from "../../App";
+import { LoadingContext } from "@/App";
 import {
   getCurrentPreferCurrency,
   getQuerySize,
-} from "../../middlelayers/configuration";
-import { autoSyncData } from "../../middlelayers/cloudsync";
-import { getDefaultCurrencyRate } from "../../middlelayers/currency";
+} from "@/middlelayers/configuration";
+import { autoSyncData } from "@/middlelayers/cloudsync";
+import { getDefaultCurrencyRate } from "@/middlelayers/currency";
 import _ from "lodash";
-import { MainNav } from "./main-nav";
-import Configuration from "../configuration";
-import DataManagement from "../data-management";
+import { MainNav } from "@/components/index/main-nav";
+import Configuration from "@/components/configuration";
+import DataManagement from "@/components/data-management";
+import SystemInfo from "@/components/system-info";
 
 ChartJS.register(
   ...registerables,
@@ -235,8 +236,7 @@ const App = () => {
     }, [lo.pathname]);
 
     return (
-      <div className='pb-12'
-      >
+      <div className="pb-12">
         <div className="fixed top-0 left-4 right-0 z-10 bg-white flex-col md:flex">
           <div className="border-b">
             <div className="flex h-12 items-center px-4">
@@ -255,7 +255,7 @@ const App = () => {
             </div>
           </div>
         </div>
-        <div className='mt-4'>
+        <div className="mt-4">
           <Outlet></Outlet>
         </div>
       </div>
@@ -327,6 +327,13 @@ const App = () => {
                 />
               }
             />
+            <Route
+              path="systemInfo"
+              element={
+                <SystemInfo
+                />
+              }
+            />
           </Route>
           <Route path="*" element={<div>not found</div>} />
         </Routes>

src/components/settings/index.tsx

@@ -1,7 +1,4 @@
-import React from 'react'
 import _ from "lodash";
-import { getVersion } from "@tauri-apps/api/app";
-import { useEffect, useState } from "react";
 import { SidebarNav } from "./sidebar-nav";
 import { Outlet, Navigate, useLocation } from "react-router-dom";
 
@@ -14,20 +11,14 @@ const sidebarNavItems = [
     title: "Data",
     href: "/settings/data",
   },
+  {
+    title: "System",
+    href: "/settings/systemInfo",
+  },
 ];
 
 const App = () => {
-  const [version, setVersion] = useState<string>("0.1.0");
   const lo = useLocation();
-  useEffect(() => {
-    loadVersion();
-  }, []);
-
-  function loadVersion() {
-    getVersion().then((ver) => {
-      setVersion(ver);
-    });
-  }
 
   return (
     <div className="space-y-6 p-5 pb-8 md:block">

src/components/system-info.tsx

@@ -0,0 +1,108 @@
+import _ from "lodash";
+import { Separator } from "./ui/separator";
+import { useEffect, useState } from "react";
+import { getVersion } from "@/utils/app";
+import { getLicenseIfIsPro, saveLicense } from "@/middlelayers/configuration";
+import ViewIcon from "@/assets/icons/view-icon.png";
+import HideIcon from "@/assets/icons/hide-icon.png";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { ReloadIcon } from "@radix-ui/react-icons";
+
+const App = () => {
+  const [version, setVersion] = useState<string>("0.1.0");
+
+  const [license, setLicense] = useState<string | undefined>();
+  const [showLicense, setShowLicense] = useState(false);
+  const [licenseChanged, setLicenseChanged] = useState<boolean>(false);
+  const [saveLicenseLoading, setSaveLicenseLoading] = useState(false);
+
+  useEffect(() => {
+    loadVersion();
+    loadLicense();
+  }, []);
+
+  function loadVersion() {
+    getVersion().then((ver) => {
+      setVersion(ver);
+    });
+  }
+
+  function loadLicense() {
+    getLicenseIfIsPro().then((license) => {
+      setLicense(license);
+    });
+  }
+
+  function onSaveLicenseClick() {
+    if (!license) {
+      return;
+    }
+    setSaveLicenseLoading(true);
+
+    saveLicense(license).then(() => {});
+  }
+
+  function onLicenseInputChange(val: string) {
+    setLicenseChanged(true);
+    setLicense(val);
+  }
+
+  function onViewOrHideClick() {
+    setShowLicense(!showLicense);
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">System Info</h3>
+        <p className="text-sm text-muted-foreground">
+          Show basic system information
+        </p>
+      </div>
+      <Separator />
+
+      <div className="space-y-3">
+        <div className="text-l font-bold text-left">Version</div>
+        <div className="text-sm text-left text-gray-400">{version}</div>
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-l font-bold text-left">Pro Version</div>
+        <div className="text-sm text-left text-gray-400">
+          Enter License Key To Active Pro Version ( Coming Soon )
+        </div>
+        <div className="flex">
+          <Input
+            id="license"
+            value={license ?? ""}
+            type={showLicense ? "text" : "password"}
+            onChange={(e) => onLicenseInputChange(e.target.value)}
+            placeholder="License Key"
+            className="w-[400px] mr-2"
+          />
+          <a onClick={onViewOrHideClick} className="mr-2">
+            <img
+              className="view-or-hide-icon mt-1"
+              src={showLicense ? ViewIcon : HideIcon}
+              alt="view-or-hide"
+              width={25}
+              height={25}
+            />
+          </a>
+          <Button
+            onClick={onSaveLicenseClick}
+            disabled={saveLicenseLoading || !licenseChanged}
+          >
+            {saveLicenseLoading ?? (
+              <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Active
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;