From 2fbf667f550aa16279cb72d5a14b434860236c16 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Tue, 26 Nov 2024 10:53:18 +0200 Subject: [PATCH 01/18] feat(mempool-ui): adds initial component files --- .../repositories/AngorProjectRepository.ts | 3 ++- frontend/src/app/angor/angor.component.html | 10 ++++++++ frontend/src/app/angor/angor.component.scss | 0 frontend/src/app/angor/angor.component.ts | 25 +++++++++++++++++++ .../src/app/interfaces/angor.interface.ts | 7 ++++++ frontend/src/app/services/api.service.ts | 12 ++++++++- frontend/src/app/shared/shared.module.ts | 2 ++ 7 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 frontend/src/app/angor/angor.component.html create mode 100644 frontend/src/app/angor/angor.component.scss create mode 100644 frontend/src/app/angor/angor.component.ts create mode 100644 frontend/src/app/interfaces/angor.interface.ts diff --git a/backend/src/repositories/AngorProjectRepository.ts b/backend/src/repositories/AngorProjectRepository.ts index 4531f58dfd..1bfe2eb3b4 100644 --- a/backend/src/repositories/AngorProjectRepository.ts +++ b/backend/src/repositories/AngorProjectRepository.ts @@ -250,6 +250,7 @@ class AngorProjectRepository { /** * Provides Angor projects. * @param limit - maximum amount of items to return (not more than 50). + * @param order - return items in ascending or descending order * @param offset - selection offset. * @returns - promise that resolves into an array of objects that confirm Project interface. */ @@ -260,7 +261,7 @@ class AngorProjectRepository { limit = maxLimit; } - const order = offset === undefined ? 'DESC' : 'ASC'; + const order = 'DESC'; try { const query = `SELECT id, founder_key, npub, created_on_block, txid diff --git a/frontend/src/app/angor/angor.component.html b/frontend/src/app/angor/angor.component.html new file mode 100644 index 0000000000..04e75bc585 --- /dev/null +++ b/frontend/src/app/angor/angor.component.html @@ -0,0 +1,10 @@ + + + + + Title + + + + + diff --git a/frontend/src/app/angor/angor.component.scss b/frontend/src/app/angor/angor.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frontend/src/app/angor/angor.component.ts b/frontend/src/app/angor/angor.component.ts new file mode 100644 index 0000000000..50a9e6b3c4 --- /dev/null +++ b/frontend/src/app/angor/angor.component.ts @@ -0,0 +1,25 @@ +import { Component, HostBinding, OnInit } from "@angular/core"; +import { Observable } from "rxjs"; +import { AngorProject } from "../interfaces/angor.interface"; +import { ApiService } from "../services/api.service"; + +@Component({ + selector: 'app-angor', + templateUrl: './angor.component.html', + styleUrls: ['./angor.component.css'] +}) +export class AngorComponent implements OnInit { + @HostBinding('attr.dir') dir = 'ltr'; + + angorProjects$: Observable = undefined; + isLoading = true; + + + constructor( + private apiService: ApiService, + ) {} + + ngOnInit(): void { + this.angorProjects$ = this.apiService.getAngorProjects$(); + } +} diff --git a/frontend/src/app/interfaces/angor.interface.ts b/frontend/src/app/interfaces/angor.interface.ts new file mode 100644 index 0000000000..582b66190a --- /dev/null +++ b/frontend/src/app/interfaces/angor.interface.ts @@ -0,0 +1,7 @@ +export interface AngorProject { + founderKey: string; + nostrPubKey: string; + projectIdentified: string; + createdOnBlock: number; + trxId: string; +} diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 3c8cf8807d..b73373f22c 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -9,6 +9,7 @@ import { Conversion } from '@app/services/price.service'; import { StorageService } from '@app/services/storage.service'; import { WebsocketResponse } from '@interfaces/websocket.interface'; import { TxAuditStatus } from '@components/transaction/transaction.component'; +import { AngorProject } from "@/interfaces/angor.interface"; @Injectable({ providedIn: 'root' @@ -278,7 +279,7 @@ export class ApiService { return response; }) ); - } + } getPoolStats$(slug: string): Observable { return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${slug}`) @@ -581,4 +582,13 @@ export class ApiService { getBlockSummaryLoaded(hash) { return this.blockSummaryLoaded[hash]; } + + getAngorProjects$(): Observable { + const queryParams = new URLSearchParams(); + queryParams.append('limit', '25'); + const queryString = queryParams.toString(); + return this.httpClient.get( + this.apiBaseUrl + this.apiBasePath + '/api/v1/query/Angor/projects' + queryString + ); + } } diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index a855f11b50..8bbfc4cff0 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -120,6 +120,7 @@ import { TwitterLogin } from '@components/twitter-login/twitter-login.component' import { BitcoinInvoiceComponent } from '@components/bitcoin-invoice/bitcoin-invoice.component'; import { OnlyVsizeDirective, OnlyWeightDirective } from '@app/shared/components/weight-directives/weight-directives'; +import { AngorComponent } from "../angor/angor.component"; @NgModule({ declarations: [ @@ -236,6 +237,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from '@app/shared/components/ FaucetComponent, TwitterLogin, BitcoinInvoiceComponent, + AngorComponent ], imports: [ CommonModule, From fa1191380f52105c33458132205d614dc90b8014 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Wed, 27 Nov 2024 14:12:58 +0200 Subject: [PATCH 02/18] fix: interface importing --- frontend/src/app/services/api.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index b73373f22c..a8bb8cc553 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -9,7 +9,7 @@ import { Conversion } from '@app/services/price.service'; import { StorageService } from '@app/services/storage.service'; import { WebsocketResponse } from '@interfaces/websocket.interface'; import { TxAuditStatus } from '@components/transaction/transaction.component'; -import { AngorProject } from "@/interfaces/angor.interface"; +import { AngorProject } from '@interfaces/angor.interface'; @Injectable({ providedIn: 'root' From f1c08ea154651af8a7ef469d371d4021b4331644 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Wed, 27 Nov 2024 15:42:10 +0200 Subject: [PATCH 03/18] chore: local dev setup --- frontend/proxy.conf.local-esplora.js | 12 ++++----- frontend/proxy.conf.local.js | 12 ++++----- frontend/src/app/angor/angor.component.html | 26 +++++++++++------- frontend/src/app/angor/angor.component.scss | 30 +++++++++++++++++++++ 4 files changed, 59 insertions(+), 21 deletions(-) diff --git a/frontend/proxy.conf.local-esplora.js b/frontend/proxy.conf.local-esplora.js index 9059102942..32417ead3c 100644 --- a/frontend/proxy.conf.local-esplora.js +++ b/frontend/proxy.conf.local-esplora.js @@ -4,7 +4,7 @@ const FRONTEND_CONFIG_FILE_NAME = 'mempool-frontend-config.json'; let configContent; -// Read frontend config +// Read frontend config try { const rawConfig = fs.readFileSync(FRONTEND_CONFIG_FILE_NAME); configContent = JSON.parse(rawConfig); @@ -24,7 +24,7 @@ if (configContent && configContent.BASE_MODULE === 'liquid') { PROXY_CONFIG.push(...[ { context: ['/liquid/api/v1/**'], - target: `http://127.0.0.1:8999`, + target: `http://127.0.0.1:8998`, secure: false, ws: true, changeOrigin: true, @@ -45,7 +45,7 @@ if (configContent && configContent.BASE_MODULE === 'liquid') { }, { context: ['/liquidtestnet/api/v1/**'], - target: `http://127.0.0.1:8999`, + target: `http://127.0.0.1:8998`, secure: false, ws: true, changeOrigin: true, @@ -70,7 +70,7 @@ if (configContent && configContent.BASE_MODULE === 'liquid') { PROXY_CONFIG.push(...[ { context: ['/testnet/api/v1/lightning/**'], - target: `http://127.0.0.1:8999`, + target: `http://127.0.0.1:8998`, secure: false, changeOrigin: true, proxyTimeout: 30000, @@ -100,7 +100,7 @@ PROXY_CONFIG.push(...[ }, { context: ['/api/v1/**'], - target: `http://127.0.0.1:8999`, + target: `http://127.0.0.1:8998`, secure: false, ws: true, changeOrigin: true, @@ -120,4 +120,4 @@ PROXY_CONFIG.push(...[ console.log(PROXY_CONFIG); -module.exports = PROXY_CONFIG; \ No newline at end of file +module.exports = PROXY_CONFIG; diff --git a/frontend/proxy.conf.local.js b/frontend/proxy.conf.local.js index e7bfeee70c..05221cc2f7 100644 --- a/frontend/proxy.conf.local.js +++ b/frontend/proxy.conf.local.js @@ -4,7 +4,7 @@ const FRONTEND_CONFIG_FILE_NAME = 'mempool-frontend-config.json'; let configContent; -// Read frontend config +// Read frontend config try { const rawConfig = fs.readFileSync(FRONTEND_CONFIG_FILE_NAME); configContent = JSON.parse(rawConfig); @@ -35,7 +35,7 @@ if (configContent && configContent.BASE_MODULE === 'liquid') { }, { context: ['/liquid/api/**'], - target: `http://localhost:8999`, + target: `http://localhost:8998`, secure: false, changeOrigin: true, proxyTimeout: 30000, @@ -70,7 +70,7 @@ if (configContent && configContent.BASE_MODULE === 'liquid') { PROXY_CONFIG.push(...[ { context: ['/testnet/api/v1/lightning/**'], - target: `http://localhost:8999`, + target: `http://localhost:8998`, secure: false, changeOrigin: true, proxyTimeout: 30000, @@ -88,7 +88,7 @@ PROXY_CONFIG.push(...[ }, { context: ['/api/v1/**'], - target: `http://localhost:8999`, + target: `http://localhost:8998`, secure: false, ws: true, changeOrigin: true, @@ -96,7 +96,7 @@ PROXY_CONFIG.push(...[ }, { context: ['/api/**'], - target: `http://localhost:8999`, + target: `http://localhost:8998`, secure: false, changeOrigin: true, proxyTimeout: 30000, @@ -108,4 +108,4 @@ PROXY_CONFIG.push(...[ console.log(PROXY_CONFIG); -module.exports = PROXY_CONFIG; \ No newline at end of file +module.exports = PROXY_CONFIG; diff --git a/frontend/src/app/angor/angor.component.html b/frontend/src/app/angor/angor.component.html index 04e75bc585..8b4a039269 100644 --- a/frontend/src/app/angor/angor.component.html +++ b/frontend/src/app/angor/angor.component.html @@ -1,10 +1,18 @@ - - - - - Title - - +
- - +
+ +
+
+
+ +
Recent Blocks
+   + + +
+
+
+
+ +
diff --git a/frontend/src/app/angor/angor.component.scss b/frontend/src/app/angor/angor.component.scss index e69de29bb2..dee777e089 100644 --- a/frontend/src/app/angor/angor.component.scss +++ b/frontend/src/app/angor/angor.component.scss @@ -0,0 +1,30 @@ +.dashboard-container { + text-align: center; + margin-top: 0.5rem; + .col { + margin-bottom: 1.5rem; + } +} + +.card { + background-color: var(--bg); +} + +.card-title { + font-size: 1rem; + color: var(--title-fg); +} +.card-title > a { + color: var(--title-fg); +} + +.card-body.pool-ranking { + padding: 1.25rem 0.25rem 0.75rem 0.25rem; +} +.card-text { + font-size: 22px; +} + +.card-text { + font-size: 22px; +} From 7e02aca903db99ebf2af4b736260f16e522735d4 Mon Sep 17 00:00:00 2001 From: NostrDev Date: Tue, 3 Dec 2024 16:23:06 +0200 Subject: [PATCH 04/18] adds angor ui components and interfaces --- frontend/src/app/angor/angor.component.html | 18 - frontend/src/app/angor/angor.component.scss | 30 -- frontend/src/app/angor/angor.module.ts | 19 + .../src/app/angor/angor.routing.module.ts | 28 ++ .../app/angor/project/project.component.html | 82 +++++ .../app/angor/project/project.component.scss | 43 +++ .../app/angor/project/project.component.ts | 48 +++ .../projects-list.component.html | 45 +++ .../projects-list.component.scss | 334 ++++++++++++++++++ .../projects-list.component.ts} | 11 +- .../master-page/master-page.component.html | 4 + .../src/app/interfaces/angor.interface.ts | 18 +- frontend/src/app/master-page.module.ts | 5 + frontend/src/app/services/api.service.ts | 16 +- frontend/src/app/shared/shared.module.ts | 73 +++- 15 files changed, 713 insertions(+), 61 deletions(-) delete mode 100644 frontend/src/app/angor/angor.component.html delete mode 100644 frontend/src/app/angor/angor.component.scss create mode 100644 frontend/src/app/angor/angor.module.ts create mode 100644 frontend/src/app/angor/angor.routing.module.ts create mode 100644 frontend/src/app/angor/project/project.component.html create mode 100644 frontend/src/app/angor/project/project.component.scss create mode 100644 frontend/src/app/angor/project/project.component.ts create mode 100644 frontend/src/app/angor/projects-list/projects-list.component.html create mode 100644 frontend/src/app/angor/projects-list/projects-list.component.scss rename frontend/src/app/angor/{angor.component.ts => projects-list/projects-list.component.ts} (57%) diff --git a/frontend/src/app/angor/angor.component.html b/frontend/src/app/angor/angor.component.html deleted file mode 100644 index 8b4a039269..0000000000 --- a/frontend/src/app/angor/angor.component.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- -
-
-
- -
Recent Blocks
-   - - -
-
-
-
- -
diff --git a/frontend/src/app/angor/angor.component.scss b/frontend/src/app/angor/angor.component.scss deleted file mode 100644 index dee777e089..0000000000 --- a/frontend/src/app/angor/angor.component.scss +++ /dev/null @@ -1,30 +0,0 @@ -.dashboard-container { - text-align: center; - margin-top: 0.5rem; - .col { - margin-bottom: 1.5rem; - } -} - -.card { - background-color: var(--bg); -} - -.card-title { - font-size: 1rem; - color: var(--title-fg); -} -.card-title > a { - color: var(--title-fg); -} - -.card-body.pool-ranking { - padding: 1.25rem 0.25rem 0.75rem 0.25rem; -} -.card-text { - font-size: 22px; -} - -.card-text { - font-size: 22px; -} diff --git a/frontend/src/app/angor/angor.module.ts b/frontend/src/app/angor/angor.module.ts new file mode 100644 index 0000000000..08aa6f982d --- /dev/null +++ b/frontend/src/app/angor/angor.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from "@angular/core"; +import { ProjectsListComponent } from "./projects-list/projects-list.component"; +import { ProjectComponent } from "./project/project.component"; +import { CommonModule } from "@angular/common"; +import { SharedModule } from "../shared/shared.module"; +import { AngorRoutingModule } from "@app/angor/angor.routing.module"; + +@NgModule({ + declarations: [ + ProjectsListComponent, + ProjectComponent + ], + imports: [ + CommonModule, + SharedModule, + AngorRoutingModule + ] +}) +export class AngorModule{ } diff --git a/frontend/src/app/angor/angor.routing.module.ts b/frontend/src/app/angor/angor.routing.module.ts new file mode 100644 index 0000000000..b9af2a7d9f --- /dev/null +++ b/frontend/src/app/angor/angor.routing.module.ts @@ -0,0 +1,28 @@ +import { RouterModule, Routes } from "@angular/router"; +import { ProjectsListComponent } from "./projects-list/projects-list.component"; +import { ProjectComponent } from "./project/project.component"; +import { NgModule } from "@angular/core"; + +const browserWindow = window || {}; + +const routes: Routes = [ + { + path: '', + pathMatch: 'full', + redirectTo: 'projects' + }, + { + path: 'projects', + component: ProjectsListComponent + }, + { + path: 'projects/:projectId', + component: ProjectComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], +}) +export class AngorRoutingModule { } + diff --git a/frontend/src/app/angor/project/project.component.html b/frontend/src/app/angor/project/project.component.html new file mode 100644 index 0000000000..41f5a3aabd --- /dev/null +++ b/frontend/src/app/angor/project/project.component.html @@ -0,0 +1,82 @@ +
+
+ +

Angor Project

+ + + + + + + + +
+ + +
+
+
+ + + + + + + + + + + + + + + +
Total Investment{{stats.amountInvested / 100000000 | number: '1.2-2'}} BTC
Total Spent By Founder{{stats.amountSpentSoFarByFounder / 100000000 | number: '1.2-2'}} BTC
Total Investors{{stats.investorCount}}
+
+
+ + + + + + + + + + + +
Withdrawn Amount{{stats.amountInPenalties / 100000000 | number: '1.2-2'}} BTC
Number of Rescinded Investments{{stats.countInPenalties}}
+
+
+
+ + +
+ + + + + + + + + + + + + +
Investment AmountTransaction IDInvestor Pubkey
{{investment.totalAmount / 100000000 | number: '1.2-2'}} BTC + + + + + {{investment.investorPublicKey}} + +
+
+ +
diff --git a/frontend/src/app/angor/project/project.component.scss b/frontend/src/app/angor/project/project.component.scss new file mode 100644 index 0000000000..c661c6ea56 --- /dev/null +++ b/frontend/src/app/angor/project/project.component.scss @@ -0,0 +1,43 @@ +.title-block { + flex-wrap: wrap; + align-items: baseline; + @media (min-width: 650px) { + flex-direction: row; + } + h1 { + margin: 0rem; + margin-right: 15px; + line-height: 1; + } +} + +.angor-link { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: baseline; + width: 0; + max-width: 100%; + margin-right: 0px; + margin-bottom: 0px; + margin-top: 8px; + @media (min-width: 651px) { + flex-grow: 1; + margin-bottom: 0px; + margin-right: 1em; + top: 1px; + position: relative; + } + @media (max-width: 650px) { + width: 100%; + order: 3; + + .angor-id { + width: 200px; + min-width: 200px; + flex-grow: 1; + } + } +} + + diff --git a/frontend/src/app/angor/project/project.component.ts b/frontend/src/app/angor/project/project.component.ts new file mode 100644 index 0000000000..7944de0d82 --- /dev/null +++ b/frontend/src/app/angor/project/project.component.ts @@ -0,0 +1,48 @@ +import { Component, OnInit } from "@angular/core"; +import { Observable } from "rxjs"; +import { AngorProjectInvestment, AngorProjectStats } from "@interfaces/angor.interface"; +import { ActivatedRoute } from "@angular/router"; +import { ApiService } from "@app/services/api.service"; +import { switchMap } from "rxjs/operators"; + +@Component({ + selector: 'app-project', + templateUrl: './project.component.html', + styleUrls: ['project.component.scss'] +}) +export class ProjectComponent implements OnInit { + angorId$ = this.route.paramMap; + projectStats$: Observable | null = null; + projectInvestments$: Observable | null = null; + + constructor( + private route: ActivatedRoute, + private apiService: ApiService, + ) {} + + ngOnInit() { + this.projectStats$ = this.route.paramMap.pipe( + switchMap(params => { + const angorId = params.get('projectId'); + if (angorId) { + return this.apiService.getAngorProjectStats$(angorId); + } else { + throw new Error("Project ID is missing"); + } + }) + ); + + this.projectInvestments$ = this.route.paramMap.pipe( + switchMap(params => { + const angorId = params.get('projectId'); + if (angorId) { + return this.apiService.getAngorProjectInvestments(angorId); + } else { + throw new Error("Project ID is missing"); + } + }) + ); + } + + +} diff --git a/frontend/src/app/angor/projects-list/projects-list.component.html b/frontend/src/app/angor/projects-list/projects-list.component.html new file mode 100644 index 0000000000..f33919f9ad --- /dev/null +++ b/frontend/src/app/angor/projects-list/projects-list.component.html @@ -0,0 +1,45 @@ +
+ +
+ +
+
+
+
Angor Projects
+ + + + + + + + + + + + + +
Angor IDBlockFounding Transaction
+ + + + + {{ project.createdOnBlock }} + + + + +
+ +
+
+
+
+ + +
+ No Angor Projects were found. +
+ + +
diff --git a/frontend/src/app/angor/projects-list/projects-list.component.scss b/frontend/src/app/angor/projects-list/projects-list.component.scss new file mode 100644 index 0000000000..39bd11b67a --- /dev/null +++ b/frontend/src/app/angor/projects-list/projects-list.component.scss @@ -0,0 +1,334 @@ +.dashboard-container { + text-align: center; + margin-top: 0.5rem; + .col { + margin-bottom: 1.5rem; + } +} + +.card { + background-color: var(--bg); + height: 100%; +} + +.card-title { + color: var(--title-fg); + font-size: 1rem; +} + +.skeleton-loader { + max-width: 100%; +} + +.more-padding { + padding: 18px; +} + +.projects { + width: 100%; + text-align: center; + table-layout: fixed; + tr, td, th { + border: 0px; + padding-top: 0.71rem !important; + padding-bottom: 0.75rem !important; + } + td { + overflow:hidden; + } + .table-cell-satoshis { + display: none; + text-align: right; + @media (min-width: 576px) { + display: table-cell; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 1100px) { + display: table-cell; + } + } + .table-cell-fiat { + display: none; + text-align: right; + @media (min-width: 485px) { + display: table-cell; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: table-cell; + } + } + .table-cell-created-on { + text-align: center; + } +} +.skeleton-loader-transactions { + max-width: 250px; + position: relative; + top: 2px; + margin-bottom: -3px; + height: 18px; +} + +.lastest-blocks-table { + width: 100%; + text-align: left; + tr, td, th { + border: 0px; + padding-top: 0.65rem !important; + padding-bottom: 0.7rem !important; + } + .table-cell-height { + width: 15%; + } + .table-cell-mined { + width: 35%; + text-align: left; + } + .table-cell-transaction-count { + display: none; + text-align: right; + width: 20%; + display: table-cell; + } + .table-cell-size { + display: none; + text-align: center; + width: 30%; + @media (min-width: 485px) { + display: table-cell; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: table-cell; + } + } +} + +.lastest-replacements-table { + width: 100%; + text-align: left; + table-layout:fixed; + tr, td, th { + border: 0px; + padding-top: 0.71rem !important; + padding-bottom: 0.75rem !important; + } + td { + overflow:hidden; + width: 25%; + } + .table-cell-txid { + width: 25%; + text-align: center; + } + .table-cell-old-fee { + width: 25%; + text-align: end; + + @media(max-width: 1080px) { + display: none; + } + } + .table-cell-new-fee { + width: 20%; + text-align: end; + } + .table-cell-badges { + width: 23%; + padding-right: 0; + padding-left: 5px; + text-align: end; + + .badge { + margin-left: 5px; + } + } +} + +.mempool-graph { + height: 255px; + @media (min-width: 768px) { + height: 285px; + } + @media (min-width: 992px) { + height: 370px; + } +} +.loadingGraphs{ + height: 250px; + display: grid; + place-items: center; +} + +.inc-tx-progress-bar { + max-width: 250px; + .progress-bar { + padding: 4px; + } +} + +.terms-of-service { + margin-top: 1rem; +} + +.small-bar { + height: 8px; + top: -4px; + max-width: 120px; +} + +.loading-container { + min-height: 76px; +} + +.main-title { + position: relative; + color: var(--fg); + opacity: var(--opacity); + margin-top: -13px; + font-size: 10px; + text-transform: uppercase; + font-weight: 500; + text-align: center; + padding-bottom: 3px; +} + +.card-wrapper { + .card { + height: auto !important; + } + .card-body { + display: flex; + flex: inherit; + text-align: center; + flex-direction: column; + justify-content: space-around; + padding: 22px 20px; + &.liquid { + height: 124.5px; + } + } + .less-padding { + padding: 20px 20px; + } +} + +.retarget-sign { + margin-right: -3px; + font-size: 14px; + top: -2px; + position: relative; +} + +.previous-retarget-sign { + margin-right: -2px; + font-size: 10px; +} + +.assetIcon { + width: 40px; + height: 40px; +} + +.asset-title { + text-align: left; + vertical-align: middle; +} + +.asset-icon { + width: 65px; + height: 65px; + vertical-align: middle; +} + +.circulating-amount { + text-align: right; + width: 100%; + vertical-align: middle; +} + +.clear-link { + color: white; +} + +.pool-name { + display: inline-block; + vertical-align: text-top; + padding-left: 10px; +} + +.title-link, .title-link:hover, .title-link:focus, .title-link:active { + display: block; + margin-bottom: 10px; + text-decoration: none; + color: inherit; +} + +.mempool-block-wrapper { + max-height: 410px; + max-width: 410px; + margin: auto; + + @media (min-width: 768px) { + max-height: 344px; + max-width: 344px; + } + @media (min-width: 992px) { + max-height: 410px; + max-width: 410px; + } +} + +.goggle-badge { + margin: 6px 5px 8px; + background: none; + border: solid 2px var(--primary); + cursor: pointer; + + &.active { + background: var(--primary); + } +} + +.btn-xs { + padding: 0.35rem 0.5rem; + font-size: 12px; +} + +.quick-filter { + margin-top: 5px; + margin-bottom: 6px; +} + +.card-liquid { + background-color: var(--bg); + height: 418px; + @media (min-width: 992px) { + height: 512px; + } + &.smaller { + height: 408px; + } +} + +.card-title-liquid { + padding-top: 20px; + margin-left: 10px; +} + +.in-progress-message { + position: relative; + color: var(--fg); + opacity: var(--opacity); + margin-top: 20px; + text-align: center; + padding-bottom: 3px; + font-weight: 500; +} diff --git a/frontend/src/app/angor/angor.component.ts b/frontend/src/app/angor/projects-list/projects-list.component.ts similarity index 57% rename from frontend/src/app/angor/angor.component.ts rename to frontend/src/app/angor/projects-list/projects-list.component.ts index 50a9e6b3c4..1b66a1d975 100644 --- a/frontend/src/app/angor/angor.component.ts +++ b/frontend/src/app/angor/projects-list/projects-list.component.ts @@ -1,17 +1,18 @@ import { Component, HostBinding, OnInit } from "@angular/core"; import { Observable } from "rxjs"; -import { AngorProject } from "../interfaces/angor.interface"; -import { ApiService } from "../services/api.service"; +import { AngorProject } from "../../interfaces/angor.interface"; +import { ApiService } from "../../services/api.service"; @Component({ selector: 'app-angor', - templateUrl: './angor.component.html', - styleUrls: ['./angor.component.css'] + templateUrl: './projects-list.component.html', + styleUrls: ['projects-list.component.scss'] }) -export class AngorComponent implements OnInit { +export class ProjectsListComponent implements OnInit { @HostBinding('attr.dir') dir = 'ltr'; angorProjects$: Observable = undefined; + nonEmptyProjects: boolean = true; isLoading = true; diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 557529eef3..c53780f19f 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -90,6 +90,10 @@ +