DEV Community: Bibhu Padhy

solidity 101

Bibhu Padhy — Tue, 06 Sep 2022 13:23:06 +0000

Data types
Variables
Constants
Immutables

Data types

Mainly we have 4 types of data types in solidity language.

boolean
uint
int
address

boolean:

As we know we can specify a variable is true or false.

uint:

Its stands for unsigned integers. we can specify only a non negative integers.

uint can have a range of sizes like uint8, uint16 ... uint256
uint8 = 0 to 2**8-1. same goes with others.

int:

As we know we can specify an integer and negative numbers are allowed for int type. like uint here also we can specify a range of different sizes.

address:

address holds a 20 byte value which is the size of a ethereum address. additionally we can specify as address payable which can transfer or send fund to the address.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

contract ExampleDataType {

 bool public boo = true;
 uint public age = 27;
 int public num = -3;
 address public addr = 0x8CA434018A6d.....;

}

Variables

Variables are containers where we store some data. we have three type of variables.

state
local
global

state:

State variables are declared inside a function and not stored in the blockchain.

local:

Local variables are declared outside of the function and stored in the blockchain.

global:

Global variables provides information about the blockchain.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

contract ExampleVariable {

  string public name = "jon doe"; // state variable.

  function changeName() public {
     uint pin = 500082;  // local variable
     address sender = msg.sender; // global variable
  }

}

constants

constants are variables that can not be modified. Their value is hard coded and using constants we can save gas.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

contract ExampleConstants {

   address public constant ADDR = 0xee3445e...;
   uint256 public constant MAX_NFT = 1000

}

Immutable

immutable variables are like constants. Value of immutable variables can be set inside the constructor but can not be modified afterwords.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;

contract ExampleConstants {

   address public immutable MY_ADDRESS;

   constructor() {
       MY_ADDRESS = msg.sender;
   }

}

https://github.com/bibhu-padhy/learn-web3

How to deploy Angular project using firebase

Bibhu Padhy — Sun, 12 Sep 2021 11:50:24 +0000

If you are going through this article then I assume you have a javascript-based Awesome project with (Angular, React, etc..) which you want to deploy to any cloud providers like (AWS, Azure, or GCP).
In this article, you will get to know how to deploy your project on firebase, cause i don't know how to do it using the above ones :( .

Step-1:npm i -g firebase-tools .

