From ae89fffa3373949951e08fa38804c1e163987e42 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 19 May 2023 13:42:51 +0200
Subject: [PATCH 01/10] Add back button to multisig page

---
 pages/multi/[address]/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index b5220f4..08e173f 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -2,6 +2,7 @@ import { MultisigThresholdPubkey, SinglePubkey } from "@cosmjs/amino";
 import { Account, StargateClient } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
 import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import HashView from "../../../components/dataViews/HashView";
@@ -79,6 +80,9 @@ const Multipage = () => {
 
   return (
     <Page>
+      <Link href="/" style={{ color: "white", fontSize: 20, textDecoration: "none" }}>
+        ← Back to Home
+      </Link>
       <StackableContainer base>
         <StackableContainer>
           <label>Multisig Address</label>

From cf7d9edba9fde16785c3199b9a2d29af5b61468a Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 19 May 2023 13:43:02 +0200
Subject: [PATCH 02/10] Add back button to create multisig

---
 pages/create.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/create.tsx b/pages/create.tsx
index 0b5d8b7..87ef9fe 100644
--- a/pages/create.tsx
+++ b/pages/create.tsx
@@ -1,11 +1,13 @@
-import React from "react";
-
+import Link from "next/link";
 import MultisigForm from "../components/forms/MultisigForm";
 import Page from "../components/layout/Page";
 import StackableContainer from "../components/layout/StackableContainer";
 
 const CreatePage = () => (
   <Page>
+    <Link href="/" style={{ color: "white", fontSize: 20, textDecoration: "none" }}>
+      ← Back to Home
+    </Link>
     <StackableContainer base>
       <StackableContainer lessPadding>
         <h1 className="title">Create Legacy Multisig</h1>

From 27bb92b0624117ce96499654258b8fffae934eb6 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 19 May 2023 13:43:17 +0200
Subject: [PATCH 03/10] Add back button to transaction page

---
 pages/multi/[address]/transaction/[transactionID].tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/pages/multi/[address]/transaction/[transactionID].tsx b/pages/multi/[address]/transaction/[transactionID].tsx
index 3c944ed..5d58525 100644
--- a/pages/multi/[address]/transaction/[transactionID].tsx
+++ b/pages/multi/[address]/transaction/[transactionID].tsx
@@ -4,6 +4,7 @@ import { Account, StargateClient, makeMultisignedTxBytes } from "@cosmjs/stargat
 import { assert } from "@cosmjs/utils";
 import axios from "axios";
 import { GetServerSideProps } from "next";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import CompletedTransaction from "../../../../components/dataViews/CompletedTransaction";
@@ -143,6 +144,12 @@ const TransactionPage = ({
 
   return (
     <Page rootMultisig={multisigAddress}>
+      <Link
+        href={`/multi/${router.query.address}`}
+        style={{ color: "white", fontSize: 20, textDecoration: "none" }}
+      >
+        ← Back to Multisig
+      </Link>
       <StackableContainer base>
         <StackableContainer>
           <h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>

From 4383cebd39275061431262f91069ea11e4a2cbf8 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 00:14:42 +0200
Subject: [PATCH 04/10] Revert "Add back button to transaction page"

This reverts commit 27bb92b0624117ce96499654258b8fffae934eb6.
---
 pages/multi/[address]/transaction/[transactionID].tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/pages/multi/[address]/transaction/[transactionID].tsx b/pages/multi/[address]/transaction/[transactionID].tsx
index 5d58525..3c944ed 100644
--- a/pages/multi/[address]/transaction/[transactionID].tsx
+++ b/pages/multi/[address]/transaction/[transactionID].tsx
@@ -4,7 +4,6 @@ import { Account, StargateClient, makeMultisignedTxBytes } from "@cosmjs/stargat
 import { assert } from "@cosmjs/utils";
 import axios from "axios";
 import { GetServerSideProps } from "next";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import CompletedTransaction from "../../../../components/dataViews/CompletedTransaction";
@@ -144,12 +143,6 @@ const TransactionPage = ({
 
   return (
     <Page rootMultisig={multisigAddress}>
-      <Link
-        href={`/multi/${router.query.address}`}
-        style={{ color: "white", fontSize: 20, textDecoration: "none" }}
-      >
-        ← Back to Multisig
-      </Link>
       <StackableContainer base>
         <StackableContainer>
           <h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>

From ed12756650ec10b833286cbb71271eec8a3b60fc Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 00:15:00 +0200
Subject: [PATCH 05/10] Revert "Add back button to create multisig"

This reverts commit cf7d9edba9fde16785c3199b9a2d29af5b61468a.
---
 pages/create.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/pages/create.tsx b/pages/create.tsx
index 87ef9fe..0b5d8b7 100644
--- a/pages/create.tsx
+++ b/pages/create.tsx
@@ -1,13 +1,11 @@
-import Link from "next/link";
+import React from "react";
+
 import MultisigForm from "../components/forms/MultisigForm";
 import Page from "../components/layout/Page";
 import StackableContainer from "../components/layout/StackableContainer";
 
 const CreatePage = () => (
   <Page>
-    <Link href="/" style={{ color: "white", fontSize: 20, textDecoration: "none" }}>
-      ← Back to Home
-    </Link>
     <StackableContainer base>
       <StackableContainer lessPadding>
         <h1 className="title">Create Legacy Multisig</h1>

From f03fa3c4846ed8b87c05c8db631faaf748471f36 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 00:15:16 +0200
Subject: [PATCH 06/10] Revert "Add back button to multisig page"

This reverts commit ae89fffa3373949951e08fa38804c1e163987e42.
---
 pages/multi/[address]/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 08e173f..b5220f4 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -2,7 +2,6 @@ import { MultisigThresholdPubkey, SinglePubkey } from "@cosmjs/amino";
 import { Account, StargateClient } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
 import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import HashView from "../../../components/dataViews/HashView";
@@ -80,9 +79,6 @@ const Multipage = () => {
 
   return (
     <Page>
-      <Link href="/" style={{ color: "white", fontSize: 20, textDecoration: "none" }}>
-        ← Back to Home
-      </Link>
       <StackableContainer base>
         <StackableContainer>
           <label>Multisig Address</label>

From 98f53208bad222de67f96a2d6333cbc7f13d88c0 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 13:15:51 +0200
Subject: [PATCH 07/10] Add divProps to enable onClick

---
 components/layout/StackableContainer.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/layout/StackableContainer.tsx b/components/layout/StackableContainer.tsx
index 4262e43..d4b6667 100644
--- a/components/layout/StackableContainer.tsx
+++ b/components/layout/StackableContainer.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 interface Props {
   base?: boolean;
   children: React.ReactNode;
@@ -7,10 +5,11 @@ interface Props {
   lessMargin?: boolean;
   lessRadius?: boolean;
   fullHeight?: boolean;
+  divProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 const StackableContainer = (props: Props) => (
-  <div className={`container ${props.base ? "base" : ""}`}>
+  <div className={`container ${props.base ? "base" : ""}`} {...props.divProps}>
     {props.children}
 
     <style jsx>{`

From 30a67976e25010307a3e8eef3eccd028887f7c0b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 13:16:16 +0200
Subject: [PATCH 08/10] Fix goBack logic in Page component

---
 components/layout/Page.tsx | 88 +++++++++++++++++++++++++-------------
 1 file changed, 59 insertions(+), 29 deletions(-)

diff --git a/components/layout/Page.tsx b/components/layout/Page.tsx
index 421823e..cc42c77 100644
--- a/components/layout/Page.tsx
+++ b/components/layout/Page.tsx
@@ -1,30 +1,69 @@
-import React from "react";
-
+import { useRouter } from "next/router";
+import { useState } from "react";
 import Head from "../head";
 import StackableContainer from "./StackableContainer";
 
-interface Props {
-  title?: string;
-  rootMultisig?: string;
-  children: React.ReactNode;
+interface PageProps {
+  readonly title?: string;
+  readonly goBack?: {
+    readonly pathname: string;
+    readonly title: string;
+    readonly needsConfirm?: boolean;
+  };
+  readonly children: React.ReactNode;
 }
 
-const Page = (props: Props) => {
+const Page = ({ title, goBack, children }: PageProps) => {
+  const router = useRouter();
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const linkProps = (() => {
+    if (!goBack) {
+      return {};
+    }
+
+    if (goBack.needsConfirm && !showConfirm) {
+      return {
+        href: "",
+        onClick: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => {
+          e.preventDefault();
+          setShowConfirm(true);
+        },
+      };
+    }
+
+    return {
+      href: goBack.pathname,
+    };
+  })();
+
   return (
     <div className="page">
-      <Head title={props.title || "Cosmos Multisig Manager"} />
-      <div className="container">
-        {props.rootMultisig && (
-          <div className="nav">
-            <StackableContainer base lessPadding lessMargin>
-              <p>
-                <a href={`/multi/${props.rootMultisig}`}>← Back to multisig account</a>
-              </p>
-            </StackableContainer>
-          </div>
-        )}
-        {props.children}
-      </div>
+      <Head title={title || "Cosmos Multisig Manager"} />
+      <StackableContainer>
+        {goBack ? (
+          <StackableContainer
+            base
+            lessPadding
+            lessMargin
+            divProps={{
+              style: { width: "fit-content", cursor: "pointer" },
+              onClick: linkProps.href ? () => router.push(linkProps.href) : linkProps.onClick,
+            }}
+          >
+            <p>
+              <a {...linkProps}>← Back to {goBack.title}</a>
+            </p>
+            {showConfirm ? (
+              <>
+                <p style={{ marginTop: "8px" }}>Changes to any form will be lost if you go back</p>
+                <p>Click again to confirm</p>
+              </>
+            ) : null}
+          </StackableContainer>
+        ) : null}
+        {children}
+      </StackableContainer>
       <div className="footer-links">
         <StackableContainer base lessPadding lessMargin>
           <p>
@@ -38,15 +77,6 @@ const Page = (props: Props) => {
           justify-content: center;
           padding: 120px 0;
         }
-        .container {
-          position: relative;
-        }
-        .nav {
-          position: absolute;
-          top: -40px;
-          left: 0;
-          display: flex;
-        }
         a,
         a:visited {
           color: white;

From 1d865dfd3f2efe394bfe3d2958e4baea77da3e72 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 13:17:18 +0200
Subject: [PATCH 09/10] Simplify multisigAddress use

---
 pages/multi/[address]/index.tsx                    | 14 ++++++--------
 .../[address]/transaction/[transactionID].tsx      | 10 ++++------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index b5220f4..3c9318d 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -29,14 +29,14 @@ const Multipage = () => {
 
   const [txType, setTxType] = useState<TxType | null>(null);
   const [holdings, setHoldings] = useState<readonly Coin[]>([]);
-  const [multisigAddress, setMultisigAddress] = useState("");
   const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
   const [pubkey, setPubkey] = useState<MultisigThresholdPubkey>();
   const [accountError, setAccountError] = useState(null);
 
+  const multisigAddress = router.query.address?.toString();
   const explorerHref = explorerLinkAccount(
     process.env.NEXT_PUBLIC_EXPLORER_LINK_ACCOUNT || "",
-    multisigAddress,
+    multisigAddress || "",
   );
 
   const closeForm = () => {
@@ -70,12 +70,10 @@ const Multipage = () => {
   );
 
   useEffect(() => {
-    const address = router.query.address?.toString();
-    if (address) {
-      setMultisigAddress(address);
-      fetchMultisig(address);
+    if (multisigAddress) {
+      fetchMultisig(multisigAddress);
     }
-  }, [fetchMultisig, router.query.address]);
+  }, [fetchMultisig, multisigAddress]);
 
   return (
     <Page>
@@ -107,7 +105,7 @@ const Multipage = () => {
             </div>
           </StackableContainer>
         ) : null}
-        {!!txType && !!accountOnChain ? (
+        {txType && multisigAddress && accountOnChain ? (
           <CreateTxForm
             txType={txType}
             senderAddress={multisigAddress}
diff --git a/pages/multi/[address]/transaction/[transactionID].tsx b/pages/multi/[address]/transaction/[transactionID].tsx
index 3c944ed..f8fa65d 100644
--- a/pages/multi/[address]/transaction/[transactionID].tsx
+++ b/pages/multi/[address]/transaction/[transactionID].tsx
@@ -55,13 +55,11 @@ export const getServerSideProps: GetServerSideProps = async (context): Promise<P
 };
 
 const TransactionPage = ({
-  multisigAddress,
   transactionJSON,
   transactionID,
   signatures,
   txHash,
 }: {
-  multisigAddress: string;
   transactionJSON: string;
   transactionID: string;
   signatures: DbSignature[];
@@ -77,6 +75,7 @@ const TransactionPage = ({
   const [accountError, setAccountError] = useState(null);
   const txInfo: DbTransaction = transactionJSON ? JSON.parse(transactionJSON) : null;
   const router = useRouter();
+  const multisigAddress = router.query.address?.toString();
 
   const addSignature = (signature: DbSignature) => {
     setCurrentSignatures((prevState: DbSignature[]) => [...prevState, signature]);
@@ -101,11 +100,10 @@ const TransactionPage = ({
   );
 
   useEffect(() => {
-    const address = router.query.address?.toString();
-    if (address) {
-      fetchMultisig(address);
+    if (multisigAddress) {
+      fetchMultisig(multisigAddress);
     }
-  }, [fetchMultisig, router.query.address]);
+  }, [fetchMultisig, multisigAddress]);
 
   const broadcastTx = async () => {
     try {

From 4b8c34d9b8e75413be919634587fd754e26ff520 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Thu, 25 May 2023 13:18:05 +0200
Subject: [PATCH 10/10] Set goBack per Page

---
 pages/create.tsx                                      | 4 +---
 pages/multi/[address]/index.tsx                       | 2 +-
 pages/multi/[address]/transaction/[transactionID].tsx | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/pages/create.tsx b/pages/create.tsx
index 0b5d8b7..3ea7938 100644
--- a/pages/create.tsx
+++ b/pages/create.tsx
@@ -1,11 +1,9 @@
-import React from "react";
-
 import MultisigForm from "../components/forms/MultisigForm";
 import Page from "../components/layout/Page";
 import StackableContainer from "../components/layout/StackableContainer";
 
 const CreatePage = () => (
-  <Page>
+  <Page goBack={{ pathname: "/", title: "home", needsConfirm: true }}>
     <StackableContainer base>
       <StackableContainer lessPadding>
         <h1 className="title">Create Legacy Multisig</h1>
diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 3c9318d..3702e29 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -76,7 +76,7 @@ const Multipage = () => {
   }, [fetchMultisig, multisigAddress]);
 
   return (
-    <Page>
+    <Page goBack={{ pathname: "/", title: "home", needsConfirm: true }}>
       <StackableContainer base>
         <StackableContainer>
           <label>Multisig Address</label>
diff --git a/pages/multi/[address]/transaction/[transactionID].tsx b/pages/multi/[address]/transaction/[transactionID].tsx
index f8fa65d..7f96d8c 100644
--- a/pages/multi/[address]/transaction/[transactionID].tsx
+++ b/pages/multi/[address]/transaction/[transactionID].tsx
@@ -140,7 +140,7 @@ const TransactionPage = ({
   };
 
   return (
-    <Page rootMultisig={multisigAddress}>
+    <Page goBack={{ pathname: `/multi/${multisigAddress}`, title: "multisig" }}>
       <StackableContainer base>
         <StackableContainer>
           <h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>