feat: update qrscanner UI (#415)

blockchain-lab-um · Aug 22, 2023 · 6fc209b · 6fc209b
1 parent 60865a1
commit 6fc209b
Show file tree

Hide file tree

Showing 40 changed files with 1,577 additions and 748 deletions.
diff --git a/.changeset/five-countries-design.md b/.changeset/five-countries-design.md
@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+Fix some minor dApp problems & improve QR Scanner
diff --git a/packages/dapp/package.json b/packages/dapp/package.json
@@ -37,6 +37,7 @@
     "did-jwt-vc": "^3.2.5",
     "ethers": "^6.7.0",
     "file-saver": "^2.0.5",
+    "headless-stepper": "^1.8.3",
     "html5-qrcode": "^2.3.8",
     "lint-staged": "^13.2.3",
     "luxon": "^3.3.0",

diff --git a/packages/dapp/src/app/[locale]/app/(public)/qr-code-session/page.tsx b/packages/dapp/src/app/[locale]/app/(public)/qr-code-session/page.tsx
@@ -1,22 +1,12 @@
 import { Metadata } from 'next';
 
-import CreateConnectionCard from '@/components/CreateConnectionCard';
-import ScanConnectionCard from '@/components/ScanConnectionCard';
+import QRCodeSessionDisplay from '@/components/QRSessionDisplay';
 
 export const metadata: Metadata = {
-  title: 'Dashboard',
-  description: 'Dashboard for Masca Dapp.',
+  title: 'QR Code Session',
+  description: 'QR Code Session for Masca.',
 };
 
 export default function Page() {
-  return (
-    <div className="flex flex-1 flex-col space-y-4 md:flex-row md:space-x-8 md:space-y-0">
-      <div className="dark:bg-navy-blue-800 flex flex-1 rounded-3xl bg-white p-4 shadow-lg">
-        <CreateConnectionCard />
-      </div>
-      <div className="dark:bg-navy-blue-800 flex flex-1 rounded-3xl bg-white p-4 shadow-lg">
-        <ScanConnectionCard />
-      </div>
-    </div>
-  );
+  return <QRCodeSessionDisplay />;
 }
diff --git a/packages/dapp/src/app/api/qr-code-session/[id]/route.tsx b/packages/dapp/src/app/api/qr-code-session/[id]/route.tsx
@@ -12,7 +12,7 @@ export async function GET(
       { status: 400 }
     );
   }
