cashout

16 files changed, 70 insertions, 93 deletions

diff --git a/packages/demobank-ui/src/components/Routing.tsx b/packages/demobank-ui/src/Routing.tsx
index 65a7b6e86..d797a837d 100644
--- a/packages/demobank-ui/src/components/Routing.tsx
+++ b/packages/demobank-ui/src/Routing.tsx
@@ -19,23 +19,23 @@ import { createHashHistory } from "history";
 import { Fragment, VNode, h } from "preact";
 import { Route, Router, route } from "preact-router";
 import { useEffect } from "preact/hooks";
-import { useBackendState } from "../hooks/backend.js";
-import { BankFrame } from "../pages/BankFrame.js";
-import { WithdrawalOperationPage } from "../pages/WithdrawalOperationPage.js";
-import { LoginForm } from "../pages/LoginForm.js";
-import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js";
-import { RegistrationPage } from "../pages/RegistrationPage.js";
-import { AdminHome } from "../pages/admin/AdminHome.js";
-import { CreateCashout } from "../pages/business/CreateCashout.js";
-import { bankUiSettings } from "../settings.js";
-import { ShowAccountDetails } from "../pages/ShowAccountDetails.js";
-import { UpdateAccountPassword } from "../pages/UpdateAccountPassword.js";
-import { RemoveAccount } from "../pages/admin/RemoveAccount.js";
-import { CreateNewAccount } from "../pages/admin/CreateNewAccount.js";
-import { CashoutListForAccount } from "../pages/admin/CashoutListForAccount.js";
-import { ShowCashoutDetails } from "../pages/business/ShowCashoutDetails.js";
-import { WireTransfer } from "../pages/admin/Account.js";
-import { AccountPage } from "../pages/AccountPage/index.js";
+import { useBackendState } from "./hooks/backend.js";
+import { BankFrame } from "./pages/BankFrame.js";
+import { WithdrawalOperationPage } from "./pages/WithdrawalOperationPage.js";
+import { LoginForm } from "./pages/LoginForm.js";
+import { PublicHistoriesPage } from "./pages/PublicHistoriesPage.js";
+import { RegistrationPage } from "./pages/RegistrationPage.js";
+import { AdminHome } from "./pages/admin/AdminHome.js";
+import { CreateCashout } from "./pages/business/CreateCashout.js";
+import { bankUiSettings } from "./settings.js";
+import { ShowAccountDetails } from "./pages/account/ShowAccountDetails.js";
+import { UpdateAccountPassword } from "./pages/account/UpdateAccountPassword.js";
+import { RemoveAccount } from "./pages/admin/RemoveAccount.js";
+import { CreateNewAccount } from "./pages/admin/CreateNewAccount.js";
+import { CashoutListForAccount } from "./pages/account/CashoutListForAccount.js";
+import { ShowCashoutDetails } from "./pages/business/ShowCashoutDetails.js";
+import { WireTransfer } from "./pages/WireTransfer.js";
+import { AccountPage } from "./pages/AccountPage/index.js";
 
 export function Routing(): VNode {
   const history = createHashHistory();
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx
index 47daf8963..72dd43415 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -98,8 +98,8 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                       </dl>
                     </td>
                     <td data-negative={item.negative ? "true" : "false"}
-                      class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
-                      {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} />
+                      class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 ">
+                      {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} withColor />
                       ) : (
                         <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
                       )}
diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
index f79bd96b0..c787fa713 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -26,7 +26,7 @@ import { BackendStateProvider } from "../context/backend.js";
 import { BankCoreApiProvider } from "../context/config.js";
 import { strings } from "../i18n/strings.js";
 import { bankUiSettings } from "../settings.js";
