Angular and Clarity UI components for Web3

Clarity UI components for Angular frontend framework to interact with web3 and smart contracts.

The project is still alpha quality, but you might still find it useful for copy-pasting of examples if nothing else.

Demo

View the demo app on Netlify

Features

Installation

Peer dependencies needed:

npm install --save @clr/core @clr/icons @clr/ui @clr/angular \
  @webcomponents/webcomponentsjs @walletconnect/web3-provider \
  eth-lib web3 bignumber.js web3modal

Then install the library:

npm install --save web3clr

If you have not added Clarity UI components to your project yet, edit angular.json and add the following in your build section.

  "styles": [
    "node_modules/@clr/icons/clr-icons.min.css",
    "node_modules/@clr/ui/clr-ui.min.css",
  ],

And also add icon loader:

  "scripts": [
    "node_modules/@clr/icons/clr-icons.min.js"
  ]

Publishing on NPM

Go to the monorepo root and:

brew install jq
( cd projects/web3clr && ./shrink-abi-json.sh )
ng build web3clr --prod
( cd dist/web3clr && npm publish )

Other

Tutorials for Angular and Clarity

• Getting started tutorial from 2019

• Getting started

• Truffle and Angular