pending operations

14 files changed, 347 insertions, 73 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 136302166..665b0de6f 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -20,7 +20,10 @@
  */
 
 import { Banner } from "./Banner";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Icon } from "./styled";
+import { Typography } from "../mui/Typography";
 
 export default {
   title: "mui/banner",
@@ -44,11 +47,72 @@ function Wrapper({ children }: any) {
     </div>
   );
 }
+function SignalWifiOffIcon({ ...rest }: any): VNode {
+  return <Icon {...rest} />;
+}
 
 export const BasicExample = () => (
   <Fragment>
     <Wrapper>
-      <Banner />
+      <p>
+        Example taken from:
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df"
+        >
+          https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df
+        </a>
+      </p>
+      <Banner
+        elements={[
+          {
+            icon: <SignalWifiOffIcon />,
+            description: (
+              <Typography>
+                You have lost connection to the internet. This app is offline.
+              </Typography>
+            ),
+          },
+        ]}
+        confirm={{
+          label: "turn on wifi",
+          action: () => {
+            return null;
+          },
+        }}
+      />
+    </Wrapper>
+  </Fragment>
+);
+
+export const PendingOperation = () => (
+  <Fragment>
+    <Wrapper>
+      <Banner
+        title="PENDING TRANSACTIONS"
+        style={{ backgroundColor: "lightblue", padding: 8 }}
+        elements={[
+          {
+            icon: (
+              <Avatar
+                style={{
+                  border: "solid blue 1px",
+                  color: "blue",
+                  boxSizing: "border-box",
+                }}
+              >
+                P
+              </Avatar>
+            ),
+            description: (
+              <Typography>
+                <b>EUR 37.95</b> - 5 feb 2022
+              </Typography>
+            ),
+          },
+        ]}
+      />
     </Wrapper>
   </Fragment>
 );
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx
index f6af81184..09dfac816 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -1,64 +1,57 @@
-import { h, Fragment, VNode } from "preact";
+import { h, Fragment, VNode, JSX } from "preact";
 import { Divider } from "../mui/Divider";
 import { Button } from "../mui/Button";
 import { Typography } from "../mui/Typography";
 import { Avatar } from "../mui/Avatar";
 import { Grid } from "../mui/Grid";
 import { Paper } from "../mui/Paper";
-import { Icon } from "./styled";
-import settingsIcon from "../../static/img/settings_black_24dp.svg";
-// & > a > div.settings-icon {
-//   mask: url(${settingsIcon}) no-repeat center;
-//   background-color: white;
-//   width: 24px;
-//   height: 24px;
-//   margin-left: auto;
-//   margin-right: 8px;
-//   padding: 4px;
-// }
-// & > a.active {
-//   background-color: #f8faf7;
-//   color: #0042b2;
-//   font-weight: bold;
-// }
-// & > a.active > div.settings-icon {
-//   background-color: #0042b2;
-// }
 
-function SignalWifiOffIcon({ ...rest }: any): VNode {
-  return <Icon {...rest} />;
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  elements: {
+    icon?: VNode;
+    description: VNode;
+  }[];
+  confirm?: {
+    label: string;
+    action: () => void;
+  };
 }
 
