Merge pull request #21 from webmaster128/show-participants

Show participants

components/dataViews/CopyAndPaste.js

@@ -9,8 +9,7 @@ const CopyAndPaste = (props) => (
     </svg>
     <style jsx>{`
       svg {
-        height: 100%;
-        width: auto;
+        height: 1em;
       }
 
       path {
@@ -20,7 +19,6 @@ const CopyAndPaste = (props) => (
       }
 
       .icon {
-        padding: 0 0.5em;
         cursor: pointer;
       }
 

components/dataViews/HashView.js

@@ -10,6 +10,8 @@ const HashView = ({ hash, abbreviate }) => (
     <style jsx>{`
       .hash-view {
         display: flex;
+        font-family: monospace;
+        column-gap: 0.5em;
       }
     `}</style>
   </div>

components/dataViews/MultisigMembers.js

@@ -1,70 +1,54 @@
 import React from "react";
 
+import HashView from "./HashView";
 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",
-  },
-];
-const MultisigMembers = (_props) => (
+const MultisigMembers = (props) => (
   <StackableContainer lessPadding>
-    <h2>Members</h2>
-    <ul className="meta-data">
-      {dummyMembers.map((member) => (
-        <li key={member.address}>
-          <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>
+    <div className="meta-data">
+      <div>
+        <h2>Threshold</h2>
+        <div className="info threshold">{props.threshold}</div>
+      </div>
+      <div>
+        <h2>Members</h2>
+        <ul>
+          {props.members.map((address) => (
+            <li key={address} className="info">
+              <HashView hash={address} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
     <style jsx>{`
       ul {
         list-style: none;
         padding: 0;
         margin: 0;
       }
-      .meta-data li {
+      .info {
         margin: 10px 0;
         background: rgba(255, 255, 255, 0.03);
         padding: 10px;
         border-radius: 8px;
       }
-      .meta-data li:last-child {
-        margin-bottom: 0;
+      .threshold {
+        font-size: 3.71em;
+        text-align: center;
       }
-      .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;
+      .meta-data li {
+        display: block;
       }
-      li div:first-child {
-        margin-bottom: 10px;
+      .meta-data {
+        display: flex;
+        column-gap: 1rem;
       }
-      .info {
-        display: inline-block;
+      .meta-data > div {
+        width: 26%;
+      }
+      .meta-data > div:last-child {
+        width: auto;
       }
     `}</style>
   </StackableContainer>

pages/multi/[address]/index.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { pubkeyToAddress } from "@cosmjs/amino";
 import { StargateClient } from "@cosmjs/stargate";
 import { useRouter } from "next/router";
 
@@ -6,6 +7,7 @@ import Button from "../../../components/inputs/Button";
 import { getMultisigAccount } from "../../../lib/multisigHelpers";
 import HashView from "../../../components/dataViews/HashView";
 import MultisigHoldings from "../../../components/dataViews/MultisigHoldings";
+import MultisigMembers from "../../../components/dataViews/MultisigMembers";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
 import TransactionForm from "../../../components/forms/TransactionForm";
@@ -27,6 +29,16 @@ export async function getServerSideProps(context) {
   }
 }
 
+function participantPubkeysFromMultisig(multisigPubkey) {
+  return multisigPubkey.value.pubkeys;
+}
+
+function participantAddressesFromMultisig(multisigPubkey, addressPrefix) {
+  return participantPubkeysFromMultisig(multisigPubkey).map((p) =>
+    pubkeyToAddress(p, addressPrefix),
+  );
+}
+
 const multipage = (props) => {
   const [showTxForm, setShowTxForm] = useState(false);
   const router = useRouter();
@@ -40,6 +52,15 @@ const multipage = (props) => {
             <HashView hash={address} />
           </h1>
         </StackableContainer>
+        {props.accountOnChain?.pubkey && (
+          <MultisigMembers
+            members={participantAddressesFromMultisig(
+              props.accountOnChain?.pubkey,
+              process.env.NEXT_PUBLIC_ADDRESS_PREFIX,
+            )}
+            threshold={props.accountOnChain?.pubkey.value.threshold}
+          />
+        )}
         {props.error && (
           <StackableContainer>
             <div className="multisig-error">