mui text field, standard variation

21 files changed, 1356 insertions, 186 deletions

diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json
index 03232dee7..18563312c 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -37,9 +37,6 @@
     "@babel/plugin-transform-react-jsx-source": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
     "@gnu-taler/pogen": "workspace:*",
-    "@types/chai": "^4.3.0",
-    "chai": "^4.3.6",
-    "polished": "^4.1.4",
     "@linaria/babel-preset": "3.0.0-beta.4",
     "@linaria/core": "3.0.0-beta.4",
     "@linaria/react": "3.0.0-beta.4",
@@ -57,14 +54,17 @@
     "@storybook/preact": "6.4.18",
     "@testing-library/preact": "^2.0.1",
     "@testing-library/preact-hooks": "^1.1.0",
+    "@types/chai": "^4.3.0",
     "@types/chrome": "0.0.176",
     "@types/history": "^4.7.8",
     "@types/mocha": "^9.0.0",
     "@types/node": "^17.0.8",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-react-jsx": "^6.24.1",
+    "chai": "^4.3.6",
     "mocha": "^9.2.0",
     "nyc": "^15.1.0",
+    "polished": "^4.1.4",
     "preact-cli": "^3.3.5",
     "preact-render-to-string": "^5.1.19",
     "rimraf": "^3.0.2",
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
new file mode 100644
index 000000000..a6863add3
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
@@ -0,0 +1,133 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Button } from "./Button";
+import { Fragment, h } from "preact";
+import DeleteIcon from "../../static/img/delete_24px.svg";
+import SendIcon from "../../static/img/send_24px.svg";
+import { styled } from "@linaria/react";
+
+export default {
+  title: "mui/button",
+  component: Button,
+};
+
+const Stack = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const BasicExample = () => (
+  <Fragment>
+    <Stack>
+      <Button size="small" variant="text">
+        Text
+      </Button>
+      <Button size="small" variant="contained">
+        Contained
+      </Button>
+      <Button size="small" variant="outlined">
+        Outlined
+      </Button>
+    </Stack>
+    <Stack>
+      <Button variant="text">Text</Button>
+      <Button variant="contained">Contained</Button>
+      <Button variant="outlined">Outlined</Button>
+    </Stack>
+    <Stack>
+      <Button size="large" variant="text">
+        Text
+      </Button>
+      <Button size="large" variant="contained">
+        Contained
+      </Button>
+      <Button size="large" variant="outlined">
+        Outlined
+      </Button>
+    </Stack>
+  </Fragment>
+);
+
+export const Others = () => (
+  <Fragment>
+    <p>colors</p>
+    <Stack>
+      <Button color="secondary">Secondary</Button>
+      <Button variant="contained" color="success">
+        Success
+      </Button>
+      <Button variant="outlined" color="error">
+        Error
+      </Button>
+    </Stack>
+    <p>disabled</p>
+    <Stack>
+      <Button disabled variant="text">
+        Text
+      </Button>
+      <Button disabled variant="contained">
+        Contained
+      </Button>
+      <Button disabled variant="outlined">
+        Outlined
+      </Button>
+    </Stack>
+  </Fragment>
+);
+
+export const WithIcons = () => (
+  <Fragment>
+    <Stack>
+      <Button variant="outlined" size="small" startIcon={DeleteIcon}>
+        Delete
+      </Button>
+      <Button variant="contained" size="small" endIcon={SendIcon}>
+        Send
+      </Button>
+      <Button variant="text" size="small" endIcon={SendIcon}>
+        Send
+      </Button>
+    </Stack>
+    <Stack>
+      <Button variant="outlined" startIcon={DeleteIcon}>
+        Delete
+      </Button>
+      <Button variant="contained" endIcon={SendIcon}>
+        Send
+      </Button>
+      <Button variant="text" endIcon={SendIcon}>
+        Send
+      </Button>
+    </Stack>
+    <Stack>
+      <Button variant="outlined" size="large" startIcon={DeleteIcon}>
+        Delete
+      </Button>
+      <Button variant="contained" size="large" endIcon={SendIcon}>
+        Send
+      </Button>
+      <Button variant="text" size="large" endIcon={SendIcon}>
+        Send
+      </Button>
+    </Stack>
+  </Fragment>
+);
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx
index ccca360fa..8da5b86be 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -1,6 +1,6 @@
 import { ComponentChildren, h, VNode } from "preact";
 import { css } from "@linaria/core";
-import { theme, ripple } from "./style";
+import { theme, ripple, Colors } from "./style";
 import { alpha } from "./colors/manipulation";
 
 interface Props {
@@ -12,9 +12,9 @@ interface Props {
   fullWidth?: boolean;
   href?: string;
   size?: "small" | "medium" | "large";
-  startIcon?: VNode;
+  startIcon?: VNode | string;
   variant?: "contained" | "outlined" | "text";
-  color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  color?: Colors;
   onClick?: () => void;
 }
 
@@ -28,7 +28,7 @@ const baseStyle = css`
   outline: 0;
   border: 0;
   margin: 0;
-  border-radius: 0;
+  /* border-radius: 0; */
   padding: 0;
   cursor: pointer;
   user-select: none;
@@ -50,6 +50,17 @@ const button = css`
     color: ${theme.palette.action.disabled};
   }
 `;
+const colorIconVariant = {
+  outlined: css`
+    background-color: var(--color-main);
+  `,
+  contained: css`
+    background-color: var(--color-contrastText);
+  `,
+  text: css`
+    background-color: var(--color-main);
+  `,
+};
 
 const colorVariant = {
   outlined: css`
