Merge pull request #130 from multiversx/development

v0.0.7

Author: MiroMargineanu

CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.0.7](https://github.com/multiversx/mx-sdk-dapp-ui/pull/130)] - 2025-06-23
+
+- [Fixed Ledger connect header close button not working](https://github.com/multiversx/mx-sdk-dapp-ui/pull/129)
+- [Fixed the ExplorerLink shadow DOM status and layout](https://github.com/multiversx/mx-sdk-dapp-ui/pull/128)
+- [Updated the Ledger mobile layout and converted styles to Tailwind](https://github.com/multiversx/mx-sdk-dapp-ui/pull/127)
+- [Unify colors in global variables for light / dark themes](https://github.com/multiversx/mx-sdk-dapp-ui/pull/126)
+- [Removed Satoshi font and allow custom fonts from dApp](https://github.com/multiversx/mx-sdk-dapp-ui/pull/125)
+- [Updated Unlock Panel to be responsive and mobile friendly](https://github.com/multiversx/mx-sdk-dapp-ui/pull/124)
+- [Mobile version for notifications feed](https://github.com/multiversx/mx-sdk-dapp-ui/pull/123)
+- [Updated the CSS to leverage on Tailwind classes in multiple elements](https://github.com/multiversx/mx-sdk-dapp-ui/pull/122)
+- [Added "data" field decoding methods support](https://github.com/multiversx/mx-sdk-dapp-ui/pull/121)
+- [Updated README](https://github.com/multiversx/mx-sdk-dapp-ui/pull/120)
+- [Migrate styles from css to tailwind](https://github.com/multiversx/mx-sdk-dapp-ui/pull/119)
+- [Added dynamic gas](https://github.com/multiversx/mx-sdk-dapp-ui/pull/118)
+
 ## [[0.0.6](https://github.com/multiversx/mx-sdk-dapp-ui/pull/117)] - 2025-05-30
 
 - [Refactor Transactions Table types][https://github.com/multiversx/mx-sdk-dapp-ui/pull/116]

README.md

@@ -6,16 +6,18 @@ MultiversX Front-End Library for JavaScript and TypeScript (written in TypeScrip
 
 `sdk-dapp-ui` is a library that holds components to display user information from the MultiversX blockchain.
 
-Since the library is built using [Stencil](https://stenciljs.com/), it can be used in any front-end framework, such as React, Angular, or Vue, but also in back-end frameworks like Next.js.
+Since the library is built using [Stencil](https://stenciljs.com/), it can be used in any front-end framework, such as [React](https://github.com/multiversx/mx-template-dapp), Angular, or [Solid.js](https://github.com/multiversx/mx-solidjs-template-dapp), but also in back-end frameworks like [Next.js](https://github.com/multiversx/mx-template-dapp-nextjs).
 
 ## GitHub project
+
 The GitHub repository can be found here: [https://github.com/multiversx/mx-sdk-dapp-ui](https://github.com/multiversx/mx-sdk-dapp-ui)
 
 ## Live demo: template-dapp
-See [Template dApp](https://template-dapp.multiversx.com/) for live demo or checkout usage in the [Github repo](https://github.com/multiversx/mx-template-dapp)
 
+See [Template dApp](https://template-dapp.multiversx.com/) for live demo or checkout usage in the [Github repo](https://github.com/multiversx/mx-template-dapp)
 
 ## Requirements
+
 - Node.js version 20.13.1+
 - Npm version 10.5.2+
 
@@ -41,96 +43,120 @@ yarn add @multiversx/sdk-dapp-ui
 
 `sdk-dapp-ui` library is primarily designed to work with [@multiversx/sdk-dapp](https://www.npmjs.com/package/@multiversx/sdk-dapp), since components are designed to display data and emit user events, but do not hold any business logic.
 
-The library is divided into three main categories:
-There are three types of components in the library: 
-1. The ones that only display data (visual) 
-2. The ones that display data provided by a controller (controlled)
-3. The ones that are designed for user interaction (functional). 
-
-Below we will detail these categories:
-
-### 1. Visual components
+The basic usage of the components would be importing the component and its corresponding interface and creating a wrapper for it in your application.
 
-The basic usage of the component would be importing the component and its corresponding interface and creating a wrapper for it in your application.
+It outputs both web components (working out of the box) and React components (you need to create a wrapper for them).
 
-React example where the component does not need any processed data:
+### React Components import
 
 ```tsx
-import type { CopyButton as CopyButtonPropsType } from '@multiversx/sdk-dapp-ui/dist/types/components/visual/copy-button/copy-button.d.ts';
-export { CopyButton as ReactCopyButton } from '@multiversx/sdk-dapp-ui/react';
-
-export const CopyButton = (props: CopyButtonPropsType) => {
-  return <ReactCopyButton {...props} />;
-};
+export {
+  MvxCopyButton,
+  MvxExplorerLink,
+  MvxFormatAmount,
+  MvxTransactionsTable,
+  MvxUnlockButton,
+} from '@multiversx/sdk-dapp-ui/react';
 ```
 
-### 2. Controlled components
+The library is divided into three main categories of components:
 
-Controlled components are designed to display data that is processed by a controller. The controller is responsible for processing the data and providing it to the component.
+1. The ones that only display data (visual)
+2. The ones that display data provided by a controller (controlled)
+3. The ones that are designed for user interaction (functional)
 
-A typycal flow of data would be:
+### 1. Visual Components
 
-```mermaid
-flowchart LR
-    A["user data"] <--> B["sdk-dapp controller"] <--> C["sdk-dapp-ui webcomponent"]
-```
+Visual components are the most basic building blocks that handle pure presentation. They are controlled through props and don't contain any business logic. These components focus on consistent styling and user interface elements.
 
-Vanilla example where the component makes use of a controller from `sdk-dapp`:
+Components:
 
-```tsx
-export { FormatAmountController } from "@multiversx/sdk-dapp/out/controllers/FormatAmountController";
-import { DIGITS, DECIMALS } from "@multiversx/sdk-dapp-utils/out/constants";
-
-
-export const FormatAmount = (props: {
-  egldLabel?: string;
-  value: string;
-}) => {
-  const { isValid, valueDecimal, valueInteger, label } =
-    FormatAmountController.getData({
-      digits: DIGITS,
-      decimals: DECIMALS,
-      ...props,
-      input: props.value
-    });
+- **Preloader** (`mvx-preloader`): A loading indicator for asynchronous operations
+- **Font Awesome Icon** (`mvx-fa-icon`): Icon component with Font Awesome integration
+- **Side Panel** (`mvx-side-panel`): Sliding panel with header and content sections
+- **Tooltip** (`mvx-tooltip`): Contextual information display with hover/click activation
+- **Transaction List Item**: Structured display of transaction information
+- **Pagination** (`mvx-pagination`): Navigation controls for paginated content
+
+### Visual Component Example
 
+```tsx
+export { getStore } from '@multiversx/sdk-dapp/out/store/store';
+export type { ExplorerLink as ExplorerLinkSDKPropsType } from '@multiversx/sdk-dapp-ui/dist/types/components/visual/explorer-link/explorer-link.d.ts';
+export { networkSelector } from '@multiversx/sdk-dapp/out/store/selectors/networkSelectors';
+import { IPropsWithClass, IPropsWithChildren } from 'types';
+
+interface ExplorerLinkPropsType extends Partial<ExplorerLinkSDKPropsType> {
+  'page': string;
+  'class'?: string;
+  'data-testid'?: string;
+  'children'?: JSX.Element;
+}
+
+export const ExplorerLink = ({
+  children,
+  page,
+  'class': className,
+  'data-testid': dataTestId,
+  ...rest
+}: ExplorerLinkPropsType) => {
+  const store = getStore();
+  const network = networkSelector(store.getState());
   return (
-    <format-amount
-      class={props.class}
-      data-testid={props["data-testid"]}
-      isValid={isValid}
-      label={label}
-      valueDecimal={valueDecimal}
-      valueInteger={valueInteger}
-    />
+    <mvx-explorer-link link={`${network.explorerAddress}${page}`} class={className} data-testid={dataTestId} {...rest}>
+      {children ? <div>{children}</div> : null}
+    </mvx-explorer-link>
   );
 };
 ```
 
+### 2. Controlled Components
 
-### 3. Functional components
+Controlled components are designed to display data that is processed by a controller. They receive formatted data through props and focus on consistent data presentation. These components are typically used in data-heavy sections of the application.
 
-Functional components in the `sdk-dapp-ui` library are designed to create interactive UIs and handle user events effectively. Typically, these components are embedded in login or signing transactions flows. They typically leverage the functionality provided by the `@multiversx/sdk-dapp` library to manage state and actions.
+Components:
 
-The way functional components are controlled are trough a [pub-sub pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) called EventBus. Each webcomponent has a method of exposing its EventBus, thus allowing sdk-dapp to get a reference to it and use it for communication.
+- **Format Amount** (`mvx-format-amount`): Numerical amount formatting with validation
+- **Transactions Table** (`mvx-transactions-table`): Structured display of transaction data
 
-```mermaid
-flowchart LR
-    A["Controller"] <--> B["Event Bus"] <--> C["webcomponent"]
-```
+### Controlled Component Example
 
-```typescript
-const modalElement = await createUIElement<LedgerConnectModal>(
-  'ledger-connect-modal'
-);
-const eventBus = await modalElement.getEventBus();
-eventBus.publish('TRANSACTION_TOAST_DATA_UPDATE', someData);
+```tsx
+import { TransactionsTableController } from '@multiversx/sdk-dapp/out/controllers/TransactionsTableController';
+import { accountSelector } from '@multiversx/sdk-dapp/out/store/selectors/accountSelectors';
+import { networkSelector } from '@multiversx/sdk-dapp/out/store/selectors/networkSelectors';
+import { getStore } from '@multiversx/sdk-dapp/out/store/store';
+
+export const TransactionsTable = () => {
+  const store = getStore();
+  const network = networkSelector(store.getState());
+  const account = accountSelector(store.getState());
+
+  const data = await TransactionsTableController.processTransactions({
+    address: account().address,
+    egldLabel: network().egldLabel,
+    explorerAddress: network().explorerAddress,
+    transactions: props.transactions || [],
+  });
+
+  return <mvx-transactions-table transactions={data} />;
+};
 ```
 
-If you need to have a custom implementation of a functional component, you have to follow some simple steps:
+### 3. Functional Components
+
+Functional components handle specific application functionality and business logic. They integrate with the application's event system and manage user interactions. These components are typically used in complex workflows like authentication and transaction signing.
 
-- design a UI component that has a method called `getEventBus`, implementing the `IEventBus` interface found in `src/utils/EventBus.ts`
-- make sure to implement the same interfaces as the original component. For example, if overriding the `ledger-connect-modal`, you can find the interfaces in `src/components/ledger-connect-modal/ledger-connect-modal.types.ts`
+Components:
+
+- **Sign Transactions Panel** (`mvx-sign-transactions-panel`): Transaction signing workflow
+- **Notifications Feed** (`mvx-notifications-feed`): Transaction notifications and history
+- **Wallet Connect** (`mvx-wallet-connect`): Wallet connection flow
+- **Unlock Panel** (`mvx-unlock-panel`): Wallet authentication
+- **Toast List** (`mvx-toast-list`): Notification management
+- **Ledger Connect** (`mvx-ledger-connect`): Hardware wallet connection
+
+You can check out the way these components are used in `@multiversx/sdk-dapp` [here](https://github.com/multiversx/mx-sdk-dapp/blob/main/src/managers/UnlockPanelManager/UnlockPanelManager.ts).
 
 ## Debugging your dApp
 
@@ -159,3 +185,14 @@ To run the unit tests, run:
 npm test
 ```
 
+To run a specific test file in Stencil, run:
+
+```bash
+npx stencil test src/components/visual/transaction-list-item/tests/transaction-list-item.spec.tsx --spec
+```
+
+To run an individual test from a specific test file in Stencil, run:
+
+```bash
+npx stencil test src/components/visual/transaction-list-item/tests/transaction-list-item.spec.tsx --spec -t 'renders with asset icon'
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
@@ -28,6 +28,10 @@
     "./react": {
       "import": "./dist/react/components.ts",
       "require": "./dist/react/components.ts"
+    },
+    "./react/constants": {
+      "import": "./dist/react/constants.ts",
+      "require": "./dist/react/constants.ts"
     }
   },
   "repository": {

src/assets/fonts/Satoshi-Bold.woff2

@@ -1,8 +1,7 @@
 :host {
-  display: flex;
+  @apply mvx:flex;
 
   .arrow-right-icon {
-    width: 16px;
-    height: 16px;
+    @apply mvx:w-4 mvx:h-4;
   }
 }

src/assets/fonts/Satoshi-Medium.woff2

@@ -0,0 +1,8 @@
+:host {
+  @apply mvx:flex;
+
+  .arrow-up-right-from-square-icon {
+    @apply mvx:w-4 mvx:h-4 mvx:flex;
+    fill: var(--mvx-text-color-primary);
+  }
+}