mirror of
https://github.com/mempool/mempool.git
synced 2024-11-20 10:21:52 +01:00
Merge pull request #524 from mempool/simon/sponsor-page
New separate sponsorship page
This commit is contained in:
wiz
GitHub
commit
66b27b9dd0
@ -17,6 +17,7 @@ import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.
|
||||
import { ApiDocsComponent } from './components/api-docs/api-docs.component';
|
||||
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
|
||||
import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
|
||||
import { SponsorComponent } from './components/sponsor/sponsor.component';
|
||||
|
||||
let routes: Routes = [
|
||||
{
|
||||
@ -70,6 +71,10 @@ let routes: Routes = [
|
||||
children: [],
|
||||
component: AddressComponent
|
||||
},
|
||||
{
|
||||
path: 'sponsor',
|
||||
component: SponsorComponent,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -50,6 +50,7 @@ import { ApiDocsComponent } from './components/api-docs/api-docs.component';
|
||||
import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
|
||||
import { StorageService } from './services/storage.service';
|
||||
import { HttpCacheInterceptor } from './services/http-cache.interceptor';
|
||||
import { SponsorComponent } from './components/sponsor/sponsor.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -85,6 +86,7 @@ import { HttpCacheInterceptor } from './services/http-cache.interceptor';
|
||||
DashboardComponent,
|
||||
ApiDocsComponent,
|
||||
TermsOfServiceComponent,
|
||||
SponsorComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({ appId: 'serverApp' }),
|
||||
|
||||
@ -72,137 +72,22 @@
|
||||
|
||||
<h3 i18n="about.sponsors.withHeart">Community 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 community_sponsor d-inline-block" [title]="sponsor.handle">
|
||||
<img class="profile_img" [src]="'/api/v1/donations/images/' + sponsor.handle" />
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
<ng-container *ngIf="sponsors$ | async as sponsors; else loadingSponsors">
|
||||
<ng-template ngFor let-sponsor [ngForOf]="sponsors">
|
||||
<a [href]="'https://twitter.com/' + sponsor.handle" target="_blank" rel="sponsored">
|
||||
<div class="profile_photo community_sponsor d-inline-block" [title]="sponsor.handle">
|
||||
<img class="profile_img" [src]="'/api/v1/donations/images/' + sponsor.handle" />
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
<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>
|
||||
<button [hidden]="showNavigateToSponsor" type="button" class="btn btn-primary" (click)="sponsor()" i18n="about.become-a-sponsor">Become a sponsor ❤️</button>
|
||||
<ng-container *ngIf="showNavigateToSponsor" i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/sponsor" target="_blank">https://mempool.space/sponsor</a> to sponsor</ng-container>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
<br>
|
||||
|
||||
<h3 i18n="about.integrations">Community Integrations</h3>
|
||||
|
||||
@ -334,19 +219,16 @@
|
||||
|
||||
<h3 i18n="about.contributors">Project Contributors</h3>
|
||||
|
||||
<div *ngIf="contributors === null">
|
||||
<br>
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
<ng-template ngFor let-contributor [ngForOf]="contributors">
|
||||
<a [href]="'https://github.com/' + contributor.name" target="_blank">
|
||||
<div class="profile_photo project_contributor d-inline-block" [title]="contributor.name">
|
||||
<img class="profile_img" [src]="'/api/v1/contributors/images/' + contributor.id" />
|
||||
{{ contributor.name }}
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
<ng-container *ngIf="contributors$ | async as contributors; else loadingSponsors">
|
||||
<ng-template ngFor let-contributor [ngForOf]="contributors">
|
||||
<a [href]="'https://github.com/' + contributor.name" target="_blank">
|
||||
<div class="profile_photo project_contributor d-inline-block" [title]="contributor.name">
|
||||
<img class="profile_img" [src]="'/api/v1/contributors/images/' + contributor.id" />
|
||||
{{ contributor.name }}
|
||||
</div>
|
||||
</a>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<br><br>
|
||||
<br><br>
|
||||
@ -407,3 +289,8 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-template #loadingSponsors>
|
||||
<br>
|
||||
<div class="spinner-border text-light"></div>
|
||||
</ng-template>
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
.qr-wrapper {
|
||||
background-color: #FFF;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.profile_photo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@ -39,11 +32,6 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
|
||||
.required {
|
||||
color: #FF0000;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,42 +1,33 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { StateService } from 'src/app/services/state.service';
|
||||
import { Observable, Subscription } from 'rxjs';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
||||
import { delay, retryWhen, switchMap, tap } from 'rxjs/operators';
|
||||
import { IBackendInfo } from 'src/app/interfaces/websocket.interface';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-about',
|
||||
templateUrl: './about.component.html',
|
||||
styleUrls: ['./about.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class AboutComponent implements OnInit, OnDestroy {
|
||||
export class AboutComponent implements OnInit {
|
||||
backendInfo$: Observable<IBackendInfo>;
|
||||
donationForm: FormGroup;
|
||||
paymentForm: FormGroup;
|
||||
donationStatus = 1;
|
||||
sponsors$: Observable<any>;
|
||||
contributors$: Observable<any>;
|
||||
donationObj: any;
|
||||
sponsorsEnabled = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
|
||||
frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH.substr(0, 8);
|
||||
packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
|
||||
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
|
||||
sponsors = null;
|
||||
contributors = null;
|
||||
requestSubscription: Subscription | undefined;
|
||||
showNavigateToSponsor = false;
|
||||
|
||||
constructor(
|
||||
private websocketService: WebsocketService,
|
||||
private seoService: SeoService,
|
||||
private stateService: StateService,
|
||||
private formBuilder: FormBuilder,
|
||||
private apiService: ApiService,
|
||||
private sanitizer: DomSanitizer,
|
||||
private router: Router,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
@ -44,59 +35,15 @@ export class AboutComponent implements OnInit, OnDestroy {
|
||||
this.seoService.setTitle($localize`:@@004b222ff9ef9dd4771b777950ca1d0e4cd4348a:About`);
|
||||
this.websocketService.want(['blocks']);
|
||||
|
||||
this.donationForm = this.formBuilder.group({
|
||||
amount: [0.01, [Validators.min(0.001), Validators.required]],
|
||||
handle: [''],
|
||||
});
|
||||
|
||||
this.paymentForm = this.formBuilder.group({
|
||||
'method': 'chain'
|
||||
});
|
||||
|
||||
this.apiService.getDonation$()
|
||||
.subscribe((sponsors) => {
|
||||
this.sponsors = sponsors;
|
||||
});
|
||||
|
||||
this.apiService.getContributor$()
|
||||
.subscribe((contributors) => {
|
||||
this.contributors = contributors;
|
||||
});
|
||||
this.sponsors$ = this.apiService.getDonation$();
|
||||
this.contributors$ = this.apiService.getContributor$();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.requestSubscription) {
|
||||
this.requestSubscription.unsubscribe();
|
||||
sponsor() {
|
||||
if (this.officialMempoolSpace) {
|
||||
this.router.navigateByUrl('/sponsor');
|
||||
} else {
|
||||
this.showNavigateToSponsor = true;
|
||||
}
|
||||
}
|
||||
|
||||
submitDonation() {
|
||||
if (this.donationForm.invalid) {
|
||||
return;
|
||||
}
|
||||
this.requestSubscription = this.apiService.requestDonation$(
|
||||
this.donationForm.get('amount').value,
|
||||
this.donationForm.get('handle').value
|
||||
)
|
||||
.pipe(
|
||||
tap((response) => {
|
||||
this.donationObj = response;
|
||||
this.donationStatus = 3;
|
||||
}),
|
||||
switchMap(() => this.apiService.checkDonation$(this.donationObj.id)
|
||||
.pipe(
|
||||
retryWhen((errors) => errors.pipe(delay(2000)))
|
||||
)
|
||||
)
|
||||
).subscribe(() => {
|
||||
this.donationStatus = 4;
|
||||
if (this.donationForm.get('handle').value) {
|
||||
this.sponsors.unshift({ handle: this.donationForm.get('handle').value });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bypassSecurityTrustUrl(text: string): SafeUrl {
|
||||
return this.sanitizer.bypassSecurityTrustUrl(text);
|
||||
}
|
||||
}
|
||||
|
||||
151
frontend/src/app/components/sponsor/sponsor.component.html
Normal file
151
frontend/src/app/components/sponsor/sponsor.component.html
Normal file
@ -0,0 +1,151 @@
|
||||
<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">Pleb sponsor</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">100K sats</h5>
|
||||
<p class="card-text">Thank you for supporting the mempool 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">Your profile photo featured 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>
|
||||
<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>
|
||||
|
||||
</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>
|
||||
40
frontend/src/app/components/sponsor/sponsor.component.scss
Normal file
40
frontend/src/app/components/sponsor/sponsor.component.scss
Normal file
@ -0,0 +1,40 @@
|
||||
.qr-wrapper {
|
||||
background-color: #FFF;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 220px;
|
||||
height: 200px;
|
||||
background-color: #1d1f31;
|
||||
margin: 10px 20px 20px 20px;
|
||||
border: 2px solid #1d1f31;
|
||||
cursor: pointer;
|
||||
|
||||
&.bigger {
|
||||
height: 220px;
|
||||
width: 240px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #171929;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.shiny-border {
|
||||
border: 2px solid #505892;
|
||||
}
|
||||
88
frontend/src/app/components/sponsor/sponsor.component.ts
Normal file
88
frontend/src/app/components/sponsor/sponsor.component.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { delay, retryWhen, switchMap, tap } from 'rxjs/operators';
|
||||
import { ApiService } from 'src/app/services/api.service';
|
||||
import { SeoService } from 'src/app/services/seo.service';
|
||||
import { StateService } from 'src/app/services/state.service';
|
||||
import { WebsocketService } from 'src/app/services/websocket.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sponsor',
|
||||
templateUrl: './sponsor.component.html',
|
||||
styleUrls: ['./sponsor.component.scss']
|
||||
})
|
||||
export class SponsorComponent implements OnInit, OnDestroy {
|
||||
sponsorsEnabled = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
|
||||
donationForm: FormGroup;
|
||||
paymentForm: FormGroup;
|
||||
requestSubscription: Subscription | undefined;
|
||||
donationObj: any;
|
||||
donationStatus = 1;
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private apiService: ApiService,
|
||||
private sanitizer: DomSanitizer,
|
||||
private stateService: StateService,
|
||||
private websocketService: WebsocketService,
|
||||
private seoService: SeoService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.seoService.setTitle($localize`:@@sponsor.title:Sponsor`);
|
||||
this.websocketService.want(['blocks']);
|
||||
|
||||
this.paymentForm = this.formBuilder.group({
|
||||
'method': 'chain'
|
||||
});
|
||||
|
||||
this.donationForm = this.formBuilder.group({
|
||||
selection: [0.01],
|
||||
handle: [''],
|
||||
});
|
||||
}
|
||||
|
||||
submitDonation() {
|
||||
if (this.donationForm.invalid) {
|
||||
return;
|
||||
}
|
||||
this.requestSubscription = this.apiService.requestDonation$(
|
||||
this.donationForm.get('selection').value,
|
||||
this.donationForm.get('handle').value
|
||||
)
|
||||
.pipe(
|
||||
tap((response) => {
|
||||
this.donationObj = response;
|
||||
this.donationStatus = 2;
|
||||
}),
|
||||
switchMap(() => this.apiService.checkDonation$(this.donationObj.id)
|
||||
.pipe(
|
||||
retryWhen((errors) => errors.pipe(delay(2000)))
|
||||
)
|
||||
)
|
||||
).subscribe(() => {
|
||||
this.donationStatus = 3;
|
||||
/*
|
||||
if (this.donationForm.get('handle').value) {
|
||||
this.sponsors.unshift({ handle: this.donationForm.get('handle').value });
|
||||
}
|
||||
*/
|
||||
});
|
||||
}
|
||||
|
||||
setSelection(amount: number): void {
|
||||
this.donationForm.get('selection').setValue(amount);
|
||||
}
|
||||
|
||||
bypassSecurityTrustUrl(text: string): SafeUrl {
|
||||
return this.sanitizer.bypassSecurityTrustUrl(text);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.requestSubscription) {
|
||||
this.requestSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user