0.0.0-alpha.1

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+### Issue/Feature
+
+### Reproduce
+Issue exists on version `1.` of sdk-dapp-core-ui.
+
+### Root cause
+
+### Fix
+
+### Additional changes
+
+### Contains breaking changes
+[x] No
+
+[] Yes
+
+### Updated CHANGELOG
+[x] Yes
+
+### Testing
+[x] User testing
+[] Unit tests

.github/workflows/build.yml

@@ -0,0 +1,41 @@
+name: Build and test
+
+on:
+  pull_request:
+    branches: [main, development]
+    paths:
+      - 'src/**'
+      - '**.js'
+      - '**.ts'
+      - '**.json'
+  repository_dispatch:
+    types: run-unit-tests
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build-test:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run tests
+        run: yarn test --silent
+
+      - name: Build project
+        run: yarn build

.github/workflows/changelog.yml

@@ -0,0 +1,16 @@
+name: "CHANGELOG entry secretary"
+on:
+  pull_request:
+    branches: [main, development]
+    # The specific activity types are listed here to include "labeled" and "unlabeled"
+    # (which are not included by default for the "pull_request" trigger).
+    # This is needed to allow skipping enforcement of the changelog in PRs with specific labels,
+    # as defined in the (optional) "skipLabels" property.
+    types: [opened, synchronize, reopened, ready_for_review, labeled, unlabeled]
+
+jobs:
+  # Enforces the update of a changelog file on every pull request 
+  changelog:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: dangoslen/changelog-enforcer@v3

.github/workflows/npm-publish.yml

@@ -0,0 +1,52 @@
+name: Publish sdk-dapp-core-ui
+
+on:
+  push:
+    branches: [main]
+  repository_dispatch:
+    types: publish-npm
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run tests
+        run: yarn test
+
+      - name: Build project
+        run: yarn build
+
+      - name: Get package info
+        id: package
+        uses: andreigiura/[email protected]
+
+      - name: Publish to npmjs next version
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.package.outputs.is-prerelease == 'true'}}
+        run: echo ${{ steps.package.outputs.is-prerelease}} && npm publish --tag next
+
+      - name: Publish to npmjs
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.package.outputs.is-prerelease == 'false' }}
+        run: npm publish

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+All notable changes will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-core-ui",
-  "version": "0.0.0-alpha.0",
+  "version": "0.0.0-alpha.1",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
@@ -53,8 +53,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": ">= 6.7.2",
     "@fortawesome/free-solid-svg-icons": ">= 6.7.2",
-    "@multiversx/sdk-dapp-utils": ">= 1.0.2",
-    "bignumber.js": ">= 9.1.2",
+    "@multiversx/sdk-dapp-utils": ">= 1.0.4",
     "classnames": ">= 2.5.1",
     "qrcode": ">= 1.5.4"
   },

src/common/generic-modal/generic-modal.css

@@ -1,33 +1,34 @@
 :host {
-    display: block;
-  }
-
-  .modal {
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.4);
-  }
-
-  .modal-content {
-    background-color: #ffffff;
-    margin: 5% auto;
-    padding: 20px;
-    border-radius: 12px;
-    width: 90%;
-    max-width: 600px;
-  }
-
-  .modal-header {
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  .close {
-    float: right;
-    cursor: pointer;
-    padding: 5px;
-  }
+  display: block;
+}
+
+.modal {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  overflow: auto;
+}
+
+.modal-content {
+  background-color: #ffffff;
+  margin: 5% auto;
+  padding: 20px;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 600px;
+}
+
+.modal-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.close {
+  float: right;
+  cursor: pointer;
+  padding: 5px;
+}

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 {
     }

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, ZERO } from '@multiversx/sdk-dapp-utils/out/constants';
 
 @Component({
   tag: 'format-amount',
@@ -10,13 +7,11 @@ import { DECIMALS, DIGITS, ZERO } 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,49 +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 hasNoDecimals = valueParts.length === 1;
-    const isNotZero = formattedValue !== ZERO;
-
-    if (this.digits > 0 && hasNoDecimals && isNotZero) {
-      valueParts.push(ZERO.repeat(this.digits));
-    }
-
     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'
           >
-            {` ${this.token ?? this.egldLabel}`}
+            {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();
   }
 }

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` |
 
 
 ----------------------------------------------