diff --git a/src/components/Proposals/ProposalSummary.tsx b/src/components/Proposals/ProposalSummary.tsx index 11a99c710..6b8dc7623 100644 --- a/src/components/Proposals/ProposalSummary.tsx +++ b/src/components/Proposals/ProposalSummary.tsx @@ -1,6 +1,5 @@ -import { Box, Button, Flex, Icon, Text } from '@chakra-ui/react'; +import { Box, Button, Flex, Text } from '@chakra-ui/react'; import { abis } from '@fractal-framework/fractal-contracts'; -import { ArrowUpRight } from '@phosphor-icons/react'; import { format } from 'date-fns'; import { formatInTimeZone } from 'date-fns-tz'; import { useEffect, useMemo, useState } from 'react'; @@ -193,7 +192,7 @@ export function AzoriusProposalSummary({ proposal }: { proposal: AzoriusProposal alignItems="center" justifyContent="space-between" > - {format(eventDate, DEFAULT_DATE_TIME_FORMAT)} + {format(eventDate, DEFAULT_DATE_TIME_FORMAT)} diff --git a/src/components/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/Roles/forms/RoleFormPaymentStreams.tsx index 397e9da7f..ea9a1b568 100644 --- a/src/components/Roles/forms/RoleFormPaymentStreams.tsx +++ b/src/components/Roles/forms/RoleFormPaymentStreams.tsx @@ -77,6 +77,25 @@ export function RoleFormPaymentStreams() { {({ push: pushPayment }: { push: (streamFormValue: SablierPaymentFormValues) => void }) => ( + {sortedPayments.length === 0 && ( )} - {!!sortedPayments.length && } diff --git a/src/components/ui/links/DisplayAddress.tsx b/src/components/ui/links/DisplayAddress.tsx index bf67d84ad..152b318f8 100644 --- a/src/components/ui/links/DisplayAddress.tsx +++ b/src/components/ui/links/DisplayAddress.tsx @@ -1,5 +1,4 @@ -import { Flex, Text, Icon, LinkProps } from '@chakra-ui/react'; -import { ArrowUpRight } from '@phosphor-icons/react'; +import { Flex, Text, LinkProps } from '@chakra-ui/react'; import { ReactNode } from 'react'; import { Address } from 'viem'; import { useGetAccountName } from '../../../hooks/utils/useGetAccountName'; @@ -36,13 +35,6 @@ export function DisplayAddress({ > {children || displayAddress.displayName} - {!isTextLink && ( - - )} ); diff --git a/src/components/ui/links/DisplayTransaction.tsx b/src/components/ui/links/DisplayTransaction.tsx index f0c1ecb1c..27af60140 100644 --- a/src/components/ui/links/DisplayTransaction.tsx +++ b/src/components/ui/links/DisplayTransaction.tsx @@ -1,31 +1,18 @@ -import { Flex, Text, Icon } from '@chakra-ui/react'; -import { ArrowUpRight } from '@phosphor-icons/react'; +import { Flex, Text } from '@chakra-ui/react'; import { createAccountSubstring } from '../../../hooks/utils/useGetAccountName'; import EtherscanLink from './EtherscanLink'; -export default function DisplayTransaction({ - txHash, - isTextLink, -}: { - txHash: string; - isTextLink?: boolean; -}) { +export default function DisplayTransaction({ txHash }: { txHash: string }) { const displayName = createAccountSubstring(txHash); return ( {displayName} - {!isTextLink && ( - - )} ); diff --git a/src/components/ui/menus/CreateProposalMenu/index.tsx b/src/components/ui/menus/CreateProposalMenu/index.tsx index b072a51e8..ed0638f0c 100644 --- a/src/components/ui/menus/CreateProposalMenu/index.tsx +++ b/src/components/ui/menus/CreateProposalMenu/index.tsx @@ -1,24 +1,11 @@ -import { - Box, - Button, - Divider, - Flex, - Icon, - Menu, - MenuButton, - MenuItem, - MenuList, - Text, -} from '@chakra-ui/react'; +import { Button, Flex, Icon, Text } from '@chakra-ui/react'; import { CaretDown } from '@phosphor-icons/react'; -import { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { Address } from 'viem'; -import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common'; import { DAO_ROUTES } from '../../../../constants/routes'; import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider'; -import { EaseOutComponent } from '../../utils/EaseOutComponent'; +import { OptionMenu } from '../OptionMenu'; export function CreateProposalMenu({ safeAddress }: { safeAddress: Address }) { const { t } = useTranslation('proposal'); @@ -28,102 +15,42 @@ export function CreateProposalMenu({ safeAddress }: { safeAddress: Address }) { const navigate = useNavigate(); return ( - - - {({ isOpen }) => ( - - - - {t('createProposal')} - - - - {isOpen && ( - - - - - - navigate(DAO_ROUTES.proposalNew.relative(addressPrefix, safeAddress)) - } - noOfLines={1} - display="flex" - alignItems="center" - justifyContent="flex-start" - rounded="0.75rem" - gap={2} - > - - {t('createFromScratch')} - - - - - - - navigate( - DAO_ROUTES.proposalTemplates.relative(addressPrefix, safeAddress), - ) - } - noOfLines={1} - display="flex" - alignItems="center" - justifyContent="flex-start" - rounded="0.75rem" - gap={2} - > - - {t('browseTemplates')} - - - - - - - )} - - )} - - + + {t('createProposal')} + + + } + options={[ + { + optionKey: t('createFromScratch'), + onClick: () => navigate(DAO_ROUTES.proposalNew.relative(addressPrefix, safeAddress)), + }, + { + optionKey: t('browseTemplates'), + onClick: () => + navigate(DAO_ROUTES.proposalTemplates.relative(addressPrefix, safeAddress)), + }, + ]} + namespace="proposal" + buttonAs={Button} + buttonProps={{ + variant: 'tertiary', + paddingX: '0.5rem', + paddingY: '0.25rem', + _hover: { bg: 'neutral-2' }, + _active: { + color: 'lilac-0', + bg: 'neutral-2', + }, + }} + /> ); } diff --git a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx index 77d59791f..69c9fd4ec 100644 --- a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx +++ b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx @@ -148,9 +148,9 @@ export function ManageDAOMenu() { guard.userHasVotes ) { if (type === GovernanceType.MULTISIG) { - return [freezeOption, modifyGovernanceOption, settingsOption]; + return [settingsOption, freezeOption, modifyGovernanceOption]; } else { - return [freezeOption, settingsOption]; + return [settingsOption, freezeOption]; } } else if ( guard.freezeProposalCreatedTime !== null && @@ -163,20 +163,17 @@ export function ManageDAOMenu() { module => module.moduleType === FractalModuleType.FRACTAL, ); if (fractalModule) { - return [clawBackOption, settingsOption]; + return [settingsOption, clawBackOption]; } else { return [settingsOption]; } } else { - const optionsArr = []; - if (canUserCreateProposal) { - if (type === GovernanceType.MULTISIG) { - optionsArr.push(modifyGovernanceOption); - } - } - - optionsArr.push(settingsOption); - return optionsArr; + return [ + settingsOption, + ...(canUserCreateProposal && type === GovernanceType.MULTISIG + ? [modifyGovernanceOption] + : []), + ]; } }, [ guard, @@ -190,7 +187,26 @@ export function ManageDAOMenu() { canUserCreateProposal, ]); - return ( + return options.length === 1 ? ( + + } + onClick={options[0].onClick} + variant="tertiary" + p="0.25rem" + h="fit-content" + sx={{ + span: { + h: '1.25rem', + }, + }} + /> + ) : ( } - titleKey={canUserCreateProposal ? 'titleManageDAO' : 'titleViewDAODetails'} options={options} namespace="menu" buttonAs={IconButton} diff --git a/src/components/ui/menus/OptionMenu/OptionsList.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx index 0c8112d8e..44017ae9c 100644 --- a/src/components/ui/menus/OptionMenu/OptionsList.tsx +++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx @@ -12,7 +12,7 @@ export function OptionsList({ namespace, titleKey, }: IOptionsList) { - const { t } = useTranslation(namespace); + const { t } = useTranslation(namespace || 'menu'); const createHandleItemClick = (option: IOption) => (e: MouseEvent | ChangeEvent) => { e.stopPropagation(); @@ -32,41 +32,47 @@ export function OptionsList({ )} {options.map((option, i) => { const clickListener = createHandleItemClick(option); + return ( - - {showOptionSelected ? ( - - - {t(option.optionKey)} - - ) : ( - t(option.optionKey) - )} - {showOptionCount && {option.count}} - + {option.renderer ? ( + option.renderer() + ) : ( + + {showOptionSelected ? ( + + + {t(option.optionKey)} + + ) : ( + t(option.optionKey) + )} + {showOptionCount && {option.count}} + + )} + {i !== options.length - 1 && } ); diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx index 7a0f78af9..66e5ad871 100644 --- a/src/components/ui/menus/OptionMenu/index.tsx +++ b/src/components/ui/menus/OptionMenu/index.tsx @@ -3,7 +3,6 @@ import { MouseEvent, ReactNode, RefObject } from 'react'; import { useTranslation } from 'react-i18next'; import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common'; import { DecentTooltip } from '../../DecentTooltip'; -import { EaseOutComponent } from '../../utils/EaseOutComponent'; import { OptionsList } from './OptionsList'; import { IOption, IOptionsList } from './types'; @@ -50,17 +49,15 @@ export function OptionMenu({ backdropFilter="auto" backdropBlur="10px" > - - {children} - - + {children} + ); diff --git a/src/components/ui/menus/OptionMenu/types.tsx b/src/components/ui/menus/OptionMenu/types.tsx index 629966bca..ca2581715 100644 --- a/src/components/ui/menus/OptionMenu/types.tsx +++ b/src/components/ui/menus/OptionMenu/types.tsx @@ -3,6 +3,7 @@ export interface IOption { count?: number; onClick: () => void; isSelected?: boolean; + renderer?: () => JSX.Element; } export interface IOptionsList { @@ -10,6 +11,6 @@ export interface IOptionsList { closeOnSelect?: boolean; showOptionCount?: boolean; showOptionSelected?: boolean; - namespace: string; + namespace?: string; titleKey?: string; } diff --git a/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx b/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx index 0966c8a80..47b39b4f9 100644 --- a/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx +++ b/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Flex, Image, MenuItem, Spacer, Text } from '@chakra-ui/react'; +import { Button, Flex, Image, MenuItem, Spacer, Text } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; import { Address } from 'viem'; @@ -43,38 +43,36 @@ export function SafeMenuItem({ address, network, name }: SafeMenuItemProps) { }; return ( - - - - - - {name || t('loadingFavorite')} - - + + + + + {name || t('loadingFavorite')} + + - + - {/* Network Icon */} - - - + {/* Network Icon */} + + ); } diff --git a/src/components/ui/menus/SafesMenu/index.tsx b/src/components/ui/menus/SafesMenu/index.tsx index dc5f5d769..150abf884 100644 --- a/src/components/ui/menus/SafesMenu/index.tsx +++ b/src/components/ui/menus/SafesMenu/index.tsx @@ -1,22 +1,10 @@ -import { - Box, - Button, - Flex, - Hide, - Icon, - IconButton, - Menu, - MenuButton, - Show, - Text, - useDisclosure, -} from '@chakra-ui/react'; +import { Box, Button, Hide, Icon, IconButton, Show, Text, useDisclosure } from '@chakra-ui/react'; import { CaretDown, Star } from '@phosphor-icons/react'; -import { Fragment } from 'react'; import { useTranslation } from 'react-i18next'; +import { useAccountFavorites } from '../../../../hooks/DAO/loaders/useFavorites'; import { AllSafesDrawer } from '../../../../pages/home/AllSafesDrawer'; -import { EaseOutComponent } from '../../utils/EaseOutComponent'; -import { SafesList } from './SafesList'; +import { OptionMenu } from '../OptionMenu'; +import { SafeMenuItem } from './SafeMenuItem'; export function SafesMenu() { const { t } = useTranslation('home'); @@ -26,6 +14,8 @@ export function SafesMenu() { onClose: onSafesDrawerClose, } = useDisclosure(); + const { favoritesList } = useAccountFavorites(); + return ( @@ -46,47 +36,48 @@ export function SafesMenu() { - - {({ isOpen }) => ( - - - - {t('mySafes')} - - - - {isOpen && ( - - - - )} - - )} - + + {t('mySafes')} + + + } + options={favoritesList.map(favorite => ({ + optionKey: `${favorite.networkPrefix}:${favorite.address}`, + onClick: () => {}, + renderer: () => ( + + ), + }))} + buttonAs={Button} + buttonProps={{ + variant: 'tertiary', + color: 'white-0', + _hover: { color: 'white-0', bg: 'neutral-3' }, + _active: { + color: 'white-0', + bg: 'neutral-3', + }, + paddingX: '0.75rem', + paddingY: '0.25rem', + }} + closeOnSelect={false} + showOptionSelected + showOptionCount + /> {tooltip === undefined ? ( txHash ? ( - + ) : ( {value} ) ) : ( - {txHash ? ( - - ) : ( - {value} - )} + {txHash ? : {value}} )} diff --git a/src/i18n/locales/en/menu.json b/src/i18n/locales/en/menu.json index d7ab89dcb..2844121ad 100644 --- a/src/i18n/locales/en/menu.json +++ b/src/i18n/locales/en/menu.json @@ -4,8 +4,6 @@ "disconnect": "Disconnect", "network": "Network", "wallet": "Wallet", - "titleManageDAO": "Manage Safe", - "titleViewDAODetails": "View Safe Details", "titleManageProposalTemplate": "Manage Template", "optionCreateSubDAO": "Create SubDAO", "optionInitiateFreeze": "Initiate a Freeze", diff --git a/src/pages/dao/settings/governance/SafeGovernanceSettingsPage.tsx b/src/pages/dao/settings/governance/SafeGovernanceSettingsPage.tsx index 035cd536c..b9dab6539 100644 --- a/src/pages/dao/settings/governance/SafeGovernanceSettingsPage.tsx +++ b/src/pages/dao/settings/governance/SafeGovernanceSettingsPage.tsx @@ -44,7 +44,12 @@ export function SafeGovernanceSettingsPage() { > {(isERC20Governance || isERC721Governance) && ( - {t('daoSettingsGovernance')} + + {t('daoSettingsGovernance')} + )} diff --git a/src/pages/dao/settings/permissions/SafePermissionsSettingsPage.tsx b/src/pages/dao/settings/permissions/SafePermissionsSettingsPage.tsx index 2f426253a..96e010618 100644 --- a/src/pages/dao/settings/permissions/SafePermissionsSettingsPage.tsx +++ b/src/pages/dao/settings/permissions/SafePermissionsSettingsPage.tsx @@ -11,6 +11,7 @@ import { BarLoader } from '../../../../components/ui/loaders/BarLoader'; import { ModalType } from '../../../../components/ui/modals/ModalProvider'; import { useDecentModal } from '../../../../components/ui/modals/useDecentModal'; import NestedPageHeader from '../../../../components/ui/page/Header/NestedPageHeader'; +import Divider from '../../../../components/ui/utils/Divider'; import { NEUTRAL_2_84 } from '../../../../constants/common'; import { DAO_ROUTES } from '../../../../constants/routes'; import { useCanUserCreateProposal } from '../../../../hooks/utils/useCanUserSubmitProposal'; @@ -88,17 +89,6 @@ export function SafePermissionsSettingsPage() { display="flex" bg={{ base: 'transparent', md: NEUTRAL_2_84 }} > - {canUserCreateProposal && ( - - )} {!isLoaded ? ( )} + + {canUserCreateProposal && ( + + + + + )}