diff --git a/components/dataViews/ThresholdInfo.tsx b/components/dataViews/ThresholdInfo.tsx index 676e167..0271e0c 100644 --- a/components/dataViews/ThresholdInfo.tsx +++ b/components/dataViews/ThresholdInfo.tsx @@ -1,52 +1,72 @@ -import React from "react"; import { MultisigThresholdPubkey } from "@cosmjs/amino"; - +import { useEffect, useState } from "react"; import { DbSignature } from "../../types"; import StackableContainer from "../layout/StackableContainer"; +import CopyAndPaste from "./CopyAndPaste"; interface Props { signatures: DbSignature[]; pubkey: MultisigThresholdPubkey; } -const ThresholdInfo = ({ signatures, pubkey }: Props) => ( - -

Signatures

- -

- Once the number of required signatures have been created, this transaction will be ready to - broadcast. -

-
- -
-
{signatures.length}
-
of
-
{pubkey.value.threshold}
-
signatures complete
-
-
- -
-); +const ThresholdInfo = ({ signatures, pubkey }: Props) => { + const [urlToCopy, setUrlToCopy] = useState(""); + + useEffect(() => { + const urlWithoutQuery = window.location.href.split("?")[0]; + setUrlToCopy(urlWithoutQuery); + }, []); + + const remainingSignatures = Number(pubkey.value.threshold) - signatures.length; + if (!remainingSignatures) return null; + + return ( + <> + +
+
{signatures.length}
+
of
+
{pubkey.value.threshold}
+
signatures complete
+
+ +

+ {remainingSignatures} remaining {remainingSignatures > 1 ? "signatures" : "signature"}{" "} + before this transaction can be broadcast +

+
+ +
+ +

+ Copy the current URL and share it with the other members in the multisig so they can + sign it +

+
+
+
+ + + ); +}; export default ThresholdInfo;