From fda31302dc35b9f04206ff25f30d0b84c0cc9af2 Mon Sep 17 00:00:00 2001 From: Ezerous Date: Tue, 16 Feb 2021 15:44:34 +0200 Subject: [PATCH 1/3] feat: add Ethereum status --- packages/concordia-app/package.json | 2 +- .../components/ClearDatabasesModal/index.jsx | 2 +- .../src/components/Status/StatusKeyRow.jsx | 13 +++ .../src/components/Status/StatusSegment.jsx | 24 ++++++ .../src/components/Status/StatusValueRow.jsx | 22 +++++ .../Status}/styles.css | 0 .../MainLayoutEthereumStatus/index.jsx | 29 +++++++ .../MainLayout/MainLayoutIPFSStatus/index.jsx | 82 ++++--------------- .../src/layouts/MainLayout/index.jsx | 2 + 9 files changed, 110 insertions(+), 66 deletions(-) create mode 100644 packages/concordia-app/src/components/Status/StatusKeyRow.jsx create mode 100644 packages/concordia-app/src/components/Status/StatusSegment.jsx create mode 100644 packages/concordia-app/src/components/Status/StatusValueRow.jsx rename packages/concordia-app/src/{layouts/MainLayout/MainLayoutIPFSStatus => components/Status}/styles.css (100%) create mode 100644 packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json index ec3fa75..db994d8 100644 --- a/packages/concordia-app/package.json +++ b/packages/concordia-app/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@ezerous/breeze": "~0.7.0", - "@ezerous/drizzle": "~0.4.2", + "@ezerous/drizzle": "~0.4.3", "@ezerous/eth-identity-provider": "~0.1.2", "@reduxjs/toolkit": "~1.4.0", "@welldone-software/why-did-you-render": "~6.0.5", diff --git a/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx b/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx index fc5db8a..081c4e6 100644 --- a/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx +++ b/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx @@ -23,7 +23,7 @@ const ClearDatabasesModal = (props) => { useEffect(() => { if (user.hasSignedUp && confirmationInput === user.username) { setUserConfirmed(true); - } else if (!user.hasSignedUp && confirmationInput === 'Concordia') { + } else if (!user.hasSignedUp && confirmationInput.toLowerCase() === 'concordia') { setUserConfirmed(true); } else { setUserConfirmed(false); diff --git a/packages/concordia-app/src/components/Status/StatusKeyRow.jsx b/packages/concordia-app/src/components/Status/StatusKeyRow.jsx new file mode 100644 index 0000000..c3dfda4 --- /dev/null +++ b/packages/concordia-app/src/components/Status/StatusKeyRow.jsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Table } from 'semantic-ui-react'; + +const StatusKeyRow = (props) => { + const { value } = props; + return ( + + {value} + + ); +}; + +export default StatusKeyRow; diff --git a/packages/concordia-app/src/components/Status/StatusSegment.jsx b/packages/concordia-app/src/components/Status/StatusSegment.jsx new file mode 100644 index 0000000..7c95004 --- /dev/null +++ b/packages/concordia-app/src/components/Status/StatusSegment.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { + Header, Image, Segment, Table, +} from 'semantic-ui-react'; +import './styles.css'; + +const StatusKeyRow = (props) => { + const { headerTitle, headerImage, children } = props; + return ( + +
+ + {headerTitle} +
+ + + {children} + +
+ + ); +}; + +export default StatusKeyRow; diff --git a/packages/concordia-app/src/components/Status/StatusValueRow.jsx b/packages/concordia-app/src/components/Status/StatusValueRow.jsx new file mode 100644 index 0000000..be09d0a --- /dev/null +++ b/packages/concordia-app/src/components/Status/StatusValueRow.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Table } from 'semantic-ui-react'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; + +const StatusValueRow = (props) => { + const { value } = props; + return (value) ? ( + + + + {value} + + + + ) : ( + + - + + ); +}; + +export default StatusValueRow; diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/styles.css b/packages/concordia-app/src/components/Status/styles.css similarity index 100% rename from packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/styles.css rename to packages/concordia-app/src/components/Status/styles.css diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx new file mode 100644 index 0000000..fa54c81 --- /dev/null +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutEthereumStatus/index.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import StatusSegment from '../../../components/Status/StatusSegment'; +import StatusKeyRow from '../../../components/Status/StatusKeyRow'; +import StatusValueRow from '../../../components/Status/StatusValueRow'; + +import ethereumLogo from '../../../assets/images/ethereum_logo.svg'; + +const MainLayoutEthereumStatus = () => { + const userAddress = useSelector((state) => state.user.address); + const blockNumber = useSelector((state) => state.currentBlock.number); + const blockHash = useSelector((state) => state.currentBlock.hash); + + return ( + + + + + + + + + ); +}; + +export default MainLayoutEthereumStatus; diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx index 44f460e..2348982 100644 --- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx @@ -1,12 +1,9 @@ import React, { useMemo } from 'react'; import { useSelector } from 'react-redux'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; -import { - Header, Image, Segment, Table, -} from 'semantic-ui-react'; - +import StatusSegment from '../../../components/Status/StatusSegment'; +import StatusKeyRow from '../../../components/Status/StatusKeyRow'; +import StatusValueRow from '../../../components/Status/StatusValueRow'; import ipfsLogo from '../../../assets/images/ipfs_logo.svg'; -import './styles.css'; const MainLayoutIPFSStatus = () => { const ipfsId = useSelector((state) => state.ipfs.id); @@ -14,71 +11,28 @@ const MainLayoutIPFSStatus = () => { const bootstrapPeerIds = useSelector((state) => state.ipfs.bootstrapPeers); const peers = useMemo(() => peerIds .map((peerId) => ( - - - - {peerId} - - - - + )), [peerIds]); const bootstrapPeers = useMemo(() => bootstrapPeerIds .map((bootstrapPeerId) => ( - - - - {bootstrapPeerId} - - - - + )), [bootstrapPeerIds]); return ( - -
- - IPFS Status -
- - - - Peer ID - - - - - {ipfsId} - - - - - Peers - - {peers.length === 0 - ? ( - - - - - ) : null} - {peers} - - Bootstrap Peers - - {bootstrapPeers.length === 0 - ? ( - - - - - ) : null} - {bootstrapPeers} - -
- + + + + + {peers.length === 0 ? () : null} + {peers} + + {bootstrapPeers.length === 0 ? () : null} + {bootstrapPeers} + ); }; diff --git a/packages/concordia-app/src/layouts/MainLayout/index.jsx b/packages/concordia-app/src/layouts/MainLayout/index.jsx index 0014393..ade0e34 100644 --- a/packages/concordia-app/src/layouts/MainLayout/index.jsx +++ b/packages/concordia-app/src/layouts/MainLayout/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Grid } from 'semantic-ui-react'; import MainLayoutMenu from './MainLayoutMenu'; +import MainLayoutEthereumStatus from './MainLayoutEthereumStatus'; import MainLayoutIPFSStatus from './MainLayoutIPFSStatus'; import './styles.css'; @@ -17,6 +18,7 @@ const MainLayout = (props) => { {children} + From 690aed0a8c5c9cf9b2b52e5cef05c13494480dae Mon Sep 17 00:00:00 2001 From: Ezerous Date: Tue, 16 Feb 2021 20:32:11 +0200 Subject: [PATCH 2/3] chore: up yarn.lock --- yarn.lock | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4dc7c55..0489eba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1542,10 +1542,10 @@ orbit-db-identity-provider "~0.3.1" redux-saga "~1.1.3" -"@ezerous/drizzle@~0.4.2": - version "0.4.2" - resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.4.2.tgz#2e575d0709cc29c77b984d96562b8749d8f477c9" - integrity sha512-oTJ77+yGdgg2KPIeIvRczFnPrBg8aXdNisHfM0ztjd7T/Ui8+Nw1HNhMVaw2xTuR53pio3SD8FBU1JrEUKOABQ== +"@ezerous/drizzle@~0.4.3": + version "0.4.3" + resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.4.3.tgz#ee28dfe2cf7d8773087e190281ba5f6629cd1b48" + integrity sha512-PqjqcQfYfy6YyLT7gtVo43jEJXDxxot1chIUFqJ5belcfFWBsa6pzPhJP52DXfyOQsTkx4Q0QF5l6N/p0asrdg== dependencies: deepmerge "~4.2.2" is-plain-object "~5.0.0" @@ -17183,9 +17183,6 @@ snake-case@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg== - dependencies: - dot-case "^3.0.4" - tslib "^2.0.3" snapdragon-node@^2.0.1: version "2.1.1" From 8710c83e57b37dc0fe5e31dfa84696636cf78b5a Mon Sep 17 00:00:00 2001 From: Ezerous Date: Wed, 17 Feb 2021 15:39:14 +0200 Subject: [PATCH 3/3] feat: add particles to main layout --- packages/concordia-app/src/assets/particles.js | 6 +++--- .../components/InitializationScreen/CustomLoader/style.css | 2 +- .../src/layouts/MainLayout/MainLayoutMenu/styles.css | 3 +++ packages/concordia-app/src/layouts/MainLayout/index.jsx | 3 +++ .../concordia-app/src/layouts/RegisterLayout/styles.css | 3 +-- 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/concordia-app/src/assets/particles.js b/packages/concordia-app/src/assets/particles.js index 68a19b7..2331c32 100644 --- a/packages/concordia-app/src/assets/particles.js +++ b/packages/concordia-app/src/assets/particles.js @@ -1,7 +1,7 @@ const particlesOptions = { particles: { number: { - value: 90, + value: 120, density: { enable: true, value_area: 1500, @@ -9,14 +9,14 @@ const particlesOptions = { }, line_linked: { enable: true, - opacity: 0.04, + opacity: 0.06, }, move: { direction: 'none', speed: 0.12, }, size: { - value: 1.5, + value: 1.6, }, opacity: { anim: { diff --git a/packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css b/packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css index 6ea1586..6a456b2 100644 --- a/packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css +++ b/packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css @@ -1,5 +1,5 @@ #loading-screen { - padding-top: 12em; + padding-top: 14em; text-align: center; font-size: large; height: 100%; diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css index 1ced5ec..e223bff 100644 --- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css @@ -7,4 +7,7 @@ border-radius: 0; margin-top: 0; margin-bottom: 4rem; + z-index: 1; + position: relative; + border-bottom: solid rgba(255, 255, 255,0.2) 1px; } diff --git a/packages/concordia-app/src/layouts/MainLayout/index.jsx b/packages/concordia-app/src/layouts/MainLayout/index.jsx index ade0e34..23d96f8 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 Particles from 'react-particles-js'; +import particlesOptions from '../../assets/particles'; import MainLayoutMenu from './MainLayoutMenu'; import MainLayoutEthereumStatus from './MainLayoutEthereumStatus'; import MainLayoutIPFSStatus from './MainLayoutIPFSStatus'; @@ -11,6 +13,7 @@ const MainLayout = (props) => { return (
+ diff --git a/packages/concordia-app/src/layouts/RegisterLayout/styles.css b/packages/concordia-app/src/layouts/RegisterLayout/styles.css index 41ee966..9892747 100644 --- a/packages/concordia-app/src/layouts/RegisterLayout/styles.css +++ b/packages/concordia-app/src/layouts/RegisterLayout/styles.css @@ -3,6 +3,5 @@ right: 0; bottom: 0; left: 0; - z-index: -1; - background: rgba(0, 0, 0, 0) linear-gradient(45deg, rgb(37, 45, 63) 0%, rgb(11,37,64) 100%) repeat scroll 0 0; + background: var(--secondary-color); }