Sample React code for displaying all the templates and Contracts for a DAML Model

Is there sample React code available to display all the Templates and Contracts (like in the Navigator version)

Thanks

2 Likes

Hey @bartcant. You might want to check out @georg’s work here: GitHub - digital-asset/daml-ui-template

Otherwise you can see React code for querying all contracts (for a particular template) in the Getting Started Guide: https://docs.daml.com/getting-started/app-architecture.html#the-ui

Let us know if either of those links help you out.

1 Like

Thanks for your reply

Yes I have been using the daml-ui-template code sample

Correct me if I am wrong, but my understanding is that Default.js brings up all the templates for the Contract

import React from “react”;

import Contracts from “…/…/components/Contracts/Contracts”;
import { useQuery } from “@daml/react”;
import { Network } from “@daml2js/Covid19-0.0.1”;
export default function Default() {
const assets = useQuery(Network);
return ();
}

Although I have several templates in my Daml, the list appears empty

I am using SDK 1.0.1

Here is my package.json

{
“name”: “Covid19-js”,
“version”: “0.0.1”,
“private”: true,
“dependencies”: {
“@daml/ledger”: “^1.0.1”,
“@daml/react”: “1.0.0”,
“@daml/types”: “1.0.0”,
“@daml2js/Covid19-0.0.1”: “file:…/daml2js/Covid19-0.0.1”,
“@material-ui/core”: “^4.3.0”,
“@material-ui/icons”: “^4.2.1”,
“@material-ui/styles”: “^4.3.0”,
“@typescript-eslint/parser”: “^2.6.0”,
“classnames”: “^2.2.6”,
“eslint”: “^6.6.0”,
“eslint-config-prettier”: “^6.10.0”,
“eslint-config-react-app”: “^5.2.0”,
“eslint-plugin-prettier”: “^3.1.2”,
“jsonwebtoken”: “^8.5.1”,
“react”: “^16.12.0”,
“react-dom”: “^16.12.0”,
“react-json-view”: “^1.19.1”,
“react-router-dom”: “^5.0.1”,
“react-scripts”: “3.4.0”,
“tinycolor2”: “^1.4.1”,
“uuid”: “^3.3.3”
},

“resolutions”: {
“//set-value”: “^2.0.1”,
“//mixin-deep”: “^1.3.2”
},

“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”,
“lint”: “eslint --ext .js,.jsx,.ts,.tsx --max-warnings 0 src/”
},
“eslintConfig”: {
“extends”: “react-app”
},

“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
},
“proxy”: “http://localhost:7575/”
}

Additional steps I have taken:

I deleted nodes-module
and re-built via yarn install

Here is some more outputs from Console that may give some indication:

Upon Browser refresh on the Default tab

-> all Templates are listed in the Dev console but nothing is  displayed on the page

Upon Browser refresh on the Reports Tab

-> All templates are listed in the Dev Console but additional error messgae Ledger.StreamQuery unknown message - {error: "Cannot resolve any templateId from request: Search…25d8c76635d8dc57575740dd771a5e839),Main,Network))"}

log.js:24 [HMR] Waiting for update signal from WDS...
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRegistration.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Quarantine.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:ImmunityProof.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Covid19Test.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestAppointment.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestRequest.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRole.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenInvitation.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicRole.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicInvitation.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Registration:CitizenRegistration.
hooks.js:161 mount useStreamQuery(afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network, ...) undefined
index.js:1 Ledger.streamQuery unknown message {error: "Cannot resolve any templateId from request: Search…25d8c76635d8dc57575740dd771a5e839),Main,Network))"}
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
(anonymous) @ index.js:492
index.js:1 Ledger.streamQuery unknown message {heartbeat: "ping"}
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6

The error Cannot resolve any templateId from request does indicate a mismatch between the DAML model loaded on the ledger and the one used to generate the JS code. Could be some lingering JS dependency cached somewhere.

Make sure you:

  • Stop the ledger
  • Delete node_modules in your ui directory
  • Delete the daml2js directory
  • Build your DAML using daml build
  • Rerun the JS codegen
  • Rebuild your UI code
  • Start the ledger
  • Start the UI

Also, there seems to be a typo in your package.json:

