some thoughts about ts-sdk and marlowe-runtime #144

albert-kevin · 2023-12-22T11:22:39Z

albert-kevin
Dec 22, 2023

I will just post my situation here.
I am developing in a jupyter notebook some code in order to have a broad understanding of marlowe and how to deploy such contract created in blockly for example.
This is an ubuntu using preview network and with python kernel.
I was able to write a swap contract using tokens with private keys in marlowe-cli.
I always wondered how to replace the signing of a transaction in the browser, hence I found out about marlowe-run and the API.
that I got working in python, I can create contract and sign it to the chain and also generate the next signing and close it off all with python requests module.
Suddenly comes some kind of functions library in called the typescript-sdk library.
ok I then wrote a flask app in my python notebook and I can load the EDM library and I can do this same contract using javascript.
now, I try to use a token instead of an address and it get's an error at the end.
so, I then had chat with many developers stating that I should not develop straight in javascript but use typescript,
and indeed this is allowing developers to see the data types through their java code and find errors before deployment.
now I am confused, I try to compile my javascript *.js file using tsc <typescriptapp.ts> but it always fails as if it can not find the tools.
my code I did npm init
then some npm install of all kinds of @marlowe.io/ modules but they all install version 0.0.3 instead of 0.0.2-beta as stated on the git repo. so this https://input-output-hk.github.io/marlowe-ts-sdk/index.html is no longer valid I suppose.
now I struggle loading in the correct modules but basically I wanted to try these steps:
runtimeLifecycle.wallet.getChangeAddress() <<- this checks for your active webwallet address
runtimeLifecycle.contracts.createContract() <<- this builds the cbor with contract code and signs it with wallet
runtimeLifecycle.contracts.getApplicableInputs() <<- this tests if you have an open contract
runtimeLifecycle.contracts.applyInputs() <<- and this one build cbor with next input and signs it with wallet
I was using <script src="https://cdn.jsdelivr.net/gh/input-output-hk/marlowe-ts-sdk/jsdelivr-npm-importmap.js"></script>
because this would load up all in the webbrowser and allow for debugging your code when deployed and I suppose this uses the latest version 0.0.3 here
now, I am stuck in setting up vscode with npm install and loading the modules correctly,
I now even fail to find runtimeLifecycle.contracts ...


app = Flask(__name__)

# Frontend HTML/JavaScript
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Sign Tx</title>
</head>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

