From a75eda97db87445d2209b112a87dfe08a36c9c90 Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Thu, 11 Mar 2021 21:15:00 -0500
Subject: [PATCH] adds dev helper and some style

---
 README.md                               |  2 +-
 components/DevHelper.js                 | 44 ++++++++++++++++++
 components/dataViews/MultisigMembers.js | 62 +++++++++++++++++++++++++
 components/layout/Page.js               |  2 +
 components/layout/StackableContainer.js |  1 +
 5 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 components/DevHelper.js

diff --git a/README.md b/README.md
index 7a67b5f..ce76670 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ### 🚧🚧🚧🚧🚧 UNDER CONSTRUCTION 🚧🚧🚧🚧🚧🚧
 
-This app allows for legacy multisig users to create, sign and broadcast transactions on the stargate enabled cosmos hub chain.
+This app allows for legacy multisig users to create, sign and broadcast transactions on the stargate enabled cosmos hub chain. It's built with Cosmjs, Next.js, FaunaDB and Netlify.
 
 ## Running locally
 
diff --git a/components/DevHelper.js b/components/DevHelper.js
new file mode 100644
index 0000000..fd22171
--- /dev/null
+++ b/components/DevHelper.js
@@ -0,0 +1,44 @@
+const DevHelper = (props) => (
+  <div className="dev-helper">
+    <h3>Dev Helper</h3>
+    <h4>Pages</h4>
+    <ul>
+      <li>
+        <a href="/">Index/Start</a>
+      </li>
+      <li>
+        <a href="/create">Create Multisig</a>
+      </li>
+      <li>
+        <a href="/multi/cosmos1fjrcosmosDUMMYADDRESSqwpsvcrskv80wj82h">
+          View Multisig
+        </a>
+      </li>
+      <li>
+        <a href="/multi/cosmos1fjrcosmosDUMMYADDRESSqwpsvcrskv80wj82h/transaction/kjas-q981-asda-143d">
+          View/Sign Transaction
+        </a>
+      </li>
+    </ul>
+    <style jsx>{`
+      .dev-helper {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: darkseagreen;
+        padding: 1em;
+      }
+
+      ul {
+      }
+      li {
+        margin-bottom: 0.5em;
+      }
+      a {
+        color: white;
+      }
+    `}</style>
+  </div>
+);
+
+export default DevHelper;
diff --git a/components/dataViews/MultisigMembers.js b/components/dataViews/MultisigMembers.js
index 3ee1490..3efbd78 100644
--- a/components/dataViews/MultisigMembers.js
+++ b/components/dataViews/MultisigMembers.js
@@ -1,7 +1,69 @@
 import StackableContainer from "../layout/StackableContainer";
+import { abbreviateLongString } from "../../lib/displayHelpers";
 
+const dummyMembers = [
+  {
+    nickname: "Tolla",
+    pubkey: "AqsujWsohxvLS8B6ANf54D9qtIhAtQ2ISptBmXGUZVIN",
+    address: "cosmos1j8z4cfgpza4qa33pl02y84n0mdm8n7xzqdwlse",
+  },
+  {
+    nickname: "Yamman",
+    pubkey: "AqsujWsohxvLS8B6ANf54D9qtIhAtQ2ISptBmXGUZVIN",
+    address: "cosmos145mr4l98w2x96utkcayvtqaag79u7mpyane7q7",
+  },
+  {
+    nickname: "Wallace",
+    pubkey: "AqsujWsohxvLS8B6ANf54D9qtIhAtQ2ISptBmXGUZVIN",
+    address: "cosmos1t5u0jfg3ljsjrh2m9e47d4ny2hea7eehxrzdgd",
+  },
+];
 export default (props) => (
   <StackableContainer lessPadding>
     <h2>Members</h2>
+    <ul className="meta-data">
+      {dummyMembers.map((member) => (
+        <li>
+          <div className="nickname">
+            <label>Nickname:</label>
+            <div className="info">{member.nickname}</div>
+          </div>
+          <div className="address">
+            <label>Address:</label>
+            <div className="info">{abbreviateLongString(member.address)}</div>
+          </div>
+        </li>
+      ))}
+    </ul>
+    <style jsx>{`
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .meta-data li {
+        margin: 10px 0;
+        background: rgba(255, 255, 255, 0.03);
+        padding: 10px;
+        border-radius: 8px;
+      }
+      .meta-data li:last-child {
+        margin-bottom: 0;
+      }
+      .meta-data label {
+        font-size: 12px;
+        background: rgba(255, 255, 255, 0.1);
+        padding: 3px 6px;
+        border-radius: 5px;
+        display: inline-block;
+        margin-right: 10px;
+      }
+      li div:first-child {
+        margin-bottom: 10px;
+      }
+      .info {
+        display: inline-block;
+      }
+    `}</style>
   </StackableContainer>
 );
diff --git a/components/layout/Page.js b/components/layout/Page.js
index a01e540..e6d8411 100644
--- a/components/layout/Page.js
+++ b/components/layout/Page.js
@@ -1,10 +1,12 @@
 import Head from "../head";
+import DevHelper from "../DevHelper";
 
 export default (props) => {
   return (
     <div className="page">
       <Head title={props.title || "Cosmos Multisig Manager"} />
       {props.children}
+      <DevHelper />
       <style jsx>{`
         .page {
           display: flex;
diff --git a/components/layout/StackableContainer.js b/components/layout/StackableContainer.js
index b177fe6..9dfb216 100644
--- a/components/layout/StackableContainer.js
+++ b/components/layout/StackableContainer.js
@@ -19,6 +19,7 @@ export default (props) => (
       }
 
       .base {
+        max-width: 700px;
         background: #62145f;
         box-shadow: 0px 28px 80px rgba(0, 0, 0, 0.07),
           0px 12.7134px 39.2617px rgba(0, 0, 0, 0.0519173),