chore: improve dropdowns

.changeset/slow-cats-love.md

@@ -0,0 +1,5 @@
+---
+"@blockchain-lab-um/dapp": patch
+---
+
+Improves dropdowns.

packages/dapp/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

packages/dapp/package.json

@@ -26,10 +26,14 @@
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@nextui-org/react": "^2.2.10",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@react-oauth/google": "^0.12.1",
     "@supabase/supabase-js": "^2.39.7",
-    "@tanstack/react-query": "^5.28.4",
+    "@tanstack/react-query": "^5.32.0",
     "@tanstack/react-table": "^8.13.2",
     "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
@@ -46,6 +50,7 @@
     "@veramo/utils": "6.0.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/og": "^0.6.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
     "did-jwt-vc": "^3.2.13",
@@ -63,6 +68,7 @@
     "js-cookie": "^3.0.5",
     "jsdom": "^24.0.0",
     "jsonwebtoken": "^9.0.2",
+    "lucide-react": "^0.367.0",
     "luxon": "^3.4.4",
     "marked": "^12.0.1",
     "next": "14.1.3",
@@ -77,7 +83,9 @@
     "sharp": "^0.33.2",
     "siwe": "^2.1.4",
     "swr": "^2.2.5",
+    "tailwind-merge": "^2.2.2",
     "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss-animate": "^1.0.7",
     "viem": "^2.9.23",
     "wagmi": "^2.5.20",
     "zustand": "^4.5.2"

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

@@ -9,6 +9,7 @@ import Image from 'next/image';
 import { mainnet } from 'viem/chains';
 import { normalize } from 'viem/ens';
 import { useAccount, useEnsAvatar, useEnsName } from 'wagmi';
+import ToggleTheme from '@/components/ToggleTheme';
 
 import { copyToClipboard } from '@/utils/string';
 import { TextSkeleton } from '../Skeletons/TextSkeleton';
