gnosis theme and easy network switcher on fresh install

src/app/components/help/help.component.html

@@ -28,13 +28,21 @@
 		<ion-icon slot="start" name="log-in-outline"></ion-icon>
 		<ion-label>Or login with {{ api.getHostName() }} </ion-label>
 	</ion-item>
+
+	<ion-item lines="none" (click)="switchNetwork()">
+		<ion-icon slot="start" name="repeat-outline"></ion-icon>
+		<ion-label
+			>{{ api.getNetwork().name }} Network
+			<span style="padding-left: 6px; opacity: 0.6; font-size: 0.9rem">- {{ isGnosis ? 'Ethereum' : 'Gnosis' }} Network</span></ion-label
+		>
+	</ion-item>
 </ion-list>
 
 <ion-list-header class="first-item-group">
 	<ion-label>Guides & Help</ion-label>
 </ion-list-header>
 
-<ion-list *ngIf="!api.isGnosis; else gnosisFAQ">
+<ion-list *ngIf="!isGnosis; else gnosisFAQ">
 	<ion-item lines="none" (click)="openBrowser('https://launchpad.ethereum.org/faq')">
 		<ion-icon slot="start" name="bulb-outline"></ion-icon>
 		<ion-label>Staking Guide & FAQ</ion-label>
@@ -79,7 +87,7 @@
 	<ion-label>How to set up a Validator</ion-label>
 </ion-list-header>
 
-<ion-list *ngIf="!api.isGnosis; else gnosisSetupGuides">
+<ion-list *ngIf="!isGnosis; else gnosisSetupGuides">
 	<ion-item lines="none" (click)="openBrowser('https://someresat.medium.com/guide-to-staking-on-ethereum-ubuntu-lighthouse-773f5d982e03')">
 		<ion-icon slot="start" name="bulb-outline"></ion-icon>
 		<ion-label>Setup Guide for Lighthouse</ion-label>

src/app/components/help/help.component.ts

@@ -26,6 +26,12 @@ import { ValidatorUtils } from 'src/app/utils/ValidatorUtils'
 
 import { Browser } from '@capacitor/browser'
 import { ApiService } from 'src/app/services/api.service'
