diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/ArbitraryTxsForm.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/ArbitraryTxsForm.tsx index 3373118ff0e..397f9e66200 100644 --- a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/ArbitraryTxsForm.tsx +++ b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/ArbitraryTxsForm.tsx @@ -20,8 +20,11 @@ const ArbitraryTxsForm: FC = ({ getFormOptions }) => { <> - - + + ); }; diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx index 901abe05028..5ee2975bfcb 100644 --- a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx +++ b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx @@ -20,10 +20,12 @@ import { MSG, displayName } from './translation.ts'; interface ArbitraryTransactionsTableProps { name: string; + disabled?: boolean; } const ArbitraryTransactionsTable: FC = ({ name, + disabled, }) => { const [isModalOpen, setIsModalOpen] = useState(false); @@ -90,6 +92,7 @@ const ArbitraryTransactionsTable: FC = ({ isError: !!fieldState.error, hasNoDecisionMethods, getMenuProps, + isFormDisabled: disabled, }); return ( @@ -131,7 +134,7 @@ const ArbitraryTransactionsTable: FC = ({ size="small" isFullSize={isMobile} onClick={openTransactionModal} - disabled={hasNoDecisionMethods} + disabled={hasNoDecisionMethods || disabled} > {formatText({ id: 'button.addTransaction' })} diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx index 3501dda122a..3e6a85de1c9 100644 --- a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx +++ b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx @@ -32,6 +32,7 @@ export const useArbitraryTxsTableColumns = ({ isError, hasNoDecisionMethods, getMenuProps, + isFormDisabled, }): ColumnDef[] => { const columnHelper = useMemo( () => createColumnHelper(), @@ -77,11 +78,12 @@ export const useArbitraryTxsTableColumns = ({ type="button" onClick={openTransactionModal} mode="link" - disabled={hasNoDecisionMethods} + disabled={hasNoDecisionMethods || isFormDisabled} className={clsx( 'text-gray-400 no-underline md:hover:text-blue-400', { 'text-negative-400': isError, + '!text-gray-300': isFormDisabled, }, )} > @@ -140,6 +142,7 @@ export const useArbitraryTxsTableColumns = ({ hasNoDecisionMethods, openTransactionModal, isError, + isFormDisabled, ], ); diff --git a/src/components/v5/common/ActionSidebar/partials/hooks.ts b/src/components/v5/common/ActionSidebar/partials/hooks.ts index 997c8d8bf09..bb01d806561 100644 --- a/src/components/v5/common/ActionSidebar/partials/hooks.ts +++ b/src/components/v5/common/ActionSidebar/partials/hooks.ts @@ -86,6 +86,7 @@ export const useIsFieldDisabled = () => { } = useExtensionData(Extension.StagedExpenditure); const selectedAction = useActiveActionType(); + const { colony } = useColonyContext(); const isVotingReputationExtensionEnabled = votingReputationExtensionData && @@ -112,6 +113,9 @@ export const useIsFieldDisabled = () => { ) { return true; } + if (selectedAction === Action.ArbitraryTxs && colony.version < 17) { + return true; + } return false; }; diff --git a/src/components/v5/shared/ActionTypeNotification/ActionTypeNotification.tsx b/src/components/v5/shared/ActionTypeNotification/ActionTypeNotification.tsx index cc4cb431e0b..db4dbcf4680 100644 --- a/src/components/v5/shared/ActionTypeNotification/ActionTypeNotification.tsx +++ b/src/components/v5/shared/ActionTypeNotification/ActionTypeNotification.tsx @@ -1,6 +1,8 @@ import { Extension } from '@colony/colony-js'; import { WarningCircle } from '@phosphor-icons/react'; import React, { type FC } from 'react'; +import { useCallback } from 'react'; +import { useFormContext } from 'react-hook-form'; import { defineMessages } from 'react-intl'; import { useNavigate } from 'react-router-dom'; @@ -8,6 +10,7 @@ import { Action } from '~constants/actions.ts'; import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts'; import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts'; import { formatText } from '~utils/intl.ts'; +import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts'; import NotificationBanner from '~v5/shared/NotificationBanner/index.ts'; import { type ActionTypeNotificationProps } from './types.ts'; @@ -38,6 +41,15 @@ const MSG = defineMessages({ defaultMessage: 'Staged payments requires the Staged payments extension to be enabled.', }, + customTransactionsVersionRequiredError: { + id: `${displayName}.customTransactionsVersionRequiredError`, + defaultMessage: + 'Custom transactions requires Colony Network version 17 or higher.', + }, + upgradeColony: { + id: `${displayName}.upgradeColony`, + defaultMessage: 'Upgrade colony', + }, learnMore: { id: `${displayName}.learnMore`, defaultMessage: 'Learn more', @@ -81,6 +93,10 @@ export const ActionTypeNotification: FC = ({ return isFieldDisabled ? formatText(MSG.stagedExpenditureExtensionNotEnabledError) : undefined; + case Action.ArbitraryTxs: + return isFieldDisabled + ? formatText(MSG.customTransactionsVersionRequiredError) + : undefined; default: return undefined; } @@ -88,6 +104,47 @@ export const ActionTypeNotification: FC = ({ const notificationTitle = getNotificationTitle(); + const { reset } = useFormContext(); + + const handleUpgradeColony = useCallback(() => { + reset({ + [ACTION_TYPE_FIELD_NAME]: Action.UpgradeColonyVersion, + }); + }, [reset]); + + const getCallToAction = () => { + if (actionTypeNotificationHref) { + return ( + + {formatText(MSG.learnMore)} + + ); + } + + switch (selectedAction) { + case Action.CreateDecision: + return ( + + ); + case Action.ArbitraryTxs: + return ( + + ); + default: + return null; + } + }; + return ( <> {notificationTitle && ( @@ -95,29 +152,7 @@ export const ActionTypeNotification: FC = ({ - {formatText(MSG.learnMore)} - - ) : ( - selectedAction === Action.CreateDecision && ( - - ) - ) - } + callToAction={getCallToAction()} > {notificationTitle}