Browser Integration

Now that we have our server running, we need front-end UI to interact with it.

For all of the operations, the approach (as previously mentioned) is same which is to first get the unsigned transaction from server, use browser wallet's signTx method to get spending key witness for this transaction, and then use server's endpoint to add witness to this transaction & submit it.

📃

The entire code pertaining to browser operations is available here (opens in a new tab).

An outline of this whole process is given below, illustrated via add-ref-script endpoint:

// Obtain access to browser wallet api
const api: WalletApi = await window.cardano[selectedWallet].enable(); // Creating a type such as `WalletApi` was entirely optional.
 
// Obtaining UTxOs to be used collaterals as given by browser wallet.
const colls = await api.experimental.getCollateral();
 
// Create request body for calling our endpoint
const body = {
  arsUsedAddrs: await api.getUsedAddresses(),
  arsChangeAddr: await api.getChangeAddress(),
  ...(0 in colls && { arsCollateral: colls[0] }),
  arsPutAddress: convertAddrToRaw(values.putAddress), // implementation detail
  arsBetParams: processBrpParams(brpParams), // implementation detail
};
console.log(body);
 
// Call endpoint
const { data } = await axios.post("http://localhost:8081/betref/add-ref-script", body);
console.log(data);
 
// Sign & submit
const { data: submitData } = await axios.post(
  "http://localhost:8081/tx/add-wit-and-submit",
  {
    awasTxUnsigned: data.urspTxBodyHex,
    awasTxWit: await api.signTx(data.urspTxBodyHex, true), // Note that this second argument (corresponding to "partial signing") needs to be `true` as for inputs such as those belonging to script already have their witness and we need to give witness only for inputs belonging to us.
  },
  {
    headers: {
      "Content-Type": "application/json",
    },
  }
);

What follows is the demo for all of the operations we defined.

⚠️

Due to security reasons, you would need to run this page locally (instructions here (opens in a new tab)) to check out the following demo.

Select the browser wallet you would like to use:

Before interacting with this contract, save the required script parameters:

Then lets make our first request to add for reference script:

Now you may place some bets.

Now let's add the actual answer to Oracle's Address

Finally, let's consume all the previously placed bets by giving actual answer

🎉

And with this, we come to an end of our Getting Started guide 🥳! Hope you enjoyed it 💙

❓

Have questions? Ask them at Cardano StackExchange (opens in a new tab).

Creating Endpoints More Tutorials