@@ -119,14 +120,19 @@ const AddressPopover = ({ did, disconnect }: AddressPopoverProps) => {
                       </button>
                     </div>
                   </div>
-                  <div className="mt-2 flex justify-start">
-                    <button
-                      type="button"
-                      onClick={disconnect}
-                      className="animated-transition mt-auto text-xs font-semibold text-red-500 hover:text-red-700 dark:text-red-300 hover:dark:text-red-500"
-                    >
-                      {t('address.disconnect')}
-                    </button>
+                  <div className="mt-2 flex justify-between items-center">
+                    <div>
+                      <button
+                        type="button"
+                        onClick={disconnect}
+                        className="animated-transition mt-auto text-xs font-semibold text-red-500 hover:text-red-700 dark:text-red-300 hover:dark:text-red-500"
+                      >
+                        {t('address.disconnect')}
+                      </button>
+                    </div>
+                    <div>
+                      <ToggleTheme />
+                    </div>
                   </div>
                 </div>
               </div>

packages/dapp/src/components/AppNavbar/NavConnection.tsx

@@ -7,7 +7,7 @@ import { useAccount, useChainId, useDisconnect, useSwitchChain } from 'wagmi';
 
 import AddressPopover from '@/components/AddressPopover';
 import ConnectButton from '@/components/ConnectButton';
-import DropdownMenu from '@/components/DropdownMenu';
+
 import MethodDropdownMenu from '@/components/MethodDropdownMenu';
 import { useMascaStore } from '@/stores';
 import {
@@ -16,6 +16,8 @@ import {
   getAvailableNetworksList,
 } from '@/utils/networks';
 
+import NetworkDropDownMenu from '@/components/NetworkDropDownMenu';
+
 export const NavConnection = () => {
   const { switchChain } = useSwitchChain();
   const t = useTranslations('NavConnection');
@@ -39,7 +41,7 @@ export const NavConnection = () => {
       (NETWORKS_BY_DID[currMethod].includes(stringified) ||
         NETWORKS_BY_DID[currMethod].includes('*'))
     ) {
-      return network;
+      return network.name;
     }
     return t('unsupported-network');
   };
@@ -57,7 +59,9 @@ export const NavConnection = () => {
   }, [chainId, currMethod]);
 
   const setNetwork = async (network: string) => {
-    const key = Object.keys(NETWORKS).find((val) => NETWORKS[val] === network);
+    const key = Object.keys(NETWORKS).find(
+      (val) => NETWORKS[val].name === network
+    );
     if (key) {
       switchChain(
         { chainId: Number(key) },
@@ -73,14 +77,14 @@ export const NavConnection = () => {
   };
 
   return isConnected ? (
-    <div className="flex items-center justify-center">
+    <div className="flex items-center justify-center gap-2">
       {(currMethod === 'did:ethr' ||
         currMethod === 'did:pkh' ||
         currMethod === 'did:polygonid' ||
         currMethod === 'did:ens' ||
         currMethod === 'did:iden3') && (
         <div className="hidden md:block">
-          <DropdownMenu
+          <NetworkDropDownMenu
             size="method"
             rounded="full"
             shadow="none"

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

@@ -8,7 +8,6 @@ import { useAccount } from 'wagmi';
 
 import MascaLogo from '@/components/MascaLogo';
 import MenuPopover from '@/components/MenuPopover';
-import ToggleTheme from '@/components/ToggleTheme';
 import { NavConnection } from './NavConnection';
 
 const MAIN_LINKS = [
@@ -70,7 +69,6 @@ export default function AppNavbar() {
         <div className="flex-1 md:flex-none">
           <div className="flex items-center justify-end">
             <NavConnection />
-            <ToggleTheme />
           </div>
         </div>
       </div>

packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx

@@ -1,49 +1,86 @@
-import { Menu } from '@headlessui/react';
 import { CheckIcon } from '@heroicons/react/24/solid';
+import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
 import { clsx } from 'clsx';
+import { useState } from 'react';
 
 interface DropdownButtonProps {
   children: React.ReactNode;
   handleBtn: (text: string) => Promise<void>;
   selected: boolean;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'primary-active'
+    | 'secondary-active'
+    | 'gray'
+    | 'method';
 }
 
-export const DropdownButton = ({
+const variants: Record<string, string> = {
+  primary:
+    'dark:bg-navy-blue-500 dark:text-orange-accent-dark/95 animated-transition cursor-pointer bg-pink-50 text-pink-600',
+  secondary: 'bg-navy-blue-100 text-navy-blue-600 ',
+  'primary-active':
+    'dark:bg-navy-blue-500 dark:text-orange-accent-dark/95 animated-transition cursor-pointer bg-pink-50 text-pink-600',
+  'secondary-active': 'bg-navy-blue-100 text-navy-blue-600',
+  gray: 'bg-gray-100 text-gray-800 ',
+  method:
+    'dark:bg-navy-blue-500 dark:text-orange-accent-dark animated-transition cursor-pointer bg-pink-50 text-pink-600',
+};
+
+const variantsSelected: Record<string, string> = {
+  primary:
+    'dark:text-orange-accent-dark dark:bg-navy-blue-600 bg-white text-pink-700',
+  secondary: 'bg-navy-blue-100 text-navy-blue-600 font-semibold',
+  'primary-active':
+    'dark:text-orange-accent-dark dark:bg-navy-blue-600 bg-white text-pink-700',
+  'secondary-active': 'bg-navy-blue-100 text-navy-blue-600 font-semibold',
+  gray: 'bg-gray-100 font-semibold text-gray-900',
+  method:
+    'dark:text-orange-accent-dark dark:bg-navy-blue-600 bg-white text-pink-700',
+};
+
+const variantsSelectedElse: Record<string, string> = {
+  primary: 'dark:text-navy-blue-100 text-gray-600',
+  secondary: 'bg-navy-blue-100 text-navy-blue-600 font-semibold',
+  'primary-active': 'dark:text-navy-blue-100 text-gray-600 ',
+  'secondary-active': 'bg-navy-blue-100 text-navy-blue-600 font-semibold',
+  gray: 'bg-gray-100 font-semibold text-gray-900',
+  method: '',
+};
+
+export function DropdownButton({
   children,
   handleBtn,
   selected,
-}: DropdownButtonProps) => (
-  <Menu.Item>
-    {({ active }) => (
-      <span
-        onClick={() => {
-          handleBtn(children as string)
-            .then(() => {})
-            .catch(() => {});
-        }}
+  variant = 'primary',
+}: DropdownButtonProps) {
+  const [isActive, setIsActive] = useState(false);
+  const handleMouseEnter = () => setIsActive(true);
+  const handleMouseLeave = () => setIsActive(false);
+
+  return (
+    <DropdownMenuItem>
+      <button
+        type="button"
         className={clsx(
-          active
-            ? 'dark:bg-navy-blue-500 dark:text-orange-accent-dark/95 animated-transition cursor-pointer bg-pink-50 text-pink-600 '
-            : '',
-          selected
-            ? 'dark:text-orange-accent-dark dark:bg-navy-blue-600 bg-white text-pink-700'
-            : 'dark:text-navy-blue-100 text-gray-600',
-          'block rounded-full py-2 text-lg'
+          'md:text-md block w-full rounded-full py-2 px-1 text-sm',
+          isActive ? variants[variant] : null,
+          selected ? variantsSelected[variant] : variantsSelectedElse[variant]
         )}
+        onClick={() => handleBtn(children as string)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
-        <div className="grid grid-cols-6">
-          <span>
-            {selected ? (
-              <CheckIcon className="ml-3 h-4 w-4 lg:h-5 lg:w-5" />
-            ) : (
-              ''
-            )}
-          </span>
-          <span className="col-span-4 col-start-2 text-center">
+        <div className="grid grid-cols-8 items-center px-1">
+          <span className="col-span-6 flex justify-start items-center">
             {children === 'did:key:jwk_jcs-pub' ? 'did:key (EBSI)' : children}
           </span>
+          <span className="col-span-2">
+            {selected && <CheckIcon className="ml-3 h-4 w-4 lg:h-5 lg:w-5" />}
+          </span>
         </div>
-      </span>
-    )}
-  </Menu.Item>
-);
+      </button>
+    </DropdownMenuItem>
+  );
+}