- ![{{ title() }}]()
+ ![{{ title() }}]()
\ No newline at end of file
diff --git a/src/app/components/nft-card/nft-card.component.ts b/src/app/components/nft-card/nft-card.component.ts
index 03c34ac..9c01488 100644
--- a/src/app/components/nft-card/nft-card.component.ts
+++ b/src/app/components/nft-card/nft-card.component.ts
@@ -8,6 +8,7 @@ export class NftCardComponent implements OnInit {
imageUrl = input{{ title() }}
{{ title() }}
-
-
@@ -37,7 +33,7 @@ {{ title() }}
} @else { @for (asset of corvidNfts(); track asset.name) {
-
}
diff --git a/src/app/components/windows/gallery-window/gallery-window.component.ts b/src/app/components/windows/gallery-window/gallery-window.component.ts
index 59edc43..d79a29c 100644
--- a/src/app/components/windows/gallery-window/gallery-window.component.ts
+++ b/src/app/components/windows/gallery-window/gallery-window.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, ElementRef, inject, OnDestroy, OnInit, signal, ViewChild, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { debounceTime, Subject, Subscription } from 'rxjs';
import { DraggableDirective } from '../../../directives/draggable.directive';
import { ResizableDirective } from '../../../directives/resizable.directive';
@@ -7,20 +8,17 @@ import { AssetService } from '../../../services/asset.service';
import { NftCardComponent } from "../../nft-card/nft-card.component";
import { SkeletonCardComponent } from "../../skeleton-card/skeleton-card.component";
import { FloatWindow } from '../float-window/float-window.component';
-import { UtilsService } from '../../../services/general/utils.service';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { PixelIconComponent } from '../../shared/pixel-icon/pixel-icon.component';
export interface GalleryStorageObj {
scrollPosition: number;
corvidNfts: CorvidNft[] | null;
+ page: number;
isLastPage: boolean;
- nextToken: string | null;
}
@Component({
selector: 'app-gallery-window',
- imports: [DraggableDirective, ResizableDirective, NftCardComponent, SkeletonCardComponent, MatTooltipModule, PixelIconComponent],
+ imports: [DraggableDirective, ResizableDirective, NftCardComponent, SkeletonCardComponent, MatTooltipModule],
templateUrl: 'gallery-window.component.html',
styleUrls: ['gallery-window.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -29,6 +27,7 @@ export class GalleryWindowComponent extends FloatWindow implements OnInit, OnDes
@ViewChild('scrollableElement') scrollableElement!: ElementRef{{ title() }}
+ @if (contentDisplaying() === 'picture-picker') {
+
+ } @else {
+
- ('Settings');
- peraInstance = input.required();
- userImage = signal("");
- isAuthenticated = input(false);
+ userImageB64Input = input('');
+ userImageB64 = signal('');
userAccountAddress = input(null);
+ userAssets = signal([]);
+ contentDisplaying = signal<'settings' | 'picture-picker'>('settings');
+
logoutRequested = output();
+ profilePictureSelected = output();
+ // Services Injection
soundEffectService = inject(SoundEffectService);
+ assetService = inject(AssetService);
+ protected authService = inject(AuthService);
// Volume icon based on current volume level
volumeIcon = computed(() => {
@@ -40,12 +56,9 @@ export class SettingsWindowComponent extends FloatWindow implements OnInit {
// Math reference for template
protected readonly Math = Math;
- // Pera instance
- peraWallet!: PeraWalletConnect;
-
constructor() {
super();
-
+
if (window.innerWidth >= 1920) {
this.width.set(600);
this.height.set(830);
@@ -53,10 +66,32 @@ export class SettingsWindowComponent extends FloatWindow implements OnInit {
this.width.set(600);
this.height.set(400);
}
+
+ // Restore volume from saved settings (wallet-independent)
+ const saved = UtilsService.recoverObjFromLocalStorage('settingsWindowData');
+ if (saved?.volume != null) {
+ this.soundEffectService.setVolume(saved.volume);
+ }
+
+ effect(() => {
+ this.onUserAccountAddressChange(this.userAccountAddress());
+ });
+
+ effect(() => {
+ const incoming = this.userImageB64Input();
+ if (incoming !== this.userImageB64()) {
+ this.userImageB64.set(incoming);
+ }
+ });
}
- ngOnInit() {
- this.peraWallet = this.peraInstance();
+ onUserAccountAddressChange(address: string | null): void {
+ if (!address) return;
+
+ this.assetService.getWalletAssetsHolding(address).subscribe(assets => {
+ console.log(assets);
+ this.userAssets.set(assets);
+ });
}
onChangeUser() {
@@ -65,29 +100,37 @@ export class SettingsWindowComponent extends FloatWindow implements OnInit {
}
onChangeProfilePicture() {
- if (!this.isAuthenticated()) return;
-
- // Placeholder for future profile picture gallery/upload
- console.log('Profile picture change requested');
+ if (!this.authService.user()) return;
+ this.contentDisplaying.set('picture-picker');
}
- onLogout() {
- this.handleDisconnectWallet();
- this.logoutRequested.emit();
+ onAssetPicked(asset: CorvidNft) {
+ this.userImageB64.set(asset.imageB64 ?? '');
+ this.contentDisplaying.set('settings');
+ this.updateSettingsOnLocalStorage();
}
- handleDisconnectWallet(event?: Event): void {
- event?.preventDefault();
-
- this.peraWallet.disconnect().catch(error => {
- console.error('Error disconnecting wallet:', error);
- });
+ onLogout() {
+ this.authService.logout();
+ this.logoutRequested.emit();
}
onVolumeChange(volume: number) {
// Normalize volume to 0-1 range cause of the audio player html component
volume /= 100;
-
+
this.soundEffectService.setVolume(volume);
+
+ if (this.authService.user()) {
+ this.updateSettingsOnLocalStorage();
+ }
+ }
+
+ updateSettingsOnLocalStorage() {
+ UtilsService.saveObjToLocalStorage('settingsWindowData', {
+ walletAddress: this.userAccountAddress(),
+ userImageB64: this.userImageB64(),
+ volume: this.soundEffectService.volume(),
+ });
}
-}
\ No newline at end of file
+}
diff --git a/src/app/components/windows/style-guide-window/style-guide-window.component.ts b/src/app/components/windows/style-guide-window/style-guide-window.component.ts
index 987027a..6a536b4 100644
--- a/src/app/components/windows/style-guide-window/style-guide-window.component.ts
+++ b/src/app/components/windows/style-guide-window/style-guide-window.component.ts
@@ -1,13 +1,13 @@
import { CommonModule } from '@angular/common';
-import { Component, input, signal, computed, inject } from '@angular/core';
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { environment } from '../../../../environments/environment.local';
import { DraggableDirective } from '../../../directives/draggable.directive';
+import { UserService } from '../../../services/general/user.service';
import { CvdCheckboxComponent } from "../../shared/corvid-checkbox/corvid-checkbox.component";
import { PixelIconComponent } from '../../shared/pixel-icon/pixel-icon.component';
-import { FloatWindow } from '../float-window/float-window.component';
-import { FormsModule } from '@angular/forms';
-import { UserService } from '../../../services/general/user.service';
-import { environment } from '../../../../environments/environment.local';
import { CvdSliderComponent } from "../../slider/slider.component";
+import { FloatWindow } from '../float-window/float-window.component';
@Component({
selector: 'app-style-guide-window',
@@ -140,7 +140,6 @@ export class StyleGuideWindowComponent extends FloatWindow {
}
});
- // TODO: Setup endpoint call to actually test the Backend calls
this.userService.saveUserSettings(environment.development_wallet).subscribe({
next: response => {
console.log(response);
diff --git a/src/app/components/windows/tetris-window/tetris-window.component.ts b/src/app/components/windows/tetris-window/tetris-window.component.ts
index 58ab54e..99bc00f 100644
--- a/src/app/components/windows/tetris-window/tetris-window.component.ts
+++ b/src/app/components/windows/tetris-window/tetris-window.component.ts
@@ -1,11 +1,11 @@
-import { Component, OnInit, OnDestroy, signal, HostListener, input, ElementRef, viewChild } from '@angular/core';
-import { FloatWindow } from '../float-window/float-window.component';
-import { DraggableDirective } from '../../../directives/draggable.directive';
import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
+import { Component, ElementRef, HostListener, input, OnDestroy, OnInit, signal, viewChild } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { DraggableDirective } from '../../../directives/draggable.directive';
import { ResizableDirective } from '../../../directives/resizable.directive';
import { PixelIconComponent } from "../../shared/pixel-icon/pixel-icon.component";
+import { FloatWindow } from '../float-window/float-window.component';
interface Position {
x: number;
diff --git a/src/app/directives/draggable.directive.ts b/src/app/directives/draggable.directive.ts
index b8d4f06..c4eec6e 100644
--- a/src/app/directives/draggable.directive.ts
+++ b/src/app/directives/draggable.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, inject, Input, OnInit, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { ZIndexManagerService } from '../services/general/z-index-manager.service';
@Directive({
diff --git a/src/app/directives/resizable.directive.ts b/src/app/directives/resizable.directive.ts
index 1169b5b..c7e6bc9 100644
--- a/src/app/directives/resizable.directive.ts
+++ b/src/app/directives/resizable.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, input, OnChanges, OnDestroy, OnInit, output, SimpleChanges } from '@angular/core';
+import { Directive, ElementRef, input, OnDestroy, OnInit, output } from '@angular/core';
export interface ResizeEvent {
width: number;
@@ -65,7 +65,7 @@ export class ResizableDirective implements OnInit, OnDestroy {
private createResizeHandles(): void {
const element = this.el.nativeElement;
- // TODO: Inconsistent approach - handles should be created as child elements but need higher z-index than content
+ // Inconsistent approach - handles should be created as child elements but need higher z-index than content
// Consider using a wrapper div or CSS-only approach with ::after/::before pseudo-elements
// Create handles for all 8 resize positions
diff --git a/src/app/features/auth/callback/callback.component.ts b/src/app/features/auth/callback/callback.component.ts
new file mode 100644
index 0000000..7e95182
--- /dev/null
+++ b/src/app/features/auth/callback/callback.component.ts
@@ -0,0 +1,23 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AuthService } from '../../../services/general/auth.service';
+
+@Component({
+ template: ` {
- let params: HttpParams = new HttpParams();
- params = params.append('limit', pageSize);
-
- if (fallback) {
- this.activeGateway = this.ipfsFallbacks[this.currentIpfsFallbackIndex];
- this.currentIpfsFallbackIndex = (this.currentIpfsFallbackIndex + 1) % this.ipfsFallbacks.length;
- if (!environment.production) {
- console.log("Switched to fallback gateway: " + this.activeGateway);
- }
- }
-
- const gateway = this.activeGateway;
-
- if (nextToken) {
- params = params.append('next', nextToken);
- }
-
- return this.httpClient.get(`${this.indexer_url}/v2/accounts/${this.corvid_wallet}/created-assets`, { params }).pipe(
- map(rawResponse => {
- const createdAssetsResponse: CreatedAssetsResponse = {
- currentRound: rawResponse['current-round'],
- nextToken: rawResponse['next-token'] ?? null,
- assets: rawResponse.assets.map((asset: any) => {
- let cid = this.extractCidFromReserveAddress(asset.params.reserve);
- const metadataIpfs = `${gateway}${cid}`;
-
- return {
- createdAtRound: asset['created-at-round'],
- index: asset.index,
- params: {
- clawback: asset.params.clawback,
- creator: asset.params.creator,
- decimals: asset.params.decimals,
- defaultFrozen: asset.params['default-frozen'],
- freeze: asset.params.freeze,
- manager: asset.params.manager,
- name: asset.params.name,
- nameb64: asset.params['name-b64'],
- reserve: asset.params.reserve,
- total: asset.params.total,
- unitName: asset.params['unit-name'],
- unitNameb64: asset.params['unit-name-b64'],
- url: asset.params.url,
- urlb64: asset.params['url-b64'],
- metadataIpfs: metadataIpfs
- }
- };
- })
- };
-
- return createdAssetsResponse;
- })
- );
+ // Remember to add API key to use the corvid backend
+ // Add "X-API-Key: API_KEY_HERE" header to the request
+ // const headers = { 'X-API-Key': 'API_KEY_HERE' };
+ // return this.httpClient.get(`${this.serverUrl}/nfts`, {headers});
+
+ /**
+ * Fetch Corvid NFTs from the corvid verify backend
+ * @returns Observable containing the fetched NFTs
+ */
+ getCorvidNFTsFromVerify(): Observable {
+ return this.httpClient.get(`${this.serverUrl}/nfts`);
}
- listCorvidNftsFromCreatedAssets(createdAssetsResponse: CreatedAssetsResponse): Observable {
- if (!createdAssetsResponse || createdAssetsResponse.assets.length === 0) {
- console.log('No assets found.');
- return of([]); // Return an observable of an empty array
- }
-
- const metadataUrls = createdAssetsResponse.assets.map(asset => asset.params.metadataIpfs);
- const metadataRequests: Observable[] = metadataUrls.map(url =>
- this.httpClient.get(url)
- );
-
- return forkJoin(metadataRequests).pipe(
- map(nfts => {
- nfts.forEach(nft => {
- nft.imageIpfsUrl = nft.image.replace('ipfs://', this.ipfsGateway);
- });
-
- return nfts;
- })
- );
+ /**
+ * Fetch a paginated list of Corvid NFTs from the corvid verify backend
+ * @param requestPage The page number to request
+ * @param pageSize The number of items per page
+ * @returns Observable containing the paginated NFTs
+ */
+ getCorvidNFTsPaginated(requestPage: number, pageSize: number): Observable {
+ const params = new HttpParams()
+ .append('page', requestPage.toString())
+ .append('per', pageSize.toString());
+
+ return this.httpClient.get(`${this.serverUrl}/nfts/paginated`, { params });
}
- private extractCidFromReserveAddress(reserveAddress: string): string {
- const decodedReserve = algosdk.decodeAddress(reserveAddress)?.publicKey;
- const multihash = Digest.create(0x12, decodedReserve);
- const cid = CID.create(1, 0x55, multihash); // 0x55 is the code for raw binary
- return cid.toString() ?? '';
- }
-
- private checkHolderConfig(walletAddress: string, corvidNFTs: AssetHoldings[]): Observable {
- // Get metadata from reserve addresses of all CorvidNfts of the user
- const reserveAddresses = corvidNFTs.map(nft => nft['asset-params'].reserve);
-
- return this.getMetadataFromReserveAddresses(reserveAddresses).pipe(
- map(nfts => {
- // Check if any NFT has the user's wallet address in its siteSettingsMetadata
- const nftWithConfig = nfts.find(nft => nft.extra?.siteSettingsMetadata?.walletAddress === walletAddress);
-
- // If found, load the holder settings
- if (nftWithConfig) {
- this.loadHolderSettings(nftWithConfig.extra.siteSettingsMetadata as SiteSettingsMetadata);
- }
-
- // Return Holder status since user has Corvid NFTs
- return MembershipStatus.NFT_HOLDER;
- })
- );
- }
-
- private getMetadataFromReserveAddresses(reserveAddresses: string[]): Observable {
- const metadataRequests: Observable[] = reserveAddresses.map(address =>
- this.httpClient.get(`${this.ipfsGateway}${this.extractCidFromReserveAddress(address)}`)
- );
-
- return forkJoin(metadataRequests).pipe(
- map(nfts => {
- nfts.forEach(nft => {
- nft.imageIpfsUrl = nft.image.replace('ipfs://', this.ipfsGateway);
- });
-
- return nfts;
- })
- );
- }
+ getWalletAssetsHolding(address: string): Observable {
+ const params = new HttpParams()
+ .append('wallet', address);
- // TODO: Make a database check of people with wallet but without any Corvid NFT
- // Check for purchased premium licenses etc
- private checkNonHolderLicense(walletAddress: string): Observable {
- // Implement your license checking logic here
- return of(MembershipStatus.UNLICENSED);
+ return this.httpClient.get(`${this.serverUrl}/nfts/holdings`, { params });
}
// Load holder settings into the application state
diff --git a/src/app/services/general/auth.service.ts b/src/app/services/general/auth.service.ts
new file mode 100644
index 0000000..2453e1c
--- /dev/null
+++ b/src/app/services/general/auth.service.ts
@@ -0,0 +1,109 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable, signal } from "@angular/core";
+import { Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+import { environment } from "../../../environments/environment.local";
+import { CorvidUser } from "../../interfaces/corvid-user.interface";
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthService {
+
+ private accessToken: string | null = null;
+ private readonly REFRESH_KEY = 'corvid_refresh_token';
+ private readonly VERIFY_KEY = environment.serverUrl;
+
+ private readonly _user = signal(null);
+ readonly user = this._user.asReadonly();
+
+ private http: HttpClient = inject(HttpClient);
+ private router: Router = inject(Router);
+
+ constructor() {}
+
+ /** Called on app init - restore session from refresh token if present */
+ async init(): Promise {
+ const refreshToken = localStorage.getItem(this.REFRESH_KEY);
+ if (refreshToken) {
+ try { await this.refresh(refreshToken); } catch { this.clearSession(); }
+ }
+ }
+
+ /** Starts the auth process to get the tokens */
+ async startVerification(): Promise {
+ const res = await firstValueFrom(
+ this.http.post<{ url: string }>(`${this.VERIFY_KEY}/api/v1/auth/start`, {
+ platform: 'web',
+ redirect_uri: `${environment.appUrl}/auth/callback`,
+ })
+ );
+
+ window.location.href = res.url; // Navigate to verify-app
+ }
+
+ /** Exchange a refresh token for a new access JWT. Rotates the refresh token. */
+ async refresh(refreshToken: string): Promise {
+ const res = await firstValueFrom(
+ this.http.post(`${this.VERIFY_KEY}/api/v1/auth/refresh`, {
+ refresh_token: refreshToken,
+ })
+ );
+
+ this.setSession(res.jwt, res.refresh_token);
+ }
+
+ /** Called from the callback component after redirect */
+ handleCallback(jwt: string, refreshToken: string): void {
+ this.setSession(jwt, refreshToken);
+ this.router.navigate(['/']);
+ }
+
+ getAccessToken(): string | null {
+ return this.accessToken;
+ }
+
+ getRefreshKey(): string {
+ return this.REFRESH_KEY;
+ }
+
+ async logout(): Promise {
+ const refreshToken = localStorage.getItem(this.REFRESH_KEY);
+ if (refreshToken) {
+ // Best-effort revoke - don't block logout if fails
+ this.http.post(`${this.VERIFY_KEY}/api/v1/auth/revoke`, { refresh_token: refreshToken }).subscribe({});
+ }
+
+ this.clearSession();
+ this.router.navigate(['/']);
+ }
+
+ private setSession(jwt: string, refreshToken: string): void {
+ this.accessToken = jwt;
+ localStorage.setItem(this.REFRESH_KEY, refreshToken);
+
+ const payload = this.decodeJwt(jwt);
+ this._user.set({
+ walletAddress: payload.sub,
+ tier: payload.tier,
+ balance: payload.balance,
+ platform: payload.platform,
+ expiresAt: new Date(payload.exp * 1000),
+ });
+ }
+
+ private clearSession(): void {
+ this.accessToken = null;
+ localStorage.removeItem(this.REFRESH_KEY);
+ this._user.set(null);
+ }
+
+ private decodeJwt(jwt: string): any {
+ return JSON.parse(atob(jwt.split('.')[1]));
+ }
+}
+
+interface TokenResponse {
+ jwt: string;
+ refresh_token: string;
+}
\ No newline at end of file
diff --git a/src/app/services/general/sound-effect.service.ts b/src/app/services/general/sound-effect.service.ts
index 03824d9..005174e 100644
--- a/src/app/services/general/sound-effect.service.ts
+++ b/src/app/services/general/sound-effect.service.ts
@@ -13,9 +13,13 @@ export class SoundEffectService {
// Private state
private soundFiles = [
- '/sfx/Mouse_Hit.mp3',
'/sfx/Click_Interaction.mp3'
];
+ // private soundFiles = [
+ // '/sfx/Mouse_Hit.mp3',
+ // '/sfx/Click_Interaction.mp3'
+ // ];
+
private audioPool: HTMLAudioElement[] = [];
private currentPoolIndex = 0;
private readonly POOL_SIZE = 3;
diff --git a/src/app/services/general/user.service.ts b/src/app/services/general/user.service.ts
index c299055..df4d259 100644
--- a/src/app/services/general/user.service.ts
+++ b/src/app/services/general/user.service.ts
@@ -1,24 +1,16 @@
import { HttpClient } from "@angular/common/http";
import { inject, Injectable } from "@angular/core";
+import { Observable } from "rxjs";
import { environment } from "../../../environments/environment.local";
import { SiteSettingsMetadata } from "../../interfaces/corvid-nft.interface";
import { SoundEffectService } from "./sound-effect.service";
import { ThemeService } from "./theme.service";
-import { Observable } from "rxjs";
@Injectable({
providedIn: 'root',
})
export class UserService {
-
- // TODO: Figure out the ipfs gateway and how to extract the CID from the ipft url from the api list response
- // https://nodely.io/swagger/index.html?url=/swagger/api/4160/indexer.oas3.yml#/common/makeHealthCheck ????????
- // IPFS GATEWAY https://nodely.io/ipfs-gateway ?????
- private corvid_asa_token_id: string = "3225439167";
- private indexer_url = 'https://mainnet-idx.4160.nodely.dev';
- private ipfsGateway = 'https://ipfs.algonode.xyz/ipfs/';
private algod_url: string = "https://mainnet-api.4160.nodely.dev";
- private corvid_wallet = environment.corvid_wallet;
private serverUrl: string = environment.serverUrl;
diff --git a/src/app/services/general/utils.service.ts b/src/app/services/general/utils.service.ts
index 206a335..4bf01bb 100644
--- a/src/app/services/general/utils.service.ts
+++ b/src/app/services/general/utils.service.ts
@@ -1,6 +1,6 @@
import { HttpParams } from "@angular/common/http";
import { Injectable } from "@angular/core";
-import {MatDialog} from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
import { Observable, of } from "rxjs";
@Injectable({
diff --git a/src/app/services/soundcloud.service.ts b/src/app/services/soundcloud.service.ts
index 18774ae..c9e7169 100644
--- a/src/app/services/soundcloud.service.ts
+++ b/src/app/services/soundcloud.service.ts
@@ -1,7 +1,7 @@
-import { HttpClient, HttpParams } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
-import { UtilsService } from "./general/utils.service";
import { Observable } from "rxjs";
+import { UtilsService } from "./general/utils.service";
// Use camelCase and remap it?
export interface SoundCloudRequestParams {
diff --git a/src/index.html b/src/index.html
index ea25d32..26f53cb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,7 +13,6 @@
-
- @if(!isAuthenticated()) {
+
diff --git a/src/app/components/windows/settings-window/settings-window.component.scss b/src/app/components/windows/settings-window/settings-window.component.scss
index a61a740..dbc5bc7 100644
--- a/src/app/components/windows/settings-window/settings-window.component.scss
+++ b/src/app/components/windows/settings-window/settings-window.component.scss
@@ -225,6 +225,53 @@
}
}
+// Picture Picker Overlay
+.picture-picker-overlay {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.picture-picker-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
+ background-color: var(--theme-primary-bg);
+ border-bottom: 2px solid var(--theme-border-color, #000);
+ flex-shrink: 0;
+
+ h3 {
+ margin: 0;
+ font-family: 'Press Start 2P', cursive;
+ font-size: 0.75rem;
+ color: var(--theme-primary-text);
+ }
+}
+
+.picture-picker-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ gap: 0.75rem;
+ padding: 1rem;
+ overflow-y: auto;
+ flex: 1;
+}
+
+.picture-picker-item {
+ cursor: pointer;
+ transition: transform 0.15s ease, opacity 0.15s ease;
+
+ &:hover {
+ transform: scale(1.05);
+ opacity: 0.85;
+ }
+
+ &:active {
+ transform: scale(0.97);
+ }
+}
+
// Volume Control Layout
.volume-control {
flex-wrap: wrap;
diff --git a/src/app/components/windows/settings-window/settings-window.component.ts b/src/app/components/windows/settings-window/settings-window.component.ts
index 10b28c3..68ea751 100644
--- a/src/app/components/windows/settings-window/settings-window.component.ts
+++ b/src/app/components/windows/settings-window/settings-window.component.ts
@@ -1,32 +1,48 @@
import { CommonModule } from '@angular/common';
-import { Component, OnInit, computed, inject, input, output, signal } from '@angular/core';
-import { PeraWalletConnect } from '@perawallet/connect';
+import { Component, computed, effect, inject, input, output, signal } from '@angular/core';
import { DraggableDirective } from '../../../directives/draggable.directive';
+import { ResizableDirective } from '../../../directives/resizable.directive';
import { WindowTypes } from '../../../enums/window-types.enum';
+import { CorvidNft } from '../../../interfaces/corvid-nft.interface';
+import { AssetService } from '../../../services/asset.service';
+import { AuthService } from '../../../services/general/auth.service';
import { SoundEffectService } from '../../../services/general/sound-effect.service';
+import { UtilsService } from '../../../services/general/utils.service';
+import { NftCardComponent } from '../../nft-card/nft-card.component';
import { PixelIconComponent } from '../../shared/pixel-icon/pixel-icon.component';
+import { CvdSliderComponent } from "../../slider/slider.component";
import { ThemeSwitcherComponent } from "../../theme-switcher/theme-switcher.component";
import { FloatWindow } from '../float-window/float-window.component';
-import { ResizableDirective } from '../../../directives/resizable.directive';
-import { CvdSliderComponent } from "../../slider/slider.component";
+
+export interface SettingsStorageObj {
+ walletAddress: string | null;
+ userImageB64: string;
+ volume: number;
+}
@Component({
selector: 'app-settings-window',
- imports: [CommonModule, ResizableDirective, DraggableDirective, ThemeSwitcherComponent, PixelIconComponent, CvdSliderComponent],
+ imports: [CommonModule, ResizableDirective, DraggableDirective, ThemeSwitcherComponent, PixelIconComponent, CvdSliderComponent, NftCardComponent],
templateUrl: 'settings-window.component.html',
styleUrls: ['settings-window.component.scss']
})
-export class SettingsWindowComponent extends FloatWindow implements OnInit {
+export class SettingsWindowComponent extends FloatWindow {
override title = input
+ @if(!authService.user()) {
![User Profile]()
+ ![User Profile]()
}
-
+
@@ -35,7 +51,7 @@
{{ title() }}
+ + }Completing verification...
` +}) +export class CallbackComponent implements OnInit { + private route: ActivatedRoute = inject(ActivatedRoute); + private auth: AuthService = inject(AuthService); + private router: Router = inject(Router); + + ngOnInit() { + const jwt = this.route.snapshot.queryParamMap.get('jwt'); + const refreshToken = this.route.snapshot.queryParamMap.get('refresh_token'); + + if (jwt && refreshToken) { + this.auth.handleCallback(jwt, refreshToken); + } else { + this.router.navigate(['/']); + } + } +} \ No newline at end of file diff --git a/src/app/interceptors/auth.interceptor.ts b/src/app/interceptors/auth.interceptor.ts new file mode 100644 index 0000000..2be42d0 --- /dev/null +++ b/src/app/interceptors/auth.interceptor.ts @@ -0,0 +1,34 @@ +import { HttpErrorResponse, HttpInterceptorFn } from "@angular/common/http"; +import { inject } from "@angular/core"; +import { catchError, from, switchMap, throwError } from "rxjs"; +import { AuthService } from "../services/general/auth.service"; + +/** Attaches the Bearer token to every request and transparently refreshes it on 401 */ +export const authInterceptor: HttpInterceptorFn = (req, next) => { + const auth = inject(AuthService); + const token = auth.getAccessToken(); + const REFRESH_KEY = auth.getRefreshKey(); + + const authedReq = token ? req.clone({ setHeaders: {Authorization: `Bearer ${token}`} }) : req; + + return next(authedReq).pipe( + catchError((error: HttpErrorResponse) => { + if (error.status === 401) { + const refreshToken = localStorage.getItem(REFRESH_KEY); + if (refreshToken) { + return from(auth.refresh(refreshToken)).pipe( + switchMap(() => { + const newToken = auth.getAccessToken(); + return next(req.clone({ setHeaders: { Authorization: `Bearer ${newToken}` } })) + }), + catchError(() => { + auth.logout(); + return throwError(() => error); + }) + ); + } + } + return throwError(() => error); + }) + ); +} \ No newline at end of file diff --git a/src/app/interfaces/corvid-nft-settings.ts b/src/app/interfaces/corvid-nft-settings.ts deleted file mode 100644 index b52e4c3..0000000 --- a/src/app/interfaces/corvid-nft-settings.ts +++ /dev/null @@ -1,10 +0,0 @@ -export interface CorvidNftSettings { - currentAccount: string; - source: "website" | "mono" | "corvidBot"; - - currentTheme: string; -} - -// meta_extra_data: { - -// } \ No newline at end of file diff --git a/src/app/interfaces/corvid-nft.interface.ts b/src/app/interfaces/corvid-nft.interface.ts index b131d6a..6273061 100644 --- a/src/app/interfaces/corvid-nft.interface.ts +++ b/src/app/interfaces/corvid-nft.interface.ts @@ -1,7 +1,9 @@ export interface CorvidNft { name: string; + assetId?: number; standard: string; image: string; + imageB64?: string; imageIpfsUrl?: string; image_mime_type: string; description: string; diff --git a/src/app/interfaces/corvid-user.interface.ts b/src/app/interfaces/corvid-user.interface.ts new file mode 100644 index 0000000..141bf3a --- /dev/null +++ b/src/app/interfaces/corvid-user.interface.ts @@ -0,0 +1,7 @@ +export interface CorvidUser { + walletAddress: string; // JWT sub + tier: string; + balance: number; + platform: string; + expiresAt: Date; +} \ No newline at end of file diff --git a/src/app/interfaces/pera-wallet-connect-options.ts b/src/app/interfaces/pera-wallet-connect-options.ts deleted file mode 100644 index 97bffdb..0000000 --- a/src/app/interfaces/pera-wallet-connect-options.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * ChainId determines which Algorand network your dApp uses. - * - MainNet: 416001 - * - TestNet: 416002 - * - BetaNet: 416003 - * - All Networks: 4160 - */ -export enum AlgorandChainIDs { - MainNet = 416001, - TestNet = 416002, - BetaNet = 416003, - All = 4160 -} - -export interface PeraWalletConnectOptions { - shouldShowSignTxnToast?: boolean; - chainId?: AlgorandChainIDs; -} \ No newline at end of file diff --git a/src/app/services/asset.service.ts b/src/app/services/asset.service.ts index bc755da..06de1d0 100644 --- a/src/app/services/asset.service.ts +++ b/src/app/services/asset.service.ts @@ -1,12 +1,8 @@ import { HttpClient, HttpParams } from '@angular/common/http'; import { inject, Injectable } from '@angular/core'; -import algosdk from "algosdk"; -import { CID } from 'multiformats/cid'; -import * as Digest from "multiformats/hashes/digest"; -import { forkJoin, map, Observable, of } from 'rxjs'; +import { Observable } from 'rxjs'; import { environment } from '../../environments/environment.local'; import { CorvidNft, SiteSettingsMetadata } from '../interfaces/corvid-nft.interface'; -import { AssetHoldings, CreatedAssetsResponse, FetchNFTsResponse } from '../interfaces/asset.interfaces'; import { SoundEffectService } from './general/sound-effect.service'; import { ThemeService } from './general/theme.service'; @@ -16,21 +12,21 @@ export enum MembershipStatus { UNLICENSED } +export interface FluentPage { + items: CorvidNft[]; + metadata: { + page: number; + per: number; + total: number; + }; +} + @Injectable({ providedIn: 'root', }) export class AssetService { - - // TODO: Change name of this service to asset service - private corvid_asa_token_id: string = "3225439167"; - private indexer_url = 'https://mainnet-idx.4160.nodely.dev'; - private ipfsGateway = 'https://ipfs.algonode.xyz/ipfs/'; - private algod_url: string = "https://mainnet-api.4160.nodely.dev"; private corvid_wallet = environment.corvid_wallet; - - private ipfsFallbacks = ["https://ipfs.io/ipfs/", "https://ipfs.filebase.io/ipfs/", "https://dweb.link/ipfs/"]; - private currentIpfsFallbackIndex = 0; - private activeGateway = this.ipfsGateway; + private serverUrl = environment.serverUrl; private httpClient: HttpClient = inject(HttpClient); private themeService: ThemeService = inject(ThemeService); @@ -38,132 +34,38 @@ export class AssetService { constructor() {} - listCreatedAssets(pageSize: number, nextToken: string | null, fallback: boolean = false): Observable