more ui

7 files changed, 193 insertions, 295 deletions

diff --git a/packages/demobank-ui/src/components/CopyButton.tsx b/packages/demobank-ui/src/components/CopyButton.tsx
index 97ccbf2bf..b36de770e 100644
--- a/packages/demobank-ui/src/components/CopyButton.tsx
+++ b/packages/demobank-ui/src/components/CopyButton.tsx
@@ -45,14 +45,14 @@ export function CopyButton({ getContent }: { getContent: () => string }): VNode
 
   if (!copied) {
     return (
-      <button class="text-white" onClick={copyText} style={{ width: 32, height: 32, fontSize: "initial" }}>
+      <button class="text-white" onClick={copyText} style={{ width: 16, height: 16, fontSize: "initial" }}>
         <CopyIcon />
       </button>
     );
   }
   return (
     <div class="text-white" content="Copied" style={{ display: "inline-block" }}>
-      <button disabled style={{ width: 32, height: 32, fontSize: "initial" }}>
+      <button disabled style={{ width: 16, height: 16, fontSize: "initial" }}>
         <CopiedIcon />
       </button>
     </div>
diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/components/Routing.tsx
index 2c532e863..890058a9b 100644
--- a/packages/demobank-ui/src/components/Routing.tsx
+++ b/packages/demobank-ui/src/components/Routing.tsx
@@ -24,12 +24,50 @@ import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js";
 import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js";
 import { RegistrationPage } from "../pages/RegistrationPage.js";
 import { Test } from "../pages/Test.js";
+import { useBackendContext } from "../context/backend.js";
+import { LoginForm } from "../pages/LoginForm.js";
+import { AdminPage } from "../pages/AdminPage.js";
 
 export function Routing(): VNode {
   const history = createHashHistory();
+  const backend = useBackendContext();
+
+  if (backend.state.status === "loggedOut") {
+    return <BankFrame
+      goToBusinessAccount={() => {
+        route("/business");
+      }}
+    >
+      <Router history={history}>
+        <Route
+          path="/login"
+          component={() => (
+            <LoginForm
+              onRegister={() => {
+                route("/register");
+              }}
+            />
+          )}
+        />
+        <Route
+          path="/register"
+          component={() => (
+            <RegistrationPage
+              onComplete={() => {
+                route("/account");
+              }}
+            />
+          )}
+        />
+        <Route default component={Redirect} to="/login" />
+      </Router>
+    </BankFrame>
+  }
+  const isAdmin = backend.state.isUserAdministrator
 
   return (
     <BankFrame
+      account={backend.state.username}
       goToBusinessAccount={() => {
         route("/business");
       }}
@@ -69,16 +107,24 @@ export function Routing(): VNode {
         />
         <Route
           path="/account"
-          component={() => (
-            <HomePage
-              onPendingOperationFound={(wopid) => {
-                route(`/operation/${wopid}`);
-              }}
-              onRegister={() => {
-                route("/register");
-              }}
-            />
-          )}
+          component={() => {
+            if (isAdmin) {
+              return <AdminPage
+                onRegister={() => {
+                  route("/register");
+                }}
+              />;
+            } else {
+              return <HomePage
+                onPendingOperationFound={(wopid) => {
+                  route(`/operation/${wopid}`);
+                }}
+                onRegister={() => {
+                  route("/register");
+                }}
+              />
+            }
+          }}
         />
         <Route
           path="/business"
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts
index 09c039055..d2a512b08 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -61,7 +61,7 @@ export function useComponentState({ account }: Props): State {
         return;
       }
 
-      const negative = anyItem.direction === "DBIT";
+      const negative = anyItem.direction === "DEBIT";
       const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban;
 
       let date = anyItem.date ? parseInt(anyItem.date, 10) : 0;
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index e682085ae..80a8224d4 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
@@ -25,6 +25,7 @@ import { bankUiSettings } from "../settings.js";
 import { useSettings } from "../hooks/settings.js";
 import { CopyButton, CopyIcon } from "../components/CopyButton.js";
 import logo from "../assets/logo-2021.svg";
+import { useAccountDetails } from "../hooks/access.js";
 
 const IS_PUBLIC_ACCOUNT_ENABLED = false;
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
@@ -63,7 +64,9 @@ function MaybeBusinessButton({
 export function BankFrame({
   children,
   goToBusinessAccount,
+  account,
 }: {
+  account: string | undefined,
   children: ComponentChildren;
   goToBusinessAccount?: () => void;
 }): VNode {
@@ -122,123 +125,118 @@ export function BankFrame({
         </div>
 
         {open &&
-          <Fragment>
-            <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"
-              onClick={() => {
-                setOpen(false)
-              }}>
-              <div class="fixed inset-0"></div>
-
-              <div class="fixed inset-0 overflow-hidden">
-                <div class="absolute inset-0 overflow-hidden">
-                  <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-                    <div class="pointer-events-auto w-screen max-w-md" >
-                      <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl" onClick={(e) => {
-                        //do not trigger close if clicking inside the sidebar
-                        e.stopPropagation();
-                      }}>
-                        <div class="px-4 sm:px-6" >
-                          <div class="flex items-start justify-between" >
-                            <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">
-                              <i18n.Translate>Settings</i18n.Translate>
-                            </h2>
-                            <div class="ml-3 flex h-7 items-center">
-                              <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                                onClick={(e) => {
-                                  setOpen(false)
-                                }}
-
-                              >
-                                <span class="absolute -inset-2.5"></span>
-                                <span class="sr-only">
-                                  <i18n.Translate>Close panel</i18n.Translate>
-                                </span>
-                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-                                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                              </button>
-                            </div>
+          <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"
+            onClick={() => {
+              setOpen(false)
+            }}>
+            <div class="fixed inset-0"></div>
+
+            <div class="fixed inset-0 overflow-hidden">
+              <div class="absolute inset-0 overflow-hidden">
+                <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+                  <div class="pointer-events-auto w-screen max-w-md" >
+                    <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl" onClick={(e) => {
+                      //do not trigger close if clicking inside the sidebar
+                      e.stopPropagation();
+                    }}>
+                      <div class="px-4 sm:px-6" >
+                        <div class="flex items-start justify-between" >
+                          <h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">
+                            <i18n.Translate>Preferences</i18n.Translate>
+                          </h2>
+                          <div class="ml-3 flex h-7 items-center">
+                            <button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                              onClick={(e) => {
+                                setOpen(false)
+                              }}
+
+                            >
+                              <span class="absolute -inset-2.5"></span>
+                              <span class="sr-only">
+                                <i18n.Translate>Close panel</i18n.Translate>
+                              </span>
+                              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                              </svg>
+                            </button>
                           </div>
                         </div>
-                        <div class="relative mt-6 flex-1 px-4 sm:px-6">
-                          {/* <!-- Your content --> */}
-
-                          <nav class="flex flex-1 flex-col" aria-label="Sidebar">
-                            <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                              <li>
-                                <ul role="list" class="-mx-2 space-y-1">
-                                  <li>
-                                    <a href="#"
-                                      class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
-                                      onClick={() => {
-                                        backend.logOut();
-                                        setOpen(false)
-                                        updateSettings("currentWithdrawalOperationId", undefined);
-                                      }}
-                                    >
-                                      <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-                                      </svg>
-                                      Log out
-                                      {/* <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">5</span> */}
-                                    </a>
-                                  </li>
-                                  <li>
-                                    <div class="flex items-center justify-between">
-                                      <span class="flex flex-grow flex-col">
-                                        <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-                                          <i18n.Translate>Show withdrawal confirmation</i18n.Translate>
-                                        </span>
+                      </div>
+                      <div class="relative mt-6 flex-1 px-4 sm:px-6">
+                        <nav class="flex flex-1 flex-col" aria-label="Sidebar">
+                          <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                            <li>
+                              <ul role="list" class="-mx-2 space-y-1">
+                                <li>
+                                  <a href="#"
+                                    class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                                    onClick={() => {
+                                      backend.logOut();
+                                      setOpen(false)
+                                      updateSettings("currentWithdrawalOperationId", undefined);
+                                    }}
+                                  >
+                                    <svg class="h-6 w-6 shrink-0 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+                                    </svg>
+                                    Log out
+                                    {/* <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">5</span> */}
+                                  </a>
+                                </li>
+                                <li>
+                                  <div class="flex items-center justify-between">
+                                    <span class="flex flex-grow flex-col">
+                                      <span class="text-sm text-black font-medium leading-6 " id="availability-label">
+                                        <i18n.Translate>Show withdrawal confirmation</i18n.Translate>
                                       </span>
-                                      <button type="button" data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
-
-                                        onClick={() => {
-                                          console.log(settings.showWithdrawalSuccess)
-                                          updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
-                                        }}>
-                                        <span aria-hidden="true" data-enabled={settings.showWithdrawalSuccess} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
-                                      </button>
-                                    </div>
-                                  </li>
-                                </ul>
-                              </li>
-
-
-
-                              <li class="sm:hidden">
-                                <div class="text-xs font-semibold leading-6 text-gray-400">
-                                  <i18n.Translate>Sites</i18n.Translate>
-                                </div>
-                                <ul role="list" class="-mx-2 mt-2 space-y-1">
-                                  {bankUiSettings.demoSites.map(([name, url]) => {
-                                    return <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
-                                      <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">&gt;</span>
-                                      <span class="truncate">{name}</span>
-                                    </a>
-                                  })}
-                                </ul>
-                              </li>
-                            </ul>
-                          </nav>
-                        </div>
+                                    </span>
+                                    <button type="button" data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="availability-label" aria-describedby="availability-description"
+
+                                      onClick={() => {
+                                        console.log(settings.showWithdrawalSuccess)
+                                        updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
+                                      }}>
+                                      <span aria-hidden="true" data-enabled={settings.showWithdrawalSuccess} class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
+                                    </button>
+                                  </div>
+                                </li>
+                              </ul>
+                            </li>
+
+
+
+                            <li class="sm:hidden">
+                              <div class="text-xs font-semibold leading-6 text-gray-400">
+                                <i18n.Translate>Sites</i18n.Translate>
+                              </div>
+                              <ul role="list" class="-mx-2 mt-2 space-y-1">
+                                {bankUiSettings.demoSites.map(([name, url]) => {
+                                  return <a href={url} target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
+                                    <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600 group-hover:text-indigo-600">&gt;</span>
+                                    <span class="truncate">{name}</span>
+                                  </a>
+                                })}
+                              </ul>
+                            </li>
+                          </ul>
+                        </nav>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-
-          </Fragment>
+          </div>
         }
       </nav >
 
-      {true &&
+      {account &&
         <header class="py-5 border-t border-indigo-300 border-opacity-25 bg-indigo-600 lg:border-t lg:border-indigo-400 lg:border-opacity-25">
           <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
             <div class=" flex flex-wrap items-center justify-between sm:flex-nowrap">
-              <h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount /></h3>
+              <h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount account={account} /></h3>
               <div>
-                <h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance /></h3>
+                <h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance account={account} /></h3>
               </div>
             </div>
           </div>
@@ -466,17 +464,30 @@ function Footer() {
   );
 }
 
-function WelcomeAccount(): VNode {
+function WelcomeAccount({ account }: { account: string }): VNode {
   const { i18n } = useTranslationContext();
-  const account = "Sebastian"
-  const payto: PaytoUriIBAN = parsePaytoUri("payto://iban/bank.localhost/DE955922") as PaytoUriIBAN
+
+  const result = useAccountDetails(account);
+  if (!result.ok) return <div />
+
+  // const account = "Sebastian"
+  const payto = parsePaytoUri(result.data.paytoUri)
+  if (!payto) return <div />
+
+  const accountNumber = !payto.isKnown ? undefined : payto.targetType === "iban" ? payto.iban : payto.targetType === "x-taler-bank" ? payto.account : undefined;
   return <i18n.Translate>
-    Welcome,  {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} />
+    Welcome,  {account} {accountNumber !== undefined ?
+      <span>
+        (<a href={result.data.paytoUri}>{accountNumber}</a> <CopyButton getContent={() => result.data.paytoUri} />)
+      </span>
+      : <Fragment />}!
   </i18n.Translate>
 
 }
 
-function AccountBalance(): VNode {
+function AccountBalance({ account }: { account: string }): VNode {
+  const result = useAccountDetails(account);
+  if (!result.ok) return <div />
 
-  return <div>KUDOS 100.00</div>
+  return <div>{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} {Amounts.currencyOf(result.data.balance.amount)} {Amounts.stringifyValue(result.data.balance.amount)}</div>
 }
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 5e0624cbf..cdaf363e3 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -151,7 +151,7 @@ export function PaytoWireTransferForm({
             ? error.message
             : JSON.stringify(error)) as TranslatedString
         )
-}
+      }
     }
 
   }
@@ -160,8 +160,7 @@ export function PaytoWireTransferForm({
     <div class="px-4 sm:px-0">
       <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Transfer details</i18n.Translate></h2>
       <div>
-        <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
-          {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
+        <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-1 sm:gap-x-4">
           <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (!isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
             <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onChange={() => {
               setIsRawPayto(false)
@@ -169,14 +168,12 @@ export function PaytoWireTransferForm({
             <span class="flex flex-1">
               <span class="flex flex-col">
                 <span class="block text-sm  font-medium text-gray-900">
-                  <i18n.Translate>form</i18n.Translate>
+                  <i18n.Translate>using a form</i18n.Translate>
                 </span>
               </span>
             </span>
           </label>
 
-
-          {/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
           <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
             <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onChange={() => {
               setIsRawPayto(true)
@@ -184,7 +181,7 @@ export function PaytoWireTransferForm({
             <span class="flex flex-1">
               <span class="flex flex-col">
                 <span class="block text-sm  font-medium text-gray-900">
-                  <i18n.Translate>payto://</i18n.Translate>
+                  <i18n.Translate>using the payto:// format</i18n.Translate>
                 </span>
               </span>
             </span>
@@ -325,107 +322,7 @@ export function PaytoWireTransferForm({
     </form>
   </div >
   )
-  // }
-  // return (
-  //   <div>
-  //     <form
-  //       class="pure-form"
-  //       name="wire-transfer-form"
-  //       onSubmit={(e) => {
-  //         e.preventDefault();
-  //       }}
-  //     >
-  //       <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
-
-  //       <label for="subject">{i18n.str`Transfer subject:`}</label>&nbsp;
-
-  //       <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
-  //       <div style={{ width: "max-content", display: "flex" }}>
-  //         <input
-  //           type="text"
-  //           readonly
-  //           class="currency-indicator"
-  //           size={limit.currency.length}
-  //           maxLength={limit.currency.length}
-  //           tabIndex={-1}
-  //           style={{
-  //             borderTopRightRadius: 0,
-  //             borderBottomRightRadius: 0,
-  //             borderRight: 0,
-  //           }}
-  //           value={limit.currency}
-  //         />
-  //         <input
-  //           type="number"
-  //           name="amount"
-  //           id="amount"
-  //           placeholder="amount"
-  //           required
-  //           style={{
-  //             borderTopLeftRadius: 0,
-  //             borderBottomLeftRadius: 0,
-  //             borderLeft: 0,
-  //             width: 150,
-  //           }}
-  //           value={amount ?? ""}
-  //           onInput={(e): void => {
-  //             setAmount(e.currentTarget.value);
-  //           }}
-  //         />
-  //       </div>
-  //       <ShowInputErrorLabel
-  //         message={errorsWire?.amount}
-  //         isDirty={amount !== undefined}
-  //       />
-  //       <p style={{ display: "flex", justifyContent: "space-between" }}>
-  //         <input
-  //           type="submit"
-  //           class="pure-button pure-button-primary"
-  //           disabled={!!errorsWire}
-  //           value="Send"
-  //           onClick={async (e) => {
-  //             e.preventDefault();
-  //             if (!(iban && subject && amount)) {
-  //               return;
-  //             }
-
-  //           }}
-  //         />
-  //         <input
-  //           type="button"
-  //           class="pure-button"
-  //           value="Clear"
-  //           onClick={async (e) => {
-  //             e.preventDefault();
-  //             setAmount(undefined);
-  //             setIban(undefined);
-  //             setSubject(undefined);
-  //           }}
-  //         />
-  //       </p>
-  //     </form>
-  //     <p>
-  //       <a
-  //         href="#"
-  //         onClick={(e) => {
-  //           setIsRawPayto(true);
-  //           e.preventDefault();
-  //         }}
-  //       >
-  //         {i18n.str`Want to try the raw payto://-format?`}
-  //       </a>
-  //     </p>
-  //   </div>
-  // );
-
-
-
-  // return (
-  //   <div>
-  //     <p>{i18n.str`Transfer money to account identified by payto:// URI:`}</p>
 
-  //   </div>
-  // );
 }
 export function Amount(
   {
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 6574ec934..8c41f7576 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -78,6 +78,7 @@ export function WalletWithdrawForm({
   async function doStart() {
     if (!parsedAmount) return;
     try {
+      console.log("ASDASD")
       const result = await createWithdrawal({
         amount: Amounts.stringify(parsedAmount),
       });
@@ -106,7 +107,7 @@ export function WalletWithdrawForm({
             ? error.message
             : JSON.stringify(error)) as TranslatedString
         )
-}
+      }
     }
 
   }
@@ -115,7 +116,7 @@ export function WalletWithdrawForm({
     <div class="px-4 sm:px-0">
       <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Prepare your wallet</i18n.Translate></h2>
       <p class="mt-1 text-sm text-gray-500">
-        <i18n.Translate>Upon starting you will receive the money in your digital wallet, if you don't have one please <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">install one from here</a></i18n.Translate>.
+        <i18n.Translate>Upon starting you will receive the money in your digital wallet, if you don't have one please <a target="_blank" rel="noreferrer noopener" class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">install one from here</a></i18n.Translate>.
       </p>
       <p class="mt-1 text-sm text-gray-500">
         <i18n.Translate>After using your wallet you will be redirected here to confirm or cancel the operation.</i18n.Translate>
@@ -147,7 +148,7 @@ export function WalletWithdrawForm({
           <div class="sm:col-span-5">
             <span class="isolate inline-flex rounded-md shadow-sm">
               <button type="button"
-                class="relative               inline-flex px-3 py-2 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                class="relative               inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
                 onClick={(e) => {
                   e.preventDefault();
                   setAmountStr("50.00")
@@ -156,7 +157,7 @@ export function WalletWithdrawForm({
                 50.00
               </button>
               <button type="button"
-                class="relative -ml-px -mr-px inline-flex px-3 py-2 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
                 onClick={(e) => {
                   e.preventDefault();
                   setAmountStr("25.00")
@@ -166,7 +167,7 @@ export function WalletWithdrawForm({
                 25.00
               </button>
               <button type="button"
-                class="relative -ml-px -mr-px inline-flex px-3 py-2 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center              bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
                 onClick={(e) => {
                   e.preventDefault();
                   setAmountStr("10.00")
@@ -175,7 +176,7 @@ export function WalletWithdrawForm({
                 10.00
               </button>
               <button type="button"
-                class="relative               inline-flex px-3 py-2 text-sm items-center rounded-r-md bg-white  text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+                class="relative               inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white  text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
                 onClick={(e) => {
                   e.preventDefault();
                   setAmountStr("5.00")
@@ -210,60 +211,3 @@ export function WalletWithdrawForm({
   );
 }
 
-// export function Amount(
-//   {
-//     currency,
-//     value,
-//     error,
-//     onChange,
-//   }: {
-//     error?: string;
-//     currency: string;
-//     value: string | undefined;
-//     onChange?: (s: string) => void;
-//   },
-//   ref: Ref<HTMLInputElement>,
-// ): VNode {
-//   return (
-//     <div style={{ width: "max-content" }}>
-//       <div>
-//         <input
-//           type="text"
-//           readonly
-//           class="currency-indicator"
-//           size={currency.length}
-//           maxLength={currency.length}
-//           tabIndex={-1}
-//           style={{
-//             borderTopRightRadius: 0,
-//             borderBottomRightRadius: 0,
-//             borderRight: 0,
-//           }}
-//           value={currency}
-//         />
-//         <input
-//           type="number"
-//           ref={ref}
-//           name="amount"
-//           id="amount"
-//           placeholder="0"
-//           style={{
-//             borderTopLeftRadius: 0,
-//             borderBottomLeftRadius: 0,
-//             borderLeft: 0,
-//             width: 150,
-//             color: "black",
-//           }}
-//           value={value ?? ""}
-//           disabled={!onChange}
-//           onInput={(e): void => {
-//             if (onChange) {
-//               onChange(e.currentTarget.value);
-//             }
-//           }}
-//         />
-//       </div>
-//       <ShowInputErrorLabel message={error} isDirty={value !== undefined} />
-//     </div>
-//   );
-// }
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 80e7a78ac..ced152feb 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -143,7 +143,7 @@ export function WithdrawalConfirmationQuestion({
     <Fragment>
       <div class="bg-white shadow sm:rounded-lg">
         <div class="px-4 py-5 sm:p-6">
-          <h3 class="text-base font-semibold leading-6 text-gray-900">
+          <h3 class="text-base font-semibold text-gray-900">
             <i18n.Translate>Confirm the withdrawal operation</i18n.Translate>
           </h3>
           <div class="mt-2 max-w-xl text-sm text-gray-500">
@@ -203,7 +203,7 @@ export function WithdrawalConfirmationQuestion({
 
             <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
               <div class="px-4 sm:px-0">
-                <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2>
+                <h2 class="text-base font-semibold text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2>
               </div>
               <form
                 class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
@@ -264,7 +264,7 @@ export function WithdrawalConfirmationQuestion({
           </div>
           <div class="px-4 mt-4 ">
             <div class="w-full">
-              <div class="px-4 sm:px-0">
+              <div class="px-4 sm:px-0 text-sm">
                 <p><i18n.Translate>Wire transfer details</i18n.Translate></p>
               </div>
               <div class="mt-6 border-t border-gray-100">
@@ -313,7 +313,7 @@ export function WithdrawalConfirmationQuestion({
                   })()}
                   <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                     <dt class="text-sm font-medium leading-6 text-gray-900">Withdrawal identification</dt>
-                    <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{details.reserve}</dd>
+                    <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0 break-words">{details.reserve}</dd>
                   </div>
                   <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                     <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt>