diff options
author | Sebastian <sebasjm@gmail.com> | 2022-11-24 23:16:01 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-11-24 23:16:01 -0300 |
commit | e05ba843a061c8050648ce922f36ed3d8e1cf24a (patch) | |
tree | 4daf3eccc5f2976b980e884499a756cc6f864c6e /packages/taler-wallet-webextension/src/NavigationBar.tsx | |
parent | 88618df7b870732f4f29a80686dd4f4cf20887f8 (diff) | |
download | wallet-core-e05ba843a061c8050648ce922f36ed3d8e1cf24a.tar.xz |
fix 7465
Diffstat (limited to 'packages/taler-wallet-webextension/src/NavigationBar.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 45 |
1 files changed, 41 insertions, 4 deletions
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index ff2404800..b900fab9d 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -24,7 +24,7 @@ /** * Imports. */ -import { h, VNode } from "preact"; +import { Fragment, h, VNode } from "preact"; import { NavigationHeader, NavigationHeaderHolder, @@ -33,6 +33,11 @@ import { import { useTranslationContext } from "./context/translation.js"; import settingsIcon from "./svg/settings_black_24dp.svg"; import qrIcon from "./svg/qr_code_24px.svg"; +import warningIcon from "./svg/warning_24px.svg"; +import { useAsyncAsHook } from "./hooks/useAsyncAsHook.js"; +import { wxApi } from "./wxApi.js"; +import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { JustInDevMode } from "./components/JustInDevMode.js"; /** * List of pages used by the wallet @@ -102,6 +107,7 @@ export const Pages = { backupProviderAdd: "/backup/provider/add", qr: "/qr", + notifications: "/notifications", settings: "/settings", settingsExchangeAdd: pageDefinition<{ currency?: string }>( "/settings/exchange/add/:currency?", @@ -127,7 +133,21 @@ export const Pages = { ), }; -export function PopupNavBar({ path = "" }: { path?: string }): VNode { +export function PopupNavBar({ + path = "", +}: { + path?: string; +}): // api: typeof wxApi, +VNode { + const api = wxApi; //FIXME: as parameter + const hook = useAsyncAsHook(async () => { + return await api.wallet.call( + WalletApiOperation.GetUserAttentionUnreadCount, + {}, + ); + }); + const attentionCount = !hook || hook.hasError ? 0 : hook.response.total; + const { i18n } = useTranslationContext(); return ( <NavigationHeader> @@ -141,6 +161,17 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode { <i18n.Translate>Backup</i18n.Translate> </a> <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}> + {attentionCount > 0 ? ( + <a href={Pages.notifications}> + <SvgIcon + title={i18n.str`Notifications`} + dangerouslySetInnerHTML={{ __html: warningIcon }} + color="yellow" + /> + </a> + ) : ( + <Fragment /> + )} <a href={Pages.qr}> <SvgIcon title={i18n.str`QR Reader and Taler URI`} @@ -178,10 +209,16 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode { <i18n.Translate>Backup</i18n.Translate> </a> - <a href={Pages.dev} class={path.startsWith("/dev") ? "active" : ""}> - <i18n.Translate>Dev</i18n.Translate> + <a href={Pages.notifications}> + <i18n.Translate>Notifications</i18n.Translate> </a> + <JustInDevMode> + <a href={Pages.dev} class={path.startsWith("/dev") ? "active" : ""}> + <i18n.Translate>Dev</i18n.Translate> + </a> + </JustInDevMode> + <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }} > |