From 37cd7eb40c2c22abe81ddffe3c64f2f39102a142 Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Fri, 12 Jan 2024 15:01:23 +0700
Subject: [PATCH] fix: react warnings

---
 frontend/src/screens/apps/NewApp.tsx  | 36 ++++++------
 frontend/src/screens/apps/ShowApp.tsx | 80 ++++++++++++++-------------
 2 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/frontend/src/screens/apps/NewApp.tsx b/frontend/src/screens/apps/NewApp.tsx
index 621c4422..48ea4c65 100644
--- a/frontend/src/screens/apps/NewApp.tsx
+++ b/frontend/src/screens/apps/NewApp.tsx
@@ -276,24 +276,23 @@ const NewApp = () => {
                             >
                               {Object.keys(budgetOptions).map((budget) => {
                                 return (
-                                  <>
-                                    <div
-                                      onClick={() =>
-                                        setMaxAmount(budgetOptions[budget])
-                                      }
-                                      className={`col-span-2 md:col-span-1 cursor-pointer rounded border-2 ${
-                                        maxAmount == budgetOptions[budget]
-                                          ? "border-purple-700 dark:border-purple-300 text-purple-700 bg-purple-100 dark:bg-purple-900"
-                                          : "border-gray-200 dark:border-gray-400"
-                                      } text-center py-4 dark:text-white`}
-                                    >
-                                      {budget}
-                                      <br />
-                                      {budgetOptions[budget]
-                                        ? "sats"
-                                        : "#reckless"}
-                                    </div>
-                                  </>
+                                  <div
+                                    key={budget}
+                                    onClick={() =>
+                                      setMaxAmount(budgetOptions[budget])
+                                    }
+                                    className={`col-span-2 md:col-span-1 cursor-pointer rounded border-2 ${
+                                      maxAmount == budgetOptions[budget]
+                                        ? "border-purple-700 dark:border-purple-300 text-purple-700 bg-purple-100 dark:bg-purple-900"
+                                        : "border-gray-200 dark:border-gray-400"
+                                    } text-center py-4 dark:text-white`}
+                                  >
+                                    {budget}
+                                    <br />
+                                    {budgetOptions[budget]
+                                      ? "sats"
+                                      : "#reckless"}
+                                  </div>
                                 );
                               })}
                             </div>
@@ -339,6 +338,7 @@ const NewApp = () => {
                     {Object.keys(expiryOptions).map((expiry) => {
                       return (
                         <div
+                          key={expiry}
                           onClick={() => handleDays(expiryOptions[expiry])}
                           className={`cursor-pointer rounded border-2 ${
                             days == expiryOptions[expiry]
diff --git a/frontend/src/screens/apps/ShowApp.tsx b/frontend/src/screens/apps/ShowApp.tsx
index 0b332f63..77abd633 100644
--- a/frontend/src/screens/apps/ShowApp.tsx
+++ b/frontend/src/screens/apps/ShowApp.tsx
@@ -60,34 +60,36 @@ function ShowApp() {
         <div className="divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
           <div className="pb-4">
             <table>
-              <tr>
-                <td className="align-top w-32 font-medium dark:text-white">
-                  Public Key
-                </td>
-                <td className="text-gray-600 dark:text-neutral-400 break-all">
-                  {app.nostrPubkey}
-                </td>
-              </tr>
-              <tr>
-                <td className="align-top font-medium dark:text-white">
-                  Last used
-                </td>
-                <td className="text-gray-600 dark:text-neutral-400">
-                  {app.lastEventAt
-                    ? new Date(app.lastEventAt).toLocaleDateString()
-                    : "never"}
-                </td>
-              </tr>
-              <tr>
-                <td className="align-top font-medium dark:text-white">
-                  Expires at
-                </td>
-                <td className="text-gray-600 dark:text-neutral-400">
-                  {app.expiresAt
-                    ? new Date(app.expiresAt).toLocaleDateString()
-                    : "never"}
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <td className="align-top w-32 font-medium dark:text-white">
+                    Public Key
+                  </td>
+                  <td className="text-gray-600 dark:text-neutral-400 break-all">
+                    {app.nostrPubkey}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="align-top font-medium dark:text-white">
+                    Last used
+                  </td>
+                  <td className="text-gray-600 dark:text-neutral-400">
+                    {app.lastEventAt
+                      ? new Date(app.lastEventAt).toLocaleDateString()
+                      : "never"}
+                  </td>
+                </tr>
+                <tr>
+                  <td className="align-top font-medium dark:text-white">
+                    Expires at
+                  </td>
+                  <td className="text-gray-600 dark:text-neutral-400">
+                    {app.expiresAt
+                      ? new Date(app.expiresAt).toLocaleDateString()
+                      : "never"}
+                  </td>
+                </tr>
+              </tbody>
             </table>
           </div>
 
@@ -106,16 +108,18 @@ function ShowApp() {
             {app.maxAmount > 0 && (
               <div className="pl-6">
                 <table className="text-gray-600 dark:text-neutral-400">
-                  <tr>
-                    <td className="font-medium">Budget</td>
-                    <td>
-                      {app.maxAmount} sats ({app.budgetUsage} sats used)
-                    </td>
-                  </tr>
-                  <tr>
-                    <td className="font-medium pr-3">Renews</td>
-                    <td>{app.budgetRenewal}</td>
-                  </tr>
+                  <tbody>
+                    <tr>
+                      <td className="font-medium">Budget</td>
+                      <td>
+                        {app.maxAmount} sats ({app.budgetUsage} sats used)
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="font-medium pr-3">Renews</td>
+                      <td>{app.budgetRenewal}</td>
+                    </tr>
+                  </tbody>
                 </table>
               </div>
             )}