more ui
This commit is contained in:
parent
7d4c5a71aa
commit
b3c747151b
@ -45,14 +45,14 @@ export function CopyButton({ getContent }: { getContent: () => string }): VNode
|
||||
|
||||
if (!copied) {
|
||||
return (
|
||||
<button class="text-white" onClick={copyText} style={{ width: 32, height: 32, fontSize: "initial" }}>
|
||||
<button class="text-white" onClick={copyText} style={{ width: 16, height: 16, fontSize: "initial" }}>
|
||||
<CopyIcon />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div class="text-white" content="Copied" style={{ display: "inline-block" }}>
|
||||
<button disabled style={{ width: 32, height: 32, fontSize: "initial" }}>
|
||||
<button disabled style={{ width: 16, height: 16, fontSize: "initial" }}>
|
||||
<CopiedIcon />
|
||||
</button>
|
||||
</div>
|
||||
|
@ -24,12 +24,50 @@ import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js";
|
||||
import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js";
|
||||
import { RegistrationPage } from "../pages/RegistrationPage.js";
|
||||
import { Test } from "../pages/Test.js";
|
||||
import { useBackendContext } from "../context/backend.js";
|
||||
import { LoginForm } from "../pages/LoginForm.js";
|
||||
import { AdminPage } from "../pages/AdminPage.js";
|
||||
|
||||
export function Routing(): VNode {
|
||||
const history = createHashHistory();
|
||||
const backend = useBackendContext();
|
||||
|
||||
if (backend.state.status === "loggedOut") {
|
||||
return <BankFrame
|
||||
goToBusinessAccount={() => {
|
||||
route("/business");
|
||||
}}
|
||||
>
|
||||
<Router history={history}>
|
||||
<Route
|
||||
path="/login"
|
||||
component={() => (
|
||||
<LoginForm
|
||||
onRegister={() => {
|
||||
route("/register");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path="/register"
|
||||
component={() => (
|
||||
<RegistrationPage
|
||||
onComplete={() => {
|
||||
route("/account");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Route default component={Redirect} to="/login" />
|
||||
</Router>
|
||||
</BankFrame>
|
||||
}
|
||||
const isAdmin = backend.state.isUserAdministrator
|
||||
|
||||
return (
|
||||
<BankFrame
|
||||
account={backend.state.username}
|
||||
goToBusinessAccount={() => {
|
||||
route("/business");
|
||||
}}
|
||||
@ -69,8 +107,15 @@ export function Routing(): VNode {
|
||||
/>
|
||||
<Route
|
||||
path="/account"
|
||||
component={() => (
|
||||
<HomePage
|
||||
component={() => {
|
||||
if (isAdmin) {
|
||||
return <AdminPage
|
||||
onRegister={() => {
|
||||
route("/register");
|
||||
}}
|
||||
/>;
|
||||
} else {
|
||||
return <HomePage
|
||||
onPendingOperationFound={(wopid) => {
|
||||
route(`/operation/${wopid}`);
|
||||
}}
|
||||
@ -78,7 +123,8 @@ export function Routing(): VNode {
|
||||
route("/register");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
path="/business"
|
||||
|
@ -61,7 +61,7 @@ export function useComponentState({ account }: Props): State {
|
||||
return;
|
||||
}
|
||||
|
||||
const negative = anyItem.direction === "DBIT";
|
||||
const negative = anyItem.direction === "DEBIT";
|
||||
const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban;
|
||||
|
||||
let date = anyItem.date ? parseInt(anyItem.date, 10) : 0;
|
||||
|
@ -14,7 +14,7 @@
|
||||
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
|
||||
*/
|
||||
|
||||
import { Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
|
||||
import { Amounts, Logger, PaytoUriIBAN, TranslatedString, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
|
||||
import { useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
|
||||
import { ComponentChildren, Fragment, h, VNode } from "preact";
|
||||
import { StateUpdater, useEffect, useState } from "preact/hooks";
|
||||
@ -25,6 +25,7 @@ import { bankUiSettings } from "../settings.js";
|
||||
import { useSettings } from "../hooks/settings.js";
|
||||
import { CopyButton, CopyIcon } from "../components/CopyButton.js";
|
||||
import logo from "../assets/logo-2021.svg";
|
||||
import { useAccountDetails } from "../hooks/access.js";
|
||||
|
||||
const IS_PUBLIC_ACCOUNT_ENABLED = false;
|
||||
const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
|
||||
@ -63,7 +64,9 @@ function MaybeBusinessButton({
|
||||
export function BankFrame({
|
||||
children,
|
||||
goToBusinessAccount,
|
||||
account,
|
||||
}: {
|
||||
account: string | undefined,
|
||||
children: ComponentChildren;
|
||||
goToBusinessAccount?: () => void;
|
||||
}): VNode {
|
||||
@ -122,7 +125,6 @@ export function BankFrame({
|
||||
</div>
|
||||
|
||||
{open &&
|
||||
<Fragment>
|
||||
<div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
@ -140,7 +142,7 @@ export function BankFrame({
|
||||
<div class="px-4 sm:px-6" >
|
||||
<div class="flex items-start justify-between" >
|
||||
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">
|
||||
<i18n.Translate>Settings</i18n.Translate>
|
||||
<i18n.Translate>Preferences</i18n.Translate>
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button type="button" class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
@ -161,8 +163,6 @@ export function BankFrame({
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
||||
{/* <!-- Your content --> */}
|
||||
|
||||
<nav class="flex flex-1 flex-col" aria-label="Sidebar">
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
@ -227,18 +227,16 @@ export function BankFrame({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
</nav >
|
||||
|
||||
{true &&
|
||||
{account &&
|
||||
<header class="py-5 border-t border-indigo-300 border-opacity-25 bg-indigo-600 lg:border-t lg:border-indigo-400 lg:border-opacity-25">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class=" flex flex-wrap items-center justify-between sm:flex-nowrap">
|
||||
<h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount /></h3>
|
||||
<h3 class="text-2xl font-bold tracking-tight text-white"><WelcomeAccount account={account} /></h3>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance /></h3>
|
||||
<h3 class="text-2xl font-bold tracking-tight text-white"><AccountBalance account={account} /></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -466,17 +464,30 @@ function Footer() {
|
||||
);
|
||||
}
|
||||
|
||||
function WelcomeAccount(): VNode {
|
||||
function WelcomeAccount({ account }: { account: string }): VNode {
|
||||
const { i18n } = useTranslationContext();
|
||||
const account = "Sebastian"
|
||||
const payto: PaytoUriIBAN = parsePaytoUri("payto://iban/bank.localhost/DE955922") as PaytoUriIBAN
|
||||
|
||||
const result = useAccountDetails(account);
|
||||
if (!result.ok) return <div />
|
||||
|
||||
// const account = "Sebastian"
|
||||
const payto = parsePaytoUri(result.data.paytoUri)
|
||||
if (!payto) return <div />
|
||||
|
||||
const accountNumber = !payto.isKnown ? undefined : payto.targetType === "iban" ? payto.iban : payto.targetType === "x-taler-bank" ? payto.account : undefined;
|
||||
return <i18n.Translate>
|
||||
Welcome, {account} (<a href={stringifyPaytoUri(payto)}>{payto.iban}</a>)! <CopyButton getContent={() => stringifyPaytoUri(payto)} />
|
||||
Welcome, {account} {accountNumber !== undefined ?
|
||||
<span>
|
||||
(<a href={result.data.paytoUri}>{accountNumber}</a> <CopyButton getContent={() => result.data.paytoUri} />)
|
||||
</span>
|
||||
: <Fragment />}!
|
||||
</i18n.Translate>
|
||||
|
||||
}
|
||||
|
||||
function AccountBalance(): VNode {
|
||||
function AccountBalance({ account }: { account: string }): VNode {
|
||||
const result = useAccountDetails(account);
|
||||
if (!result.ok) return <div />
|
||||
|
||||
return <div>KUDOS 100.00</div>
|
||||
return <div>{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""} {Amounts.currencyOf(result.data.balance.amount)} {Amounts.stringifyValue(result.data.balance.amount)}</div>
|
||||
}
|
||||
|
@ -160,8 +160,7 @@ export function PaytoWireTransferForm({
|
||||
<div class="px-4 sm:px-0">
|
||||
<h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Transfer details</i18n.Translate></h2>
|
||||
<div>
|
||||
<div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
|
||||
{/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
|
||||
<div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-1 sm:gap-x-4">
|
||||
<label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (!isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
|
||||
<input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onChange={() => {
|
||||
setIsRawPayto(false)
|
||||
@ -169,14 +168,12 @@ export function PaytoWireTransferForm({
|
||||
<span class="flex flex-1">
|
||||
<span class="flex flex-col">
|
||||
<span class="block text-sm font-medium text-gray-900">
|
||||
<i18n.Translate>form</i18n.Translate>
|
||||
<i18n.Translate>using a form</i18n.Translate>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
|
||||
{/* <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" --> */}
|
||||
<label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}>
|
||||
<input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onChange={() => {
|
||||
setIsRawPayto(true)
|
||||
@ -184,7 +181,7 @@ export function PaytoWireTransferForm({
|
||||
<span class="flex flex-1">
|
||||
<span class="flex flex-col">
|
||||
<span class="block text-sm font-medium text-gray-900">
|
||||
<i18n.Translate>payto://</i18n.Translate>
|
||||
<i18n.Translate>using the payto:// format</i18n.Translate>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -325,107 +322,7 @@ export function PaytoWireTransferForm({
|
||||
</form>
|
||||
</div >
|
||||
)
|
||||
// }
|
||||
// return (
|
||||
// <div>
|
||||
// <form
|
||||
// class="pure-form"
|
||||
// name="wire-transfer-form"
|
||||
// onSubmit={(e) => {
|
||||
// e.preventDefault();
|
||||
// }}
|
||||
// >
|
||||
// <label for="iban">{i18n.str`Receiver IBAN:`}</label>
|
||||
|
||||
// <label for="subject">{i18n.str`Transfer subject:`}</label>
|
||||
|
||||
// <label for="amount">{i18n.str`Amount:`}</label>
|
||||
// <div style={{ width: "max-content", display: "flex" }}>
|
||||
// <input
|
||||
// type="text"
|
||||
// readonly
|
||||
// class="currency-indicator"
|
||||
// size={limit.currency.length}
|
||||
// maxLength={limit.currency.length}
|
||||
// tabIndex={-1}
|
||||
// style={{
|
||||
// borderTopRightRadius: 0,
|
||||
// borderBottomRightRadius: 0,
|
||||
// borderRight: 0,
|
||||
// }}
|
||||
// value={limit.currency}
|
||||
// />
|
||||
// <input
|
||||
// type="number"
|
||||
// name="amount"
|
||||
// id="amount"
|
||||
// placeholder="amount"
|
||||
// required
|
||||
// style={{
|
||||
// borderTopLeftRadius: 0,
|
||||
// borderBottomLeftRadius: 0,
|
||||
// borderLeft: 0,
|
||||
// width: 150,
|
||||
// }}
|
||||
// value={amount ?? ""}
|
||||
// onInput={(e): void => {
|
||||
// setAmount(e.currentTarget.value);
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// <ShowInputErrorLabel
|
||||
// message={errorsWire?.amount}
|
||||
// isDirty={amount !== undefined}
|
||||
// />
|
||||
// <p style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
// <input
|
||||
// type="submit"
|
||||
// class="pure-button pure-button-primary"
|
||||
// disabled={!!errorsWire}
|
||||
// value="Send"
|
||||
// onClick={async (e) => {
|
||||
// e.preventDefault();
|
||||
// if (!(iban && subject && amount)) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// }}
|
||||
// />
|
||||
// <input
|
||||
// type="button"
|
||||
// class="pure-button"
|
||||
// value="Clear"
|
||||
// onClick={async (e) => {
|
||||
// e.preventDefault();
|
||||
// setAmount(undefined);
|
||||
// setIban(undefined);
|
||||
// setSubject(undefined);
|
||||
// }}
|
||||
// />
|
||||
// </p>
|
||||
// </form>
|
||||
// <p>
|
||||
// <a
|
||||
// href="#"
|
||||
// onClick={(e) => {
|
||||
// setIsRawPayto(true);
|
||||
// e.preventDefault();
|
||||
// }}
|
||||
// >
|
||||
// {i18n.str`Want to try the raw payto://-format?`}
|
||||
// </a>
|
||||
// </p>
|
||||
// </div>
|
||||
// );
|
||||
|
||||
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <p>{i18n.str`Transfer money to account identified by payto:// URI:`}</p>
|
||||
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
export function Amount(
|
||||
{
|
||||
|
@ -78,6 +78,7 @@ export function WalletWithdrawForm({
|
||||
async function doStart() {
|
||||
if (!parsedAmount) return;
|
||||
try {
|
||||
console.log("ASDASD")
|
||||
const result = await createWithdrawal({
|
||||
amount: Amounts.stringify(parsedAmount),
|
||||
});
|
||||
@ -115,7 +116,7 @@ export function WalletWithdrawForm({
|
||||
<div class="px-4 sm:px-0">
|
||||
<h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Prepare your wallet</i18n.Translate></h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
<i18n.Translate>Upon starting you will receive the money in your digital wallet, if you don't have one please <a class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">install one from here</a></i18n.Translate>.
|
||||
<i18n.Translate>Upon starting you will receive the money in your digital wallet, if you don't have one please <a target="_blank" rel="noreferrer noopener" class="font-semibold text-gray-500 hover:text-gray-400" href="https://taler.net/en/wallet.html">install one from here</a></i18n.Translate>.
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
<i18n.Translate>After using your wallet you will be redirected here to confirm or cancel the operation.</i18n.Translate>
|
||||
@ -147,7 +148,7 @@ export function WalletWithdrawForm({
|
||||
<div class="sm:col-span-5">
|
||||
<span class="isolate inline-flex rounded-md shadow-sm">
|
||||
<button type="button"
|
||||
class="relative inline-flex px-3 py-2 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
class="relative inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setAmountStr("50.00")
|
||||
@ -156,7 +157,7 @@ export function WalletWithdrawForm({
|
||||
50.00
|
||||
</button>
|
||||
<button type="button"
|
||||
class="relative -ml-px -mr-px inline-flex px-3 py-2 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setAmountStr("25.00")
|
||||
@ -166,7 +167,7 @@ export function WalletWithdrawForm({
|
||||
25.00
|
||||
</button>
|
||||
<button type="button"
|
||||
class="relative -ml-px -mr-px inline-flex px-3 py-2 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
class="relative -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setAmountStr("10.00")
|
||||
@ -175,7 +176,7 @@ export function WalletWithdrawForm({
|
||||
10.00
|
||||
</button>
|
||||
<button type="button"
|
||||
class="relative inline-flex px-3 py-2 text-sm items-center rounded-r-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
class="relative inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setAmountStr("5.00")
|
||||
@ -210,60 +211,3 @@ export function WalletWithdrawForm({
|
||||
);
|
||||
}
|
||||
|
||||
// export function Amount(
|
||||
// {
|
||||
// currency,
|
||||
// value,
|
||||
// error,
|
||||
// onChange,
|
||||
// }: {
|
||||
// error?: string;
|
||||
// currency: string;
|
||||
// value: string | undefined;
|
||||
// onChange?: (s: string) => void;
|
||||
// },
|
||||
// ref: Ref<HTMLInputElement>,
|
||||
// ): VNode {
|
||||
// return (
|
||||
// <div style={{ width: "max-content" }}>
|
||||
// <div>
|
||||
// <input
|
||||
// type="text"
|
||||
// readonly
|
||||
// class="currency-indicator"
|
||||
// size={currency.length}
|
||||
// maxLength={currency.length}
|
||||
// tabIndex={-1}
|
||||
// style={{
|
||||
// borderTopRightRadius: 0,
|
||||
// borderBottomRightRadius: 0,
|
||||
// borderRight: 0,
|
||||
// }}
|
||||
// value={currency}
|
||||
// />
|
||||
// <input
|
||||
// type="number"
|
||||
// ref={ref}
|
||||
// name="amount"
|
||||
// id="amount"
|
||||
// placeholder="0"
|
||||
// style={{
|
||||
// borderTopLeftRadius: 0,
|
||||
// borderBottomLeftRadius: 0,
|
||||
// borderLeft: 0,
|
||||
// width: 150,
|
||||
// color: "black",
|
||||
// }}
|
||||
// value={value ?? ""}
|
||||
// disabled={!onChange}
|
||||
// onInput={(e): void => {
|
||||
// if (onChange) {
|
||||
// onChange(e.currentTarget.value);
|
||||
// }
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// <ShowInputErrorLabel message={error} isDirty={value !== undefined} />
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
@ -143,7 +143,7 @@ export function WithdrawalConfirmationQuestion({
|
||||
<Fragment>
|
||||
<div class="bg-white shadow sm:rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900">
|
||||
<h3 class="text-base font-semibold text-gray-900">
|
||||
<i18n.Translate>Confirm the withdrawal operation</i18n.Translate>
|
||||
</h3>
|
||||
<div class="mt-2 max-w-xl text-sm text-gray-500">
|
||||
@ -203,7 +203,7 @@ export function WithdrawalConfirmationQuestion({
|
||||
|
||||
<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">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2>
|
||||
<h2 class="text-base font-semibold text-gray-900"><i18n.Translate>Answer the next question to authorize the wire transfer</i18n.Translate></h2>
|
||||
</div>
|
||||
<form
|
||||
class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"
|
||||
@ -264,7 +264,7 @@ export function WithdrawalConfirmationQuestion({
|
||||
</div>
|
||||
<div class="px-4 mt-4 ">
|
||||
<div class="w-full">
|
||||
<div class="px-4 sm:px-0">
|
||||
<div class="px-4 sm:px-0 text-sm">
|
||||
<p><i18n.Translate>Wire transfer details</i18n.Translate></p>
|
||||
</div>
|
||||
<div class="mt-6 border-t border-gray-100">
|
||||
@ -313,7 +313,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">Withdrawal identification</dt>
|
||||
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{details.reserve}</dd>
|
||||
<dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0 break-words">{details.reserve}</dd>
|
||||
</div>
|
||||
<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>
|
||||
|
Loading…
Reference in New Issue
Block a user