{"id":31619245,"url":"https://github.com/multiversx/mx-sdk-dapp-ui","last_synced_at":"2026-02-04T10:51:04.946Z","repository":{"id":265090549,"uuid":"895103831","full_name":"multiversx/mx-sdk-dapp-ui","owner":"multiversx","description":"A library to hold UI components for a dApp on the MultiversX blockchain","archived":false,"fork":false,"pushed_at":"2025-10-02T14:53:24.000Z","size":2498,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-10-02T16:17:13.604Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multiversx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-27T15:08:16.000Z","updated_at":"2025-09-29T11:46:11.000Z","dependencies_parsed_at":"2024-11-27T16:24:51.606Z","dependency_job_id":"ac95799e-8b08-47d3-9f30-1659b00b7e16","html_url":"https://github.com/multiversx/mx-sdk-dapp-ui","commit_stats":null,"previous_names":["multiversx/mx-sdk-dapp-core-ui","multiversx/mx-sdk-dapp-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/multiversx/mx-sdk-dapp-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multiversx","download_url":"https://codeload.github.com/multiversx/mx-sdk-dapp-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278621844,"owners_count":26017253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-06T14:02:08.227Z","updated_at":"2026-02-04T10:51:04.936Z","avatar_url":"https://github.com/multiversx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MultiversX UI library for Front-End dApps\n\nMultiversX Front-End Library for JavaScript and TypeScript (written in TypeScript).\n\n## Introduction\n\n`sdk-dapp-ui` is a library that holds components to display user information from the MultiversX blockchain.\n\nSince 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).\n\n## GitHub project\n\nThe GitHub repository can be found here: [https://github.com/multiversx/mx-sdk-dapp-ui](https://github.com/multiversx/mx-sdk-dapp-ui)\n\n## Live demo: template-dapp\n\nSee [Template dApp](https://template-dapp.multiversx.com/) for live demo or checkout usage in the [Github repo](https://github.com/multiversx/mx-template-dapp)\n\n## Requirements\n\n- Node.js version 20.13.1+\n- Npm version 10.5.2+\n\n## Distribution\n\n[npm](https://www.npmjs.com/package/@multiversx/sdk-dapp-ui)\n\n## Installation\n\nThe library can be installed via npm or yarn.\n\n```bash\nnpm install @multiversx/sdk-dapp-ui\n```\n\nor\n\n```bash\nyarn add @multiversx/sdk-dapp-ui\n```\n\n## Usage\n\n`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.\n\nThe basic usage of the components would be importing the component and its corresponding interface and creating a wrapper for it in your application.\n\nIt outputs both web components (working out of the box) and React components (you need to create a wrapper for them).\n\n### React Components import\n\n```tsx\nexport { MvxCopyButton, MvxExplorerLink, MvxFormatAmount, MvxTransactionsTable } from '@multiversx/sdk-dapp-ui/react';\n```\n\nThe library is divided into three main categories of components:\n\n1. The ones that only display data (visual)\n2. The ones that display data provided by a controller (controlled)\n3. The ones that are designed for user interaction (functional)\n\n### 1. Visual Components\n\nVisual 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.\n\nComponents:\n\n- **Preloader** (`mvx-preloader`): A loading indicator for asynchronous operations\n- **Side Panel** (`mvx-side-panel`): Sliding panel with header and content sections\n- **Tooltip** (`mvx-tooltip`): Contextual information display with hover/click activation\n- **Transaction List Item**: Structured display of transaction information\n- **Pagination** (`mvx-pagination`): Navigation controls for paginated content\n\n### Visual Component Example\n\n```tsx\nexport { getStore } from '@multiversx/sdk-dapp/out/store/store';\nexport type { ExplorerLink as ExplorerLinkSDKPropsType } from '@multiversx/sdk-dapp-ui/dist/types/components/visual/explorer-link/explorer-link.d.ts';\nexport { networkSelector } from '@multiversx/sdk-dapp/out/store/selectors/networkSelectors';\nimport { IPropsWithClass, IPropsWithChildren } from 'types';\n\ninterface ExplorerLinkPropsType extends Partial\u003cExplorerLinkSDKPropsType\u003e {\n  'page': string;\n  'class'?: string;\n  'data-testid'?: string;\n  'children'?: JSX.Element;\n}\n\nexport const ExplorerLink = ({\n  children,\n  page,\n  'class': className,\n  'data-testid': dataTestId,\n  ...rest\n}: ExplorerLinkPropsType) =\u003e {\n  const store = getStore();\n  const network = networkSelector(store.getState());\n  return (\n    \u003cmvx-explorer-link link={`${network.explorerAddress}${page}`} class={className} data-testid={dataTestId} {...rest}\u003e\n      {children ? \u003cdiv\u003e{children}\u003c/div\u003e : null}\n    \u003c/mvx-explorer-link\u003e\n  );\n};\n```\n\n### 2. Controlled Components\n\nControlled 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.\n\nComponents:\n\n- **Format Amount** (`mvx-format-amount`): Numerical amount formatting with validation\n- **Transactions Table** (`mvx-transactions-table`): Structured display of transaction data\n\n### Controlled Component Example\n\n```tsx\nimport { TransactionsTableController } from '@multiversx/sdk-dapp/out/controllers/TransactionsTableController';\nimport { accountSelector } from '@multiversx/sdk-dapp/out/store/selectors/accountSelectors';\nimport { networkSelector } from '@multiversx/sdk-dapp/out/store/selectors/networkSelectors';\nimport { getStore } from '@multiversx/sdk-dapp/out/store/store';\n\nexport const TransactionsTable = () =\u003e {\n  const store = getStore();\n  const network = networkSelector(store.getState());\n  const account = accountSelector(store.getState());\n\n  const data = await TransactionsTableController.processTransactions({\n    address: account().address,\n    egldLabel: network().egldLabel,\n    explorerAddress: network().explorerAddress,\n    transactions: props.transactions || [],\n  });\n\n  return \u003cmvx-transactions-table transactions={data} /\u003e;\n};\n```\n\n### 3. Functional Components\n\nFunctional 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.\n\nComponents:\n\n- **Sign Transactions Panel** (`mvx-sign-transactions-panel`): Transaction signing workflow\n- **Notifications Feed** (`mvx-notifications-feed`): Transaction notifications and history\n- **Wallet Connect** (`mvx-wallet-connect`): Wallet connection flow\n- **Unlock Panel** (`mvx-unlock-panel`): Wallet authentication\n- **Toast List** (`mvx-toast-list`): Notification management\n- **Ledger Connect** (`mvx-ledger-connect`): Hardware wallet connection\n\nYou 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).\n\n## Debugging your dApp\n\nThe recommended way to debug your application is by using [lerna](https://lerna.js.org/). Make sure you have the same package version in sdk-daap-core's package.json and in your project's package.json.\n\nIf you preffer to use [npm link](https://docs.npmjs.com/cli/v11/commands/npm-link), make sure to use the `preserveSymlinks` option in the server configuration:\n\n```js\n  resolve: {\n    preserveSymlinks: true, // 👈\n    alias: {\n      src: \"/src\",\n    },\n  },\n```\n\nTo build the library, run:\n\n```bash\nnpm run build\n```\n\nTo run the unit tests, run:\n\n```bash\nnpm test\n```\n\nTo run a specific test file in Stencil, run:\n\n```bash\nnpx stencil test src/components/visual/transaction-list-item/tests/transaction-list-item.spec.tsx --spec\n```\n\nTo run an individual test from a specific test file in Stencil, run:\n\n```bash\nnpx stencil test src/components/visual/transaction-list-item/tests/transaction-list-item.spec.tsx --spec -t 'renders with asset icon'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-ui/lists"}