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

<div class="container-xl">
  <div class="text-center">
    <br />
    <img src="./resources/mempool-tube.png" width="63" height="63" />
    <br /><br />

    <h2>Contributors</h2>

    <p>Development <a href="https://twitter.com/softsimon_">@softsimon_</a>
    <br />Operations <a href="https://twitter.com/wiz">@wiz</a>
    <br />Logo & theme design <a href="https://instagram.com/markjborg">@markjborg</a>

    <br><br>

    <ng-template [ngIf]="sponsorsEnabled">

      <h2>❤️ Sponsors</h2>

      <div *ngFor="let sponsor of sponsors$ | async; let i = index" (click)="openTwitterProfile(sponsor.handle)" class="profile_photo d-inline-block" [class.ml-3]="i > 0" [ngStyle]="{'background-image': 'url(' + sponsor.imageUrl + ')'}" [title]="sponsor.handle"></div>
      <br><br>
      
      <button type="button" class="btn btn-primary" (click)="donationStatus = 2" [hidden]="donationStatus !== 1">Become a sponsor</button>

      <div style="max-width: 300px;" class="mx-auto" [hidden]="donationStatus !== 2">
        <form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
          <div class="input-group mb-2">
            <div class="input-group-prepend" style="width: 42px;">
              <span class="input-group-text">₿</span>
            </div>
            <input formControlName="amount" class="form-control" type="number" min="0.001" step="1E-03">
          </div>
          <div class="input-group mb-4" *ngIf="donationForm.get('amount').value >= 0.01; else lowAmount">
            <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">
            <button class="btn btn-primary mx-auto" type="submit">Request invoice</button>
          </div>
        </form>
      </div>

      <ng-template #lowAmount>
        <div class="input-group mb-4 text-small">
          If you donate 0.01 BTC or more, your profile photo will be added to the list of sponsors above :)
        </div>
      </ng-template>

      <div *ngIf="donationStatus === 3" class="text-center">
        <div class="qr-wrapper mt-2 mb-2">
          <app-qrcode [data]="donationObj.address + '?amount=' + donationObj.amount"></app-qrcode>
        </div>
        <br>
        <p style="font-size: 10px;">{{ donationObj.address }}</p>
        <p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>

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

      <div *ngIf="donationStatus === 4" class="text-center">
        <h2>Donation confirmed!<br>Thank you!</h2>
        <p>If you specified a Twitter handle, the profile photo should now be visible on this page when you reload.</p>
      </div>

      <br><br>

    </ng-template>

    <h2>Open source</h2>

    <a target="_blank" class="b2812e30 f2874b88 fw6 mb3 mt2 truncate black-80 f4 link" rel="noopener noreferrer nofollow" href="https://github.com/mempool/mempool">
      <span class="_9e13d83d dib v-mid">
        <svg style="height: 16px;margin-right: 8px;" viewBox="0 0 92 92" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <title>Git</title>
          <g stroke="none" fill="#FFFFFF">
            <path d="M90.155,41.965 L50.036,1.847 C47.726,-0.464 43.979,-0.464 41.667,1.847 L33.336,10.179 L43.904,20.747 C46.36,19.917 49.176,20.474 51.133,22.431 C53.102,24.401 53.654,27.241 52.803,29.706 L62.989,39.891 C65.454,39.041 68.295,39.59 70.264,41.562 C73.014,44.311 73.014,48.768 70.264,51.519 C67.512,54.271 63.056,54.271 60.303,51.519 C58.235,49.449 57.723,46.409 58.772,43.861 L49.272,34.362 L49.272,59.358 C49.942,59.69 50.575,60.133 51.133,60.69 C53.883,63.44 53.883,67.896 51.133,70.65 C48.383,73.399 43.924,73.399 41.176,70.65 C38.426,67.896 38.426,63.44 41.176,60.69 C41.856,60.011 42.643,59.497 43.483,59.153 L43.483,33.925 C42.643,33.582 41.858,33.072 41.176,32.389 C39.093,30.307 38.592,27.249 39.661,24.691 L29.243,14.271 L1.733,41.779 C-0.578,44.092 -0.578,47.839 1.733,50.15 L41.854,90.268 C44.164,92.578 47.91,92.578 50.223,90.268 L90.155,50.336 C92.466,48.025 92.466,44.275 90.155,41.965"></path>
          </g>
        </svg>
      </span>
      <span>github.com/mempool/mempool</span></a>
  </div>

  <br>

  <div class="text-small text-center">
    Git commit: {{ gitCommit$ | async }}
  </div>

</div>