[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: render amount and limit input
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: render amount and limit input |
|
Date: |
Sun, 01 Oct 2023 17:51:00 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 372ddff91 render amount and limit input
372ddff91 is described below
commit 372ddff91798cf9247eaf045f0d0ce33694fd880
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Sun Oct 1 12:50:43 2023 -0300
render amount and limit input
---
.../demobank-ui/src/components/Cashouts/views.tsx | 5 +-
.../src/components/Transactions/views.tsx | 23 +++++----
packages/demobank-ui/src/components/app.tsx | 7 +--
packages/demobank-ui/src/context/config.ts | 52 +++++++++++++++++++
packages/demobank-ui/src/declaration.d.ts | 24 +++++++--
packages/demobank-ui/src/hooks/config.ts | 22 +++++---
packages/demobank-ui/src/pages/BankFrame.tsx | 58 +++++++++++-----------
packages/demobank-ui/src/pages/PaymentOptions.tsx | 6 +--
.../src/pages/PaytoWireTransferForm.tsx | 39 ++++++++++++---
.../demobank-ui/src/pages/WalletWithdrawForm.tsx | 4 +-
.../src/pages/WithdrawalConfirmationQuestion.tsx | 3 +-
.../demobank-ui/src/pages/admin/AccountList.tsx | 8 +--
packages/demobank-ui/src/pages/business/Home.tsx | 16 +++---
.../src/components/HistoryItem.tsx | 30 +++++------
14 files changed, 201 insertions(+), 96 deletions(-)
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx
b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 4b7649fb6..a32deb266 100644
--- 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
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx
b/packages/demobank-ui/src/components/Transactions/views.tsx
index f92c874f3..69f4369a2 100644
--- 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" }}><{i18n.str`invalid
value`}></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"
}}><{i18n.str`invalid value`}></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" }}><{i18n.str`invalid
value`}></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>
diff --git a/packages/demobank-ui/src/components/app.tsx
b/packages/demobank-ui/src/components/app.tsx
index f15a9ee6a..7cf658681 100644
--- 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>
}
diff --git a/packages/demobank-ui/src/context/config.ts
b/packages/demobank-ui/src/context/config.ts
new file mode 100644
index 000000000..a2cde18eb
--- /dev/null
+++ 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,
+ });
+};
+
diff --git a/packages/demobank-ui/src/declaration.d.ts
b/packages/demobank-ui/src/declaration.d.ts
index bd7edf033..5c55cfade 100644
--- 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.
diff --git a/packages/demobank-ui/src/hooks/config.ts
b/packages/demobank-ui/src/hooks/config.ts
index bb5134510..a3bd294db 100644
--- 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 });
}
});
}, []);
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx
b/packages/demobank-ui/src/pages/BankFrame.tsx
index 29334cae4..fc8dfd599 100644
--- 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,10 +323,10 @@ function MaybeShowDebugInfo({ info }: { info: any }):
VNode {
const [settings] = useSettings()
if (settings.showDebugInfo) {
return <pre class="whitespace-break-spaces ">
- {info}
- </pre>
+ {info}
+ </pre>
}
- return <Fragment />
+ 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)}
- {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"}
+ />
}
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx
b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index fef272831..f60ba3270 100644
--- 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">💵</div>
+ <div class="text-4xl mr-4 my-auto">💵</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">↔</div>
+ <div class="text-4xl mr-4 my-auto">↔</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>
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 785dc4264..b3fd51670 100644
--- 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>
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 7357223b7..da299b1c8 100644
--- 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 }: {
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 208d4b859..ddcd2492d 100644
--- 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>
diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx
b/packages/demobank-ui/src/pages/admin/AccountList.tsx
index f99b320a4..a6899e679 100644
--- 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>
-
- <span class="currency">{`${balance.currency}`}</span>
+ <RenderAmount value={balance}
negative={balanceIsDebit} />
</span>
)}
</td>
diff --git a/packages/demobank-ui/src/pages/business/Home.tsx
b/packages/demobank-ui/src/pages/business/Home.tsx
index 2945cb65a..1a84effcd 100644
--- 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)}
diff --git a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
index e072d2581..72881c746 100644
--- 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>
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: render amount and limit input,
gnunet <=