web/counterparty.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="view.css" type="text/css" rel="stylesheet"/>
    <script src="src/secrets.js" type="application/javascript"> </script>
    <script src="controller.js" type="application/javascript"> </script>
    <script type="text/javascript" src="node_modules/renderjson/renderjson.js"></script>
    <title>Marlowe Token Swap - Counterparty</title>
  </head>
  <body id="uiBody" onload="Controller.initialize(true)">
    <div id="uiContainer">
      <div id="uiPanelLeft">
        <h2>0. Contract Definition</h2>
        <table>
          <thead>
            <tr><th colspan="2">Party</th></tr>
          </thead>
          <tbody>
            <tr><td><label for="uiAddressA">Address:</label></td><td style="width:100%"><input id="uiAddressA" type="text"/></td></tr>
            <tr><td><label for="uiCurrencyA">Currency&nbsp;symbol:</label></td><td><input id="uiCurrencyA" type="text"/></td></tr>
            <tr><td><label for="uiTokenA">Token&nbsp;name:</label></td><td><input id="uiTokenA" type="text"/></td></tr>
            <tr><td><label for="uiAmountA">Amount:</label></td><td><input id="uiAmountA" type="text"/></td></tr>
          </tbody>
          <thead>
            <tr><th colspan="2">Counterparty</th></tr>
          </thead>
          <tbody>
            <tr><td><label for="uiAddressB">Address:</label></td><td><input id="uiAddressB" type="text"/></td></tr>
            <tr><td><label for="uiKeyB">Signing&nbsp;key:</label></td><td><input id="uiKeyB" type="password"/></td></tr>
            <tr><td><label for="uiCurrencyB">Currency&nbsp;symbol:</label></td><td><input id="uiCurrencyB" type="text"/></td></tr>
            <tr><td><label for="uiTokenB">Token&nbsp;name:</label></td><td><input id="uiTokenB" type="text"/></td></tr>
            <tr><td><label for="uiAmountB">Amount:</label></td><td><input id="uiAmountB" type="text"/></td></tr>
          </tbody>
        </table>
        <hr/>
        <h2>1. The Party Creates the Contract</h2>
        <div>
          <p>Contract ID: <span id="uiContractId" class="pre"/></p>
          <p>Transaction ID: <span id="uiTxId1" class="pre"/></p>
        </div>
        <hr/>
        <h2>2. The Party Deposits Their Tokens</h2>
        <div>
          <p>Transaction ID: <span id="uiTxId2" class="pre"/></p>
        </div>
        <hr/>
        <h2>3. The Counterparty Deposits Their Tokens</h2>
        <div>
          <button id="uiCounterpartyDeposit" type="button" onclick="Controller.counterpartyDeposit(true)">deposit tokens</button>
          <p>Transaction ID: <span id="uiTxId3" class="pre"/></p>
        </div>
        <hr/>
        <div>
          <button id="uiReset" type="button" onclick="Controller.reset(true)">reset</button>
        </div>
      </div>
      <div id="uiPanelRight">
        <h1>Learning Marlowe: A Token-Swap Contract</h1>
        <h2>The Counterparty&rsquo;s View</h2>
        <p>Network: <span id="uiNetwork"></span></p>
        <hr/>
        <h2>History</h2>
        <div id="uiOutput"/>
      </div>
    </div>
  </body>
</html>