multiversx · arhtudormorar · Jan 20, 2025 · Jan 20, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ## [[0.0.0-alpha.1](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/16)] - 2025-01-20
-
-- [Updated formatAmount component and removed dependencies](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/17)
 - [Updated formatAmount component](https://github.com/multiversx/mx-sdk-dapp-core-ui/pull/15)
diff --git a/package.json b/package.json
@@ -53,7 +53,9 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": ">= 6.7.2",
     "@fortawesome/free-solid-svg-icons": ">= 6.7.2",
-    "@multiversx/sdk-dapp-utils": ">= 1.0.4",
+    "@multiversx/sdk-dapp-utils": ">= 1.0.3",
+    "@multiversx/sdk-core": ">= 13.5.0",
+    "bignumber.js": ">= 9.1.2",
     "classnames": ">= 2.5.1",
     "qrcode": ">= 1.5.4"
   },

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -28,11 +28,13 @@ export namespace Components {
     }
     interface FormatAmount {
         "class"?: string;
-        "isValid": boolean;
-        "label"?: string;
-        "labelClass"?: string;
-        "valueDecimal": string;
-        "valueInteger": string;
+        "decimals"?: number;
+        "digits"?: number;
+        "egldLabel"?: string;
+        "showLabel"?: boolean;
+        "showLastNonZeroDecimal"?: boolean;
+        "token"?: string;
+        "value": string;
     }
     interface FungibleComponent {
     }
@@ -291,11 +293,13 @@ declare namespace LocalJSX {
     }
     interface FormatAmount {
         "class"?: string;
-        "isValid"?: boolean;
-        "label"?: string;
-        "labelClass"?: string;
-        "valueDecimal"?: string;
-        "valueInteger"?: string;
+        "decimals"?: number;
+        "digits"?: number;
+        "egldLabel"?: string;
+        "showLabel"?: boolean;
+        "showLastNonZeroDecimal"?: boolean;
+        "token"?: string;
+        "value"?: string;
     }
     interface FungibleComponent {
     }

diff --git a/src/components/format-amount/format-amount.tsx b/src/components/format-amount/format-amount.tsx
@@ -1,4 +1,7 @@
 import { Component, Prop, h } from '@stencil/core';
