A library to hold the main logic for Smart Contract Interactions on the MultiversX blockchain
The library can be installed via npm, yarn or pnpm.
npm install @multiversx/sdk-dapp-sc-exploreror
yarn add @multiversx/sdk-dapp-sc-exploreror
pnpm install @multiversx/sdk-dapp-sc-explorerTo interact with a Smart Contract it is essential to understand its inputs and outputs. This is valid both for on-chain calls, and for off-chain tools, and can in most cases also tell us a lot about what the smart contract does and how it does it.
For this reason, blockchain smart contracts have so-called ABIs, expressed in a platform-agnostic language - JSON in our case.
Read more about the MultiversX ABI Format here: https://docs.multiversx.com/developers/data/abi
The ABI interaction functionality is built upon https://github.com/multiversx/mx-sdk-js-core.
The Smart Contract Explorer BETA offers an easy way to understand the functionality behind a Smart Contract and to interact with it.
The @multiversx/sdk-dapp-sc-explorer package is already implemented on the MultiversX Explorer where the user can preview and interact with the Verified Smart Contracts and on the MultiversX Utils where one can Load the data from an ABI file and interact with an already deployed SC or Deploy/Upgrade a new SC.
The current state of the deployed SC can be checked without any need to login, the output is already decoded and processed for an easy overview.
The Smart Contract State can be changed with a transaction, therefore, in order to change the state the user must login with one of the login providers in order to sign the transaction.
An ABI file can be loaded in order to have an overview of the structure, check the endpoints, events, types, etc.
A .wasm file is required to deploy a new Smart Contract, some SCs can be initialized with a config described in the constructor. In order to initialize with those options one can load the ABI file beforehand.
Similar to a new deployment, the .wasm file is required and also the ABI in order to properly set the initial state ( if needed ). The address of the currently deployed SC is also required in order to upgrade
There are a couple of requirements that need to be met for the application to work properly.
If you experience bugs, please make sure that you read these, before opening an issue
React
This library was built for applications that use React, it might not be suitable for usage with other libraries or frameworks.
ScExplorerContainer
The <ScExplorerContainer /> component, which is exported by the library, is needed to create a Context to be able to manipulate the data.
- import the stylesheet once, at the root of your app:
import '@multiversx/sdk-dapp-sc-explorer/out/styles.css';Per-component stylesheets are also published (e.g. @multiversx/sdk-dapp-sc-explorer/out/components/CardItem/styles.module.css) if you prefer to import only what you render.
- import the Container:
import { ScExplorerContainer } from '@multiversx/sdk-dapp-sc-explorer/out/containers/ScExplorerContainer';<ScExplorerContainer
smartContract={{
verifiedContract: contract,
deployedContractDetails: account
}}
accountConsumerHandlers={{
useGetLoginInfo,
useGetAccountInfo
}}
networkConfig={{ environment, apiAddress }}
config={{
canMutate: true,
canLoadAbi: true,
canDeploy: true,
canUpgrade: true,
canDisplayContractDetails: true,
hasGeneralLogin: true,
hasViewInExplorer: true
}}
customClassNames={customClassNames}
icons={icons}
/>smartContract
contractAddress-optional- provide the Address where the Contract is already Deployedabi-optional- provide the ABI beforehandverifiedContract-optional- Verified Contract Details that include the ABI, Files, etc - as retrieved from API (example)
accountConsumerHandlers
useGetLoginInfo- an async function that returns the Login state ( can be used from sdk-dapp )useGetAccountInfo- an async function that returns the Account details ( can be used from sdk-dapp ) is an async function that returns the accessToken mandatory for authorizing the requests.onLoginClick-optional- in case an external Login action/modal must be triggered on interaction with theConnect Walletbuttons
networkConfig
environment- devnet | testnet | mainnetapiAddress-optional- use a different API address on calls
config
canMutate- allow Smart Contract state changes, the user must be logged in order to sign the transactionscanLoadAbi- show the Load ABI Panel in the LayoutcanDeploy- show the Deploy Contract Panel in the LayoutcanUpgrade- show the Upgrade Contract Panel in the LayoutcanDisplayContractDetails- show the Contract Details Panel in the Layout ( if a valid contract address is used )hasGeneralLogin-optional- always show theConnect Walletbutton in the Layout header, even whencanMutateis not set ( ignored ifonLoginClickis provided )hasViewInExplorer-optional- show theView in Explorerlink in the Contract Details Panel headerloginParams-optional- custom login actions based on sdk-dapps OnProviderLoginType
customClassNames - optional - an object that provides existing css classes for an easier styling configuration
icons - optional - an object that provides FontawesomeIcons used on different components
This repository is a library only — there is no standalone app, dev server, or test runner. Development happens by building the package and linking it into a consumer app.
Requirements: Node ≥ 24 and pnpm (a pnpm-lock.yaml is committed).
pnpm install --frozen-lockfile| Command | Description |
|---|---|
pnpm lint / pnpm lint:fix |
ESLint 9 flat config (eslint.config.mjs) |
pnpm compile |
Type-check and emit declarations (tsc + tsc-alias) |
pnpm build-esbuild |
Build ESM + CJS output only, no declarations |
pnpm build |
Full build into out/ (esbuild + declarations) |
pnpm publish-yalc |
Build and yalc publish --push for testing in a consumer app |
pnpm publish-package / pnpm publish-package-next |
Build and publish to npm (next tag for prereleases) |
src/
index.tsx single public entry point
containers/ ScExplorerContainer — the exported component
contexts/ nested provider stack, read via useSCExplorerContext()
components/ UI, each styled through the withStyles HOC
hooks/ contract queries and provider selection
helpers/ ABI parsing, transaction building and tracking
lib/ the only place @multiversx/* packages are imported
types/ public and internal types
esbuild.js per-module ESM + CJS build, emits out/styles.css
Publishing is automated by .github/workflows/sdk-dapp-sc-explorer-publish.yml on push to main: a prerelease version in package.json (e.g. 0.0.8-alpha.0) goes out under the next npm tag, a plain version under latest. The version is bumped by hand, and every PR must add a CHANGELOG.md entry — this is enforced by CI.
Repository-wide instructions for coding agents live in AGENTS.md — architecture, build-pipeline invariants, conventions, common workflows, and guardrails. CLAUDE.md simply points there. If you change how the project is built or structured, update AGENTS.md in the same PR.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open-source community such an amazing place to be, learn, inspire, and create. Any contributions you make are greatly appreciated.
One can contribute by creating pull requests, or by opening issues for discovered bugs or desired features. See CONTRIBUTING.md for the full guidelines.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Run
pnpm lint && pnpm compile && pnpm build - Add an entry to
CHANGELOG.md(enforced by CI) - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request — features against
development, bugfixes againstmain
GPL-3.0-or-later