diff --git a/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.en.ts b/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.en.ts new file mode 100644 index 000000000..4cdc6c492 --- /dev/null +++ b/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: ` +
+
+

Wallet Adapter Example (Raw)

+
+ +
+
+

+ Wallet: + + {{ wallet.adapter.name }} + + None +

+ +

+ Public Key: {{ publicKey.toBase58() }} +

+ +

+ Status: {{ (connected$ | async) ? "connected" : "disconnected" }} +

+
+
+
+ `, + 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$; +} diff --git a/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.preview.en.html b/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.preview.en.html new file mode 100644 index 000000000..512d7c36e --- /dev/null +++ b/code/keypairs-and-wallets/connect-to-wallet/connect-to-wallet-angular.preview.en.html @@ -0,0 +1,23 @@ +
+
+

Wallet Adapter Example (Raw)

+
+ +
+
+

+ Wallet: + + {{ wallet.adapter.name }} + + None +

+ +

+ Public Key: {{ publicKey.toBase58() }} +

+ +

Status: {{ (connected$ | async) ? 'connected' : 'disconnected' }}

+
+
+
diff --git a/docs/references/keypairs-and-wallets.md b/docs/references/keypairs-and-wallets.md index bf9fd9c4b..c27961d35 100644 --- a/docs/references/keypairs-and-wallets.md +++ b/docs/references/keypairs-and-wallets.md @@ -787,3 +787,38 @@ The [Svelte Wallet Adapter](https://github.com/svelte-on-solana/wallet-adapter) + +### 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 +``` + + + + + + + + + + + + +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