From fef8c935fac3ba548e28eb3f935cfc1ab90d0fac Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Sun, 29 Aug 2021 22:51:37 -0400
Subject: [PATCH] small structure update

---
 components/dataViews/CompletedTransaction.js  | 20 +++++++-
 components/dataViews/MultisigHoldings.js      |  3 +-
 components/dataViews/MultisigMembers.js       |  4 +-
 components/dataViews/ThresholdInfo.js         |  3 +-
 components/forms/TransactionSigning.js        |  1 +
 components/layout/Page.js                     | 51 +++++++++++++++++--
 components/layout/StackableContainer.js       |  5 +-
 .../[address]/transaction/[transactionID].js  |  4 +-
 8 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/components/dataViews/CompletedTransaction.js b/components/dataViews/CompletedTransaction.js
index 867bde1..e0e4161 100644
--- a/components/dataViews/CompletedTransaction.js
+++ b/components/dataViews/CompletedTransaction.js
@@ -3,11 +3,27 @@ import Button from "../inputs/Button";
 
 export default ({ transactionHash }) => (
   <StackableContainer lessPadding lessMargin>
-    This transaction has been broadcast.
+    <StackableContainer lessPadding lessMargin lessRadius>
+      <div className="confirmation">
+        <svg viewBox="0 0 77 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 30L26 51L72 5" stroke="white" strokeWidth="12" />
+        </svg>
+        <p>This transaction has been broadcast.</p>
+      </div>
+    </StackableContainer>
     <Button
       href={`https://www.mintscan.io/cosmos/txs/${transactionHash}`}
       label=" View on Mintscan"
     ></Button>
-    <style jsx>{``}</style>
+    <style jsx>{`
+      .confirmation {
+        display: flex;
+        justify-content: center;
+      }
+      .confirmation svg {
+        height: 0.8em;
+        margin-right: 0.5em;
+      }
+    `}</style>
   </StackableContainer>
 );
diff --git a/components/dataViews/MultisigHoldings.js b/components/dataViews/MultisigHoldings.js
index 4500065..98c0584 100644
--- a/components/dataViews/MultisigHoldings.js
+++ b/components/dataViews/MultisigHoldings.js
@@ -1,6 +1,6 @@
 import StackableContainer from "../layout/StackableContainer";
 
