{"id":31619320,"url":"https://github.com/multiversx/mx-sdk-dapp-core","last_synced_at":"2025-10-23T15:02:01.629Z","repository":{"id":233508689,"uuid":"787314441","full_name":"multiversx/mx-sdk-dapp-core","owner":"multiversx","description":"Core logic for building vanilla TypeScript dApps on the MultiversX blockchain","archived":false,"fork":false,"pushed_at":"2025-05-20T13:29:19.000Z","size":2045,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-10-06T14:11:08.603Z","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":"other","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}},"created_at":"2024-04-16T09:38:28.000Z","updated_at":"2025-05-07T11:47:45.000Z","dependencies_parsed_at":"2024-08-05T12:21:10.557Z","dependency_job_id":"c42cd3e8-f40c-446a-8ece-19d6295f5a6a","html_url":"https://github.com/multiversx/mx-sdk-dapp-core","commit_stats":null,"previous_names":["multiversx/mx-sdk-dapp-core"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/multiversx/mx-sdk-dapp-core","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multiversx","download_url":"https://codeload.github.com/multiversx/mx-sdk-dapp-core/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-core/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017932,"owners_count":26086213,"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-14T02:00:06.444Z","response_time":60,"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:03:58.189Z","updated_at":"2025-10-14T04:39:14.285Z","avatar_url":"https://github.com/multiversx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⚠️ THIS PROJECT HAS MOVED TO THE ORIGINAL [@multiversx/sdk-dapp](https://github.com/multiversx/mx-sdk-dapp) AND WILL BE DELETED ⚠️\n\n_____________________________________________________\n\n# MultiversX SDK for Front-End DApps\n\nMultiversX Front-End SDK for JavaScript and TypeScript (written in TypeScript).\n\n## Introduction\n\n`sdk-dapp-core` is a library that holds core functional logic that can be used to create a dApp on MultiversX Network.\n\nIt is built for applications that use any of the following technologies:\n\n- React\n- Angular\n- Vue\n- Any other JavaScript framework (e.g. Solid.js etc.)\n- React Native\n- Next.js\n\n## GitHub project\n\nThe GitHub repository can be found here: [https://github.com/multiversx/mx-sdk-dapp-core](https://github.com/multiversx/mx-sdk-dapp-core)\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-core)\n\n## Installation\n\nThe library can be installed via npm or yarn.\n\n```bash\nnpm install @multiversx/sdk-dapp-core\n```\n\nor\n\n```bash\nyarn add @multiversx/sdk-dapp-core\n```\n\nIf you need only the core behaviour, without the additional UI, you can create a project-specific `.npmrc` file to configure per-package installation behavior. This will skip the installation of `@multiversx/sdk-dapp-core-ui`, but keep in mind that you may need to provide the UI components yourself.\nAlso, make sure you run your app on `https`, not `http`, otherwise some providers will not work.\n\n```bash\n## .npmrc\n@multiversx/sdk-dapp-core:omit-optional=true\n## enable the option when needed with:\n## @multiversx/sdk-dapp-core:omit-optional=false\n\n## Run Installation\n## When you run npm install, NPM will use the configurations specified in the .npmrc file:\nnpm install\n```\n\nIf you're transitioning from @multiversx/sdk-dapp, you can check out the [Migration guide PR](https://github.com/multiversx/mx-template-dapp/pull/264) of Template Dapp\n\n## Usage\n\nsdk-dapp-core aims to abstract and simplify the process of interacting with users' wallets and with the MultiversX blockchain, allowing developers to easily get started with new applications.\n\n```mermaid\nflowchart LR\n    A[\"Signing Providers \u0026 APIs\"] \u003c--\u003e B[\"sdk-dapp-core\"] \u003c--\u003e C[\"dApp\"]\n```\n\nThe basic concepts you need to understand are configuration, provider interaction, transactions, and presenting data. These are the building blocks of any dApp, and they are abstracted in the `sdk-dapp-core` library.\n\nHaving this knowledge, we can consider several steps needed to put a dApp together:\n\n**Table 1**. Steps to build a dApp\n| # | Step | Description |\n|---|------|-------------|\n| 1 | Configuration | - storage configuration (e.g. sessionStorage, localStorage etc.)\u003cbr\u003e- chain configuration\u003cbr\u003e- custom provider configuration (adding / disabling / changing providers) |\n| 2 | Provider interaction | - logging in and out\u003cbr\u003e- signing transactions / messages |\n| 3 | Presenting data | - get store data (e.g. account balance, account address etc.)\u003cbr\u003e- use components to display data (e.g. balance, address, transactions list) |\n| 4 | Transactions | - sending transactions\u003cbr\u003e- tracking transactions |\n\nEach of these steps will be explained in more detail in the following sections.\n\n### 1. Configuration\n\nBefore your application bootstraps, you need to configure the storage, the network, and the signing providers. This is done by calling the `initApp` method from the `core/methods` folder.\n\n```typescript\n// index.tsx\nimport { initApp } from '@multiversx/sdk-dapp-core/out/core/methods/initApp/initApp';\nimport type { InitAppType } from '@multiversx/sdk-dapp-core/out/core/methods/initApp/initApp.types';\nimport { EnvironmentsEnum } from '@multiversx/sdk-dapp-core/out/types/enums.types';\nimport { App } from \"./App\";\n\nconst config: InitAppType = {\n  storage: { getStorageCallback: () =\u003e sessionStorage },\n  dAppConfig: {\n    // nativeAuth: true, // optional\n    environment: EnvironmentsEnum.devnet,\n    // network: { // optional\n    //   walletAddress: 'https://devnet-wallet.multiversx.com'\n    // },\n    successfulToastLifetime: 5000\n  }\n  // customProviders: [myCustomProvider] // optional\n};\n\ninitApp(config).then(() =\u003e {\n  render(() =\u003e \u003cApp /\u003e, root!); // render your app\n});\n```\n\n### 2. Provider interaction\n\nOnce your dApp has loaded, the first user action is logging in with a chosen provider.\n\n```typescript\nimport { ProviderTypeEnum } from '@multiversx/sdk-dapp-core/out/core/providers/types/providerFactory.types';\nimport { ProviderFactory } from '@multiversx/sdk-dapp-core/out/core/providers/ProviderFactory';\n\nconst provider = await ProviderFactory.create({\n  type: ProviderTypeEnum.extension\n});\nawait provider.login();\n```\n\n### 3. Displaying user data\n\nDepending on the framework, you can either use hooks or selectors to get the user details:\n\n#### React hooks solution:\n\n```typescript\nimport { useGetAccount } from '@multiversx/sdk-dapp-core/out/store/selectors/hooks/account/useGetAccount';\nimport { useGetNetworkConfig } from '@multiversx/sdk-dapp-core/out/store/selectors/hooks/network/useGetNetworkConfig';\n\nconst account = useGetAccount();\nconst {\n  network: { egldLabel }\n} = useGetNetworkConfig();\n\nconsole.log(account.address);\nconsole.log(`${account.balance} ${egldLabel}`);\n```\n\n#### Store selector functions:\n\n```typescript\nimport { getAccount } from '@multiversx/sdk-dapp-core/out/core/methods/account/getAccount';\nimport { getNetworkConfig } from '@multiversx/sdk-dapp-core/out/core/methods/network/getNetworkConfig';\n\nconst account = getAccount();\nconst { egldLabel } = getNetworkConfig();\n```\n\n### 4. Transactions\n\n#### Signing transactions\n\nTo sign transactions, you first need to create the `Transaction` object then pass it to the initialized provider.\n\n```typescript\nimport { Transaction, TransactionPayload } from '@multiversx/sdk-core/out';\nimport {\n  GAS_PRICE,\n  GAS_LIMIT\n} from '@multiversx/sdk-dapp-core/out/constants/mvx.constants';\nimport { getAccountProvider } from '@multiversx/sdk-dapp-core/out/core/providers/helpers/accountProvider';\nimport { refreshAccount } from '@multiversx/sdk-dapp-core/out/utils/account/refreshAccount';\n\nconst pongTransaction = new Transaction({\n  value: '0',\n  data: new TransactionPayload('pong'),\n  receiver: contractAddress,\n  gasLimit: GAS_LIMIT,\n  gasPrice: GAS_PRICE,\n  chainID: network.chainId,\n  nonce: account.nonce,\n  sender: account.address,\n  version: 1\n});\n\nawait refreshAccount(); // optionally, to get the latest nonce\nconst provider = getAccountProvider();\nconst signedTransactions = await provider.signTransactions(transactions);\n```\n\n#### Sending and tracking transactions\n\nThen, to send the transactions, you need to use the `TransactionManager` class and pass in the signedTransactions to the send method. You can optionally track the transactions by using the track method. This will create a toast notification with the transaction hash and its status.\n\n```typescript\nimport { TransactionManager } from '@multiversx/sdk-dapp-core/out/core/managers/TransactionManager';\n\nconst txManager = TransactionManager.getInstance();\nawait txManager.send(signedTransactions);\nawait txManager.track(signedTransactions);\n```\n\nOnce the transactions are executed on the blockchain, the flow ends with the user logging out.\n\n```typescript\nimport { getAccountProvider } from '@multiversx/sdk-dapp-core/out/core/providers/helpers/accountProvider';\nconst provider = getAccountProvider();\nawait provider.logout();\n```\n\n## Internal structure\n\nWe have seen in the previous chapter what are the minimal steps to get up and running with a blockchain interaction using sdk-dapp-core. Next we will detail each element mentioned above\n\n**Table 2**. Elements needed to build a dApp\n| # | Type | Description |\n|---|------|-------------|\n| 1 | Network | Chain configuration |\n| 2 | Provider | The signing provider for logging in and singing transactions |\n| 3 | Account | Inspecting user address and balance |\n| 4 | Transactions Manager | Sending and tracking transactions |\n| 5 | UI Components | Displaying UI information like balance, public keys etc. |\n\nSince these are mixtures of business logic and UI components, the library is split into several folders to make it easier to navigate.\nWhen inspecting the package, there is more content under `src`, but the main folders of interest are:\n\n```bash\nsrc/\n├── apiCalls/ ### methods for interacting with the API\n├── constants/ ### useful constants from the ecosystem like ledger error codes, default gas limits for transactions etc.\n├── controllers/ ### business logic for UI elements like transactions and amount formatting\n├── core/ ### hosting the provider class, and all implementations for different signing providers\n└── store/ ### store initialization, middleware, slices, selectors and actions\n```\n\nConceptually, these can be split into 3 main parts:\n\n- First is the business logic in `apiCalls`, `constants` and `core` (signing providers).\n- Then comes the persistence layer hosted in the `store` folder, using [Zustand](https://zustand.docs.pmnd.rs/) under the hood.\n- Last are the UI components hosted in [@multiversx/sdk-dapp-core](https://github.com/multiversx/mx-sdk-dapp-core-ui) with some components controlled on demand by classes defined in `controlles`\n\nNext, we will take the elements from Table 2 and detail them in the following sections.\n\n### 1. Network\n\nThe network configuration is done in the `initApp` method, where you can make several confgurations like:\n\n- specifying the environment (devnet, testnet, mainnet)\n- overriding certain network parameters like wallet address, explorer address etc.\n\nOnce the network is configured, the `network` slice in the store will hold the network configuration.\n\nTo query different network parameters, you can use the `getNetworkConfig` method from the `core/methods/network` folder.\n\n### 2. Provider\n\nThe provider is the main class that handles the signing of transactions and messages. It is initialized in the `initApp` method and can be accessed via the `getAccountProvider` method from the `core/providers/helpers` folder.\n\n#### Initialization\n\nIt's important to initialize it on app load (this is take care of by `initApp`), since it restores the session from the store and allows signing transactions without the need to make a new login.\n\n#### Creating a custom provider\n\nIf you need to create a custom signing provider, make sure to extend the `IProvider` interface and implement all required methods (see example [here](https://github.com/multiversx/mx-template-dapp/tree/main/src/provider)). Next step would be to include it in the `customProviders` array in the `initApp` method or add it to the [window object](https://github.com/multiversx/mx-template-dapp/tree/main/src/initConfig). Last step is to login using the custom provider.\n\n```typescript\nimport { ProviderTypeEnum } from '@multiversx/sdk-dapp-core/out/core/providers/types/providerFactory.types';\n\nconst ADDITIONAL_PROVIDERS = {\n  myCustomProvider: 'myCustomProvider'\n} as const;\n\n// do this if you want to reference it later in your code\nconst ExtendedProviders = {\n  ...ProviderTypeEnum,\n  ...ADDITIONAL_PROVIDERS\n} as const;\n\nconst provider = await ProviderFactory.create({\n  type: ExtendedProviders.myCustomProvider // or add a simple string here\n});\nawait provider?.login();\n```\n\n#### Accessing provier methods\n\nOnce the provider is initialized, you can get a reference to it using the `getAccountProvider` method. Then you can call the `login`, `logout`, `signTransactions`, `signMessage` methods, or other custom methods depending on the intialized provider (see ledger for example).\n\n### 3. Account\n\n#### Getting account data\n\nOnce the user logs in, a call is made to the API for fetching the account data. This data is persisted in the store and is accessible through helpers found in `core/methods/account`. These functions are:\n\n**Table 3**. Getting account data\n| # | Helper | Description | React hook equivalent |\n|---|------|-------------|----|\n| | `core/methods/account` | path | `store/selectors/hooks/account` |\n| 1 | `getAccount()` | returns all account data |`useGetAccount()` |\n| 2 | `getAddress()` | returns just the user's public key | `useGetAddress()`|\n| 3 | `getIsLoggedIn()` | returns a login status boolean | `useGetIsLoggedIn()` |\n| 4 | `getLatestNonce()` | returns the account nonce | `useGetLatestNonce()`\n\n#### Nonce management\n\nsdk-dapp-core has a mechanism that does its best to manage the account nonce. For example, if the user sends a transaction, the nonce gets incremented on the client so that if he sends a new transaction, it will have the correct increased nonce. If you want to make sure the nonce is in sync with the API account, you can call `refreshAccount()` as shown above in the **Signing transactions** section.\n\n### 4. Transactions Manager\n\n#### Overview\n\nThe `TransactionManager` is a class that handles sending and tracking transactions in the MultiversX ecosystem. It provides methods to send single and batch transactions while handling tracking, error management, and toasts for user notifications. It is initialized in the `initApp` method and can be accessed via `TransactionManager.getInstance()`.\n\n#### Features\n\n- **Supports Single and Batch Transactions:** Handles individual transactions as well as grouped batch transactions.\n- **Automatic Tracking:** Monitors transaction status and updates accordingly through a webhook or polling fallback mechanism.\n- **Toast Notifications:** Displays status updates for user feedback, with options to disable notifications and customize toast titles.\n- **Error Handling:** Catches and processes errors during transaction submission\n\n#### Transactions Lifecycle\n\nThe transaction lifecycle consists of the following steps:\n\n1. **Creating** a `Transaction` object using the `@multiversx/sdk-core provider`\n2. **Signing** the transaction with the initialized provider and receiving a `SignedTransactionType` object\n3. **Sending** the signed transaction using TransactionManager's `send()` function. Signed transactions can be sent in 2 ways:\n\n**Table 4**. Sending signed transactions\n| # | Signature | Method | Description |\n|---|------|-------------|-------------|\n| 1 | `send([tx1, tx2])` | `POST` to `/transactions` | Transactions are executed in parallel\n| 2 | `send([[tx1, tx2], [tx3]])` | `POST` to `/batch` | First batch of two transactions is executed, and the second batch of one transaction waits for the finished results, and is then executed\n\n4. **Tracking** transactions is made by using `transactionManager.track()`. Since the `send()` function returns the same arguments it has received, the same array payload can be passed into the `track()` method. Under the hood, status updates are received via a WebSocket or polling mechanism.\n   Once a transaction array is tracked, it gets associated with a `sessionId`, returned by the `track()` method and stored in the `transactions` slice. Depending on the array's type (plain/batch), the session's status varies from initial (`pending`/`invalid`/`sent`) to final (`successful`/`failed`/`timedOut`).\n\n5. **User feedback** is provided through toast notifications, which are triggered to inform about transactions' progress. Additional tracking details can be optionally displayed in the toast UI.\nThere is an option to add custom toast messages by using the `createCustomToast` helper.\n\n```ts\nimport { createRoot } from 'react-dom/client';\nimport { createCustomToast } from '@multiversx/sdk-dapp-core/out/store/actions/toasts/toastsActions';\n\n// by creating a custom toast element containing a component\ncreateCustomToast({\n  toastId: 'username-toast',\n  instantiateToastElement: () =\u003e {\n    const toastBody = document.createElement('div');\n    const root = createRoot(toastBody);\n    root.render(\u003cReloadButton /\u003e);\n    return toastBody;\n  }\n});\n\n// or by creating a simple custom toast\ncreateCustomToast({\n  toastId: 'custom-toast',\n  icon: 'times',\n  iconClassName: 'warning',\n  message: 'This is a custom toast',\n  title: 'My custom toast'\n});\n      \n\n```\n\n6. **Error Handling \u0026 Recovery** is done through a custom toast that prompts the user to take appropriate action.\n\n#### Methods\n\n1. Sending Transactions\n\nIn this way, all transactions are sent simultaneously. There is no limit to the number of transactions contained in the array.\n\n```ts\nconst transactionManager = TransactionManager.getInstance();\nconst parallelTransactions: SigendTransactionType[] = [tx1, tx2, tx3, tx4];\nconst sentTransactions = await transactionManager.send(parallelTransactions);\n```\n\n2. Sending Batch Transactions\n\nIn this sequential case, each batch waits for the previous one to complete.\n\n```ts\nconst transactionManager = TransactionManager.getInstance();\nconst batchTransactions: SignedTransactionType[][] = [\n  [tx1, tx2],\n  [tx3, tx4]\n];\nconst sentTransactions = await transactionManager.send(batchTransactions);\n```\n\n3. Tracking Transactions\n\nThe basic option is to use the built-in tracking, which displays toast notifications with default messages.\n\n```ts\nconst sessionId = await transactionManager.track(\n  sentTransactions\n  // { disableToasts: true } optionally disable toast notifications\n);\n```\n\nIf you want to provide more human-friendly messages to your users, you can enable tracking with custom toast messages:\n\n```ts\nconst sessionId = await transactionManager.track(sentTransactions, {\n  transactionsDisplayInfo: {\n    errorMessage: 'Failed adding stake',\n    successMessage: 'Stake successfully added',\n    processingMessage: 'Staking in progress'\n  }\n});\n```\n\n**Tracking transactions without being logged in**\n\nIf your application needs to track transactions sent by a server and the user does not need to login to see the outcome of these transactions, there are several steps that you need to do to enable this process.\n\nStep 1. Enabling the tracking mechanism\n\nBy default the tracking mechanism is enabled only after the user logs in. That is the moment when the WebSocket connection is established. If you want to enable tracking before the user logs in, you need to call the `trackTransactions` method from the `core/methods/trackTransactions` folder. This method will enable a polling mechanism.\n\n```typescript\nimport { trackTransactions } from '@multiversx/sdk-dapp-core/out/core/methods/trackTransactions/trackTransactions';\n\ninitApp(config).then(async () =\u003e {\n  await trackTransactions(); // enable here since by default tracking will be enabled only after login\n  render(() =\u003e \u003cApp /\u003e, root!);\n});\n```\n\nThen, you can track transactions by calling the `track` method from the `TransactionManager` class with a plain transaction containing the transaction hash.\n\n```typescript\nimport { Transaction, TransactionsConverter } from '@multiversx/sdk-core/out';\n\nconst tManager = TransactionManager.getInstance();\nconst txConverter = new TransactionsConverter();\nconst transaction = txConverter.plainObjectToTransaction(signedTx);\n\nconst hash = transaction.getHash().toString(); // get the transaction hash\n\nconst plainTransaction = { ...transaction.toPlainObject(), hash };\nawait tManager.track([plainTransaction]);\n```\n\n#### Advanced Usage\n\nIf you need to check the status of the signed transactions, you can query the store direclty using the `sessionId` returned by the `track()` method.\n\n```ts\nimport { getStore } from '@multiversx/sdk-dapp-core/out/store/store';\nimport { transactionsSliceSelector } from '@multiversx/sdk-dapp-core/out/store/selectors/transactionsSelector';\n\nconst state = transactionsSliceSelector(getStore());\nObject.entries(state).forEach(([sessionKey, data]) =\u003e {\n  if (sessionKey === sessionId) {\n    console.log(data.status);\n  }\n});\n```\n\n### 5. UI Components\n\nsdk-dapp-core needs to make use of visual elements for allowing the user to interact with some providers (like the ledger), or to display messages to the user (like idle states or toasts). These visual elements consitst of webcomponents hosted in the `@multiversx/sdk-dapp-core-ui` package. Thus, sdk-dapp-core does not hold any UI elements, just business logic that controls external components. We can consider two types of UI components: internal and external. They are differentiated by the way they are controlled: private components are controlled by sdk-dapp-core's signing or logging in flows, while public components can be controlled by the dApp.\n\n#### Public components\n\n#### Private components\n\nThe way private 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-core to get a reference to it and use it for communication.\n\n```mermaid\nflowchart LR\n    A[\"Controller\"] \u003c--\u003e B[\"Event Bus\"] \u003c--\u003e C[\"webcomponent\"]\n```\n\n```typescript\nconst modalElement = await createUIElement\u003cLedgerConnectModal\u003e(\n  'ledger-connect-panel'\n);\nconst eventBus = await modalElement.getEventBus();\neventBus.publish('TRANSACTION_TOAST_DATA_UPDATE', someData);\n```\n\nIf you want to override private components and create your own, you can implement a similar strategy, of course by respecting each webcomponent's API (see an interface example [here](https://github.com/multiversx/mx-sdk-dapp-core/blob/main/src/core/providers/strategies/LedgerProviderStrategy/types/ledger.types.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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-core/lists"}