Update device type sniffing

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(() => {

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";
   }

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 () => {

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 () => {