<body>
    <form id="coffeeForm">
        <label>
            address to receive donation:
            <input type="text" id="acceptor" />
        </label>
        <button type="submit">create coffee donation contract</button>
    </form>
    <div id="status"></div>
    <hr>
    <button id="checkContractsBtn">Check All Active Contracts</button>
    <div id="contractsList"></div>

    <script src="https://cdn.jsdelivr.net/gh/input-output-hk/marlowe-ts-sdk/jsdelivr-npm-importmap.js"></script>
    
    <script type="module">
    import { mkRuntimeLifecycle } from "@marlowe.io/runtime-lifecycle/browser";
    import { mkRestClient } from "@marlowe.io/runtime-rest-client";
    import { datetoTimeout, lovelace } from "@marlowe.io/language-core-v1";

    const DAPP_TAG = "buy-kevin-a-coffee";
    const walletName = "eternl";
    //const runtimeURL = "https://marlowe-runtime-preprod-web.demo.scdev.aws.iohkdev.io";
    const runtimeURL = "https://marlowe-runtime-preview-web.demo.scdev.aws.iohkdev.io";
    const runtimeLifecycle = await mkRuntimeLifecycle({ walletName, runtimeURL });     
    const restClient = await mkRestClient(runtimeURL);
    console.log("Connected to runtime and initialized the REST client");
    
    const updateElementContent = (elementId, content) => {
        document.getElementById(elementId).textContent = content;
    };
        
    // Utility function to handle General errors
    const handleError = (errorMessage, elementId = 'status') => {
        console.error(errorMessage);
        updateElementContent(elementId, errorMessage);
    };

    const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
    const createContract = (donor, acceptor) => ({
        "when": [{
            "then": "close",
            "case": {
                party: { address: donor },
                deposits: BigInt(4200000), // Convert to bigint,
                of_token: lovelace,
                into_account: { address: acceptor }
            }
        }],
        timeout_continuation: "close",
        timeout: datetoTimeout(new Date(Date.now() + twentyFourHoursInMilliseconds))
    });

    const handleFormSubmission = async (event) => {
        event.preventDefault();
        const acceptorAddr = document.getElementById('acceptor').value;
        const donorAddr = await runtimeLifecycle.wallet.getChangeAddress();
        const contract = createContract(donorAddr, acceptorAddr);

        try {
            const contractResponse = await runtimeLifecycle.contracts.createContract({
                contract: contract,
                tags: { [DAPP_TAG]: "" },
            });
            updateElementContent('status', 'Contract Created Successfully');
        } catch (error) {
            handleError('Error Creating Contract', 'status');
        }
    };


    // Utility function to create a contract div element
    const createContractDiv = (contractInfo) => {
        const contractDiv = document.createElement('div');
        contractDiv.textContent = `Contract ID: ${contractInfo.contractId}`;

        if (contractInfo.openForDeposit) {
            const depositButton = document.createElement('button');
            depositButton.textContent = 'Deposit';
            depositButton.addEventListener('click', () => handleDeposit(contractInfo.contractId));
            contractDiv.appendChild(depositButton);
        }

        return contractDiv;
    };

    // Function to update contracts list in UI
    const updateContractsList = (activeContracts) => {
        const contractsListDiv = document.getElementById('contractsList');
        contractsListDiv.innerHTML = ''; // Clear existing content

        if (activeContracts.length > 0) {
            activeContracts.forEach(contractInfo => {
                contractsListDiv.appendChild(createContractDiv(contractInfo));
            });
        } else {
            contractsListDiv.textContent = 'No active contracts found.';
        }
    };

    // Function to check active contracts
    const checkActiveContracts = async () => {
        updateElementContent('contractsList', 'Fetching...');
        const activeContracts = await fetchActiveContracts();
        updateContractsList(activeContracts);
    };


    // Utility function to construct a deposit input
    const createDepositInput = (depositInfo) => ({
        input_from_party: depositInfo.into_account, // The party making the deposit
        into_account: depositInfo.party, // The account to deposit into
        of_token: depositInfo.of_token, // The token being deposited
        that_deposits: depositInfo.can_deposit,
    });

    // Function to handle deposit for a contract
    const handleDeposit = async (contractId) => {
        updateElementContent('status', 'Processing deposit...');

        try {
            const now = new Date(); // Current date and time as a Date object
            const inTenMinutes = new Date(now.getTime() + 10 * 60000); // Date object for 10 minutes from now

            const environment = { 
                timeInterval: { 
                    from: now.getTime(), // Unix timestamp in milliseconds
                    to: inTenMinutes.getTime() // Unix timestamp in milliseconds
                } 
            };

            const { applicable_inputs } = await runtimeLifecycle.contracts.getApplicableInputs(contractId, environment);
            const deposits = applicable_inputs.deposits;

            if (deposits.length > 0) {
                const depositInfo = deposits[0]; // Assuming handling the first deposit action
                const input = createDepositInput(depositInfo);

                const depositRequest = {
                    inputs: [input],
                    metadata: {},
                    tags: { [DAPP_TAG]: "" },
                    invalidHereafter: inTenMinutes.toISOString(), // ISO 8601 format
                };

                await runtimeLifecycle.contracts.applyInputs(contractId, depositRequest);
                updateElementContent('status', 'Deposit Successful');
            } else {
                updateElementContent('status', 'No deposit action required');
            }
        } catch (error) {
            handleError('Error processing deposit', 'status');
        }
    };


    // Utility function to fetch contracts from the REST client
    const fetchContractsFromRestClient = async (tags, addresses, roles = []) => {
        const contractsRequest = { tags, partyAddresses: [...addresses], partyRoles: roles };
        return await restClient.getContracts(contractsRequest);
    };

    // Function to check if a contract is open for deposit
    const isContractOpenForDeposit = async (contractId, environment) => {
        const { applicable_inputs } = await runtimeLifecycle.contracts.getApplicableInputs(contractId, environment);
        return applicable_inputs.deposits.length > 0;
    };

    // Function to fetch active contracts
    const fetchActiveContracts = async () => {
        try {
            const walletAddresses = await runtimeLifecycle.wallet.getUsedAddresses();
            const changeAddress = await runtimeLifecycle.wallet.getChangeAddress();
            walletAddresses.push(changeAddress);

            const specificRoles = []; // Define any specific roles you want to filter by
            const contractHeaders = await fetchContractsFromRestClient([DAPP_TAG], new Set(walletAddresses), specificRoles);

            const now = Date.now();
            const tenMinutesInMilliseconds = 10 * 60 * 1000;
            const inTenMinutes = now + tenMinutesInMilliseconds;
            const environment = { timeInterval: { from: now, to: inTenMinutes } };

            const contractInfos = [];
            for (const header of contractHeaders.headers) {
                const isOpenForDeposit = await isContractOpenForDeposit(header.contractId, environment);
                contractInfos.push({ contractId: header.contractId, openForDeposit: isOpenForDeposit });
            }

            console.log("Fetched contract information: ", contractInfos);
            return contractInfos;
        } catch (error) {
            handleError('Error fetching contracts');
            return [];
        }
    };

    document.getElementById('coffeeForm').addEventListener('submit', handleFormSubmission);
    document.getElementById('checkContractsBtn').addEventListener('click', checkActiveContracts);
</script>