+import { changeNetwork } from 'src/app/tab-preferences/tab-preferences.page'
+import { UnitconvService } from 'src/app/services/unitconv.service'
+import { NotificationBase } from 'src/app/tab-preferences/notification-base'
+import ThemeUtils from 'src/app/utils/ThemeUtils'
+import { AlertService } from 'src/app/services/alert.service'
+import { MerchantUtils } from 'src/app/utils/MerchantUtils'
 
 @Component({
 	selector: 'app-help',
@@ -36,18 +42,27 @@ export class HelpComponent implements OnInit {
 	@Input() onlyGuides: boolean
 	isAlreadyLoggedIn = false
 
+	isGnosis: boolean
+
 	constructor(
 		private oauthUtils: OAuthUtils,
 		private validator: ValidatorUtils,
 		private storage: StorageService,
 		private router: Router,
-		public api: ApiService
+		public api: ApiService,
+		private validatorUtils: ValidatorUtils,
+		private unit: UnitconvService,
+		private notificationBase: NotificationBase,
+		private theme: ThemeUtils,
+		private alert: AlertService,
+		private merchant: MerchantUtils
 	) {}
 
 	ngOnInit() {
 		this.storage.isLoggedIn().then((result) => {
 			this.isAlreadyLoggedIn = result
 		})
+		this.isGnosis = this.api.isGnosis()
 	}
 
 	async openBrowser(link) {
@@ -64,4 +79,20 @@ export class HelpComponent implements OnInit {
 			if (!hasValidators) this.router.navigate(['/tabs/validators'])
 		}
 	}
+
+	async switchNetwork() {
+		await changeNetwork(
+			this.api.isGnosis() ? 'main' : 'gnosis',
+			this.storage,
+			this.api,
+			this.validatorUtils,
+			this.unit,
+			this.notificationBase,
+			this.theme,
+			this.alert,
+			this.merchant,
+			true
+		)
+		this.isGnosis = this.api.isGnosis()
+	}
 }

src/app/tab-preferences/tab-preferences.page.html

@@ -84,6 +84,7 @@
 				<ion-select-option value=""> Default </ion-select-option>
 				<ion-select-option value="ethpool"> Ethpool </ion-select-option>
 				<ion-select-option value="rocketpool"> Rocketpool </ion-select-option>
+				<ion-select-option value="gnosis"> Gnosis </ion-select-option>
 				<ion-select-option value="teal"> Teal </ion-select-option>
 				<ion-select-option value="green"> Green </ion-select-option>
 				<ion-select-option value="cyan"> Cyan </ion-select-option>

src/app/tab-preferences/tab-preferences.page.ts

@@ -317,17 +317,18 @@ export class Tab3Page {
 	}
 
 	async changeNetwork() {
-		const newConfig = findConfigForKey(this.network)
-		await this.storage.clearCache()
-		await this.api.clearCache()
-		await this.validatorUtils.clearCache()
-
-		await this.storage.setNetworkPreferences(newConfig)
-		await this.api.initialize()
-		await this.notificationBase.loadAllToggles()
-		await this.unit.networkSwitchReload()
-		//await this.unit.changeCurrency(this.currentFiatCurrency)
-		this.validatorUtils.notifyListeners()
+		await changeNetwork(
+			this.network,
+			this.storage,
+			this.api,
+			this.validatorUtils,
+			this.unit,
+			this.notificationBase,
+			this.theme,
+			this.alerts,
+			this.merchant,
+			false
+		)
 	}
 
 	async openIconCredit() {
@@ -442,3 +443,50 @@ export class Tab3Page {
 		await alert.present()
 	}
 }
+
+export async function changeNetwork(
+	network: string,
+	storage: StorageService,
+	api: ApiService,
+	validatorUtils: ValidatorUtils,
+	unit: UnitconvService,
+	notificationBase: NotificationBase,
+	theme: ThemeUtils,
+	alertService: AlertService,
+	merchant: MerchantUtils,
+	forceThemeSwitch: boolean
+) {
+	const darkTheme = await theme.isDarkThemed()
+
+	const newConfig = findConfigForKey(network)
+	await storage.clearCache()
+	await api.clearCache()
+	await validatorUtils.clearCache()
+
+	await storage.setNetworkPreferences(newConfig)
+	await api.initialize()
+	await notificationBase.loadAllToggles()
+	await unit.networkSwitchReload()
+	//await this.unit.changeCurrency(this.currentFiatCurrency)
+	validatorUtils.notifyListeners()
+
+	const currentTheme = theme.currentThemeColor
+
+	if (forceThemeSwitch && (currentTheme == '' || currentTheme == 'gnosis')) {
+		theme.undoColor()
+		setTimeout(() => {
+			theme.toggle(darkTheme, true, api.isGnosis() ? 'gnosis' : ''), 50
+		})
+	} else {
+		const hasTheming = await merchant.hasPremiumTheming()
+		if (hasTheming) return
+		if (currentTheme == '' && !api.isGnosis()) return
+		if (currentTheme == 'gnosis' && api.isGnosis()) return
+		alertService.confirmDialog('Switch App Theme', 'Do you want to switch to the free ' + api.getNetwork().name + ' App theme?', 'Sure', () => {
+			theme.undoColor()
+			setTimeout(() => {
+				theme.toggle(darkTheme, true, api.isGnosis() ? 'gnosis' : ''), 50
+			})
+		})
+	}
+}

src/app/tabs/tabs.page.ts

@@ -87,7 +87,7 @@ export class TabsPage {
 		}
 
 		const hasTheming = await this.merchant.hasPremiumTheming()
-		if (!hasTheming) {
+		if (!hasTheming && this.theme.currentThemeColor != 'gnosis') {
 			this.theme.resetTheming()
 		}
 	}

src/theme/variables.scss

@@ -714,3 +714,24 @@ body.rocketpool.dark {
 
 	--x-toolbar-title-color: #fff;
 }
+
+body.gnosis {
+	--ion-color-primary: #3e6957;
+	--ion-color-primary-rgb: 62, 105, 87;
+	--ion-color-primary-contrast: #ffffff;
+	--ion-color-primary-contrast-rgb: 255, 255, 255;
+	--ion-color-primary-shade: #e97112;
+	--ion-color-primary-tint: #0e0b0a;
+
+	--ion-toolbar-background: #3e6957; //2f2e42
+	--x-alert-primary: #3e6957;
+	--ion-color-success: #3e6957;
+	--chart-default: #3e6957;
+	--x-update-messages-background: #4c816b;
+	--x-update-messages-background-selected: #4c816b;
+
+	--status-ok: white;
+	--status-warn: white;
+	--status-danger: white;
+	--status-secondary: white;
+}