- Add CoinMarketCap widget

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

@@ -1,111 +1,114 @@
 {
-    "common": {
+  "common": {
-        "bytes": "{{value, bytes}}",
+    "bytes": "{{value, bytes}}",
-        "bits": "{{value, bytes(bits: true)}}",
+    "bits": "{{value, bytes(bits: true)}}",
-        "bbytes": "{{value, bytes(binary: true)}}",
+    "bbytes": "{{value, bytes(binary: true)}}",
-        "bbits": "{{value, bytes(bits: true, binary: true)}}",
+    "bbits": "{{value, bytes(bits: true, binary: true)}}",
-        "byterate": "{{value, rate}}",
+    "byterate": "{{value, rate}}",
-        "bitrate": "{{value, rate(bits: true)}}",
+    "bitrate": "{{value, rate(bits: true)}}",
-        "percent": "{{value, percent}}",
+    "percent": "{{value, percent}}",
-        "number": "{{value, number}}",
+    "number": "{{value, number}}",
-        "ms": "{{value, number}}"
+    "ms": "{{value, number}}"
-    },
-    "widget": {
-        "missing_type": "Missing Widget Type: {{type}}",
-        "api_error": "API Error",
-        "status": "Status"
-    },
-    "weather": {
-      "current": "Current Location",
-      "allow": "Click to allow",
-      "updating": "Updating",
-      "wait": "Please wait"
-    },
-    "search": {
-        "placeholder": "Search…"
-    },
-    "resources": {
-        "total": "Total",
-        "free": "Free",
-        "used": "Used"
-    },
-    "docker": {
-        "rx": "RX",
-        "tx": "TX",
-        "mem": "MEM",
-        "cpu": "CPU",
-        "offline": "Offline"
-    },
-    "emby": {
-        "playing": "Playing",
-        "transcoding": "Transcoding",
-        "bitrate": "Bitrate",
-        "no_active": "No Active Streams"
-    },
-    "tautulli": {
-        "playing": "Playing",
-        "transcoding": "Transcoding",
-        "bitrate": "Bitrate",
-        "no_active": "No Active Streams"
-    },
-    "nzbget": {
-        "rate": "Rate",
-        "remaining": "Remaining",
-        "downloaded": "Downloaded"
-    },
-    "rutorrent": {
-        "active": "Active",
-        "upload": "Upload",
-        "download": "Download"
-    },
-    "sonarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
-        "series": "Series"
-    },
-    "radarr": {
-        "wanted": "Wanted",
-        "queued": "Queued",
-        "movies": "Movies"
-    },
-    "ombi": {
-        "pending": "Pending",
-        "approved": "Approved",
-        "available": "Available"
-    },
-    "jellyseerr": {
-        "pending": "Pending",
-        "approved": "Approved",
-        "available": "Available"
-    },
-    "overseerr": {
-      "pending": "Pending",
-      "approved": "Approved",
-      "available": "Available"
   },
-    "pihole": {
+  "widget": {
-        "queries": "Queries",
+    "missing_type": "Missing Widget Type: {{type}}",
-        "blocked": "Blocked",
+    "api_error": "API Error",
-        "gravity": "Gravity"
+    "status": "Status"
-    },
+  },
-    "speedtest": {
+  "weather": {
-        "upload": "Upload",
+    "current": "Current Location",
-        "download": "Download",
+    "allow": "Click to allow",
-        "ping": "Ping"
+    "updating": "Updating",
-    },
+    "wait": "Please wait"
-    "portainer": {
+  },
-        "running": "Running",
+  "search": {
-        "stopped": "Stopped",
+    "placeholder": "Search…"
-        "total": "Total"
+  },
-    },
+  "resources": {
-    "traefik": {
+    "total": "Total",
-        "routers": "Routers",
+    "free": "Free",
-        "services": "Services",
+    "used": "Used"
-        "middleware": "Middleware"
+  },
-    },
+  "docker": {
-    "npm": {
+    "rx": "RX",
-        "enabled": "Enabled",
+    "tx": "TX",
-        "disabled": "Disabled",
+    "mem": "MEM",
-        "total": "Total"
+    "cpu": "CPU",
-    }
+    "offline": "Offline"
+  },
+  "emby": {
+    "playing": "Playing",
+    "transcoding": "Transcoding",
+    "bitrate": "Bitrate",
+    "no_active": "No Active Streams"
+  },
+  "tautulli": {
+    "playing": "Playing",
+    "transcoding": "Transcoding",
+    "bitrate": "Bitrate",
+    "no_active": "No Active Streams"
+  },
+  "nzbget": {
+    "rate": "Rate",
+    "remaining": "Remaining",
+    "downloaded": "Downloaded"
+  },
+  "rutorrent": {
+    "active": "Active",
+    "upload": "Upload",
+    "download": "Download"
+  },
+  "sonarr": {
+    "wanted": "Wanted",
+    "queued": "Queued",
+    "series": "Series"
+  },
+  "radarr": {
+    "wanted": "Wanted",
+    "queued": "Queued",
+    "movies": "Movies"
+  },
+  "ombi": {
+    "pending": "Pending",
+    "approved": "Approved",
+    "available": "Available"
+  },
+  "jellyseerr": {
+    "pending": "Pending",
+    "approved": "Approved",
+    "available": "Available"
+  },
+  "overseerr": {
+    "pending": "Pending",
+    "approved": "Approved",
+    "available": "Available"
+  },
+  "pihole": {
+    "queries": "Queries",
+    "blocked": "Blocked",
+    "gravity": "Gravity"
+  },
+  "speedtest": {
+    "upload": "Upload",
+    "download": "Download",
+    "ping": "Ping"
+  },
+  "portainer": {
+    "running": "Running",
+    "stopped": "Stopped",
+    "total": "Total"
+  },
+  "traefik": {
+    "routers": "Routers",
+    "services": "Services",
+    "middleware": "Middleware"
+  },
+  "npm": {
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "total": "Total"
+  },
+  "coinmarketcap": {
+    "configure": "Configure one or more crypto currencies to track"
+  }
 }

src/components/services/widget.jsx

@@ -16,6 +16,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,
@@ -32,6 +33,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,60 @@
+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 error="Not tracking any symbols" />;
+  }
+
+  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
@@ -20,6 +21,7 @@ const serviceProxyHandlers = {
   overseerr: credentialedProxyHandler,
   ombi: credentialedProxyHandler,
   // super specific handlers
+  coinmarketcap: coinMarketCapProxyHandler,
   rutorrent: rutorrentProxyHandler,
   nzbget: nzbgetProxyHandler,
   npm: npmProxyHandler,

src/utils/api-helpers.js

@@ -13,6 +13,7 @@ const formats = {
   overseerr: `{url}/api/v1/{endpoint}`,
   ombi: `{url}/api/v1/{endpoint}`,
   npm: `{url}/api/{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" });
+}