step-2:run firebase login(if you haven't logged in yet then it will take you to the browser from where you can log in to your firebase account ).

step-3:run firebase init. you will be going to get some options like the below example from which you can select which one do you want to go with. in my case I have selected hosting.

step-4:After you select hosting you need to select the project from firebase. if you don't have it then you need to create a new one

step-5: Hosting setup, in this step you need to select in which folder you have your hosting assets.

After this, you will get an option to set up CI/CD pipeline with Github which I am not doing right now will do it in the later articles.

Step-6:run firebase deploy. After this firebase will deploy your application and will give you a site link like(abc.web.app) where you can interact with your project.

Hope it will be helpful to you.

js swap two numbers

Bibhu Padhy — Sun, 21 Feb 2021 06:09:25 +0000

Swap two numbers, a common problem-solving interview question.

Using a Variable

function swapTwoNumbers(a, b) {
let temp = a;
a = b;
b = temp
return [a, b];
}

console.log(swapTwoNumbers(10, 5))
// output a = 5, b = 10

Using arithmetic operators

function swapTwoNumbers(a, b) {
a = a + b; // 15
b = a - b; // 15 - 5 = 10
a = a - b; // 15 - 10 = 5
return [a, b];
}

console.log(swapTwoNumbers(10, 5))

// output a = 5, b = 10

Using Destructuring

function swapTwoNumbers(a, b) {
return [a, b] = [b, a]
}

console.log(swapTwoNumbers(10, 5))

Reactive forms in angular

Bibhu Padhy — Tue, 24 Nov 2020 11:43:06 +0000

This is going to be a short introduction to how we can handle form logic using angular reactive forms.

The requirement is like we are going to have 3 fields (Name, Email, Password) and on submitting it will send the user data through an API, mostly we will not concentrate on the send data part.

so in Angular, we have a class called FormControl according to Angular it Tracks the value and validation status of an individual form control. There are around 20-30 controls we have in this class you can check all of them by this link

step-1: Declare Reactive forms in the module file in the imports section.

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

Step-2:Take form controls classes which we want to use in the form.

  name: FormControl = new FormControl("", Validators.required);
  email: FormControl = new FormControl("", [
    Validators.required,
    Validators.email
  ]);
  password: FormControl = new FormControl("", Validators.required);

at the name field, as we don't want any value to be in the name field so we are not assigning any value to it and this field is required. The same goes for the others.

step-3: Declare these above form controls in the HTML.

    <form>
        <div class="form_group">
            <label for="name">Name</label>
            <input [formControl]="name" type="text" id="name">
    </div>
           <div class="form_group">
            <label for="email">email</label>
            <input [formControl]="email" type="email" id="email">
    </div>
            <div class="form_group">
                <label for="password">password</label>
                <input [formControl]="password" type="password" id="password">
    </div>
    </form>

[formControl]="name" indicates that we are binding a form control to the input element.

yes! Here we have a functional Angular reactive form

WAIT! but for most of the time, we are not going to have only 3 inputs. In requirement, we may have 6 or 8 to 10 fields if we take the example of an address field.

In this case, we have to take 8 to 10 from controls and need to maintain their validations, state, and a lot more. It's doable but it will become a bit clumsy.

In Angular, we have a class called FormGroup. According to the documentations FromGroup Tracks the value and validity state of a group of FormControl instances.

  form: FormGroup = new FormGroup({
    name: new FormControl("", Validators.required),
    email: new FormControl("", [Validators.required, Validators.email]),
    phone: new FormControl("", Validators.required)
  });

Inside the form group, we need to declare FormControls and their state and validation.

    <form [formGroup]="form">
        <div class="form_group">
            <label for="name">Name</label>
            <input formControlName="name" type="text" id="name">
    </div>
            <div class="form_group">
                <label for="email">email</label>
                <input formControlName="email" type="email" id="email">
    </div>
                <div class="form_group">
                    <label for="password">password</label>
                    <input formControlName="password" type="password" id="password">
    </div>
    </form>

we need to declare like this formControlName="password" in the input element.

Tab animation using Angular

Bibhu Padhy — Fri, 13 Nov 2020 06:07:16 +0000

I assume if you are going through this post then you have some idea about angular Framework basic HTML and CSS.

still, let's start from the beginning, open your preferred terminal.

npm install -g @angular/cli
ng new my-app
cd my-app
remove all the boilerplate content from app.component.html and at the app TS file I have taken an array of tabs.

<div class="main_container">
  <div class="tabs_container">
    <div
      class="tab"
      [class.active]="tab.tabId === selectedTabId"
      (click)="handelTabChange(tabRef.getBoundingClientRect());selectedTabId = tab.tabId"
      #tabRef
      *ngFor=" let tab of tabs"
    >
      {{tab.tabName}}
    </div>
  </div>
  <span #panelRef class="active_panel"></span>
</div>

here I am iterating the tabs array and showing the tabs name .active_panel class is the one which should show under the active tab.

#tabRef takes the reference for each tab.
#panelRef reference of the active panel
(click)="handelTabChange(tabRef.getBoundingClientRect())
handelTabChange function gives the width,height and position of the clicked tab.

That all we need for the HTML let's move to TS now.

  @ViewChild("panelRef", { read: ElementRef })
  panelRef: ElementRef; // panel reference 
  @ViewChildren("tabRef", { read: ElementRef }) 
  tabRef: QueryList<ElementRef>; // tabs reference Query List

  ngAfterViewInit() {
    const firstChild = this.tabRef.toArray()[0];
   // I want to show the first child of the tab as selected
   // so 0th index is going to be the first one
    const firstChildPosition = 
    firstChild.nativeElement.getBoundingClientRect();
   // here I am storing the position of the first child.
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "width",
      `${firstChildPosition.width}px`
    );
   // giving same width as tab label to the active panel
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "left",
      `${firstChildPosition.left}px`
    );
   // setting same left position as the first child to panel
  }

Now when the page will load it will look for the first tab and the active panel will take the same width and left position.

  handelTabChange(tabRef: DOMRect) {
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "left",
      `${tabRef.left}px`
    );
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "width",
      `${tabRef.width}px`
    );
  }

Kinda doing the same thing as explained above but now when the user clicks on the tabs.

.main_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tabs_container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.tab {
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
  text-align: center;
  margin: 5px;
  transform: scale(0.95);
}
.active {
  color: gray;
  transform: scale(1);
}
.active_panel {
  position: relative;
  height: 5px;
  background-color: cyan;
  transition: all 400ms ease-in-out;
  border-radius: 10px;
}

Required CSS for this one

live link for the demo https://angular-tab-animations-u6421j.stackblitz.io

How to show a tooltip in angular

Bibhu Padhy — Tue, 10 Nov 2020 07:00:33 +0000

I assume if you are going through this post then you have some idea about angular Framework.