From cc0b4be50c89b8c6643b342209352360b62c099e Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Mon, 12 Sep 2022 12:38:50 +0300
Subject: [PATCH] cleanup coinmarketcap widget
---
.../widgets/service/coinmarketcap.jsx | 41 +++++++++++--------
src/utils/api-helpers.js | 2 +-
src/utils/service-helpers.js | 11 ++++-
3 files changed, 35 insertions(+), 19 deletions(-)
diff --git a/src/components/services/widgets/service/coinmarketcap.jsx b/src/components/services/widgets/service/coinmarketcap.jsx
index a05edcf1..c5e66ebc 100644
--- a/src/components/services/widgets/service/coinmarketcap.jsx
+++ b/src/components/services/widgets/service/coinmarketcap.jsx
@@ -11,8 +11,8 @@ export default function CoinMarketCap({ service }) {
const { t } = useTranslation();
const config = service.widget;
- const symbols = [...service.symbols];
- const currencyCode = service.currency ?? "USD";
+ const currencyCode = config.currency ?? "USD";
+ const { symbols } = config;
const { data: statsData, error: statsError } = useSWR(
formatApiUrl(config, `v1/cryptocurrency/quotes/latest?symbol=${symbols.join(",")}&convert=${currencyCode}`)
@@ -41,24 +41,31 @@ export default function CoinMarketCap({ service }) {
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>
+ return (
+ <Widget>
+ <div className="flex flex-col w-full">
+ {symbols.map((key) => (
<div
- className={`font-bold text-xs ${
- data[key].quote[currencyCode].percent_change_1h > 0 ? "text-emerald-300" : "text-rose-300"
- }`}
+ key={data[key].symbol}
+ className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs"
>
- {data[key].quote[currencyCode].percent_change_1h.toFixed(2)}%
+ <div className="font-thin pl-2">{data[key].name}</div>
+ <div className="flex flex-row text-right">
+ <div className="font-bold mr-2">
+ {currencySymbol}
+ {data[key].quote[currencyCode].price.toFixed(2)}
+ </div>
+ <div
+ className={`font-bold w-10 mr-2 ${
+ 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>
- </div>
+ ))}
</div>
</Widget>
- ));
+ );
}
diff --git a/src/utils/api-helpers.js b/src/utils/api-helpers.js
index 56aea079..340ffaaa 100644
--- a/src/utils/api-helpers.js
+++ b/src/utils/api-helpers.js
@@ -15,7 +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}`,
+ coinmarketcap: `https://pro-api.coinmarketcap.com/{endpoint}`,
gotify: `{url}/{endpoint}`,
};
diff --git a/src/utils/service-helpers.js b/src/utils/service-helpers.js
index b9ceabcf..595d5e36 100644
--- a/src/utils/service-helpers.js
+++ b/src/utils/service-helpers.js
@@ -110,10 +110,19 @@ export function cleanServiceGroups(groups) {
const cleanedService = { ...service };
if (cleanedService.widget) {
- const { type, server, container } = cleanedService.widget;
+ // whitelisted set of keys to pass to the frontend
+ const {
+ type, // all widgets
+ server, // docker widget
+ container,
+ currency, // coinmarketcap widget
+ symbols,
+ } = cleanedService.widget;
cleanedService.widget = {
type,
+ currency,
+ symbols,
service_name: service.name,
service_group: serviceGroup.name,
};