Add support for display_name on profile

This commit is contained in:
SondreB 2023-01-11 00:35:26 +01:00
parent 06e7c2c510
commit 007a0ffdd0
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
4 changed files with 54 additions and 13 deletions

View File

@ -45,13 +45,13 @@
<input matInput type="text" [(ngModel)]="profile.lud06" placeholder="LNURL..." />
</mat-form-field>
</p>
<p>
<!-- <p>
<mat-form-field appearance="outline" class="input-full-width">
<mat-icon matPrefix>currency_bitcoin</mat-icon>
<mat-label>Bitcoin Identity Identifier (LUD16)</mat-label>
<input matInput type="text" [(ngModel)]="profile.lud16" placeholder="satoshi@bitcoin.org" />
</mat-form-field>
</p>
</p> -->
<p>Last updated: {{ profile.created_at | ago }}</p>
</mat-card-content>
<mat-card-footer align="end">

View File

@ -22,14 +22,15 @@
.profile-labels {
display: flex;
width: auto;
gap: 0.4em;
justify-content: center;
}
.profile-labels:hover {
/* .profile-labels:hover {
cursor: pointer;
opacity: 0.6;
}
} */
.profile-labels-left {
flex: 0 1 auto;
@ -37,11 +38,20 @@
}
.profile-labels-middle {
flex: 1 1 auto;
flex: 0 0 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-labels-middle:hover {
cursor: pointer;
opacity: 0.6;
}
.profile-labels-right {
flex: 1 2 auto;
}
.action-button {
margin-top: 0 !important;
margin-right: 0 !important;

View File

@ -23,30 +23,36 @@
</span>
</span>
</h2>
<div class="profile-labels" (click)="copy(npub)">
<div class="profile-labels">
<div class="profile-labels-left"><mat-icon class="profile-icon">key</mat-icon></div>
<div class="profile-labels-middle dimmed">@{{ profile.name }}</div>
<div class="profile-labels-middle dimmed" (click)="copy(npub)">@{{ profile.name }}</div>
<div class="profile-labels-right"></div>
</div>
<div class="profile-labels" *ngIf="profile.nip05" (click)="copy(getWellKnownLink(profile.nip05))">
<div class="profile-labels" *ngIf="profile.nip05">
<div class="profile-labels-left"><mat-icon class="profile-icon">verified</mat-icon></div>
<div class="profile-labels-middle dimmed">{{ profile.nip05 }}</div>
<div class="profile-labels-middle dimmed" (click)="copy(getWellKnownLink(profile.nip05))">{{ profile.nip05 }}</div>
<div class="profile-labels-right"></div>
</div>
<div class="profile-labels" *ngIf="profile.website">
<div class="profile-labels-left"><mat-icon class="profile-icon">link</mat-icon></div>
<div class="profile-labels-middle dimmed">
<a class="dimmed lightning-link" *ngIf="profile.website" [href]="utilities.sanitize(profile.website)" target="_blank">{{ profile.website }}</a>
</div>
<div class="profile-labels-right"></div>
</div>
<div class="profile-labels" *ngIf="profile.lud06" [mtxTooltip]="tooltipTpl" [mtxTooltipPosition]="'left'">
<div class="profile-labels-left"><mat-icon class="profile-icon-custom">⚡️</mat-icon></div>
<div class="profile-labels-middle dimmed">
<a class="dimmed lightning-link" *ngIf="profile.lud06" [href]="utilities.sanitize('lightning:' + profile.lud06)">{{ getLightningLabel(profile.lud06) }}</a>
<!-- <a class="dimmed lightning-link" (click)="toggleLn()" *ngIf="profile.lud16 && paymentVersion == 'lud16'" [href]="utilities.sanitize('lightning:' + profile.lud16)">{{ profile.lud16 }}</a> -->
<a class="dimmed lightning-link" *ngIf="profile.lud06 && paymentVersion == 'lud06'" [href]="utilities.sanitize('lightning:' + profile.lud06)">{{ getLightningLabel(profile.lud06) }}</a>
</div>
<div class="profile-labels-right"></div>
</div>
<ng-template #tooltipTpl>
<div class="qr-code-container">
<img class="qr-code" *ngIf="qr" [src]="qr" />
<!-- <img class="qr-code" *ngIf="qr16 && paymentVersion == 'lud16'" [src]="qr16" /> -->
<img class="qr-code" *ngIf="qr06 && paymentVersion == 'lud06'" [src]="qr06" />
</div>
</ng-template>

View File

@ -21,7 +21,8 @@ export class ProfileHeaderComponent {
tooltipName = '';
circle?: Circle;
npub!: string;
qr?: string;
qr06?: string;
qr16?: string;
constructor(public profileService: ProfileService, public dialog: MatDialog, private circleService: CircleService, public utilities: Utilities) {}
@ -49,6 +50,18 @@ export class ProfileHeaderComponent {
}
}
paymentVersion = 'lud06';
// toggleLn() {
// if (!this.profile) {
// return;
// }
// if (this.profile.lud16 && this.profile.lud06) {
// this.paymentVersion = this.paymentVersion == 'lud06' ? 'lud06' : 'lud16';
// }
// }
async ngOnInit() {
if (!this.profile) {
this.profile = await this.profileService.getLocalProfile(this.pubkey);
@ -73,12 +86,24 @@ export class ProfileHeaderComponent {
// Pre-generate the QR value as we had some issues doing it dynamically.
if (this.profile.lud06) {
this.qr = await QRCode.toDataURL('lightning:' + this.profile.lud06, {
this.qr06 = await QRCode.toDataURL('lightning:' + this.profile.lud06, {
errorCorrectionLevel: 'L',
margin: 2,
scale: 5,
});
}
if (this.profile.lud16) {
this.qr16 = await QRCode.toDataURL('lightning:' + this.profile.lud16, {
errorCorrectionLevel: 'L',
margin: 2,
scale: 5,
});
}
// if (this.profile.lud16) {
// this.paymentVersion = 'lud16';
// }
}
copy(text: string) {