From 1c158f743cffaa48c6a9e0e452ebd623b26d99ae Mon Sep 17 00:00:00 2001 From: Chris McGravey Date: Mon, 12 Sep 2022 01:30:42 -0500 Subject: [PATCH] - Add CoinMarketCap widget --- package.json | 1 + pnpm-lock.yaml | 6 + public/locales/en/common.json | 221 +++++++++--------- src/components/services/widget.jsx | 2 + .../widgets/service/coinmarketcap.jsx | 60 +++++ src/pages/api/services/proxy.js | 2 + src/utils/api-helpers.js | 1 + src/utils/proxies/coinmarketcap.js | 33 +++ 8 files changed, 217 insertions(+), 109 deletions(-) create mode 100644 src/components/services/widgets/service/coinmarketcap.jsx create mode 100644 src/utils/proxies/coinmarketcap.js diff --git a/package.json b/package.json index 5846f48fc..0e0a428b9 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55ce7d76a..b0c3bc1ea 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 72c0e02ad..2f7728cb6 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -1,111 +1,114 @@ { - "common": { - "bytes": "{{value, bytes}}", - "bits": "{{value, bytes(bits: true)}}", - "bbytes": "{{value, bytes(binary: true)}}", - "bbits": "{{value, bytes(bits: true, binary: true)}}", - "byterate": "{{value, rate}}", - "bitrate": "{{value, rate(bits: true)}}", - "percent": "{{value, percent}}", - "number": "{{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": { - "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" - } + "common": { + "bytes": "{{value, bytes}}", + "bits": "{{value, bytes(bits: true)}}", + "bbytes": "{{value, bytes(binary: true)}}", + "bbits": "{{value, bytes(bits: true, binary: true)}}", + "byterate": "{{value, rate}}", + "bitrate": "{{value, rate(bits: true)}}", + "percent": "{{value, percent}}", + "number": "{{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": { + "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" + } } diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx index 41257a5c9..c2535597f 100644 --- a/src/components/services/widget.jsx +++ b/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, }; diff --git a/src/components/services/widgets/service/coinmarketcap.jsx b/src/components/services/widgets/service/coinmarketcap.jsx new file mode 100644 index 000000000..76e23692f --- /dev/null +++ b/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 ; + } + + if (statsError) { + return ; + } + + if (!statsData) { + return ( + + + + ); + } + + const { data } = statsData; + const currencySymbol = getSymbolFromCurrency(currencyCode); + + return symbols.map((key) => ( + +
+
{data[key].name}
+
+
+ {currencySymbol} + {data[key].quote[currencyCode].price.toFixed(2)} +
+
0 ? "text-emerald-300" : "text-rose-300" + }`} + > + {data[key].quote[currencyCode].percent_change_1h.toFixed(2)}% +
+
+
+ + )); +} diff --git a/src/pages/api/services/proxy.js b/src/pages/api/services/proxy.js index c4ef2b3bc..7b58765e6 100644 --- a/src/pages/api/services/proxy.js +++ b/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, diff --git a/src/utils/api-helpers.js b/src/utils/api-helpers.js index c8953a825..9050d18d1 100644 --- a/src/utils/api-helpers.js +++ b/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) { diff --git a/src/utils/proxies/coinmarketcap.js b/src/utils/proxies/coinmarketcap.js new file mode 100644 index 000000000..42611ec8c --- /dev/null +++ b/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" }); +}