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

<div class="container-xl">
  <div class="text-center">
    <br>
    <img src="./resources/mempool-logo-bigger.png" height="62.5" width="250">
    <br>

    <div class="text-small text-center offset-md-1">
      v2.2-dev ({{ gitCommit$ | async }})
    </div>

    <br>

    <h3 i18n="about.about-the-project">The Mempool Open Source Project</h3>
    <div class="row row-cols-1">
      <div class="col col-md-6 mx-auto">
        <p i18n>An explorer and API developed and operated for the Bitcoin community, focusing on the emerging transaction fee market to help our transition into a multi-layer ecosystem, without ads, altcoins, or third-party trackers.</p>
      </div>
    </div>

    <br>

    <h3 i18n="about.maintainers">Maintainers</h3>

    <div class="container text-center">
      <div class="row row-cols-2" dir="ltr">
        <div class="col col-md-2 offset-md-4">
          <a href="https://twitter.com/softsimon_">
            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile_softsimon.jpg)"></div>
            @softsimon_
          </a>
          <br>
          <span i18n="about.development">Development</span>
        </div>
        <div class="col col-md-2">
          <a href="https://twitter.com/wiz">
            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile_wiz.png)"></div>
            @wiz
          </a>
          <br>
          <span i18n="about.operations">Operations</span>
        </div>
      </div>
    </div>

    <br><br>

    <h3 i18n="about.sponsors.withHeart">Sponsors ❤️</h3>

    <div *ngIf="sponsors === null">
      <br>
      <div class="spinner-border text-light"></div>
    </div>

    <ng-template ngFor let-sponsor [ngForOf]="sponsors">
      <a [href]="'https://twitter.com/' + sponsor.handle" target="_blank" rel="sponsored">
        <div class="profile_photo d-inline-block" [title]="sponsor.handle">
          <img class="profile_img" [src]="'/api/v1/donations/images/' + sponsor.handle" />
        </div>
      </a>
    </ng-template>
    <br><br>
    
    <button type="button" class="btn btn-primary" (click)="donationStatus = 2" [hidden]="donationStatus !== 1" i18n="about.become-a-sponsor">Become a sponsor ❤️</button>
    <p *ngIf="donationStatus === 2 && !sponsorsEnabled">
      <ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/about" target="_blank">https://mempool.space/about</a> to sponsor</ng-container>
    </p>

    <div style="max-width: 300px;" class="mx-auto" [hidden]="donationStatus !== 2 || !sponsorsEnabled">
      <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" *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="required" *ngIf="donationForm.get('amount').hasError('required')" i18n="about.sponsor.amount-required">Amount required</div>
        <div class="required" *ngIf="donationForm.get('amount').hasError('min')" i18n="about.sponsor.minimum-amount">Minimum amount is 0.001 BTC</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>
      </form>
    </div>

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

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

    <br><br><br>

    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://github.com/mempool/mempool">
      <span class="dib v-mid">
        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
      </span>
    </a>

    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://twitter.com/mempoolspace">
      <span class="dib v-mid">
        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
      </span>
    </a>

    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://t.me/mempoolspace">
      <span class="dib v-mid">
        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="telegram-plane" class="svg-inline--fa fa-telegram-plane fa-w-14 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>
      </span>
    </a>

    <a target="_blank" class="m-2 fw6 mb3 mt2 truncate black-80 f4 link" href="https://keybase.io/team/mempool">
      <span class="dib v-mid">
        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="keybase" class="svg-inline--fa fa-keybase fa-w-14 fa-3x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M286.17 419a18 18 0 1 0 18 18 18 18 0 0 0-18-18zm111.92-147.6c-9.5-14.62-39.37-52.45-87.26-73.71q-9.1-4.06-18.38-7.27a78.43 78.43 0 0 0-47.88-104.13c-12.41-4.1-23.33-6-32.41-5.77-.6-2-1.89-11 9.4-35L198.66 32l-5.48 7.56c-8.69 12.06-16.92 23.55-24.34 34.89a51 51 0 0 0-8.29-1.25c-41.53-2.45-39-2.33-41.06-2.33-50.61 0-50.75 52.12-50.75 45.88l-2.36 36.68c-1.61 27 19.75 50.21 47.63 51.85l8.93.54a214 214 0 0 0-46.29 35.54C14 304.66 14 374 14 429.77v33.64l23.32-29.8a148.6 148.6 0 0 0 14.56 37.56c5.78 10.13 14.87 9.45 19.64 7.33 4.21-1.87 10-6.92 3.75-20.11a178.29 178.29 0 0 1-15.76-53.13l46.82-59.83-24.66 74.11c58.23-42.4 157.38-61.76 236.25-38.59 34.2 10.05 67.45.69 84.74-23.84.72-1 1.2-2.16 1.85-3.22a156.09 156.09 0 0 1 2.8 28.43c0 23.3-3.69 52.93-14.88 81.64-2.52 6.46 1.76 14.5 8.6 15.74 7.42 1.57 15.33-3.1 18.37-11.15C429 443 434 414 434 382.32c0-38.58-13-77.46-35.91-110.92zM142.37 128.58l-15.7-.93-1.39 21.79 13.13.78a93 93 0 0 0 .32 19.57l-22.38-1.34a12.28 12.28 0 0 1-11.76-12.79L107 119c1-12.17 13.87-11.27 13.26-11.32l29.11 1.73a144.35 144.35 0 0 0-7 19.17zm148.42 172.18a10.51 10.51 0 0 1-14.35-1.39l-9.68-11.49-34.42 27a8.09 8.09 0 0 1-11.13-1.08l-15.78-18.64a7.38 7.38 0 0 1 1.34-10.34l34.57-27.18-14.14-16.74-17.09 13.45a7.75 7.75 0 0 1-10.59-1s-3.72-4.42-3.8-4.53a7.38 7.38 0 0 1 1.37-10.34L214 225.19s-18.51-22-18.6-22.14a9.56 9.56 0 0 1 1.74-13.42 10.38 10.38 0 0 1 14.3 1.37l81.09 96.32a9.58 9.58 0 0 1-1.74 13.44zM187.44 419a18 18 0 1 0 18 18 18 18 0 0 0-18-18z"></path></svg>
      </span>
    </a>

    <br>

  </div>

  <br><br>

  <div class="text-center">
    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
  </div>

</div>