</body>
</html>
"""

# BACKEND (Flask)
@app.route('/')
def index():
    return render_template_string(HTML_TEMPLATE)

# SERVER
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=False, port=8050)

now I almost got it working using a token but just at the end the last transaction gets signed but fail at the end.
so I have 2 wallets on the preview network with each a policyID with token Party1 and the other Party2.
Party1 wallet has this token:

addr_test1qr7rx8ueccc3tsg3j7j5mazg3nlhxq55k2f4npphgukfwekau470e9alwgvhygcrqhvevcdlezwpdy9k5jgwjh2n4dxqgnwshv
Fingerprint = asset19fqvrh7zaklz3vu2zsl5n8hg36sjlmygpp5g5p
Policy ID   = 10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695
Asset Name  = 506172747931  <-- hexadecimal representation of string 'Party1'
Party2 wallet has this token:

addr_test1qp6nun9x4gfa34ec6hxayehpy5n6kqkjwn6p4r4cwhwu7mdhcp7tah7899kfta5gwrw40vmpmfs6uekvzmr8nhpp2eqshkrcpc
Fingerprint = asset19d09gay62yz8c0jtmjd9lkjh82tdxhf9x6ee0r
Policy ID   = 10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695
Asset Name  = 506172747932  <-- hexadecimal representation of string 'Party2'

here is the code that was adapted for this


from flask import Flask, request, jsonify, render_template_string

app = Flask(__name__)

# Frontend HTML/JavaScript
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Sign Tx</title>
</head>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

<body>
    <form id="coffeeForm">
        <label>
            address to receive donation:
            <input type="text" id="acceptor" />
        </label>
        <button type="submit">create coffee donation contract</button>
    </form>
    <div id="status"></div>
    <hr>
    <button id="checkContractsBtn">Check All Active Contracts</button>
    <div id="contractsList"></div>

    <script src="https://cdn.jsdelivr.net/gh/input-output-hk/marlowe-ts-sdk/jsdelivr-npm-importmap.js"></script>
    
    <script type="module">
    import { mkRuntimeLifecycle } from "@marlowe.io/runtime-lifecycle/browser";
    import { mkRestClient } from "@marlowe.io/runtime-rest-client";
    import { datetoTimeout, lovelace } from "@marlowe.io/language-core-v1";

    const DAPP_TAG = "buy-kevin-a-coffee";
    const walletName = "eternl";
    //const runtimeURL = "https://marlowe-runtime-preprod-web.demo.scdev.aws.iohkdev.io";
    const runtimeURL = "https://marlowe-runtime-preview-web.demo.scdev.aws.iohkdev.io";
    const runtimeLifecycle = await mkRuntimeLifecycle({ walletName, runtimeURL });     
    const restClient = await mkRestClient(runtimeURL);
    console.log("Connected to runtime and initialized the REST client");
    
    const updateElementContent = (elementId, content) => {
        document.getElementById(elementId).textContent = content;
    };
        
    // Utility function to handle General errors
    const handleError = (errorMessage, elementId = 'status') => {
        console.error(errorMessage);
        updateElementContent(elementId, errorMessage);
    };

    const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
    //const twentyFourHoursInMilliseconds = 8 * 60 * 1000; // ~8 min
    const createContract = (donor, acceptor) => ({
        "when": [{
            "then": "close",
            "case": {
                party: { role_token: "Party1" },
                deposits: BigInt(4500000), // Convert to bigint,
                of_token: lovelace,
                into_account: { role_token: "Party2" }
            }
        }],
        timeout_continuation: "close",
        timeout: datetoTimeout(new Date(Date.now() + twentyFourHoursInMilliseconds))
    });

    const handleFormSubmission = async (event) => {
        event.preventDefault();
        const acceptorAddr = document.getElementById('acceptor').value;
        const donorAddr = await runtimeLifecycle.wallet.getChangeAddress();
        const contract = createContract(donorAddr, acceptorAddr);

        try {
            const contractResponse = await runtimeLifecycle.contracts.createContract({
                contract: contract,
                // version: "v1",
                // roles : { PolicyId: "10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695" },
                roles : "10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695",
                tags: { [DAPP_TAG]: "" },
                // metadata : {},
                // minUTxODeposit: BigInt(6000000),
            });
            updateElementContent('status', 'Contract Created Successfully');
        } catch (error) {
            handleError('Error Creating Contract', 'status');
        }
    };


    // Utility function to create a contract div element
    const createContractDiv = (contractInfo) => {
        const contractDiv = document.createElement('div');
        contractDiv.textContent = `Contract ID: ${contractInfo.contractId}`;

        if (contractInfo.openForDeposit) {
            const depositButton = document.createElement('button');
            depositButton.textContent = 'Deposit';
            depositButton.addEventListener('click', () => handleDeposit(contractInfo.contractId));
            contractDiv.appendChild(depositButton);
        }

        return contractDiv;
    };

    // Function to update contracts list in UI
    const updateContractsList = (activeContracts) => {
        const contractsListDiv = document.getElementById('contractsList');
        contractsListDiv.innerHTML = ''; // Clear existing content

        if (activeContracts.length > 0) {
            activeContracts.forEach(contractInfo => {
                contractsListDiv.appendChild(createContractDiv(contractInfo));
            });
        } else {
            contractsListDiv.textContent = 'No active contracts found.';
        }
    };

    // Function to check active contracts
    const checkActiveContracts = async () => {
        updateElementContent('contractsList', 'Fetching...');
        const activeContracts = await fetchActiveContracts();
        updateContractsList(activeContracts);
    };


    // Utility function to construct a deposit input
    const createDepositInput = (depositInfo) => ({
        input_from_party: depositInfo.into_account, // The party making the deposit
        into_account: depositInfo.party, // The account to deposit into
        of_token: depositInfo.of_token, // The token being deposited
        that_deposits: depositInfo.can_deposit,
    });

    // Function to handle deposit for a contract
    const handleDeposit = async (contractId) => {
        updateElementContent('status', 'Processing deposit...');

        try {
            const now = new Date(); // Current date and time as a Date object
            const inTenMinutes = new Date(now.getTime() + 10 * 60000); // Date object for 10 minutes from now

            const environment = { 
                timeInterval: { 
                    from: now.getTime(), // Unix timestamp in milliseconds
                    to: inTenMinutes.getTime() // Unix timestamp in milliseconds
                } 
            };

            const { applicable_inputs } = await runtimeLifecycle.contracts.getApplicableInputs(contractId, environment);
            const deposits = applicable_inputs.deposits;

            if (deposits.length > 0) {
                const depositInfo = deposits[0]; // Assuming handling the first deposit action
                const input = createDepositInput(depositInfo);

                const depositRequest = {
                    inputs: [input],
                    metadata: {},
                    tags: { [DAPP_TAG]: "" },
                    invalidHereafter: inTenMinutes.toISOString(), // ISO 8601 format
                };

                await runtimeLifecycle.contracts.applyInputs(contractId, depositRequest);
                updateElementContent('status', 'Deposit Successful');
            } else {
                updateElementContent('status', 'No deposit action required');
            }
        } catch (error) {
            handleError('Error processing deposit', 'status');
        }
    };


    // Utility function to fetch contracts from the REST client
    const fetchContractsFromRestClient = async (tags, addresses, roles = []) => {
        const contractsRequest = { tags, partyAddresses: [...addresses], partyRoles: [roles] };
        return await restClient.getContracts(contractsRequest);
    };

    // Function to check if a contract is open for deposit
    const isContractOpenForDeposit = async (contractId, environment) => {
        const { applicable_inputs } = await runtimeLifecycle.contracts.getApplicableInputs(contractId, environment);
        return applicable_inputs.deposits.length > 0;
    };

    // Function to fetch active contracts
    const fetchActiveContracts = async () => {
        try {
            const walletAddresses = await runtimeLifecycle.wallet.getUsedAddresses();
            const changeAddress = await runtimeLifecycle.wallet.getChangeAddress();
            walletAddresses.push(changeAddress);

            // const specificRoles = ["10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695.Party1"]; // Define any specific roles you want to filter by
            const specificRoles = { assetName: "Party1", policyId: "10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695" };
            const contractHeaders = await fetchContractsFromRestClient([DAPP_TAG], new Set(walletAddresses), specificRoles);

            const now = Date.now();
            const tenMinutesInMilliseconds = 10 * 60 * 1000;
            const inTenMinutes = now + tenMinutesInMilliseconds;
            const environment = { timeInterval: { from: now, to: inTenMinutes } };

            const contractInfos = [];
            for (const header of contractHeaders.headers) {
                const isOpenForDeposit = await isContractOpenForDeposit(header.contractId, environment);
                contractInfos.push({ contractId: header.contractId, openForDeposit: isOpenForDeposit });
            }

            console.log("Fetched contract information: ", contractInfos);
            return contractInfos;
        } catch (error) {
            handleError('Error fetching contracts');
            return [];
        }
    };

    document.getElementById('coffeeForm').addEventListener('submit', handleFormSubmission);
    document.getElementById('checkContractsBtn').addEventListener('click', checkActiveContracts);
</script>

</body>
</html>
"""

