[footer] dynamic CTA button based on login status

frontend/src/app/components/about/about.component.html

@@ -34,7 +34,7 @@
   <h3 i18n="about.sponsors.enterprise.withRocket" class="mt-5">Support the Project</h3>
 
   <div class="d-flex justify-content-center" style="max-width: 90%; margin: 35px auto 75px auto; column-gap: 15px">
-    <a href="/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)">Become a Sponsor!</a>
+    <a href="/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)">Become a Sponsor!</a>
   </div>
 
   <div class="enterprise-sponsor" id="enterprise-sponsors">

frontend/src/app/shared/components/global-footer/global-footer.component.html

@@ -14,8 +14,12 @@
           <app-rate-unit-selector></app-rate-unit-selector>
         </div>
         <ng-template #temporaryHidden>
-          <a *ngIf="officialMempoolSpace" class="cta btn btn-purple sponsor" [routerLink]="['/signup' | relativeUrl]">Support the Project</a>
+          <div *ngIf="officialMempoolSpace" class="cta">
-          <p *ngIf="officialMempoolSpace && env.BASE_MODULE === 'mempool'" class="cta-secondary"><a [routerLink]="['/signin' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Sign In</a></p>
+            <div *ngIf="loggedIn" class="mb-1"><small>Logged in<span *ngIf="username"> as {{ username}}</span></small></div>
+            <a *ngIf="loggedIn" class="btn btn-purple sponsor" [routerLink]="['/login' | relativeUrl]">My account</a>
+            <a *ngIf="!loggedIn" class="btn btn-purple sponsor" [routerLink]="['/sponsor' | relativeUrl]">Support the Project</a>
+          </div>
+          <p *ngIf="!loggedIn && env.BASE_MODULE === 'mempool'" class="cta-secondary"><a [routerLink]="['/login' | relativeUrl]">Sign In</a></p>
         </ng-template>
         <p class="cta-secondary"><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
         <p *ngIf="officialMempoolSpace && env.LIGHTNING" class="cta-secondary"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]" i18n="footer.connect-to-our-nodes">Connect to our Nodes</a></p>

frontend/src/app/shared/components/global-footer/global-footer.component.ts

@@ -1,10 +1,13 @@
-import { ChangeDetectionStrategy, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
-import { Observable, merge, of, Subject } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, merge, of, Subject, Subscription } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
 import { Env, StateService } from '../../../services/state.service';
 import { IBackendInfo } from '../../../interfaces/websocket.interface';
 import { LanguageService } from '../../../services/language.service';
 import { NavigationService } from '../../../services/navigation.service';
+import { StorageService } from '../../../services/storage.service';
+import { WebsocketService } from '../../../services/websocket.service';
 
 @Component({
   selector: 'app-global-footer',
@@ -23,12 +26,19 @@ export class GlobalFooterComponent implements OnInit {
   network$: Observable<string>;
   networkPaths: { [network: string]: string };
   currentNetwork = '';
+  loggedIn = false;
+  username = null;
+  urlSubscription: Subscription;
 
   constructor(
     public stateService: StateService,
     private languageService: LanguageService,
     private navigationService: NavigationService,
     @Inject(LOCALE_ID) public locale: string,
+    private storageService: StorageService,
+    private route: ActivatedRoute,
+    private cd: ChangeDetectorRef,
+    private websocketService: WebsocketService
   ) {}
 
   ngOnInit(): void {
@@ -46,11 +56,23 @@ export class GlobalFooterComponent implements OnInit {
     this.network$.pipe(takeUntil(this.destroy$)).subscribe((network) => {
       this.currentNetwork = network;
     });
+
+    this.urlSubscription = this.route.url.subscribe((url) => {
+      this.loggedIn = JSON.parse(this.storageService.getValue('auth')) !== null;
+      const auth = JSON.parse(this.storageService.getValue('auth'));
+      if (auth?.user?.username) {
+        this.username = auth.user.username;
+      } else {
+        this.username = null;
+      }
+      this.cd.markForCheck();
+    })
   }
 
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();
+    this.urlSubscription.unsubscribe();
   }
 
   networkLink(network) {