[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: time component
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: time component |
|
Date: |
Thu, 07 Mar 2024 13:34:42 +0100 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 2b76e32d5 time component
2b76e32d5 is described below
commit 2b76e32d5714fc410085b5a5ab5c1f4333190fe6
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Mar 7 09:34:06 2024 -0300
time component
---
packages/aml-backoffice-ui/src/Dashboard.tsx | 8 ++-
.../demobank-ui/src/components/Cashouts/views.tsx | 60 +++++++++---------
packages/demobank-ui/src/components/Time.tsx | 71 ++++++++++++++++++++++
.../src/components/Transactions/views.tsx | 15 ++---
packages/demobank-ui/src/pages/BankFrame.tsx | 6 +-
.../demobank-ui/src/pages/SolveChallengePage.tsx | 8 ++-
.../src/pages/business/ShowCashoutDetails.tsx | 12 ++--
.../merchant-backoffice-ui/src/InstanceRoutes.tsx | 46 +++++++-------
packages/taler-util/src/http-client/types.ts | 16 +----
packages/taler-util/src/time.ts | 3 +
.../src/components/Time.tsx | 5 ++
packages/web-util/src/components/Attention.tsx | 6 +-
.../src/components/GlobalNotificationBanner.tsx | 27 --------
...tificationBanner.tsx => NotificationBanner.tsx} | 0
packages/web-util/src/components/ToastBanner.tsx | 44 ++++++++++++++
packages/web-util/src/components/index.ts | 4 +-
packages/web-util/src/hooks/useNotifications.ts | 30 ++++-----
17 files changed, 228 insertions(+), 133 deletions(-)
diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx
b/packages/aml-backoffice-ui/src/Dashboard.tsx
index 0fcea3ee9..3951b48c7 100644
--- a/packages/aml-backoffice-ui/src/Dashboard.tsx
+++ b/packages/aml-backoffice-ui/src/Dashboard.tsx
@@ -1,5 +1,5 @@
import { TranslatedString } from "@gnu-taler/taler-util";
-import { Footer, GlobalNotificationsBanner, Header, notifyError,
notifyException, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Footer, ToastBanner, Header, notifyError, notifyException,
useTranslationContext } from "@gnu-taler/web-util/browser";
import { ComponentChildren, Fragment, VNode, h } from "preact";
import { useEffect, useErrorBoundary } from "preact/hooks";
import { useOfficer } from "./hooks/useOfficer.js";
@@ -151,7 +151,11 @@ export function ExchangeAmlFrame({
</Header>
</div>
- <GlobalNotificationsBanner />
+ <div class="fixed z-20 w-full">
+ <div class="mx-auto w-4/5">
+ <ToastBanner />
+ </div>
+ </div>
<div class="-mt-32 flex grow ">
{officer.state !== "ready" ? undefined :
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx
b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 90ee6bc2f..09e986dd4 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -15,7 +15,9 @@
*/
import {
+ AbsoluteTime,
Amounts,
+ Duration,
HttpStatusCode,
TalerError,
assertUnreachable,
@@ -31,6 +33,7 @@ import { useConversionInfo } from "../../hooks/circuit.js";
import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
import { ErrorLoadingWithDebug } from "../ErrorLoadingWithDebug.js";
import { State } from "./index.js";
+import { Time } from "../Time.js";
export function FailedView({ error }: State.Failed) {
const { i18n } = useTranslationContext();
@@ -141,12 +144,6 @@ export function ReadyView({
</th>
</tr>
{txs.map((item) => {
- const creationTime =
- item.creation_time.t_s === "never"
- ? ""
- : format(item.creation_time.t_s * 1000, "HH:mm:ss", {
- locale: dateLocale,
- });
return (
<a
name="cashout details"
@@ -157,14 +154,17 @@ export function ReadyView({
cid: String(item.id),
})}
>
- <td class="relative py-2 pl-2 pr-2 text-sm ">
- <div class="font-medium text-gray-900">
- {creationTime}
- </div>
- {
- //FIXME: implement responsive view
- }
- {/* <dl class="font-normal sm:hidden">
+ <td class="relative py-2 pl-2 pr-2 text-sm ">
+ <div class="font-medium text-gray-900">
+ <Time format="HH:mm:ss"
+
timestamp={AbsoluteTime.fromProtocolTimestamp(item.creation_time)}
+ // relative={Duration.fromSpec({ days: 1 })}
+ />
+ </div>
+ {
+ //FIXME: implement responsive view
+ }
+ {/* <dl class="font-normal sm:hidden">
<dt class="sr-only
sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
<dd class="mt-1 truncate text-gray-700">
{item.negative ? i18n.str`sent` :
i18n.str`received`} {item.amount ? (
@@ -185,24 +185,24 @@ export function ReadyView({
</pre>
</dd>
</dl> */}
- </td>
- <td class="hidden sm:table-cell px-3 py-3.5 text-sm
text-red-600 cursor-pointer">
- <RenderAmount
- value={Amounts.parseOrThrow(item.amount_debit)}
- spec={resp.body.regional_currency_specification}
- />
- </td>
- <td class="hidden sm:table-cell px-3 py-3.5 text-sm
text-green-600 cursor-pointer">
- <RenderAmount
- value={Amounts.parseOrThrow(item.amount_credit)}
- spec={resp.body.fiat_currency_specification}
- />
- </td>
+ </td>
+ <td class="hidden sm:table-cell px-3 py-3.5 text-sm
text-red-600 cursor-pointer">
+ <RenderAmount
+ value={Amounts.parseOrThrow(item.amount_debit)}
+ spec={resp.body.regional_currency_specification}
+ />
+ </td>
+ <td class="hidden sm:table-cell px-3 py-3.5 text-sm
text-green-600 cursor-pointer">
+ <RenderAmount
+ value={Amounts.parseOrThrow(item.amount_credit)}
+ spec={resp.body.fiat_currency_specification}
+ />
+ </td>
- <td class="hidden sm:table-cell px-3 py-3.5 text-sm
text-gray-500 break-all min-w-md">
+ <td class="hidden sm:table-cell px-3 py-3.5 text-sm
text-gray-500 break-all min-w-md">
- {item.subject}
- </td>
+ {item.subject}
+ </td>
</a>
);
})}
diff --git a/packages/demobank-ui/src/components/Time.tsx
b/packages/demobank-ui/src/components/Time.tsx
new file mode 100644
index 000000000..39ce33f60
--- /dev/null
+++ b/packages/demobank-ui/src/components/Time.tsx
@@ -0,0 +1,71 @@
+/*
+ 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, Duration } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { formatISO, format, formatDuration, intervalToDuration } from
"date-fns";
+import { Fragment, h, VNode } from "preact";
+
+/**
+ *
+ * @param timestamp time to be formatted
+ * @param relative duration threshold, if the difference is lower
+ * the timestamp will be formatted as relative time from "now"
+ *
+ * @returns
+ */
+export function Time({
+ timestamp,
+ relative,
+ format: formatString,
+}: {
+ timestamp: AbsoluteTime | undefined;
+ relative?: Duration,
+ format: string;
+}): VNode {
+ const { i18n, dateLocale } = useTranslationContext()
+ if (!timestamp) return <Fragment />
+
+ if (timestamp.t_ms === "never") {
+ return <time >{i18n.str`never`}</time>
+ }
+
+ const now = AbsoluteTime.now();
+ const diff = AbsoluteTime.difference(now, timestamp)
+ if (relative && now.t_ms !== "never" && Duration.cmp(diff, relative) === -1)
{
+ const d = intervalToDuration({
+ start: now.t_ms,
+ end: timestamp.t_ms
+ })
+ d.seconds = 0
+ const duration = formatDuration(d, { locale: dateLocale })
+ const isFuture = AbsoluteTime.cmp(now, timestamp) < 0
+ if (isFuture) {
+ return <time dateTime={formatISO(timestamp.t_ms)}>
+ <i18n.Translate>in {duration}</i18n.Translate>
+ </time>
+ } else {
+ return <time dateTime={formatISO(timestamp.t_ms)}>
+ <i18n.Translate>{duration} ago</i18n.Translate>
+ </time>
+ }
+ }
+ return (
+ <time dateTime={formatISO(timestamp.t_ms)}>
+ {format(timestamp.t_ms, formatString, { locale: dateLocale })}
+ </time>
+ );
+}
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx
b/packages/demobank-ui/src/components/Transactions/views.tsx
index cdf134b2f..7da9fc5a9 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -20,6 +20,8 @@ import { Fragment, VNode, h } from "preact";
import { useBankCoreApiContext } from "../../context/config.js";
import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
import { State } from "./index.js";
+import { Duration } from "@gnu-taler/taler-util";
+import { Time } from "../Time.js";
export function ReadyView({
transactions,
@@ -107,19 +109,18 @@ export function ReadyView({
</th>
</tr>
{txs.map((item) => {
- const time =
- item.when.t_ms === "never"
- ? ""
- : format(item.when.t_ms, "HH:mm:ss", {
- locale: dateLocale,
- });
return (
<tr
key={idx}
class="border-b border-gray-200 last:border-none"
>
<td class="relative py-2 pl-2 pr-2 text-sm ">
- <div class="font-medium text-gray-900">{time}</div>
+ <div class="font-medium text-gray-900">
+ <Time format="HH:mm:ss"
+ timestamp={item.when}
+ // relative={Duration.fromSpec({ days: 1 })}
+ />
+ </div>
<dl class="font-normal sm:hidden">
<dt class="sr-only sm:hidden">
<i18n.Translate>Amount</i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx
b/packages/demobank-ui/src/pages/BankFrame.tsx
index b6bfe1cfb..e1b8d6b83 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -17,12 +17,12 @@
import { Amounts, TalerError, TranslatedString } from "@gnu-taler/taler-util";
import {
Footer,
- GlobalNotificationsBanner,
Header,
Loading,
+ ToastBanner,
notifyError,
notifyException,
- useTranslationContext,
+ useTranslationContext
} from "@gnu-taler/web-util/browser";
import { ComponentChildren, VNode, h } from "preact";
import { useEffect, useErrorBoundary } from "preact/hooks";
@@ -146,7 +146,7 @@ export function BankFrame({
<div class="fixed z-20 w-full">
<div class="mx-auto w-4/5">
- <GlobalNotificationsBanner />
+ <ToastBanner />
</div>
</div>
diff --git a/packages/demobank-ui/src/pages/SolveChallengePage.tsx
b/packages/demobank-ui/src/pages/SolveChallengePage.tsx
index b7fc82a94..1bafbc3eb 100644
--- a/packages/demobank-ui/src/pages/SolveChallengePage.tsx
+++ b/packages/demobank-ui/src/pages/SolveChallengePage.tsx
@@ -17,6 +17,7 @@
import {
AbsoluteTime,
Amounts,
+ Duration,
HttpStatusCode,
TalerCorebankApi,
TalerError,
@@ -47,6 +48,7 @@ import { undefinedIfEmpty } from "../utils.js";
import { RenderAmount } from "./PaytoWireTransferForm.js";
import { OperationNotFound } from "./WithdrawalQRCode.js";
import { useNavigationContext } from "../context/navigation.js";
+import { Time } from "../components/Time.js";
export function SolveChallengePage({
onChallengeCompleted,
@@ -533,9 +535,9 @@ function ChallengeDetails({
<i18n.Translate>Sent at</i18n.Translate>
</dt>
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2
sm:mt-0">
- {format(challenge.sent.t_ms, "dd/MM/yyyy HH:mm:ss", {
- locale: dateLocale,
- })}
+ <Time format="dd/MM/yyyy HH:mm:ss"
+ timestamp={challenge.sent}
+ relative={Duration.fromSpec({ days: 1 })} />
</dd>
</div>
)}
diff --git a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
index f4b2130a9..33115c16a 100644
--- a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
+++ b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
@@ -14,7 +14,9 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
import {
+ AbsoluteTime,
Amounts,
+ Duration,
HttpStatusCode,
TalerError,
assertUnreachable,
@@ -30,6 +32,7 @@ import { ErrorLoadingWithDebug } from
"../../components/ErrorLoadingWithDebug.js
import { useCashoutDetails, useConversionInfo } from "../../hooks/circuit.js";
import { RouteDefinition } from "../../route.js";
import { RenderAmount } from "../PaytoWireTransferForm.js";
+import { Time } from "../../components/Time.js";
interface Props {
id: string;
@@ -131,11 +134,10 @@ export function ShowCashoutDetails({ id, routeClose }:
Props): VNode {
<i18n.Translate>Created</i18n.Translate>
</dt>
<dd class="text-sm ">
- {format(
- result.body.creation_time.t_s * 1000,
- "dd/MM/yyyy HH:mm:ss",
- { locale: dateLocale },
- )}
+ <Time format="dd/MM/yyyy HH:mm:ss"
+
timestamp={AbsoluteTime.fromProtocolTimestamp(result.body.creation_time)}
+ // relative={Duration.fromSpec({ days: 1 })}
+ />
</dd>
</div>
) : undefined}
diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
index 8eb0cd717..edc1d9a11 100644
--- a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
+++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx
@@ -19,64 +19,62 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
+import { TranslatedString } from "@gnu-taler/taler-util";
import {
- useTranslationContext,
- HttpError,
ErrorType,
- GlobalNotificationsBanner,
+ HttpError,
+ useTranslationContext
} from "@gnu-taler/web-util/browser";
import { format } from "date-fns";
-import { Fragment, FunctionComponent, h, VNode } from "preact";
-import { Route, route, Router } from "preact-router";
-import { useCallback, useEffect, useErrorBoundary, useMemo, useState } from
"preact/hooks";
+import { Fragment, FunctionComponent, VNode, h } from "preact";
+import { Route, Router, route } from "preact-router";
+import { useEffect, useErrorBoundary, useMemo, useState } from "preact/hooks";
import { Loading } from "./components/exception/loading.js";
import { Menu, NotificationCard } from "./components/menu/index.js";
-import { useBackendContext } from "./context/backend.js";
import { InstanceContextProvider } from "./context/instance.js";
+import { LoginToken, MerchantBackend } from "./declaration.js";
+import { useInstanceBankAccounts } from "./hooks/bank.js";
import {
useBackendDefaultToken,
useBackendInstanceToken,
useSimpleLocalStorage,
} from "./hooks/index.js";
import { useInstanceKYCDetails } from "./hooks/instance.js";
+import { dateFormatForSettings, useSettings } from "./hooks/useSettings.js";
import InstanceCreatePage from "./paths/admin/create/index.js";
import InstanceListPage from "./paths/admin/list/index.js";
-import TokenPage from "./paths/instance/token/index.js";
+import BankAccountCreatePage from "./paths/instance/accounts/create/index.js";
+import BankAccountListPage from "./paths/instance/accounts/list/index.js";
+import BankAccountUpdatePage from "./paths/instance/accounts/update/index.js";
import ListKYCPage from "./paths/instance/kyc/list/index.js";
import OrderCreatePage from "./paths/instance/orders/create/index.js";
import OrderDetailsPage from "./paths/instance/orders/details/index.js";
import OrderListPage from "./paths/instance/orders/list/index.js";
+import ValidatorCreatePage from "./paths/instance/otp_devices/create/index.js";
+import ValidatorListPage from "./paths/instance/otp_devices/list/index.js";
+import ValidatorUpdatePage from "./paths/instance/otp_devices/update/index.js";
import ProductCreatePage from "./paths/instance/products/create/index.js";
import ProductListPage from "./paths/instance/products/list/index.js";
import ProductUpdatePage from "./paths/instance/products/update/index.js";
-import BankAccountCreatePage from "./paths/instance/accounts/create/index.js";
-import BankAccountListPage from "./paths/instance/accounts/list/index.js";
-import BankAccountUpdatePage from "./paths/instance/accounts/update/index.js";
import TemplateCreatePage from "./paths/instance/templates/create/index.js";
-import TemplateUsePage from "./paths/instance/templates/use/index.js";
-import TemplateQrPage from "./paths/instance/templates/qr/index.js";
import TemplateListPage from "./paths/instance/templates/list/index.js";
+import TemplateQrPage from "./paths/instance/templates/qr/index.js";
import TemplateUpdatePage from "./paths/instance/templates/update/index.js";
-import WebhookCreatePage from "./paths/instance/webhooks/create/index.js";
-import WebhookListPage from "./paths/instance/webhooks/list/index.js";
-import WebhookUpdatePage from "./paths/instance/webhooks/update/index.js";
-import ValidatorCreatePage from "./paths/instance/otp_devices/create/index.js";
-import ValidatorListPage from "./paths/instance/otp_devices/list/index.js";
-import ValidatorUpdatePage from "./paths/instance/otp_devices/update/index.js";
+import TemplateUsePage from "./paths/instance/templates/use/index.js";
+import TokenPage from "./paths/instance/token/index.js";
import TransferCreatePage from "./paths/instance/transfers/create/index.js";
import TransferListPage from "./paths/instance/transfers/list/index.js";
import InstanceUpdatePage, {
AdminUpdate as InstanceAdminUpdatePage,
Props as InstanceUpdatePageProps,
} from "./paths/instance/update/index.js";
+import WebhookCreatePage from "./paths/instance/webhooks/create/index.js";
+import WebhookListPage from "./paths/instance/webhooks/list/index.js";
+import WebhookUpdatePage from "./paths/instance/webhooks/update/index.js";
import { LoginPage } from "./paths/login/index.js";
import NotFoundPage from "./paths/notfound/index.js";
-import { Notification } from "./utils/types.js";
-import { LoginToken, MerchantBackend } from "./declaration.js";
import { Settings } from "./paths/settings/index.js";
-import { dateFormatForSettings, useSettings } from "./hooks/useSettings.js";
-import { TranslatedString } from "@gnu-taler/taler-util";
-import { useInstanceBankAccounts } from "./hooks/bank.js";
+import { Notification } from "./utils/types.js";
export enum InstancePaths {
error = "/error",
diff --git a/packages/taler-util/src/http-client/types.ts
b/packages/taler-util/src/http-client/types.ts
index e9266e6a3..e7c7eb4c9 100644
--- a/packages/taler-util/src/http-client/types.ts
+++ b/packages/taler-util/src/http-client/types.ts
@@ -17,7 +17,7 @@ import {
import { PaytoString, codecForPaytoString } from "../payto.js";
import { AmountString } from "../taler-types.js";
import { TalerActionString, codecForTalerActionString } from "../taleruri.js";
-import { codecForTimestamp } from "../time.js";
+import { TalerProtocolDuration, TalerProtocolTimestamp, codecForTimestamp }
from "../time.js";
export type UserAndPassword = {
username: string;
@@ -163,19 +163,9 @@ type ImageDataUrl = string;
type WadId = string;
-interface Timestamp {
- // Seconds since epoch, or the special
- // value "never" to represent an event that will
- // never happen.
- t_s: number | "never";
-}
+type Timestamp = TalerProtocolTimestamp
-interface RelativeTime {
- // Duration in microseconds or "forever"
- // to represent an infinite duration. Numeric
- // values are capped at 2^53 - 1 inclusive.
- d_us: number | "forever";
-}
+type RelativeTime = TalerProtocolDuration
export interface LoginToken {
token: AccessToken;
diff --git a/packages/taler-util/src/time.ts b/packages/taler-util/src/time.ts
index 66bde4fa2..cec41fdd0 100644
--- a/packages/taler-util/src/time.ts
+++ b/packages/taler-util/src/time.ts
@@ -552,6 +552,9 @@ const DAYS = HOURS * 24;
const MONTHS = DAYS * 30;
const YEARS = DAYS * 365;
+/**
+ * @deprecated use Duration.fromSpec
+ */
export function durationFromSpec(spec: {
seconds?: number;
minutes?: number;
diff --git a/packages/taler-wallet-webextension/src/components/Time.tsx
b/packages/taler-wallet-webextension/src/components/Time.tsx
index 7ec91d56c..eee295756 100644
--- a/packages/taler-wallet-webextension/src/components/Time.tsx
+++ b/packages/taler-wallet-webextension/src/components/Time.tsx
@@ -18,6 +18,11 @@ import { AbsoluteTime } from "@gnu-taler/taler-util";
import { formatISO, format } from "date-fns";
import { h, VNode } from "preact";
+/**
+ *
+ * @deprecated use web-util
+ * @returns
+ */
export function Time({
timestamp,
format: formatString,
diff --git a/packages/web-util/src/components/Attention.tsx
b/packages/web-util/src/components/Attention.tsx
index 50378e85a..4172c0c9b 100644
--- a/packages/web-util/src/components/Attention.tsx
+++ b/packages/web-util/src/components/Attention.tsx
@@ -9,10 +9,11 @@ interface Props {
timeout?: Duration,
}
export function Attention({ type = "info", title, children, onClose, timeout =
Duration.getForever() }: Props): VNode {
+
return <div class={`group attention-${type} mt-2 shadow-lg`}>
- <style>{`
+ {timeout.d_ms === "forever" ? undefined : <style>{`
.progress {
- animation: notificationTimeoutBar 3s ease-in-out;
+ animation: notificationTimeoutBar ${Math.round(timeout.d_ms / 1000)}s
ease-in-out;
animation-fill-mode:both;
}
@@ -21,6 +22,7 @@ export function Attention({ type = "info", title, children,
onClose, timeout = D
100% { width: 100%; }
}
`}</style>
+ }
<div data-timed={timeout.d_ms !== "forever"} class="rounded-md
data-[timed=true]:rounded-b-none group-[.attention-info]:bg-blue-50
group-[.attention-low]:bg-gray-100 group-[.attention-warning]:bg-yellow-50
group-[.attention-danger]:bg-red-50 group-[.attention-success]:bg-green-50 p-4
shadow">
<div class="flex">
diff --git a/packages/web-util/src/components/GlobalNotificationBanner.tsx
b/packages/web-util/src/components/GlobalNotificationBanner.tsx
deleted file mode 100644
index b0a06f7e1..000000000
--- a/packages/web-util/src/components/GlobalNotificationBanner.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Fragment, VNode, h } from "preact"
-import { Attention, GLOBAL_NOTIFICATION_TIMEOUT, useNotifications } from
"../index.browser.js"
-
-export function GlobalNotificationsBanner(): VNode {
- const notifs = useNotifications()
- if (notifs.length === 0) return <Fragment />
- return <Fragment> {
- notifs.map(n => {
- switch (n.message.type) {
- case "error":
- return <Attention type="danger" title={n.message.title} onClose={()
=> {
- n.remove()
- }} timeout={GLOBAL_NOTIFICATION_TIMEOUT}>
- {n.message.description &&
- <div class="mt-2 text-sm text-red-700">
- {n.message.description}
- </div>
- }
- </Attention>
- case "info":
- return <Attention type="success" title={n.message.title} onClose={()
=> {
- n.remove();
- }} timeout={GLOBAL_NOTIFICATION_TIMEOUT} />
- }
- })}
- </Fragment>
-}
diff --git a/packages/web-util/src/components/LocalNotificationBanner.tsx
b/packages/web-util/src/components/NotificationBanner.tsx
similarity index 100%
rename from packages/web-util/src/components/LocalNotificationBanner.tsx
rename to packages/web-util/src/components/NotificationBanner.tsx
diff --git a/packages/web-util/src/components/ToastBanner.tsx
b/packages/web-util/src/components/ToastBanner.tsx
new file mode 100644
index 000000000..2424b17ff
--- /dev/null
+++ b/packages/web-util/src/components/ToastBanner.tsx
@@ -0,0 +1,44 @@
+import { Fragment, VNode, h } from "preact"
+import { Attention, GLOBAL_NOTIFICATION_TIMEOUT as GLOBAL_TOAST_TIMEOUT,
useNotifications } from "../index.browser.js"
+
+/**
+ * Toasts should be considered when displaying these types of information to
the user:
+ *
+ * Low attention messages that do not require user action
+ * Singular status updates
+ * Confirmations
+ * Information that does not need to be followed up
+ *
+ * Do not use toasts if the information contains the following:
+ *
+ * High attention and crtitical information
+ * Time-sensitive information
+ * Requires user action or input
+ * Batch updates
+ *
+ * @returns
+ */
+export function ToastBanner(): VNode {
+ const notifs = useNotifications()
+ if (notifs.length === 0) return <Fragment />
+ return <Fragment> {
+ notifs.map(n => {
+ switch (n.message.type) {
+ case "error":
+ return <Attention type="danger" title={n.message.title} onClose={()
=> {
+ n.remove()
+ }} timeout={GLOBAL_TOAST_TIMEOUT}>
+ {n.message.description &&
+ <div class="mt-2 text-sm text-red-700">
+ {n.message.description}
+ </div>
+ }
+ </Attention>
+ case "info":
+ return <Attention type="success" title={n.message.title} onClose={()
=> {
+ n.remove();
+ }} timeout={GLOBAL_TOAST_TIMEOUT} />
+ }
+ })}
+ </Fragment>
+}
diff --git a/packages/web-util/src/components/index.ts
b/packages/web-util/src/components/index.ts
index 4ef840c7d..d7ea41874 100644
--- a/packages/web-util/src/components/index.ts
+++ b/packages/web-util/src/components/index.ts
@@ -8,5 +8,5 @@ export * from "./Header.js";
export * from "./Footer.js";
export * from "./Button.js";
export * from "./ShowInputErrorLabel.js";
-export * from "./LocalNotificationBanner.js";
-export * from "./GlobalNotificationBanner.js";
+export * from "./NotificationBanner.js";
+export * from "./ToastBanner.js";
diff --git a/packages/web-util/src/hooks/useNotifications.ts
b/packages/web-util/src/hooks/useNotifications.ts
index d8a927461..000abbc94 100644
--- a/packages/web-util/src/hooks/useNotifications.ts
+++ b/packages/web-util/src/hooks/useNotifications.ts
@@ -32,7 +32,7 @@ const storage = memoryMap<Map<string, NotificationMessage>>();
const NOTIFICATION_KEY = "notification";
export const GLOBAL_NOTIFICATION_TIMEOUT = Duration.fromSpec({
- minutes: 2,
+ seconds: 5,
});
function removeFromStorage(n: NotificationMessage) {
@@ -164,11 +164,11 @@ export function useLocalNotification(): [
const notif = !value
? undefined
: {
- message: value,
- remove: () => {
- setter(undefined);
- },
- };
+ message: value,
+ remove: () => {
+ setter(undefined);
+ },
+ };
async function errorHandling(cb: (notify: typeof errorMap) => Promise<void>)
{
try {
@@ -194,8 +194,8 @@ type HandlerMaker = <T extends OperationResult<A, B>, A, B>(
onOperationSuccess:
| ((result: T extends OperationOk<any> ? T : never) => void)
| ((
- result: T extends OperationOk<any> ? T : never,
- ) => TranslatedString | undefined),
+ result: T extends OperationOk<any> ? T : never,
+ ) => TranslatedString | undefined),
onOperationFail: (
d: T extends OperationFail<any> ? T : never,
) => TranslatedString,
@@ -211,19 +211,19 @@ export function useLocalNotificationHandler(): [
const notif = !value
? undefined
: {
- message: value,
- remove: () => {
- setter(undefined);
- },
- };
+ message: value,
+ remove: () => {
+ setter(undefined);
+ },
+ };
function makeHandler<T extends OperationResult<A, B>, A, B>(
onClick: () => Promise<T | undefined>,
onOperationSuccess:
| ((result: T extends OperationOk<any> ? T : never) => void)
| ((
- result: T extends OperationOk<any> ? T : never,
- ) => TranslatedString | undefined),
+ result: T extends OperationOk<any> ? T : never,
+ ) => TranslatedString | undefined),
onOperationFail: (
d: T extends OperationFail<any> ? T : never,
) => TranslatedString,
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: time component,
gnunet <=