Angular Sol Wallets
Library for Web Wallets on Solana Blockchain
news on 0.0.19
- fix: launch wallets only when ask connection
- feat: setEnabledWallets: choose all wallets you want to use. if there is only one wallet enabled, popup will not be displayed.
This library was generated with Angular CLI version 12.1.0.
DESCRIPTION
Provide a service for using easily wallets on your web Angular project:
overview of all features:
connect() => Wallet Object
disconnect() => boolean
signMessage( message : string) => signature (as string)
signTransfer( address : string, sols : number) => Buffer
signAndSendTransfer( address : string, sols : number, signedByUser? : CallableFunction ) => signature (as string)
signTransaction( transaction : Transaction ) => signature (as string) => signature (as string)
setCluster( cluster : Cluster ) default = "devnet"
setCommitment( commitment : Commitment ) default = "finalized"
setEnabledWallets( wallets : AvalableWallets[] )
getPublicKey() => PublicKey
autoConnect : boolean
USAGE
1- Install the library
Open terminal in your Angular project root folder and run:
npm i --save angular-sol-wallets
If needed, install the peer dependencies
npm i --save @solana/web3.js
You may have to add the global variable in prolyfills.ts file
(window as any)['global'] = window;
And add the following allowedCommonJsDependencies in the angular.json build options file to disable warnings
"allowedCommonJsDependencies": [ "@solana/buffer-layout", "borsh", "bs58", "buffer", "jayson/lib/client/browser", "rpc-websockets", "secp256k1", "tweetnacl" ]
2- import the module
Example in the AppModule:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SolWalletsModule } from 'angular-sol-wallets';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SolWalletsModule
],
3- use SolWalletsService in a component
Example in the appComponent:
the functions in the component are called buy a click event in the html template
... import { SolWalletsService, Wallet } from "angular-sol-wallets" ; ... export class AppComponent { constructor( private httpClient : HttpClient, private solWalletS : SolWalletsService ){} connect(){ this.solWalletS.connect().then( wallet => { console.log("Wallet connected successfully with this address:", wallet.publicKey); }).catch(err => { console.log("Error connecting wallet", err ); }) } disconnect(){ this.solWalletS.disconnect(); } signMessage(){ this.solWalletS.signMessage("HELLO WORLD!").then( signature => { console.log('Message signed:', signature); }).catch( err => { console.log('err transaction', err ); }) } makeATransfer( myCompanyPublicKey : string, solAmmount : number){ this.solWalletS.signAndSendTransfer(myCompanyPublicKey, solAmmount ).then( signature => { console.log('Transfer successfully opered:', signature); }).catch( err => { console.log('Error transaction', err ); }); } sendTransferToServer( myCompanyPublicKey : string, solAmmount : number){ this.solWalletS.signTransfer(myCompanyPublicKey, solAmmount, signedByUserCallback => { //Do something like puting a loading popup during solana's transfer verification }).then( buffer => { this.httpClient.post('https://myserver.io/myAPI/makeTransfer', { transferRow : buffer }).subscribe( res => { console.log('Transfer successfully opered:', res.signature); }); }).catch( err => { console.log('Error transaction', err ); }); httpClient }
4- options / parameters
Autoconnect:
Set autoconnect as true on WalletsService make the last wallet used by the client automatically re-connected
(this avoid the user to have to choose again a wallet when making actions with service)
Example of usage in the App constructor :
constructor(
private solWalletS : SolWalletsService
){
this.solWalletS.autoConnect = true ;
this.solWalletS.wallet.subscribe( wallet => {
console.log('the last wallet used by the client is automatically connected without any actions.' );
})
}
SetEnabledWallets:
Choose the wallets you want to use.
By default all the wallets are enabled.
constructor(
private solWalletS : SolWalletsService
){
this.solWalletS.setEnabledWallets(["Phantom"]);
}
5- customize
You can customize the style of the popup, like so:
constructor( private solWalletS : SolWalletsService ){ this.solWalletS.setCustomClasses({ background : "myBcg", card : "myCard", wallets : "myWallets" });
the css:
.myCard{ font-family: Impact ; background-color: darkblue ; border : 1px solid black ; border-radius: 3px ; color : white ; padding : 5px ; min-width: 200px ; } .myWallets{ display : flex ; flex-flow: row nowrap ; background-color: lightblue ; border : 1px solid black ; border-radius: 3px ; margin : 3px ; padding : 3px ; align-items : center ; justify-content: center ; cursor : pointer ; transition : 0.5s ; } .myWallets:hover{ transform : scale(1.05,1.05); } .myBcg{ background-color: rgba(255,255,255,0.75) !important ; }
6- production
sol-wallet use devnet Cluster by default In production you can use the mainnet-beta like this exemple in the appComponent:
constructor( private solWalletS : SolWalletsService ){ solWalletS.setCluster("mainnet-beta");