Merge pull request #41 from input-output-hk/PLT-7260

PLT-7260 CIP45 dapp for generating payouts
input-output-hk · Sep 11, 2023 · f7cd467 · f7cd467
2 parents 9c92b6d + 3993642
commit f7cd467
Show file tree

Hide file tree

Showing 13 changed files with 8,287 additions and 3 deletions.
diff --git a/ReadMe.md b/ReadMe.md
@@ -28,6 +28,7 @@ Lesson | Duration | Prerequsites | Video
 [5 - Swap of Ada for Djed using Marlowe Runtime's Rest API](lessons/05-swap-rest/) | 20 mins | [Preliminaries](setup/00-local-environment.ipynb), [Lesson 2](lessons/02-runtime-rest/) | [video](https://youtu.be/sSrVCRNoytU)
 [6 - Simple web application using a CIP-30 wallet](lessons/06-cip30/) | 5 mins | [Preliminaries](setup/00-local-environment.ipynb), [Lesson 5](lessons/05-swap-rest/) | [video](https://youtu.be/EsILiHiNZWk)
 [7 - Checking the safety of a Marlowe contract](lessons/07-safety/) | 10 mins | [Preliminaries](setup/00-local-environment.ipynb) |
+[8 - Experimental web application using a CIP-45 wallet](lessons/08-cip45/) | 10 mins | [Preliminaries](setup/00-local-environment.ipynb) | [video](https://youtu.be/3cR8tq0WE_8)
 
 ## Under the Hood
 

diff --git a/flake.lock b/flake.lock
diff --git a/lessons/08-cip45/.gitignore b/lessons/08-cip45/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/lessons/08-cip45/ReadMe.md b/lessons/08-cip45/ReadMe.md
@@ -0,0 +1,29 @@
+# Example of Using Marlowe Runtime with a CIP45 Wallet
+
+This example shows how to use a [CIP-45](https://github.com/cardano-foundation/CIPs/pull/395) wallet such as [Eternl](https://input-output.atlassian.net/browse/PLT-7347) to sign Marlowe transactions. The example contract here simply receives a deposit and sends the funds to the Marlowe role-payout address for the benefit of a specified party. The funding policy ID and token name specify the native token to be sent; leave these blank to send ada.
+
+A [video demonstration](https://youtu.be/3cR8tq0WE_8) is available.
+
+The URL for Marlowe Runtime and the recipient's role token policy ID and asset name are specified as parameters to dapp's URL.
+
+- `runtimeUrl=` the URL for the Marlowe Runtime instance.
+- `recipientPolicy=` the policy ID for the recipient of the funds.
+- `recipientName=` the asset name for the recipient of the funds.
+
+On `mainnet`, for example, one can use an [Ada Handle](https://mint.handle.me/) (policy ID `f0ff48bbb7bbe9d59a40f1ce90e9e9d0ff5002ec48f232b49ca0fb9a`) or an [Ada Domain](https://www.adadomains.io/) (policy ID `fc411f546d01e88a822200243769bbc1e1fbdde8fa0f6c5179934edb`) for the recipient. Note that for an Ada Handle do not include the `$` prefix in the asset name and for an Ada Domain do not include the `.ada` suffix in the asset name. The holder of the handle or domain can redeem the funds from the Marlowe payout address using their NFT using the [Marlowe Payouts](https://github.com/input-output-hk/marlowe-payouts) dapp.
+
+
+## Source files
+
+- [index.html](index.html): The HTML page for the application.
+- [view.css](view.css): The CSS styling for the application
+- [src/controller.js](src/controller.js): The JavaScript source code for the application.
+
+
+## Running the application
+
+- If you have Nix installed, simply execute [./run.sh](run.sh).
+- Alternatively, if you have NodeJS installed, execute `npm install` and then `npx webpack-dev-server`.
+
+The application is served from [http://127.0.0.1:3000](http://127.0.0.1:3000). It was tested with the [Eternl wallet](https://eternl.io/).
+
diff --git a/lessons/08-cip45/index.html b/lessons/08-cip45/index.html
@@ -0,0 +1,115 @@
+<!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="controller.js" type="application/javascript"> </script>
+    <title>Example of Using Marlowe Runtime with a CIP45 Wallet</title>
+  </head>
+  <body id="uiBody" onload="Controller.initialize()">
+    <h1>Example of Using Marlowe Runtime with a CIP45 Wallet</h1>
+    <p>This example shows how to use a <a href="https://github.com/cardano-foundation/CIPs/pull/395" target="marlowe">CIP-45</a> wallet such as <a href="https://eternl.io/" target="marlowe">Eternl</a> to sign Marlowe transactions. The example contract here simply receives a deposit and sends the funds to the Marlowe role-payout address for the benefit of a specified party. The funding policy ID and token name specify the native token to be sent; leave these blank to send ada.</p>
+    <p>A <href="https://youtu.be/3cR8tq0WE_8" target="marlowe">video demonstration</a> is available.</p>
+    <p>The URL for Marlowe Runtime and the recipient's role token policy ID and asset name are specified as parameters to this page's URL.</p>
+    <ul>
+      <li><code>runtimeUrl=</code> the URL for the Marlowe Runtime instance.</li>
+      <li><code>recipientPolicy=</code> the policy ID for the recipient of the funds.</li>
+      <li><code>recipientName=</code> the asset name for the recipient of the funds.</li>
+    </ul>
+    <p>On <code>mainnet</code>, for example, one can use an <a href="https://mint.handle.me/" target="marlowe">Ada Handle</a> (policy ID <code>f0ff48bbb7bbe9d59a40f1ce90e9e9d0ff5002ec48f232b49ca0fb9a</code>) or an <a href="https://www.adadomains.io/" target="marlowe">Ada Domain</a> (policy ID <code>fc411f546d01e88a822200243769bbc1e1fbdde8fa0f6c5179934edb</code>) for the recipient. Note that for an Ada Handle do not include the <code>$</code> prefix in the asset name and for an Ada Domain do not include the <code>.ada</code> suffix in the asset name. The holder of the handle or domain can redeem the funds from the Marlowe payout address using their NFT using the <a href="https://github.com/input-output-hk/marlowe-payouts" target="marlowe">Marlowe Payouts</a> dapp.</p>
+    <div id="uiPanels">
+      <table>
+        <thead><tr><th colspan="3">CIP45 CardanoConnect</th></tr></thead>
+        <tbody>
+          <tr>
+            <td><label for="uiMeerkat">Dapp address:</label></td>
+            <td><span id="uiMeerkat"/></td>
+            <td>The Meerkat P2P address of this Dapp in this browser.</td>
+          </tr>
+          <tr>
+            <td><label for="uiWallet">Wallet address:</label></td>
+            <td><span id="uiWallet"/></td>
+            <td>The Meerkat P2P address of the wallet.</td>
+          </tr>
+          <tr>
+            <td colspan="3"><em>Paste the above address into the <code>ConnectionId</code> field on the <code>CardanoConnect</code> settings page of your CIP45-enabled wallet. Select the <code>Auto-connect</code> setting in the wallet.</em></td>
+          </tr>
+        </tbody>
+        <thead><tr><th colspan="3">Marlowe Runtime</th></tr></thead>
+        <tbody>
+          <tr>
+            <td><label for="uiRuntime">URL</label></td>
+            <td><span id="uiRuntime"/></td>
+            <td>The URL for the Marlowe Runtime instance.</td>
+          </tr>
+        </tbody>
+        <thead><tr><th colspan="3">Parameters for contract</th></tr></thead>
+        <tbody>
+          <tr>
+            <td>Depositor's address:</td>
+            <td><span id="uiAddress"/></td>
+            <td>The address of the wallet making the deposit.</td>
+          </tr>
+          <tr>
+            <td>Recipient policy ID:</td>
+            <td><span id="uiRecipientPolicy"/></td>
+            <td>The policy ID for the recipient's role token.</td>
+          </tr>
+          <tr>
+            <td>Recipient token name:</td>
+            <td><span id="uiRecipientName"/></td>
+            <td>The asset name of the recipient's role token.</td>
+          </tr>
+          <tr>
+            <td><label for="uiFundingPolicy">Funding policy ID:</label></td>
+            <td><input id="uiFundingPolicy" type="text" onchange="Controller.makeContract()"/></td>
+            <td>The policy ID for the tokens being sent to the recipient. (Leave blank for sending ada.)</td>
+          </tr>
+          <tr>
+            <td><label for="uiFundingName">Funding token name:</label></td>
+            <td><input id="uiFundingName" type="text" onchange="Controller.makeContract()"/></td>
+            <td>The asset name for the tokens being sent to the recipient. (Leave blank for sending ada.)</td>
+          </tr> 
+          <tr>
+            <td><label for="uiFundingAmount">Funding amount:</label></td>
+            <td><input id="uiFundingAmount" type="number" min="1" value="2000000" onchange="Controller.makeContract()"/></td>
+            <td>The number of tokens being sent to the recipient. (Each ada is 1,000,000 lovelace.)</td>
+          </tr>
+          <tr>
+            <td><label for="uiDepositTime">Deposit deadline:</label></td>
+            <td><input id="uiDepositTime" type="datetime-local" onchange="Controller.makeContract()"/></td>
+            <td>The deadline for deposit the funds being sent to the recipient.</td>
+          </tr>
+        </tbody>
+        <thead><tr><th colspan="3">Transactions</th></tr></thead>
+        <tbody>
+          <tr>
+            <td>Contract ID:</td>
+            <td><span id="uiContractId"/></td>
+            <td/>
+          </tr>
+          <tr>
+            <td><button id="uiCreate" type="button" onclick="Controller.createContract()">1. Create contract</button></td>
+            <td><span id="uiCreateTx"/></td>
+            <td/>
+          </tr>
+          <tr>
+            <td><button id="uiDeposit" type="button" onclick="Controller.depositFunds()">2. Deposit funds</button></td>
+            <td><span id="uiDepositTx"/></td>
+            <td/>
+          </tr>
+        </tbody>
+        <thead><tr><th colspan="2">Last message</th></tr></thead>
+        <tbody>
+          <tr>
+            <td id="uiMessage" colspan="2"/>
+          </tr>
+          <tr>
+            <td><button id="uiRestart" type="button" onclick="Controller.restart()">Restart example</button></td>
+            <td/>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/lessons/08-cip45/marleon.html b/lessons/08-cip45/marleon.html
@@ -0,0 +1,36 @@
+<!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="controller.js" type="application/javascript"> </script>
+    <title>Donate via Marleon</title>
+  </head>
+  <body id="uiBody" style="color:darkblue;background-color:aliceblue;font-size:smaller" onload="Controller.initialize()">
+    <h1>Donate via Marleon</h1>
+    <p>Marleon is a Marlowe contract for sending tokens to the holder of a Marlowe role token.</p>
+    <ol>
+      <li>Paste the CardanoConnect address <span id="uiMeerkat"></span> into the <code>ConnectionId</code> field on the <code>CardanoConnect</code> settings page of your CIP45-enabled wallet.</li>
+      <li>You will donate <input id="uiFundingAmount" type="number" min="2000000" value="2000000" onchange="Controller.makeContract()"/> testnet lovelace (1 ada = 1,000,000 lovelace) to the holder of the NFT with policy ID <span id="uiRecipientPolicy"></span> and token name <span id="uiRecipientName"></span>.</li>
+      <li><button id="uiCreate" type="button" onclick="Controller.createContract()">Create the contract</button> for making the donation via Marlowe.</li>
+      <li>Sign the creation transaction in your CIP45 wallet.</li>
+      <li>Wait for the creation transaction to be confirmed: <span id="uiContractId" style="font-family:monospace"></span></li>
+      <li><button id="uiDeposit" type="button" onclick="Controller.depositFunds()">Deposit the donation</button> into the Marlowe contract.
+        <br/>
+      </li>
+      <li>Sign the deposit transaction in your CIP45 wallet.</li>
+      <li>Wait for the deposit transaction to be confirmed: <span id="uiDepositTx" style="font-family:monospace"></span></li>
+      <li>Thank you for donating test ada!</li>
+    </ol>
+    <p><em id="uiMessage"/></p>
+    <ul style="display:none">
+      <li id="uiWallet"/>
+      <li id="uiRuntime"/>
+      <li id="uiAddress"/>
+      <li><input id="uiFundingPolicy" type="text" onchange="Controller.makeContract()"/></li>
+      <li><input id="uiFundingName" type="text" onchange="Controller.makeContract()"/></li>
+      <li><input id="uiDepositTime" type="datetime-local" onchange="Controller.makeContract()"/></li>
+      <li id="uiCreateTx"/>
+    </ul>
+  </body>
+</html>