some fixes from the last QC meeting

1 files changed, 35 insertions, 18 deletions

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>