feat: implement wallet-adapter

demo/project.json

@@ -7,17 +7,22 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath.base}"],
       "options": {
-        "outputPath": "dist/demo",
+        "outputPath": {
+          "base": "dist/demo"
+        },
         "index": "demo/src/index.html",
-        "main": "demo/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "demo/tsconfig.app.json",
         "assets": ["demo/src/favicon.ico", "demo/src/assets"],
-        "styles": ["demo/src/styles.scss"],
-        "scripts": []
+        "styles": [
+          "@angular/material/prebuilt-themes/purple-green.css",
+          "demo/src/styles.scss"
+        ],
+        "scripts": [],
+        "browser": "demo/src/main.ts"
       },
       "configurations": {
         "production": {
@@ -36,9 +41,7 @@
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true

demo/src/app/account/account-data-access.component.ts

@@ -1,3 +1,13 @@
+import { from, of } from 'rxjs';
+import { inject, Injectable } from '@angular/core';
+import { clusterApiUrl, Connection, PublicKey } from '@solana/web3.js';
+import { HttpClient } from '@angular/common/http';
+import {
+  injectQuery,
+  injectQueryClient,
+} from '@tanstack/angular-query-experimental';
+import { TOKEN_2022_PROGRAM_ID, TOKEN_PROGRAM_ID } from '@solana/spl-token';
+
 export interface Account {
   publicKey: string;
   mint: string;
@@ -37,3 +47,48 @@ export const defaultTransactions: Transaction[] = [
     status: 'Success',
   },
 ];
+@Injectable({
+  providedIn: 'root',
+})
+export class AccountService {
+  private readonly connection = new Connection(clusterApiUrl('devnet'));
+  private http = inject(HttpClient);
+  private queryClient = injectQueryClient();
+
+  getBalance(publicKey: string | undefined | null) {
+    if (!publicKey) {
+      return of(null);
+    }
+    return from(this.connection.getBalance(new PublicKey(publicKey)));
+  }
+
+  getTokenAccounts(address: PublicKey) {
+    return injectQuery(() => ({
+      queryKey: [
+        'get-token-accounts',
+        { endpoint: this.connection.rpcEndpoint, address },
+      ],
+      queryFn: async () => {
+        const [tokenAccounts, token2022Accounts] = await Promise.all([
+          this.connection.getParsedTokenAccountsByOwner(address, {
+            programId: TOKEN_PROGRAM_ID,
+          }),
+          this.connection.getParsedTokenAccountsByOwner(address, {
+            programId: TOKEN_2022_PROGRAM_ID,
+          }),
+        ]);
+        return [...tokenAccounts.value, ...token2022Accounts.value];
+      },
+    }));
+  }
+
+  getSignatures(address: PublicKey) {
+    return injectQuery(() => ({
+      queryKey: [
+        'get-signatures',
+        { endpoint: this.connection.rpcEndpoint, address },
+      ],
+      queryFn: () => this.connection.getConfirmedSignaturesForAddress2(address),
+    }));
+  }
+}

demo/src/app/account/account-detail-feature.component.ts

@@ -3,15 +3,14 @@ import { Component } from '@angular/core';
 import { AppHeroComponent } from '../ui/ui-layout.component';
 import { RouterLink } from '@angular/router';
 import {
+  AccountBalanceComponent,
   AccountButtonsComponent,
   AccountTokensComponent,
   AccountTransactionsComponent,
 } from './account-ui.component';
 import {
-  Account,
-  Transaction,
-  defaultAccounts,
   defaultTransactions,
+  Transaction,
 } from './account-data-access.component';
 
 @Component({
@@ -24,27 +23,29 @@ import {
     AccountButtonsComponent,
     AccountTokensComponent,
     AccountTransactionsComponent,
+    AccountBalanceComponent,
   ],
   template: `
     <div>
       <dapp-app-hero>
-        <h1 class="text-5xl font-bold cursor-pointer">100 SOL</h1>
+        <dapp-account-balance [address]="address"></dapp-account-balance>
         <div class="my-4">
           <a
             routerLink="https://explorer.solana.com/address/CvQf1w1T828bRqfD6fA1rWdCR4ybCsEr6vwHdYPTMfSr?cluster=devnet"
-            >CvQf1w1T828bRqfD6fA1rWdCR4ybCsEr6vwHdYPTMfSr</a
           >
+            {{ address }}
+          </a>
         </div>
         <div class="my-4"><dapp-account-buttons /></div>
       </dapp-app-hero>
       <div class="space-y-8">
-        <dapp-account-tokens [accounts]="defaultAccounts" />
+        <dapp-account-tokens [address]="address" />
         <dapp-account-transactions [transactions]="defaultTransactions" />
       </div>
     </div>
   `,
 })
 export class AccountDetailFeatureComponent {
-  defaultAccounts: Account[] = defaultAccounts;
+  address = 'CvQf1w1T828bRqfD6fA1rWdCR4ybCsEr6vwHdYPTMfSr';
   defaultTransactions: Transaction[] = defaultTransactions;
 }

demo/src/app/account/account-list-feature.component.ts

@@ -1,14 +1,35 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, effect, inject } from '@angular/core';
+import { HdWalletMultiButtonComponent } from '@heavy-duty/wallet-adapter-material';
+import { WalletStore } from '@heavy-duty/wallet-adapter';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Router, RouterLink } from '@angular/router';
 
 @Component({
   selector: 'dapp-account-list-feature',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, HdWalletMultiButtonComponent, RouterLink],
   template: `
+    @if(!publicKey()){
     <div class=" py-64">
-      <div class="text-center">Wallet</div>
+      <div class="text-center">
+        <hd-wallet-multi-button></hd-wallet-multi-button>
+      </div>
     </div>
+    }
   `,
 })
-export class AccountListFeatureComponent {}
+export class AccountListFeatureComponent {
+  private readonly walletStore = inject(WalletStore);
+  private readonly router = inject(Router);
+
+  readonly publicKey = toSignal(this.walletStore.publicKey$);
+
+  constructor() {
+    effect(() => {
+      if (this.publicKey()) {
+        this.router.navigateByUrl(`/account/${this.publicKey()}`);
+      }
+    });
+  }
+}