diff --git a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx b/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx index 91030b445a..13b797b403 100644 --- a/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuButtonDisplay.tsx @@ -1,5 +1,5 @@ -import { Box, Flex, Text } from '@chakra-ui/react'; -import { ArrowDown } from '@decent-org/fractal-ui'; +import { Box, Flex, Icon } from '@chakra-ui/react'; +import { CaretDown } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import useAvatar from '../../../../hooks/utils/useAvatar'; import useDisplayName from '../../../../hooks/utils/useDisplayName'; @@ -13,8 +13,11 @@ export function NotConnected() { alignItems="center" gap="1" > - {t('connectWallet')} - + {t('connectWallet')} + ); } @@ -36,14 +39,17 @@ export function Connected() { alignItems="center" gap="0.75rem" > - + - {accountDisplayName} - + {accountDisplayName} + ); } diff --git a/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx b/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx index 7c869082be..7a47140e44 100644 --- a/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuItemButton.tsx @@ -1,5 +1,4 @@ -import { Flex, MenuItem, Text } from '@chakra-ui/react'; -import { Fragment } from 'react'; +import { Box, Button, MenuItem, Text } from '@chakra-ui/react'; /** * Used to display a simple clickable item to the menu. @@ -17,27 +16,24 @@ export function MenuItemButton({ onClick?: () => void; }) { return ( - + + } > - - {label} - - + {label} - + ); } diff --git a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx index b86d21dd58..b6253d95d1 100644 --- a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx @@ -1,4 +1,5 @@ import { Box, Flex, Select, Text } from '@chakra-ui/react'; +import { CaretDown } from '@phosphor-icons/react'; import { useTranslation } from 'react-i18next'; import { useSwitchChain } from 'wagmi'; import { @@ -17,41 +18,70 @@ export function MenuItemNetwork() { return ( {t('network')} - + + ); diff --git a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx index 10b4657bae..433f63bfa1 100644 --- a/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuItemWallet.tsx @@ -1,11 +1,10 @@ -import { Box, Flex, MenuItem, Text } from '@chakra-ui/react'; -import { Copy } from '@decent-org/fractal-ui'; +import { Box, Button, Flex, MenuItem, Text } from '@chakra-ui/react'; +import { CopySimple } from '@phosphor-icons/react/dist/ssr'; import { useTranslation } from 'react-i18next'; import useAvatar from '../../../../hooks/utils/useAvatar'; import { useCopyText } from '../../../../hooks/utils/useCopyText'; import useDisplayName from '../../../../hooks/utils/useDisplayName'; import { useFractal } from '../../../../providers/App/AppProvider'; -import EtherscanLinkAddress from '../../links/EtherscanLinkAddress'; import Avatar from '../../page/Header/Avatar'; /** @@ -28,58 +27,46 @@ export function MenuItemWallet() { return ( - - - - {t('wallet')} - - copyTextToClipboard(account)} - cursor="pointer" - > - - {accountDisplayName} - - - - - + {t('wallet')} + + copyTextToClipboard(account)} + whiteSpace="pre-wrap" + wordBreak="break-all" + h="3rem" + textOverflow="ellipsis" + rightIcon={ - - + } + > + + {accountDisplayName} + + + ); } diff --git a/src/components/ui/menus/AccountDisplay/MenuItems.tsx b/src/components/ui/menus/AccountDisplay/MenuItems.tsx index e295992612..07f97acd9a 100644 --- a/src/components/ui/menus/AccountDisplay/MenuItems.tsx +++ b/src/components/ui/menus/AccountDisplay/MenuItems.tsx @@ -1,5 +1,5 @@ -import { MenuList } from '@chakra-ui/react'; -import { Connect, Disconnect } from '@decent-org/fractal-ui'; +import { Divider, MenuList } from '@chakra-ui/react'; +import { Link, Plugs } from '@phosphor-icons/react'; import { useWeb3Modal } from '@web3modal/wagmi/react'; import { useTranslation } from 'react-i18next'; import { useDisconnect } from 'wagmi'; @@ -18,29 +18,26 @@ export function MenuItems() { return ( :nth-of-type(1)': { - borderTopRadius: 'lg', - }, - '& > :last-child': { - borderBottomRadius: 'lg', - }, - }} + rounded="0.5rem" + boxShadow="0px 1px 0px 0px var(--chakra-colors-neutral-1)" + bg="rgba(38, 33, 42, 0.74)" + border="1px solid" + borderColor="neutral-3" > - {user.address && } + {user.address && ( + <> + + + + )} + {!user.address && ( open()} /> )} @@ -48,7 +45,7 @@ export function MenuItems() { )} diff --git a/src/components/ui/menus/AccountDisplay/index.tsx b/src/components/ui/menus/AccountDisplay/index.tsx index d4e1da528c..32dd67ed4b 100644 --- a/src/components/ui/menus/AccountDisplay/index.tsx +++ b/src/components/ui/menus/AccountDisplay/index.tsx @@ -1,21 +1,22 @@ -import { Menu, MenuButton } from '@chakra-ui/react'; -import { Fragment } from 'react'; +import { Button, Menu, MenuButton } from '@chakra-ui/react'; import { MenuButtonDisplay } from './MenuButtonDisplay'; import { MenuItems } from './MenuItems'; export function AccountDisplay() { return ( - - - - - - - + + + ); } diff --git a/src/components/ui/menus/DAOSearch/SearchDisplay.tsx b/src/components/ui/menus/DAOSearch/SearchDisplay.tsx index 85f64cc4ad..7904aecf34 100644 --- a/src/components/ui/menus/DAOSearch/SearchDisplay.tsx +++ b/src/components/ui/menus/DAOSearch/SearchDisplay.tsx @@ -1,9 +1,10 @@ -import { Box, Flex, Text, Button } from '@chakra-ui/react'; +import { Flex, Text, Spinner, Button, Icon } from '@chakra-ui/react'; +import { WarningCircle } from '@phosphor-icons/react'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { DAO_ROUTES } from '../../../../constants/routes'; -import useDisplayName from '../../../../hooks/utils/useDisplayName'; +import useDAOName from '../../../../hooks/DAO/useDAOName'; import { useFractal } from '../../../../providers/App/AppProvider'; import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; @@ -17,8 +18,8 @@ interface ISearchDisplay { } function DAONameDisplay({ address }: { address: string }) { - const { displayName } = useDisplayName(address); - return {displayName}; + const { daoRegistryName } = useDAOName({ address }); + return {daoRegistryName}; } export function SearchDisplay({ @@ -38,16 +39,38 @@ export function SearchDisplay({ }, [node, address]); if (loading && address) { return ( - - {t('loading')} - + + + ); } if (errorMessage && !loading) { return ( - - {errorMessage} - + + + + {errorMessage} + + ); } if (validAddress && address && !loading) { @@ -56,15 +79,20 @@ export function SearchDisplay({ py={2} cursor={isCurrentSafe ? 'not-allowed' : 'default'} justifyContent="space-between" + gap={8} + w="full" > - + {t(isCurrentSafe ? 'labelCurrentDAO' : 'labelDAOFound')} diff --git a/src/components/ui/menus/DAOSearch/index.tsx b/src/components/ui/menus/DAOSearch/index.tsx index e6c1fca388..94101f4cee 100644 --- a/src/components/ui/menus/DAOSearch/index.tsx +++ b/src/components/ui/menus/DAOSearch/index.tsx @@ -8,7 +8,7 @@ import { useDisclosure, useOutsideClick, } from '@chakra-ui/react'; -import { Search } from '@decent-org/fractal-ui'; +import { MagnifyingGlass } from '@phosphor-icons/react'; import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSearchDao } from '../../../../hooks/DAO/useSearchDao'; @@ -41,7 +41,8 @@ export function DAOSearch({ closeDrawer }: { closeDrawer?: () => void }) { ref={ref} width="full" maxW={{ base: 'full', md: '31.125rem' }} - height="4rem" + height="full" + position="relative" > void }) { flexDirection="column" justifyContent="center" > - - + void }) { ); } diff --git a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx index c3227c02af..dbf9abc2e0 100644 --- a/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx +++ b/src/components/ui/menus/FavoritesMenu/FavoritesList.tsx @@ -11,36 +11,34 @@ export function FavoritesList() { const { t } = useTranslation('dashboard'); return ( {favoritesList.length === 0 ? ( {t('emptyFavorites')} ) : ( diff --git a/src/components/ui/menus/FavoritesMenu/index.tsx b/src/components/ui/menus/FavoritesMenu/index.tsx index d2f4a4ed33..cdd123b09f 100644 --- a/src/components/ui/menus/FavoritesMenu/index.tsx +++ b/src/components/ui/menus/FavoritesMenu/index.tsx @@ -1,5 +1,5 @@ -import { Flex, Menu, MenuButton, Show, Text } from '@chakra-ui/react'; -import { ArrowDown, StarGoldSolid } from '@decent-org/fractal-ui'; +import { Button, Flex, Icon, Menu, MenuButton, Show, Text } from '@chakra-ui/react'; +import { CaretDown, Star } from '@phosphor-icons/react'; import { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; import { FavoritesList } from './FavoritesList'; @@ -7,31 +7,33 @@ import { FavoritesList } from './FavoritesList'; export function FavoritesMenu() { const { t } = useTranslation('dashboard'); return ( - + {({ isOpen }) => ( - - + - - {t('titleFavorites')} - - + {t('titleFavorites')} + diff --git a/src/components/ui/page/Header/index.tsx b/src/components/ui/page/Header/index.tsx index 1b6595da76..94e7d822e9 100644 --- a/src/components/ui/page/Header/index.tsx +++ b/src/components/ui/page/Header/index.tsx @@ -1,24 +1,142 @@ -import { Flex, Show } from '@chakra-ui/react'; +import { + Box, + Divider, + Drawer, + DrawerCloseButton, + DrawerContent, + DrawerOverlay, + Flex, + Hide, + IconButton, + Show, + useDisclosure, +} from '@chakra-ui/react'; +import { DecentLogo } from '@decent-org/fractal-ui'; +import { useRef } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import { HEADER_HEIGHT } from '../../../../constants/common'; +import { BASE_ROUTES } from '../../../../constants/routes'; +import { useFractal } from '../../../../providers/App/AppProvider'; import { AccountDisplay } from '../../menus/AccountDisplay'; import { DAOSearch } from '../../menus/DAOSearch'; import { FavoritesMenu } from '../../menus/FavoritesMenu'; +import { NavigationLinks } from '../Navigation/NavigationLinks'; +function HeaderLogo() { + const { t } = useTranslation('navigation'); + const { isOpen, onOpen, onClose } = useDisclosure(); + const btnRef = useRef(null); + + const { + node: { daoAddress }, + } = useFractal(); + + const showDAOLinks = !!daoAddress; + return ( + + + <> + + } + /> + + + + + + + + + + + + + + + + + + + + + + + ); +} function Header() { return ( + diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx index d267c0f34f..1098e8ac30 100644 --- a/src/components/ui/page/Layout/index.tsx +++ b/src/components/ui/page/Layout/index.tsx @@ -8,9 +8,9 @@ export default function Layout() { return (
@@ -49,7 +48,6 @@ export default function Layout() { display="flex" flexDirection="column" flexGrow="1" - bg="chocolate.900" position="fixed" w="4.25rem" minHeight={{ base: undefined, md: '100vh' }} diff --git a/src/components/ui/page/Navigation/index.tsx b/src/components/ui/page/Navigation/index.tsx index e83bec9175..13ff4898ef 100644 --- a/src/components/ui/page/Navigation/index.tsx +++ b/src/components/ui/page/Navigation/index.tsx @@ -1,124 +1,27 @@ -import { - Box, - Divider, - Drawer, - DrawerCloseButton, - DrawerContent, - DrawerOverlay, - Flex, - Hide, - IconButton, - Show, - useDisclosure, -} from '@chakra-ui/react'; -import { FractalBrandBurger, FractalBrand } from '@decent-org/fractal-ui'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; -import { BASE_ROUTES } from '../../../../constants/routes'; +import { Flex, Show } from '@chakra-ui/react'; import { useFractal } from '../../../../providers/App/AppProvider'; -import { DAOSearch } from '../../menus/DAOSearch'; import { NavigationLinks } from './NavigationLinks'; function Navigation() { - const { t } = useTranslation('navigation'); - const { isOpen, onOpen, onClose } = useDisclosure(); - const btnRef = React.useRef(null); - const { node: { daoAddress }, } = useFractal(); const showDAOLinks = !!daoAddress; return ( - <> - - - <> - - } - /> - - - - - - - - - - - - - - - - - - - - - - - - + + + + + ); } diff --git a/src/constants/common.ts b/src/constants/common.ts index c50e79f836..3c481ffe9d 100644 --- a/src/constants/common.ts +++ b/src/constants/common.ts @@ -1,4 +1,4 @@ -export const HEADER_HEIGHT = '4rem'; +export const HEADER_HEIGHT = '4.5rem'; export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT})`; export const BACKGROUND_SEMI_TRANSPARENT = 'black.900-semi-transparent'; /**