Merge pull request #4 from proyecto26/feat/3-add-page-to-display-the-…

…balance-of-the-wallet

add page to display balance of the wallet

.gitignore

@@ -40,3 +40,6 @@ Thumbs.db
 
 .nx/cache
 .angular
+
+# Environment Variables
+.env

apps/webapp/.env.example

@@ -0,0 +1 @@
+NG_APP_SHYFT_API_KEY=fill-this-in

apps/webapp/project.json

@@ -7,7 +7,7 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:application",
+      "executor": "@ngx-env/builder:application",
       "outputs": [
         "{options.outputPath}"
       ],
@@ -16,7 +16,6 @@
         "index": "apps/webapp/src/index.html",
         "browser": "apps/webapp/src/main.ts",
         "polyfills": [
-          "zone.js",
           "apps/webapp/src/polyfills.ts"
         ],
         "tsConfig": "apps/webapp/tsconfig.app.json",
@@ -30,13 +29,17 @@
         ],
         "scripts": [],
         "server": "apps/webapp/src/main.server.ts",
-        "prerender": true,
-        "ssr": {
-          "entry": "apps/webapp/server.ts"
-        }
+        "prerender": false,
+        "ssr": false
       },
       "configurations": {
         "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/webapp/src/environments/environment.ts",
+              "with": "apps/webapp/src/environments/environment.prod.ts"
+            }
+          ],
           "budgets": [
             {
               "type": "initial",
@@ -60,7 +63,7 @@
       "defaultConfiguration": "production"
     },
     "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
+      "executor": "@ngx-env/builder:dev-server",
       "configurations": {
         "production": {
           "buildTarget": "webapp:build:production"
@@ -72,7 +75,7 @@
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "executor": "@ngx-env/builder:extract-i18n",
       "options": {
         "buildTarget": "webapp:build"
       }

apps/webapp/src/app/app.config.ts

@@ -1,3 +1,4 @@
+import { provideHttpClient } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideClientHydration } from '@angular/platform-browser';
@@ -7,5 +8,11 @@ import { provideWalletAdapter } from '@heavy-duty/wallet-adapter';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideClientHydration(), provideRouter(appRoutes), provideAnimationsAsync(), provideWalletAdapter()],
+  providers: [
+    provideClientHydration(),
+    provideRouter(appRoutes),
+    provideAnimationsAsync(),
+    provideWalletAdapter(),
+    provideHttpClient(),
+  ],
 };

apps/webapp/src/app/app.routes.ts

