Skip to content

Commit d24aa09

Browse files
directcuteodirectcuteo
authored
Frontend - Web node not supported screen (#885)
1 parent 1564dfc commit d24aa09

File tree

13 files changed

+327
-16
lines changed

13 files changed

+327
-16
lines changed

‎frontend/src/app/app.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ export class AppGlobalErrorhandler implements ErrorHandler {
110110

111111
handleError(error: any): void {
112112
Sentry.captureException(error);
113+
if (typeof error === 'string') {
114+
error = new Error(error);
115+
}
113116
this.errorHandlerService.handleError(error);
114117
}
115118
}

‎frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<div class="header border-bottom fx-row-full-cent">
2+
<img class="mina-svg" src="assets/images/logo/text-logo-text.svg" height="40" width="346"/>
3+
</div>
4+
@if (isPhone) {
5+
<div class="phone-content flex-column flex-around text-center">
6+
<div class="w-100 fx-col-vert-cent">
7+
<div class="headline">Your device isn't supported</div>
8+
<div class="sub-headline tertiary">
9+
Unfortunately, iOS devices are not currently supported.
10+
</div>
11+
</div>
12+
13+
<div class="w-100 fx-col-vert-cent sub-headline">
14+
<div>Switch to one of the following platforms</div>
15+
<div class="img-wrapper flex-row align-center w-100 flex-center">
16+
<div class="fx-col-full-cent tertiary">
17+
<img src="assets/images/web-node-demo/windows.svg" alt="" class="mb-8">
18+
Windows
19+
</div>
20+
<div class="fx-col-full-cent tertiary">
21+
<img src="assets/images/web-node-demo/android.svg" alt="" class="mb-8">
22+
Android
23+
</div>
24+
<div class="fx-col-full-cent tertiary">
25+
<img src="assets/images/web-node-demo/macos.svg" alt="" class="mb-8">
26+
MacOS
27+
</div>
28+
</div>
29+
</div>
30+
31+
<div class="w-100 fx-col-vert-cent sub-headline">And use Chrome, Edge or Safari</div>
32+
</div>
33+
} @else {
34+
<div class="browser-content flex-column flex-center text-center">
35+
<div class="w-100 fx-col-vert-cent">
36+
<div class="headline mb-16">Your browser isn't supported</div>
37+
<div class="sub-headline tertiary">
38+
<div>To run a Mina node in your browser,</div>
39+
<div>we recommend Chrome or similar.</div>
40+
</div>
41+
</div>
42+
43+
<div class="browser w-100 fx-col-vert-cent sub-headline">
44+
<div class="img-wrapper flex-row align-center w-100 flex-between">
45+
<div class="fx-col-full-cent tertiary">
46+
<img src="assets/images/web-node-demo/chrome.svg" alt="" class="mb-8">
47+
Chrome
48+
</div>
49+
<div class="fx-col-full-cent tertiary">
50+
<img src="assets/images/web-node-demo/safari.svg" alt="" class="mb-8">
51+
Safari
52+
</div>
53+
<div class="fx-col-full-cent tertiary">
54+
<img src="assets/images/web-node-demo/edge.svg" alt="" class="mb-8">
55+
Edge
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
}

‎frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.header {
2+
height: 56px;
3+
4+
.mina-svg {
5+
height: 32px;
6+
}
7+
}
8+
9+
.phone-content,
10+
.browser-content {
11+
height: calc(100% - 56px);
12+
13+
.headline {
14+
font-size: 20px;
15+
line-height: 30px;
16+
margin-bottom: 8px;
17+
}
18+
19+
.img-wrapper {
20+
margin-top: 24px;
21+
gap: 30px;
22+
}
23+
24+
img {
25+
height: 44px;
26+
width: 44px;
27+
}
28+
29+
.sub-headline {
30+
font-size: 16px;
31+
}
32+
33+
.browser {
34+
margin-top: 64px;
35+
}
36+
}
37+
38+
.browser-content {
39+
max-width: 600px;
40+
41+
img {
42+
height: 56px;
43+
width: 56px;
44+
}
45+
}

‎frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'mina-web-node-not-supported',
5+
standalone: true,
6+
imports: [],
7+
templateUrl: './web-node-not-supported.component.html',
8+
styleUrl: './web-node-not-supported.component.scss',
9+
changeDetection: ChangeDetectionStrategy.OnPush,
10+
host: { class: 'h-100 flex-column align-center' },
11+
})
12+
export class WebNodeNotSupportedComponent {
13+
@Input() isPhone!: boolean;
14+
}

‎frontend/src/app/features/webnode/webnode.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<mina-web-node-initialization></mina-web-node-initialization>
1+
@if (supported) {
2+
<mina-web-node-initialization></mina-web-node-initialization>
3+
} @else {
4+
<mina-web-node-not-supported [isPhone]="isPhone"></mina-web-node-not-supported>
5+
}

‎frontend/src/app/features/webnode/webnode.component.ts‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,42 @@
1-
import { ChangeDetectionStrategy, Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
22
import { WebNodeInitializationComponent } from '@app/features/webnode/web-node-initialization/web-node-initialization.component';
3+
import { Platform } from '@angular/cdk/platform';
4+
import { WebNodeNotSupportedComponent } from '@app/features/webnode/web-node-not-supported/web-node-not-supported.component';
35

46
@Component({
57
selector: 'mina-webnode',
68
standalone: true,
79
imports: [
810
WebNodeInitializationComponent,
11+
WebNodeNotSupportedComponent,
912
],
1013
templateUrl: './webnode.component.html',
1114
styleUrl: './webnode.component.scss',
1215
changeDetection: ChangeDetectionStrategy.OnPush,
1316
})
14-
export class WebnodeComponent {
17+
export class WebnodeComponent implements OnInit {
1518

19+
supported: boolean = false;
20+
isPhone: boolean = false;
21+
22+
constructor(private platform: Platform) {}
23+
24+
ngOnInit(): void {
25+
this.checkIfDeviceIsSupported();
26+
}
27+
28+
private checkIfDeviceIsSupported(): void {
29+
if (this.platform.IOS) {
30+
this.supported = false;
31+
this.isPhone = true;
32+
return;
33+
}
34+
35+
if (this.platform.FIREFOX || this.platform.BLINK) {
36+
this.supported = false;
37+
return;
38+
}
39+
40+
this.supported = true;
41+
}
1642
}

‎frontend/src/assets/images/web-node-demo/android.svg‎

Lines changed: 23 additions & 0 deletions
Loading

‎frontend/src/assets/images/web-node-demo/chrome.svg‎

Lines changed: 26 additions & 0 deletions
Loading

‎frontend/src/assets/images/web-node-demo/edge.svg‎

Lines changed: 46 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)