render amount and limit input

2023-10-01 12:50:43 -03:00 · 2023-10-01 12:50:43 -03:00 · 372ddff917
commit 372ddff917
parent 1708d49a2d
14 changed files with 201 additions and 96 deletions
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@ -19,6 +19,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { State } from "./index.js";
 import { format } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
+import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";

 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
  const { i18n } = useTranslationContext();
@ -62,8 +63,8 @@ export function ReadyView({ cashouts, onSelected }: State.Ready): VNode {
                    ? format(item.confirmation_time, "dd/MM/yyyy HH:mm:ss")
                    : "-"}
                </td>
-                <td>{Amounts.stringifyValue(item.amount_debit)}</td>
-                <td>{Amounts.stringifyValue(item.amount_credit)}</td>
+                <td><RenderAmount value={Amounts.parseOrThrow(item.amount_debit)} /></td>
+                <td><RenderAmount value={Amounts.parseOrThrow(item.amount_credit)} /></td>
                <td>{item.status}</td>
                <td>
                  <a
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@ -20,6 +20,7 @@ import { State } from "./index.js";
 import { format, isToday } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
 import { useEffect, useRef } from "preact/hooks";
+import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";

 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
  const { i18n } = useTranslationContext();
@ -72,13 +73,7 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                {txs.map(item => {
                  const time = item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss")
                  const amount = <Fragment>
-                    {item.negative ? "-" : ""}
-                    {item.amount ? (
-                      `${Amounts.stringifyValue(item.amount)} ${item.amount.currency
-                      }`
-                    ) : (
-                      <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
-                    )}
+                    { }
                  </Fragment>
                  return (<tr key={idx}>
                    <td class="relative py-2 pl-2 pr-2 text-sm ">
@ -86,20 +81,26 @@ export function ReadyView({ transactions, onNext, onPrev }: State.Ready): VNode
                      <dl class="font-normal sm:hidden">
                        <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
                        <dd class="mt-1 truncate text-gray-700">
-                          {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? (
-                            `${Amounts.stringifyValue(item.amount)}`
+                          {item.negative ? i18n.str`sent` : i18n.str`received`}
+
+                          {item.amount ? (
+                            <RenderAmount value={item.amount} />
                          ) : (
                            <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
                          )}</dd>
+
                        <dt class="sr-only sm:hidden"><i18n.Translate>Counterpart</i18n.Translate></dt>
                        <dd class="mt-1 truncate text-gray-500 sm:hidden">
-                        {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart}
+                          {item.negative ? i18n.str`to` : i18n.str`from`} {item.counterpart}
                        </dd>
                      </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">
-                      {amount}
+                      {item.amount ? (<RenderAmount value={item.amount} negative={item.negative} />
+                      ) : (
+                        <span style={{ color: "grey" }}>&lt;{i18n.str`invalid value`}&gt;</span>
+                      )}
                    </td>
                    <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">{item.counterpart}</td>
                    <td class="px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">{item.subject}</td>
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@ -31,6 +31,7 @@ import { getInitialBackendBaseURL } from "../hooks/backend.js";
 import { BANK_INTEGRATION_PROTOCOL_VERSION, useConfigState } from "../hooks/config.js";
 import { ErrorLoading } from "./ErrorLoading.js";
 import { BankFrame } from "../pages/BankFrame.js";
+import { ConfigStateProvider } from "../context/config.js";
 const WITH_LOCAL_STORAGE_CACHE = false;

 /**
@ -84,11 +85,11 @@ function VersionCheck({ children }: { children: ComponentChildren }): VNode {
    </BankFrame>
  }
  if (checked.type === "ok") {
-    return <Fragment>{children}</Fragment>
+    return <ConfigStateProvider value={checked.result}>{children}</ConfigStateProvider>
  }

  return <BankFrame>
-    <ErrorLoading error={checked.result}/>
+    <ErrorLoading error={checked.result} />
  </BankFrame>
 }

--- a/packages/demobank-ui/src/context/config.ts
+++ b/packages/demobank-ui/src/context/config.ts
@ -0,0 +1,52 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ComponentChildren, createContext, h, VNode } from "preact";
+import { useContext } from "preact/hooks";
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+export type Type = Required<SandboxBackend.Config>;
+
+const initial: Type = {
+  name: "",
+  version: "0:0:0",
+  currency_fraction_digits: 2,
+  currency_fraction_limit: 2,
+  fiat_currency: "",
+  have_cashout: false,
+};
+const Context = createContext<Type>(initial);
+
+export const useConfigContext = (): Type => useContext(Context);
+
+export const ConfigStateProvider = ({
+  value,
+  children,
+}: {
+  value: Type,
+  children: ComponentChildren;
+}): VNode => {
+
+  return h(Context.Provider, {
+    value,
+    children,
+  });
+};
+
--- a/packages/demobank-ui/src/declaration.d.ts
+++ b/packages/demobank-ui/src/declaration.d.ts
@ -107,9 +107,27 @@ namespace SandboxBackend {
    name: string;
    // API version in the form $n:$n:$n
    version: string;
-    // Contains ratios and fees related to buying
-    // and selling the circuit currency.
-    ratios_and_fees: RatiosAndFees;
+    // If 'true', the server provides local currency
+    // conversion support.
+    // If missing or false, some parts of the API
+    // are not supported and return 404.
+    have_cashout?: boolean;
+
+    // Fiat currency.  That is the currency in which
+    // cash-out operations ultimately wire money.
+    // Only applicable if have_cashout=true.
+    fiat_currency?: string;
+
+    // How many digits should the amounts be rendered
+    // with by default. Small capitals should
+    // be used to render fractions beyond the number
+    // given here (like on gas stations).
+    currency_fraction_digits?: number;
+
+    // How many decimal digits an operation can
+    // have. Wire transfers with more decimal 
+    // digits will not be accepted.
+    currency_fraction_limit?: number;
  }
  interface RatiosAndFees {
    // Exchange rate to buy the circuit currency from fiat.
--- a/packages/demobank-ui/src/hooks/config.ts
+++ b/packages/demobank-ui/src/hooks/config.ts
@ -18,13 +18,13 @@ async function getConfigState(
  return result.data;
 }

-type Result = undefined
-  | { type: "ok", result: SandboxBackend.Config }
+export type ConfigResult = undefined
+  | { type: "ok", result: Required<SandboxBackend.Config> }
  | { type: "wrong", result: SandboxBackend.Config }
  | { type: "error", result: HttpError<SandboxBackend.SandboxError> }

-export function useConfigState(): Result {
-  const [checked, setChecked] = useState<Result>()
+export function useConfigState(): ConfigResult {
+  const [checked, setChecked] = useState<ConfigResult>()
  const { request } = useApiContext();

  useEffect(() => {
@ -32,15 +32,23 @@ export function useConfigState(): Result {
      .then((result) => {
        const r = LibtoolVersion.compare(BANK_INTEGRATION_PROTOCOL_VERSION, result.version)
        if (r?.compatible) {
-          setChecked({ type: "ok",result });
+          const complete: Required<SandboxBackend.Config> = {
+            currency_fraction_digits: result.currency_fraction_digits ?? 2,
+            currency_fraction_limit: result.currency_fraction_limit ?? 2,
+            fiat_currency: "",
+            have_cashout: result.have_cashout ?? false,
+            name: result.name,
+            version: result.version,
+          }
+          setChecked({ type: "ok", result: complete });
        } else {
-          setChecked({ type: "wrong",result })
+          setChecked({ type: "wrong", result })
        }
      })
      .catch((error: unknown) => {
        if (error instanceof RequestError) {
          const result = error.cause
-          setChecked({ type:"error", result });
+          setChecked({ type: "error", result });
        }
      });
  }, []);
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@ -27,6 +27,7 @@ import { CopyButton, CopyIcon } from "../components/CopyButton.js";
 import logo from "../assets/logo-2021.svg";
 import { useAccountDetails } from "../hooks/access.js";
 import { Attention } from "../components/Attention.js";
+import { RenderAmount } from "./PaytoWireTransferForm.js";

 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@ -87,7 +88,7 @@ export function BankFrame({
                    class="h-8 w-auto"
                    src={logo}
                    alt="Taler"
-                    style={{ height: 35, margin: 10 }}
+                    style={{ height: "1.5rem", margin: ".5rem" }}
                  />
                </a>
              </div>
@ -322,8 +323,8 @@ function MaybeShowDebugInfo({ info }: { info: any }): VNode {
  const [settings] = useSettings()
  if (settings.showDebugInfo) {
    return <pre class="whitespace-break-spaces ">
-    {info}
-  </pre>
+      {info}
+    </pre>
  }
  return <Fragment />
 }
@ -333,19 +334,19 @@ function StatusBanner(): VNode {
  const notifs = useNotifications()
  if (notifs.length === 0) return <Fragment />
  return <div class="fixed z-20 w-full p-4"> {
-      notifs.map(n => {
-        switch (n.message.type) {
-          case "error":
-            return <Attention type="danger" title={n.message.title} onClose={() => {
-              n.remove()
-            }}>
-              {n.message.description &&
-                <div class="mt-2 text-sm text-red-700">
-                  {n.message.description}
-                </div>
-              }
-              <MaybeShowDebugInfo info={n.message.debug} />
-              {/* <a href="#" class="text-gray-500">
+    notifs.map(n => {
+      switch (n.message.type) {
+        case "error":
+          return <Attention type="danger" title={n.message.title} onClose={() => {
+            n.remove()
+          }}>
+            {n.message.description &&
+              <div class="mt-2 text-sm text-red-700">
+                {n.message.description}
+              </div>
+            }
+            <MaybeShowDebugInfo info={n.message.debug} />
+            {/* <a href="#" class="text-gray-500">
                show debug info
              </a>
              {n.message.debug &&
@ -353,13 +354,13 @@ function StatusBanner(): VNode {
                  {n.message.debug}
                </div>
              } */}
-            </Attention>
-          case "info":
-            return <Attention type="success" title={n.message.title} onClose={() => {
-              n.remove();
-            }} />
-        }
-      })}
+          </Attention>
+        case "info":
+          return <Attention type="success" title={n.message.title} onClose={() => {
+            n.remove();
+          }} />
+      }
+    })}
  </div>

 }
