Merge pull request #122 from cosmos/feat/add-navigation

Add backbutton navigation
2023-05-31 12:22:48 +02:00 · 2023-05-31 12:22:48 +02:00 · af76b9beab
commit af76b9beab
parent df7d14f277 d4a4014701
5 changed files with 74 additions and 51 deletions
--- 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;
--- 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>{`
--- 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>
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@ -27,14 +27,14 @@ const Multipage = () => {
  assert(state.chain.addressPrefix, "address prefix missing");

  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 fetchMultisig = useCallback(
@ -64,15 +64,13 @@ 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>
+    <Page goBack={{ pathname: "/", title: "home", needsConfirm: true }}>
      <StackableContainer base>
        <StackableContainer>
          <label>Multisig Address</label>
@ -125,7 +123,7 @@ const Multipage = () => {
            </div>
          </StackableContainer>
        ) : null}
-        {!!accountOnChain ? (
+        {accountOnChain && multisigAddress ? (
          <CreateTxForm senderAddress={multisigAddress} accountOnChain={accountOnChain} />
        ) : null}
      </StackableContainer>
--- 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 {
@ -146,7 +144,7 @@ const TransactionPage = ({
    : false;

  return (
-    <Page rootMultisig={multisigAddress}>
+    <Page goBack={{ pathname: `/multi/${multisigAddress}`, title: "multisig" }}>
      <StackableContainer base>
        <StackableContainer>
          <h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>