# BACKEND (Flask)
@app.route('/')
def index():
    return render_template_string(HTML_TEMPLATE)

# SERVER
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=False, port=8050)

and I also got the python requests code working to read all contracts of a specific wallet and
check if a specific contractid is active and open for another input you can use this API call example:
USING a party Role !

import warnings
warnings.filterwarnings("ignore")
import requests
import json
import pandas as pd

# Base URL for the API
base_url = "https://marlowe-runtime-preview-web.demo.scdev.aws.iohkdev.io"

def api_get(endpoint, headers=None, params=None):
    """
    Function to make a GET request to a specific endpoint.
    """
    url = base_url + endpoint
    response = requests.get(url, headers=headers, params=params)
    return response

# GET contracts
get_contracts = '/contracts'

headers = dict()
headers['Accept'] = 'application/json;charset=utf-8'

querystring = dict()
querystring['partyAddress'] = ['addr_test1qr7rx8ueccc3tsg3j7j5mazg3nlhxq55k2f4npphgukfwekau470e9alwgvhygcrqhvevcdlezwpdy9k5jgwjh2n4dxqgnwshv']
querystring['tag'] = ["buy-kevin-a-coffee"]
querystring['partyRole'] = ["10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695.Party1"]

# Query the API 
response = api_get(endpoint=get_contracts,
                   headers=headers,
                   params=querystring)

