fix: update dapp "Connect Page" (#465)

blockchain-lab-um · Sep 12, 2023 · b4714f6 · b4714f6
1 parent 1c0d7e8
commit b4714f6
Show file tree

Hide file tree

Showing 8 changed files with 251 additions and 95 deletions.
diff --git a/.changeset/chilly-boxes-sit.md b/.changeset/chilly-boxes-sit.md
@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': minor
+---
+
+Added Masca description to `Connect Page˙.
diff --git a/.changeset/heavy-timers-laugh.md b/.changeset/heavy-timers-laugh.md
@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+Add missing links in navbar and footer
diff --git a/packages/dapp/src/components/AppBottomBar/index.tsx b/packages/dapp/src/components/AppBottomBar/index.tsx
@@ -6,35 +6,43 @@ import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid';
 import clsx from 'clsx';
 import { useTranslations } from 'next-intl';
 
+import { useGeneralStore } from '@/stores/generalStore';
+
 const MAIN_LINKS = [
   {
     name: 'dashboard',
     href: '/app',
+    requiresConnection: false,
   },
   {
     name: 'settings',
     href: '/app/settings',
+    requiresConnection: true,
   },
 ];
 
 const OTHER_LINKS = [
-  // {
-  //   name: 'get-credential',
-  //   href: '/app/get-credential',
-  // },
-  // {
-  //   name: 'authorization-request',
-  //   href: '/app/authorization-request',
-  // },
   {
-    name: 'qr-code-session',
+    name: 'create-credential',
+    href: '/app/create-credential',
+    requiresConnection: true,
+  },
+  {
+    name: 'verify-data',
+    href: '/app/verify-data',
+    requiresConnection: true,
+  },
+  {
+    name: 'qr-scanner',
     href: '/app/qr-code-session',
+    requiresConnection: false,
   },
 ];
 
 const AppBottomBar = () => {
   const t = useTranslations('AppBottomBar');
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const isConnected = useGeneralStore((state) => state.isConnected);
 
   const toggleMenu = () => {
     setIsMenuOpen((currVal) => !currVal);
@@ -45,17 +53,22 @@ const AppBottomBar = () => {
       <div className="dark:border-navy-blue-600/50 dark:bg-navy-blue-800 fixed bottom-0 left-0 right-0 z-20 flex h-14 w-screen items-center border-t-2 border-pink-200/50 bg-pink-50 md:hidden">
         <div className="flex flex-1 items-center p-1 px-4">
           <div className="flex flex-1 items-center space-x-2">
-            {MAIN_LINKS.map(({ name, href }) => (
-              // Link styled as button for mobile bottom navbar with tailwind
-              <Link
-                onClick={() => setIsMenuOpen(false)}
-                className="animated-transition dark:bg-navy-blue-700 dark:hover:bg-navy-blue-600 rounded-lg bg-pink-100 p-2 text-pink-600 hover:bg-pink-50 dark:text-white"
-                key={name}
-                href={href}
-              >
-                {t(name)}
-              </Link>
-            ))}
+            {MAIN_LINKS.map(({ name, href, requiresConnection }) => {
+              if ((requiresConnection && isConnected) || !requiresConnection) {
+                return (
+                  // Link styled as button for mobile bottom navbar with tailwind
+                  <Link
+                    onClick={() => setIsMenuOpen(false)}
+                    className="animated-transition dark:bg-navy-blue-700 dark:hover:bg-navy-blue-600 rounded-lg bg-pink-100 p-2 text-pink-600 hover:bg-pink-50 dark:text-white"
+                    key={name}
+                    href={href}
+                  >
+                    {t(name)}
+                  </Link>
+                );
+              }
+              return <div className="hidden" key={href}></div>;
+            })}
           </div>
           <button
             onClick={toggleMenu}
@@ -72,16 +85,21 @@ const AppBottomBar = () => {
         )}
       >
         <div className="dark:border-navy-blue-600/50 dark:bg-navy-blue-800 flex h-full w-full flex-col space-y-1 rounded-t-lg border-2 border-pink-200/50 bg-pink-50 p-2">
-          {OTHER_LINKS.map(({ name, href }) => (
-            <Link
-              onClick={() => setIsMenuOpen(false)}
-              className="animated-transition dark:bg-navy-blue-700 dark:hover:bg-navy-blue-600 rounded-lg bg-pink-100 p-2 text-pink-600 outline-none hover:bg-pink-50 focus:outline-none dark:text-white"
-              key={name}
-              href={href}
-            >
-              {t(name)}
-            </Link>
-          ))}
+          {OTHER_LINKS.map(({ name, href, requiresConnection }) => {
+            if ((requiresConnection && isConnected) || !requiresConnection) {
+              return (
+                <Link
+                  onClick={() => setIsMenuOpen(false)}
+                  className="animated-transition dark:bg-navy-blue-700 dark:hover:bg-navy-blue-600 rounded-lg bg-pink-100 p-2 text-pink-600 outline-none hover:bg-pink-50 focus:outline-none dark:text-white"
+                  key={name}
+                  href={href}
+                >
+                  {t(name)}
+                </Link>
+              );
+            }
+            return <div className="hidden" key={href}></div>;
+          })}
         </div>
       </div>
     </>

diff --git a/packages/dapp/src/components/AppNavbar/index.tsx b/packages/dapp/src/components/AppNavbar/index.tsx
@@ -8,22 +8,26 @@ import { useTranslations } from 'next-intl';
 import MascaLogo from '@/components/MascaLogo';
 import MenuPopover from '@/components/MenuPopover';
 import ToggleTheme from '@/components/ToggleTheme';
+import { useGeneralStore } from '@/stores';
 import { NavConnection } from './NavConnection';
 
 const MAIN_LINKS = [
   {
     name: 'dashboard',
     href: '/app',
+    requiresConnection: false,
   },
   {
     name: 'settings',
     href: '/app/settings',
+    requiresConnection: true,
   },
 ];
 
 export default function AppNavbar() {
   const t = useTranslations('AppNavbar');
   const pathname = usePathname() ?? '/';
+  const isConnected = useGeneralStore((state) => state.isConnected);
 
   return (
     <div className="main-bg fixed left-0 right-0 top-0 z-50 m-0 flex h-24 w-screen items-center">
@@ -37,20 +41,25 @@ export default function AppNavbar() {
           </div>
         </Link>
         <div className="mx-2 hidden flex-1 items-center justify-center md:flex">
-          {MAIN_LINKS.map(({ name, href }) => (
-            <Link
-              className={clsx(
-                'nav-btn',
-                pathname === href
-                  ? 'dark:text-orange-accent-dark text-pink-500'
-                  : 'dark:text-navy-blue-400 text-gray-600'
-              )}
-              key={name}
-              href={href}
-            >
-              {t(`menu.${name}`)}
-            </Link>
-          ))}
+          {MAIN_LINKS.map(({ name, href, requiresConnection }) => {
+            if ((requiresConnection && isConnected) || !requiresConnection) {
+              return (
+                <Link
+                  className={clsx(
+                    'nav-btn',
+                    pathname === href
+                      ? 'dark:text-orange-accent-dark text-pink-500'
+                      : 'dark:text-navy-blue-400 text-gray-600'
+                  )}
+                  key={name}
+                  href={href}
+                >
+                  {t(`menu.${name}`)}
+                </Link>
+              );
+            }
+            return <div className="hidden" key={href}></div>;
+          })}
           <MenuPopover />
         </div>
         <div className="flex-1 md:flex-none">

diff --git a/packages/dapp/src/components/ConnectedProvider/index.tsx b/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 justify-center px-6 py-12 sm:px-12">
+        <div className="text-h4 sm:text-h3 dark:text-navy-blue-50 text-center text-gray-900">
           {t('connect')}
-        </h3>
+        </div>
+        <div className="dark:border-navy-blue-500 mt-8 rounded-3xl border border-gray-500 px-6 py-8 sm:px-12 md:min-w-[40em]">
+          <div className="flex items-center gap-x-6">
+            <div className="hidden sm:block">
+              <MascaLogo />
+            </div>
+            <div>
+              <div className="text-h4 sm:text-h3 dark:text-navy-blue-50 font-ubuntu text-gray-900">
+                {t('masca')}
+              </div>
+              <div className="text-h5 sm: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="text-md flex flex-col items-start text-justify tracking-normal sm:text-xl">
+              <li className="mt-12">
+                <div className=" just flex items-center gap-x-4">
+                  <LockClosedIcon className="dark:text-orange-accent-dark h-6 w-6 text-pink-500 sm:h-8 sm:w-8" />
+                  <div className="dark:text-navy-blue-50 font-ubuntu text-md text-start font-medium text-gray-900 sm:text-2xl ">
+                    {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-6 w-6 text-pink-500 sm:h-8 sm:w-8" />
+                  <div className="dark:text-navy-blue-50 font-ubuntu text-md text-start font-medium text-gray-900 sm:text-2xl ">
+                    {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 sm:h-8 sm:w-8" />
+                  <div className="dark:text-navy-blue-50 font-ubuntu text-md max-w-[15em] text-start font-medium text-gray-900 sm:text-2xl ">
+                    {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>
   );

diff --git a/packages/dapp/src/components/MenuPopover/index.tsx b/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