summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/components/WalletActivity.tsx
blob: a63ee97cb45d5555d64bbfa82c9afcc2f84d4248 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/*
 This file is part of GNU Taler
 (C) 2022 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
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
import {
  AbsoluteTime,
  Amounts,
  NotificationType,
  Transaction,
  TransactionMajorState,
} from "@gnu-taler/taler-util";
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
import { Fragment, h, JSX, VNode } from "preact";
import { useEffect } from "preact/hooks";
import { useBackendContext } from "../context/backend.js";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
import { Avatar } from "../mui/Avatar.js";
import { Grid } from "../mui/Grid.js";
import { Typography } from "../mui/Typography.js";
import Banner from "./Banner.js";
import { Time } from "./Time.js";

interface Props extends JSX.HTMLAttributes {
}

/**
 * this cache will save the tx from the previous render
 */
const cache = { tx: [] as Transaction[] };

export function WalletActivity({  }: Props): VNode {
  const api = useBackendContext();
  const state = useAsyncAsHook(() =>
    api.wallet.call(WalletApiOperation.GetTransactions, {}),
  );
  const listenAllEvents = Array.from<NotificationType>({ length: 1 });

  useEffect(() => {
    return api.listener.onUpdateNotification( listenAllEvents, (notif) => {
      console.log(notif)
    });
  });

  const transactions =
    !state || state.hasError
      ? cache.tx
      : state.response.transactions.filter(
        (t) => t.txState.major === TransactionMajorState.Pending,
      );

  if (state && !state.hasError) {
    cache.tx = transactions;
  }
  if (!transactions.length) {
    return <Fragment />;
  }
  return (
    <div>
      this is shown below
    </div>
  );
}