-export default (props) => {
+const MultisigHoldings = (props) => {
   const uatomToAtom = (uatom) => {
     if (uatom === 0) return 0;
     return uatom / 1000000;
@@ -20,3 +20,4 @@ export default (props) => {
     </StackableContainer>
   );
 };
+export default MultisigHoldings;
diff --git a/components/dataViews/MultisigMembers.js b/components/dataViews/MultisigMembers.js
index 3efbd78..2dfb556 100644
--- a/components/dataViews/MultisigMembers.js
+++ b/components/dataViews/MultisigMembers.js
@@ -18,7 +18,7 @@ const dummyMembers = [
     address: "cosmos1t5u0jfg3ljsjrh2m9e47d4ny2hea7eehxrzdgd",
   },
 ];
-export default (props) => (
+const MultisigMembers = (props) => (
   <StackableContainer lessPadding>
     <h2>Members</h2>
     <ul className="meta-data">
@@ -67,3 +67,5 @@ export default (props) => (
     `}</style>
   </StackableContainer>
 );
+
+export default MultisigMembers;
diff --git a/components/dataViews/ThresholdInfo.js b/components/dataViews/ThresholdInfo.js
index 4d0e73b..268a210 100644
--- a/components/dataViews/ThresholdInfo.js
+++ b/components/dataViews/ThresholdInfo.js
@@ -1,6 +1,6 @@
 import StackableContainer from "../layout/StackableContainer";
 
-export default ({ signatures, account }) => (
+const ThresholdInfo = ({ signatures, account }) => (
   <StackableContainer lessPadding lessMargin>
     <h2>Signatures</h2>
     <StackableContainer lessPadding lessMargin lessRadius>
@@ -39,3 +39,4 @@ export default ({ signatures, account }) => (
     `}</style>
   </StackableContainer>
 );
+export default ThresholdInfo;
diff --git a/components/forms/TransactionSigning.js b/components/forms/TransactionSigning.js
index 60bfab9..ffce9ce 100644
--- a/components/forms/TransactionSigning.js
+++ b/components/forms/TransactionSigning.js
@@ -108,6 +108,7 @@ export default class TransactionSigning extends React.Component {
           signature
         );
         this.props.addSignature(signature);
+        this.setState({ hasSigned: true });
       }
     } catch (error) {
       console.log("Error creating signature:", error);
diff --git a/components/layout/Page.js b/components/layout/Page.js
index c40e9cc..6b10625 100644
--- a/components/layout/Page.js
+++ b/components/layout/Page.js
@@ -1,17 +1,56 @@
 import Head from "../head";
-import DevHelper from "../DevHelper";
+import StackableContainer from "./StackableContainer";
 
-export default (props) => {
+const Page = (props) => {
   return (
     <div className="page">
       <Head title={props.title || "Cosmos Multisig Manager"} />
-      {props.children}
-      <DevHelper />
+      <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>
+      <div className="footer-links">
+        <StackableContainer base lessPadding lessMargin>
+          <p>
+            <a href="https://github.com/samepant/cosmoshub-legacy-multisig">
+              View on github
+            </a>
+          </p>
+        </StackableContainer>
+      </div>
       <style jsx>{`
         .page {
           display: flex;
           justify-content: center;
-          padding: 80px 0;
+          padding: 120px 0;
+        }
+        .container {
+          position: relative;
+        }
+        .nav {
+          position: absolute;
+          top: -8%;
+          left: 0;
+          display: flex;
+        }
+        a,
+        a:visited {
+          color: white;
+        }
+        .footer-links {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
         }
       `}</style>
       <style global jsx>{`
@@ -68,3 +107,5 @@ export default (props) => {
     </div>
   );
 };
+
+export default Page;
diff --git a/components/layout/StackableContainer.js b/components/layout/StackableContainer.js
index 138edc1..0a54d62 100644
--- a/components/layout/StackableContainer.js
+++ b/components/layout/StackableContainer.js
@@ -1,4 +1,4 @@
-export default (props) => (
+const StackableContainer = (props) => (
   <div className={`container ${props.base ? "base" : ""}`}>
     {props.children}
 
@@ -6,7 +6,7 @@ export default (props) => (
       .container {
         background: rgba(255, 255, 255, 0.05);
         padding: ${props.lessPadding ? "15px" : "30px"};
-        margin-top: ${props.lessMargin ? "25px" : "50px"};
+        margin-top: ${props.lessMargin || props.base ? "25px" : "50px"};
         border-radius: ${props.lessRadius ? "10px" : "20px"};
 
         display: flex;
@@ -34,3 +34,4 @@ export default (props) => (
     `}</style>
   </div>
 );
+export default StackableContainer;
diff --git a/pages/multi/[address]/transaction/[transactionID].js b/pages/multi/[address]/transaction/[transactionID].js
index e200e5d..7b51ea5 100644
--- a/pages/multi/[address]/transaction/[transactionID].js
+++ b/pages/multi/[address]/transaction/[transactionID].js
@@ -40,6 +40,7 @@ export async function getServerSideProps(context) {
   }
   return {
     props: {
+      multisigAddress,
       transactionJSON,
       txHash,
       accountOnChain,
@@ -52,6 +53,7 @@ export async function getServerSideProps(context) {
 }
 
 const transactionPage = ({
+  multisigAddress,
   transactionJSON,
   transactionID,
   signatures,
@@ -102,7 +104,7 @@ const transactionPage = ({
   };
 
   return (
-    <Page>
+    <Page rootMultisig={multisigAddress}>
       <StackableContainer base>
         <StackableContainer>
           <h1>