-
- {selected ? (
-
- ) : (
- ''
- )}
-
-
+
+
{children === 'did:key:jwk_jcs-pub' ? 'did:key (EBSI)' : children}
+
+ {selected && }
+
-
- )}
-
-);
+
+
+ );
+}
diff --git a/packages/dapp/src/components/MethodDropdownMenu/index.tsx b/packages/dapp/src/components/MethodDropdownMenu/index.tsx
index 3ce35b402..658da8885 100644
--- a/packages/dapp/src/components/MethodDropdownMenu/index.tsx
+++ b/packages/dapp/src/components/MethodDropdownMenu/index.tsx
@@ -5,11 +5,17 @@ import {
isError,
requiresNetwork,
} from '@blockchain-lab-um/masca-connector';
-import { Menu, Transition } from '@headlessui/react';
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
import { ChevronDownIcon } from '@heroicons/react/20/solid';
import clsx from 'clsx';
import { useTranslations } from 'next-intl';
-import { Fragment } from 'react';
+import { useState } from 'react';
import { useChainId, useSwitchChain } from 'wagmi';
import { useMascaStore, useToastStore } from '@/stores';
@@ -95,67 +101,51 @@ export default function MethodDropdownMenu() {
}
};
- return (
-
+ />
+ )}
+
+
+
+
+ {methods.map((method) => (
+
+ {method}
+
+ ))}
+
+
+
);
}
diff --git a/packages/dapp/src/components/NetworkDropDownMenu/NetworkDropdownMenuItem.tsx b/packages/dapp/src/components/NetworkDropDownMenu/NetworkDropdownMenuItem.tsx
new file mode 100644
index 000000000..34de88e86
--- /dev/null
+++ b/packages/dapp/src/components/NetworkDropDownMenu/NetworkDropdownMenuItem.tsx
@@ -0,0 +1,109 @@
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { clsx } from 'clsx';
+
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import type { Network } from '@/utils/networks';
+
+import Image from 'next/image';
+import { useState } from 'react';
+import { useTheme } from 'next-themes';
+
+interface DropdownMenuItemProps {
+ children: Network;
+ handleBtn: (text: string) => void;
+ selected: boolean;
+ variant?:
+ | 'primary'
+ | 'secondary'
+ | 'primary-active'
+ | 'secondary-active'
+ | 'gray'
+ | 'method';
+}
+
+const variants: Record
= {
+ 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 = {
+ 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 = {
+ 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 default function NetworkDropdownMenuItem({
+ children,
+ handleBtn,
+ selected,
+ variant = 'primary',
+}: DropdownMenuItemProps) {
+ const { resolvedTheme } = useTheme();
+ const [isActive, setIsActive] = useState(false);
+ const handleMouseEnter = () => setIsActive(true);
+ const handleMouseLeave = () => setIsActive(false);
+
+ const networkBackgroundColor =
+ resolvedTheme === 'dark' ? '#ffffffbf' : children.backgroundColor;
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/dapp/src/components/NetworkDropDownMenu/index.tsx b/packages/dapp/src/components/NetworkDropDownMenu/index.tsx
new file mode 100644
index 000000000..821b44370
--- /dev/null
+++ b/packages/dapp/src/components/NetworkDropDownMenu/index.tsx
@@ -0,0 +1,193 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+ DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+
+import { Switch } from '@/components/ui/switch';
+
+import Image from 'next/image';
+
+import clsx from 'clsx';
+import NetworkDropdownMenuItem from './NetworkDropdownMenuItem';
+import { ChevronDownIcon } from 'lucide-react';
+
+import type { Network } from '@/utils/networks';
+import { useToastStore } from '@/stores';
+import { useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
+
+interface DropdownMenuProps {
+ items: Network[];
+ multiple?: boolean;
+ selected: string;
+ variant?:
+ | 'primary'
+ | 'secondary'
+ | 'primary-active'
+ | 'secondary-active'
+ | 'gray'
+ | 'method';
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'method';
+ rounded?: 'full' | '2xl' | 'xl' | 'lg' | 'none';
+ shadow?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | 'inner' | '';
+ setSelected: (selected: string) => void;
+}
+
+const sizes: Record = {
+ xs: 'md:text-sm md:py-1 md:px-3 text-sm py-1 px-2 max-w-xs',
+ sm: 'md:text-md md:py-1.5 md:px-3.5 text-md font-medium py-1 px-3 max-w-xs',
+ md: 'lg:text-lg lg:py-2 lg:px-4 md:text-md font-medium md:py-1.5 md:px-3.5 text-sm py-1 px-3 max-w-xs',
+ lg: 'lg:text-2xl lg:py-2.5 lg:px-5 md:text-lg md:py-2 font-medium md:px-4 text-md py-1.5 px-3.5 max-w-xs font-semibold max-w-xs',
+ method:
+ 'text-h5 font-ubuntu animated-transition inline-flex w-full justify-center rounded-3xl px-4 py-2 font-thin focus:outline-none',
+};
+
+const variants: Record = {
+ primary:
+ 'bg-pink-500 dark:bg-orange-accent-dark hover:opacity-80 text-white dark:text-navy-blue-800 animated-transition ',
+ secondary:
+ 'text-pink-500 border-[0.135rem] border-pink-500 dark:text-orange-accent-dark dark:border-orange-accent-dark animated-transition ',
+ 'primary-active':
+ 'text-pink-500 border-[0.135rem] border-pink-500 dark:text-orange-accent-dark dark:border-orange-accent-dark animated-transition ',
+ 'secondary-active':
+ 'text-navy-blue-500 border border-1 border-navy-blue-300 animated-transition ',
+ gray: 'bg-gray-200 text-gray-800 btn hover:opacity-80 animated-transition ',
+ method:
+ 'dark:text-navy-blue-400 text-gray-600 dark:hover:bg-navy-blue-800 hover:bg-orange-100/50',
+};
+
+const variantsHover: Record = {
+ primary: 'bg-pink-500 dark:bg-orange-accent-dark opacity-80',
+ secondary: 'bg-navy-blue-500 text-white btn hover:opacity-80 ',
+ 'primary-active': ' ',
+ 'secondary-active': ' ',
+ gray: 'opacity-80',
+ method: 'dark:bg-navy-blue-800 bg-orange-100/50',
+};
+
+function isSelectedTestnet(selected: string, items: Network[]): boolean {
+ return items.find((item) => item.name === selected)?.isTestnet === true;
+}
+
+export default function NetworkDropDownMenu({
+ items,
+ selected,
+ setSelected,
+ variant = 'primary',
+ size = 'md',
+ rounded = 'full',
+ shadow = 'sm',
+}: DropdownMenuProps) {
+ const t = useTranslations('NavConnection');
+ const { resolvedTheme } = useTheme();
+ const [open, setOpen] = useState(false);
+
+ const [showTestNets, setShowTestNets] = useState(false);
+
+ const filteredNetworks = items.filter(
+ (item) => showTestNets || !item.isTestnet
+ );
+
+ const networkBackgroundColor =
+ resolvedTheme === 'dark'
+ ? '#ffffffbf'
+ : items.find((item) => item.name === selected)?.backgroundColor;
+
+ useEffect(() => {
+ const isTestnet = isSelectedTestnet(selected, items);
+ setShowTestNets(isTestnet);
+ }, [selected]);
+
+ return (
+ setOpen(!open)}>
+
+
+ {selected && (
+
item.name === selected)?.logo ?? ''}
+ alt={selected}
+ style={{
+ width: '100%',
+ height: 'auto',
+ backgroundColor: networkBackgroundColor,
+ borderRadius: '25%',
+ }}
+ width={16}
+ height={16}
+ />
+ )}
+
+ {selected && (
+
+ )}
+
+
+ {filteredNetworks.map((item) => (
+
+ ))}
+
+
+
+
+
+
Show testnets
+
+ {
+ if (isSelectedTestnet(selected, items)) {
+ setTimeout(() => {
+ useToastStore.setState({
+ open: true,
+ title: t('disable-testnet-switch'),
+ type: 'error',
+ loading: false,
+ link: null,
+ });
+ });
+ } else {
+ setShowTestNets(!showTestNets);
+ }
+ }}
+ className={clsx(
+ showTestNets ? 'bg-red-500 dark:bg-orange-accent-dark' : '',
+ 'scale-80'
+ )}
+ />
+
+
-
-
-
-
+
{t('title')}
diff --git a/packages/dapp/src/components/ToggleTheme/index.tsx b/packages/dapp/src/components/ToggleTheme/index.tsx
index bab04c231..f6df7c3d4 100644
--- a/packages/dapp/src/components/ToggleTheme/index.tsx
+++ b/packages/dapp/src/components/ToggleTheme/index.tsx
@@ -23,7 +23,7 @@ const ToggleTheme = () => {