mobile friendly

1 files changed, 71 insertions, 27 deletions

diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 3a53bbe48..4c4a38e57 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -25,14 +25,16 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
-import { VNode, h } from "preact";
+import { Ref, VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useAccessAPI } from "../hooks/access.js";
 import { notifyError } from "../hooks/notification.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
+import { forwardRef } from "preact/compat";
 
 const logger = new Logger("WalletWithdrawForm");
+const RefAmount = forwardRef(Amount);
 
 export function WalletWithdrawForm({
   focus,
@@ -68,6 +70,7 @@ export function WalletWithdrawForm({
         ? i18n.str`balance is not enough`
         : undefined,
   });
+
   return (
     <form
       id="reserve-form"
@@ -82,32 +85,15 @@ export function WalletWithdrawForm({
       <p>
         <label for="withdraw-amount">{i18n.str`Amount to withdraw:`}</label>
         &nbsp;
-        <div style={{ width: "max-content" }}>
-          <input
-            type="text"
-            readonly
-            class="currency-indicator"
-            size={limit.currency.length}
-            maxLength={limit.currency.length}
-            tabIndex={-1}
-            value={limit.currency}
-          />
-          &nbsp;
-          <input
-            type="number"
-            ref={ref}
-            id="withdraw-amount"
-            name="withdraw-amount"
-            value={amountStr ?? ""}
-            onChange={(e): void => {
-              setAmountStr(e.currentTarget.value);
-            }}
-          />
-          <ShowInputErrorLabel
-            message={errors?.amount}
-            isDirty={amountStr !== undefined}
-          />
-        </div>
+        <RefAmount
+          currency={limit.currency}
+          value={amountStr}
+          onChange={(v) => {
+            setAmountStr(v);
+          }}
+          error={errors?.amount}
+          ref={ref}
+        />
       </p>
       <p>
         <div>
@@ -160,3 +146,61 @@ export function WalletWithdrawForm({
     </form>
   );
 }
+
+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>
+  );
+}