settings

5 files changed, 91 insertions, 73 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index 24012cd2b..a21ba4b27 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -17,7 +17,7 @@
 import { Amounts, TalerError, TranslatedString } from "@gnu-taler/taler-util";
 import { Footer, GlobalNotificationsBanner, Header, Loading, notifyError, notifyException, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, VNode, h } from "preact";
-import { useEffect, useErrorBoundary } from "preact/hooks";
+import { useEffect, useErrorBoundary, useState } from "preact/hooks";
 import { useAccountDetails } from "../hooks/access.js";
 import { useBackendState } from "../hooks/backend.js";
 import { getAllBooleanPreferences, getLabelForPreferences, usePreferences } from "../hooks/preferences.js";
@@ -65,7 +65,7 @@ export function BankFrame({
           backend.logOut()
           updatePreferences("currentWithdrawalOperationId", undefined);
         }}
-        sites={settings.demoSites ?? new Array<Array<string>>(new Array<string>())}
+        sites={!settings.topNavSites ? [] : Object.entries(settings.topNavSites)}
         supportedLangs={["en", "es", "de"]}
       >
         <li>
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 33bf18abc..c93388d57 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -415,8 +415,6 @@ export function doAutoFocus(element: HTMLElement | null) {
   }
 }
 
-const FRAC_SEPARATOR = "."
-
 export function InputAmount(
   {
     currency,
@@ -471,21 +469,48 @@ export function InputAmount(
   );
 }
 
-export function RenderAmount({ value, spec, negative, withColor }: { spec: CurrencySpecification; value: AmountJson, negative?: boolean, withColor?: boolean }): VNode {
+const FRAC_SEPARATOR = "."
+export function RenderAmount({ value, spec, negative, withColor, allowShort }: { spec: CurrencySpecification; value: AmountJson, allowShort?: boolean, negative?: boolean, withColor?: boolean }): VNode {
   const neg = !!negative //convert to true or false
   const str = Amounts.stringifyValue(value)
-  const sep_pos = str.indexOf(FRAC_SEPARATOR)
-  if (sep_pos !== -1 && str.length - sep_pos - 1 > spec.num_fractional_normal_digits) {
+  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]
+  }
+
+  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
-    const normal = str.substring(0, limit)
-    const small = str.substring(limit)
-    return <span data-negative={withColor ? neg : undefined} class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600">
-      {negative ? "-" : undefined}
-      {value.currency} {normal} <sup class="-ml-1">{small}</sup>
-    </span>
+    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}
-    {value.currency} {str}
+    {currency} {normal} {small && <sup class="-ml-1">{small}</sup>}
   </span>
 }
