taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

more ui

Browse Source
This commit is contained in:
Sebastian 2023-09-21 09:41:07 -03:00
parent 7d4c5a71aa
commit b3c747151b
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
7 changed files with 187 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/demobank-ui/src/components/CopyButton.tsx
View File

@ -45,14 +45,14 @@ export function CopyButton({ getContent }: { getContent: () => string }): VNode
if (!copied) { if (!copied) {
return ( 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 /> <CopyIcon />
</button> </button>
); );
} }
return ( return (
<div class="text-white" content="Copied" style={{ display: "inline-block" }}> <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 /> <CopiedIcon />
</button> </button>
</div> </div>

66
packages/demobank-ui/src/components/Routing.tsx
View File

@ -24,12 +24,50 @@ import { HomePage, WithdrawalOperationPage } from "../pages/HomePage.js";
import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js"; import { PublicHistoriesPage } from "../pages/PublicHistoriesPage.js";
import { RegistrationPage } from "../pages/RegistrationPage.js"; import { RegistrationPage } from "../pages/RegistrationPage.js";
import { Test } from "../pages/Test.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 { export function Routing(): VNode {
const history = createHashHistory(); 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 ( return (
<BankFrame <BankFrame
account={backend.state.username}
goToBusinessAccount={() => { goToBusinessAccount={() => {
route("/business"); route("/business");
}} }}
@ -69,16 +107,24 @@ export function Routing(): VNode {
/> />
<Route <Route
path="/account" path="/account"
component={() => ( component={() => {
<HomePage if (isAdmin) {
onPendingOperationFound={(wopid) => { return <AdminPage
route(`/operation/${wopid}`); onRegister={() => {
}} route("/register");
onRegister={() => { }}
route("/register"); />;
}} } else {
/> return <HomePage
)} onPendingOperationFound={(wopid) => {
route(`/operation/${wopid}`);
}}
onRegister={() => {
route("/register");
}}
/>
}
}}
/> />
<Route <Route
path="/business" path="/business"

2
packages/demobank-ui/src/components/Transactions/state.ts
View File

@ -61,7 +61,7 @@ export function useComponentState({ account }: Props): State {
return; return;
} }
const negative = anyItem.direction === "DBIT"; const negative = anyItem.direction === "DEBIT";
const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban; const counterpart = negative ? anyItem.creditorIban : anyItem.debtorIban;
let date = anyItem.date ? parseInt(anyItem.date, 10) : 0; let date = anyItem.date ? parseInt(anyItem.date, 10) : 0;

215
packages/demobank-ui/src/pages/BankFrame.tsx
View File

@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> 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 { useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
import { ComponentChildren, Fragment, h, VNode } from "preact"; import { ComponentChildren, Fragment, h, VNode } from "preact";
import { StateUpdater, useEffect, useState } from "preact/hooks"; import { StateUpdater, useEffect, useState } from "preact/hooks";
@ -25,6 +25,7 @@ import { bankUiSettings } from "../settings.js";
import { useSettings } from "../hooks/settings.js"; import { useSettings } from "../hooks/settings.js";
import { CopyButton, CopyIcon } from "../components/CopyButton.js"; import { CopyButton, CopyIcon } from "../components/CopyButton.js";
import logo from "../assets/logo-2021.svg"; import logo from "../assets/logo-2021.svg";
import { useAccountDetails } from "../hooks/access.js";
const IS_PUBLIC_ACCOUNT_ENABLED = false; const IS_PUBLIC_ACCOUNT_ENABLED = false;
const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined; const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
@ -63,7 +64,9 @@ function MaybeBusinessButton({
export function BankFrame({ export function BankFrame({
children, children,
goToBusinessAccount, goToBusinessAccount,
account,
}: { }: {
account: string | undefined,
children: ComponentChildren; children: ComponentChildren;
goToBusinessAccount?: () => void; goToBusinessAccount?: () => void;
}): VNode { }): VNode {
@ -122,123 +125,118 @@ export function BankFrame({
</div> </div>
{open && {open &&
<Fragment> <div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"
<div class="relative z-10" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" onClick={() => {
onClick={() => { setOpen(false)
setOpen(false) }}>
}}> <div class="fixed inset-0"></div>
<div class="fixed inset-0"></div>
<div class="fixed inset-0 overflow-hidden"> <div class="fixed inset-0 overflow-hidden">
<div class="absolute 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-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="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) => { <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 //do not trigger close if clicking inside the sidebar
e.stopPropagation(); e.stopPropagation();
}}> }}>
<div class="px-4 sm:px-6" > <div class="px-4 sm:px-6" >
<div class="flex items-start justify-between" > <div class="flex items-start justify-between" >
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title"> <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> </h2>
<div class="ml-3 flex h-7 items-center"> <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" <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) => { onClick={(e) => {
setOpen(false) setOpen(false)
}} }}
> >
<span class="absolute -inset-2.5"></span> <span class="absolute -inset-2.5"></span>
<span class="sr-only"> <span class="sr-only">
<i18n.Translate>Close panel</i18n.Translate> <i18n.Translate>Close panel</i18n.Translate>
</span> </span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div>
</div> </div>
</div> </div>
<div class="relative mt-6 flex-1 px-4 sm:px-6"> </div>
{/* <!-- Your content --> */} <div class="relative mt-6 flex-1 px-4 sm:px-6">
<nav class="flex flex-1 flex-col" aria-label="Sidebar">
<nav class="flex flex-1 flex-col" aria-label="Sidebar"> <ul role="list" class="flex flex-1 flex-col gap-y-7">
<ul role="list" class="flex flex-1 flex-col gap-y-7"> <li>
<li> <ul role="list" class="-mx-2 space-y-1">
<ul role="list" class="-mx-2 space-y-1"> <li>
<li> <a href="#"
<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"
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={() => {
onClick={() => { backend.logOut();
backend.logOut(); setOpen(false)
setOpen(false) updateSettings("currentWithdrawalOperationId", undefined);
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">
<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" />
<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>
</svg> Log out
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> */}
{/* <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>
</a> </li>
</li> <li>
<li> <div class="flex items-center justify-between">
<div class="flex items-center justify-between"> <span class="flex flex-grow flex-col">
<span class="flex flex-grow flex-col"> <span class="text-sm text-black font-medium leading-6 " id="availability-label">
<span class="text-sm text-black font-medium leading-6 " id="availability-label"> <i18n.Translate>Show withdrawal confirmation</i18n.Translate>
<i18n.Translate>Show withdrawal confirmation</i18n.Translate>
</span>
</span> </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" </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={() => { onClick={() => {
console.log(settings.showWithdrawalSuccess) console.log(settings.showWithdrawalSuccess)
updateSettings("showWithdrawalSuccess", !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> <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> </button>
</div> </div>
</li> </li>
</ul> </ul>
</li> </li>
<li class="sm:hidden"> <li class="sm:hidden">
<div class="text-xs font-semibold leading-6 text-gray-400"> <div class="text-xs font-semibold leading-6 text-gray-400">
<i18n.Translate>Sites</i18n.Translate> <i18n.Translate>Sites</i18n.Translate>
</div> </div>
<ul role="list" class="-mx-2 mt-2 space-y-1"> <ul role="list" class="-mx-2 mt-2 space-y-1">
{bankUiSettings.demoSites.map(([name, url]) => { {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"> 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">&gt;</span> <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">&gt;</span>
<span class="truncate">{name}</span> <span class="truncate">{name}</span>
</a> </a>
})} })}
</ul> </ul>
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</Fragment>
} }
</nav > </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"> <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="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"> <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> <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> </div>
</div> </div>
@ -466,17 +464,30 @@ function Footer() {
); );
} }
function WelcomeAccount(): VNode { function WelcomeAccount({ account }: { account: string }): VNode {
const { i18n } = useTranslationContext(); 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> 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> </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>
} }

111
packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
View File

@ -151,7 +151,7 @@ export function PaytoWireTransferForm({
? error.message ? error.message
: JSON.stringify(error)) as TranslatedString : JSON.stringify(error)) as TranslatedString
) )
} }
} }
} }
@ -160,8 +160,7 @@ export function PaytoWireTransferForm({
<div class="px-4 sm:px-0"> <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> <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Transfer details</i18n.Translate></h2>
<div> <div>
<div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4"> <div class="px-4 mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-1 sm:gap-x-4">
{/* <!-- 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")}> <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={() => { <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) setIsRawPayto(false)
@ -169,14 +168,12 @@ export function PaytoWireTransferForm({
<span class="flex flex-1"> <span class="flex flex-1">
<span class="flex flex-col"> <span class="flex flex-col">
<span class="block text-sm font-medium text-gray-900"> <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> </span>
</span> </span>
</label> </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")}> <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={() => { <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) setIsRawPayto(true)
@ -184,7 +181,7 @@ export function PaytoWireTransferForm({
<span class="flex flex-1"> <span class="flex flex-1">
<span class="flex flex-col"> <span class="flex flex-col">
<span class="block text-sm font-medium text-gray-900"> <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> </span>
</span> </span>
@ -325,107 +322,7 @@ export function PaytoWireTransferForm({
</form> </form>
</div > </div >
) )
// }
// return (
// <div>
// <form
// class="pure-form"
// name="wire-transfer-form"
// onSubmit={(e) => {
// e.preventDefault();
// }}
// >
// <label for="iban">{i18n.str`Receiver IBAN:`}</label>&nbsp;
// <label for="subject">{i18n.str`Transfer subject:`}</label>&nbsp;
// <label for="amount">{i18n.str`Amount:`}</label>&nbsp;
// <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( export function Amount(
{ {

70
packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
View File

@ -78,6 +78,7 @@ export function WalletWithdrawForm({
async function doStart() { async function doStart() {
if (!parsedAmount) return; if (!parsedAmount) return;
try { try {
console.log("ASDASD")
const result = await createWithdrawal({ const result = await createWithdrawal({
amount: Amounts.stringify(parsedAmount), amount: Amounts.stringify(parsedAmount),
}); });
@ -106,7 +107,7 @@ export function WalletWithdrawForm({
? error.message ? error.message
: JSON.stringify(error)) as TranslatedString : JSON.stringify(error)) as TranslatedString
) )
} }
} }
} }
@ -115,7 +116,7 @@ export function WalletWithdrawForm({
<div class="px-4 sm:px-0"> <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> <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"> <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>
<p class="mt-1 text-sm text-gray-500"> <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> <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"> <div class="sm:col-span-5">
<span class="isolate inline-flex rounded-md shadow-sm"> <span class="isolate inline-flex rounded-md shadow-sm">
<button type="button" <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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setAmountStr("50.00") setAmountStr("50.00")
@ -156,7 +157,7 @@ export function WalletWithdrawForm({
50.00 50.00
</button> </button>
<button type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setAmountStr("25.00") setAmountStr("25.00")
@ -166,7 +167,7 @@ export function WalletWithdrawForm({
25.00 25.00
</button> </button>
<button type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setAmountStr("10.00") setAmountStr("10.00")
@ -175,7 +176,7 @@ export function WalletWithdrawForm({
10.00 10.00
</button> </button>
<button type="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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
setAmountStr("5.00") 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>
// );
// }

8
packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
View File

@ -143,7 +143,7 @@ export function WithdrawalConfirmationQuestion({
<Fragment> <Fragment>
<div class="bg-white shadow sm:rounded-lg"> <div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6"> <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> <i18n.Translate>Confirm the withdrawal operation</i18n.Translate>
</h3> </h3>
<div class="mt-2 max-w-xl text-sm text-gray-500"> <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="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"> <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> </div>
<form <form
class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2" 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>
<div class="px-4 mt-4 "> <div class="px-4 mt-4 ">
<div class="w-full"> <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> <p><i18n.Translate>Wire transfer details</i18n.Translate></p>
</div> </div>
<div class="mt-6 border-t border-gray-100"> <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"> <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> <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>
<div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <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> <dt class="text-sm font-medium leading-6 text-gray-900">Amount</dt>