1 files changed, 37 insertions, 12 deletions

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