From 767aa9b3e1d8640347e5153aa62ffdc3afb95886 Mon Sep 17 00:00:00 2001
From: Chris McGravey <chris@mcgravey.dev>
Date: Tue, 13 Sep 2022 15:35:53 -0500
Subject: [PATCH 01/16] Update CoinMarketCap widget to have time selector

---
 public/locales/de/common.json                 |  8 +++-
 public/locales/en/common.json                 |  6 ++-
 public/locales/es/common.json                 |  8 +++-
 public/locales/fr/common.json                 |  8 +++-
 public/locales/it/common.json                 |  8 +++-
 public/locales/nb-NO/common.json              |  8 +++-
 public/locales/nl/common.json                 |  8 +++-
 public/locales/pt/common.json                 |  8 +++-
 public/locales/ru/common.json                 |  8 +++-
 public/locales/vi/common.json                 |  8 +++-
 public/locales/zh-CN/common.json              |  8 +++-
 public/locales/zh-Hant/common.json            |  8 +++-
 src/components/services/dropdown.jsx          | 44 +++++++++++++++++++
 src/components/services/item.jsx              | 18 +++++++-
 src/components/services/widget.jsx            |  6 +--
 .../widgets/service/coinmarketcap.jsx         | 17 ++++---
 16 files changed, 145 insertions(+), 34 deletions(-)
 create mode 100644 src/components/services/dropdown.jsx

