angular-web3 v0.0.6-beta2

Thanks to @austingriffith for crafting the awesome Scaffold-eth project. This projects aims to reproduce with angular tooling the same experience as scaffold-sth produce for react devs

⛓️ Angular-Web3

Mision

Superpower the angular superdevs with the best and easy to use tools for get up and running instantly creating wonderfull dapps on Ethereum/polygon's blockchains

everything you need to build on Ethereum and Polygon! 🚀.

🧪 Quickly experiment changing contracts and seen result on the frontend.    

Main knowledge pillars:

• Hardhat
• Solidity
• Ether.js
• Of course Angular

🏄‍♂️ Quick Start

Prerequisites: To be in an Angular project

ng new angular-scaffold-eth  

cd in the directory

cd angular-scaffold-eth  

1) Add the angular-web3 schematics package to your project

ng add angular-web3

2) chose installation Options:

The package will prompt the options for configuration

• Project name in the case that your workspace has more than one angular project
• Do you wnat to install a Demo app or only infrastructure/services?

a) Demo Dapp to be installed:

• Hello World Contract
• Debug Contract
• NFT Contract

If you choose a Demo app, bear in mind that Angular Material will be installed for fast mock up

  b) Having chosen an empty app you will have the opportunity to adda services (more to come)

• ipfs

• subgraph

   

3) Updated tsconfig.json:

All relevant web3 dapp files are under de DappInjectorModule. For ease of coding we have added a path in the tsconfig file:

"paths":{"angular-web3":["src/app/dapp-injector/index.ts"]}

to be able to :

import { DappFeature } from 'angular-web3'

throurought the entire dapp  
 

4) Initialize your 👷‍ Hardhat chain:

For start up and running we recommend starting learning and playing with the local node.

 Hardhat file structure. The schematics package will scaffold the required hardhat config:

It will do the wiring moving the contracts and requiered artifacts as json files to the assets folder.
In the case that you want to deploy to a testnest or mainnet you can skip the next command.

npm run chain  
// spin blockhain node on localhost creating 10 accounts and privatekeys

Either deploying to localhost node or testnet/cloud the conract has to be compiled

npm run compile 
// compile the demo app contract in hardhat/contracts/demoContract.sol

When compiling, the contract artifacts will be created in the angular project assets folder.

🔏 You can edit your smart contract .sol in /hardhat/contracts and recompile with same command

Now is time to deploy our contract

npm run deploy
// deploy the smartcontract to the chosen network.

If you want to deploy to a testnet/mainnet the api and private key have to be configured within hardhat/hardhat.config.ts

💼 You can edit your deployment scripts in /hardhat/deploy
 

Developping in the hardhat network it may be useful to use watch hooks for compiling and deploying, if this is required you can avoid the commands 'compile' and 'deploy' and run in watch mode

npm run watch-contract
// launch compile and deploy in watch mode.

☠️☠️☠️ Don't do watch mode in mainnet
⚠️⚠️⚠️ Take care watching in the testnet, test ether is free but you are required to have some
 
Testing Solidity Contracts The schematics also include the hardhat test configuratio and infrastructure for solidity contract testing
 

npm run contracts:test
// run the contract tests

npm run contracts:coverage
// Contracts solidity test coverage analysis

Out of the box testing infrastructure ready to use 🧪🧪🧪🧪

5) Your demo App:

Our target is to upload every two weeks a new Demo App till we have around 10 dapps showcasing major use cases.

For the time being, we have the first two: Hello World On Chain and Debug Contrat.
The schematics package It will also scaffold a angular module with the use case chosen. In our case the the "hello world on chain module"

• Copy the selector of the exported featuremodule component into the chosen component .html
  

<hello-world-contract></hello-world-contract> 

• typings.d.ts file.
  We The contract interface .abi file and the contract address will be directly imported through json files, we require to have following lines of code in your typings.d.ts file:

  declare var module: NodeModule;
    interface NodeModule {
    id: string;
  }

declare module "*.json" { const value: any; export default value; }

declare module '@download/blockies'

In the case that no typings.d.ts file is available, the schematics package will create it.
  

  
# 🚀🚀🚀 And Voilà
<p align="center">
  <img src="docs/images/hello_dapp.png"  alt="Hello World app"  title="Hello World app">
</p>

 &nbsp;
# 🧰 Angular web3 dapp structure 

 We will deep dive in other articles, for now a brief introduction in order to understand the structured required to run our dapp on the blockchain. 

 Out of the box chain state will be handled through ngrx with two 

 A configuration object declared at the DappInjector Module level with followind params:
<p align="center">
  <img  width="300" src="docs/images/config_injector.png"  alt="Hello World app"  title="Hello World app">
</p>

 &nbsp; 


# 📚 Documentation

As per [Scaffold-eth](https://github.com/scaffold-eth/scaffold-eth), find a non exhaustive list of ressources to learn solidity, inlcuding the [Scaffold-eth](https://github.com/scaffold-eth/scaffold-eth) resources  
Documentation, tutorials, challenges, and many more resources, visit: [docs.scaffoldeth.io](https://docs.scaffoldeth.io)  
 &nbsp; 

For quickstarters we recommend learning the basics of **ethers** and **solidity**, ethers is the library used for interacting bewtween the app and the blockchain and solidity is the chosen languaje for dreating **smart contracts**  
&nbsp; 

# 🔭 Learning ethers.js ☁️
ethers,js and web3,js are the most popular libraries to interactact with the blockchain, we have chosen ether for our project, the main reason is the separation of concern of providers and signers. A very instructive video can be seen at [ethers.js: A Complete, Tiny and Simple Ethereum Library in JavaScript by Richard Moore](https://www.youtube.com/watch?v=r1ldSzcqaHo)  
&nbsp;  
Follow the [Getting Started guide](https://docs.ethers.io/v5/getting-started/) with special interest in understanding the main three concepts within the common terminology:
<p align="center">
  <img src="docs/images/ethers_terminlogy.png"  alt="Angular On Chain"  title="Terminology Ethers">
</p>

📕 Read the docs: https://docs.ethers.io/v5/    

Minimal code snippet
```javascript
  async onChainStuff(){

    // First we create a provider instance
    // If we want to create a specific clockchain provider, we must pass the url.
    this.provider = new ethers.providers.JsonRpcProvider();

    // Once the provider instance is created, we can request the signer (in localhost node is the first account)
    // In the Blockchain the signer is passed through the hardhat config or metamask
    this.signer = this.provider.getSigner()

    // Signer Address
    this.deployer_address = await this.signer.getAddress();

     // Contract Address (created while deploying)
    this.contract_address = DemoContractAddress.address

    
     // Contract instance passing the address, the abi(contract interface) and the signer
    this.myContract = new ethers.Contract(this.contract_address, DemoContract.abi, this.signer);
   
    // Deployer balance in rEth
    this.deployer_balance = ethers.utils.formatUnits(await this.signer.getBalance(),18)
 
  }

🔭 Learning Solidity

Minimal code snippet our our hello world dapp, get a first solidity flavour!

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract DemoContract {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Smart Contract with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}

📕 Read the docs: https://docs.soliditylang.org

📚 Go through each topic from solidity by example editing YourContract.sol in 🏗 scaffold-eth

• Primitive Data Types
• Mappings
• Structs
• Modifiers
• Events
• Inheritance
• Payable
• Fallback

📧 Learn the Solidity globals and units