2 files changed, 64 insertions, 3 deletions
diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx
index 58b048b83..3dd34d251 100644
--- a/packages/demobank-ui/src/pages/AdminPage.tsx
+++ b/packages/demobank-ui/src/pages/AdminPage.tsx
@@ -28,7 +28,12 @@ import {
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Cashouts } from "../components/Cashouts/index.js";
-import { ErrorMessage, usePageContext } from "../context/pageState.js";
+import { useBackendContext } from "../context/backend.js";
+import {
+  ErrorMessage,
+  PageStateType,
+  usePageContext,
+} from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
   useBusinessAccountDetails,
@@ -45,6 +50,8 @@ import {
 } from "../utils.js";
 import { ErrorBannerFloat } from "./BankFrame.js";
 import { ShowCashoutDetails } from "./BusinessAccount.js";
+import { PaymentOptions } from "./PaymentOptions.js";
+import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
 const charset =
@@ -89,6 +96,9 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
       info,
     }));
   }
+  function saveError(error: PageStateType["error"]): void {
+    pageStateSetter((prev) => ({ ...prev, error }));
+  }
 
   const result = useBusinessAccounts({ account });
   const { i18n } = useTranslationContext();
@@ -204,6 +214,55 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
       />
     );
   }
+
+  function AdminAccount(): VNode {
+    const r = useBackendContext();
+    const account = r.state.status === "loggedIn" ? r.state.username : "admin";
+    const result = useAccountDetails(account);
+
+    if (!result.ok) {
+      return onLoadNotOk(result);
+    }
+    const { data } = result;
+    const balance = Amounts.parse(data.balance.amount);
+    const balanceIsDebit = data.balance.credit_debit_indicator == "debit";
+    if (!balance) return <Fragment />;
+    return (
+      <Fragment>
+        <section id="assets">
+          <div class="asset-summary">
+            <h2>{i18n.str`Bank account balance`}</h2>
+            {!balance ? (
+              <div class="large-amount" style={{ color: "gray" }}>
+                Waiting server response...
+              </div>
+            ) : (
+              <div class="large-amount amount">
+                {balanceIsDebit ? <b>-</b> : null}
+                <span class="value">{`${Amounts.stringifyValue(
+                  balance,
+                )}`}</span>
+                &nbsp;
+                <span class="currency">{`${balance.currency}`}</span>
+              </div>
+            )}
+          </div>
+        </section>
+        <PaytoWireTransferForm
+          focus
+          currency={balance.currency}
+          onSuccess={() => {
+            pageStateSetter((prevState: PageStateType) => ({
+              ...prevState,
+              info: i18n.str`Wire transfer created!`,
+            }));
+          }}
+          onError={saveError}
+        />
+      </Fragment>
+    );
+  }
+
   return (
     <Fragment>
       <div>
@@ -230,6 +289,7 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
         </div>
       </p>
 
+      <AdminAccount />
       <section
         id="main"
         style={{ width: 600, marginLeft: "auto", marginRight: "auto" }}
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 9698d5b98..f25680481 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -228,9 +228,10 @@ export function PaytoWireTransferForm({
         </form>
         <p>
           <a
-            href="/account"
-            onClick={() => {
+            href="#"
+            onClick={(e) => {
               setIsRawPayto(true);
+              e.preventDefault();
             }}
           >
             {i18n.str`Want to try the raw payto://-format?`}