diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a79f552..48e3dd31 100644
--- 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)
\ No newline at end of file
diff --git a/package.json b/package.json
index 461ec3af..0cd7942f 100644
--- 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
index b8e889e1..5721a2d0 100644
--- 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
index c82b09f4..60f2189e 100644
--- 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,36 +24,25 @@ 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 (
- {valueParts[0]}
+ {this.valueInteger}
- {valueParts.length > 1 && (
+ {this.valueDecimal && (
- .{valueParts[1]}
+ .{this.valueDecimal}
)}
- {this.showLabel && (
+ {this.label && (
- {label}
+ {this.label}
)}
@@ -66,7 +50,6 @@ export class FormatAmount {
}
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
index b26ccf11..645ff7d9 100644
--- 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
index a72b28f3..49440fac 100644
--- 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: '',
- 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);
});
});