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 }) => (
+ }
+ iconSpacing={0}
+ onClick={async () => {
+ pushPayment({
+ isStreaming: () => false,
+ isCancellable: () => false,
+ isCancelling: false,
+ isValidatedAndSaved: false,
+ });
+ await validateForm();
+ setFieldValue('roleEditing.roleEditingPaymentIndex', (payments ?? []).length);
+ }}
+ >
+ {t('addPayment')}
+
{sortedPayments.length === 0 && (
)}
- }
- iconSpacing={0}
- onClick={async () => {
- pushPayment({
- isStreaming: () => false,
- isCancellable: () => false,
- isCancelling: false,
- isValidatedAndSaved: false,
- });
- await validateForm();
- setFieldValue('roleEditing.roleEditingPaymentIndex', (payments ?? []).length);
- }}
- >
- {t('addPayment')}
-
{!!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 (
-
-
-
+
+ {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 (
-
+ {option.renderer ? (
+ option.renderer()
+ ) : (
+
+ )}
+
{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 (
-
-
+ {/* 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() {
-
+
+ {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 && (
- }
- width="max-content"
- onClick={openAddPermissionModal}
- >
- {t('addPermission')}
-
- )}
{!isLoaded ? (
)}
+
+ {canUserCreateProposal && (
+
+
+ }
+ width="max-content"
+ onClick={openAddPermissionModal}
+ alignSelf="flex-end"
+ >
+ {t('addPermission')}
+
+
+ )}
>