monitor in admin home

4 files changed, 35 insertions, 71 deletions

diff --git a/packages/demobank-ui/src/hooks/circuit.ts b/packages/demobank-ui/src/hooks/circuit.ts
index 4686969dc..327a50409 100644
--- a/packages/demobank-ui/src/hooks/circuit.ts
+++ b/packages/demobank-ui/src/hooks/circuit.ts
@@ -290,7 +290,7 @@ export function useLastMonitorInfo(currentMoment: number, previousMoment: number
   const { state: credentials } = useBackendState();
   const token = credentials.status !== "loggedIn" ? undefined : credentials.token
 
-  async function fetcher([token]: [AccessToken]) {
+  async function fetcher([token, timeframe]: [AccessToken, TalerCorebankApi.MonitorTimeframeParam]) {
     const [current, previous] = await Promise.all([
       api.getMonitor(token, { timeframe, which: currentMoment }),
       api.getMonitor(token, { timeframe, which: previousMoment }),
@@ -302,7 +302,7 @@ export function useLastMonitorInfo(currentMoment: number, previousMoment: number
   }
 
   const { data, error } = useSWR<LastMonitor, TalerHttpError>(
-    !config.allow_conversion || !token ? undefined : [token, "useLastMonitorInfo"], fetcher, {
+    !token ? undefined : [token, timeframe, "useLastMonitorInfo"], fetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
     revalidateOnFocus: false,
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index c93388d57..27b26f8b7 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -16,9 +16,11 @@
 
 import {
   AmountJson,
+  AmountLike,
   AmountString,
   Amounts,
   CurrencySpecification,
+  FRAC_SEPARATOR,
   Logger,
   PaytoString,
   TranslatedString,
@@ -469,48 +471,13 @@ export function InputAmount(
   );
 }
 
-const FRAC_SEPARATOR = "."
-export function RenderAmount({ value, spec, negative, withColor, allowShort }: { spec: CurrencySpecification; value: AmountJson, allowShort?: boolean, negative?: boolean, withColor?: boolean }): VNode {
+export function RenderAmount({ value, spec, negative, withColor, hideSmall }: { spec: CurrencySpecification; value: AmountJson, hideSmall?: boolean, negative?: boolean, withColor?: boolean }): VNode {
   const neg = !!negative //convert to true or false
-  const str = Amounts.stringifyValue(value)
-  const pos = str.indexOf(FRAC_SEPARATOR)
-  const sep_pos = pos < 0 ? 0 : pos;
 
-  let currency = value.currency
-  const names = Object.keys(spec.alt_unit_names)
-  let smallerIndex: string = "0"
-  if (names.length > 1) {
-    let indexSize = sep_pos
-    Object.keys(spec.alt_unit_names).forEach(index => {
-      const i = Number.parseInt(index, 10)
-      if (Number.isNaN(i)) return;
-      if (sep_pos - i < indexSize) {
-        indexSize = sep_pos - i;
-        smallerIndex = index
-      }
-    })
-    currency = spec.alt_unit_names[smallerIndex]
-  } else if (names.length === 1) {
-    currency = names[0]
-  }
+  const { currency, normal, small } = Amounts.stringifyValueWithSpec(value, spec)
 
-  let normal: string;
-  let small: string | undefined;
-  if (sep_pos && str.length - sep_pos - 1 > spec.num_fractional_normal_digits) {
-    const limit = sep_pos + spec.num_fractional_normal_digits + 1
-    normal = str.substring(0, limit)
-    small = str.substring(limit)
-  } else {
-    normal = str
-    small = undefined
-  }
-
-
-  if (allowShort) {
-    // const int_part = str.substring(0, sep_pos)
-  }
   return <span data-negative={withColor ? neg : undefined} class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
     {negative ? "-" : undefined}
-    {currency} {normal} {small && <sup class="-ml-1">{small}</sup>}
+    {currency} {normal} {!hideSmall && small && <sup class="-ml-1">{small}</sup>}
   </span>
 }
\ No newline at end of file
diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
index 526deeeab..c2afb195a 100644
--- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx
+++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx
@@ -46,7 +46,6 @@ export function AccountForm({
   const { i18n } = useTranslationContext();
 
   function updateForm(newForm: typeof initial): void {
-    console.log(newForm)
     const parsed = !newForm.cashout_payto_uri
       ? undefined
       : buildPayto("iban", newForm.cashout_payto_uri, undefined);;
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>