Welcome to the part where you will learn about the frontend integration. So far, you learned how to develop smart contracts. In most cases, there would be frontend application that communicates with a smart contract to create a real decentralized application.

In the first part of this lesson, you will learn how learn how we use the functions. You can also use this part as a cheatsheet in the future. In the next part of this lesson, you will find the code that is for our DevHub smart contract. You can freely copy the code and change it according to your needs. Experimentation is the best way to learn!

Now, before moving forward, if you want to use the libraries in the following examples, you need to install the following libraries:

npm install @mysten/sui.js @mysten/wallet-kit

In the following steps are the necessary steps to make a moveCall. With a moveCall, you can call functions from your smart contract.

Step 1

First things first. Before using the libraries you need to import them.

// Import Sui client and wallet hooks
import { getFullnodeUrl, SuiClient } from '@mysten/sui.js/client';
import { useWalletKit } from '@mysten/wallet-kit';

You have imported the Sui client and wallet hooks from Mysten's libraries. This will allow you to interact with Sui and the user's wallet.

Step 2

// Initialize Sui client
const client = new SuiClient({ url: getFullnodeUrl('devnet') });

Here you initialized the SuiClient, configured to connect to the devnet fullnode URL.

Step 3

// Get wallet signing function
const { signAndExecuteTransactionBlock } = useWalletKit();

From the wallet hook, destructure the signAndExecuteTransactionBlock function, which you'll use later to sign transactions before submitting them.

Step 4

// Define Move package ID
const packageObjectId = '0x...'

Next, define the object ID of the deployed Move package you want to interact with. This would be saved from when you originally published the package.