diff --git a/client/package-lock.json b/client/package-lock.json index d1c2474..ebcf7ec 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -16,7 +16,8 @@ "casper-js-sdk": "^2.15.5", "express": "^4.19.2", "greenlock-express": "^4.0.3", - "prismjs": "^1.29.0" + "prismjs": "^1.29.0", + "react-device-detect": "^2.2.3" }, "devDependencies": { "@types/node": "^16.18.96", @@ -16315,6 +16316,18 @@ "node": ">=8" } }, + "node_modules/react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "dependencies": { + "ua-parser-js": "^1.0.33" + }, + "peerDependencies": { + "react": ">= 0.14.0", + "react-dom": ">= 0.14.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -18669,6 +18682,28 @@ "node": ">=4.2.0" } }, + "node_modules/ua-parser-js": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz", + "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -31729,6 +31764,14 @@ } } }, + "react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "requires": { + "ua-parser-js": "^1.0.33" + } + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -33510,6 +33553,11 @@ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true }, + "ua-parser-js": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz", + "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==" + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/client/package.json b/client/package.json index 9d229d0..bd30296 100644 --- a/client/package.json +++ b/client/package.json @@ -11,7 +11,8 @@ "casper-js-sdk": "^2.15.5", "express": "^4.19.2", "greenlock-express": "^4.0.3", - "prismjs": "^1.29.0" + "prismjs": "^1.29.0", + "react-device-detect": "^2.2.3" }, "scripts": { "start": "react-app-rewired start", diff --git a/client/src/components/Instructions.tsx b/client/src/components/Instructions.tsx index 14db8c9..549683b 100644 --- a/client/src/components/Instructions.tsx +++ b/client/src/components/Instructions.tsx @@ -3,6 +3,7 @@ import { useClickRef } from '@make-software/csprclick-ui'; import { Dispatch, SetStateAction, useContext } from 'react'; import { ActiveAccountContext, StyledContentContainer } from '../App'; import { claim } from '../apiClient'; +import { isMobile } from 'react-device-detect'; const StyledStepContainer = styled.div(({ theme }) => theme.withMedia({ @@ -43,10 +44,14 @@ export default function Instructions(props: InstructionsProps) { async function connectWallet() { if (!(await clickRef?.isProviderPresent('casper-wallet'))) { - alert('Please visit this website from the browser in the Casper Wallet app to sign in.'); - return; + if (isMobile || 'ontouchstart' in document.documentElement) { + window.location.href = 'casperwallet://download?browse=casper.dariodesiena.com&click=connect'; + } else { + await clickRef?.signIn(); + } + } else { + await clickRef?.connect('casper-wallet'); } - console.log(await clickRef?.connect('casper-wallet')); } function openCasperWalletInstall() {