render amount and limit input

1 files changed, 29 insertions, 29 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index 29334cae4..fc8dfd599 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -27,6 +27,7 @@ import { CopyButton, CopyIcon } from "../components/CopyButton.js";
 import logo from "../assets/logo-2021.svg";
 import { useAccountDetails } from "../hooks/access.js";
 import { Attention } from "../components/Attention.js";
+import { RenderAmount } from "./PaytoWireTransferForm.js";
 
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -87,7 +88,7 @@ export function BankFrame({
                     class="h-8 w-auto"
                     src={logo}
                     alt="Taler"
-                    style={{ height: 35, margin: 10 }}
+                    style={{ height: "1.5rem", margin: ".5rem" }}
                   />
                 </a>
               </div>
@@ -322,10 +323,10 @@ function MaybeShowDebugInfo({ info }: { info: any }): VNode {
   const [settings] = useSettings()
   if (settings.showDebugInfo) {
     return <pre class="whitespace-break-spaces ">
-    {info}
-  </pre>
+      {info}
+    </pre>
   }
-  return <Fragment /> 
+  return <Fragment />
 }
 
 
@@ -333,19 +334,19 @@ function StatusBanner(): VNode {
   const notifs = useNotifications()
   if (notifs.length === 0) return <Fragment />
   return <div class="fixed z-20 w-full p-4"> {
-      notifs.map(n => {
-        switch (n.message.type) {
-          case "error":
-            return <Attention type="danger" title={n.message.title} onClose={() => {
-              n.remove()
-            }}>
-              {n.message.description &&
-                <div class="mt-2 text-sm text-red-700">
-                  {n.message.description}
-                </div>
-              }
-              <MaybeShowDebugInfo info={n.message.debug} />
-              {/* <a href="#" class="text-gray-500">
+    notifs.map(n => {
+      switch (n.message.type) {
+        case "error":
+          return <Attention type="danger" title={n.message.title} onClose={() => {
+            n.remove()
+          }}>
+            {n.message.description &&
+              <div class="mt-2 text-sm text-red-700">
+                {n.message.description}
+              </div>
+            }
+            <MaybeShowDebugInfo info={n.message.debug} />
+            {/* <a href="#" class="text-gray-500">
                 show debug info
               </a>
               {n.message.debug &&
@@ -353,13 +354,13 @@ function StatusBanner(): VNode {
                   {n.message.debug}
                 </div>
               } */}
-            </Attention>
-          case "info":
-            return <Attention type="success" title={n.message.title} onClose={() => {
-              n.remove();
-            }} />
-        }
-      })}
+          </Attention>
+        case "info":
+          return <Attention type="success" title={n.message.title} onClose={() => {
+            n.remove();
+          }} />
+      }
+    })}
   </div>
 
 }
@@ -430,9 +431,8 @@ function AccountBalance({ account }: { account: string }): VNode {
   const result = useAccountDetails(account);
   if (!result.ok) return <div />
 
-  return <div>
-    {Amounts.currencyOf(result.data.balance.amount)}
-    &nbsp;{result.data.balance.credit_debit_indicator === "debit" ? "-" : ""}
-    {Amounts.stringifyValue(result.data.balance.amount)}
-  </div>
+  return <RenderAmount
+    value={Amounts.parseOrThrow(result.data.balance.amount)}
+    negative={result.data.balance.credit_debit_indicator === "debit"}
+  />
 }