“@daml2js/Covid19-0.0.1”: “file:…/daml2js/Covid19-0.0.1”,

^ there should be only 2 dots in front of /daml2js/

Can you fix this, try the above, and report back? Sorry this is giving you such a headache, it takes a bit getting it running smoothly during continuous DAML development in my experience.

One more thing: once you have this working, if you change your DAML models, always recompile the DAML model (the codegen doesn’t do this automatically), then rerun the codegen and then you need to force a reinstall of your package with:

yarn install --force --frozen-lockfile

before restarting your UI host. This is not optimal and I’m looking for a way to simplify this cycle. I can share the Makefile I typically use tomorrow.

Here’s my Make target for a full rebuild:

build:
	rm -rf .daml
	rm -rf daml2js
	rm -rf ui/build
	daml build
	daml codegen js -o daml2js .daml/dist/*.dar
	cd ui && yarn install --force --frozen-lockfile
	cd ui && yarn build

Note that you shouldn’t have to delete these directories before building, but I tend to stay on the safe side and since none of the tools involved support incremental builds anyway it doesn’t matter much.

Thanks. Will give it a try today

This cleared all the previous error.
However still no templates in the list.

I noticed though the Default.js code is linking to the Contracts.JS which appears to retrieve the Contracts from the Ledger. So could it be that it indeed needs to be an empty list when starting from scratch ?

If that is the case, how can I pull the Templates (like in SandBox-Navigator)

Alternatively, maybe I could seed some contract with daml.script
(I still need to go through the documentation and this may trigger more questions)

Here is some additional output from additional console.logs which I temporarily embedded in Default.js
import React from “react”;

import Contracts from “…/…/components/Contracts/Contracts”;
import { useQuery } from “@daml/react”;
import { Main } from “@daml2js/Covid19-0.0.1”;
export default function Default() {

const assets = useQuery(Main.Network);
console.log(Main.Network);
const assetoutput = JSON.stringify(assets);
console.log(“assets”+ assetoutput);

return ();

}

Developer Console Log Output after refreshing the page

Navigated to http://localhost:3000/
DevTools failed to load SourceMap: Could not load content for chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
log.js:24 [HMR] Waiting for update signal from WDS…
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRegistration.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Quarantine.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:ImmunityProof.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Covid19Test.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestAppointment.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:TestRequest.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenRole.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:CitizenInvitation.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicRole.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:HealthClinicInvitation.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network.
index.js:18 Registered template afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Registration:CitizenRegistration.
Default.js:9 {templateId: “afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network”, InviteHealthClinic: {…}, InviteCitizen: {…}, keyDecoder: ƒ, decoder: ƒ, …}
Default.js:11 assets{“contracts”:,“loading”:false}
Default.js:9 {templateId: “afc1387b379eb0f86193b6920abaddd25d8c76635d8dc57575740dd771a5e839:Main:Network”, InviteHealthClinic: {…}, InviteCitizen: {…}, keyDecoder: ƒ, decoder: ƒ, …}
Default.js:11 assets{“contracts”:,“loading”:true}
hooks.js:19 Uncaught (in promise) {kind: “DecoderError”, input: undefined, at: “input”, message: “expected an array, got undefined”}
rejected @ hooks.js:19
Promise.then (async)
step @ hooks.js:20
(anonymous) @ hooks.js:21
push…/node_modules/@daml/react/hooks.js.__awaiter @ hooks.js:17
load @ hooks.js:97
(anonymous) @ hooks.js:110
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164

If you start with an empty ledger without any initialization script, you won’t see any contracts. The Contracts component doesn’t show templates, just contracts for a particular template.

You can use a DAML Script to create some contracts on the ledger at startup. Add the script to your daml.yaml with init-script so it runs when you daml start. Take a look at the daml-ui-template repo to see how that’s done (daml.yaml and startup script).

1 Like

@georg @rohanjr

Got it to work after loading in a contract using the JSON-API

Thanks for shepherding me through this process.

1 Like

That’s great to hear! Make sure to establish a repeatable development process when you continuously change the DAML models and the UI. The Makefile I posted in the other threads is what I use so I don’t have to remember all the steps each time.