Unlocking funds from the contract

In the root folder create a file called “match_unlock.html”. This is where is are going to unlock the funds in the contract. Then we must create our simple interface. The next thing is to import lucid from the web, read our validator, set up our Blockfrost API, connect to the wallet just like we did when locking the funds.

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>Unlock Ada in smart contract Demo</h1>
</div>
  <div class="form">
    
    <h1>Unlock ada </h1>
    <div id="msg"></div>
    <div class="input">
      <label>Secrete code</label>
        <input type="text" id="password" placeholder="Please enter Secrete code">
      </div>
    
    <div class="input">
      <button id="unlock">Unlock ada</button>
    </div>
    <a href="#" id="txHash"></a>
    
    <p >Written by: Banele Nhlapo</p>
  </div>
    <script type="module">
        
        const unlockButton=document.getElementById("unlock");
       
        const msg=document.getElementById("msg");
      
        const password=document.getElementById("password");
        const  transactionId= document.getElementById("txHash")
  
      import {
          Blockfrost,
          C,
          Constr,
          Data,
          Lucid, 
          fromHex,
          toHex,
          utf8ToHex,
          
        }  from "https://unpkg.com/lucid-cardano@0.8.3/web/mod.js"
        import * as cbor from "https://deno.land/x/cbor@v1.4.1/index.js";
       
        
     
  
      async function fetchValidatorData(){
        const response =await fetch("plutus.json");
        return await response.text();
      }

      async function readValidator(){
        const validatorData= await fetchValidatorData();
        const validator= JSON.parse(validatorData).validators[0];
        return {
            type:"PlutusV2",
            script:toHex(cbor.encode(fromHex(validator.compiledCode))),
        };
      }

      const validator=await readValidator();

      async function unlock1(){
        const fileName = 'blockfrost.txt'; // Specify the file name here
          const response = await fetch(fileName);
       if (!response.ok) {
         throw new Error('Network response was not ok');
          }
        const blockfrostAPI = await response.text();


       const lucid = await Lucid.new(
        new Blockfrost(
        "https://cardano-preprod.blockfrost.io/api/v0", 
        blockfrostAPI // Use the fetched data to initialize Lucid
       ) ,
       "Preprod"
       );
       
      
        const api = await window.cardano.nami.enable();
        lucid.selectWallet(api);

Next, we will set our values and filter out our Utxos sitting in the contract address.

   const passCode=password.value.trim();

        if(!passCode){
            msg.innerHTML="please enter password";
            return;
        }

        const beneficiaryPublicKeyHash=lucid.utils.getAddressDetails(await lucid.wallet.address()).paymentCredential.hash;

        const scriptAddress= lucid.utils.validatorToAddress(validator);// this gets the script address

        // we get all the UTXOs sitting at the script address
        const scriptUtxos=await lucid.utxosAt(scriptAddress);

        const Datum= Data.Object({
            owner:Data.String,// we can pass owner's verification key hash as byte array but also as a string
            beneficiary: Data.String,
            password: Data.String,
        });
         // we filter out all the UTXOs by beneficiary and password
        const utxos=scriptUtxos.filter((utxo) =>{
            let datum=Data.from(utxo.datum, Datum);

            return datum.beneficiary===beneficiaryPublicKeyHash &&
                  datum.password==utf8ToHex(passCode);
        });

        if(utxos.length===0){
            msg.innerHTML="No redeemable utxo found";
        }

        const redeemer=Data.to(new Constr(0, [utf8ToHex(passCode)]));

Next, we will make our transaction.

       try{
          
            const tx=await lucid
        .newTx()
        .collectFrom(utxos,redeemer)
        .addSigner(await lucid.wallet.address())// this should be beneficiary address
        .attachSpendingValidator(validator)
        .complete();

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

        const txUnlock=  signedTx.submit();


            msg.innerHTML="Ada unlocked";
            txUnlock.then(result => {
               transactionId.innerHTML=`transactionId: <br>${result}`
               transactionId.href=`https://preprod.cardanoscan.io/transaction/${result}`;
             }).catch(error => {
               console.error(error);
             });

          

        }catch(error){
          console.error(error)
        }
      }

      async function unlock(utxos, {from,using}){

      }

    unlockButton.onclick=unlock1;

      </script>
    
</body>
</html>

Now, you can check if it works. Switch to the receiving wallet and try to put in the wrong password. From there put in the correct password and see if it works.

You can inspect the transaction here: cardano scan.

You can copy and paste the transaction ID in the cardano scan website which will be logged once the transaction is successful or you can click on it and it will open the website. Give it some time load.

Hopefully, this is helpful.
source code

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