some fixes from the last QC meeting

18 files changed, 165 insertions, 161 deletions

diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index 1d63cc2cb..f4f6f66ba 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -49,7 +49,7 @@ export function ReadyView({
       <div class="sm:flex sm:items-center">
         <div class="sm:flex-auto">
           <h1 class="text-base font-semibold leading-6 text-gray-900">
-            <i18n.Translate>Latest transactions</i18n.Translate>
+            <i18n.Translate>Transactions history</i18n.Translate>
           </h1>
         </div>
       </div>
@@ -93,8 +93,8 @@ export function ReadyView({
                       item.when.t_ms === "never"
                         ? ""
                         : format(item.when.t_ms, "HH:mm:ss", {
-                            locale: dateLocale,
-                          });
+                          locale: dateLocale,
+                        });
                     return (
                       <tr
                         key={idx}
@@ -124,7 +124,7 @@ export function ReadyView({
                                 </span>
                               ) : (
                                 <span style={{ color: "grey" }}>
-                                  &lt;{i18n.str`invalid value`}&gt;
+                                  &lt;{i18n.str`Invalid value`}&gt;
                                 </span>
                               )}
                             </dd>
@@ -163,7 +163,7 @@ export function ReadyView({
                             />
                           ) : (
                             <span style={{ color: "grey" }}>
-                              &lt;{i18n.str`invalid value`}&gt;
+                              &lt;{i18n.str`Invalid value`}&gt;
                             </span>
                           )}
                         </td>
diff --git a/packages/demobank-ui/src/context/config.ts b/packages/demobank-ui/src/context/config.ts
index f2e37a15f..5d8a5c73f 100644
--- a/packages/demobank-ui/src/context/config.ts
+++ b/packages/demobank-ui/src/context/config.ts
@@ -134,7 +134,7 @@ export const BankCoreApiProvider = ({
       children: h(
         "div",
         {},
-        i18n.str`the bank backend is not supported. supported version "${checked.supported}", server version "${checked.result.version}"`,
+        i18n.str`The bank backend is not supported. Supported version "${checked.supported}", server version "${checked.result.version}"`,
       ),
     });
   }
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index a106f370d..35cb30065 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -86,9 +86,9 @@ export function BankFrame({
             backend.state.status !== "loggedIn"
               ? undefined
               : () => {
-                  backend.logOut();
-                  resetBankState();
-                }
+                backend.logOut();
+                resetBankState();
+              }
           }
           sites={
             !settings.topNavSites ? [] : Object.entries(settings.topNavSites)
@@ -174,16 +174,26 @@ export function BankFrame({
   );
 }
 
-function WelcomeAccount({ account: accountName }: { account: string }): VNode {
+function WelcomeAccount({ account }: { account: string }): VNode {
   const { i18n } = useTranslationContext();
+  const result = useAccountDetails(account)
+  if (!result) {
+    return <Loading />;
+  }
+  if (result instanceof TalerError) {
+    return <div />;
+  }
+  if (result.type === "fail") {
+    return <a href={privatePages.myAccountDetails.url({})} class="underline underline-offset-2" >
+      <i18n.Translate>Welcome</i18n.Translate>
+    </a>;
+  }
   return (
     <a
       href={privatePages.myAccountDetails.url({})}
       class="underline underline-offset-2"
     >
-      <i18n.Translate>
-        Welcome, <span class="whitespace-nowrap">{accountName}</span>
-      </i18n.Translate>
+      <i18n.Translate>Welcome, <span class="whitespace-nowrap">{result.body.name}</span></i18n.Translate>
     </a>
   );
 }
diff --git a/packages/demobank-ui/src/pages/DownloadStats.tsx b/packages/demobank-ui/src/pages/DownloadStats.tsx
index d149a0d9f..2a876d233 100644
--- a/packages/demobank-ui/src/pages/DownloadStats.tsx
+++ b/packages/demobank-ui/src/pages/DownloadStats.tsx
@@ -269,9 +269,7 @@ export function DownloadStats({ routeCancel }: Props): VNode {
                       class="text-sm text-black font-medium leading-6 "
                       id="availability-label"
                     >
-                      <i18n.Translate>
-                        Add previous metric for compare
-                      </i18n.Translate>
+                      <i18n.Translate>Add previous metric for compare</i18n.Translate>
                     </span>
                   </span>
                   <button
@@ -378,10 +376,7 @@ export function DownloadStats({ routeCancel }: Props): VNode {
               }}
             >
               <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">
-                <i18n.Translate>
-                  downloading...{" "}
-                  {Math.round((lastStep.step / lastStep.total) * 100)}
-                </i18n.Translate>
+                <i18n.Translate>downloading...{" "}{Math.round((lastStep.step / lastStep.total) * 100)}</i18n.Translate>
               </span>
             </div>
           </div>
@@ -397,9 +392,7 @@ export function DownloadStats({ routeCancel }: Props): VNode {
           download={"bank-stats.csv"}
         >
           <Attention title={i18n.str`Download completed`}>
-            <i18n.Translate>
-              click here to save the file in your computer
-            </i18n.Translate>
+            <i18n.Translate>Click here to save the file in your computer.</i18n.Translate>
           </Attention>
         </a>
       )}
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 83aaff9fa..9816972ac 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -153,7 +153,7 @@ export function LoginForm({
                 enterkeyhint="next"
                 placeholder="identification"
                 autocomplete="username"
-                title={i18n.str`username of the account`}
+                title={i18n.str`Username of the account`}
                 required
                 onInput={(e): void => {
                   setUsername(e.currentTarget.value);
@@ -185,7 +185,7 @@ export function LoginForm({
                 enterkeyhint="send"
                 value={password ?? ""}
                 placeholder="Password"
-                title={i18n.str`password of the account`}
+                title={i18n.str`Password of the account`}
                 required
                 onInput={(e): void => {
                   setPassword(e.currentTarget.value);
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index 51a6a17a9..9fa30cc41 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -47,7 +47,7 @@ function ShowOperationPendingTag({ woid, onOperationAlreadyCompleted }: { woid:
     >
       <circle cx="3" cy="3" r="3" />
     </svg>
-    <i18n.Translate>operation ready</i18n.Translate>
+    <i18n.Translate>Operation ready</i18n.Translate>
   </span>
 
 }
@@ -100,9 +100,7 @@ export function PaymentOptions({
                 <span class="flex">
                   <div class="text-4xl mr-4 my-auto">&#x1F4B5;</div>
                   <span class="grow self-center text-lg text-gray-900 align-middle text-center">
-                    <i18n.Translate>
-                      to a <b>Taler</b> wallet
-                    </i18n.Translate>
+                    <i18n.Translate>to a <b>Taler</b> wallet</i18n.Translate>
                   </span>
                   <svg
                     class="self-center flex-none h-5 w-5 text-indigo-600"
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 2259929e7..ffcf9eb8b 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -87,19 +87,19 @@ export function PaytoWireTransferForm({
 
   const errorsWire = undefinedIfEmpty({
     iban: !iban
-      ? i18n.str`required`
+      ? i18n.str`Required`
       : !IBAN_REGEX.test(iban)
         ? i18n.str`IBAN should have just uppercased letters and numbers`
         : validateIBAN(iban, i18n),
-    subject: !subject ? i18n.str`required` : undefined,
+    subject: !subject ? i18n.str`Required` : undefined,
     amount: !trimmedAmountStr
-      ? i18n.str`required`
+      ? i18n.str`Required`
       : !parsedAmount
-        ? i18n.str`not valid`
+        ? i18n.str`Not valid`
         : Amounts.isZero(parsedAmount)
-          ? i18n.str`should be greater than 0`
+          ? i18n.str`Should be greater than 0`
           : Amounts.cmp(limit, parsedAmount) === -1
-            ? i18n.str`balance is not enough`
+            ? i18n.str`Balance is not enough`
             : undefined,
   });
 
@@ -107,17 +107,17 @@ export function PaytoWireTransferForm({
 
   const errorsPayto = undefinedIfEmpty({
     rawPaytoInput: !rawPaytoInput
-      ? i18n.str`required`
+      ? i18n.str`Required`
       : !parsed
-        ? i18n.str`does not follow the pattern`
+        ? i18n.str`Does not follow the pattern`
         : !parsed.isKnown || parsed.targetType !== "iban"
-          ? i18n.str`only "IBAN" target are supported`
+          ? i18n.str`Only "IBAN" target are supported`
           : !parsed.params.amount
-            ? i18n.str`use the "amount" parameter to specify the amount to be transferred`
+            ? i18n.str`Use the "amount" parameter to specify the amount to be transferred`
             : Amounts.parse(parsed.params.amount) === undefined
-              ? i18n.str`the amount is not valid`
+              ? i18n.str`The amount is not valid`
               : !parsed.params.message
-                ? i18n.str`use the "message" parameter to specify a reference text for the transfer`
+                ? i18n.str`Use the "message" parameter to specify a reference text for the transfer`
                 : !IBAN_REGEX.test(parsed.iban)
                   ? i18n.str`IBAN should have just uppercased letters and numbers`
                   : validateIBAN(parsed.iban, i18n),
@@ -356,9 +356,7 @@ export function PaytoWireTransferForm({
                   />
                 </div>
                 <p class="mt-2 text-sm text-gray-500">
-                  <i18n.Translate>
-                    IBAN of the recipient's account
-                  </i18n.Translate>
+                  <i18n.Translate>IBAN of the recipient's account</i18n.Translate>
                 </p>
               </div>
 
@@ -374,7 +372,7 @@ export function PaytoWireTransferForm({
                     name="subject"
                     id="subject"
                     autocomplete="off"
-                    placeholder={i18n.str`subject`}
+                    placeholder={i18n.str`Subject`}
                     value={subject ?? ""}
                     required
                     onInput={(e): void => {
@@ -387,9 +385,7 @@ export function PaytoWireTransferForm({
                   />
                 </div>
                 <p class="mt-2 text-sm text-gray-500">
-                  <i18n.Translate>
-                    some text to identify the transfer
-                  </i18n.Translate>
+                  <i18n.Translate>Some text to identify the transfer</i18n.Translate>
                 </p>
               </div>
 
@@ -412,7 +408,7 @@ export function PaytoWireTransferForm({
                   isDirty={trimmedAmountStr !== undefined}
                 />
                 <p class="mt-2 text-sm text-gray-500">
-                  <i18n.Translate>amount to transfer</i18n.Translate>
+                  <i18n.Translate>Amount to transfer</i18n.Translate>
                 </p>
               </div>
             </div>
@@ -422,7 +418,7 @@ export function PaytoWireTransferForm({
                 <label
                   for="address"
                   class="block text-sm font-medium leading-6 text-gray-900"
-                >{i18n.str`payto URI:`}</label>
+                >{i18n.str`Payto URI:`}</label>
                 <div class="mt-2">
                   <textarea
                     ref={focus ? doAutoFocus : undefined}
@@ -433,7 +429,7 @@ export function PaytoWireTransferForm({
                     class="block overflow-hidden w-44 sm:w-96 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                     value={rawPaytoInput ?? ""}
                     required
-                    title={i18n.str`uniform resource identifier of the target account`}
+                    title={i18n.str`Uniform resource identifier of the target account`}
                     placeholder={i18n.str`payto://iban/[receiver-iban]?message=[subject]&amount=[${limit.currency}:X.Y]`}
                     onInput={(e): void => {
                       rawPaytoInputSetter(e.currentTarget.value);
@@ -538,13 +534,13 @@ export function InputAmount(
             if (
               sep_pos !== -1 &&
               l - sep_pos - 1 >
-                config.currency_specification.num_fractional_input_digits
+              config.currency_specification.num_fractional_input_digits
             ) {
               e.currentTarget.value = e.currentTarget.value.substring(
                 0,
                 sep_pos +
-                  config.currency_specification.num_fractional_input_digits +
-                  1,
+                config.currency_specification.num_fractional_input_digits +
+                1,
               );
             }
             onChange(e.currentTarget.value);
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index 931a9b700..cbf5758aa 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -218,7 +218,7 @@ function RegistrationForm({
       ? "123"
       : getRandomPassword();
     const username = `_${user.first}-${user.second}_`;
-    const name = `${user.first}, ${user.second}`;
+    const name = `${capitalizeFirstLetter(user.first)} ${capitalizeFirstLetter(user.second)}`;
     await doRegistrationAndLogin(name, username, password, () => {
       onRegistrationSuccesful(username, password);
     });
@@ -248,7 +248,7 @@ function RegistrationForm({
                 for="username"
                 class="block text-sm font-medium leading-6 text-gray-900"
               >
-                <i18n.Translate>Username</i18n.Translate>
+                <i18n.Translate>Login username</i18n.Translate>
                 <b style={{ color: "red" }}> *</b>
               </label>
               <div class="mt-2">
@@ -260,7 +260,7 @@ function RegistrationForm({
                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   value={username ?? ""}
                   enterkeyhint="next"
-                  placeholder="identification"
+                  placeholder="account identification to login"
                   autocomplete="username"
                   required
                   onInput={(e): void => {
@@ -344,7 +344,7 @@ function RegistrationForm({
                   for="name"
                   class="block text-sm font-medium leading-6 text-gray-900"
                 >
-                  <i18n.Translate>Name</i18n.Translate>
+                  <i18n.Translate>Full name</i18n.Translate>
                   <b style={{ color: "red" }}> *</b>
                 </label>
               </div>
@@ -357,7 +357,7 @@ function RegistrationForm({
                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   value={name ?? ""}
                   enterkeyhint="next"
-                  placeholder="your name"
+                  placeholder="John Doe"
                   autocomplete="name"
                   required
                   onInput={(e): void => {
@@ -463,3 +463,7 @@ function RegistrationForm({
     </Fragment>
   );
 }
+
+function capitalizeFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
diff --git a/packages/demobank-ui/src/pages/SolveChallengePage.tsx b/packages/demobank-ui/src/pages/SolveChallengePage.tsx
index 8c39b8d94..4d3169390 100644
--- a/packages/demobank-ui/src/pages/SolveChallengePage.tsx
+++ b/packages/demobank-ui/src/pages/SolveChallengePage.tsx
@@ -78,7 +78,7 @@ export function SolveChallengePage({
 
   const ch = bankState.currentChallenge;
   const errors = undefinedIfEmpty({
-    code: !code ? i18n.str`required` : undefined,
+    code: !code ? i18n.str`Required` : undefined,
   });
 
   async function startChallenge() {
@@ -255,6 +255,10 @@ export function SolveChallengePage({
           <ChallengeDetails
             challenge={bankState.currentChallenge}
             onStart={startChallenge}
+            onCancel={() => {
+              updateBankState("currentChallenge", undefined);
+              onChallengeCompleted();
+            }}
           />
           {ch.info && (
             <div class="mt-3 text-sm leading-6">
@@ -325,9 +329,11 @@ export function SolveChallengePage({
 function ChallengeDetails({
   challenge,
   onStart,
+  onCancel,
 }: {
   challenge: ChallengeInProgess;
   onStart: () => void;
+  onCancel: () => void;
 }): VNode {
   const { i18n, dateLocale } = useTranslationContext();
   const { config } = useBankCoreApiContext();
@@ -335,7 +341,15 @@ function ChallengeDetails({
   return (
     <div class="px-4 mt-4 ">
       <div class="w-full">
-        <div class="flex justify-center">
+        <div class="flex justify-between">
+          <button
+            type="button"
+            // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md  px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+            class="text-sm font-semibold leading-6 text-gray-900"
+            onClick={onCancel}
+          >
+            <i18n.Translate>Cancel</i18n.Translate>
+          </button>
           {challenge.info ? (
             <button
               type="submit"
@@ -376,7 +390,7 @@ function ChallengeDetails({
                   return (
                     <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">
-                        Account
+                        <i18n.Translate>Account</i18n.Translate>
                       </dt>
                       <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                         {challenge.request}
@@ -390,7 +404,7 @@ function ChallengeDetails({
                       {challenge.request.amount && (
                         <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
+                            <i18n.Translate>Amount</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             <RenderAmount
@@ -405,7 +419,7 @@ function ChallengeDetails({
                       {payto.isKnown && payto.targetType === "iban" && (
                         <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">
-                            To account
+                            <i18n.Translate>To account</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             {payto.iban}
@@ -426,7 +440,7 @@ function ChallengeDetails({
                       {challenge.request.cashout_payto_uri !== undefined && (
                         <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">
-                            Cashout account
+                            <i18n.Translate>Cashout account</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             {challenge.request.cashout_payto_uri}
@@ -436,7 +450,7 @@ function ChallengeDetails({
                       {challenge.request.contact_data?.email !== undefined && (
                         <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">
-                            Email
+                            <i18n.Translate>Email</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             {challenge.request.contact_data?.email}
@@ -446,7 +460,7 @@ function ChallengeDetails({
                       {challenge.request.contact_data?.phone !== undefined && (
                         <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">
-                            Phone
+                            <i18n.Translate>Phone</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             {challenge.request.contact_data?.phone}
@@ -456,7 +470,7 @@ function ChallengeDetails({
                       {challenge.request.debit_threshold !== undefined && (
                         <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">
-                            Debit threshold
+                            <i18n.Translate>Debit threshold</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             <RenderAmount
@@ -471,17 +485,17 @@ function ChallengeDetails({
                       {challenge.request.is_public !== undefined && (
                         <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">
-                            Is this account public?
+                            <i18n.Translate>Is this account public?</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                            {challenge.request.is_public ? "enable" : "disable"}
+                            {challenge.request.is_public ? i18n.str`Enable` : i18n.str`Disable`}
                           </dd>
                         </div>
                       )}
                       {challenge.request.name !== undefined && (
                         <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">
-                            Name
+                            <i18n.Translate>Name</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                             {challenge.request.name}
@@ -491,10 +505,10 @@ function ChallengeDetails({
                       {challenge.request.tan_channel !== undefined && (
                         <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">
-                            Authentication channel
+                            <i18n.Translate>Authentication channel</i18n.Translate>
                           </dt>
                           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                            {challenge.request.tan_channel}
+                            {challenge.request.tan_channel ?? i18n.str`Remove`}
                           </dd>
                         </div>
                       )}
@@ -506,7 +520,7 @@ function ChallengeDetails({
                     <Fragment>
                       <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">
-                          New password
+                          <i18n.Translate>New password</i18n.Translate>
                         </dt>
                         <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
                           {challenge.request.new_password}
@@ -570,6 +584,7 @@ function ChallengeDetails({
 
 function ShowWithdrawalDetails({ id }: { id: string }): VNode {
   const details = useWithdrawalDetails(id);
+  const { i18n } = useTranslationContext();
   const { config } = useBankCoreApiContext();
   if (!details) {
     return <Loading />;
@@ -601,7 +616,7 @@ function ShowWithdrawalDetails({ id }: { id: string }): VNode {
       {details.body.selected_reserve_pub !== undefined && (
         <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">
-            Withdraw id
+            <i18n.Translate>Withdraw id</i18n.Translate>
           </dt>
           <dd
             class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
@@ -614,7 +629,7 @@ function ShowWithdrawalDetails({ id }: { id: string }): VNode {
       {details.body.selected_exchange_account !== undefined && (
         <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">
-            To account
+            <i18n.Translate>To account</i18n.Translate>
           </dt>
           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
             {details.body.selected_exchange_account}
@@ -658,7 +673,9 @@ function ShowCashoutDetails({
     <Fragment>
       {request.subject !== undefined && (
         <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">Subject</dt>
+          <dt class="text-sm font-medium leading-6 text-gray-900">
+            <i18n.Translate>Subject</i18n.Translate>
+          </dt>
           <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
             {request.subject}
           </dd>
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 9f7f46c4f..c9c2f174e 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -117,11 +117,11 @@ function OldWithdrawalForm({
   const errors = undefinedIfEmpty({
     amount:
       trimmedAmountStr == null
-        ? i18n.str`required`
+        ? i18n.str`Required`
         : !parsedAmount
-          ? i18n.str`invalid`
+          ? i18n.str`Invalid`
           : Amounts.cmp(limit, parsedAmount) === -1
-            ? i18n.str`balance is not enough`
+            ? i18n.str`Balance is not enough`
             : undefined,
   });
 
diff --git a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
index 9f8fb72bc..8fec0f682 100644
--- a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
+++ b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -61,7 +61,7 @@ export function ShowAccountDetails({
       ? credentials.username === account
       : false;
 
-  const [update, setUpdate] = useState(false);
+  // const [update, setUpdate] = useState(false);
   const [submitAccount, setSubmitAccount] = useState<
     TalerCorebankApi.AccountReconfiguration | undefined
   >();
@@ -86,13 +86,12 @@ export function ShowAccountDetails({
   }
 
   async function doUpdate() {
-    if (!update || !submitAccount || !creds) return;
+    if (!submitAccount || !creds) return;
     await handleError(async () => {
-      const resp = await api.updateAccount(
-        {
-          token: creds.token,
-          username: account,
-        },
+      const resp = await api.updateAccount({
+        token: creds.token,
+        username: account,
+      },
         submitAccount,
       );
 
@@ -190,7 +189,7 @@ export function ShowAccountDetails({
                   <i18n.Translate>Change details</i18n.Translate>
                 </span>
               </span>
-              <button
+              {/* <button
                 type="button"
                 data-enabled={!update}
                 class="bg-indigo-600 data-[enabled=true]:bg-gray-200 relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full ring-2 border-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
@@ -207,16 +206,16 @@ export function ShowAccountDetails({
                   data-enabled={!update}
                   class="translate-x-5 data-[enabled=true]: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>
+              </button> */}
             </div>
           </h2>
         </div>
 
         <AccountForm
-          focus={update}
+          focus={true}
           username={account}
           template={result.body}
-          purpose={update ? "update" : "show"}
+          purpose="update"
           onChange={(a) => setSubmitAccount(a)}
         >
           <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
@@ -229,7 +228,7 @@ export function ShowAccountDetails({
             <button
               type="submit"
               class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              disabled={!update || !submitAccount}
+              disabled={!submitAccount}
               onClick={doUpdate}
             >
               <i18n.Translate>Update</i18n.Translate>
diff --git a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
index 3b35c1fe1..4dcce599d 100644
--- a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
+++ b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
@@ -69,13 +69,13 @@ export function UpdateAccountPassword({
     current: !accountIsTheCurrentUser
       ? undefined
       : !current
-        ? i18n.str`required`
+        ? i18n.str`Required`
         : undefined,
-    password: !password ? i18n.str`required` : undefined,
+    password: !password ? i18n.str`Required` : undefined,
     repeat: !repeat
-      ? i18n.str`required`
+      ? i18n.str`Required`
       : password !== repeat
-        ? i18n.str`password doesn't match`
+        ? i18n.str`Repeated password doesn't match`
         : undefined,
   });
   const [notification, notify, handleError] = useLocalNotification();
@@ -214,7 +214,7 @@ export function UpdateAccountPassword({
                   />
                 </div>
                 <p class="mt-2 text-sm text-gray-500">
-                  <i18n.Translate>repeat the same password</i18n.Translate>
+                  <i18n.Translate>Repeat the same password</i18n.Translate>
                 </p>
               </div>
 
@@ -246,7 +246,7 @@ export function UpdateAccountPassword({
                   </div>
                   <p class="mt-2 text-sm text-gray-500">
                     <i18n.Translate>
-                      your current password, for security
+                      Your current password, for security
                     </i18n.Translate>
                   </p>
                 </div>
diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
index 8465a3d8f..300508abe 100644
--- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
@@ -128,6 +128,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
   const editableName =
     purpose === "create" ||
     (purpose === "update" && (config.allow_edit_name || userIsAdmin));
+
+  const isCashoutEnabled = config.allow_conversion
   const editableCashout =
     showingCurrentUserInfo &&
     (purpose === "create" ||
@@ -162,9 +164,9 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
         : !editableCashout
           ? undefined
           : !cashoutParsed
-            ? i18n.str`it doesn't have the pattern of an IBAN number`
+            ? i18n.str`Doesn't have the pattern of an IBAN number`
             : !cashoutParsed.isKnown || cashoutParsed.targetType !== "iban"
-              ? i18n.str`only "IBAN" target are supported`
+              ? i18n.str`Only "IBAN" target are supported`
               : !IBAN_REGEX.test(cashoutParsed.iban)
                 ? i18n.str`IBAN should have just uppercased letters and numbers`
                 : validateIBAN(cashoutParsed.iban, i18n),
@@ -173,40 +175,40 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
         : !editableAccount
           ? undefined
           : !internalParsed
-            ? i18n.str`it doesn't have the pattern of an IBAN number`
+            ? i18n.str`Doesn't have the pattern of an IBAN number`
             : !internalParsed.isKnown || internalParsed.targetType !== "iban"
-              ? i18n.str`only "IBAN" target are supported`
+              ? i18n.str`Only "IBAN" target are supported`
               : !IBAN_REGEX.test(internalParsed.iban)
                 ? i18n.str`IBAN should have just uppercased letters and numbers`
                 : validateIBAN(internalParsed.iban, i18n),
       email: !newForm.email
         ? undefined
         : !EMAIL_REGEX.test(newForm.email)
-          ? i18n.str`it doesn't have the pattern of an email`
+          ? i18n.str`Doesn't have the pattern of an email`
           : undefined,
       phone: !newForm.phone
         ? undefined
         : !newForm.phone.startsWith("+") // FIXME: better phone number check
-          ? i18n.str`should start with +`
+          ? i18n.str`Should start with +`
           : !REGEX_JUST_NUMBERS_REGEX.test(newForm.phone)
-            ? i18n.str`phone number can't have other than numbers`
+            ? i18n.str`Phone number can't have other than numbers`
             : undefined,
       debit_threshold: !editableThreshold
         ? undefined
         : !trimmedAmountStr
           ? undefined
           : !parsedAmount
-            ? i18n.str`not valid`
+            ? i18n.str`Not valid`
             : undefined,
       name: !editableName
         ? undefined // disabled
         : !newForm.name
-          ? i18n.str`required`
+          ? i18n.str`Required`
           : undefined,
       username: !editableUsername
         ? undefined
         : !newForm.username
-          ? i18n.str`required`
+          ? i18n.str`Required`
           : undefined,
     });
     setErrors(errors);
@@ -246,8 +248,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             debit_threshold: threshold ?? config.default_debit_threshold,
             cashout_payto_uri: cashoutURI,
             payto_uri: internalURI,
-            is_public: !!newForm.isPublic,
-            is_taler_exchange: !!newForm.isExchange,
+            is_public: newForm.isPublic,
+            is_taler_exchange: newForm.isExchange,
             tan_channel:
               newForm.tan_channel === "remove"
                 ? undefined
@@ -263,11 +265,11 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
           const result: TalerCorebankApi.AccountReconfiguration = {
             cashout_payto_uri: cashoutURI,
             contact_data: undefinedIfEmpty({
-              email: newForm.email ?? template?.contact_data?.email,
-              phone: newForm.phone ?? template?.contact_data?.phone,
+              email: newForm.email,
+              phone: newForm.phone,
             }),
             debit_threshold: threshold,
-            is_public: !!newForm.isPublic,
+            is_public: newForm.isPublic,
             name: newForm.name,
             tan_channel:
               newForm.tan_channel === "remove" ? null : newForm.tan_channel,
@@ -300,7 +302,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
               class="block text-sm font-medium leading-6 text-gray-900"
               for="username"
             >
-              {i18n.str`Username`}
+              {i18n.str`Login username`}
               {editableUsername && <b style={{ color: "red" }}> *</b>}
             </label>
             <div class="mt-2">
@@ -326,9 +328,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
               />
             </div>
             <p class="mt-2 text-sm text-gray-500">
-              <i18n.Translate>
-                account identification in the bank
-              </i18n.Translate>
+              <i18n.Translate>Account identification</i18n.Translate>
             </p>
           </div>
 
@@ -337,7 +337,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
               class="block text-sm font-medium leading-6 text-gray-900"
               for="name"
             >
-              {i18n.str`Name`}
+              {i18n.str`Full name`}
               {editableName && <b style={{ color: "red" }}> *</b>}
             </label>
             <div class="mt-2">
@@ -362,9 +362,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
               />
             </div>
             <p class="mt-2 text-sm text-gray-500">
-              <i18n.Translate>
-                name of the person owner the account
-              </i18n.Translate>
+              <i18n.Translate>Name of the account holder</i18n.Translate>
             </p>
           </div>
 
@@ -374,8 +372,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             label={i18n.str`Internal IBAN`}
             help={
               purpose === "create"
-                ? i18n.str`if empty a random account number will be assigned`
-                : i18n.str`account identification for bank transfer`
+                ? i18n.str`If empty a random account number will be assigned`
+                : i18n.str`Account number for bank transfers`
             }
             value={(form.payto_uri ?? defaultValue.payto_uri) as PaytoString}
             disabled={!editableAccount}
@@ -444,12 +442,12 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             </div>
           </div>
 
-          {showingCurrentUserInfo && (
+          {showingCurrentUserInfo && isCashoutEnabled && (
             <PaytoField
               type="iban"
               name="cashout-account"
               label={i18n.str`Cashout IBAN`}
-              help={i18n.str`account number where the money is going to be sent when doing cashouts`}
+              help={i18n.str`External account number where the money is going to be sent when doing cashouts`}
               value={
                 (form.cashout_payto_uri ??
                   defaultValue.cashout_payto_uri) as PaytoString
@@ -492,7 +490,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             />
             <p class="mt-2 text-sm text-gray-500">
               <i18n.Translate>
-                how much is user able to transfer after zero balance
+                How much is user able to transfer after zero balance
               </i18n.Translate>
             </p>
           </div>
@@ -539,19 +537,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             </div>
           )}
           {/* channel, not shown if old cashout api */}
-          {OLD_CASHOUT_API ? undefined : config.supported_tan_channels
-            .length === 0 ? (
-            <div class="sm:col-span-5">
-              <Attention
-                type="warning"
-                title={i18n.str`No cashout channel available`}
-              >
-                <i18n.Translate>
-                  This server doesn't support second factor authentication.
-                </i18n.Translate>
-              </Attention>
-            </div>
-          ) : (
+          {OLD_CASHOUT_API || config.supported_tan_channels
+            .length === 0 ? undefined : (
             <div class="sm:col-span-5">
               <label
                 class="block text-sm font-medium leading-6 text-gray-900"
@@ -597,7 +584,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
                           </span>
                           {purpose !== "show" &&
                             !hasEmail &&
-                            i18n.str`add a email in your profile to enable this option`}
+                            i18n.str`Add a email in your profile to enable this option`}
                         </span>
                       </span>
                       <svg
@@ -655,7 +642,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
                           </span>
                           {purpose !== "show" &&
                             !hasPhone &&
-                            i18n.str`add a phone number in your profile to enable this option`}
+                            i18n.str`Add a phone number in your profile to enable this option`}
                         </span>
                       </span>
                       <svg
@@ -702,7 +689,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
                 aria-labelledby="availability-label"
                 aria-describedby="availability-description"
                 onClick={() => {
-                  form.isPublic = !form.isPublic;
+                  form.isPublic = !(form.isPublic ?? defaultValue.isPublic);
                   updateForm(structuredClone(form));
                 }}
               >
@@ -717,7 +704,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({
             </div>
             <p class="mt-2 text-sm text-gray-500">
               <i18n.Translate>
-                public accounts have their balance publicly accessible
+                Public accounts have their balance publicly accessible
               </i18n.Translate>
             </p>
           </div>
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx
index 1cee4c58a..41d54c43d 100644
--- a/packages/demobank-ui/src/pages/admin/AccountList.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx
@@ -149,7 +149,7 @@ export function AccountList({
                             class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600 "
                           >
                             {!balance ? (
-                              i18n.str`unknown`
+                              i18n.str`Unknown`
                             ) : (
                               <span class="amount">
                                 <RenderAmount
@@ -167,7 +167,7 @@ export function AccountList({
                               })}
                               class="text-indigo-600 hover:text-indigo-900"
                             >
-                              <i18n.Translate>change password</i18n.Translate>
+                              <i18n.Translate>Change password</i18n.Translate>
                             </a>
                             <br />
                             <a
@@ -176,7 +176,7 @@ export function AccountList({
                               })}
                               class="text-indigo-600 hover:text-indigo-900"
                             >
-                              <i18n.Translate>cashouts</i18n.Translate>
+                              <i18n.Translate>Cashouts</i18n.Translate>
                             </a>
                             <br />
                             {noBalance ? (
@@ -186,7 +186,7 @@ export function AccountList({
                                 })}
                                 class="text-indigo-600 hover:text-indigo-900"
                               >
-                                <i18n.Translate>remove</i18n.Translate>
+                                <i18n.Translate>Remove</i18n.Translate>
                               </a>
                             ) : undefined}
                           </td>
diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
index 84cc982af..d6276e050 100644
--- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx
+++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
@@ -385,7 +385,7 @@ function Metrics(): VNode {
           href={privatePages.statsDownload.url({})}
           class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
-          <i18n.Translate>download stats as CSV</i18n.Translate>
+          <i18n.Translate>Download stats as CSV</i18n.Translate>
         </a>
       </div>
     </Fragment>
diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx
index 36e1a4eac..e62b6dc03 100644
--- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx
+++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx
@@ -165,9 +165,9 @@ export function RemoveAccount({
 
   const errors = undefinedIfEmpty({
     accountName: !accountName
-      ? i18n.str`required`
+      ? i18n.str`Required`
       : account !== accountName
-        ? i18n.str`name doesn't match`
+        ? i18n.str`Name doesn't match`
         : undefined,
   });
 
@@ -229,7 +229,7 @@ export function RemoveAccount({
                 </div>
                 <p class="mt-2 text-sm text-gray-500">
                   <i18n.Translate>
-                    enter the account name that is going to be deleted
+                    Enter the account name that is going to be deleted
                   </i18n.Translate>
                 </p>
               </div>
diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
index 46da5c847..050c1069e 100644
--- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx
+++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
@@ -212,19 +212,19 @@ export function CreateCashout({
     setForm(newForm);
   }
   const errors = undefinedIfEmpty<ErrorFrom<typeof form>>({
-    subject: !form.subject ? i18n.str`required` : undefined,
+    subject: !form.subject ? i18n.str`Required` : undefined,
     amount: !form.amount
-      ? i18n.str`required`
+      ? i18n.str`Required`
       : !inputAmount
-        ? i18n.str`invalid`
+        ? i18n.str`Invalid`
         : Amounts.cmp(limit, calc.debit) === -1
-          ? i18n.str`balance is not enough`
+          ? i18n.str`Balance is not enough`
           : Amounts.cmp(calc.credit, sellFee) === -1
-            ? i18n.str`need to be higher due to fees`
+            ? i18n.str`Need to be higher due to fees`
             : Amounts.isZero(calc.credit)
-              ? i18n.str`the total transfer at destination will be zero`
+              ? i18n.str`The total transfer at destination will be zero`
               : undefined,
-    channel: OLD_CASHOUT_API && !form.channel ? i18n.str`required` : undefined,
+    channel: OLD_CASHOUT_API && !form.channel ? i18n.str`Required` : undefined,
   });
   const trimmedAmountStr = form.amount?.trim();
 
@@ -598,7 +598,7 @@ export function CreateCashout({
                                 <i18n.Translate>Email</i18n.Translate>
                               </span>
                               {!resultAccount.body.contact_data?.email &&
-                                i18n.str`add a email in your profile to enable this option`}
+                                i18n.str`Add a email in your profile to enable this option`}
                             </span>
                           </span>
                           <svg
@@ -646,7 +646,7 @@ export function CreateCashout({
                                 <i18n.Translate>SMS</i18n.Translate>
                               </span>
                               {!resultAccount.body.contact_data?.phone &&
-                                i18n.str`add a phone number in your profile to enable this option`}
+                                i18n.str`Add a phone number in your profile to enable this option`}
                             </span>
                           </span>
                           <svg
diff --git a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
index 589e29793..7b251d3ca 100644
--- a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
+++ b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
@@ -46,7 +46,7 @@ export function ShowCashoutDetails({ id, routeClose }: Props): VNode {
     return (
       <Attention
         type="danger"
-        title={i18n.str`cashout id should be a number`}
+        title={i18n.str`Cashout id should be a number`}
       />
     );
   }