From 3e6346ed0bf7efc5701d55a4fe7bc05ca643baf4 Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Thu, 11 Feb 2021 19:32:06 +0200
Subject: [PATCH] feat: distinguish bootstrap peers (IPFS Stats view)

---
 packages/concordia-app/package.json           |  2 +-
 .../MainLayout/MainLayoutIPFSStats/index.jsx  | 65 +++++++++++++------
 .../MainLayout/MainLayoutIPFSStats/styles.css |  5 +-
 yarn.lock                                     |  8 +--
 4 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json
index 0f6999e..ec3fa75 100644
--- a/packages/concordia-app/package.json
+++ b/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",
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx
index 00b6865..2433cb0 100644
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx
+++ b/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>
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css
index f9426c1..b9f723c 100644
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css
+++ b/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;
 }
 
diff --git a/yarn.lock b/yarn.lock
index a4c2b97..61f3509 100644
--- a/yarn.lock
+++ b/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"