From 13fd96fa463415b57a5569ab45badcee469e6d03 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 13 Nov 2024 15:56:01 +0300 Subject: [PATCH 01/27] Initializing transaction page update --- .../src/app/transaction/[hash]/Transaction.js | 162 +++++++++++++++++- .../frontend/src/components/data/DateBlock.js | 5 +- 2 files changed, 157 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/Transaction.js b/packages/frontend/src/app/transaction/[hash]/Transaction.js index b1c8c7327..c7f975e3b 100644 --- a/packages/frontend/src/app/transaction/[hash]/Transaction.js +++ b/packages/frontend/src/app/transaction/[hash]/Transaction.js @@ -1,23 +1,26 @@ 'use client' +import './Transaction.scss' import * as Api from '../../../util/Api' import { useState, useEffect, useCallback } from 'react' import { getTransitionTypeStringById, fetchHandlerSuccess, fetchHandlerError } from '../../../util' -import { Credits } from '../../../components/data' +import { Credits, Endpoint, InfoLine, IpAddress, DateBlock, Identifier } from '../../../components/data' import { LoadingLine, LoadingList } from '../../../components/loading' import { ErrorMessageBlock } from '../../../components/Errors' import TransactionData from './TransactionData' import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' import { RateTooltip } from '../../../components/ui/Tooltips' -import './Transaction.scss' - +import { ValueContainer, PageDataContainer, InfoContainer } from '../../../components/ui/containers' +import { InfoCard, ValueCard } from '../../../components/cards' +import { HorisontalSeparator } from '../../../components/ui/separators' import { Container, TableContainer, Table, Thead, Tbody, Tr, Th, Td, Heading, Flex, - Code + Code, Badge } from '@chakra-ui/react' +import TypeBadge from '../../../components/transactions/TypeBadge' function Transaction ({ hash }) { const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) @@ -25,6 +28,8 @@ function Transaction ({ hash }) { const [decodedST, setDecodedST] = useState(null) const tdTitleWidth = 250 + console.log('transaction', transaction) + const decodeTx = useCallback((tx) => { Api.decodeTx(tx) .then((stateTransition) => { @@ -51,12 +56,153 @@ function Transaction ({ hash }) { useEffect(fetchData, [hash, decodeTx]) const StatusIcon = transaction.data?.status === 'SUCCESS' - ? - : + ? + : + + // temp + if (!transaction.data?.error) transaction.data.error = 'Document Ciifrnm8gjhAcRhySwtLhfwguGZ7cetssj3ETMSMX6j3 has invalid revision Some(1). The desired revision is 1' + if (!transaction.data?.owner) transaction.data.owner = 'OWnErBelIBErDa1F8NJ16BV7MBgMK4b26RUSesSS31Ec' return ( - +
+ )} + loading={transaction.loading} + error={transaction.error} + /> + + + {transaction.data?.hash} + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + Height: {transaction.data?.blockHeight} + + {transaction.data?.blockHash} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + {StatusIcon} + {transaction.data?.status} + + {transaction.data?.error && + + {transaction.data.error} + + } +
+ )} + loading={transaction.loading} + error={transaction.error} + /> + + + + {transaction.data?.owner} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + + + + + + + + + +
+ Details +
+ + +) + +return ( + diff --git a/packages/frontend/src/components/data/DateBlock.js b/packages/frontend/src/components/data/DateBlock.js index 1a57f07aa..90d85c484 100644 --- a/packages/frontend/src/components/data/DateBlock.js +++ b/packages/frontend/src/components/data/DateBlock.js @@ -4,7 +4,7 @@ import { getTimeDelta } from '../../util' import { CalendarIcon } from '../ui/icons' import './DateBlock.scss' -function DateBlock ({ timestamp, format }) { +function DateBlock ({ timestamp, format, showTime = false }) { const date = new Date(timestamp) if (String(date) === 'Invalid Date') return null @@ -12,7 +12,8 @@ function DateBlock ({ timestamp, format }) { const options = { day: 'numeric', month: 'short', - year: 'numeric' + year: 'numeric', + ...(showTime && { hour: '2-digit', minute: '2-digit' }) } const formattedDate = date.toLocaleDateString('en-GB', options) From e129f89686a662303bd573f6b8ab6be6714ca852 Mon Sep 17 00:00:00 2001 From: Alexey Date: Wed, 13 Nov 2024 19:08:02 +0300 Subject: [PATCH 02/27] Update transaction page data display --- .../src/app/transaction/[hash]/Transaction.js | 312 ----------------- .../app/transaction/[hash]/TransactionPage.js | 322 ++++++++++++++++++ .../transaction/[hash]/TransactionPage.scss | 10 + .../src/app/transaction/[hash]/page.js | 2 +- .../app/validator/[hash]/ValidatorPage.scss | 1 - 5 files changed, 333 insertions(+), 314 deletions(-) delete mode 100644 packages/frontend/src/app/transaction/[hash]/Transaction.js create mode 100644 packages/frontend/src/app/transaction/[hash]/TransactionPage.js create mode 100644 packages/frontend/src/app/transaction/[hash]/TransactionPage.scss diff --git a/packages/frontend/src/app/transaction/[hash]/Transaction.js b/packages/frontend/src/app/transaction/[hash]/Transaction.js deleted file mode 100644 index c7f975e3b..000000000 --- a/packages/frontend/src/app/transaction/[hash]/Transaction.js +++ /dev/null @@ -1,312 +0,0 @@ -'use client' - -import './Transaction.scss' -import * as Api from '../../../util/Api' -import { useState, useEffect, useCallback } from 'react' -import { getTransitionTypeStringById, fetchHandlerSuccess, fetchHandlerError } from '../../../util' -import { Credits, Endpoint, InfoLine, IpAddress, DateBlock, Identifier } from '../../../components/data' -import { LoadingLine, LoadingList } from '../../../components/loading' -import { ErrorMessageBlock } from '../../../components/Errors' -import TransactionData from './TransactionData' -import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' -import { RateTooltip } from '../../../components/ui/Tooltips' -import { ValueContainer, PageDataContainer, InfoContainer } from '../../../components/ui/containers' -import { InfoCard, ValueCard } from '../../../components/cards' -import { HorisontalSeparator } from '../../../components/ui/separators' -import { - Container, - TableContainer, Table, Thead, Tbody, Tr, Th, Td, - Heading, - Flex, - Code, Badge -} from '@chakra-ui/react' -import TypeBadge from '../../../components/transactions/TypeBadge' - -function Transaction ({ hash }) { - const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) - const [rate, setRate] = useState({ data: {}, loading: true, error: false }) - const [decodedST, setDecodedST] = useState(null) - const tdTitleWidth = 250 - - console.log('transaction', transaction) - - const decodeTx = useCallback((tx) => { - Api.decodeTx(tx) - .then((stateTransition) => { - setDecodedST(stateTransition) - }) - .catch(console.log) - }, []) - - const fetchData = () => { - setTransaction(state => ({ ...state, loading: true })) - - Api.getTransaction(hash) - .then((res) => { - fetchHandlerSuccess(setTransaction, res) - decodeTx(res.data) - }) - .catch(err => fetchHandlerError(setTransaction, err)) - - Api.getRate() - .then(res => fetchHandlerSuccess(setRate, res)) - .catch(err => fetchHandlerError(setRate, err)) - } - - useEffect(fetchData, [hash, decodeTx]) - - const StatusIcon = transaction.data?.status === 'SUCCESS' - ? - : - - // temp - if (!transaction.data?.error) transaction.data.error = 'Document Ciifrnm8gjhAcRhySwtLhfwguGZ7cetssj3ETMSMX6j3 has invalid revision Some(1). The desired revision is 1' - if (!transaction.data?.owner) transaction.data.owner = 'OWnErBelIBErDa1F8NJ16BV7MBgMK4b26RUSesSS31Ec' - - return ( - -
- )} - loading={transaction.loading} - error={transaction.error} - /> - - - {transaction.data?.hash} - - )} - loading={transaction.loading} - error={transaction.error} - /> - - - Height: {transaction.data?.blockHeight} - - {transaction.data?.blockHash} - - - )} - loading={transaction.loading} - error={transaction.error} - /> - - - - )} - loading={transaction.loading} - error={transaction.error} - /> - - - - {StatusIcon} - {transaction.data?.status} - - {transaction.data?.error && - - {transaction.data.error} - - } -
- )} - loading={transaction.loading} - error={transaction.error} - /> - - - - {transaction.data?.owner} - - - )} - loading={transaction.loading} - error={transaction.error} - /> - - - - - - - - - - - - -
- Details -
- - -) - -return ( - - - {!transaction.error - ? - - - - - - - - - - - - {transaction.data?.error && - - - - - } - - - - - - - - - - - - - - - - - - - - - - - - - -
transaction info
Status - - {transaction.data?.status}{StatusIcon} - -
Error - - - {transaction.data?.error} - - -
Hash - {transaction.data?.hash} -
Height - {transaction.data?.blockHeight} -
Type - - {transaction.data?.type && getTransitionTypeStringById(transaction.data?.type)} - -
Index - {transaction.data?.index} -
Timestamp - {transaction.data?.timestamp && new Date(transaction.data?.timestamp).toLocaleString()} -
Gas Used - - - {transaction.data?.gasUsed} Credits - - -
- : } - - - {!transaction.error && - - Transaction data - - {(!transaction.loading && decodedST) - ? - -
- : } - - } - - ) -} - -export default Transaction diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js new file mode 100644 index 000000000..32a27be4e --- /dev/null +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -0,0 +1,322 @@ +'use client' + +import './TransactionPage.scss' +import * as Api from '../../../util/Api' +import { useState, useEffect, useCallback } from 'react' +// import { getTransitionTypeStringById, fetchHandlerSuccess, fetchHandlerError } from '../../../util' +import { fetchHandlerSuccess, fetchHandlerError } from '../../../util' +// import { Credits, CreditsBlock, InfoLine, DateBlock, Identifier } from '../../../components/data' +import { CreditsBlock, InfoLine, DateBlock, Identifier } from '../../../components/data' +// import { LoadingLine, LoadingList } from '../../../components/loading' +// import { ErrorMessageBlock } from '../../../components/Errors' +// import TransactionData from './TransactionData' +import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' +// import { RateTooltip } from '../../../components/ui/Tooltips' +import { ValueContainer, PageDataContainer } from '../../../components/ui/containers' +import { ValueCard } from '../../../components/cards' +import { HorisontalSeparator } from '../../../components/ui/separators' +import { + // Container, + // TableContainer, Table, Thead, Tbody, Tr, Th, Td, + // Heading, + // Flex, + // Code, + Badge +} from '@chakra-ui/react' +import TypeBadge from '../../../components/transactions/TypeBadge' + +function Transaction ({ hash }) { + const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) + const [rate, setRate] = useState({ data: {}, loading: true, error: false }) + const [decodedST, setDecodedST] = useState(null) + // const tdTitleWidth = 250 + + console.log('transaction', transaction) + console.log('decodedST', decodedST) + + const decodeTx = useCallback((tx) => { + Api.decodeTx(tx) + .then((stateTransition) => { + setDecodedST(stateTransition) + }) + .catch(console.log) + }, []) + + const fetchData = () => { + setTransaction(state => ({ ...state, loading: true })) + + Api.getTransaction(hash) + .then((res) => { + fetchHandlerSuccess(setTransaction, res) + decodeTx(res.data) + }) + .catch(err => fetchHandlerError(setTransaction, err)) + + Api.getRate() + .then(res => fetchHandlerSuccess(setRate, res)) + .catch(err => fetchHandlerError(setRate, err)) + } + + useEffect(fetchData, [hash, decodeTx]) + + const StatusIcon = transaction.data?.status === 'SUCCESS' + ? + : + + // temp + if (!transaction.data?.error) transaction.data.error = 'Document Ciifrnm8gjhAcRhySwtLhfwguGZ7cetssj3ETMSMX6j3 has invalid revision Some(1). The desired revision is 1' + if (!transaction.data?.owner) transaction.data.owner = 'OWnErBelIBErDa1F8NJ16BV7MBgMK4b26RUSesSS31Ec' + + return ( + +
+ )} + loading={transaction.loading} + error={transaction.error} + /> + + + {transaction.data?.hash} + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + Height: {transaction.data?.blockHeight} + + {transaction.data?.blockHash} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + {StatusIcon} + {transaction.data?.status} + + {transaction.data?.error && + + {transaction.data.error} + + } +
+ )} + loading={transaction.loading} + error={transaction.error} + /> + + + + {transaction.data?.owner} + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + {transaction.data?.data} + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + )} + loading={transaction.loading} + error={transaction.error} + /> + + + + + + + + +
+ Details +
+ + + ) + +// return ( +// +// +// {!transaction.error +// ? +// +// +// +// +// +// +// +// +// +// +// +// {transaction.data?.error && +// +// +// +// +// } +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
transaction info
Status +// +// {transaction.data?.status}{StatusIcon} +// +//
Error +// +// +// {transaction.data?.error} +// +// +//
Hash +// {transaction.data?.hash} +//
Height +// {transaction.data?.blockHeight} +//
Type +// +// {transaction.data?.type && getTransitionTypeStringById(transaction.data?.type)} +// +//
Index +// {transaction.data?.index} +//
Timestamp +// {transaction.data?.timestamp && new Date(transaction.data?.timestamp).toLocaleString()} +//
Gas Used +// +// +// {transaction.data?.gasUsed} Credits +// +// +//
+// : } +// +// +// {!transaction.error && +// +// Transaction data +// +// {(!transaction.loading && decodedST) +// ? +// +//
+// : } +// +// } +// +// ) +} + +export default Transaction diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss new file mode 100644 index 000000000..747b2d84e --- /dev/null +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -0,0 +1,10 @@ +@use '../../../styles/mixins.scss'; +@import '../../../styles/variables.scss'; + +.TransactionPage { + &__RawTransaction { + max-width: 510px; + overflow-wrap: break-word; + word-break: break-all; + } +} \ No newline at end of file diff --git a/packages/frontend/src/app/transaction/[hash]/page.js b/packages/frontend/src/app/transaction/[hash]/page.js index c44519daf..8c6c5a1f6 100644 --- a/packages/frontend/src/app/transaction/[hash]/page.js +++ b/packages/frontend/src/app/transaction/[hash]/page.js @@ -1,4 +1,4 @@ -import Transaction from './Transaction' +import Transaction from './TransactionPage' export function generateMetadata ({ params }) { return { diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index 44f4c9c13..acd48d877 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -1,7 +1,6 @@ @use '../../../styles/mixins.scss'; @import '../../../styles/variables.scss'; - @mixin blockOffsets ($property) { #{$property}: 12px; From 91f08f2e4e152ebc216a7b8da2c39dc0ec78858a Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 17:07:24 +0300 Subject: [PATCH 03/27] Update Navbar paddings --- .../src/components/layout/navbar/NavLink.scss | 2 +- .../src/components/layout/navbar/Navbar.scss | 22 +++++++++++++++++-- .../layout/navbar/NavbarMobileMenu.scss | 7 +++--- packages/frontend/src/styles/mixins.scss | 6 +---- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/components/layout/navbar/NavLink.scss b/packages/frontend/src/components/layout/navbar/NavLink.scss index fa8ab16b4..c08ff4301 100644 --- a/packages/frontend/src/components/layout/navbar/NavLink.scss +++ b/packages/frontend/src/components/layout/navbar/NavLink.scss @@ -11,7 +11,7 @@ color: var(--chakra-colors-gray-250); transition: $transition-time-def; white-space: nowrap; - padding: 4px 8px; + padding: 4px 0; &--Active { color: $color-brand-normal; diff --git a/packages/frontend/src/components/layout/navbar/Navbar.scss b/packages/frontend/src/components/layout/navbar/Navbar.scss index 1f1ea16bd..b2354356b 100644 --- a/packages/frontend/src/components/layout/navbar/Navbar.scss +++ b/packages/frontend/src/components/layout/navbar/Navbar.scss @@ -36,8 +36,26 @@ align-items: center; gap: 16px; margin-left: 16px; - - @media screen and (max-width: $breakpoint-sm) { + } + + &__Menu { + gap: 40px !important; + } + + @media screen and (max-width: $breakpoint-xl) { + &__Menu { + gap: 24px !important; + } + } + + @media screen and (max-width: $breakpoint-md) { + &__Menu { + gap: 16px !important; + } + } + + @media screen and (max-width: $breakpoint-sm) { + &__WrapperNetworkSelect { gap: 8px; margin-left: 8px; } diff --git a/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss b/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss index 866050e0f..6af543e9f 100644 --- a/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss +++ b/packages/frontend/src/components/layout/navbar/NavbarMobileMenu.scss @@ -10,13 +10,14 @@ width: 100%; background-color: var(--chakra-colors-gray-650); border-radius: 0 0 20px 20px; - margin-top: 6px; - padding: 88px 24px 0 24px; margin-top: 0; - box-shadow: 0px 20px 32px 0px var(--chakra-colors-gray-900); + box-shadow: 0 20px 32px 0 var(--chakra-colors-gray-900); transition: all .3s; max-height: 100%; transform: translateY(calc(20px - 100%)); + padding-top: 88px; + @include mixins.navContainerPadding(padding-left); + @include mixins.navContainerPadding(padding-right); &--Open { transform: translateY(0); diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index e5c845f95..04886cae7 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -312,11 +312,7 @@ } @mixin navContainerPadding ($property) { - #{$property}: var(--chakra-space-8); - - @media screen and (min-width: $breakpoint-md) { - #{$property}: var(--chakra-space-4); - } + #{$property}: var(--chakra-space-3); @media screen and (min-width: $breakpoint-lg) { #{$property}: var(--chakra-space-5); From 38f5fa696b0bd8482452fb9d00354c118312571f Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 17:07:54 +0300 Subject: [PATCH 04/27] Optimize scss code --- packages/frontend/src/components/layout/navbar/Navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/layout/navbar/Navbar.scss b/packages/frontend/src/components/layout/navbar/Navbar.scss index b2354356b..0c6ad2b24 100644 --- a/packages/frontend/src/components/layout/navbar/Navbar.scss +++ b/packages/frontend/src/components/layout/navbar/Navbar.scss @@ -20,7 +20,7 @@ left: 0; width: 100%; height: 100%; - border-radius: 0px 0px 20px 20px; + border-radius: 0 0 20px 20px; background: rgba(24, 31, 34, 0.8); backdrop-filter: $blockBackgroundBlur; border: 1px solid rgba(255, 255, 255, .07); From 1356193a43ac3aa811cec98a88b4d7e389c4adf9 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 17:10:20 +0300 Subject: [PATCH 05/27] Update PageDataContainer responsive styles --- .../frontend/src/app/validator/[hash]/ValidatorPage.scss | 6 ++++++ .../src/components/ui/containers/PageDataContainer.js | 4 ++-- .../src/components/ui/containers/PageDataContainer.scss | 3 +-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index acd48d877..cadb68366 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -123,6 +123,12 @@ &__ContentContainer { grid-template-columns: 1fr; } + + .PageDataContainer__Content { + padding: 0; + border-radius: 0; + background: transparent; + } } @media screen and (min-width: $breakpoint-lg) and (max-width: 1100px) { diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.js b/packages/frontend/src/components/ui/containers/PageDataContainer.js index 777be5611..d974793c7 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.js +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.js @@ -3,10 +3,10 @@ import Link from 'next/link' import { ChevronLeftIcon } from '@chakra-ui/icons' import './PageDataContainer.scss' -function PageDataContainer ({ title, backLink, children }) { +function PageDataContainer ({ className, title, backLink, children }) { return ( Date: Thu, 14 Nov 2024 17:11:46 +0300 Subject: [PATCH 06/27] Scss code optimization --- .../src/components/ui/containers/PageDataContainer.scss | 1 - packages/frontend/src/styles/mixins.scss | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.scss b/packages/frontend/src/components/ui/containers/PageDataContainer.scss index de3e5ccdd..133bb5a46 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.scss +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.scss @@ -40,7 +40,6 @@ $borderRadius: 20px; &__BackLink { position: relative; z-index: 2; - display: block; width: 32px; height: 24px; margin-right: 10px; diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss index 04886cae7..38423bfc6 100644 --- a/packages/frontend/src/styles/mixins.scss +++ b/packages/frontend/src/styles/mixins.scss @@ -25,7 +25,7 @@ &:active { transform: translateY(1px); - box-shadow: 0 0px 9999px 0px rgba(0, 0, 0, .25) inset; + box-shadow: 0 0 9999px 0 rgba(0, 0, 0, .25) inset; } &:last-child { @@ -351,8 +351,6 @@ } @mixin TooltipElement () { - transition: .2s; - &, .chakra-icon { transition: .2s; } From 3aa7f950dc37d4b0baecaaf310e0155160b31a47 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 17:15:41 +0300 Subject: [PATCH 07/27] ValueCard.js fix classname --- packages/frontend/src/components/cards/ValueCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/cards/ValueCard.js b/packages/frontend/src/components/cards/ValueCard.js index 4e8bf0b0d..2d9197997 100644 --- a/packages/frontend/src/components/cards/ValueCard.js +++ b/packages/frontend/src/components/cards/ValueCard.js @@ -10,7 +10,7 @@ const Wrapper = (props, ref) => { export default function ValueCard ({ link, loading, children, className }) { return ( {children} From ba5918e3b99f25f6f44fbaf85fa2d1244d50d1f8 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 17:16:39 +0300 Subject: [PATCH 08/27] Remove unused prop in ValueCard --- packages/frontend/src/components/cards/ValueCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/cards/ValueCard.js b/packages/frontend/src/components/cards/ValueCard.js index 2d9197997..b2cfd7d15 100644 --- a/packages/frontend/src/components/cards/ValueCard.js +++ b/packages/frontend/src/components/cards/ValueCard.js @@ -1,7 +1,7 @@ import Link from 'next/link' import './ValueCard.scss' -const Wrapper = (props, ref) => { +const Wrapper = (props) => { return props?.link ? {props.children} :
{props.children}
From 9ad4476c165c156f546d563a612b274e1c3f84a9 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:13:29 +0300 Subject: [PATCH 09/27] Update CopyButton styles --- packages/frontend/src/components/ui/Buttons/CopyButton.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/frontend/src/components/ui/Buttons/CopyButton.js b/packages/frontend/src/components/ui/Buttons/CopyButton.js index ba114b238..ddd54b3f7 100644 --- a/packages/frontend/src/components/ui/Buttons/CopyButton.js +++ b/packages/frontend/src/components/ui/Buttons/CopyButton.js @@ -40,6 +40,7 @@ function CopyButton ({ text, className }) { copyToClipboard(text, showMessage) }} minW={0} + height={'max-content'} p={0} className={`CopyButton ${className}`} _hover={{ color: 'gray.100' }} @@ -65,6 +66,7 @@ function CopyButton ({ text, className }) { transition={'.2s'} boxSizing={'content-box'} p={1} + m={-1} /> From 1d92baebe20931e5c9e02d3cee88cfec1d33a218 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:13:50 +0300 Subject: [PATCH 10/27] Fix Identifier extra class --- packages/frontend/src/components/data/Identifier.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/data/Identifier.js b/packages/frontend/src/components/data/Identifier.js index d168b3773..9219bb300 100644 --- a/packages/frontend/src/components/data/Identifier.js +++ b/packages/frontend/src/components/data/Identifier.js @@ -29,7 +29,7 @@ export default function Identifier ({ children, ellipsis = true, avatar, styles } return ( -
+
{avatar && children && ( )} From 351e0b404709c46d996e596734ac21db493ebebb Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:30:50 +0300 Subject: [PATCH 11/27] Update CopyButton offset in Identifier component --- packages/frontend/src/components/data/Identifier.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/components/data/Identifier.scss b/packages/frontend/src/components/data/Identifier.scss index 20445cb80..250ce7b7b 100644 --- a/packages/frontend/src/components/data/Identifier.scss +++ b/packages/frontend/src/components/data/Identifier.scss @@ -40,6 +40,6 @@ } &__CopyButton { - margin-left: 4px; + margin-left: 12px; } } \ No newline at end of file From ae634bbe2d11d4230557aa3c780c47d3e489fe39 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:31:05 +0300 Subject: [PATCH 12/27] Update Transaction page styles --- .../app/transaction/[hash]/TransactionPage.js | 8 ++-- .../transaction/[hash]/TransactionPage.scss | 42 +++++++++++++++++++ 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js index 32a27be4e..fe84239a1 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -1,6 +1,5 @@ 'use client' -import './TransactionPage.scss' import * as Api from '../../../util/Api' import { useState, useEffect, useCallback } from 'react' // import { getTransitionTypeStringById, fetchHandlerSuccess, fetchHandlerError } from '../../../util' @@ -24,6 +23,7 @@ import { Badge } from '@chakra-ui/react' import TypeBadge from '../../../components/transactions/TypeBadge' +import './TransactionPage.scss' function Transaction ({ hash }) { const [transaction, setTransaction] = useState({ data: {}, loading: true, error: false }) @@ -98,8 +98,8 @@ function Transaction ({ hash }) { className={'TransactionPage__InfoLine'} title={'Block Hash'} value={( - - Height: {transaction.data?.blockHeight} + + Height: {transaction.data?.blockHeight} {transaction.data?.blockHash} @@ -163,7 +163,7 @@ function Transaction ({ hash }) { /> diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index 747b2d84e..f83376092 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -2,6 +2,48 @@ @import '../../../styles/variables.scss'; .TransactionPage { + position: relative; + + &__CommonInfo { + + } + + &__InfoLine { + margin-bottom: 14px; + justify-content: flex-start; + + &--RawTransaction { + align-items: baseline; + } + + .InfoLine__Title { + width: 200px; + } + + .InfoLine__Value { + text-align: left; + } + } + + &__StatusContainer { + + } + + &__BlockHeight { + padding: 2px 8px; + border-radius: 3px; + font-size: 0.625rem; + margin-right: 12px; + } + + &__BlockHash { + //padding: 7px 10px; + } + + &__DetailsInfo { + + } + &__RawTransaction { max-width: 510px; overflow-wrap: break-word; From edb4a5c1530ce7679692455b032a8a6d752a1ec9 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:47:55 +0300 Subject: [PATCH 13/27] Update default line-height of Badge --- packages/frontend/src/styles/theme.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index d276e9135..f409d3b4a 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -262,6 +262,7 @@ export const theme = extendTheme({ textTransform: 'none', display: 'inline-flex', alignItems: 'center', + lineHeight: '20px', bg: backgroundColors[colorScheme] || 'gray.500', color: textColor[colorScheme] || 'white' } From 0039aedd7e208ba77b05f1822b880ac58bb4ef34 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:48:41 +0300 Subject: [PATCH 14/27] Remove unnecessary properties of Badge --- packages/frontend/src/components/networkStatus/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/networkStatus/index.js b/packages/frontend/src/components/networkStatus/index.js index fd9a6188a..f6282afbb 100644 --- a/packages/frontend/src/components/networkStatus/index.js +++ b/packages/frontend/src/components/networkStatus/index.js @@ -70,7 +70,7 @@ function NetworkStatus ({ className }) {
Network:
- + {NetworkStatusIcon} {status?.data?.network ? `${status.data.network}` : 'n/a'} @@ -80,7 +80,7 @@ function NetworkStatus ({ className }) {
API:
- + {ApiStatusIcon} {apiStatus ? 'operational' : 'disrupted'} @@ -90,7 +90,7 @@ function NetworkStatus ({ className }) {
Latest block:
- + {status?.data?.api?.block?.height !== undefined ?
From dcd7da4fd71fb5d96aee127cf74583a43661f798 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 18:49:00 +0300 Subject: [PATCH 15/27] Update transaction page styles --- .../src/app/transaction/[hash]/TransactionPage.js | 2 +- .../src/app/transaction/[hash]/TransactionPage.scss | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js index fe84239a1..93561be6a 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -126,7 +126,7 @@ function Transaction ({ hash }) { /> diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index f83376092..dfeb3c396 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -12,16 +12,18 @@ margin-bottom: 14px; justify-content: flex-start; - &--RawTransaction { + &--RawTransaction, &--Status { align-items: baseline; } .InfoLine__Title { width: 200px; + line-height: 20px; } .InfoLine__Value { text-align: left; + font-size: 0.75rem; } } @@ -29,6 +31,11 @@ } + &__ErrorContainer { + margin-top: 8px; + font-size: 0.688rem; + } + &__BlockHeight { padding: 2px 8px; border-radius: 3px; From cd17fbed43135376d850b759bcae7370d0c8a5b5 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 21:26:30 +0300 Subject: [PATCH 16/27] Update transactions page responsive styles --- .../app/transaction/[hash]/TransactionPage.js | 29 +++++-- .../transaction/[hash]/TransactionPage.scss | 87 ++++++++++++++++++- .../app/validator/[hash]/ValidatorPage.scss | 4 + .../src/components/data/InfoLine.scss | 4 - 4 files changed, 111 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js index 93561be6a..17f87698c 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -14,6 +14,7 @@ import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' import { ValueContainer, PageDataContainer } from '../../../components/ui/containers' import { ValueCard } from '../../../components/cards' import { HorisontalSeparator } from '../../../components/ui/separators' +import { CopyButton } from '../../../components/ui/Buttons' import { // Container, // TableContainer, Table, Thead, Tbody, Tr, Th, Td, @@ -66,6 +67,8 @@ function Transaction ({ hash }) { // temp if (!transaction.data?.error) transaction.data.error = 'Document Ciifrnm8gjhAcRhySwtLhfwguGZ7cetssj3ETMSMX6j3 has invalid revision Some(1). The desired revision is 1' if (!transaction.data?.owner) transaction.data.owner = 'OWnErBelIBErDa1F8NJ16BV7MBgMK4b26RUSesSS31Ec' + if (!transaction.data?.feeMultiplier) transaction.data.feeMultiplier = '10' + if (!transaction.data?.signature) transaction.data.signature = '19E4611A8CAF217C18BD978A5BE8D3EFA9C971C394BF8FE9C661AF86164DB517' return (
)} loading={transaction.loading} @@ -110,7 +113,7 @@ function Transaction ({ hash }) { /> )} loading={transaction.loading} @@ -131,6 +134,7 @@ function Transaction ({ hash }) { value={(
@@ -168,6 +172,7 @@ function Transaction ({ hash }) { value={( {transaction.data?.data} + )} loading={transaction.loading} @@ -175,7 +180,7 @@ function Transaction ({ hash }) { /> @@ -187,17 +192,25 @@ function Transaction ({ hash }) { + +{transaction.data?.feeMultiplier}% +
+ )} loading={transaction.loading} - error={transaction.error} + error={transaction.error || !transaction.data?.feeMultiplier} /> + {transaction.data?.signature} + + )} loading={transaction.loading} - error={transaction.error} + error={transaction.error || !transaction.data?.signature} />
diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index dfeb3c396..f9c7e1960 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -27,13 +27,21 @@ } } - &__StatusContainer { + &__StatusContainer {} + &__Signature { + background: transparent; } &__ErrorContainer { margin-top: 8px; font-size: 0.688rem; + + .ValueContainer__Value { + overflow: hidden; + overflow-wrap: break-word; + word-break: break-all; + } } &__BlockHeight { @@ -41,6 +49,7 @@ border-radius: 3px; font-size: 0.625rem; margin-right: 12px; + white-space: nowrap; } &__BlockHash { @@ -52,8 +61,84 @@ } &__RawTransaction { + align-items: flex-start; max-width: 510px; overflow-wrap: break-word; word-break: break-all; + + .CopyButton { + margin-left: 12px; + } + } + + @media screen and (max-width: $breakpoint-md) { + &__InfoLine { + margin-bottom: 12px; + justify-content: space-between; + + &:not(&--Index):not(&--Type) { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + .InfoLine__Title { + width: 100%; + margin-bottom: 4px; + margin-right: 0; + } + + .InfoLine__Value { + width: 100%; + } + } + + &--Status { + position: relative; + } + + &--GasUsed { + .CreditsBlock { + display: flex; + + .CreditsBlock__Usd { + margin-left: auto; + } + } + } + + &--Timestamp { + .DateBlock__Delta { + margin-left: auto; + } + } + + .ValueCard { + .Identifier { + flex-grow: 1; + + .CopyButton { + margin-left: auto; + } + } + } + } + + &__StatusBadge { + position: absolute; + top: 0; + right: 0; + } + + &__ErrorContainer { + margin-top: 0; + } + + &__StatusContainer { + + } + + &__RawTransaction { + max-width: none; + } } } \ No newline at end of file diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index cadb68366..bc012befa 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -101,6 +101,10 @@ &__InfoLine { margin-bottom: 14px; + + .DateBlock { + justify-content: flex-end; + } } &__ValueContainer { diff --git a/packages/frontend/src/components/data/InfoLine.scss b/packages/frontend/src/components/data/InfoLine.scss index 608eea2a2..f38fe3719 100644 --- a/packages/frontend/src/components/data/InfoLine.scss +++ b/packages/frontend/src/components/data/InfoLine.scss @@ -18,10 +18,6 @@ font-size: 0.688rem; color: #fff; text-align: right; - - .DateBlock { - justify-content: flex-end; - } } &--Loading & { From 91a7ed11711f910e621b4a960f1d1a95bbdb63c3 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 21:36:03 +0300 Subject: [PATCH 17/27] Update CreditsBlock usd color --- packages/frontend/src/components/data/CreditsBlock.scss | 4 ++-- packages/frontend/src/styles/theme.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/data/CreditsBlock.scss b/packages/frontend/src/components/data/CreditsBlock.scss index f0fd78d29..cbcbce981 100644 --- a/packages/frontend/src/components/data/CreditsBlock.scss +++ b/packages/frontend/src/components/data/CreditsBlock.scss @@ -31,8 +31,8 @@ display: inline-block; padding: 6px 8px; font-size: 0.688rem; - color: var(--chakra-colors-green-label); - background-color: rgba(88, 244, 188, .2); + color: var(--chakra-colors-green-emeralds); + background-color: rgba(var(--chakra-colors-green-emeralds-rgb), .2); border-radius: 8px; } } \ No newline at end of file diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js index f409d3b4a..be249ac89 100644 --- a/packages/frontend/src/styles/theme.js +++ b/packages/frontend/src/styles/theme.js @@ -64,7 +64,9 @@ export const theme = extendTheme({ }, green: { default: '#1CC400', - label: '#81F458' + label: '#81F458', + emeralds: '#58F4BC', + 'emeralds-rgb': '88, 244, 188' }, gray: { 50: '#f0f1f2', From bcb4dd7557d2ee648a0c465b2cff914552b16e32 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 21:36:31 +0300 Subject: [PATCH 18/27] Update Signature styles on Transaction page --- .../src/app/transaction/[hash]/TransactionPage.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index f9c7e1960..53c3bd87b 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -31,6 +31,8 @@ &__Signature { background: transparent; + overflow-wrap: break-word; + word-break: break-all; } &__ErrorContainer { @@ -75,6 +77,7 @@ &__InfoLine { margin-bottom: 12px; justify-content: space-between; + flex-wrap: wrap; &:not(&--Index):not(&--Type) { flex-direction: column; @@ -99,6 +102,7 @@ &--GasUsed { .CreditsBlock { display: flex; + flex-wrap: wrap; .CreditsBlock__Usd { margin-left: auto; @@ -112,6 +116,10 @@ } } + .InfoLine__Title { + width: auto; + } + .ValueCard { .Identifier { flex-grow: 1; From 3b9cca7e145f7348a58bb0602b3a3213eaa3f676 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 21:55:52 +0300 Subject: [PATCH 19/27] Update word-break in transaction page --- .../src/app/transaction/[hash]/TransactionPage.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index 53c3bd87b..18464480f 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -32,7 +32,7 @@ &__Signature { background: transparent; overflow-wrap: break-word; - word-break: break-all; + word-break: break-word; } &__ErrorContainer { @@ -42,7 +42,7 @@ .ValueContainer__Value { overflow: hidden; overflow-wrap: break-word; - word-break: break-all; + word-break: break-word; } } @@ -66,7 +66,7 @@ align-items: flex-start; max-width: 510px; overflow-wrap: break-word; - word-break: break-all; + word-break: break-word; .CopyButton { margin-left: 12px; From fde3d4733258349a42cd0b4172382c9ad26836d2 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 21:58:32 +0300 Subject: [PATCH 20/27] Update responsive styles of transaction common data --- .../frontend/src/app/transaction/[hash]/TransactionPage.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index 18464480f..42d23d6aa 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -124,8 +124,8 @@ .Identifier { flex-grow: 1; - .CopyButton { - margin-left: auto; + .Identifier__SymbolsContainer { + flex-grow: 1; } } } From f787529e196a5025740662ffa8a0eb0e5b3922b7 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 22:42:16 +0300 Subject: [PATCH 21/27] Update PageDataContainer styles --- .../src/components/ui/containers/PageDataContainer.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.scss b/packages/frontend/src/components/ui/containers/PageDataContainer.scss index 133bb5a46..23fe9a953 100644 --- a/packages/frontend/src/components/ui/containers/PageDataContainer.scss +++ b/packages/frontend/src/components/ui/containers/PageDataContainer.scss @@ -73,6 +73,8 @@ $borderRadius: 20px; @media screen and (max-width: $breakpoint-lg) { &__Content { + @include mixins.pageDataPadding(padding-top); + @include mixins.pageDataPadding(padding-bottom); border-radius: $borderRadius; } From 645c919b509a6f871d1d27b393a945b7b78b69df Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 22:42:30 +0300 Subject: [PATCH 22/27] Update Transaction page loading state --- .../src/app/transaction/[hash]/TransactionPage.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index 42d23d6aa..9f6bac9c9 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -5,7 +5,13 @@ position: relative; &__CommonInfo { - + .InfoLine--Loading .InfoLine { + &__Value { + height: 28px; + flex-grow: 1; + width: 100% !important; + } + } } &__InfoLine { From 89304dcbeabf9195b2e62cc3796c74ef6f5a0e68 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 22:44:29 +0300 Subject: [PATCH 23/27] Update paddings on Validator page --- packages/frontend/src/app/validator/[hash]/ValidatorPage.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index bc012befa..b2b986d1c 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -49,7 +49,7 @@ flex-direction: column; flex-grow: 1; padding-top: 12px !important; - padding-bottom: 12px !important; + padding-bottom: 0 !important; @include mixins.InfoContainerPadding(padding-left, 0px, true); @include mixins.InfoContainerPadding(padding-right, 0px, true); } From e53a7656f327ea62ba20824c0a4d18e3cf300e73 Mon Sep 17 00:00:00 2001 From: Alexey Date: Thu, 14 Nov 2024 22:48:24 +0300 Subject: [PATCH 24/27] Update paddings on Validator page --- packages/frontend/src/app/validator/[hash]/ValidatorPage.scss | 2 +- .../frontend/src/components/ui/containers/InfoContainer.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index b2b986d1c..26a4450f3 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -64,7 +64,7 @@ } &__ListPagination { - margin-top: 20px; + @include mixins.InfoContainerPadding(margin-top); .PageItem { &--Previous, &--Next { diff --git a/packages/frontend/src/components/ui/containers/InfoContainer.scss b/packages/frontend/src/components/ui/containers/InfoContainer.scss index 31a44219c..b9c2f15f4 100644 --- a/packages/frontend/src/components/ui/containers/InfoContainer.scss +++ b/packages/frontend/src/components/ui/containers/InfoContainer.scss @@ -31,6 +31,7 @@ } &--Tabs { + @include mixins.InfoContainerPadding(padding-bottom); padding: 10px 0 24px 0; overflow: hidden; From e2cd8a96d9ca88aa2c8b526e47a04c93eb96d444 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 15 Nov 2024 01:10:40 +0300 Subject: [PATCH 25/27] Initial update TransactionData components --- .../app/transaction/[hash]/TransactionData.js | 390 +++++++++++------- .../app/transaction/[hash]/TransactionPage.js | 12 +- .../transaction/[hash]/TransactionPage.scss | 14 +- 3 files changed, 257 insertions(+), 159 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionData.js b/packages/frontend/src/app/transaction/[hash]/TransactionData.js index b9f14d123..9fa89e799 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionData.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionData.js @@ -1,201 +1,283 @@ import Link from 'next/link' import { StateTransitionEnum } from '../../../enums/state.transition.type' -import { Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react' +// import { Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react' +import { ValueCard } from '../../../components/cards' +import { Identifier, InfoLine } from '../../../components/data' +import { TransactionCard } from '../../../components/transactions' function TransactionData ({ data }) { if (data === null) return <> + console.log('data', data) + + if (data.type === StateTransitionEnum.MASTERNODE_VOTE) { + return (<> + + + {/*{data?.proTxHash}*/} + + + )} + // loading={transaction.loading} + // error={transaction.error} + /> + + + {data?.contractId} + + + )} + // loading={transaction.loading} + error={!data?.contractId} + /> + + + {data?.identity} + + + )} + // loading={transaction.loading} + error={!data?.identity} + /> + + ) + } + if (data.type === StateTransitionEnum.DATA_CONTRACT_CREATE) { return (<> - - - Created data contract - - - - - - - Data contract - {data.dataContractId} - - - Owner - {data.identityId} - - + {/**/} + {/* */} + {/* Created data contract*/} + {/* */} + {/* */} + {/**/} + + {/**/} + {/* */} + {/* Data contract*/} + {/* {data.dataContractId}*/} + {/* */} + {/* */} + {/* Owner*/} + {/* {data.identityId}*/} + {/* */} + {/**/} ) } if (data.type === StateTransitionEnum.DOCUMENTS_BATCH) { return (<> - - - Changed documents - - - - - {data.transitions.map((transition, key) => - - - Data contract - {transition.dataContractId} - - - Document - {transition.id} - - + + + {data?.owner} + + )} + // loading={transaction.loading} + error={!data?.owner} + /> + + + {data?.transitions?.map((transaction, i) => ( + + ))} + )} + // loading={transaction.loading} + error={data?.transitions === undefined} + /> + + {/**/} + {/* */} + {/* Changed documents*/} + {/* */} + {/* */} + {/**/} + + {/*{data.transitions.map((transition, key) =>*/} + {/* */} + {/* */} + {/* Data contract*/} + {/* {transition.dataContractId}*/} + {/* */} + {/* */} + {/* Document*/} + {/* {transition.id}*/} + {/* */} + {/* */} + {/*)}*/} ) } if (data.type === StateTransitionEnum.IDENTITY_CREATE) { return (<> - - - Created identity - - - - - - - Identity - {data.identityId} - - + + + {data?.identityId} + + + )} + // loading={transaction.loading} + // error={data?.identityId} + /> ) } if (data.type === StateTransitionEnum.IDENTITY_TOP_UP) { return (<> - - - Credit top up - - - - - - - Amount - {data.amount} Credits - - - Identity - {data.identityId} - - + {/**/} + {/* */} + {/* Credit top up*/} + {/* */} + {/* */} + {/**/} + + {/**/} + {/* */} + {/* Amount*/} + {/* {data.amount} Credits*/} + {/* */} + {/* */} + {/* Identity*/} + {/* {data.identityId}*/} + {/* */} + {/**/} ) } if (data.type === StateTransitionEnum.DATA_CONTRACT_UPDATE) { return (<> - - - Updated data contract - - - - - - - Data contract - {data.dataContractId} - - - Owner - {data.identityId} - - - Version - {data.version} - - + {/**/} + {/* */} + {/* Updated data contract*/} + {/* */} + {/* */} + {/**/} + + {/**/} + {/* */} + {/* Data contract*/} + {/* {data.dataContractId}*/} + {/* */} + {/* */} + {/* Owner*/} + {/* {data.identityId}*/} + {/* */} + {/* */} + {/* Version*/} + {/* {data.version}*/} + {/* */} + {/**/} ) } if (data.type === StateTransitionEnum.IDENTITY_UPDATE) { return (<> - - - Updated identity - - - - - - - Identity - {data.identityId} - - - Revision - {data.revision} - - + {/**/} + {/* */} + {/* Updated identity*/} + {/* */} + {/* */} + {/**/} + + {/**/} + {/* */} + {/* Identity*/} + {/* {data.identityId}*/} + {/* */} + {/* */} + {/* Revision*/} + {/* {data.revision}*/} + {/* */} + {/**/} ) } if (data.type === StateTransitionEnum.IDENTITY_CREDIT_WITHDRAWAL) { return (<> - - - Credit withdrawal - - - - - - - Identity - {data.senderId} - - - Output script - {data.outputScript} - - - Amount - {data.amount} Credits - - - Core fee per byte - {data.coreFeePerByte} - - - Nonce - {data.nonce} - - + {/**/} + {/* */} + {/* Credit withdrawal*/} + {/* */} + {/* */} + {/**/} + + {/**/} + {/* */} + {/* Identity*/} + {/* {data.senderId}*/} + {/* */} + {/* */} + {/* Output script*/} + {/* {data.outputScript}*/} + {/* */} + {/* */} + {/* Amount*/} + {/* {data.amount} Credits*/} + {/* */} + {/* */} + {/* Core fee per byte*/} + {/* {data.coreFeePerByte}*/} + {/* */} + {/* */} + {/* Nonce*/} + {/* {data.nonce}*/} + {/* */} + {/**/} ) } if (data.type === StateTransitionEnum.IDENTITY_CREDIT_TRANSFER) { return (<> - - - Credit transfer - - - - - - - Amount - {data.amount} Credits - - - Sender - {data.senderId} - - - Recipient - {data.recipientId} - - + {/**/} + {/* */} + {/* Credit transfer*/} + {/* */} + {/* */} + {/**/} + + {/**/} + {/* */} + {/* Amount*/} + {/* {data.amount} Credits*/} + {/* */} + {/* */} + {/* Sender*/} + {/* {data.senderId}*/} + {/* */} + {/* */} + {/* Recipient*/} + {/* {data.recipientId}*/} + {/* */} + {/**/} ) } } diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js index 17f87698c..536628afb 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js @@ -8,7 +8,7 @@ import { fetchHandlerSuccess, fetchHandlerError } from '../../../util' import { CreditsBlock, InfoLine, DateBlock, Identifier } from '../../../components/data' // import { LoadingLine, LoadingList } from '../../../components/loading' // import { ErrorMessageBlock } from '../../../components/Errors' -// import TransactionData from './TransactionData' +import TransactionData from './TransactionData' import { CheckCircleIcon, WarningTwoIcon } from '@chakra-ui/icons' // import { RateTooltip } from '../../../components/ui/Tooltips' import { ValueContainer, PageDataContainer } from '../../../components/ui/containers' @@ -66,7 +66,7 @@ function Transaction ({ hash }) { // temp if (!transaction.data?.error) transaction.data.error = 'Document Ciifrnm8gjhAcRhySwtLhfwguGZ7cetssj3ETMSMX6j3 has invalid revision Some(1). The desired revision is 1' - if (!transaction.data?.owner) transaction.data.owner = 'OWnErBelIBErDa1F8NJ16BV7MBgMK4b26RUSesSS31Ec' + if (!transaction.data?.owner) transaction.data.owner = '4qwHscUBwHeCJ1Q2KsMV8jpkkN68LfBxVPmCaKBKhzGK' if (!transaction.data?.feeMultiplier) transaction.data.feeMultiplier = '10' if (!transaction.data?.signature) transaction.data.signature = '19E4611A8CAF217C18BD978A5BE8D3EFA9C971C394BF8FE9C661AF86164DB517' @@ -156,7 +156,7 @@ function Transaction ({ hash }) { className={'TransactionPage__InfoLine'} title={'Owner'} value={( - + {transaction.data?.owner} @@ -217,7 +217,11 @@ function Transaction ({ hash }) {
- Details +
+ Details +
+ +
diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss index 9f6bac9c9..10ef3fae6 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss +++ b/packages/frontend/src/app/transaction/[hash]/TransactionPage.scss @@ -18,7 +18,7 @@ margin-bottom: 14px; justify-content: flex-start; - &--RawTransaction, &--Status { + &--RawTransaction, &--Status, &--Transactions { align-items: baseline; } @@ -35,6 +35,10 @@ &__StatusContainer {} + .HorisontalSeparator { + margin: 14px 0; + } + &__Signature { background: transparent; overflow-wrap: break-word; @@ -68,6 +72,14 @@ } + &__DetailsInfoTitle { + font-family: $font-heading; + font-size: 0.75rem; + letter-spacing: .4px; + text-transform: uppercase; + font-weight: 700; + } + &__RawTransaction { align-items: flex-start; max-width: 510px; From 0790e8f38f385b58e4494036fab39dda0b9a3a54 Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 15 Nov 2024 01:11:12 +0300 Subject: [PATCH 26/27] Create TransactionCard component --- .../transactions/TransactionCard.js | 32 +++++++++++++++++++ .../transactions/TransactionCard.scss | 3 ++ .../src/components/transactions/index.js | 7 ++++ 3 files changed, 42 insertions(+) create mode 100644 packages/frontend/src/components/transactions/TransactionCard.js create mode 100644 packages/frontend/src/components/transactions/TransactionCard.scss create mode 100644 packages/frontend/src/components/transactions/index.js diff --git a/packages/frontend/src/components/transactions/TransactionCard.js b/packages/frontend/src/components/transactions/TransactionCard.js new file mode 100644 index 000000000..ffb1e0cf9 --- /dev/null +++ b/packages/frontend/src/components/transactions/TransactionCard.js @@ -0,0 +1,32 @@ +import './TransactionCard.scss' +import { ValueCard } from '../cards' +import { Identifier, InfoLine } from '../data' + +function TransactionsListItem ({ transaction }) { + console.log('transaction', transaction) + + return ( +
+ + + + {transaction.dataContractId} + + + )} + // loading={transaction.loading} + // error={transaction.error} + /> +
+ ) +} + +export default TransactionsListItem diff --git a/packages/frontend/src/components/transactions/TransactionCard.scss b/packages/frontend/src/components/transactions/TransactionCard.scss new file mode 100644 index 000000000..8015df713 --- /dev/null +++ b/packages/frontend/src/components/transactions/TransactionCard.scss @@ -0,0 +1,3 @@ +.TransactionCard { + +} \ No newline at end of file diff --git a/packages/frontend/src/components/transactions/index.js b/packages/frontend/src/components/transactions/index.js new file mode 100644 index 000000000..2e913be7f --- /dev/null +++ b/packages/frontend/src/components/transactions/index.js @@ -0,0 +1,7 @@ +import TransactionCard from './TransactionCard' +import TransactionsList from './TransactionsList' + +export { + TransactionCard, + TransactionsList +} From fe622e1f7a6b7b00450b000a20c496f60a3f4b1a Mon Sep 17 00:00:00 2001 From: Alexey Date: Fri, 15 Nov 2024 01:16:08 +0300 Subject: [PATCH 27/27] Remove old commented code --- .../app/transaction/[hash]/TransactionData.js | 164 +----------------- 1 file changed, 8 insertions(+), 156 deletions(-) diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionData.js b/packages/frontend/src/app/transaction/[hash]/TransactionData.js index 9fa89e799..1f3a47a43 100644 --- a/packages/frontend/src/app/transaction/[hash]/TransactionData.js +++ b/packages/frontend/src/app/transaction/[hash]/TransactionData.js @@ -1,4 +1,4 @@ -import Link from 'next/link' +// import Link from 'next/link' import { StateTransitionEnum } from '../../../enums/state.transition.type' // import { Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react' import { ValueCard } from '../../../components/cards' @@ -18,7 +18,7 @@ function TransactionData ({ data }) { value={( - {/*{data?.proTxHash}*/} + {/* {data?.proTxHash} */} )} @@ -62,25 +62,7 @@ function TransactionData ({ data }) { } if (data.type === StateTransitionEnum.DATA_CONTRACT_CREATE) { - return (<> - {/**/} - {/* */} - {/* Created data contract*/} - {/* */} - {/* */} - {/**/} - - {/**/} - {/* */} - {/* Data contract*/} - {/* {data.dataContractId}*/} - {/* */} - {/* */} - {/* Owner*/} - {/* {data.identityId}*/} - {/* */} - {/**/} - ) + return (<>DATA_CONTRACT_CREATE) } if (data.type === StateTransitionEnum.DOCUMENTS_BATCH) { @@ -110,26 +92,6 @@ function TransactionData ({ data }) { // loading={transaction.loading} error={data?.transitions === undefined} /> - - {/**/} - {/* */} - {/* Changed documents*/} - {/* */} - {/* */} - {/**/} - - {/*{data.transitions.map((transition, key) =>*/} - {/* */} - {/* */} - {/* Data contract*/} - {/* {transition.dataContractId}*/} - {/* */} - {/* */} - {/* Document*/} - {/* {transition.id}*/} - {/* */} - {/* */} - {/*)}*/} ) } @@ -152,133 +114,23 @@ function TransactionData ({ data }) { } if (data.type === StateTransitionEnum.IDENTITY_TOP_UP) { - return (<> - {/**/} - {/* */} - {/* Credit top up*/} - {/* */} - {/* */} - {/**/} - - {/**/} - {/* */} - {/* Amount*/} - {/* {data.amount} Credits*/} - {/* */} - {/* */} - {/* Identity*/} - {/* {data.identityId}*/} - {/* */} - {/**/} - ) + return (<>IDENTITY_TOP_UP) } if (data.type === StateTransitionEnum.DATA_CONTRACT_UPDATE) { - return (<> - {/**/} - {/* */} - {/* Updated data contract*/} - {/* */} - {/* */} - {/**/} - - {/**/} - {/* */} - {/* Data contract*/} - {/* {data.dataContractId}*/} - {/* */} - {/* */} - {/* Owner*/} - {/* {data.identityId}*/} - {/* */} - {/* */} - {/* Version*/} - {/* {data.version}*/} - {/* */} - {/**/} - ) + return (<>DATA_CONTRACT_UPDATE) } if (data.type === StateTransitionEnum.IDENTITY_UPDATE) { - return (<> - {/**/} - {/* */} - {/* Updated identity*/} - {/* */} - {/* */} - {/**/} - - {/**/} - {/* */} - {/* Identity*/} - {/* {data.identityId}*/} - {/* */} - {/* */} - {/* Revision*/} - {/* {data.revision}*/} - {/* */} - {/**/} - ) + return (<>IDENTITY_UPDATE) } if (data.type === StateTransitionEnum.IDENTITY_CREDIT_WITHDRAWAL) { - return (<> - {/**/} - {/* */} - {/* Credit withdrawal*/} - {/* */} - {/* */} - {/**/} - - {/**/} - {/* */} - {/* Identity*/} - {/* {data.senderId}*/} - {/* */} - {/* */} - {/* Output script*/} - {/* {data.outputScript}*/} - {/* */} - {/* */} - {/* Amount*/} - {/* {data.amount} Credits*/} - {/* */} - {/* */} - {/* Core fee per byte*/} - {/* {data.coreFeePerByte}*/} - {/* */} - {/* */} - {/* Nonce*/} - {/* {data.nonce}*/} - {/* */} - {/**/} - ) + return (<>IDENTITY_CREDIT_WITHDRAWAL) } if (data.type === StateTransitionEnum.IDENTITY_CREDIT_TRANSFER) { - return (<> - {/**/} - {/* */} - {/* Credit transfer*/} - {/* */} - {/* */} - {/**/} - - {/**/} - {/* */} - {/* Amount*/} - {/* {data.amount} Credits*/} - {/* */} - {/* */} - {/* Sender*/} - {/* {data.senderId}*/} - {/* */} - {/* */} - {/* Recipient*/} - {/* {data.recipientId}*/} - {/* */} - {/**/} - ) + return (<>IDENTITY_CREDIT_TRANSFER) } }