@scalingparrots/dapp-angular-lib
v0.4.4
Published
An angular library for creating WEB3 applications
Downloads
218
Readme
Dapp Angular Lib
About
This library is supposed to help the integration of web3 "standard" services.
Features 🚀
🚀 Integrate it into your existing dApp with a few lines of code 🚀 Supports WalletConnect, Metamask and Binance Chain Wallet 🚀 Ready to use services to switch network and add new token to wallet 🚀 Ready to use services to read and write from smart contracts 🚀 Exportable chains list with providers info 🚀 Supports all major browsers 🚀 Fully customisable, style it as you want, support whatever tokens you want and much more 🚀 Fully typescript supported
Live demo
You can view a live demo here.
Installing
npm
$ npm install @scalingparrots/dapp-angular-lib
Warnings running on angular 10 +
You have to update your polyfills.ts
file adding this:
(window as any).global = window;
global.Buffer = global.Buffer || require("buffer").Buffer;
global.process = require("process");
Usage
It is very simple to get dapp angular lib up and running, below is a simple example in how to get it working.
your.module.ts
You need to import the DappAngularLibModule
into your module file, all you need to do is insert DappAngularLibModule
into your imports
array.
import { DappAngularLibModule } from "dapp-angular-lib";
import { AppComponent } from "./app.component";
import { YourComponent } from "./your.component";
@NgModule({
declarations: [YourComponent],
imports: [DappAngularLibModule],
providers: [],
bootstrap: [AppComponent],
})
export class YourModule {}
your.component.ts
Init network and check wallet already connected, check right network connect otherwise switch to the primary one.
import { Component, OnInit } from "@angular/core";
import {
ChainId,
NETWORK_INFO,
NetworkService,
WalletService,
} from "dapp-angular-lib";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class YourComponent implements OnInit {
primary_network = NETWORK_INFO[ChainId.BSC];
supported_network = [
NETWORK_INFO[ChainId.BSC],
NETWORK_INFO[ChainId.Avalanche],
NETWORK_INFO[ChainId.Palm],
NETWORK_INFO[ChainId.Polygon],
];
constructor(
private _walletService: WalletService,
private _networkService: NetworkService
) {}
/**
* On load
*/
ngOnInit(): void {
// init network necessary
this._walletService.initNetwork(this.primary_network);
// check account
this.getProvider()
// check network only if needed
.then((_) => this._networkService.checkNetwork(this.primary_network));
}
async getProvider(): Promise<void> {
await this._walletService.getWebProvider();
}
async disconnectWallet(): Promise<void> {
await this._walletService.disconnectWallet();
}
}
your.component.ts
Connect wallet.
The type
you need to pass in the connectWallet()
function has to be one of this: ["metamask", "coinbase", "binance", "connectWallet"]
import { Component } from "@angular/core";
import { WalletService } from "dapp-angular-lib";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class YourComponent {
constructor(private _walletService: WalletService) {}
connectWallet(type: string) {
this._walletService.connectWallet(type);
}
}
your.component.ts
Switch network.
The network
you need to pass in the switchNetwork()
function has to be an element of NETWORK_INFO
import { Component } from "@angular/core";
import { NetworkService } from "dapp-angular-lib";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class YourComponent {
constructor(private _networkService: NetworkService) {}
switchNetwork(network: any): void {
this._networkService.changeNetwork(network);
}
}
your.component.ts
Get balance wallet
import { Component } from "@angular/core";
import { WalletService } from "dapp-angular-lib";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class YourComponent {
constructor(private _walletService: WalletService) {}
getBalanceWallet(rpc: string, wallet: string) {
this._walletService.getWalletBalance(rpc, wallet);
}
}
your.component.ts
Contract calls
import { Component, OnInit } from "@angular/core";
import { ChainId, NETWORK_INFO, ContractService } from "dapp-angular-lib";
const abi = require("../../../core/abi/erc20.abi.json");
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class YourComponent implements OnInit {
constructor(
private _contractService: ContractService,
private _messageService: MessageService
) {}
ngOnInit(): void {
// example of read contract
this.readTotalBurn();
// example of write contract
this.approve("0x0000000000000000000000000000000000000000", 100);
}
async readTotalBurn() {
try {
const totalBurn = await this._contractService.readContract(
"0x0000000000000000000000000000000000000000",
NETWORK_INFO[ChainId.BSC].rpcUrls[0],
abi,
"totalBurn"
);
this._messageService.showMessage(
"Total burn: " + totalBurn.toLocaleString()
);
} catch (error: any) {
this._messageService.showMessage(
"Total burn " + error.message,
3000,
"error"
);
}
}
async approve(spender: string, amount: number) {
const decimals = 18;
const amountFormatted = BigNumber.from(amount).mul(
BigNumber.from(10).pow(decimals)
);
try {
const tx = await this._contractService.writeContract(
"0x0000000000000000000000000000000000000000",
abi,
"approve",
[spender, amountFormatted]
);
this._messageService.showMessage("Approve: " + tx);
} catch (error: any) {
this._messageService.showMessage(
"Approve " + error.message,
3000,
"error"
);
}
}
}