From 58087f1ce623361decb91d15a699c05f5a441323 Mon Sep 17 00:00:00 2001
From: ccruzkauppila <ccruzkauppila@live.com>
Date: Tue, 5 Nov 2024 18:52:34 +0000
Subject: [PATCH] Update device type sniffing

---
 src/app/(loggedout)/login/LoginForm.tsx |  2 +-
 src/common/utils.ts                     | 17 +++++++++++++----
 src/components/ui/AddFundsDialog.tsx    |  2 +-
 src/components/ui/RfidSetupDialog.tsx   |  2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/(loggedout)/login/LoginForm.tsx b/src/app/(loggedout)/login/LoginForm.tsx
index c20a0cc8..6ef899c5 100644
--- a/src/app/(loggedout)/login/LoginForm.tsx
+++ b/src/app/(loggedout)/login/LoginForm.tsx
@@ -25,7 +25,7 @@ export const LoginForm = () => {
   const [deviceType, setDeviceType] = useState<string>("");
   useEffect(() => {
     // Getdevicetype references navigator which is not defined before page load
-    setDeviceType(getDeviceType());
+    getDeviceType().then((device) => setDeviceType(device));
   }, []);
 
   useEffect(() => {
diff --git a/src/common/utils.ts b/src/common/utils.ts
index 629c493b..97eebf1d 100644
--- a/src/common/utils.ts
+++ b/src/common/utils.ts
@@ -111,6 +111,7 @@ export const parseISOString = (s: string) => {
   );
 };
 
+export type DeviceType = "Mobile" | "Desktop" | "GuildroomTablet";
 /**
  * Get the type of device the user is browsing on. Used to determine e.g. available login & payment methods.
  * Only works in client components!
@@ -120,14 +121,22 @@ export const parseISOString = (s: string) => {
  * - MobilePay QR & manual payment instructions should be shown on desktop and on the guild room tablet
  * @returns "Mobile" | "Desktop" | "GuildroomTablet"
  */
-export const getDeviceType = (): "Mobile" | "Desktop" | "GuildroomTablet" => {
+export const getDeviceType = async (): Promise<DeviceType> => {
+  if (navigator && "userAgentData" in navigator) {
+    const uaData = navigator.userAgentData as any;
+    const deviceData = await uaData?.getHighEntropyValues(["model"]);
+    const deviceModel = deviceData?.model || "";
+    const isGuildroomTablet =
+      deviceModel.includes("Armor") &&
+      deviceModel.includes("Pad") &&
+      deviceModel.includes("Pro");
+
+    if (isGuildroomTablet) return "GuildroomTablet";
+  }
   if (navigator && "userAgent" in navigator) {
     const ua = navigator.userAgent;
     // TODO: Check actual model name from user agent string
-    const isGuildroomTablet =
-      ua.includes("Armor") && ua.includes("Pad") && ua.includes("Pro");
 
-    if (isGuildroomTablet) return "GuildroomTablet";
     if (ua.includes("Mobi")) return "Mobile";
     return "Desktop";
   }
diff --git a/src/components/ui/AddFundsDialog.tsx b/src/components/ui/AddFundsDialog.tsx
index 6b1c5a6a..02075f1c 100644
--- a/src/components/ui/AddFundsDialog.tsx
+++ b/src/components/ui/AddFundsDialog.tsx
@@ -190,7 +190,7 @@ const AddFundsStep2 = ({ c }: StepProps) => {
   const { Canvas } = useQRCode();
   const [deviceType, setDeviceType] = useState<string>("");
   useEffect(() => {
-    setDeviceType(getDeviceType());
+    getDeviceType().then((device) => setDeviceType(device));
   }, []);
 
   const commitAddFunds = async () => {
diff --git a/src/components/ui/RfidSetupDialog.tsx b/src/components/ui/RfidSetupDialog.tsx
index e1bb4e84..9365738e 100644
--- a/src/components/ui/RfidSetupDialog.tsx
+++ b/src/components/ui/RfidSetupDialog.tsx
@@ -43,7 +43,7 @@ export const RfidSetupDialog = () => {
   const [deviceType, setDeviceType] = useState("");
   useEffect(() => {
     // Getdevicetype references navigator which is not defined before page load
-    setDeviceType(getDeviceType());
+    getDeviceType().then((device) => setDeviceType(device));
   }, []);
 
   const scan = async () => {