diff --git a/frontend/custom-sv-config.json b/frontend/custom-sv-config.json index f64f41be8..0f82a9da2 100644 --- a/frontend/custom-sv-config.json +++ b/frontend/custom-sv-config.json @@ -12,19 +12,26 @@ "dashboard": { "widgets": [ { - "component": "fees" + "component": "fees", + "mobileOrder": 4 }, { "component": "balance", + "mobileOrder": 1, "props": { "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo" } }, { - "component": "goggles" + "component": "twitter", + "mobileOrder": 5, + "props": { + "handle": "bitcoinofficesv" + } }, { "component": "address", + "mobileOrder": 2, "props": { "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo", "period": "1m" @@ -35,6 +42,7 @@ }, { "component": "addressTransactions", + "mobileOrder": 3, "props": { "address": "32ixEdVJWo3kmvJGMTZq5jAQVZZeuwnqzo" } diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html index 9180571a0..36a5e956c 100644 --- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html +++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.html @@ -4,7 +4,7 @@ @for (widget of widgets; track widget.component) { @switch (widget.component) { @case ('fees') { -
+
Transaction Fees
@@ -14,12 +14,12 @@
} @case ('difficulty') { -
+
} @case ('goggles') { -
+
@@ -48,7 +48,7 @@
} @case ('incoming') { -
+
@@ -93,7 +93,7 @@ } @case ('replacements') { -
+
@@ -140,7 +140,7 @@ } @case ('blocks') { -
+
@@ -184,7 +184,7 @@ } @case ('transactions') { -
+
Recent Transactions
@@ -224,13 +224,13 @@ } @case ('balance') { -
+
Treasury
} @case ('address') { -
+
@@ -244,7 +244,7 @@
} @case ('addressTransactions') { -
+
@@ -257,6 +257,22 @@
} + @case ('twitter') { +
+
+
+ +
X Timeline
+   + + + @defer { + + } +
+
+
+ } } }
diff --git a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts index 2847b6586..2ed6ed48d 100644 --- a/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts +++ b/frontend/src/app/components/custom-dashboard/custom-dashboard.component.ts @@ -57,6 +57,7 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni incomingGraphHeight: number = 300; graphHeight: number = 300; webGlEnabled = true; + isMobile: boolean = window.innerWidth <= 767.98; widgets; @@ -368,5 +369,6 @@ export class CustomDashboardComponent implements OnInit, OnDestroy, AfterViewIni this.goggleResolution = 86; this.graphHeight = 310; } + this.isMobile = window.innerWidth <= 767.98; } } diff --git a/frontend/src/app/components/twitter-widget/twitter-widget.component.html b/frontend/src/app/components/twitter-widget/twitter-widget.component.html new file mode 100644 index 000000000..d1e042d60 --- /dev/null +++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.html @@ -0,0 +1,16 @@ +@if (loading) { + +} @else if (error) { +
+ failed to load X timeline +
+} + + diff --git a/frontend/src/app/components/twitter-widget/twitter-widget.component.scss b/frontend/src/app/components/twitter-widget/twitter-widget.component.scss new file mode 100644 index 000000000..38a39c014 --- /dev/null +++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.scss @@ -0,0 +1,10 @@ +.spinner-wrapper, .error-wrapper { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/frontend/src/app/components/twitter-widget/twitter-widget.component.ts b/frontend/src/app/components/twitter-widget/twitter-widget.component.ts new file mode 100644 index 000000000..7ec865de7 --- /dev/null +++ b/frontend/src/app/components/twitter-widget/twitter-widget.component.ts @@ -0,0 +1,65 @@ +import { Component, Input, ChangeDetectionStrategy, SecurityContext } from '@angular/core'; +import { LanguageService } from '../../services/language.service'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; + +@Component({ + selector: 'app-twitter-widget', + templateUrl: './twitter-widget.component.html', + styleUrls: ['./twitter-widget.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TwitterWidgetComponent { + @Input() handle: string; + @Input() width = 300; + @Input() height = 400; + + loading: boolean = true; + error: boolean = false; + lang: string = 'en'; + + iframeSrc: SafeResourceUrl; + + constructor( + private languageService: LanguageService, + public sanitizer: DomSanitizer, + ) { + this.lang = this.languageService.getLanguage(); + this.setIframeSrc(); + } + + setIframeSrc(): void { + this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, + 'https://syndication.twitter.com/srv/timeline-profile/screen-name/bitcoinofficesv?creatorScreenName=mempool' + + '&dnt=true' + + '&embedId=twitter-widget-0' + + '&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D' + + '&frame=false' + + '&hideBorder=true' + + '&hideFooter=false' + + '&hideHeader=true' + + '&hideScrollBar=false' + + `&lang=${this.lang}` + + '&maxHeight=500px' + + '&origin=https%3A%2F%2Fmempool.space%2F' + // + '&sessionId=88f6d661d0dcca99c43c0a590f6a3e61c89226a9' + + '&showHeader=false' + + '&showReplies=false' + + '&siteScreenName=mempool' + + '&theme=dark' + + '&transparent=true' + + '&widgetsVersion=2615f7e52b7e0%3A1702314776716' + )); + } + + onReady(): void { + console.log('ready!'); + this.loading = false; + this.error = false; + } + + onFailed(): void { + console.log('failed!') + this.loading = false; + this.error = true; + } +} \ No newline at end of file diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 286ae5e48..529e53ff0 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -33,6 +33,7 @@ export interface Customization { dashboard: { widgets: { component: string; + mobileOrder?: number; props: { [key: string]: any }; }[]; }; diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 80d6ca3cd..7f52a1b60 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -112,6 +112,7 @@ import { ClockComponent } from '../components/clock/clock.component'; import { CalculatorComponent } from '../components/calculator/calculator.component'; import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe'; import { HttpErrorComponent } from '../shared/components/http-error/http-error.component'; +import { TwitterWidgetComponent } from '../components/twitter-widget/twitter-widget.component'; import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives'; @@ -224,6 +225,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir AccelerateCheckout, PendingStatsComponent, HttpErrorComponent, + TwitterWidgetComponent, ], imports: [ CommonModule, @@ -351,6 +353,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir AccelerateCheckout, PendingStatsComponent, HttpErrorComponent, + TwitterWidgetComponent, MempoolBlockOverviewComponent, ClockchainComponent,