fix: update dapp "Connect Page"

.changeset/new-ladybugs-end.md

@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+feat: add Masca description to "Connect Page"

packages/dapp/src/components/ConnectedProvider/index.tsx

@@ -1,9 +1,15 @@
 'use client';
 
 import React from 'react';
+import {
+  CreditCardIcon,
+  GlobeAltIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/solid';
 import { useTranslations } from 'next-intl';
 
 import { useGeneralStore } from '@/stores';
+import MascaLogo from '../MascaLogo';
 
 interface ConnectedProviderProps {
   children: React.ReactNode;
@@ -19,10 +25,87 @@ const ConnectedProvider = ({ children }: ConnectedProviderProps) => {
 
   return (
     <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 flex-1 rounded-3xl bg-white shadow-lg">
-      <div className="flex h-full items-center justify-center">
-        <h3 className="text-h4 md:text-h3 dark:text-navy-blue-50 text-gray-800">
+      <div className="flex flex-col items-center p-12">
+        <div className="text-h3 dark:text-navy-blue-50 text-gray-900">
           {t('connect')}
-        </h3>
+        </div>
+        <div className="dark:border-navy-blue-500 mt-8 rounded-3xl border border-gray-500 px-12 py-8 md:min-w-[40em]">
+          <div className="flex items-center gap-x-6">
+            <div className="hidden sm:block">
+              <MascaLogo />
+            </div>
+            <div>
+              <div className="text-h3 dark:text-navy-blue-50 font-ubuntu text-gray-900">
+                {t('masca')}
+              </div>
+              <div className="text-h4 dark:text-navy-blue-300 font-ubuntu mt-2 text-gray-600">
+                {t('masca-desc')}
+              </div>
+            </div>
+          </div>
+          <hr className="mt-4" />
+          <div className="flex justify-center">
+            <ul className="flex flex-col items-start text-justify text-xl tracking-normal">
+              <li className="mt-12">
+                <div className=" flex items-center gap-x-4">
+                  <LockClosedIcon className="dark:text-orange-accent-dark h-8 w-8 text-pink-500" />
+                  <div className="dark:text-navy-blue-50 font-ubuntu text-2xl font-medium text-gray-900 ">
+                    {t('features.feat-1')}
+                  </div>
+                </div>
+                <div className="dark:text-navy-blue-200 mt-4 max-w-md text-gray-700">
+                  {t('features.desc-1-1')}
+                  <span className="dark:text-navy-blue-100 font-bold text-gray-800">
+                    {t('features.desc-1-2')}
+                  </span>
+                  {t('features.desc-1-3')}
+                  <span className="dark:text-navy-blue-100 font-bold text-gray-800">
+                    {t('features.desc-1-4')}
+                  </span>
+                  .
+                </div>
+              </li>
+              <li className="mt-12">
+                <div className=" flex items-center gap-x-4">
+                  <CreditCardIcon className="dark:text-orange-accent-dark h-8 w-8 text-pink-500" />
+                  <div className="dark:text-navy-blue-50 font-ubuntu text-2xl font-medium text-gray-900 ">
+                    {t('features.feat-2')}
+                  </div>
+                </div>
+                <div className="dark:text-navy-blue-200 mt-4 max-w-md text-gray-700">
+                  {t('features.desc-2-1')}
+                  <span className="dark:text-navy-blue-100 font-bold text-gray-800">
+                    {t('features.desc-2-2')}
+                  </span>
+                  {t('features.desc-2-3')}
+                  <span className="dark:text-navy-blue-100 font-bold text-gray-800">
+                    {t('features.desc-2-4')}
+                  </span>
+                  .
+                </div>
+              </li>
+              <li className="mt-12">
+                <div className=" flex items-center gap-x-4">
+                  <GlobeAltIcon className="dark:text-orange-accent-dark h-8 w-8 text-pink-500" />
+                  <div className="dark:text-navy-blue-50 font-ubuntu max-w-[15em] text-start text-2xl font-medium text-gray-900 ">
+                    {t('features.feat-3')}
+                  </div>
+                </div>
+                <div className="dark:text-navy-blue-200 mt-4 max-w-md text-gray-700">
+                  {t('features.desc-3-1')}
+                  <span className="dark:text-navy-blue-100 font-bold text-gray-800">
+                    {t('features.desc-3-2')}
+                  </span>
+                  {t('features.desc-3-3')}
+                  <span className="dark:text-navy-blue-100 font-bold text-gray-800">
+                    {t('features.desc-3-4')}
+                  </span>
+                  {t('features.desc-3-5')}
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
   );

packages/dapp/src/components/MenuPopover/index.tsx

@@ -7,6 +7,8 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
 import { useTranslations } from 'next-intl';
 
+import { useGeneralStore } from '@/stores';
+
 const IconCreateCredential = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -67,23 +69,27 @@ interface LinkProps {
   name: string;
   href: string;
   icon: () => JSX.Element;
+  requiresConnection: boolean;
 }
 
 const INTERNAL_LINKS: LinkProps[] = [
   {
     name: 'create-credential',
     href: '/app/create-credential',
     icon: IconCreateCredential,
+    requiresConnection: true,
   },
   {
     name: 'verify-data',
     href: '/app/verify-data',
     icon: IconVerifyData,
+    requiresConnection: true,
   },
   {
     name: 'qr-scanner',
     href: '/app/qr-code-session',
     icon: IconCamera,
+    requiresConnection: false,
   },
 ];
 
@@ -112,6 +118,8 @@ const DropDownItem = ({ SVGIcon, name, description }: DropDownItemProps) => (
 function MenuPopover() {
   const t = useTranslations('AppNavbar');
 
+  const isConnected = useGeneralStore((state) => state.isConnected);
+
   return (
     <Popover className="group relative">
       {({ open, close }) => (
@@ -147,22 +155,30 @@ function MenuPopover() {
             <Popover.Panel className="absolute right-0 z-50 mt-3 w-screen max-w-xs">
               <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5">
                 <div className="dark:bg-navy-blue-400 relative grid gap-8 bg-white p-7 lg:grid-cols-1">
-                  {INTERNAL_LINKS.map((link) => (
-                    <Link
-                      key={link.name}
-                      href={link.href}
-                      onClick={() => {
-                        close();
-                      }}
-                      className="dark:hover:bg-navy-blue-500/40 -m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500/50"
-                    >
-                      <DropDownItem
-                        SVGIcon={link.icon}
-                        name={t(`dropdown.${link.name}`)}
-                        description={t(`dropdown.description.${link.name}`)}
-                      />
-                    </Link>
-                  ))}
+                  {INTERNAL_LINKS.map((link) => {
+                    if (
+                      (link.requiresConnection && isConnected) ||
+                      !link.requiresConnection
+                    ) {
+                      return (
+                        <Link
+                          key={link.name}
+                          href={link.href}
+                          onClick={() => {
+                            close();
+                          }}
+                          className="dark:hover:bg-navy-blue-500/40 -m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500/50"
+                        >
+                          <DropDownItem
+                            SVGIcon={link.icon}
+                            name={t(`dropdown.${link.name}`)}
+                            description={t(`dropdown.description.${link.name}`)}
+                          />
+                        </Link>
+                      );
+                    }
+                    return <div className="hidden" key={link.name}></div>;
+                  })}
                 </div>
                 <div className="dark:bg-navy-blue-500 bg-gray-100 p-4">
                   <a

packages/dapp/src/messages/en.json

@@ -16,9 +16,9 @@
       "blog": "Blog",
       "create-credential": "Create Credential",
       "description": {
-        "authorization-request": "Create a verifiable presentation using the OpenID Connect protocol",
+        "authorization-request": "Create a presentation using the OpenID Connect protocol",
         "blog": "Read the Blockchain Lab:UM Medium Blog",
-        "create-credential": "Create a Verifiable Credential",
+        "create-credential": "Create a custom credential",
         "discord": "Join the Blockchain Lab:UM Discord Server",
         "documentation": "Read the Masca documentation",
         "ecosystem": "View the Masca Ecosystem",
@@ -27,7 +27,7 @@
         "qr-code-session": "Create session to scan QR codes using your mobile device",
         "qr-scanner": "Start various Authorization and CredentialOffer Flows",
         "twitter": "Follow Masca on Twitter",
-        "verify-data": "Verify Verifiable Credentials & Verifiable Presentations"
+        "verify-data": "Verify credentials & presentations"
       },
       "discord": "Discord",
       "documentation": "Documentation",
@@ -61,7 +61,7 @@
     "secondary-desc-2": "(Requires a primary device to work)"
   },
   "ConnectButton": {
-    "connect": "Connect Wallet"
+    "connect": "Connect & Install Masca"
   },
   "ConnectDeviceView": {
     "connect": "Connect Wallet to proceed!",
@@ -73,7 +73,27 @@
     "success": "Connection established!"
   },
   "ConnectedProvider": {
-    "connect": "Connect MetaMask to use the dapp"
+    "connect": "Connect Wallet & Install Masca to continue",
+    "masca": "Masca",
+    "masca-desc": "Manage Decentralized Identity in MetaMask",
+    "features": {
+      "feat-1": "Own your Identity",
+      "feat-2": "Manage Credentials securely",
+      "feat-3": "Universal Compatibility with Identity Flows",
+      "desc-1-1": "Imagine your ",
+      "desc-1-2": "Ethereum account ",
+      "desc-1-3": "as a passport in the digital world. With just a few clicks, transform your existing account into a ",
+      "desc-1-4": "universal digital Identity",
+      "desc-2-1": "Store everything from your Web3 community participation certificate to your real world work credentials safely and securely in one place. Choose to save them on ",
+      "desc-2-2": "Ceramic Network ",
+      "desc-2-3": "or keep them privately in your ",
+      "desc-2-4": "MetaMask wallet",
+      "desc-3-1": "Easily use your digital identity across different platforms and services. Masca supports popular identity systems like ",
+      "desc-3-2": "Polygon ID ",
+      "desc-3-3": "and ",
+      "desc-3-4": "OID4VC, ",
+      "desc-3-5": "making your life easier and more secure."
+    }
   },
   "Controlbar": {
     "query": "Querying credentials",
@@ -92,7 +112,7 @@
       "title": "OPTIONS"
     },
     "save": {
-      "description": "Would you like to save newly created Credential in Masca?",
+      "description": "Would you like to save newly created credential in Masca?",
       "select-storage-placeholder": "Select data storage",
       "storage": "Storage",
       "title": "Save"
@@ -101,7 +121,7 @@
     "toast": {
       "error-json": "Payload is not a valid JSON",
       "error-vc": "Payload is not a valid!",
-      "loading": "Creating Credential...",
+      "loading": "Creating credential...",
       "success": "Credential successfully created!"
     }
   },
@@ -120,7 +140,7 @@
       "issuer": "ISSUER",
       "remove": "REMOVE",
       "status": "STATUS",
-      "title": "Selected Credentials",
+      "title": "Selected credentials",
       "type": "TYPE"
     },
     "title": "Create Presentation",
@@ -129,9 +149,9 @@
     }
   },
   "CredentialDisplay": {
-    "create-presentation": "Create Verifiable Presentation",
+    "create-presentation": "Create Presentation",
     "datastores": "DATA STORES",
-    "title": "Verifiable Credential"
+    "title": "Credential"
   },
   "CredentialModal": {
     "cancel": "Cancel",
@@ -150,16 +170,16 @@
     "title": "New credential offer received"
   },
   "CredentialOfferView": {
-    "error": "Failed to finish CredentialOffer Flow!",
+    "error": "Failed to finish CredentialOffer flow!",
     "finished": "Request finished",
     "handling": "Handling credential offer...",
-    "start": "Start Flow",
-    "success": "Succesfully finished CredentialOffer Flow!",
+    "start": "Start flow",
+    "success": "Succesfully finished CredentialOffer flow!",
     "switch-to": "Switch to ",
     "to-continue": "to continue"
   },
   "DIDDisplay": {
-    "tooltip": "Open DID in Universal resolver"
+    "tooltip": "Open DID in Universal Resolver"
   },
   "Dashboard": {
     "card": {
@@ -173,8 +193,8 @@
     },
     "create-verifiable-presentation": "Create Presentation",
     "no-credentials": {
-      "get": "Get your first VC",
-      "load": "Load VCs",
+      "get": "Get your first credential",
+      "load": "Load Credentials",
       "or": "or"
     },
     "pagination": {
@@ -199,7 +219,7 @@
     "table-header": {
       "credentials": "My Credentials",
       "fetched": "Fetched",
-      "found": "Credential(s) found"
+      "found": "credential(s) found"
     },
     "tooltip": {
       "no-exp-date": "Does not have an expiration date",
@@ -401,7 +421,7 @@
       "error-json": "Data is not a valid JSON",
       "error-type": "Data is not a valid VC/VP",
       "error-verify": "Data is not valid!",
-      "loading": "Creating Credential..."
+      "loading": "Creating credential..."
     },
     "verify": "Verify"
   }

packages/dapp/tailwind.config.cjs

@@ -89,18 +89,18 @@ module.exports = {
       'jetbrains-mono': ['var(--font-jetbrains-mono)'],
     },
     fontSize: {
-      hint: ['10px', { lineHeight: '16px', letterSpacing: '-0.032em' }],
-      label: ['12px', { lineHeight: '12px', letterSpacing: '-0.032em' }],
-      '2xs': ['10px', { lineHeight: '10px', letterSpacing: '-0.032em' }],
-      xs: ['12px', { lineHeight: '16px', letterSpacing: '-0.032em' }],
-      sm: ['14px', { lineHeight: '15px', letterSpacing: '-0.032em' }],
-      md: ['16px', { lineHeight: '19px', letterSpacing: '-0.032em' }],
-      lg: ['18px', { lineHeight: '20px', letterSpacing: '-0.032em' }],
-      xl: ['20px', { lineHeight: '24px', letterSpacing: '-0.032em' }],
+      hint: ['10px', { lineHeight: '16px', letterSpacing: '0em' }],
+      label: ['12px', { lineHeight: '12px', letterSpacing: '0em' }],
+      '2xs': ['10px', { lineHeight: '10px', letterSpacing: '0em' }],
+      xs: ['12px', { lineHeight: '16px', letterSpacing: '0em' }],
+      sm: ['14px', { lineHeight: '15px', letterSpacing: '0em' }],
+      md: ['16px', { lineHeight: '19px', letterSpacing: '0em' }],
+      lg: ['18px', { lineHeight: '20px', letterSpacing: '0em' }],
+      xl: ['20px', { lineHeight: '24px', letterSpacing: '0em' }],
       '2xl': ['24px', { lineHeight: '28px', letterSpacing: '-0.032em' }],
-      h6: ['12px', { lineHeight: '14px', letterSpacing: '-0.032em' }],
-      h5: ['16px', { lineHeight: '18px', letterSpacing: '-0.032em' }],
-      h4: ['20px', { lineHeight: '23px', letterSpacing: '-0.032em' }],
+      h6: ['12px', { lineHeight: '14px', letterSpacing: '0em' }],
+      h5: ['16px', { lineHeight: '18px', letterSpacing: '0em' }],
+      h4: ['20px', { lineHeight: '23px', letterSpacing: '0em' }],
       h3: ['28px', { lineHeight: '32px', letterSpacing: '-0.032em' }],
       h2: ['32px', { lineHeight: '37px', letterSpacing: '-0.032em' }],
       h1: ['48px', { lineHeight: '46px', letterSpacing: '-0.042em' }],