Skip to content

Commit cf55603

Browse files
committed
Web node not supported iOS
1 parent 31730a8 commit cf55603

File tree

6 files changed

+64
-52
lines changed

6 files changed

+64
-52
lines changed

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

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,16 @@
22
<img class="mina-svg" src="assets/images/logo/text-logo-text.svg" height="40" width="346"/>
33
</div>
44
@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>
5+
<div class="phone-content flex-column align-center flex-center">
6+
<div class="ios fx-col-full-cent bg-warn-container f-400 warn-primary">iOS</div>
7+
<div class="ios-box w-100 fx-col-vert-cent text-center">
8+
<div class="headline">Your iOS {{ iOSVersion ?? '' }} isn't supported</div>
89
<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" (click)="addDevKey(1)">
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" (click)="addDevKey(2)">
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" (click)="addDevKey(3)">
26-
MacOS
27-
</div>
10+
To use the Web Node please update your device to the latest iOS version.
2811
</div>
2912
</div>
3013

31-
<div class="w-100 fx-col-vert-cent sub-headline">And use Chrome, Edge, Safari or Brave</div>
14+
<button class="learn-btn w-100 f-600 f-14 h-xl fx-col-full-cent" (click)="howToUpdate()">Learn how to update</button>
3215
</div>
3316
} @else {
3417
<div class="browser-content flex-column flex-center text-center">

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'openmina';
2+
13
.header {
24
height: 56px;
35

@@ -10,6 +12,27 @@
1012
.browser-content {
1113
height: calc(100% - 56px);
1214

15+
.ios {
16+
width: 96px;
17+
height: 96px;
18+
font-size: 30px;
19+
border-radius: 100px;
20+
}
21+
22+
.ios-box {
23+
margin-top: 40px;
24+
margin-bottom: 40px;
25+
padding: 0 32px;
26+
}
27+
28+
.learn-btn {
29+
background-color: $base-background;
30+
color: $base-primary;
31+
max-width: 330px;
32+
margin: 0 12px;
33+
filter: invert(1);
34+
}
35+
1336
.headline {
1437
font-size: 20px;
1538
line-height: 30px;

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
22
import { Platform } from '@angular/cdk/platform';
3-
import { sendSentryEvent } from '@shared/helpers/webnode.helper';
3+
import { iOSversion, sendSentryEvent } from '@shared/helpers/webnode.helper';
4+
import { safelyExecuteInBrowser } from '@openmina/shared';
45

56
const code = [1, 2, 3, 2];
67

@@ -19,6 +20,7 @@ export class WebNodeNotSupportedComponent {
1920

2021
@Output() bypassUnsupportedDevice = new EventEmitter<void>();
2122

23+
iOSVersion: string = iOSversion().join('.');
2224
devMode: boolean = false;
2325
private codeVerifier: number[] = [];
2426

@@ -41,13 +43,8 @@ export class WebNodeNotSupportedComponent {
4143
this.bypassUnsupportedDevice.emit();
4244
}
4345
}
44-
}
4546

46-
function iOSversion(): number {
47-
if (/iP(hone|od|ad)/.test(navigator.platform)) {
48-
// supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
49-
const v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
50-
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || '0', 10)][0];
47+
howToUpdate(): void {
48+
safelyExecuteInBrowser(() => window.open('https://support.apple.com/en-us/118575', '_blank'));
5149
}
52-
return 0;
5350
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
66
import { getMergedRoute, MergedRoute } from '@openmina/shared';
77
import { filter } from 'rxjs';
88
import { WebNodeService } from '@core/services/web-node.service';
9+
import { iOSversion } from '@shared/helpers/webnode.helper';
910

1011
@Component({
1112
selector: 'mina-webnode',
@@ -50,9 +51,8 @@ export class WebnodeComponent extends StoreDispatcher implements OnInit {
5051
}
5152

5253
private checkIfDeviceIsSupported(): void {
53-
5454
if (this.platform.IOS) {
55-
this.supported = false;
55+
this.supported = iOSversion()[0] >= 18;
5656
this.isPhone = true;
5757
return;
5858
}

frontend/src/app/shared/helpers/webnode.helper.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,12 @@ import { SeverityLevel } from '@sentry/angular';
44
export function sendSentryEvent(message: string, level: SeverityLevel = 'error'): void {
55
Sentry.captureEvent({ message: message, level, tags: { type: 'webnode' } });
66
}
7+
8+
export function iOSversion(): number[] {
9+
if (/iP(hone|od|ad)/.test(navigator.platform)) {
10+
// supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
11+
const v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
12+
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || '0', 10)];
13+
}
14+
return [0];
15+
}

frontend/src/environments/environment.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const environment: Readonly<MinaEnv> = {
44
production: false,
55
identifier: 'Dev FE',
66
canAddNodes: true,
7-
showWebNodeLandingPage: false,
7+
showWebNodeLandingPage: true,
88
globalConfig: {
99
features: {
1010
dashboard: [],
@@ -39,27 +39,27 @@ export const environment: Readonly<MinaEnv> = {
3939
// name: 'Producer-2',
4040
// url: 'https://staging-devnet-openmina-bp-2-dashboard.minaprotocol.network',
4141
// },
42-
{
43-
name: 'staging-devnet-bp-0',
44-
url: 'https://staging-devnet-openmina-bp-0.minaprotocol.network',
45-
},
46-
{
47-
name: 'staging-devnet-bp-1',
48-
url: 'https://staging-devnet-openmina-bp-1.minaprotocol.network',
49-
},
50-
{
51-
name: 'staging-devnet-bp-2',
52-
url: 'https://staging-devnet-openmina-bp-2.minaprotocol.network',
53-
},
54-
{
55-
name: 'staging-devnet-bp-3',
56-
url: 'https://staging-devnet-openmina-bp-3.minaprotocol.network',
57-
},
5842
// {
59-
// name: 'Web Node 1',
60-
// isWebNode: true,
43+
// name: 'staging-devnet-bp-0',
44+
// url: 'https://staging-devnet-openmina-bp-0.minaprotocol.network',
6145
// },
6246
// {
47+
// name: 'staging-devnet-bp-1',
48+
// url: 'https://staging-devnet-openmina-bp-1.minaprotocol.network',
49+
// },
50+
// {
51+
// name: 'staging-devnet-bp-2',
52+
// url: 'https://staging-devnet-openmina-bp-2.minaprotocol.network',
53+
// },
54+
// {
55+
// name: 'staging-devnet-bp-3',
56+
// url: 'https://staging-devnet-openmina-bp-3.minaprotocol.network',
57+
// },
58+
{
59+
name: 'Web Node 1',
60+
isWebNode: true,
61+
},
62+
// {
6363
// name: 'http://65.109.105.40:3000',
6464
// url: 'http://65.109.105.40:3000',
6565
// },

0 commit comments

Comments
 (0)