diff options
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" }}><{i18n.str`invalid value`}></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> |