print(base_url + get_contracts)
print(querystring)
json.loads(response.text)

this outputs something like this:
https://marlowe-runtime-preview-web.demo.scdev.aws.iohkdev.io/contracts
{'partyAddress': ['addr_test1qr7rx8ueccc3tsg3j7j5mazg3nlhxq55k2f4npphgukfwekau470e9alwgvhygcrqhvevcdlezwpdy9k5jgwjh2n4dxqgnwshv'], 'tag': ['buy-kevin-a-coffee'], 'partyRole': ['10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695.Party1']}
{'results': [{'links': {'contract': 'contracts/e275d92cfebbe19aee00fb6d1be0aadb535357fc5f4c9673ae37b7390222c267%231',
'transactions': 'contracts/e275d92cfebbe19aee00fb6d1be0aadb535357fc5f4c9673ae37b7390222c267%231/transactions'},
'resource': {'block': {'blockHeaderHash': '4f27868df3a185c12d7c3ac3b7b018e930f164a4d2b161c9a4a0c9d3bea60dff',
'blockNo': 1567953,
'slotNo': 36241710},
'continuations': None,
'contractId': 'e275d92cfebbe19aee00fb6d1be0aadb535357fc5f4c9673ae37b7390222c267#1',
'metadata': {'1564': [2, [['buy-kevin-a-coffee', '']]]},
'roleTokenMintingPolicyId': '10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695',
'status': 'confirmed',
'tags': {'buy-kevin-a-coffee': ''},
'version': 'v1'}},
{'links': {'contract': 'contracts/f86bc0f11c0b8d0b249bffd77f92f95de0ed9d6749c8413eb994b3f70e3dc2ff%231',
'transactions': 'contracts/f86bc0f11c0b8d0b249bffd77f92f95de0ed9d6749c8413eb994b3f70e3dc2ff%231/transactions'},
'resource': {'block': {'blockHeaderHash': 'e4d64d45498865b03fc7f73655291cbf3176113564c06fc1e88628dba63fc550',
'blockNo': 1567529,
'slotNo': 36231179},
'continuations': None,
'contractId': 'f86bc0f11c0b8d0b249bffd77f92f95de0ed9d6749c8413eb994b3f70e3dc2ff#1',
'metadata': {'1564': [2, [['buy-kevin-a-coffee', '']]]},
'roleTokenMintingPolicyId': '',
'status': 'confirmed',
'tags': {'buy-kevin-a-coffee': ''},
'version': 'v1'}}]}

So, I believe that the value of using the typescript-sdk is a good thing because it can guide you in setting up all the needed datatype format, like in the contract you can define certain values with lovelace or party {"address": "<receiveaddress"}
but then for a token you have a Role object that means you have { "role_token": "Party1" }
and then it becomes rapidly complicated with choices and Input and Contract and so forth

I also received a lot of feedback from the team, but these are just short amounts of text and ideas and sometimes even a workshop but failed to do it - I would be happy to go through this in the future with anyone together live coding and sharing screen and such to make a better understanding. I am thus now stuck and give it some maturing time...
hope others can use this code and have more success and maybe this message triggers something great, cheers

Answered by hrajchert

Jan 3, 2024

Hi Kevin! So glad you were able to resolve the issues, I'm posting a response anyways in case somebody else runs into the same issue. Sorry about the delay, most of us had days off during the holidays.

I always wondered how to replace the signing of a transaction in the browser, hence I found out about marlowe-run and the API.
that I got working in python, I can create contract and sign it to the chain and also generate the next signing and close it off all with python requests module.
Suddenly comes some kind of functions library in called the typescript-sdk library.

The Marlowe Runtime is a backend service with a REST API, so you can use any language that supports HTTP requests to int…

View full answer

albert-kevin · 2023-12-28T17:32:36Z

albert-kevin
Dec 28, 2023
Author

actually this is al resolved... I figured out thanks to the demo code and some struggle - don't bother

0 replies

hrajchert · 2024-01-03T16:39:23Z

hrajchert
Jan 3, 2024
Maintainer

Hi Kevin! So glad you were able to resolve the issues, I'm posting a response anyways in case somebody else runs into the same issue. Sorry about the delay, most of us had days off during the holidays.

I always wondered how to replace the signing of a transaction in the browser, hence I found out about marlowe-run and the API.
that I got working in python, I can create contract and sign it to the chain and also generate the next signing and close it off all with python requests module.
Suddenly comes some kind of functions library in called the typescript-sdk library.

