Update CoinMarketCap widget to have time selector

public/locales/de/common.json

@@ -109,8 +109,12 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

public/locales/en/common.json

@@ -126,7 +126,11 @@
         "total": "Total"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
     },
     "gotify": {
         "apps": "Applications",

public/locales/es/common.json

@@ -109,8 +109,12 @@
         "downloaded": "Descargado"
     },
     "coinmarketcap": {
-        "configure": "Configurar una o varias criptomonedas para su seguimiento"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Aplicaciones",
         "clients": "Clientes",

public/locales/fr/common.json

@@ -120,8 +120,12 @@
         "rate": "Évaluer"
     },
     "coinmarketcap": {
-        "configure": "Configurer une ou plusieurs crypto-monnaies à suivre"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

public/locales/it/common.json

@@ -109,8 +109,12 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

public/locales/nb-NO/common.json

@@ -109,8 +109,12 @@
         "remaining": "Gjenstående"
     },
     "coinmarketcap": {
-        "configure": "Sett opp én eller flere kryptovalutaer å holde øye med"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Programmer",
         "clients": "Klienter",

public/locales/nl/common.json

@@ -109,8 +109,12 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

public/locales/pt/common.json

@@ -120,8 +120,12 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Aplicações",
         "clients": "Clientes",

public/locales/ru/common.json

@@ -109,8 +109,12 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

public/locales/vi/common.json

@@ -109,8 +109,12 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

public/locales/zh-CN/common.json

@@ -109,8 +109,12 @@
         "downloaded": "下载"
     },
     "coinmarketcap": {
-        "configure": "配置一个或多个需要追踪的加密"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "gotify": {
         "apps": "应用",
         "clients": "客户端",

public/locales/zh-Hant/common.json

@@ -114,8 +114,12 @@
         "total": "Total"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
-    },
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
+  },
     "prowlarr": {
         "enableIndexers": "Indexers",
         "numberOfGrabs": "Grabs",

src/components/services/dropdown.jsx

@@ -0,0 +1,44 @@
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { BiCog } from "react-icons/bi";
+
+export default function Dropdown({ options, state }) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-theme-600/40 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-theme-600/40 focus:outline-none">
+          {state.value.label}
+          <BiCog className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-600/40 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">
+            {options.map((i) => (
+              <Menu.Item key={i.value}>
+                <button
+                  onClick={() => {
+                    state.set(i);
+                  }}
+                  type="button"
+                  className="text-white block px-4 py-2 text-sm"
+                >
+                  {i.label}
+                </button>
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

src/components/services/item.jsx

@@ -1,9 +1,11 @@
 import Image from "next/future/image";
 import { Disclosure } from "@headlessui/react";
+import { useState } from "react";
 
 import Status from "./status";
 import Widget from "./widget";
 import Docker from "./widgets/service/docker";
+import Dropdown from "./dropdown";
 
 function resolveIcon(icon) {
   if (icon.startsWith("http")) {
@@ -28,6 +30,19 @@ export default function Item({ service }) {
     }
   };
 
+  const cmcValues = [
+    { label: "1 Hour", value: "1h" },
+    { label: "1 Day", value: "24h" },
+    { label: "7 Days", value: "7d" },
+    { label: "30 Days", value: "30d" },
+  ];
+
+  const [cmcV, cmcSet] = useState(cmcValues[0]);
+
+  const states = {
+    coinmarketcap: { value: cmcV, set: cmcSet },
+  };
+
   const hasLink = service.href && service.href !== "#";
 
   return (
@@ -82,6 +97,7 @@ export default function Item({ service }) {
                 <Status service={service} />
               </Disclosure.Button>
             )}
+            {service?.widget?.type === "coinmarketcap" && <Dropdown state={states.coinmarketcap} options={cmcValues} />}
           </div>
 
           <Disclosure.Panel>
@@ -90,7 +106,7 @@ export default function Item({ service }) {
             </div>
           </Disclosure.Panel>
 
-          {service.widget && <Widget service={service} />}
+          {service.widget && <Widget state={states[service?.widget?.type]} service={service} />}
         </div>
       </Disclosure>
     </li>

src/components/services/widget.jsx

@@ -45,16 +45,16 @@ const widgetMappings = {
   npm: Npm,
   tautulli: Tautulli,
   gotify: Gotify,
-  prowlarr: Prowlarr
+  prowlarr: Prowlarr,
 };
 
-export default function Widget({ service }) {
+export default function Widget({ service, state }) {
   const { t } = useTranslation("common");
 
   const ServiceWidget = widgetMappings[service.widget.type];
 
   if (ServiceWidget) {
-    return <ServiceWidget service={service} />;
+    return <ServiceWidget state={state} service={service} />;
   }
 
   return (

src/components/services/widgets/service/coinmarketcap.jsx

@@ -1,13 +1,12 @@
 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 }) {
+export default function CoinMarketCap({ service, state }) {
   const { t } = useTranslation();
 
   const config = service.widget;
@@ -39,7 +38,6 @@ export default function CoinMarketCap({ service }) {
   }
 
   const { data } = statsData;
-  const currencySymbol = getSymbolFromCurrency(currencyCode);
 
   return (
     <Widget>
@@ -52,15 +50,20 @@ export default function CoinMarketCap({ service }) {
             <div className="font-thin pl-2">{data[key].name}</div>
             <div className="flex flex-row text-right">
               <div className="font-bold mr-2">
-                {currencySymbol}
+                {t("common.number", {
-                {data[key].quote[currencyCode].price.toFixed(2)}
+                  value: data[key].quote[currencyCode].price,
+                  style: "currency",
+                  currency: currencyCode,
+                })}
               </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_${state.value.value}`] > 0
+                    ? "text-emerald-300"
+                    : "text-rose-300"
                 }`}
               >
-                {data[key].quote[currencyCode].percent_change_1h.toFixed(2)}%
+                {data[key].quote[currencyCode][`percent_change_${state.value.value}`].toFixed(2)}%
               </div>
             </div>
           </div>