web3clr

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

Usage no npm install needed!

<script type="module">
  import web3clr from 'https://cdn.skypack.dev/web3clr';
</script>

README

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

You will find

  • Token swap demo - swap old ERC-20 to new ERC-20 on a token swap contract
  • Token faucet demo - get some test tokens to play with
  • Token staking demo - test ERC-777 token staking

Components we have include

  • Web3service - connect Web3 wallet to Angular app
  • WalletConnectionStatus - is wallet connected, last block, etc.
  • WalletSelector - pick and connect to any Web3modal supported wallet in Angular
  • TransactionHelper - walk user through the steps how to do a smart contract transaction on their wallet
  • EthereumProgresBar - estimate transaction wait time

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