Skip to content

Commit

Permalink
Add Zap support (#40)
Browse files Browse the repository at this point in the history 
* Update lightning service

* Add zap menu to the profile

* Add getalby npm packages

* Add send and receive zap dialogs for lightning payments
  • Loading branch information
@miladsoft
miladsoft authored Oct 5, 2024
1 parent 730b9ee commit d7815fc
Show file tree
Hide file tree
Showing 14 changed files with 4,817 additions and 346 deletions.
4,129 changes: 3,969 additions & 160 deletions package-lock.json
View file

Large diffs are not rendered by default.

24 changes: 20 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,32 +31,48 @@
"@angular/service-worker": "^18.2.6",
"@ctrl/ngx-emoji-mart": "^9.2.0",
"@gandlaf21/bolt11-decode": "^3.1.1",
"@getalby/lightning-tools": "^5.0.3",
"@getalby/sdk": "^3.7.1",
"@material/snackbar": "^14.0.0",
"@ngneat/cashew": "^4.1.0",
"@ngneat/transloco": "6.0.4",
"@noble/hashes": "^1.5.0",
"@noble/secp256k1": "^2.1.0",
"@types/qrcode": "^1.5.5",
"@webbtc/webln-types": "^3.0.0",
"@zxing/library": "^0.21.3",
"@zxing/ngx-scanner": "^18.0.1",
"angularx-qrcode": "^18.0.2",
"apexcharts": "3.54.0",
"bech32": "^2.0.0",
"blurhash": "^2.0.5",
"buffer": "^6.0.3",
"cropperjs": "^1.6.2",
"crypto-browserify": "^3.12.0",
"crypto-js": "4.2.0",
"dayjs": "^1.11.13",
"highlight.js": "11.10.0",
"install": "^0.13.0",
"lnd-grpc": "^0.5.4",
"localforage": "^1.10.0",
"lodash-es": "4.17.21",
"luxon": "3.5.0",
"moment": "^2.30.1",
"ng-apexcharts": "1.12.0",
"ngx-indexed-db": "^19.0.1",
"ngx-infinite-scroll": "^18.0.0",
"ngx-quill": "26.0.8",
"nostr-tools": "^2.7.2",
"npm": "^10.9.0",
"perfect-scrollbar": "1.5.5",
"quill": "2.0.2",
"cropperjs": "^1.6.2",
"crypto-browserify": "^3.12.0",
"process": "^0.11.10",
"qrcode": "^1.5.4",
"quill": "2.0.2",
"rxjs": "~7.8.1",
"stream": "^0.0.3",
"stream-browserify": "^3.0.0",
"tslib": "2.7.0",
"tslib": "^2.7.0",
"webln": "^0.3.2",
"zone.js": "0.15.0"
},
"devDependencies": {
Expand Down
10 changes: 10 additions & 0 deletions src/app/app.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import { TranslocoHttpLoader } from './core/transloco/transloco.http-loader';
import { provideServiceWorker } from '@angular/service-worker';
import { HashService } from './services/hash.service';
import { navigationServices } from './layout/navigation/navigation.services';
import { WebLNProvider } from '@webbtc/webln-types';
import { NostrWindow } from './types/nostr';

export function initializeApp(hashService: HashService) {
console.log('initializeApp. Getting hashService.load.');
Expand Down Expand Up @@ -119,5 +121,13 @@ export const appConfig: ApplicationConfig = {
],
},
}),

],
};
declare global {
interface Window {
webln?: WebLNProvider;
nostr?: NostrWindow;
}
}

