small structure update

2021-08-29 22:51:37 -04:00 · 2021-08-29 22:51:37 -04:00 · fef8c935fa
commit fef8c935fa
parent 4dd9b9326a
8 changed files with 78 additions and 13 deletions
--- 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>
 );
--- 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;
--- 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;
--- 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;
--- 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);
--- 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;
--- 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;
--- 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>