-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #77 from pshenmic/feat/frontend-i2
Redesign + Identities
- Loading branch information
Showing
60 changed files
with
1,787 additions
and
966 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| REACT_APP_API_BASE_URL=http://127.0.0.1:3005 | ||
| REACT_APP_API_BASE_URL=http://127.0.0.1:3005 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,21 @@ | ||
| import {Outlet, Link} from "react-router-dom"; | ||
| import "./root.css"; | ||
| import React, {useState} from 'react'; | ||
| import * as Api from '../util/Api' | ||
| import {useNavigate} from "react-router-dom"; | ||
| import ModalWindow from "./ModalWindow"; | ||
| import Navbar from "../components/navbar/Navbar"; | ||
| import theme from "../styles/theme"; | ||
| import "../styles/theme.scss"; | ||
| import { ChakraProvider} from '@chakra-ui/react' | ||
|
|
||
| export default function RootComponent() { | ||
| let navigate = useNavigate(); | ||
|
|
||
| const [showModal, setShowModal] = useState(false) | ||
| const [modalText, setModalText] = useState("false") | ||
|
|
||
| const showModalWindow = (text, timeout) => { | ||
| setShowModal(true) | ||
| setModalText(text) | ||
|
|
||
| if (timeout) { | ||
| setTimeout(() => { | ||
| setShowModal(false) | ||
| setModalText("") | ||
| }, timeout) | ||
| } | ||
| } | ||
|
|
||
| const handleKeyPress = async (event) => { | ||
| if (event.key === 'Enter') { | ||
| try { | ||
| const searchResult = await Api.search(searchQuery) | ||
|
|
||
| if (searchResult?.block) { | ||
| // redirect to blocks | ||
| console.log(searchResult?.block.header.hash) | ||
| setSearchQuery("") | ||
| return navigate(`/block/${searchResult?.block.header.hash}`) | ||
| } | ||
|
|
||
| if (searchResult?.transaction) { | ||
| setSearchQuery("") | ||
| return navigate(`/transaction/${searchResult?.transaction.hash}`) | ||
| } | ||
|
|
||
| if (searchResult?.dataContract) { | ||
| setSearchQuery("") | ||
| return navigate(`/dataContract/${searchResult?.dataContract.identifier}`) | ||
| } | ||
|
|
||
| if (searchResult?.document) { | ||
| setSearchQuery("") | ||
| return navigate(`/document/${searchResult?.document.identifier}`) | ||
| } | ||
|
|
||
| showModalWindow('Not found', 6000) | ||
| } catch (e) { | ||
| showModalWindow('Not found', 6000) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const handleSearchInput = (event) => { | ||
| setSearchQuery(event.target.value) | ||
| } | ||
|
|
||
| const [searchQuery, setSearchQuery] = useState(""); | ||
| export default function RootComponent() { | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="topnav"> | ||
| <Link to="/">Home</Link> | ||
| <Link to="/blocks">Blocks</Link> | ||
| <Link to="/dataContracts">Data Contracts</Link> | ||
| <input value={searchQuery} type="text" placeholder="Search..." onChange={handleSearchInput} | ||
| onKeyPress={handleKeyPress}/> | ||
| <ModalWindow open={showModal} text={modalText} setShowModal={setShowModal}/> | ||
| </div> | ||
| <ChakraProvider theme={theme}> | ||
|
|
||
| <Navbar/> | ||
|
|
||
| <Outlet/> | ||
| </div> | ||
|
|
||
| </ChakraProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import {Link} from "react-router-dom"; | ||
| import BlocksListItem from './BlocksListItem' | ||
| import './BlocksList.scss' | ||
|
|
||
|
|
||
| function BlocksList ({blocks = [], columnsCount = 1, size = 'l'}) { | ||
| return( | ||
| <div | ||
| className={'BlocksList'} | ||
| style={{ | ||
| columnCount: blocks.length > 1 ? columnsCount : 1, | ||
| }} | ||
| > | ||
| {blocks.map((block) => | ||
| <BlocksListItem | ||
| key={block.hash} | ||
| block={block} | ||
| size={size} | ||
| /> | ||
| )} | ||
|
|
||
| {blocks.length === 0 && | ||
| <div className={'documents_list__empty_message'}>There are no documents created yet.</div> | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default BlocksList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .BlocksList { | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import {Link} from 'react-router-dom' | ||
| import './BlocksListItem.scss' | ||
|
|
||
|
|
||
| function BlocksListItem ({ block }) { | ||
| const {header, txs} = block | ||
| const {hash, height, timestamp} = header | ||
|
|
||
| return( | ||
| <Link | ||
| to={`/block/${hash}`} | ||
| className={'BlocksListItem'} | ||
| > | ||
| {(typeof height === 'number' && | ||
| <span className={'BlocksListItem__Height'}>{height}</span> | ||
| )} | ||
|
|
||
| {typeof timestamp === 'string' && | ||
| <span className={'BlocksListItem__Timestamp'}> | ||
| {new Date(timestamp).toLocaleString()} | ||
| </span> | ||
| } | ||
|
|
||
| {typeof hash === 'string' && | ||
| <span className={'BlocksListItem__Hash'}> | ||
| {hash} | ||
| </span> | ||
| } | ||
|
|
||
| {(typeof txs.length === 'number') && | ||
| <span className={'BlocksListItem__Txs'}> | ||
| ({txs.length} txs) | ||
| </span> | ||
| } | ||
|
|
||
| </Link> | ||
| ) | ||
| } | ||
|
|
||
| export default BlocksListItem; |
66 changes: 66 additions & 0 deletions
66
packages/frontend/src/components/blocks/BlocksListItem.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| @use '../../styles/mixins.scss'; | ||
|
|
||
| .BlocksListItem { | ||
| @include mixins.def_list_item; | ||
|
|
||
| &:last-child { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| &__Hash { | ||
| color: var(--chakra-colors-gray-200); | ||
| flex-grow: 1; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| &__Height { | ||
| font-weight: bold; | ||
| margin-right: 8px; | ||
| word-break: keep-all; | ||
| } | ||
|
|
||
| &__Timestamp { | ||
| margin-right: 16px; | ||
| text-wrap: nowrap; | ||
| } | ||
|
|
||
| &__Txs { | ||
| margin-left: 12px; | ||
| text-wrap: nowrap; | ||
| } | ||
|
|
||
|
|
||
| @media screen and (max-width: 620px) { | ||
| flex-wrap: wrap; | ||
|
|
||
| &__Height { | ||
| order: 1; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| &__Txs { | ||
| order: 2; | ||
| margin-left: 0; | ||
| margin-right: 6px; | ||
| } | ||
|
|
||
| &__Timestamp { | ||
| order: 3; | ||
| } | ||
|
|
||
| &__Hash { | ||
| order: 4; | ||
| flex-grow: unset; | ||
| margin-top: 2px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 400px) { | ||
| &__Timestamp { | ||
| text-wrap: wrap; | ||
| } | ||
| } | ||
|
|
||
| } |
27 changes: 27 additions & 0 deletions
27
packages/frontend/src/components/dataContracts/DataContractsList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import DataContractsListItem from './DataContractsListItem' | ||
| import './DataContractsList.scss' | ||
|
|
||
|
|
||
| function DataContractsList ({dataContracts = [], size = 'l'}) { | ||
| return ( | ||
|
|
||
| <div className={'DataContractsList ' + 'DataContractsList--Size' + size.toUpperCase()}> | ||
|
|
||
| {dataContracts.map((dataContract, key) => | ||
| <DataContractsListItem | ||
| key={key} | ||
| size={size} | ||
| dataContract={dataContract} | ||
| /> | ||
| )} | ||
|
|
||
| {dataContracts.length === 0 && | ||
| <div className={'DataContractsList__EmptyMessage'}>There are no data contracts created yet.</div> | ||
| } | ||
|
|
||
| </div> | ||
|
|
||
| ); | ||
| } | ||
|
|
||
| export default DataContractsList; |
3 changes: 3 additions & 0 deletions
3
packages/frontend/src/components/dataContracts/DataContractsList.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .DataContractsList { | ||
|
|
||
| } |
26 changes: 26 additions & 0 deletions
26
packages/frontend/src/components/dataContracts/DataContractsListItem.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import {Link} from 'react-router-dom'; | ||
| import './DataContractsListItem.scss' | ||
|
|
||
|
|
||
| function DataContractsListItem ({ dataContract }) { | ||
| const {identifier, timestamp} = dataContract | ||
|
|
||
| return ( | ||
| <Link | ||
| to={`/dataContract/${identifier}`} | ||
| className={'DataContractsListItem'} | ||
| > | ||
| <div className={'DataContractsListItem__Identifier'}> | ||
| {identifier} | ||
| </div> | ||
|
|
||
| {(typeof timestamp === 'string') && | ||
| <div className={'DataContractsListItem__Timestamp'}> | ||
| {new Date(timestamp).toLocaleString()} | ||
| </div> | ||
| } | ||
| </Link> | ||
| ); | ||
| } | ||
|
|
||
| export default DataContractsListItem; |
40 changes: 40 additions & 0 deletions
40
packages/frontend/src/components/dataContracts/DataContractsListItem.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| @use '../../styles/mixins.scss'; | ||
| @import '../../styles/variables.scss'; | ||
|
|
||
| .DataContractsListItem { | ||
| @include mixins.def_list_item; | ||
|
|
||
| width: 100%; | ||
| justify-content: space-between; | ||
|
|
||
| &__Identifier { | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| line-height: 24px; | ||
| white-space: nowrap; | ||
| margin-right: 16px; | ||
| } | ||
|
|
||
| &__Timestamp { | ||
| text-wrap: nowrap; | ||
| } | ||
|
|
||
| .DataContractsList--SizeS &, | ||
| .DataContractsList--SizeM & { | ||
| &__Identifier { | ||
| margin-right: 16px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: $breakpoint-sm) { | ||
| flex-wrap: wrap; | ||
|
|
||
| &__Identifier { | ||
| width: 100%; | ||
| } | ||
|
|
||
| &__Timestamp { | ||
| text-wrap: wrap; | ||
| } | ||
| } | ||
| } |
25 changes: 25 additions & 0 deletions
25
packages/frontend/src/components/documents/DocumentsList.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import DocumentsListItem from "./DocumentsListItem"; | ||
| import './DocumentsList.scss' | ||
|
|
||
|
|
||
| export default function DocumentsList({documents = [], size='l'}) { | ||
| return ( | ||
|
|
||
| <div className={'DocumentsList ' + 'DocumentsList--Size' + size.toUpperCase()}> | ||
|
|
||
| {documents.map((document, key) => | ||
| <DocumentsListItem | ||
| key={key} | ||
| size={size} | ||
| document={document} | ||
| /> | ||
| )} | ||
|
|
||
| {documents.length === 0 && | ||
| <div className={'DocumentsList__EmptyMessage'}>There are no documents created yet.</div> | ||
| } | ||
|
|
||
| </div> | ||
|
|
||
| ); | ||
| } |
Oops, something went wrong.