Skip to content

Commit 24e147e

Browse files
AlenarAlenar
committed
Use more generic markdown instead of discord and other PR review adjustments
Also * Adjusted some text: `Missing` -> `De-registered`, `New` -> `Newly registered`. * Adjusted the layout of the `RegistrationsMovementsList` to move the 'open markdown modal' button on the top left instead of right after the title. * Color the markdown icon on the modal to add another visual cue of the kind of list showed.
1 parent 1b036ad commit 24e147e

File tree

6 files changed

+55
-42
lines changed

6 files changed

+55
-42
lines changed

‎mithril-explorer/src/app/registrations-in-out/RegistrationsMovementsList.js‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React, { Fragment } from "react";
2-
import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
2+
import { Button, OverlayTrigger, Stack, Tooltip } from "react-bootstrap";
33
import SignerTable from "#/SignerTable";
44

5-
function DiscordModalButton({ onClick }) {
5+
function MarkdownModalButton({ onClick }) {
66
return (
7-
<OverlayTrigger overlay={<Tooltip>Discord formatted code block</Tooltip>}>
8-
<Button variant="secondary" size="sm" onClick={onClick}>
9-
<i className="bi bi-discord"></i>
7+
<OverlayTrigger overlay={<Tooltip>Markdown formatted code block</Tooltip>}>
8+
<Button variant="light" size="sm" className="border-dark" onClick={onClick}>
9+
<i className="bi bi-markdown"></i>
1010
</Button>
1111
</OverlayTrigger>
1212
);
1313
}
1414

15-
export default function RegistrationsMovementsList({ mode, registrations, onDiscordButtonClick }) {
15+
export default function RegistrationsMovementsList({ mode, registrations, onMarkdownButtonClick }) {
1616
const movementsForCurrentMode = (movements) => (mode === "out" ? movements.out : movements.in);
1717
const filteredRegistrations = Object.entries(registrations)
1818
.reverse()
@@ -21,21 +21,28 @@ export default function RegistrationsMovementsList({ mode, registrations, onDisc
2121
return (
2222
<>
2323
<h3>
24-
{mode === "out" ? (
25-
<>
26-
<i className="bi bi-box-arrow-left"></i> Missing
27-
</>
28-
) : (
29-
<>
30-
<i className="bi bi-box-arrow-in-right"></i> New
31-
</>
32-
)}{" "}
33-
Signers <DiscordModalButton onClick={onDiscordButtonClick} />
24+
<Stack direction="horizontal">
25+
<div>
26+
{mode === "out" ? (
27+
<>
28+
<i className="bi bi-box-arrow-left"></i> De-registered
29+
</>
30+
) : (
31+
<>
32+
<i className="bi bi-box-arrow-in-right"></i> Newly registered
33+
</>
34+
)}{" "}
35+
Signers
36+
</div>
37+
<div className="ms-auto">
38+
<MarkdownModalButton onClick={onMarkdownButtonClick} />
39+
</div>
40+
</Stack>
3441
</h3>
3542
{filteredRegistrations.map(([epoch, movements]) => (
3643
<Fragment key={epoch}>
3744
<h4>
38-
{mode === "out" ? "Missing" : "New"} since epoch{" "}
45+
{mode === "out" ? "De-registered" : "Registered"} since epoch{" "}
3946
<span className="text-secondary">#{epoch}</span>
4047
</h4>
4148
<SignerTable signers={movementsForCurrentMode(movements)} />

‎mithril-explorer/src/app/registrations-in-out/page.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Col, Alert, Row, Spinner, Stack, Table } from "react-bootstrap";
88
import { aggregatorSearchParam } from "@/constants";
99
import { updatePoolsForAggregator } from "@/store/poolsSlice";
1010
import { fetchEpochSettings, fetchRegistrations } from "@/aggregator-api";
11-
import RegistrationDiscordFormatModal from "#/RegistrationDiscordFormatModal";
11+
import RegistrationMarkdownFormatModal from "#/RegistrationMarkdownFormatModal";
1212
import RegistrationsMovementsList from "@/app/registrations-in-out/RegistrationsMovementsList";
1313

1414
export default function RegistrationsChanges() {
@@ -20,7 +20,7 @@ export default function RegistrationsChanges() {
2020
const [currentEpoch, setCurrentEpoch] = useState(undefined);
2121
const [completeDiff, setCompleteDiff] = useState(undefined);
2222
const [dedupDiff, setDedupDiff] = useState(undefined);
23-
const [discordFormatModalMode, setDiscordFormatModalMode] = useState(undefined);
23+
const [markdownFormatModalMode, setMarkdownFormatModalMode] = useState(undefined);
2424

2525
useEffect(() => {
2626
const aggregator = searchParams.get(aggregatorSearchParam);
@@ -70,8 +70,8 @@ export default function RegistrationsChanges() {
7070
});
7171
}
7272

73-
function handleRegistrationsDiscordFormatClose() {
74-
setDiscordFormatModalMode(undefined);
73+
function handleRegistrationsMarkdownFormatClose() {
74+
setMarkdownFormatModalMode(undefined);
7575
}
7676

7777
if (currentError !== undefined) {
@@ -104,10 +104,10 @@ export default function RegistrationsChanges() {
104104
<Spinner animation="grow" />
105105
) : (
106106
<>
107-
<RegistrationDiscordFormatModal
107+
<RegistrationMarkdownFormatModal
108108
registrations={dedupDiff}
109-
onClose={handleRegistrationsDiscordFormatClose}
110-
mode={discordFormatModalMode}
109+
onClose={handleRegistrationsMarkdownFormatClose}
110+
mode={markdownFormatModalMode}
111111
/>
112112

113113
<Row>
@@ -134,7 +134,7 @@ export default function RegistrationsChanges() {
134134
<RegistrationsMovementsList
135135
registrations={dedupDiff}
136136
mode="out"
137-
onDiscordButtonClick={() => setDiscordFormatModalMode("out")}
137+
onMarkdownButtonClick={() => setMarkdownFormatModalMode("out")}
138138
/>
139139
</div>
140140
</Col>
@@ -143,7 +143,7 @@ export default function RegistrationsChanges() {
143143
<RegistrationsMovementsList
144144
registrations={dedupDiff}
145145
mode="in"
146-
onDiscordButtonClick={() => setDiscordFormatModalMode("in")}
146+
onMarkdownButtonClick={() => setMarkdownFormatModalMode("in")}
147147
/>
148148
</div>
149149
</Col>

‎mithril-explorer/src/components/PoolTicker.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React from "react";
22
import { useSelector } from "react-redux";
33
import { getPoolForSelectedAggregator } from "@/store/poolsSlice";
4-
import { getCExplorerUrl } from "@/utils";
4+
import { poolTickerCExplorerUrl } from "@/utils";
55
import { CExplorerUrl } from "#/CExplorerUrl";
66

77
export default function PoolTicker({ partyId }) {
88
const pool = useSelector((state) => getPoolForSelectedAggregator(state, partyId));
9-
const cExplorerUrl = getCExplorerUrl(pool.network);
10-
const url = cExplorerUrl ? `${cExplorerUrl}/pool/${partyId}` : undefined;
9+
const cExplorerUrl = poolTickerCExplorerUrl(pool.network, partyId);
1110

12-
return <CExplorerUrl url={url} text={pool?.pool_ticker} />;
11+
return <CExplorerUrl url={cExplorerUrl} text={pool?.pool_ticker} />;
1312
}

‎mithril-explorer/src/components/RegistrationDiscordFormatModal.js‎ renamed to ‎mithril-explorer/src/components/RegistrationMarkdownFormatModal.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import React, { useEffect, useState } from "react";
2-
import { Card, Modal } from "react-bootstrap";
2+
import { Card, Modal, Stack } from "react-bootstrap";
33
import CopyButton from "#/CopyButton";
44
import { useSelector } from "react-redux";
55
import { getSelectedAggregatorPools } from "@/store/poolsSlice";
66

77
/**
8-
* Modal to show a list of registrations in a discord formatted code block
8+
* Modal to show a list of registrations in a markdown formatted code block
99
*
1010
* @param registrations List of registrations movements
1111
* @param onClose Callback to call when the user ask to close the modal
1212
* @param mode 'in', 'out' or 'undefined': if undefined, the modal will not show
1313
*/
14-
export default function RegistrationDiscordFormatModal({ registrations, onClose, mode }) {
15-
const allPools = useSelector((state) => getSelectedAggregatorPools(state));
14+
export default function RegistrationMarkdownFormatModal({ registrations, onClose, mode }) {
15+
const aggregatorPools = useSelector((state) => getSelectedAggregatorPools(state));
1616
const [textToCopy, setTextToCopy] = useState(undefined);
17+
const variant = mode === "out" ? "danger" : "success";
1718

1819
useEffect(() => {
1920
if (mode === undefined) {
@@ -31,7 +32,8 @@ export default function RegistrationDiscordFormatModal({ registrations, onClose,
3132
for (const signer of signers
3233
.map((s) => ({
3334
party_id: s.party_id,
34-
pool_ticker: allPools?.find((p) => p.party_id === s.party_id)?.pool_ticker ?? "",
35+
pool_ticker:
36+
aggregatorPools?.pools?.find((p) => p.party_id === s.party_id)?.pool_ticker ?? "",
3537
}))
3638
.sort(compareSigners)) {
3739
text += `* ${signer.party_id}`;
@@ -45,7 +47,7 @@ export default function RegistrationDiscordFormatModal({ registrations, onClose,
4547
}
4648

4749
setTextToCopy(text);
48-
}, [registrations, mode, allPools]);
50+
}, [registrations, mode, aggregatorPools]);
4951

5052
function compareSigners(left, right) {
5153
// Sort by pool_ticker then party_id
@@ -68,15 +70,15 @@ export default function RegistrationDiscordFormatModal({ registrations, onClose,
6870
centered>
6971
<Modal.Header closeButton>
7072
<Modal.Title>
71-
<i className="bi bi-discord"></i> Discord formatted table of{" "}
72-
{mode === "out" ? "missing" : "new"} registrations
73+
<i className={`bi bi-markdown text-${variant}`}></i> Markdown formatted message of{" "}
74+
{mode === "out" ? "de-registered" : "newly registered"} signers
7375
</Modal.Title>
7476
</Modal.Header>
7577
<Modal.Body>
7678
{registrations !== undefined && (
77-
<Card bg="light" border={mode === "out" ? "danger" : "success"}>
79+
<Card bg="light" border={variant}>
7880
<Card.Body>
79-
<pre>
81+
<pre className="mb-0">
8082
<code>{textToCopy}</code>
8183
</pre>
8284
</Card.Body>

‎mithril-explorer/src/store/poolsSlice.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,7 @@ export const getPoolForSelectedAggregator = createSelector(
7474
export const getSelectedAggregatorPools = createSelector(
7575
[(state) => state.settings.selectedAggregator, (state) => state.pools],
7676
(aggregator, pools) => {
77-
const aggregatorPools = poolsForAggregator(pools, aggregator);
78-
return aggregatorPools?.pools;
77+
return poolsForAggregator(pools, aggregator);
7978
},
8079
);
8180

‎mithril-explorer/src/utils.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,11 @@ function getCExplorerUrl(network) {
8181
return url;
8282
}
8383

84+
function poolTickerCExplorerUrl(network, partyId) {
85+
const cExplorerUrl = getCExplorerUrl(network);
86+
return cExplorerUrl ? `${cExplorerUrl}/pool/${partyId}` : undefined;
87+
}
88+
8489
function formatProcessDuration(startTime) {
8590
const duration = performance.now() - startTime;
8691
const minutes = Math.floor(duration / 60000);
@@ -176,6 +181,7 @@ module.exports = {
176181
formatBytes,
177182
formatPartyId,
178183
getCExplorerUrl,
184+
poolTickerCExplorerUrl,
179185
formatProcessDuration,
180186
computeAggregatorNetworkFromUrl,
181187
fetchGenesisVerificationKey,

0 commit comments

Comments
 (0)