@opexa/portal-components 0.0.29 → 0.0.30

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositForm.jsx

@@ -1,197 +0,0 @@
-import { Portal } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useAvailablePromosQuery, useDepositsCountQuery, useDisclosure, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronDownIcon, ChevronUpIcon, XIcon, } from '../../../../icons/index.js';
-import { AlertDialog, Button, Field, NumberInput } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
-import { AmountChoices } from '../../AmountChoices';
-import { AvailablePromos } from '../AvailablePromos';
-import { useQRPHDepositContext } from './QRPHDepositContext';
-export function QRPHDepositForm() {
-    const context = useQRPHDepositContext();
-    const disclosure = useDisclosure();
-    const depositsCountQuery = useDepositsCountQuery();
-    const depositsCount = depositsCountQuery.data ?? 0;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.qrphDepositGatewaySettings;
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const minimumAmount = depositsCount <= 0
-        ? parseDecimal(paymentSettingsQuery.data?.minimumFirstDepositAmount, 0)
-        : parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const promosQuery = useAvailablePromosQuery();
-    const promos = promosQuery.data ?? [];
-    const definition = z
-        .object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        promo: z.string().optional().nullable(),
-    })
-        .superRefine((value, ctx) => {
-        const promo = promos.find((o) => o.id === value.promo);
-        const promoMinAmount = parseDecimal(promo?.minimumDepositAmount, 0);
-        const promoMaxAmount = parseDecimal(promo?.maximumDepositAmount, 0);
-        const amount = parseDecimal(value.amount, 0);
-        if (promo && amount < promoMinAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Minimum amount for this promo is ${promoMinAmount.toLocaleString()}`,
-            });
-        }
-        if (promo && amount > promoMaxAmount) {
-            ctx.addIssue({
-                path: ['amount'],
-                code: z.ZodIssueCode.custom,
-                message: `Maximum amount for this promo is ${promoMaxAmount}`,
-            });
-        }
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            promo: null,
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                promo: null,
-            });
-        }
-    }, [form, minimumAmount]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        context.generateQrCode({
-            amount: data.amount.toString(),
-            promo: data.promo ?? undefined,
-        }, {
-            onSuccess() {
-                form.reset();
-            },
-        });
-    });
-    return (<form onSubmit={handleSubmit} noValidate>
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount}>
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to deposit
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Controller control={form.control} name="promo" render={(o) => (<AvailablePromos className="mt-4xl" value={o.field.value} onChange={o.field.onChange}/>)}/>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-      <Button type="submit" className="mt-4.5" onClick={async (e) => {
-            const ok = await form.trigger('amount');
-            if (!ok)
-                return;
-            if (promos.length <= 0)
-                return;
-            if (form.getValues('promo'))
-                return;
-            e.preventDefault();
-            disclosure.setOpen(true);
-        }}>
-        Deposit
-      </Button>
-
-      <AlertDialog.Root role="alertdialog" open={disclosure.open} onOpenChange={(details) => {
-            disclosure.setOpen(details.open);
-        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
-        <Portal>
-          <AlertDialog.Backdrop className="!z-[calc(var(--z-dialog)+10)]"/>
-          <AlertDialog.Positioner className="!z-[calc(var(--z-dialog)+25)]">
-            <AlertDialog.Content>
-              <AlertDialog.Header>
-                <div className="flex size-12 items-center justify-center rounded-full bg-[#FEE4E2] text-[#D92D20]">
-                  <AlertCircleIcon />
-                </div>
-                <AlertDialog.CloseTrigger>
-                  <XIcon />
-                </AlertDialog.CloseTrigger>
-              </AlertDialog.Header>
-              <AlertDialog.Body>
-                <AlertDialog.Title>
-                  Submit deposit request without promo?
-                </AlertDialog.Title>
-                <AlertDialog.Description>
-                  You haven&rsquo;t selected a promo. Are you sure you want to
-                  proceed without one?
-                </AlertDialog.Description>
-              </AlertDialog.Body>
-              <AlertDialog.Footer>
-                <Button variant="outline" colorScheme="gray" onClick={() => {
-            disclosure.setOpen(false);
-        }}>
-                  Cancel
-                </Button>
-                <Button onClick={() => {
-            handleSubmit();
-            disclosure.setOpen(false);
-        }}>
-                  Proceed
-                </Button>
-              </AlertDialog.Footer>
-            </AlertDialog.Content>
-          </AlertDialog.Positioner>
-        </Portal>
-      </AlertDialog.Root>
-    </form>);
-}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositLoading.jsx

@@ -1,14 +0,0 @@
-import { SpinnerIcon } from '../../../../icons/index.js';
-export function QRPHDepositLoading() {
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <SpinnerIcon className="mx-auto size-8 lg:size-10"/>
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        Generating QR Code
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Please hold tight as we verify the account details and amount. Once
-        verified, a QRPH code will be displayed for you to scan and complete the
-        transaction.
-      </p>
-    </div>);
-}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositQrCode.jsx

@@ -1,104 +0,0 @@
-import { Portal, QrCode } from '@ark-ui/react';
-import Image from 'next/image';
-import { QrCode02Icon, SpinnerIcon, XIcon } from '../../../../icons/index.js';
-import qrphIcon from '../../../../images/qrph-icon.png';
-import { Button, Dialog } from '../../../../ui/index.js';
-import { useQRPHDepositContext } from './QRPHDepositContext';
-export function QRPHDepositQrCode() {
-    const context = useQRPHDepositContext();
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        QR Code
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Scan the QR code below with your banking app, or upload it to complete
-        your deposit.
-      </p>
-      <QrCode.Root value={context.qrCode ?? ''} className="border-gray-200 mx-auto mt-6 w-[12.5rem] rounded-lg border bg-white p-5 lg:w-[13rem] lg:p-6">
-        <div className="relative">
-          <QrCode.Frame className="border-gray-200 mx-auto size-[10rem] rounded-[0.25rem] border">
-            <QrCode.Pattern />
-          </QrCode.Frame>
-          <QrCode.Overlay className="bg-white p-0.5">
-            <Image src={qrphIcon} alt="" className="size-8" width={40} height={40}/>
-          </QrCode.Overlay>
-        </div>
-        <QrCode.DownloadTrigger fileName={`qrcode-${new Date().getTime()}`} mimeType="image/png" className="text-gray-900 mt-5 block w-full text-center text-sm font-semibold">
-          Download QR Code
-        </QrCode.DownloadTrigger>
-      </QrCode.Root>
-
-      {context.view === 'QR_CODE' && (<div className="mt-6 flex flex-col gap-4 lg:flex-row">
-          <Button size="sm" variant="outline" colorScheme="gray" onClick={() => {
-                context.reset();
-            }}>
-            Generate New QR Code
-          </Button>
-          <Button size="sm" onClick={() => {
-                context.verify();
-            }}>
-            Confirm Deposit
-          </Button>
-        </div>)}
-
-      {context.view === 'VERIFYING' && (<div className="border-gray-200 mt-6 rounded-lg border bg-white p-4 lg:p-6">
-          <SpinnerIcon className="mx-auto size-6 lg:size-8"/>
-          <p className="mt-5 text-center font-semibold lg:text-lg">
-            Processing your deposit
-          </p>
-          <p className="text-gray-700 mx-auto mt-2 text-center text-xs lg:text-sm">
-            Your deposit is being processed. <br />
-            Please hold tight as we verify the account details and amount.
-          </p>
-        </div>)}
-
-      <Instruction />
-    </div>);
-}
-function Instruction() {
-    return (<p className="text-gray-500 mt-6 text-center text-xs">
-      Need help using the QR Code?{' '}
-      <Dialog.Root lazyMount unmountOnExit>
-        <Dialog.Trigger className="text-blue-500">
-          See instructions
-        </Dialog.Trigger>
-        <Portal>
-          <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+2)]"/>
-          <Dialog.Positioner className="!z-[calc(var(--z-dialog)+3)] flex items-center justify-center">
-            <Dialog.Content className="mx-auto w-[calc(100%-2rem)] rounded-lg bg-white p-4xl lg:w-[33.625rem]">
-              <Dialog.CloseTrigger>
-                <XIcon />
-              </Dialog.CloseTrigger>
-
-              <Dialog.Body>
-                <div className="flex items-center gap-xl">
-                  <div className="border-gray-200 flex size-11 items-center justify-center rounded-lg border">
-                    <QrCode02Icon className="text-gray-600 size-6"/>
-                  </div>
-                  <Dialog.Title className="text-lg font-semibold">
-                    How to Use the QR Code for Payment
-                  </Dialog.Title>
-                </div>
-
-                <Dialog.Description className="mt-5">
-                  Follow these simple steps to complete your transaction:
-                </Dialog.Description>
-
-                <ol className="mt-3 list-inside list-decimal space-y-3">
-                  <li>
-                    Open your preferred banking or EMI mobile app and select
-                    &apos;Transfer Money&apos; or &apos;Pay via QR&apos;
-                  </li>
-                  <li>
-                    Scan or upload the generated QR Ph code. If prompted by the
-                    app, enter the amount to be sent.
-                  </li>
-                  <li>Proceed with the transfer or payment.</li>
-                </ol>
-              </Dialog.Body>
-            </Dialog.Content>
-          </Dialog.Positioner>
-        </Portal>
-      </Dialog.Root>
-    </p>);
-}

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositSuccess.jsx

@@ -1,19 +0,0 @@
-import { CheckCircleBrokenIcon } from '../../../../icons/index.js';
-import { Button } from '../../../../ui/index.js';
-import { useQRPHDepositContext } from './QRPHDepositContext';
-export function QRPHDepositSuccess() {
-    const context = useQRPHDepositContext();
-    return (<div className="bg-gray-50 rounded-lg px-10 py-12 lg:p-16">
-      <CheckCircleBrokenIcon className="text-green-600 mx-auto size-8 lg:size-10"/>
-      <p className="mt-5 text-center text-lg font-semibold lg:text-xl">
-        Deposit Successful!
-      </p>
-      <p className="text-gray-700 mt-3 text-center text-sm lg:text-base">
-        Your funds have been successfully added and are now ready to use in your
-        account.
-      </p>
-      <Button size="sm" variant="outline" colorScheme="gray" className="mx-auto mt-6 w-fit" onClick={() => context.reset()}>
-        Generate New QR Code
-      </Button>
-    </div>);
-}

package/dist/components/DepositWithdrawal/DepositWithdrawal.jsx

@@ -1,95 +0,0 @@
-'use client';
-import { Portal } from '@ark-ui/react';
-import { twMerge } from 'tailwind-merge';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useGlobalStore, useLocaleInfo, useWalletQuery } from '../../client/hooks/index.js';
-import { Wallet02Icon, XIcon } from '../../icons/index.js';
-import { Dialog, Tabs } from '../../ui/index.js';
-import { formatNumber } from '../../utils/index.js';
-import { Deposit } from './Deposit/Deposit';
-import { Withdrawal } from './Withdrawal/Withdrawal';
-export function DepositWithdrawal(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 5000,
-    });
-    return (<Dialog.Root lazyMount unmountOnExit open={globalStore.depositWithdrawal.open} onOpenChange={(details) => {
-            globalStore.depositWithdrawal.setOpen(details.open);
-        }} closeOnEscape={false} closeOnInteractOutside={false}>
-      <Dialog.Trigger asChild>
-        {props.children ?? <DefaulTrigger />}
-      </Dialog.Trigger>
-      <Portal>
-        <Dialog.Backdrop className="!z-[calc(var(--z-dialog)+1)]"/>
-        <Dialog.Positioner className="!z-[calc(var(--z-dialog)+2)]">
-          <Dialog.Content className="lg:min-h-auto mx-auto min-h-full w-full p-2xl lg:w-[640px] lg:rounded-xl lg:p-3xl">
-            <Dialog.CloseTrigger>
-              <XIcon />
-            </Dialog.CloseTrigger>
-            <Dialog.Header className="flex items-center gap-xl">
-              <div className="border-border-secondary shadow-xs text-gray-700 flex size-12 items-center justify-center rounded-lg border">
-                <Wallet02Icon />
-              </div>
-              <Dialog.Title className="grow text-lg font-semibold">
-                Wallet
-              </Dialog.Title>
-            </Dialog.Header>
-
-            <Dialog.Body className="mt-5">
-              <p className="text-gray-500 text-center text-sm font-medium leading-tight">
-                Available Balance
-              </p>
-              <p className="mt-lg text-center text-4xl font-semibold leading-tight tracking-tight">
-                {formatNumber(walletQuery.data?.balance, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-        })}
-              </p>
-
-              <Tabs.Root value={globalStore.depositWithdrawal.tab} onValueChange={(details) => {
-            globalStore.depositWithdrawal.setTab(z.enum(['DEPOSIT', 'WITHDRAWAL']).parse(details.value));
-        }} lazyMount unmountOnExit className="mt-4xl space-y-4xl">
-                <Tabs.List className="w-full">
-                  <Tabs.Trigger value="DEPOSIT" className="grow">
-                    Deposit
-                  </Tabs.Trigger>
-                  <Tabs.Trigger value="WITHDRAWAL" className="grow">
-                    Withdrawal
-                  </Tabs.Trigger>
-                  <Tabs.Indicator />
-                </Tabs.List>
-
-                <Tabs.Content value="DEPOSIT" className="space-y-4xl">
-                  <Deposit />
-                </Tabs.Content>
-                <Tabs.Content value="WITHDRAWAL" className="space-y-4xl">
-                  <Withdrawal />
-                </Tabs.Content>
-              </Tabs.Root>
-            </Dialog.Body>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
-    </Dialog.Root>);
-}
-function DefaulTrigger(props) {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 5000,
-    });
-    return (<button type="button" {...props} className={twMerge('flex', props.className)}>
-      <div className="border-border-primary flex h-10 items-center rounded-l-md border border-r-0 px-3.5">
-        {formatNumber(walletQuery.data?.balance, {
-            currency: localeInfo.currency.code,
-            minDecimalPlaces: 2,
-        })}
-      </div>
-      <div className="bg-button-primary-bg text-button-primary-fg flex h-10 items-center gap-1.5 rounded-r-md px-3.5 text-sm font-semibold">
-        Deposit
-      </div>
-    </button>);
-}

package/dist/components/DepositWithdrawal/MayaSessionExpired.jsx

@@ -1,13 +0,0 @@
-import { AlertTriangleIcon } from '../../icons/index.js';
-export function MayaSessionExpired() {
-    return (<div className="bg-gray-50 mt-3xl rounded-lg px-5 py-16 lg:mt-4xl">
-      <AlertTriangleIcon className="text-amber-500 mx-auto size-10"/>
-      <h2 className="mt-3 text-center text-lg font-semibold">
-        Session Expired
-      </h2>
-      <p className="text-gray-700 mx-auto mt-2 max-w-[30rem] text-center text-sm">
-        Your session has timed out. To continue with deposits or withdrawals,
-        Please try reloading the app.
-      </p>
-    </div>);
-}

package/dist/components/DepositWithdrawal/Withdrawal/InstapayWithdrawal/InstapayWithdrawal.jsx

@@ -1,218 +0,0 @@
-import { createListCollection } from '@ark-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect, useMemo } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { useShallow } from 'zustand/shallow';
-import { useCreateInstapayWithdrawalMutation, useGlobalStore, useInstapayBankListQuery, usePaymentSettingsQuery, } from '../../../../client/hooks/index.js';
-import { toaster } from '../../../../client/utils/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, EyeIcon, EyeOffIcon, SpinnerIcon, } from '../../../../icons/index.js';
-import { Button, Field, NumberInput, PasswordInput, Select } from '../../../../ui/index.js';
-import { parseDecimal } from '../../../../utils/index.js';
-import { AmountChoices } from '../../AmountChoices';
-export function InstapayWithdrawal() {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const createWithdrawalMutation = useCreateInstapayWithdrawalMutation({
-        onSuccess() {
-            form.reset();
-            globalStore.depositWithdrawal.setOpen(false);
-            toaster.success({
-                description: 'Withdrawal request submitted successfully.',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const instapayBankListQuery = useInstapayBankListQuery();
-    const instapayBankList = instapayBankListQuery.data;
-    const paymentSettingsQuery = usePaymentSettingsQuery();
-    const paymentSettings = paymentSettingsQuery.data;
-    const gatewaySettings = paymentSettings?.instapayWithdrawalGatewaySettings;
-    const minimumAmount = parseDecimal(gatewaySettings?.minimumAmount, 0);
-    const maximumAmount = parseDecimal(gatewaySettings?.maximumAmount, 0);
-    const definition = z.object({
-        amount: z.string().superRefine((val, ctx) => {
-            const n = parseDecimal(val, 0);
-            if (n < minimumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_small,
-                    inclusive: true,
-                    minimum: minimumAmount,
-                    message: `Minimum amount is ${minimumAmount.toLocaleString()}`,
-                });
-            }
-            if (n > maximumAmount) {
-                ctx.addIssue({
-                    type: 'number',
-                    code: z.ZodIssueCode.too_big,
-                    inclusive: true,
-                    maximum: maximumAmount,
-                    message: `Maximum amount is ${maximumAmount.toLocaleString()}`,
-                });
-            }
-        }),
-        password: z
-            .string()
-            .min(8, 'Password must be 8 or more characters')
-            .max(64, 'Password must be not be more than 64 characters'),
-        accountNumber: z.string().min(1).trim(),
-        bankCode: z.string().min(1, 'Bank is required').trim(),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(definition),
-        defaultValues: {
-            amount: '0',
-            password: '',
-            accountNumber: '',
-            bankCode: '',
-        },
-    });
-    useEffect(() => {
-        if (minimumAmount) {
-            form.reset({
-                amount: minimumAmount.toString(),
-                bankCode: form.getValues('bankCode'),
-                password: '',
-                accountNumber: '',
-            });
-        }
-    }, [form, minimumAmount]);
-    useEffect(() => {
-        if (instapayBankList?.length) {
-            form.reset({
-                amount: form.getValues('amount'),
-                bankCode: instapayBankList[0].code,
-                password: '',
-                accountNumber: '',
-            });
-        }
-    }, [form, instapayBankList]);
-    const handleSubmit = form.handleSubmit(async (data) => {
-        createWithdrawalMutation.mutate({
-            amount: data.amount,
-            transactionPassword: data.password,
-            accountNumber: data.accountNumber,
-            bankCode: data.bankCode,
-        });
-    });
-    const bankCollection = useMemo(() => createListCollection({
-        items: instapayBankList ?? [],
-        itemToValue: (item) => item.code,
-        itemToString: (item) => item.name,
-    }), [instapayBankList]);
-    console.log(bankCollection.items);
-    return (<form onSubmit={handleSubmit} noValidate autoComplete="off">
-      <Controller control={form.control} name="bankCode" render={(o) => (<Field.Root invalid={!!form.formState.errors.bankCode}>
-            <Select.Root collection={bankCollection} positioning={{
-                sameWidth: true,
-            }} value={o.field.value ? [o.field.value] : []} onValueChange={(details) => {
-                o.field.onChange(details.value.at(0) ?? '');
-            }}>
-              <Select.Label>Bank</Select.Label>
-              <Select.Control>
-                <Select.Trigger>
-                  <Select.ValueText />
-                  <Select.Indicator asChild>
-                    <ChevronDownIcon />
-                  </Select.Indicator>
-                </Select.Trigger>
-              </Select.Control>
-              <Select.Positioner>
-                <Select.Content>
-                  <Select.ItemGroup>
-                    {bankCollection.items.map((item) => (<Select.Item key={item.id} item={item}>
-                        <Select.ItemText>{item.name}</Select.ItemText>
-                        <Select.ItemIndicator asChild>
-                          <CheckIcon />
-                        </Select.ItemIndicator>
-                      </Select.Item>))}
-                  </Select.ItemGroup>
-                </Select.Content>
-              </Select.Positioner>
-            </Select.Root>
-            <Field.ErrorText>
-              {form.formState.errors.bankCode?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <Field.Root invalid={!!form.formState.errors.accountNumber} className="mt-3xl">
-        <Field.Label>Bank account number</Field.Label>
-        <Field.Input {...form.register('accountNumber')}/>
-        <Field.ErrorText>
-          {form.formState.errors.accountNumber?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <Controller control={form.control} name="amount" render={(o) => (<Field.Root invalid={!!form.formState.errors.amount} className="mt-3xl">
-            <NumberInput.Root min={0} step={1} value={o.field.value} onValueChange={(details) => {
-                o.field.onChange(details.value);
-            }} formatOptions={{
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 0,
-            }} allowMouseWheel>
-              <NumberInput.Label>
-                Enter amount you want to withdraw
-              </NumberInput.Label>
-              <NumberInput.Control>
-                <NumberInput.Input />
-                <NumberInput.IncrementTrigger>
-                  <ChevronUpIcon />
-                </NumberInput.IncrementTrigger>
-                <NumberInput.DecrementTrigger>
-                  <ChevronDownIcon />
-                </NumberInput.DecrementTrigger>
-              </NumberInput.Control>
-            </NumberInput.Root>
-            <Field.ErrorText>
-              {form.formState.errors.amount?.message}
-            </Field.ErrorText>
-          </Field.Root>)}/>
-
-      <AmountChoices value={parseDecimal(form.watch('amount'), 0)} onChange={(value) => {
-            form.setValue('amount', value.toString(), {
-                shouldTouch: true,
-                shouldDirty: true,
-                shouldValidate: true,
-            });
-        }} min={minimumAmount} max={maximumAmount} className="mt-xl"/>
-
-      <Field.Root className="mt-3xl" invalid={!!form.formState.errors.password}>
-        <PasswordInput.Root>
-          <PasswordInput.Label>Password</PasswordInput.Label>
-          <PasswordInput.Control>
-            <PasswordInput.Input {...form.register('password')}/>
-            <PasswordInput.VisibilityTrigger>
-              <PasswordInput.Indicator fallback={<EyeOffIcon />} asChild>
-                <EyeIcon />
-              </PasswordInput.Indicator>
-            </PasswordInput.VisibilityTrigger>
-          </PasswordInput.Control>
-        </PasswordInput.Root>
-        <Field.ErrorText>
-          {form.formState.errors.password?.message}
-        </Field.ErrorText>
-      </Field.Root>
-
-      <p className="mt-4xl text-xs">
-        Upon clicking the deposit button, you agree to the{' '}
-        <button type="button" className="underline underline-offset-2">
-          Terms of Use and Privacy Policy
-        </button>
-        .
-      </p>
-
-      <Button type="submit" className="mt-4.5" disabled={createWithdrawalMutation.isPending}>
-        {createWithdrawalMutation.isPending ? (<>
-            <SpinnerIcon />
-            Processing...
-          </>) : ('Deposit')}
-      </Button>
-    </form>);
-}