Add PartyId component

Author: Alenar

mithril-explorer/__tests__/partyIdFormat.test.js

@@ -0,0 +1,21 @@
+import {formatPartyId} from "../src/utils";
+
+describe('Stake formatting', () => {
+  it.each([
+    ["pool1zmtm8yef33z2n7x4nn0kvv9xpzjuj7725p9y9m5t960g5qy51ua", "pool1zmtm8…y51ua"],
+    ["pool23kk0fksdayg23htnj372avmnwwql9c2zz0ah8jt63rjdzyjr95n", "pool23kk0f…jr95n"],
+  ])('formatting party id remove all but the 10 first and the last 5 characters', (partyId, expected) => {
+    expect(formatPartyId(partyId)).toEqual(expected);
+  });
+
+  it.each([
+    ["pool1zmtm8yef33zuj7725p9y9m5t960g5qy51ua", "pool1zmtm8…y51ua"],
+    ["pool1zmtm8yef33z22n7x4nn0kvv9xpzjn7x4nn0kvv9xpzjuj7725p9y9m5t960g5qy51ua", "pool1zmtm8…y51ua"],
+    ["pool23kk0fyjr95n", "pool23kk0f…jr95n"],
+    ["pool23kk0fjr95n", "pool23kk0fjr95n"],
+    ["pool23kk0jr95n", "pool23kk0jr95n"],
+    ["pool25n", "pool25n"],
+  ])('formatting party id remove all but the 10 first and the last 5 characters even for non usual length', (partyId, expected) => {
+    expect(formatPartyId(partyId)).toEqual(expected);
+  });
+});

mithril-explorer/src/components/CertificateModal/index.js

@@ -7,6 +7,7 @@ import ProtocolParameters from "../ProtocolParameters";
 import PoolTicker from "../PoolTicker";
 import VerifiedBadge from '../VerifiedBadge';
 import {selectedAggregator} from "../../store/settingsSlice";
+import PartyId from "../PartyId";
 
 export default function CertificateModal(props) {
   const [certificate, setCertificate] = useState({});
@@ -96,8 +97,8 @@ export default function CertificateModal(props) {
                                 <VerifiedBadge tooltip="Verified Signer"/>
                               }
                             </td>
-                            <td>{signer.party_id}</td>
-                            <td><PoolTicker aggregator={aggregator} partyId={signer.party_id} /></td>
+                            <td><PartyId partyId={signer.party_id}/></td>
+                            <td><PoolTicker aggregator={aggregator} partyId={signer.party_id}/></td>
                             <td style={{textAlign: "end"}}><Stake lovelace={signer.stake}/></td>
                           </tr>
                         )}

mithril-explorer/src/components/PartyId.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Button, OverlayTrigger, Tooltip} from "react-bootstrap";
+import {formatPartyId} from "../utils";
+
+export default function PartyId({partyId}) {
+    function copyToClipboard() {
+        if (window.isSecureContext && partyId) {
+            navigator.clipboard.writeText(partyId).then(() => {
+            });
+        }
+    }
+
+    return (
+        <>
+            <Button variant="link" onClick={copyToClipboard} size="md" className="p-0">
+                <i className="bi bi-copy" style={{color: 'black'}}></i>
+            </Button>
+            <> </>
+            <OverlayTrigger overlay={<Tooltip>{partyId}</Tooltip>}>
+                <span>{formatPartyId(partyId)}</span>
+            </OverlayTrigger>
+        </>
+    );
+}

mithril-explorer/src/components/PendingCertificate/index.js

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {Card, CardGroup, ListGroup} from "react-bootstrap";
 import {useSelector} from "react-redux";
+import PartyId from "../PartyId";
 import PoolTicker from "../PoolTicker";
 import RawJsonButton from "../RawJsonButton";
 import SignedEntityType from "../SignedEntityType";
@@ -74,7 +75,7 @@ export default function PendingCertificate(props) {
                     {pendingCertificate.signers.map(signer =>
                       <ListGroup.Item key={signer.party_id}>
                         <PoolTicker partyId={signer.party_id} aggregator={aggregator}/><br/>
-                        {signer.party_id}
+                        <PartyId partyId={signer.party_id}/>
                         {signer.verification_key_signature &&
                           <div className="float-end">
                             <VerifiedBadge tooltip="Verified Signer"/>
@@ -98,7 +99,7 @@ export default function PendingCertificate(props) {
                     {pendingCertificate.next_signers.map(signer =>
                       <ListGroup.Item key={signer.party_id}>
                         <PoolTicker partyId={signer.party_id} aggregator={aggregator}/><br/>
-                        {signer.party_id}
+                        <PartyId partyId={signer.party_id}/>
                         {signer.verification_key_signature &&
                           <div className="float-end">
                             <VerifiedBadge tooltip="Verified Signer"/>

mithril-explorer/src/utils.js

@@ -13,6 +13,14 @@ const formatCurrency = (number, maximumFractionDigits = 2) => number.toLocaleStr
   maximumFractionDigits: maximumFractionDigits,
 });
 
+function formatPartyId(partyId) {
+  if ((typeof partyId === 'string' || partyId instanceof String) && partyId.length > 15) {
+    return partyId.slice(0, 10) + "…" + partyId.slice(-5)
+  } else {
+    return partyId;
+  }
+}
+
 function formatStake(lovelace) {
   // Credits to Jasser Mark Arioste for the original idea:
   // https://reacthustle.com/blog/how-to-convert-number-to-kmb-format-in-javascript
@@ -89,5 +97,6 @@ module.exports = {
   setChartJsDefaults,
   toAda,
   formatCurrency,
-  formatBytes
+  formatBytes,
+  formatPartyId,
 }