fix: simplify styles & fix margins on homescreen (#3092)

reneaaron · web-flow · commit 630b4c0f9077 · 2024-03-19T15:16:35.000+01:00
* fix: simplify styles &amp; fix margins on homescreen

* fix: remove obsolete translation

* fix: conditions

* fix: conditions
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
@@ -37,13 +37,15 @@ export default function TransactionsTable({
   }
 
   return (
-    <div className="mt-4">
+    <div>
       {loading ? (
         <div className="w-full flex flex-col items-center">
           <Loading />
         </div>
-      ) : !transactions?.length && noResultMsg ? (
-        <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
+      ) : !transactions?.length ? (
+        <p className="text-gray-500 dark:text-neutral-400">
+          {t("no_transactions")}
+        </p>
       ) : (
         <>
           {transactions?.map((tx) => {
diff --git a/src/app/screens/Home/AllowanceView/index.tsx b/src/app/screens/Home/AllowanceView/index.tsx
@@ -1,6 +1,5 @@
 import Header from "@components/Header";
 import IconButton from "@components/IconButton";
-import Loading from "@components/Loading";
 import Progressbar from "@components/Progressbar";
 import PublisherCard from "@components/PublisherCard";
 import SitePreferences from "@components/SitePreferences";
@@ -9,7 +8,7 @@ import { PopiconsChevronLeftLine } from "@popicons/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { FC, useEffect, useState } from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import toast from "~/app/components/Toast";
 import { useSettings } from "~/app/context/SettingsContext";
 import { PublisherLnData } from "~/app/screens/Home/PublisherLnData";
@@ -40,7 +39,6 @@ const AllowanceView: FC<Props> = (props) => {
   const { t } = useTranslation("translation", { keyPrefix: "home" });
 
   const showFiat = !isLoadingSettings && settings.showFiat;
-  const hasTransactions = !isLoadingTransactions && !!transactions?.length;
 
   // get array of payments if not done yet
   useEffect(() => {
@@ -139,26 +137,10 @@ const AllowanceView: FC<Props> = (props) => {
             />
           </div>
         )}
-
-        {isLoadingTransactions && (
-          <div className="flex justify-center">
-            <Loading />
-          </div>
-        )}
-
-        {hasTransactions && <TransactionsTable transactions={transactions} />}
-
-        {!isLoadingTransactions && !transactions?.length && (
-          <p className="text-gray-500 dark:text-neutral-400 text-center">
-            <Trans
-              i18nKey={"allowance_view.no_transactions"}
-              t={t}
-              values={{ name: props.allowance.name }}
-              // eslint-disable-next-line react/jsx-key
-              components={[<strong></strong>]}
-            />
-          </p>
-        )}
+        <TransactionsTable
+          loading={isLoadingTransactions}
+          transactions={transactions}
+        />
       </div>
     </div>
   );
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
@@ -53,6 +53,8 @@ const DefaultView: FC<Props> = (props) => {
     useTransactions();
 
   const isLoading = accountLoading || isLoadingTransactions;
+  const needsKeySetup =
+    !currentAccount?.hasMnemonic || !currentAccount?.isMnemonicBackupDone;
 
   useEffect(() => {
     loadTransactions(itemsLimit);
@@ -190,52 +192,52 @@ const DefaultView: FC<Props> = (props) => {
         )}
 
         {!isLoading && (
-          <div>
-            <div className="flex flex-col mt-4 gap-2 md:gap-3">
-              {transactions.length == 0 && (
-                <IconLinkCard
-                  title={t("default_view.actions.get_started.title")}
-                  description={t(
-                    "default_view.actions.get_started.description"
-                  )}
-                  icon={<PopiconsBulbLine className="w-8 h-8" />}
-                  onClick={() => {
-                    utils.openUrl(
-                      "https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/"
-                    );
-                  }}
-                />
-              )}
-
-              {!(
-                currentAccount?.hasMnemonic &&
-                currentAccount?.isMnemonicBackupDone
-              ) && (
-                <IconLinkCard
-                  title={t("default_view.actions.setup_keys.title")}
-                  description={t("default_view.actions.setup_keys.description")}
-                  icon={<PopiconsKeyLine className="w-8 h-8" />}
-                  onClick={async () => {
-                    openOptions(
-                      `accounts/${currentAccount?.id}/secret-key/new`
-                    );
-                  }}
-                />
-              )}
+          <div className="mt-4 flex flex-col gap-4">
+            {(transactions.length === 0 || needsKeySetup) && (
+              <div className="flex flex-col gap-2 md:gap-3">
+                {transactions.length === 0 && (
+                  <IconLinkCard
+                    title={t("default_view.actions.get_started.title")}
+                    description={t(
+                      "default_view.actions.get_started.description"
+                    )}
+                    icon={<PopiconsBulbLine className="w-8 h-8" />}
+                    onClick={() => {
+                      utils.openUrl(
+                        "https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/"
+                      );
+                    }}
+                  />
+                )}
+                {needsKeySetup && (
+                  <IconLinkCard
+                    title={t("default_view.actions.setup_keys.title")}
+                    description={t(
+                      "default_view.actions.setup_keys.description"
+                    )}
+                    icon={<PopiconsKeyLine className="w-8 h-8" />}
+                    onClick={async () => {
+                      openOptions(
+                        `accounts/${currentAccount?.id}/secret-key/new`
+                      );
+                    }}
+                  />
+                )}
+                {transactions.length === 0 && (
+                  <IconLinkCard
+                    title={t("default_view.actions.receive_bitcoin.title")}
+                    description={t(
+                      "default_view.actions.receive_bitcoin.description"
+                    )}
+                    icon={<PopiconsArrowDownLine className="w-8 h-8" />}
+                    onClick={() => {
+                      navigate("/receive");
+                    }}
+                  />
+                )}
+              </div>
+            )}
 
-              {transactions.length == 0 && (
-                <IconLinkCard
-                  title={t("default_view.actions.receive_bitcoin.title")}
-                  description={t(
-                    "default_view.actions.receive_bitcoin.description"
-                  )}
-                  icon={<PopiconsArrowDownLine className="w-8 h-8" />}
-                  onClick={() => {
-                    navigate("/receive");
-                  }}
-                />
-              )}
-            </div>
             <TransactionsTable
               transactions={transactions}
               loading={isLoading}
diff --git a/src/app/screens/Publishers/Detail/index.tsx b/src/app/screens/Publishers/Detail/index.tsx
@@ -4,7 +4,6 @@ import TransactionsTable from "@components/TransactionsTable";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Trans, useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import toast from "~/app/components/Toast";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -15,9 +14,6 @@ import type { Allowance, Transaction } from "~/types";
 dayjs.extend(relativeTime);
 
 function PublisherDetail() {
-  const { t } = useTranslation("translation", {
-    keyPrefix: "home",
-  });
   const {
     isLoading: isLoadingSettings,
     settings,
@@ -84,23 +80,10 @@ function PublisherDetail() {
           isSmall={false}
         />
       )}
-
       {allowance && (
         <Container>
-          <div className="mt-5">
-            {transactions && transactions?.length > 0 ? (
-              <TransactionsTable transactions={transactions} />
-            ) : (
-              <p className="text-gray-500 dark:text-neutral-400">
-                <Trans
-                  i18nKey={"allowance_view.no_transactions"}
-                  t={t}
-                  values={{ name: allowance.name }}
-                  // eslint-disable-next-line react/jsx-key
-                  components={[<strong></strong>]}
-                />
-              </p>
-            )}
+          <div className="mt-4">
+            <TransactionsTable transactions={transactions} />
           </div>
         </Container>
       )}
diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
@@ -1,5 +1,4 @@
 import Container from "@components/Container";
-import Loading from "@components/Loading";
 import TransactionsTable from "@components/TransactionsTable";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -31,17 +30,7 @@ function Transactions() {
         {t("description")}
       </p>
 
-      {isLoading ? (
-        <div className="flex justify-center mt-12">
-          <Loading />
-        </div>
-      ) : (
-        <div>
-          {transactions && transactions.length > 0 && (
-            <TransactionsTable transactions={transactions} />
-          )}
-        </div>
-      )}
+      <TransactionsTable loading={isLoading} transactions={transactions} />
     </Container>
   );
 }
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -361,7 +361,6 @@
       "allowance_view": {
         "budget_spent": "Budget spent",
         "sats": "sats",
-        "no_transactions": "No transactions on <0>{{name}}</0> yet.",
         "total_spent": "Total spent",
         "total_payments": "Total payments",
         "permissions": "Permissions"
@@ -374,15 +373,15 @@
         "actions": {
           "get_started": {
             "title": "Get Started With Alby Extension",
-            "description": "New to Alby Extension? Check out our guides, videos, and explanations"
+            "description": "New to Alby Extension? Check out our guides, videos and explanations"
           },
           "setup_keys": {
             "title": "Setup your keys",
             "description": "Take care of your Master Key or import your existing Nostr account"
           },
           "receive_bitcoin": {
             "title": "Receive bitcoin",
-            "description": "Get bitcoin to your lightning address, a lightning invoice or bitcoin address."
+            "description": "Fund your account and receive via your lightning address or an invoice"
           }
         }
       }
@@ -951,8 +950,7 @@
     },
     "transactions": {
       "title": "Transactions",
-      "description": "Transactions for this account",
-      "list_empty": "No transactions available yet."
+      "description": "Transactions for this account"
     },
     "onboard": {
       "title": "Setup your keys",
@@ -1106,7 +1104,8 @@
         "timestamp": "Timestamp",
         "totalAmount": "Total amount"
       },
-      "open_location": "Open website"
+      "open_location": "Open website",
+      "no_transactions": "No transactions yet."
     },
     "budget_control": {
       "remember": {
