adds dev helper and some style

2021-03-11 21:15:00 -05:00
parent c7b0e1b4bd
commit a75eda97db
5 changed files with 110 additions and 1 deletions
@@ -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

@@ -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;
@@ -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>
 );
@@ -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;
@@ -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),