@@ -90,6 +101,47 @@ const colorVariant = {
   `,
 };
 
+const sizeIconVariant = {
+  outlined: {
+    small: css`
+      padding: 3px;
+      font-size: ${theme.pxToRem(7)};
+    `,
+    medium: css`
+      padding: 5px;
+    `,
+    large: css`
+      padding: 7px;
+      font-size: ${theme.pxToRem(10)};
+    `,
+  },
+  contained: {
+    small: css`
+      padding: 4px;
+      font-size: ${theme.pxToRem(13)};
+    `,
+    medium: css`
+      padding: 6px;
+    `,
+    large: css`
+      padding: 8px;
+      font-size: ${theme.pxToRem(10)};
+    `,
+  },
+  text: {
+    small: css`
+      padding: 4px;
+      font-size: ${theme.pxToRem(13)};
+    `,
+    medium: css`
+      padding: 6px;
+    `,
+    large: css`
+      padding: 8px;
+      font-size: ${theme.pxToRem(15)};
+    `,
+  },
+};
 const sizeVariant = {
   outlined: {
     small: css`
@@ -162,12 +214,18 @@ export function Button({
         css`
           margin-right: 8px;
           margin-left: -4px;
+          mask: var(--image) no-repeat center;
         `,
+        colorIconVariant[variant],
+        sizeIconVariant[variant][size],
         style,
       ].join(" ")}
-    >
-      {sip}
-    </span>
+      style={{
+        "--image": `url("${sip}")`,
+        "--color-main": theme.palette[color].main,
+        "--color-contrastText": theme.palette[color].contrastText,
+      }}
+    />
   );
   const endIcon = eip && (
     <span
@@ -175,12 +233,19 @@ export function Button({
         css`
           margin-right: -4px;
           margin-left: 8px;
+          mask: var(--image) no-repeat center;
         `,
+        colorIconVariant[variant],
+        sizeIconVariant[variant][size],
         style,
       ].join(" ")}
-    >
-      {eip}
-    </span>
+      style={{
+        "--image": `url("${eip}")`,
+        "--color-main": theme.palette[color].main,
+        "--color-contrastText": theme.palette[color].contrastText,
+        "--color-dark": theme.palette[color].dark,
+      }}
+    />
   );
   return (
     <button
@@ -196,8 +261,8 @@ export function Button({
       ].join(" ")}
       style={{
         "--color-main": theme.palette[color].main,
-        "--color-main-alpha-half": alpha(theme.palette[color].main, 0.5),
         "--color-contrastText": theme.palette[color].contrastText,
+        "--color-main-alpha-half": alpha(theme.palette[color].main, 0.5),
         "--color-dark": theme.palette[color].dark,
         "--color-main-alpha-opacity": alpha(
           theme.palette[color].main,
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
new file mode 100644
index 000000000..a2f7e1e66
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
@@ -0,0 +1,108 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { styled } from "@linaria/react";
+import { Fragment, h } from "preact";
+import { useState } from "preact/hooks";
+import { TextField, Props } from "./TextField";
+
+export default {
+  title: "mui/TextField",
+  component: TextField,
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > * {
+    margin: 20px;
+  }
+`;
+
+const BasicExample = (variant: Props["variant"]) => {
+  const [value, onChange] = useState("");
+  return (
+    <Container>
+      <TextField variant={variant} label="Name" {...{ value, onChange }} />
+      <TextField
+        variant={variant}
+        type="password"
+        label="Password"
+        {...{ value, onChange }}
+      />
+      <TextField
+        disabled
+        variant={variant}
+        label="Country"
+        helperText="this is disabled"
+        value="disabled"
+      />
+      <TextField
+        error
+        variant={variant}
+        label="Something"
+        {...{ value, onChange }}
+      />
+      <TextField
+        error
+        disabled
+        variant={variant}
+        label="Disabled and Error"
+        value="disabled with error"
+        helperText="this field has an error"
+      />
+      <TextField
+        variant={variant}
+        required
+        label="Name"
+        {...{ value, onChange }}
+        helperText="this field is required"
+      />
+    </Container>
+  );
+};
+
+export const Standard = () => BasicExample("standard");
+export const Filled = () => BasicExample("filled");
+export const Outlined = () => BasicExample("outlined");
+
+export const Color = () => (
+  <Container>
+    <TextField
+      variant="standard"
+      label="Outlined secondary"
+      color="secondary"
+      focused
+    />
+    <TextField
+      label="Filled success"
+      variant="standard"
+      color="success"
+      focused
+    />
+    <TextField
+      label="Standard warning"
+      variant="standard"
+      color="warning"
+      focused
+    />
+  </Container>
+);
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx
new file mode 100644
index 000000000..ada8d5d85
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx
@@ -0,0 +1,69 @@
+import { ComponentChildren, h, VNode } from "preact";
+import { FormControl } from "./input/FormControl";
+import { FormHelperText } from "./input/FormHelperText";
+import { InputFilled } from "./input/InputFilled";
+import { InputLabel } from "./input/InputLabel";
+import { InputOutlined } from "./input/InputOutlined";
+import { InputStandard } from "./input/InputStandard";
+import { SelectFilled } from "./input/SelectFilled";
+import { SelectOutlined } from "./input/SelectOutlined";
+import { SelectStandard } from "./input/SelectStandard";
+import { Colors } from "./style";
+
+export interface Props {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  color?: Colors;
+  disabled?: boolean;
+  error?: boolean;
+  fullWidth?: boolean;
+  helperText?: VNode | string;
+  id?: string;
+  label?: VNode | string;
+  margin?: "dense" | "normal" | "none";
+  maxRows?: number;
+  minRows?: number;
+  multiline?: boolean;
+  onChange?: (s: string) => void;
+  placeholder?: string;
+  required?: boolean;
+  focused?: boolean;
+  rows?: number;
+  select?: boolean;
+  type?: string;
+  value?: string;
+  variant?: "filled" | "outlined" | "standard";
+  children?: ComponentChildren;
+}
+
+export function TextField({
+  label,
+  select,
+  helperText,
+  children,
+  variant = "standard",
+  ...props
+}: Props): VNode {
+  // htmlFor={id} id={inputLabelId}
+  const Input = select ? selectVariant[variant] : inputVariant[variant];
+  // console.log("variant", Input);
+  return (
+    <FormControl {...props}>
+      {label && <InputLabel>{label}</InputLabel>}
+      <Input {...props}>{children}</Input>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+}
+
+const inputVariant = {
+  standard: InputStandard,
+  filled: InputFilled,
+  outlined: InputOutlined,
+};
+
+const selectVariant = {
+  standard: SelectStandard,
+  filled: SelectFilled,
+  outlined: SelectOutlined,
+};
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
new file mode 100644
index 000000000..7a8395705
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
@@ -0,0 +1,156 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, createContext, h } from "preact";
+import { useContext, useState } from "preact/hooks";
+import { Colors } from "../style";
+
+export interface Props {
+  color: Colors;
+  disabled: boolean;
+  error: boolean;
+  focused: boolean;
+  fullWidth: boolean;
+  hiddenLabel: boolean;
+  required: boolean;
+  variant: "filled" | "outlined" | "standard";
+  margin: "none" | "normal" | "dense";
+  size: "medium" | "small";
+  children: ComponentChildren;
+}
+
+export const root = css`
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0px;
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+  vertical-align: top;
+`;
+
+const marginVariant = {
+  none: "",
+  normal: css`
+    margin-top: 16px;
+    margin-bottom: 8px;
+  `,
+  dense: css`
+    margin-top: 8px;
+    margin-bottom: 4px;
+  `,
+};
+const fullWidthStyle = css`
+  width: 100%;
+`;
+
+export function FormControl({
+  color = "primary",
+  disabled = false,
+  error = false,
+  focused: visuallyFocused,
+  fullWidth = false,
+  hiddenLabel = false,
+  margin = "none",
+  required = false,
+  size = "medium",
+  variant = "standard",
+  children,
+}: Partial<Props>) {
+  const [filled, setFilled] = useState(false);
+  const [focusedState, setFocused] = useState(false);
+  const focused =
+    visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+
+  const value: FCCProps = {
+    color,
+    disabled,
+    error,
+    filled,
+    focused,
+    fullWidth,
+    hiddenLabel,
+    size,
+    onBlur: () => {
+      setFocused(false);
+    },
+    onEmpty: () => {
+      setFilled(false);
+    },
+    onFilled: () => {
+      setFilled(true);
+    },
+    onFocus: () => {
+      setFocused(true);
+    },
+    required,
+    variant,
+  };
+
+  return (
+    <div
+      class={[
+        root,
+        marginVariant[margin],
+        fullWidth ? fullWidthStyle : "",
+      ].join(" ")}
+    >
+      <FormControlContext.Provider value={value}>
+        {children}
+      </FormControlContext.Provider>
+    </div>
+  );
+}
+
+export interface FCCProps {
+  // adornedStart,
+  // setAdornedStart,
+  color: Colors;
+  disabled: boolean;
+  error: boolean;
+  filled: boolean;
+  focused: boolean;
+  fullWidth: boolean;
+  hiddenLabel: boolean;
+  size: "medium" | "small";
+  onBlur: () => void;
+  onEmpty: () => void;
+  onFilled: () => void;
+  onFocus: () => void;
+  // registerEffect,
+  required: boolean;
+  variant: "filled" | "outlined" | "standard";
+}
+
+export const FormControlContext = createContext<FCCProps | null>(null);
+
+const defaultContextValue: FCCProps = {
+  color: "primary",
+  disabled: false,
+  error: false,
+  filled: false,
+  focused: false,
+  fullWidth: false,
+  hiddenLabel: false,
+  size: "medium",
+  onBlur: () => {},
+  onEmpty: () => {},
+  onFilled: () => {},
+  onFocus: () => {},
+  required: false,
+  variant: "outlined",
+};
+
+function withoutUndefinedProperties(obj: any) {
+  return Object.keys(obj).reduce((acc, key) => {
+    const _acc: any = acc;
+    if (obj[key] !== undefined) _acc[key] = obj[key];
+    return _acc;
+  }, {});
+}
+
+export function useFormControl(props: Partial<FCCProps> = {}): FCCProps {
+  const ctx = useContext(FormControlContext);
+  const cleanedProps = withoutUndefinedProperties(props);
+  if (!ctx) return { ...defaultContextValue, ...cleanedProps };
+  return { ...ctx, ...cleanedProps };
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
new file mode 100644
index 000000000..4854a6384
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
@@ -0,0 +1,54 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h } from "preact";
+import { theme } from "../style";
+import { useFormControl } from "./FormControl";
+
+const root = css`
+  color: ${theme.palette.text.secondary};
+  text-align: left;
+  margin-top: 3px;
+  margin-bottom: 0px;
+  margin-right: 0px;
+  margin-left: 0px;
+`;
+const disabledStyle = css`
+  color: ${theme.palette.text.disabled};
+`;
+const errorStyle = css`
+  color: ${theme.palette.error.main};
+`;
+const sizeSmallStyle = css`
+  margin-top: 4px;
+`;
+const containedStyle = css`
+  margin-right: 14px;
+  margin-left: 14px;
+`;
+
+interface Props {
+  disabled?: boolean;
+  error?: boolean;
+  filled?: boolean;
+  focused?: boolean;
+  margin?: "dense";
+  required?: boolean;
+  children: ComponentChildren;
+}
+export function FormHelperText({ children, ...props }: Props) {
+  const fcs = useFormControl(props);
+  const contained = fcs.variant === "filled" || fcs.variant === "outlined";
+  return (
+    <p
+      class={[
+        root,
+        theme.typography.caption,
+        fcs.disabled && disabledStyle,
+        fcs.error && errorStyle,
+        fcs.size === "small" && sizeSmallStyle,
+        contained && containedStyle,
+      ].join(" ")}
+    >
+      {children}
+    </p>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
new file mode 100644
index 000000000..e5ca53263
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
@@ -0,0 +1,67 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h } from "preact";
+import { Colors, theme } from "../style";
+import { useFormControl } from "./FormControl";
+
+export interface Props {
+  class?: string;
+  disabled?: boolean;
+  error?: boolean;
+  filled?: boolean;
+  focused?: boolean;
+  required?: boolean;
+  color?: Colors;
+  children?: ComponentChildren;
+}
+
+const root = css`
+  color: ${theme.palette.text.secondary};
+  line-height: 1.4375em;
+  padding: 0px;
+  position: relative;
+  &[data-focused] {
+    color: var(--color-main);
+  }
+  &[data-disabled] {
+    color: ${theme.palette.text.disabled};
+  }
+  &[data-error] {
+    color: ${theme.palette.error.main};
+  }
+`;
+
+export function FormLabel({
+  disabled,
+  error,
+  filled,
+  focused,
+  required,
+  color,
+  class: _class,
+  children,
+  ...rest
+}: Props) {
+  const fcs = useFormControl({
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    color,
+  });
+  return (
+    <label
+      data-focused={fcs.focused}
+      data-error={fcs.error}
+      data-disabled={fcs.disabled}
+      class={[_class, root, theme.typography.body1].join(" ")}
+      {...rest}
+      style={{
+        "--color-main": theme.palette[fcs.color].main,
+      }}
+    >
+      {children}
+      {fcs.required && <span data-error={fcs.error}>&thinsp;{"*"}</span>}
+    </label>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
new file mode 100644
index 000000000..5714eb1ba
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -0,0 +1,258 @@
+import { css } from "@linaria/core";
+import { h, JSX } from "preact";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { theme } from "../style";
+import { FormControlContext, useFormControl } from "./FormControl";
+
+const rootStyle = css`
+  color: ${theme.palette.text.primary};
+  line-height: 1.4375em;
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+`;
+const rootDisabledStyle = css`
+  color: ${theme.palette.text.disabled};
+  cursor: default;
+`;
+const rootMultilineStyle = css`
+  padding: 4px 0 5px;
+`;
+const fullWidthStyle = css`
+  width: "100%";
+`;
+
+export function InputBaseRoot({
+  class: _class,
+  disabled,
+  error,
+  multiline,
+  focused,
+  fullWidth,
+  children,
+}: any) {
+  const fcs = useFormControl({});
+  return (
+    <div
+      data-disabled={disabled}
+      data-focused={focused}
+      data-error={error}
+      class={[
+        _class,
+        rootStyle,
+        theme.typography.body1,
+        disabled && rootDisabledStyle,
+        multiline && rootMultilineStyle,
+        fullWidth && fullWidthStyle,
+      ].join(" ")}
+      style={{
+        "--color-main": theme.palette[fcs.color].main,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+const componentStyle = css`
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0px;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0px;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0px;
+  width: 100%;
+  animation-name: "auto-fill-cancel";
+  animation-duration: 10ms;
+
+  @keyframes auto-fill {
+    from {
+      display: block;
+    }
+  }
+  @keyframes auto-fill-cancel {
+    from {
+      display: block;
+    }
+  }
+  &::placeholder {
+    color: "currentColor";
+    opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5};
+    transition: ${theme.transitions.create("opacity", {
+      duration: theme.transitions.duration.shorter,
+    })};
+  }
+  &:focus {
+    outline: 0;
+  }
+  &:invalid {
+    box-shadow: none;
+  }
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  &:-webkit-autofill {
+    animation-duration: 5000s;
+    animation-name: auto-fill;
+  }
+`;
+const componentDisabledStyle = css`
+  opacity: 1;
+  --webkit-text-fill-color: ${theme.palette.text.disabled};
+`;
+const componentSmallStyle = css`
+  padding-top: 1px;
+`;
+const componentMultilineStyle = css`
+  height: auto;
+  resize: none;
+  padding: 0px;
+  padding-top: 0px;
+`;
+const searchStyle = css`
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+`;
+
+export function InputBaseComponent({
+  disabled,
+  size,
+  multiline,
+  type,
+  ...props
+}: any) {
+  return (
+    <input
+      disabled={disabled}
+      type={type}
+      class={[
+        componentStyle,
+        disabled && componentDisabledStyle,
+        size === "small" && componentSmallStyle,
+        multiline && componentMultilineStyle,
+        type === "search" && searchStyle,
+      ].join(" ")}
+      {...props}
+    />
+  );
+}
+
+export function InputBase({
+  Root = InputBaseRoot,
+  Input,
+  onChange,
+  name,
+  placeholder,
+  readOnly,
+  onKeyUp,
+  onKeyDown,
+  rows,
+  type = "text",
+  value,
+  onClick,
+  ...props
+}: any) {
+  const fcs = useFormControl(props);
+  // const [focused, setFocused] = useState(false);
+  useLayoutEffect(() => {
+    if (value && value !== "") {
+      fcs.onFilled();
+    } else {
+      fcs.onEmpty();
+    }
+  }, [value]);
+
+  const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>) => {
+    // Fix a bug with IE11 where the focus/blur events are triggered
+    // while the component is disabled.
+    if (fcs.disabled) {
+      event.stopPropagation();
+      return;
+    }
+
+    // if (onFocus) {
+    //   onFocus(event);
+    // }
+    // if (inputPropsProp.onFocus) {
+    //   inputPropsProp.onFocus(event);
+    // }
+
+    fcs.onFocus();
+  };
+
+  const handleBlur = () => {
+    // if (onBlur) {
+    //   onBlur(event);
+    // }
+    // if (inputPropsProp.onBlur) {
+    //   inputPropsProp.onBlur(event);
+    // }
+
+    fcs.onBlur();
+  };
+
+  const handleChange = (
+    event: JSX.TargetedEvent<HTMLElement & { value?: string }>,
+  ) => {
+    // if (inputPropsProp.onChange) {
+    //   inputPropsProp.onChange(event, ...args);
+    // }
+
+    // Perform in the willUpdate
+    if (onChange) {
+      onChange(event.currentTarget.value);
+    }
+  };
+
+  const handleClick = (
+    event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>,
+  ) => {
+    // if (inputRef.current && event.currentTarget === event.target) {
+    //   inputRef.current.focus();
+    // }
+
+    if (onClick) {
+      onClick(event.currentTarget.value);
+    }
+  };
+
+  if (!Input) {
+    Input = props.multiline ? TextareaAutoSize : InputBaseComponent;
+  }
+
+  return (
+    <Root {...fcs} onClick={handleClick}>
+      <FormControlContext.Provider value={null}>
+        <Input
+          aria-invalid={fcs.error}
+          // aria-describedby={}
+          disabled={fcs.disabled}
+          name={name}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={fcs.required}
+          rows={rows}
+          value={value}
+          onKeyDown={onKeyDown}
+          onKeyUp={onKeyUp}
+          type={type}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        />
+      </FormControlContext.Provider>
+    </Root>
+  );
+}
+
+export function TextareaAutoSize() {
+  return <input onClick={(e) => null} />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
new file mode 100644
index 000000000..5c50a8b72
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function InputFilled(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
new file mode 100644
index 000000000..c70c5bfc0
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
@@ -0,0 +1,98 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h } from "preact";
+import { Colors, theme } from "../style";
+import { useFormControl } from "./FormControl";
+import { FormLabel } from "./FormLabel";
+
+const root = css`
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+
+  &[data-form-control] {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    transform: translate(0, 20px) scale(1);
+  }
+  &[data-size="small"] {
+    transform: translate(0, 17px) scale(1);
+  }
+  &[data-shrink] {
+    transform: translate(0, -1.5px) scale(0.75);
+    transform-origin: top left;
+    max-width: 133%;
+  }
+  &:not([data-disable-animation]) {
+    transition: ${theme.transitions.create(
+      ["color", "transform", "max-width"],
+      {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut,
+      },
+    )};
+  }
+  &[data-variant="filled"] {
+    z-index: 1;
+    pointer-events: none;
+    transform: translate(12px, 16px) scale(1);
+    max-width: calc(100% - 24px);
+    &[data-size="small"] {
+      transform: translate(12px, 13px) scale(1);
+    }
+    &[data-shrink] {
+      user-select: none;
+      pointer-events: auto;
+      transform: translate(12px, 7px) scale(0.75);
+      max-width: calc(133% - 24px);
+      &[data-size="small"] {
+        transform: translate(12px, 4px) scale(0.75);
+      }
+    }
+  }
+  &[data-variant="outlined"] {
+    z-index: 1;
+    pointer-events: none;
+    transform: translate(14px, 16px) scale(1);
+    max-width: calc(100% - 24px);
+    &[data-size="small"] {
+      transform: translate(14px, 9px) scale(1);
+    }
+    &[data-shrink] {
+      user-select: none;
+      pointer-events: auto;
+      transform: translate(14px, -9px) scale(0.75);
+      max-width: calc(133% - 24px);
+    }
+  }
+`;
+
+interface InputLabelProps {
+  color: Colors;
+  disableAnimation: boolean;
+  disabled: boolean;
+  error: boolean;
+  focused: boolean;
+  margin: boolean;
+  required: boolean;
+  shrink: boolean;
+  variant: "filled" | "outlined" | "standard";
+  children: ComponentChildren;
+}
+export function InputLabel(props: Partial<InputLabelProps>) {
+  const fcs = useFormControl(props);
+  return (
+    <FormLabel
+      data-form-control={!!fcs}
+      data-size={fcs.size}
+      data-shrink={props.shrink || fcs.filled || fcs.focused}
+      data-disable-animation={props.disableAnimation}
+      data-variant={fcs.variant}
+      class={root}
+      {...props}
+    />
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx
new file mode 100644
index 000000000..3b40ffc70
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function InputOutlined(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
new file mode 100644
index 000000000..ba5145719
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
@@ -0,0 +1,124 @@
+import { css } from "@linaria/core";
+import { h, VNode } from "preact";
+import { Colors, theme } from "../style";
+import { useFormControl } from "./FormControl";
+import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase";
+
+export interface Props {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  color?: Colors;
+  defaultValue?: string;
+  disabled?: boolean;
+  disableUnderline?: boolean;
+  endAdornment?: VNode;
+  error?: boolean;
+  fullWidth?: boolean;
+  id?: string;
+  margin?: "dense" | "normal" | "none";
+  maxRows?: number;
+  minRows?: number;
+  multiline?: boolean;
+  name?: string;
+  onChange?: (s: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  rows?: number;
+  startAdornment?: VNode;
+  type?: string;
+  value?: string;
+}
+export function InputStandard({
+  type = "text",
+  multiline,
+  ...props
+}: Props): VNode {
+  const fcs = useFormControl(props);
+  return (
+    <InputBase
+      Root={Root}
+      Input={Input}
+      fullWidth={fcs.fullWidth}
+      multiline={multiline}
+      type={type}
+      {...props}
+    />
+  );
+}
+
+const rootStyle = css`
+  position: relative;
+`;
+const formControlStyle = css`
+  label + & {
+    margin-top: 16px;
+  }
+`;
+const underlineStyle = css`
+  &:after {
+    border-bottom: 2px solid var(--color-main);
+    left: 0px;
+    bottom: 0px;
+    content: "";
+    position: absolute;
+    right: 0px;
+    transform: scaleX(0);
+    transition: ${theme.transitions.create("transform", {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut,
+    })};
+    pointer-events: none;
+  }
+  &[data-focused]:after {
+    transform: scaleX(1);
+  }
+  &[data-error]:after {
+    border-bottom-color: ${theme.palette.error.main};
+    transform: scaleY(1);
+  }
+  &:before {
+    border-bottom: 1px solid
+      ${theme.palette.mode === "light"
+        ? "rgba(0, 0, 0, 0.42)"
+        : "rgba(255, 255, 255, 0.7)"};
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    content: "\\00a0";
+    position: absolute;
+    transition: ${theme.transitions.create("border-bottom-color", {
+      duration: theme.transitions.duration.shorter,
+    })};
+    pointer-events: none;
+  }
+  &:hover:not([data-disabled]:before) {
+    border-bottom: 2px solid var(--color-main);
+    @media (hover: none) {
+      border-bottom: 1px solid
+        ${theme.palette.mode === "light"
+          ? "rgba(0, 0, 0, 0.42)"
+          : "rgba(255, 255, 255, 0.7)"};
+    }
+  }
+  &[data-disabled]:before {
+    border-bottom-style: solid;
+  }
+`;
+
+function Root({ disabled, focused, error, children }: any) {
+  return (
+    <InputBaseRoot
+      disabled={disabled}
+      focused={focused}
+      error={error}
+      class={[rootStyle, formControlStyle, underlineStyle].join(" ")}
+    >
+      {children}
+    </InputBaseRoot>
+  );
+}
+
+function Input(props: any) {
+  return <InputBaseComponent {...props} />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx
new file mode 100644
index 000000000..28b1859f8
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function SelectFilled(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx
new file mode 100644
index 000000000..10ee4015c
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function SelectOutlined(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
new file mode 100644
index 000000000..72cb635df
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function SelectStandard(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx
index 5f9cd2244..3fa3b7e33 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/packages/taler-wallet-webextension/src/mui/style.tsx
@@ -12,6 +12,14 @@ import {
 } from "./colors/constants";
 import { getContrastRatio } from "./colors/manipulation";
 
+export type Colors =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "error"
+  | "info"
+  | "warning";
+
 export function round(value: number): number {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -386,6 +394,14 @@ function createTheme() {
       `,
       /* just of caseAllCaps */
       // button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
+
+      caption: css`
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+        font-weight: ${fontWeightMedium};
+        font-size: ${pxToRem(12)};
+        line-height: 1.66;
+        letter-spacing: ${round(0.4 / 12)}em;
+      `,
       // caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
       // overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
     };
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index f4df4f7f5..e78bc4ff9 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -57,7 +57,7 @@ function main(): void {
   }
 }
 
-setupI18n("en-US", strings);
+setupI18n("en", strings);
 
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", main);
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index a346df2c8..9a1d8699a 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -73,7 +73,7 @@ function main(): void {
   }
 }
 
-setupI18n("en-US", strings);
+setupI18n("en", strings);
 
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", main);
@@ -102,188 +102,183 @@ function Application(): VNode {
   return (
     <TranslationProvider>
       <DevContextProvider>
-        {({ devMode }: { devMode: boolean }) => (
-          <IoCProviderForRuntime>
-            {/* <Match/> won't work in the first render if <Router /> is not called first */}
-            {/* https://github.com/preactjs/preact-router/issues/415 */}
-            <Router history={hash_history} />
-            <Match>
-              {({ path }: { path: string }) => {
-                if (path && path.startsWith("/cta")) return;
-                return (
-                  <Fragment>
-                    <LogoHeader />
-                    <WalletNavBar path={path} />
-                  </Fragment>
-                );
-              }}
-            </Match>
-            <div
-              style={{
-                backgroundColor: "lightcyan",
-                display: "flex",
-                justifyContent: "center",
-              }}
+        <IoCProviderForRuntime>
+          {/* <Match/> won't work in the first render if <Router /> is not called first */}
+          {/* https://github.com/preactjs/preact-router/issues/415 */}
+          <Router history={hash_history} />
+          <Match>
+            {({ path }: { path: string }) => {
+              if (path && path.startsWith("/cta")) return;
+              return (
+                <Fragment>
+                  <LogoHeader />
+                  <WalletNavBar path={path} />
+                </Fragment>
+              );
+            }}
+          </Match>
+          <div
+            style={{
+              backgroundColor: "lightcyan",
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            <PendingTransactions
+              goToTransaction={(txId: string) =>
+                route(Pages.balance_transaction.replace(":tid", txId))
+              }
+            />
+          </div>
+          <WalletBox>
+            {globalNotification && (
+              <SuccessBox onClick={clearNotification}>
+                <div>{globalNotification}</div>
+              </SuccessBox>
+            )}
+            <Router
+              history={hash_history}
+              onChange={clearNotificationWhenMovingOut}
             >
-              <PendingTransactions
-                goToTransaction={(txId: string) =>
-                  route(Pages.balance_transaction.replace(":tid", txId))
-                }
-              />
-            </div>
-            <WalletBox>
-              {globalNotification && (
-                <SuccessBox onClick={clearNotification}>
-                  <div>{globalNotification}</div>
-                </SuccessBox>
-              )}
-              <Router
-                history={hash_history}
-                onChange={clearNotificationWhenMovingOut}
-              >
-                <Route path={Pages.welcome} component={WelcomePage} />
+              <Route path={Pages.welcome} component={WelcomePage} />
 
-                {/**
-                 * BALANCE
-                 */}
+              {/**
+               * BALANCE
+               */}
 
-                <Route
-                  path={Pages.balance_history}
-                  component={HistoryPage}
-                  goToWalletDeposit={(currency: string) =>
-                    route(Pages.balance_deposit.replace(":currency", currency))
-                  }
-                  goToWalletManualWithdraw={(currency?: string) =>
-                    route(
-                      Pages.balance_manual_withdraw.replace(
-                        ":currency?",
-                        currency || "",
-                      ),
-                    )
-                  }
-                />
-                <Route
-                  path={Pages.balance_transaction}
-                  component={TransactionPage}
-                  goToWalletHistory={(currency?: string) => {
-                    route(
-                      Pages.balance_history.replace(
-                        ":currency",
-                        currency || "",
-                      ),
-                    );
-                  }}
-                />
+              <Route
+                path={Pages.balance_history}
+                component={HistoryPage}
+                goToWalletDeposit={(currency: string) =>
+                  route(Pages.balance_deposit.replace(":currency", currency))
+                }
+                goToWalletManualWithdraw={(currency?: string) =>
+                  route(
+                    Pages.balance_manual_withdraw.replace(
+                      ":currency?",
+                      currency || "",
+                    ),
+                  )
+                }
+              />
+              <Route
+                path={Pages.balance_transaction}
+                component={TransactionPage}
+                goToWalletHistory={(currency?: string) => {
+                  route(
+                    Pages.balance_history.replace(":currency", currency || ""),
+                  );
+                }}
+              />
 
-                <Route
-                  path={Pages.balance_manual_withdraw}
-                  component={ManualWithdrawPage}
-                  onCancel={() => {
-                    route(Pages.balance);
-                  }}
-                />
+              <Route
+                path={Pages.balance_manual_withdraw}
+                component={ManualWithdrawPage}
+                onCancel={() => {
+                  route(Pages.balance);
+                }}
+              />
 
-                <Route
-                  path={Pages.balance_deposit}
-                  component={DepositPage}
-                  onCancel={(currency: string) => {
-                    route(Pages.balance_history.replace(":currency", currency));
-                  }}
-                  onSuccess={(currency: string) => {
-                    route(Pages.balance_history.replace(":currency", currency));
-                    setGlobalNotification(
-                      <i18n.Translate>
-                        All done, your transaction is in progress
-                      </i18n.Translate>,
-                    );
-                  }}
-                />
-                {/**
-                 * PENDING
-                 */}
-                <Route path={Pages.settings} component={SettingsPage} />
+              <Route
+                path={Pages.balance_deposit}
+                component={DepositPage}
+                onCancel={(currency: string) => {
+                  route(Pages.balance_history.replace(":currency", currency));
+                }}
+                onSuccess={(currency: string) => {
+                  route(Pages.balance_history.replace(":currency", currency));
+                  setGlobalNotification(
+                    <i18n.Translate>
+                      All done, your transaction is in progress
+                    </i18n.Translate>,
+                  );
+                }}
+              />
+              {/**
+               * PENDING
+               */}
+              <Route path={Pages.settings} component={SettingsPage} />
 
-                {/**
-                 * BACKUP
-                 */}
-                <Route
-                  path={Pages.backup}
-                  component={BackupPage}
-                  onAddProvider={() => {
-                    route(Pages.backup_provider_add);
-                  }}
-                />
-                <Route
-                  path={Pages.backup_provider_detail}
-                  component={ProviderDetailPage}
-                  onBack={() => {
-                    route(Pages.backup);
-                  }}
-                />
-                <Route
-                  path={Pages.backup_provider_add}
-                  component={ProviderAddPage}
-                  onBack={() => {
-                    route(Pages.backup);
-                  }}
-                />
+              {/**
+               * BACKUP
+               */}
+              <Route
+                path={Pages.backup}
+                component={BackupPage}
+                onAddProvider={() => {
+                  route(Pages.backup_provider_add);
+                }}
+              />
+              <Route
+                path={Pages.backup_provider_detail}
+                component={ProviderDetailPage}
+                onBack={() => {
+                  route(Pages.backup);
+                }}
+              />
+              <Route
+                path={Pages.backup_provider_add}
+                component={ProviderAddPage}
+                onBack={() => {
+                  route(Pages.backup);
+                }}
+              />
 
-                {/**
-                 * SETTINGS
-                 */}
-                <Route
-                  path={Pages.settings_exchange_add}
-                  component={ExchangeAddPage}
-                  onBack={() => {
-                    route(Pages.balance);
-                  }}
-                />
+              {/**
+               * SETTINGS
+               */}
+              <Route
+                path={Pages.settings_exchange_add}
+                component={ExchangeAddPage}
+                onBack={() => {
+                  route(Pages.balance);
+                }}
+              />
 
-                {/**
-                 * DEV
-                 */}
+              {/**
+               * DEV
+               */}
 
-                <Route path={Pages.dev} component={DeveloperPage} />
+              <Route path={Pages.dev} component={DeveloperPage} />
 
-                {/**
-                 * CALL TO ACTION
-                 */}
-                <Route
-                  path={Pages.cta_pay}
-                  component={PayPage}
-                  goToWalletManualWithdraw={(currency?: string) =>
-                    route(
-                      Pages.balance_manual_withdraw.replace(
-                        ":currency?",
-                        currency || "",
-                      ),
-                    )
-                  }
-                  goBack={() => route(Pages.balance)}
-                />
-                <Route path={Pages.cta_refund} component={RefundPage} />
-                <Route path={Pages.cta_tips} component={TipPage} />
-                <Route path={Pages.cta_withdraw} component={WithdrawPage} />
+              {/**
+               * CALL TO ACTION
+               */}
+              <Route
+                path={Pages.cta_pay}
+                component={PayPage}
+                goToWalletManualWithdraw={(currency?: string) =>
+                  route(
+                    Pages.balance_manual_withdraw.replace(
+                      ":currency?",
+                      currency || "",
+                    ),
+                  )
+                }
+                goBack={() => route(Pages.balance)}
+              />
+              <Route path={Pages.cta_refund} component={RefundPage} />
+              <Route path={Pages.cta_tips} component={TipPage} />
+              <Route path={Pages.cta_withdraw} component={WithdrawPage} />
 
-                {/**
-                 * NOT FOUND
-                 * all redirects should be at the end
-                 */}
-                <Route
-                  path={Pages.balance}
-                  component={Redirect}
-                  to={Pages.balance_history.replace(":currency", "")}
-                />
+              {/**
+               * NOT FOUND
+               * all redirects should be at the end
+               */}
+              <Route
+                path={Pages.balance}
+                component={Redirect}
+                to={Pages.balance_history.replace(":currency", "")}
+              />
 
-                <Route
-                  default
-                  component={Redirect}
-                  to={Pages.balance_history.replace(":currency", "")}
-                />
-              </Router>
-            </WalletBox>
-          </IoCProviderForRuntime>
-        )}
+              <Route
+                default
+                component={Redirect}
+                to={Pages.balance_history.replace(":currency", "")}
+              />
+            </Router>
+          </WalletBox>
+        </IoCProviderForRuntime>
       </DevContextProvider>
     </TranslationProvider>
   );
diff --git a/packages/taler-wallet-webextension/static/img/delete_24px.svg b/packages/taler-wallet-webextension/static/img/delete_24px.svg
new file mode 100644
index 000000000..0d0b74d16
--- /dev/null
+++ b/packages/taler-wallet-webextension/static/img/delete_24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/static/img/send_24px.svg b/packages/taler-wallet-webextension/static/img/send_24px.svg
new file mode 100644
index 000000000..95fe7a4c6
--- /dev/null
+++ b/packages/taler-wallet-webextension/static/img/send_24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
\ No newline at end of file