4 changes: 4 additions & 0 deletions src/app/app.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@ export const appRoutes: Route[] = [
path: 'settings',
loadChildren: () => import('app/components/settings/settings.routes')
},
{
path: 'settings/:id',
loadChildren: () => import('app/components/settings/settings.routes')
},
{
path: 'chat',
loadChildren: () => import('app/components/chat/chat.routes')
Expand Down
157 changes: 75 additions & 82 deletions src/app/components/profile/profile.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<!-- User info -->
<div class="bg-card mx-auto flex w-full max-w-5xl flex-0 flex-col items-center px-8 lg:h-18 lg:flex-row">
<!-- picture -->
<div class="-mt-26 rounded-full lg:-mt-22">
<div class="-mt-26 rounded-full lg:-mt-22 flex-shrink-0">
<ng-container *ngIf="metadata?.picture; else defaultAvatar">
<img class="ring-bg-card min-h-32 min-w-32 h-32 w-32 rounded-full ring-4 object-cover max-w-fit"
[src]="getSafeUrl(metadata?.picture)"
Expand All @@ -27,18 +27,23 @@
</div>

<!-- Details -->
<div class="mt-4 flex flex-col items-center lg:ml-8 lg:mt-0 lg:items-start">
<div class="text-lg font-bold leading-tight truncate max-w-44">{{metadata?.display_name ||
metadata?.name || 'Unknown User'}}</div>
<div class="text-secondary leading-tight truncate max-w-44">{{metadata?.username || metadata?.name}}
<div class="mt-4 flex flex-col items-center lg:ml-8 lg:mt-0 lg:items-start flex-grow">
<div class="text-lg font-bold leading-tight max-w-full lg:max-w-[25rem] truncate"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{metadata?.display_name || metadata?.name || 'Unknown User'}}
</div>
<div class="text-secondary leading-tight max-w-full lg:max-w-[25rem] truncate"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{metadata?.username || metadata?.name}}
</div>
</div>


<!-- Separator -->
<div class="mx-8 hidden h-8 border-l-2 lg:flex"></div>
<div class="mx-8 hidden h-8 border-l-2 lg:flex flex-shrink-0"></div>

<!-- Stats -->
<div class="mt-6 flex items-center space-x-6 lg:mt-0">
<div class="mt-6 flex items-center space-x-6 lg:mt-0 flex-shrink-0">
<div class="flex flex-col items-center">
<span class="font-bold">{{ followers.length }}</span>
<span class="text-secondary text-sm font-medium">FOLLOWERS</span>
Expand All @@ -49,17 +54,68 @@
</div>
</div>

<!-- Separator -->
<div class="mx-8 hidden h-8 border-l-2 lg:flex flex-shrink-0"></div>

<!-- Menu -->
<div *ngIf="!isCurrentUserProfile" class="mb-4 mt-8 flex items-center space-x-6 lg:m-0 lg:ml-auto">
<div class="mb-4 mt-8 flex items-center space-x-6 lg:m-0 lg:ml-auto">
<button mat-raised-button color="primary" (click)="toggleFollow()" >
<mat-icon>{{ isFollowing ? 'person_remove' : 'person_add' }}</mat-icon>
<span class="ml-2">{{ isFollowing ? 'UNFOLLOW' : 'FOLLOW' }}</span>
<!-- Tools -->
<div class="mb-4 mt-8 flex items-center space-x-6 lg:m-0 lg:ml-auto flex-shrink-0">
<div *ngIf="!isCurrentUserProfile">
<button mat-icon-button (click)="toggleFollow()" [matTooltip]="isFollowing ? 'Unfollow' : 'Follow'">
<mat-icon
[svgIcon]="isFollowing ? 'heroicons_outline:user-minus' : 'heroicons_outline:user-plus'">
</mat-icon>
</button>
</div>
<div>
<button mat-icon-button [matMenuTriggerFor]="profileMenu">
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
</button>
<mat-menu #profileMenu="matMenu">
<button *ngIf="!isCurrentUserProfile" mat-menu-item (click)="zap()">
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="'feather:zap'"></mat-icon>
<span>Send Zap</span>
</span>
</button>

<button *ngIf="isCurrentUserProfile" mat-menu-item (click)="openReceiveZapDialog()">
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_outline:qr-code'" ></mat-icon>
<span>Receive Zap</span>
</span>
</button>

<mat-divider class="my-2"></mat-divider>
<button *ngIf="isCurrentUserProfile" mat-menu-item [routerLink]="'/settings/profile'">
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5"
[svgIcon]="'heroicons_outline:pencil-square'"></mat-icon>
<span>Edit your profile</span>
</span>
</button>

<button *ngIf="!isCurrentUserProfile" mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="
'heroicons_solid:exclamation-triangle'
"></mat-icon>
<span>Report</span>
</span>
</button>
<button *ngIf="!isCurrentUserProfile" mat-menu-item>
<span class="flex items-center">
<mat-icon class="mr-3 icon-size-5" [svgIcon]="'heroicons_solid:bell'"></mat-icon>
<span>Turn on notifications</span>
</span>
</button>
</mat-menu>
</div>
</div>



