How to submit your dApp for listing in the xPortal Hub

<aside> 👇 Here's a concise, easy-to-understand guide on how to submit your dApp to be listed in the xPortal Hub.

Follow the requirements and the go-live checklist to ensure a smooth application process.

</aside>

Seamless Integration with xPortal: Support and Guidance

Our goal is to create a cohesive ecosystem of tools and libraries for seamless integration with both our products and community-developed projects.

If you're already using sdk-dapp 2.0+ and DappProvider for authentication, authorization, and transaction signing, incorporating xPortal support should be simple, potentially requiring only a single line of code change.

For React applications with client-side rendering, refer to the official README documentation at **https://github.com/multiversx/mx-sdk-dapp** to get started with DappProvider and xPortal integration.

Keep in mind that sdk-dapp is designed for React-based dApps with client-side rendering. For other libraries, languages, or rendering models, custom integration is needed.

Requirements for Listing

Your project must be live on the **MultiversX** mainnet
Your project's code must be open source

Go-Live Checklist

Client Side (sdk-dapp)
- Update your sdk-dApp to the latest version (at least 2.9.4)
- Ensure transaction signing is functional with iOS and Android devices
Server Side (sdk-native-auth-server & sdk-nestjs)
- Update to the latest versions (minimum 1.0.5 for native-auth-server, 0.4.9 for sdk-nestjs)
- Configure allowedOrigins when initializing native-auth-server or when setting up sdk-nestjs guards
- Set maxExpirySeconds when initializing native-auth-server or when setting up sdk-nestjs guards
- Add an endpoint to validate the origin header

Update your code as shown:

<DappProvider
  environment={dappEnvironment (devnet, testnet or mainnet)}
  dappConfig={{
//…your custom dAppConfig, if any (optional)
    shouldUseWebViewProvider: true,
  }}
>

Testing Integration in Your Browser

Chrome Extension We recommend using this Chrome extension to test your xPortal Hub integration: https://twitter.com/StphaneL/status/1661632280236814337?s=20 . Please note, that it’s not an official extension, but one created by a friend of the MultiversX community.

Manual Testing To verify the successful integration of your dApp with xPortal, you'll need to test it in any browser to ensure it handles the authentication token correctly. To do this, visit your dApp's URL and append the auth token as a query parameter like this: <your-dapp-url>/?accessToken=<accessToken>.

The accessToken should be generated using Native Auth. To conveniently generate a token, you can use the MultiversX utility website at **https://utils.multiversx.com/auth** .