@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode {
  const result = useAccountDetails(account);
  if (!result.ok) return <div />

-  return <div>
-    {Amounts.currencyOf(result.data.balance.amount)}
-    &nbsp;{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""}
-    {Amounts.stringifyValue(result.data.balance.amount)}
-  </div>
+  return <RenderAmount
+    value={Amounts.parseOrThrow(result.data.balance.amount)}
+    negative={result.data.balance.credit_debit_indicator === "debit"}
+  />
 }
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@ -30,7 +30,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ
  const { i18n } = useTranslationContext();
  const [settings] = useSettings();

-  const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>("wire-transfer");
+  const [tab, setTab] = useState<"charge-wallet" | "wire-transfer" | undefined>();

  return (
    <div class="mt-2">
@ -47,7 +47,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ
              setTab("charge-wallet")
            }} />
            <span class="flex flex-1">
-              <div class="text-lg mr-2">&#x1F4B5;</div>
+              <div class="text-4xl mr-4 my-auto">&#x1F4B5;</div>
              <span class="flex flex-col">
                <span id="project-type-0-label" class="block text-sm font-medium text-gray-900">
                  <i18n.Translate>a <b>Taler</b> wallet</i18n.Translate>
@ -76,7 +76,7 @@ export function PaymentOptions({ limit, goToConfirmOperation }: { limit: AmountJ
              setTab("wire-transfer")
            }} />
            <span class="flex flex-1">
