mempool/frontend/src/app/components/sponsor/sponsor.component.html

<div class="container-xl">
   <div class="text-center">

      <h1 i18n="sponsor.title">Sponsor</h1>

      <br>

      <p *ngIf="!sponsorsEnabled; else sponsorForm">
         <ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/sponsor" target="_blank">https://mempool.space/sponsor</a> to sponsor</ng-container>
      </p>

      <ng-template #sponsorForm>

        <div [hidden]="donationStatus !== 1">

          <form [formGroup]="donationForm" (submit)="submitDonation()" class="form">

            <div class="flex-container">
              <div class="card" (click)="setSelection(0.001)" [class.shiny-border]="donationForm.get('selection').value === 0.001">
                <div class="card-header">Support the Project</div>
                <div class="card-body">
                  <h5 class="card-title">100K sats</h5>
                    <p class="card-text">Make a donation and support the project</p>
                </div>
              </div>

              <div class="card bigger" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
                <div class="card-header">Community Sponsor</div>
                <div class="card-body">
                  <h5 class="card-title">1M sats</h5>
                    <p class="card-text">Display your Twitter profile photo on our About page</p>
                </div>
              </div>

              <div class="card" (click)="setSelection(1)" [class.shiny-border]="donationForm.get('selection').value === 1">
                <div class="card-header">Enterprise Sponsor</div>
                <div class="card-body">
                  <h5 class="card-title">1 BTC</h5>
                  <p class="card-text">Backlink to your organization's website</p>
                </div>
              </div>
            </div>
            
            <br>

            <div style="max-width: 300px;" class="mx-auto">
              <div class="input-group">
                <div class="input-group-prepend" style="width: 42px;">
                    <span class="input-group-text">@</span>
                </div>
                <input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
              </div>
              <div class="input-group mt-4">
                <button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid" i18n="about.sponsor.request-invoice">Request invoice</button>
              </div>
            </div>
          </form>
        </div>

        <br><br>
      </ng-template>

      <div *ngIf="donationStatus === 2" class="text-center">

         <form [formGroup]="paymentForm">
            <div class="btn-group btn-group-toggle mb-2" ngbRadioGroup formControlName="method">
            <label ngbButtonLabel class="btn-primary">
               <input ngbButton type="radio" value="chain"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
            </label>
            <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.BTC_LightningLike">
               <input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
            </label>
            <label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.LBTC">
               <input ngbButton type="radio" value="lbtc"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></fa-icon>
            </label>
            </div>
         </form>

         <ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
            <div class="qr-wrapper mt-2 mb-2">
            <a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
               <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
            </a>
            </div>
            <br>
            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
            <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC">
            <div class="input-group-append">
               <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.BTC"></app-clipboard></button>
            </div>
            </div>
            <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
         </ng-template>

         <ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
            <div class="qr-wrapper mt-2 mb-2">
            <a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
               <app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
            </a>
            </div>
            <br>

            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
            <input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC_LightningLike">
            <div class="input-group-append">
               <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="donationObj.addresses.BTC_LightningLike"></app-clipboard></button>
            </div>
            </div>

            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
            <input type="text" class="form-control" readonly value="036f7fad4938521ddc6fc87ab7d6c6a091cef23cad87564a1f55adb806c017575e@103.99.170.198:9735">
            <div class="input-group-append">
               <button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="'036f7fad4938521ddc6fc87ab7d6c6a091cef23cad87564a1f55adb806c017575e@103.99.170.198:9735'"></app-clipboard></button>
            </div>
            </div>

            <p style="font-size: 10px;"></p>
            <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
         </ng-template>

         <ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
            <div class="qr-wrapper mt-2 mb-2">
            <a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
               <app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
            </a>
            </div>
            <br>
            <div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
            <input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC">
            <div class="input-group-append">
               <button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.LBTC"></app-clipboard></button>
            </div>
            </div>
            <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
         </ng-template>

         <p i18n="about.sponsor.waiting-for-transaction">Waiting for transaction... </p>
         <div class="spinner-border text-light"></div>
      </div>

      <div *ngIf="donationStatus === 3" class="text-center">
         <h2><span i18n="about.sponsor.donation-confirmed">Donation confirmed!</span><br><span i18n="about.sponsor.thank-you">Thank you!</span></h2>
         <br>

         Order ID:
         <br>
         {{ donationObj.id }}
      </div>

   </div>
</div>