+import BigNumber from 'bignumber.js';
+import { formatAmount } from '@multiversx/sdk-dapp-utils/out/helpers';
+import { DECIMALS, DIGITS } from '@multiversx/sdk-dapp-utils/out/constants';
 
 @Component({
   tag: 'format-amount',
@@ -7,11 +10,13 @@ import { Component, Prop, h } from '@stencil/core';
 })
 export class FormatAmount {
   @Prop() class?: string;
-  @Prop() isValid: boolean;
-  @Prop() label?: string;
-  @Prop() labelClass?: string;
-  @Prop() valueDecimal: string;
-  @Prop() valueInteger: string;
+  @Prop() decimals?: number = DECIMALS;
+  @Prop() digits?: number = DIGITS;
+  @Prop() egldLabel?: string;
+  @Prop() showLabel?: boolean = true;
+  @Prop() showLastNonZeroDecimal?: boolean = false;
+  @Prop() token?: string;
+  @Prop() value: string;
 
   private renderInvalid() {
     return (
@@ -24,32 +29,44 @@ export class FormatAmount {
   }
 
   private renderValid() {
+    const formattedValue = formatAmount({
+      input: this.value,
+      decimals: this.decimals,
+      digits: this.digits,
+      showLastNonZeroDecimal: this.showLastNonZeroDecimal,
+      addCommas: true
+    });
+
+    const valueParts = formattedValue.split('.');
+    const label = ` ${this.token ?? this.egldLabel ?? ''}`.trimEnd();
+
     return (
       <span data-testid='formatAmountComponent' class={this.class}>
         <span class='int-amount' data-testid='formatAmountInt'>
-          {this.valueInteger}
+          {valueParts[0]}
         </span>
-        {this.valueDecimal && (
+        {valueParts.length > 1 && (
           <span class='decimals' data-testid='formatAmountDecimals'>
-            .{this.valueDecimal}
+            .{valueParts[1]}
           </span>
         )}
-        {this.label && (
+        {this.showLabel && (
           <span
             class={{
               'symbol': true,
-              [this.labelClass]: Boolean(this.labelClass)
+              [this.token]: !!this.token
             }}
             data-testid='formatAmountSymbol'
           >
-            {this.label}
+            {label}
           </span>
         )}
       </span>
     );
   }
 
   render() {
-    return this.isValid ? this.renderValid() : this.renderInvalid();
+    const isInteger = new BigNumber(this.value).isInteger();
+    return !isInteger ? this.renderInvalid() : this.renderValid();
   }
 }
diff --git a/src/components/format-amount/readme.md b/src/components/format-amount/readme.md
@@ -7,14 +7,16 @@
 
 ## Properties
 
-| Property       | Attribute       | Description | Type      | Default     |
-| -------------- | --------------- | ----------- | --------- | ----------- |
-| `class`        | `class`         |             | `string`  | `undefined` |
-| `isValid`      | `is-valid`      |             | `boolean` | `undefined` |
-| `label`        | `label`         |             | `string`  | `undefined` |
-| `labelClass`   | `label-class`   |             | `string`  | `undefined` |
-| `valueDecimal` | `value-decimal` |             | `string`  | `undefined` |
-| `valueInteger` | `value-integer` |             | `string`  | `undefined` |
+| Property                 | Attribute                    | Description | Type      | Default     |
+| ------------------------ | ---------------------------- | ----------- | --------- | ----------- |
+| `class`                  | `class`                      |             | `string`  | `undefined` |
+| `decimals`               | `decimals`                   |             | `number`  | `DECIMALS`  |
+| `digits`                 | `digits`                     |             | `number`  | `DIGITS`    |
+| `egldLabel`              | `egld-label`                 |             | `string`  | `undefined` |
+| `showLabel`              | `show-label`                 |             | `boolean` | `true`      |
+| `showLastNonZeroDecimal` | `show-last-non-zero-decimal` |             | `boolean` | `false`     |
+| `token`                  | `token`                      |             | `string`  | `undefined` |
+| `value`                  | `value`                      |             | `string`  | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/components/format-amount/tests/format-amount.spec.ts b/src/components/format-amount/tests/format-amount.spec.ts
@@ -1,16 +1,17 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { FormatAmount } from '../format-amount';
 
-describe('FormatAmount component', () => {
+describe('Format amount component when digits = 2', () => {
   const renderComponent = async (props: any) => {
     const page = await newSpecPage({
       components: [FormatAmount],
       html: '<format-amount></format-amount>',
-      supportsShadowDom: true,
+      supportsShadowDom: true
     });
 
     const component = page.root;
-    Object.keys(props).forEach((key) => {
+    // Set each property individually
+    Object.keys(props).forEach(key => {
       component[key] = props[key];
     });
 
@@ -30,64 +31,81 @@ describe('FormatAmount component', () => {
       .length;
   };
 
-  it('should render valid amount with decimals', async () => {
+  it('should show 2 non zero decimals', async () => {
     const props = {
-      isValid: true,
-      valueInteger: '99999',
-      valueDecimal: '99',
-      label: 'EGLD',
+      value: '9999979999800000000000000',
+      showLastNonZeroDecimal: false,
+      showLabel: true,
+      digits: 2,
+      egldLabel: 'EGLD'
     };
 
     const page = await renderComponent(props);
-    expect(page.root.shadowRoot.querySelector('span[data-testid="formatAmountInt"]').textContent).toBe('99999');
-    expect(decimalsSelector(page)).toBe('.99');
+    expect(await decimalsSelector(page)).toBe('.99');
   });
 
-  it('should not render decimals when valueDecimal is empty', async () => {
+  it('should show 2 zero decimals', async () => {
     const props = {
-      isValid: true,
-      valueInteger: '90000',
-      valueDecimal: '',
-      label: 'EGLD',
+      value: '9000000000000000000000000',
+      showLastNonZeroDecimal: false,
+      showLabel: true,
+      digits: 2,
+      egldLabel: 'EGLD'
     };
 
     const page = await renderComponent(props);
-    expect(decimalsSelector(page)).toBe(undefined);
+    expect(await decimalsSelector(page)).toBe('.00');
   });
 
-  it('should render invalid state when isValid is false', async () => {
+  it('should show all non zero decimals when showLastNonZeroDecimal = true', async () => {
     const props = {
-      isValid: false,
-      valueInteger: '',
-      valueDecimal: '',
-      label: '',
+      value: '100000000000000',
+      showLastNonZeroDecimal: true,
+      showLabel: false,
+      digits: 2,
+      egldLabel: 'EGLD'
     };
 
     const page = await renderComponent(props);
-    expect(page.root.shadowRoot.querySelector('span[data-testid="formatAmountInt"]').textContent).toBe('...');
+    expect(await decimalsSelector(page)).toBe('.0001');
   });
 
-  it('should render symbol when label is provided', async () => {
+  it('should not show decimals when value is 0', async () => {
     const props = {
-      isValid: true,
-      valueInteger: '90000',
-      valueDecimal: '00',
-      label: 'EGLD',
+      value: '100000000000000',
+      showLastNonZeroDecimal: false,
+      showLabel: true,
+      digits: 2,
+      egldLabel: 'EGLD'
     };
 
     const page = await renderComponent(props);
-    expect(symbolSelector(page)).toBe(1);
+    expect(await decimalsSelector(page)).toBe(undefined);
   });
 
-  it('should not render symbol when label is not provided', async () => {
+  it('should show symbol', async () => {
     const props = {
-      isValid: true,
-      valueInteger: '90000',
-      valueDecimal: '00',
-      label: '',
+      value: '9000000000000000000000000',
+      showLastNonZeroDecimal: false,
+      showLabel: true,
+      digits: 2,
+      egldLabel: 'EGLD'
     };
 
     const page = await renderComponent(props);
-    expect(symbolSelector(page)).toBe(0);
+    expect(await symbolSelector(page)).toBe(1);
+  });
+
+  it('should not show symbol', async () => {
+    const props = {
+      value: '9000000000000000000000000',
+      showLastNonZeroDecimal: false,
+      showLabel: false,
+      digits: 2,
+      egldLabel: 'EGLD'
+    };
+
+    const page = await renderComponent(props);
+    expect(await symbolSelector(page)).toBe(0);
   });
 });