The Marlowe Runtime is a backend service with a REST API, so you can use any language that supports HTTP requests to interact with it. If you already had it working with Python (I assume in the backend) there might be no need to use the TypeScript/JavaScript SDK. The SDK is a suite of libraries/packages designed to ease the development inside the JS/TS ecosystem (web browsers, node.js, deno). One of the packages @marlowe.io/runtime-rest-client is a 1-1 mapping of the REST API that changes the domain of HTTP Headers, Verbs, Query params into JS/TS data structures. You also have @marlowe.io/runtime-lifecycle that provides functions that simplify common use cases.

so, I then had chat with many developers stating that I should not develop straight in javascript but use typescript,
and indeed this is allowing developers to see the data types through their java code and find errors before deployment.
now I am confused, I try to compile my javascript *.js file using tsc <typescriptapp.ts> but it always fails as if it can not find the tools.

The SDK is intended to work both in JS and TS, we do recommend using TS because if you have the tooling setup correctly it can help you catch errors without running the code. But we do acknowledge that is not trivial to setup a TS project with all the different development environments (ESM vs CJS, Node vs Deno vs Browser, Rollup vs Webpack vs Parcel, Flask, etc). So if you prefer to use JS instead is completely fine as well. We do try to provide a good DX for both languages, so anything we can do to improve the plain JS development experience is welcome.

A pattern that we use in some of the packages (we are working into getting into all packages) is to provide a guards module. Whenever we talk of types that guards you from entering an unexpected value you can distinguish between the Static types and the Runtime types. The static types are the TypeScript type definition (see example), and this helps you when you are developing inside a TS environment by raising an error at compile time. But even using TypeScript, if you read a JSON contract from a file, or get it from an HTTP response, you need to do some runtime validation because JSON.parse returns any or unknown depending on your TS strictness configuration and you want a Contract/Observation/Whatever. To know if an unknown value has the type that we expect we need a Runtime types, there are several JS/TS libraries to help with this, for example joi, zod, runtypes, etc. They are all very similar, and we use one called io-ts. The guards module is a collection of io-ts types that you can use to validate the runtime values (see runtime example related to the static example). We use the runtime types to validate external values that comes from the REST client, as a sanity check. But we don't use them from the user facing API as it would add some unwanted overhead. This means that if you are using the SDK with JS and you call runtimeLifecycle.contracts.createContract with a wrong contract or role token configuration, the SDK will manipulate or pass along the wrong values to the backend, yielding an unexpected error. I was thinking of adding a strict property when you create a runtime lifecycle to do this validation at the surface, maybe this can inprove the DX for JS users.

then some npm install of all kinds of @marlowe.io/ modules but they all install version 0.0.3 instead of 0.0.2-beta as stated on the git repo. so this https://input-output-hk.github.io/marlowe-ts-sdk/index.html is no longer valid I suppose.

This was my bad 😅, I should have marked the 0.3.0-rc with a proper tag so we don't override the latest tag. You can always install an exact version using npm, but in this case the first rc of 0.3.0 has no breaking change with 0.2.0, so the documentation is compatible. A new feature was added in that rc, but the 0.3.0 will come later on with more features and fixes.

I was using <script src="https://cdn.jsdelivr.net/gh/input-output-hk/marlowe-ts-sdk/jsdelivr-npm-importmap.js"></script>
because this would load up all in the webbrowser and allow for debugging your code when deployed and I suppose this uses the latest version 0.0.3 here

We might need to improve the documentation around JS modules, but you should not use both npm and importmaps. The npm flow is meant to be used in node.js or in a dev enviroment with a bundler such as rollup, webpack, parcel, etc. The importmaps flow is meant to be used in the browser directly, without a bundler and with plain JS.

Hope this helps, please let us know if you have any other question or feedback.

0 replies

albert-kevin · 2024-01-04T09:28:25Z

albert-kevin
Jan 4, 2024
Author

here we have the fixed code (it works now, ugly and complicated)
The key issue here was due to the Role token being sended to the wallet shorter "payment" address
when you open up your wallet you can see the token in your wallet but the TS-SDK fails because the unsigned transaction
build expect the cip-30 wallet to sign it using the longer pay+stake address.
to fix this you need to send a token to that address.
Notice that I had set the eternl wallet settings to Single Address Mode (SAM).
and I did not specify a "custom receive address" manually so... yeah
I expect this to cause confusion among users in real applications and perhaps checks and alerts should be added on your dApp to inform users


app = Flask(__name__)

# Frontend HTML/JavaScript
HTML_TEMPLATE = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Sign Tx</title>
</head>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

