[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 05/20: more ui
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] 05/20: more ui |
|
Date: |
Mon, 25 Sep 2023 19:51:09 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit b3c747151bb3f50d28bf6205cafa4b7dd6ae2b1c
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Sep 21 09:41:07 2023 -0300
more ui
---
packages/demobank-ui/src/components/CopyButton.tsx | 4 +-
packages/demobank-ui/src/components/Routing.tsx | 66 +++++-
.../src/components/Transactions/state.ts | 2 +-
packages/demobank-ui/src/pages/BankFrame.tsx | 227 +++++++++++----------
.../src/pages/PaytoWireTransferForm.tsx | 111 +---------
.../demobank-ui/src/pages/WalletWithdrawForm.tsx | 70 +------
.../src/pages/WithdrawalConfirmationQuestion.tsx | 8 +-
7 files changed, 193 insertions(+), 295 deletions(-)
diff --git a/packages/demobank-ui/src/components/CopyButton.tsx
b/packages/demobank-ui/src/components/CopyButton.tsx
index 97ccbf2bf..b36de770e 100644
--- a/packages/demobank-ui/src/components/CopyButton.tsx
+++ b/packages/demobank-ui/src/components/CopyButton.tsx
@@ -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>
diff --git a/packages/demobank-ui/src/components/Routing.tsx
b/packages/demobank-ui/src/components/Routing.tsx
index 2c532e863..890058a9b 100644
--- a/packages/demobank-ui/src/components/Routing.tsx
+++ b/packages/demobank-ui/src/components/Routing.tsx
@@ -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,16 +107,24 @@ export function Routing(): VNode {
/>
<Route
path="/account"
- component={() => (
- <HomePage
- onPendingOperationFound={(wopid) => {
- route(`/operation/${wopid}`);
- }}
- onRegister={() => {
- route("/register");
- }}
- />
- )}
+ component={() => {
+ if (isAdmin) {
+ return <AdminPage
+ onRegister={() => {
+ route("/register");
+ }}
+ />;
+ } else {
+ return <HomePage
+ onPendingOperationFound={(wopid) => {
+ route(`/operation/${wopid}`);
+ }}
+ onRegister={() => {
+ route("/register");
+ }}
+ />
+ }
+ }}
/>
<Route
path="/business"
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts
b/packages/demobank-ui/src/components/Transactions/state.ts
index 09c039055..d2a512b08 100644
--- a/packages/demobank-ui/src/components/Transactions/state.ts
+++ b/packages/demobank-ui/src/components/Transactions/state.ts
@@ -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;
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx
b/packages/demobank-ui/src/pages/BankFrame.tsx
index e682085ae..80a8224d4 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -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,123 +125,118 @@ export function BankFrame({
</div>
{open &&
- <Fragment>
- <div class="relative z-10" aria-labelledby="slide-over-title"
role="dialog" aria-modal="true"
- onClick={() => {
- setOpen(false)
- }}>
- <div class="fixed inset-0"></div>
-
- <div class="fixed inset-0 overflow-hidden">
- <div class="absolute inset-0 overflow-hidden">
- <div class="pointer-events-none fixed inset-y-0 right-0 flex
max-w-full pl-10">
- <div class="pointer-events-auto w-screen max-w-md" >
- <div class="flex h-full flex-col overflow-y-scroll
bg-white py-6 shadow-xl" onClick={(e) => {
- //do not trigger close if clicking inside the sidebar
- e.stopPropagation();
- }}>
- <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>
- </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"
- onClick={(e) => {
- setOpen(false)
- }}
-
- >
- <span class="absolute -inset-2.5"></span>
- <span class="sr-only">
- <i18n.Translate>Close panel</i18n.Translate>
- </span>
- <svg class="h-6 w-6" fill="none" viewBox="0 0
24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round"
stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
- </svg>
- </button>
- </div>
+ <div class="relative z-10" aria-labelledby="slide-over-title"
role="dialog" aria-modal="true"
+ onClick={() => {
+ setOpen(false)
+ }}>
+ <div class="fixed inset-0"></div>
+
+ <div class="fixed inset-0 overflow-hidden">
+ <div class="absolute inset-0 overflow-hidden">
+ <div class="pointer-events-none fixed inset-y-0 right-0 flex
max-w-full pl-10">
+ <div class="pointer-events-auto w-screen max-w-md" >
+ <div class="flex h-full flex-col overflow-y-scroll
bg-white py-6 shadow-xl" onClick={(e) => {
+ //do not trigger close if clicking inside the sidebar
+ e.stopPropagation();
+ }}>
+ <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>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"
+ onClick={(e) => {
+ setOpen(false)
+ }}
+
+ >
+ <span class="absolute -inset-2.5"></span>
+ <span class="sr-only">
+ <i18n.Translate>Close panel</i18n.Translate>
+ </span>
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24
24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round"
stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+ </svg>
+ </button>
</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>
- <ul role="list" class="-mx-2 space-y-1">
- <li>
- <a href="#"
- class="text-gray-700
hover:text-indigo-600 hover:bg-gray-100 group flex gap-x-3 rounded-md p-2
text-sm leading-6 font-semibold"
- onClick={() => {
- backend.logOut();
- setOpen(false)
-
updateSettings("currentWithdrawalOperationId", undefined);
- }}
- >
- <svg class="h-6 w-6 shrink-0
text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
- <path stroke-linecap="round"
stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591
0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125
1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125
1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
- </svg>
- Log out
- {/* <span class="ml-auto w-9 min-w-max
whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs
font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200"
aria-hidden="true">5</span> */}
- </a>
- </li>
- <li>
- <div class="flex items-center
justify-between">
- <span class="flex flex-grow flex-col">
- <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
- <i18n.Translate>Show withdrawal
confirmation</i18n.Translate>
- </span>
+ </div>
+ <div class="relative mt-6 flex-1 px-4 sm:px-6">
+ <nav class="flex flex-1 flex-col" aria-label="Sidebar">
+ <ul role="list" class="flex flex-1 flex-col gap-y-7">
+ <li>
+ <ul role="list" class="-mx-2 space-y-1">
+ <li>
+ <a href="#"
+ class="text-gray-700 hover:text-indigo-600
hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6
font-semibold"
+ onClick={() => {
+ backend.logOut();
+ setOpen(false)
+
updateSettings("currentWithdrawalOperationId", undefined);
+ }}
+ >
+ <svg class="h-6 w-6 shrink-0
text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
+ <path stroke-linecap="round"
stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591
0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125
1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125
1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+ </svg>
+ Log out
+ {/* <span class="ml-auto w-9 min-w-max
whitespace-nowrap rounded-full bg-gray-50 px-2.5 py-0.5 text-center text-xs
font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200"
aria-hidden="true">5</span> */}
+ </a>
+ </li>
+ <li>
+ <div class="flex items-center
justify-between">
+ <span class="flex flex-grow flex-col">
+ <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
+ <i18n.Translate>Show withdrawal
confirmation</i18n.Translate>
</span>
- <button type="button"
data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
-
- onClick={() => {
-
console.log(settings.showWithdrawalSuccess)
-
updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
- }}>
- <span aria-hidden="true"
data-enabled={settings.showWithdrawalSuccess} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
- </button>
- </div>
- </li>
- </ul>
- </li>
-
-
-
- <li class="sm:hidden">
- <div class="text-xs font-semibold leading-6
text-gray-400">
- <i18n.Translate>Sites</i18n.Translate>
- </div>
- <ul role="list" class="-mx-2 mt-2 space-y-1">
- {bankUiSettings.demoSites.map(([name, url])
=> {
- return <a href={url} target="_blank"
rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600
hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6
font-semibold">
- <span class="flex h-6 w-6 shrink-0
items-center justify-center rounded-lg border text-[0.625rem] font-medium
bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600
group-hover:text-indigo-600">></span>
- <span class="truncate">{name}</span>
- </a>
- })}
- </ul>
- </li>
- </ul>
- </nav>
- </div>
+ </span>
+ <button type="button"
data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
+
+ onClick={() => {
+
console.log(settings.showWithdrawalSuccess)
+
updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
+ }}>
+ <span aria-hidden="true"
data-enabled={settings.showWithdrawalSuccess} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
+ </button>
+ </div>
+ </li>
+ </ul>
+ </li>
+
+
+
+ <li class="sm:hidden">
+ <div class="text-xs font-semibold leading-6
text-gray-400">
+ <i18n.Translate>Sites</i18n.Translate>
+ </div>
+ <ul role="list" class="-mx-2 mt-2 space-y-1">
+ {bankUiSettings.demoSites.map(([name, url]) =>
{
+ return <a href={url} target="_blank"
rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600
hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6
font-semibold">
+ <span class="flex h-6 w-6 shrink-0
items-center justify-center rounded-lg border text-[0.625rem] font-medium
bg-white text-gray-400 border-gray-200 group-hover:border-indigo-600
group-hover:text-indigo-600">></span>
+ <span class="truncate">{name}</span>
+ </a>
+ })}
+ </ul>
+ </li>
+ </ul>
+ </nav>
</div>
</div>
</div>
</div>
</div>
</div>
-
- </Fragment>
+ </div>
}
</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>
}
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 5e0624cbf..cdaf363e3 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -151,7 +151,7 @@ export function PaytoWireTransferForm({
? error.message
: JSON.stringify(error)) as TranslatedString
)
-}
+ }
}
}
@@ -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(
{
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 6574ec934..8c41f7576 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -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),
});
@@ -106,7 +107,7 @@ export function WalletWithdrawForm({
? error.message
: JSON.stringify(error)) as TranslatedString
)
-}
+ }
}
}
@@ -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>
-// );
-// }
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 80e7a78ac..ced152feb 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -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>
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
- [taler-wallet-core] branch master updated (e628ca1af -> ea0738ccd), gnunet, 2023/09/25
- [taler-wallet-core] 04/20: more ui, gnunet, 2023/09/25
- [taler-wallet-core] 03/20: more ui, gnunet, 2023/09/25
- [taler-wallet-core] 08/20: preparing for the new token api, gnunet, 2023/09/25
- [taler-wallet-core] 10/20: more ui, gnunet, 2023/09/25
- [taler-wallet-core] 06/20: admin refactor, gnunet, 2023/09/25
- [taler-wallet-core] 02/20: more ui stuff, moved forms to util, gnunet, 2023/09/25
- [taler-wallet-core] 13/20: default to content type json, gnunet, 2023/09/25
- [taler-wallet-core] 01/20: some ui, gnunet, 2023/09/25
- [taler-wallet-core] 05/20: more ui,
gnunet <=
- [taler-wallet-core] 09/20: tx group by date, gnunet, 2023/09/25
- [taler-wallet-core] 19/20: check config number, gnunet, 2023/09/25
- [taler-wallet-core] 17/20: new libeufin api, gnunet, 2023/09/25
- [taler-wallet-core] 16/20: do not reuse the same map instance, gnunet, 2023/09/25
- [taler-wallet-core] 14/20: towards new core bank api, gnunet, 2023/09/25
- [taler-wallet-core] 18/20: more ui: pagination, gnunet, 2023/09/25
- [taler-wallet-core] 11/20: more ui, gnunet, 2023/09/25
- [taler-wallet-core] 12/20: more ui, gnunet, 2023/09/25
- [taler-wallet-core] 15/20: more ui, gnunet, 2023/09/25
- [taler-wallet-core] 20/20: better /config error, gnunet, 2023/09/25