diff --git a/src/ui/components/CreateIdentifier/CreateIdentifier.scss b/src/ui/components/CreateIdentifier/CreateIdentifier.scss index 050287cc0..783bf71d1 100644 --- a/src/ui/components/CreateIdentifier/CreateIdentifier.scss +++ b/src/ui/components/CreateIdentifier/CreateIdentifier.scss @@ -28,16 +28,6 @@ ion-modal.create-identifier-modal { .responsive-page-content { justify-content: space-evenly; - #react-qrcode-logo { - width: 70vw !important; - height: 70vw !important; - padding: 1.5rem; - margin: 1rem auto; - background-color: white; - box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2); - border-radius: 16px; - } - .share-identifier-scan-button { text-align: center; @@ -77,6 +67,57 @@ ion-modal.create-identifier-modal { } } + .multisig-share-qr-code { + text-align: center; + + #react-qrcode-logo { + background-color: white; + box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2); + } + + .multisig-share-qr-code-blur-overlay-container { + position: absolute; + left: calc(50% - 35vw); + box-shadow: 0px 2px 4px rgba(54, 60, 74, 0.2); + + .multisig-share-qr-code-blur-overlay-inner { + display: none; + } + } + + #react-qrcode-logo, + .multisig-share-qr-code-blur-overlay-container { + width: 70vw !important; + height: 70vw !important; + padding: 1.5rem; + margin: 1rem auto; + border-radius: 1rem; + } + + &.blur { + #react-qrcode-logo { + filter: blur(0.5rem); + opacity: 0.3; + } + + .multisig-share-qr-code-blur-overlay-inner { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100%; + + ion-icon { + width: 5rem; + height: 5rem; + opacity: 1; + text-align: center; + margin: 0 auto; + } + } + } + } + ion-toolbar { --background: var(--ion-color-light); diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx index ee1e388b4..dccb1be87 100644 --- a/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx +++ b/src/ui/components/CreateIdentifier/components/IdentifierStage0.tsx @@ -97,6 +97,13 @@ const IdentifierStage0 = ({ newIdentifier.groupMetadata = groupMetadata; } dispatch(setIdentifiersCache([...identifiersData, newIdentifier])); + if (state.selectedAidType !== 0) { + setState((prevState: IdentifierStageProps) => ({ + ...prevState, + identifierCreationStage: 1, + newIdentifier, + })); + } } }; @@ -105,10 +112,6 @@ const IdentifierStage0 = ({ setTimeout(async () => { await handleCreateIdentifier(); if (state.selectedAidType !== 0) { - setState((prevState: IdentifierStageProps) => ({ - ...prevState, - identifierCreationStage: 1, - })); setBlur && setBlur(false); } else { dispatch(setToastMsg(ToastMsgType.IDENTIFIER_CREATED)); diff --git a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx index c97e0ed6a..57fc304bc 100644 --- a/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx +++ b/src/ui/components/CreateIdentifier/components/IdentifierStage1.tsx @@ -1,21 +1,17 @@ import { useEffect, useState } from "react"; import { QRCode } from "react-qrcode-logo"; import { IonButton, IonIcon } from "@ionic/react"; -import { scanOutline } from "ionicons/icons"; +import { scanOutline, qrCodeOutline } from "ionicons/icons"; import { i18n } from "../../../../i18n"; import { PageHeader } from "../../PageHeader"; -import { ScrollablePageLayout } from "../../layout/ScrollablePageLayout"; import { IdentifierStageProps } from "../CreateIdentifier.types"; -import { ConnectionShortDetails } from "../../../pages/Connections/Connections.types"; import { useAppSelector } from "../../../../store/hooks"; -import { getConnectionsCache } from "../../../../store/reducers/connectionsCache"; import { ResponsivePageLayout } from "../../layout/ResponsivePageLayout"; import { getStateCache } from "../../../../store/reducers/stateCache"; import { Agent } from "../../../../core/agent/agent"; const IdentifierStage1 = ({ state, - setState, componentId, resetModal, resumeMultiSig, @@ -23,35 +19,34 @@ const IdentifierStage1 = ({ const stateCache = useAppSelector(getStateCache); const userName = stateCache.authentication.userName; const [oobi, setOobi] = useState(""); - const identifierId = resumeMultiSig?.id || state.newIdentifier.id; - const groupIdFromIdentifier = + const signifyName = + resumeMultiSig?.signifyName || state.newIdentifier.signifyName; + const groupId = resumeMultiSig?.groupMetadata?.groupId || state.newIdentifier.groupMetadata?.groupId; useEffect(() => { const fetchOobi = async () => { const oobiValue = await Agent.agent.connections.getKeriOobi( - identifierId, + signifyName, userName, - groupIdFromIdentifier + groupId ); if (oobiValue) { setOobi(oobiValue); } }; fetchOobi(); - }, [userName]); + }, [groupId, signifyName, userName]); const handleDone = () => { - // setState((prevState: IdentifierStageProps) => ({ - // ...prevState, - // identifierCreationStage: 2, - // selectedConnections: selectedConnections, - // })); - // TODO: Save the identifier to the state cache and reset the modal resetModal && resetModal(); }; + const handleScanButton = () => { + // TODO: scan button functionality + }; + return ( <> {i18n.t("createidentifier.share.subtitle")}

- +
+ + + + + + +

{i18n.t("createidentifier.share.footnote")}

@@ -87,7 +97,7 @@ const IdentifierStage1 = ({ console.log("Scan button clicked")} + onClick={handleScanButton} >