This is an exemplary Cardano dApp web-frontend application implemented with the strongly-typed functional programming language PureScript and the Halogen UI framework.
It offers the ability to interact with the Cardano blockchain by sending ADA and native tokens to public-key addresses or Plutus contracts or redeem these from Plutus Contracts. The features are not implemented completely yet.
It utilizes the PureScript interface to Cardano wallets as specified by CIP 30 - Cardano dApp-Wallet Web Bridge.
A live demo can be found at https://bit.ly/purescript-cardano-dapp-webfrontend.
See also the Plutus Guessing Game Deployment repository in order to create a Cardano blockchain address and CBOR representation of the IOG Guessing Game. The address and CBOR representation of the game can be used for the use-cases "Send ADA to smart contract" and "Redeem ADA from smart contract" of this exemplary Cardano dApp web-frontend application.
Unless already done, install the Node package manager npm, see Downloading and installing Node.js and npm.
Additionally required are the PureScript compiler purs, the PureScript syntax tidy-upper purs-tidy, the PureScript package manager spago and the JavaScript bundler and minifier esbuild.
Install the tools using the Node package manager:
npm install -g purescript
npm install -g purs-tidy
npm install -g spago
npm install -g esbuildFinally install the the web-frontend application package itself and it's dependencies:
npm installJust run the serve script to format, build, bundle, package and serve the web-application from http://localhost:8080/ in one single step:
npm run serveThe particular steps to format, build, bundle, dist and finally serve the application files are defined by the scripts section of the file package.json. A script is executed by npm run <script>.
Overview of the npm run scripts:
| Script | Effect |
|---|---|
| format | Format the PureScript files in-place |
| build | Compile the PureScript files |
| bundle | Bundle the PureScript files into one file in the folder bundle |
| dist | Package the application files into the folder dist for distribution |
| serve | Serve the application from the distribution folder dist from http://localhost:8080/ |
| clean | Remove the generated script artifacts |
The scripts are executed incrementally in the order specified above. For instance, if you run dist to create the distribution files, the scripts format, build and bundle are executed beforehand automatically .
The application is structured corresponding to the blog post Three Layer Haskell Cake by Matt Parsons and is in particular inspired by the Real World Halogen application by Thomas Honeyman.
I.e. the module AppM serves as orchestrating "Layer 1". It wires up abstract API definitions to actual implementations. No business code here.
The API is constituted by the "Layer 2" type classes. It is divided into a "Domain API" and "Infrastructure API". The latter mocks out external dependencies i.e. to the Cardano CIP-30 wallet and the Cardano serialization library. The "Domain API" is an abstraction of the application use cases and their business logic.
"Layer 3" implements the type classes in forms of capabilities.
In order to serve the the "dist" files of the application by an http server like Apache httpd or nginx ensure the WebAssembly MIME type is configured correctly.
Exemplary .htaccess file for the Apache httpd server:
AddType application/wasm .wasmI'd like to thank Anton Kholomiov for his PureScript FFI bindings, both to the JavaScript Cardano CIP-30 wallet interface and to the Cardano Serialization Library. The libraries showed up just at the time when I was thinking about a first PureScript project.
Thanks to Dimitry Shibaev et al. for their React JS boilerplate project. It is is a good help about setting up Cardano transactions with the Cardano CIP-30 API and Cardano serialization library.
And in particular I'd like to thank Thomas Honeyman et al. for Halogen and also the "Real World Application". I learned a lot and still do.