-export function Banner({}: {}) {
+export function Banner({ title, elements, confirm, ...rest }: Props) {
   return (
     <Fragment>
-      <Paper elevation={3} /*className={classes.paper}*/>
-        <Grid
-          container
-          // wrap="nowrap"
-          // spacing={10}
-          alignItems="center"
-          columns={3}
-        >
-          <Grid item xs={1}>
-            <Avatar>
-              <SignalWifiOffIcon style={{ backgroundColor: "red" }} />
-            </Avatar>
-          </Grid>
-          <Grid item xs={1}>
-            <Typography>
-              You have lost connection to the internet. This app is offline.
-            </Typography>
+      <Paper elevation={0} {...rest}>
+        {title && (
+          <Grid container>
+            <Grid item>
+              <Typography>{title}</Typography>
+            </Grid>
           </Grid>
+        )}
+        <Grid container wrap="nowrap" spacing={1} alignItems="center">
+          {elements.map((e, i) => (
+            <Fragment key={i}>
+              {e.icon && (
+                <Grid item>
+                  <Avatar>{e.icon}</Avatar>
+                </Grid>
+              )}
+              <Grid item>{e.description}</Grid>
+            </Fragment>
+          ))}
         </Grid>
-        <Grid container justifyContent="flex-end" spacing={8} columns={3}>
-          <Grid item xs={1}>
-            <Button color="primary">Turn on wifi</Button>
+        {confirm && (
+          <Grid container justifyContent="flex-end" spacing={8}>
+            <Grid item>
+              <Button color="primary" onClick={confirm.action}>
+                {confirm.label}
+              </Button>
+            </Grid>
           </Grid>
-        </Grid>
+        )}
       </Paper>
       <Divider />
-      {/* <CssBaseline /> */}
     </Fragment>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
new file mode 100644
index 000000000..99f43a62b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -0,0 +1,46 @@
+import { Amounts, Transaction } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Typography } from "../mui/Typography";
+import Banner from "./Banner";
+import { Time } from "./Time";
+
+interface Props {
+  transactions: Transaction[];
+}
+
+export function PendingTransactions({ transactions }: Props) {
+  return (
+    <Banner
+      title="PENDING OPERATIONS"
+      style={{ backgroundColor: "lightblue", padding: 8 }}
+      elements={transactions.map((t) => {
+        const amount = Amounts.parseOrThrow(t.amountEffective);
+        return {
+          icon: (
+            <Avatar
+              style={{
+                border: "solid blue 1px",
+                color: "blue",
+                boxSizing: "border-box",
+              }}
+            >
+              {t.type.substring(0, 1)}
+            </Avatar>
+          ),
+          description: (
+            <Typography>
+              <b>
+                {amount.currency} {Amounts.stringifyValue(amount)}
+              </b>{" "}
+              - <Time timestamp={t.timestamp} format="dd MMMM yyyy" />
+            </Typography>
+          ),
+        };
+      })}
+    />
+  );
+}
+
+export default PendingTransactions;
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 80bfaa549..92f149ea3 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -778,6 +778,7 @@ export const WarningBox = styled(ErrorBox)`
 `;
 
 import settingsIcon from "../../../static/img/settings_black_24dp.svg";
+import wifiIcon from "../../../static/img/wifi.svg";
 
 export const NavigationHeaderHolder = styled.div`
   width: 100%;
@@ -827,7 +828,7 @@ export const NavigationHeader = styled.div`
 `;
 
 export const Icon = styled.div`
-  mask: url(${settingsIcon}) no-repeat center;
+  mask: url(${wifiIcon}) no-repeat center;
   background-color: gray;
   width: 24px;
   height: 24px;
diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
index d5bd9d421..091964a63 100644
--- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { h, JSX, VNode, ComponentChildren } from "preact";
 import { theme } from "./style";
 
 const root = css`
@@ -33,7 +33,7 @@ const avatarImageStyle = css`
   text-indent: 10000;
 `;
 
-interface Props {
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   variant?: "circular" | "rounded" | "square";
   children?: ComponentChildren;
 }
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx
index f3272a57b..b185504e4 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -15,6 +15,7 @@ interface Props {
   startIcon?: VNode;
   variant?: "contained" | "outlined" | "text";
   color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  onClick: () => void;
 }
 
 const baseStyle = css`
@@ -139,6 +140,7 @@ export function Button({
   variant = "text",
   size = "medium",
   color = "primary",
+  onClick,
 }: Props): VNode {
   const style = css`
     user-select: none;
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
index 3c9361326..7db608d27 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
@@ -178,6 +178,26 @@ export const Responsive12Spacing = () => (
   </Fragment>
 );
 
+export const ResponsiveAuthWidth = () => (
+  <Fragment>
+    <Wrapper>
+      <Grid container columns={12}>
+        <Grid item>
+          <Item>item 1</Item>
+        </Grid>
+        <Grid item xs={1}>
+          <Item>item 2 short</Item>
+        </Grid>
+        <Grid item>
+          <Item>item 3 with long text </Item>
+        </Grid>
+        <Grid item xs={"true"}>
+          <Item>item 4</Item>
+        </Grid>
+      </Grid>
+    </Wrapper>
+  </Fragment>
+);
 export const Example = () => (
   <Wrapper>
     <p>Item row space is responsive: xs=6 sm=4 md=1</p>
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx
index ccabed060..345305fe1 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx
@@ -90,6 +90,20 @@ const columnGapVariant = css`
       padding-left: var(--space-col-md);
     }
   }
+  ${theme.breakpoints.up("lg")} {
+    width: calc(100% + var(--space-col-lg));
+    margin-left: calc(-1 * var(--space-col-lg));
+    & > div {
+      padding-left: var(--space-col-lg);
+    }
+  }
+  ${theme.breakpoints.up("xl")} {
+    width: calc(100% + var(--space-col-xl));
+    margin-left: calc(-1 * var(--space-col-xl));
+    & > div {
+      padding-left: var(--space-col-xl);
+    }
+  }
 `;
 const rowGapVariant = css`
   ${theme.breakpoints.up("xs")} {
@@ -110,31 +124,77 @@ const rowGapVariant = css`
       padding-top: var(--space-row-md);
     }
   }
+  ${theme.breakpoints.up("lg")} {
+    margin-top: calc(-1 * var(--space-row-lg));
+    & > div {
+      padding-top: var(--space-row-lg);
+    }
+  }
+  ${theme.breakpoints.up("xl")} {
+    margin-top: calc(-1 * var(--space-row-xl));
+    & > div {
+      padding-top: var(--space-row-xl);
+    }
+  }
 `;
 
-const sizeVariant = css`
+const sizeVariantXS = css`
   ${theme.breakpoints.up("xs")} {
     flex-basis: var(--relation-col-vs-xs);
     flex-grow: 0;
     max-width: var(--relation-col-vs-xs);
   }
+`;
+const sizeVariantSM = css`
   ${theme.breakpoints.up("sm")} {
     flex-basis: var(--relation-col-vs-sm);
     flex-grow: 0;
     max-width: var(--relation-col-vs-sm);
   }
+`;
+const sizeVariantMD = css`
   ${theme.breakpoints.up("md")} {
     flex-basis: var(--relation-col-vs-md);
     flex-grow: 0;
     max-width: var(--relation-col-vs-md);
   }
 `;
+const sizeVariantLG = css`
+  ${theme.breakpoints.up("lg")} {
+    flex-basis: var(--relation-col-vs-lg);
+    flex-grow: 0;
+    max-width: var(--relation-col-vs-lg);
+  }
+`;
+const sizeVariantXL = css`
+  ${theme.breakpoints.up("xl")} {
+    flex-basis: var(--relation-col-vs-xl);
+    flex-grow: 0;
+    max-width: var(--relation-col-vs-xl);
+  }
+`;
+
+const sizeVariantExpand = css`
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+`;
+
+const sizeVariantAuto = css`
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  max-width: none;
+  width: auto;
+`;
 
-const GridContext = createContext<ResponsiveSize>(toResponsive(12));
+const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12));
 
-function toResponsive(v: number | Partial<ResponsiveSize>): ResponsiveSize {
+function toResponsive(
+  v: number | Partial<ResponsiveSize>,
+): Partial<ResponsiveSize> {
   const p = typeof v === "number" ? { xs: v } : v;
-  const xs = p.xs || 12;
+  const xs = p.xs;
   const sm = p.sm || xs;
   const md = p.md || sm;
   const lg = p.lg || md;
@@ -174,6 +234,7 @@ export function Grid({
   const columnSpacing = csp ? toResponsive(csp) : toResponsive(spacing);
 
   const ssize = toResponsive({ xs, md, lg, xl, sm } as any);
+  console.log(ssize);
 
   if (container) {
     console.log(rowSpacing);
@@ -197,23 +258,51 @@ export function Grid({
   const relationStyles = !item
     ? {}
     : {
+        "--relation-col-vs-xs": relation(columns, ssize, "xs"),
         "--relation-col-vs-sm": relation(columns, ssize, "sm"),
+        "--relation-col-vs-md": relation(columns, ssize, "md"),
         "--relation-col-vs-lg": relation(columns, ssize, "lg"),
-        "--relation-col-vs-xs": relation(columns, ssize, "xs"),
         "--relation-col-vs-xl": relation(columns, ssize, "xl"),
-        "--relation-col-vs-md": relation(columns, ssize, "md"),
       };
 
   return (
     <GridContext.Provider value={columns}>
       <div
-        id={container ? "container" : "item"}
         class={[
           root,
           container && containerStyle,
           item && itemStyle,
           zeroMinWidth && zeroMinWidthStyle,
-          sizeVariant,
+          xs &&
+            (xs === "auto"
+              ? sizeVariantAuto
+              : xs === "true"
+              ? sizeVariantExpand
+              : sizeVariantXS),
+          sm &&
+            (sm === "auto"
+              ? sizeVariantAuto
+              : sm === "true"
+              ? sizeVariantExpand
+              : sizeVariantSM),
+          md &&
+            (md === "auto"
+              ? sizeVariantAuto
+              : md === "true"
+              ? sizeVariantExpand
+              : sizeVariantMD),
+          lg &&
+            (lg === "auto"
+              ? sizeVariantAuto
+              : lg === "true"
+              ? sizeVariantExpand
+              : sizeVariantLG),
+          xl &&
+            (xl === "auto"
+              ? sizeVariantAuto
+              : xl === "true"
+              ? sizeVariantExpand
+              : sizeVariantXL),
           container && columnGapVariant,
           container && rowGapVariant,
         ].join(" ")}
@@ -222,6 +311,7 @@ export function Grid({
           ...spacingStyles,
           justifyContent,
           alignItems,
+          flexWrap: wrap,
         }}
       >
         {children}
@@ -230,8 +320,8 @@ export function Grid({
   );
 }
 function relation(
-  cols: ResponsiveSize,
-  values: ResponsiveSize,
+  cols: Partial<ResponsiveSize>,
+  values: Partial<ResponsiveSize>,
   size: ResponsiveKeys,
 ) {
   const colsNum = typeof cols === "number" ? cols : cols[size] || 12;
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx
index 00eeda324..6209aa7a0 100644
--- a/packages/taler-wallet-webextension/src/mui/Paper.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx
@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { h, JSX, VNode, ComponentChildren } from "preact";
 import { alpha } from "./colors/manipulation";
 import { theme } from "./style";
 
@@ -20,17 +20,20 @@ const baseStyle = css`
   }
 `;
 
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  elevation?: number;
+  square?: boolean;
+  variant?: "elevation" | "outlined";
+  children?: ComponentChildren;
+}
+
 export function Paper({
   elevation = 1,
   square,
   variant = "elevation",
   children,
-}: {
-  elevation?: number;
-  square?: boolean;
-  variant?: "elevation" | "outlined";
-  children?: ComponentChildren;
-}): VNode {
+  ...rest
+}: Props): VNode {
   return (
     <div
       class={[
@@ -45,6 +48,7 @@ export function Paper({
           getOverlayAlpha(elevation),
         )}, ${alpha("#fff", getOverlayAlpha(elevation))})`,
       }}
