Merge pull request #17 from multiversx/rt/fix/format-amount

arhtudormorar · web-flow · commit 4aa8b7f19101 · 2025-01-20T15:59:19.000+02:00
Updated format amount
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,4 +8,6 @@ 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,9 +53,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": ">= 6.7.2",
     "@fortawesome/free-solid-svg-icons": ">= 6.7.2",
-    "@multiversx/sdk-dapp-utils": ">= 1.0.3",
-    "@multiversx/sdk-core": ">= 13.5.0",
-    "bignumber.js": ">= 9.1.2",
+    "@multiversx/sdk-dapp-utils": ">= 1.0.4",
     "classnames": ">= 2.5.1",
     "qrcode": ">= 1.5.4"
   },
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -28,13 +28,11 @@ export namespace Components {
     }
     interface FormatAmount {
         "class"?: string;
-        "decimals"?: number;
-        "digits"?: number;
-        "egldLabel"?: string;
-        "showLabel"?: boolean;
-        "showLastNonZeroDecimal"?: boolean;
-        "token"?: string;
-        "value": string;
+        "isValid": boolean;
+        "label"?: string;
+        "labelClass"?: string;
+        "valueDecimal": string;
+        "valueInteger": string;
     }
     interface FungibleComponent {
     }
@@ -293,13 +291,11 @@ declare namespace LocalJSX {
     }
     interface FormatAmount {
         "class"?: string;
-        "decimals"?: number;
-        "digits"?: number;
-        "egldLabel"?: string;
-        "showLabel"?: boolean;
-        "showLastNonZeroDecimal"?: boolean;
-        "token"?: string;
-        "value"?: string;
+        "isValid"?: boolean;
+        "label"?: string;
+        "labelClass"?: string;
+        "valueDecimal"?: string;
+        "valueInteger"?: string;
     }
     interface FungibleComponent {
     }
diff --git a/src/components/format-amount/format-amount.tsx b/src/components/format-amount/format-amount.tsx
@@ -1,7 +1,4 @@
 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',
@@ -10,13 +7,11 @@ import { DECIMALS, DIGITS } from '@multiversx/sdk-dapp-utils/out/constants';
 })
 export class FormatAmount {
   @Prop() class?: 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;
+  @Prop() isValid: boolean;
+  @Prop() label?: string;
+  @Prop() labelClass?: string;
+  @Prop() valueDecimal: string;
+  @Prop() valueInteger: string;
 
   private renderInvalid() {
     return (
@@ -29,44 +24,32 @@ 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'>
-          {valueParts[0]}
+          {this.valueInteger}
         </span>
-        {valueParts.length > 1 && (
+        {this.valueDecimal && (
           <span class='decimals' data-testid='formatAmountDecimals'>
-            .{valueParts[1]}
+            .{this.valueDecimal}
           </span>
         )}
-        {this.showLabel && (
+        {this.label && (
           <span
             class={{
               'symbol': true,
-              [this.token]: !!this.token
+              [this.labelClass]: Boolean(this.labelClass)
             }}
             data-testid='formatAmountSymbol'
           >
-            {label}
+            {this.label}
           </span>
         )}
       </span>
     );
   }
 
   render() {
-    const isInteger = new BigNumber(this.value).isInteger();
-    return !isInteger ? this.renderInvalid() : this.renderValid();
+    return this.isValid ? this.renderValid() : this.renderInvalid();
   }
 }
diff --git a/src/components/format-amount/readme.md b/src/components/format-amount/readme.md
@@ -7,16 +7,14 @@
 
 ## Properties
 
-| 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` |
+| 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` |
 
 
 ----------------------------------------------
diff --git a/src/components/format-amount/tests/format-amount.spec.ts b/src/components/format-amount/tests/format-amount.spec.ts
@@ -1,17 +1,16 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { FormatAmount } from '../format-amount';
 
-describe('Format amount component when digits = 2', () => {
+describe('FormatAmount component', () => {
   const renderComponent = async (props: any) => {
     const page = await newSpecPage({
       components: [FormatAmount],
       html: '<format-amount></format-amount>',
-      supportsShadowDom: true
+      supportsShadowDom: true,
     });
 
     const component = page.root;
-    // Set each property individually
-    Object.keys(props).forEach(key => {
+    Object.keys(props).forEach((key) => {
       component[key] = props[key];
     });
 
@@ -31,81 +30,64 @@ describe('Format amount component when digits = 2', () => {
       .length;
   };
 
-  it('should show 2 non zero decimals', async () => {
+  it('should render valid amount with decimals', async () => {
     const props = {
-      value: '9999979999800000000000000',
-      showLastNonZeroDecimal: false,
-      showLabel: true,
-      digits: 2,
-      egldLabel: 'EGLD'
+      isValid: true,
+      valueInteger: '99999',
+      valueDecimal: '99',
+      label: 'EGLD',
     };
 
     const page = await renderComponent(props);
-    expect(await decimalsSelector(page)).toBe('.99');
+    expect(page.root.shadowRoot.querySelector('span[data-testid="formatAmountInt"]').textContent).toBe('99999');
+    expect(decimalsSelector(page)).toBe('.99');
   });
 
-  it('should show 2 zero decimals', async () => {
+  it('should not render decimals when valueDecimal is empty', async () => {
     const props = {
-      value: '9000000000000000000000000',
-      showLastNonZeroDecimal: false,
-      showLabel: true,
-      digits: 2,
-      egldLabel: 'EGLD'
+      isValid: true,
+      valueInteger: '90000',
+      valueDecimal: '',
+      label: 'EGLD',
     };
 
     const page = await renderComponent(props);
-    expect(await decimalsSelector(page)).toBe('.00');
+    expect(decimalsSelector(page)).toBe(undefined);
   });
 
-  it('should show all non zero decimals when showLastNonZeroDecimal = true', async () => {
+  it('should render invalid state when isValid is false', async () => {
     const props = {
-      value: '100000000000000',
-      showLastNonZeroDecimal: true,
-      showLabel: false,
-      digits: 2,
-      egldLabel: 'EGLD'
+      isValid: false,
+      valueInteger: '',
+      valueDecimal: '',
+      label: '',
     };
 
     const page = await renderComponent(props);
-    expect(await decimalsSelector(page)).toBe('.0001');
+    expect(page.root.shadowRoot.querySelector('span[data-testid="formatAmountInt"]').textContent).toBe('...');
   });
 
-  it('should not show decimals when value is 0', async () => {
+  it('should render symbol when label is provided', async () => {
     const props = {
-      value: '100000000000000',
-      showLastNonZeroDecimal: false,
-      showLabel: true,
-      digits: 2,
-      egldLabel: 'EGLD'
+      isValid: true,
+      valueInteger: '90000',
+      valueDecimal: '00',
+      label: 'EGLD',
     };
 
     const page = await renderComponent(props);
-    expect(await decimalsSelector(page)).toBe(undefined);
+    expect(symbolSelector(page)).toBe(1);
   });
 
-  it('should show symbol', async () => {
+  it('should not render symbol when label is not provided', async () => {
     const props = {
-      value: '9000000000000000000000000',
-      showLastNonZeroDecimal: false,
-      showLabel: true,
-      digits: 2,
-      egldLabel: 'EGLD'
+      isValid: true,
+      valueInteger: '90000',
+      valueDecimal: '00',
+      label: '',
     };
 
     const page = await renderComponent(props);
-    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);
+    expect(symbolSelector(page)).toBe(0);
   });
 });
