Send Tokens

First, we need to create our interface which will have an input field for the destination address, an input field for no of tokens, an input field for Token name, and a button to make the transaction.

Click here to get the CSS file (style.css) in the GitHub account

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Style.css">
   
</head>
<body>
    <div class="head">
        <img src="coxygen.png">
        <h1>Mint and send tokens using Lucid</h1>
    </div>
    
    <div class="form">
       
        <h1 id="status">Status:</h1>
        <div>
            <label for="destinationAddress">destination Address</label>
            <input type="text" id="destinationAddress" placeholder="Enter destination Address">
        </div>

        <div>
            <label for="NoOfTokens">No of tokens</label>
            <input type="text" id="NoOfTokens" placeholder="Enter no of tokens">
        </div>

        <div>
            <label for="TokenName">Token Name</label>
            <input type="text" id="TokenName" placeholder="Enter Token name">

        </div>
        <button id="sendButton">Send Tokens</button>
        <p id="Tokens">Written by: Banele Nhlapo</p>
    </div>

You will need two accounts in your wallet to test the transaction. The first one will be loaded with test ADA. We will be transferring to the second one.Both accounts set to prepod.

Let's go ahead and write our JavaScript.

The next step is to import Lucid from the web and get our elements from HTML.

  <script type="module">
        const status=document.getElementById('status');
        const destinationAddressInput=document.getElementById('destinationAddress');
        const NoOfTokens=document.getElementById('NoOfTokens');
        const TokenName=document.getElementById('TokenName');
        const sendButton=document.getElementById('senButton');

        import {Lucid,Blockfrost,fromText} from "https://unpkg.com/lucid-cardano/web/mod.js";

Let's go ahead and get our Blockfrost API for us to be able to make transactions. Notice that the Blockfrost ID is fetched from a separate file for security purposes. You can go ahead and create the file called “blockfrost.txt” and store your Blockfrost ID there.

 async function sendTransaction(){
            const fileName='blockfrost.txt';

            const response=await fetch(fileName);
            if(!response.ok){
                throw new Error("network response was not okay");
            }
            const blockfrostAPI=await response.text();

            const lucid=await Lucid.new(
                new Blockfrost(
                    "https://cardano-preprod.blockfrost.io/api/v0",
                    blockfrostAPI
                ),
                "Preprod"
            );

            const destinationAddress=destinationAddressInput.value.trim();
            const NoOfTokensinput=NoOfTokens.value.trim();
            const TokenNameinput=TokenName.value.trim();

            if(!destinationAddress){
                alert("Please enter a destination address");
                return;
            }

            if(!NoOfTokensinput){
                alert("Please No of Tokens");
                return;
            }

            if(!TokenNameinput){
                alert("Please enter token name");
                return;
            }

We also went ahead and wrote if statements to check if our input fields are empty or not.

Then,we must connect to the wallet:

        try{

                const api= await window.cardano.nami.enable();
                lucid.selectWallet(api);

This line of code gets the wallet address details which we are going to use in the minting policy. Specifically, we want to get the public key hash of the wallet address.

const {paymentCredential} =lucid.utils.getAddressDetails(await lucid.wallet.address());

Now, let’s write our minting policy. We use a native script time-locking policy with our wallet as a required signer.

 const mintingPolicy= lucid.utils.nativeScriptFromJson(
                    {
                        type:"all",
                        scripts: [
                            {type: "sig", keyHash:paymentCredential.hash},
                            {
                                type:"before",
                                slot:lucid.utils.unixTimeToSlot(Date.now()+1000000),
                            },
                        ],
                    },
                );

Then, we get the policy id from the minting policy script:

const policyId= lucid.utils.mintingPolicyToId(mintingPolicy);

Now, let’s write the code to mint tokens:

  const unit=policyId+ fromText(TokenNameinput);

                const tx=await lucid.newTx()
                .mintAssets({[unit]: NoOfTokensinput})
                .payToAddress(destinationAddress, {[unit] :NoOfTokensinput})
                .validTo(Date.now()+200000)
                .attachMintingPolicy(mintingPolicy)
                .complete();

                const signedTx =await tx.sign().complete();

                const txhash=await signedTx.submit();

                status.innerHTML='Status: Token minted succssfully';

            }catch(error){
                console.error('Error sending transaction', error);
                status.innerHTML="Error minting or sending token";
               
            }
        }
  sendButton.onclick=sendTransaction;
    </script>
</body>
</html>

Thats how you mint tokens.
source code

Written by: Banele Nhlapo
email address: nhlapob78@gmail.com