<body>
    <form id="coffeeForm">
        <label>
            address to receive donation:
            <input type="text" id="acceptor" />
        </label>
        <button type="submit">create coffee donation contract</button>
    </form>
    <div id="status"></div>
    <hr>
    <button id="checkContractsBtn">Check All Active Contracts</button>
    <div id="contractsList"></div>

    <script src="https://cdn.jsdelivr.net/gh/input-output-hk/marlowe-ts-sdk/jsdelivr-npm-importmap.js"></script>
    
    <script type="module">
    import { mkRuntimeLifecycle } from '@marlowe.io/runtime-lifecycle/browser';
    // import { SupportedWalletName } from '@marlowe.io/wallet/browser';
    // import { ApplyInputsRequest } from '@marlowe.io/runtime-lifecycle/api';
    import * as wallet from '@marlowe.io/wallet';
    // import { AddressBech32, unAddressBech32, ContractId, PayoutId } from '@marlowe.io/runtime-core';
    import { AddressBech32, unAddressBech32 } from '@marlowe.io/runtime-core';
    // import { Input, IDeposit, Party, ChoiceId, ChoiceName, IChoice } from '@marlowe.io/language-core-v1';
    import { datetoTimeout, lovelace } from "@marlowe.io/language-core-v1";
    import { mkRestClient } from "@marlowe.io/runtime-rest-client";
    

    const DAPP_TAG = "buy-kevin-a-coffee";
    // const supportedWallet = "eternl";
    // const RUNTIME_URL = "https://marlowe-runtime-preview-web.demo.scdev.aws.iohkdev.io";
    const walletName = "eternl";
    const runtimeURL = "https://marlowe-runtime-preview-web.demo.scdev.aws.iohkdev.io";
    const runtimeLifecycle = await mkRuntimeLifecycle({ walletName, runtimeURL }); 
    // connect to runtime lifecycle
    // const runtimeLifecycle = await mkRuntimeLifecycle({ supportedWallet, runtimeURL });
    // connect to marlowe API
    const restClient = await mkRestClient(runtimeURL);
    // connect to wallet API
    const bWallet = await wallet.mkBrowserWallet(walletName);
    console.log("Connected to runtime, the REST client and wallet API");
    
    
    const updateElementContent = (elementId, content) => {
        document.getElementById(elementId).textContent = content;
    };
        
    // Utility function to handle General errors
    const handleError = (errorMessage, elementId = 'status') => {
        console.error(errorMessage);
        updateElementContent(elementId, errorMessage);
    };

    const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
    const createContract = (donor, acceptor) => ({
        "when": [{
            "then": "close",
            "case": {
                party: donor,
                deposits: BigInt(4500000),
                of_token: lovelace,
                into_account: acceptor
            }
        }],
        timeout_continuation: "close",
        timeout: datetoTimeout(new Date(Date.now() + twentyFourHoursInMilliseconds))
    });

    const handleFormSubmission = async (event) => {
        event.preventDefault();
        const acceptorAddr = document.getElementById('acceptor').value;
        const donorAddr = await runtimeLifecycle.wallet.getChangeAddress();
        // const contract = createContract(donorAddr, acceptorAddr);
        // construct Role types for the acceptor and donor address
        const alice = {role_token: "Party1"};
        const bob = {role_token: "Party2"};
        const contract = createContract(alice, bob);


        // INIT + SIGN
        try {
            console.log("wait for contract creation to finish...");
            // const contractResponse = await runtimeLifecycle.contracts.createContract({
            const [contractId, txnId] = await runtimeLifecycle.contracts.createContract({
                contract: contract,
                // version: "v1",
                roles : "10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695",
                tags: { [DAPP_TAG]: "" },
                // metadata : {},
                // minUTxODeposit: BigInt(6000000),
            });
            const contractConfirm = await bWallet.waitConfirmation(txnId);  // this can take 20 seconds to a minute
            console.log(`Contract creation txn confirmed is: ${contractConfirm}\nTXID(input to Cardanoscan): ${txnId}`);
            updateElementContent('status', 'Contract Created Successfully');
        } catch (error) {
            handleError('Error Creating Contract', 'status');
        }
    };



    // Utility function to create a contract div element
    const createContractDiv = (contractInfo) => {
        const contractDiv = document.createElement('div');
        contractDiv.textContent = `Contract ID: ${contractInfo.contractId}`;

        if (contractInfo.openForDeposit) {
            const depositButton = document.createElement('button');
            depositButton.textContent = 'Deposit';
            depositButton.addEventListener('click', () => handleDeposit(contractInfo.contractId));
            contractDiv.appendChild(depositButton);
        }

        return contractDiv;
    };

    // Function to update contracts list in UI
    const updateContractsList = (activeContracts) => {
        const contractsListDiv = document.getElementById('contractsList');
        contractsListDiv.innerHTML = ''; // Clear existing content

        if (activeContracts.length > 0) {
            activeContracts.forEach(contractInfo => {
                contractsListDiv.appendChild(createContractDiv(contractInfo));
            });
        } else {
            contractsListDiv.textContent = 'No active contracts found.';
        }
    };

    // Function to check active contracts
    const checkActiveContracts = async () => {
        updateElementContent('contractsList', 'Fetching...');
        const activeContracts = await fetchActiveContracts();
        updateContractsList(activeContracts);
    };


    // Utility function to construct a deposit input
    const createDepositInput = (depositInfo) => ({
        input_from_party: depositInfo.into_account, // The party making the deposit
        into_account: depositInfo.party, // The account to deposit into
        of_token: depositInfo.of_token, // The token being deposited
        that_deposits: depositInfo.can_deposit,
    });

    // Function to handle deposit for a contract
    const handleDeposit = async (contractId) => {
        updateElementContent('status', 'Processing deposit...');

        try {
            const now = new Date(); // Current date and time as a Date object
            const inTenMinutes = new Date(now.getTime() + 10 * 60000); // Date object for 10 minutes from now

            const environment = { 
                timeInterval: { 
                    from: now.getTime(), // Unix timestamp in milliseconds
                    to: inTenMinutes.getTime() // Unix timestamp in milliseconds
                } 
            };

            const { applicable_inputs } = await runtimeLifecycle.contracts.getApplicableInputs(contractId, environment);
            const deposits = applicable_inputs.deposits;

            if (deposits.length > 0) {
                const depositInfo = deposits[0]; // Assuming handling the first deposit action
                const input = createDepositInput(depositInfo);

                const depositRequest = {
                    inputs: [input],
                    metadata: {},
                    tags: { [DAPP_TAG]: "" },
                    invalidHereafter: inTenMinutes.toISOString(), // ISO 8601 format
                };

                console.log("wait for contract INPUT to be processed...");
                const txId = await runtimeLifecycle.contracts.applyInputs(contractId, depositRequest);
                const depositConfirm = await bWallet.waitConfirmation(txId);
                console.log(`Txn confirmed: ${depositConfirm}\nHere is your receipt${txId}`);
                updateElementContent('status', 'Deposit Successful');
            } else {
                updateElementContent('status', 'No deposit action required');
            }
        } catch (error) {
            handleError('Error processing deposit', 'status');
        }
    };


    // Utility function to fetch contracts from the REST client
    const fetchContractsFromRestClient = async (tags, addresses, roles = []) => {
        const contractsRequest = { tags, partyAddresses: [...addresses], partyRoles: [roles] };
        return await restClient.getContracts(contractsRequest);
    };

    // Function to check if a contract is open for deposit
    const isContractOpenForDeposit = async (contractId, environment) => {
        const { applicable_inputs } = await runtimeLifecycle.contracts.getApplicableInputs(contractId, environment);
        return applicable_inputs.deposits.length > 0;
    };

    // Function to fetch active contracts
    const fetchActiveContracts = async () => {
        try {
            const walletAddresses = await runtimeLifecycle.wallet.getUsedAddresses();
            const changeAddress = await runtimeLifecycle.wallet.getChangeAddress();
            walletAddresses.push(changeAddress);

            // const specificRoles = ["10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695.Party1"]; // Define any specific roles you want to filter by
            const specificRoles = { assetName: "Party1", policyId: "10137ccc04dc177e9af17c7800f3fbe86855c63d22fad293b8d98695" };
            const contractHeaders = await fetchContractsFromRestClient([DAPP_TAG], new Set(walletAddresses), specificRoles);

            const now = Date.now();
            const tenMinutesInMilliseconds = 10 * 60 * 1000;
            const inTenMinutes = now + tenMinutesInMilliseconds;
            const environment = { timeInterval: { from: now, to: inTenMinutes } };

            const contractInfos = [];
            for (const header of contractHeaders.headers) {
                const isOpenForDeposit = await isContractOpenForDeposit(header.contractId, environment);
                contractInfos.push({ contractId: header.contractId, openForDeposit: isOpenForDeposit });
            }

            console.log("Fetched contract information: ", contractInfos);
            return contractInfos;
        } catch (error) {
            handleError('Error fetching contracts');
            return [];
        }
    };

    document.getElementById('coffeeForm').addEventListener('submit', handleFormSubmission);
    document.getElementById('checkContractsBtn').addEventListener('click', checkActiveContracts);
</script>

</body>
</html>
"""

# BACKEND (Flask)
@app.route('/')
def index():
    return render_template_string(HTML_TEMPLATE)

# SERVER
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=False, port=8050)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

some thoughts about ts-sdk and marlowe-runtime #144

{{title}}

Replies: 3 comments

{{title}}

{{title}}

{{title}}

Select a reply

some thoughts about ts-sdk and marlowe-runtime #144

albert-kevin Dec 22, 2023

Replies: 3 comments

albert-kevin Dec 28, 2023 Author

hrajchert Jan 3, 2024 Maintainer

albert-kevin Jan 4, 2024 Author

albert-kevin
Dec 22, 2023

albert-kevin
Dec 28, 2023
Author

hrajchert
Jan 3, 2024
Maintainer

albert-kevin
Jan 4, 2024
Author