-import { Routing } from "./Routing.js";
+import { Routing } from "../Routing.js";
 import { BankFrame } from "../pages/BankFrame.js";
 const WITH_LOCAL_STORAGE_CACHE = false;
 
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 57b0b41c5..018416390 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -41,7 +41,7 @@ export function LoginForm({ reason, onRegister }: { reason?: "not-found" | "forb
   const { api } = useBankCoreApiContext();
   const [notification, notify, handleError] = useLocalNotification()
 
-  /**
+  /** 
    * Register form may be shown in the initialization step.
    * If no register handler then this is invoke
    * to show a session expired or unauthorized
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index e9d254332..a6282c947 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -470,20 +470,21 @@ export function InputAmount(
   );
 }
 
-export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode {
+export function RenderAmount({ value, negative, withColor }: { value: AmountJson, negative?: boolean, withColor?: boolean }): VNode {
   const { config } = useBankCoreApiContext()
+  const neg = !!negative //convert to true or false
   const str = Amounts.stringifyValue(value)
   const sep_pos = str.indexOf(FRAC_SEPARATOR)
   if (sep_pos !== -1 && str.length - sep_pos - 1 > config.currency_specification.num_fractional_normal_digits) {
     const limit = sep_pos + config.currency_specification.num_fractional_normal_digits + 1
     const normal = str.substring(0, limit)
     const small = str.substring(limit)
-    return <span data-negative={negative} class="whitespace-nowrap data-[negative=true]:bg-red-400">
+    return <span data-negative={withColor ? neg : undefined} class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
       {negative ? "-" : undefined}
       {value.currency} {normal} <sup class="-ml-1">{small}</sup>
     </span>
   }
-  return <span class="whitespace-nowrap">
+  return <span data-negative={withColor ? neg : undefined} class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
     {negative ? "-" : undefined}
     {value.currency} {str}
   </span>
diff --git a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
index d441d002e..7d93e7222 100644
--- a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
+++ b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
@@ -26,7 +26,7 @@ const logger = new Logger("PublicHistoriesPage");
 
 interface Props { }
 
-/**
+/** 
  * Show histories of public accounts.
  */
 export function PublicHistoriesPage({ }: Props): VNode {
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index cade4a277..fdaa28bbb 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -50,7 +50,7 @@ export const USERNAME_REGEX = /^[a-z][a-zA-Z0-9-]*$/;
 export const PHONE_REGEX = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;
 export const EMAIL_REGEX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
 
-/**
+/** 
  * Collect and submit registration data.
  */
 function RegistrationForm({ onComplete, onCancel }: { onComplete: () => void, onCancel: () => void }): VNode {
diff --git a/packages/demobank-ui/src/pages/admin/Account.tsx b/packages/demobank-ui/src/pages/WireTransfer.tsx
index 588d945ba..5e6081b11 100644
--- a/packages/demobank-ui/src/pages/admin/Account.tsx
+++ b/packages/demobank-ui/src/pages/WireTransfer.tsx
@@ -3,11 +3,11 @@ import { notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { ErrorLoading } from "@gnu-taler/web-util/browser";
 import { Loading } from "@gnu-taler/web-util/browser";
-import { useAccountDetails } from "../../hooks/access.js";
-import { assertUnreachable } from "../WithdrawalOperationPage.js";
-import { LoginForm } from "../LoginForm.js";
-import { PaytoWireTransferForm } from "../PaytoWireTransferForm.js";
-import { useBackendState } from "../../hooks/backend.js";
+import { useAccountDetails } from "../hooks/access.js";
+import { assertUnreachable } from "./WithdrawalOperationPage.js";
+import { LoginForm } from "./LoginForm.js";
+import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
+import { useBackendState } from "../hooks/backend.js";
 
 export function WireTransfer({ toAccount, onRegister, onCancel, onSuccess }: { onSuccess?: () => void; toAccount?: string, onCancel?: () => void, onRegister?: () => void }): VNode {
   const { i18n } = useTranslationContext();
diff --git a/packages/demobank-ui/src/pages/admin/CashoutListForAccount.tsx b/packages/demobank-ui/src/pages/account/CashoutListForAccount.tsx
index 3aefb32af..293b821e2 100644
--- a/packages/demobank-ui/src/pages/admin/CashoutListForAccount.tsx
+++ b/packages/demobank-ui/src/pages/account/CashoutListForAccount.tsx
@@ -3,7 +3,7 @@ import { Fragment, VNode, h } from "preact";
 import { Cashouts } from "../../components/Cashouts/index.js";
 import { useBackendState } from "../../hooks/backend.js";
 import { ProfileNavigation } from "../ProfileNavigation.js";
-import { CreateNewAccount } from "./CreateNewAccount.js";
+import { CreateNewAccount } from "../admin/CreateNewAccount.js";
 import { CreateCashout } from "../business/CreateCashout.js";
 
 interface Props {
@@ -16,7 +16,6 @@ export function CashoutListForAccount({ account, onSelected, onClose }: Props):
   const { i18n } = useTranslationContext();
 
   const { state: credentials } = useBackendState();
-  const token = credentials.status !== "loggedIn" ? undefined : credentials.token
 
   const accountIsTheCurrentUser = credentials.status === "loggedIn" ?
     credentials.username === account : false
@@ -30,22 +29,12 @@ export function CashoutListForAccount({ account, onSelected, onClose }: Props):
       </h1>
     }
 
-    <CreateCashout onCancel={() => {}} onComplete={() => {}} account={account} />
+    <CreateCashout onCancel={() => { }} onComplete={() => { }} account={account} />
+
     <Cashouts
       account={account}
       onSelected={onSelected}
     />
-    <p>
-      <button
-        class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"
-        onClick={async (e) => {
-          e.preventDefault();
-          onClose();
-        }}
-      >
-        {i18n.str`Close`}
-        </button>
-    </p>
   </Fragment>
 }
 
diff --git a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
index a88a90499..7a4fbddf5 100644
--- a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx
+++ b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -4,14 +4,14 @@ import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { ErrorLoading } from "@gnu-taler/web-util/browser";
 import { Loading } from "@gnu-taler/web-util/browser";
-import { useBankCoreApiContext } from "../context/config.js";
-import { useAccountDetails } from "../hooks/access.js";
-import { useBackendState } from "../hooks/backend.js";
-import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
-import { LoginForm } from "./LoginForm.js";
-import { ProfileNavigation } from "./ProfileNavigation.js";
-import { assertUnreachable } from "./WithdrawalOperationPage.js";
-import { AccountForm } from "./admin/AccountForm.js";
+import { useBankCoreApiContext } from "../../context/config.js";
+import { useAccountDetails } from "../../hooks/access.js";
+import { useBackendState } from "../../hooks/backend.js";
+import { undefinedIfEmpty, withRuntimeErrorHandling } from "../../utils.js";
+import { LoginForm } from "../LoginForm.js";
+import { ProfileNavigation } from "../ProfileNavigation.js";
+import { assertUnreachable } from "../WithdrawalOperationPage.js";
+import { AccountForm } from "../admin/AccountForm.js";
 import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
 
 export function ShowAccountDetails({
diff --git a/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
index 47f8a5750..d7f5155c9 100644
--- a/packages/demobank-ui/src/pages/UpdateAccountPassword.tsx
+++ b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx
@@ -2,12 +2,12 @@ import { notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-ta
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { ShowInputErrorLabel } from "@gnu-taler/web-util/browser";
-import { useBankCoreApiContext } from "../context/config.js";
-import { useBackendState } from "../hooks/backend.js";
-import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
-import { doAutoFocus } from "./PaytoWireTransferForm.js";
-import { ProfileNavigation } from "./ProfileNavigation.js";
-import { assertUnreachable } from "./WithdrawalOperationPage.js";
+import { useBankCoreApiContext } from "../../context/config.js";
+import { useBackendState } from "../../hooks/backend.js";
+import { undefinedIfEmpty, withRuntimeErrorHandling } from "../../utils.js";
+import { doAutoFocus } from "../PaytoWireTransferForm.js";
+import { ProfileNavigation } from "../ProfileNavigation.js";
+import { assertUnreachable } from "../WithdrawalOperationPage.js";
 import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
 
 export function UpdateAccountPassword({
diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
index 4fcc32484..5d8e3797a 100644
--- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
@@ -1,11 +1,9 @@
+import { PaytoString, TalerCorebankApi, buildPayto, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import { CopyButton, ShowInputErrorLabel, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
-import { ShowInputErrorLabel } from "@gnu-taler/web-util/browser";
+import { useState } from "preact/hooks";
 import { PartialButDefined, RecursivePartial, WithIntermediate, undefinedIfEmpty, validateIBAN } from "../../utils.js";
-import { useEffect, useRef, useState } from "preact/hooks";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { PaytoString, TalerCorebankApi, buildPayto, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
 import { doAutoFocus } from "../PaytoWireTransferForm.js";
-import { CopyButton } from "@gnu-taler/web-util/browser";
 import { assertUnreachable } from "../WithdrawalOperationPage.js";
 
 const IBAN_REGEX = /^[A-Z][A-Z0-9]*$/;
@@ -85,7 +83,7 @@ export function AccountForm({
     } else {
       const cashout = buildPayto("iban", newForm.cashout_payto_uri!, undefined)
       const account: AccountFormData = {
-        ...newForm as any, 
+        ...newForm as any,
         cashout_payto_uri: stringifyPaytoUri(cashout)
       }
       onChange(account);
diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
index a89b4afca..795a2c6d0 100644
--- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx
+++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
@@ -1,12 +1,11 @@
 import { AmountString, Amounts, TalerCorebankApi, TalerError } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { ErrorLoading, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import { ErrorLoading } from "@gnu-taler/web-util/browser";
 import { Transactions } from "../../components/Transactions/index.js";
 import { useLastMonitorInfo } from "../../hooks/circuit.js";
 import { RenderAmount } from "../PaytoWireTransferForm.js";
-import { WireTransfer } from "./Account.js";
+import { WireTransfer } from "../WireTransfer.js";
 import { AccountList } from "./AccountList.js";
 
 /**
diff --git a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
index bdec2a2a9..2b0be6056 100644
--- a/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
+++ b/packages/demobank-ui/src/pages/admin/CreateNewAccount.tsx
@@ -1,16 +1,13 @@
 import { TalerCorebankApi, TranslatedString } from "@gnu-taler/taler-util";
-import { notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Attention, LocalNotificationBanner, notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { mutate } from "swr";
-import { Attention } from "@gnu-taler/web-util/browser";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { useBackendState } from "../../hooks/backend.js";
-import { withRuntimeErrorHandling } from "../../utils.js";
 import { assertUnreachable } from "../WithdrawalOperationPage.js";
 import { getRandomPassword } from "../rnd.js";
 import { AccountForm, AccountFormData } from "./AccountForm.js";
-import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
 
 export function CreateNewAccount({
   onCancel,
diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx
index 0519d085a..051a86ad6 100644
--- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx
+++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx
@@ -1,11 +1,7 @@
 import { Amounts, TalerError, TranslatedString } from "@gnu-taler/taler-util";
-import { notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Attention, ErrorLoading, Loading, LocalNotificationBanner, ShowInputErrorLabel, notifyInfo, useLocalNotification, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import { Attention } from "@gnu-taler/web-util/browser";
-import { ErrorLoading } from "@gnu-taler/web-util/browser";
-import { Loading } from "@gnu-taler/web-util/browser";
-import { ShowInputErrorLabel } from "@gnu-taler/web-util/browser";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { useAccountDetails } from "../../hooks/access.js";
 import { useBackendState } from "../../hooks/backend.js";
@@ -13,7 +9,6 @@ import { undefinedIfEmpty } from "../../utils.js";
 import { LoginForm } from "../LoginForm.js";
 import { doAutoFocus } from "../PaytoWireTransferForm.js";
 import { assertUnreachable } from "../WithdrawalOperationPage.js";
-import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
 
 export function RemoveAccount({
   account,
diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
index 771004ec6..1838dbda3 100644
--- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx
+++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
@@ -77,10 +77,8 @@ export function CreateCashout({
     estimateByCredit: calculateFromCredit,
     estimateByDebit: calculateFromDebit,
   } = useEstimator();
-  const { state } = useBackendState()
-  const creds = state.status !== "loggedIn" ? undefined : state
   const { api, config } = useBankCoreApiContext()
-  const [form, setForm] = useState<Partial<FormType>>({ isDebit: true, amount:"2" });
+  const [form, setForm] = useState<Partial<FormType>>({ isDebit: true, amount: "2" });
   const [notification, notify, handleError] = useLocalNotification()
   const info = useConversionInfo();
 
@@ -116,7 +114,7 @@ export function CreateCashout({
     debitThreshold: Amounts.parseOrThrow(resultAccount.body.debit_threshold)
   }
 
-  const {fiat_currency, regional_currency, cashout_ratio, cashout_fee} = info.body
+  const { fiat_currency, regional_currency, cashout_ratio, cashout_fee } = info.body
   const regionalZero = Amounts.zeroOfCurrency(regional_currency);
   const fiatZero = Amounts.zeroOfCurrency(fiat_currency);
   const limit = account.balanceIsDebit
@@ -189,18 +187,18 @@ export function CreateCashout({
       <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">
 
         <section class="mt-4 rounded-sm px-4 py-6 p-8 ">
-          <h2 id="summary-heading" class="font-medium text-lg">Cashout</h2>
+          <h2 id="summary-heading" class="font-medium text-lg"><i18n.Translate>Cashout</i18n.Translate></h2>
 
           <dl class="mt-4 space-y-4">
             <div class="justify-between items-center flex">
-              <dt class="text-sm text-gray-600">Convertion rate</dt>
+              <dt class="text-sm text-gray-600"><i18n.Translate>Convertion rate</i18n.Translate></dt>
               <dd class="text-sm text-gray-900">{sellRate}</dd>
             </div>
 
 
             <div class="flex items-center justify-between border-t-2 afu pt-4">
               <dt class="flex items-center text-sm text-gray-600">
-                <span>Current balance</span>
+                <span><i18n.Translate>Current balance</i18n.Translate></span>
               </dt>
               <dd class="text-sm text-gray-900">
                 <RenderAmount value={account.balance} />
@@ -208,7 +206,7 @@ export function CreateCashout({
             </div>
             <div class="flex items-center justify-between border-t-2 afu pt-4">
               <dt class="flex items-center text-sm text-gray-600">
-                <span>Cashout fee</span>
+                <span><i18n.Translate>Cashout fee</i18n.Translate></span>
               </dt>
               <dd class="text-sm text-gray-900">
                 <RenderAmount value={sellFee} />
@@ -292,17 +290,17 @@ export function CreateCashout({
                 <div class="sm:col-span-5">
                   <dl class="mt-4 space-y-4">
 
-                    <div class="justify-between items-center flex">
-                      <dt class="text-sm text-gray-600">Total cost</dt>
+                    <div class="justify-between items-center flex ">
+                      <dt class="text-sm text-gray-600"><i18n.Translate>Total cost</i18n.Translate></dt>
                       <dd class="text-sm text-gray-900">
-                        <RenderAmount value={calc.debit} negative />
+                        <RenderAmount value={calc.debit} negative withColor />
                       </dd>
                     </div>
 
 
                     <div class="flex items-center justify-between border-t-2 afu pt-4">
                       <dt class="flex items-center text-sm text-gray-600">
-                        <span>Balance after</span>
+                        <span><i18n.Translate>Balance left</i18n.Translate></span>
                         {/* <a href="#" class="ml-2 shrink-0 text-gray-400 bkx">
                   <span class="sr-only">Learn more about how shipping is calculated</span>
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
@@ -316,7 +314,7 @@ export function CreateCashout({
                     {Amounts.isZero(sellFee) || Amounts.isZero(calc.beforeFee) ? undefined : (
                       <div class="flex items-center justify-between border-t-2 afu pt-4">
                         <dt class="flex items-center text-sm text-gray-600">
-                          <span>Amount after conversion</span>
+                          <span><i18n.Translate>Before fee</i18n.Translate></span>
                           {/* <a href="#" class="ml-2 shrink-0 text-gray-400 bkx">
                   <span class="sr-only">Learn more about how shipping is calculated</span>
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
@@ -329,9 +327,9 @@ export function CreateCashout({
                       </div>
                     )}
                     <div class="flex justify-between items-center border-t-2 afu pt-4">
-                      <dt class="text-lg text-gray-900 font-medium">Total cashout transfer</dt>
+                      <dt class="text-lg text-gray-900 font-medium"><i18n.Translate>Total cashout transfer</i18n.Translate></dt>
                       <dd class="text-lg text-gray-900 font-medium">
-                        <RenderAmount value={calc.credit} />
+                        <RenderAmount value={calc.credit} withColor />
                       </dd>
                     </div>
                   </dl>