diff options
author | Sebastian <sebasjm@gmail.com> | 2023-11-27 13:07:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-11-27 13:07:27 -0300 |
commit | 1f2d3dc546946bf06705ce88edccde58567bd8cb (patch) | |
tree | d0cf60933989a6c4bde9a66bb84dbc1b0d2e3e10 /packages/demobank-ui | |
parent | 5cc00344e2ed7736887a718bf5ddb2b25d1dc357 (diff) | |
download | wallet-core-1f2d3dc546946bf06705ce88edccde58567bd8cb.tar.xz |
monitor in admin home
Diffstat (limited to 'packages/demobank-ui')
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> |