{"id":13407901,"url":"https://github.com/multiversx/mx-sdk-dapp-sc-explorer","last_synced_at":"2025-10-06T14:04:30.761Z","repository":{"id":208811092,"uuid":"696221762","full_name":"multiversx/mx-sdk-dapp-sc-explorer","owner":"multiversx","description":"A library to hold the main logic for Smart Contract Interactions on the MultiversX blockchain","archived":false,"fork":false,"pushed_at":"2024-10-04T13:52:06.000Z","size":1556,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-10-04T14:53:57.418Z","etag":null,"topics":["contract","multiversx","smart"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multiversx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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}},"created_at":"2023-09-25T10:35:32.000Z","updated_at":"2024-09-05T12:47:42.000Z","dependencies_parsed_at":"2024-10-26T03:23:22.135Z","dependency_job_id":"bf788e08-8a1c-4dbc-a3f5-5c148afc03d2","html_url":"https://github.com/multiversx/mx-sdk-dapp-sc-explorer","commit_stats":null,"previous_names":["multiversx/mx-sdk-dapp-sc-explorer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-sc-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-sc-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-sc-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multiversx%2Fmx-sdk-dapp-sc-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multiversx","download_url":"https://codeload.github.com/multiversx/mx-sdk-dapp-sc-explorer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243578268,"owners_count":20313794,"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","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":["contract","multiversx","smart"],"created_at":"2024-07-30T20:00:49.345Z","updated_at":"2025-10-06T14:04:30.746Z","avatar_url":"https://github.com/multiversx.png","language":"TypeScript","funding_links":[],"categories":["MultiversX official"],"sub_categories":["SDKs and dev tools"],"readme":"# sdk-dapp-sc-explorer\n\n\u003e A library to hold the main logic for Smart Contract Interactions on the MultiversX blockchain\n\n[![NPM](https://img.shields.io/npm/v/@multiversx/sdk-dapp-sc-explorer.svg)](https://www.npmjs.com/package/@multiversx/sdk-dapp-sc-explorer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/multiversx/mx-sdk-dapp-sc-explorer)\n\n![sdk-dapp-sc-explorer](https://github.com/multiversx/mx-sdk-dapp-sc-explorer/blob/main/preview.jpg)\n\n# Installation\n\nThe library can be installed via `npm` or `yarn`.\n\n```bash\nnpm install @multiversx/sdk-dapp-sc-explorer\n```\n\nor\n\n```bash\nyarn add @multiversx/sdk-dapp-sc-explorer\n```\n\n# Usage\n\n## ABI - Application Binary Interface\n\nTo 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.\n\nFor this reason, blockchain smart contracts have so-called ABIs, expressed in a platform-agnostic language - JSON in our case.\n\nRead more about the MultiversX ABI Format here: [https://docs.multiversx.com/developers/data/abi](https://docs.multiversx.com/developers/data/abi)\n\nThe ABI interaction functionality is built upon [https://github.com/multiversx/mx-sdk-js-core](https://github.com/multiversx/mx-sdk-js-core).\n\n---\n\n## Interaction\n\nThe Smart Contract Explorer BETA offers an easy way to understand the functionality behind a Smart Contract and to interact with it.\n\nThe [`@multiversx/sdk-dapp-sc-explorer`](https://www.npmjs.com/package/@multiversx/sdk-dapp-sc-explorer) package is already implemented on the [MultiversX Explorer](https://devnet-explorer.multiversx.com/accounts/erd1qqqqqqqqqqqqqpgq2ddn0gave73udf0rrwaepu2gafzlr56n396q9nqpx7/code/details) where the user can preview and interact with the Verified Smart Contracts and on the [MultiversX Utils](https://utils.multiversx.com/smart-contract?network=devnet) where one can Load the data from an ABI file and interact with an already deployed SC or Deploy/Upgrade a new SC.\n\n### Read SC State\n\nThe 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.\n\n### Modify SC State\n\nThe 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.\n\n### Load ABI\n\nAn ABI file can be loaded in order to have an overview of the structure, check the endpoints, events, types, etc.\n\n### Deploy SC\n\nA .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.\n\n### Upgrade SC\n\nSimilar to a new deployment, the .wasm file is required and also the ABI in order to properly set the initial state ( if needed ).\nThe address of the currently deployed SC is also required in order to upgrade\n\n---\n\n## Prerequisites\n\nThere are a couple of requirements that need to be met for the application to work properly.\n\n**_If you experience bugs, please make sure that you read these, before opening an issue_**\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n      React\n  \u003c/summary\u003e\n\n### React\n\nThis library was built for applications that use React, it might not be suitable for usage with other libraries or frameworks.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    ScExplorerContainer\n \u003c/summary\u003e\n\n### `\u003cScExplorerContainer /\u003e`\n\nThe **`\u003cScExplorerContainer /\u003e`** component, which is exported by the library, is needed to create a Context to be able to manipulate the data.\n\n- import the Container:\n\n```typescript\nimport { ScExplorerContainer } from '@multiversx/sdk-dapp-sc-explorer/containers/ScExplorerContainer';\n```\n\n```jsx\n\u003cScExplorerContainer\n  smartContract={{\n    verifiedContract: contract,\n    deployedContractDetails: account\n  }}\n  accountConsumerHandlers={{\n    useGetLoginInfo,\n    useGetAccountInfo\n  }}\n  networkConfig={{ environment, apiAddress }}\n  config={{\n    canMutate: true,\n    canLoadAbi: true,\n    canDeploy: true,\n    canUpgrade: true,\n    canDisplayContractDetails: true\n  }}\n  customClassNames={customClassNames}\n  icons={icons}\n/\u003e\n```\n\n`smartContract`\n\n- `contractAddress` - `optional` - provide the Address where the Contract is already Deployed\n- `abi` - `optional` - provide the ABI beforehand\n- `verifiedContract` - `optional` - Verified Contract Details that include the ABI, Files, etc - as retrieved from API ([example](https://devnet-api.multiversx.com/accounts/erd1qqqqqqqqqqqqqpgq2ddn0gave73udf0rrwaepu2gafzlr56n396q9nqpx7/verification))\n\n`accountConsumerHandlers`\n\n- `useGetLoginInfo` - an async function that returns the Login state ( can be used from sdk-dapp )\n- `useGetAccountInfo` - an async function that returns the Account details ( can be used from sdk-dapp )\n  is an async function that returns the accessToken mandatory for authorizing the requests.\n- `onLoginClick` - `optional` - in case an external Login action/modal must be triggered on interaction with the `Connect Wallet` buttons\n\n`networkConfig`\n\n- `environment` - devnet | testnet | mainnet\n- `apiAddress` - `optional` - use a different API address on calls\n\n`config`\n\n- `canMutate` - allow Smart Contract state changes, the user must be logged in order to sign the transactions\n- `canLoadAbi` - show the Load ABI Panel in the Layout\n- `canDeploy` - show the Deploy Contract Panel in the Layout\n- `canUpgrade` - show the Upgrade Contract Panel in the Layout\n- `canDisplayContractDetails` - show the Contract Details Panel in the Layout ( if a valid contract address is used )\n- `loginParams` - `optional` - custom login actions based on sdk-dapps OnProviderLoginType\n\n`customClassNames` - `optional` - an object that provides existing css classes for an easier styling configuration\n\n`icons` - `optional` - an object that provides FontawesomeIcons used on different components\n\n\u003c/details\u003e\n\n## Roadmap\n\nSee the [open issues](https://github.com/multiversx/mx-sdk-dapp-sc-explorer/issues) for a list of proposed features (and known issues).\n\n## Contributing\n\nContributions are what make the open-source community such an amazing place to be, learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nOne can contribute by creating _pull requests_, or by opening _issues_ for discovered bugs or desired features.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nGPL-3.0-or-later\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-sc-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-sc-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultiversx%2Fmx-sdk-dapp-sc-explorer/lists"}