From 953c361ecbfd09ccd680ef99176b2e5156d3c5cf Mon Sep 17 00:00:00 2001 From: Ezerous Date: Thu, 11 Feb 2021 13:08:28 +0200 Subject: [PATCH] feat: add IPFS Stats view --- packages/concordia-app/package.json | 1 + .../TopicList/TopicListRow/styles.css | 4 +- .../MainLayout/MainLayoutIPFSStats/index.jsx | 62 +++++++++++++++++++ .../MainLayout/MainLayoutIPFSStats/styles.css | 12 ++++ .../src/layouts/MainLayout/index.jsx | 13 +++- .../src/layouts/MainLayout/styles.css | 5 ++ .../concordia-app/src/views/About/index.jsx | 28 +++++---- .../concordia-app/src/views/About/styles.css | 6 +- .../src/views/Home/Board/styles.css | 1 + yarn.lock | 22 ++++++- 10 files changed, 136 insertions(+), 18 deletions(-) create mode 100644 packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx create mode 100644 packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json index a9677a8..0f6999e 100644 --- a/packages/concordia-app/package.json +++ b/packages/concordia-app/package.json @@ -38,6 +38,7 @@ "prop-types": "~15.7.2", "react": "~16.13.1", "react-avatar": "~3.9.7", + "react-copy-to-clipboard": "^5.0.3", "react-dom": "~16.13.1", "react-i18next": "^11.7.3", "react-markdown": "^5.0.3", diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css index 2a7dda0..6b19c2a 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css +++ b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css @@ -26,7 +26,7 @@ .topic-row-avatar { margin: auto; - padding-left: 1rem !important; + padding-left: 1.4rem !important; padding-right: 0 !important; font-size: 2rem; color: red; @@ -37,7 +37,7 @@ } .topic-row-content { - padding-left: 2rem !important; + padding-left: 3rem !important; } .topic-row-subject { diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx new file mode 100644 index 0000000..00b6865 --- /dev/null +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx @@ -0,0 +1,62 @@ +import React, { useMemo } from 'react'; +import { useSelector } from 'react-redux'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { + Header, Image, List, Segment, Table, Transition, +} from 'semantic-ui-react'; + +import ipfsLogo from '../../../assets/images/ipfs_logo.svg'; +import './styles.css'; + +const MainLayoutIPFSStats = () => { + const ipfsId = useSelector((state) => state.ipfs.id); + const peerIds = useSelector((state) => state.ipfs.peers); + const peers = useMemo(() => peerIds + .map((peerId) => ( + + + {peerId} + + + + )), [peerIds]); + + return ( + +
+ + IPFS Stats +
+ + + + ID + + + {ipfsId} + + + + + Peers + + + {peers} + + + + +
+ + ); +}; + +export default MainLayoutIPFSStats; diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css new file mode 100644 index 0000000..f9426c1 --- /dev/null +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/styles.css @@ -0,0 +1,12 @@ +.stat-key { + width: 13% +} + +.stat-value { + font-size: 0.9rem; + cursor: pointer; +} + +.stat-value:hover { + color: grey; +} diff --git a/packages/concordia-app/src/layouts/MainLayout/index.jsx b/packages/concordia-app/src/layouts/MainLayout/index.jsx index 597ca73..f9a5f5b 100644 --- a/packages/concordia-app/src/layouts/MainLayout/index.jsx +++ b/packages/concordia-app/src/layouts/MainLayout/index.jsx @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Grid } from 'semantic-ui-react'; import MainLayoutMenu from './MainLayoutMenu'; +import MainLayoutIPFSStats from './MainLayoutIPFSStats'; import './styles.css'; const MainLayout = (props) => { @@ -9,7 +11,16 @@ const MainLayout = (props) => { return (
- {children} + + + + {children} + + + + + +
); }; diff --git a/packages/concordia-app/src/layouts/MainLayout/styles.css b/packages/concordia-app/src/layouts/MainLayout/styles.css index 23c7a72..494a844 100644 --- a/packages/concordia-app/src/layouts/MainLayout/styles.css +++ b/packages/concordia-app/src/layouts/MainLayout/styles.css @@ -4,3 +4,8 @@ background-color: #E6E6E6; padding-bottom: 4rem; } + +#main-layout-grid{ + margin-right: 0; + margin-left: 0; +} diff --git a/packages/concordia-app/src/views/About/index.jsx b/packages/concordia-app/src/views/About/index.jsx index 2698047..52ed3c9 100644 --- a/packages/concordia-app/src/views/About/index.jsx +++ b/packages/concordia-app/src/views/About/index.jsx @@ -2,7 +2,7 @@ import React, { memo, useEffect, useState, } from 'react'; import ReactMarkdown from 'react-markdown'; -import { Container, Image } from 'semantic-ui-react'; +import { Container, Image, Segment } from 'semantic-ui-react'; import AboutMd from '../../assets/About.md'; import appLogo from '../../assets/images/app_logo_circle.svg'; @@ -26,18 +26,20 @@ const About = () => { }, []); return ( - -
- - {`v${process.env.REACT_APP_VERSION}`} -
- + + +
+ + {`v${process.env.REACT_APP_VERSION}`} +
+ + ); }; diff --git a/packages/concordia-app/src/views/About/styles.css b/packages/concordia-app/src/views/About/styles.css index 855a143..4509c39 100644 --- a/packages/concordia-app/src/views/About/styles.css +++ b/packages/concordia-app/src/views/About/styles.css @@ -1,3 +1,7 @@ -#app-logo{ +#about-segment{ + padding: 3rem; +} + +#about-app-logo{ margin-bottom: 1rem; } diff --git a/packages/concordia-app/src/views/Home/Board/styles.css b/packages/concordia-app/src/views/Home/Board/styles.css index 80fe97e..e2d23b0 100644 --- a/packages/concordia-app/src/views/Home/Board/styles.css +++ b/packages/concordia-app/src/views/Home/Board/styles.css @@ -5,6 +5,7 @@ #new-topic-button{ float:right; + margin-top: 1px; margin-bottom: 2em; margin-right: 0; } diff --git a/yarn.lock b/yarn.lock index d2baa45..a4c2b97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4877,6 +4877,13 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= +copy-to-clipboard@^3: + version "3.3.1" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" + integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== + dependencies: + toggle-selection "^1.0.6" + core-js-compat@^3.6.2, core-js-compat@^3.8.0: version "3.8.3" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.3.tgz#9123fb6b9cad30f0651332dc77deba48ef9b0b3f" @@ -14844,7 +14851,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: +prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@~15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -15140,6 +15147,14 @@ react-avatar@~3.9.7: is-retina "^1.0.3" md5 "^2.0.0" +react-copy-to-clipboard@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz#2a0623b1115a1d8c84144e9434d3342b5af41ab4" + integrity sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw== + dependencies: + copy-to-clipboard "^3" + prop-types "^15.5.8" + react-dev-utils@^10.2.1: version "10.2.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19" @@ -17381,6 +17396,11 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI= + toidentifier@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"