cleanup coinmarketcap widget

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 = config.currency ?? "USD";
-  const currencyCode = service.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) => (
+  return (
-    <Widget key={data[key].symbol}>
+    <Widget>
-      <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="flex flex-col w-full">
-        <div className="font-thin text-sm">{data[key].name}</div>
+        {symbols.map((key) => (
-        <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 ${
+            key={data[key].symbol}
-              data[key].quote[currencyCode].percent_change_1h > 0 ? "text-emerald-300" : "text-rose-300"
+            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>
-  ));
+  );
 }

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}`,
 };
 

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,
         };