- Add CoinMarketCap widget

pull/118/head
Chris McGravey 2 years ago
parent ffbb1f5f0b
commit 1c158f743c

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

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

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

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

@ -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>
));
}

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

@ -13,6 +13,7 @@ const formats = {
overseerr: `{url}/api/v1/{endpoint}`, overseerr: `{url}/api/v1/{endpoint}`,
ombi: `{url}/api/v1/{endpoint}`, ombi: `{url}/api/v1/{endpoint}`,
npm: `{url}/api/{endpoint}`, npm: `{url}/api/{endpoint}`,
coinmarketcap: `{url}/{endpoint}`,
}; };
export function formatApiCall(api, args) { export function formatApiCall(api, args) {

@ -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" });
}
Loading…
Cancel
Save