prettier

13 files changed, 467 insertions, 333 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
index 2d7b98087..276ac9ff0 100644
--- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
@@ -24,7 +24,13 @@ interface Props {
   name: string;
   description?: string;
 }
-export function Checkbox({ name, enabled, onToggle, label, description }: Props): JSX.Element {
+export function Checkbox({
+  name,
+  enabled,
+  onToggle,
+  label,
+  description,
+}: Props): JSX.Element {
   return (
     <div>
       <input
@@ -32,23 +38,26 @@ export function Checkbox({ name, enabled, onToggle, label, description }: Props)
         onClick={onToggle}
         type="checkbox"
         id={`checkbox-${name}`}
-        style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} />
+        style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
+      />
       <label
         htmlFor={`checkbox-${name}`}
         style={{ marginLeft: "0.5em", fontWeight: "bold" }}
       >
         {label}
       </label>
-      {description && <span
-        style={{
-          color: "#383838",
-          fontSize: "smaller",
-          display: "block",
-          marginLeft: "2em",
-        }}
-      >
-        {description}
-      </span>}
+      {description && (
+        <span
+          style={{
+            color: "#383838",
+            fontSize: "smaller",
+            display: "block",
+            marginLeft: "2em",
+          }}
+        >
+          {description}
+        </span>
+      )}
     </div>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
index 5e30ee3d1..2fc8316f5 100644
--- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
+++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
@@ -16,7 +16,7 @@
 
 import { JSX } from "preact/jsx-runtime";
 import { Outlined, StyledCheckboxLabel } from "./styled/index";
-import { h } from 'preact';
+import { h } from "preact";
 
 interface Props {
   enabled: boolean;
@@ -25,28 +25,39 @@ interface Props {
   name: string;
 }
 
+const Tick = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    style={{ backgroundColor: "green" }}
+  >
+    <path
+      fill="none"
+      stroke="white"
+      stroke-width="3"
+      d="M1.73 12.91l6.37 6.37L22.79 4.59"
+    />
+  </svg>
+);
 
-const Tick = () => <svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  aria-hidden="true"
-  focusable="false"
-  style={{ backgroundColor: 'green' }}
->
-  <path
-    fill="none"
-    stroke="white"
-    stroke-width="3"
-    d="M1.73 12.91l6.37 6.37L22.79 4.59"
-  />
-</svg>
-
-export function CheckboxOutlined({ name, enabled, onToggle, label }: Props): JSX.Element {
+export function CheckboxOutlined({
+  name,
+  enabled,
+  onToggle,
+  label,
+}: Props): JSX.Element {
   return (
     <Outlined>
       <StyledCheckboxLabel onClick={onToggle}>
         <span>
-          <input type="checkbox" name={name} checked={enabled} disabled={false} />
+          <input
+            type="checkbox"
+            name={name}
+            checked={enabled}
+            disabled={false}
+          />
           <div>
             <Tick />
           </div>
diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
index f0c682ccb..952df15ae 100644
--- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
@@ -14,9 +14,15 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
- import { JSX, h } from "preact";
+import { JSX, h } from "preact";
 
-export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element {
+export function DebugCheckbox({
+  enabled,
+  onToggle,
+}: {
+  enabled: boolean;
+  onToggle: () => void;
+}): JSX.Element {
   return (
     <div>
       <input
@@ -24,7 +30,8 @@ export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggl
         onClick={onToggle}
         type="checkbox"
         id="checkbox-perm"
-        style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} />
+        style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }}
+      />
       <label
         htmlFor="checkbox-perm"
         style={{ marginLeft: "0.5em", fontWeight: "bold" }}
diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
index b48deb847..0f8afd525 100644
--- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -21,11 +21,13 @@ import { PageLink } from "../renderHtml";
 
 interface Props {
   timedOut: boolean;
-  diagnostics: WalletDiagnostics | undefined
+  diagnostics: WalletDiagnostics | undefined;
 }
 
-export function Diagnostics({timedOut, diagnostics}: Props): JSX.Element | null {
-
+export function Diagnostics({
+  timedOut,
+  diagnostics,
+}: Props): JSX.Element | null {
   if (timedOut) {
     return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
   }
@@ -60,8 +62,8 @@ export function Diagnostics({timedOut, diagnostics}: Props): JSX.Element | null
             <p>
               Your wallet database is outdated. Currently automatic migration is
               not supported. Please go{" "}
-              <PageLink pageName="/reset-required">here</PageLink> to reset
-              the wallet database.
+              <PageLink pageName="/reset-required">here</PageLink> to reset the
+              wallet database.
             </p>
           ) : null}
         </div>
diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx
index 6f3388bf9..8b3e6d375 100644
--- a/packages/taler-wallet-webextension/src/components/EditableText.tsx
+++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx
@@ -25,25 +25,37 @@ interface Props {
   name: string;
   description?: string;
 }
-export function EditableText({ name, value, onChange, label, description }: Props): JSX.Element {
-  const [editing, setEditing] = useState(false)
-  const ref = useRef<HTMLInputElement>(null)
+export function EditableText({
+  name,
+  value,
+  onChange,
+  label,
+  description,
+}: Props): JSX.Element {
+  const [editing, setEditing] = useState(false);
+  const ref = useRef<HTMLInputElement>(null);
   let InputText;
   if (!editing) {
-    InputText = () => <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <p>{value}</p>
-      <button onClick={() => setEditing(true)}>edit</button>
-    </div>
+    InputText = () => (
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <p>{value}</p>
+        <button onClick={() => setEditing(true)}>edit</button>
+      </div>
+    );
   } else {
-    InputText = () => <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <input
-        value={value}
-        ref={ref}
-        type="text"
-        id={`text-${name}`}
-      />
-      <button onClick={() => { if (ref.current) onChange(ref.current.value).then(r => setEditing(false)) }}>confirm</button>
-    </div>
+    InputText = () => (
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <input value={value} ref={ref} type="text" id={`text-${name}`} />
+        <button
+          onClick={() => {
+            if (ref.current)
+              onChange(ref.current.value).then((r) => setEditing(false));
+          }}
+        >
+          confirm
+        </button>
+      </div>
+    );
   }
   return (
     <div>
@@ -54,16 +66,18 @@ export function EditableText({ name, value, onChange, label, description }: Prop
         {label}
       </label>
       <InputText />
-      {description && <span
-        style={{
-          color: "#383838",
-          fontSize: "smaller",
-          display: "block",
-          marginLeft: "2em",
-        }}
-      >
-        {description}
-      </span>}
+      {description && (
+        <span
+          style={{
+            color: "#383838",
+            fontSize: "smaller",
+            display: "block",
+            marginLeft: "2em",
+          }}
+        >
+          {description}
+        </span>
+      )}
     </div>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index cfcef16d5..c6b64fb6a 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -13,22 +13,35 @@
  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 { VNode, h } from "preact";
+import { VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import arrowDown from '../../static/img/chevron-down.svg';
+import arrowDown from "../../static/img/chevron-down.svg";
 import { ErrorBox } from "./styled";
 
-export function ErrorMessage({ title, description }: { title?: string|VNode; description?: string; }) {
+export function ErrorMessage({
+  title,
+  description,
+}: {
+  title?: string | VNode;
+  description?: string;
+}) {
   const [showErrorDetail, setShowErrorDetail] = useState(false);
-  if (!title)
-    return null;
-  return <ErrorBox style={{paddingTop: 0, paddingBottom: 0}}>
-    <div>
-      <p>{title}</p>
-      { description && <button onClick={() => { setShowErrorDetail(v => !v); }}>
-        <img style={{ height: '1.5em' }} src={arrowDown} />
-      </button> }
-    </div>
-    {showErrorDetail && <p>{description}</p>}
-  </ErrorBox>;
+  if (!title) return null;
+  return (
+    <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
+      <div>
+        <p>{title}</p>
+        {description && (
+          <button
+            onClick={() => {
+              setShowErrorDetail((v) => !v);
+            }}
+          >
+            <img style={{ height: "1.5em" }} src={arrowDown} />
+          </button>
+        )}
+      </div>
+      {showErrorDetail && <p>{description}</p>}
+    </ErrorBox>
+  );
 }
diff --git a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
index cfa20280f..6d2731cd8 100644
--- a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
+++ b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx
@@ -13,66 +13,80 @@
  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 { Fragment, VNode } from "preact"
-import { useState } from "preact/hooks"
-import { JSXInternal } from "preact/src/jsx"
-import { h } from 'preact';
+import { Fragment, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { JSXInternal } from "preact/src/jsx";
+import { h } from "preact";
 
 export function ExchangeXmlTos({ doc }: { doc: Document }) {
-  const termsNode = doc.querySelector('[ids=terms-of-service]')
+  const termsNode = doc.querySelector("[ids=terms-of-service]");
   if (!termsNode) {
-    return <div>
-      <p>The exchange send us an xml but there is no node with 'ids=terms-of-service'. This is the content:</p>
-      <pre>{new XMLSerializer().serializeToString(doc)}</pre>
-    </div>
+    return (
+      <div>
+        <p>
+          The exchange send us an xml but there is no node with
+          'ids=terms-of-service'. This is the content:
+        </p>
+        <pre>{new XMLSerializer().serializeToString(doc)}</pre>
+      </div>
+    );
   }
-  return <Fragment>
-    {Array.from(termsNode.children).map(renderChild)}
-  </Fragment>
+  return <Fragment>{Array.from(termsNode.children).map(renderChild)}</Fragment>;
 }
 
 /**
  * Map XML elements into HTML
- * @param child 
- * @returns 
+ * @param child
+ * @returns
  */
 function renderChild(child: Element): VNode {
-  const children = Array.from(child.children)
+  const children = Array.from(child.children);
   switch (child.nodeName) {
-    case 'title': return <header>{child.textContent}</header>
-    case '#text': return <Fragment />
-    case 'paragraph': return <p>{child.textContent}</p>
-    case 'section': {
-      return <AnchorWithOpenState href={`#terms-${child.getAttribute('ids')}`}>
-        {children.map(renderChild)}
-      </AnchorWithOpenState>
+    case "title":
+      return <header>{child.textContent}</header>;
+    case "#text":
+      return <Fragment />;
+    case "paragraph":
+      return <p>{child.textContent}</p>;
+    case "section": {
+      return (
+        <AnchorWithOpenState href={`#terms-${child.getAttribute("ids")}`}>
+          {children.map(renderChild)}
+        </AnchorWithOpenState>
+      );
     }
-    case 'bullet_list': {
-      return <ul>{children.map(renderChild)}</ul>
+    case "bullet_list": {
+      return <ul>{children.map(renderChild)}</ul>;
     }
-    case 'enumerated_list': {
-      return <ol>{children.map(renderChild)}</ol>
+    case "enumerated_list": {
+      return <ol>{children.map(renderChild)}</ol>;
     }
-    case 'list_item': {
-      return <li>{children.map(renderChild)}</li>
+    case "list_item": {
+      return <li>{children.map(renderChild)}</li>;
     }
-    case 'block_quote': {
-      return <div>{children.map(renderChild)}</div>
+    case "block_quote": {
+      return <div>{children.map(renderChild)}</div>;
     }
-    default: return <div style={{ color: 'red', display: 'hidden' }}>unknown tag {child.nodeName} <a></a></div>
+    default:
+      return (
+        <div style={{ color: "red", display: "hidden" }}>
+          unknown tag {child.nodeName} <a></a>
+        </div>
+      );
   }
 }
 
 /**
  * Simple anchor with a state persisted into 'data-open' prop
- * @returns 
+ * @returns
  */
-function AnchorWithOpenState(props: JSXInternal.HTMLAttributes<HTMLAnchorElement>) {
-  const [open, setOpen] = useState<boolean>(false)
+function AnchorWithOpenState(
+  props: JSXInternal.HTMLAttributes<HTMLAnchorElement>,
+) {
+  const [open, setOpen] = useState<boolean>(false);
   function doClick(e: JSXInternal.TargetedMouseEvent<HTMLAnchorElement>) {
     setOpen(!open);
     e.preventDefault();
   }
-  return <a data-open={open ? 'true' : 'false'} onClick={doClick} {...props} />
+  return <a data-open={open ? "true" : "false"} onClick={doClick} {...props} />;
 }
-
diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
index 9b75c62a1..6c47dc92a 100644
--- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
+++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx
@@ -17,15 +17,22 @@
 import { h } from "preact";
 
 export function LogoHeader() {
-  return <div style={{
-    display: 'flex',
-    justifyContent: 'space-around',
-    margin: '2em',
-  }}>
-    <img style={{
-      width: 150,
-      height: 70,
-    }} src="/static/img/logo-2021.svg" width="150" />
-  </div>
-
-}
\ No newline at end of file
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-around",
+        margin: "2em",
+      }}
+    >
+      <img
+        style={{
+          width: 150,
+          height: 70,
+        }}
+        src="/static/img/logo-2021.svg"
+        width="150"
+      />
+    </div>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index 75c9df16f..c8ecb46d2 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -15,18 +15,28 @@
  */
 import { AmountLike } from "@gnu-taler/taler-util";
 import { ExtraLargeText, LargeText, SmallLightText } from "./styled";
-import { h } from 'preact';
+import { h } from "preact";
 
-export type Kind = 'positive' | 'negative' | 'neutral';
+export type Kind = "positive" | "negative" | "neutral";
 interface Props {
-  title: string, text: AmountLike, kind: Kind, big?: boolean
+  title: string;
+  text: AmountLike;
+  kind: Kind;
+  big?: boolean;
 }
 export function Part({ text, title, kind, big }: Props) {
   const Text = big ? ExtraLargeText : LargeText;
-  return <div style={{ margin: '1em' }}>
-    <SmallLightText style={{ margin: '.5em' }}>{title}</SmallLightText>
-    <Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative' ? 'red' : 'black') }}>
-      {text}
-    </Text>
-  </div>
+  return (
+    <div style={{ margin: "1em" }}>
+      <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText>
+      <Text
+        style={{
+          color:
+            kind == "positive" ? "green" : kind == "negative" ? "red" : "black",
+        }}
+      >
+        {text}
+      </Text>
+    </div>
+  );
 }
diff --git a/packages/taler-wallet-webextension/src/components/QR.tsx b/packages/taler-wallet-webextension/src/components/QR.tsx
index 8e3f69295..4ff1af961 100644
--- a/packages/taler-wallet-webextension/src/components/QR.tsx
+++ b/packages/taler-wallet-webextension/src/components/QR.tsx
@@ -14,24 +14,35 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
- import { h, VNode } from "preact";
- import { useEffect, useRef } from "preact/hooks";
- import qrcode from "qrcode-generator";
- 
- export function QR({ text }: { text: string; }):VNode {
-   const divRef = useRef<HTMLDivElement>(null);
-   useEffect(() => {
-     if (!divRef.current) return
-     const qr = qrcode(0, 'L');
-     qr.addData(text);
-     qr.make();
-     divRef.current.innerHTML = qr.createSvgTag({
-       scalable: true,
-     });
-   });
- 
-   return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-     <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
-   </div>;
- }
- 
\ No newline at end of file
+import { h, VNode } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import qrcode from "qrcode-generator";
+
+export function QR({ text }: { text: string }): VNode {
+  const divRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!divRef.current) return;
+    const qr = qrcode(0, "L");
+    qr.addData(text);
+    qr.make();
+    divRef.current.innerHTML = qr.createSvgTag({
+      scalable: true,
+    });
+  });
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{ width: "50%", minWidth: 200, maxWidth: 300 }}
+        ref={divRef}
+      />
+    </div>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 536e5b89a..f89ba19b2 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -23,46 +23,67 @@ interface Props {
   onChange: (s: string) => void;
   label: string;
   list: {
-    [label: string]: string
-  }
+    [label: string]: string;
+  };
   name: string;
   description?: string;
   canBeNull?: boolean;
 }
 
-export function SelectList({ name, value, list, canBeNull, onChange, label, description }: Props): JSX.Element {
-  return <div>
-    <label
-      htmlFor={`text-${name}`}
-      style={{ marginLeft: "0.5em", fontWeight: "bold" }}
-    > {label}</label>
-    <NiceSelect>
-      <select name={name} onChange={(e) => {
-        console.log(e.currentTarget.value, value)
-        onChange(e.currentTarget.value)
-      }}>
-        {value !== undefined ? <option selected>
-          {list[value]}
-        </option> : <option selected disabled>
-            Select one option
-        </option>}
-        {Object.keys(list)
-          .filter((l) => l !== value)
-          .map(key => <option value={key} key={key}>{list[key]}</option>)
-        }
-      </select>
-    </NiceSelect>
-    {description && <span
-      style={{
-        color: "#383838",
-        fontSize: "smaller",
-        display: "block",
-        marginLeft: "2em",
-      }}
-    >
-      {description}
-    </span>}
-
-  </div>
-
+export function SelectList({
+  name,
+  value,
+  list,
+  canBeNull,
+  onChange,
+  label,
+  description,
+}: Props): JSX.Element {
+  return (
+    <div>
+      <label
+        htmlFor={`text-${name}`}
+        style={{ marginLeft: "0.5em", fontWeight: "bold" }}
+      >
+        {" "}
+        {label}
+      </label>
+      <NiceSelect>
+        <select
+          name={name}
+          onChange={(e) => {
+            console.log(e.currentTarget.value, value);
+            onChange(e.currentTarget.value);
+          }}
+        >
+          {value !== undefined ? (
+            <option selected>{list[value]}</option>
+          ) : (
+            <option selected disabled>
+              Select one option
+            </option>
+          )}
+          {Object.keys(list)
+            .filter((l) => l !== value)
+            .map((key) => (
+              <option value={key} key={key}>
+                {list[key]}
+              </option>
+            ))}
+        </select>
+      </NiceSelect>
+      {description && (
+        <span
+          style={{
+            color: "#383838",
+            fontSize: "smaller",
+            display: "block",
+            marginLeft: "2em",
+          }}
+        >
+          {description}
+        </span>
+      )}
+    </div>
+  );
 }
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 991e97c94..1917d5627 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -14,18 +14,33 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountString, Timestamp, Transaction, TransactionType } from '@gnu-taler/taler-util';
-import { format, formatDistance } from 'date-fns';
-import { h } from 'preact';
-import imageBank from '../../static/img/ri-bank-line.svg';
-import imageHandHeart from '../../static/img/ri-hand-heart-line.svg';
-import imageRefresh from '../../static/img/ri-refresh-line.svg';
-import imageRefund from '../../static/img/ri-refund-2-line.svg';
-import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg';
+import {
+  AmountString,
+  Timestamp,
+  Transaction,
+  TransactionType,
+} from "@gnu-taler/taler-util";
+import { format, formatDistance } from "date-fns";
+import { h } from "preact";
+import imageBank from "../../static/img/ri-bank-line.svg";
+import imageHandHeart from "../../static/img/ri-hand-heart-line.svg";
+import imageRefresh from "../../static/img/ri-refresh-line.svg";
+import imageRefund from "../../static/img/ri-refund-2-line.svg";
+import imageShoppingCart from "../../static/img/ri-shopping-cart-line.svg";
 import { Pages } from "../NavigationBar";
-import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index';
+import {
+  Column,
+  ExtraLargeText,
+  HistoryRow,
+  SmallLightText,
+  LargeText,
+  LightText,
+} from "./styled/index";
 
-export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element {
+export function TransactionItem(props: {
+  tx: Transaction;
+  multiCurrency: boolean;
+}): JSX.Element {
   const tx = props.tx;
   switch (tx.type) {
     case TransactionType.Withdrawal:
@@ -112,20 +127,26 @@ export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean
 
 function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
   const date = new Date(props.timestamp.t_ms);
-  const dateStr = format(date, 'dd MMM, hh:mm')
+  const dateStr = format(date, "dd MMM, hh:mm");
 
   return (
-    <HistoryRow href={Pages.transaction.replace(':tid', props.id)}>
+    <HistoryRow href={Pages.transaction.replace(":tid", props.id)}>
       <img src={props.iconPath} />
       <Column>
         <LargeText>
           <div>{props.title}</div>
-          {props.subtitle && <div style={{color:'gray', fontSize:'medium', marginTop: 5}}>{props.subtitle}</div>}
+          {props.subtitle && (
+            <div style={{ color: "gray", fontSize: "medium", marginTop: 5 }}>
+              {props.subtitle}
+            </div>
+          )}
         </LargeText>
-        {props.pending &&
-          <LightText style={{ marginTop: 5, marginBottom: 5 }}>Waiting for confirmation</LightText>
-        }
-        <SmallLightText style={{marginTop:5 }}>{dateStr}</SmallLightText>
+        {props.pending && (
+          <LightText style={{ marginTop: 5, marginBottom: 5 }}>
+            Waiting for confirmation
+          </LightText>
+        )}
+        <SmallLightText style={{ marginTop: 5 }}>{dateStr}</SmallLightText>
       </Column>
       <TransactionAmount
         pending={props.pending}
@@ -170,14 +191,18 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
       sign = "";
   }
   return (
-    <Column style={{
-      textAlign: 'center',
-      color:
-        props.pending ? "gray" :
-          (sign === '+' ? 'darkgreen' :
-            (sign === '-' ? 'darkred' :
-              undefined))
-    }}>
+    <Column
+      style={{
+        textAlign: "center",
+        color: props.pending
+          ? "gray"
+          : sign === "+"
+          ? "darkgreen"
+          : sign === "-"
+          ? "darkred"
+          : undefined,
+      }}
+    >
       <ExtraLargeText>
         {sign}
         {amount}
@@ -187,4 +212,3 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
     </Column>
   );
 }
-
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 65c1f49e9..8b36dbd31 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -14,18 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-
 // need to import linaria types, otherwise compiler will complain
-import type * as Linaria from '@linaria/core';
+import type * as Linaria from "@linaria/core";
 
-import { styled } from '@linaria/react';
+import { styled } from "@linaria/react";
 
 export const PaymentStatus = styled.div<{ color: string }>`
   padding: 5px;
   border-radius: 5px;
   color: white;
-  background-color: ${p => p.color};
-`
+  background-color: ${(p) => p.color};
+`;
 
 export const WalletAction = styled.div`
   display: flex;
@@ -36,9 +35,9 @@ export const WalletAction = styled.div`
 
   margin: auto;
   height: 100%;
-  
+
   & h1:first-child {
-    margin-top: 0; 
+    margin-top: 0;
   }
   section {
     margin-bottom: 2em;
@@ -47,7 +46,7 @@ export const WalletAction = styled.div`
       margin-left: 8px;
     }
   }
-`
+`;
 export const WalletActionOld = styled.section`
   border: solid 5px black;
   border-radius: 10px;
@@ -59,17 +58,17 @@ export const WalletActionOld = styled.section`
 
   margin: auto;
   height: 100%;
-  
+
   & h1:first-child {
-    margin-top: 0; 
+    margin-top: 0;
   }
-`
+`;
 
 export const DateSeparator = styled.div`
   color: gray;
-  margin: .2em;
+  margin: 0.2em;
   margin-top: 1em;
-`
+`;
 export const WalletBox = styled.div<{ noPadding?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -79,10 +78,10 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
     width: 400px;
   }
   & > section {
-    padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'};
-    padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'};
+    padding-left: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
+    padding-right: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
     // this margin will send the section up when used with a header
-    margin-bottom: auto; 
+    margin-bottom: auto;
     overflow: auto;
 
     table td {
@@ -128,13 +127,13 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
       margin-left: 8px;
     }
   }
-`
+`;
 export const Middle = styled.div`
-    justify-content: space-around;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-`
+  justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
 
 export const PopupBox = styled.div<{ noPadding?: boolean }>`
   height: 290px;
@@ -144,9 +143,9 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
   justify-content: space-between;
 
   & > section {
-    padding: ${({ noPadding }) => noPadding ? '0px' : '8px'};
+    padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
     // this margin will send the section up when used with a header
-    margin-bottom: auto; 
+    margin-bottom: auto;
     overflow-y: auto;
 
     table td {
@@ -201,8 +200,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
       margin-left: 8px;
     }
   }
-
-`
+`;
 
 export const Button = styled.button<{ upperCased?: boolean }>`
   display: inline-block;
@@ -214,7 +212,7 @@ export const Button = styled.button<{ upperCased?: boolean }>`
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
-  text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'};
+  text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")};
 
   font-family: inherit;
   font-size: 100%;
@@ -223,7 +221,7 @@ export const Button = styled.button<{ upperCased?: boolean }>`
   color: rgba(0, 0, 0, 0.8); /* rgba supported */
   border: 1px solid #999; /*IE 6/7/8*/
   border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
-  background-color: '#e6e6e6';
+  background-color: "#e6e6e6";
   text-decoration: none;
   border-radius: 2px;
 
@@ -263,7 +261,7 @@ export const Link = styled.a<{ upperCased?: boolean }>`
   cursor: pointer;
   user-select: none;
   box-sizing: border-box;
-  text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'};
+  text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")};
 
   font-family: inherit;
   font-size: 100%;
@@ -304,9 +302,9 @@ export const FontIcon = styled.div`
   text-align: center;
   font-weight: bold;
   /* vertical-align: text-top; */
-`
+`;
 export const ButtonBox = styled(Button)`
-  padding: .5em;
+  padding: 0.5em;
   width: fit-content;
   height: 2em;
 
@@ -322,89 +320,87 @@ export const ButtonBox = styled(Button)`
   border-radius: 4px;
   border-color: black;
   color: black;
-`
-
+`;
 
 const ButtonVariant = styled(Button)`
   color: white;
   border-radius: 4px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-`
+`;
 
 export const ButtonPrimary = styled(ButtonVariant)`
   background-color: rgb(66, 184, 221);
-`
+`;
 export const ButtonBoxPrimary = styled(ButtonBox)`
   color: rgb(66, 184, 221);
   border-color: rgb(66, 184, 221);
-`
+`;
 
 export const ButtonSuccess = styled(ButtonVariant)`
   background-color: #388e3c;
-`
+`;
 export const LinkSuccess = styled(Link)`
   color: #388e3c;
-`
+`;
 export const ButtonBoxSuccess = styled(ButtonBox)`
   color: #388e3c;
   border-color: #388e3c;
-`
+`;
 
 export const ButtonWarning = styled(ButtonVariant)`
   background-color: rgb(223, 117, 20);
-`
+`;
 export const LinkWarning = styled(Link)`
   color: rgb(223, 117, 20);
-`
+`;
 export const ButtonBoxWarning = styled(ButtonBox)`
   color: rgb(223, 117, 20);
   border-color: rgb(223, 117, 20);
-`
+`;
 
 export const ButtonDestructive = styled(ButtonVariant)`
   background-color: rgb(202, 60, 60);
-`
+`;
 export const ButtonBoxDestructive = styled(ButtonBox)`
   color: rgb(202, 60, 60);
   border-color: rgb(202, 60, 60);
-`
-
+`;
 
 export const BoldLight = styled.div`
-color: gray;
-font-weight: bold;
-`
+  color: gray;
+  font-weight: bold;
+`;
 export const Centered = styled.div`
   text-align: center;
   & > :not(:first-child) {
     margin-top: 15px;
   }
-`
+`;
 export const Row = styled.div`
   display: flex;
   margin: 0.5em 0;
   justify-content: space-between;
   padding: 0.5em;
-`
+`;
 
 export const Row2 = styled.div`
   display: flex;
   /* margin: 0.5em 0; */
   justify-content: space-between;
   padding: 0.5em;
-`
+`;
 
 export const Column = styled.div`
   display: flex;
   flex-direction: column;
   margin: 0em 1em;
   justify-content: space-between;
-`
+`;
 
 export const RowBorderGray = styled(Row)`
   border: 1px solid gray;
   /* border-radius: 0.5em; */
-`
+`;
 
 export const RowLightBorderGray = styled(Row2)`
   border: 1px solid lightgray;
@@ -414,7 +410,7 @@ export const RowLightBorderGray = styled(Row2)`
     border: 1px solid lightgray;
     background-color: red;
   }
-`
+`;
 
 export const HistoryRow = styled.a`
   text-decoration: none;
@@ -423,7 +419,7 @@ export const HistoryRow = styled.a`
   display: flex;
   justify-content: space-between;
   padding: 0.5em;
-  
+
   border: 1px solid lightgray;
   border-top: 0px;
 
@@ -439,7 +435,7 @@ export const HistoryRow = styled.a`
     margin-left: auto;
     align-self: center;
   }
-`
+`;
 
 export const ListOfProducts = styled.div`
   & > div > a > img {
@@ -453,62 +449,62 @@ export const ListOfProducts = styled.div`
     margin-right: auto;
     margin-left: 1em;
   }
-`
+`;
 
 export const LightText = styled.div`
   color: gray;
-`
+`;
 
 export const WarningText = styled.div`
   color: rgb(223, 117, 20);
-`
+`;
 
 export const SmallText = styled.div`
-  font-size: small; 
-`
+  font-size: small;
+`;
 export const LargeText = styled.div`
-  font-size: large; 
-`
+  font-size: large;
+`;
 
 export const ExtraLargeText = styled.div`
-  font-size: x-large; 
-`
+  font-size: x-large;
+`;
 
 export const SmallLightText = styled(SmallText)`
   color: gray;
-`
+`;
 
 export const CenteredText = styled.div`
   white-space: nowrap;
   text-align: center;
-`
+`;
 
 export const CenteredBoldText = styled(CenteredText)`
   white-space: nowrap;
   text-align: center;
   font-weight: bold;
   color: ${((props: any): any => String(props.color) as any) as any};
-`
+`;
 
 export const Input = styled.div<{ invalid?: boolean }>`
   & label {
     display: block;
     padding: 5px;
-    color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+    color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
   }
   & input {
     display: block;
     padding: 5px;
     width: calc(100% - 4px - 10px);
-    border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+    border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
   }
-`
+`;
 
 export const InputWithLabel = styled.div<{ invalid?: boolean }>`
   & label {
     display: block;
     padding: 5px;
-    color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+    color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
   }
   & > div {
     position: relative;
@@ -516,20 +512,20 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>`
     top: 0px;
     bottom: 0px;
 
-    &  > div {
+    & > div {
       position: absolute;
       background-color: lightgray;
       padding: 5px;
       margin: 2px;
     }
 
-    &  > input {
+    & > input {
       flex: 1;
-      padding: 5px; 
-      border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'}
+      padding: 5px;
+      border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")};
     }
   }
-`
+`;
 
 export const ErrorBox = styled.div`
   border: 2px solid #f5c6cb;
@@ -555,22 +551,22 @@ export const ErrorBox = styled.div`
       width: 28px;
     }
   }
-`
+`;
 
 export const SuccessBox = styled(ErrorBox)`
   color: #0f5132;
   background-color: #d1e7dd;
   border-color: #badbcc;
-`
+`;
 
 export const WarningBox = styled(ErrorBox)`
   color: #664d03;
   background-color: #fff3cd;
   border-color: #ffecb5;
-`
+`;
 
 export const PopupNavigation = styled.div<{ devMode?: boolean }>`
-  background-color:#0042b2;
+  background-color: #0042b2;
   height: 35px;
   justify-content: space-around;
   display: flex;
@@ -582,7 +578,7 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>`
   & > div > a {
     color: #f8faf7;
     display: inline-block;
-    width: calc(400px / ${({ devMode }) => !devMode ? 4 : 5});
+    width: calc(400px / ${({ devMode }) => (!devMode ? 4 : 5)});
     text-align: center;
     text-decoration: none;
     vertical-align: middle;
@@ -597,7 +593,6 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>`
 `;
 
 export const NiceSelect = styled.div`
-
   & > select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -617,19 +612,19 @@ export const NiceSelect = styled.div`
   display: flex;
   /* width: 10em; */
   overflow: hidden;
-  border-radius: .25em;
+  border-radius: 0.25em;
 
   &::after {
-    content: '\u25BC';
+    content: "\u25BC";
     position: absolute;
     top: 0;
     right: 0;
     padding: 0.5em 1em;
     cursor: pointer;
     pointer-events: none;
-    -webkit-transition: .25s all ease;
-    -o-transition: .25s all ease;
-    transition: .25s all ease;
+    -webkit-transition: 0.25s all ease;
+    -o-transition: 0.25s all ease;
+    transition: 0.25s all ease;
   }
 
   &:hover::after {
@@ -639,7 +634,7 @@ export const NiceSelect = styled.div`
   &::-ms-expand {
     display: none;
   }
-`
+`;
 
 export const Outlined = styled.div`
   border: 2px solid #388e3c;
@@ -647,13 +642,12 @@ export const Outlined = styled.div`
   width: fit-content;
   border-radius: 2px;
   color: #388e3c;
-`
+`;
 
 /* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */
 export const CheckboxSuccess = styled.input`
   vertical-align: center;
-
-`
+`;
 
 export const TermsSection = styled.a`
   border: 1px solid black;
@@ -664,13 +658,13 @@ export const TermsSection = styled.a`
   text-decoration: none;
   color: inherit;
   flex-direction: column;
-  
+
   display: flex;
   &[data-open="true"] {
-    display: flex; 
+    display: flex;
   }
   &[data-open="false"] > *:not(:first-child) {
-    display: none; 
+    display: none;
   }
 
   header {
@@ -681,11 +675,11 @@ export const TermsSection = styled.a`
     height: auto;
   }
 
-  &[data-open="true"] header:after  {
-    content: '\\2227';
+  &[data-open="true"] header:after {
+    content: "\\2227";
   }
-  &[data-open="false"] header:after  {
-    content: '\\2228';
+  &[data-open="false"] header:after {
+    content: "\\2228";
   }
 `;
 
@@ -712,13 +706,13 @@ export const TermsOfService = styled.div`
     padding: 1em;
     margin-top: 2px;
     margin-bottom: 2px;
-    
+
     display: flex;
     &[data-open="true"] {
-      display: flex; 
+      display: flex;
     }
     &[data-open="false"] > *:not(:first-child) {
-      display: none; 
+      display: none;
     }
 
     header {
@@ -729,22 +723,20 @@ export const TermsOfService = styled.div`
       height: auto;
     }
 
-    &[data-open="true"] > header:after  {
-      content: '\\2227';
+    &[data-open="true"] > header:after {
+      content: "\\2227";
     }
-    &[data-open="false"] > header:after  {
-      content: '\\2228';
+    &[data-open="false"] > header:after {
+      content: "\\2228";
     }
   }
-
-`
+`;
 export const StyledCheckboxLabel = styled.div`
   color: green;
   text-transform: uppercase;
   /* font-weight: bold; */
   text-align: center;
   span {
-
     input {
       display: none;
       opacity: 0;
@@ -758,7 +750,7 @@ export const StyledCheckboxLabel = styled.div`
       margin-right: 1em;
       border-radius: 2px;
       border: 2px solid currentColor;
-  
+
       svg {
         transition: transform 0.1s ease-in 25ms;
         transform: scale(0);
@@ -776,12 +768,11 @@ export const StyledCheckboxLabel = styled.div`
   }
   input:disabled + div {
     color: #959495;
-  };
+  }
   input:disabled + div + label {
     color: #959495;
-  };
+  }
   input:focus + div + label {
     box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor;
   }
-
-`
\ No newline at end of file
+`;