diff --git a/src/pages/api/services/proxy.js b/src/pages/api/services/proxy.js index a33e662836d..dbe6fe9e3e7 100644 --- a/src/pages/api/services/proxy.js +++ b/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}`; } diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js index c9828c660c8..c26281c7e58 100644 --- a/src/utils/config/service-helpers.js +++ b/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 (symbols) cleanedService.widget.symbols = symbols; - if (defaultinterval) cleanedService.widget.defaultinterval = defaultinterval; + if (type === "coinmarketcap") { + if (currency) cleanedService.widget.currency = currency; + 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; diff --git a/src/widgets/coinmarketcap/component.jsx b/src/widgets/coinmarketcap/component.jsx index 554bb044f3c..a71a246f388 100644 --- a/src/widgets/coinmarketcap/component.jsx +++ b/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", { - symbol: `${symbols.join(",")}`, + const params = { convert: `${currencyCode}`, - }); + } + + // 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 || symbols.length === 0) { + if ((!symbols && !slugs) || (symbols?.length === 0 && slugs?.length === 0)) { return ( @@ -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 ( @@ -58,28 +68,28 @@ export default function Component({ service }) {
- {symbols.map((symbol) => ( + {validCryptos.map((crypto) => (
-
{data[symbol].name}
+
{crypto.name}
{t("common.number", { - value: data[symbol].quote[currencyCode].price, + value: crypto.quote[currencyCode].price, style: "currency", currency: currencyCode, })}
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)}%
diff --git a/src/widgets/coinmarketcap/widget.js b/src/widgets/coinmarketcap/widget.js index fcbafadf936..85062b6078e 100644 --- a/src/widgets/coinmarketcap/widget.js +++ b/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"], }, }, };