From c2788bd6f7f137d82bb4424fe307b3a380e4365f Mon Sep 17 00:00:00 2001
From: Salvatore Di Salvo
Date: Tue, 16 Apr 2024 14:24:26 +0100
Subject: [PATCH] fix: oobi in QR code & cleanup
---
.../CreateIdentifier/CreateIdentifier.scss | 61 ++++++++++++++---
.../components/IdentifierStage0.tsx | 11 +--
.../components/IdentifierStage1.tsx | 68 +++++++++++--------
3 files changed, 97 insertions(+), 43 deletions(-)
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}
>