Wallet Connection & Transaction Sending with MultiversX

Ready to plug in a wallet and make transactions in your MultiversX dApp? Let’s dive in and see how the sdk-dapp library makes it a breeze to connect, interact, and send tokens!

Video Guide: Watch it in action

What You Need Before Starting

• Node.js version 12.16.2+
• NPM version v6.14.4+

Getting Started: Install the Library

First up, let’s grab the sdk-dapp library. This library will be our toolkit for wallet connections and transactions!

npm install @multiversx/sdk-dapp

Need just the essentials? Skip the optional stuff:

yarn add @multiversx/sdk-dapp

Set Up Your dApp

Wrap Your App in DappProvider

Like a cozy blanket, DappProvider wraps your app and manages all wallet connections and network interactions.

import { DappProvider } from "@multiversx/sdk-dapp/wrappers/DappProvider";

const App = () => (

  <DappProvider environment="devnet">

    {/\* Your application components go here \*/}

  </DappProvider>

);

Pick your environment: devnet, testnet, or mainnet 🔗

Add Some UI Components for Transactions & Notifications

Want transaction toasts? Need modals? Just add these components:

import { TransactionsToastList } from "@multiversx/sdk-dapp/UI/TransactionsToastList";

<TransactionsToastList /> 

<SignTransactionsModals />

<NotificationModal />

Lock Down Routes with Authentication

Secure routes with AuthenticatedRoutesWrapper, so only logged-in users can see certain pages:

import { AuthenticatedRoutesWrapper } from "@multiversx/sdk-dapp/wrappers/AuthenticatedRoutesWrapper";

const routes = \[

  { path: "/dashboard", title: "Dashboard", component: Dashboard, authenticatedRoute: true }

\];

<AuthenticatedRoutesWrapper routes={routes} unlockRoute="/unlock">

  {/\* Your application content \*/}

</AuthenticatedRoutesWrapper>

Example Structure

Here’s a basic example structure of your React app with MultiversX wallet integration:

import React from "react";

import { DappProvider } from "@multiversx/sdk-dapp/wrappers/DappProvider";

import { TransactionsToastList } from "@multiversx/sdk-dapp/UI/TransactionsToastList";

import { SignTransactionsModals } from "@multiversx/sdk-dapp/UI/SignTransactionsModals";

import { NotificationModal } from "@multiversx/sdk-dapp/UI/NotificationModal";

import { AuthenticatedRoutesWrapper } from "@multiversx/sdk-dapp/wrappers/AuthenticatedRoutesWrapper";

const App = () => (

  <DappProvider environment="devnet">

    <SignTransactionsModals />

    <NotificationModal />

    <TransactionsToastList />

    <AuthenticatedRoutesWrapper routes={routes} unlockRoute="/unlock">

      {/\* Main App Content \*/}

    </AuthenticatedRoutesWrapper>

  </DappProvider>

);

export default App;

Additions

Magic Buttons for Wallet Login

The MultiversX SDK offers several pre-built React components to facilitate user login via different wallets and manage authentication states.

Login Buttons

Four primary buttons allow users to log in through various providers:

• ExtensionLoginButton: For browser extension wallets (e.g., MultiversX Wallet).
• WalletConnectLoginButton: For mobile wallets using WalletConnect.
• LedgerLoginButton: For logging in with Ledger hardware wallets.
• WebWalletLoginButton: For web-based wallets.

Example usage:

<ExtensionLoginButton

  callbackRoute="/dashboard"

  buttonClassName="extension-login"

  loginButtonText="Extension login"

/>

You can also customize the buttons further by wrapping them with additional UI elements:

<ExtensionLoginButton

  callbackRoute="/dashboard"

  buttonClassName="extension-login"

  loginButtonText="Extension login"

>;

  <>;

    <Icon />;

    <p>;Login text<;/p>;

  </>;

</ExtensionLoginButton>;

Login Containers

If you prefer using the login modals directly without buttons, you can import and use the following containers:

• WalletConnectLoginContainer
• LedgerLoginContainer

Example usage:

<WalletConnectLoginContainer

  callbackRoute="/dashboard"

  loginButtonText="Login with xPortal"

  title="xPortal Login"

  logoutRoute="/unlock"

  className="wallet-connect-login-modal"

  lead="Scan the QR code using xPortal"

/>

Sending Transactions

Send transactions with a simple setup:

import { sendTransactions } from "@multiversx/sdk-dapp";

const { sessionId, error } = await sendTransactions({

  transactions: \[

    {

      value: '1000000000000000000', // Amount in smallest units

      data: 'ping', // Transaction data

      receiver: contractAddress // Receiver address

    },

  \],

  callbackRoute: "/dashboard", // Redirect after signing

  transactionsDisplayInfo: null, // Optional toast message

  minGasLimit: 50000, // Optional gas limit

  sessionInformation: null, // Optional session information

  signWithoutSending: false, // Sign only, do not send

  completedTransactionsDelay: 0, // Optional delay for status

  redirectAfterSigning: true // Redirect after signing

});

Response

The function returns a Promise resolved with:

• sessionId: Transaction batch ID for tracking.
• error: Any errors encountered during the process.

Important Note

To sign the transaction, utilize the SignTransactionsModals or the useSignTransactions hook, as transactions won’t be signed otherwise.

Transaction Signing Flow

After submitting a transaction, you must prompt the user to sign it using either the SignTransactionsModals or the useSignTransactions hook:

const {

  callbackRoute,

  transactions,

  error,

  sessionId,

  onAbort,

  hasTransactions,

  canceledTransactionsMessage,

} = useSignTransactions();

This hook provides the state of transactions, allowing for a programmatic approach to abort the signing process if necessary.

Getting the Provider

To retrieve the current account provider and display appropriate messages:

const { providerType, provider } = useGetAccountProvider();

Wrapping It Up

Now you’ve got a wallet-connected dApp ready to send transactions and keep users updated with toasts and modals. For extra support, head to MultiversX SDK Docs.

Reference: https://docs.multiversx.com/sdk-and-tools/sdk-dapp/