Lit SDK on the Frontend
Here we're going to discuss only the parts concerned with using the Lit SDK & interfacing with our deployed smart contract. The reader is expected to take care of:
- The user inputs for NFTs (i.e. it's name, description & imageUrl)
- Fetching the NFTs using the
fetchNfts()
function we defined inLitNFT.sol
- Displaying the fetched NFTs.
If you want to take a look at a complete React project which takes care of all that, please take a look at this Replit. For the best experience please open the web app in a new tab.
Mint NFT with encrypted description metadata
Let's see how a user can mint an NFT given its name, imageUrl & description.
1. Encrypt with Lit
First, we encrypt the description using our Lit class' function encryptText
:
const mintLitNft = async (name, imageUrl, description) => {
const { encryptedString, encryptedSymmetricKey } = await lit.encryptText(description);
encryptedString
is a Blob and not a string.
2. Convert encryptedDescription and pass to mintLitNFT()
Since our smart contract function mintLitNFT()
takes a string for the encryptedDescription
we convert the Blob to a string below:
// Convert blob to base64 to pass as a string to Solidity
const blobToBase64 = (blob) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
return new Promise((resolve) => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
const encryptedDescriptionString = await blobToBase64(encryptedString);
let transaction = await litNftContract.mintLitNft(
name,
imageUrl,
encryptedDescriptionString,
encryptedSymmetricKey
);
await transaction.wait();
Putting it together
const mintLitNft = async (name, imageUrl, description) => {
const { encryptedString, encryptedSymmetricKey } = await lit.encryptText(
description
);
// Convert blob to base64 to pass as a string to Solidity
const blobToBase64 = (blob) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
return new Promise((resolve) => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
const encryptedDescriptionString = await blobToBase64(encryptedString);
let transaction = await litNftContract.mintLitNft(
name,
imageUrl,
encryptedDescriptionString,
encryptedSymmetricKey
);
await transaction.wait();
// You may want to fetch & set all the NFTs after minting a new one
// const _nfts = await litNftContract.fetchNfts();
// setNFTs(_nfts);
};
Decrypting from fetched NFTs
1. Obtain Blob format for encrypted description string
Since all our NFT fields are strings, the first step is to convert the returned description string to a Blob to pass it to Lit's decryptText()
.
const decryptDescription = async (encryptedDescriptionString, encryptedSymmetricKeyString) => {
// Convert base64 to blob to pass in the litSDK decrypt function
const encryptedDescriptionBlob = await (await fetch(encryptedDescriptionString)).blob();
// function continued below
2. Pass encrypted description blob to be decrypted
Now, we can pass it to decryptText()
.
let decryptedDescription;
try {
decryptedDescription = await lit.decryptText(encryptedDescriptionBlob, encryptedSymmetricKeyString);
} catch (error) {
console.log(error);
}
}
Putting it together
const decryptDescription = async (
encryptedDescriptionString,
encryptedSymmetricKeyString
) => {
// Convert base64 to blob to pass in the litSDK decrypt function
const encryptedDescriptionBlob = await (
await fetch(encryptedDescriptionString)
).blob();
let decryptedDescription;
try {
decryptedDescription = await lit.decryptText(
encryptedDescriptionBlob,
encryptedSymmetricKeyString
);
setShowButton(false);
} catch (error) {
console.log(error);
}
// Set decrypted string
// setDescription(decryptedDescription);
};