From 3103ef15e55f275cdd241cd779a6d23000f80752 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Fri, 24 Nov 2023 11:13:12 +0900
Subject: [PATCH 1/5] [about page] move CTA sponsors box into a sub component

---
 .../about/about-sponsors.component.html       | 16 +++++++
 .../about/about-sponsors.component.scss       | 44 ++++++++++++++++++
 .../about/about-sponsors.component.ts         |  9 ++++
 .../app/components/about/about.component.html | 17 +------
 .../app/components/about/about.component.scss | 45 -------------------
 .../src/app/components/about/about.module.ts  |  9 +++-
 6 files changed, 77 insertions(+), 63 deletions(-)
 create mode 100644 frontend/src/app/components/about/about-sponsors.component.html
 create mode 100644 frontend/src/app/components/about/about-sponsors.component.scss
 create mode 100644 frontend/src/app/components/about/about-sponsors.component.ts

diff --git a/frontend/src/app/components/about/about-sponsors.component.html b/frontend/src/app/components/about/about-sponsors.component.html
new file mode 100644
index 000000000..c24abc244
--- /dev/null
+++ b/frontend/src/app/components/about/about-sponsors.component.html
@@ -0,0 +1,16 @@
+<div id="become-sponsor-container">
+  <div class="become-sponsor community">
+    <p style="font-weight: 700; font-size: 18px;">If you're an individual...</p>
+    <a href="https://mempool.space/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Become a Community Sponsor</a>
+    <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Exclusive swag</p>
+    <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Your avatar on the About page</p>
+    <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> And more coming soon :)</p>
+  </div>
+  <div class="become-sponsor enterprise">
+    <p style="font-weight: 700; font-size: 18px;">If you're a business...</p>
+    <a href="https://mempool.space/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Become an Enterprise Sponsor</a>
+    <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Increased API limits</p>
+    <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Co-branded instance</p>
+    <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> 99% service-level agreement</p>
+  </div>
+</div>
diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss
new file mode 100644
index 000000000..c9fddde91
--- /dev/null
+++ b/frontend/src/app/components/about/about-sponsors.component.scss
@@ -0,0 +1,44 @@
+#become-sponsor-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin: 68px auto;
+}
+
+.become-sponsor {
+  background-color: #1d1f31;
+  border-radius: 16px;
+  padding: 12px 20px;
+  width: 400px;
+  padding: 40px 20px;
+}
+
+.become-sponsor a {
+  margin-top: 10px;
+}
+
+#become-sponsor-container .btn {
+  margin-bottom: 24px;
+}
+
+#become-sponsor-container .ng-fa-icon {
+  color: #2ecc71;
+  margin-right: 5px;
+}
+
+#become-sponsor-container .sponsor-feature {
+  text-align: left;
+  width: 250px;
+  margin: 12px auto;
+}
+
+@media (max-width: 992px) {
+
+  #become-sponsor-container {
+    flex-wrap: wrap;
+  }
+
+}
diff --git a/frontend/src/app/components/about/about-sponsors.component.ts b/frontend/src/app/components/about/about-sponsors.component.ts
new file mode 100644
index 000000000..98e7d4384
--- /dev/null
+++ b/frontend/src/app/components/about/about-sponsors.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-about-sponsors',
+  templateUrl: './about-sponsors.component.html',
+  styleUrls: ['./about-sponsors.component.scss'],
+})
+export class AboutSponsorsComponent {
+}
diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html
index a4cc51f90..8ef59f29a 100644
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -33,22 +33,7 @@
   </video>
 
   <ng-container *ngIf="officialMempoolSpace">