@@ -7,7 +7,12 @@ export const appRoutes: Route[] = [
       {
         path: 'home',
         loadComponent: () =>
-          import('./pages/home.page').then((m) => m.HomePage),
+          import('./pages/home/home.page').then((m) => m.HomePage),
+      },
+      {
+        path: 'account',
+        loadComponent: () =>
+          import('./pages/account/account.page').then((m) => m.AccountPage),
       },
       {
         path: '',

apps/webapp/src/app/containers/layout/layout-container.component.html

@@ -1,11 +1,11 @@
 <section class="min-h-screen flex flex-col">
-  <projectx-header [title]="title">
+  <projectx-header [title]="title" [links]="headerLinks">
     <div right>
       <hd-wallet-multi-button></hd-wallet-multi-button>
     </div>
   </projectx-header>
   <main class="flex flex-grow">
     <ng-content></ng-content>
   </main>
-  <projectx-footer [navigation]="navigationLinks" />
+  <projectx-footer [navigation]="footerLinks" />
 </section>

apps/webapp/src/app/containers/layout/layout-container.component.ts

@@ -22,7 +22,11 @@ import { HdWalletMultiButtonComponent } from '@heavy-duty/wallet-adapter-materia
 export class LayoutContainerComponent {
   @Input() title?: string = 'Jam Sessions';
 
-  navigationLinks = [
+  headerLinks = [
+    { label: 'Account', href: '/account' },
+  ];
+
+  footerLinks = [
     {
       label: 'ProjectX on Facebook',
       href: 'https://facebook.com/projectx',

apps/webapp/src/app/pages/account/account.page.html

@@ -0,0 +1,45 @@
+<webapp-layout-container>
+  <section class="mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:pb-24">
+    <div class="max-w-xl">
+      <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Account</h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Check the status of your account
+      </p>
+    </div>
+
+    <section aria-labelledby="recent-heading" class="mt-16">
+      <h2 id="recent-heading" class="sr-only">
+        Wallet Status
+      </h2>
+
+      <div class="space-y-20">
+        <div *ngIf="(account$ | async) as account">
+          <div
+            class="rounded-lg bg-gray-50 px-4 py-6 sm:flex sm:items-center sm:justify-between sm:space-x-6 sm:px-6 lg:space-x-8">
+            <dl
+              class="flex-auto space-y-6 divide-y divide-gray-200 text-sm text-gray-600 sm:grid sm:grid-cols-3 sm:gap-x-6 sm:space-y-0 sm:divide-y-0 lg:w-1/2 lg:flex-none lg:gap-x-8">
+              <div class="flex justify-between sm:block">
+                <dd class="sm:mt-1">
+                  <img [src]="account.info?.image" alt="account.info?.name || token"
+                    class="h-16 w-16 rounded object-cover object-center" />
+                </dd>
+              </div>
+              <div class="flex justify-between pt-6 sm:block sm:pt-0">
+                <dt class="font-medium text-gray-900">Balance</dt>
+                <dd class="sm:mt-1">
+                  {{ account.balance }}
+                </dd>
+              </div>
+              <div class="flex justify-between pt-6 font-medium text-gray-900 sm:block sm:pt-0">
+                <dt>Is Frozen</dt>
+                <dd class="sm:mt-1">
+                  {{ account.isFrozen ? 'Yes' : 'No' }}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </section>
+  </section>
+</webapp-layout-container>

apps/webapp/src/app/pages/account/account.page.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccountPage } from './account.page';
+
+describe('AccountPage', () => {
+  let component: AccountPage;
+  let fixture: ComponentFixture<AccountPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountPage],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AccountPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/webapp/src/app/pages/account/account.page.ts

@@ -0,0 +1,19 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LayoutContainerComponent } from '../../containers/layout/layout-container.component';
+import { WalletStore } from '../../store';
+
+@Component({
+  selector: 'webapp-account',
+  standalone: true,
+  imports: [CommonModule, LayoutContainerComponent],
+  templateUrl: './account.page.html',
+  styleUrl: './account.page.css',
+  providers: [WalletStore],
+})
+export class AccountPage {
+
+  readonly walletStore = inject(WalletStore);
+  readonly account$ = this.walletStore.account()
+}

apps/webapp/src/app/pages/home.page.ts → apps/webapp/src/app/pages/home/home.page.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { LayoutContainerComponent } from '../containers/layout/layout-container.component';
+import { LayoutContainerComponent } from '../../containers/layout/layout-container.component';
 
 @Component({
   selector: 'webapp-home',

apps/webapp/src/app/store/index.ts

@@ -0,0 +1 @@
+export * from './wallet';

apps/webapp/src/app/store/wallet/index.ts

@@ -0,0 +1,3 @@
+export * from './store'
+export * from './model'
+export * from './service'

apps/webapp/src/app/store/wallet/model.ts

@@ -0,0 +1,16 @@
+export type TokenBalanceResponse = {
+  success: boolean;
+  message: string;
+  result: {
+    address: string;
+    balance: number;
+    associated_account: string;
+    info: {
+      name: string;
+      symbol: string;
+      image: string;
+      decimals: number;
+    };
+    isFrozen: false;
+  };
+};

apps/webapp/src/app/store/wallet/service.ts

@@ -0,0 +1,33 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+import { map, of } from 'rxjs';
+
+import { environment } from '../../../environments/environment';
+import { TokenBalanceResponse } from './model';
+
+@Injectable({ providedIn: 'root' })
+export class ShyftApiService {
+  private readonly http = inject(HttpClient);
+
+  getAccount(publicKey?: string) {
+    if (!publicKey) {
+      return of(null);
+    }
+
+    const url = new URL(
+      '/sol/v1/wallet/token_balance',
+      environment.shyftApiUrl
+    );
+    url.searchParams.append('network', environment.walletNetwork);
+    url.searchParams.append('wallet', publicKey);
+    url.searchParams.append('token', environment.mintUSDC);
+
+    return this.http
+      .get<TokenBalanceResponse>(url.toString(), {
+        headers: {
+          'x-api-key': environment.shyftApiKey,
+        },
+      })
+      .pipe(map((res) => res.result));
+  }
+}

apps/webapp/src/app/store/wallet/store.ts

@@ -0,0 +1,32 @@
+import { computed, inject } from '@angular/core';
+import { signalStore, withComputed, withState } from '@ngrx/signals';
+import { WalletStore as WalletAdapterStore } from '@heavy-duty/wallet-adapter';
+
+import { ShyftApiService } from './service';
+import { switchMap } from 'rxjs';
+
+type WalletState = {
+  isLoading: boolean;
+  wallet: WalletAdapterStore;
+  error?: string;
+};
+
+export const WalletStore = signalStore(
+  withState(
+    () =>
+      <WalletState>{
+        wallet: inject(WalletAdapterStore),
+      }
+  ),
+  withComputed((store, walletService = inject(ShyftApiService)) => ({
+    account: computed(() => {
+      return store
+        .wallet()
+        .publicKey$.pipe(
+          switchMap((publicKey) =>
+            walletService.getAccount(publicKey?.toBase58())
+          )
+        );
+    }),
+  }))
+);

apps/webapp/src/env.d.ts

@@ -0,0 +1,51 @@
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+interface ImportMetaEnv {
+  /**
+   * Built-in environment variable.
+   * @see Docs https://github.com/chihab/dotenv-run/packages/angular#node_env.
+   */
+  readonly NODE_ENV: string;
+  // Add your environment variables below
+  readonly NG_APP_SHYFT_API_KEY: string;
+  [key: string]: unknown;
+}
+
+/*
+ * Remove all the deprecated code below if you're using import.meta.env (recommended)
+ */
+
+/****************************** DEPREACTED **************************/
+/**
+ * @deprecated process.env usage
+ * prefer using import.meta.env
+ * */
+// declare var process: {
+//   env: {
+//     NODE_ENV: string;
+//     [key: string]: any;
+//   };
+// };
+
+// If your project references @types/node directly (in you) or indirectly (as in RxJS < 7.6.0),
+// you might need to use the following declaration merging.
+// declare namespace NodeJS {
+//   export interface ProcessEnv {
+//     readonly NODE_ENV: string;
+//     // Add your environment variables below
+//   }
+// }
+
+// If you're using Angular Universal and process.env notation, you'll need to add the following to your tsconfig.server.json:
+/* In your tsconfig.server.json */
+// {
+//   "extends": "./tsconfig.app.json",
+//   ...
+//   "exclude": [
+//     "src/env.d.ts"
+//   ]
+// }
+
+/*********************************************************************/

apps/webapp/src/environments/environment.prod.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  production: import.meta.env.NODE_ENV === 'production',
+  shyftApiKey: import.meta.env.NG_APP_SHYFT_API_KEY,
+  shyftApiUrl: 'https://api.shyft.to',
+  walletNetwork: 'mainnet-beta',
+  mintUSDC: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v'
+};

apps/webapp/src/environments/environment.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  production: false,
+  shyftApiKey: import.meta.env.NG_APP_SHYFT_API_KEY,
+  shyftApiUrl: 'https://api.shyft.to',
+  walletNetwork: 'devnet',
+  mintUSDC: '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU'
+};