pretty

17 files changed, 206 insertions, 238 deletions

diff --git a/packages/demobank-ui/src/components/AsyncButton.tsx b/packages/demobank-ui/src/components/AsyncButton.tsx
index 0c4305668..eec11f4a1 100644
--- a/packages/demobank-ui/src/components/AsyncButton.tsx
+++ b/packages/demobank-ui/src/components/AsyncButton.tsx
@@ -19,10 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { ComponentChildren, h, VNode } from 'preact';
-import { useLayoutEffect, useRef } from 'preact/hooks';
+import { ComponentChildren, h, VNode } from "preact";
+import { useLayoutEffect, useRef } from "preact/hooks";
 // import { LoadingModal } from "../modal";
-import { useAsync } from '../hooks/async';
+import { useAsync } from "../hooks/async";
 // import { Translate } from "../../i18n";
 
 type Props = {
@@ -44,20 +44,16 @@ export function AsyncButton({
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   useLayoutEffect(() => {
-    if (grabFocus) 
-      buttonRef.current?.focus();
-    
+    if (grabFocus) buttonRef.current?.focus();
   }, [grabFocus]);
 
   // if (isSlow) {
   //   return <LoadingModal onCancel={cancel} />;
   // }
-  if (isLoading) 
-    return <button class="button">Loading...</button>;
-  
+  if (isLoading) return <button class="button">Loading...</button>;
 
   return (
-    <span data-tooltip={rest['data-tooltip']} style={{ marginLeft: 5 }}>
+    <span data-tooltip={rest["data-tooltip"]} style={{ marginLeft: 5 }}>
       <button {...rest} ref={buttonRef} onClick={request} disabled={disabled}>
         {children}
       </button>
diff --git a/packages/demobank-ui/src/components/FileButton.tsx b/packages/demobank-ui/src/components/FileButton.tsx
index dba86ccbf..7fad7f03a 100644
--- a/packages/demobank-ui/src/components/FileButton.tsx
+++ b/packages/demobank-ui/src/components/FileButton.tsx
@@ -1,5 +1,5 @@
-import { h, VNode } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useRef, useState } from "preact/hooks";
 
 const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
@@ -23,13 +23,12 @@ export function FileButton(props: Props): VNode {
       </button>
       <input
         ref={fileInputRef}
-        style={{ display: 'none' }}
+        style={{ display: "none" }}
         type="file"
         onChange={(e) => {
           const f: FileList | null = e.currentTarget.files;
-          if (!f || f.length != 1) 
-            return props.onChange(undefined);
-          
+          if (!f || f.length != 1) return props.onChange(undefined);
+
           console.log(f);
           if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
             setSizeError(true);
@@ -39,7 +38,7 @@ export function FileButton(props: Props): VNode {
           return f[0].arrayBuffer().then((b) => {
             const content = new Uint8Array(b).reduce(
               (data, byte) => data + String.fromCharCode(byte),
-              '',
+              "",
             );
             return props.onChange({
               content,
diff --git a/packages/demobank-ui/src/components/Notifications.tsx b/packages/demobank-ui/src/components/Notifications.tsx
index 09329442a..e34550386 100644
--- a/packages/demobank-ui/src/components/Notifications.tsx
+++ b/packages/demobank-ui/src/components/Notifications.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
+import { h, VNode } from "preact";
 
 export interface Notification {
   message: string;
@@ -27,7 +27,7 @@ export interface Notification {
   type: MessageType;
 }
 
-export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS';
+export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
 
 interface Props {
   notifications: Notification[];
@@ -36,16 +36,16 @@ interface Props {
 
 function messageStyle(type: MessageType): string {
   switch (type) {
-  case 'INFO':
-    return 'message is-info';
-  case 'WARN':
-    return 'message is-warning';
-  case 'ERROR':
-    return 'message is-danger';
-  case 'SUCCESS':
-    return 'message is-success';
-  default:
-    return 'message';
+    case "INFO":
+      return "message is-info";
+    case "WARN":
+      return "message is-warning";
+    case "ERROR":
+      return "message is-danger";
+    case "SUCCESS":
+      return "message is-success";
+    default:
+      return "message";
   }
 }
 
diff --git a/packages/demobank-ui/src/components/QR.tsx b/packages/demobank-ui/src/components/QR.tsx
index ee5b73c69..f154ddebe 100644
--- a/packages/demobank-ui/src/components/QR.tsx
+++ b/packages/demobank-ui/src/components/QR.tsx
@@ -14,14 +14,14 @@
  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';
+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(() => {
-    const qr = qrcode(0, 'L');
+    const qr = qrcode(0, "L");
     qr.addData(text);
     qr.make();
     if (divRef.current)
@@ -33,14 +33,14 @@ export function QR({ text }: { text: string }): VNode {
   return (
     <div
       style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'left',
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "left",
       }}
     >
       <div
-        style={{ width: '50%', minWidth: 200, maxWidth: 300 }}
+        style={{ width: "50%", minWidth: 200, maxWidth: 300 }}
         ref={divRef}
       />
     </div>
diff --git a/packages/demobank-ui/src/components/fields/DateInput.tsx b/packages/demobank-ui/src/components/fields/DateInput.tsx
index 06ec4b6a7..22a83c93c 100644
--- a/packages/demobank-ui/src/components/fields/DateInput.tsx
+++ b/packages/demobank-ui/src/components/fields/DateInput.tsx
@@ -1,7 +1,7 @@
-import { format, subYears } from 'date-fns';
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
-import { DatePicker } from '../picker/DatePicker';
+import { format, subYears } from "date-fns";
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import { DatePicker } from "../picker/DatePicker";
 
 export interface DateInputProps {
   label: string;
@@ -16,13 +16,11 @@ export interface DateInputProps {
 export function DateInput(props: DateInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
   const [opened, setOpened] = useState(false);
 
-  const value = props.bind[0] || '';
+  const value = props.bind[0] || "";
   const [dirty, setDirty] = useState(false);
   const showError = dirty && props.error;
 
@@ -43,12 +41,10 @@ export function DateInput(props: DateInputProps): VNode {
           <p class="control">
             <input
               type="text"
-              class={showError ? 'input is-danger' : 'input'}
+              class={showError ? "input is-danger" : "input"}
               value={value}
               onKeyPress={(e) => {
-                if (e.key === 'Enter' && props.onConfirm) 
-                  props.onConfirm()
-                
+                if (e.key === "Enter" && props.onConfirm) props.onConfirm();
               }}
               onInput={(e) => {
                 const text = e.currentTarget.value;
@@ -81,7 +77,7 @@ export function DateInput(props: DateInputProps): VNode {
         closeFunction={() => setOpened(false)}
         dateReceiver={(d) => {
           setDirty(true);
-          const v = format(d, 'yyyy-MM-dd');
+          const v = format(d, "yyyy-MM-dd");
           props.bind[1](v);
         }}
       />
diff --git a/packages/demobank-ui/src/components/fields/EmailInput.tsx b/packages/demobank-ui/src/components/fields/EmailInput.tsx
index 8b64264ed..2a22b26e8 100644
--- a/packages/demobank-ui/src/components/fields/EmailInput.tsx
+++ b/packages/demobank-ui/src/components/fields/EmailInput.tsx
@@ -1,5 +1,5 @@
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 export interface TextInputProps {
   label: string;
@@ -14,9 +14,7 @@ export interface TextInputProps {
 export function EmailInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
   const value = props.bind[0];
   const [dirty, setDirty] = useState(false);
@@ -37,18 +35,16 @@ export function EmailInput(props: TextInputProps): VNode {
           required
           placeholder={props.placeholder}
           type="email"
-          class={showError ? 'input is-danger' : 'input'}
+          class={showError ? "input is-danger" : "input"}
           onKeyPress={(e) => {
-            if (e.key === 'Enter' && props.onConfirm) 
-              props.onConfirm()
-            
+            if (e.key === "Enter" && props.onConfirm) props.onConfirm();
           }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
           }}
           ref={inputRef}
-          style={{ display: 'block' }}
+          style={{ display: "block" }}
         />
       </div>
       {showError && <p class="help is-danger">{props.error}</p>}
diff --git a/packages/demobank-ui/src/components/fields/FileInput.tsx b/packages/demobank-ui/src/components/fields/FileInput.tsx
index 17413b907..79cd76f30 100644
--- a/packages/demobank-ui/src/components/fields/FileInput.tsx
+++ b/packages/demobank-ui/src/components/fields/FileInput.tsx
@@ -18,8 +18,8 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
@@ -42,9 +42,7 @@ export interface FileInputProps {
 export function FileInput(props: FileInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -56,9 +54,7 @@ export function FileInput(props: FileInputProps): VNode {
           <div class="icon is-small ">
             <i class="mdi mdi-folder" />
           </div>
-          <span>
-            {props.label}
-          </span>
+          <span>{props.label}</span>
         </a>
         {props.tooltip && (
           <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
@@ -69,15 +65,14 @@ export function FileInput(props: FileInputProps): VNode {
       <div class="control">
         <input
           ref={fileInputRef}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           type="file"
           // name={String(name)}
           onChange={(e) => {
             const f: FileList | null = e.currentTarget.files;
-            if (!f || f.length != 1) 
-              return props.onChange(undefined);
-            
-            console.log(f)
+            if (!f || f.length != 1) return props.onChange(undefined);
+
+            console.log(f);
             if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
               setSizeError(true);
               return props.onChange(undefined);
@@ -87,10 +82,14 @@ export function FileInput(props: FileInputProps): VNode {
               const b64 = btoa(
                 new Uint8Array(b).reduce(
                   (data, byte) => data + String.fromCharCode(byte),
-                  '',
+                  "",
                 ),
               );
-              return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type});
+              return props.onChange({
+                content: `data:${f[0].type};base64,${b64}`,
+                name: f[0].name,
+                type: f[0].type,
+              });
             });
           }}
         />
diff --git a/packages/demobank-ui/src/components/fields/ImageInput.tsx b/packages/demobank-ui/src/components/fields/ImageInput.tsx
index 98457af21..c190de9a9 100644
--- a/packages/demobank-ui/src/components/fields/ImageInput.tsx
+++ b/packages/demobank-ui/src/components/fields/ImageInput.tsx
@@ -18,19 +18,17 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
-import emptyImage from '../../assets/empty.png';
-import { TextInputProps } from './TextInput';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+import emptyImage from "../../assets/empty.png";
+import { TextInputProps } from "./TextInput";
 
 const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024;
 
 export function ImageInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
 
   const value = props.bind[0];
@@ -59,14 +57,13 @@ export function ImageInput(props: TextInputProps): VNode {
         />
         <input
           ref={image}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           type="file"
           name={String(name)}
           onChange={(e) => {
             const f: FileList | null = e.currentTarget.files;
-            if (!f || f.length != 1) 
-              return onChange(emptyImage);
-            
+            if (!f || f.length != 1) return onChange(emptyImage);
+
             if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
               setSizeError(true);
               return onChange(emptyImage);
@@ -76,7 +73,7 @@ export function ImageInput(props: TextInputProps): VNode {
               const b64 = btoa(
                 new Uint8Array(b).reduce(
                   (data, byte) => data + String.fromCharCode(byte),
-                  '',
+                  "",
                 ),
               );
               return onChange(`data:${f[0].type};base64,${b64}` as any);
diff --git a/packages/demobank-ui/src/components/fields/NumberInput.tsx b/packages/demobank-ui/src/components/fields/NumberInput.tsx
index 881c61c57..1a54d24b6 100644
--- a/packages/demobank-ui/src/components/fields/NumberInput.tsx
+++ b/packages/demobank-ui/src/components/fields/NumberInput.tsx
@@ -1,5 +1,5 @@
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 export interface TextInputProps {
   label: string;
@@ -14,9 +14,7 @@ export interface TextInputProps {
 export function PhoneNumberInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (props.grabFocus) 
-      inputRef.current?.focus();
-    
+    if (props.grabFocus) inputRef.current?.focus();
   }, [props.grabFocus]);
   const value = props.bind[0];
   const [dirty, setDirty] = useState(false);
@@ -36,18 +34,16 @@ export function PhoneNumberInput(props: TextInputProps): VNode {
           value={value}
           type="tel"
           placeholder={props.placeholder}
-          class={showError ? 'input is-danger' : 'input'}
+          class={showError ? "input is-danger" : "input"}
           onKeyPress={(e) => {
-            if (e.key === 'Enter' && props.onConfirm) 
-              props.onConfirm()
-            
+            if (e.key === "Enter" && props.onConfirm) props.onConfirm();
           }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
           }}
           ref={inputRef}
-          style={{ display: 'block' }}
+          style={{ display: "block" }}
         />
       </div>
       {showError && <p class="help is-danger">{props.error}</p>}
diff --git a/packages/demobank-ui/src/components/fields/TextInput.tsx b/packages/demobank-ui/src/components/fields/TextInput.tsx
index 5cc9f32ad..cc7104cf5 100644
--- a/packages/demobank-ui/src/components/fields/TextInput.tsx
+++ b/packages/demobank-ui/src/components/fields/TextInput.tsx
@@ -1,8 +1,8 @@
-import { h, VNode } from 'preact';
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
 
 export interface TextInputProps {
-  inputType?: 'text' | 'number' | 'multiline' | 'password';
+  inputType?: "text" | "number" | "multiline" | "password";
   label: string;
   grabFocus?: boolean;
   disabled?: boolean;
@@ -16,13 +16,11 @@ export interface TextInputProps {
 const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
-    if (grabFocus) 
-      inputRef.current?.focus();
-    
+    if (grabFocus) inputRef.current?.focus();
   }, [grabFocus]);
 
-  return inputType === 'multiline' ? (
-    <textarea {...rest} rows={5} ref={inputRef} style={{ height: 'unset' }} />
+  return inputType === "multiline" ? (
+    <textarea {...rest} rows={5} ref={inputRef} style={{ height: "unset" }} />
   ) : (
     <input {...rest} type={inputType} ref={inputRef} />
   );
@@ -49,17 +47,15 @@ export function TextInput(props: TextInputProps): VNode {
           grabFocus={props.grabFocus}
           disabled={props.disabled}
           placeholder={props.placeholder}
-          class={showError ? 'input is-danger' : 'input'}
+          class={showError ? "input is-danger" : "input"}
           onKeyPress={(e: any) => {
-            if (e.key === 'Enter' && props.onConfirm) 
-              props.onConfirm();
-            
+            if (e.key === "Enter" && props.onConfirm) props.onConfirm();
           }}
           onInput={(e: any) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
           }}
-          style={{ display: 'block' }}
+          style={{ display: "block" }}
         />
       </div>
       {showError && <p class="help is-danger">{props.error}</p>}
diff --git a/packages/demobank-ui/src/components/menu/LangSelector.tsx b/packages/demobank-ui/src/components/menu/LangSelector.tsx
index 221237a5b..69d6ee64a 100644
--- a/packages/demobank-ui/src/components/menu/LangSelector.tsx
+++ b/packages/demobank-ui/src/components/menu/LangSelector.tsx
@@ -19,23 +19,23 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode, Fragment } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import langIcon from '../../assets/icons/languageicon.svg';
-import { useTranslationContext } from '../../context/translation';
-import { strings as messages } from '../../i18n/strings';
+import { h, VNode, Fragment } from "preact";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import langIcon from "../../assets/icons/languageicon.svg";
+import { useTranslationContext } from "../../context/translation";
+import { strings as messages } from "../../i18n/strings";
 
 type LangsNames = {
   [P in keyof typeof messages]: string;
 };
 
 const names: LangsNames = {
-  es: 'Español [es]',
-  en: 'English [en]',
-  fr: 'Français [fr]',
-  de: 'Deutsch [de]',
-  sv: 'Svenska [sv]',
-  it: 'Italiano [it]',
+  es: "Español [es]",
+  en: "English [en]",
+  fr: "Français [fr]",
+  de: "Deutsch [de]",
+  sv: "Svenska [sv]",
+  it: "Italiano [it]",
 };
 
 function getLangName(s: keyof LangsNames | string): string {
@@ -47,36 +47,38 @@ function getLangName(s: keyof LangsNames | string): string {
 export function LangSelectorLikePy(): VNode {
   const [updatingLang, setUpdatingLang] = useState(false);
   const { lang, changeLanguage } = useTranslationContext();
-  const [hidden, setHidden] = useState(true)
+  const [hidden, setHidden] = useState(true);
   useEffect(() => {
-    function bodyKeyPress(event:KeyboardEvent) {
-      if (event.code === 'Escape') 
-        setHidden(true);
-      
+    function bodyKeyPress(event: KeyboardEvent) {
+      if (event.code === "Escape") setHidden(true);
     }
-    function bodyOnClick(event:Event) {
+    function bodyOnClick(event: Event) {
       setHidden(true);
     }
-    document.body.addEventListener('click', bodyOnClick)
-    document.body.addEventListener('keydown', bodyKeyPress as any)
+    document.body.addEventListener("click", bodyOnClick);
+    document.body.addEventListener("keydown", bodyKeyPress as any);
     return () => {
-      document.body.removeEventListener('keydown', bodyKeyPress as any)
-      document.body.removeEventListener('click', bodyOnClick)
-    }
-  },[])
+      document.body.removeEventListener("keydown", bodyKeyPress as any);
+      document.body.removeEventListener("click", bodyOnClick);
+    };
+  }, []);
   return (
     <Fragment>
-      <button name="language" onClick={(ev) => {
-        setHidden(h => !h);
-        ev.stopPropagation();
-      }}>
+      <button
+        name="language"
+        onClick={(ev) => {
+          setHidden((h) => !h);
+          ev.stopPropagation();
+        }}
+      >
         {getLangName(lang)}
       </button>
-      <div id="lang" class={hidden ? 'hide' : ''}>
+      <div id="lang" class={hidden ? "hide" : ""}>
         <div style="position: relative; overflow: visible;">
           <div
             class="nav"
-            style="position: absolute; max-height: 60vh; overflow-y: scroll">
+            style="position: absolute; max-height: 60vh; overflow-y: scroll"
+          >
             {Object.keys(messages)
               .filter((l) => l !== lang)
               .map((l) => (
@@ -88,7 +90,8 @@ export function LangSelectorLikePy(): VNode {
                   onClick={() => {
                     changeLanguage(l);
                     setUpdatingLang(false);
-                  }}>
+                  }}
+                >
                   {getLangName(l)}
                 </a>
               ))}
diff --git a/packages/demobank-ui/src/components/menu/NavigationBar.tsx b/packages/demobank-ui/src/components/menu/NavigationBar.tsx
index 9e540213d..d344875eb 100644
--- a/packages/demobank-ui/src/components/menu/NavigationBar.tsx
+++ b/packages/demobank-ui/src/components/menu/NavigationBar.tsx
@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
-import logo from '../../assets/logo.jpeg';
-import { LangSelectorLikePy as LangSelector } from './LangSelector';
+import { h, VNode } from "preact";
+import logo from "../../assets/logo.jpeg";
+import { LangSelectorLikePy as LangSelector } from "./LangSelector";
 
 interface Props {
   onMobileMenu: () => void;
diff --git a/packages/demobank-ui/src/components/menu/SideBar.tsx b/packages/demobank-ui/src/components/menu/SideBar.tsx
index 7f9981a1c..d7833df5a 100644
--- a/packages/demobank-ui/src/components/menu/SideBar.tsx
+++ b/packages/demobank-ui/src/components/menu/SideBar.tsx
@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
-import { Translate } from '../../i18n';
+import { h, VNode } from "preact";
+import { Translate } from "../../i18n";
 
 interface Props {
   mobile?: boolean;
@@ -28,9 +28,9 @@ interface Props {
 
 export function Sidebar({ mobile }: Props): VNode {
   // const config = useConfigContext();
-  const config = { version: 'none' };
+  const config = { version: "none" };
   // FIXME: add replacement for __VERSION__ with the current version
-  const process = { env: { __VERSION__: '0.0.0' } };
+  const process = { env: { __VERSION__: "0.0.0" } };
 
   return (
     <aside class="aside is-placed-left is-expanded">
diff --git a/packages/demobank-ui/src/components/menu/index.tsx b/packages/demobank-ui/src/components/menu/index.tsx
index 07e1c5265..99d0f7646 100644
--- a/packages/demobank-ui/src/components/menu/index.tsx
+++ b/packages/demobank-ui/src/components/menu/index.tsx
@@ -14,11 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { ComponentChildren, Fragment, h, VNode } from 'preact';
-import Match from 'preact-router/match';
-import { useEffect, useState } from 'preact/hooks';
-import { NavigationBar } from './NavigationBar';
-import { Sidebar } from './SideBar';
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import Match from "preact-router/match";
+import { useEffect, useState } from "preact/hooks";
+import { NavigationBar } from "./NavigationBar";
+import { Sidebar } from "./SideBar";
 
 interface MenuProps {
   title: string;
@@ -47,7 +47,7 @@ export function Menu({ title }: MenuProps): VNode {
         return (
           <WithTitle title={titleWithSubtitle}>
             <div
-              class={mobileOpen ? 'has-aside-mobile-expanded' : ''}
+              class={mobileOpen ? "has-aside-mobile-expanded" : ""}
               onClick={() => setMobileOpen(false)}
             >
               <NavigationBar
@@ -82,11 +82,11 @@ export function NotificationCard({
         <div class="column is-12">
           <article
             class={
-              n.type === 'ERROR'
-                ? 'message is-danger'
-                : n.type === 'WARN'
-                  ? 'message is-warning'
-                  : 'message is-info'
+              n.type === "ERROR"
+                ? "message is-danger"
+                : n.type === "WARN"
+                ? "message is-warning"
+                : "message is-info"
             }
           >
             <div class="message-header">
@@ -132,4 +132,4 @@ export interface Notification {
 }
 
 export type ValueOrFunction<T> = T | ((p: T) => T);
-export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS';
+export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS";
diff --git a/packages/demobank-ui/src/components/picker/DatePicker.tsx b/packages/demobank-ui/src/components/picker/DatePicker.tsx
index 94dbc9458..ba53578ef 100644
--- a/packages/demobank-ui/src/components/picker/DatePicker.tsx
+++ b/packages/demobank-ui/src/components/picker/DatePicker.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, Component } from 'preact';
+import { h, Component } from "preact";
 
 interface Props {
   closeFunction?: () => void;
@@ -37,36 +37,36 @@ interface State {
 const now = new Date();
 
 const monthArrShortFull = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 const monthArrShort = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec',
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
 ];
 
-const dayArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const dayArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 const yearArr: number[] = [];
 
@@ -83,10 +83,10 @@ export class DatePicker extends Component<Props, State> {
   dayClicked(e: any) {
     const element = e.target; // the actual element clicked
 
-    if (element.innerHTML === '') return false; // don't continue if <span /> empty
+    if (element.innerHTML === "") return false; // don't continue if <span /> empty
 
     // get date from clicked element (gets attached when rendered)
-    const date = new Date(element.getAttribute('data-value'));
+    const date = new Date(element.getAttribute("data-value"));
 
     // update the state
     this.setState({ currentDate: date });
@@ -131,40 +131,37 @@ export class DatePicker extends Component<Props, State> {
    * Display previous month by updating state
    */
   displayPrevMonth() {
-    if (this.state.displayedMonth <= 0) 
+    if (this.state.displayedMonth <= 0)
       this.setState({
         displayedMonth: 11,
         displayedYear: this.state.displayedYear - 1,
       });
-    else 
+    else
       this.setState({
         displayedMonth: this.state.displayedMonth - 1,
       });
-    
   }
 
   /**
    * Display next month by updating state
    */
   displayNextMonth() {
-    if (this.state.displayedMonth >= 11) 
+    if (this.state.displayedMonth >= 11)
       this.setState({
         displayedMonth: 0,
         displayedYear: this.state.displayedYear + 1,
       });
-    else 
+    else
       this.setState({
         displayedMonth: this.state.displayedMonth + 1,
       });
-    
   }
 
   /**
    * Display the selected month (gets fired when clicking on the date string)
    */
   displaySelectedMonth() {
-    if (this.state.selectYearMode) 
-      this.toggleYearSelector();
+    if (this.state.selectYearMode) this.toggleYearSelector();
     else {
       if (!this.state.currentDate) return false;
       this.setState({
@@ -194,7 +191,7 @@ export class DatePicker extends Component<Props, State> {
     this.passDateToParent(this.state.currentDate);
   }
   passDateToParent(date: Date) {
-    if (typeof this.props.dateReceiver === 'function')
+    if (typeof this.props.dateReceiver === "function")
       this.props.dateReceiver(date);
     this.closeDatePicker();
   }
@@ -229,22 +226,18 @@ export class DatePicker extends Component<Props, State> {
   }
 
   render() {
-    const {
-      currentDate,
-      displayedMonth,
-      displayedYear,
-      selectYearMode,
-    } = this.state;
+    const { currentDate, displayedMonth, displayedYear, selectYearMode } =
+      this.state;
 
     return (
       <div>
-        <div class={`datePicker ${this.props.opened && 'datePicker--opened'}`}>
+        <div class={`datePicker ${this.props.opened && "datePicker--opened"}`}>
           <div class="datePicker--titles">
             <h3
               style={{
                 color: selectYearMode
-                  ? 'rgba(255,255,255,.87)'
-                  : 'rgba(255,255,255,.57)',
+                  ? "rgba(255,255,255,.87)"
+                  : "rgba(255,255,255,.57)",
               }}
               onClick={this.toggleYearSelector}
             >
@@ -253,12 +246,12 @@ export class DatePicker extends Component<Props, State> {
             <h2
               style={{
                 color: !selectYearMode
-                  ? 'rgba(255,255,255,.87)'
-                  : 'rgba(255,255,255,.57)',
+                  ? "rgba(255,255,255,.87)"
+                  : "rgba(255,255,255,.57)",
               }}
               onClick={this.displaySelectedMonth}
             >
-              {dayArr[currentDate.getDay()]},{' '}
+              {dayArr[currentDate.getDay()]},{" "}
               {monthArrShort[currentDate.getMonth()]} {currentDate.getDate()}
             </h2>
           </div>
@@ -267,7 +260,7 @@ export class DatePicker extends Component<Props, State> {
             <nav>
               <span onClick={this.displayPrevMonth} class="icon">
                 <i
-                  style={{ transform: 'rotate(180deg)' }}
+                  style={{ transform: "rotate(180deg)" }}
                   class="mdi mdi-forward"
                 />
               </span>
@@ -284,7 +277,7 @@ export class DatePicker extends Component<Props, State> {
             {!selectYearMode && (
               <div class="datePicker--calendar">
                 <div class="datePicker--dayNames">
-                  {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
+                  {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
                     <span key={i}>{day}</span>
                   ))}
                 </div>
@@ -309,8 +302,8 @@ export class DatePicker extends Component<Props, State> {
                       <span
                         key={day.day}
                         class={
-                          (day.today ? 'datePicker--today ' : '') +
-                          (selected ? 'datePicker--selected' : '')
+                          (day.today ? "datePicker--today " : "") +
+                          (selected ? "datePicker--selected" : "")
                         }
                         disabled={!day.date}
                         data-value={day.date}
@@ -328,7 +321,7 @@ export class DatePicker extends Component<Props, State> {
                 {(this.props.years || yearArr).map((year) => (
                   <span
                     key={year}
-                    class={year === displayedYear ? 'selected' : ''}
+                    class={year === displayedYear ? "selected" : ""}
                     onClick={this.changeDisplayedYear}
                   >
                     {year}
@@ -343,7 +336,7 @@ export class DatePicker extends Component<Props, State> {
           class="datePicker--background"
           onClick={this.closeDatePicker}
           style={{
-            display: this.props.opened ? 'block' : 'none',
+            display: this.props.opened ? "block" : "none",
           }}
         />
       </div>
@@ -351,6 +344,4 @@ export class DatePicker extends Component<Props, State> {
   }
 }
 
-for (let i = 2010; i <= now.getFullYear() + 10; i++) 
-  yearArr.push(i);
-
+for (let i = 2010; i <= now.getFullYear() + 10; i++) yearArr.push(i);
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
index 5e9930522..7f96cc15b 100644
--- a/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.stories.tsx
@@ -19,16 +19,16 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, FunctionalComponent } from 'preact';
-import { useState } from 'preact/hooks';
-import { DurationPicker as TestedComponent } from './DurationPicker';
+import { h, FunctionalComponent } from "preact";
+import { useState } from "preact/hooks";
+import { DurationPicker as TestedComponent } from "./DurationPicker";
 
 export default {
-  title: 'Components/Picker/Duration',
+  title: "Components/Picker/Duration",
   component: TestedComponent,
   argTypes: {
-    onCreate: { action: 'onCreate' },
-    goBack: { action: 'goBack' },
+    onCreate: { action: "onCreate" },
+    goBack: { action: "goBack" },
   },
 };
 
diff --git a/packages/demobank-ui/src/components/picker/DurationPicker.tsx b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
index 542ff2f01..94f2326bc 100644
--- a/packages/demobank-ui/src/components/picker/DurationPicker.tsx
+++ b/packages/demobank-ui/src/components/picker/DurationPicker.tsx
@@ -19,10 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { h, VNode } from 'preact';
-import { useState } from 'preact/hooks';
-import { useTranslator } from '../../i18n';
-import '../../scss/DurationPicker.scss';
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useTranslator } from "../../i18n";
+import "../../scss/DurationPicker.scss";
 
 export interface Props {
   hours?: boolean;
@@ -129,9 +129,9 @@ function InputNumber({
       }}
       style={{
         width: 50,
-        border: 'none',
-        fontSize: 'inherit',
-        background: 'inherit',
+        border: "none",
+        fontSize: "inherit",
+        background: "inherit",
       }}
     />
   );
@@ -157,7 +157,7 @@ function DurationColumn({
           <div class="rdp-cell" key={value - 2}>
             {onDecrease && (
               <button
-                style={{ width: '100%', textAlign: 'center', margin: 5 }}
+                style={{ width: "100%", textAlign: "center", margin: 5 }}
                 onClick={onDecrease}
               >
                 <span class="icon">
@@ -167,7 +167,7 @@ function DurationColumn({
             )}
           </div>
           <div class="rdp-cell" key={value - 1}>
-            {value > min ? toTwoDigitString(value - 1) : ''}
+            {value > min ? toTwoDigitString(value - 1) : ""}
           </div>
           <div class="rdp-cell rdp-center" key={value}>
             {onChange ? (
@@ -182,13 +182,13 @@ function DurationColumn({
           </div>
 
           <div class="rdp-cell" key={value + 1}>
-            {value < max ? toTwoDigitString(value + 1) : ''}
+            {value < max ? toTwoDigitString(value + 1) : ""}
           </div>
 
           <div class="rdp-cell" key={value + 2}>
             {onIncrease && (
               <button
-                style={{ width: '100%', textAlign: 'center', margin: 5 }}
+                style={{ width: "100%", textAlign: "center", margin: 5 }}
                 onClick={onIncrease}
               >
                 <span class="icon">
@@ -204,8 +204,7 @@ function DurationColumn({
 }
 
 function toTwoDigitString(n: number) {
-  if (n < 10) 
-    return `0${n}`;
-  
+  if (n < 10) return `0${n}`;
+
   return `${n}`;
 }