-    <div id="become-sponsor-container">
-      <div class="become-sponsor community">
-        <p style="font-weight: 700; font-size: 18px;">If you're an individual...</p>
-        <a href="https://mempool.space/sponsor" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.community-sponsor-button">Become a Community Sponsor</a>
-        <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Exclusive swag</p>
-        <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Your avatar on the About page</p>
-        <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> And more coming soon :)</p>
-      </div>
-      <div class="become-sponsor enterprise">
-        <p style="font-weight: 700; font-size: 18px;">If you're a business...</p>
-        <a href="https://mempool.space/enterprise" class="btn" style="background-color: rgba(152, 88, 255, 0.75); box-shadow: 0px 0px 50px 5px rgba(152, 88, 255, 0.75)" i18n="about.enterprise-sponsor-button">Become an Enterprise Sponsor</a>
-        <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Increased API limits</p>
-        <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> Co-branded instance</p>
-        <p class="sponsor-feature"><fa-icon [icon]="['fas', 'check']"></fa-icon> 99% service-level agreement</p>
-      </div>
-    </div>
+    <app-about-sponsors></app-about-sponsors>
   </ng-container>
 
   <div class="enterprise-sponsor" id="enterprise-sponsors">
diff --git a/frontend/src/app/components/about/about.component.scss b/frontend/src/app/components/about/about.component.scss
index 54dc38a27..f7aa0b965 100644
--- a/frontend/src/app/components/about/about.component.scss
+++ b/frontend/src/app/components/about/about.component.scss
@@ -246,48 +246,3 @@
   width: 64px;
   height: 64px;
 }
-
-#become-sponsor-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-  margin: 68px auto;
-}
-
-.become-sponsor {
-  background-color: #1d1f31;
-  border-radius: 16px;
-  padding: 12px 20px;
-  width: 400px;
-  padding: 40px 20px;
-}
-
-.become-sponsor a {
-  margin-top: 10px;
-}
-
-#become-sponsor-container .btn {
-  margin-bottom: 24px;
-}
-
-#become-sponsor-container .ng-fa-icon {
-  color: #2ecc71;
-  margin-right: 5px;
-}
-
-#become-sponsor-container .sponsor-feature {
-  text-align: left;
-  width: 250px;
-  margin: 12px auto;
-}
-
-@media (max-width: 992px) {
-
-  #become-sponsor-container {
-    flex-wrap: wrap;
-  }
-
-}
diff --git a/frontend/src/app/components/about/about.module.ts b/frontend/src/app/components/about/about.module.ts
index 1eb471f14..58a8ed9be 100644
--- a/frontend/src/app/components/about/about.module.ts
+++ b/frontend/src/app/components/about/about.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Routes, RouterModule } from '@angular/router';
 import { AboutComponent } from './about.component';
+import { AboutSponsorsComponent } from './about-sponsors.component';
 import { SharedModule } from '../../shared/shared.module';
 
 const routes: Routes = [
@@ -13,7 +14,7 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forChild(routes)
+    RouterModule.forChild(routes),
   ],
   exports: [
     RouterModule
@@ -25,10 +26,14 @@ export class AboutRoutingModule { }
   imports: [
     CommonModule,
     AboutRoutingModule,
-    SharedModule,
+    SharedModule
   ],
   declarations: [
     AboutComponent,
+    AboutSponsorsComponent,
+  ],
+  exports: [
+    AboutSponsorsComponent,
   ]
 })
 export class AboutModule { }

From f5bf883de9b3bb47aadf887a59cda987a0f0ea1d Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Tue, 28 Nov 2023 18:05:18 +0900
Subject: [PATCH 2/5] [about] fix auto scroll to chad/whale

---
 .../app/components/about/about.component.html |  2 +-
 .../app/components/about/about.component.ts   | 23 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/about/about.component.html b/frontend/src/app/components/about/about.component.html
index a4cc51f90..747430343 100644
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -197,7 +197,7 @@
   </div>
 
   <ng-container *ngIf="officialMempoolSpace">
-    <div *ngIf="profiles$ | async as profiles" id="community-sponsors">
+    <div *ngIf="profiles$ | async as profiles" id="community-sponsors-anchor">
       <div class="community-sponsor" style="margin-bottom: 68px" *ngIf="profiles.whales.length > 0">
         <h3 i18n="about.sponsors.withHeart">Whale Sponsors</h3>
         <div class="wrapper">
diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts
index 8aa0422e8..c6f6f3632 100644
--- a/frontend/src/app/components/about/about.component.ts
+++ b/frontend/src/app/components/about/about.component.ts
@@ -47,8 +47,13 @@ export class AboutComponent implements OnInit {
     this.websocketService.want(['blocks']);
 
     this.profiles$ = this.apiService.getAboutPageProfiles$().pipe(
-      tap(() => {
-        this.goToAnchor()
+      tap((profiles: any) => {
+        const scrollToSponsors = this.route.snapshot.fragment === 'community-sponsors';
+        if (scrollToSponsors && !profiles?.whales?.length && !profiles?.chads?.length) {
+          return;
+        } else {
+          this.goToAnchor(scrollToSponsors)
+        }
       }),
       share(),
     )
@@ -83,11 +88,19 @@ export class AboutComponent implements OnInit {
     this.goToAnchor();
   }
 
-  goToAnchor() {
+  goToAnchor(scrollToSponsor = false) {
+    if (!scrollToSponsor) {
+      return;
+    }
     setTimeout(() => {
       if (this.route.snapshot.fragment) {
-        if (this.document.getElementById(this.route.snapshot.fragment)) {
-          this.document.getElementById(this.route.snapshot.fragment).scrollIntoView({behavior: 'smooth'});
+        const el = scrollToSponsor ? this.document.getElementById('community-sponsors-anchor') : this.document.getElementById(this.route.snapshot.fragment);
+        if (el) {
+          if (scrollToSponsor) {
+            el.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'center'});
+          } else {
+            el.scrollIntoView({behavior: 'smooth'});
+          }
         }
       }
     }, 1);

From 3b30765070aa7ddf26e7ef5ba7877b85e493381c Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Wed, 29 Nov 2023 18:00:07 +0900
Subject: [PATCH 3/5] Revert unnecessary changes

---
 frontend/src/app/components/about/about.module.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/about/about.module.ts b/frontend/src/app/components/about/about.module.ts
index 58a8ed9be..7e8ed42d0 100644
--- a/frontend/src/app/components/about/about.module.ts
+++ b/frontend/src/app/components/about/about.module.ts
@@ -14,7 +14,7 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forChild(routes),
+    RouterModule.forChild(routes)
   ],
   exports: [
     RouterModule
@@ -26,7 +26,7 @@ export class AboutRoutingModule { }
   imports: [
     CommonModule,
     AboutRoutingModule,
-    SharedModule
+    SharedModule,
   ],
   declarations: [
     AboutComponent,

From 22bf0fe92883cf25b92917beb3c5116cd750aac6 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Wed, 29 Nov 2023 18:03:23 +0900
Subject: [PATCH 4/5] Re-apply fix from
 https://github.com/mempool/mempool/pull/4419/files#diff-9daf43654b4e0bb2c925b6396c6e3a7e1b117bd854fe9c46290f025bfe0a762eR285

---
 frontend/src/app/components/about/about-sponsors.component.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/app/components/about/about-sponsors.component.scss b/frontend/src/app/components/about/about-sponsors.component.scss
index c9fddde91..f3e675fd4 100644
--- a/frontend/src/app/components/about/about-sponsors.component.scss
+++ b/frontend/src/app/components/about/about-sponsors.component.scss
@@ -33,6 +33,7 @@
   text-align: left;
   width: 250px;
   margin: 12px auto;
+  white-space: nowrap;
 }
 
 @media (max-width: 992px) {

From c86768edc9a8317e80848d510ae0089c81ed4021 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Mon, 4 Dec 2023 16:59:29 +0900
Subject: [PATCH 5/5] [about] fix merge conflict #4425

---
 .../components/about/about-sponsors.component.ts    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/app/components/about/about-sponsors.component.ts b/frontend/src/app/components/about/about-sponsors.component.ts
index 98e7d4384..31863cd8f 100644
--- a/frontend/src/app/components/about/about-sponsors.component.ts
+++ b/frontend/src/app/components/about/about-sponsors.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { EnterpriseService } from '../../services/enterprise.service';
 
 @Component({
   selector: 'app-about-sponsors',
@@ -6,4 +7,16 @@ import { Component } from '@angular/core';
   styleUrls: ['./about-sponsors.component.scss'],
 })
 export class AboutSponsorsComponent {
+  constructor(private enterpriseService: EnterpriseService) {
+  }
+
+  onSponsorClick(e): boolean {
+    this.enterpriseService.goal(5);
+    return true;
+  }
+
+  onEnterpriseClick(e): boolean {
+    this.enterpriseService.goal(6);
+    return true;
+  }
 }