diff --git a/libs/wallet-adapter/data-access/README.md b/libs/wallet-adapter/data-access/README.md index 5051be49..c2814977 100644 --- a/libs/wallet-adapter/data-access/README.md +++ b/libs/wallet-adapter/data-access/README.md @@ -1,7 +1,240 @@ -# wallet-adapter-data-access +# Angular Solana Wallet Adapter -This library was generated with [Nx](https://nx.dev). +This is the solana wallet adapter library for Angular -## Running unit tests +## Pre-requisites +``` +"@angular/core": "13.2.2", +"@heavy-duty/rxjs": "0.1.0", +"rxjs": "7.5.2", +"@ngrx/component-store": "13.0.2", +"@solana/web3.js": "1.36.0", +"@solana/wallet-adapter-base": "0.9.5" +"@heavy-duty/wallet-adapter": "0.2.2" +"@solana/wallet-adapter-wallets": "0.15.5", +"@angular-builders/custom-webpack": "^13.1.0", +``` -Run `nx test wallet-adapter-data-access` to execute the unit tests. +## Installation + +### ng + +``` +$ ng add @heavy-duty/wallet-adapter +``` + +### npm + +``` +$ npm install --save @heavy-duty/wallet-adapter +``` + +## Development Configuration Setup + +### Add `webpack.config.js` to the root of project folder and add the following inside the file + +```js +module.exports = (config) => { + config.resolve.fallback = { + path: false, + fs: false, + os: false, + crypto: false, + process: false, + util: false, + assert: false, + stream: false, + }; + + return config; +}; + +``` + +### Update `angular.json` + +**Set `architect.build.builder` to `"@angular-builders/custom-webpack:browser"`** + +```json +"architect": { + "build": { + "builder": "@angular-builders/custom-webpack:browser", + ... + }, + ... + } +``` + +**In `architect.build.options`, add custom-webpack configuration** + +```json +"architect": { + ... + "build": { + ... + "options": { + ... + "customWebpackConfig": { + "path": "" + } + } + }, + ... + } +``` + +**Set `architect.serve.builder` to `"@angular-builders/custom-webpack:dev-server"`** + +```json +"architect": { + ... + "serve": { + "builder": "@angular-builders/custom-webpack:dev-server", + ... + }, + ... + } +``` + +### Update `src/polyfills.ts` + +```ts +import { Buffer } from 'buffer'; +import 'zone.js'; // Included with Angular CLI. + +(window as any).global = window; +(window as any).global.Buffer = Buffer; +(window as any).process = { + version: '', + node: false, + env: false, +}; +``` + + +## Usage + +### Add wallet adapter module in `app.module.ts` + + +```ts +@NgModule({ + declarations: [ + ... + ], + imports: [ + ... , + HdWalletAdapterModule.forRoot({ autoConnect: true }) + ], + providers: [ + ... + ], + bootstrap: [ + ... + ] +}) +``` + +### Add wallets in `app.component.ts` + +```ts +import { Component } from '@angular/core'; +import { ConnectionStore, WalletStore } from '@heavy-duty/wallet-adapter'; +import { + PhantomWalletAdapter, + SlopeWalletAdapter, + SolflareWalletAdapter, + SolongWalletAdapter, +} from '@solana/wallet-adapter-wallets'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = ''; + constructor( + private readonly _hdConnectionStore: ConnectionStore, + private readonly _hdWalletStore: WalletStore, + ) {} + + ngOnInit() { + this._hdConnectionStore.setEndpoint('https://api.devnet.solana.com'); + this._hdWalletStore.setAdapters([ + new PhantomWalletAdapter(), + new SlopeWalletAdapter(), + new SolflareWalletAdapter(), + new SolongWalletAdapter(), + ]); + } +} +``` + +### UI Example + +**In example.html** + +```html +
+ + +

+ Selected provider: {{ walletName$ | async }} + (READY) +

+
+``` + +**In example.ts** +```ts +import { Component, OnInit } from '@angular/core' +import { WalletName } from '@solana/wallet-adapter-base' +import { ConnectionStore, WalletStore } from '@heavy-duty/wallet-adapter' +import { map } from 'rxjs' + +@Component({ + selector: 'example', + templateUrl: './example.html', + styleUrls: ['./example.css'] +}) +export class ExampleComponent implements OnInit { + readonly wallets$ = this._walletStore.wallets$; + readonly wallet$ = this._walletStore.wallet$; + readonly walletName$ = this.wallet$.pipe( + map((wallet) => wallet?.adapter.name || null) + ); + + constructor( + private readonly _connectionStore: ConnectionStore, + private readonly _walletStore: WalletStore) { } + + ngOnInit(): void { } + + onSelectWallet(walletName: WalletName) { + this._walletStore.selectWallet(walletName); + } +} +``` + + +## More Examples + +Example repo from @danmt which uses wallet-adapter library with `nx`: + +- [Wallet Adapter Angular Example](https://github.com/danmt/wallet-adapter-angular-sample) + +## Releases + +[npmjs.com](https://www.npmjs.com/package/@heavy-duty/wallet-adapter)