-              <div class="text-lg mr-2">&#x2194;</div>
+              <div class="text-4xl mr-4 my-auto">&#x2194;</div>
              <span class="flex flex-col">
                <span id="project-type-1-label" class="block text-sm font-medium text-gray-900">
                  <i18n.Translate>another bank account</i18n.Translate>
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@ -39,6 +39,8 @@ import {
  undefinedIfEmpty,
  validateIBAN,
 } from "../utils.js";
+import { useConfigState } from "../hooks/config.js";
+import { useConfigContext } from "../context/config.js";

 const logger = new Logger("PaytoWireTransferForm");

@ -55,7 +57,7 @@ export function PaytoWireTransferForm({
  onCancel: (() => void) | undefined;
  limit: AmountJson;
 }): VNode {
-  const [isRawPayto, setIsRawPayto] = useState(true);
+  const [isRawPayto, setIsRawPayto] = useState(false);
  // FIXME: remove this
  const [iban, setIban] = useState<string | undefined>("DE4745461198061");
  const [subject, setSubject] = useState<string | undefined>("ASD");
@ -285,7 +287,7 @@ export function PaytoWireTransferForm({

            <div class="sm:col-span-5">
              <label for="amount" class="block text-sm font-medium leading-6 text-gray-900">{i18n.str`Amount`}</label>
-              <Amount
+              <InputAmount
                name="amount"
                left
                currency={limit.currency}
@ -372,7 +374,9 @@ export function doAutoFocus(element: HTMLElement | null) {
  }
 }

-export function Amount(
+const FRAC_SEPARATOR = "."
+
+export function InputAmount(
  {
    currency,
    name,
@ -390,6 +394,7 @@ export function Amount(
  },
  ref: Ref<HTMLInputElement>,
 ): VNode {
+  const cfg = useConfigContext()
  return (
    <div class="mt-2">
      <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
@ -409,10 +414,14 @@ export function Amount(
          autocomplete="off"
          value={value ?? ""}
          disabled={!onChange}
-          onInput={(e): void => {
-            if (onChange) {
-              onChange(e.currentTarget.value);
+          onInput={(e) => {
+            if (!onChange) return;
+            const l = e.currentTarget.value.length
+            const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR)
+            if (sep_pos !== -1 && l - sep_pos - 1 > cfg.currency_fraction_limit) {
+              e.currentTarget.value = e.currentTarget.value.substring(0, sep_pos + cfg.currency_fraction_limit + 1)
            }
+            onChange(e.currentTarget.value);
          }}
        />
      </div>
@ -421,3 +430,21 @@ export function Amount(
  );
 }

+export function RenderAmount({ value, negative }: { value: AmountJson, negative?: boolean }): VNode {
+  const cfg = useConfigContext()
+  const str = Amounts.stringifyValue(value)
+  const sep_pos = str.indexOf(FRAC_SEPARATOR)
+  if (sep_pos !== -1 && str.length - sep_pos - 1 > cfg.currency_fraction_digits) {
+    const limit = sep_pos + cfg.currency_fraction_digits + 1
+    const normal = str.substring(0, limit)
+    const small = str.substring(limit)
+    return <span class="whitespace-nowrap">
+      {negative ? "-" : undefined}
+      {value.currency} {normal} <sup class="-ml-2">{small}</sup>
+    </span>
+  }
+  return <span class="whitespace-nowrap">
+    {negative ? "-" : undefined}
+    {value.currency} {str}
+  </span>
+}
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@ -34,13 +34,13 @@ import { forwardRef } from "preact/compat";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useAccessAPI } from "../hooks/access.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
-import { Amount, doAutoFocus } from "./PaytoWireTransferForm.js";
+import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
 import { useSettings } from "../hooks/settings.js";
 import { OperationState } from "./OperationState/index.js";
 import { Attention } from "../components/Attention.js";

 const logger = new Logger("WalletWithdrawForm");
-const RefAmount = forwardRef(Amount);
+const RefAmount = forwardRef(InputAmount);


 function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@ -38,6 +38,7 @@ import { ShowInputErrorLabel } from "../components/ShowInputErrorLabel.js";
 import { useAccessAnonAPI } from "../hooks/access.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { useSettings } from "../hooks/settings.js";
+import { RenderAmount } from "./PaytoWireTransferForm.js";

 const logger = new Logger("WithdrawalConfirmationQuestion");

@ -318,7 +319,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">Amount</dt>
                    <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                      {Amounts.currencyOf(details.amount)} {Amounts.stringifyValue(details.amount)}
+                      <RenderAmount value={details.amount} />
                    </dd>
                  </div>
                </dl>
--- a/packages/demobank-ui/src/pages/admin/AccountList.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx
@ -4,6 +4,7 @@ import { handleNotOkResult } from "../HomePage.js";
 import { AccountAction } from "./Home.js";
 import { Amounts } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { RenderAmount } from "../PaytoWireTransferForm.js";

 interface Props {
  onAction: (type: AccountAction, account: string) => void;
@ -88,12 +89,7 @@ export function AccountList({ account, onAction, onCreateAccount }: Props): VNod
                        i18n.str`unknown`
                      ) : (
                        <span class="amount">
-                          {balanceIsDebit ? <b>-</b> : null}
-                          <span class="value">{`${Amounts.stringifyValue(
-                            balance,
-                          )}`}</span>
-                          &nbsp;
-                          <span class="currency">{`${balance.currency}`}</span>
+                          <RenderAmount value={balance} negative={balanceIsDebit} />
                        </span>
                      )}
                    </td>
--- a/packages/demobank-ui/src/pages/business/Home.tsx
+++ b/packages/demobank-ui/src/pages/business/Home.tsx
@ -45,7 +45,7 @@ import {
  undefinedIfEmpty,
 } from "../../utils.js";
 import { handleNotOkResult } from "../HomePage.js";
-import { Amount } from "../PaytoWireTransferForm.js";
+import { InputAmount } from "../PaytoWireTransferForm.js";
 import { ShowAccountDetails } from "../ShowAccountDetails.js";
 import { UpdateAccountPassword } from "../UpdateAccountPassword.js";

@ -342,7 +342,7 @@ function CreateCashout({

          </label>
          <div style={{ display: "flex" }}>
-            <Amount
+            <InputAmount
              name="amount"
              currency={amount.currency}
              value={form.amount}
@ -372,7 +372,7 @@ function CreateCashout({
        </fieldset>
        <fieldset>
          <label for="balance-now">{i18n.str`Balance now`}</label>
-          <Amount
+          <InputAmount
            name="banace-now"
            currency={balance.currency}
            value={Amounts.stringifyValue(balance)}
@ -382,7 +382,7 @@ function CreateCashout({
          <label for="total-cost"
            style={{ fontWeight: "bold", color: "red" }}
          >{i18n.str`Total cost`}</label>
-          <Amount
+          <InputAmount
            name="total-cost"
            currency={balance.currency}
            value={Amounts.stringifyValue(calc.debit)}
@ -390,7 +390,7 @@ function CreateCashout({
        </fieldset>
        <fieldset>
          <label for="balance-after">{i18n.str`Balance after`}</label>
-          <Amount
+          <InputAmount
            name="balance-after"
            currency={balance.currency}
            value={balanceAfter ? Amounts.stringifyValue(balanceAfter) : ""}
@ -400,7 +400,7 @@ function CreateCashout({
          <Fragment>
            <fieldset>
              <label for="amount-conversiojn">{i18n.str`Amount after conversion`}</label>
-              <Amount
+              <InputAmount
                name="amount-conversion"
                currency={fiatCurrency}
                value={Amounts.stringifyValue(calc.beforeFee)}
@ -409,7 +409,7 @@ function CreateCashout({

            <fieldset>
              <label form="cashout-fee">{i18n.str`Cashout fee`}</label>
-              <Amount
+              <InputAmount
                name="cashout-fee"
                currency={fiatCurrency}
                value={Amounts.stringifyValue(sellFee)}
@ -421,7 +421,7 @@ function CreateCashout({
          <label for="total"
            style={{ fontWeight: "bold", color: "green" }}
          >{i18n.str`Total cashout transfer`}</label>
-          <Amount
+          <InputAmount
            name="total"
            currency={fiatCurrency}
            value={Amounts.stringifyValue(calc.credit)}
--- a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
@ -62,10 +62,10 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
                WithdrawalType.TalerBankIntegrationApi
                ? !tx.withdrawalDetails.confirmed
                  ? i18n.str`Need approval in the Bank`
-                  : i18n.str`Exchange is waiting the wire transfer`
+                  : i18n.str`Waiting for wire transfer to complete`
                : tx.withdrawalDetails.type === WithdrawalType.ManualTransfer
-                ? i18n.str`Exchange is waiting the wire transfer`
-                : "" //pending but no message
+                  ? i18n.str`Waiting for wire transfer to complete`
+                  : "" //pending but no message
              : undefined
          }
        />
@ -88,8 +88,8 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
                  ? i18n.str`Need approval in the Bank`
                  : i18n.str`Exchange is waiting the wire transfer`
                : tx.withdrawalDetails.type === WithdrawalType.ManualTransfer
-                ? i18n.str`Exchange is waiting the wire transfer`
-                : "" //pending but no message
+                  ? i18n.str`Exchange is waiting the wire transfer`
+                  : "" //pending but no message
              : undefined
          }
        />
@ -267,14 +267,14 @@ function Layout(props: LayoutProps): VNode {
      style={{
        backgroundColor:
          props.currentState === TransactionMajorState.Pending ||
-          props.currentState === TransactionMajorState.Dialog
+            props.currentState === TransactionMajorState.Dialog
            ? "lightcyan"
            : props.currentState === TransactionMajorState.Failed
-            ? "#ff000040"
-            : props.currentState === TransactionMajorState.Aborted ||
-              props.currentState === TransactionMajorState.Aborting
-            ? "#00000010"
-            : "inherit",
+              ? "#ff000040"
+              : props.currentState === TransactionMajorState.Aborted ||
+                props.currentState === TransactionMajorState.Aborting
+                ? "#00000010"
+                : "inherit",
        alignItems: "center",
      }}
    >
@ -353,10 +353,10 @@ function TransactionAmount(props: TransactionAmountProps): VNode {
          props.currentState !== TransactionMajorState.Done
            ? "gray"
            : sign === "+"
-            ? "darkgreen"
-            : sign === "-"
-            ? "darkred"
-            : undefined,
+              ? "darkgreen"
+              : sign === "-"
+                ? "darkred"
+                : undefined,
      }}
    >
      <ExtraLargeText>