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 a92ee97aa..938fe810a 100644 --- a/public/locales/en/common.json +++ b/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" } } diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx index 41942eadd..361b24840 100644 --- a/src/components/services/widget.jsx +++ b/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, }; diff --git a/src/components/services/widgets/service/coinmarketcap.jsx b/src/components/services/widgets/service/coinmarketcap.jsx new file mode 100644 index 000000000..a05edcf16 --- /dev/null +++ b/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 ( + + + + ); + } + + 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 985d64b83..5c78a9cce 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 @@ -22,6 +23,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 69cd60a28..58147d246 100644 --- a/src/utils/api-helpers.js +++ b/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) { 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" }); +}