if no current safe proposal, redirect to new

src/app/NewSafeProposal.tsx

@@ -383,19 +383,16 @@ const EditProposal = ({
 };
 
 export const NewSafeProposal = () => {
-  const [proposal, setProposal] = useState<undefined | Proposal>(
-    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 (
     <View paddingTop={4} paddingBottom={8} gap={8}>
-      <SafeInformation updateProposal={updateProposal}>
+      <SafeInformation addAction={addAction}>
         {isEditing && (
-          <EditProposal
-            proposal={proposal}
-            setProposal={updateProposal.replace}
-          />
+          <EditProposal proposal={proposal} setProposal={replace} />
         )}
         {!isEditing && proposal && (
           <ViewProposal

src/app/SafeInformationPage.tsx

@@ -1,6 +1,7 @@
 import { Button, View } from "reshaped";
 import { SafeInformation } from "../components/SafeInformation";
 import { useNavigate, useParams } from "react-router-dom";
+import { useUpdateProposal } from "../hooks/useUpdateProposalViaQuery";
 
 export const SafeInformationPage = () => {
   const { networkId, safeAddress } = useParams();
@@ -10,9 +11,11 @@ export const SafeInformationPage = () => {
     navigate(`/safe/${networkId}/${safeAddress}/new`);
   };
 
+  const { addAction } = useUpdateProposal({ proposal: undefined });
+
   return (
     <View gap={4}>
-      <SafeInformation />
+      <SafeInformation addAction={addAction} />
       <Button onClick={onNewProposalClick}>New Proposal</Button>
     </View>
   );

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<OwnerAction>();
 
@@ -45,7 +45,7 @@ export const SafeInformation = ({
             setOwnerAction(undefined);
           }}
           action={ownerAction}
-          updatedProposal={updateProposal}
+          addAction={addAction}
         />
       )}
       <Card>

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<SafeContext>();
   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<SafeContext>();
   const toaster = useToast();
@@ -162,26 +162,23 @@ const RemoveOwnerModalContent = ({
 export const SetOwnerModal = ({
   action,
   onClose,
-  updatedProposal,
+  addAction,
 }: {
   action: OwnerAction;
   onClose: () => void;
-  updatedProposal: UpdateProposal;
+  addAction: AddAction;
 }) => {
   return (
     <Modal active={!!action} onClose={onClose}>
       {action?.type === "remove" && (
         <RemoveOwnerModalContent
           onClose={onClose}
           target={action.address}
-          updateProposal={updatedProposal}
+          addAction={addAction}
         />
       )}
       {action?.type === "add" && (
-        <AddOwnerModalContent
-          onClose={onClose}
-          updateProposal={updatedProposal}
-        />
+        <AddOwnerModalContent onClose={onClose} addAction={addAction} />
       )}
     </Modal>
   );

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]
   );
 };

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<Proposal["actions"]>[0]
+) => void;
+
 export type UpdateProposal = {
-  addAction: (newAction: NonNullable<Proposal["actions"]>[0]) => void;
+  addAction: AddAction;
   replace: (proposal: Proposal) => void;
 };
 export const useUpdateProposal = ({