1 files changed, 9 insertions, 24 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx
index 0c28027fe..afe3c98e2 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 Taler Systems S.A.
 
  GNU Taler is free software; you can redistribute it and/or modify it under the
  terms of the GNU General Public License as published by the Free Software
@@ -19,12 +19,12 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { TalerMerchantApi } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { h, VNode } from "preact";
 import { StateUpdater, useState } from "preact/hooks";
-import { MerchantBackend } from "../../../../declaration.js";
 
-type Entity = MerchantBackend.OTP.OtpDeviceEntry;
+type Entity = TalerMerchantApi.OtpDeviceEntry;
 
 interface Props {
   devices: Entity[];
@@ -32,8 +32,6 @@ interface Props {
   onSelect: (e: Entity) => void;
   onCreate: () => void;
   onLoadMoreBefore?: () => void;
-  hasMoreBefore?: boolean;
-  hasMoreAfter?: boolean;
   onLoadMoreAfter?: () => void;
 }
 
@@ -44,8 +42,6 @@ export function CardTable({
   onSelect,
   onLoadMoreAfter,
   onLoadMoreBefore,
-  hasMoreAfter,
-  hasMoreBefore,
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string[]>([]);
 
@@ -85,8 +81,6 @@ export function CardTable({
                 rowSelectionHandler={rowSelectionHandler}
                 onLoadMoreAfter={onLoadMoreAfter}
                 onLoadMoreBefore={onLoadMoreBefore}
-                hasMoreAfter={hasMoreAfter}
-                hasMoreBefore={hasMoreBefore}
               />
             ) : (
               <EmptyTable />
@@ -104,35 +98,26 @@ interface TableProps {
   onSelect: (e: Entity) => void;
   rowSelectionHandler: StateUpdater<string[]>;
   onLoadMoreBefore?: () => void;
-  hasMoreBefore?: boolean;
-  hasMoreAfter?: boolean;
   onLoadMoreAfter?: () => void;
 }
 
-function toggleSelected<T>(id: T): (prev: T[]) => T[] {
-  return (prev: T[]): T[] =>
-    prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id);
-}
-
 function Table({
   instances,
   onLoadMoreAfter,
   onDelete,
   onSelect,
   onLoadMoreBefore,
-  hasMoreAfter,
-  hasMoreBefore,
 }: TableProps): VNode {
   const { i18n } = useTranslationContext();
   return (
     <div class="table-container">
-      {hasMoreBefore && (
+      {onLoadMoreBefore && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more devices before the first one`}
           onClick={onLoadMoreBefore}
         >
-          <i18n.Translate>load newer devices</i18n.Translate>
+          <i18n.Translate>load first page</i18n.Translate>
         </button>
       )}
       <table class="table is-fullwidth is-striped is-hoverable is-fullwidth">
@@ -161,7 +146,7 @@ function Table({
                   onClick={(): void => onSelect(i)}
                   style={{ cursor: "pointer" }}
                 >
-                  {i.otp_device_id}
+                  {i.device_description}
                 </td>
                 <td class="is-actions-cell right-sticky">
                   <div class="buttons is-right">
@@ -179,13 +164,13 @@ function Table({
           })}
         </tbody>
       </table>
-      {hasMoreAfter && (
+      {onLoadMoreAfter && (
         <button
           class="button is-fullwidth"
           data-tooltip={i18n.str`load more devices after the last one`}
           onClick={onLoadMoreAfter}
         >
-          <i18n.Translate>load older devices</i18n.Translate>
+          <i18n.Translate>load next page</i18n.Translate>
         </button>
       )}
     </div>
@@ -198,7 +183,7 @@ function EmptyTable(): VNode {
     <div class="content has-text-grey has-text-centered">
       <p>
         <span class="icon is-large">
-          <i class="mdi mdi-emoticon-sad mdi-48px" />
+          <i class="mdi mdi-magnify mdi-48px" />
         </span>
       </p>
       <p>