Is there sample React code available to display all the Templates and Contracts (like in the Navigator version)
Thanks
Is there sample React code available to display all the Templates and Contracts (like in the Navigator version)
Thanks
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.
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:
node_modules
in your ui directorydaml2js
directorydaml build
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).
Got it to work after loading in a contract using the JSON-API
Thanks for shepherding me through this process.
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.