fix #8410

2 files changed, 27 insertions, 11 deletions

diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index 5e99a8a76..2d217989c 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -24,24 +24,24 @@ import { useTransactions } from "../../hooks/access.js";
 import { Props, State, Transaction } from "./index.js";
 
 export function useComponentState({ account, routeCreateWireTransfer }: Props): State {
-  const result = useTransactions(account);
-  if (!result) {
+  const txResult = useTransactions(account);
+  if (!txResult) {
     return {
       status: "loading",
       error: undefined,
     };
   }
-  if (result instanceof TalerError) {
+  if (txResult instanceof TalerError) {
     return {
       status: "loading-error",
-      error: result,
+      error: txResult,
     };
   }
 
   const transactions =
-    result.data.type === "fail"
+    txResult.data.type === "fail"
       ? []
-      : result.data.body.transactions
+      : txResult.data.body.transactions
         .map((tx) => {
           const negative = tx.direction === "debit";
           const cp = parsePaytoUri(
@@ -76,7 +76,7 @@ export function useComponentState({ account, routeCreateWireTransfer }: Props):
     error: undefined,
     routeCreateWireTransfer,
     transactions,
-    onNext: result.isLastPage ? undefined : result.loadMore,
-    onPrev: result.isFirstPage ? undefined : result.loadMorePrev,
+    onNext: txResult.isLastPage ? undefined : txResult.loadMore,
+    onPrev: txResult.isFirstPage ? undefined : txResult.loadMorePrev,
   };
 }
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index 036cca4f7..a1ec0fa00 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -14,12 +14,13 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Attention, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 import { State } from "./index.js";
+import { useAccountDetails } from "../../hooks/access.js";
 
 export function ReadyView({
   transactions,
@@ -28,8 +29,23 @@ export function ReadyView({
   onPrev,
 }: State.Ready): VNode {
   const { i18n, dateLocale } = useTranslationContext();
-  const { config } = useBankCoreApiContext();
-  if (!transactions.length) return <div />;
+  const { config } = useBankCoreApiContext()
+
+  if (!transactions.length) return <div class="px-4 mt-4">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="text-base font-semibold leading-6 text-gray-900">
+          <i18n.Translate>Transactions history</i18n.Translate>
+        </h1>
+      </div>
+    </div>
+    <Attention type="info" title={i18n.str`No moves in your account yet.`}>
+
+      <i18n.Translate>
+        You can start sending a wire transfer or withdrawing to your wallet.
+      </i18n.Translate>
+    </Attention>
+  </div>;
   const txByDate = transactions.reduce(
     (prev, cur) => {
       const d =