diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/WalletWithdrawForm.tsx')
| -rw-r--r-- | packages/demobank-ui/src/pages/WalletWithdrawForm.tsx | 183 |
1 files changed, 99 insertions, 84 deletions
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 8c41f7576..08f706919 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -20,6 +20,7 @@ import { HttpStatusCode, Logger, TranslatedString, + WithdrawUriResult, parseWithdrawUri, } from "@gnu-taler/taler-util"; import { @@ -34,6 +35,9 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; import { Amount } from "./PaytoWireTransferForm.js"; +import { useSettings } from "../hooks/settings.js"; +import { WithdrawalOperationState } from "./WithdrawalQRCode.js"; +import { Loading } from "../components/Loading.js"; const logger = new Logger("WalletWithdrawForm"); const RefAmount = forwardRef(Amount); @@ -51,8 +55,9 @@ export function WalletWithdrawForm({ }): VNode { const { i18n } = useTranslationContext(); const { createWithdrawal } = useAccessAPI(); + const [settings, updateSettings] = useSettings() - const [amountStr, setAmountStr] = useState<string | undefined>("5.00"); + const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`); const ref = useRef<HTMLInputElement>(null); useEffect(() => { if (focus) ref.current?.focus(); @@ -78,7 +83,6 @@ export function WalletWithdrawForm({ async function doStart() { if (!parsedAmount) return; try { - console.log("ASDASD") const result = await createWithdrawal({ amount: Amounts.stringify(parsedAmount), }); @@ -109,7 +113,6 @@ export function WalletWithdrawForm({ ) } } - } return (<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"> @@ -122,91 +125,103 @@ export function WalletWithdrawForm({ <i18n.Translate>After using your wallet you will be redirected here to confirm or cancel the operation.</i18n.Translate> </p> </div> - <form - class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2" - autoCapitalize="none" - autoCorrect="off" - onSubmit={e => { - e.preventDefault() - }} - > - <div class="px-4 py-6 sm:p-8"> - <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> - <div class="sm:col-span-5"> - <label for="withdraw-amount">{i18n.str`Amount`}</label> - <RefAmount - currency={limit.currency} - value={amountStr} - name="withdraw-amount" - onChange={(v) => { - setAmountStr(v); - }} - error={errors?.amount} - ref={ref} - /> - </div> - <div class="sm:col-span-5"> - <span class="isolate inline-flex rounded-md shadow-sm"> - <button type="button" - 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") - }} - > - 50.00 - </button> - <button type="button" - 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") - }} - > - - 25.00 - </button> - <button type="button" - 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") - }} - > - 10.00 - </button> - <button type="button" - 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") + + {!settings.fastWithdrawal ? + <form + class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2" + autoCapitalize="none" + autoCorrect="off" + onSubmit={e => { + e.preventDefault() + }} + > + <div class="px-4 py-6 sm:p-8"> + <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> + <div class="sm:col-span-5"> + <label for="withdraw-amount">{i18n.str`Amount`}</label> + <RefAmount + currency={limit.currency} + value={amountStr} + name="withdraw-amount" + onChange={(v) => { + setAmountStr(v); }} - > - 5.00 - </button> - </span> - </div> + error={errors?.amount} + ref={ref} + /> + </div> + <div class="sm:col-span-5"> + <span class="isolate inline-flex rounded-md shadow-sm"> + <button type="button" + 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") + }} + > + 50.00 + </button> + <button type="button" + 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") + }} + > + + 25.00 + </button> + <button type="button" + 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") + }} + > + 10.00 + </button> + <button type="button" + 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") + }} + > + 5.00 + </button> + </span> + </div> + </div> + </div> + <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> + <button type="button" class="text-sm font-semibold leading-6 text-gray-900" + onClick={onCancel} + > + <i18n.Translate>Cancel</i18n.Translate></button> + <button type="submit" + class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + // disabled={isRawPayto ? !!errorsPayto : !!errorsWire} + onClick={(e) => { + e.preventDefault() + doStart() + }} + > + <i18n.Translate>Continue</i18n.Translate> + </button> </div> - </div> - <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> - <button type="button" class="text-sm font-semibold leading-6 text-gray-900" - onClick={onCancel} - > - <i18n.Translate>Cancel</i18n.Translate></button> - <button type="submit" - class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" - // disabled={isRawPayto ? !!errorsPayto : !!errorsWire} - onClick={(e) => { - e.preventDefault() - doStart() - }} - > - <i18n.Translate>Continue</i18n.Translate> - </button> - </div> - </form> + </form> + : settings.currentWithdrawalOperationId === undefined ? + <Loading /> : + <WithdrawalOperationState + currentOperation={settings.currentWithdrawalOperationId} + currency={limit.currency} + onClose={() => { + onCancel() + }} + /> + } </div> ); } |