Merge pull request #118 from ItsJustMeChris/main

Add coin market cap module

package.json

@@ -12,6 +12,7 @@
     "@headlessui/react": "^1.6.6",
     "@tailwindcss/forms": "^0.5.3",
     "classnames": "^2.3.1",
+    "currency-symbol-map": "^5.1.0",
     "dockerode": "^3.3.4",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ specifiers:
   '@tailwindcss/forms': ^0.5.3
   autoprefixer: ^10.4.8
   classnames: ^2.3.1
+  currency-symbol-map: ^5.1.0
   dockerode: ^3.3.4
   eslint: 8.22.0
   eslint-config-airbnb: ^19.0.4
@@ -41,6 +42,7 @@ dependencies:
   '@headlessui/react': 1.6.6_biqbaboplfbrettd7655fr4n2y
   '@tailwindcss/forms': 0.5.3_tailwindcss@3.1.8
   classnames: 2.3.1
+  currency-symbol-map: 5.1.0
   dockerode: 3.3.4
   i18next: 21.9.1
   i18next-browser-languagedetector: 6.1.5
@@ -699,6 +701,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /currency-symbol-map/5.1.0:
+    resolution: {integrity: sha512-LO/lzYRw134LMDVnLyAf1dHE5tyO6axEFkR3TXjQIOmMkAM9YL6QsiUwuXzZAmFnuDJcs4hayOgyIYtViXFrLw==}
+    dev: false
+
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true

public/locales/en/common.json

@@ -117,5 +117,8 @@
         "enabled": "Enabled",
         "disabled": "Disabled",
         "total": "Total"
+    },
+    "coinmarketcap": {
+        "configure": "Configure one or more crypto currencies to track"
     }
 }

src/components/services/widget.jsx

@@ -18,6 +18,7 @@ import Jellyseerr from "./widgets/service/jellyseerr";
 import Overseerr from "./widgets/service/overseerr";
 import Npm from "./widgets/service/npm";
 import Tautulli from "./widgets/service/tautulli";
+import CoinMarketCap from "./widgets/service/coinmarketcap";
 
 const widgetMappings = {
   docker: Docker,
@@ -36,6 +37,7 @@ const widgetMappings = {
   traefik: Traefik,
   jellyseerr: Jellyseerr,
   overseerr: Overseerr,
+  coinmarketcap: CoinMarketCap,
   npm: Npm,
   tautulli: Tautulli,
 };

src/components/services/widgets/service/coinmarketcap.jsx

@@ -0,0 +1,64 @@
+import useSWR from "swr";
+import { useTranslation } from "react-i18next";
+import getSymbolFromCurrency from "currency-symbol-map";
+
+import Widget from "../widget";
+import Block from "../block";
+
+import { formatApiUrl } from "utils/api-helpers";
+
+export default function CoinMarketCap({ service }) {
+  const { t } = useTranslation();
+
+  const config = service.widget;
+  const symbols = [...service.symbols];
+  const currencyCode = service.currency ?? "USD";
+
+  const { data: statsData, error: statsError } = useSWR(
+    formatApiUrl(config, `v1/cryptocurrency/quotes/latest?symbol=${symbols.join(",")}&convert=${currencyCode}`)
+  );
+
+  if (!symbols || symbols.length === 0) {
+    return (
+      <Widget>
+        <Block value={t("coinmarketcap.configure")} />
+      </Widget>
+    );
+  }
+
+  if (statsError) {
+    return <Widget error={t("widget.api_error")} />;
+  }
+
+  if (!statsData) {
+    return (
+      <Widget>
+        <Block value={t("coinmarketcap.configure")} />
+      </Widget>
+    );
+  }
+
+  const { data } = statsData;
+  const currencySymbol = getSymbolFromCurrency(currencyCode);
+
+  return symbols.map((key) => (
+    <Widget key={data[key].symbol}>
+      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1">
+        <div className="font-thin text-sm">{data[key].name}</div>
+        <div className="flex flex-col text-right">
+          <div className="font-bold text-xs">
+            {currencySymbol}
+            {data[key].quote[currencyCode].price.toFixed(2)}
+          </div>
+          <div
+            className={`font-bold text-xs ${
+              data[key].quote[currencyCode].percent_change_1h > 0 ? "text-emerald-300" : "text-rose-300"
+            }`}
+          >
+            {data[key].quote[currencyCode].percent_change_1h.toFixed(2)}%
+          </div>
+        </div>
+      </div>
+    </Widget>
+  ));
+}

src/pages/api/services/proxy.js

@@ -3,6 +3,7 @@ import credentialedProxyHandler from "utils/proxies/credentialed";
 import rutorrentProxyHandler from "utils/proxies/rutorrent";
 import nzbgetProxyHandler from "utils/proxies/nzbget";
 import npmProxyHandler from "utils/proxies/npm";
+import coinMarketCapProxyHandler from "utils/proxies/coinmarketcap";
 
 const serviceProxyHandlers = {
   // uses query param auth
@@ -22,6 +23,7 @@ const serviceProxyHandlers = {
   overseerr: credentialedProxyHandler,
   ombi: credentialedProxyHandler,
   // super specific handlers
+  coinmarketcap: coinMarketCapProxyHandler,
   rutorrent: rutorrentProxyHandler,
   nzbget: nzbgetProxyHandler,
   npm: npmProxyHandler,

src/utils/api-helpers.js

@@ -15,6 +15,7 @@ const formats = {
   npm: `{url}/api/{endpoint}`,
   readarr: `{url}/api/v1/{endpoint}?apikey={key}`,
   sabnzbd: `{url}/api/?apikey={key}&output=json&mode={endpoint}`,
+  coinmarketcap: `{url}/{endpoint}`,
 };
 
 export function formatApiCall(api, args) {

src/utils/proxies/coinmarketcap.js

@@ -0,0 +1,33 @@
+import getServiceWidget from "utils/service-helpers";
+import { formatApiCall } from "utils/api-helpers";
+import { httpProxy } from "utils/http";
+
+export default async function coinMarketCapProxyHandler(req, res) {
+  const { group, service, endpoint } = req.query;
+
+  if (group && service) {
+    const widget = await getServiceWidget(group, service);
+
+    if (widget) {
+      const url = new URL(formatApiCall(widget.type, { endpoint, ...widget }));
+      const [status, contentType, data] = await httpProxy(url, {
+        method: req.method,
+        withCredentials: true,
+        credentials: "include",
+        headers: {
+          "X-CMC_PRO_API_KEY": `${widget.key}`,
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (status === 204 || status === 304) {
+        return res.status(status).end();
+      }
+
+      if (contentType) res.setHeader("Content-Type", contentType);
+      return res.status(status).send(data);
+    }
+  }
+
+  return res.status(400).json({ error: "Invalid proxy service type" });
+}