+      {...rest}
     >
       {children}
     </div>
diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx
index 830f1005a..7ff4a694c 100644
--- a/packages/taler-wallet-webextension/src/mui/Typography.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx
@@ -1,5 +1,6 @@
 import { css } from "@linaria/core";
 import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { theme } from "./style";
 
 type VariantEnum =
   | "body1"
@@ -74,6 +75,7 @@ export function Typography({
       : {
           textAlign: align,
         };
+  console.log("typograph", cmp, variant);
   return h(
     cmp,
     {
@@ -82,6 +84,7 @@ export function Typography({
         noWrap && noWrapStyle,
         gutterBottom && gutterBottomStyle,
         paragraph && paragraphStyle,
+        theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting
       ].join(" "),
       style: {
         ...alignStyle,
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx
index e2af05c49..5f9cd2244 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/packages/taler-wallet-webextension/src/mui/style.tsx
@@ -24,7 +24,7 @@ export function pxToRem(size: number): string {
 
 export interface Spacing {
   (): string;
-  (value: number): string;
+  (value?: number): string;
   (topBottom: number, rightLeft: number): string;
   (top: number, rightLeft: number, bottom: number): string;
   (top: number, right: number, bottom: number, left: number): string;
@@ -184,11 +184,14 @@ function createTheme() {
       spacing: spacingInput,
     });
 
-    const spacing = (...argsInput: ReadonlyArray<number | string>): string => {
+    const spacing = (
+      ...argsInput: ReadonlyArray<number | string | undefined>
+    ): string => {
       const args = argsInput.length === 0 ? [1] : argsInput;
 
       return args
         .map((argument) => {
+          if (argument === undefined) return "";
           const output = transform(argument);
           return typeof output === "number" ? `${output}px` : output;
         })
@@ -348,6 +351,7 @@ function createTheme() {
     // ...other
     // } = typography;
     const variants = {
+      // (fontWeight, size, lineHeight, letterSpacing, casing) =>
       // h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
       // h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
       // h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
@@ -356,7 +360,21 @@ function createTheme() {
       // h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
       // subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
       // subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
+      body1: css`
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+        font-weight: ${fontWeightRegular};
+        font-size: ${pxToRem(16)};
+        line-height: 1.5;
+        letter-spacing: ${round(0.15 / 16)}em;
+      `,
       // body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
+      body2: css`
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+        font-weight: ${fontWeightRegular};
+        font-size: ${pxToRem(14)};
+        line-height: 1.43;
+        letter-spacing: ${round(0.15 / 14)}em;
+      `,
       // body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
       button: css`
         font-family: "Roboto", "Helvetica", "Arial", sans-serif;
@@ -366,6 +384,7 @@ function createTheme() {
         letter-spacing: ${round(0.4 / 14)}em;
         text-transform: uppercase;
       `,
+      /* just of caseAllCaps */
       // button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
       // caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
       // overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index d7bfdf545..199ff10df 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -14,7 +14,13 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
+import {
+  Amounts,
+  Balance,
+  i18n,
+  NotificationType,
+  Transaction,
+} from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { BalanceTable } from "../components/BalanceTable";
@@ -22,6 +28,7 @@ import { JustInDevMode } from "../components/JustInDevMode";
 import { Loading } from "../components/Loading";
 import { LoadingError } from "../components/LoadingError";
 import { MultiActionButton } from "../components/MultiActionButton";
+import PendingTransactions from "../components/PendingTransactions";
 import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { AddNewActionView } from "../wallet/AddNewActionView";
@@ -39,8 +46,19 @@ export function BalancePage({
   goToWalletHistory,
 }: Props): VNode {
   const [addingAction, setAddingAction] = useState(false);
-  const state = useAsyncAsHook(wxApi.getBalance);
-  const balances = !state || state.hasError ? [] : state.response.balances;
+  const state = useAsyncAsHook(
+    async () => ({
+      balance: await wxApi.getBalance(),
+      pending: await wxApi.getTransactions(),
+    }),
+    [NotificationType.WithdrawGroupFinished],
+  );
+  const balances =
+    !state || state.hasError ? [] : state.response.balance.balances;
+  const pending =
+    !state || state.hasError
+      ? []
+      : state.response.pending.transactions.filter((t) => t.pending);
 
   if (!state) {
     return <Loading />;
@@ -62,6 +80,7 @@ export function BalancePage({
   return (
     <BalanceView
       balances={balances}
+      pending={pending}
       goToWalletManualWithdraw={goToWalletManualWithdraw}
       goToWalletDeposit={goToWalletDeposit}
       goToWalletHistory={goToWalletHistory}
@@ -71,6 +90,7 @@ export function BalancePage({
 }
 export interface BalanceViewProps {
   balances: Balance[];
+  pending: Transaction[];
   goToWalletManualWithdraw: () => void;
   goToAddAction: () => void;
   goToWalletDeposit: (currency: string) => void;
@@ -79,6 +99,7 @@ export interface BalanceViewProps {
 
 export function BalanceView({
   balances,
+  pending,
   goToWalletManualWithdraw,
   goToWalletDeposit,
   goToWalletHistory,
@@ -96,6 +117,9 @@ export function BalanceView({
 
   return (
     <Fragment>
+      {pending.length > 0 ? (
+        <PendingTransactions transactions={pending} />
+      ) : undefined}
       <section>
         <BalanceTable
           balances={balances}
diff --git a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
index f53024e88..adcd50405 100644
--- a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
+++ b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg
@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+  <g>
+    <path d="M0,0h24v24H0V0z" fill="none" />
+    <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/static/img/wifi.svg b/packages/taler-wallet-webextension/static/img/wifi.svg
new file mode 100644
index 000000000..ad712435d
--- /dev/null
+++ b/packages/taler-wallet-webextension/static/img/wifi.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px">
+  <path d="M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z"></path>
+</svg>
\ No newline at end of file