Rings Network: Handshake example

Fork me on GitHub

<div>
  Rings Node Instance:
  <p>
    <span>Rings DID:: </span>
    <span id="did"></span>
  </p>
  <p id="loading" style="color:red;visibility: hidden;">
    executing
  </p>
  <script>
    function start() {
      document.getElementById("loading").style.visibility="visible";
    }

function done() {
      document.getElementById("loading").style.visibility="hidden";
    }
  </script>
  <p id="handshake">
    <button
      onclick="start();window.client.request('createOffer', [document.getElementById('input').innerText]).then((res) => { console.log(res);document.getElementById('output').innerText=res.offer;done()})"
      >Create Offer SDP</button>
    <button
      onclick="start();window.client.request('answerOffer', [getElementById('input').innerText]).then((res)=>{console.log(res);document.getElementById('output').innerText=res.answer;done()})"
      >Accept Offer [SDP] and Create answer SDP</button>
    <button
      onclick="start();window.client.request('acceptAnswer', [getElementById('input').innerText]).then((res)=>{console.log(res);done()})"
      >Accept Answer [SDP]</button>
    <button
      onclick="start();window.client.request('connectWithDid', [document.getElementById('input').innerText]).then((ret)=>{console.log(ret);done()})"
      >connect with [DID]</button>
    <button
      onclick="start();window.client.request('listPeers', []).then((ret)=>{console.log(ret.result);done()})"
      >list peers</button>
    <button
      onclick="start();window.client.request('nodeInfo', []).then((ret)=>{console.log(ret.result);done()})"
      >node info</button>
    <button
      onclick="start();window.client.request('sendSimpleText', document.getElementById('input').innerText.split(';')).then((ret)=>{document.getElementById('output').innerText=ret.result;done()})"
      >send message to [DID; MSG]</button>
  </p>
  <p>
    <span>input</span>
    <p id="input" style="font-size:0.80rem;height:2.5rem; background-color:#eee; overflow:scroll;" contenteditable=true></p>
    <span>output</span>
    <p id="output" style="font-size:0.80rem;height:2.5rem; background-color:#eee; overflow:scroll; word-wrap: break-word;"></p>
  </p>
  <p>
</div>

<script type="module">
import init, { debug, Provider, BackendBehaviour } from './node_modules/rings-node/dist/rings_node.js';
import { Wallet } from "./node_modules/ethers/dist/ethers.js"

// Init wasm module
await init();

// message callback
const callback = new BackendBehaviour(
  async (from, message) => {
    console.log("get custom message %s from %s", message, from)
  },
  async (from, message) => {
    console.log("get http response message %s from %s", message, from)
  },
  async (from, message) => {
    console.log("get buildin message %s from %s", message, from)
  }
)

// prepare keypair
const account = Wallet.createRandom();
document.getElementById("did").innerText = account.address;

// signer
// Utility function to convert hex string to Uint8Array
function hexToUint8Array(hexString) {
    // Remove the "0x" prefix if it exists
    if (hexString.startsWith('0x')) {
        hexString = hexString.slice(2);
    }
    const byteArray = [];
    for (let i = 0; i < hexString.length; i+=2) {
        byteArray.push(parseInt(hexString.substr(i, 2), 16));
    }
    return new Uint8Array(byteArray);
}

let signer = async (proof) => {
  let sig = await account.signMessage(proof);
  return hexToUint8Array(sig)
}

debug(true)

// create client
window.client = await new Provider(
  "stun://stun.l.google.com:19302",
  100n, // stab timeout
  account.address, // account
  "eip191", // account type
  signer,
  callback
)
await window.client.listen();
console.log(client);

</script>