From 4226cca22713d377bf8e2774e8eb2bc6f4ae1ba6 Mon Sep 17 00:00:00 2001 From: eisbilir Date: Mon, 16 Oct 2023 14:29:53 +0300 Subject: [PATCH 1/9] feat: update dice connection api --- package.json | 4 ++ .../ConnectionHandler.module.scss | 5 ++ .../ConnectionHandler/index.tsx | 51 +++++++++++++++++++ .../dice-setup-modal/DiceSetupModal.tsx | 51 +++---------------- .../data-providers/useDiceIdConnection.ts | 16 ++---- 5 files changed, 73 insertions(+), 54 deletions(-) create mode 100644 src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/ConnectionHandler.module.scss create mode 100644 src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx diff --git a/package.json b/package.json index 2ef92fbc4..584a7f6a9 100644 --- a/package.json +++ b/package.json @@ -246,5 +246,9 @@ } } ] + }, + "volta": { + "node": "16.15.0", + "yarn": "1.22.19" } } diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/ConnectionHandler.module.scss b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/ConnectionHandler.module.scss new file mode 100644 index 000000000..6b696efa6 --- /dev/null +++ b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/ConnectionHandler.module.scss @@ -0,0 +1,5 @@ +@import '@libs/ui/styles/includes'; + +.qrCode { + margin: auto; +} \ No newline at end of file diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx new file mode 100644 index 000000000..f56ca93fd --- /dev/null +++ b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/ConnectionHandler/index.tsx @@ -0,0 +1,51 @@ +import { FC, useEffect } from 'react' +import { QRCodeSVG } from 'qrcode.react' + +import { DiceConnectionStatus, useDiceIdConnection } from '~/libs/core' + +import styles from './ConnectionHandler.module.scss' + +interface ConnectionHandlerProps { + onComplete: () => void; + userId: number; +} + +export const ConnectionHandler: FC = ( + props: ConnectionHandlerProps, +) => { + const diceConnection: DiceConnectionStatus | undefined = useDiceIdConnection(props.userId) + + useEffect(() => { + if (diceConnection && diceConnection.accepted) { + props.onComplete() + } + }, [diceConnection, props]) + + return ( + <> +

+ Scan the following DICE ID QR Code in your DICE ID + mobile application. +

+ {diceConnection && diceConnection.connection ? ( + + ) : ( +

Loading...

+ )} +

+ Once the connection is established, the service will + offer you a Verifiable Credential. +
+ Press the ACCEPT button in your DICE ID App. +
+ If you DECLINE the invitation, please try again after 5 + minutes. +

+ + ) +} diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx index 6f3d6a2e9..a26925a2d 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx +++ b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx @@ -1,4 +1,4 @@ -import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react' +import { Dispatch, FC, SetStateAction, useState } from 'react' import { QRCodeSVG } from 'qrcode.react' import { get, isUndefined, lowerCase } from 'lodash' import { toast } from 'react-toastify' @@ -12,9 +12,10 @@ import { googlePlay, UnSuccessfullDiceVerificationIcon, } from '~/apps/accounts/src/lib' -import { DiceConnectionStatus, updateMemberMFAStatusAsync, useDiceIdConnection, UserProfile } from '~/libs/core' +import { updateMemberMFAStatusAsync, UserProfile } from '~/libs/core' import { EnvironmentConfig } from '~/config' +import { ConnectionHandler } from './ConnectionHandler' import { VerificationListener } from './VerificationListener' import styles from './DiceSetupModal.module.scss' @@ -29,25 +30,9 @@ interface DiceSetupModalProps { const DiceSetupModal: FC = (props: DiceSetupModalProps) => { const [step, setStep]: [number, Dispatch>] = useState(1) - const [diceConnectionId, setDiceConnectionId]: [ - number | undefined, - Dispatch> - ] = useState() - - const diceConnection: DiceConnectionStatus | undefined = useDiceIdConnection(props.profile.userId, diceConnectionId) - const [isVerificationProcessing, setIsVerificationProcessing]: [boolean, Dispatch>] = useState(false) - useEffect(() => { - if (diceConnection && !diceConnectionId) { - setDiceConnectionId(diceConnection.id) - } - }, [ - diceConnection, - diceConnectionId, - ]) - function handleSecondaryButtonClick(): void { switch (step) { case 2: return setStep(step - 1) @@ -117,12 +102,11 @@ const DiceSetupModal: FC = (props: DiceSetupModalProps) => onClick={handleSecondaryButtonClick} /> { - step !== 3 && ( + step !== 2 && step !== 3 && (