GIB💎WORK Bounty - Pull Request Made To solana-cookbook

code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.en.ts

@@ -0,0 +1,53 @@
+import { AsyncPipe, NgIf } from "@angular/common";
+import { Component, inject } from "@angular/core";
+import { provideWalletAdapter, WalletStore } from "@heavy-duty/wallet-adapter";
+import {
+  PhantomWalletAdapter,
+  SolflareWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+
+@Component({
+  standalone: true,
+  selector: "hd-root",
+  template: `
+    <main>
+      <header>
+        <h1>Wallet Adapter Example (Raw)</h1>
+      </header>
+
+      <section>
+        <div>
+          <p>
+            Wallet:
+            <ng-container *ngIf="wallet$ | async as wallet; else noneWallet">
+              {{ wallet.adapter.name }}
+            </ng-container>
+            <ng-template #noneWallet> None </ng-template>
+          </p>
+
+          <p *ngIf="publicKey$ | async as publicKey">
+            Public Key: {{ publicKey.toBase58() }}
+          </p>
+
+          <p>
+            Status: {{ (connected$ | async) ? "connected" : "disconnected" }}
+          </p>
+        </div>
+      </section>
+    </main>
+  `,
+  imports: [NgIf, AsyncPipe],
+  providers: [
+    provideWalletAdapter({
+      autoConnect: false,
+      adapters: [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
+    }),
+  ],
+})
+export class AppComponent {
+  private readonly _walletStore = inject(WalletStore);
+
+  readonly connected$ = this._walletStore.connected$;
+  readonly publicKey$ = this._walletStore.publicKey$;
+  readonly wallet$ = this._walletStore.wallet$;
+}

code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.preview.en.html

@@ -0,0 +1,23 @@
+<main>
+  <header>
+    <h1>Wallet Adapter Example (Raw)</h1>
+  </header>
+
+  <section>
+    <div>
+      <p>
+        Wallet:
+        <ng-container *ngIf="wallet$ | async as wallet; else noneWallet">
+          {{ wallet.adapter.name }}
+        </ng-container>
+        <ng-template #noneWallet> None </ng-template>
+      </p>
+
+      <p *ngIf="publicKey$ | async as publicKey">
+        Public Key: {{ publicKey.toBase58() }}
+      </p>
+
+      <p>Status: {{ (connected$ | async) ? 'connected' : 'disconnected' }}</p>
+    </div>
+  </section>
+</main>

docs/references/keypairs-and-wallets.md

@@ -787,3 +787,38 @@ The [Svelte Wallet Adapter](https://github.com/svelte-on-solana/wallet-adapter)
   </SolanaCodeGroupItem>
 
 </SolanaCodeGroup>
+
+### Angular
+
+#### @heavy-duty/wallet-adapter
+
+Run the following command to install the required dependencies:
+
+```bash
+npm i --save @heavy-duty/wallet-adapter @solana/wallet-adapter-wallets
+```
+
+<SolanaCodeGroup>
+   <SolanaCodeGroupItem title="Angular" active>
+
+  <template v-slot:default>
+
+@[code](@/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.en.ts)
+
+  </template>
+
+  <template v-slot:preview>
+
+@[code](@/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.preview.en.html)
+
+  </template>
+
+  </SolanaCodeGroupItem>
+
+</SolanaCodeGroup>
+
+The [@heavy-duty/wallet-adapter](https://github.com/heavy-duty/platform/tree/master/libs/wallet-adapter) simplifies the implementation of the framework-agnostic "@solana/wallet-adapter" for Angular developers. It strives to offer a smoother developer experience by aligning with Angular conventions, addressing potential challenges, and ensuring a more natural integration process.
+
+Dependency injection - Provide and Inject Wallet services in your components
+
+Observable based - Utilize RxJS rather than callbacks for realtime streams