diff --git a/.changeset/chilly-boxes-sit.md b/.changeset/chilly-boxes-sit.md new file mode 100644 index 000000000..345415d9d --- /dev/null +++ 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 new file mode 100644 index 000000000..56189b0f2 --- /dev/null +++ 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 index 1c975ce61..fcd8bb9a7 100644 --- 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 = () => {
- {MAIN_LINKS.map(({ name, href }) => ( - // Link styled as button for mobile bottom navbar with tailwind - 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)} - - ))} + {MAIN_LINKS.map(({ name, href, requiresConnection }) => { + if ((requiresConnection && isConnected) || !requiresConnection) { + return ( + // Link styled as button for mobile bottom navbar with tailwind + 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)} + + ); + } + return
; + })}
diff --git a/packages/dapp/src/components/AppNavbar/index.tsx b/packages/dapp/src/components/AppNavbar/index.tsx index b68563020..9eebee719 100644 --- 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 (
@@ -37,20 +41,25 @@ export default function AppNavbar() {
- {MAIN_LINKS.map(({ name, href }) => ( - - {t(`menu.${name}`)} - - ))} + {MAIN_LINKS.map(({ name, href, requiresConnection }) => { + if ((requiresConnection && isConnected) || !requiresConnection) { + return ( + + {t(`menu.${name}`)} + + ); + } + return
; + })}
diff --git a/packages/dapp/src/components/ConnectedProvider/index.tsx b/packages/dapp/src/components/ConnectedProvider/index.tsx index d1dea0484..1bf7cec10 100644 --- 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 (
-
-

+
+
{t('connect')} -

+
+
+
+
+ +
+
+
+ {t('masca')} +
+
+ {t('masca-desc')} +
+
+
+
+
+
    +
  • +
    + +
    + {t('features.feat-1')} +
    +
    +
    + {t('features.desc-1-1')} + + {t('features.desc-1-2')} + + {t('features.desc-1-3')} + + {t('features.desc-1-4')} + + . +
    +
    • +
  • +
    + +
    + {t('features.feat-2')} +
    +
    +
    + {t('features.desc-2-1')} + + {t('features.desc-2-2')} + + {t('features.desc-2-3')} + + {t('features.desc-2-4')} + + . +
    +
    • +
  • +
    + +
    + {t('features.feat-3')} +
    +
    +
    + {t('features.desc-3-1')} + + {t('features.desc-3-2')} + + {t('features.desc-3-3')} + + {t('features.desc-3-4')} + + {t('features.desc-3-5')} +
    +
    • +
+
+
); diff --git a/packages/dapp/src/components/MenuPopover/index.tsx b/packages/dapp/src/components/MenuPopover/index.tsx index 6d9f212a9..81101edcf 100644 --- 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 = () => ( JSX.Element; + requiresConnection: boolean; } const INTERNAL_LINKS: LinkProps[] = [ @@ -74,16 +77,19 @@ 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 ( {({ open, close }) => ( @@ -147,22 +155,30 @@ function MenuPopover() {
- {INTERNAL_LINKS.map((link) => ( - { - 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" - > - - - ))} + {INTERNAL_LINKS.map((link) => { + if ( + (link.requiresConnection && isConnected) || + !link.requiresConnection + ) { + return ( + { + 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" + > + + + ); + } + return
; + })}