Merge pull request #1684 from benphelps/feature-coinmarketcap-slugs

Feature: support coinmarketcap slugs

src/pages/api/services/proxy.js

@@ -22,6 +22,7 @@ export default async function handler(req, res) {
       if (widget?.mappings) {
         const mapping = widget?.mappings?.[req.query.endpoint];
         const mappingParams = mapping?.params;
+        const optionalParams = mapping?.optionalParams;
         const map = mapping?.map;
         const endpoint = mapping?.endpoint;
         const endpointProxy = mapping?.proxyHandler || serviceProxyHandler;
@@ -40,9 +41,17 @@ export default async function handler(req, res) {
           req.query.endpoint = formatApiCall(endpoint, segments);
         }
 
-        if (req.query.query && mappingParams) {
+        if (req.query.query && (mappingParams || optionalParams)) {
           const queryParams = JSON.parse(req.query.query);
-          const query = new URLSearchParams(mappingParams.map((p) => [p, queryParams[p]]));
+
+          let filteredOptionalParams = []
+          if (optionalParams) filteredOptionalParams = optionalParams.filter(p => queryParams[p] !== undefined);
+          
+          let params = [];
+          if (mappingParams) params = params.concat(mappingParams);
+          if (filteredOptionalParams) params = params.concat(filteredOptionalParams);
+          
+          const query = new URLSearchParams(params.map((p) => [p, queryParams[p]]));
           req.query.endpoint = `${req.query.endpoint}?${query}`;
         }
 

src/utils/config/service-helpers.js

@@ -279,6 +279,7 @@ export function cleanServiceGroups(groups) {
           container,
           currency, // coinmarketcap widget
           symbols,
+          slugs,
           defaultinterval,
           site, // unifi widget
           namespace, // kubernetes widget
@@ -308,9 +309,12 @@ export function cleanServiceGroups(groups) {
           service_group: serviceGroup.name,
         };
 
-        if (currency) cleanedService.widget.currency = currency;
+        if (type === "coinmarketcap") {
-        if (symbols) cleanedService.widget.symbols = symbols;
+          if (currency) cleanedService.widget.currency = currency;
-        if (defaultinterval) cleanedService.widget.defaultinterval = defaultinterval;
+          if (symbols) cleanedService.widget.symbols = symbols;
+          if (slugs) cleanedService.widget.slugs = slugs;
+          if (defaultinterval) cleanedService.widget.defaultinterval = defaultinterval;
+        }
 
         if (type === "docker") {
           if (server) cleanedService.widget.server = server;

src/widgets/coinmarketcap/component.jsx

@@ -19,17 +19,26 @@ export default function Component({ service }) {
 
   const { widget } = service;
   const { symbols } = widget;
+  const { slugs } = widget;
   const currencyCode = widget.currency ?? "USD";
   const interval = widget.defaultinterval ?? dateRangeOptions[0].value;
 
   const [dateRange, setDateRange] = useState(interval);
 
-  const { data: statsData, error: statsError } = useWidgetAPI(widget, "v1/cryptocurrency/quotes/latest", {
+  const params = {
-    symbol: `${symbols.join(",")}`,
     convert: `${currencyCode}`,
-  });
+  }
 
-  if (!symbols || symbols.length === 0) {
+  // slugs >> symbols, not both
+  if (slugs?.length) {
+    params.slug = slugs.join(",");
+  } else if (symbols?.length) {
+    params.symbol = symbols.join(",");
+  }
+
+  const { data: statsData, error: statsError } = useWidgetAPI(widget, "v1/cryptocurrency/quotes/latest", params);
+
+  if ((!symbols && !slugs) || (symbols?.length === 0 && slugs?.length === 0)) {
     return (
       <Container service={service}>
         <Block value={t("coinmarketcap.configure")} />
@@ -50,6 +59,7 @@ export default function Component({ service }) {
   }
 
   const { data } = statsData;
+  const validCryptos = Object.values(data).filter(crypto => crypto.quote[currencyCode][`percent_change_${dateRange}`] !== null)
 
   return (
     <Container service={service}>
@@ -58,28 +68,28 @@ export default function Component({ service }) {
       </div>
 
       <div className="flex flex-col w-full">
-        {symbols.map((symbol) => (
+        {validCryptos.map((crypto) => (
           <div
-            key={data[symbol].symbol}
+            key={crypto.id}
             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"
           >
-            <div className="font-thin pl-2">{data[symbol].name}</div>
+            <div className="font-thin pl-2">{crypto.name}</div>
             <div className="flex flex-row text-right">
               <div className="font-bold mr-2">
                 {t("common.number", {
-                  value: data[symbol].quote[currencyCode].price,
+                  value: crypto.quote[currencyCode].price,
                   style: "currency",
                   currency: currencyCode,
                 })}
               </div>
               <div
                 className={`font-bold w-10 mr-2 ${
-                  data[symbol].quote[currencyCode][`percent_change_${dateRange}`] > 0
+                  crypto.quote[currencyCode][`percent_change_${dateRange}`] > 0
                     ? "text-emerald-300"
                     : "text-rose-300"
                 }`}
               >
-                {data[symbol].quote[currencyCode][`percent_change_${dateRange}`].toFixed(2)}%
+                {crypto.quote[currencyCode][`percent_change_${dateRange}`].toFixed(2)}%
               </div>
             </div>
           </div>

src/widgets/coinmarketcap/widget.js

@@ -7,7 +7,8 @@ const widget = {
   mappings: {
     "v1/cryptocurrency/quotes/latest": {
       endpoint: "v1/cryptocurrency/quotes/latest",
-      params: ["symbol", "convert"],
+      params: ["convert"],
+      optionalParams: ["symbol", "slug"],
     },
   },
 };