-
+  console.log('Get request');
   // Get session from database
   const session = await prisma.sessions.findUnique({
     where: {
@@ -44,11 +44,11 @@ export async function POST(
   request: Request,
   { params: { id } }: { params: { id: string } }
 ) {
+  console.log('Post request');
   try {
     const jsonData = await request.json();
 
     const { data, iv } = jsonData;
-
     if (!id) {
       return NextResponse.json(
         { error_description: 'Missing sessionId' },

diff --git a/packages/dapp/src/components/AppNavbar/NavConnection.tsx b/packages/dapp/src/components/AppNavbar/NavConnection.tsx
@@ -81,15 +81,17 @@ export const NavConnection = () => {
           currMethod === 'did:pkh' ||
           currMethod === 'did:polygonid' ||
           currMethod === 'did:iden3') && (
-          <DropdownMenu
-            size="method"
-            rounded="full"
-            shadow="none"
-            variant="method"
-            items={getAvailableNetworksList(currMethod)}
-            selected={getNetwork()}
-            setSelected={setNetwork}
-          />
+          <div className="hidden md:block">
+            <DropdownMenu
+              size="method"
+              rounded="full"
+              shadow="none"
+              variant="method"
+              items={getAvailableNetworksList(currMethod)}
+              selected={getNetwork()}
+              setSelected={setNetwork}
+            />
+          </div>
         )}
         <MethodDropdownMenu />
         <AddressPopover address={address} did={did} disconnect={disconnect} />

diff --git a/...eConnectionCard/CreateConnectionModal.tsx → ...ConnectionModal/CreateConnectionModal.tsx b/...eConnectionCard/CreateConnectionModal.tsx → ...ConnectionModal/CreateConnectionModal.tsx
@@ -19,11 +19,12 @@ const CreateConnectionModal = ({
 }: CreateConnectionModalProps) => {
   const t = useTranslations('CreateConnectionModal');
   const [connectionData, setConnectionData] = useState<string | null>(null);
-  const { changeSessionId, changeKey, changeExp } = useSessionStore(
+  const { request, session, changeRequest, changeSession } = useSessionStore(
     (state) => ({
-      changeSessionId: state.changeSessionId,
-      changeKey: state.changeKey,
-      changeExp: state.changeExp,
+      request: state.request,
+      session: state.session,
+      changeRequest: state.changeRequest,
+      changeSession: state.changeSession,
     })
   );
 
@@ -47,9 +48,14 @@ const CreateConnectionModal = ({
     const exp = Date.now() + 1000 * 60 * 60;
 
     // Set global session data
-    changeSessionId(sessionId);
-    changeKey(key);
-    changeExp(exp);
+    changeSession({
+      sessionId,
+      key,
+      exp,
+      connected: false,
+      hasCamera: false,
+      deviceType: 'primary',
+    });
 
     // Create session
     return JSON.stringify({
@@ -75,6 +81,7 @@ const CreateConnectionModal = ({
       >
         {t('title')}
       </Dialog.Title>
+      <p>{t('desc')}</p>
       <div className="flex w-full justify-center p-4 pt-8">
         <div className="dark:border-orange-accent-dark rounded-xl border-2 border-pink-500 bg-white p-4">
           {connectionData && (

diff --git a/packages/dapp/src/components/Controlbar/Controlbar.tsx b/packages/dapp/src/components/Controlbar/Controlbar.tsx
@@ -9,7 +9,6 @@ import {
 import { ArrowPathIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { W3CVerifiableCredential } from '@veramo/core';
 import clsx from 'clsx';
-import { normalizeCredential } from 'did-jwt-vc';
 import { useTranslations } from 'next-intl';
 
 import ImportModal from '@/components/ImportModal';
@@ -87,35 +86,12 @@ const Controlbar = () => {
   };
 
   const saveCredential = async (
-    vc: string,
+    vc: W3CVerifiableCredential,
     stores: AvailableCredentialStores[]
   ) => {
     if (!api) return false;
-    let vcObj: W3CVerifiableCredential;
-
-    try {
-      vcObj = JSON.parse(vc) as W3CVerifiableCredential;
-    } catch (err) {
-      try {
-        vcObj = normalizeCredential(vc) as W3CVerifiableCredential;
-      } catch (normalizationError) {
-        console.log(normalizationError);
-
-        setSpinner(false);
-        setTimeout(() => {
-          useToastStore.setState({
-            open: true,
-            title: t('save-error'),
-            type: 'error',
-            loading: false,
-          });
-        }, 200);
 
-        return false;
-      }
-    }
-
-    const res = await api.saveCredential(vcObj, {
+    const res = await api.saveCredential(vc, {
       store: stores,
     });
 
@@ -128,7 +104,7 @@ const Controlbar = () => {
       const newVcs: QueryCredentialsRequestResult[] = [];
       res.data.forEach((metadata: any) => {
         const finalVC = {
-          data: vcObj,
+          data: vc,
           metadata,
         } as QueryCredentialsRequestResult;
         newVcs.push(finalVC);

diff --git a/packages/dapp/src/components/CreateConnectionCard/index.tsx b/packages/dapp/src/components/CreateConnectionCard/index.tsx
diff --git a/packages/dapp/src/components/CreateCredentialDisplay/index.tsx b/packages/dapp/src/components/CreateCredentialDisplay/index.tsx
@@ -81,7 +81,7 @@ const CreateCredentialDisplay = () => {
   useEffect(() => {
     const payload = JSON.stringify(
       {
-        type: ['VerifiableCredential', 'Masca User Credential'],
+        type: ['VerifiableCredential', 'MascaUserCredential'],
         credentialSubject: {
           id: did,
           type: 'Regular User',

diff --git a/packages/dapp/src/components/CreatePresentationDisplay/index.tsx b/packages/dapp/src/components/CreatePresentationDisplay/index.tsx
@@ -221,15 +221,17 @@ const CreatePresentationDisplay = () => {
             )}
           </div>
           <div className="mt-8 flex justify-end p-3">
-            <Button
-              variant="primary"
-              size="sm"
-              shadow="sm"
-              onClick={handleCreatePresentation}
-              loading={loading}
-            >
-              {t('title')}
-            </Button>
+            {selectedVCs.length > 0 && (
+              <Button
+                variant="primary"
+                size="sm"
+                shadow="sm"
+                onClick={handleCreatePresentation}
+                loading={loading}
+              >
+                {t('title')}
+              </Button>
+            )}
           </div>
         </>
       )}

diff --git a/packages/dapp/src/components/CredentialDisplay/FormatedPanel.tsx b/packages/dapp/src/components/CredentialDisplay/FormatedPanel.tsx
@@ -64,11 +64,11 @@ const FormatedPanel = ({ credential }: FormatedPanelProps) => {
   }, [credential]);
 
   return (
-    <div className="flex w-full flex-col space-y-8">
-      <div className="dark:from-navy-blue-700 dark:to-navy-blue-700 flex items-center rounded-2xl bg-gradient-to-b from-orange-100 to-pink-100 px-4 py-6 shadow-md">
+    <div className="flex flex-col space-y-8">
+      <div className="dark:from-navy-blue-700 dark:to-navy-blue-700 flex max-w-full items-center rounded-2xl bg-gradient-to-b from-orange-100 to-pink-100 px-4 py-6 shadow-md">
         <div className="w-11/12">
           <Tooltip tooltip={types}>
-            <h1 className="font-ubuntu dark:text-orange-accent-dark truncate text-left text-2xl font-medium text-pink-500">
+            <h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
               {types}
             </h1>
           </Tooltip>

diff --git a/packages/dapp/src/components/CredentialOfferModal/index.tsx b/packages/dapp/src/components/CredentialOfferModal/index.tsx