diff --git a/public/locales/de/common.json b/public/locales/de/common.json
index bbb5ff666..2198488cf 100644
--- a/public/locales/de/common.json
+++ b/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",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5fbaaf216..60bfef6b7 100644
--- a/public/locales/en/common.json
+++ b/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",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index d61bda0e9..b9f928fb5 100644
--- a/public/locales/es/common.json
+++ b/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",
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index 924d88a61..0f3cc5e3e 100644
--- a/public/locales/fr/common.json
+++ b/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",
diff --git a/public/locales/it/common.json b/public/locales/it/common.json
index 585aae1e0..0d53c8cbc 100644
--- a/public/locales/it/common.json
+++ b/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",
diff --git a/public/locales/nb-NO/common.json b/public/locales/nb-NO/common.json
index 141378e8b..62f6fa338 100644
--- a/public/locales/nb-NO/common.json
+++ b/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",
diff --git a/public/locales/nl/common.json b/public/locales/nl/common.json
index d2975cd2e..6ca2a79bf 100644
--- a/public/locales/nl/common.json
+++ b/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",
diff --git a/public/locales/pt/common.json b/public/locales/pt/common.json
index 4dafc19f2..eb18e0879 100644
--- a/public/locales/pt/common.json
+++ b/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",
diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json
index 0f4ae8af4..a35c8869c 100644
--- a/public/locales/ru/common.json
+++ b/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",
diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
index ab6122f76..4572e4c74 100644
--- a/public/locales/vi/common.json
+++ b/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",
diff --git a/public/locales/zh-CN/common.json b/public/locales/zh-CN/common.json
index b324f35bf..ba4f896bc 100644
--- a/public/locales/zh-CN/common.json
+++ b/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": "客户端",
diff --git a/public/locales/zh-Hant/common.json b/public/locales/zh-Hant/common.json
index 63df53691..c02d976c4 100644
--- a/public/locales/zh-Hant/common.json
+++ b/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",
diff --git a/src/components/services/dropdown.jsx b/src/components/services/dropdown.jsx
new file mode 100644
index 000000000..c7aad96e5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 2d50276e3..dbdd0f018 100644
--- a/src/components/services/item.jsx
+++ b/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>
diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx
index d2c8fbf78..415b24f32 100644
--- a/src/components/services/widget.jsx
+++ b/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 (
diff --git a/src/components/services/widgets/service/coinmarketcap.jsx b/src/components/services/widgets/service/coinmarketcap.jsx
index c5e66ebc8..5262eb026 100644
--- a/src/components/services/widgets/service/coinmarketcap.jsx
+++ b/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}
-                {data[key].quote[currencyCode].price.toFixed(2)}
+                {t("common.number", {
+                  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>

From ce9c115f3dd0e8383ea313d321830670ea3b62f8 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:10:11 +0300
Subject: [PATCH 02/16] Update common.json

---
 public/locales/de/common.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/public/locales/de/common.json b/public/locales/de/common.json
index 2198488cf..c72faafaa 100644
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@@ -109,11 +109,7 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
+        "configure": "Configure one or more crypto currencies to track"
   },
     "gotify": {
         "apps": "Applications",

From 22a073ba1a284a26369243acb4f160d71a3867c7 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:10:38 +0300
Subject: [PATCH 03/16] Update common.json

---
 public/locales/de/common.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/locales/de/common.json b/public/locales/de/common.json
index c72faafaa..bbb5ff666 100644
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@@ -110,7 +110,7 @@
     },
     "coinmarketcap": {
         "configure": "Configure one or more crypto currencies to track"
-  },
+    },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

From 13db31ede082eac94b19924c1c1715a70bdf4ed1 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:11:00 +0300
Subject: [PATCH 04/16] Update common.json

---
 public/locales/es/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index b9f928fb5..bbca362c0 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -109,12 +109,8 @@
         "downloaded": "Descargado"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "gotify": {
         "apps": "Aplicaciones",
         "clients": "Clientes",

From 4b69fdefef65cfdd589fe1bfcc282a8a00a99e27 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:11:30 +0300
Subject: [PATCH 05/16] Update common.json

---
 public/locales/es/common.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index bbca362c0..d61bda0e9 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -109,7 +109,7 @@
         "downloaded": "Descargado"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configurar una o varias criptomonedas para su seguimiento"
     },
     "gotify": {
         "apps": "Aplicaciones",

From 06d4f2b9f3f103bae9ffb7508990389646c2fa93 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:11:55 +0300
Subject: [PATCH 06/16] Update common.json

---
 public/locales/fr/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index 0f3cc5e3e..924d88a61 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -120,12 +120,8 @@
         "rate": "Évaluer"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configurer une ou plusieurs crypto-monnaies à suivre"
+    },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

From 17d716137474e862186da35be3aefaa86cbd0acc Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:12:13 +0300
Subject: [PATCH 07/16] Update common.json

---
 public/locales/it/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/it/common.json b/public/locales/it/common.json
index 0d53c8cbc..585aae1e0 100644
--- a/public/locales/it/common.json
+++ b/public/locales/it/common.json
@@ -109,12 +109,8 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

From e5db1ec848ef408c90c42a945a631cc0034d6536 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:12:50 +0300
Subject: [PATCH 08/16] Update common.json

---
 public/locales/nb-NO/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/nb-NO/common.json b/public/locales/nb-NO/common.json
index 62f6fa338..141378e8b 100644
--- a/public/locales/nb-NO/common.json
+++ b/public/locales/nb-NO/common.json
@@ -109,12 +109,8 @@
         "remaining": "Gjenstående"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Sett opp én eller flere kryptovalutaer å holde øye med"
+    },
     "gotify": {
         "apps": "Programmer",
         "clients": "Klienter",

From 331999c1a494d5826cbab1e83b36332e7c3e0158 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:13:08 +0300
Subject: [PATCH 09/16] Update common.json

---
 public/locales/nl/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/nl/common.json b/public/locales/nl/common.json
index 6ca2a79bf..d2975cd2e 100644
--- a/public/locales/nl/common.json
+++ b/public/locales/nl/common.json
@@ -109,12 +109,8 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

From b94d7a4ae88577845054ac027dcd2ac0089d2e10 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:13:46 +0300
Subject: [PATCH 10/16] Update common.json

---
 public/locales/pt/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/pt/common.json b/public/locales/pt/common.json
index eb18e0879..4dafc19f2 100644
--- a/public/locales/pt/common.json
+++ b/public/locales/pt/common.json
@@ -120,12 +120,8 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "gotify": {
         "apps": "Aplicações",
         "clients": "Clientes",

From beee9ecd8492229f73d052f03fca4b937bcff3f6 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:14:00 +0300
Subject: [PATCH 11/16] Update common.json

---
 public/locales/ru/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json
index a35c8869c..0f4ae8af4 100644
--- a/public/locales/ru/common.json
+++ b/public/locales/ru/common.json
@@ -109,12 +109,8 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

From 55a3e6880bac08afe86be7ab71bf9a064b396723 Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:14:20 +0300
Subject: [PATCH 12/16] Update common.json

---
 public/locales/vi/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
index 4572e4c74..ab6122f76 100644
--- a/public/locales/vi/common.json
+++ b/public/locales/vi/common.json
@@ -109,12 +109,8 @@
         "downloaded": "Downloaded"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "gotify": {
         "apps": "Applications",
         "clients": "Clients",

From 5d9e90f0338c3d1545462ec3b8fe463b0fd2065b Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:14:42 +0300
Subject: [PATCH 13/16] Update common.json

---
 public/locales/zh-CN/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/zh-CN/common.json b/public/locales/zh-CN/common.json
index ba4f896bc..b324f35bf 100644
--- a/public/locales/zh-CN/common.json
+++ b/public/locales/zh-CN/common.json
@@ -109,12 +109,8 @@
         "downloaded": "下载"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "配置一个或多个需要追踪的加密"
+    },
     "gotify": {
         "apps": "应用",
         "clients": "客户端",

From b81a5d1e5103098baeab0ff017985c205fef332a Mon Sep 17 00:00:00 2001
From: Ben Phelps <bphelpsen@gmail.com>
Date: Wed, 14 Sep 2022 01:15:06 +0300
Subject: [PATCH 14/16] Update common.json

---
 public/locales/zh-Hant/common.json | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/public/locales/zh-Hant/common.json b/public/locales/zh-Hant/common.json
index c02d976c4..63df53691 100644
--- a/public/locales/zh-Hant/common.json
+++ b/public/locales/zh-Hant/common.json
@@ -114,12 +114,8 @@
         "total": "Total"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track",
-        "1hour": "1 Hour",
-        "1day": "1 Day",
-        "7days": "7 Days",
-        "30days": "30 Days"
-  },
+        "configure": "Configure one or more crypto currencies to track"
+    },
     "prowlarr": {
         "enableIndexers": "Indexers",
         "numberOfGrabs": "Grabs",

From 6b458254728e4f5cbe54d9f34f415206af6c8e7e Mon Sep 17 00:00:00 2001
From: Chris McGravey <chris@mcgravey.dev>
Date: Tue, 13 Sep 2022 17:29:02 -0500
Subject: [PATCH 15/16] translate

---
 src/components/services/item.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index dbdd0f018..1c4475970 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -1,6 +1,7 @@
 import Image from "next/future/image";
 import { Disclosure } from "@headlessui/react";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import Status from "./status";
 import Widget from "./widget";
@@ -24,6 +25,8 @@ function resolveIcon(icon) {
 }
 
 export default function Item({ service }) {
+  const { t } = useTranslation();
+
   const handleOnClick = () => {
     if (service.href && service.href !== "#") {
       window.open(service.href, "_blank").focus();
@@ -31,10 +34,10 @@ 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" },
+    { label: t("coinmarketcap.1hour"), value: "1h" },
+    { label: t("coinmarketcap.1day"), value: "24h" },
+    { label: t("coinmarketcap.7days"), value: "7d" },
+    { label: t("coinmarketcap.30days"), value: "30d" },
   ];
 
   const [cmcV, cmcSet] = useState(cmcValues[0]);

From 62188ffdc752382fa8fbd7c56c22ceb8063e7e44 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Wed, 14 Sep 2022 09:09:11 +0300
Subject: [PATCH 16/16] cleanup

---
 src/components/services/dropdown.jsx          | 24 ++++++++------
 src/components/services/item.jsx              | 16 +---------
 src/components/services/widget.jsx            |  4 +--
 .../widgets/service/coinmarketcap.jsx         | 32 ++++++++++++++-----
 src/components/services/widgets/widget.jsx    |  2 +-
 5 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/components/services/dropdown.jsx b/src/components/services/dropdown.jsx
index c7aad96e5..4bc25a8fd 100644
--- a/src/components/services/dropdown.jsx
+++ b/src/components/services/dropdown.jsx
@@ -1,14 +1,15 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { BiCog } from "react-icons/bi";
+import classNames from "classnames";
 
-export default function Dropdown({ options, state }) {
+export default function Dropdown({ options, value, setValue }) {
   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 className="text-xs inline-flex w-full items-center rounded bg-theme-200/50 dark:bg-theme-900/20 px-3 py-1.5">
+          {options.find((option) => option.value === value).label}
+          <BiCog className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
         </Menu.Button>
       </div>
 
@@ -21,18 +22,21 @@ export default function Dropdown({ options, state }) {
         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">
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-200/50 dark:bg-theme-900/50 backdrop-blur shadow-md focus:outline-none text-theme-700 dark:text-theme-200">
           <div className="py-1">
-            {options.map((i) => (
-              <Menu.Item key={i.value}>
+            {options.map((option) => (
+              <Menu.Item key={option.value} as={Fragment}>
                 <button
                   onClick={() => {
-                    state.set(i);
+                    setValue(option.value);
                   }}
                   type="button"
-                  className="text-white block px-4 py-2 text-sm"
+                  className={classNames(
+                    value === option.value ? "bg-theme-300/40 dark:bg-theme-900/40" : "",
+                    "w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 hover:dark:bg-theme-900/70 text-left"
+                  )}
                 >
-                  {i.label}
+                  {option.label}
                 </button>
               </Menu.Item>
             ))}
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 1c4475970..06cc1629d 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -33,19 +33,6 @@ export default function Item({ service }) {
     }
   };
 
-  const cmcValues = [
-    { label: t("coinmarketcap.1hour"), value: "1h" },
-    { label: t("coinmarketcap.1day"), value: "24h" },
-    { label: t("coinmarketcap.7days"), value: "7d" },
-    { label: t("coinmarketcap.30days"), value: "30d" },
-  ];
-
-  const [cmcV, cmcSet] = useState(cmcValues[0]);
-
-  const states = {
-    coinmarketcap: { value: cmcV, set: cmcSet },
-  };
-
   const hasLink = service.href && service.href !== "#";
 
   return (
@@ -100,7 +87,6 @@ export default function Item({ service }) {
                 <Status service={service} />
               </Disclosure.Button>
             )}
-            {service?.widget?.type === "coinmarketcap" && <Dropdown state={states.coinmarketcap} options={cmcValues} />}
           </div>
 
           <Disclosure.Panel>
@@ -109,7 +95,7 @@ export default function Item({ service }) {
             </div>
           </Disclosure.Panel>
 
-          {service.widget && <Widget state={states[service?.widget?.type]} service={service} />}
+          {service.widget && <Widget service={service} />}
         </div>
       </Disclosure>
     </li>
diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx
index 415b24f32..df1243240 100644
--- a/src/components/services/widget.jsx
+++ b/src/components/services/widget.jsx
@@ -48,13 +48,13 @@ const widgetMappings = {
   prowlarr: Prowlarr,
 };
 
-export default function Widget({ service, state }) {
+export default function Widget({ service }) {
   const { t } = useTranslation("common");
 
   const ServiceWidget = widgetMappings[service.widget.type];
 
   if (ServiceWidget) {
-    return <ServiceWidget state={state} service={service} />;
+    return <ServiceWidget service={service} />;
   }
 
   return (
diff --git a/src/components/services/widgets/service/coinmarketcap.jsx b/src/components/services/widgets/service/coinmarketcap.jsx
index 5262eb026..8fc30f525 100644
--- a/src/components/services/widgets/service/coinmarketcap.jsx
+++ b/src/components/services/widgets/service/coinmarketcap.jsx
@@ -1,14 +1,26 @@
 import useSWR from "swr";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import Widget from "../widget";
 import Block from "../block";
 
+import Dropdown from "components/services/dropdown";
 import { formatApiUrl } from "utils/api-helpers";
+import classNames from "classnames";
 
-export default function CoinMarketCap({ service, state }) {
+export default function CoinMarketCap({ service }) {
   const { t } = useTranslation();
 
+  const dateRangeOptions = [
+    { label: t("coinmarketcap.1hour"), value: "1h" },
+    { label: t("coinmarketcap.1day"), value: "24h" },
+    { label: t("coinmarketcap.7days"), value: "7d" },
+    { label: t("coinmarketcap.30days"), value: "30d" },
+  ];
+
+  const [dateRange, setDateRange] = useState(dateRangeOptions[0].value);
+
   const config = service.widget;
   const currencyCode = config.currency ?? "USD";
   const { symbols } = config;
@@ -29,7 +41,7 @@ export default function CoinMarketCap({ service, state }) {
     return <Widget error={t("widget.api_error")} />;
   }
 
-  if (!statsData) {
+  if (!statsData || !dateRange) {
     return (
       <Widget>
         <Block value={t("coinmarketcap.configure")} />
@@ -41,29 +53,33 @@ export default function CoinMarketCap({ service, state }) {
 
   return (
     <Widget>
+      <div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1")}>
+        <Dropdown options={dateRangeOptions} value={dateRange} setValue={setDateRange} />
+      </div>
+
       <div className="flex flex-col w-full">
-        {symbols.map((key) => (
+        {symbols.map((symbol) => (
           <div
-            key={data[key].symbol}
+            key={data[symbol].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"
           >
-            <div className="font-thin pl-2">{data[key].name}</div>
+            <div className="font-thin pl-2">{data[symbol].name}</div>
             <div className="flex flex-row text-right">
               <div className="font-bold mr-2">
                 {t("common.number", {
-                  value: data[key].quote[currencyCode].price,
+                  value: data[symbol].quote[currencyCode].price,
                   style: "currency",
                   currency: currencyCode,
                 })}
               </div>
               <div
                 className={`font-bold w-10 mr-2 ${
-                  data[key].quote[currencyCode][`percent_change_${state.value.value}`] > 0
+                  data[symbol].quote[currencyCode][`percent_change_${dateRange}`] > 0
                     ? "text-emerald-300"
                     : "text-rose-300"
                 }`}
               >
-                {data[key].quote[currencyCode][`percent_change_${state.value.value}`].toFixed(2)}%
+                {data[symbol].quote[currencyCode][`percent_change_${dateRange}`].toFixed(2)}%
               </div>
             </div>
           </div>
diff --git a/src/components/services/widgets/widget.jsx b/src/components/services/widgets/widget.jsx
index 98e4683eb..12202c05f 100644
--- a/src/components/services/widgets/widget.jsx
+++ b/src/components/services/widgets/widget.jsx
@@ -7,5 +7,5 @@ export default function Widget({ error = false, children }) {
     );
   }
 
-  return <div className="flex flex-row w-full">{children}</div>;
+  return <div className="relative flex flex-row w-full">{children}</div>;
 }