diff --git a/src/app/NewSafeProposal.tsx b/src/app/NewSafeProposal.tsx index 5a2eb0c..0ff46cd 100644 --- a/src/app/NewSafeProposal.tsx +++ b/src/app/NewSafeProposal.tsx @@ -383,19 +383,16 @@ const EditProposal = ({ }; export const NewSafeProposal = () => { - const [proposal, setProposal] = useState( - DEFAULT_PROPOSAL - ); const [isEditing, setIsEditing] = useState(true); - const proposalFromQuery = useLoadProposalFromQuery(); + const proposal = useLoadProposalFromQuery(); + const { addAction, replace } = useUpdateProposal({ proposal }); useEffect(() => { - if (proposalFromQuery) { - setProposal(proposalFromQuery); + if (proposal) { setIsEditing(false); } - }, [proposalFromQuery]); + }, [proposal]); const handleEditClicked = useCallback( (evt: SyntheticEvent) => { @@ -405,16 +402,11 @@ export const NewSafeProposal = () => { [setIsEditing] ); - const updateProposal = useUpdateProposal({ proposal }); - return ( - + {isEditing && ( - + )} {!isEditing && proposal && ( { const { networkId, safeAddress } = useParams(); @@ -10,9 +11,11 @@ export const SafeInformationPage = () => { navigate(`/safe/${networkId}/${safeAddress}/new`); }; + const { addAction } = useUpdateProposal({ proposal: undefined }); + return ( - + ); diff --git a/src/components/SafeInformation.tsx b/src/components/SafeInformation.tsx index baf706a..bbf3eff 100644 --- a/src/components/SafeInformation.tsx +++ b/src/components/SafeInformation.tsx @@ -7,7 +7,7 @@ import { AddressView } from "../components/AddressView"; import { OwnerAction, SetOwnerModal } from "../components/SetOwnerModal"; import { useOutletContext } from "react-router-dom"; import { SafeContext } from "./Contexts"; -import { UpdateProposal } from "../hooks/useUpdateProposalViaQuery"; +import { AddAction } from "../hooks/useUpdateProposalViaQuery"; const SafeInformationItem = ({ title, @@ -28,10 +28,10 @@ const SafeInformationItem = ({ export const SafeInformation = ({ children, - updateProposal, + addAction, }: { children?: React.ReactNode; - updateProposal: UpdateProposal; + addAction: AddAction; }) => { const [ownerAction, setOwnerAction] = useState(); @@ -45,7 +45,7 @@ export const SafeInformation = ({ setOwnerAction(undefined); }} action={ownerAction} - updatedProposal={updateProposal} + addAction={addAction} /> )} diff --git a/src/components/SetOwnerModal.tsx b/src/components/SetOwnerModal.tsx index f16f1b6..cd7bffc 100644 --- a/src/components/SetOwnerModal.tsx +++ b/src/components/SetOwnerModal.tsx @@ -8,7 +8,7 @@ import { yupAddress } from "../utils/validators"; import { number, object } from "yup"; import { useOutletContext } from "react-router-dom"; import { SafeContext } from "./Contexts"; -import { UpdateProposal } from "../hooks/useUpdateProposalViaQuery"; +import { AddAction } from "../hooks/useUpdateProposalViaQuery"; export type OwnerAction = | undefined @@ -43,10 +43,10 @@ const ButtonPanel = ({ const AddOwnerModalContent = ({ onClose, - updateProposal: { addAction }, + addAction, }: { onClose: () => void; - updateProposal: UpdateProposal; + addAction: AddAction; }) => { const { safeInformation } = useOutletContext(); const toast = useToast(); @@ -99,11 +99,11 @@ const AddOwnerModalContent = ({ const RemoveOwnerModalContent = ({ onClose, target, - updateProposal: { addAction }, + addAction, }: { onClose: () => void; target: string; - updateProposal: UpdateProposal; + addAction: AddAction; }) => { const { safeInformation } = useOutletContext(); const toaster = useToast(); @@ -162,11 +162,11 @@ const RemoveOwnerModalContent = ({ export const SetOwnerModal = ({ action, onClose, - updatedProposal, + addAction, }: { action: OwnerAction; onClose: () => void; - updatedProposal: UpdateProposal; + addAction: AddAction; }) => { return ( @@ -174,14 +174,11 @@ export const SetOwnerModal = ({ )} {action?.type === "add" && ( - + )} ); diff --git a/src/hooks/useSetParamsFromQuery.ts b/src/hooks/useSetParamsFromQuery.ts index b195da2..f43b69b 100644 --- a/src/hooks/useSetParamsFromQuery.ts +++ b/src/hooks/useSetParamsFromQuery.ts @@ -1,17 +1,25 @@ import { useCallback } from "react"; -import { useSearchParams } from "react-router-dom"; +import { + useLocation, + useNavigate, + useParams, + useSearchParams, +} from "react-router-dom"; import { Proposal } from "../schemas/proposal"; import { queryKeys } from "./useLoadProposalFromQuery"; export const useRedirectToProposalWithNewParams = () => { const [, setParams] = useSearchParams(); + const { networkId, safeAddress } = useParams(); + const navigate = useNavigate(); + const { pathname } = useLocation(); return useCallback( (proposal: Proposal) => { if (!proposal.actions?.length) { return; } - setParams({ + const params = { [queryKeys.targets]: proposal .actions!.map((action) => action.to) .join("|"), @@ -26,8 +34,18 @@ export const useRedirectToProposalWithNewParams = () => { [queryKeys.nonce]: proposal.nonce.toString(), } : {}), - }); + }; + // if we are not in a new safe proposal, we need to redirect to new safe proposal + // so that it shows up in the url, and renders correctly + if (!pathname.includes("new")) { + const newPath = `/safe/${networkId}/${safeAddress}/new`; + + navigate(newPath, { + replace: true, + }); + } + setParams(params); }, - [setParams] + [setParams, networkId, safeAddress, pathname, navigate] ); }; diff --git a/src/hooks/useUpdateProposalViaQuery.ts b/src/hooks/useUpdateProposalViaQuery.ts index 15e7b5d..ee8d518 100644 --- a/src/hooks/useUpdateProposalViaQuery.ts +++ b/src/hooks/useUpdateProposalViaQuery.ts @@ -2,8 +2,12 @@ import { useCallback } from "react"; import { Proposal } from "../schemas/proposal"; import { useRedirectToProposalWithNewParams } from "./useSetParamsFromQuery"; +export type AddAction = ( + newAction: NonNullable[0] +) => void; + export type UpdateProposal = { - addAction: (newAction: NonNullable[0]) => void; + addAction: AddAction; replace: (proposal: Proposal) => void; }; export const useUpdateProposal = ({