Merge pull request #31 from reclaimprotocol/feat/device-detection

feat: add device detection for (ios/android) and enable appClip default

Author: kryptocodes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reclaimprotocol/js-sdk",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Designed to request proofs from the Reclaim protocol and manage the flow of claims and witness interactions.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/Reclaim.ts

@@ -9,7 +9,7 @@ import {
     InitSessionResponse,
     ClaimCreationType,
 } from './utils/types'
-import { SessionStatus } from './utils/types'
+import { SessionStatus, DeviceType } from './utils/types'
 import { ethers } from 'ethers'
 import canonicalize from 'canonicalize'
 import {
@@ -35,6 +35,7 @@ import {
 import { validateContext, validateFunctionParams, validateParameters, validateSignature, validateURL } from './utils/validationUtils'
 import { fetchStatusUrl, initSession, updateSession } from './utils/sessionUtils'
 import { assertValidSignedClaim, createLinkWithTemplateData, getWitnessesForClaim } from './utils/proofUtils'
+import { userAgentIsAndroid, userAgentIsIOS } from './utils/device'
 import loggerModule from './utils/logger';
 const logger = loggerModule.logger
 
@@ -149,6 +150,23 @@ export class ReclaimProofRequest {
         this.applicationId = applicationId;
         this.sessionId = "";
         this.parameters = {};
+        
+        if (!options) {
+            options = {};
+        }
+
+        if (!options.device) {
+            if (userAgentIsIOS) {
+                options.device = DeviceType.IOS;
+            } else if (userAgentIsAndroid) {
+                options.device = DeviceType.ANDROID;
+            }
+        }
+
+        if (options.useAppClip === undefined) {
+            options.useAppClip = true;
+        }
+
         if (options?.log) {
             loggerModule.setLogLevel('info');
         } else {
@@ -186,6 +204,9 @@ export class ReclaimProofRequest {
                         { paramName: 'log', input: options.log }
                     ], 'the constructor')
                 }
+                if (options.useAppClip === undefined) {
+                    options.useAppClip = true;
+                }
                 if (options.useAppClip) {
                     validateFunctionParams([
                         { paramName: 'useAppClip', input: options.useAppClip }

src/utils/device.ts

@@ -0,0 +1,21 @@
+import { DeviceType } from "./types";
+
+const navigatorDefined = typeof navigator !== 'undefined';
+const windowDefined = typeof window !== 'undefined';
+
+const userAgent = navigatorDefined ? navigator.userAgent.toLowerCase() : '';
+const userAgentData = navigatorDefined ? (navigator as Navigator & { userAgentData?: { platform: string } }).userAgentData : undefined;
+
+export const userAgentIsAndroid = userAgent.includes(DeviceType.ANDROID);
+
+const isIpad =
+    windowDefined &&
+    navigatorDefined &&
+    (userAgentData?.platform === DeviceType.IPAD || userAgent.includes(DeviceType.IPAD));
+
+export const userAgentIsIOS =
+    new RegExp(`${DeviceType.IOS}|ipod`, 'i').test(userAgent) || isIpad;
+
+export const userAgentIsMobile =
+    new RegExp(`${DeviceType.ANDROID}|webos|${DeviceType.IOS}|${DeviceType.IPAD}|ipod|blackberry|iemobile|opera mini`, 'i').test(userAgent) ||
+    (windowDefined && 'orientation' in window);

src/utils/types.ts

@@ -43,6 +43,14 @@ export enum ClaimCreationType {
   ON_ME_CHAIN = 'createClaimOnMechain'
 }
 
+// Device type enum 
+export enum DeviceType {
+    ANDROID = 'android',
+    IOS = 'ios',
+    IPAD = 'ipad'
+}
+
+
 // Session and response types
 export type InitSessionResponse = {
   sessionId: string;