fix: #1044;

Betarena · Feb 16, 2023 · e793060 · e793060
1 parent 2c0638c
commit e793060
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 28 deletions.
diff --git a/src/lib/components/_main_/header/Header.svelte b/src/lib/components/_main_/header/Header.svelte
@@ -35,6 +35,8 @@ COMPONENT JS - BASIC
 	import { sessionStore } from '$lib/store/session';
 	import { platfrom_lang_ssr, viewport_change } from '$lib/utils/platform-functions';
 	import AuthWidget from '../auth/Auth_Widget.svelte';
+	import { doc, updateDoc } from 'firebase/firestore';
+	import { db_firestore } from '$lib/firebase/init';
 
 	// ~~~~~~~~~~~~~~~~~~~~~
 	//  COMPONENT VARIABLES
@@ -91,9 +93,12 @@ COMPONENT JS - BASIC
 	//  COMPONENT METHODS
 	// ~~~~~~~~~~~~~~~~~~~~~
 
-  let setOnce = false;
-  $: if ($userBetarenaSettings.user != undefined && !setOnce) {
-    setOnce = true
+  let setUserLang = false;
+  $: if ($userBetarenaSettings.user != undefined 
+    && !setUserLang 
+    && PROFILE_URL != $page.route.id
+  ) {
+    setUserLang = true
     let userlang = $userBetarenaSettings.user?.scores_user_data?.lang
     console.log("🔴🔴🔴🔴 HERE!!!")
     selectLanguage(userlang)
@@ -127,7 +132,8 @@ COMPONENT JS - BASIC
 
 	$: if (browser) {
 		hideSEO = true;
-		if (!langSelected) {
+		if (!langSelected && $userBetarenaSettings.user == undefined) {
+      console.log("🔴🔴🔴🔴👀 HERE!!!")
 			langSelected = true;
 			userBetarenaSettings.setLang(
 				server_side_language
@@ -415,13 +421,44 @@ COMPONENT JS - BASIC
 		}
 	}
 
+  $: if ($userBetarenaSettings?.lang 
+  && PROFILE_URL == $page.route.id) {
+    update_select_lang()
+  }
+
+  /**
+	 * @description updates user's platform language preferrences
+	 * firebase services;
+   * @returns {Promise<void>}
+	 */
+  async function update_select_lang(): Promise<void> {
+		dlog('🔵 Updating platform lang...');
+		const lang = $userBetarenaSettings?.lang;
+    // [ℹ] (update)from localStorage()
+		userBetarenaSettings.updateLang(
+			lang
+		);
+		// [ℹ] (update)from Firebase - Firestore
+		const userRef = doc(
+			db_firestore,
+			'betarena_users',
+			$userBetarenaSettings?.user
+				?.firebase_user_data?.uid
+		);
+		await updateDoc(userRef, {
+			lang: lang
+		});
+		dlog('🟢 Language has been updated', true);
+  }
+
   /**
 	 * @description logout user; and additional ui changes
 	 */
 	async function logout(): Promise<void> {
 		dropdown_user_auth = false;
+    await goto(`/${$userBetarenaSettings.lang == 'en' ? '' : $userBetarenaSettings.lang}`, { replaceState: true })
 		userBetarenaSettings.signOutUser();
-    await goto('/', { replaceState: true })
+    setUserLang = false
 	}
 
   // NOTE: ?
@@ -1150,22 +1187,22 @@ TODO:FIXME: not generating for each LANG
 								<!--
                 [ℹ] logout page button
                 -->
-								<div
-									class="
+                <div
+                  class="
                     theme-opt-box
                     cursor-pointer
                   "
-									on:click={() => logout()}
-								>
-									<p
-										class="
+                  on:click={() => logout()}
+                >
+                  <p
+                    class="
                       color-white 
                       s-14
                     "
-									>
-										Logout
-									</p>
-								</div>
+                  >
+                    Logout
+                  </p>
+                </div>
 							</div>
 						{/if}
 					</div>

diff --git a/src/lib/components/page/profile/Modal-ConnectWallet.svelte b/src/lib/components/page/profile/Modal-ConnectWallet.svelte
@@ -8,6 +8,7 @@ COMPONENT JS (w/ TS)
 
 	import wallet from './assets/wallet.svg';
 	import metamask_icon from './assets/metamask.svg';
+	import { dlog, PR_P_STY, PR_P_TAG, PR_P_TOG } from '$lib/utils/debug';
 
 	// ~~~~~~~~~~~~~~~~~~~~~
 	//  COMPONENT VARIABLES
@@ -34,13 +35,104 @@ COMPONENT JS (w/ TS)
    * @returns {Promise<void>}
 	 */
 	async function connect_wallet_action(): Promise<void> {
+    // [ℹ] restrict only to MetaMask (original)
+    if (!providerDetect('isMetaMask')[0]) {
+      dlog("🔴 Moralis Auth not found!")
+      alert('Please install the MetaMask Wallet Extension!')
+      toggle_modal()
+      return
+    }
     const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
     const account = accounts[0];
 		dispatch('connect_wallet_action', {
       wallet_id: account
     });
 	}
 
+  	/**
+	 * Validates what Web3 wallet extension
+	 * is being used for the platform
+	 * @param walletType
+	 */
+	function providerDetect(
+		walletType:
+			| 'isMetaMask'
+			| 'isCoinbaseWallet'
+			| 'isBraveWallet'
+	): [boolean, any] {
+		// [ℹ] no ethereum wallet present
+		if (!window.ethereum) {
+			return [false, null];
+			// throw new Error("No injected ethereum object.");
+		}
+
+		// [ℹ] default provider (single) assign
+		let target_wallet = undefined;
+
+		// [ℹ] multiple provider(s) check true
+		if (
+			Array.isArray(window.ethereum.providers)
+		) {
+			if (walletType == 'isMetaMask') {
+				target_wallet =
+					window.ethereum.providers.find(
+						(provider) =>
+							provider[walletType] &&
+							provider?.isBraveWallet == undefined
+					);
+			}
+			// [ℹ] alternative
+			// else {
+			//   target_wallet = window.ethereum.providers.find((provider) => provider[walletType])
+			// }
+      dlog(`${PR_P_TAG} 🔵 More than 1 provider identified! ${window.ethereum.providers.length}`, PR_P_TOG, PR_P_STY)
+      dlog(`${PR_P_TAG} target_wallet ${target_wallet}`, PR_P_TOG, PR_P_STY)
+      dlog(`${PR_P_TAG} window.ethereum.providers ${window.ethereum.providers}`, PR_P_TOG, PR_P_STY)
+		} else {
+			if (
+				walletType == 'isMetaMask' &&
+				window.ethereum?.isBraveWallet ==
+					undefined &&
+				window.ethereum?.isMetaMask !=
+					undefined &&
+				window.ethereum?.isMetaMask
+			) {
+				target_wallet =
+					window.ethereum[walletType];
+			}
+			// [ℹ] alternative
+			// else {
+			//   target_wallet = window.ethereum[walletType]
+			// }
+      dlog(`${PR_P_TAG} 🔵 1 provider identified! ${window.ethereum}`, PR_P_TOG, PR_P_STY)
+      dlog(`${PR_P_TAG} target_wallet ${target_wallet}`, PR_P_TOG, PR_P_STY)
+      dlog(`${PR_P_TAG} window.ethereum ${window.ethereum}`, PR_P_TOG, PR_P_STY)
+		}
+
+		// [ℹ] TARGET (THIS) single provider check true
+		if (target_wallet != undefined) {
+      dlog(`${PR_P_TAG} 🟢 ${walletType} identified`, PR_P_TOG, PR_P_STY)
+			// DOC: https://stackoverflow.com/questions/69377437/metamask-conflicting-with-coinbase-wallet
+			// DOC: https://stackoverflow.com/questions/72613011/whenever-i-click-on-connect-metamask-button-why-it-connects-the-coinbase-wallet
+			// DOC: https://stackoverflow.com/questions/68023651/how-to-connect-to-either-metamask-or-coinbase-wallet
+			// DOC: https://github.com/MetaMask/metamask-extension/issues/13622
+			// NOTE: conflicting use of CoinBaseWallet & MetaMask
+			// NOTE: setting MetaMask as main wallet
+			// NOTE: IMPORTANT causes issues with FireFox
+			// target_wallet.request({ method: 'eth_requestAccounts' });
+			// NOTE: Not working
+			// window.ethereum.setSelectedProvider(target_wallet);
+			// window.ethereum.request({
+			//   method: 'wallet_requestPermissions',
+			//   params: [{ eth_accounts: {}}]
+			// });
+			return [true, target_wallet];
+		} else {
+      dlog(`${PR_P_TAG} 🔴 no target wallet (${walletType}) identified`, PR_P_TOG, PR_P_STY)
+			return [false, null];
+		}
+	}
+
 	// ~~~~~~~~~~~~~~~~~~~~~
 	// VIEWPORT CHANGES
 	// ~~~~~~~~~~~~~~~~~~~~~

diff --git a/src/lib/components/page/profile/Widget-AccountSettings.svelte b/src/lib/components/page/profile/Widget-AccountSettings.svelte
@@ -49,6 +49,7 @@ COMPONENT JS (w/ TS)
 	let fileInputElem: HTMLInputElement;
 	let usernameInput: string;
   let usernameErrorExist: boolean;
+  let usernameErrorMsg: string;
 	let profile_picture_exists: boolean = false;
 	let profile_wallet_connected: boolean = false;
 	let processing: boolean = false;
@@ -204,9 +205,10 @@ COMPONENT JS (w/ TS)
     // [ℹ] validation [1]
     const valid = await username_update_validation()
     if (!valid) { 
-      alert('🔴 Username is invalid')
+		  dlog('🔴 Username is invalid...', true);
       return;
     }
+    usernameErrorMsg = undefined;
 		// [ℹ] (update)from localStorage()
 		userBetarenaSettings.updateUsername(
 			usernameInput
@@ -224,6 +226,12 @@ COMPONENT JS (w/ TS)
 		dlog('🟢 Username updated', true);
 	}
 
+  /**
+   * @description a function to validate the user
+   * input; returns boolean true/false; assigns
+   * appropiate error message;
+   * @returns {Promise<boolean>} boolean
+   */
   async function username_update_validation(): Promise<boolean> {
 		dlog('🔵 Validating username...', true);
     let valid = true;
@@ -233,16 +241,36 @@ COMPONENT JS (w/ TS)
     const querySnapshot = await getDocs(queryUsername); // can be access individually;
     // DOC: https://firebase.google.com/docs/firestore/query-data/queries
 		dlog(querySnapshot, false);
-    if (querySnapshot.docs.length > 0) valid = false;
-    // [ℹ] validation [2] - length
-    if (usernameInput.length < 3) valid = false;
-    // [ℹ] validation [3] - only-numbers
-    if (/^\d+$/.test(usernameInput)) valid = false;
-    // [ℹ] validation [4] - has a space
-    if (/\s/g.test(usernameInput)) valid = false;
-    // [ℹ] validation [5] - has special char
-    let format = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
-    if (format.test(usernameInput)) valid = false;
+    if (querySnapshot.docs.length > 0) {
+      valid = false
+      usernameErrorMsg = 'Username is already in use';
+    }
+    // [ℹ] validation [2] - length (min)
+    if (usernameInput.length < 3) {
+      valid = false;
+      usernameErrorMsg = 'Username must be greater than 3 characters';
+    }
+    // [ℹ] validation [3] - length (min)
+    if (usernameInput.length > 15) {
+      valid = false;
+      usernameErrorMsg = 'Username must be less than 15 characters';
+    }
+    // [ℹ] validation [4] - only-numbers
+    if (/^\d+$/.test(usernameInput)) {
+      valid = false;
+      usernameErrorMsg = 'Username must not contain only numbers';
+    };
+    // [ℹ] validation [5] - has a space
+    if (/\s/g.test(usernameInput)) {
+      valid = false;
+      usernameErrorMsg = 'Username must not contain spaces'
+    }
+    // [ℹ] validation [6] - has special char
+    let format = /[ `!@#$%^&*()+\-=\[\]{};':"\\|,.<>\/?~]/;
+    if (format.test(usernameInput)) { 
+      valid = false;
+      usernameErrorMsg = 'Username cant have spaces or special characters'
+    }
     // [ℹ] return;
     return valid;
   }
@@ -602,7 +630,21 @@ COMPONENT HTML
         aria-placeholder="Username input here"
         aria-label="Username input"
         bind:value={usernameInput}
+        class:input-error={usernameErrorMsg != undefined}
       />
+      <!-- 
+      <-conditional->
+      [ℹ] error message input
+      -->
+      {#if usernameErrorMsg}
+        <p
+          class="
+            s-14
+            color-error
+          ">
+          {usernameErrorMsg}
+        </p>
+      {/if}
     </div>
     <!-- 
     [ℹ] third row
@@ -760,6 +802,9 @@ COMPONENT STYLE
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
+  input[type='text'].input-error {
+    border: 1px solid var(--red-bright) !important;
+  }
 
 	button {
 		width: -webkit-fill-available;

diff --git a/src/lib/store/user-settings.ts b/src/lib/store/user-settings.ts
@@ -287,6 +287,32 @@ function createLocalStore(key: string) {
 			set(existing_data);
 		},
 
+    /**
+		 * @description updates localStorage for user's platform language;
+		 * and updates the svelte store;
+		 * @param {string | undefined} wallet
+		 */
+		updateLang: (
+			lang: string | undefined
+		) => {
+			// [ℹ] GET DATA FROM LOCALSTORAGE();
+			const existing: string =
+				localStorage.getItem(key);
+			// [ℹ] CONVERT TO JSON;
+			const existing_data: User_Setting =
+				JSON.parse(existing);
+			// [ℹ] UPDATE THE DATA FOR WEB3 WALLET;
+			existing_data.user.scores_user_data.lang =
+				lang;
+			// [ℹ] UPDATE THE LOCALSTORAGE();
+			localStorage.setItem(
+				key,
+				JSON.stringify(existing_data)
+			);
+			// [ℹ] update the `set()` data;
+			set(existing_data);
+		},
+
 		/**
 		 * @description removes user data from localStorage;
 		 * and updates the svelte store;

diff --git a/src/lib/utils/platform-functions.ts b/src/lib/utils/platform-functions.ts
@@ -27,7 +27,7 @@ export function platfrom_lang_ssr(
 	// [ℹ] validation (#2)
   // [ℹ] if [[lang=lang]] page
 	server_side_language = 
-    page_route_id.includes('[[lang=lang]]')
+    (page_route_id.includes('[[lang=lang]]') || page_route_id.includes('[lang=lang]'))
     && page_params_lang != undefined
       ? page_params_lang
       : 'en'

diff --git a/src/routes/u/[view]/[lang=lang]/+page.svelte b/src/routes/u/[view]/[lang=lang]/+page.svelte
@@ -2,6 +2,7 @@
 COMPONENT JS (w/ TS)
 =================-->
 <script lang="ts">
+	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import AccountSettingsBoard from '$lib/components/page/profile/Widget-AccountSettings.svelte';
@@ -40,7 +41,7 @@ COMPONENT JS (w/ TS)
 	// ~~~~~~~~~~~~~~~~~~~~~
 
 	// TODO: have this check on the navbar directly
-	$: if ($userBetarenaSettings?.user == undefined) {
+	$: if (browser && $userBetarenaSettings != undefined && $userBetarenaSettings?.user == undefined) {
 	  goto('/')
 	}