monitor in admin home

1 files changed, 28 insertions, 30 deletions

diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
index 22090f83a..1892acfce 100644
--- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx
+++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
@@ -1,9 +1,9 @@
-import { AmountString, Amounts, TalerCorebankApi, TalerError, assertUnreachable } from "@gnu-taler/taler-util";
+import { AmountString, Amounts, CurrencySpecification, TalerCorebankApi, TalerError, assertUnreachable } from "@gnu-taler/taler-util";
 import { ErrorLoading, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Transactions } from "../../components/Transactions/index.js";
-import { useLastMonitorInfo } from "../../hooks/circuit.js";
+import { useConversionInfo, useLastMonitorInfo } from "../../hooks/circuit.js";
 import { RenderAmount } from "../PaytoWireTransferForm.js";
 import { WireTransfer } from "../WireTransfer.js";
 import { AccountList } from "./AccountList.js";
@@ -83,7 +83,8 @@ function getTimeframesForDate(time: Date, timeframe: TalerCorebankApi.MonitorTim
 function Metrics(): VNode {
   const { i18n } = useTranslationContext()
   const [metricType, setMetricType] = useState<TalerCorebankApi.MonitorTimeframeParam>(TalerCorebankApi.MonitorTimeframeParam.hour);
-
+  const { config } = useBankCoreApiContext();
+  const respInfo = useConversionInfo()
   const params = getTimeframesForDate(new Date(), metricType)
 
   const resp = useLastMonitorInfo(params.current, params.previous, metricType);
@@ -91,13 +92,10 @@ function Metrics(): VNode {
   if (resp instanceof TalerError) {
     return <ErrorLoading error={resp} />
   }
-  if (resp.current.type !== "ok" || resp.current.type !== "ok" || resp.current.type !== "ok") {
+  if (resp.current.type !== "ok" || resp.previous.type !== "ok") {
     return <Fragment />
   }
-  if (resp.previous.type !== "ok" || resp.previous.type !== "ok" || resp.previous.type !== "ok") {
-    return <Fragment />
-  }
-
+  const fiatSpec = respInfo && (!(respInfo instanceof TalerError)) ? respInfo.body.fiat_currency_specification : undefined
   return <Fragment>
     <div class="sm:hidden">
       <label for="tabs" class="sr-only"><i18n.Translate>Select a section</i18n.Translate></label>
@@ -137,9 +135,9 @@ function Metrics(): VNode {
         <i18n.Translate>Trading volume on {getDateForTimeframe(params.current, metricType)} compared to {getDateForTimeframe(params.previous, metricType)}</i18n.Translate>
       </h1>
     </div>
-    <dl class="mt-5 grid grid-cols-1 md:grid-cols-1  divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:divide-x md:divide-y-0">
+    <dl class="mt-5 grid grid-cols-1 md:grid-cols-2  divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:divide-x md:divide-y-0">
 
-      {resp.current.body.type !== "with-conversions" || resp.previous.body.type !== "with-conversions" ? undefined :
+      {!fiatSpec || resp.current.body.type !== "with-conversions" || resp.previous.body.type !== "with-conversions" ? undefined :
         <Fragment>
           <div class="px-4 py-5 sm:p-6">
             <dt class="text-base font-normal text-gray-900">
@@ -148,6 +146,7 @@ function Metrics(): VNode {
             <MetricValue
               current={resp.current.body.cashinFiatVolume}
               previous={resp.previous.body.cashinFiatVolume}
+              spec={fiatSpec}
             />
           </div>
           <div class="px-4 py-5 sm:p-6">
@@ -157,6 +156,7 @@ function Metrics(): VNode {
             <MetricValue
               current={resp.current.body.cashoutFiatVolume}
               previous={resp.previous.body.cashoutFiatVolume}
+              spec={fiatSpec}
             />
           </div>
         </Fragment>
@@ -168,6 +168,7 @@ function Metrics(): VNode {
         <MetricValue
           current={resp.current.body.talerInVolume}
           previous={resp.previous.body.talerInVolume}
+          spec={config.currency_specification}
         />
       </div>
       <div class="px-4 py-5 sm:p-6">
@@ -177,6 +178,7 @@ function Metrics(): VNode {
         <MetricValue
           current={resp.current.body.talerOutVolume}
           previous={resp.previous.body.talerOutVolume}
+          spec={config.currency_specification}
         />
       </div>
     </dl>
@@ -185,11 +187,11 @@ function Metrics(): VNode {
 }
 
 
-function MetricValue({ current, previous }: { current: AmountString | undefined, previous: AmountString | undefined }): VNode {
+function MetricValue({ current, previous, spec }: { spec: CurrencySpecification, current: AmountString | undefined, previous: AmountString | undefined }): VNode {
   const { i18n } = useTranslationContext()
-  const { config } = useBankCoreApiContext();
   const cmp = current && previous ? Amounts.cmp(current, previous) : 0;
-  const currAmount = !current ? undefined : Number.parseFloat(Amounts.stringifyValue(current))
+  const cv = !current ? undefined : Amounts.stringifyValue(current)
+  const currAmount = !cv ? undefined : Number.parseFloat(cv)
   const prevAmount = !previous ? undefined : Number.parseFloat(Amounts.stringifyValue(previous))
 
   const rate = !currAmount || Number.isNaN(currAmount) || !prevAmount || Number.isNaN(prevAmount) ? 0 :
@@ -198,34 +200,30 @@ function MetricValue({ current, previous }: { current: AmountString | undefined,
 
   const negative = cmp === 0 ? undefined : cmp === -1
   const rateStr = `${(Math.abs(rate) * 100).toFixed(2)}%`
-  const pepe = "QWEQWEQWEWw:111111174523848.85229681"
-  function size(s: string = ""): "lg" | "md" | "sm" {
-    return s.length < 10 ? "sm" : s.length > 20 ? "lg" : "md";
-  }
   return <Fragment>
     <dd class="mt-1 block ">
-      <div data-size={size(pepe)} class="flex justify-start 
-        data-[size=sm]:text-2xl
-        data-[size=md]:text-lg
-        data-[size=lg]:text-sm
-        items-baseline  
-        font-semibold text-indigo-600">
-        {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(pepe)} spec={config.currency_specification} />}
+      <div class="flex justify-start text-2xl items-baseline font-semibold text-indigo-600">
+        {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(current)} spec={spec} hideSmall />}
       </div>
-      {pepe.length}
-      <div style={{ width: 16, height: 16, border: "1px solid red" }} />
       <div class="flex flex-col">
 
         <div class="flex justify-end items-baseline text-2xl font-semibold text-indigo-600">
           <small class="ml-2 text-sm font-medium text-gray-500">
-            <i18n.Translate>from</i18n.Translate> {!previous ? "-" : <RenderAmount value={Amounts.parseOrThrow(previous)} spec={config.currency_specification} />}
+            <i18n.Translate>from</i18n.Translate> {!previous ? "-" : <RenderAmount value={Amounts.parseOrThrow(previous)} spec={spec} hideSmall />}
           </small>
         </div>
         {negative !== undefined &&
           <span data-negative={negative} class="flex items-center gap-x-1.5 w-fit rounded-md bg-green-100 text-green-800 data-[negative=true]:bg-red-100 px-2 py-1 text-xs font-medium data-[negative=true]:text-red-700 whitespace-pre">
-            <svg class="h-5 w-5 self-center data-[negative=false]:text-green-500 data-[negative=true]:text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
-            </svg>
+            {negative ?
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" />
+              </svg>
+              :
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+              </svg>
+            }
+
             {negative ?
               <span class="sr-only"><i18n.Translate>Descreased by</i18n.Translate></span> :
               <span class="sr-only"><i18n.Translate>Increased by</i18n.Translate></span>