</div>

</div>

<!-- Main -->
Expand All @@ -70,7 +126,7 @@
<angor-card *ngIf="metadata?.about && metadata.about.trim() !== ''"
class="flex w-full max-w-80 flex-col p-8">
<div class="text-2xl font-semibold leading-tight">About</div>
<div class="mt-4">
<div class="mt-4">
{{metadata?.about || ''}}
</div>
<a class="mt-8 px-6" mat-flat-button [color]="'primary'" [routerLink]="['./']">
Expand All @@ -79,7 +135,8 @@
</angor-card>

<!-- Suggestion -->
<angor-card *ngIf="suggestions.length > 0" [ngClass]="{'mt-8': metadata?.about}" class="flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
<angor-card *ngIf="suggestions.length > 0" [ngClass]="{'mt-8': metadata?.about}"
class="flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
<div class="flex items-center justify-between">
<div class="text-2xl font-semibold leading-tight">
Suggestion
Expand Down Expand Up @@ -113,71 +170,6 @@

</angor-card>

<!-- Gallery -->
<angor-card class="mt-8 flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
<div class="flex items-center justify-between">
<div class="text-2xl font-semibold leading-tight">
Gallery
</div>
<div class="-mr-3">
<button mat-icon-button [matMenuTriggerFor]="listCard09Menu">
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_solid:ellipsis-vertical'"></mat-icon>
</button>
<mat-menu #listCard09Menu="matMenu">
<button mat-menu-item>Add image</button>
<button mat-menu-item>Add video</button>
</mat-menu>
</div>
</div>
<div class="flex flex-col">
<div class="mt-6 flex justify-between">
<img class="h-14 w-14 rounded object-cover" src="images/cards/14-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/15-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/16-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/17-640x480.jpg"
alt="Card cover image" />
</div>
<div class="mt-3 flex justify-between">
<img class="h-14 w-14 rounded object-cover" src="images/cards/18-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/19-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/20-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/21-640x480.jpg"
alt="Card cover image" />
</div>
<div class="mt-3 flex justify-between">
<img class="h-14 w-14 rounded object-cover" src="images/cards/22-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/23-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/24-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/25-640x480.jpg"
alt="Card cover image" />
</div>
<div class="mt-3 flex justify-between">
<img class="h-14 w-14 rounded object-cover" src="images/cards/26-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/27-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/28-640x480.jpg"
alt="Card cover image" />
<img class="h-14 w-14 rounded object-cover" src="images/cards/29-640x480.jpg"
alt="Card cover image" />
</div>
</div>
<div class="-mx-3 mt-6 flex items-center">
<a class="px-3" mat-button [color]="'primary'" [routerLink]="['./']">
See entire gallery
</a>
</div>
</angor-card>

<!-- Groups -->
<angor-card class="mt-8 flex w-full max-w-80 flex-col px-8 pb-4 pt-6">
<div class="flex items-center justify-between">
Expand Down Expand Up @@ -455,7 +447,8 @@
</angor-card>

<!-- Post 1 -->
<angor-card [ngClass]="{'mt-8': isCurrentUserProfile}" class="flex w-full max-w-140 flex-col" #expandableCard02="angorCard">
<angor-card [ngClass]="{'mt-8': isCurrentUserProfile}" class="flex w-full max-w-140 flex-col"
#expandableCard02="angorCard">
<div class="mx-6 mb-4 mt-6 flex items-center sm:mx-8">
<img class="mr-4 h-10 w-10 rounded-full" src="images/avatars/avatar-placeholder.png"
alt="Card cover image" />
Expand Down Expand Up @@ -575,7 +568,7 @@
<div class="mx-4 mb-3 mt-6 flex flex-col sm:mx-8">
<div class="flex items-start">

<img class="mr-5 h-12 w-12 rounded-full object-cover"
<img class="mr-5 h-12 w-12 rounded-full object-cover"
[src]="currentUserMetadata?.picture || 'images/avatars/avatar-placeholder.png'"
onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
alt="{{currentUserMetadata?.display_name || currentUserMetadata?.name || 'Avatar'}}" />
Expand Down
Loading

0 comments on commit d7815fc

Please sign in to comment.