From 18b4faef4a0f9ca1e32aa79f5bcc29088e0b7fd9 Mon Sep 17 00:00:00 2001
From: Shaq Kheder <shaq@cryptomechanics.com>
Date: Sun, 6 Nov 2022 07:10:55 +0200
Subject: [PATCH] Make public

---
 README.md |   4 +
 ibc.html  | 699 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 703 insertions(+)
 create mode 100644 README.md
 create mode 100644 ibc.html
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..061c1b3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,4 @@
+# IBC reference UI (html)
+
+##### Simple UI to show how one can use the proof servers to prove actions and schedule changes.
+##### To connect to different contracts, apis, IBC proof servers or wrap lock contracts, please edit the chains array defined at the beggining of the script tags (L60) 
diff --git a/ibc.html b/ibc.html
new file mode 100644
index 0000000..e69c396
--- /dev/null
+++ b/ibc.html
@@ -0,0 +1,699 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>IBC Reference UI</title>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/anchor-link@3.5.1/lib/anchor-link.bundle.js"></script>
+  <script src="https://unpkg.com/anchor-link-browser-transport@3.5.1/lib/anchor-link-browser-transport.bundle.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+</head>
+
+<body style="max-width:640px;margin:40px auto;">
+  <div class="container" style="border:1px solid #64646d;padding:24px;">
+    <h3 class="text-center">IBC DEMO</h3>
+    <div class="flexRow"  style="margin-top:24px;">
+      <select onchange="chainChanged()" class="form-select chainSelect" id="sourceChain">
+        <option value="" disabled selected>Select Source Chain</option>
+      </select>
+      <select  onchange="chainChanged()" class="form-select chainSelect" id="destinationChain">
+        <option value="" disabled selected>Select Destination Chain</option>
+      </select>
+    </div>
+    <div class="flexRow" style="margin-top:24px;">
+      <button style="display:none;" id="sourceLogin" onclick="login('source')" type="button" class="btn btn-success">Login</button>
+      <button style="display:none;" id="sourceLogout" onclick="logout('source')" type="button" class="btn btn-danger">Logout</button>
+      <button style="display:none;" id="destinationLogin" onclick="login('destination')" type="button" class="btn btn-success">Login</button>
+      <button style="display:none;" id="destinationLogout" onclick="logout('destination')" type="button" class="btn btn-danger">Logout</button>
+    </div>
+    <hr>
+    <div class="flexRow" style="margin-top:48px;">
+      <div class="input-group"  style="width:260px;">
+        <input id="amount" placeholder="Amount" min="0.0001" step="0.0001" type="number"class="form-control"></input>
+        <div class="input-group-prepend">
+          <select style="width:120px;" class="form-select tokenSelect" id="sourceAsset">
+            <option value="" disabled selected>Token</option>
+          </select>
+        </div>
+      </div>
+      <button id="transferBtn" onclick="transfer()" disabled type="button" class="btn btn-primary">Transfer and Prove</button>
+    </div>
+    <div class="box"><section id="status">
+      <div><div>Fetching tokens available for IBC</div><div class="progressDiv">0%</div></div>
+    </section></div>
+    <div style="text-align:center;margin-top:24px;"><button id="resetBtn" onclick="reset()" style="display:none;" type="button" class="btn btn-primary">New Transfer</button></div>
+  </div>
+</body>
+
+<script>
+  
+  /*
+    Chain settings (change to connect to different infrastructure)
+    - nodeUrl: Nodeos API
+    - txExplorer: TX Explorer prefix
+    - proofSocket: IBC Proof WS Server
+    - bridgeContract: Name of account where IBC contract is deployed 
+    - wrapLockContractsArray: Array of the account names of desired wrap lock contracts
+  */
+
+  const chains = [{
+    chainId: 'f16b1833c747c43682f4386fca9cbb327929334a762755ebec17f6f23c9b8a12',
+    nodeUrl: 'https://test.wax.eosusa.io',
+    name: "waxtestnet",
+    label: "WAX Testnet",
+    txExplorer: "https://wax-test.bloks.io/transaction",
+    proofSocket: "wss://wax-testnet-ibc.goldenplatform.com",
+    bridgeContract:"antelopeibc2",
+    wrapLockContractsArray: ["antelopewlk1", "antelopewlk2", "antelopewlk3", "antelopewlk4"],
+  },{
+    chainId: '1eaa0824707c8c16bd25145493bf062aecddfeb56c736f6ba6397f3195f33c9f',
+    nodeUrl: 'https://test.telos.eosusa.io',
+    txExplorer: "https://explorer-test.telos.net/transaction",
+    name: "telostestnet",
+    label: "Telos Testnet",
+    proofSocket: "wss://telos-testnet-ibc.goldenplatform.com",
+    bridgeContract:"antelopeibc2",
+    wrapLockContractsArray: ["antelopewlk1", "antelopewlk2", "antelopewlk3", "antelopewlk4"],
+  },{
+    chainId: '5002d6813ffe275d9471a7e3a301eab91c36e8017f9664b8431fbf0e812a0b04',
+    nodeUrl: 'https://test.ux.eosusa.io',
+    txExplorer: 'https://testnet.uxnetwork.io/tx',
+    name: "uxpubtestnet",
+    label: "UX Public Testnet",
+    proofSocket: "wss://testnet-ibc.uxnetwork.io",
+    bridgeContract:"antelopeibc2",
+    wrapLockContractsArray: ["antelopewlk1", "antelopewlk2", "antelopewlk3", "antelopewlk4"]
+  },{
+    chainId: '73e4385a2708e6d7048834fbc1079f2fabb17b3c125b146af438971e90716c4d',
+    nodeUrl: 'https://jungle4.api.eosnation.io', //api supporting send_transaction2
+    txExplorer: 'https://jungle4.eosq.eosnation.io/tx',
+    name: "jungle4",
+    label: "Jungle 4 Testnet",
+    proofSocket: "wss://jungle4-ibc.goldenplatform.com",
+    bridgeContract:"antelopeibc2",
+    wrapLockContractsArray: ["antelopewlk1", "antelopewlk2", "antelopewlk3", "antelopewlk4"],
+    version:3.1 //Can fetch from get_info
+  },{
+    chainId: '5fff1dae8dc8e2fc4d5b23b2c7665c97f9e9d8edf2b6485a86ba311c25639191',
+    nodeUrl: 'https://kylin.api.eosnation.io', //api supporting send_transaction2
+    txExplorer: 'https://kylin.eosq.eosnation.io/tx',
+    name: "kylin",
+    label: "Kylin Testnet",
+    proofSocket: "wss://kylin-ibc.goldenplatform.com",
+    bridgeContract:"antelopeibc2",
+    wrapLockContractsArray: ["antelopewlk1", "antelopewlk2", "antelopewlk3", "antelopewlk4"],
+    version:3.1 //Can fetch from get_info
+  }];
+
+  for (var chain of chains){
+    chain.session = null;
+    chain.symbols = null;
+    chain.auth = null;
+    chain.wrapLockContracts = [];
+  }
+
+  let sourceChain, destinationChain, tokenRow, fetchProgress=0,progressInterval;
+  fetchTokens();
+
+  async function fetchTokens(){
+    //fetch wraplock contracts tokens & details
+    let promises = [];
+    let allWraplockContracts = []
+    //get global and contractmap rows from each chain
+    for (var chain of chains) for (var wrapLockContract of chain.wrapLockContractsArray) {
+      allWraplockContracts.push(wrapLockContract);
+      promises.push(
+        $.post(`${chain.nodeUrl}/v1/chain/get_table_rows`, JSON.stringify({ json: true, code: wrapLockContract, scope: wrapLockContract, table: 'global'})),
+        $.post(`${chain.nodeUrl}/v1/chain/get_table_rows`, JSON.stringify({ json: true, code: wrapLockContract, scope: wrapLockContract, table: 'contractmap'}))
+      )
+    }
+
+    const initialResults = (await Promise.all(promises)).map(r=>r.rows);
+    fetchProgress+=50;
+    $('.progressDiv').last().html(fetchProgress+"%");
+    let groupedResults = [];
+    while(initialResults.length > 2) groupedResults.push(initialResults.splice(0, 2));
+    let tokenPromises = []
+    for (var result of groupedResults){
+      const global = result[0][0];
+      const contractMaps = result[1];
+
+      for (var map of contractMaps){
+        const chain = chains.find(c=>c.chainId === global.chain_id);
+        if (!chain) continue;
+        tokenPromises.push($.post(`${chain.nodeUrl}/v1/chain/get_table_by_scope`, JSON.stringify({ code: map.native_token_contract, table: 'stat'})))
+      }
+    }
+    const tokenResults = await Promise.all(tokenPromises);
+    let tokenResultsIndex = 0;
+    for (var result of groupedResults){
+      const global = result[0][0];
+      const contractMaps = result[1];
+      for (var map of contractMaps){
+        const chain = chains.find(c=>c.chainId === global.chain_id);
+        const pairedChain = chains.find(c=>c.chainId === global.paired_chain_id);
+        if (!chain) continue;
+        let symbolsres = tokenResults[tokenResultsIndex];
+        let symbols = symbolsres.rows.map(r => toName(nameToUint64(r.scope)));
+        console.log(`${chain.name} -> ${pairedChain.name} tokens: ${symbols}`)
+        chain.wrapLockContracts.push({
+          chain_id: global.chain_id,
+          wrapLockContract: allWraplockContracts[tokenResultsIndex],
+          nativeTokenContract: map.native_token_contract,
+          pairedChainId: global.paired_chain_id,
+          pairedWrapTokenContract: map.paired_wraptoken_contract,
+          symbols
+        });
+        tokenResultsIndex++;
+      }
+    }
+    console.log("chains",chains)
+    $('.progressDiv').last().html("100%");
+
+    //on DOM ready
+    $(async function() {
+      //add chain options to chain select elements
+      for (var chain of chains) {
+        $('#sourceChain').append(new Option(chain.label, chain.name));
+        $('#destinationChain').append(new Option(chain.label, chain.name));
+      }
+    });
+  }
+
+  //handler for source chain change
+  const chainChanged = () =>{
+    //clear Token select options
+    $('#sourceAsset').find('option').remove().end();
+    $('#sourceAsset').find('optgroup').remove().end();
+
+    let sourceName = $('#sourceChain').val();
+    let destinationName = $('#destinationChain').val();
+    sourceChain = chains.find(c=>c.name == sourceName);
+    destinationChain = chains.find(c=>c.name == destinationName);
+
+    if (sourceName === destinationName || !destinationName){
+      destinationChain = chains.find(c=>c.name !== sourceName);
+      $("#destinationChain").val(destinationChain.name);
+    }
+    $('#status').html("<div><div>Fetching tokens available for IBC</div><div class='progressDiv'>100%</div></div>");
+    logout("source");
+    logout("destination");
+    // $('#sourceLogin').show();
+    // $('#destinationLogin').show();
+
+    let id = 1, nativeList = [], wrappedList = [];
+    for (var row of sourceChain.wrapLockContracts.filter(r=>r.pairedChainId ==destinationChain.chainId)) for (var symbol of row.symbols) {
+      nativeList.push({ ...row, id, symbol, sourceTokenContract: row.nativeTokenContract, destinationTokenContract: row.pairedWrapTokenContract,  native: true });
+      id++;
+    }
+    nativeList = nativeList.sort((a, b) => (a.symbol > b.symbol ? 1 : -1));
+
+    id = 1000;
+    for (var row of destinationChain.wrapLockContracts.filter(r=>r.pairedChainId ==sourceChain.chainId)) for (var symbol of row.symbols) {
+      wrappedList.push({ ...row, id, symbol, sourceTokenContract: row.pairedWrapTokenContract, destinationTokenContract: row.nativeTokenContract, native: false });
+      id++;
+    }
+    wrappedList = wrappedList.sort((a, b) => (a.symbol > b.symbol ? 1 : -1));
+    sourceChain.symbols = [...nativeList, ...wrappedList];
+
+    
+    //set Token select options
+    let optionsHtml = `<optgroup label="Native">`
+    for (var r of sourceChain.symbols.filter(r=>r.native)) optionsHtml+=`<option value=${r.id}>${r.symbol}</option>`;
+    optionsHtml+=`</optgroup><optgroup label="Wrapped">`;
+    for (var r of sourceChain.symbols.filter(r=>!r.native)) optionsHtml+=`<option value=${r.id}>${r.symbol}</option>`;
+    optionsHtml+=`</optgroup>`;
+    $('#sourceAsset').append(optionsHtml);
+  }
+
+  //UI functions
+  const login = type => {
+    const chain =  chains.find(c=>c.name===$(`#${type}Chain`).val());
+    const link = new AnchorLink({
+      transport: new AnchorLinkBrowserTransport(),
+      chains: [{ chainId: chain.chainId, nodeUrl: chain.nodeUrl}]
+    })
+    link.login("IBC")
+      .then((result) => {
+        chain.session = result.session;
+        chain.auth = { actor:chain.session.auth.actor.toString(), permission: chain.session.auth.permission.toString()}
+        $(`#${type}Login`).hide();
+        $(`#${type}Logout`).text(`Logout ${chain.auth.actor}@${chain.auth.permission}`);
+        $(`#${type}Logout`).show();
+        $(`#${type}Chain`).prop('disabled', true);
+        
+        $(`#transferBtn`).prop('disabled', chains.filter(r=>[sourceChain.name, destinationChain.name].includes(r.name)).map(r=>r.session).includes(null));
+      })
+      .catch(ex=> alert(ex));
+  }
+
+  const logout = type => {
+    const chain =  chains.find(c=>c.name===$(`#${type}Chain`).val());
+    $(`#${type}Logout`).hide();
+    $(`#${type}Login`).show();
+    $(`#${type}Chain`).prop('disabled', false);
+    $(`#transferBtn`).prop('disabled', true);
+    if (!chain || !chain.session) return;
+    chain.session?.remove();
+    chain.session = null;
+    chain.auth = null;
+  }
+
+  const lock = () => {
+    $(`#transferBtn`).prop('disabled', true);
+    $(`#sourceLogout`).prop('disabled', true);
+    $(`#destinationLogout`).prop('disabled', true);
+    $(`#sourceAsset`).prop('disabled', true);
+    $(`#amount`).prop('disabled', true);
+  }
+
+  const reset = () =>{
+    $('#resetBtn').hide();
+    $('#status').html("<div><div>Fetching tokens available for IBC</div><div class='progressDiv'>100%</div></div>");
+    $(`#transferBtn`).prop('disabled', false);
+    $(`#sourceLogout`).prop('disabled', false);
+    $(`#destinationLogout`).prop('disabled', false);
+    $(`#sourceAsset`).prop('disabled', false);
+    $(`#amount`).prop('disabled', false);
+    // logout('destination');
+    // logout('source');
+  }
+
+
+  //transfer function to lock or retire tokens
+  const transfer = async () => {
+    //get values form UI
+    tokenRow = sourceChain.symbols.find(r=>r.id===parseInt($('#sourceAsset').val()));
+    let amount = parseFloat($("#amount").val());
+    
+    //fetch token decimal places from native chain 
+    const statChain = chains.find(r=>r.chainId===tokenRow.chain_id);
+    const statResult = await $.post(`${statChain.nodeUrl}/v1/chain/get_table_rows`, JSON.stringify({
+      json: true,
+      code: tokenRow.nativeTokenContract,
+      scope: tokenRow.symbol,
+      table: 'stat',
+      limit:1
+    })) 
+    const decimals = statResult.rows[0].supply.split('.')[1].split(' ')[0].length;
+    console.log("decimals",decimals)
+
+    const quantity = `${amount.toFixed(decimals)} ${tokenRow.symbol}`;
+    let sourceActions;
+    if (tokenRow.native) sourceActions = [ transferToken({ tokenRow, sourceChain, destinationChain, quantity })]; //transfer token to the wraplock token
+    else sourceActions = [ retireWrappedToken({ tokenRow, sourceChain, destinationChain, quantity }) ]; //retire tokens from a non-native chain
+    console.log("sourceActions",sourceActions)
+    
+    lock();
+    //sign tx w/o broadcasting
+    let signedTx;
+    try{
+      console.log("sourceActions",sourceActions)
+      signedTx = await sourceChain.session.transact({actions: sourceActions}, {broadcast:false, expireSeconds:360, blocksBehind:3});
+      console.log("signedTx",signedTx)
+    }catch(ex){
+      $('#resetBtn').show();
+      console.log("ex", ex)
+      $('#status').append("<br>");
+      $('#status').append(ex);
+      return 
+    }
+
+    $('#status').append(`<div><div>Waiting for TX irreversibility <span id="lockTx" style="margin-left:12px"></span></div><div class="progressDiv">0%</div></div>`);
+                                                  
+    let prog = 0;
+    progressInterval = setInterval(()=>{
+      prog = Math.min(prog +1, 100);
+      $('.progressDiv').last().html(prog +"%");
+    }, 1700);
+    
+    submitTx(signedTx, sourceChain ).then( async result => {
+      clearInterval(progressInterval); //clear progress interval
+      $('.progressDiv').last().html("100%");
+      $('#lockTx').html(`<a target="_blank" style="color:#1a8754" href="${sourceChain.txExplorer}/${result.processed.id}">${tokenRow.native?'Lock TX':'Retire TX'}<a>`)
+      console.log(result) // processed tx of transfer/retire
+
+      let emitxferAction = result.processed.action_traces.find(r=>r.act.name==='emitxfer'); //if flattened traces (using send_transaction)
+      if (!emitxferAction){ //if api returns inline traces within action_trace (using push_transaction) shouldnt be used now
+        const lockActionTrace = result.processed.action_traces.find(r=>r.act.name==='transfer' || r.act.name==='retire');
+        emitxferAction = lockActionTrace.inline_traces.find(r=>r.act.name==='emitxfer');
+        console.log("!!!!!!!!!!!!!!!Shouldn't happen!!!!!!!!!!!!!!!!")
+      }
+      console.log("emitxferAction to prove", emitxferAction);
+
+      //Get schedule proofs;
+      const scheduleProofs = await getScheduleProofs(result.processed.block_num);
+      console.log("scheduleProofs",scheduleProofs)
+      if (!scheduleProofs) {
+        $('#resetBtn').show();
+        return  $('#status').append(`<div><div>Error, no schedule proofs</div><div class="progressDiv"></div></div>`);
+      }
+
+      $('#status').append(`<div><div>Fetching proof for interchain transfer</div><div class="progressDiv">0%</div></div>`);
+      
+      const emitxferProof = await getProof({
+        type: "heavyProof",
+        action: emitxferAction,
+        block_to_prove: result.processed.block_num //block that includes the emitxfer action we want to prove
+      });
+      console.log("emitxferProof",emitxferProof)
+
+      //submit proof to destination chain's bridge contract
+      let destinationActions = [...scheduleProofs, emitxferProof];
+      console.log("destinationActions",destinationActions)
+      $('#status').append(`<div><div>Submitting proof(s)<span id="proofTx" style="margin-left:12px"></span></div> <div class="progressDiv">0%</div></div>`);
+      const signedDestinationTx = await destinationChain.session.transact({actions: destinationActions}, {broadcast:false, expireSeconds:360, blocksBehind:3});
+      $('.progressDiv').last().html("50%");
+
+      if (!signedDestinationTx || !signedDestinationTx.signatures) return $('#status').append(`<div>Error signing TX</div>`);
+
+      submitTx(signedDestinationTx, destinationChain, 6 ).then( async result => {
+        $('.progressDiv').last().html("100%");
+        console.log("result", result);
+        $('#proofTx').html(`<a target="_blank" style="color:#1a8754" href="${destinationChain.txExplorer}/${result.processed.id}">Proof TX<a>`)
+        $('#resetBtn').show();
+      }).catch(async err=>{
+        $('.progressDiv').last().html("Error");
+        console.log("Error pushing proof", err);
+        if(progressInterval) clearInterval(progressInterval);
+        $('#status').append(`<br><div>Error submitting proof(s): </div>`);
+        $('#status').append(`${err.responseJSON.error.details[0].message}</div>`);
+        $('#resetBtn').show();
+      })
+    })
+    .catch(err2=>{
+      console.log("Error submitting TX", err2); 
+      if(progressInterval) clearInterval(progressInterval);
+      $('#status').append(`<br><div>Error submitting TX: </div>`);
+      $('#status').append(`${err2.responseJSON.error.details[0].message}</div>`);
+      $('#resetBtn').show();
+    })
+  }
+
+  const getScheduleProofs = async (transferBlock) => {
+    async function getProducerScheduleBlock(blocknum) {
+      try{
+        const sourceAPIURL = sourceChain.nodeUrl+"/v1/chain";
+        var header = await $.post(sourceAPIURL + "/get_block", JSON.stringify({"block_num_or_id":blocknum,"json": true}));
+        let target_schedule = header.schedule_version;
+        
+        let min_block = 2;
+        //fetch last proved block to use as min block for schedule change search 
+        const lastBlockProved = await $.post(destinationChain.nodeUrl+ '/v1/chain/get_table_rows', JSON.stringify({
+          code: destinationChain.bridgeContract,
+          table: "lastproofs", 
+          scope: sourceChain.name,
+          limit: 1, reverse: true, show_payer: false, json: true
+        }));
+
+        if (lastBlockProved && lastBlockProved.rows[0]) min_block = lastBlockProved.rows[0].block_height;
+
+        let max_block = blocknum;
+        
+        //detect active schedule change
+        while (max_block - min_block > 1) {
+          blocknum = Math.round((max_block + min_block) / 2);
+          try{
+            header = await $.post(sourceAPIURL + "/get_block", JSON.stringify({"block_num_or_id":blocknum,"json": true}));
+            if (header.schedule_version < target_schedule) min_block = blocknum;
+            else max_block = blocknum;
+          }catch(ex){console.log("Internet connection lost, retrying")}
+        }
+        if (blocknum > 337) blocknum -= 337;
+        //search before active schedule change for new_producer_schedule 
+        let bCount = 0; //since header already checked once above
+        while (blocknum < max_block && (!("new_producer_schedule" in header) && !header.new_producers)) {
+          try{
+            header = await $.post(sourceAPIURL + "/get_block", JSON.stringify({"block_num_or_id":blocknum,"json": true}));
+            bCount++;
+            blocknum++;
+          }catch(ex){console.log("Internet connection lost, retrying")}
+        }
+        blocknum = header.block_num;
+        return blocknum;  
+      }catch(ex){ console.log("getProducerScheduleBlock ex",ex); return null;}
+    }
+
+    const proofs = [];
+    const bridgeScheduleData = await $.post(destinationChain.nodeUrl+ '/v1/chain/get_table_rows', JSON.stringify({
+      code: destinationChain.bridgeContract,
+      table: "schedules", 
+      scope: sourceChain.name,
+      limit: 1, reverse: true, show_payer: false, json: true
+    }));
+    console.log("bridgeScheduleData",bridgeScheduleData)
+    
+    var last_proven_schedule_version = 0;
+    // if (bridgeScheduleData.rows.length > 0) last_proven_schedule_version = bridgeScheduleData.rows[0].producer_schedule.version;
+    if (bridgeScheduleData.rows.length > 0) last_proven_schedule_version = bridgeScheduleData.rows[0].version;
+    if (!last_proven_schedule_version) return console.log('No Schedule Found in Contract!');
+    console.log("Last proved source schedule:",last_proven_schedule_version);
+
+    let schedule = (await $.get(sourceChain.nodeUrl+ '/v1/chain/get_producer_schedule'));
+    var schedule_version = parseInt(schedule.active.version);
+    console.log("Source active schedule:",schedule_version);
+    console.log("Pending schedule:", schedule.pending?'True':'False')
+
+    let head = (await $.get(sourceChain.nodeUrl+ '/v1/chain/get_info')).head_block_num;
+
+
+    let schedule_block = head + 0;
+    console.log("head",head)
+    while (schedule_version > last_proven_schedule_version) {
+      $('#status').append(`<div><div>Locating block header with producer schedule (v${schedule_version})</div><div class="progressDiv">0%</div></div>`);
+      let block_num = await getProducerScheduleBlock(schedule_block);
+      if (!block_num) return; //should never occur
+      $('.progressDiv').last().html("100%");
+      $('#status').append(`<div><div>Fetching proof for active schedule (v${schedule_version})</div><div class="progressDiv">0%</div></div>`);
+      var proof = await getProof({block_to_prove: block_num});
+      schedule_version = proof.data.blockproof.blocktoprove.block.header.schedule_version;
+      schedule_block = block_num;
+      proofs.unshift(proof);
+    };
+
+    // check for pending schedule and prove pending schedule if found;
+    if (schedule.pending) {
+      $('#status').append(`<div><div>Fetching proof for pending schedule</div><div class="progressDiv">0%</div>`);
+
+      let newPendingBlockHeader=null;
+      let currentBlock = transferBlock + 0;
+      while(!newPendingBlockHeader){
+        let bHeader = (await $.post(`${sourceChain.nodeUrl}/v1/chain/get_block`, JSON.stringify({ block_num_or_id: currentBlock })));
+        if (bHeader['new_producer_schedule']) newPendingBlockHeader = bHeader;
+        else currentBlock--;
+      }
+      var pendingProof = await getProof({block_to_prove: newPendingBlockHeader.block_num});
+      proofs.push(pendingProof); //push pending after proving active
+    } 
+
+    return proofs;
+  };
+
+  const getProof = ({type="heavyProof", block_to_prove, action}) => {
+    return new Promise(resolve=>{
+      //initialize socket to proof server
+      const ws = new WebSocket(sourceChain.proofSocket);
+      ws.addEventListener('open', (event) => {
+        // connected to websocket server
+        const query = { type, block_to_prove };
+        if (action) query.action_receipt = action.receipt;
+        ws.send(JSON.stringify(query));
+      });
+
+      //messages from websocket server
+      ws.addEventListener('message', (event) => {
+        const res = JSON.parse(event.data);
+        //log non-progress messages from ibc server
+        if (res.type !=='progress') console.log("Received message from ibc proof server", res);
+        if (res.type =='progress') $('.progressDiv').last().html(res.progress +"%");
+        if (res.type !=='proof') return;
+        ws.close();
+
+        $('.progressDiv').last().html("100%");
+        //handle issue/withdraw if proving transfer/retire 's emitxfer action, else submit block proof to bridge directly (for schedules)
+        const actionToSubmit = { 
+          authorization: [destinationChain.auth],
+          name: !action ? "checkproofd" : tokenRow.native ? "issuea" : "withdrawa",
+          account: !action ? destinationChain.bridgeContract : tokenRow.native ? tokenRow.pairedWrapTokenContract : tokenRow.wrapLockContract,
+          data: { ...res.proof, prover: destinationChain.auth.actor } 
+        };
+
+        //if proving an action, add action and formatted receipt to actionproof object
+        if (action) {
+          let auth_sequence = [];
+          for (var authSequence of action.receipt.auth_sequence) auth_sequence.push({ account: authSequence[0], sequence: authSequence[1] });
+          actionToSubmit.data.actionproof = {
+            ...res.proof.actionproof,
+            action: {
+              account: action.act.account,
+              name: action.act.name,
+              authorization: action.act.authorization,
+              data: action.act.hex_data
+            },
+            receipt: { ...action.receipt, auth_sequence }
+          }
+        }
+        resolve(actionToSubmit);
+      });
+    });
+  }
+
+  const submitTx = (signedTx, chain, retry_trx_num_blocks=null) => {
+    let leap = chain.version && chain.version >=3;
+    let url = `${chain.nodeUrl}/v1/chain/send_transaction`;
+    let obj = {
+      signatures: signedTx.signatures,
+      compression: signedTx.compression || false,
+      packed_trx: arrayToHex(signedTx.resolved.serializedTransaction),
+      packed_context_free_data: null
+    }
+    if (leap){
+      url+='2'; //use send transaction2 if available
+      obj = {
+        transaction: obj,
+        return_failure_trace: false,
+        retry_trx: true,
+        retry_trx_num_blocks, //if not specified, it defaults to LIB
+      }
+      return $.post(url, JSON.stringify(obj));
+    }
+
+
+   return pushGurantee(chain, obj, retry_trx_num_blocks); //if waiting for lib
+  }
+
+  
+  //Add retry logic and waiting for blocks to send_transaction, to emulate send_transaction2 retry_trx_num_blocks
+  const pushGurantee = async (chain, packedTx, retry_trx_num_blocks ) => new Promise(async resolve=>{
+    let tx;
+    try{
+      tx = await $.post(`${chain.nodeUrl}/v1/chain/send_transaction`, JSON.stringify(packedTx));
+      console.log("tx",JSON.parse(JSON.stringify(tx)));
+    }catch(ex){
+      if(progressInterval) clearInterval(progressInterval);
+      $('#resetBtn').show();
+      $('.progressDiv').last().html("0%");
+      console.log("Exception submitting tx", ex);
+      $('#status').append(`<br><div>Error submitting TX: </div>`);
+      $('#status').append(`<div>${ex.responseJSON.error.details[0].message}</div>`);
+      if (ex.responseJSON.error.details[1]) $('#status').append(`<div>${ex.responseJSON.error.details[1].message}</div>`)
+      return 
+    }
+
+    const transaction_id = tx.processed.id;
+    let finished = false;
+    let delay = 500;
+    while (!finished){
+      await sleep(delay);
+      delay*=1.1;
+      delay=Math.min(delay, 5000)
+      try{
+
+      
+        const block = await $.post(`${chain.nodeUrl}/v1/chain/get_block`, JSON.stringify({block_num_or_id: tx.processed.block_num }));
+        const txFound = block.transactions.find(r=>r.trx.id === transaction_id);
+        if (txFound) { //if tx is in block, check relation to retry_trx_num_blocks
+          const headInfo = await $.get(`${chain.nodeUrl}/v1/chain/get_info`);
+          // console.log("Blocks passed: ~" + (headInfo.head_block_num - tx.processed.block_num) + "/330", "LIB: " + headInfo.last_irreversible_block_num)
+          if (
+            (!retry_trx_num_blocks && headInfo.last_irreversible_block_num  >= tx.processed.block_num)  || // passed lib
+            (retry_trx_num_blocks && headInfo.head_block_num - tx.processed.block_num >= retry_trx_num_blocks) // passed blocks specified
+          ) finished = true;
+        }
+        else if(!txFound){ //if tx is not in block, resubmit packed tx
+          try{ 
+            tx = await $.post(`${chain.nodeUrl}/v1/chain/send_transaction`, JSON.stringify(packedTx)); 
+            console.log("tx not found in block (fork/stale block), resubmitted tx",tx);
+          }
+          catch(ex){//handle duplicate tx error, in case it auto got included in next block than reported, check next block and so on
+            console.log(ex)
+            //TODO verify exception is duplicate tx error
+            tx.processed.block_num++;
+            console.log("exception resubmitting duplicate tx, incremented block number to find tx", tx.processed.block_num)
+          }
+        }
+      }catch(ex){console.log("lost internet, retrying")}
+    }// end of while
+    if (retry_trx_num_blocks) return resolve(tx); //return tx if we dont need to worry about correct global action
+    //fetch from firehose to set correct global sequence (from produced block) in action_receipt
+    const ws = new WebSocket(sourceChain.proofSocket);
+    ws.addEventListener('open', (event) => ws.send(JSON.stringify({ type: "getBlockActions", block_to_prove: tx.processed.block_num })));
+    ws.addEventListener('message', (event) => {
+      const res = JSON.parse(event.data);
+      console.log("res",res)
+      const firhoseTx = res.txs.find(r=>r.find(s=>s.transactionId === transaction_id));
+      console.log("firhoseTx",firhoseTx)
+      const firehoseEmitxfer = firhoseTx.find(r=>r.action.name==='emitxfer');
+      console.log("firehoseEmitxfer",firehoseEmitxfer)
+      let emitxferAction = tx.processed.action_traces.find(r=>r.act.name==='emitxfer');
+      console.log("api emitxferAction receipt", JSON.parse(JSON.stringify(emitxferAction.receipt)))
+
+      emitxferAction.receipt = firehoseEmitxfer.receipt;
+      //convert firehose authSequence to expected format for ibc-proof server
+      let auth_sequence = [];
+      for (var auth of emitxferAction.receipt.auth_sequence) auth_sequence.push([auth.account, auth.sequence]);
+      emitxferAction.receipt.auth_sequence = auth_sequence;
+      console.log("bp emitxferAction receipt",firehoseEmitxfer.receipt)
+      resolve(tx);
+    });
+  })
+  const sleep = ms => new Promise(resolve=>setTimeout(resolve,ms)); 
+
+  //action creation functions
+  const transferToken = ({tokenRow, sourceChain, destinationChain, quantity} ) => ({
+    account: tokenRow.nativeTokenContract,
+    name: "transfer",
+    authorization: [sourceChain.auth],
+    data: { from: sourceChain.auth.actor, to: tokenRow.wrapLockContract, quantity, memo: destinationChain.auth.actor }
+  });
+
+  const retireWrappedToken = ({ tokenRow, sourceChain, destinationChain, quantity }) => ({
+    account: tokenRow.sourceTokenContract,
+    name: "retire",
+    authorization: [sourceChain.auth],
+    data: { owner: sourceChain.auth.actor, quantity, beneficiary: destinationChain.auth.actor }
+  });
+
+  //eosio name helper functions
+  const char_to_symbol = c => {
+    if (typeof c == 'string') c = c.charCodeAt(0);
+    if (c >= 'a'.charCodeAt(0) && c <= 'z'.charCodeAt(0)) return c - 'a'.charCodeAt(0) + 6;
+    if (c >= '1'.charCodeAt(0) && c <= '5'.charCodeAt(0)) return c - '1'.charCodeAt(0) + 1;
+    return 0;
+  };
+
+  const toName = value => {
+    let v = BigInt.asUintN(64, value), result = '';
+    while (v > 0) {
+      const c = v & BigInt(0xff);
+      result += String.fromCharCode(Number(c.toString()));
+      v >>= 8n;
+    }
+    return result;
+  };
+
+  const nameToUint64 = s => {
+    let n = 0n, i = 0;
+    for (; i < 12 && s[i]; i++) n |= BigInt(char_to_symbol(s.charCodeAt(i)) & 0x1f) << BigInt(64 - 5 * (i + 1));
+    if (i == 12) n |= BigInt(char_to_symbol(s.charCodeAt(i)) & 0x0f);
+    return n.toString();
+  };
+
+  const arrayToHex = data => {
+    let result = '';
+    for (const x of data)  result += ('00' + x.toString(16)).slice(-2);
+    return result.toUpperCase();
+  };
+</script>
+
+<style>
+  html,body{ background-color: #31313d; color:white; font-family: Verdana, Geneva, Tahoma, sans-serif; }
+  .flexRow{ display: flex; align-items: center; justify-content: space-between;}
+  label{ width:70px; text-align: left;color:white; }
+  .form-select, .form-control, button{ width:272px; }
+  .form-select:disabled { background-color: #adafb2; }
+  .box{ padding:16px; border:1px solid #64646d;margin-top:44px; }
+  .box > div, #status > div{ display:flex; justify-content: space-between; }
+</style>
+</html>
\ No newline at end of file
