From 3e56e7fd0dc058a929eb83bc74bce2ba507cf4aa Mon Sep 17 00:00:00 2001 From: turnoffthiscomputer Date: Fri, 30 Aug 2024 11:23:33 +0200 Subject: [PATCH] allow size modification of QR code --- sdk/package.json | 4 +- sdk/src/QRcode/LED.tsx | 2 +- sdk/src/QRcode/OpenPassportQRcode.d.ts | 1 + sdk/src/QRcode/OpenPassportQRcode.jsx | 194 ------------------------- sdk/src/QRcode/OpenPassportQRcode.tsx | 3 +- 5 files changed, 6 insertions(+), 198 deletions(-) delete mode 100644 sdk/src/QRcode/OpenPassportQRcode.jsx diff --git a/sdk/package.json b/sdk/package.json index 313792329..2932126f3 100644 --- a/sdk/package.json +++ b/sdk/package.json @@ -1,6 +1,6 @@ { "name": "@proofofpassport/sdk", - "version": "1.8.1", + "version": "1.8.3", "main": "dist/sdk/src/index.js", "types": "dist/sdk/src/index.d.ts", "license": "MIT", @@ -65,4 +65,4 @@ "circuits/**/*.json", "src/QRcode" ] -} +} \ No newline at end of file diff --git a/sdk/src/QRcode/LED.tsx b/sdk/src/QRcode/LED.tsx index da1ec2904..61bcd61a8 100644 --- a/sdk/src/QRcode/LED.tsx +++ b/sdk/src/QRcode/LED.tsx @@ -5,7 +5,7 @@ interface LEDProps { connectionStatus?: 'disconnected' | 'web_connected' | 'mobile_connected'; } -const LED: React.FC = ({ size = 10, connectionStatus = 'disconnected' }) => { +const LED: React.FC = ({ size = 8, connectionStatus = 'disconnected' }) => { const getColor = () => { switch (connectionStatus) { case 'web_connected': diff --git a/sdk/src/QRcode/OpenPassportQRcode.d.ts b/sdk/src/QRcode/OpenPassportQRcode.d.ts index b584eac69..54fd9ae4c 100644 --- a/sdk/src/QRcode/OpenPassportQRcode.d.ts +++ b/sdk/src/QRcode/OpenPassportQRcode.d.ts @@ -6,6 +6,7 @@ export interface OpenPassportQRcodeProps { userId: string; requirements: any[]; onSuccess: (result: any) => void; + size?: number; devMode?: boolean; } diff --git a/sdk/src/QRcode/OpenPassportQRcode.jsx b/sdk/src/QRcode/OpenPassportQRcode.jsx deleted file mode 100644 index 0282d44d8..000000000 --- a/sdk/src/QRcode/OpenPassportQRcode.jsx +++ /dev/null @@ -1,194 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { OpenPassport1StepVerifier } from '../index'; -import { QRCodeGenerator } from './QRCodeGenerator'; -import io from 'socket.io-client'; -import { BounceLoader } from 'react-spinners'; -import Lottie from 'lottie-react'; -import CHECK_ANIMATION from '../../public/animations/check_animation.json'; -import X_ANIMATION from '../../public/animations/x_animation.json'; -import LED from './LED'; - -const ProofSteps = { - WAITING_FOR_MOBILE: 'WAITING_FOR_MOBILE', - MOBILE_CONNECTED: 'MOBILE_CONNECTED', - PROOF_GENERATION_STARTED: 'PROOF_GENERATION_STARTED', - PROOF_GENERATED: 'PROOF_GENERATED', - PROOF_VERIFIED: 'PROOF_VERIFIED', -}; - -const OpenPassportQRcode = ({ - appName, - scope, - userId, - requirements, - onSuccess, - devMode = false, -}) => { - const [proofStep, setProofStep] = useState(ProofSteps.WAITING_FOR_MOBILE); - const [proofVerified, setProofVerified] = useState(null); - const [sessionId, setSessionId] = useState(crypto.randomUUID()); - const [showAnimation, setShowAnimation] = useState(false); - const [connectionStatus, setConnectionStatus] = useState('disconnected'); - const [qrElement, setQrElement] = useState(null); - const [animationKey, setAnimationKey] = useState(0); - - const qrcodeRef = useRef(null); - const lottieRef = useRef(null); - - const handleAnimationComplete = () => { - console.log('Animation completed'); - setShowAnimation(false); - setProofStep(ProofSteps.WAITING_FOR_MOBILE); - const newSessionId = crypto.randomUUID(); - setSessionId(newSessionId); - }; - - useEffect(() => { - const generateQR = async () => { - const showCaseApp = { - name: appName, - scope, - userId, - sessionId, - circuit: 'prove', - arguments: { - disclosureOptions: Object.fromEntries(requirements), - }, - }; - const qr = await QRCodeGenerator.generateQRCode(showCaseApp); - setQrElement(qr); - }; - generateQR(); - }, [appName, scope, userId, sessionId, requirements]); - - useEffect(() => { - const newSocket = io('https://proofofpassport-merkle-tree.xyz', { - path: '/websocket', - query: { sessionId, clientType: 'web' }, - }); - - const handleMobileStatus = async (data) => { - console.log('Received mobile status:', data.status); - switch (data.status) { - case 'mobile_connected': - setConnectionStatus('mobile_connected'); - setProofStep(ProofSteps.MOBILE_CONNECTED); - break; - case 'mobile_disconnected': - setConnectionStatus('web_connected'); - break; - case 'proof_generation_started': - setProofStep(ProofSteps.PROOF_GENERATION_STARTED); - break; - case 'proof_generated': - setProofStep(ProofSteps.PROOF_GENERATED); - break; - } - - if (data.proof) { - const openPassport1StepVerifier = new OpenPassport1StepVerifier({ - scope, - requirements, - dev_mode: devMode, - }); - - try { - const local_proofVerified = await openPassport1StepVerifier.verify(data.proof); - setProofVerified({ valid: local_proofVerified.valid }); - setProofStep(ProofSteps.PROOF_VERIFIED); - newSocket.emit('proof_verified', { - sessionId, - proofVerified: local_proofVerified.toString(), - }); - if (local_proofVerified.valid && onSuccess) { - onSuccess(local_proofVerified); - } - } catch (error) { - console.error('Error verifying proof:', error); - setProofVerified({ valid: false, error: error.message }); - newSocket.emit('proof_verified', { - sessionId, - proofVerified: { valid: false, error: error.message }, - }); - } - } - }; - - newSocket.on('connect', () => setConnectionStatus('web_connected')); - newSocket.on('disconnect', () => { - setConnectionStatus('disconnected'); - setProofStep(ProofSteps.WAITING_FOR_MOBILE); - }); - newSocket.on('mobile_status', handleMobileStatus); - - return () => { - newSocket.disconnect(); - }; - }, [sessionId, scope, requirements, devMode, onSuccess]); - - useEffect(() => { - if (qrElement && qrcodeRef.current) { - qrcodeRef.current.innerHTML = ''; - qrcodeRef.current.appendChild(qrElement); - } - }, [qrElement]); - - useEffect(() => { - if (proofStep === ProofSteps.PROOF_VERIFIED && proofVerified?.valid === true) { - setShowAnimation(true); - setAnimationKey((prev) => prev + 1); - } - }, [proofStep, proofVerified]); - - const renderProofStatus = () => ( -
- -
- {(() => { - switch (proofStep) { - case ProofSteps.WAITING_FOR_MOBILE: - case ProofSteps.MOBILE_CONNECTED: - return qrElement ?
: null; - case ProofSteps.PROOF_GENERATION_STARTED: - case ProofSteps.PROOF_GENERATED: - return ; - case ProofSteps.PROOF_VERIFIED: - if (proofVerified?.valid === true) { - return showAnimation ? ( - - ) : qrElement ? ( -
- ) : null; - } else { - return ( - - ); - } - default: - return null; - } - })()} -
-
- ); - - return renderProofStatus(); -}; - -export default OpenPassportQRcode; diff --git a/sdk/src/QRcode/OpenPassportQRcode.tsx b/sdk/src/QRcode/OpenPassportQRcode.tsx index a518e3ccf..e3d466b5b 100644 --- a/sdk/src/QRcode/OpenPassportQRcode.tsx +++ b/sdk/src/QRcode/OpenPassportQRcode.tsx @@ -23,6 +23,7 @@ const OpenPassportQRcode = ({ requirements, onSuccess, devMode = false, + size = 300 }) => { const [proofStep, setProofStep] = useState(ProofSteps.WAITING_FOR_MOBILE); const [proofVerified, setProofVerified] = useState(null); @@ -55,7 +56,7 @@ const OpenPassportQRcode = ({ disclosureOptions: Object.fromEntries(requirements), }, }; - const qr = await QRCodeGenerator.generateQRCode(showCaseApp as AppType); + const qr = await QRCodeGenerator.generateQRCode(showCaseApp as AppType, size); setQrElement(qr); }; generateQR();