\ No newline at end of file
diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
index d1b48fb6d..22090f83a 100644
--- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx
+++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx
@@ -136,32 +136,8 @@ function Metrics(): VNode {
       <h1 class="text-base font-semibold leading-7 text-gray-900 mt-5">
         <i18n.Translate>Trading volume on {getDateForTimeframe(params.current, metricType)} compared to {getDateForTimeframe(params.previous, metricType)}</i18n.Translate>
       </h1>
-      <div class="flex items-center justify-between">
-        {/* <span class="flex flex-grow flex-col">
-          <span class="text-sm text-black font-medium leading-6 " id="availability-label">
-            ASD
-          </span>
-        </span> */}
-        <button type="button" class="bg-gray-200 relative inline-flex h-6 w-48 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false">
-          <span class="sr-only">Use setting</span>
-          {/* <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> */}
-          <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-32 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
-            {/* <!-- Enabled: "opacity-0 duration-100 ease-out", Not Enabled: "opacity-100 duration-200 ease-in" --> */}
-            <span class="opacity-100 duration-200 ease-in absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true">
-              Transaction
-            </span>
-            {/* <!-- Enabled: "opacity-100 duration-200 ease-in", Not Enabled: "opacity-0 duration-100 ease-out" --> */}
-            <span class="opacity-0 duration-100 ease-out absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" aria-hidden="true">
-              <svg class="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
-                <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
-              </svg>
-            </span>
-          </span>
-        </button>
-      </div>
-
     </div>
-    <dl class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-lg md:grid-cols-4 md:divide-x md:divide-y-0">
+    <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">
 
       {resp.current.body.type !== "with-conversions" || resp.previous.body.type !== "with-conversions" ? undefined :
         <Fragment>
@@ -222,12 +198,22 @@ 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 flex justify-between md:block lg:flex">
-      <div class="flex justify-start  items-baseline text-2xl font-semibold text-indigo-600">
-        {!current ? "-" : <RenderAmount value={Amounts.parseOrThrow(current)} spec={config.currency_specification} />}
+    <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>
+      {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">
diff --git a/packages/demobank-ui/src/settings.json b/packages/demobank-ui/src/settings.json
index 9c0f1f001..a9246bc93 100644
--- a/packages/demobank-ui/src/settings.json
+++ b/packages/demobank-ui/src/settings.json
@@ -1,12 +1,11 @@
 {
   "backendBaseURL": "http://bank.taler.test:1180/",
-  "showDemoNav": true,
   "simplePasswordForRandomAccounts": true,
   "allowRandomAccountCreation": true,
   "bankName": "Taler DEVELOPMENT Bank",
-  "demoSites": [
-    ["Exchange", "http://Exchnage.taler.test:1180/"],
-    ["Bank", "http://bank-ui.taler.test:1180/"],
-    ["Merchant", "http://merchant.taler.test:1180/"]
-  ]
-}
+  "topNavSites": {
+    "Exchange": "http://Exchnage.taler.test:1180/",
+    "Bank": "http://bank-ui.taler.test:1180/",
+    "Merchant": "http://merchant.taler.test:1180/"
+  }
+}
\ No newline at end of file
diff --git a/packages/demobank-ui/src/settings.ts b/packages/demobank-ui/src/settings.ts
index 3a60c48a5..67f926e7f 100644
--- a/packages/demobank-ui/src/settings.ts
+++ b/packages/demobank-ui/src/settings.ts
@@ -14,23 +14,32 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Codec, buildCodecForObject, codecForBoolean, codecForList, codecForString, codecOptional } from "@gnu-taler/taler-util";
+import { Codec, buildCodecForObject, codecForBoolean, codecForList, codecForMap, codecForString, codecOptional } from "@gnu-taler/taler-util";
 
 export interface BankUiSettings {
-  // location of the backend API
+  // Where libeufin backend is localted
+  // default: window.origin without "webui/"
   backendBaseURL?: string;
-  // where the user is going to be redirected after clicking the Taler icon
-  iconLinkURL?: string;
-  // show demo nav
-  showDemoNav?: boolean;
-  // links of the demo nav. Array of tuples that contains [name,url]
-  demoSites?: Array<Array<string>>;
-  // show a button "create random account"
+  // Shows a button "create random account" in the registration form
+  // Useful for testing
+  // default: false
   allowRandomAccountCreation?: boolean;
-  // every random account will have password "123"
+  // Create all random accounts with password "123"
+  // Useful for testing
+  // default: false
   simplePasswordForRandomAccounts?: boolean;
-  // bank name in the top
+  // Bank name shown in the header
+  // default: "Taler Bank"
   bankName?: string;
+  // URL where the user is going to be redirected after 
+  // clicking in Taler Logo
+  // default: home page
+  iconLinkURL?: string;
+  // Mapping for every link shown in the top navitation bar
+  //  - key: link label, what the user will read
+  //  - value: link target, where the user is going to be redirected
+  // default: empty list
+  topNavSites?: Record<string, string>;
 }
 
 /**
@@ -39,31 +48,30 @@ export interface BankUiSettings {
 const defaultSettings: BankUiSettings = {
   backendBaseURL: undefined,
   iconLinkURL: undefined,
-  bankName: "Taler TESTING Bank",
-  showDemoNav: false,
-  simplePasswordForRandomAccounts: true,
-  allowRandomAccountCreation: true,
-  demoSites: [
-    ["Demo", "https://demo.taler.net/"],
-  ],
+  bankName: "Taler Bank",
+  simplePasswordForRandomAccounts: false,
+  allowRandomAccountCreation: false,
+  topNavSites: {},
 };
 
 const codecForBankUISettings = (): Codec<BankUiSettings> =>
   buildCodecForObject<BankUiSettings>()
-    .property("allowRandomAccountCreation", codecOptional(codecForBoolean()))
     .property("backendBaseURL", codecOptional(codecForString()))
+    .property("allowRandomAccountCreation", codecOptional(codecForBoolean()))
+    .property("simplePasswordForRandomAccounts", codecOptional(codecForBoolean()))
     .property("bankName", codecOptional(codecForString()))
-    .property("demoSites", codecOptional(codecForList(codecForList(codecForString()))))
     .property("iconLinkURL", codecOptional(codecForString()))
-    .property("showDemoNav", codecOptional(codecForBoolean()))
-    .property("simplePasswordForRandomAccounts", codecOptional(codecForBoolean()))
+    .property("topNavSites", codecOptional(codecForMap(codecForString())))
     .build("BankUiSettings");
 
 export function fetchSettings(listener: (s: BankUiSettings) => void): void {
   fetch("./settings.json")
     .then(resp => resp.json())
     .then(json => codecForBankUISettings().decode(json))
-    .then(listener)
+    .then(result => listener({
+      ...defaultSettings,
+      ...result,
+    }))
     .catch(e => {
       console.log("failed to fetch settings", e)
       listener(defaultSettings)