Merge pull request #8 from ordpool-space/friendly-wl2

Friendly wl2

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -269,11 +269,12 @@ export default class TxView implements TransactionStripped {
     const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
     // Normal mode
     if (!this.scene?.highlightingEnabled) {
-      if (this.acc) {
-        return auditColors.accelerated;
-      } else {
-        return feeLevelColor;
-      }
+      // HACK - don't show accelleration
+      // if (this.acc) {
+      //   return auditColors.accelerated;
+      // } else {
+      //   return feeLevelColor;
+      // }
       return feeLevelColor;
     }
     // Block audit

frontend/src/app/components/master-page/master-page.component.html

@@ -77,9 +77,9 @@ <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n=
         <a class="nav-link" href="https://ordinalsbot.com?ref=ordpool" target="_blank"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" title="Inscribe Now! (with OrdinalsBot)"></fa-icon> Inscribe Now!</a>
       </li> -->
 
-      <li class="nav-item" routerLinkActive="active" id="btn-about">
+      <!-- <li class="nav-item" routerLinkActive="active" id="btn-about">
         <a class="nav-link" [routerLink]="['/about' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon> About</a>
-      </li>
+      </li> -->
 
       <!-- <li class="nav-item" routerLinkActive="active" id="btn-ordinalsbot">
         <a class="nav-link" href="https://ordinalsbot.com?ref=ordpool" target="_blank"><fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" title="Inscribe Now! (with OrdinalsBot)"></fa-icon> Inscribe Now!</a>
@@ -90,7 +90,7 @@ <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n=
           <img src="/resources/cat21-logo.svg" style="margin-top: -4px; margin-right: 6px" title="Mint a CAT-21 ordinal" height="30">Mint a CAT-21</a>
       </li>
 
-      <li class="nav-item" routerLinkActive="active" id="btn-cat21-whitelist-checker">
+      <li *ngIf="!enableCat21Mint" class="nav-item" routerLinkActive="active" id="btn-cat21-whitelist-checker">
         <a class="nav-link" [routerLink]="['/cat21-whitelist-checker' | relativeUrl]" (click)="collapse()">
           <img src="/resources/cat21-logo.svg" style="margin-top: -4px; margin-right: 6px" title="Mint a CAT-21 ordinal" height="30">CAT-21 WL Checker</a>
       </li>

frontend/src/app/components/ordinals/cat21-mint/cat21-mint.component.html

@@ -16,13 +16,6 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
         The minting process is completely free.
         So take your chance while fees are low and rescue as many cats as you can!
 
-        <!--
-        Every Bitcoin transaction with the <code style="color:#FF9900">nLockTime</code> field set to
-        <code style="color:#FF9900">21</code> is a CAT-21 mint transaction.
-        -->
-
-
-
       </p>
 
     </div>
@@ -34,15 +27,16 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
 
       <p *ngIf="!x.connectedWallet" class="mt-3 text-center">
         Please
-        <a href="javascript:void(0)" (click)="walletService.requestWalletConnect()">connect your wallet</a>
-        first.
+        <a href="javascript:void(0)" (click)="walletService.requestWalletConnect()">connect your wallet</a>.
+        We support Xverse, Leather and Unisat.
       </p>
 
       <ng-container *ngIf="x.connectedWallet">
+      <ng-container *ngIf="whitelistStatus$ | async as whitelistStatus">
 
         <form class="validated" [formGroup]="form" (ngSubmit)="mintCat21(x.connectedWallet)">
 
-          <div class="row mt-4">
+          <div class="row mt-4"  *ngIf="whitelistStatus.mintingAllowed">
 
             <!-- Content for the second column (appears first on mobile) -->
             <div class="col-md-6 order-md-2">
@@ -74,9 +68,9 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
             </div>
           </div>
 
-          <div class="p-2 mt-4" *ngIf="!selectedPaymentOutput && !utxoLoading">
+          <div class="p-2 mt-4" *ngIf="(recommendedFees$ | async) && !selectedPaymentOutput && !utxoLoading">
             We are sorry, but we could not find find enough funds in your payment address! 😿<br>
-            No UTXO has enough value to execute a transaction at the set fees.
+            No UTXO has enough value to execute a transaction at the current fees.
             We recommend sending at least
 
             <ul class="m-0">
@@ -98,7 +92,7 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
 
           <div *ngIf="!utxoLoading && !utxoError && (paymentOutputs$ | async)?.length">
 
-            <details>
+            <details  *ngIf="whitelistStatus.mintingAllowed">
               <summary>Show Expert Settings</summary>
 
               <p class="mt-2">
@@ -157,16 +151,34 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
           </div>
           <div class="text-center mt-4">
 
-            <button type="submit" [disabled]="mintCat21Success || form.invalid || !selectedPaymentOutput"
-              class="btn btn-primary mt-4 mb-4 text-white" *ngIf="!mintCat21Loading && !utxoLoading">
-              <img src="/resources/cat21-small-logo.svg" style="margin-top: -4px; margin-right: 6px"
-                title="Mint a CAT-21 ordinal" height="30"> Mint my cat
-            </button>
 
-            <button type="submit" disabled class="btn btn-primary mt-4 mb-4 text-white" *ngIf="mintCat21Loading">
-              <i class="spinner-border spinner-border-sm text-light"></i>
-              Minting your cat
-            </button>
+            <ng-container *ngIf="whitelistStatus.mintingAllowed">
+
+              <button type="submit" *ngIf="!utxoLoading && !mintCat21Success" [disabled]="form.invalid || !selectedPaymentOutput"
+                class="btn btn-primary mt-4 mb-4 text-white">
+
+                <ng-container  *ngIf="!mintCat21Loading">
+                  <img src="/resources/cat21-small-logo.svg" style="margin-top: -4px; margin-right: 6px"
+                    title="Mint a CAT-21 ordinal" height="30"> Mint my cat
+                </ng-container>
+
+                <ng-container  *ngIf="mintCat21Loading">
+                  <i class="spinner-border spinner-border-sm text-light"></i> Minting your cat
+                </ng-container>
+
+
+              </button>
+
+              <a href="javascript:location.reload()" *ngIf="mintCat21Success" class="btn btn-primary mt-4 mb-4 text-white">
+                <img src="/resources/cat21-small-logo.svg" style="margin-top: -4px; margin-right: 6px" title="Mint a CAT-21 ordinal" height="30"> Mint onther cat!
+              </a>
+
+            </ng-container>
+
+            <p *ngIf="!whitelistStatus.mintingAllowed">
+              <app-countdown-timer [targetDate]="whitelistStatus.mintingAllowedAt" />
+              You can rescue some lovely cats at {{ whitelistStatus.mintingAllowedAt | date:'long' }} ({{ whitelistStatus.level }}).
+            </p>
 
             <button type="submit" disabled class="btn btn-primary mt-4 mb-4 text-white" *ngIf="utxoLoading">
               <i class="spinner-border spinner-border-sm text-light"></i>
@@ -193,6 +205,10 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
           ❌&nbsp; {{ utxoError }}
         </div>
 
+        <div class="alert alert-danger" *ngIf="checkerError">
+          ❌&nbsp; {{ checkerError }}
+        </div>
+
 
         <ng-container *ngIf="x.connectedWallet.type === KnownOrdinalWalletType.unisat">
 
@@ -220,6 +236,7 @@ <h2 class="mt-2 mb-4">Mint a CAT-21 Ordinal</h2>
         </ng-container>
 
       </ng-container>
+      </ng-container>
 
     </ng-container>
   </div>

frontend/src/app/components/ordinals/cat21-mint/cat21-mint.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { hex } from '@scure/base';
-import { BehaviorSubject, catchError, combineLatest, map, of, shareReplay, switchMap, take, tap } from 'rxjs';
+import { BehaviorSubject, catchError, combineLatest, map, of, shareReplay, startWith, switchMap, take, tap } from 'rxjs';
 
 import { environment } from '../../../../environments/environment';
 import { Cat21ApiService } from '../../../services/ordinals/cat21-api.service';
@@ -24,6 +24,7 @@ import { SeoService } from '../../../services/seo.service';
 export class Cat21MintComponent implements OnInit {
 
   enableCat21Mint = environment.enableCat21Mint;
+  unleashCat21 = environment.unleashCat21;
 
   walletService = inject(WalletService);
   cat21Service = inject(Cat21Service);
@@ -40,6 +41,7 @@ export class Cat21MintComponent implements OnInit {
     simulation: SimulateTransactionResult;
     paymentOutput: TxnOutput;
   } | undefined = undefined;
+  utxosScanned = false;
 
   unisatShowWarningThreshold = 10 * 1000;
 
@@ -61,6 +63,7 @@ export class Cat21MintComponent implements OnInit {
     tap(() => {
       this.utxoLoading = true;
       this.utxoError = '';
+      this.cd.detectChanges();
     }),
     switchMap(wallet => this.cat21Service.getUtxos(wallet?.paymentAddress).pipe(
       // retry({ count: 3, delay: 500 }), // Ordpool has a global interceptor for this, otherwise add this line
@@ -77,20 +80,38 @@ export class Cat21MintComponent implements OnInit {
       tap(({ error }) => {
         this.utxoLoading = false;
         this.utxoError = error ? extractErrorMessage(error) : '';
+        this.cd.detectChanges();
       })
     ))
   );
 
-  whitelistStatus$ = this.connectedWallet$.pipe(
-    switchMap(wallet => this.cat21ApiService.getWhitelistStatus(wallet.ordinalsAddress).pipe(
-      catchError(error => of({
-        walletAddress: wallet.ordinalsAddress,
-        level: 'Public',
-        mintingAllowed: false,
-        mintingAllowedAt: '2024-04-10T18:00Z'
-      })),
-    ))
-  );
+  checkerLoading = false;
+  checkerError = '';
+
+  whitelistStatus$ = this.unleashCat21 ?
+  of({
+    mintingAllowed : true,
+    mintingAllowedAt: new Date().toISOString(),
+    level: 'Public'
+  }) : this.connectedWallet$.pipe(
+    tap(() => {
+      this.checkerLoading = true;
+      this.checkerError = '';
+      this.cd.detectChanges();
+    }),
+    switchMap(wallet => this.cat21ApiService.getWhitelistStatusPolled(wallet.ordinalsAddress).pipe(
+      tap(() => {
+        this.checkerLoading = false;
+        this.checkerError = '';
+        this.cd.detectChanges();
+      }),
+      catchError(error => {
+        this.checkerLoading = false;
+        this.checkerError = error ? extractErrorMessage(error) : '';
+        this.cd.detectChanges();
+        return of(undefined);
+      })
+    )));
 
   paymentOutputs$ = combineLatest([
     this.paymentOutputsForCurrentWallet$,
@@ -155,7 +176,10 @@ export class Cat21MintComponent implements OnInit {
         .slice(0, 10); // limit to max 10 elements
     }),
     // sets it to the largest available UTXO or to undefined
-    tap(simulateTransactions => this.selectedPaymentOutput = simulateTransactions[0]),
+    tap(simulateTransactions => {
+      this.selectedPaymentOutput = simulateTransactions[0];
+      this.cd.detectChanges();
+    }),
     shareReplay({
       bufferSize: 1,
       refCount: true
@@ -241,6 +265,13 @@ export class Cat21MintComponent implements OnInit {
         this.mintCat21Loading = false;
         this.mintCat21Success = result;
         this.cd.detectChanges();
+
+        // announce mint very late, and not synchronized with the main pipe
+        // if this breaks, then it breaks - YOLO
+        this.cat21ApiService.announceMintTransaction({
+          transactionId: result.txId,
+          ...result
+        }).subscribe();
       },
       error: (err: Error) => {
         this.mintCat21Loading = false;

frontend/src/app/components/ordinals/cat21-mint/countdown-timer-component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable, interval, map, startWith, takeWhile } from 'rxjs';
+
+@Component({
+  selector: 'app-countdown-timer',
+  templateUrl: './countdown-timer.component.html',
+  styleUrls: ['./countdown-timer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CountdownTimerComponent implements OnInit {
+
+  @Input()
+  targetDate: string | undefined;
+  countdown$: Observable<string>;
+
+  ngOnInit() {
+    this.countdown$ = interval(1000).pipe(
+      startWith(0),
+      map(() => {
+
+        if (!this.targetDate) {
+          return '';
+        }
+
+        const now = new Date().getTime();
+        const distance = new Date(this.targetDate).getTime() - now;
+
+        if (distance < 0) {
+          return 'GO';
+        }
+
+        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        return `${days}d ${hours}h ${minutes}m ${seconds}s`;
+      }),
+      takeWhile(countdown => countdown !== 'GO', true)
+    );
+  }
+}

frontend/src/app/components/ordinals/cat21-mint/countdown-timer.component.html

@@ -0,0 +1,13 @@
+<ng-container *ngIf="this.countdown$ | async as countdown">
+  <div class="countdown" *ngIf="countdown != 'GO'">
+
+    <h4>CCC (Colossal Cat Countdown)</h4>
+    <h1>{{ countdown }}</h1>
+
+
+    <img src="/resources/cat21-placholder.svg" width="200"><br>
+    <br>
+    <strong>Don't sleep on the cats!</strong><br>
+
+  </div>
+</ng-container>

frontend/src/app/components/ordinals/cat21-whitelist-checker/cat21-whitelist-checker.component.ts

@@ -30,16 +30,15 @@ export class Cat21WhitelistCheckerComponent implements OnInit {
   seoService = inject(SeoService);
   connectedWallet$ = this.walletService.connectedWallet$;
 
+  checkerLoading = false;
+  checkerError = '';
+
   whitelistStatus$ = this.connectedWallet$.pipe(
     tap(() => {
       this.checkerLoading = true;
       this.checkerError = '';
     }),
     switchMap(wallet => this.cat21ApiService.getWhitelistStatus(wallet.ordinalsAddress).pipe(
-      retry({
-        delay: 250,
-        count: 2
-      }),
       tap(() => {
         this.checkerLoading = false;
         this.checkerError = '';
@@ -51,9 +50,6 @@ export class Cat21WhitelistCheckerComponent implements OnInit {
       })
     )));
 
-  checkerLoading = false;
-  checkerError = '';
-
   KnownOrdinalWalletType = KnownOrdinalWalletType;
 
   ngOnInit() {

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

@@ -369,10 +369,10 @@ <h2 i18n="transaction.details">Details</h2>
                 <td i18n="transaction.version">Version</td>
                 <td [innerHTML]="'&lrm;' + (tx.version | number)"></td>
               </tr>
-              <tr>
+              <!-- <tr>
                 <td i18n="transaction.locktime">Locktime</td>
                 <td [innerHTML]="'&lrm;' + (tx.locktime | number)"></td>
-              </tr>
+              </tr> -->
               <tr *ngIf="cpfpInfo && cpfpInfo.adjustedVsize && cpfpInfo.adjustedVsize > (tx.weight / 4)">
                 <td i18n="transaction.sigops|Transaction Sigops">Sigops</td>
                 <td [innerHTML]="'&lrm;' + (cpfpInfo.sigops | number)"></td>

frontend/src/app/components/transaction/transaction.component.ts

@@ -125,8 +125,6 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy {
 
   digitalArtifactsPage = 1;
   getParsedDigitalArtifacts(): DigitalArtifact[] {
-    // just debugging: fake cat for every txn
-    // this.tx.locktime = 21;
     return DigitalArtifactsParserService.parse(this.tx);
   }