fix #8467

6 files changed, 33 insertions, 2 deletions

diff --git a/packages/bank-ui/src/pages/AccountPage/index.ts b/packages/bank-ui/src/pages/AccountPage/index.ts
index 0223b12db..7776fbaa3 100644
--- a/packages/bank-ui/src/pages/AccountPage/index.ts
+++ b/packages/bank-ui/src/pages/AccountPage/index.ts
@@ -79,6 +79,7 @@ export namespace State {
     account: string;
     tab: "charge-wallet" | "wire-transfer" | undefined;
     limit: AmountJson;
+    balance: AmountJson;
     onAuthorizationRequired: () => void;
     onOperationCreated: (wopid: string) => void;
     onClose: () => void;
diff --git a/packages/bank-ui/src/pages/AccountPage/state.ts b/packages/bank-ui/src/pages/AccountPage/state.ts
index e84fef025..f8b91a2ce 100644
--- a/packages/bank-ui/src/pages/AccountPage/state.ts
+++ b/packages/bank-ui/src/pages/AccountPage/state.ts
@@ -96,6 +96,10 @@ export function useComponentState({
     ? Amounts.sub(debitThreshold, balance).amount
     : Amounts.add(balance, debitThreshold).amount;
 
+  const positiveBalance = balanceIsDebit
+    ? Amounts.zeroOfAmount(balance)
+    : balance;
+
   return {
     status: "ready",
     onOperationCreated,
@@ -113,5 +117,6 @@ export function useComponentState({
     routeWireTransfer,
     account,
     limit,
+    balance: positiveBalance,
   };
 }
diff --git a/packages/bank-ui/src/pages/AccountPage/views.tsx b/packages/bank-ui/src/pages/AccountPage/views.tsx
index 7165c28b6..7ad00cf1d 100644
--- a/packages/bank-ui/src/pages/AccountPage/views.tsx
+++ b/packages/bank-ui/src/pages/AccountPage/views.tsx
@@ -112,6 +112,7 @@ export function ReadyView({
   routeChargeWallet,
   routeWireTransfer,
   limit,
+  balance,
   routeCashout,
   routeCreateWireTransfer,
   routePublicAccounts,
@@ -133,6 +134,7 @@ export function ReadyView({
         routeChargeWallet={routeChargeWallet}
         routeWireTransfer={routeWireTransfer}
         limit={limit}
+        balance={balance}
         routeClose={routeClose}
         onClose={onClose}
         onOperationCreated={onOperationCreated}
diff --git a/packages/bank-ui/src/pages/PaymentOptions.tsx b/packages/bank-ui/src/pages/PaymentOptions.tsx
index 48ecc7525..07dd18931 100644
--- a/packages/bank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/bank-ui/src/pages/PaymentOptions.tsx
@@ -78,12 +78,14 @@ export function PaymentOptions({
   routeWireTransfer,
   tab,
   limit,
+  balance,
   onOperationCreated,
   onClose,
   routeOperationDetails,
   onAuthorizationRequired,
 }: {
   limit: AmountJson;
+  balance: AmountJson;
   tab: "charge-wallet" | "wire-transfer" | undefined;
   onAuthorizationRequired: () => void;
   onOperationCreated: (wopid: string) => void;
@@ -213,6 +215,7 @@ export function PaymentOptions({
             routeOperationDetails={routeOperationDetails}
             focus
             limit={limit}
+            balance={balance}
             onAuthorizationRequired={onAuthorizationRequired}
             onOperationCreated={onOperationCreated}
             onOperationAborted={onClose}
@@ -225,6 +228,7 @@ export function PaymentOptions({
             title={i18n.str`Transfer details`}
             routeHere={routeWireTransfer}
             limit={limit}
+            balance={balance}
             onAuthorizationRequired={onAuthorizationRequired}
             onSuccess={onClose}
             routeCashout={routeCashout}
diff --git a/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
index 791a3b440..a522102a7 100644
--- a/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -64,6 +64,7 @@ interface Props {
     amount?: string,
   }>;
   limit: AmountJson;
+  balance: AmountJson;
 }
 
 export function PaytoWireTransferForm({
@@ -78,6 +79,7 @@ export function PaytoWireTransferForm({
   routeHere,
   onAuthorizationRequired,
   limit,
+  balance,
 }: Props): VNode {
   const [isRawPayto, setIsRawPayto] = useState(false);
   const { state: credentials } = useSessionState();
diff --git a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
index 001d90fa1..8c831199a 100644
--- a/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/bank-ui/src/pages/WalletWithdrawForm.tsx
@@ -39,18 +39,20 @@ import { usePreferences } from "../hooks/preferences.js";
 import { RouteDefinition } from "../route.js";
 import { undefinedIfEmpty } from "../utils.js";
 import { OperationState } from "./OperationState/index.js";
-import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
+import { InputAmount, RenderAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
 
 const RefAmount = forwardRef(InputAmount);
 
 function OldWithdrawalForm({
   onOperationCreated,
   limit,
+  balance,
   routeCancel,
   focus,
   routeOperationDetails,
 }: {
   limit: AmountJson;
+  balance: AmountJson;
   focus?: boolean;
   routeOperationDetails: RouteDefinition<{ wopid: string }>,
   onOperationCreated: (wopid: string) => void;
@@ -63,7 +65,7 @@ function OldWithdrawalForm({
   // const { navigateTo } = useNavigationContext();
 
   const [bankState, updateBankState] = useBankState();
-  const { bank: api } = useBankCoreApiContext();
+  const { bank: api, config } = useBankCoreApiContext();
 
   const { state: credentials } = useSessionState();
   const creds = credentials.status !== "loggedIn" ? undefined : credentials;
@@ -209,6 +211,18 @@ function OldWithdrawalForm({
             />
           </div>
         </div>
+        <p class="mt-2 text-sm text-gray-500">
+          <i18n.Translate>
+            Current balance is <RenderAmount value={balance} spec={config.currency_specification} />
+          </i18n.Translate>
+        </p>
+        {Amounts.cmp(limit, balance) > 0 ?
+          <p class="mt-2 text-sm text-gray-500">
+            <i18n.Translate>
+              Your account allows you to withdraw <RenderAmount value={limit} spec={config.currency_specification} />
+            </i18n.Translate>
+          </p> : undefined
+        }
         <div class="mt-4">
           <div class="sm:inline">
             <button
@@ -288,6 +302,7 @@ function OldWithdrawalForm({
 export function WalletWithdrawForm({
   focus,
   limit,
+  balance,
   routeCancel,
   onAuthorizationRequired,
   onOperationCreated,
@@ -295,6 +310,7 @@ export function WalletWithdrawForm({
   routeOperationDetails,
 }: {
   limit: AmountJson;
+  balance: AmountJson;
   focus?: boolean;
   routeOperationDetails: RouteDefinition<{ wopid: string }>,
   onAuthorizationRequired: () => void;
@@ -347,6 +363,7 @@ export function WalletWithdrawForm({
             focus={focus}
             routeOperationDetails={routeOperationDetails}
             limit={limit}
+            balance={balance}
             routeCancel={routeCancel}
             onOperationCreated={onOperationCreated}
           />