Add link to CExplorer for pool tickers

Author: Damien LACHAUME / PALO-IT

mithril-explorer/__tests__/PoolTicker.test.js

@@ -0,0 +1,74 @@
+import {render, screen} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import {initStore} from "./helpers";
+import {Provider} from "react-redux";
+import {poolsSlice} from "../src/store/poolsSlice";
+import PoolTicker from "../src/components/PoolTicker";
+import {getCExplorerUrlForPool} from "../src/utils";
+
+function renderPoolTickerComponent(aggregator, partyId, default_state = undefined) {
+  const store = initStore(default_state);
+  return [
+    render(
+      <Provider store={store}>
+        <PoolTicker aggregator={aggregator} partyId={partyId}/>
+      </Provider>
+    ),
+    store
+  ];
+}
+
+describe('PoolTicker', () => {
+  it('Pool ticker not on the three main network doesn\'t show link to cexplorer', () => {
+    const partyId = "pool1zmtm8yef33z2n7x4nn0kvv9xpzjuj7725p9y9m5t960g5qy51ua";
+    const poolTicker = "[MITHRIL] Mithril Signer";
+    renderPoolTickerComponent(
+        "myaggregator",
+        partyId,
+        {
+      pools: {
+        ...poolsSlice.getInitialState(),
+        list: [
+          {
+            aggregator: "myaggregator",
+            network: "devnet",
+            pools: [{
+              "party_id": partyId,
+              "pool_ticker": poolTicker,
+              "has_registered": true,
+            }],
+          }],
+      },
+    });
+
+    expect(screen.getByText(poolTicker));
+    expect(screen.queryByRole('link')).toBe(null);
+  });
+
+  it.each(["mainnet", "preprod", "preview"])
+  ('Pool ticker on %s network link to cexplorer', (network) => {
+    const partyId = "pool1zmtm8yef33z2n7x4nn0kvv9xpzjuj7725p9y9m5t960g5qy51ua";
+    const poolTicker = "[MITHRIL] Mithril Signer";
+    renderPoolTickerComponent(
+        "myaggregator",
+        partyId,
+        {
+          pools: {
+            ...poolsSlice.getInitialState(),
+            list: [
+              {
+                aggregator: "myaggregator",
+                network: network,
+                pools: [{
+                  "party_id": partyId,
+                  "pool_ticker": poolTicker,
+                  "has_registered": true,
+                }],
+              }],
+          },
+        });
+
+    expect(screen.getByText(poolTicker));
+    expect(screen.getByRole('link')).toHaveAttribute('href', getCExplorerUrlForPool(network, partyId));
+  });
+});

mithril-explorer/src/components/PoolTicker.js

@@ -1,10 +1,23 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {useSelector} from "react-redux";
 import {getPool} from "../store/poolsSlice";
+import {getCExplorerUrlForPool} from "../utils";
 
 export default function PoolTicker({aggregator, partyId, ...props}) {
-    const poolTicker = useSelector((state) => getPool(state, aggregator, partyId).pool_ticker);
+    const pool = useSelector((state) => getPool(state, aggregator, partyId));
+    const [url, setUrl] = useState(undefined);
 
-    return <>{poolTicker}</>;
-}
+    useEffect(() => {
+        if (pool?.network) {
+            setUrl(getCExplorerUrlForPool(pool.network, pool.party_id));
+        } else {
+            setUrl(undefined);
+        }
+    }, [pool.party_id, pool.network])
 
+    return (url !== undefined)
+            ? <a href={url} target="_blank" className="link-dark link-underline-light">
+            <span>{pool.pool_ticker}</span>
+    </a>
+            : <span>{pool.pool_ticker}</span>;
+}

mithril-explorer/src/utils.js

@@ -91,6 +91,27 @@ function setChartJsDefaults(chartJs) {
   chartJs.defaults.elements.bar.borderWidth = 1;
 }
 
+function getCExplorerUrlForPool(network, partyId) {
+  const urlWithoutNetwork = `cexplorer.io/pool/${partyId}`;
+  let url = undefined;
+
+  switch (network) {
+    case 'mainnet':
+      url = `https://${urlWithoutNetwork}`;
+      break;
+    case 'preprod':
+      url = `https://preprod.${urlWithoutNetwork}`;
+      break;
+    case 'preview':
+      url = `https://preview.${urlWithoutNetwork}`;
+      break;
+    default:
+      break;
+  }
+
+  return url;
+}
+
 module.exports = {
   checkUrl,
   formatStake,
@@ -99,4 +120,5 @@ module.exports = {
   formatCurrency,
   formatBytes,
   formatPartyId,
+  getCExplorerUrlForPool,
 }