64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
import HashView from "./HashView";
|
|
import StackableContainer from "../layout/StackableContainer";
|
|
|
|
interface Props {
|
|
/** Addresses of the multisig members */
|
|
members: string[];
|
|
threshold: number;
|
|
}
|
|
|
|
const MultisigMembers = (props: Props) => (
|
|
<StackableContainer lessPadding>
|
|
<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: string) => (
|
|
<li key={address} className="info">
|
|
<HashView hash={address} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<style jsx>{`
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.info {
|
|
margin: 10px 0;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
.threshold {
|
|
font-size: 3.71em;
|
|
text-align: center;
|
|
}
|
|
.meta-data li {
|
|
display: block;
|
|
}
|
|
.meta-data {
|
|
display: flex;
|
|
column-gap: 1rem;
|
|
}
|
|
.meta-data > div {
|
|
width: 26%;
|
|
}
|
|
.meta-data > div:last-child {
|
|
width: auto;
|
|
}
|
|
`}</style>
|
|
</StackableContainer>
|
|
);
|
|
|
|
export default MultisigMembers;
|