feat: distinguish bootstrap peers (IPFS Stats view)

packages/concordia-app/package.json

@@ -24,7 +24,7 @@
     ]
   },
   "dependencies": {
-    "@ezerous/breeze": "~0.6.0",
+    "@ezerous/breeze": "~0.7.0",
     "@ezerous/drizzle": "~0.4.2",
     "@ezerous/eth-identity-provider": "~0.1.2",
     "@reduxjs/toolkit": "~1.4.0",

packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import {
-  Header, Image, List, Segment, Table, Transition,
+  Header, Image, Segment, Table,
 } from 'semantic-ui-react';
 
 import ipfsLogo from '../../../assets/images/ipfs_logo.svg';
@@ -11,29 +11,43 @@ import './styles.css';
 const MainLayoutIPFSStats = () => {
   const ipfsId = useSelector((state) => state.ipfs.id);
   const peerIds = useSelector((state) => state.ipfs.peers);
+  const bootstrapPeerIds = useSelector((state) => state.ipfs.bootstrapPeers);
   const peers = useMemo(() => peerIds
     .map((peerId) => (
-        <List.Item
-          key={peerId}
-          className="stat-value"
-        >
-            <CopyToClipboard text={peerId}>
-                <span>{peerId}</span>
-            </CopyToClipboard>
-        </List.Item>
+        <Table.Row className="stat-value">
+            <Table.Cell>
+                <CopyToClipboard text={peerId}>
+                    <span>{peerId}</span>
+                </CopyToClipboard>
+            </Table.Cell>
+        </Table.Row>
 
     )), [peerIds]);
 
+  const bootstrapPeers = useMemo(() => bootstrapPeerIds
+    .map((bootstrapPeerId) => (
+        <Table.Row className="stat-value">
+            <Table.Cell>
+                <CopyToClipboard text={bootstrapPeerId}>
+                    <span>{bootstrapPeerId}</span>
+                </CopyToClipboard>
+            </Table.Cell>
+        </Table.Row>
+
+    )), [bootstrapPeerIds]);
+
   return (
-      <Segment>
+      <Segment padded>
           <Header textAlign="center">
               <Image src={ipfsLogo} size="tiny" />
               IPFS Stats
           </Header>
-          <Table definition>
+          <Table compact textAlign="center" columns={1}>
               <Table.Body>
                   <Table.Row>
-                      <Table.Cell className="stat-key" textAlign="center">ID</Table.Cell>
+                      <Table.Cell className="stat-key">Peer ID</Table.Cell>
+                  </Table.Row>
+                  <Table.Row>
                       <Table.Cell
                         className="stat-value"
                       >
@@ -43,16 +57,25 @@ const MainLayoutIPFSStats = () => {
                       </Table.Cell>
                   </Table.Row>
                   <Table.Row>
-                      <Table.Cell className="stat-key" textAlign="center">Peers</Table.Cell>
-                      <Table.Cell>
-                          <Transition.Group
-                            as={List}
-                            duration={1000}
-                          >
-                              {peers}
-                          </Transition.Group>
-                      </Table.Cell>
+                      <Table.Cell className="stat-key">Peers</Table.Cell>
+                  </Table.Row>
+                  {peers.length === 0
+                    ? (
+                        <Table.Row>
+                            <Table.Cell>-</Table.Cell>
+                        </Table.Row>
+                    ) : null}
+                  {peers}
+                  <Table.Row>
+                      <Table.Cell className="stat-key">Bootstrap Peers</Table.Cell>
                   </Table.Row>
+                  {bootstrapPeers.length === 0
+                    ? (
+                        <Table.Row>
+                            <Table.Cell>-</Table.Cell>
+                        </Table.Row>
+                    ) : null}
+                  {bootstrapPeers}
               </Table.Body>
           </Table>
       </Segment>

packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css

@@ -1,9 +1,10 @@
 .stat-key {
-    width: 13%
+    background: rgba(0,0,0,.1);
+    font-weight: 700;
 }
 
 .stat-value {
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     cursor: pointer;
 }
 

yarn.lock

@@ -1499,10 +1499,10 @@
     "@ethersproject/properties" "^5.0.7"
     "@ethersproject/strings" "^5.0.8"
 
-"@ezerous/breeze@~0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@ezerous/breeze/-/breeze-0.6.0.tgz#95c602da137c098f8f6984b4ba85ad99d495ec55"
-  integrity sha512-8M7hg2nYvWjJcL4h3dNHglTyzx/9GbnS2HZ+3deFV1+WUdO0wIjWgssQi383ys/xygjNlNSo1nQAkUwy9cKM1g==
+"@ezerous/breeze@~0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@ezerous/breeze/-/breeze-0.7.0.tgz#b275dc0e92040e9fa7171d945562b716e133b4d7"
+  integrity sha512-CMgrQ4b/hdl3OVGXiNpdoW3T8D1K+OAnOP3KlAtxCYW5uQZzp41xUq2MxpdVi5nj8YH6MZa8ditmSDEE7xnFFA==
   dependencies:
     deepmerge "~4.2.2"
     ipfs "~0.54.2"